fix: user Orders Dashboard

Backend/database.py

@@ -16,7 +16,15 @@
             {"id": 3, "name": "Pizza", "quantity": 1, "price": 15.5}
         ],
         "total_price": 15.5,
-        "status": "In Transit"
+        "status": "Picked"
+    },
+    {
+        "id": 1236,
+        "items": [
+            {"id": 4, "name": "Salad", "quantity": 2, "price": 8.0}
+        ],
+        "total_price": 16.0,
+        "status": "Pending"
     }
 ]
 

Backend/routes/delivery.py

@@ -21,15 +21,15 @@ async def book_delivery(request: DeliveryRequest):
             }
         ],
         "total_price": 15.0,
-        "status": "Booked"
+        "status": "Pending"
     }
 
     # Update the order list
     db_orders.append(new_order)
 
     return {
         "id": new_id,
-        "status": "Booked",
+        "status": "Pending",
         "pickup_address": request.pickup_address,
         "delivery_address": request.delivery_address,
         "message": "Delivery booked successfully!"

Frontend/frontend/src/pages/Orders.js

@@ -8,7 +8,10 @@ const Orders = () => {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    axios.get('http://127.0.0.1:8000/orders/')
+    const token = localStorage.getItem('token');
+    axios.get('http://127.0.0.1:8000/orders/', {
+      headers: { Authorization: `Bearer ${token}` },
+    })
       .then(response => {
         setOrders(response.data.orders);
         setLoading(false);
@@ -20,7 +23,13 @@ const Orders = () => {
       });
   }, []);
 
-  if (loading) return <div className="page-container">Loading your orders...</div>;
+  if (loading) {
+    return (
+      <div className="page-container center">
+        <div className="loading-spinner" aria-label="Loading your orders" />
+      </div>
+    );
+  }
 
   return (
     <div className="page-container">

Frontend/frontend/src/pages/Page.css

@@ -179,6 +179,26 @@
     color: #757575;
 }
 
+.status.picked {
+    background: #fff4e5;
+    color: #ff9800;
+}
+
+.loading-spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid #f0f0f0;
+    border-top-color: #ff4d4d;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* Profile Box */
 .profile-box {
     background: white;