Refund added

counter-frontend/src/index.css

@@ -6,3 +6,18 @@
   --color-background: #f4fbf7;
   --font-inter: "Inter", sans-serif;
 }
+
+/* Tillo Spinner Replacement for Counter Dashboard */
+.animate-spin {
+  animation: none !important;
+  border-color: transparent !important;
+  border-top-color: transparent !important;
+  background-image: url('./assets/tillo_spinner.gif') !important;
+  background-size: contain !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+}
+
+.animate-spin * {
+  display: none !important;
+}

counter-frontend/src/pages/Orders.tsx

@@ -206,6 +206,23 @@ const Orders: React.FC = () => {
     }
   };
 
+  const handleCancelOrder = async (orderId: number) => {
+    if (!window.confirm('Are you sure you want to cancel this order? Tokens will be refunded.')) return;
+    try {
+      const response = await apiFetch(`http://${window.location.hostname}:8080/api/orders/${orderId}/cancel`, {
+        method: 'POST'
+      });
+      if (response.ok) {
+        setShowActionMenu(false);
+        fetchOrders();
+      } else {
+        alert('Failed to cancel order');
+      }
+    } catch (error) {
+      console.error('Error cancelling order:', error);
+    }
+  };
+
   const handleEditOrder = () => {
     if (!selectedOrder) return;
     setEditingItems([...selectedOrder.items]);
@@ -620,6 +637,14 @@ const Orders: React.FC = () => {
                               >
                                 <RotateCcw size={14} className="text-amber-500" /> Mark Undelivered
                               </button>
+                              {selectedOrder.status.toUpperCase() !== 'CANCELLED' && selectedOrder.status.toUpperCase() !== 'COMPLETED' && (
+                                <button 
+                                  onClick={() => handleCancelOrder(selectedOrder.id)}
+                                  className="w-full text-left px-4 py-3 text-xs font-bold text-rose-600 hover:bg-rose-50 flex items-center gap-3 transition-colors cursor-pointer"
+                                >
+                                  <XIcon size={14} className="text-rose-600" /> Cancel Order
+                                </button>
+                              )}
                             </div>
                           )}
                         </div>