diff --git a/RestroHub-FrontEnd/src/components/admin/store/tables/TableCard.jsx b/RestroHub-FrontEnd/src/components/admin/store/tables/TableCard.jsx
index b997ed5e..db8343ff 100644
--- a/RestroHub-FrontEnd/src/components/admin/store/tables/TableCard.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/store/tables/TableCard.jsx
@@ -1,8 +1,9 @@
import { useState } from 'react';
import { QrCode, Edit2, Trash2, Users, Loader2 } from 'lucide-react';
+import api from '@services/common/api';
const TableCard = ({ table, onShowQR, onEdit, onDelete }) => {
- const [deleting, setDeleting] = useState(false);
+ const [saving, setSaving] = useState(false);
const statusStyles = {
available: {
@@ -23,38 +24,43 @@ const TableCard = ({ table, onShowQR, onEdit, onDelete }) => {
dot: 'bg-yellow-500',
numberBg: 'bg-yellow-50',
},
+ inactive: {
+ border: 'border-gray-200 hover:border-gray-300',
+ badge: 'bg-gray-100 text-gray-600',
+ dot: 'bg-gray-400',
+ numberBg: 'bg-gray-50',
+ },
};
- const styles = statusStyles[table.status] || statusStyles.available;
+ const displayStatus = table.isActive ? table.status : 'inactive';
+ const styles = statusStyles[displayStatus] || statusStyles.available;
const handleDelete = async (e) => {
e.stopPropagation();
if (!window.confirm(`Delete Table ${table.number}?`)) return;
+
try {
- setDeleting(true);
- // 🔌 await api.delete(`/api/tables/${table.id}`);
- await new Promise((r) => setTimeout(r, 300));
+ setSaving(true);
+ await api.delete(`/secure/api/v1/tables/${table.id}`);
onDelete(table.id);
} catch (err) {
console.error('Delete failed:', err);
+ alert(err.response?.data?.message || 'Failed to delete table');
} finally {
- setDeleting(false);
+ setSaving(false);
}
};
return (
onShowQR(table)}
+ onClick={() => table.isActive && onShowQR(table)}
className={`
- cursor-pointer overflow-hidden rounded-2xl border-2
- bg-white transition-all duration-200
- hover:shadow-lg
+ overflow-hidden rounded-2xl border-2 bg-white transition-all duration-200
+ ${table.isActive ? 'cursor-pointer hover:shadow-lg' : 'opacity-75'}
${styles.border}
`}
>
- {/* Body */}
- {/* Number Circle */}
{
- {/* Label */}
Table {table.number}
- {/* Capacity */}
{table.capacity} seats
- {/* Status Badge */}
{
`}
>
- {table.status}
+ {displayStatus}
- {/* Actions Footer */}
-
+ {table.isActive && (
+
+ )}