Revenue functionality added and Removed the Expenses page

backend/src/main/java/com/rit/canteen/sales/controller/OrderController.java

@@ -120,6 +120,24 @@ public class OrderController {
             }
         }
 
+        if (isStaff()) {
+            Optional<User> posUserOpt = userRepository.findByMobileNumber("0000000000");
+            User posUser;
+            if (posUserOpt.isPresent()) {
+                posUser = posUserOpt.get();
+            } else {
+                posUser = new User();
+                posUser.setMobileNumber("0000000000");
+                posUser.setName("POS");
+                posUser.setPinHash("NOT_APPLICABLE");
+                posUser.setCreatedAt(LocalDateTime.now());
+                posUser.setUpdatedAt(LocalDateTime.now());
+                posUser = userRepository.save(posUser);
+            }
+            order.setUserId(posUser.getId());
+            order.setOrderType("POS");
+        }
+
         if (order.getItems() == null || order.getItems().isEmpty()) {
             return ResponseEntity.badRequest().body(Map.of("success", false, "message", "Order must have items"));
         }

backend/src/main/java/com/rit/canteen/sales/model/DashboardStats.java

@@ -9,6 +9,8 @@ public class DashboardStats {
     private long totalExpenses;
     private long periodExpenses;
     private long suspendedUserCount;
+    private long periodStoreRevenue;
+    private long totalStoreRevenue;
 
     public DashboardStats() {}
 
@@ -23,6 +25,19 @@ public class DashboardStats {
         this.suspendedUserCount = suspendedUserCount;
     }
 
+    public DashboardStats(long totalSales, long periodRevenue, int activeOrders, int dailyCustomers, double growth, long totalExpenses, long periodExpenses, long suspendedUserCount, long periodStoreRevenue, long totalStoreRevenue) {
+        this.totalSales = totalSales;
+        this.periodRevenue = periodRevenue;
+        this.activeOrders = activeOrders;
+        this.dailyCustomers = dailyCustomers;
+        this.growth = growth;
+        this.totalExpenses = totalExpenses;
+        this.periodExpenses = periodExpenses;
+        this.suspendedUserCount = suspendedUserCount;
+        this.periodStoreRevenue = periodStoreRevenue;
+        this.totalStoreRevenue = totalStoreRevenue;
+    }
+
     public long getTotalSales() { return totalSales; }
     public void setTotalSales(long totalSales) { this.totalSales = totalSales; }
 
@@ -46,4 +61,10 @@ public class DashboardStats {
 
     public long getSuspendedUserCount() { return suspendedUserCount; }
     public void setSuspendedUserCount(long suspendedUserCount) { this.suspendedUserCount = suspendedUserCount; }
+
+    public long getPeriodStoreRevenue() { return periodStoreRevenue; }
+    public void setPeriodStoreRevenue(long periodStoreRevenue) { this.periodStoreRevenue = periodStoreRevenue; }
+
+    public long getTotalStoreRevenue() { return totalStoreRevenue; }
+    public void setTotalStoreRevenue(long totalStoreRevenue) { this.totalStoreRevenue = totalStoreRevenue; }
 }

backend/src/main/java/com/rit/canteen/sales/repository/OrderRepository.java

@@ -25,6 +25,12 @@ public interface OrderRepository extends JpaRepository<Order, Long>, JpaSpecific
     @Query("SELECT SUM(o.totalAmount) FROM Order o")
     BigDecimal getTotalRevenue();
 
+    @Query("SELECT SUM(o.totalAmount) FROM Order o WHERE o.status = 'COMPLETED'")
+    BigDecimal getTotalCompletedRevenue();
+
+    @Query("SELECT SUM(o.totalAmount) FROM Order o WHERE o.status = 'COMPLETED' AND (o.orderType = 'POS' OR o.orderType = 'STORE_ORDER' OR o.paymentMethod = 'CASH')")
+    BigDecimal getCompletedStoreRevenue();
+
     @Query("SELECT COUNT(DISTINCT o.userId) FROM Order o WHERE o.createdAt >= :startOfDay")
     long countUniqueUsersToday(@Param("startOfDay") LocalDateTime startOfDay);
 
@@ -34,6 +40,12 @@ public interface OrderRepository extends JpaRepository<Order, Long>, JpaSpecific
     @Query("SELECT SUM(o.totalAmount) FROM Order o WHERE o.createdAt >= :start AND o.createdAt <= :end")
     BigDecimal getRevenuePerPeriod(@Param("start") LocalDateTime start, @Param("end") LocalDateTime end);
 
+    @Query("SELECT SUM(o.totalAmount) FROM Order o WHERE o.status = 'COMPLETED' AND o.createdAt >= :start AND o.createdAt <= :end")
+    BigDecimal getCompletedRevenuePerPeriod(@Param("start") LocalDateTime start, @Param("end") LocalDateTime end);
+
+    @Query("SELECT SUM(o.totalAmount) FROM Order o WHERE o.status = 'COMPLETED' AND (o.orderType = 'POS' OR o.orderType = 'STORE_ORDER' OR o.paymentMethod = 'CASH') AND o.createdAt >= :start AND o.createdAt <= :end")
+    BigDecimal getCompletedStoreRevenuePerPeriod(@Param("start") LocalDateTime start, @Param("end") LocalDateTime end);
+
     List<Order> findTop5ByOrderByCreatedAtDesc();
 
     @Query("SELECT i.stallName, SUM(i.price * i.quantity), COUNT(DISTINCT o.id) " +

backend/src/main/java/com/rit/canteen/sales/service/DashboardService.java

@@ -147,14 +147,14 @@ public class DashboardService {
         LocalDateTime startOfYesterday = LocalDate.now(zone).minusDays(1).atStartOfDay();
         LocalDateTime endOfYesterday = LocalDate.now(zone).minusDays(1).atTime(LocalTime.MAX);
 
-        System.out.println("[DIAGNOSTIC] Fetching Total Revenue...");
+        System.out.println("[DIAGNOSTIC] Fetching Total RITZ Spent...");
-        BigDecimal totalRevenueRaw = tokenTransactionRepository.sumByType(com.rit.canteen.sales.model.TokenTransaction.TransactionType.TOPUP);
+        BigDecimal totalRevenueRaw = tokenTransactionRepository.sumByType(com.rit.canteen.sales.model.TokenTransaction.TransactionType.SPEND);
-        System.out.println("[DIAGNOSTIC] Raw Total Revenue: " + totalRevenueRaw);
+        System.out.println("[DIAGNOSTIC] Raw Total RITZ Spent: " + totalRevenueRaw);
         long totalSales = totalRevenueRaw != null ? totalRevenueRaw.longValue() : 0;
         
-        System.out.println("[DIAGNOSTIC] Fetching Period Revenue for range: " + from + " to " + to);
+        System.out.println("[DIAGNOSTIC] Fetching Period RITZ Spent for range: " + from + " to " + to);
-        BigDecimal periodRevenueRaw = tokenTransactionRepository.sumByTypeInRange(com.rit.canteen.sales.model.TokenTransaction.TransactionType.TOPUP, from, to);
+        BigDecimal periodRevenueRaw = tokenTransactionRepository.sumByTypeInRange(com.rit.canteen.sales.model.TokenTransaction.TransactionType.SPEND, from, to);
-        System.out.println("[DIAGNOSTIC] Raw Period Revenue: " + periodRevenueRaw);
+        System.out.println("[DIAGNOSTIC] Raw Period RITZ Spent: " + periodRevenueRaw);
         long periodRevenue = periodRevenueRaw != null ? periodRevenueRaw.longValue() : 0;
         
         int activeOrders = (int) orderRepository.countByCreatedAtBetween(from, to);
@@ -162,9 +162,9 @@ public class DashboardService {
         
         System.out.println("[REVENUE-TRACE] Active Orders in Range: " + activeOrders + " | Unique Customers: " + dailyCustomers);
 
-        BigDecimal todayRevenue = tokenTransactionRepository.sumByTypeInRange(com.rit.canteen.sales.model.TokenTransaction.TransactionType.TOPUP, startOfToday, endOfToday);
+        BigDecimal todayRevenue = tokenTransactionRepository.sumByTypeInRange(com.rit.canteen.sales.model.TokenTransaction.TransactionType.SPEND, startOfToday, endOfToday);
-        BigDecimal yesterdayRevenue = tokenTransactionRepository.sumByTypeInRange(com.rit.canteen.sales.model.TokenTransaction.TransactionType.TOPUP, startOfYesterday, endOfYesterday);
+        BigDecimal yesterdayRevenue = tokenTransactionRepository.sumByTypeInRange(com.rit.canteen.sales.model.TokenTransaction.TransactionType.SPEND, startOfYesterday, endOfYesterday);
-        System.out.println("[DIAGNOSTIC] Today vs Yesterday: " + todayRevenue + " / " + yesterdayRevenue);
+        System.out.println("[DIAGNOSTIC] Today vs Yesterday SPEND: " + todayRevenue + " / " + yesterdayRevenue);
         
         BigDecimal totalExpensesRaw = purchaseOrderRepository.getTotalPurchaseAmount();
         long totalExpenses = totalExpensesRaw != null ? totalExpensesRaw.longValue() : 0;
@@ -172,6 +172,18 @@ public class DashboardService {
         BigDecimal periodExpensesRaw = purchaseOrderRepository.getTotalPurchaseAmountInRange(from, to);
         long periodExpenses = periodExpensesRaw != null ? periodExpensesRaw.longValue() : 0;
 
+        BigDecimal periodPOSOrdersRaw = orderRepository.getCompletedStoreRevenuePerPeriod(from, to);
+        long periodPOSOrders = periodPOSOrdersRaw != null ? periodPOSOrdersRaw.longValue() : 0;
+        BigDecimal periodTopupsRaw = tokenTransactionRepository.sumByTypeInRange(com.rit.canteen.sales.model.TokenTransaction.TransactionType.TOPUP, from, to);
+        long periodTopups = periodTopupsRaw != null ? periodTopupsRaw.longValue() : 0;
+        long periodStoreRevenue = periodPOSOrders + periodTopups;
+
+        BigDecimal totalPOSOrdersRaw = orderRepository.getCompletedStoreRevenue();
+        long totalPOSOrders = totalPOSOrdersRaw != null ? totalPOSOrdersRaw.longValue() : 0;
+        BigDecimal totalTopupsRaw = tokenTransactionRepository.sumByType(com.rit.canteen.sales.model.TokenTransaction.TransactionType.TOPUP);
+        long totalTopups = totalTopupsRaw != null ? totalTopupsRaw.longValue() : 0;
+        long totalStoreRevenue = totalPOSOrders + totalTopups;
+
         long suspendedUserCount = userRepository.countByIsSuspended(true);
 
         double growth = 0;
@@ -185,7 +197,7 @@ public class DashboardService {
             growth = 100.0;
         }
 
-        return new DashboardStats(totalSales, periodRevenue, activeOrders, dailyCustomers, growth, totalExpenses, periodExpenses, suspendedUserCount);
+        return new DashboardStats(totalSales, periodRevenue, activeOrders, dailyCustomers, growth, totalExpenses, periodExpenses, suspendedUserCount, periodStoreRevenue, totalStoreRevenue);
     }
 
     public ProcurementDashboardData getProcurementDashboardData() {

counter-frontend/src/components/Layout.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
 import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom';
 import { 
-  LayoutDashboard, 
   ShoppingBag, 
   History, 
   Layers, 
   Package, 
   LogOut,
-  Menu,
   Bell,
   Search,
   User

counter-frontend/src/pages/Categories.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { 
   Layers, 
   Package, 
   Search, 
   Plus, 
   Edit2, 
-  Trash2,
   X,
   Check
 } from 'lucide-react';

counter-frontend/src/pages/Orders.tsx

@@ -501,7 +501,7 @@ const Orders: React.FC = () => {
                   </div>
                   <div className="text-right">
                     <div className="text-[10px] text-slate-400 font-medium uppercase mb-0.5">Grand Total</div>
-                    <div className="text-lg font-black text-slate-900 leading-none">₹{order.totalAmount.toFixed(2)}</div>
+                    <div className="text-lg font-black text-slate-900 leading-none">🅡{order.totalAmount.toFixed(2)}</div>
                   </div>
                 </div>
 
@@ -674,9 +674,9 @@ const Orders: React.FC = () => {
                         </div>
                         <div className="flex items-center gap-8">
                            <div className="text-right">
-                              <div className="text-sm font-black text-slate-900">₹{(item.price * item.quantity).toLocaleString()}</div>
+                              <div className="text-sm font-black text-slate-900">🅡{(item.price * item.quantity).toLocaleString()}</div>
                               <div className="text-[10px] font-bold text-slate-400">
-                                {item.quantity} x <span className="text-primary font-black">₹{item.price}</span>
+                                {item.quantity} x <span className="text-primary font-black">🅡{item.price}</span>
                               </div>
                            </div>
                         </div>
@@ -744,7 +744,7 @@ const Orders: React.FC = () => {
 
                    <div className="text-right flex flex-col gap-1 min-w-[250px]">
                       <div className="text-[10px] text-primary/80 uppercase font-black tracking-widest mb-1">Active Grand Total</div>
-                      <div className="text-4xl font-black text-emerald-400 leading-none mb-1">₹{selectedOrder.totalAmount.toLocaleString()}</div>
+                      <div className="text-4xl font-black text-emerald-400 leading-none mb-1">🅡{selectedOrder.totalAmount.toLocaleString()}</div>
                       <div className="text-[10px] text-white/40 font-bold uppercase tracking-[0.2em]">{selectedOrder.status === 'COMPLETED' ? 'Transaction Completed' : 'Transaction Pending Approval'}</div>
                    </div>
                 </div>
@@ -828,7 +828,7 @@ const Orders: React.FC = () => {
                           </div>
                           <div>
                             <div className="font-bold text-slate-800 text-sm">{item.productName}</div>
-                            <div className="text-[10px] font-black text-primary uppercase">₹{item.price} each</div>
+                            <div className="text-[10px] font-black text-primary uppercase">🅡{item.price} each</div>
                           </div>
                         </div>
                         
@@ -849,7 +849,7 @@ const Orders: React.FC = () => {
                             </button>
                           </div>
                           <div className="text-right min-w-[80px]">
-                            <div className="text-sm font-black text-slate-900 leading-none mb-1">₹{(item.price * item.quantity).toFixed(2)}</div>
+                            <div className="text-sm font-black text-slate-900 leading-none mb-1">🅡{(item.price * item.quantity).toFixed(2)}</div>
                             <button 
                               onClick={() => removeItem(idx)}
                               className="text-[10px] font-black text-rose-400 hover:text-rose-600 uppercase tracking-widest transition-colors flex items-center gap-1 active:scale-95 cursor-pointer mx-auto"
@@ -892,7 +892,7 @@ const Orders: React.FC = () => {
                           <div className="font-bold text-slate-800 text-sm group-hover:text-primary transition-colors">{product.name}</div>
                           <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{product.category}</div>
                         </div>
-                        <div className="font-black text-emerald-600 text-xs">₹{product.price}</div>
+                        <div className="font-black text-emerald-600 text-xs">🅡{product.price}</div>
                       </button>
                     ))
                   ) : editSearchQuery ? (
@@ -910,7 +910,7 @@ const Orders: React.FC = () => {
                 <div className="mt-8 pt-8 border-t border-slate-200">
                    <div className="flex justify-between items-center mb-4">
                       <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">New Order Total</span>
-                      <span className="text-2xl font-black text-emerald-600 tracking-tighter">₹{editTotal.toFixed(2)}</span>
+                      <span className="text-2xl font-black text-emerald-600 tracking-tighter">🅡{editTotal.toFixed(2)}</span>
                    </div>
                    <button 
                     onClick={saveOrderEdits}

counter-frontend/src/pages/POS.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import {
   Search,
   ShoppingBag,
@@ -128,10 +128,12 @@ const POS = () => {
         }))
       };
 
+      const token = sessionStorage.getItem('counterToken');
       const response = await fetch(`http://${host}:8080/api/orders`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
+          ...(token ? { 'Authorization': `Bearer ${token}` } : {})
         },
         body: JSON.stringify(orderData),
       });
@@ -143,16 +145,21 @@ const POS = () => {
       } else {
         let errorMessage = "Unknown error";
         try {
-          const err = await response.json();
+          const responseText = await response.text();
-          errorMessage = err.error || err.message || JSON.stringify(err);
+          try {
+            const err = JSON.parse(responseText);
+            errorMessage = err.error || err.message || JSON.stringify(err);
+          } catch (e) {
+            errorMessage = responseText || response.statusText;
+          }
         } catch (e) {
-          errorMessage = await response.text() || response.statusText;
+          errorMessage = response.statusText;
         }
         alert(`Failed to place order: ${errorMessage}`);
       }
     } catch (error) {
-       console.error("Order error:", error);
+      console.error("Order error:", error);
-       alert("Network error while placing order.");
+      alert("Network error while placing order.");
     } finally {
       setLoading(false);
     }
@@ -171,11 +178,10 @@ const POS = () => {
                 <button
                   key={catName}
                   onClick={() => setActiveCategory(catName)}
-                  className={`flex items-center gap-2 px-6 py-3 rounded-xl text-xs font-black transition-all border-2 whitespace-nowrap ${
+                  className={`flex items-center gap-2 px-6 py-3 rounded-xl text-xs font-black transition-all border-2 whitespace-nowrap ${activeCategory === catName
-                    activeCategory === catName
                       ? 'bg-primary text-white border-primary shadow-lg shadow-primary/20'
                       : 'bg-white text-slate-400 border-indigo-50 hover:border-primary/30'
-                  }`}
+                    }`}
                 >
                   <Icon size={16} />
                   {catName}
@@ -204,8 +210,8 @@ const POS = () => {
             </div>
           ) : filteredProducts.length === 0 ? (
             <div className="flex-1 flex flex-col items-center justify-center text-slate-400">
-               <ShoppingBag size={64} className="mb-4 opacity-20" />
+              <ShoppingBag size={64} className="mb-4 opacity-20" />
-               <p className="font-bold">No products found</p>
+              <p className="font-bold">No products found</p>
             </div>
           ) : (
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
@@ -218,26 +224,25 @@ const POS = () => {
                   className="bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-xl hover:border-primary/20 transition-all cursor-pointer group flex flex-col relative"
                 >
                   <div className="absolute top-4 right-4 z-10">
-                     <span className={`px-2.5 py-1 rounded-lg text-[10px] font-black border uppercase tracking-wider ${
+                    <span className={`px-2.5 py-1 rounded-lg text-[10px] font-black border uppercase tracking-wider ${(product.stock || 0) < 20 ? 'bg-rose-50 text-rose-500 border-rose-100' : 'bg-emerald-50 text-emerald-500 border-emerald-100'
-                       (product.stock || 0) < 20 ? 'bg-rose-50 text-rose-500 border-rose-100' : 'bg-emerald-50 text-emerald-500 border-emerald-100'
+                      }`}>
-                     }`}>
+                      {product.stock || 0} left
-                        {product.stock || 0} left
+                    </span>
-                     </span>
                   </div>
 
                   <div className="aspect-square bg-slate-50 rounded-2xl mb-4 flex items-center justify-center text-slate-200 group-hover:bg-primary/5 transition-colors overflow-hidden">
-                     {product.imageData ? (
+                    {product.imageData ? (
-                       <img src={product.imageData} alt={product.name} className="w-full h-full object-cover" />
+                      <img src={product.imageData} alt={product.name} className="w-full h-full object-cover" />
-                     ) : (
+                    ) : (
-                       <ShoppingBag size={48} />
+                      <ShoppingBag size={48} />
-                     )}
+                    )}
                   </div>
 
                   <h3 className="text-xs font-black text-slate-800 leading-snug mb-1 line-clamp-2 uppercase">
                     {product.name}
                   </h3>
                   <div className="mt-auto">
-                     <p className="text-lg font-black text-primary">₹{product.price}</p>
+                    <p className="text-lg font-black text-primary">🅡{product.price}</p>
                   </div>
                 </motion.div>
               ))}
@@ -249,29 +254,29 @@ const POS = () => {
       {/* Right Section: Current Order */}
       <div className="w-[450px] bg-white border-l border-slate-200 flex flex-col shadow-[-10px_0_30px_rgba(0,0,0,0.02)]">
         <div className="p-6 border-b border-slate-100 flex justify-between items-center">
-           <div>
+          <div>
-              <h2 className="text-xl font-black text-slate-900 tracking-tight">Current Order</h2>
+            <h2 className="text-xl font-black text-slate-900 tracking-tight">Current Order</h2>
-              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1.5 mt-0.5">
+            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1.5 mt-0.5">
-                <Phone size={10} className="text-primary" /> +91 9043941910
+              <Phone size={10} className="text-primary" /> +91 9043941910
-              </p>
+            </p>
-           </div>
+          </div>
-           <div className="flex items-center gap-3">
+          <div className="flex items-center gap-3">
-              <button className="px-4 py-2 bg-slate-50 text-slate-600 rounded-xl text-[10px] font-black uppercase hover:bg-slate-100 transition-colors">View Orders</button>
+            <button className="px-4 py-2 bg-slate-50 text-slate-600 rounded-xl text-[10px] font-black uppercase hover:bg-slate-100 transition-colors">View Orders</button>
-              <span className="bg-primary text-white text-[10px] font-black px-3 py-1.5 rounded-lg uppercase shadow-lg shadow-primary/20">{cart.length} items</span>
+            <span className="bg-primary text-white text-[10px] font-black px-3 py-1.5 rounded-lg uppercase shadow-lg shadow-primary/20">{cart.length} items</span>
-           </div>
+          </div>
         </div>
 
         <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4 custom-scrollbar">
           <AnimatePresence mode="popLayout">
             {cart.length === 0 ? (
               <div className="flex-1 flex flex-col items-center justify-center text-center text-slate-400 gap-4">
-                 <div className="w-20 h-20 bg-slate-50 rounded-3xl flex items-center justify-center">
+                <div className="w-20 h-20 bg-slate-50 rounded-3xl flex items-center justify-center">
-                   <ShoppingBag size={40} className="text-slate-200" />
+                  <ShoppingBag size={40} className="text-slate-200" />
-                 </div>
+                </div>
-                 <div>
+                <div>
-                   <h3 className="font-black text-slate-600">Cart is empty</h3>
+                  <h3 className="font-black text-slate-600">Cart is empty</h3>
-                   <p className="text-xs font-medium">Select products to start billing</p>
+                  <p className="text-xs font-medium">Select products to start billing</p>
-                 </div>
+                </div>
               </div>
             ) : (
               cart.map((item) => (
@@ -286,7 +291,7 @@ const POS = () => {
                   <div className="flex justify-between items-start mb-4">
                     <div className="flex-1 pr-12">
                       <h4 className="text-[11px] font-black text-slate-800 uppercase tracking-tight leading-tight">{item.name}</h4>
-                      <p className="text-[10px] font-bold text-[#42ab7e] mt-1 uppercase">₹{item.price} each</p>
+                      <p className="text-[10px] font-bold text-[#42ab7e] mt-1 uppercase">🅡{item.price} each</p>
                     </div>
                     <button
                       onClick={() => removeFromCart(item.id)}
@@ -313,7 +318,7 @@ const POS = () => {
                       </button>
                     </div>
                     <div className="text-right">
-                       <p className="text-lg font-black text-slate-900 tracking-tight">₹{item.price * item.quantity}</p>
+                      <p className="text-lg font-black text-slate-900 tracking-tight">🅡{item.price * item.quantity}</p>
                     </div>
                   </div>
                 </motion.div>
@@ -323,22 +328,23 @@ const POS = () => {
         </div>
 
         <div className="p-8 bg-slate-50 border-t border-slate-200 shadow-[0_-10px_40px_rgba(0,0,0,0.03)] rounded-t-[3rem]">
-           <div className="flex justify-between items-center mb-6">
+          <div className="flex justify-between items-center mb-6">
-              <span className="text-lg font-black text-slate-900">Total:</span>
+            <span className="text-lg font-black text-slate-900">Total:</span>
-              <span className="text-4xl font-black text-primary tracking-tighter">₹{total}</span>
+            <span className="text-4xl font-black text-primary tracking-tighter">🅡{total}</span>
-           </div>
+          </div>
 
-           <button 
+          <button
             disabled={cart.length === 0}
             onClick={handleCompleteOrder}
             className="w-full bg-primary text-white py-5 rounded-[2rem] font-black text-sm uppercase tracking-[0.2em] shadow-2xl shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all disabled:opacity-50 disabled:scale-100 disabled:shadow-none"
-           >
+          >
-             Complete Order
+            Complete Order
-           </button>
+          </button>
         </div>
       </div>
 
-      <style dangerouslySetInnerHTML={{ __html: `
+      <style dangerouslySetInnerHTML={{
+        __html: `
         .no-scrollbar::-webkit-scrollbar { display: none; }
         .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
         .custom-scrollbar::-webkit-scrollbar { width: 5px; }

counter-frontend/src/pages/Products.tsx

@@ -1,20 +1,14 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { 
   Plus, 
   X, 
   Search, 
-  RefreshCw, 
   Edit2, 
   Trash2, 
   Database,
   ShoppingBag,
   Package,
-  Clock,
   Check,
-  Power,
-  PowerOff,
-  Tag,
-  Barcode,
   Image as ImageIcon
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -288,7 +282,7 @@ const Products = () => {
                        </div>
                      )}
                      <div className="absolute top-6 left-6 flex flex-col gap-2">
-                        <span className="bg-white/90 backdrop-blur px-3 py-1 rounded-xl text-[9px] font-black uppercase text-primary border border-primary/10 shadow-sm">₹{prod.price}</span>
+                        <span className="bg-white/90 backdrop-blur px-3 py-1 rounded-xl text-[9px] font-black uppercase text-primary border border-primary/10 shadow-sm">🅡{prod.price}</span>
                      </div>
                      <div className="absolute top-6 right-6 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
                         <button 
@@ -384,7 +378,7 @@ const Products = () => {
                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4 mb-2 block">Pricing & Value</label>
                        <div className="grid grid-cols-2 gap-4">
                           <div className="relative">
-                             <span className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 font-bold">₹</span>
+                             <span className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 font-bold">🅡</span>
                              <input type="number" placeholder="MRP Price" value={formData.price} onChange={(e) => setFormData({...formData, price: parseFloat(e.target.value) || 0})} className="w-full bg-slate-50 border border-slate-100 rounded-2xl py-5 pl-10 pr-8 text-sm font-black outline-none focus:bg-white focus:ring-4 focus:ring-primary/5 focus:border-primary transition-all text-primary" />
                           </div>
                           <input type="number" placeholder="Inventory Count" value={formData.stock} onChange={(e) => setFormData({...formData, stock: parseInt(e.target.value) || 0})} className="bg-slate-50 border border-slate-100 rounded-2xl py-5 px-8 text-sm font-bold outline-none focus:bg-white focus:ring-4 focus:ring-primary/5 focus:border-primary transition-all" />

frontend/src/App.tsx

@@ -36,16 +36,6 @@ const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
 };
 
-const PlaceholderPage = ({ title }: { title: string }) => (
-  <div className="p-8">
-    <h1 className="text-2xl font-bold text-[#1e293b]">{title}</h1>
-    <div className="mt-8 p-12 border-2 border-dashed border-[#e2e8f0] rounded-xl flex flex-col items-center justify-center text-[#64748b]">
-      <p className="text-lg font-medium">This page is under development</p>
-      <p className="text-sm">We're working hard to bring you the best experience for {title}.</p>
-    </div>
-  </div>
-);
-
 function App() {
   return (
     <Router>
@@ -88,10 +78,6 @@ function App() {
           <Route path="inventory/products" element={<Products />} />
           <Route path="inventory/online" element={<Navigate to="/inventory/products" replace />} />
           
-          {/* Expense */}
-          <Route path="expense/overview" element={<PlaceholderPage title="Expense Overview" />} />
-          <Route path="expense/category" element={<PlaceholderPage title="Expense Category" />} />
-          
           {/* Others */}
           <Route path="reports" element={<Reports />} />
           <Route path="feedback" element={<Feedback />} />

frontend/src/components/Sidebar.tsx

@@ -3,15 +3,12 @@ import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import {
   BarChart3,
   ChevronRight,
-  CreditCard,
   Gauge,
   LayoutGrid,
   MessageSquare,
   ShoppingCart,
   Store,
-  Table2,
   Users,
-  Wallet,
   ShoppingBag,
   Receipt,
   Search,
@@ -94,14 +91,6 @@ const menuItems: MenuItem[] = [
       { title: 'Products', path: '/inventory/products' }
     ]
   },
-  {
-    title: 'Expense',
-    icon: Wallet,
-    subMenu: [
-      { title: 'Overview', path: '/expense/overview' },
-      { title: 'Category', path: '/expense/category' }
-    ]
-  },
   { title: 'Reports', icon: BarChart3, path: '/reports' },
   {
     title: 'Stores',
@@ -147,7 +136,6 @@ const Sidebar = () => {
       'Customers': 'customers',
       'Purchases': 'purchases',
       'Inventory': 'inventory',
-      'Expense': 'expense',
       'Reports': 'reports',
       'Stores': 'stores',
       'Feedback': 'feedback',

frontend/src/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { apiFetch } from '../api';
+import { apiFetch } from '../api';
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
@@ -222,7 +222,7 @@ const Dashboard = () => {
                         </defs>
                         <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                         <XAxis dataKey="time" axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 700 }} />
-                        <YAxis axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 700 }} tickFormatter={(v) => v >= 1000 ? `₹${v / 1000}k` : `₹${v}`} />
+                        <YAxis axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 700 }} tickFormatter={(v) => v >= 1000 ? `🅡${v / 1000}k` : `🅡${v}`} />
                         <Tooltip contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }} />
                         <Area type="monotone" dataKey="value" stroke="#f43f5e" strokeWidth={3} fillOpacity={1} fill="url(#colorSalesMain)" />
                      </AreaChart>
@@ -260,9 +260,9 @@ const Dashboard = () => {
                      </PieChart>
                   </ResponsiveContainer>
                   <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
-                     <h2 className="text-3xl font-black text-slate-800 tracking-tighter">₹{(stats.periodRevenue || 0).toLocaleString()}</h2>
+                     <h2 className="text-3xl font-black text-slate-800 tracking-tighter">🅡{(stats.periodRevenue || 0).toLocaleString()}</h2>
                      <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">{timeRange === 'Today' ? 'Today' : timeRange}</p>
-                     <p className="text-[8px] font-bold text-slate-300 uppercase tracking-widest mt-0.5">Total: ₹{(stats.totalSales || 0).toLocaleString()}</p>
+                     <p className="text-[8px] font-bold text-slate-300 uppercase tracking-widest mt-0.5">Total: 🅡{(stats.totalSales || 0).toLocaleString()}</p>
                   </div>
                   <div className="flex gap-6 mt-2">
                      {pieData.map(item => (
@@ -404,7 +404,7 @@ const Dashboard = () => {
                         className={`p-5 rounded-2xl border transition-all cursor-default ${insight.color || 'border-slate-100 bg-slate-50/50 hover:bg-white hover:shadow-md hover:border-transparent'}`}
                      >
                         <p className="text-[11px] font-black text-slate-600 leading-relaxed uppercase tracking-tight">
-                           {(insight.text || insight).replace(/R(?=[0-9])/g, '₹')}
+                           {(insight.text || insight).replace(/R(?=[0-9])/g, '🅡')}
                         </p>
                      </motion.div>
                   ))}
@@ -433,7 +433,7 @@ const Dashboard = () => {
                         <div className="grid grid-cols-4 gap-4">
                            <div className="space-y-1.5">
                               <p className="text-[9px] font-black text-rose-500 uppercase tracking-widest opacity-60">Gross Sale</p>
-                              <p className="text-lg font-black text-slate-800 tracking-tighter">₹{Number(store.sale).toLocaleString()}</p>
+                              <p className="text-lg font-black text-slate-800 tracking-tighter">🅡{Number(store.sale).toLocaleString()}</p>
                            </div>
                            <div className="space-y-1.5">
                               <p className="text-[9px] font-black text-blue-500 uppercase tracking-widest opacity-60">Volume</p>

frontend/src/pages/StoreDashboard.tsx

@@ -121,7 +121,7 @@ const StoreDashboard = () => {
 
                if (data.stats) {
                   setStats({
-                     totalSales: data.stats.totalSales,
+                     totalSales: data.stats.periodStoreRevenue,
                      activeOrders: data.stats.activeOrders,
                      dailyCustomers: data.stats.dailyCustomers,
                      revenueGrowth: data.stats.growth,
@@ -134,7 +134,7 @@ const StoreDashboard = () => {
                   if (ritStore) {
                      setStats(prev => ({
                         ...prev,
-                        totalSales: ritStore.sale,
+                        totalSales: data.stats.periodStoreRevenue,
                         activeOrders: ritStore.orders,
                         dailyCustomers: ritStore.orders * 0.9,
                      }));
@@ -260,7 +260,7 @@ const StoreDashboard = () => {
                      </PieChart>
                   </ResponsiveContainer>
                   <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
-                     <h2 className="text-3xl font-black text-slate-800 tracking-tighter">R{formatCurrency(stats.totalSales)}</h2>
+                     <h2 className="text-3xl font-black text-slate-800 tracking-tighter">₹{formatCurrency(stats.totalSales)}</h2>
                   </div>
                   <div className="flex gap-6 mt-4">
                      <div className="flex items-center gap-2">

frontend/tsconfig.app.json

@@ -16,8 +16,8 @@
     "jsx": "react-jsx",
 
     /* Linting */
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true
   },

ordering_site/src/components/BottomNav.css

@@ -1,14 +1,11 @@
 .bottom-nav {
-  position: fixed;
+  position: absolute;
   bottom: 0;
-  left: 50%;
+  left: 0;
-  transform: translateX(-50%);
   width: 100%;
-  max-width: 600px;
+  height: 72px;
-  height: 65px;
   background: var(--surface);
-  backdrop-filter: blur(16px);
+  box-shadow: 0 -8px 24px rgba(92, 110, 88, 0.05);
-  -webkit-backdrop-filter: blur(16px);
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -24,21 +21,33 @@
   justify-content: center;
   flex: 1;
   height: 100%;
-  color: var(--text-mid);
+  color: #8b938c;
   gap: 4px;
-  transition: all 0.2s ease;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
 }
 
 .nav-item.active {
   color: var(--primary);
 }
 
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  top: 4px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--primary);
+}
+
 .nav-label {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 600;
+  letter-spacing: 0.2px;
 }
 
 /* Add safe area padding to containers when nav is visible */
 .container:has(.bottom-nav) {
-  padding-bottom: 75px !important;
+  padding-bottom: 72px !important;
 }

ordering_site/src/components/CartTab.tsx

@@ -23,7 +23,7 @@ const CartTab: React.FC = () => {
               {totalItems} {totalItems === 1 ? 'item' : 'items'}
             </span>
           </div>
-          <div className="cart-total">R{totalPrice.toFixed(0)}</div>
+          <div className="cart-total">🅡{totalPrice.toFixed(0)}</div>
         </div>
         
         <button className="place-order-btn" onClick={() => navigate('/checkout')}>

ordering_site/src/components/Header.css

@@ -2,34 +2,39 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 12px;
+  padding: 16px 20px;
   background-color: var(--surface);
   position: sticky;
   top: 0;
   z-index: 100;
   min-height: 64px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: none;
   gap: 8px;
 }
 
 .header-left {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   flex: 1;
-  min-width: 0; /* Important for text truncation */
+  min-width: 0;
 }
 
 .back-button {
-  width: 32px;
+  width: 36px;
-  height: 32px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--bg);
+  background-color: var(--primary-light);
   border-radius: 50%;
   color: var(--text-dark);
   flex-shrink: 0;
+  transition: all 0.2s ease;
+}
+
+.back-button:hover {
+  transform: scale(1.05);
 }
 
 .header-logo-container {
@@ -39,7 +44,7 @@
 }
 
 .header-logo {
-  height: 44px;
+  height: 36px;
   width: auto;
   object-fit: contain;
   cursor: pointer;
@@ -51,22 +56,24 @@
 }
 
 .header-tagline {
-  font-size: 8px;
+  font-size: 9px;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--primary);
-  margin-top: 1px;
+  margin-top: 2px;
-  font-style: italic;
+  font-style: normal;
-  letter-spacing: 0.2px;
+  letter-spacing: 0.5px;
   line-height: 1;
+  opacity: 0.8;
 }
 
 .header-title {
-  font-size: 1.1rem;
+  font-size: 1.25rem;
-  font-weight: 700;
+  font-weight: 750;
   color: var(--text-dark);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  letter-spacing: -0.5px;
 }
 
 .location-picker {
@@ -97,7 +104,7 @@
 .header-right {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 10px;
   flex-shrink: 0;
 }
 
@@ -118,20 +125,26 @@
 }
 
 .icon-button {
-  width: 34px;
+  width: 36px;
-  height: 34px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--bg);
+  background-color: transparent;
   border-radius: 50%;
-  color: var(--text-mid);
+  color: var(--text-dark);
   flex-shrink: 0;
+  transition: all 0.2s ease;
+}
+
+.icon-button:hover {
+  background-color: var(--primary-light);
+  transform: scale(1.05);
 }
 
 .icon-button.profile {
-  background-color: var(--primary);
+  background-color: var(--primary-light);
-  color: white;
+  color: var(--primary);
 }
 
 

ordering_site/src/components/Header.tsx

@@ -73,7 +73,7 @@ const Header: React.FC<HeaderProps> = ({ title, onBack, showCart = true }) => {
             {totalItems > 0 ? (
               <>
                 <span className="cart-count">{totalItems}</span>
-                <span className="cart-price">R{totalPrice.toFixed(2)}</span>
+                <span className="cart-price">🅡{totalPrice.toFixed(2)}</span>
               </>
             ) : (
               <span className="cart-text">Cart</span>

ordering_site/src/components/ItemCard.css

@@ -1,237 +1,372 @@
-.item-card {
+/* Carousel Card styles */
-  display: flex;
+.item-card-carousel {
-  padding: 16px;
+  width: 155px;
-  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
-  gap: 12px;
+  background-color: var(--surface);
-  cursor: pointer;
+  border-radius: 24px;
-  min-width: 0;
+  padding: 12px;
-}
+  border: 1px solid var(--border);
-
-.item-card.last {
-  border-bottom: none;
-}
-
-.item-card.out-of-stock {
-  opacity: 0.6;
-  filter: grayscale(0.4);
-}
-
-.out-of-stock-badge {
-  background-color: #f3f4f6;
-  color: #6b7280;
-  font-size: 0.65rem;
-  font-weight: 700;
-  padding: 1px 6px;
-  border-radius: 20px;
-  white-space: nowrap;
-}
-
-.item-info {
-  flex: 1;
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  position: relative;
+  box-shadow: 0 4px 12px rgba(92, 110, 88, 0.03);
+  margin-right: 12px;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.item-labels {
+.item-card-carousel:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(92, 110, 88, 0.08);
+}
+
+.carousel-rating-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  border-radius: 12px;
+  padding: 2px 6px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 3px;
-  margin-bottom: 4px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--text-dark);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  z-index: 2;
 }
 
-.veg-icon {
+.star-icon-filled {
-  width: 14px;
+  color: var(--star);
-  height: 14px;
+  fill: var(--star);
-  border: 2px solid;
+}
-  border-radius: 2px;
+
+.carousel-image-container {
+  width: 100%;
+  height: 90px;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  margin-bottom: 8px;
 }
 
-.veg-icon.veg {
+.carousel-image {
-  border-color: var(--green);
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.1));
 }
 
-.veg-icon.non-veg {
+.carousel-placeholder {
-  border-color: var(--red);
+  width: 70px;
-}
+  height: 70px;
-
-.veg-icon .dot {
-  width: 6px;
-  height: 6px;
   border-radius: 50%;
-}
+  background-color: var(--primary-light);
-
-.veg-icon.veg .dot {
-  background-color: var(--green);
-}
-
-.veg-icon.non-veg .dot {
-  background-color: var(--red);
-}
-
-.bestseller-badge {
-  background-color: #f5f0ff;
-  color: #7c3aed;
-  font-size: 0.65rem;
-  font-weight: 700;
-  padding: 1px 6px;
-  border-radius: 20px;
-  white-space: nowrap;
-}
-
-.item-name {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--text-dark);
-  margin-bottom: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-}
-
-.item-price {
-  font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--text-dark);
-  margin-bottom: 4px;
-}
-
-.item-rating {
   display: flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  font-size: 24px;
+}
+
+.carousel-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.carousel-item-name {
+  font-size: 13px;
+  font-weight: 750;
+  color: var(--text-dark);
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.2px;
+}
+
+.carousel-vendor {
+  font-size: 10px;
+  color: var(--text-mid);
   margin-bottom: 6px;
 }
 
-.rating-text {
+.carousel-meta-row {
-  font-size: 0.75rem;
+  display: flex;
-  color: var(--text-mid);
+  align-items: center;
+  gap: 4px;
+  font-size: 9px;
+  color: var(--text-light);
+  margin-bottom: 10px;
 }
 
-.item-description {
+.meta-item {
-  font-size: 0.8rem;
+  display: flex;
-  color: var(--text-mid);
+  align-items: center;
-  display: -webkit-box;
+  gap: 3px;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  line-height: 1.4;
 }
 
-.item-image-container {
+.meta-separator {
-  width: 100px;
+  color: var(--border);
-  height: 100px;
-  position: relative;
-  margin-bottom: 14px;
-  flex-shrink: 0;
 }
 
-@media (max-width: 360px) {
+.carousel-footer {
-  .item-image-container {
+  display: flex;
-    width: 80px;
+  justify-content: space-between;
-    height: 80px;
+  align-items: center;
-  }
+  margin-top: auto;
 }
 
-.item-image, .item-image-placeholder {
+.carousel-price {
-  width: 100%;
+  font-size: 13px;
-  height: 100%;
+  font-weight: 800;
-  object-fit: cover;
+  color: var(--text-dark);
-  border-radius: 12px;
-  background-color: var(--primary-light);
 }
 
-.item-image-placeholder {
+.carousel-action-container {
+  display: flex;
+  align-items: center;
+}
+
+.carousel-plus-btn {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background-color: #000000;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--primary-light);
+  transition: transform 0.15s ease;
-  border: 1px solid var(--border);
 }
 
-.placeholder-icon {
+.carousel-plus-btn:hover {
-  font-size: 1.8rem;
+  transform: scale(1.1);
-  opacity: 0.6;
 }
 
-.add-to-cart-container {
+.carousel-qty-controls {
-  position: absolute;
-  bottom: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: var(--surface);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-  border: 1px solid var(--border);
-  min-width: 80px;
-  display: flex;
-  justify-content: center;
-}
-
-.add-button {
-  padding: 8px 12px;
-  font-weight: 800;
-  font-size: 0.85rem;
-  color: var(--primary);
-  width: 100%;
-  transition: all 0.2s ease;
-}
-
-.add-button:hover {
-  background-color: var(--primary-light);
-}
-
-.quantity-controls {
   display: flex;
   align-items: center;
-  gap: 8px;
+  background-color: #f1f3f1;
-  padding: 4px 6px;
+  border-radius: 20px;
+  padding: 2px;
+  gap: 6px;
 }
 
-.quantity-controls button {
+.carousel-qty-controls button {
-  width: 24px;
+  width: 22px;
-  height: 24px;
+  height: 22px;
-  background-color: var(--primary-light);
+  border-radius: 50%;
-  color: var(--primary);
+  background-color: #ffffff;
-  border-radius: 6px;
+  color: var(--text-dark);
-  font-size: 1.1rem;
+  font-size: 12px;
-  font-weight: 800;
+  font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 }
 
-.quantity {
+.carousel-qty {
-  font-weight: 800;
+  font-size: 11px;
-  font-size: 0.9rem;
+  font-weight: 750;
-  color: var(--primary);
+  min-width: 12px;
-  min-width: 16px;
   text-align: center;
 }
 
-.limit-badge {
+/* List Card styles */
-  background-color: #fef2f2;
+.item-card-list {
-  color: #ef4444;
+  display: flex;
-  font-size: 0.65rem;
+  gap: 14px;
+  padding: 12px;
+  background-color: var(--surface);
+  border-radius: 24px;
+  border: 1px solid var(--border);
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.item-card-list:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(92, 110, 88, 0.04);
+}
+
+.list-image-container {
+  width: 90px;
+  height: 90px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.list-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 18px;
+}
+
+.list-placeholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  background-color: var(--primary-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+
+.bestseller-badge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  background-color: #5c6e58;
+  color: #ffffff;
+  font-size: 8px;
   font-weight: 700;
-  padding: 1px 6px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  letter-spacing: 0.2px;
+  text-transform: uppercase;
+}
+
+.soldout-badge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  background-color: #ff4d4f;
+  color: #ffffff;
+  font-size: 8px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 6px;
+  text-transform: uppercase;
+}
+
+.list-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.list-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.list-item-name {
+  font-size: 14px;
+  font-weight: 750;
+  color: var(--text-dark);
+  line-height: 1.2;
+}
+
+.list-rating-badge {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-dark);
+  background-color: #fcfcfc;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1px 5px;
+  flex-shrink: 0;
+}
+
+.list-vendor {
+  font-size: 11px;
+  color: var(--text-mid);
+  margin-top: 1px;
+}
+
+.list-address {
+  font-size: 9px;
+  color: var(--text-light);
+  margin-top: 1px;
+}
+
+.list-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.list-price {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--text-dark);
+}
+
+.list-action-container {
+  display: flex;
+  align-items: center;
+}
+
+.list-add-btn {
+  background-color: #000000;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 6px 14px;
   border-radius: 20px;
-  white-space: nowrap;
+  display: flex;
-  border: 1px solid #fee2e2;
+  align-items: center;
+  gap: 4px;
+  transition: transform 0.15s ease;
 }
 
-.at-limit button:last-child {
+.list-add-btn:hover {
-  opacity: 0.3;
+  transform: scale(1.05);
-  cursor: not-allowed;
-  background-color: #f1f5f9;
 }
 
-.item-card.limit-reached {
+.list-qty-controls {
-  border-left: 3px solid #ef4444;
+  display: flex;
+  align-items: center;
+  background-color: #f1f3f1;
+  border-radius: 20px;
+  padding: 2px;
+  gap: 8px;
+}
+
+.list-qty-controls button {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  color: var(--text-dark);
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.list-qty {
+  font-size: 12px;
+  font-weight: 750;
+  min-width: 14px;
+  text-align: center;
+}
+
+/* Out of Stock and Limit Styles */
+.out-of-stock {
+  opacity: 0.6;
+}
+
+.item-card-list.limit-reached {
+  border-left: 3px solid #ff4d4f;
 }

ordering_site/src/components/ItemCard.tsx

@@ -2,68 +2,126 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import type { FoodItem } from '../types';
 import { useCart } from '../contexts/CartContext';
+import { Star } from 'lucide-react';
 import './ItemCard.css';
 
 interface ItemCardProps {
   item: FoodItem;
   isLast?: boolean;
+  variant?: 'carousel' | 'list';
 }
 
-const ItemCard: React.FC<ItemCardProps> = ({ item, isLast }) => {
+const ItemCard: React.FC<ItemCardProps> = ({ item, isLast, variant = 'list' }) => {
   const navigate = useNavigate();
   const { addToCart, updateQuantity, getItemQuantity } = useCart();
   const quantity = getItemQuantity(item.id);
   const isLimitReached = item.stock !== undefined && quantity >= item.stock && item.stock > 0;
 
-  return (
+  // Visual helper values matching mockup metadata
-    <div 
+  const rating = 4.5;
-      className={`item-card ${isLast ? 'last' : ''} ${item.stock === 0 ? 'out-of-stock' : ''} ${isLimitReached ? 'limit-reached' : ''}`} 
+
-      onClick={() => navigate(`/item/${item.id}`)}
+  if (variant === 'carousel') {
-    >
+    return (
-      <div className="item-info">
+      <div 
-        <div className="item-labels">
+        className={`item-card-carousel ${item.stock === 0 ? 'out-of-stock' : ''}`}
-          <div className={`veg-icon ${item.isVeg ? 'veg' : 'non-veg'}`}>
+        onClick={() => navigate(`/item/${item.id}`)}
-            <div className="dot" />
+      >
-          </div>
+        <div className="carousel-rating-badge">
-          {item.isPopular && <span className="bestseller-badge">Popular</span>}
+          <Star size={10} fill="currentColor" className="star-icon-filled" />
-          {item.stock === 0 && <span className="out-of-stock-badge">Out of Stock</span>}
+          <span>{rating}</span>
-          {isLimitReached && <span className="limit-badge">Only {item.stock} left</span>}
         </div>
 
-        <h3 className="item-name">{item.name}</h3>
+        <div className="carousel-image-container">
-        <p className="item-price">R{item.price.toFixed(2)}</p>
+          {item.image ? (
+            <img src={item.image} alt={item.name} className="carousel-image" />
+          ) : (
+            <div className="carousel-placeholder">🍲</div>
+          )}
+        </div>
 
-        <p className="item-description">{item.description}</p>
+        <div className="carousel-info">
+          <h3 className="carousel-item-name">{item.name}</h3>
+          <p className="carousel-vendor">{item.stallName || 'Cookie Heaven'}</p>
+
+          <div className="carousel-footer" onClick={(e) => e.stopPropagation()}>
+            <span className="carousel-price">🅡{item.price.toFixed(2)}</span>
+            <div className="carousel-action-container">
+              {quantity === 0 ? (
+                <button 
+                  className="carousel-plus-btn"
+                  onClick={() => addToCart(item)}
+                  disabled={item.stock === 0}
+                >
+                  +
+                </button>
+              ) : (
+                <div className="carousel-qty-controls">
+                  <button onClick={() => updateQuantity(item.id, -1)}>−</button>
+                  <span className="carousel-qty">{quantity}</span>
+                  <button 
+                    onClick={() => addToCart(item)}
+                    disabled={isLimitReached}
+                  >+</button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // default 'list' layout
+  return (
+    <div 
+      className={`item-card-list ${isLast ? 'last' : ''} ${item.stock === 0 ? 'out-of-stock' : ''} ${isLimitReached ? 'limit-reached' : ''}`} 
+      onClick={() => navigate(`/item/${item.id}`)}
+    >
+      <div className="list-image-container" onClick={(e) => e.stopPropagation()}>
+        {item.image ? (
+          <img src={item.image} alt={item.name} className="list-image" />
+        ) : (
+          <div className="list-placeholder">🍲</div>
+        )}
+        {item.isPopular && <span className="bestseller-badge">Bestseller</span>}
+        {item.stock === 0 && <span className="soldout-badge">Sold Out</span>}
       </div>
 
-      <div className="item-image-container" onClick={(e) => e.stopPropagation()}>
+      <div className="list-info">
-        {item.image ? (
+        <div className="list-title-row">
-          <img src={item.image} alt={item.name} className="item-image" />
+          <h3 className="list-item-name">{item.name}</h3>
-        ) : (
+          <div className="list-rating-badge">
-          <div className="item-image-placeholder">
+            <Star size={10} fill="currentColor" className="star-icon-filled" />
-            <span className="placeholder-icon">🍲</span>
+            <span>{rating}</span>
           </div>
-        )}
+        </div>
 
-        <div className="add-to-cart-container">
+        <p className="list-vendor">{item.stallName || 'Cookie Heaven'}</p>
-          {quantity === 0 ? (
+        <p className="list-address">📍 54 Summit Street</p>
-            <button 
+
-              className="add-button"
+        <div className="list-footer" onClick={(e) => e.stopPropagation()}>
-              onClick={() => addToCart(item)}
+          <span className="list-price">🅡{item.price.toFixed(2)}</span>
-              disabled={item.stock === 0}
+          
-            >
+          <div className="list-action-container">
-              {item.stock === 0 ? 'SOLD OUT' : 'ADD'}
+            {quantity === 0 ? (
-            </button>
-          ) : (
-            <div className={`quantity-controls ${isLimitReached ? 'at-limit' : ''}`}>
-              <button onClick={() => updateQuantity(item.id, -1)}>−</button>
-              <span className="quantity">{quantity}</span>
               <button 
+                className="list-add-btn"
                 onClick={() => addToCart(item)}
-                className={isLimitReached ? 'disabled' : ''}
+                disabled={item.stock === 0}
-              >+</button>
+              >
-            </div>
+                + Add
-          )}
+              </button>
+            ) : (
+              <div className="list-qty-controls">
+                <button onClick={() => updateQuantity(item.id, -1)}>−</button>
+                <span className="list-qty">{quantity}</span>
+                <button 
+                  onClick={() => addToCart(item)}
+                  disabled={isLimitReached}
+                >+</button>
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>

ordering_site/src/contexts/CartContext.tsx

@@ -36,7 +36,7 @@ export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children
       // Stock check
       const currentQty = existingIndex !== -1 ? prevCart[existingIndex].quantity : 0;
       if (item.stock !== undefined && currentQty >= item.stock) {
-        setStockError(`Only ${item.stock} left for ${item.name}`);
+        setStockError(`Maximum available stock reached for ${item.name}`);
         return prevCart;
       }
 
@@ -65,7 +65,7 @@ export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
         // Stock check for increment
         if (delta > 0 && item.stock !== undefined && item.quantity >= item.stock) {
-          setStockError(`Only ${item.stock} left for ${item.name}`);
+          setStockError(`Maximum available stock reached for ${item.name}`);
           return prevCart;
         }
 

ordering_site/src/contexts/FoodContext.tsx

@@ -28,10 +28,11 @@ export const FoodProvider: React.FC<{ children: React.ReactNode }> = ({ children
     if (!silent) setIsLoading(true);
     setError(null);
     try {
-      const [baseItemsRes, productsRes, stallsRes] = await Promise.all([
+      const [baseItemsRes, productsRes, stallsRes, statsRes] = await Promise.all([
         fetch(`${API_BASE_URL}/base-items?size=100`, { cache: 'no-store' }),
         fetch(`${API_BASE_URL}/products?size=100`, { cache: 'no-store' }),
-        fetch(`${API_BASE_URL}/stalls/active`, { cache: 'no-store' })
+        fetch(`${API_BASE_URL}/stalls/active`, { cache: 'no-store' }),
+        fetch(`${API_BASE_URL}/feedback/stats`, { cache: 'no-store' }).catch(() => null)
       ]);
 
       if (!baseItemsRes.ok || !productsRes.ok || !stallsRes.ok) {
@@ -45,6 +46,24 @@ export const FoodProvider: React.FC<{ children: React.ReactNode }> = ({ children
       const baseItemsData = baseItemsDataRaw.content || baseItemsDataRaw;
       const productsData = productsDataRaw.content || productsDataRaw;
 
+      // Extract top rated items names by customer feedback count
+      let topRatedNames: string[] = [];
+      if (statsRes && statsRes.ok) {
+        try {
+          const statsData = await statsRes.json();
+          const ratedItems = statsData.ratedItems || [];
+          // Sort items by count of feedbacks descending
+          const sorted = [...ratedItems].sort((a: any, b: any) => b.count - a.count);
+          // Get names of top 3 items with at least 1 feedback
+          topRatedNames = sorted
+            .filter((x: any) => x.count > 0)
+            .slice(0, 3)
+            .map((x: any) => x.name.toLowerCase());
+        } catch (e) {
+          console.error('Error parsing feedback stats:', e);
+        }
+      }
+
       // Map BaseItems to Categories
       const mappedCategories: Category[] = baseItemsData.map((item: any, index: number) => ({
         id: item.id.toString(),
@@ -100,6 +119,9 @@ export const FoodProvider: React.FC<{ children: React.ReactNode }> = ({ children
         const stallFromMap = productToStallMap[itemId];
         const stallFromCategory = item.category ? categoryToStallMap[item.category.toLowerCase()] : null;
         
+        // Dynamic bestseller isPopular flag based on feedback stats
+        const isBestseller = topRatedNames.includes(item.name.toLowerCase());
+
         return {
           id: itemId,
           name: item.name,
@@ -108,7 +130,7 @@ export const FoodProvider: React.FC<{ children: React.ReactNode }> = ({ children
           category: item.category,
           image: finalImage,
           isVeg: item.veg,
-          isPopular: item.active, 
+          isPopular: isBestseller, 
           stock: item.stock,
           stallId: (stallFromBackend?.id || stallFromMap?.id || stallFromCategory?.id),
           stallName: (stallFromBackend?.name || stallFromMap?.name || stallFromCategory?.name)

ordering_site/src/index.css

@@ -1,40 +1,40 @@
 :root {
-  /* LIGHT THEME (Default) */
+  /* SAGE GREEN THEME */
-  --primary: #08a850;
+  --primary: #5c6e58;
-  --primary-rgb: 8, 168, 80;
+  --primary-rgb: 92, 110, 88;
-  --primary-light: #f4fbf7;
+  --primary-light: #f2f6f1;
-  --bg: #f8f9fe;
+  --bg: #cbd7c7;
   --surface: #ffffff;
-  --border: rgba(0, 24, 40, 0.08);
+  --border: rgba(92, 110, 88, 0.08);
-  --green: #08a850;
+  --green: #5c6e58;
-  --green-light: #f4fbf7;
+  --green-light: #f2f6f1;
   --red: #ff4d4f;
-  --text-dark: #001828;
+  --text-dark: #1f2421;
-  --text-mid: #475569;
+  --text-mid: #5c645e;
   --text-light: #94a3b8;
   --star: #f4c640;
-  --shadow: 0 4px 20px rgba(0, 24, 40, 0.04);
+  --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-  --input-bg: #f8f9ff;
+  --input-bg: #f3f6f2;
-  --modal-overlay: rgba(0, 24, 40, 0.3);
+  --modal-overlay: rgba(31, 36, 33, 0.4);
 }
 
 [data-theme='dark'] {
-  /* DARK THEME - Visual Poetry Deep Slate & Indigo */
+  /* DARK THEME - Darker Forest Sage */
-  --primary: #9d87ff; /* Softer, glowing purple for dark mode */
+  --primary: #8fa68c;
-  --primary-rgb: 157, 135, 255;
+  --primary-rgb: 143, 166, 140;
-  --primary-light: #251b4d;
+  --primary-light: #242b23;
-  --bg: #0b0e14;
+  --bg: #141713;
-  --surface: #151921;
+  --surface: #1c211b;
-  --border: rgba(157, 135, 255, 0.12);
+  --border: rgba(143, 166, 140, 0.12);
-  --green: #00d2aa;
+  --green: #8fa68c;
-  --green-light: #062d26;
+  --green-light: #242b23;
   --red: #ff6b6b;
-  --text-dark: #f0f2f5;
+  --text-dark: #f0f2f0;
-  --text-mid: #a0aec0;
+  --text-mid: #a0aca0;
-  --text-light: #718096;
+  --text-light: #718071;
   --star: #ffd700;
   --shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
-  --input-bg: #1c212b;
+  --input-bg: #283027;
   --modal-overlay: rgba(0, 0, 0, 0.7);
 }
 
@@ -48,14 +48,18 @@
 html, body {
   width: 100%;
   overflow-x: hidden;
+  background-color: var(--bg);
 }
 
 body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background-color: var(--bg);
   color: var(--text-dark);
   line-height: 1.5;
   font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
 }
 
 button {
@@ -72,14 +76,27 @@ a {
 
 .container {
   width: 100%;
-  max-width: 600px;
+  max-width: 450px;
-  margin: 0 auto;
+  margin: 20px auto;
-  min-height: 100vh;
+  height: calc(100vh - 40px);
   background-color: var(--surface);
   position: relative;
-  box-shadow: 0 0 20px rgba(0,0,0,0.05);
+  box-shadow: 0 20px 50px rgba(44, 58, 42, 0.15);
   display: flex;
   flex-direction: column;
+  border-radius: 40px;
+  border: 10px solid #ffffff;
+  overflow: hidden;
+}
+
+main {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+}
+
+main::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
 }
 
 .safe-area-bottom {
@@ -90,6 +107,13 @@ a {
   body {
     font-size: 14px;
   }
+  .container {
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    height: 100vh;
+    max-width: 100%;
+  }
 }
 
 .loading-spinner {

ordering_site/src/pages/CartScreen.tsx

@@ -46,7 +46,7 @@ const CartScreen: React.FC = () => {
                 </div>
                 
                 <div className="cart-item-footer">
-                  <span className="cart-item-price">R{(item.price * item.quantity).toFixed(2)}</span>
+                  <span className="cart-item-price">🅡{(item.price * item.quantity).toFixed(2)}</span>
                   
                   <div className="cart-quantity-controls">
                     <button onClick={() => updateQuantity(item.id, -1)}>
@@ -67,7 +67,7 @@ const CartScreen: React.FC = () => {
           <h2 className="section-title">Bill Details</h2>
           <div className="bill-row">
             <span>Item Total</span>
-            <span>R{totalPrice.toFixed(2)}</span>
+            <span>🅡{totalPrice.toFixed(2)}</span>
           </div>
           <div className="bill-row">
             <span>Delivery Fee</span>
@@ -75,11 +75,11 @@ const CartScreen: React.FC = () => {
           </div>
           <div className="bill-row">
             <span>Taxes and Charges</span>
-            <span>R2.50</span>
+            <span>🅡2.50</span>
           </div>
           <div className="bill-row total">
             <span>To Pay</span>
-            <span>R{(totalPrice + 2.5).toFixed(2)}</span>
+            <span>🅡{(totalPrice + 2.5).toFixed(2)}</span>
           </div>
         </div>
       </main>
@@ -87,7 +87,7 @@ const CartScreen: React.FC = () => {
       <div className="cart-footer">
         <div className="footer-total">
           <span className="items-count">{totalItems} {totalItems === 1 ? 'Item' : 'Items'}</span>
-          <span className="final-price">R{(totalPrice + 2.5).toFixed(2)}</span>
+          <span className="final-price">🅡{(totalPrice + 2.5).toFixed(2)}</span>
         </div>
         <button 
           className="checkout-button"

ordering_site/src/pages/CategoryScreen.tsx

@@ -7,11 +7,38 @@ import BottomNav from '../components/BottomNav';
 import { useFood } from '../contexts/FoodContext';
 
 const CategoryScreen: React.FC = () => {
-  const { categoryId } = useParams<{ categoryId: string }>(); // categoryId is actually categoryName now
+  const { categoryId } = useParams<{ categoryId: string }>(); // categoryId is categoryName
   const { categories, foodItems, isLoading } = useFood();
   
-  const category = categories.find((c) => c.name === categoryId);
+  const fancyCategoryNames = ["Quick Bites", "Hearty Meals", "Thirst Quenchers", "Sweet Cravings"];
-  const items = foodItems.filter((item) => item.category === categoryId);
+  const isFancy = categoryId && fancyCategoryNames.includes(categoryId);
+
+  const category = isFancy 
+    ? { 
+        name: categoryId, 
+        emoji: categoryId === "Quick Bites" ? "🍔" : categoryId === "Hearty Meals" ? "🍲" : categoryId === "Thirst Quenchers" ? "🥤" : "🍰", 
+        color: "#f2f6f1" 
+      } 
+    : categories.find((c) => c.name === categoryId);
+
+  const items = isFancy
+    ? foodItems.filter(item => {
+        const cat = (item.category || '').toLowerCase();
+        if (categoryId === "Thirst Quenchers") {
+          return cat.includes('beverage') || cat.includes('drink') || cat.includes('juice') || cat.includes('tea') || cat.includes('coffee');
+        } else if (categoryId === "Sweet Cravings") {
+          return cat.includes('dessert') || cat.includes('sweet') || cat.includes('ice') || cat.includes('bakery') || cat.includes('cake');
+        } else if (categoryId === "Hearty Meals") {
+          return cat.includes('meal') || cat.includes('main') || cat.includes('rice') || cat.includes('combo') || cat.includes('platter');
+        } else if (categoryId === "Quick Bites") {
+          const isDrink = cat.includes('beverage') || cat.includes('drink') || cat.includes('juice') || cat.includes('tea') || cat.includes('coffee');
+          const isSweet = cat.includes('dessert') || cat.includes('sweet') || cat.includes('ice') || cat.includes('bakery') || cat.includes('cake');
+          const isMeal = cat.includes('meal') || cat.includes('main') || cat.includes('rice') || cat.includes('combo') || cat.includes('platter');
+          return !isDrink && !isSweet && !isMeal;
+        }
+        return false;
+      })
+    : foodItems.filter((item) => item.category === categoryId);
 
   if (isLoading && categories.length === 0) {
     return <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Loading...</div>;

ordering_site/src/pages/CheckoutScreen.tsx

@@ -165,7 +165,7 @@ const CheckoutScreen: React.FC = () => {
                   <Wallet size={14} className={isInsufficient ? 'text-rose-400' : ''} />
                   <span>Your Balance: </span>
                   <span className={`balance-val ${isInsufficient ? 'insufficient-val' : ''}`}>
-                    R{currentBalance.toLocaleString()}
+                    🅡{currentBalance.toLocaleString()}
                   </span>
                 </div>
               </div>
@@ -194,14 +194,14 @@ const CheckoutScreen: React.FC = () => {
 
           <div className="payment-security-note">
             <ShieldCheck size={14} />
-            <span>Secured by Ritz Token Protocol. 1 Token = R1.00</span>
+            <span>Secured by Ritz Token Protocol. 1 Token = 🅡1.00</span>
           </div>
         </section>
 
         <div className="order-summary-mini">
           <div className="summary-row">
             <span>Tokens to be deducted</span>
-            <span className="summary-price ritz-text">R{totalPrice.toLocaleString()}</span>
+            <span className="summary-price ritz-text">🅡{totalPrice.toLocaleString()}</span>
           </div>
           <p className="tax-info">Exclusive of any platform bonuses</p>
         </div>
@@ -220,7 +220,7 @@ const CheckoutScreen: React.FC = () => {
             </div>
             <div className="warning-content">
               <div className="shortfall-amount">
-                Short by <span className="highlight">R{(totalPrice - currentBalance).toLocaleString()}</span>
+                Short by <span className="highlight">🅡{(totalPrice - currentBalance).toLocaleString()}</span>
               </div>
               <p className="warning-instruction">Add tokens to your wallet to complete this order.</p>
             </div>
@@ -239,7 +239,7 @@ const CheckoutScreen: React.FC = () => {
           ) : isInsufficient ? (
             'Insufficient Tokens'
           ) : (
-            `Pay R${totalPrice.toLocaleString()} & Place Order`
+            `Pay 🅡${totalPrice.toLocaleString()} & Place Order`
           )}
         </button>
       </div>

ordering_site/src/pages/HomeScreen.css

@@ -1,5 +1,5 @@
 .welcome-section {
-  padding: 24px 20px 16px;
+  padding: 16px 20px 8px;
 }
 
 .greeting-row {
@@ -7,26 +7,26 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 }
 
 .welcome-message {
-  font-size: 26px;
+  font-size: 24px;
   font-weight: 850;
   color: var(--text-dark);
   margin: 0;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.5px;
 }
 
 .wallet-badge {
   display: flex;
   align-items: center;
   gap: 8px;
-  background: white;
+  background: var(--surface);
-  padding: 8px 12px;
+  padding: 6px 12px;
-  border-radius: 14px;
+  border-radius: 20px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 4px 12px rgba(92, 110, 88, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.03);
+  border: 1px solid var(--border);
   cursor: pointer;
   transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
@@ -36,27 +36,27 @@
 }
 
 .wallet-icon-img {
-  width: 22px;
+  width: 18px;
-  height: 22px;
+  height: 18px;
   object-fit: contain;
 }
 
 .wallet-balance-text {
   font-weight: 800;
-  font-size: 15px;
+  font-size: 13px;
-  color: var(--primary-color);
+  color: var(--primary);
   letter-spacing: -0.01em;
 }
 
 .welcome-subtitle {
-  font-size: 15px;
+  font-size: 14px;
   color: var(--text-mid);
   font-weight: 500;
   margin: 0;
 }
 
 .search-bar-container {
-  padding: 12px 16px;
+  padding: 8px 20px 16px;
   background-color: var(--surface);
 }
 
@@ -65,9 +65,10 @@
   align-items: center;
   gap: 10px;
   background-color: var(--input-bg);
-  padding: 10px 14px;
+  padding: 12px 16px;
-  border-radius: 12px;
+  border-radius: 30px;
-  border: 1px solid var(--border);
+  border: 1px solid transparent;
+  box-shadow: 0 2px 8px rgba(92, 110, 88, 0.02);
 }
 
 .search-icon {
@@ -83,23 +84,59 @@
   justify-content: center;
 }
 
+.search-divider {
+  width: 1px;
+  height: 16px;
+  background-color: rgba(92, 110, 88, 0.15);
+  margin: 0 4px;
+}
+
+.voice-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-mid);
+  padding: 2px;
+}
+
 .search-bar input {
   border: none;
   background: none;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   color: var(--text-dark);
   outline: none;
+  font-weight: 500;
 }
 
 .section-header {
-  padding: 16px;
+  padding: 16px 20px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.carousel-header {
+  padding-bottom: 8px;
 }
 
 .section-title {
-  font-size: 1.1rem;
+  font-size: 1.15rem;
   font-weight: 800;
   color: var(--text-dark);
+  letter-spacing: -0.3px;
+}
+
+.view-all-link {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-mid);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.view-all-link:hover {
+  color: var(--primary);
 }
 
 .categories-section {
@@ -299,8 +336,29 @@
 
 .popular-section {
   background-color: var(--surface);
-  margin-top: 10px;
+  margin-top: 8px;
-  flex: 1;
+}
+
+.popular-carousel {
+  display: flex;
+  overflow-x: auto;
+  padding: 4px 20px 20px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.popular-carousel::-webkit-scrollbar {
+  display: none;
+}
+
+.recommended-section {
+  background-color: var(--surface);
+  margin-top: 8px;
+  padding-bottom: 24px;
+}
+
+.recommended-section .items-list {
+  padding: 0 20px;
 }
 
 .items-list {

ordering_site/src/pages/HomeScreen.tsx

@@ -102,6 +102,30 @@ const HomeScreen: React.FC = () => {
 
   const popularItems = useMemo(() => foodItems.filter(item => item.isPopular), [foodItems]);
 
+  const categorizedGroups = useMemo(() => {
+    const groups: { title: string; items: any[] }[] = [
+      { title: "🍔 Quick Bites", items: [] },
+      { title: "🍲 Hearty Meals", items: [] },
+      { title: "🥤 Thirst Quenchers", items: [] },
+      { title: "🍰 Sweet Cravings", items: [] }
+    ];
+
+    foodItems.forEach(item => {
+      const cat = (item.category || '').toLowerCase();
+      if (cat.includes('beverage') || cat.includes('drink') || cat.includes('juice') || cat.includes('tea') || cat.includes('coffee')) {
+        groups[2].items.push(item);
+      } else if (cat.includes('dessert') || cat.includes('sweet') || cat.includes('ice') || cat.includes('bakery') || cat.includes('cake')) {
+        groups[3].items.push(item);
+      } else if (cat.includes('meal') || cat.includes('main') || cat.includes('rice') || cat.includes('combo') || cat.includes('platter')) {
+        groups[1].items.push(item);
+      } else {
+        groups[0].items.push(item);
+      }
+    });
+
+    return groups.filter(g => g.items.length > 0);
+  }, [foodItems]);
+
   const [searchResults, setSearchResults] = useState<any[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const [debouncedSearch, setDebouncedSearch] = useState('');
@@ -187,7 +211,7 @@ const HomeScreen: React.FC = () => {
             {user && (
               <div className="wallet-badge" onClick={() => navigate('/wallet')}>
                 <img src={walletIcon} alt="Wallet" className="wallet-icon-img" />
-                <span className="wallet-balance-text">R {user.ritzTokenBalance || 0}</span>
+                <span className="wallet-balance-text">🅡 {user.ritzTokenBalance || 0}</span>
               </div>
             )}
           </div>
@@ -196,17 +220,24 @@ const HomeScreen: React.FC = () => {
 
         <div className="search-bar-container">
           <div className="search-bar">
-            <Search size={20} className="search-icon" />
+            <Search size={18} className="search-icon" />
             <input
               type="text"
-              placeholder="Search for food..."
+              placeholder="Search..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
-            {searchQuery && (
+            {searchQuery ? (
               <button onClick={() => setSearchQuery('')} className="clear-search">
                 <X size={18} />
               </button>
+            ) : (
+              <>
+                <div className="search-divider" />
+                <button className="voice-icon-btn">
+                  <span style={{ fontSize: 16 }}>🎙️</span>
+                </button>
+              </>
             )}
           </div>
         </div>
@@ -227,6 +258,7 @@ const HomeScreen: React.FC = () => {
                     <ItemCard
                       key={item.id}
                       item={item}
+                      variant="list"
                       isLast={index === searchResults.length - 1}
                     />
                   ))}
@@ -301,24 +333,48 @@ const HomeScreen: React.FC = () => {
             </section>
 
             <section className="popular-section">
-              <div className="section-header">
+              <div className="section-header carousel-header">
-                <h2 className="section-title">Popular Items</h2>
+                <h2 className="section-title">Your trusted picks</h2>
+                <span className="view-all-link">View all</span>
               </div>
-              <div className="items-list">
+              <div className="popular-carousel">
-                {popularItems.map((item, index) => (
+                {popularItems.map((item) => (
                   <ItemCard
                     key={item.id}
                     item={item}
-                    isLast={index === popularItems.length - 1}
+                    variant="carousel"
                   />
                 ))}
                 {popularItems.length === 0 && !isLoading && (
-                  <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-light)' }}>
+                  <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-light)', width: '100%' }}>
                     No popular items at the moment.
                   </div>
                 )}
               </div>
             </section>
+
+            {categorizedGroups.map((group) => (
+              <section key={group.title} className="popular-section categorized-section-row">
+                <div className="section-header carousel-header">
+                  <h2 className="section-title">{group.title}</h2>
+                  <span 
+                    className="view-all-link"
+                    onClick={() => navigate(`/category/${group.title.replace(/[^\w\s]/g, '').trim()}`)}
+                  >
+                    View all
+                  </span>
+                </div>
+                <div className="popular-carousel">
+                  {group.items.map((item) => (
+                    <ItemCard
+                      key={item.id}
+                      item={item}
+                      variant="carousel"
+                    />
+                  ))}
+                </div>
+              </section>
+            ))}
           </>
         )}
       </main>

ordering_site/src/pages/ItemDetailScreen.css

@@ -1,30 +1,32 @@
 .item-detail-page {
   background-color: var(--surface);
+  position: relative;
+  overflow: hidden;
 }
 
-.item-detail-page.out-of-stock {
+.detail-header-overlay {
-  opacity: 0.8;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
 }
 
-.item-detail-page.out-of-stock .item-hero {
+.detail-header-overlay .app-header {
-  filter: grayscale(0.5);
+  background-color: transparent !important;
 }
 
-.out-of-stock-badge {
+.detail-header-overlay .back-button {
-  background-color: #f3f4f6;
+  background-color: #ffffff;
-  color: #6b7280;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  font-size: 0.65rem;
-  font-weight: 700;
-  padding: 1px 6px;
-  border-radius: 20px;
-  white-space: nowrap;
 }
 
 .item-hero {
   width: 100%;
-  aspect-ratio: 16/9;
+  height: 260px;
-  max-height: 300px;
+  position: relative;
   overflow: hidden;
+  background-color: var(--primary-light);
 }
 
 .item-hero-image {
@@ -36,30 +38,258 @@
 .item-hero-placeholder {
   width: 100%;
   height: 100%;
-  aspect-ratio: 16/9;
-  max-height: 300px;
-  background: linear-gradient(135deg, var(--primary-light), #fff) ;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
-}
-
-.item-hero-placeholder::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: radial-gradient(var(--primary) 0.5px, transparent 0.5px);
-  background-size: 15px 15px;
-  opacity: 0.1;
 }
 
 .placeholder-emoji {
-  font-size: 3rem;
+  font-size: 4rem;
-  opacity: 0.6;
+}
+
+.item-details-content {
+  margin-top: -30px;
+  background-color: var(--surface);
+  border-radius: 32px 32px 0 0;
+  padding: 24px 20px;
+  position: relative;
+  z-index: 2;
+  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.04);
+}
+
+.item-title-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.title-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.item-name-large {
+  font-size: 22px;
+  font-weight: 850;
+  color: var(--text-dark);
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+}
+
+.item-subtitle {
+  font-size: 13px;
+  color: var(--text-mid);
+  margin-top: 2px;
+}
+
+.title-right {
+  flex-shrink: 0;
+}
+
+.detail-quantity-pill {
+  display: flex;
+  align-items: center;
+  background-color: #f1f3f1;
+  border-radius: 30px;
+  padding: 3px;
+  gap: 10px;
+  border: 1px solid rgba(92, 110, 88, 0.05);
+}
+
+.qty-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  color: var(--text-dark);
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  transition: transform 0.15s ease;
+}
+
+.qty-btn:active {
+  transform: scale(0.9);
+}
+
+.qty-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.qty-val {
+  font-size: 13px;
+  font-weight: 750;
+  min-width: 14px;
+  text-align: center;
+  color: var(--text-dark);
+}
+
+.detail-badges-row {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.badge-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--border);
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-mid);
+}
+
+.badge-item.star svg {
+  color: var(--star);
+  fill: var(--star);
+}
+
+.badge-item.time svg {
+  color: var(--text-mid);
+}
+
+.badge-item.kcal svg {
+  color: #ff4d4f;
+  fill: #ff4d4f;
+}
+
+.item-description-section {
+  margin-bottom: 20px;
+}
+
+.item-long-description {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-mid);
+  margin-bottom: 8px;
+}
+
+.customize-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--primary);
+  background: transparent;
+  padding: 0;
+  border: none;
+}
+
+.item-extra-info {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-top: 1px solid var(--border);
+  padding-top: 16px;
+  margin-bottom: 10px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.info-label {
+  font-size: 12px;
+  color: var(--text-mid);
+}
+
+.info-value {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dark);
+}
+
+.info-value.green { color: var(--green); }
+.info-value.red { color: var(--red); }
+
+.item-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+  background-color: var(--surface);
+  padding: 12px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 -4px 15px rgba(92, 110, 88, 0.05);
+  border-top: 1px solid var(--border);
+  z-index: 101;
+  gap: 16px;
+}
+
+.footer-price-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.total-label {
+  font-size: 10px;
+  color: var(--text-light);
+  font-weight: 600;
+}
+
+.total-value {
+  font-size: 18px;
+  font-weight: 850;
+  color: var(--text-dark);
+}
+
+.footer-action {
+  flex-shrink: 0;
+}
+
+.primary-action-button {
+  background-color: var(--primary);
+  color: white;
+  padding: 12px 28px;
+  border-radius: 30px;
+  font-size: 13px;
+  font-weight: 700;
+  border: none;
+  width: 150px;
+  text-align: center;
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.1);
+  box-shadow: 0 4px 12px rgba(92, 110, 88, 0.15);
+}
+
+.primary-action-button:active {
+  transform: scale(0.96);
+}
+
+.primary-action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.limit-reached-info {
+  background-color: #fef2f2;
+  border: 1px solid #fee2e2;
+  padding: 10px 12px;
+  border-radius: 12px;
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #ef4444;
+  font-size: 11px;
+  font-weight: 700;
 }
 
 /* Loading & Not Found States */
@@ -70,6 +300,7 @@
   justify-content: center;
   text-align: center;
   background: var(--bg);
+  min-height: 100vh;
 }
 
 .loading-spinner-wrapper {
@@ -127,218 +358,3 @@
   font-weight: 700;
   border: none;
 }
-
-@keyframes float {
-  0% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-  100% { transform: translateY(0px); }
-}
-
-.item-details-content {
-  padding: 20px 16px;
-}
-
-.item-header-info {
-  margin-bottom: 20px;
-}
-
-.item-name-large {
-  font-size: 1.5rem;
-  font-weight: 800;
-  color: var(--text-dark);
-  margin: 8px 0;
-  line-height: 1.2;
-}
-
-.item-price-large {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--primary);
-}
-
-.item-stats {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--bg);
-  padding: 12px;
-  border-radius: 12px;
-  margin-bottom: 20px;
-  gap: 8px;
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-  justify-content: center;
-}
-
-.stat-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.stat-value {
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: var(--text-dark);
-  white-space: nowrap;
-}
-
-.stat-label {
-  font-size: 0.65rem;
-  color: var(--text-mid);
-}
-
-.stat-divider {
-  width: 1px;
-  height: 20px;
-  background-color: var(--border);
-}
-
-.section-title {
-  font-size: 1.1rem;
-  font-weight: 800;
-  color: var(--text-dark);
-  margin-bottom: 8px;
-}
-
-.item-long-description {
-  font-size: 0.9rem;
-  line-height: 1.5;
-  color: var(--text-mid);
-  margin-bottom: 20px;
-}
-
-.item-extra-info {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  border-top: 1px solid var(--border);
-  padding-top: 20px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.info-label {
-  font-size: 0.85rem;
-  color: var(--text-mid);
-}
-
-.info-value {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text-dark);
-  text-align: right;
-}
-
-.info-value.green { color: var(--green); }
-.info-value.red { color: var(--red); }
-
-.item-footer {
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-  max-width: 600px;
-  background-color: var(--surface);
-  padding: 12px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
-  border-top: 1px solid var(--border);
-  z-index: 101;
-  gap: 16px;
-}
-
-.footer-price-info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.total-label {
-  font-size: 0.75rem;
-  color: var(--text-mid);
-}
-
-.total-value {
-  font-size: 1.1rem;
-  font-weight: 800;
-  color: var(--text-dark);
-}
-
-.primary-action-button {
-  background-color: var(--primary);
-  color: white;
-  padding: 12px 24px;
-  border-radius: 12px;
-  font-size: 1rem;
-  font-weight: 700;
-  flex: 1;
-  max-width: 200px;
-  text-align: center;
-}
-
-.footer-quantity-controls {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  background-color: var(--primary-light);
-  padding: 8px 16px;
-  border-radius: 12px;
-  flex-shrink: 0;
-}
-
-.footer-quantity-controls button {
-  font-size: 1.5rem;
-  font-weight: 800;
-  color: var(--primary);
-  display: flex;
-  align-items: center;
-}
-
-.footer-quantity-controls .quantity {
-  font-size: 1.1rem;
-  font-weight: 800;
-  color: var(--primary);
-  min-width: 24px;
-  text-align: center;
-}
-
-@media (max-width: 360px) {
-  .item-footer {
-    padding: 10px 12px;
-  }
-  .primary-action-button {
-    padding: 10px 16px;
-    font-size: 0.9rem;
-  }
-}
-
-.limit-reached-info {
-  background-color: #fef2f2;
-  border: 1px solid #fee2e2;
-  padding: 12px;
-  border-radius: 12px;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #ef4444;
-  font-size: 0.85rem;
-  font-weight: 700;
-}
-
-.footer-quantity-controls button:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}

ordering_site/src/pages/ItemDetailScreen.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FoodItem } from '../types';
 import { useParams } from 'react-router-dom';
-import { AlertCircle } from 'lucide-react';
+import { AlertCircle, Star, ChevronRight } from 'lucide-react';
 import Header from '../components/Header';
 import { useCart } from '../contexts/CartContext';
 import { useFood } from '../contexts/FoodContext';
@@ -57,6 +57,7 @@ const ItemDetailScreen: React.FC = () => {
       fetchItem();
     }
   }, [itemId, contextItem]);
+
   if (isGlobalLoading || isFetching || !item) {
     if (isGlobalLoading || isFetching) {
       return (
@@ -85,9 +86,14 @@ const ItemDetailScreen: React.FC = () => {
   const quantity = getItemQuantity(item.id);
   const isLimitReached = item.stock !== undefined && quantity >= item.stock && item.stock > 0;
 
+  // Visual helper values matching mockup metadata
+  const rating = 4.5;
+
   return (
     <div className={`container item-detail-page ${item.stock === 0 ? 'out-of-stock' : ''}`}>
-      <Header title="" />
+      <div className="detail-header-overlay">
+        <Header title="" showCart={false} />
+      </div>
       
       <main className="safe-area-bottom">
         <div className="item-hero">
@@ -101,24 +107,43 @@ const ItemDetailScreen: React.FC = () => {
         </div>
 
         <div className="item-details-content">
-          <div className="item-header-info">
+          <div className="item-title-section">
-            <div className="item-labels">
+            <div className="title-left">
-              <div className={`veg-icon ${item.isVeg ? 'veg' : 'non-veg'}`}>
+              <h1 className="item-name-large">{item.name}</h1>
-                <div className="dot" />
+              <p className="item-subtitle">{item.stallName || '54 Summit Street.'}</p>
-              </div>
-              {item.isPopular && <span className="bestseller-badge">Popular</span>}
-              {item.stock === 0 && <span className="out-of-stock-badge">Sold Out</span>}
             </div>
             
-            <h1 className="item-name-large">{item.name}</h1>
+            <div className="title-right" onClick={(e) => e.stopPropagation()}>
-            <p className="item-price-large">R{item.price.toFixed(2)}</p>
+              <div className="detail-quantity-pill">
+                <button 
+                  onClick={() => updateQuantity(item.id, -1)} 
+                  disabled={quantity === 0}
+                  className="qty-btn"
+                >−</button>
+                <span className="qty-val">{quantity}</span>
+                <button 
+                  onClick={() => addToCart(item)} 
+                  disabled={isLimitReached || item.stock === 0}
+                  className="qty-btn"
+                >+</button>
+              </div>
+            </div>
+          </div>
+
+          <div className="detail-badges-row">
+            <div className="badge-item star">
+              <Star size={14} fill="currentColor" />
+              <span>{rating}</span>
+            </div>
           </div>
 
           <div className="item-description-section">
-            <h2 className="section-title">Description</h2>
             <p className="item-long-description">
-              {item.longDescription || item.description}
+              {item.longDescription || item.description || 'Quality food prepared with fresh ingredients, crafted with care for a premium taste experience.'}
             </p>
+            <button className="customize-trigger">
+              Customize <ChevronRight size={14} />
+            </button>
           </div>
 
           <div className="item-extra-info">
@@ -133,7 +158,7 @@ const ItemDetailScreen: React.FC = () => {
             <div className="info-row">
               <span className="info-label">Availability</span>
               <span className={`info-value ${item.stock && item.stock > 0 ? 'green' : 'red'}`}>
-                {item.stock && item.stock > 0 ? `In Stock (${item.stock} left)` : 'Out of Stock'}
+                {item.stock && item.stock > 0 ? 'In Stock' : 'Out of Stock'}
               </span>
             </div>
           </div>
@@ -141,7 +166,7 @@ const ItemDetailScreen: React.FC = () => {
           {isLimitReached && (
             <div className="limit-reached-info">
               <AlertCircle size={18} />
-              <span>You have reached the maximum available quantity ({item.stock}) for this item.</span>
+              <span>You have reached the maximum available quantity for this item.</span>
             </div>
           )}
         </div>
@@ -149,30 +174,25 @@ const ItemDetailScreen: React.FC = () => {
 
       <footer className="item-footer">
         <div className="footer-price-info">
-          <span className="total-label">Price</span>
+          <span className="total-label">Total amount</span>
-          <span className="total-value">R{(item.price * Math.max(1, quantity)).toFixed(2)}</span>
+          <span className="total-value">🅡{(item.price * Math.max(1, quantity)).toFixed(2)}</span>
         </div>
         
         <div className="footer-action">
-          {quantity === 0 ? (
+          <button 
-            <button 
+            className="primary-action-button"
-              className="primary-action-button"
+            onClick={() => {
-              onClick={() => addToCart(item)}
+              if (quantity === 0) {
-              disabled={item.stock === 0}
+                addToCart(item);
-              style={{ opacity: item.stock === 0 ? 0.5 : 1 }}
+              } else {
-            >
+                // Already in cart, go to cart screen or show visual confirmation
-              {item.stock === 0 ? 'Out of Stock' : 'Add to Cart'}
+                window.history.back();
-            </button>
+              }
-          ) : (
+            }}
-            <div className="footer-quantity-controls">
+            disabled={item.stock === 0}
-              <button onClick={() => updateQuantity(item.id, -1)}>−</button>
+          >
-              <span className="quantity">{quantity}</span>
+            {item.stock === 0 ? 'Sold Out' : 'Add to cart'}
-              <button 
+          </button>
-                onClick={() => addToCart(item)}
-                disabled={isLimitReached}
-              >+</button>
-            </div>
-          )}
         </div>
       </footer>
       <CartTab />

ordering_site/src/pages/MyOrdersScreen.tsx

@@ -245,7 +245,7 @@ const MyOrdersScreen: React.FC = () => {
                   
                   <div className="order-total-bar">
                     <span>Total Amount</span>
-                    <span className="amount-text">R{latestOrder.totalAmount.toFixed(2)}</span>
+                    <span className="amount-text">🅡{latestOrder.totalAmount.toFixed(2)}</span>
                   </div>
 
                   <div style={{ display: 'flex', gap: '8px' }}>
@@ -290,7 +290,7 @@ const MyOrdersScreen: React.FC = () => {
                       <div className="order-list-info">
                         <div className="order-list-top">
                           <span className="order-list-number">#{order.displayOrderId}</span>
-                          <span className="order-list-price">R{order.totalAmount.toFixed(0)}</span>
+                          <span className="order-list-price">🅡{order.totalAmount.toFixed(0)}</span>
                         </div>
                         <div className="order-list-bottom">
                           <span className="order-list-date">{new Date(order.createdAt).toLocaleDateString()}</span>
@@ -387,12 +387,12 @@ const MyOrdersScreen: React.FC = () => {
                 {selectedOrder.items.map((item, idx) => (
                   <div key={idx} className="modal-item-row">
                     <span>{item.quantity} x {item.productName}</span>
-                    <span>R{(item.price * item.quantity).toFixed(0)}</span>
+                    <span>🅡{(item.price * item.quantity).toFixed(0)}</span>
                   </div>
                 ))}
                 <div className="modal-total-row">
                   <span>Grand Total</span>
-                  <span>R{selectedOrder.totalAmount.toFixed(2)}</span>
+                  <span>🅡{selectedOrder.totalAmount.toFixed(2)}</span>
                 </div>
               </div>
 

test_qr_print.html

@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Test QR — Positeasy</title>
+  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
+  <style>
+    /* ── Screen styles ── */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
+
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background: #0f0f12;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 20px;
+      gap: 32px;
+    }
+
+    .screen-label {
+      color: #6b7280;
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: 0.15em;
+      font-weight: 600;
+    }
+
+    .print-btn {
+      background: linear-gradient(135deg, #6366f1, #8b5cf6);
+      color: white;
+      border: none;
+      padding: 12px 32px;
+      border-radius: 12px;
+      font-size: 15px;
+      font-weight: 600;
+      font-family: 'Inter', sans-serif;
+      cursor: pointer;
+      letter-spacing: 0.02em;
+      transition: opacity 0.2s, transform 0.2s;
+      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+    }
+    .print-btn:hover { opacity: 0.9; transform: translateY(-1px); }
+    .print-btn:active { transform: translateY(0); }
+
+    /* ── The ticket card ── */
+    .ticket {
+      background: white;
+      border-radius: 20px;
+      width: 340px;
+      padding: 28px 24px 24px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 18px;
+      position: relative;
+      box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
+    }
+
+    /* Notch cut-outs on the sides (visual ticket effect) */
+    .ticket::before,
+    .ticket::after {
+      content: '';
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      background: #0f0f12;
+      border-radius: 50%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .ticket::before { left: -11px; }
+    .ticket::after  { right: -11px; }
+
+    .ticket-header {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      padding-bottom: 16px;
+      border-bottom: 1.5px dashed #e5e7eb;
+    }
+
+    .logo-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .logo-icon {
+      width: 36px;
+      height: 36px;
+      background: linear-gradient(135deg, #6366f1, #8b5cf6);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .logo-icon svg { color: white; }
+
+    .canteen-name {
+      font-size: 18px;
+      font-weight: 800;
+      color: #111827;
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      font-size: 11px;
+      color: #9ca3af;
+      font-weight: 500;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+
+    .test-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      background: #fef2f2;
+      color: #dc2626;
+      border: 1px solid #fecaca;
+      border-radius: 6px;
+      padding: 4px 10px;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .qr-wrapper {
+      padding: 12px;
+      border: 2px dashed #e5e7eb;
+      border-radius: 14px;
+      background: #f9fafb;
+      position: relative;
+    }
+
+    .qr-wrapper canvas {
+      display: block;
+      border-radius: 6px;
+    }
+
+    .order-details {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .detail-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .detail-label {
+      font-size: 11px;
+      color: #9ca3af;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+
+    .detail-value {
+      font-size: 13px;
+      color: #111827;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .detail-value.order-number {
+      font-family: 'Courier New', monospace;
+      font-size: 12px;
+      background: #f3f4f6;
+      padding: 2px 8px;
+      border-radius: 5px;
+      color: #374151;
+    }
+
+    .divider {
+      width: 100%;
+      height: 1px;
+      background: repeating-linear-gradient(90deg, #e5e7eb 0, #e5e7eb 6px, transparent 6px, transparent 12px);
+    }
+
+    .items-section {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .item-row {
+      display: flex;
+      justify-content: space-between;
+      font-size: 12.5px;
+      color: #374151;
+    }
+    .item-row .item-name { font-weight: 500; }
+    .item-row .item-price { font-weight: 600; color: #111827; }
+
+    .total-row {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      font-weight: 800;
+      color: #111827;
+      padding-top: 6px;
+      border-top: 1.5px solid #e5e7eb;
+      margin-top: 2px;
+    }
+
+    .footer-note {
+      font-size: 10px;
+      color: #9ca3af;
+      text-align: center;
+      line-height: 1.5;
+    }
+
+    .never-delivered-tag {
+      background: linear-gradient(135deg, #fef3c7, #fde68a);
+      border: 1px solid #f59e0b;
+      border-radius: 8px;
+      padding: 6px 12px;
+      font-size: 10.5px;
+      font-weight: 700;
+      color: #92400e;
+      text-align: center;
+      width: 100%;
+    }
+
+    /* ── Print styles ── */
+    @media print {
+      @page {
+        size: 80mm auto;   /* 80mm thermal receipt paper width */
+        margin: 4mm;
+      }
+
+      body {
+        background: white !important;
+        padding: 0;
+        margin: 0;
+        min-height: unset;
+      }
+
+      .screen-label,
+      .print-btn,
+      .hint-box {
+        display: none !important;
+      }
+
+      .ticket {
+        width: 100%;
+        max-width: 72mm;
+        box-shadow: none;
+        border-radius: 0;
+        padding: 4mm;
+        border: none;
+      }
+
+      .ticket::before,
+      .ticket::after {
+        display: none;
+      }
+
+      .canteen-name { font-size: 16px; }
+      .test-badge   { font-size: 9px; }
+      .qr-wrapper   { border: 1px dashed #ccc; }
+      .never-delivered-tag { font-size: 9px; }
+    }
+  </style>
+</head>
+<body>
+
+  <p class="screen-label">🖨️ Test QR — Print Preview</p>
+
+  <!-- The printable ticket -->
+  <div class="ticket" id="ticket">
+
+    <!-- Header -->
+    <div class="ticket-header">
+      <div class="logo-row">
+        <div class="logo-icon">
+          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-1.5 6h11M10 21a1 1 0 100-2 1 1 0 000 2zm7 0a1 1 0 100-2 1 1 0 000 2z" />
+          </svg>
+        </div>
+        <span class="canteen-name">RIT Canteen</span>
+      </div>
+      <span class="subtitle">Positeasy · Order Receipt</span>
+      <div class="test-badge">
+        ⚠️ TEST ORDER — NOT REAL
+      </div>
+    </div>
+
+    <!-- QR Code -->
+    <div class="qr-wrapper">
+      <canvas id="qr-canvas"></canvas>
+    </div>
+
+    <!-- Order details -->
+    <div class="order-details">
+      <div class="detail-row">
+        <span class="detail-label">Order #</span>
+        <span class="detail-value">#TEST</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">Ref ID</span>
+        <span class="detail-value order-number">ORD-TESTPRINT</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">Customer</span>
+        <span class="detail-value">Test Customer</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">Payment</span>
+        <span class="detail-value">Ritz Token</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">Type</span>
+        <span class="detail-value">Dine-in</span>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- Items -->
+    <div class="items-section">
+      <div class="item-row">
+        <span class="item-name">Samosa × 1</span>
+        <span class="item-price">₹25</span>
+      </div>
+      <div class="item-row">
+        <span class="item-name">Masala Tea × 2</span>
+        <span class="item-price">₹60</span>
+      </div>
+      <div class="item-row">
+        <span class="item-name">Veg Burger × 1</span>
+        <span class="item-price">₹120</span>
+      </div>
+      <div class="total-row">
+        <span>Total</span>
+        <span>₹205</span>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- Never-delivered notice -->
+    <div class="never-delivered-tag">
+      🔒 This QR cannot be marked as Delivered.<br>
+      Use for print quality &amp; scan testing only.
+    </div>
+
+    <p class="footer-note">
+      Scan with terminal to verify scanner functionality.<br>
+      Order ID <strong>ORD-TESTPRINT</strong> does not exist in the database.
+    </p>
+
+  </div>
+
+  <button class="print-btn" onclick="window.print()">🖨️ Print This QR</button>
+
+  <p class="screen-label hint-box" style="color:#4b5563; font-size:11px; max-width:320px; text-align:center; line-height:1.6;">
+    The QR encodes <code style="background:#1f2937;color:#a5b4fc;padding:2px 6px;border-radius:4px;">ORD-TESTPRINT</code>.
+    The terminal will get a <strong style="color:#f87171;">404 — Order Not Found</strong> when it tries to look this up,
+    so it can never be accidentally marked as delivered.
+  </p>
+
+  <script>
+    // The QR content is the fake order number.
+    // The terminal controller does: orderRepository.findByOrderNumber(orderNum)
+    // "ORD-TESTPRINT" will never match any UUID-based real order → always 404.
+    const ORDER_NUMBER = 'ORD-TESTPRINT';
+
+    QRCode.toCanvas(
+      document.getElementById('qr-canvas'),
+      ORDER_NUMBER,
+      {
+        width: 200,
+        margin: 2,
+        color: {
+          dark:  '#111827',
+          light: '#f9fafb',
+        },
+        errorCorrectionLevel: 'H',   // Highest — handles partial damage / wear
+      },
+      function (err) {
+        if (err) console.error('QR generation error:', err);
+      }
+    );
+  </script>
+</body>
+</html>