fix: integrate order status update API with frontend UI

RestroHub-FrontEnd/src/components/admin/orders/orderComponents/OrderCard.jsx

@@ -97,20 +97,30 @@ const OrderCard = ({ order, onStatusUpdate }) => {
   // ------------------------------------
   // HANDLER
   // ------------------------------------
+  // Map frontend status to backend enum
+  const statusMap = {
+    cooking: 'PREPARING',
+    ready: 'READY',
+    billed: 'COMPLETED',
+    complete: 'COMPLETED',
+    pending: 'PENDING',
+  };
+
   const handleAction = async () => {
     if (!action) return;
 
     try {
       setUpdating(true);
 
-      // 🔌 UNCOMMENT WHEN API READY
-      // await api.put(`/api/orders/${order.id}/status`, { status: action.next });
-      // toast.success(`Order #${order.id} → ${action.label}`);
+      const backendStatus = statusMap[action.next] || action.next.toUpperCase();
+
+      await api.patch(`/secure/api/v1/orders/${order.id}/status`, {
+        status: backendStatus,
+      });
 
-      await new Promise((resolve) => setTimeout(resolve, 400));
       onStatusUpdate(order.id, action.next);
     } catch (err) {
-      console.error('Failed to update order:', err);
+      console.error('Failed to update order status:', err);
     } finally {
       setUpdating(false);
     }

RestroHub-FrontEnd/src/components/admin/orders/orderComponents/OrdersGrid.jsx

@@ -3,9 +3,6 @@ import { RefreshCw, AlertCircle, ClipboardList } from 'lucide-react';
 import OrderCard from './OrderCard';
 import api from "@services/common/api";
 
-// ============================================
-// SKELETON (Private)
-// ============================================
 const OrderCardSkeleton = () => (
   <div className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 animate-pulse">
     <div className="flex items-start justify-between mb-4">
@@ -45,21 +42,22 @@ const OrderCardSkeleton = () => (
   </div>
 );
 
-// ============================================
-// MAIN COMPONENT
-// ============================================
-const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
+<<<<<<< HEAD
+// =====================================// MAIN COMPONENT
+// =====================================const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
   const [orders, setOrders] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [refreshing, setRefreshing] = useState(false);
 
+<<<<<<< HEAD
   // Sync orders up to parent so OrderFilters gets real counts
   const syncOrders = (updated) => {
     setOrders(updated);
     onOrdersChange?.(updated);
   };
 
+<<<<<<< HEAD
   // ------------------------------------
   // FALLBACK DATA
   // ------------------------------------
@@ -112,21 +110,15 @@ const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
     },
   ];
 
-  // ------------------------------------
-  // FETCH
-  // ------------------------------------
   useEffect(() => {
     fetchOrders();
-
-    // 🔌 UNCOMMENT: Auto-refresh every 30 seconds
-    // const interval = setInterval(fetchOrders, 30000);
-    // return () => clearInterval(interval);
   }, []);
 
   const fetchOrders = async () => {
     try {
       if (!loading) setRefreshing(true);
       setError(null);
+<<<<<<< HEAD
 
       // 🔌 UNCOMMENT WHEN API READY
       // const response = await api.get('/api/orders');
@@ -138,16 +130,22 @@ const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
     } catch (err) {
       console.error('Failed to fetch orders:', err);
       setError('Failed to load orders');
+      const response = await api.get('/secure/api/v1/orders/branch/1/active');
+      const data = response.data;
+      if (Array.isArray(data) && data.length > 0) {
+        syncOrders(data);
+      } else {
+        syncOrders(fallbackOrders);
+      }
+    } catch (err) {
+      console.warn('API not available, using fallback data:', err);
       syncOrders(fallbackOrders);
     } finally {
       setLoading(false);
       setRefreshing(false);
     }
   };
 
-  // ------------------------------------
-  // HANDLERS
-  // ------------------------------------
   const handleStatusUpdate = (orderId, newStatus) => {
     if (newStatus === 'complete') {
       syncOrders(orders.filter((o) => o.id !== orderId));
@@ -172,9 +170,6 @@ const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
       );
     });
 
-  // ------------------------------------
-  // RENDER
-  // ------------------------------------
   if (loading) {
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
@@ -219,15 +214,12 @@ const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
 
   return (
     <div>
-      {/* Refresh indicator */}
       {refreshing && (
         <div className="flex items-center gap-2 mb-4 text-sm text-blue-600">
           <RefreshCw className="w-4 h-4 animate-spin" />
           <span>Refreshing orders...</span>
         </div>
       )}
-
-      {/* Orders Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         {filteredOrders.map((order) => (
           <OrderCard
@@ -237,8 +229,6 @@ const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
           />
         ))}
       </div>
-
-      {/* Results Count */}
       <div className="mt-4 text-center">
         <p className="text-sm text-gray-500">
           Showing {filteredOrders.length} of {orders.length} orders
@@ -248,4 +238,4 @@ const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
   );
 };
 
-export default OrdersGrid;
+export default OrdersGrid;