diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index ef62c8b9..e71a8045 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,10 +1,10 @@
 import { apiFetch } from '../api';
 import { useState, useEffect, useRef } from 'react';
-import { 
-  Bell, 
-  Search, 
-  Settings, 
-  HelpCircle, 
+import {
+  Bell,
+  Search,
+  Settings,
+  HelpCircle,
   Calendar,
   LayoutDashboard,
   Store,
@@ -52,7 +52,7 @@ const Header = () => {
   const [notifications, setNotifications] = useState<any[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
-  const filteredPages = PAGES.filter(page => 
+  const filteredPages = PAGES.filter(page =>
     page.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
     page.category.toLowerCase().includes(searchTerm.toLowerCase())
   ).slice(0, 8);
@@ -115,45 +115,45 @@ const Header = () => {
   };
 
   const handleNotificationClick = async (notif: any) => {
-      try {
-        await apiFetch(`http://${window.location.hostname}:8080/api/notifications/mark-read/${notif.id}`, { method: 'POST' });
-        if (notif.link) navigate(notif.link);
-        setShowNotifications(false);
-        fetchNotifications();
-      } catch (error) {
-        console.error('Error marking notification as read:', error);
-      }
+    try {
+      await apiFetch(`http://${window.location.hostname}:8080/api/notifications/mark-read/${notif.id}`, { method: 'POST' });
+      if (notif.link) navigate(notif.link);
+      setShowNotifications(false);
+      fetchNotifications();
+    } catch (error) {
+      console.error('Error marking notification as read:', error);
+    }
   };
 
   const markAllAsRead = async () => {
-      try {
-        await apiFetch(`http://${window.location.hostname}:8080/api/notifications/mark-all-read`, { method: 'POST' });
-        fetchNotifications();
-        setShowNotifications(false);
-      } catch (error) {
-        console.error('Error marking all as read:', error);
-      }
+    try {
+      await apiFetch(`http://${window.location.hostname}:8080/api/notifications/mark-all-read`, { method: 'POST' });
+      fetchNotifications();
+      setShowNotifications(false);
+    } catch (error) {
+      console.error('Error marking all as read:', error);
+    }
   };
 
   const getNotificationIcon = (type: string) => {
-      switch(type) {
-          case 'FEEDBACK': return <MessageSquare size={16} className="text-emerald-500" />;
-          case 'PURCHASE': return <ShoppingBag size={16} className="text-indigo-500" />;
-          case 'PRODUCT': return <Package size={16} className="text-amber-500" />;
-          case 'COUPON': return <Ticket size={16} className="text-rose-500" />;
-          default: return <Bell size={16} className="text-slate-400" />;
-      }
+    switch (type) {
+      case 'FEEDBACK': return <MessageSquare size={16} className="text-emerald-500" />;
+      case 'PURCHASE': return <ShoppingBag size={16} className="text-indigo-500" />;
+      case 'PRODUCT': return <Package size={16} className="text-amber-500" />;
+      case 'COUPON': return <Ticket size={16} className="text-rose-500" />;
+      default: return <Bell size={16} className="text-slate-400" />;
+    }
   };
 
   return (
     <header className="h-16 bg-white/80 backdrop-blur-md border-b border-[#e2e8f0] px-8 flex items-center justify-between sticky top-0 z-50">
       <div className="flex items-center gap-4 flex-1">
         <div className="relative group w-full max-w-md" ref={searchRef}>
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[#64748b] group-focus-within:text-[#0f4475] transition-colors" size={18} />
-          <input 
-            type="text" 
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[#64748b] group-focus-within:text-[#003317] transition-colors" size={18} />
+          <input
+            type="text"
             placeholder="Search pages, settings, or analytics..."
-            className="w-full bg-gray-50 border border-transparent rounded-lg py-2 pl-10 pr-4 text-sm focus:outline-none focus:bg-white focus:border-[#0f4475]/30 transition-all shadow-sm"
+            className="w-full bg-gray-50 border border-transparent rounded-lg py-2 pl-10 pr-4 text-sm focus:outline-none focus:bg-white focus:border-[#003317]/30 transition-all shadow-sm"
             value={searchTerm}
             onChange={(e) => {
               setSearchTerm(e.target.value);
@@ -166,7 +166,7 @@ const Header = () => {
 
           <AnimatePresence>
             {showResults && searchTerm && (
-              <motion.div 
+              <motion.div
                 initial={{ opacity: 0, y: 10, scale: 0.95 }}
                 animate={{ opacity: 1, y: 0, scale: 1 }}
                 exit={{ opacity: 0, y: 5, scale: 0.95 }}
@@ -180,14 +180,14 @@ const Header = () => {
                         key={page.path}
                         onClick={() => handleNavigate(page.path)}
                         onMouseEnter={() => setSelectedIndex(index)}
-                        className={`w-full px-4 py-2.5 flex items-center justify-between transition-colors ${index === selectedIndex ? 'bg-[#0f4475]/5' : ''}`}
+                        className={`w-full px-4 py-2.5 flex items-center justify-between transition-colors ${index === selectedIndex ? 'bg-[#003317]/5' : ''}`}
                       >
                         <div className="flex items-center gap-3">
-                          <div className={`p-1.5 rounded-lg transition-colors ${index === selectedIndex ? 'bg-[#0f4475] text-white' : 'bg-gray-100 text-gray-400'}`}>
+                          <div className={`p-1.5 rounded-lg transition-colors ${index === selectedIndex ? 'bg-[#003317] text-white' : 'bg-gray-100 text-gray-400'}`}>
                             {page.icon}
                           </div>
                           <div className="text-left">
-                            <div className={`text-sm font-bold ${index === selectedIndex ? 'text-[#0f4475]' : 'text-slate-700'}`}>
+                            <div className={`text-sm font-bold ${index === selectedIndex ? 'text-[#003317]' : 'text-slate-700'}`}>
                               {page.label}
                             </div>
                             <div className="text-[10px] uppercase tracking-widest font-black opacity-40">
@@ -219,76 +219,76 @@ const Header = () => {
 
         <div className="flex items-center gap-4 border-l border-[#e2e8f0] pl-6">
           <div className="relative" ref={notificationRef}>
-            <button 
-                onClick={() => setShowNotifications(!showNotifications)}
-                className={`relative p-2 rounded-lg transition-all group ${showNotifications ? 'bg-indigo-50 text-[#0f4475]' : 'text-[#64748b] hover:text-[#1e293b] hover:bg-gray-100'}`}
+            <button
+              onClick={() => setShowNotifications(!showNotifications)}
+              className={`relative p-2 rounded-lg transition-all group ${showNotifications ? 'bg-indigo-50 text-[#003317]' : 'text-[#64748b] hover:text-[#1e293b] hover:bg-gray-100'}`}
             >
-                <Bell size={20} />
-                {notifications.length > 0 && (
-                    <span className="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 rounded-full border-2 border-white text-[10px] text-white font-bold flex items-center justify-center animate-pulse">
-                        {notifications.length}
-                    </span>
-                )}
+              <Bell size={20} />
+              {notifications.length > 0 && (
+                <span className="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 rounded-full border-2 border-white text-[10px] text-white font-bold flex items-center justify-center animate-pulse">
+                  {notifications.length}
+                </span>
+              )}
             </button>
 
             <AnimatePresence>
-                {showNotifications && (
-                    <motion.div 
-                        initial={{ opacity: 0, y: 10, scale: 0.95 }}
-                        animate={{ opacity: 1, y: 0, scale: 1 }}
-                        exit={{ opacity: 0, y: 5, scale: 0.95 }}
-                        className="absolute right-0 top-full mt-2 w-80 bg-white/95 backdrop-blur-xl border border-[#e2e8f0] rounded-2xl shadow-2xl overflow-hidden z-50"
-                    >
-                        <div className="p-4 border-b border-[#e2e8f0] flex items-center justify-between bg-gray-50/50">
-                            <h3 className="text-sm font-black text-slate-800 uppercase tracking-wider">Notifications</h3>
-                            {notifications.length > 0 && (
-                                <button 
-                                    onClick={markAllAsRead}
-                                    className="text-[10px] font-bold text-indigo-600 hover:text-indigo-800 uppercase tracking-tighter"
-                                >
-                                    Clear All
-                                </button>
-                            )}
+              {showNotifications && (
+                <motion.div
+                  initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 5, scale: 0.95 }}
+                  className="absolute right-0 top-full mt-2 w-80 bg-white/95 backdrop-blur-xl border border-[#e2e8f0] rounded-2xl shadow-2xl overflow-hidden z-50"
+                >
+                  <div className="p-4 border-b border-[#e2e8f0] flex items-center justify-between bg-gray-50/50">
+                    <h3 className="text-sm font-black text-slate-800 uppercase tracking-wider">Notifications</h3>
+                    {notifications.length > 0 && (
+                      <button
+                        onClick={markAllAsRead}
+                        className="text-[10px] font-bold text-indigo-600 hover:text-indigo-800 uppercase tracking-tighter"
+                      >
+                        Clear All
+                      </button>
+                    )}
+                  </div>
+
+                  <div className="max-h-[400px] overflow-y-auto custom-scrollbar">
+                    {notifications.length > 0 ? (
+                      notifications.map((notif) => (
+                        <button
+                          key={notif.id}
+                          onClick={() => handleNotificationClick(notif)}
+                          className="w-full p-4 border-b border-gray-50 hover:bg-gray-50/80 transition-colors flex gap-3 text-left group"
+                        >
+                          <div className="mt-1 shrink-0 p-2 bg-white rounded-xl shadow-sm border border-gray-100 group-hover:border-indigo-100 transition-colors">
+                            {getNotificationIcon(notif.type)}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="text-xs font-black text-slate-800 mb-0.5 truncate">{notif.title}</div>
+                            <div className="text-[11px] text-slate-500 font-medium leading-relaxed line-clamp-2">{notif.message}</div>
+                            <div className="mt-2 text-[9px] font-bold text-slate-400 uppercase tracking-widest">
+                              {new Date(notif.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                            </div>
+                          </div>
+                        </button>
+                      ))
+                    ) : (
+                      <div className="p-12 text-center">
+                        <div className="w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                          <Bell size={24} className="text-slate-200" />
                         </div>
-                        
-                        <div className="max-h-[400px] overflow-y-auto custom-scrollbar">
-                            {notifications.length > 0 ? (
-                                notifications.map((notif) => (
-                                    <button
-                                        key={notif.id}
-                                        onClick={() => handleNotificationClick(notif)}
-                                        className="w-full p-4 border-b border-gray-50 hover:bg-gray-50/80 transition-colors flex gap-3 text-left group"
-                                    >
-                                        <div className="mt-1 shrink-0 p-2 bg-white rounded-xl shadow-sm border border-gray-100 group-hover:border-indigo-100 transition-colors">
-                                            {getNotificationIcon(notif.type)}
-                                        </div>
-                                        <div className="flex-1 min-w-0">
-                                            <div className="text-xs font-black text-slate-800 mb-0.5 truncate">{notif.title}</div>
-                                            <div className="text-[11px] text-slate-500 font-medium leading-relaxed line-clamp-2">{notif.message}</div>
-                                            <div className="mt-2 text-[9px] font-bold text-slate-400 uppercase tracking-widest">
-                                                {new Date(notif.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                                            </div>
-                                        </div>
-                                    </button>
-                                ))
-                            ) : (
-                                <div className="p-12 text-center">
-                                    <div className="w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
-                                        <Bell size={24} className="text-slate-200" />
-                                    </div>
-                                    <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">All caught up!</p>
-                                </div>
-                            )}
-                        </div>
-                    </motion.div>
-                )}
+                        <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">All caught up!</p>
+                      </div>
+                    )}
+                  </div>
+                </motion.div>
+              )}
             </AnimatePresence>
           </div>
-          
-          <Link to="/settings" className="p-2 text-[#64748b] hover:text-[#0f4475] hover:bg-indigo-50 rounded-lg transition-all">
+
+          <Link to="/settings" className="p-2 text-[#64748b] hover:text-[#003317] hover:bg-indigo-50 rounded-lg transition-all">
             <Settings size={20} />
           </Link>
-          
+
           <button className="p-2 text-[#64748b] hover:text-[#1e293b] hover:bg-gray-100 rounded-lg transition-all">
             <HelpCircle size={20} />
           </button>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 9c702445..81d6bb3c 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
-import { 
-  BarChart3, 
-  ChevronRight, 
-  CreditCard, 
-  Gauge, 
-  LayoutGrid, 
-  MessageSquare, 
-  ShoppingCart, 
-  Store, 
-  Table2, 
-  Users, 
+import {
+  BarChart3,
+  ChevronRight,
+  CreditCard,
+  Gauge,
+  LayoutGrid,
+  MessageSquare,
+  ShoppingCart,
+  Store,
+  Table2,
+  Users,
   Wallet,
   ShoppingBag,
   Receipt,
@@ -44,27 +44,27 @@ interface MenuItem {
 const menuItems: MenuItem[] = [
   { title: 'Dashboard', icon: Gauge, path: '/dashboard' },
   { title: 'Store Dashboard', icon: LayoutGrid, path: '/store-dashboard' },
-  { 
-    title: 'Sale', 
-    icon: Receipt, 
+  {
+    title: 'Sale',
+    icon: Receipt,
     subMenu: [
       { title: 'Orders', path: '/sale/orders' },
       { title: 'Archived Bills', path: '/sale/archived-bills' }
-    ] 
+    ]
   },
-  { 
-    title: 'Customers', 
-    icon: Users, 
+  {
+    title: 'Customers',
+    icon: Users,
     subMenu: [
       { title: 'Orders', path: '/customers/orders' }
-    ] 
+    ]
   },
-  { 
-    title: 'Purchases', 
-    icon: ShoppingBag, 
+  {
+    title: 'Purchases',
+    icon: ShoppingBag,
     subMenu: [
-      { 
-        title: 'Vendor', 
+      {
+        title: 'Vendor',
         nestedMenu: [
           { title: 'Dashboard', path: '/purchases/dashboard' },
           { title: 'Orders', path: '/purchases/orders' },
@@ -72,10 +72,10 @@ const menuItems: MenuItem[] = [
           { title: 'Bills', path: '/purchases/bills' },
           { title: 'Vendors', path: '/purchases/vendor' },
           { title: 'Purchase Analytics', path: '/purchases/analytics' }
-        ] 
+        ]
       },
-      { 
-        title: 'Intent', 
+      {
+        title: 'Intent',
         nestedMenu: [
           { title: 'Orders Dashboard', path: '/purchases/intent/orders-dashboard' },
           { title: 'Receives Dashboard', path: '/purchases/intent/receives-dashboard' },
@@ -84,48 +84,48 @@ const menuItems: MenuItem[] = [
           { title: 'Receives Summary', path: '/purchases/intent/receives-summary' },
           { title: 'Request', path: '/purchases/intent/request' },
           { title: 'Stores', path: '/purchases/intent/stores' }
-        ] 
+        ]
       }
-    ] 
+    ]
   },
-  { 
-    title: 'Inventory', 
-    icon: ShoppingCart, 
+  {
+    title: 'Inventory',
+    icon: ShoppingCart,
     subMenu: [
       { title: 'New Arrivals', path: '/inventory/new-arrivals' },
       { title: 'Base Items', path: '/inventory/base' },
       { title: 'Products', path: '/inventory/products' }
-    ] 
+    ]
   },
-  { 
-    title: 'Expense', 
-    icon: Wallet, 
+  {
+    title: 'Expense',
+    icon: Wallet,
     subMenu: [
       { title: 'Overview', path: '/expense/overview' },
       { title: 'Category', path: '/expense/category' }
-    ] 
+    ]
   },
   { title: 'Reports', icon: BarChart3, path: '/reports' },
-  { 
-    title: 'Stores', 
-    icon: Store, 
+  {
+    title: 'Stores',
+    icon: Store,
     subMenu: [
       { title: 'Terminals', path: '/stores/terminals' },
       { title: 'Managers', path: '/stores/managers' },
       { title: 'Staffs', path: '/stores/staffs' },
       { title: 'Stalls', path: '/stores/stalls' }
-    ] 
+    ]
   },
   { title: 'Feedback', icon: MessageSquare, path: '/feedback' },
-  { 
-    title: 'Ritz', 
-    icon: CircleDollarSign, 
+  {
+    title: 'Ritz',
+    icon: CircleDollarSign,
     subMenu: [
       { title: 'Overview', path: '/ritz/overview' },
       { title: 'Ritz in Circulation', path: '/ritz/circulation' },
       { title: 'Manage Wallets', path: '/ritz/wallets' },
       { title: 'Coupon Codes', path: '/ritz/coupons' }
-    ] 
+    ]
   },
 ];
 
@@ -141,7 +141,7 @@ const Sidebar = () => {
 
   const filteredMenuItems = menuItems.filter(item => {
     if (userRole === 'master') return true;
-    
+
     // Map title to permission ID
     const permissionMap: Record<string, string> = {
       'Dashboard': 'dashboard',
@@ -156,7 +156,7 @@ const Sidebar = () => {
       'Feedback': 'feedback',
       'Ritz': 'ritz'
     };
-    
+
     return userPermissions.includes(permissionMap[item.title]);
   });
 
@@ -169,24 +169,24 @@ const Sidebar = () => {
   };
 
   const toggleMenu = (title: string) => {
-    setOpenMenus((prev) => 
-      prev.includes(title) 
-        ? prev.filter((item) => item !== title) 
+    setOpenMenus((prev) =>
+      prev.includes(title)
+        ? prev.filter((item) => item !== title)
         : [...prev, title]
     );
   };
 
   const toggleNestedMenu = (title: string) => {
-    setOpenNestedMenus((prev) => 
-      prev.includes(title) 
-        ? prev.filter((item) => item !== title) 
+    setOpenNestedMenus((prev) =>
+      prev.includes(title)
+        ? prev.filter((item) => item !== title)
         : [...prev, title]
     );
   };
 
   // Check if a sub-menu should be open based on the current location
   React.useEffect(() => {
-    const currentMenu = menuItems.find(item => 
+    const currentMenu = menuItems.find(item =>
       item.subMenu?.some(sub => location.pathname.startsWith(sub.path || ''))
     );
     if (currentMenu && !openMenus.includes(currentMenu.title)) {
@@ -206,9 +206,9 @@ const Sidebar = () => {
           <div className="absolute left-3 flex items-center justify-center pointer-events-none">
             <Search size={16} className="text-[#64748b] group-focus-within:text-[#001828] transition-colors" />
           </div>
-          <input 
-            type="text" 
-            placeholder="Search Menu..." 
+          <input
+            type="text"
+            placeholder="Search Menu..."
             title="Search for a specific module or page"
             className="w-full h-10 bg-gray-50 border border-[#e2e8f0] rounded-xl pl-10 pr-4 text-[13px] font-medium outline-none transition-all focus:bg-white focus:border-[#001828]/30 focus:shadow-sm placeholder:text-[#94a3b8] text-[#1e293b]"
           />
@@ -216,27 +216,27 @@ const Sidebar = () => {
       </div>
 
       {/* The main dashboard list starts here */}
-      
+
       <div className="flex-1 overflow-y-auto px-3 custom-scrollbar">
         <ul className="space-y-1">
           {filteredMenuItems.map((item) => (
             <li key={item.title}>
               {item.subMenu ? (
                 <div>
-                    <button
+                  <button
                     onClick={() => toggleMenu(item.title)}
                     title={`Expand/Collapse ${item.title}`}
                     className={cn(
                       "w-full flex items-center justify-between p-2.5 rounded-xl text-sm font-semibold transition-all duration-200 group",
-                      openMenus.includes(item.title) 
-                        ? "text-[#0f4475] bg-[#0f4475]/5" 
+                      openMenus.includes(item.title)
+                        ? "text-[#003317] bg-[#003317]/5"
                         : "text-[#475569] hover:bg-gray-50 hover:text-[#1e293b]"
                     )}
                   >
                     <div className="flex items-center gap-3">
                       <item.icon size={18} strokeWidth={2} className={cn(
                         "transition-colors",
-                        openMenus.includes(item.title) ? "text-[#0f4475]" : "text-[#64748b] group-hover:text-[#475569]"
+                        openMenus.includes(item.title) ? "text-[#003317]" : "text-[#64748b] group-hover:text-[#475569]"
                       )} />
                       <span className="tracking-tight">{item.title}</span>
                     </div>
@@ -247,7 +247,7 @@ const Sidebar = () => {
                       <ChevronRight size={14} className="opacity-60" />
                     </div>
                   </button>
-                  
+
                   <AnimatePresence initial={false}>
                     {openMenus.includes(item.title) && (
                       <motion.ul
@@ -265,13 +265,13 @@ const Sidebar = () => {
                                   onClick={() => toggleNestedMenu(sub.title)}
                                   className={cn(
                                     "w-full flex items-center justify-between py-2 px-4 rounded-lg text-[13px] font-medium transition-all group",
-                                    openNestedMenus.includes(sub.title) ? "text-[#0f4475] bg-[#0f4475]/5" : "text-[#64748b] hover:text-[#1e293b]"
+                                    openNestedMenus.includes(sub.title) ? "text-[#003317] bg-[#003317]/5" : "text-[#64748b] hover:text-[#1e293b]"
                                   )}
                                 >
                                   <div className="flex items-center gap-3">
                                     <div className={cn(
                                       "w-1.5 h-1.5 rounded-full",
-                                      openNestedMenus.includes(sub.title) ? "bg-[#0f4475]" : "bg-gray-300"
+                                      openNestedMenus.includes(sub.title) ? "bg-[#003317]" : "bg-gray-300"
                                     )} />
                                     <span>{sub.title}</span>
                                   </div>
@@ -280,7 +280,7 @@ const Sidebar = () => {
                                     openNestedMenus.includes(sub.title) ? "rotate-90" : ""
                                   )} />
                                 </button>
-                                
+
                                 <AnimatePresence>
                                   {openNestedMenus.includes(sub.title) && (
                                     <motion.ul
@@ -295,7 +295,7 @@ const Sidebar = () => {
                                             to={nested.path!}
                                             className={({ isActive }) => cn(
                                               "flex items-center gap-3 py-1.5 px-4 rounded-lg text-[12px] font-medium transition-all",
-                                              isActive ? "text-[#0f4475] bg-white shadow-sm" : "text-[#64748b] hover:text-[#1e293b]"
+                                              isActive ? "text-[#003317] bg-white shadow-sm" : "text-[#64748b] hover:text-[#1e293b]"
                                             )}
                                           >
                                             <div className="w-1 h-1 rounded-full bg-gray-300" />
@@ -313,8 +313,8 @@ const Sidebar = () => {
                                 title={`Go to ${sub.title}`}
                                 className={({ isActive }) => cn(
                                   "flex items-center gap-3 py-2 px-4 rounded-lg text-[13px] font-medium transition-all group relative",
-                                  isActive 
-                                    ? "text-white bg-[#0f4475] shadow-md shadow-[#0f4475]/10" 
+                                  isActive
+                                    ? "text-white bg-[#003317] shadow-md shadow-[#003317]/10"
                                     : "text-[#64748b] hover:text-[#1e293b] hover:translate-x-1"
                                 )}
                               >
@@ -322,13 +322,13 @@ const Sidebar = () => {
                                   <>
                                     <div className={cn(
                                       "w-1.5 h-1.5 rounded-full transition-all duration-300",
-                                      isActive ? "bg-[#0f4475] scale-125" : "bg-gray-300 group-hover:bg-gray-400"
+                                      isActive ? "bg-[#003317] scale-125" : "bg-gray-300 group-hover:bg-gray-400"
                                     )} />
                                     <span>{sub.title}</span>
                                     {isActive && (
-                                      <motion.div 
+                                      <motion.div
                                         layoutId="activeSubMenu"
-                                        className="absolute left-[-1.5px] top-1/4 bottom-1/4 w-[3px] bg-[#0f4475] rounded-full"
+                                        className="absolute left-[-1.5px] top-1/4 bottom-1/4 w-[3px] bg-[#003317] rounded-full"
                                       />
                                     )}
                                   </>
@@ -347,8 +347,8 @@ const Sidebar = () => {
                   title={`Go to ${item.title}`}
                   className={({ isActive }) => cn(
                     "flex items-center gap-3 p-2.5 rounded-xl text-sm font-semibold transition-all duration-200 group",
-                    isActive 
-                      ? "bg-[#0f4475] text-white shadow-lg shadow-[#0f4475]/15" 
+                    isActive
+                      ? "bg-[#003317] text-white shadow-lg shadow-[#003317]/15"
                       : "text-[#475569] hover:bg-gray-50 hover:text-[#1e293b]"
                   )}
                 >
@@ -376,9 +376,9 @@ const Sidebar = () => {
           ))}
         </ul>
       </div>
-      
+
       <div className="p-4 bg-gray-50/50 border-t border-[#e2e8f0]">
-        <button 
+        <button
           onClick={handleLogout}
           title="Sign out of your account"
           className="w-full flex items-center gap-3 p-2.5 rounded-xl text-red-600 hover:bg-red-50 transition-all font-semibold text-sm group"
@@ -388,7 +388,8 @@ const Sidebar = () => {
         </button>
       </div>
 
-      <style dangerouslySetInnerHTML={{ __html: `
+      <style dangerouslySetInnerHTML={{
+        __html: `
         .custom-scrollbar::-webkit-scrollbar { width: 4px; }
         .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
         .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index a39cf054..c784aa84 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,467 +1,467 @@
 import { apiFetch } from '../api';
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { 
-  Target,
-  ChevronRight,
-  ShoppingBag,
-  ArrowRight,
-  Wallet,
-  BarChart3,
-  MessageSquare,
-  Flame,
-  TrendingUp
+import {
+   Target,
+   ChevronRight,
+   ShoppingBag,
+   ArrowRight,
+   Wallet,
+   BarChart3,
+   MessageSquare,
+   Flame,
+   TrendingUp
 } from 'lucide-react';
-import { 
-  AreaChart, 
-  Area, 
-  XAxis, 
-  YAxis, 
-  CartesianGrid, 
-  Tooltip, 
-  ResponsiveContainer,
-  PieChart,
-  Pie,
-  Cell
+import {
+   AreaChart,
+   Area,
+   XAxis,
+   YAxis,
+   CartesianGrid,
+   Tooltip,
+   ResponsiveContainer,
+   PieChart,
+   Pie,
+   Cell
 } from 'recharts';
 import { motion } from 'framer-motion';
 
 const Dashboard = () => {
-  const navigate = useNavigate();
-  const [activeTab, setActiveTab] = useState('Sales');
-  const [timeRange, setTimeRange] = useState('Today');
-  const [customDates, setCustomDates] = useState({ from: '', to: '' });
-  const [data, setData] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(true);
+   const navigate = useNavigate();
+   const [activeTab, setActiveTab] = useState('Sales');
+   const [timeRange, setTimeRange] = useState('Today');
+   const [customDates, setCustomDates] = useState({ from: '', to: '' });
+   const [data, setData] = useState<any>(null);
+   const [isLoading, setIsLoading] = useState(true);
 
-  const toLocalISOString = (date: Date) => {
-    const tzo = -date.getTimezoneOffset(),
-        dif = tzo >= 0 ? '+' : '-',
-        pad = (num: number) => {
+   const toLocalISOString = (date: Date) => {
+      const tzo = -date.getTimezoneOffset(),
+         dif = tzo >= 0 ? '+' : '-',
+         pad = (num: number) => {
             const norm = Math.floor(Math.abs(num));
             return (norm < 10 ? '0' : '') + norm;
-        };
-    return date.getFullYear() +
-        '-' + pad(date.getMonth() + 1) +
-        '-' + pad(date.getDate()) +
-        'T' + pad(date.getHours()) +
-        ':' + pad(date.getMinutes()) +
-        ':' + pad(date.getSeconds()) +
-        '.' + pad(date.getMilliseconds());
-  };
+         };
+      return date.getFullYear() +
+         '-' + pad(date.getMonth() + 1) +
+         '-' + pad(date.getDate()) +
+         'T' + pad(date.getHours()) +
+         ':' + pad(date.getMinutes()) +
+         ':' + pad(date.getSeconds()) +
+         '.' + pad(date.getMilliseconds());
+   };
 
-  const getRangeDates = (range: string) => {
-    const now = new Date();
-    const start = new Date();
-    const end = new Date();
-    
-    // Set end to end of today
-    end.setHours(23, 59, 59, 999);
+   const getRangeDates = (range: string) => {
+      const now = new Date();
+      const start = new Date();
+      const end = new Date();
 
-    switch (range) {
-      case 'Today':
-        start.setHours(0, 0, 0, 0);
-        break;
-      case 'Yesterday':
-        start.setDate(now.getDate() - 1);
-        start.setHours(0, 0, 0, 0);
-        end.setDate(now.getDate() - 1);
-        end.setHours(23, 59, 59, 999);
-        break;
-      case 'Week':
-        start.setDate(now.getDate() - 7);
-        start.setHours(0, 0, 0, 0);
-        break;
-      case '30 Days':
-        start.setDate(now.getDate() - 30);
-        start.setHours(0, 0, 0, 0);
-        break;
-      case 'Custom':
-        if (customDates.from && customDates.to) {
-          const from = new Date(customDates.from);
-          from.setHours(0, 0, 0, 0);
-          const to = new Date(customDates.to);
-          to.setHours(23, 59, 59, 999);
-          return { from: toLocalISOString(from), to: toLocalISOString(to) };
-        }
-        return null;
-      default:
-        start.setHours(0, 0, 0, 0);
-    }
-    return { from: toLocalISOString(start), to: toLocalISOString(end) };
-  };
+      // Set end to end of today
+      end.setHours(23, 59, 59, 999);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setIsLoading(true);
-        const range = getRangeDates(timeRange);
-        let url = '/api/dashboard/stats';
-        
-        if (range) {
-          const params = new URLSearchParams();
-          params.append('from', range.from);
-          params.append('to', range.to);
-          url += `?${params.toString()}`;
-        }
-
-        console.log('[DASHBOARD-TRACE] Fetching stats from:', url);
-        const response = await apiFetch(url);
-        if (response.ok) {
-          const result = await response.json();
-          setData(result);
-        }
-      } catch (error) {
-        console.error('Error fetching dashboard data:', error);
-      } finally {
-        setIsLoading(false);
+      switch (range) {
+         case 'Today':
+            start.setHours(0, 0, 0, 0);
+            break;
+         case 'Yesterday':
+            start.setDate(now.getDate() - 1);
+            start.setHours(0, 0, 0, 0);
+            end.setDate(now.getDate() - 1);
+            end.setHours(23, 59, 59, 999);
+            break;
+         case 'Week':
+            start.setDate(now.getDate() - 7);
+            start.setHours(0, 0, 0, 0);
+            break;
+         case '30 Days':
+            start.setDate(now.getDate() - 30);
+            start.setHours(0, 0, 0, 0);
+            break;
+         case 'Custom':
+            if (customDates.from && customDates.to) {
+               const from = new Date(customDates.from);
+               from.setHours(0, 0, 0, 0);
+               const to = new Date(customDates.to);
+               to.setHours(23, 59, 59, 999);
+               return { from: toLocalISOString(from), to: toLocalISOString(to) };
+            }
+            return null;
+         default:
+            start.setHours(0, 0, 0, 0);
       }
-    };
-    fetchData();
-  }, [timeRange, customDates]);
+      return { from: toLocalISOString(start), to: toLocalISOString(end) };
+   };
 
-  if (isLoading || !data) {
-    return (
-      <div className="h-screen flex items-center justify-center bg-slate-50/50">
-        <motion.div 
-          animate={{ scale: [1, 1.1, 1], opacity: [0.5, 1, 0.5] }}
-          transition={{ repeat: Infinity, duration: 1.5 }}
-          className="text-[#0f4475] font-black uppercase tracking-widest text-sm"
-        >
-          Loading Business Intelligence...
-        </motion.div>
-      </div>
-    );
-  }
+   useEffect(() => {
+      const fetchData = async () => {
+         try {
+            setIsLoading(true);
+            const range = getRangeDates(timeRange);
+            let url = '/api/dashboard/stats';
 
-  const { stats, storeOverview, hourlySales, insights, trendingItems } = data;
+            if (range) {
+               const params = new URLSearchParams();
+               params.append('from', range.from);
+               params.append('to', range.to);
+               url += `?${params.toString()}`;
+            }
 
-  const pieData = [
-    { name: 'Full Payment', value: stats.periodRevenue, color: '#8b5cf6' },
-    { name: 'Credit', value: 0, color: '#fbbf24' }
-  ];
+            console.log('[DASHBOARD-TRACE] Fetching stats from:', url);
+            const response = await apiFetch(url);
+            if (response.ok) {
+               const result = await response.json();
+               setData(result);
+            }
+         } catch (error) {
+            console.error('Error fetching dashboard data:', error);
+         } finally {
+            setIsLoading(false);
+         }
+      };
+      fetchData();
+   }, [timeRange, customDates]);
 
-  return (
-    <div className="p-8 space-y-8 bg-slate-50/50 min-h-screen font-inter">
-      {/* Top Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex flex-col">
-          <div className="flex items-center gap-2 mb-1">
-             <button title="Navigate back to previous section" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
-                <ArrowRight className="rotate-180 text-slate-400" size={18} />
-             </button>
-             <h2 className="text-xs font-black text-[#0f4475] uppercase tracking-widest">Dashboard</h2>
-          </div>
-          <h1 className="text-2xl font-black text-slate-800">
-            Good morning, {(() => {
-              const saved = localStorage.getItem('systemUser');
-              return saved ? JSON.parse(saved).name : 'Partner';
-            })()}
-          </h1>
-          <p className="text-[10px] text-slate-400 font-medium flex items-center gap-1.5">
-            <span className="p-0.5 bg-slate-200 rounded text-slate-500">i</span>
-            The default time settings for the merchant view are from 12:00 AM to 11:59 PM.
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-3">
-           <button 
-             onClick={() => navigate('/feedback')}
-             className="flex items-center gap-2 bg-amber-50 text-amber-600 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest hover:bg-amber-500 hover:text-white transition-all shadow-sm active:scale-95"
-           >
-             <MessageSquare size={16} />
-             Customer Feedback
-           </button>
+   if (isLoading || !data) {
+      return (
+         <div className="h-screen flex items-center justify-center bg-slate-50/50">
+            <motion.div
+               animate={{ scale: [1, 1.1, 1], opacity: [0.5, 1, 0.5] }}
+               transition={{ repeat: Infinity, duration: 1.5 }}
+               className="text-[#003317] font-black uppercase tracking-widest text-sm"
+            >
+               Loading Business Intelligence...
+            </motion.div>
+         </div>
+      );
+   }
 
-           <button 
-             onClick={() => navigate('/reports')}
-             className="flex items-center gap-2 bg-indigo-50 text-indigo-600 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all shadow-sm active:scale-95"
-           >
-             <BarChart3 size={16} />
-             View Full Report
-           </button>
+   const { stats, storeOverview, hourlySales, insights, trendingItems } = data;
 
-        </div>
-      </div>
+   const pieData = [
+      { name: 'Full Payment', value: stats.periodRevenue, color: '#8b5cf6' },
+      { name: 'Credit', value: 0, color: '#fbbf24' }
+   ];
 
-      {/* Main Stats Grid */}
-      <div className="grid grid-cols-12 gap-6">
-        {/* Sales Chart Section */}
-        <div className="col-span-12 lg:col-span-5 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm relative overflow-hidden group">
-           <div className="flex items-center gap-8 mb-8 border-b border-slate-50">
-              {['Sales', 'Payments'].map(tab => (
-                 <button 
-                  key={tab}
-                  title={`View ${tab} analysis and trends`}
-                  onClick={() => setActiveTab(tab)}
-                  className={`pb-4 text-[11px] font-black uppercase tracking-widest transition-all relative ${activeTab === tab ? 'text-[#0f4475]' : 'text-slate-400 hover:text-slate-600'}`}
-                 >
-                    {tab}
-                    {activeTab === tab && (
-                       <motion.div layoutId="tabLineMain" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0f4475]" />
-                    )}
-                 </button>
-              ))}
-           </div>
-
-            <div className="flex items-center justify-end mb-4 gap-4">
-               <div className="flex items-center gap-2">
-                  <div className="w-2.5 h-2.5 rounded-full border-2 border-[#0f4475]/30 bg-[#0f4475]/10" />
-                  <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{timeRange}'s Revenue</span>
+   return (
+      <div className="p-8 space-y-8 bg-slate-50/50 min-h-screen font-inter">
+         {/* Top Header */}
+         <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+               <div className="flex items-center gap-2 mb-1">
+                  <button title="Navigate back to previous section" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
+                     <ArrowRight className="rotate-180 text-slate-400" size={18} />
+                  </button>
+                  <h2 className="text-xs font-black text-[#003317] uppercase tracking-widest">Dashboard</h2>
                </div>
+               <h1 className="text-2xl font-black text-slate-800">
+                  Good morning, {(() => {
+                     const saved = localStorage.getItem('systemUser');
+                     return saved ? JSON.parse(saved).name : 'Partner';
+                  })()}
+               </h1>
+               <p className="text-[10px] text-slate-400 font-medium flex items-center gap-1.5">
+                  <span className="p-0.5 bg-slate-200 rounded text-slate-500">i</span>
+                  The default time settings for the merchant view are from 12:00 AM to 11:59 PM.
+               </p>
             </div>
 
-           <div className="h-[280px] w-full mt-4">
-              <ResponsiveContainer width="100%" height="100%">
-                <AreaChart data={hourlySales}>
-                  <defs>
-                    <linearGradient id="colorSalesMain" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="#f43f5e" stopOpacity={0.2}/>
-                      <stop offset="95%" stopColor="#f43f5e" stopOpacity={0}/>
-                    </linearGradient>
-                  </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}`} />
-                  <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>
-              </ResponsiveContainer>
-           </div>
-        </div>
+            <div className="flex items-center gap-3">
+               <button
+                  onClick={() => navigate('/feedback')}
+                  className="flex items-center gap-2 bg-amber-50 text-amber-600 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest hover:bg-amber-500 hover:text-white transition-all shadow-sm active:scale-95"
+               >
+                  <MessageSquare size={16} />
+                  Customer Feedback
+               </button>
 
-        {/* Total Sales Gauge */}
-        <div className="col-span-12 lg:col-span-4 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm relative">
-           <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2">
-                 <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Total Revenue</h3>
-                 <Target size={14} className="text-slate-300" />
-              </div>
-           </div>
+               <button
+                  onClick={() => navigate('/reports')}
+                  className="flex items-center gap-2 bg-indigo-50 text-indigo-600 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all shadow-sm active:scale-95"
+               >
+                  <BarChart3 size={16} />
+                  View Full Report
+               </button>
 
-           <div className="relative h-[280px] flex flex-col items-center justify-center">
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
-                   <Pie
-                    data={pieData}
-                    cx="50%"
-                    cy="50%"
-                    innerRadius={75}
-                    outerRadius={100}
-                    paddingAngle={0}
-                    dataKey="value"
-                    startAngle={210}
-                    endAngle={-30}
-                   >
-                    {pieData.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                   </Pie>
-                </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>
-                  <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>
-               </div>
-              <div className="flex gap-6 mt-2">
-                 {pieData.map(item => (
-                    <div key={item.name} className="flex items-center gap-2">
-                       <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: item.color }} />
-                       <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest font-black">{item.name}</span>
-                    </div>
-                 ))}
-              </div>
-           </div>
-        </div>
+            </div>
+         </div>
 
-        {/* Right Stats Column */}
-        <div className="col-span-12 lg:col-span-3 space-y-6">
-           {/* Filters */}
-            <div className="flex flex-col gap-3">
-               <div className="flex items-center justify-between overflow-x-auto gap-2 pb-2 scrollbar-none">
-                  {['Yesterday', 'Today', 'Week', '30 Days', 'Custom'].map(range => (
-                     <button 
-                      key={range}
-                      title={`Analyze data from ${range.toLowerCase()}`}
-                      onClick={() => setTimeRange(range)}
-                      className={`whitespace-nowrap px-3 py-2 text-[10px] font-black uppercase tracking-widest transition-all rounded-xl ${timeRange === range ? 'text-white bg-[#0f4475] shadow-md shadow-[#0f4475]/20' : 'text-slate-400 hover:text-slate-600'}`}
+         {/* Main Stats Grid */}
+         <div className="grid grid-cols-12 gap-6">
+            {/* Sales Chart Section */}
+            <div className="col-span-12 lg:col-span-5 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm relative overflow-hidden group">
+               <div className="flex items-center gap-8 mb-8 border-b border-slate-50">
+                  {['Sales', 'Payments'].map(tab => (
+                     <button
+                        key={tab}
+                        title={`View ${tab} analysis and trends`}
+                        onClick={() => setActiveTab(tab)}
+                        className={`pb-4 text-[11px] font-black uppercase tracking-widest transition-all relative ${activeTab === tab ? 'text-[#003317]' : 'text-slate-400 hover:text-slate-600'}`}
                      >
-                        {range}
+                        {tab}
+                        {activeTab === tab && (
+                           <motion.div layoutId="tabLineMain" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#003317]" />
+                        )}
                      </button>
                   ))}
                </div>
-               {timeRange === 'Custom' && (
-                 <div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1 duration-300">
-                    <input 
-                      type="date" 
-                      value={customDates.from}
-                      onChange={(e) => setCustomDates({ ...customDates, from: e.target.value })}
-                      className="flex-1 bg-white border border-slate-200 rounded-lg px-2 py-1.5 text-[10px] font-bold text-slate-600 outline-none focus:border-[#0f4475]"
-                    />
-                    <span className="text-slate-300 text-[10px] font-bold">to</span>
-                    <input 
-                      type="date" 
-                      value={customDates.to}
-                      onChange={(e) => setCustomDates({ ...customDates, to: e.target.value })}
-                      className="flex-1 bg-white border border-slate-200 rounded-lg px-2 py-1.5 text-[10px] font-bold text-slate-600 outline-none focus:border-[#0f4475]"
-                    />
-                 </div>
-               )}
-            </div>
 
-           {/* Total Orders Card */}
-           <div title="View detailed order volume and throughput" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm relative h-[180px] flex flex-col justify-between group hover:border-[#0f4475]/30 transition-all cursor-pointer">
-              <div className="flex items-center gap-3">
-                 <div className="p-2 bg-amber-50 text-amber-500 rounded-xl group-hover:scale-110 transition-transform">
-                    <ShoppingBag size={20} />
-                 </div>
-                 <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Orders</h4>
-              </div>
-              <div className="flex flex-col items-center">
-                 <h2 className="text-5xl font-black text-slate-800 tracking-tighter">{stats.activeOrders}</h2>
-                 <div className="w-full h-1 bg-green-500 rounded-full mt-4 shadow-sm" />
-              </div>
-           </div>
-
-           {/* Expenses Card */}
-           <div title="Track operational expenditures and overhead" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[130px] flex flex-col justify-between group hover:border-[#0f4475]/30 transition-all cursor-pointer">
-              <div className="flex items-center gap-3">
-                 <div className="p-2 bg-slate-50 text-[#0f4475] rounded-xl shadow-sm group-hover:bg-[#0f4475]/10 transition-colors">
-                    <Wallet size={20} />
-                 </div>
-                 <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Expenses</h4>
-              </div>
-              <div className="text-center pb-2">
-                 <h2 className="text-3xl font-black text-slate-800 tracking-tighter">₹{stats.periodExpenses.toLocaleString()}</h2>
-              </div>
-           </div>
-        </div>
-      </div>
-      
-      {/* Trending Items Section */}
-      <section>
-         <div className="flex items-center justify-between mb-6">
-            <div className="flex items-center gap-3">
-               <div className="p-2 bg-rose-50 text-rose-500 rounded-xl">
-                  <Flame size={20} />
+               <div className="flex items-center justify-end mb-4 gap-4">
+                  <div className="flex items-center gap-2">
+                     <div className="w-2.5 h-2.5 rounded-full border-2 border-[#003317]/30 bg-[#003317]/10" />
+                     <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{timeRange}'s Revenue</span>
+                  </div>
                </div>
-               <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-[0.1em]">Best Selling Food</h3>
-            </div>
-            <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
-               Performance Index <TrendingUp size={12} className="text-emerald-500" />
-            </div>
-         </div>
 
-         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {trendingItems.map((item: any, idx: number) => (
-               <motion.div 
-                 key={idx}
-                 whileHover={{ y: -5 }}
-                 className="bg-white p-5 rounded-[28px] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-500/20 transition-all group overflow-hidden relative cursor-default"
-               >
-                  <div className="absolute top-4 right-4 bg-white/80 backdrop-blur-md px-2.5 py-1 rounded-lg text-[10px] font-black text-slate-900 border border-slate-100 z-10 shadow-sm">
-                     TOP #{idx+1}
+               <div className="h-[280px] w-full mt-4">
+                  <ResponsiveContainer width="100%" height="100%">
+                     <AreaChart data={hourlySales}>
+                        <defs>
+                           <linearGradient id="colorSalesMain" x1="0" y1="0" x2="0" y2="1">
+                              <stop offset="5%" stopColor="#f43f5e" stopOpacity={0.2} />
+                              <stop offset="95%" stopColor="#f43f5e" stopOpacity={0} />
+                           </linearGradient>
+                        </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}`} />
+                        <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>
+                  </ResponsiveContainer>
+               </div>
+            </div>
+
+            {/* Total Sales Gauge */}
+            <div className="col-span-12 lg:col-span-4 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm relative">
+               <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                     <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Total Revenue</h3>
+                     <Target size={14} className="text-slate-300" />
                   </div>
-                      <div className="w-full h-32 rounded-2xl mb-5 overflow-hidden bg-slate-50 flex items-center justify-center">
-                         {item.imageUrl ? (
-                            <img 
-                              src={item.imageUrl} 
-                              alt={item.name} 
-                              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-90 group-hover:opacity-100" 
-                            />
-                         ) : (
-                            <div className="w-full h-full bg-slate-50/50" />
-                         )}
-                      </div>
-                  <div className="flex justify-between items-start mb-2">
-                     <div>
-                        <h4 className="text-sm font-black text-slate-800 leading-tight mb-1 group-hover:text-indigo-600 transition-colors uppercase tracking-tight">{item.name}</h4>
-                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{item.category}</p>
+               </div>
+
+               <div className="relative h-[280px] flex flex-col items-center justify-center">
+                  <ResponsiveContainer width="100%" height="100%">
+                     <PieChart>
+                        <Pie
+                           data={pieData}
+                           cx="50%"
+                           cy="50%"
+                           innerRadius={75}
+                           outerRadius={100}
+                           paddingAngle={0}
+                           dataKey="value"
+                           startAngle={210}
+                           endAngle={-30}
+                        >
+                           {pieData.map((entry, index) => (
+                              <Cell key={`cell-${index}`} fill={entry.color} />
+                           ))}
+                        </Pie>
+                     </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>
+                     <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>
+                  </div>
+                  <div className="flex gap-6 mt-2">
+                     {pieData.map(item => (
+                        <div key={item.name} className="flex items-center gap-2">
+                           <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: item.color }} />
+                           <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest font-black">{item.name}</span>
+                        </div>
+                     ))}
+                  </div>
+               </div>
+            </div>
+
+            {/* Right Stats Column */}
+            <div className="col-span-12 lg:col-span-3 space-y-6">
+               {/* Filters */}
+               <div className="flex flex-col gap-3">
+                  <div className="flex items-center justify-between overflow-x-auto gap-2 pb-2 scrollbar-none">
+                     {['Yesterday', 'Today', 'Week', '30 Days', 'Custom'].map(range => (
+                        <button
+                           key={range}
+                           title={`Analyze data from ${range.toLowerCase()}`}
+                           onClick={() => setTimeRange(range)}
+                           className={`whitespace-nowrap px-3 py-2 text-[10px] font-black uppercase tracking-widest transition-all rounded-xl ${timeRange === range ? 'text-white bg-[#003317] shadow-md shadow-[#003317]/20' : 'text-slate-400 hover:text-slate-600'}`}
+                        >
+                           {range}
+                        </button>
+                     ))}
+                  </div>
+                  {timeRange === 'Custom' && (
+                     <div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1 duration-300">
+                        <input
+                           type="date"
+                           value={customDates.from}
+                           onChange={(e) => setCustomDates({ ...customDates, from: e.target.value })}
+                           className="flex-1 bg-white border border-slate-200 rounded-lg px-2 py-1.5 text-[10px] font-bold text-slate-600 outline-none focus:border-[#003317]"
+                        />
+                        <span className="text-slate-300 text-[10px] font-bold">to</span>
+                        <input
+                           type="date"
+                           value={customDates.to}
+                           onChange={(e) => setCustomDates({ ...customDates, to: e.target.value })}
+                           className="flex-1 bg-white border border-slate-200 rounded-lg px-2 py-1.5 text-[10px] font-bold text-slate-600 outline-none focus:border-[#003317]"
+                        />
                      </div>
-                  </div>
-                  <div className="flex items-center justify-between mt-4 pt-4 border-t border-slate-50">
-                     <div className="text-[10px] text-slate-400 font-black uppercase tracking-tight">Orders Count</div>
-                     <div className="text-lg font-black text-indigo-900 tracking-tighter">{item.orderCount} <span className="text-[10px] font-bold text-slate-300">Unit(s)</span></div>
-                  </div>
-               </motion.div>
-            ))}
-         </div>
-      </section>
+                  )}
+               </div>
 
-      {/* Bottom Section */}
-      <div className="grid grid-cols-12 gap-8 mt-4 pb-12">
-         {/* Store Insights */}
-         <div className="col-span-12 lg:col-span-5 bg-white rounded-[32px] border border-slate-100 shadow-sm p-8 flex flex-col">
-            <h3 className="text-sm font-black text-slate-800 tracking-tight mb-8 uppercase tracking-widest">Business Intelligence</h3>
-            <div className="space-y-4 flex-1">
-               {insights.map((insight: any, idx: number) => (
-                  <motion.div 
-                    initial={{ x: -20, opacity: 0 }}
-                    animate={{ x: 0, opacity: 1 }}
-                    transition={{ delay: idx * 0.1 }}
-                    key={idx} 
-                    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'}`}
+               {/* Total Orders Card */}
+               <div title="View detailed order volume and throughput" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm relative h-[180px] flex flex-col justify-between group hover:border-[#003317]/30 transition-all cursor-pointer">
+                  <div className="flex items-center gap-3">
+                     <div className="p-2 bg-amber-50 text-amber-500 rounded-xl group-hover:scale-110 transition-transform">
+                        <ShoppingBag size={20} />
+                     </div>
+                     <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Orders</h4>
+                  </div>
+                  <div className="flex flex-col items-center">
+                     <h2 className="text-5xl font-black text-slate-800 tracking-tighter">{stats.activeOrders}</h2>
+                     <div className="w-full h-1 bg-green-500 rounded-full mt-4 shadow-sm" />
+                  </div>
+               </div>
+
+               {/* Expenses Card */}
+               <div title="Track operational expenditures and overhead" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[130px] flex flex-col justify-between group hover:border-[#003317]/30 transition-all cursor-pointer">
+                  <div className="flex items-center gap-3">
+                     <div className="p-2 bg-slate-50 text-[#003317] rounded-xl shadow-sm group-hover:bg-[#003317]/10 transition-colors">
+                        <Wallet size={20} />
+                     </div>
+                     <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Expenses</h4>
+                  </div>
+                  <div className="text-center pb-2">
+                     <h2 className="text-3xl font-black text-slate-800 tracking-tighter">₹{stats.periodExpenses.toLocaleString()}</h2>
+                  </div>
+               </div>
+            </div>
+         </div>
+
+         {/* Trending Items Section */}
+         <section>
+            <div className="flex items-center justify-between mb-6">
+               <div className="flex items-center gap-3">
+                  <div className="p-2 bg-rose-50 text-rose-500 rounded-xl">
+                     <Flame size={20} />
+                  </div>
+                  <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-[0.1em]">Best Selling Food</h3>
+               </div>
+               <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+                  Performance Index <TrendingUp size={12} className="text-emerald-500" />
+               </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+               {trendingItems.map((item: any, idx: number) => (
+                  <motion.div
+                     key={idx}
+                     whileHover={{ y: -5 }}
+                     className="bg-white p-5 rounded-[28px] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-500/20 transition-all group overflow-hidden relative cursor-default"
                   >
-                     <p className="text-[11px] font-black text-slate-600 leading-relaxed uppercase tracking-tight">
-                        {(insight.text || insight).replace(/R(?=[0-9])/g, '₹')}
-                     </p>
+                     <div className="absolute top-4 right-4 bg-white/80 backdrop-blur-md px-2.5 py-1 rounded-lg text-[10px] font-black text-slate-900 border border-slate-100 z-10 shadow-sm">
+                        TOP #{idx + 1}
+                     </div>
+                     <div className="w-full h-32 rounded-2xl mb-5 overflow-hidden bg-slate-50 flex items-center justify-center">
+                        {item.imageUrl ? (
+                           <img
+                              src={item.imageUrl}
+                              alt={item.name}
+                              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-90 group-hover:opacity-100"
+                           />
+                        ) : (
+                           <div className="w-full h-full bg-slate-50/50" />
+                        )}
+                     </div>
+                     <div className="flex justify-between items-start mb-2">
+                        <div>
+                           <h4 className="text-sm font-black text-slate-800 leading-tight mb-1 group-hover:text-indigo-600 transition-colors uppercase tracking-tight">{item.name}</h4>
+                           <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{item.category}</p>
+                        </div>
+                     </div>
+                     <div className="flex items-center justify-between mt-4 pt-4 border-t border-slate-50">
+                        <div className="text-[10px] text-slate-400 font-black uppercase tracking-tight">Orders Count</div>
+                        <div className="text-lg font-black text-indigo-900 tracking-tighter">{item.orderCount} <span className="text-[10px] font-bold text-slate-300">Unit(s)</span></div>
+                     </div>
                   </motion.div>
                ))}
             </div>
-            <div className="mt-8">
-               <button title="Refresh and sync comprehensive business insights" className="w-full py-3 border border-dashed border-slate-200 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest hover:border-[#0f4475]/30 hover:text-[#0f4475] transition-all">
-                  Generate More Insights
-               </button>
-            </div>
-         </div>
+         </section>
 
-         {/* Store Overview */}
-         <div className="col-span-12 lg:col-span-7 bg-white rounded-[32px] border border-slate-100 shadow-sm p-8">
-            <div className="flex items-center justify-between mb-8">
-               <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Store Performance</h3>
-               <button title="View detailed metrics for all geographic locations" className="text-[10px] font-black text-[#0f4475] uppercase tracking-widest hover:underline">View All Locations</button>
+         {/* Bottom Section */}
+         <div className="grid grid-cols-12 gap-8 mt-4 pb-12">
+            {/* Store Insights */}
+            <div className="col-span-12 lg:col-span-5 bg-white rounded-[32px] border border-slate-100 shadow-sm p-8 flex flex-col">
+               <h3 className="text-sm font-black text-slate-800 tracking-tight mb-8 uppercase tracking-widest">Business Intelligence</h3>
+               <div className="space-y-4 flex-1">
+                  {insights.map((insight: any, idx: number) => (
+                     <motion.div
+                        initial={{ x: -20, opacity: 0 }}
+                        animate={{ x: 0, opacity: 1 }}
+                        transition={{ delay: idx * 0.1 }}
+                        key={idx}
+                        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, '₹')}
+                        </p>
+                     </motion.div>
+                  ))}
+               </div>
+               <div className="mt-8">
+                  <button title="Refresh and sync comprehensive business insights" className="w-full py-3 border border-dashed border-slate-200 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest hover:border-[#003317]/30 hover:text-[#003317] transition-all">
+                     Generate More Insights
+                  </button>
+               </div>
             </div>
-            
-            <div className="space-y-6">
-               {(storeOverview.length > 0 ? storeOverview : [{name: 'No active sales currently', sale: 0, orders: 0, taxes: 0, purchase: 0}]).map((store: any, idx: number) => (
-                  <div key={idx} className="p-6 rounded-[28px] border border-slate-50 bg-slate-50/30 group hover:bg-white hover:shadow-lg hover:border-transparent transition-all border-l-4 border-l-[#0f4475]/30">
-                     <p className="text-xs font-black text-slate-800 mb-6 uppercase tracking-widest flex items-center justify-between">
-                        {store.name}
-                        <ArrowRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#0f4475]" />
-                     </p>
-                     <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>
-                        </div>
-                        <div className="space-y-1.5">
-                           <p className="text-[9px] font-black text-blue-500 uppercase tracking-widest opacity-60">Volume</p>
-                           <p className="text-lg font-black text-slate-800 tracking-tighter">{store.orders} Orders</p>
-                        </div>
-                        <div className="space-y-1.5">
-                           <p className="text-[9px] font-black text-indigo-500 uppercase tracking-widest opacity-60">Taxation</p>
-                           <p className="text-lg font-black text-slate-800 tracking-tighter">₹{store.taxes}</p>
-                        </div>
-                        <div className="space-y-1.5 text-right">
-                           <p className="text-[9px] font-black text-amber-500 uppercase tracking-widest opacity-60">Procurement</p>
-                           <p className="text-lg font-black text-slate-800 tracking-tighter">₹{store.purchase}</p>
+
+            {/* Store Overview */}
+            <div className="col-span-12 lg:col-span-7 bg-white rounded-[32px] border border-slate-100 shadow-sm p-8">
+               <div className="flex items-center justify-between mb-8">
+                  <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Store Performance</h3>
+                  <button title="View detailed metrics for all geographic locations" className="text-[10px] font-black text-[#003317] uppercase tracking-widest hover:underline">View All Locations</button>
+               </div>
+
+               <div className="space-y-6">
+                  {(storeOverview.length > 0 ? storeOverview : [{ name: 'No active sales currently', sale: 0, orders: 0, taxes: 0, purchase: 0 }]).map((store: any, idx: number) => (
+                     <div key={idx} className="p-6 rounded-[28px] border border-slate-50 bg-slate-50/30 group hover:bg-white hover:shadow-lg hover:border-transparent transition-all border-l-4 border-l-[#003317]/30">
+                        <p className="text-xs font-black text-slate-800 mb-6 uppercase tracking-widest flex items-center justify-between">
+                           {store.name}
+                           <ArrowRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#003317]" />
+                        </p>
+                        <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>
+                           </div>
+                           <div className="space-y-1.5">
+                              <p className="text-[9px] font-black text-blue-500 uppercase tracking-widest opacity-60">Volume</p>
+                              <p className="text-lg font-black text-slate-800 tracking-tighter">{store.orders} Orders</p>
+                           </div>
+                           <div className="space-y-1.5">
+                              <p className="text-[9px] font-black text-indigo-500 uppercase tracking-widest opacity-60">Taxation</p>
+                              <p className="text-lg font-black text-slate-800 tracking-tighter">₹{store.taxes}</p>
+                           </div>
+                           <div className="space-y-1.5 text-right">
+                              <p className="text-[9px] font-black text-amber-500 uppercase tracking-widest opacity-60">Procurement</p>
+                              <p className="text-lg font-black text-slate-800 tracking-tighter">₹{store.purchase}</p>
+                           </div>
                         </div>
                      </div>
-                  </div>
-               ))}
-            </div>
+                  ))}
+               </div>
 
-            <div className="mt-10 flex justify-center">
-               <button title="Execute a granular comparison across different store cohorts" className="flex items-center gap-3 px-8 py-3 bg-[#0f4475] text-white text-[11px] font-black uppercase tracking-widest rounded-2xl shadow-xl shadow-[#0f4475]/20 hover:scale-105 transition-all group">
-                  Detailed Comparison
-                  <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
-               </button>
+               <div className="mt-10 flex justify-center">
+                  <button title="Execute a granular comparison across different store cohorts" className="flex items-center gap-3 px-8 py-3 bg-[#003317] text-white text-[11px] font-black uppercase tracking-widest rounded-2xl shadow-xl shadow-[#003317]/20 hover:scale-105 transition-all group">
+                     Detailed Comparison
+                     <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
+                  </button>
+               </div>
             </div>
          </div>
       </div>
-    </div>
-  );
+   );
 };
 
 export default Dashboard;
diff --git a/frontend/src/pages/IntentDashboard.tsx b/frontend/src/pages/IntentDashboard.tsx
index fc1bccd1..c6d506c4 100644
--- a/frontend/src/pages/IntentDashboard.tsx
+++ b/frontend/src/pages/IntentDashboard.tsx
@@ -3,272 +3,271 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { format } from 'date-fns';
-import { 
-  Filter, 
-  ChevronRight, 
-  ShoppingBag, 
-  Package, 
-  Wallet, 
-  RefreshCw,
-  Clock,
-  LayoutGrid,
-  FileText,
-  Boxes,
-  Eye,
-  ArrowRight
+import {
+   Filter,
+   ChevronRight,
+   ShoppingBag,
+   Package,
+   Wallet,
+   RefreshCw,
+   Clock,
+   LayoutGrid,
+   FileText,
+   Boxes,
+   Eye,
+   ArrowRight
 } from 'lucide-react';
-import { 
-  AreaChart, 
-  Area, 
-  XAxis, 
-  YAxis, 
-  CartesianGrid, 
-  Tooltip, 
-  ResponsiveContainer 
+import {
+   AreaChart,
+   Area,
+   XAxis,
+   YAxis,
+   CartesianGrid,
+   Tooltip,
+   ResponsiveContainer
 } from 'recharts';
 
 interface IntentDashboardProps {
-  title: string;
+   title: string;
 }
 
 const StatCard = ({ icon: Icon, label, value, color }: any) => (
-  <motion.div 
-    initial={{ opacity: 0, y: 10 }}
-    animate={{ opacity: 1, y: 0 }}
-    className="bg-white p-5 rounded-2xl border border-[#e2e8f0] flex items-center gap-4 flex-1 shadow-sm hover:shadow-md transition-all"
-  >
-    <div className={`p-3 rounded-xl ${color} bg-opacity-10 text-${color.split('-')[1]}-600`}>
-      <Icon size={20} />
-    </div>
-    <div>
-      <p className="text-[11px] font-bold text-[#94a3b8] uppercase tracking-wider">{label}</p>
-      <h3 className="text-xl font-black text-[#1e293b]">{value}</h3>
-    </div>
-  </motion.div>
+   <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="bg-white p-5 rounded-2xl border border-[#e2e8f0] flex items-center gap-4 flex-1 shadow-sm hover:shadow-md transition-all"
+   >
+      <div className={`p-3 rounded-xl ${color} bg-opacity-10 text-${color.split('-')[1]}-600`}>
+         <Icon size={20} />
+      </div>
+      <div>
+         <p className="text-[11px] font-bold text-[#94a3b8] uppercase tracking-wider">{label}</p>
+         <h3 className="text-xl font-black text-[#1e293b]">{value}</h3>
+      </div>
+   </motion.div>
 );
 
 interface IntentStats {
-    openCount: number;
-    openItems: number;
-    payableAmount: number;
-    unbilledCount: number;
-    recentOrders: any[];
-    trend: any[];
+   openCount: number;
+   openItems: number;
+   payableAmount: number;
+   unbilledCount: number;
+   recentOrders: any[];
+   trend: any[];
 }
 
 const IntentDashboard: React.FC<IntentDashboardProps> = ({ title }) => {
-  const [stats, setStats] = useState<IntentStats | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [filterTab, setFilterTab] = useState('All');
-  const navigate = useNavigate();
+   const [stats, setStats] = useState<IntentStats | null>(null);
+   const [loading, setLoading] = useState(true);
+   const [filterTab, setFilterTab] = useState('All');
+   const navigate = useNavigate();
 
-  useEffect(() => {
-    fetchStats();
-  }, [title]);
+   useEffect(() => {
+      fetchStats();
+   }, [title]);
 
-  const fetchStats = async () => {
-    setLoading(true);
-    try {
-      const response = await apiFetch(`http://${window.location.hostname}:8080/api/purchases/intent/summary`);
-      const data = await response.json();
-      setStats(data);
-    } catch (error) {
-      console.error('Error fetching intent stats:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
+   const fetchStats = async () => {
+      setLoading(true);
+      try {
+         const response = await apiFetch(`http://${window.location.hostname}:8080/api/purchases/intent/summary`);
+         const data = await response.json();
+         setStats(data);
+      } catch (error) {
+         console.error('Error fetching intent stats:', error);
+      } finally {
+         setLoading(false);
+      }
+   };
 
-  const chartData = stats?.trend?.map(t => ({
+   const chartData = stats?.trend?.map(t => ({
       date: format(new Date(t[0]), 'MMM dd'),
       total: t[1],
       open: t[1] * 0.4 // Sample logic for visual variety if status-specific trend isn't available
-  })) || [];
+   })) || [];
 
-  const statusBreakdown = [
-    { label: 'OPEN', value: stats?.openCount || 0 },
-    { label: 'CLOSE', value: stats?.recentOrders?.filter(o => o.status === 'CLOSE').length || 0 },
-    { label: 'ACKNOWLEDGE', value: 0 },
-    { label: 'RECEIVED', value: stats?.unbilledCount || 0 }
-  ];
-  return (
-    <div className="p-6 space-y-6 bg-[#f8fafc] min-h-screen font-inter">
-      {/* Top Header & Filter */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <h1 className="text-xl font-black text-[#0f4475] uppercase tracking-wider flex items-center gap-2">
-           <LayoutGrid size={20} />
-           {title}
-        </h1>
-        <div className="flex items-center gap-3 bg-white p-1.5 rounded-2xl border border-[#e2e8f0] shadow-sm">
-           <button className="flex items-center gap-2 bg-[#0f4475] text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-[#1e4e8c] transition-all shadow-md shadow-[#0f4475]/10">
-              <Filter size={14} /> Filter
-           </button>
-           <div className="flex items-center gap-3 px-3 border-l border-[#e2e8f0]">
-              <div className="flex items-center gap-2">
-                <span className="text-[10px] font-bold text-[#94a3b8] uppercase">Start:</span>
-                <span className="text-xs font-bold text-[#0f4475] bg-[#0f4475]/5 px-2.5 py-1 rounded-lg">2026-03-10</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-[10px] font-bold text-[#94a3b8] uppercase">End:</span>
-                <span className="text-xs font-bold text-[#0f4475] bg-[#0f4475]/5 px-2.5 py-1 rounded-lg">2026-04-10</span>
-              </div>
-           </div>
-        </div>
-      </div>
-
-      {/* Stats Grid */}
-      <div className="flex flex-wrap gap-4 relative">
-         {loading && <div className="absolute inset-0 bg-white/50 backdrop-blur-[1px] z-10 rounded-2xl flex items-center justify-center"><RefreshCw className="animate-spin text-[#0f4475]" size={24} /></div>}
-         <StatCard icon={Clock} label="Open" value={stats?.openCount || 0} color="bg-cyan-500" />
-         <StatCard icon={Boxes} label="Open Items" value={stats?.openItems || 0} color="bg-indigo-500" />
-         <StatCard icon={Wallet} label="Payable Amount" value={`₹${stats?.payableAmount?.toLocaleString() || 0}`} color="bg-amber-500" />
-         <StatCard icon={FileText} label="Unbilled" value={stats?.unbilledCount || 0} color="bg-rose-500" />
-      </div>
-
-      {/* Main Content Area */}
-      <div className="grid grid-cols-12 gap-6">
-         {/* Left Column: Chart & Breakdown */}
-         <div className="col-span-12 lg:col-span-8 space-y-6">
-            <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm relative overflow-hidden">
-               <div className="flex items-center justify-between mb-8">
-                  <h3 className="text-sm font-black text-[#1e293b] flex items-center gap-2">
-                     Orders in the last 30 days
-                     <button onClick={fetchStats} className={`text-[#94a3b8] hover:text-[#0f4475] transition-colors ${loading ? 'animate-spin' : ''}`}><RefreshCw size={14} /></button>
-                  </h3>
-                  <div className="flex items-center gap-4">
-                     {['Open', 'Closed', 'Total'].map((l, i) => (
-                       <div key={l} className="flex items-center gap-1.5">
-                          <div className={`w-2.5 h-2.5 rounded-full ${i === 0 ? 'bg-amber-500' : i === 1 ? 'bg-rose-500' : 'bg-[#0f4475]'}`} />
-                          <span className="text-[10px] font-bold text-[#64748b]">{l}</span>
-                       </div>
-                     ))}
+   const statusBreakdown = [
+      { label: 'OPEN', value: stats?.openCount || 0 },
+      { label: 'CLOSE', value: stats?.recentOrders?.filter(o => o.status === 'CLOSE').length || 0 },
+      { label: 'ACKNOWLEDGE', value: 0 },
+      { label: 'RECEIVED', value: stats?.unbilledCount || 0 }
+   ];
+   return (
+      <div className="p-6 space-y-6 bg-[#f8fafc] min-h-screen font-inter">
+         {/* Top Header & Filter */}
+         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <h1 className="text-xl font-black text-[#003317] uppercase tracking-wider flex items-center gap-2">
+               <LayoutGrid size={20} />
+               {title}
+            </h1>
+            <div className="flex items-center gap-3 bg-white p-1.5 rounded-2xl border border-[#e2e8f0] shadow-sm">
+               <button className="flex items-center gap-2 bg-[#003317] text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-[#1e4e8c] transition-all shadow-md shadow-[#003317]/10">
+                  <Filter size={14} /> Filter
+               </button>
+               <div className="flex items-center gap-3 px-3 border-l border-[#e2e8f0]">
+                  <div className="flex items-center gap-2">
+                     <span className="text-[10px] font-bold text-[#94a3b8] uppercase">Start:</span>
+                     <span className="text-xs font-bold text-[#003317] bg-[#003317]/5 px-2.5 py-1 rounded-lg">2026-03-10</span>
                   </div>
-               </div>
-               <div className="h-[300px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <AreaChart data={chartData}>
-                      <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
-                      <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{fill: '#94a3b8', fontSize: 10, fontWeight: 700}} dy={10} />
-                      <YAxis axisLine={false} tickLine={false} tick={{fill: '#94a3b8', fontSize: 10, fontWeight: 700}} />
-                      <Tooltip 
-                        contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }}
-                        itemStyle={{ fontWeight: 'bold' }}
-                      />
-                      <Area type="monotone" dataKey="open" stroke="#f59e0b" fill="#f59e0b" fillOpacity={0.05} strokeWidth={2} />
-                      <Area type="monotone" dataKey="total" stroke="#0f4475" fill="#0f4475" fillOpacity={0.05} strokeWidth={2} />
-                    </AreaChart>
-                  </ResponsiveContainer>
-               </div>
-            </div>
-
-            <div className="grid grid-cols-2 gap-6">
-               <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm">
-                  <h3 className="text-sm font-black text-[#1e293b] mb-12">Top Items</h3>
-                  <div className="flex flex-col items-center justify-center p-8 text-[#94a3b8]">
-                     <Package size={48} className="opacity-10 mb-4" />
-                     <p className="text-xs font-bold uppercase tracking-widest">No items found</p>
-                  </div>
-               </div>
-               <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm">
-                  <h3 className="text-sm font-black text-[#1e293b] mb-6">Status Breakdown</h3>
-                  <div className="space-y-4">
-                     {statusBreakdown.map(s => (
-                       <div key={s.label} className="group border-b border-[#f1f5f9] last:border-0 pb-3 last:pb-0 flex items-center justify-between hover:bg-gray-50/50 rounded-lg p-1 transition-all cursor-pointer">
-                          <span className="text-[11px] font-black text-[#64748b] tracking-wider">{s.label}</span>
-                          <div className="flex items-center gap-3">
-                             <span className="text-xs font-black text-[#1e293b]">{s.value}</span>
-                             <button className="text-[#94a3b8] group-hover:text-[#0f4475] opacity-0 group-hover:opacity-100 transition-all"><ArrowRight size={14} /></button>
-                          </div>
-                       </div>
-                     ))}
+                  <div className="flex items-center gap-2">
+                     <span className="text-[10px] font-bold text-[#94a3b8] uppercase">End:</span>
+                     <span className="text-xs font-bold text-[#003317] bg-[#003317]/5 px-2.5 py-1 rounded-lg">2026-04-10</span>
                   </div>
                </div>
             </div>
          </div>
 
-         {/* Right Column: Recent & Links */}
-         <div className="col-span-12 lg:col-span-4 space-y-6">
-            <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm overflow-hidden relative">
-               {loading && <div className="absolute inset-0 bg-white/30 backdrop-blur-[1px] z-10" />}
-               <div className="flex items-center justify-between mb-6">
-                  <h3 className="text-sm font-black text-[#1e293b]">Recent Orders</h3>
-                  <button onClick={fetchStats} className={`text-[#38bdf8] p-1.5 hover:bg-sky-50 rounded-lg transition-all ${loading ? 'animate-spin' : ''}`}><RefreshCw size={16} /></button>
-               </div>
-               <div className="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-hide">
-                  {['All', 'Open', 'Billed', 'Received', 'Closed'].map((t) => (
-                    <button 
-                       key={t} 
-                       onClick={() => setFilterTab(t)}
-                       className={`whitespace-nowrap px-3 py-1.5 rounded-lg text-[10px] font-bold transition-all ${filterTab === t ? 'bg-[#0f4475] text-white shadow-md shadow-[#0f4475]/20' : 'bg-[#f8fafc] text-[#64748b] hover:bg-[#f1f5f9]'}`}
-                    >
-                       {t}
-                    </button>
-                  ))}
-               </div>
-               <div className="space-y-3">
-                  {(() => {
-                    const filtered = stats?.recentOrders?.filter(o => {
-                        if (filterTab === 'All') return true;
-                        if (filterTab === 'Open') return o.status === 'OPEN';
-                        if (filterTab === 'Billed') return o.status === 'BILLED';
-                        if (filterTab === 'Received') return o.status === 'RECEIVED';
-                        if (filterTab === 'Closed') return o.status === 'CLOSE' || o.status === 'CLOSED';
-                        return true;
-                    }) || [];
+         {/* Stats Grid */}
+         <div className="flex flex-wrap gap-4 relative">
+            {loading && <div className="absolute inset-0 bg-white/50 backdrop-blur-[1px] z-10 rounded-2xl flex items-center justify-center"><RefreshCw className="animate-spin text-[#003317]" size={24} /></div>}
+            <StatCard icon={Clock} label="Open" value={stats?.openCount || 0} color="bg-cyan-500" />
+            <StatCard icon={Boxes} label="Open Items" value={stats?.openItems || 0} color="bg-indigo-500" />
+            <StatCard icon={Wallet} label="Payable Amount" value={`₹${stats?.payableAmount?.toLocaleString() || 0}`} color="bg-amber-500" />
+            <StatCard icon={FileText} label="Unbilled" value={stats?.unbilledCount || 0} color="bg-rose-500" />
+         </div>
 
-                    if (filtered.length === 0) {
-                        return <div className="py-12 text-center text-[#94a3b8] text-xs font-bold italic">No {filterTab.toLowerCase()} orders</div>;
-                    }
+         {/* Main Content Area */}
+         <div className="grid grid-cols-12 gap-6">
+            {/* Left Column: Chart & Breakdown */}
+            <div className="col-span-12 lg:col-span-8 space-y-6">
+               <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm relative overflow-hidden">
+                  <div className="flex items-center justify-between mb-8">
+                     <h3 className="text-sm font-black text-[#1e293b] flex items-center gap-2">
+                        Orders in the last 30 days
+                        <button onClick={fetchStats} className={`text-[#94a3b8] hover:text-[#003317] transition-colors ${loading ? 'animate-spin' : ''}`}><RefreshCw size={14} /></button>
+                     </h3>
+                     <div className="flex items-center gap-4">
+                        {['Open', 'Closed', 'Total'].map((l, i) => (
+                           <div key={l} className="flex items-center gap-1.5">
+                              <div className={`w-2.5 h-2.5 rounded-full ${i === 0 ? 'bg-amber-500' : i === 1 ? 'bg-rose-500' : 'bg-[#003317]'}`} />
+                              <span className="text-[10px] font-bold text-[#64748b]">{l}</span>
+                           </div>
+                        ))}
+                     </div>
+                  </div>
+                  <div className="h-[300px]">
+                     <ResponsiveContainer width="100%" height="100%">
+                        <AreaChart data={chartData}>
+                           <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
+                           <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 700 }} dy={10} />
+                           <YAxis axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 700 }} />
+                           <Tooltip
+                              contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }}
+                              itemStyle={{ fontWeight: 'bold' }}
+                           />
+                           <Area type="monotone" dataKey="open" stroke="#f59e0b" fill="#f59e0b" fillOpacity={0.05} strokeWidth={2} />
+                           <Area type="monotone" dataKey="total" stroke="#003317" fill="#003317" fillOpacity={0.05} strokeWidth={2} />
+                        </AreaChart>
+                     </ResponsiveContainer>
+                  </div>
+               </div>
 
-                    return filtered.map(o => (
-                        <div key={o.id} className="p-3 bg-[#f8fafc] border border-[#f1f5f9] rounded-xl hover:shadow-md transition-all cursor-pointer group">
-                        <div className="flex justify-between items-start mb-1">
-                            <span className="text-[11px] font-black text-[#1e293b]">#{o.purchaseId || o.id}</span>
-                            <span className="text-[11px] font-black text-[#1e293b]">₹{o.amount?.toLocaleString()}</span>
-                        </div>
-                        <div className="flex justify-between items-end">
-                            <span className="text-[10px] font-semibold text-[#94a3b8]">{o.date ? format(new Date(o.date), 'MMM dd, yyyy HH:mm') : 'N/A'}</span>
-                            <span className={`text-[9px] font-black px-1.5 py-0.5 rounded uppercase ${
-                                o.status === 'CLOSE' || o.status === 'CLOSED' ? 'text-rose-600 bg-rose-50' : 
-                                o.status === 'OPEN' ? 'text-amber-600 bg-amber-50' :
-                                o.status === 'BILLED' ? 'text-indigo-600 bg-indigo-50' :
-                                'text-emerald-700 bg-emerald-100'
-                            }`}>{o.status}</span>
-                        </div>
-                        </div>
-                    ));
-                  })()}
+               <div className="grid grid-cols-2 gap-6">
+                  <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm">
+                     <h3 className="text-sm font-black text-[#1e293b] mb-12">Top Items</h3>
+                     <div className="flex flex-col items-center justify-center p-8 text-[#94a3b8]">
+                        <Package size={48} className="opacity-10 mb-4" />
+                        <p className="text-xs font-bold uppercase tracking-widest">No items found</p>
+                     </div>
+                  </div>
+                  <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm">
+                     <h3 className="text-sm font-black text-[#1e293b] mb-6">Status Breakdown</h3>
+                     <div className="space-y-4">
+                        {statusBreakdown.map(s => (
+                           <div key={s.label} className="group border-b border-[#f1f5f9] last:border-0 pb-3 last:pb-0 flex items-center justify-between hover:bg-gray-50/50 rounded-lg p-1 transition-all cursor-pointer">
+                              <span className="text-[11px] font-black text-[#64748b] tracking-wider">{s.label}</span>
+                              <div className="flex items-center gap-3">
+                                 <span className="text-xs font-black text-[#1e293b]">{s.value}</span>
+                                 <button className="text-[#94a3b8] group-hover:text-[#003317] opacity-0 group-hover:opacity-100 transition-all"><ArrowRight size={14} /></button>
+                              </div>
+                           </div>
+                        ))}
+                     </div>
+                  </div>
                </div>
             </div>
 
-            <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm">
-               <h3 className="text-sm font-black text-[#1e293b] mb-4">Quick Links</h3>
-               <div className="space-y-2">
-                  {[
-                    { label: 'Inventory', icon: Boxes, path: '/inventory/products' },
-                    { label: 'Raw Materials', icon: Package, path: '/inventory/base' },
-                    { label: 'Draft Orders', icon: FileText, path: '/purchases/orders' }
-                  ].map(l => (
-                    <button 
-                      key={l.label} 
-                      onClick={() => navigate(l.path)}
-                      className="w-full flex items-center justify-between p-3.5 bg-[#f8fafc] border border-[#f1f5f9] rounded-xl hover:bg-gray-50 transition-all group"
-                    >
-                       <div className="flex items-center gap-3">
-                          <div className="p-2 bg-white rounded-lg shadow-sm text-[#94a3b8] group-hover:text-[#0f4475] transition-colors">
-                             <l.icon size={16} />
-                          </div>
-                          <span className="text-xs font-bold text-[#64748b]">{l.label}</span>
-                       </div>
-                       <ChevronRight size={14} className="text-[#cbd5e1] group-hover:text-[#0f4475] transition-all" />
-                    </button>
-                  ))}
+            {/* Right Column: Recent & Links */}
+            <div className="col-span-12 lg:col-span-4 space-y-6">
+               <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm overflow-hidden relative">
+                  {loading && <div className="absolute inset-0 bg-white/30 backdrop-blur-[1px] z-10" />}
+                  <div className="flex items-center justify-between mb-6">
+                     <h3 className="text-sm font-black text-[#1e293b]">Recent Orders</h3>
+                     <button onClick={fetchStats} className={`text-[#38bdf8] p-1.5 hover:bg-sky-50 rounded-lg transition-all ${loading ? 'animate-spin' : ''}`}><RefreshCw size={16} /></button>
+                  </div>
+                  <div className="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-hide">
+                     {['All', 'Open', 'Billed', 'Received', 'Closed'].map((t) => (
+                        <button
+                           key={t}
+                           onClick={() => setFilterTab(t)}
+                           className={`whitespace-nowrap px-3 py-1.5 rounded-lg text-[10px] font-bold transition-all ${filterTab === t ? 'bg-[#003317] text-white shadow-md shadow-[#003317]/20' : 'bg-[#f8fafc] text-[#64748b] hover:bg-[#f1f5f9]'}`}
+                        >
+                           {t}
+                        </button>
+                     ))}
+                  </div>
+                  <div className="space-y-3">
+                     {(() => {
+                        const filtered = stats?.recentOrders?.filter(o => {
+                           if (filterTab === 'All') return true;
+                           if (filterTab === 'Open') return o.status === 'OPEN';
+                           if (filterTab === 'Billed') return o.status === 'BILLED';
+                           if (filterTab === 'Received') return o.status === 'RECEIVED';
+                           if (filterTab === 'Closed') return o.status === 'CLOSE' || o.status === 'CLOSED';
+                           return true;
+                        }) || [];
+
+                        if (filtered.length === 0) {
+                           return <div className="py-12 text-center text-[#94a3b8] text-xs font-bold italic">No {filterTab.toLowerCase()} orders</div>;
+                        }
+
+                        return filtered.map(o => (
+                           <div key={o.id} className="p-3 bg-[#f8fafc] border border-[#f1f5f9] rounded-xl hover:shadow-md transition-all cursor-pointer group">
+                              <div className="flex justify-between items-start mb-1">
+                                 <span className="text-[11px] font-black text-[#1e293b]">#{o.purchaseId || o.id}</span>
+                                 <span className="text-[11px] font-black text-[#1e293b]">₹{o.amount?.toLocaleString()}</span>
+                              </div>
+                              <div className="flex justify-between items-end">
+                                 <span className="text-[10px] font-semibold text-[#94a3b8]">{o.date ? format(new Date(o.date), 'MMM dd, yyyy HH:mm') : 'N/A'}</span>
+                                 <span className={`text-[9px] font-black px-1.5 py-0.5 rounded uppercase ${o.status === 'CLOSE' || o.status === 'CLOSED' ? 'text-rose-600 bg-rose-50' :
+                                       o.status === 'OPEN' ? 'text-amber-600 bg-amber-50' :
+                                          o.status === 'BILLED' ? 'text-indigo-600 bg-indigo-50' :
+                                             'text-emerald-700 bg-emerald-100'
+                                    }`}>{o.status}</span>
+                              </div>
+                           </div>
+                        ));
+                     })()}
+                  </div>
+               </div>
+
+               <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm">
+                  <h3 className="text-sm font-black text-[#1e293b] mb-4">Quick Links</h3>
+                  <div className="space-y-2">
+                     {[
+                        { label: 'Inventory', icon: Boxes, path: '/inventory/products' },
+                        { label: 'Raw Materials', icon: Package, path: '/inventory/base' },
+                        { label: 'Draft Orders', icon: FileText, path: '/purchases/orders' }
+                     ].map(l => (
+                        <button
+                           key={l.label}
+                           onClick={() => navigate(l.path)}
+                           className="w-full flex items-center justify-between p-3.5 bg-[#f8fafc] border border-[#f1f5f9] rounded-xl hover:bg-gray-50 transition-all group"
+                        >
+                           <div className="flex items-center gap-3">
+                              <div className="p-2 bg-white rounded-lg shadow-sm text-[#94a3b8] group-hover:text-[#003317] transition-colors">
+                                 <l.icon size={16} />
+                              </div>
+                              <span className="text-xs font-bold text-[#64748b]">{l.label}</span>
+                           </div>
+                           <ChevronRight size={14} className="text-[#cbd5e1] group-hover:text-[#003317] transition-all" />
+                        </button>
+                     ))}
+                  </div>
                </div>
             </div>
          </div>
       </div>
-    </div>
-  );
+   );
 };
 
 export default IntentDashboard;
diff --git a/frontend/src/pages/IntentList.tsx b/frontend/src/pages/IntentList.tsx
index d3626778..dcbfb009 100644
--- a/frontend/src/pages/IntentList.tsx
+++ b/frontend/src/pages/IntentList.tsx
@@ -1,10 +1,10 @@
 import { apiFetch } from '../api';
 import React, { useState, useEffect } from 'react';
-import { 
-  Eye, 
-  ChevronRight, 
-  Plus, 
-  Search, 
+import {
+  Eye,
+  ChevronRight,
+  Plus,
+  Search,
   ArrowLeft,
   ChevronsRight,
   ChevronLeft,
@@ -127,131 +127,131 @@ const IntentList: React.FC<IntentListProps> = ({ title }) => {
       {/* Header Bar */}
       <div className="flex items-center justify-between mb-8 bg-white p-4 rounded-3xl border border-[#e2e8f0] shadow-sm">
         <div className="flex items-center gap-6">
-           <button className="p-2.5 bg-gray-50 rounded-xl text-[#0f4475] hover:bg-[#0f4475] hover:text-white transition-all shadow-sm">
-              <ArrowLeft size={18} />
-           </button>
-           <h1 className="text-xl font-black text-[#0f4475] uppercase tracking-wider">{title}</h1>
+          <button className="p-2.5 bg-gray-50 rounded-xl text-[#003317] hover:bg-[#003317] hover:text-white transition-all shadow-sm">
+            <ArrowLeft size={18} />
+          </button>
+          <h1 className="text-xl font-black text-[#003317] uppercase tracking-wider">{title}</h1>
         </div>
         <div className="flex items-center gap-4">
-           {title === 'RECEIVES' && (
-             <button className="bg-[#0f4475] text-white px-5 py-2.5 rounded-2xl text-xs font-black shadow-lg shadow-[#0f4475]/20 hover:bg-[#1e4e8c] transition-all">
-                Summary
-             </button>
-           )}
-           <div className="relative">
-              <select className="bg-gray-50 border border-[#e2e8f0] rounded-2xl px-5 py-2.5 text-xs font-bold text-[#64748b] outline-none appearance-none min-w-[150px] cursor-pointer focus:bg-white focus:ring-2 focus:ring-[#0f4475]/10">
-                 <option>Status</option>
-                 <option>Approved</option>
-                 <option>Pending</option>
-              </select>
-           </div>
-           <button 
-             onClick={() => setShowAddModal(true)}
-             className="p-2.5 bg-[#0f4475] text-white rounded-xl shadow-lg shadow-[#0f4475]/20 hover:scale-105 transition-all"
-           >
-              <Plus size={18} />
-           </button>
+          {title === 'RECEIVES' && (
+            <button className="bg-[#003317] text-white px-5 py-2.5 rounded-2xl text-xs font-black shadow-lg shadow-[#003317]/20 hover:bg-[#1e4e8c] transition-all">
+              Summary
+            </button>
+          )}
+          <div className="relative">
+            <select className="bg-gray-50 border border-[#e2e8f0] rounded-2xl px-5 py-2.5 text-xs font-bold text-[#64748b] outline-none appearance-none min-w-[150px] cursor-pointer focus:bg-white focus:ring-2 focus:ring-[#003317]/10">
+              <option>Status</option>
+              <option>Approved</option>
+              <option>Pending</option>
+            </select>
+          </div>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="p-2.5 bg-[#003317] text-white rounded-xl shadow-lg shadow-[#003317]/20 hover:scale-105 transition-all"
+          >
+            <Plus size={18} />
+          </button>
         </div>
       </div>
 
       {/* Table Section */}
       <div className="bg-white rounded-[2rem] border border-[#e2e8f0] shadow-xl shadow-indigo-500/5 overflow-hidden">
-         <div className="overflow-x-auto">
-            <table className="w-full">
-               <thead>
-                  <tr className="bg-gray-50/50">
-                     <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Purchase ID</th>
-                     <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Date</th>
-                     <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Status</th>
-                     <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Amount (₹)</th>
-                     <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Store name</th>
-                     <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Request status</th>
-                     <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]"></th>
-                  </tr>
-               </thead>
-               <tbody className="divide-y divide-[#f1f5f9] relative">
-                  {loading ? (
-                    <tr>
-                       <td colSpan={7} className="py-20 text-center">
-                          <RefreshCw className="animate-spin text-[#0f4475] mx-auto mb-2" size={32} />
-                          <p className="text-sm font-bold text-[#64748b]">Fetching orders...</p>
-                       </td>
-                    </tr>
-                  ) : data.length === 0 ? (
-                    <tr>
-                       <td colSpan={7} className="py-20 text-center text-[#94a3b8]">
-                          <ShoppingBag className="mx-auto mb-4 opacity-10" size={64} />
-                          <p className="text-sm font-bold uppercase tracking-widest">No orders found</p>
-                       </td>
-                    </tr>
-                  ) : (
-                    data.map((row, i) => (
-                        <motion.tr 
-                        key={i}
-                        initial={{ opacity: 0, x: -10 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        transition={{ delay: i * 0.05 }}
-                        className="hover:bg-gray-50/70 transition-colors group cursor-pointer"
-                        >
-                        <td className="px-8 py-6">
-                            <div className="flex items-center gap-2">
-                                <span className="text-xs font-black text-[#1e293b]">{row.purchaseId || row.id}</span>
-                                <ChevronsRight size={12} className="text-[#cbd5e1] group-hover:text-[#0f4475] transition-colors" />
-                            </div>
-                        </td>
-                        <td className="px-8 py-6 text-xs font-semibold text-[#64748b]">
-                            {row.date ? new Date(row.date).toLocaleString('en-IN', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'N/A'}
-                        </td>
-                        <td className="px-8 py-6">
-                            <span className={`text-[10px] font-black px-2.5 py-1 rounded-md uppercase tracking-wider ${row.status === 'CLOSE' || row.status === 'CLOSED' ? 'text-[#ef4444] bg-[#fee2e2]' : 'text-blue-600 bg-blue-50'}`}>
-                                {row.status}
-                            </span>
-                        </td>
-                        <td className="px-8 py-6 text-xs font-black text-[#1e293b]">₹{row.amount?.toLocaleString()}</td>
-                        <td className="px-8 py-6 text-xs font-bold text-[#64748b]">{row.storeName || 'Main Store'}</td>
-                        <td className="px-8 py-6">
-                            <span className="text-[10px] font-black text-[#10b981] bg-[#dcfce7] px-2.5 py-1 rounded-md uppercase tracking-wider">APPROVED</span>
-                        </td>
-                        <td className="px-8 py-6">
-                            <div className="flex items-center gap-3">
-                                <button className="p-2 text-[#94a3b8] hover:bg-[#0f4475] hover:text-white rounded-lg transition-all">
-                                    <Eye size={16} />
-                                </button>
-                                <button className="p-2 text-[#94a3b8] hover:bg-gray-100 rounded-lg transition-all">
-                                    <ChevronsRight size={16} />
-                                </button>
-                            </div>
-                        </td>
-                        </motion.tr>
-                    ))
-                  )}
-               </tbody>
-            </table>
-         </div>
-         
-         {/* Pagination Bar */}
-         <div className="bg-gray-50/50 px-8 py-4 border-t border-[#f1f5f9] flex items-center justify-end gap-8">
-            <div className="flex items-center gap-3 text-xs font-bold text-[#64748b]">
-               <span>Rows per page:</span>
-               <select className="bg-transparent border-0 font-black text-[#1e293b] outline-none cursor-pointer">
-                  <option>10</option>
-                  <option>20</option>
-               </select>
-            </div>
-            <div className="text-xs font-bold text-[#64748b]">
-               1-5 of 5
-            </div>
-            <div className="flex items-center gap-2">
-               <button className="p-1 text-[#cbd5e1] cursor-not-allowed"><ChevronLeft size={18} /></button>
-               <button className="p-1 text-[#cbd5e1] cursor-not-allowed"><ChevronRight size={18} /></button>
-            </div>
-         </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-50/50">
+                <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Purchase ID</th>
+                <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Date</th>
+                <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Status</th>
+                <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Amount (₹)</th>
+                <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Store name</th>
+                <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]">Request status</th>
+                <th className="px-8 py-5 text-left text-[11px] font-black text-[#94a3b8] uppercase tracking-[0.15em]"></th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-[#f1f5f9] relative">
+              {loading ? (
+                <tr>
+                  <td colSpan={7} className="py-20 text-center">
+                    <RefreshCw className="animate-spin text-[#003317] mx-auto mb-2" size={32} />
+                    <p className="text-sm font-bold text-[#64748b]">Fetching orders...</p>
+                  </td>
+                </tr>
+              ) : data.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="py-20 text-center text-[#94a3b8]">
+                    <ShoppingBag className="mx-auto mb-4 opacity-10" size={64} />
+                    <p className="text-sm font-bold uppercase tracking-widest">No orders found</p>
+                  </td>
+                </tr>
+              ) : (
+                data.map((row, i) => (
+                  <motion.tr
+                    key={i}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: i * 0.05 }}
+                    className="hover:bg-gray-50/70 transition-colors group cursor-pointer"
+                  >
+                    <td className="px-8 py-6">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-black text-[#1e293b]">{row.purchaseId || row.id}</span>
+                        <ChevronsRight size={12} className="text-[#cbd5e1] group-hover:text-[#003317] transition-colors" />
+                      </div>
+                    </td>
+                    <td className="px-8 py-6 text-xs font-semibold text-[#64748b]">
+                      {row.date ? new Date(row.date).toLocaleString('en-IN', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'N/A'}
+                    </td>
+                    <td className="px-8 py-6">
+                      <span className={`text-[10px] font-black px-2.5 py-1 rounded-md uppercase tracking-wider ${row.status === 'CLOSE' || row.status === 'CLOSED' ? 'text-[#ef4444] bg-[#fee2e2]' : 'text-blue-600 bg-blue-50'}`}>
+                        {row.status}
+                      </span>
+                    </td>
+                    <td className="px-8 py-6 text-xs font-black text-[#1e293b]">₹{row.amount?.toLocaleString()}</td>
+                    <td className="px-8 py-6 text-xs font-bold text-[#64748b]">{row.storeName || 'Main Store'}</td>
+                    <td className="px-8 py-6">
+                      <span className="text-[10px] font-black text-[#10b981] bg-[#dcfce7] px-2.5 py-1 rounded-md uppercase tracking-wider">APPROVED</span>
+                    </td>
+                    <td className="px-8 py-6">
+                      <div className="flex items-center gap-3">
+                        <button className="p-2 text-[#94a3b8] hover:bg-[#003317] hover:text-white rounded-lg transition-all">
+                          <Eye size={16} />
+                        </button>
+                        <button className="p-2 text-[#94a3b8] hover:bg-gray-100 rounded-lg transition-all">
+                          <ChevronsRight size={16} />
+                        </button>
+                      </div>
+                    </td>
+                  </motion.tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination Bar */}
+        <div className="bg-gray-50/50 px-8 py-4 border-t border-[#f1f5f9] flex items-center justify-end gap-8">
+          <div className="flex items-center gap-3 text-xs font-bold text-[#64748b]">
+            <span>Rows per page:</span>
+            <select className="bg-transparent border-0 font-black text-[#1e293b] outline-none cursor-pointer">
+              <option>10</option>
+              <option>20</option>
+            </select>
+          </div>
+          <div className="text-xs font-bold text-[#64748b]">
+            1-5 of 5
+          </div>
+          <div className="flex items-center gap-2">
+            <button className="p-1 text-[#cbd5e1] cursor-not-allowed"><ChevronLeft size={18} /></button>
+            <button className="p-1 text-[#cbd5e1] cursor-not-allowed"><ChevronRight size={18} /></button>
+          </div>
+        </div>
       </div>
 
       {/* Modern Add Order Modal */}
       {showAddModal && (
-        <div className="fixed inset-0 bg-[#0f4475]/30 backdrop-blur-md z-[100] flex items-center justify-center p-4">
-          <motion.div 
+        <div className="fixed inset-0 bg-[#003317]/30 backdrop-blur-md z-[100] flex items-center justify-center p-4">
+          <motion.div
             initial={{ opacity: 0, scale: 0.95, y: 20 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
             className="bg-white rounded-[2.5rem] w-full max-w-5xl max-h-[90vh] shadow-2xl overflow-hidden flex flex-col border border-white/20"
@@ -259,7 +259,7 @@ const IntentList: React.FC<IntentListProps> = ({ title }) => {
             {/* Modal Header */}
             <div className="px-10 py-8 border-b border-[#f1f5f9] flex justify-between items-center bg-gray-50/30">
               <div className="flex items-center gap-5">
-                <div className="w-14 h-14 bg-gradient-to-br from-[#0f4475] to-[#1e4e8c] rounded-2xl flex items-center justify-center text-white shadow-xl shadow-[#0f4475]/20">
+                <div className="w-14 h-14 bg-gradient-to-br from-[#003317] to-[#1e4e8c] rounded-2xl flex items-center justify-center text-white shadow-xl shadow-[#003317]/20">
                   <ShoppingCart size={24} />
                 </div>
                 <div>
@@ -267,32 +267,32 @@ const IntentList: React.FC<IntentListProps> = ({ title }) => {
                   <p className="text-[11px] font-bold text-[#94a3b8] uppercase tracking-widest mt-1">New Intent Entry • Draft Status</p>
                 </div>
               </div>
-              <button 
-                onClick={() => { setShowAddModal(false); setNewOrder(initialOrderState); }} 
+              <button
+                onClick={() => { setShowAddModal(false); setNewOrder(initialOrderState); }}
                 className="p-3 hover:bg-white hover:shadow-md rounded-2xl transition-all border border-transparent hover:border-[#f1f5f9] group"
               >
                 <X size={20} className="text-[#64748b] group-hover:text-[#ef4444]" />
               </button>
             </div>
-            
+
             <form onSubmit={handleSubmit} className="p-10 overflow-y-auto space-y-10 custom-scrollbar">
               {/* Form Grid */}
               <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div className="space-y-2">
                   <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Order ID</label>
-                  <input type="text" value={newOrder.purchaseId} readOnly className="w-full px-5 py-3.5 bg-gray-50 border border-[#e2e8f0] rounded-2xl text-sm font-black text-[#0f4475] outline-none" />
+                  <input type="text" value={newOrder.purchaseId} readOnly className="w-full px-5 py-3.5 bg-gray-50 border border-[#e2e8f0] rounded-2xl text-sm font-black text-[#003317] outline-none" />
                 </div>
                 <div className="space-y-2">
                   <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Date</label>
-                  <input type="date" value={newOrder.date} onChange={e => setNewOrder({...newOrder, date: e.target.value})} className="w-full px-5 py-3.5 bg-white border border-[#e2e8f0] rounded-2xl text-sm font-bold text-[#1e293b] outline-none focus:ring-4 focus:ring-[#0f4475]/5 focus:border-[#0f4475] transition-all" />
+                  <input type="date" value={newOrder.date} onChange={e => setNewOrder({ ...newOrder, date: e.target.value })} className="w-full px-5 py-3.5 bg-white border border-[#e2e8f0] rounded-2xl text-sm font-bold text-[#1e293b] outline-none focus:ring-4 focus:ring-[#003317]/5 focus:border-[#003317] transition-all" />
                 </div>
                 <div className="space-y-2">
                   <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Select Vendor</label>
-                  <select 
+                  <select
                     required
-                    value={newOrder.vendorId} 
-                    onChange={e => setNewOrder({...newOrder, vendorId: e.target.value})}
-                    className="w-full px-5 py-3.5 bg-white border border-[#e2e8f0] rounded-2xl text-sm font-bold text-[#1e293b] outline-none focus:ring-4 focus:ring-[#0f4475]/5 focus:border-[#0f4475] transition-all appearance-none cursor-pointer"
+                    value={newOrder.vendorId}
+                    onChange={e => setNewOrder({ ...newOrder, vendorId: e.target.value })}
+                    className="w-full px-5 py-3.5 bg-white border border-[#e2e8f0] rounded-2xl text-sm font-bold text-[#1e293b] outline-none focus:ring-4 focus:ring-[#003317]/5 focus:border-[#003317] transition-all appearance-none cursor-pointer"
                   >
                     <option value="">Choose Supplier</option>
                     {vendors.map(v => <option key={v.id} value={v.id}>{v.name}</option>)}
@@ -301,8 +301,8 @@ const IntentList: React.FC<IntentListProps> = ({ title }) => {
                 <div className="space-y-2">
                   <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Status</label>
                   <div className="px-5 py-3.5 bg-[#dcfce7] border border-[#10b981]/20 rounded-2xl text-[11px] font-black text-[#10b981] uppercase tracking-widest flex items-center gap-2">
-                     <span className="w-2 h-2 rounded-full bg-[#10b981] animate-pulse" />
-                     {newOrder.status}
+                    <span className="w-2 h-2 rounded-full bg-[#10b981] animate-pulse" />
+                    {newOrder.status}
                   </div>
                 </div>
               </div>
@@ -310,111 +310,111 @@ const IntentList: React.FC<IntentListProps> = ({ title }) => {
               {/* Items Table */}
               <div className="space-y-4">
                 <div className="flex items-center justify-between px-2">
-                    <h3 className="text-xs font-black text-[#1e293b] uppercase tracking-[0.2em]">Order Line Items</h3>
-                    <button type="button" onClick={handleAddItem} className="flex items-center gap-2 px-4 py-2 bg-[#0f4475]/5 text-[#0f4475] rounded-xl text-[11px] font-black hover:bg-[#0f4475] hover:text-white transition-all">
-                        <Plus size={14} /> Add Product
-                    </button>
+                  <h3 className="text-xs font-black text-[#1e293b] uppercase tracking-[0.2em]">Order Line Items</h3>
+                  <button type="button" onClick={handleAddItem} className="flex items-center gap-2 px-4 py-2 bg-[#003317]/5 text-[#003317] rounded-xl text-[11px] font-black hover:bg-[#003317] hover:text-white transition-all">
+                    <Plus size={14} /> Add Product
+                  </button>
                 </div>
-                
+
                 <div className="border border-[#e2e8f0] rounded-[2rem] overflow-hidden bg-gray-50/30">
-                    <table className="w-full text-left">
-                        <thead className="bg-white border-b border-[#e2e8f0]">
-                            <tr>
-                                <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest">Product / Material Name</th>
-                                <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest w-32 text-center">Qty</th>
-                                <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest w-40">Rate (₹)</th>
-                                <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest w-40">Subtotal</th>
-                                <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest w-16"></th>
-                            </tr>
-                        </thead>
-                        <tbody className="divide-y divide-[#f1f5f9]">
-                            {newOrder.items.map((item, idx) => (
-                                <tr key={idx} className="group hover:bg-white transition-colors">
-                                    <td className="px-6 py-4">
-                                        <input type="text" placeholder="Start typing product name..." value={item.productName} onChange={e => handleItemChange(idx, 'productName', e.target.value)} className="w-full bg-transparent text-sm font-bold text-[#1e293b] outline-none placeholder:text-[#cbd5e1]" />
-                                    </td>
-                                    <td className="px-6 py-4">
-                                        <input type="number" min="1" value={item.quantity} onChange={e => handleItemChange(idx, 'quantity', parseFloat(e.target.value))} className="w-full bg-transparent text-sm font-black text-[#1e293b] outline-none text-center" />
-                                    </td>
-                                    <td className="px-6 py-4">
-                                        <input type="number" step="0.01" value={item.rate} onChange={e => handleItemChange(idx, 'rate', parseFloat(e.target.value))} className="w-full bg-transparent text-sm font-bold text-[#1e293b] outline-none" />
-                                    </td>
-                                    <td className="px-6 py-4">
-                                        <span className="text-sm font-black text-[#0f4475]">₹{item.total.toLocaleString()}</span>
-                                    </td>
-                                    <td className="px-6 py-4">
-                                        <button type="button" onClick={() => setNewOrder({...newOrder, items: newOrder.items.filter((_, i) => i !== idx)})} className="p-2 text-[#cbd5e1] hover:text-[#ef4444] transition-colors">
-                                            <Trash2 size={16} />
-                                        </button>
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
+                  <table className="w-full text-left">
+                    <thead className="bg-white border-b border-[#e2e8f0]">
+                      <tr>
+                        <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest">Product / Material Name</th>
+                        <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest w-32 text-center">Qty</th>
+                        <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest w-40">Rate (₹)</th>
+                        <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest w-40">Subtotal</th>
+                        <th className="px-6 py-4 text-[10px] font-black text-[#94a3b8] uppercase tracking-widest w-16"></th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-[#f1f5f9]">
+                      {newOrder.items.map((item, idx) => (
+                        <tr key={idx} className="group hover:bg-white transition-colors">
+                          <td className="px-6 py-4">
+                            <input type="text" placeholder="Start typing product name..." value={item.productName} onChange={e => handleItemChange(idx, 'productName', e.target.value)} className="w-full bg-transparent text-sm font-bold text-[#1e293b] outline-none placeholder:text-[#cbd5e1]" />
+                          </td>
+                          <td className="px-6 py-4">
+                            <input type="number" min="1" value={item.quantity} onChange={e => handleItemChange(idx, 'quantity', parseFloat(e.target.value))} className="w-full bg-transparent text-sm font-black text-[#1e293b] outline-none text-center" />
+                          </td>
+                          <td className="px-6 py-4">
+                            <input type="number" step="0.01" value={item.rate} onChange={e => handleItemChange(idx, 'rate', parseFloat(e.target.value))} className="w-full bg-transparent text-sm font-bold text-[#1e293b] outline-none" />
+                          </td>
+                          <td className="px-6 py-4">
+                            <span className="text-sm font-black text-[#003317]">₹{item.total.toLocaleString()}</span>
+                          </td>
+                          <td className="px-6 py-4">
+                            <button type="button" onClick={() => setNewOrder({ ...newOrder, items: newOrder.items.filter((_, i) => i !== idx) })} className="p-2 text-[#cbd5e1] hover:text-[#ef4444] transition-colors">
+                              <Trash2 size={16} />
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
                 </div>
               </div>
 
               {/* Bottom Section: Notes & Totals */}
               <div className="grid grid-cols-1 md:grid-cols-12 gap-10 pt-4">
                 <div className="md:col-span-7 space-y-6">
-                    <div className="space-y-2">
-                        <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Reference ID / PO Number</label>
-                        <input type="text" value={newOrder.referenceId} onChange={e => setNewOrder({...newOrder, referenceId: e.target.value})} className="w-full px-5 py-4 bg-white border border-[#e2e8f0] rounded-2xl text-sm font-bold outline-none focus:border-[#0f4475] transition-all" placeholder="Enter external reference number if any..." />
-                    </div>
-                    <div className="space-y-2">
-                        <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Special Instructions</label>
-                        <textarea rows={3} value={newOrder.instruction} onChange={e => setNewOrder({...newOrder, instruction: e.target.value})} className="w-full px-5 py-4 bg-white border border-[#e2e8f0] rounded-2xl text-sm font-bold outline-none focus:border-[#0f4475] transition-all resize-none" placeholder="Add any specific delivery or quality requirements..." />
-                    </div>
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Reference ID / PO Number</label>
+                    <input type="text" value={newOrder.referenceId} onChange={e => setNewOrder({ ...newOrder, referenceId: e.target.value })} className="w-full px-5 py-4 bg-white border border-[#e2e8f0] rounded-2xl text-sm font-bold outline-none focus:border-[#003317] transition-all" placeholder="Enter external reference number if any..." />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Special Instructions</label>
+                    <textarea rows={3} value={newOrder.instruction} onChange={e => setNewOrder({ ...newOrder, instruction: e.target.value })} className="w-full px-5 py-4 bg-white border border-[#e2e8f0] rounded-2xl text-sm font-bold outline-none focus:border-[#003317] transition-all resize-none" placeholder="Add any specific delivery or quality requirements..." />
+                  </div>
                 </div>
-                
+
                 <div className="md:col-span-5 flex flex-col justify-end">
-                    <div className="bg-[#1e293b] rounded-[2.5rem] p-8 text-white space-y-5 shadow-2xl shadow-[#1e293b]/20">
-                        <div className="flex justify-between items-center text-xs opacity-60 font-bold uppercase tracking-wider">
-                            <span>Order Subtotal</span>
-                            <span>₹{newOrder.items.reduce((s, i) => s + i.total, 0).toLocaleString()}</span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                            <span className="text-xs opacity-60 font-bold uppercase tracking-wider">Adjustment / Discount</span>
-                            <div className="flex items-center gap-2">
-                                <span className="text-[#ef4444] font-black">-</span>
-                                <input type="number" value={newOrder.discount} onChange={e => setNewOrder({...newOrder, discount: parseFloat(e.target.value) || 0})} className="w-24 text-right bg-white/10 border border-white/10 rounded-xl px-3 py-1.5 text-sm font-black text-white outline-none focus:bg-white/20 transition-all" />
-                            </div>
-                        </div>
-                        <div className="h-[1px] bg-white/10 my-2"></div>
-                        <div className="flex justify-between items-end">
-                            <div>
-                                <p className="text-[10px] opacity-40 font-black uppercase tracking-[0.2em] mb-1">Grand Payable</p>
-                                <p className="text-3xl font-black tracking-tighter">₹{calculateTotal().toLocaleString()}</p>
-                            </div>
-                            <div className="text-right">
-                                <p className="text-[10px] opacity-40 font-black uppercase tracking-[0.2em] mb-1">Total Items</p>
-                                <p className="text-xl font-black">{newOrder.items.length}</p>
-                            </div>
-                        </div>
+                  <div className="bg-[#1e293b] rounded-[2.5rem] p-8 text-white space-y-5 shadow-2xl shadow-[#1e293b]/20">
+                    <div className="flex justify-between items-center text-xs opacity-60 font-bold uppercase tracking-wider">
+                      <span>Order Subtotal</span>
+                      <span>₹{newOrder.items.reduce((s, i) => s + i.total, 0).toLocaleString()}</span>
                     </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs opacity-60 font-bold uppercase tracking-wider">Adjustment / Discount</span>
+                      <div className="flex items-center gap-2">
+                        <span className="text-[#ef4444] font-black">-</span>
+                        <input type="number" value={newOrder.discount} onChange={e => setNewOrder({ ...newOrder, discount: parseFloat(e.target.value) || 0 })} className="w-24 text-right bg-white/10 border border-white/10 rounded-xl px-3 py-1.5 text-sm font-black text-white outline-none focus:bg-white/20 transition-all" />
+                      </div>
+                    </div>
+                    <div className="h-[1px] bg-white/10 my-2"></div>
+                    <div className="flex justify-between items-end">
+                      <div>
+                        <p className="text-[10px] opacity-40 font-black uppercase tracking-[0.2em] mb-1">Grand Payable</p>
+                        <p className="text-3xl font-black tracking-tighter">₹{calculateTotal().toLocaleString()}</p>
+                      </div>
+                      <div className="text-right">
+                        <p className="text-[10px] opacity-40 font-black uppercase tracking-[0.2em] mb-1">Total Items</p>
+                        <p className="text-xl font-black">{newOrder.items.length}</p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
 
               {/* Action Buttons */}
               <div className="flex gap-4 pt-6">
-                <button 
-                  type="button" 
-                  onClick={() => { setShowAddModal(false); setNewOrder(initialOrderState); }} 
+                <button
+                  type="button"
+                  onClick={() => { setShowAddModal(false); setNewOrder(initialOrderState); }}
                   className="px-10 py-5 border-2 border-[#f1f5f9] text-[#64748b] font-black rounded-2xl hover:bg-gray-50 transition-all uppercase tracking-widest text-[11px]"
                 >
                   Discard Draft
                 </button>
-                <button 
-                  type="submit" 
-                  disabled={isSaving} 
-                  className="flex-1 px-10 py-5 bg-gradient-to-r from-[#0f4475] to-[#1e4e8c] text-white font-black rounded-2xl shadow-2xl shadow-[#0f4475]/30 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-4 uppercase tracking-[0.2em] text-[11px]"
+                <button
+                  type="submit"
+                  disabled={isSaving}
+                  className="flex-1 px-10 py-5 bg-gradient-to-r from-[#003317] to-[#1e4e8c] text-white font-black rounded-2xl shadow-2xl shadow-[#003317]/30 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-4 uppercase tracking-[0.2em] text-[11px]"
                 >
-                    {isSaving ? <Loader2 className="animate-spin" size={18} /> : (
-                      <>
-                        <CheckCircle size={18} /> 
-                        Finalize & Confirm Order
-                      </>
-                    )}
+                  {isSaving ? <Loader2 className="animate-spin" size={18} /> : (
+                    <>
+                      <CheckCircle size={18} />
+                      Finalize & Confirm Order
+                    </>
+                  )}
                 </button>
               </div>
             </form>
diff --git a/frontend/src/pages/ManageCoupons.tsx b/frontend/src/pages/ManageCoupons.tsx
index 14db86c5..719e20f2 100644
--- a/frontend/src/pages/ManageCoupons.tsx
+++ b/frontend/src/pages/ManageCoupons.tsx
@@ -1,378 +1,378 @@
 import { apiFetch } from '../api';
 import { useState, useEffect } from 'react';
-import { 
-  Ticket, 
-  Plus, 
-  Trash2, 
-  Power, 
-  Calendar, 
-  Users, 
-  Clock,
-  ChevronRight,
-  TrendingUp,
-  Tag,
-  AlertCircle,
-  X,
-  Target
+import {
+   Ticket,
+   Plus,
+   Trash2,
+   Power,
+   Calendar,
+   Users,
+   Clock,
+   ChevronRight,
+   TrendingUp,
+   Tag,
+   AlertCircle,
+   X,
+   Target
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { format } from 'date-fns';
 
 interface Coupon {
-  id: number;
-  code: string;
-  rewardAmount: number;
-  expiryDate: string;
-  maxClaims: number;
-  currentClaims: number;
-  isActive: boolean;
-  description: string;
-  createdAt: string;
+   id: number;
+   code: string;
+   rewardAmount: number;
+   expiryDate: string;
+   maxClaims: number;
+   currentClaims: number;
+   isActive: boolean;
+   description: string;
+   createdAt: string;
 }
 
 const ManageCoupons = () => {
-  const [coupons, setCoupons] = useState<Coupon[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [newCoupon, setNewCoupon] = useState({
-    code: '',
-    rewardAmount: '',
-    expiryDate: '',
-    maxClaims: '',
-    description: ''
-  });
+   const [coupons, setCoupons] = useState<Coupon[]>([]);
+   const [isLoading, setIsLoading] = useState(true);
+   const [isModalOpen, setIsModalOpen] = useState(false);
+   const [newCoupon, setNewCoupon] = useState({
+      code: '',
+      rewardAmount: '',
+      expiryDate: '',
+      maxClaims: '',
+      description: ''
+   });
 
-  const fetchCoupons = async () => {
-    try {
-      setIsLoading(true);
-      const response = await apiFetch('/api/coupons');
-      if (response.ok) {
-        const data = await response.json();
-        setCoupons(data);
+   const fetchCoupons = async () => {
+      try {
+         setIsLoading(true);
+         const response = await apiFetch('/api/coupons');
+         if (response.ok) {
+            const data = await response.json();
+            setCoupons(data);
+         }
+      } catch (error) {
+         console.error('Error fetching coupons:', error);
+      } finally {
+         setIsLoading(false);
       }
-    } catch (error) {
-      console.error('Error fetching coupons:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+   };
 
-  useEffect(() => {
-    fetchCoupons();
-  }, []);
+   useEffect(() => {
+      fetchCoupons();
+   }, []);
 
-  const handleCreateCoupon = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      const response = await apiFetch('/api/coupons', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          ...newCoupon,
-          rewardAmount: Number(newCoupon.rewardAmount),
-          maxClaims: Number(newCoupon.maxClaims),
-          expiryDate: new Date(newCoupon.expiryDate).toISOString()
-        })
-      });
-      if (response.ok) {
-        setIsModalOpen(false);
-        setNewCoupon({ code: '', rewardAmount: '', expiryDate: '', maxClaims: '', description: '' });
-        fetchCoupons();
+   const handleCreateCoupon = async (e: React.FormEvent) => {
+      e.preventDefault();
+      try {
+         const response = await apiFetch('/api/coupons', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+               ...newCoupon,
+               rewardAmount: Number(newCoupon.rewardAmount),
+               maxClaims: Number(newCoupon.maxClaims),
+               expiryDate: new Date(newCoupon.expiryDate).toISOString()
+            })
+         });
+         if (response.ok) {
+            setIsModalOpen(false);
+            setNewCoupon({ code: '', rewardAmount: '', expiryDate: '', maxClaims: '', description: '' });
+            fetchCoupons();
+         }
+      } catch (error) {
+         console.error('Error creating coupon:', error);
       }
-    } catch (error) {
-      console.error('Error creating coupon:', error);
-    }
-  };
+   };
 
-  const handleToggleStatus = async (id: number) => {
-    try {
-      const response = await apiFetch(`/api/coupons/${id}/toggle`, { method: 'PATCH' });
-      if (response.ok) fetchCoupons();
-    } catch (error) {
-      console.error('Error toggling status:', error);
-    }
-  };
+   const handleToggleStatus = async (id: number) => {
+      try {
+         const response = await apiFetch(`/api/coupons/${id}/toggle`, { method: 'PATCH' });
+         if (response.ok) fetchCoupons();
+      } catch (error) {
+         console.error('Error toggling status:', error);
+      }
+   };
 
-  const handleDelete = async (id: number) => {
-    if (!window.confirm('Are you sure you want to delete this coupon?')) return;
-    try {
-      const response = await apiFetch(`/api/coupons/${id}`, { method: 'DELETE' });
-      if (response.ok) fetchCoupons();
-    } catch (error) {
-      console.error('Error deleting coupon:', error);
-    }
-  };
+   const handleDelete = async (id: number) => {
+      if (!window.confirm('Are you sure you want to delete this coupon?')) return;
+      try {
+         const response = await apiFetch(`/api/coupons/${id}`, { method: 'DELETE' });
+         if (response.ok) fetchCoupons();
+      } catch (error) {
+         console.error('Error deleting coupon:', error);
+      }
+   };
 
-  if (isLoading) {
-    return (
-      <div className="h-screen flex items-center justify-center bg-slate-50/50">
-        <motion.div 
-          animate={{ scale: [1, 1.1, 1], opacity: [0.5, 1, 0.5] }}
-          transition={{ repeat: Infinity, duration: 1.5 }}
-          className="text-[#0f4475] font-black uppercase tracking-widest text-sm flex flex-col items-center gap-4"
-        >
-          <Ticket size={32} className="animate-pulse" />
-          Synchronizing Coupon Network...
-        </motion.div>
-      </div>
-    );
-  }
+   if (isLoading) {
+      return (
+         <div className="h-screen flex items-center justify-center bg-slate-50/50">
+            <motion.div
+               animate={{ scale: [1, 1.1, 1], opacity: [0.5, 1, 0.5] }}
+               transition={{ repeat: Infinity, duration: 1.5 }}
+               className="text-[#003317] font-black uppercase tracking-widest text-sm flex flex-col items-center gap-4"
+            >
+               <Ticket size={32} className="animate-pulse" />
+               Synchronizing Coupon Network...
+            </motion.div>
+         </div>
+      );
+   }
 
-  return (
-    <div className="p-8 space-y-8 bg-slate-50/50 min-h-screen font-inter">
-      {/* Top Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex flex-col">
-          <div className="flex items-center gap-2 mb-1">
-             <h2 className="text-xs font-black text-[#0f4475] uppercase tracking-widest">Ritz Rewards</h2>
-          </div>
-          <h1 className="text-2xl font-black text-slate-800">Coupon Codes</h1>
-          <p className="text-[10px] text-slate-400 font-medium flex items-center gap-1.5 uppercase tracking-wider">
-            Manage redemption codes and promotional credits for Ritz tokens
-          </p>
-        </div>
-        
-        <button 
-          onClick={() => setIsModalOpen(true)}
-          className="flex items-center gap-2 bg-[#0f4475] text-white px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest hover:scale-105 transition-all shadow-lg shadow-[#0f4475]/20 active:scale-95"
-        >
-          <Plus size={18} />
-          Generate New Code
-        </button>
-      </div>
-
-      {/* Analytics Summary */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-         <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm group hover:border-[#0f4475]/30 transition-all">
-            <div className="flex justify-between items-start mb-4">
-               <div className="p-3 bg-indigo-50 text-[#0f4475] rounded-xl">
-                  <Tag size={20} />
+   return (
+      <div className="p-8 space-y-8 bg-slate-50/50 min-h-screen font-inter">
+         {/* Top Header */}
+         <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+               <div className="flex items-center gap-2 mb-1">
+                  <h2 className="text-xs font-black text-[#003317] uppercase tracking-widest">Ritz Rewards</h2>
                </div>
-               <span className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Active Pool</span>
+               <h1 className="text-2xl font-black text-slate-800">Coupon Codes</h1>
+               <p className="text-[10px] text-slate-400 font-medium flex items-center gap-1.5 uppercase tracking-wider">
+                  Manage redemption codes and promotional credits for Ritz tokens
+               </p>
             </div>
-            <h3 className="text-slate-400 text-xs font-black uppercase tracking-wider">Active Coupons</h3>
-            <p className="text-3xl font-black text-slate-800 mt-1">{coupons.filter(c => c.isActive).length}</p>
+
+            <button
+               onClick={() => setIsModalOpen(true)}
+               className="flex items-center gap-2 bg-[#003317] text-white px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest hover:scale-105 transition-all shadow-lg shadow-[#003317]/20 active:scale-95"
+            >
+               <Plus size={18} />
+               Generate New Code
+            </button>
          </div>
 
-         <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm group hover:border-emerald-500/30 transition-all">
-            <div className="flex justify-between items-start mb-4">
-               <div className="p-3 bg-emerald-50 text-emerald-600 rounded-xl">
-                  <TrendingUp size={20} />
-               </div>
-               <span className="text-[10px] font-black text-emerald-400 uppercase tracking-widest">Global Reach</span>
-            </div>
-            <h3 className="text-slate-400 text-xs font-black uppercase tracking-wider">Total Redemptions</h3>
-            <p className="text-3xl font-black text-slate-800 mt-1">{coupons.reduce((acc, current) => acc + current.currentClaims, 0)}</p>
-         </div>
-
-         <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm group hover:border-amber-500/30 transition-all">
-            <div className="flex justify-between items-start mb-4">
-               <div className="p-3 bg-amber-50 text-amber-600 rounded-xl">
-                  <Clock size={20} />
-               </div>
-               <span className="text-[10px] font-black text-amber-400 uppercase tracking-widest">Expiring Soon</span>
-            </div>
-            <h3 className="text-slate-400 text-xs font-black uppercase tracking-wider">Limited Availability</h3>
-            <p className="text-3xl font-black text-slate-800 mt-1">
-               {coupons.filter(c => new Date(c.expiryDate).getTime() < new Date().getTime() + 86400000 * 3 && c.isActive).length}
-            </p>
-         </div>
-      </div>
-
-      {/* Coupons Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-20">
-         <AnimatePresence mode="popLayout">
-            {coupons.map((coupon) => (
-               <motion.div 
-                 layout
-                 key={coupon.id}
-                 initial={{ opacity: 0, y: 20 }}
-                 animate={{ opacity: 1, y: 0 }}
-                 exit={{ opacity: 0, scale: 0.95 }}
-                 className={`bg-white rounded-[2.5rem] p-6 border-2 transition-all relative overflow-hidden group ${coupon.isActive ? 'border-slate-100' : 'border-slate-200 grayscale opacity-75 bg-slate-50'}`}
-               >
-                  {/* Status Indicator */}
-                  <div className={`absolute top-6 right-6 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${coupon.isActive ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-200 text-slate-500'}`}>
-                     {coupon.isActive ? 'Operational' : 'Deactivated'}
+         {/* Analytics Summary */}
+         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm group hover:border-[#003317]/30 transition-all">
+               <div className="flex justify-between items-start mb-4">
+                  <div className="p-3 bg-indigo-50 text-[#003317] rounded-xl">
+                     <Tag size={20} />
                   </div>
+                  <span className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Active Pool</span>
+               </div>
+               <h3 className="text-slate-400 text-xs font-black uppercase tracking-wider">Active Coupons</h3>
+               <p className="text-3xl font-black text-slate-800 mt-1">{coupons.filter(c => c.isActive).length}</p>
+            </div>
 
-                  <div className="flex gap-6">
-                     <div className={`w-24 h-24 rounded-3xl flex flex-col items-center justify-center border-2 border-dashed ${coupon.isActive ? 'bg-indigo-50/50 border-[#0f4475]/20' : 'bg-slate-100 border-slate-300'}`}>
-                        <Ticket size={24} className={coupon.isActive ? 'text-[#0f4475]' : 'text-slate-400'} />
-                        <span className={`text-[10px] font-black mt-2 uppercase tracking-tight ${coupon.isActive ? 'text-[#0f4475]' : 'text-slate-500'}`}>Redeem</span>
+            <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm group hover:border-emerald-500/30 transition-all">
+               <div className="flex justify-between items-start mb-4">
+                  <div className="p-3 bg-emerald-50 text-emerald-600 rounded-xl">
+                     <TrendingUp size={20} />
+                  </div>
+                  <span className="text-[10px] font-black text-emerald-400 uppercase tracking-widest">Global Reach</span>
+               </div>
+               <h3 className="text-slate-400 text-xs font-black uppercase tracking-wider">Total Redemptions</h3>
+               <p className="text-3xl font-black text-slate-800 mt-1">{coupons.reduce((acc, current) => acc + current.currentClaims, 0)}</p>
+            </div>
+
+            <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm group hover:border-amber-500/30 transition-all">
+               <div className="flex justify-between items-start mb-4">
+                  <div className="p-3 bg-amber-50 text-amber-600 rounded-xl">
+                     <Clock size={20} />
+                  </div>
+                  <span className="text-[10px] font-black text-amber-400 uppercase tracking-widest">Expiring Soon</span>
+               </div>
+               <h3 className="text-slate-400 text-xs font-black uppercase tracking-wider">Limited Availability</h3>
+               <p className="text-3xl font-black text-slate-800 mt-1">
+                  {coupons.filter(c => new Date(c.expiryDate).getTime() < new Date().getTime() + 86400000 * 3 && c.isActive).length}
+               </p>
+            </div>
+         </div>
+
+         {/* Coupons Grid */}
+         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-20">
+            <AnimatePresence mode="popLayout">
+               {coupons.map((coupon) => (
+                  <motion.div
+                     layout
+                     key={coupon.id}
+                     initial={{ opacity: 0, y: 20 }}
+                     animate={{ opacity: 1, y: 0 }}
+                     exit={{ opacity: 0, scale: 0.95 }}
+                     className={`bg-white rounded-[2.5rem] p-6 border-2 transition-all relative overflow-hidden group ${coupon.isActive ? 'border-slate-100' : 'border-slate-200 grayscale opacity-75 bg-slate-50'}`}
+                  >
+                     {/* Status Indicator */}
+                     <div className={`absolute top-6 right-6 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${coupon.isActive ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-200 text-slate-500'}`}>
+                        {coupon.isActive ? 'Operational' : 'Deactivated'}
                      </div>
 
-                     <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                           <h3 className="text-2xl font-black text-slate-800 tracking-tighter uppercase">{coupon.code}</h3>
-                           {!coupon.isActive && <AlertCircle size={14} className="text-slate-400" />}
+                     <div className="flex gap-6">
+                        <div className={`w-24 h-24 rounded-3xl flex flex-col items-center justify-center border-2 border-dashed ${coupon.isActive ? 'bg-indigo-50/50 border-[#003317]/20' : 'bg-slate-100 border-slate-300'}`}>
+                           <Ticket size={24} className={coupon.isActive ? 'text-[#003317]' : 'text-slate-400'} />
+                           <span className={`text-[10px] font-black mt-2 uppercase tracking-tight ${coupon.isActive ? 'text-[#003317]' : 'text-slate-500'}`}>Redeem</span>
                         </div>
-                        <p className="text-xs text-slate-400 font-bold uppercase tracking-widest mb-4">{coupon.description || 'Global Promotional Credit'}</p>
-                        
-                        <div className="grid grid-cols-2 gap-4">
-                           <div className="flex items-center gap-2.5">
-                              <div className="p-1.5 bg-slate-50 rounded-lg"><Target size={14} className="text-slate-400" /></div>
-                              <div>
-                                 <p className="text-[10px] font-black text-slate-400 uppercase leading-none mb-0.5">Reward</p>
-                                 <p className="text-sm font-black text-slate-700 leading-none">R{coupon.rewardAmount}</p>
-                              </div>
+
+                        <div className="flex-1">
+                           <div className="flex items-center gap-2 mb-1">
+                              <h3 className="text-2xl font-black text-slate-800 tracking-tighter uppercase">{coupon.code}</h3>
+                              {!coupon.isActive && <AlertCircle size={14} className="text-slate-400" />}
                            </div>
-                           <div className="flex items-center gap-2.5">
-                              <div className="p-1.5 bg-slate-50 rounded-lg"><Calendar size={14} className="text-slate-400" /></div>
-                              <div>
-                                 <p className="text-[10px] font-black text-slate-400 uppercase leading-none mb-0.5">Expires</p>
-                                 <p className="text-sm font-black text-slate-700 leading-none">{format(new Date(coupon.expiryDate), 'dd MMM yyyy')}</p>
+                           <p className="text-xs text-slate-400 font-bold uppercase tracking-widest mb-4">{coupon.description || 'Global Promotional Credit'}</p>
+
+                           <div className="grid grid-cols-2 gap-4">
+                              <div className="flex items-center gap-2.5">
+                                 <div className="p-1.5 bg-slate-50 rounded-lg"><Target size={14} className="text-slate-400" /></div>
+                                 <div>
+                                    <p className="text-[10px] font-black text-slate-400 uppercase leading-none mb-0.5">Reward</p>
+                                    <p className="text-sm font-black text-slate-700 leading-none">R{coupon.rewardAmount}</p>
+                                 </div>
+                              </div>
+                              <div className="flex items-center gap-2.5">
+                                 <div className="p-1.5 bg-slate-50 rounded-lg"><Calendar size={14} className="text-slate-400" /></div>
+                                 <div>
+                                    <p className="text-[10px] font-black text-slate-400 uppercase leading-none mb-0.5">Expires</p>
+                                    <p className="text-sm font-black text-slate-700 leading-none">{format(new Date(coupon.expiryDate), 'dd MMM yyyy')}</p>
+                                 </div>
                               </div>
                            </div>
                         </div>
                      </div>
-                  </div>
 
-                  {/* Usage Meter */}
-                  <div className="mt-8 pt-6 border-t border-slate-50">
-                     <div className="flex justify-between items-center mb-2">
-                        <div className="flex items-center gap-1.5">
-                           <Users size={14} className="text-slate-400" />
-                           <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Usage Dynamics</span>
+                     {/* Usage Meter */}
+                     <div className="mt-8 pt-6 border-t border-slate-50">
+                        <div className="flex justify-between items-center mb-2">
+                           <div className="flex items-center gap-1.5">
+                              <Users size={14} className="text-slate-400" />
+                              <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Usage Dynamics</span>
+                           </div>
+                           <span className="text-[10px] font-black text-slate-800 uppercase tracking-widest">{coupon.currentClaims} / {coupon.maxClaims} Clm.</span>
+                        </div>
+                        <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
+                           <motion.div
+                              initial={{ width: 0 }}
+                              animate={{ width: `${(coupon.currentClaims / coupon.maxClaims) * 100}%` }}
+                              className={`h-full rounded-full ${coupon.isActive ? 'bg-[#003317]' : 'bg-slate-400'}`}
+                           />
                         </div>
-                        <span className="text-[10px] font-black text-slate-800 uppercase tracking-widest">{coupon.currentClaims} / {coupon.maxClaims} Clm.</span>
                      </div>
-                     <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
-                        <motion.div 
-                          initial={{ width: 0 }}
-                          animate={{ width: `${(coupon.currentClaims / coupon.maxClaims) * 100}%` }}
-                          className={`h-full rounded-full ${coupon.isActive ? 'bg-[#0f4475]' : 'bg-slate-400'}`}
-                        />
-                     </div>
-                  </div>
 
-                  {/* Actions */}
-                  <div className="absolute bottom-6 right-6 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                     <button 
-                       onClick={() => handleToggleStatus(coupon.id)}
-                       title={coupon.isActive ? 'Deactivate Coupon' : 'Activate Coupon'}
-                       className={`p-2 rounded-xl transition-all ${coupon.isActive ? 'bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white' : 'bg-emerald-50 text-emerald-600 hover:bg-emerald-600 hover:text-white'}`}
-                     >
-                        <Power size={16} />
-                     </button>
-                     <button 
-                       onClick={() => handleDelete(coupon.id)}
-                       title="Permanently Delete"
-                       className="p-2 bg-rose-50 text-rose-500 rounded-xl hover:bg-rose-500 hover:text-white transition-all"
-                     >
-                        <Trash2 size={16} />
-                     </button>
-                  </div>
-               </motion.div>
-            ))}
+                     {/* Actions */}
+                     <div className="absolute bottom-6 right-6 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button
+                           onClick={() => handleToggleStatus(coupon.id)}
+                           title={coupon.isActive ? 'Deactivate Coupon' : 'Activate Coupon'}
+                           className={`p-2 rounded-xl transition-all ${coupon.isActive ? 'bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white' : 'bg-emerald-50 text-emerald-600 hover:bg-emerald-600 hover:text-white'}`}
+                        >
+                           <Power size={16} />
+                        </button>
+                        <button
+                           onClick={() => handleDelete(coupon.id)}
+                           title="Permanently Delete"
+                           className="p-2 bg-rose-50 text-rose-500 rounded-xl hover:bg-rose-500 hover:text-white transition-all"
+                        >
+                           <Trash2 size={16} />
+                        </button>
+                     </div>
+                  </motion.div>
+               ))}
+            </AnimatePresence>
+         </div>
+
+         {/* Creation Modal */}
+         <AnimatePresence>
+            {isModalOpen && (
+               <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+                  <motion.div
+                     initial={{ opacity: 0 }}
+                     animate={{ opacity: 1 }}
+                     exit={{ opacity: 0 }}
+                     onClick={() => setIsModalOpen(false)}
+                     className="absolute inset-0 bg-[#003317]/40 backdrop-blur-md"
+                  />
+
+                  <motion.div
+                     initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                     animate={{ scale: 1, opacity: 1, y: 0 }}
+                     exit={{ scale: 0.9, opacity: 0, y: 20 }}
+                     className="bg-white w-full max-w-lg rounded-[3rem] p-8 shadow-2xl relative z-10 border border-white/20"
+                  >
+                     <div className="flex justify-between items-center mb-8">
+                        <div className="flex items-center gap-3">
+                           <div className="p-2 bg-indigo-50 text-[#003317] rounded-xl">
+                              <Ticket size={24} />
+                           </div>
+                           <h2 className="text-xl font-black text-slate-800 uppercase tracking-tight">Generate Code</h2>
+                        </div>
+                        <button onClick={() => setIsModalOpen(false)} className="p-2 hover:bg-slate-100 rounded-full transition-colors">
+                           <X size={20} className="text-slate-400" />
+                        </button>
+                     </div>
+
+                     <form onSubmit={handleCreateCoupon} className="space-y-6">
+                        <div className="grid grid-cols-2 gap-6">
+                           <div className="space-y-1.5">
+                              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Reference Code</label>
+                              <input
+                                 required
+                                 type="text"
+                                 placeholder="e.g. WELCOME50"
+                                 value={newCoupon.code}
+                                 onChange={(e) => setNewCoupon({ ...newCoupon, code: e.target.value.toUpperCase() })}
+                                 className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#003317] transition-all"
+                              />
+                           </div>
+                           <div className="space-y-1.5">
+                              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Reward Tokens</label>
+                              <input
+                                 required
+                                 type="number"
+                                 placeholder="Amount"
+                                 value={newCoupon.rewardAmount}
+                                 onChange={(e) => setNewCoupon({ ...newCoupon, rewardAmount: e.target.value })}
+                                 className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#003317] transition-all"
+                              />
+                           </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-6">
+                           <div className="space-y-1.5">
+                              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Expiry Calendar</label>
+                              <input
+                                 required
+                                 type="date"
+                                 value={newCoupon.expiryDate}
+                                 onChange={(e) => setNewCoupon({ ...newCoupon, expiryDate: e.target.value })}
+                                 className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#003317] transition-all"
+                              />
+                           </div>
+                           <div className="space-y-1.5">
+                              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Quota (Max Claims)</label>
+                              <input
+                                 required
+                                 type="number"
+                                 placeholder="Inventory Limit"
+                                 value={newCoupon.maxClaims}
+                                 onChange={(e) => setNewCoupon({ ...newCoupon, maxClaims: e.target.value })}
+                                 className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#003317] transition-all"
+                              />
+                           </div>
+                        </div>
+
+                        <div className="space-y-1.5">
+                           <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Campaign Description</label>
+                           <textarea
+                              placeholder="What is this code for?"
+                              rows={3}
+                              value={newCoupon.description}
+                              onChange={(e) => setNewCoupon({ ...newCoupon, description: e.target.value })}
+                              className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#003317] transition-all resize-none"
+                           />
+                        </div>
+
+                        <button
+                           type="submit"
+                           className="w-full bg-[#003317] text-white py-4 rounded-2xl text-xs font-black uppercase tracking-widest shadow-xl shadow-[#003317]/20 hover:scale-[1.02] active:scale-[0.98] transition-all mt-4 flex items-center justify-center gap-3"
+                        >
+                           Confirm Generation
+                           <ChevronRight size={18} />
+                        </button>
+                     </form>
+                  </motion.div>
+               </div>
+            )}
          </AnimatePresence>
       </div>
-
-      {/* Creation Modal */}
-      <AnimatePresence>
-         {isModalOpen && (
-            <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
-               <motion.div 
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 onClick={() => setIsModalOpen(false)}
-                 className="absolute inset-0 bg-[#0f4475]/40 backdrop-blur-md" 
-               />
-               
-               <motion.div 
-                 initial={{ scale: 0.9, opacity: 0, y: 20 }}
-                 animate={{ scale: 1, opacity: 1, y: 0 }}
-                 exit={{ scale: 0.9, opacity: 0, y: 20 }}
-                 className="bg-white w-full max-w-lg rounded-[3rem] p-8 shadow-2xl relative z-10 border border-white/20"
-               >
-                  <div className="flex justify-between items-center mb-8">
-                     <div className="flex items-center gap-3">
-                        <div className="p-2 bg-indigo-50 text-[#0f4475] rounded-xl">
-                           <Ticket size={24} />
-                        </div>
-                        <h2 className="text-xl font-black text-slate-800 uppercase tracking-tight">Generate Code</h2>
-                     </div>
-                     <button onClick={() => setIsModalOpen(false)} className="p-2 hover:bg-slate-100 rounded-full transition-colors">
-                        <X size={20} className="text-slate-400" />
-                     </button>
-                  </div>
-
-                  <form onSubmit={handleCreateCoupon} className="space-y-6">
-                     <div className="grid grid-cols-2 gap-6">
-                        <div className="space-y-1.5">
-                           <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Reference Code</label>
-                           <input 
-                             required
-                             type="text" 
-                             placeholder="e.g. WELCOME50"
-                             value={newCoupon.code}
-                             onChange={(e) => setNewCoupon({...newCoupon, code: e.target.value.toUpperCase()})}
-                             className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#0f4475] transition-all"
-                           />
-                        </div>
-                        <div className="space-y-1.5">
-                           <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Reward Tokens</label>
-                           <input 
-                             required
-                             type="number" 
-                             placeholder="Amount"
-                             value={newCoupon.rewardAmount}
-                             onChange={(e) => setNewCoupon({...newCoupon, rewardAmount: e.target.value})}
-                             className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#0f4475] transition-all"
-                           />
-                        </div>
-                     </div>
-
-                     <div className="grid grid-cols-2 gap-6">
-                        <div className="space-y-1.5">
-                           <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Expiry Calendar</label>
-                           <input 
-                             required
-                             type="date" 
-                             value={newCoupon.expiryDate}
-                             onChange={(e) => setNewCoupon({...newCoupon, expiryDate: e.target.value})}
-                             className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#0f4475] transition-all"
-                           />
-                        </div>
-                        <div className="space-y-1.5">
-                           <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Quota (Max Claims)</label>
-                           <input 
-                             required
-                             type="number" 
-                             placeholder="Inventory Limit"
-                             value={newCoupon.maxClaims}
-                             onChange={(e) => setNewCoupon({...newCoupon, maxClaims: e.target.value})}
-                             className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#0f4475] transition-all"
-                           />
-                        </div>
-                     </div>
-
-                     <div className="space-y-1.5">
-                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Campaign Description</label>
-                        <textarea 
-                          placeholder="What is this code for?"
-                          rows={3}
-                          value={newCoupon.description}
-                          onChange={(e) => setNewCoupon({...newCoupon, description: e.target.value})}
-                          className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-800 outline-none focus:border-[#0f4475] transition-all resize-none"
-                        />
-                     </div>
-
-                     <button 
-                       type="submit"
-                       className="w-full bg-[#0f4475] text-white py-4 rounded-2xl text-xs font-black uppercase tracking-widest shadow-xl shadow-[#0f4475]/20 hover:scale-[1.02] active:scale-[0.98] transition-all mt-4 flex items-center justify-center gap-3"
-                     >
-                        Confirm Generation
-                        <ChevronRight size={18} />
-                     </button>
-                  </form>
-               </motion.div>
-            </div>
-         )}
-      </AnimatePresence>
-    </div>
-  );
+   );
 };
 
 export default ManageCoupons;
diff --git a/frontend/src/pages/ManageWallets.tsx b/frontend/src/pages/ManageWallets.tsx
index cc6c5aa2..12503020 100644
--- a/frontend/src/pages/ManageWallets.tsx
+++ b/frontend/src/pages/ManageWallets.tsx
@@ -1,12 +1,12 @@
 import { apiFetch } from '../api';
 import { useState, useEffect } from 'react';
-import { 
-  Users, 
-  Search, 
-  Wallet, 
-  Plus, 
-  X, 
-  CheckCircle2, 
+import {
+  Users,
+  Search,
+  Wallet,
+  Plus,
+  X,
+  CheckCircle2,
   AlertCircle,
   ArrowRight,
   User as UserIcon,
@@ -86,7 +86,7 @@ const ManageWallets = () => {
     }
   };
 
-  const filteredUsers = users.filter(user => 
+  const filteredUsers = users.filter(user =>
     (user.name?.toLowerCase() || '').includes(searchQuery.toLowerCase()) ||
     user.mobileNumber.includes(searchQuery)
   );
@@ -97,7 +97,7 @@ const ManageWallets = () => {
       <div className="flex items-center justify-between">
         <div className="flex flex-col">
           <div className="flex items-center gap-2 mb-1">
-            <h2 className="text-xs font-black text-[#0f4475] uppercase tracking-widest">Ritz Section</h2>
+            <h2 className="text-xs font-black text-[#003317] uppercase tracking-widest">Ritz Section</h2>
           </div>
           <h1 className="text-2xl font-black text-slate-800">Manage Wallets</h1>
           <p className="text-[10px] text-slate-400 font-medium flex items-center gap-1.5 mt-1">
@@ -109,12 +109,12 @@ const ManageWallets = () => {
         <div className="flex items-center gap-4">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
-            <input 
-              type="text" 
-              placeholder="Search user or mobile..." 
+            <input
+              type="text"
+              placeholder="Search user or mobile..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="bg-white border border-slate-200 rounded-xl pl-10 pr-4 py-2 text-sm outline-none focus:border-[#0f4475] transition-all w-64 shadow-sm"
+              className="bg-white border border-slate-200 rounded-xl pl-10 pr-4 py-2 text-sm outline-none focus:border-[#003317] transition-all w-64 shadow-sm"
             />
           </div>
         </div>
@@ -137,10 +137,10 @@ const ManageWallets = () => {
               {isLoading ? (
                 <tr>
                   <td colSpan={5} className="py-20 text-center">
-                    <motion.div 
+                    <motion.div
                       animate={{ scale: [1, 1.05, 1], opacity: [0.5, 1, 0.5] }}
                       transition={{ repeat: Infinity, duration: 1.5 }}
-                      className="text-[10px] font-black text-[#0f4475] uppercase tracking-widest"
+                      className="text-[10px] font-black text-[#003317] uppercase tracking-widest"
                     >
                       Loading Wallet Data...
                     </motion.div>
@@ -158,7 +158,7 @@ const ManageWallets = () => {
                     <td className="px-8 py-5 text-sm font-black text-slate-400 tabular-nums">#{user.id}</td>
                     <td className="px-8 py-5">
                       <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-xl bg-[#0f4475]/5 flex items-center justify-center text-[#0f4475]">
+                        <div className="w-10 h-10 rounded-xl bg-[#003317]/5 flex items-center justify-center text-[#003317]">
                           <UserIcon size={18} />
                         </div>
                         <div>
@@ -180,12 +180,12 @@ const ManageWallets = () => {
                       </div>
                     </td>
                     <td className="px-8 py-5 text-center">
-                      <button 
+                      <button
                         onClick={() => {
                           setSelectedUser(user);
                           setIsModalOpen(true);
                         }}
-                        className="bg-[#0f4475] text-white px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest hover:scale-105 transition-all shadow-lg shadow-[#0f4475]/10 active:scale-95"
+                        className="bg-[#003317] text-white px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest hover:scale-105 transition-all shadow-lg shadow-[#003317]/10 active:scale-95"
                       >
                         Credit Wallet
                       </button>
@@ -202,14 +202,14 @@ const ManageWallets = () => {
       <AnimatePresence>
         {isModalOpen && selectedUser && (
           <div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-auto">
-            <motion.div 
+            <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
               onClick={() => !isProcessing && setIsModalOpen(false)}
               className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
             />
-            <motion.div 
+            <motion.div
               initial={{ scale: 0.9, opacity: 0, y: 20 }}
               animate={{ scale: 1, opacity: 1, y: 0 }}
               exit={{ scale: 0.9, opacity: 0, y: 20 }}
@@ -218,12 +218,12 @@ const ManageWallets = () => {
               <div className="p-8">
                 <div className="flex items-center justify-between mb-8">
                   <div className="flex items-center gap-3">
-                    <div className="p-2 bg-[#0f4475]/10 text-[#0f4475] rounded-xl">
+                    <div className="p-2 bg-[#003317]/10 text-[#003317] rounded-xl">
                       <Plus size={20} />
                     </div>
                     <h3 className="text-lg font-black text-slate-800">Credit Ritz Tokens</h3>
                   </div>
-                  <button 
+                  <button
                     onClick={() => setIsModalOpen(false)}
                     className="p-2 hover:bg-slate-50 rounded-xl transition-colors"
                   >
@@ -244,13 +244,13 @@ const ManageWallets = () => {
                   <div>
                     <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Token Amount (Ritz)</label>
                     <div className="relative">
-                      <div className="absolute left-4 top-1/2 -translate-y-1/2 font-black text-[#0f4475] text-lg">R</div>
-                      <input 
-                        type="number" 
+                      <div className="absolute left-4 top-1/2 -translate-y-1/2 font-black text-[#003317] text-lg">R</div>
+                      <input
+                        type="number"
                         value={amount}
                         onChange={(e) => setAmount(e.target.value)}
                         placeholder="0.00"
-                        className="w-full bg-slate-50 border border-slate-100 rounded-2xl pl-10 pr-4 py-4 text-2xl font-black text-slate-800 outline-none focus:bg-white focus:border-[#0f4475]/30 transition-all"
+                        className="w-full bg-slate-50 border border-slate-100 rounded-2xl pl-10 pr-4 py-4 text-2xl font-black text-slate-800 outline-none focus:bg-white focus:border-[#003317]/30 transition-all"
                         required
                         autoFocus
                       />
@@ -258,7 +258,7 @@ const ManageWallets = () => {
                   </div>
 
                   {status && (
-                    <motion.div 
+                    <motion.div
                       initial={{ opacity: 0, y: -10 }}
                       animate={{ opacity: 1, y: 0 }}
                       className={`p-4 rounded-2xl flex items-center gap-3 ${status.type === 'success' ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'}`}
@@ -268,10 +268,10 @@ const ManageWallets = () => {
                     </motion.div>
                   )}
 
-                  <button 
+                  <button
                     type="submit"
                     disabled={isProcessing || !amount}
-                    className="w-full bg-[#0f4475] text-white py-4 rounded-2xl font-black uppercase tracking-widest shadow-xl shadow-[#0f4475]/20 hover:scale-[1.02] transition-all flex items-center justify-center gap-2 group disabled:opacity-50 disabled:hover:scale-100"
+                    className="w-full bg-[#003317] text-white py-4 rounded-2xl font-black uppercase tracking-widest shadow-xl shadow-[#003317]/20 hover:scale-[1.02] transition-all flex items-center justify-center gap-2 group disabled:opacity-50 disabled:hover:scale-100"
                   >
                     {isProcessing ? (
                       <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx
index e3382b5f..d2930d33 100644
--- a/frontend/src/pages/NotFound.tsx
+++ b/frontend/src/pages/NotFound.tsx
@@ -5,32 +5,32 @@ const NotFound = () => {
     const navigate = useNavigate();
 
     return (
-        <div className="min-h-screen bg-[#f8fafc] flex items-center justify-center p-6 font-sans selection:bg-[#0f4475]/10">
+        <div className="min-h-screen bg-[#f8fafc] flex items-center justify-center p-6 font-sans selection:bg-[#003317]/10">
             <div className="max-w-4xl w-full">
                 <div className="grid lg:grid-cols-2 gap-12 items-center">
                     {/* Visual Section */}
                     <div className="relative">
                         {/* Background Decorative Circles */}
-                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-[#0f4475]/5 rounded-full blur-3xl" />
+                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-[#003317]/5 rounded-full blur-3xl" />
                         <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-indigo-500/10 rounded-full blur-2xl" />
-                        
+
                         {/* 404 Main Text */}
                         <div className="relative">
-                            <h1 className="text-[180px] font-black leading-none tracking-tighter text-[#0f4475] opacity-20 select-none">
+                            <h1 className="text-[180px] font-black leading-none tracking-tighter text-[#003317] opacity-20 select-none">
                                 404
                             </h1>
-                            
+
                             {/* Detailed Icon Stack */}
                             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center">
                                 <div className="p-8 bg-white rounded-[40px] shadow-2xl border border-white/50 backdrop-blur-xl relative z-10">
-                                    <Search size={80} className="text-[#0f4475]" strokeWidth={1.5} />
-                                    
+                                    <Search size={80} className="text-[#003317]" strokeWidth={1.5} />
+
                                     {/* Small Floating Icons */}
                                     <div className="absolute -top-4 -right-4 p-3 bg-white rounded-2xl shadow-lg border border-white">
                                         <HelpCircle size={24} className="text-indigo-500" />
                                     </div>
-                                    
-                                    <div className="absolute -bottom-6 -left-6 p-4 bg-[#0f4475] rounded-3xl shadow-xl border-4 border-white text-white">
+
+                                    <div className="absolute -bottom-6 -left-6 p-4 bg-[#003317] rounded-3xl shadow-xl border-4 border-white text-white">
                                         <span className="text-sm font-black tracking-widest uppercase">Lost?</span>
                                     </div>
                                 </div>
@@ -48,9 +48,9 @@ const NotFound = () => {
                         </div>
 
                         <h2 className="text-4xl lg:text-5xl font-black text-[#1e293b] mb-6 leading-tight">
-                            Well, this is <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#0f4475] to-indigo-600">awkward.</span>
+                            Well, this is <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#003317] to-indigo-600">awkward.</span>
                         </h2>
-                        
+
                         <p className="text-[#64748b] text-lg mb-10 leading-relaxed font-medium">
                             The page you are looking for seems to have vanished into the grid. Either the URL is incorrect, or it's hiding in a different sector.
                         </p>
@@ -58,12 +58,12 @@ const NotFound = () => {
                         <div className="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start">
                             <button
                                 onClick={() => navigate('/dashboard')}
-                                className="group px-8 py-4 bg-[#0f4475] text-white rounded-2xl font-bold flex items-center gap-3 shadow-xl shadow-[#0f4475]/20 hover:bg-[#1a5a92] transition-all hover:-translate-y-1 active:translate-y-0"
+                                className="group px-8 py-4 bg-[#003317] text-white rounded-2xl font-bold flex items-center gap-3 shadow-xl shadow-[#003317]/20 hover:bg-[#1a5a92] transition-all hover:-translate-y-1 active:translate-y-0"
                             >
                                 <Home size={18} className="group-hover:scale-110 transition-transform" />
                                 Return to Safety
                             </button>
-                            
+
                             <button
                                 onClick={() => navigate(-1)}
                                 className="px-8 py-4 bg-white text-[#64748b] border border-[#e2e8f0] rounded-2xl font-bold flex items-center gap-3 hover:bg-gray-50 transition-all hover:text-[#1e293b]"
@@ -78,12 +78,12 @@ const NotFound = () => {
                             <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Common Sectors</p>
                             <div className="flex flex-wrap gap-x-6 gap-y-3 justify-center lg:justify-start">
                                 {['Orders', 'Inventory', 'Reports', 'Settings'].map((item) => (
-                                    <button 
+                                    <button
                                         key={item}
                                         onClick={() => navigate(`/${item.toLowerCase()}`)}
-                                        className="text-xs font-bold text-[#64748b] hover:text-[#0f4475] transition-colors flex items-center gap-1 group"
+                                        className="text-xs font-bold text-[#64748b] hover:text-[#003317] transition-colors flex items-center gap-1 group"
                                     >
-                                        <div className="w-1 h-1 rounded-full bg-[#e2e8f0] group-hover:bg-[#0f4475] transition-colors" />
+                                        <div className="w-1 h-1 rounded-full bg-[#e2e8f0] group-hover:bg-[#003317] transition-colors" />
                                         {item}
                                     </button>
                                 ))}
diff --git a/frontend/src/pages/PurchaseAnalytics.tsx b/frontend/src/pages/PurchaseAnalytics.tsx
index dc99bfba..c782a8d2 100644
--- a/frontend/src/pages/PurchaseAnalytics.tsx
+++ b/frontend/src/pages/PurchaseAnalytics.tsx
@@ -1,8 +1,8 @@
 import { apiFetch } from '../api';
 import React, { useState, useEffect } from 'react';
-import { 
-  TrendingUp, 
-  TrendingDown, 
+import {
+  TrendingUp,
+  TrendingDown,
   Calendar,
   Filter,
   DollarSign,
@@ -93,9 +93,9 @@ const PurchaseAnalytics = () => {
           productStats[item.productName] = { qty: 0, prices: [] };
         }
         productStats[item.productName].qty += item.quantity;
-        productStats[item.productName].prices.push({ 
-          date: new Date(order.date), 
-          rate: item.rate 
+        productStats[item.productName].prices.push({
+          date: new Date(order.date),
+          rate: item.rate
         });
       });
     });
@@ -109,14 +109,14 @@ const PurchaseAnalytics = () => {
     const analyzedData: ProductAnalytics[] = Object.keys(productStats).map(productName => {
       const stats = productStats[productName];
       stats.prices.sort((a, b) => a.date.getTime() - b.date.getTime());
-      
+
       const basePrice = stats.prices[0].rate;
       const currentPrice = stats.prices[stats.prices.length - 1].rate;
       const qty = stats.qty;
-      
+
       const priceDiff = currentPrice - basePrice;
       const impactAmount = Math.abs(priceDiff * qty);
-      
+
       let inflatedAmount = 0;
       let deflatedAmount = 0;
       let trend: 'up' | 'down' | 'stable' = 'stable';
@@ -170,7 +170,7 @@ const PurchaseAnalytics = () => {
   if (isLoading) {
     return (
       <div className="h-full flex flex-col items-center justify-center gap-4">
-        <Loader2 className="animate-spin text-[#0f4475]" size={40} />
+        <Loader2 className="animate-spin text-[#003317]" size={40} />
         <p className="text-sm font-bold text-slate-500 uppercase tracking-widest">Calculating Market Analytics...</p>
       </div>
     );
@@ -181,20 +181,20 @@ const PurchaseAnalytics = () => {
       {/* Header */}
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-black text-[#0f4475] tracking-tight uppercase">Purchase Analytics</h1>
+          <h1 className="text-2xl font-black text-[#003317] tracking-tight uppercase">Purchase Analytics</h1>
           <div className="flex items-center gap-2 mt-1">
-            <span className="bg-[#0f4475]/10 text-[#0f4475] text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
+            <span className="bg-[#003317]/10 text-[#003317] text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
               Start: {format(dateRange.start, 'yyyy-MM-dd')}
             </span>
-            <span className="bg-[#0f4475]/10 text-[#0f4475] text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
+            <span className="bg-[#003317]/10 text-[#003317] text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
               End: {format(dateRange.end, 'yyyy-MM-dd')}
             </span>
           </div>
         </div>
         <div className="flex items-center gap-3">
-          <button 
+          <button
             onClick={() => setFilterType('all')}
-            className={`px-4 py-2 rounded-xl text-xs font-bold uppercase transition-all ${filterType === 'all' ? 'bg-[#0f4475] text-white shadow-lg' : 'bg-white border text-slate-500 border-slate-200 hover:bg-slate-50'}`}
+            className={`px-4 py-2 rounded-xl text-xs font-bold uppercase transition-all ${filterType === 'all' ? 'bg-[#003317] text-white shadow-lg' : 'bg-white border text-slate-500 border-slate-200 hover:bg-slate-50'}`}
           >
             Show All
           </button>
@@ -228,10 +228,10 @@ const PurchaseAnalytics = () => {
             </h3>
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[#94a3b8]" size={14} />
-              <input 
-                type="text" 
-                placeholder="Search products..." 
-                className="pl-9 pr-4 py-2 border border-[#e2e8f0] rounded-xl text-xs outline-none focus:border-[#0f4475]/30 transition-all font-medium"
+              <input
+                type="text"
+                placeholder="Search products..."
+                className="pl-9 pr-4 py-2 border border-[#e2e8f0] rounded-xl text-xs outline-none focus:border-[#003317]/30 transition-all font-medium"
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
@@ -254,7 +254,7 @@ const PurchaseAnalytics = () => {
                 ) : (
                   filteredAnalytics.map((item, idx) => (
                     <tr key={idx} className="hover:bg-gray-50/50 transition-colors group">
-                      <td className="px-6 py-4"><p className="text-xs font-bold text-[#1e293b] group-hover:text-[#0f4475]">{item.product}</p></td>
+                      <td className="px-6 py-4"><p className="text-xs font-bold text-[#1e293b] group-hover:text-[#003317]">{item.product}</p></td>
                       <td className="px-6 py-4 text-xs font-bold text-[#475569]">{item.qty}</td>
                       <td className="px-6 py-4 text-xs font-bold text-[#475569] text-right">₹{item.basePrice.toFixed(2)}</td>
                       <td className="px-6 py-4 text-right">
@@ -284,15 +284,15 @@ const PurchaseAnalytics = () => {
           <div className="bg-white p-6 rounded-3xl border border-[#e2e8f0] shadow-sm">
             <h3 className="text-sm font-black text-[#1e293b] uppercase tracking-wider mb-6">Market Trends</h3>
             <div className="grid grid-cols-2 gap-4">
-              <button 
+              <button
                 onClick={() => setFilterType('up')}
-                className={`p-4 rounded-2xl flex flex-col items-center justify-center gap-2 transition-all cursor-pointer hover:border-[#0f4475]/50 border-2 ${filterType === 'up' ? 'bg-[#0f4475] text-white border-[#0f4475]' : 'bg-gray-50 text-slate-400 border-transparent hover:bg-slate-100'}`}
+                className={`p-4 rounded-2xl flex flex-col items-center justify-center gap-2 transition-all cursor-pointer hover:border-[#003317]/50 border-2 ${filterType === 'up' ? 'bg-[#003317] text-white border-[#003317]' : 'bg-gray-50 text-slate-400 border-transparent hover:bg-slate-100'}`}
               >
                 <TrendingUp size={20} />
                 <span className="text-[10px] font-bold uppercase tracking-wider">Inflation</span>
                 <span className="text-sm font-black">{summary.inflatedCount}</span>
               </button>
-              <button 
+              <button
                 onClick={() => setFilterType('down')}
                 className={`p-4 rounded-2xl flex flex-col items-center justify-center gap-2 transition-all cursor-pointer hover:border-emerald-600/50 border-2 ${filterType === 'down' ? 'bg-emerald-600 text-white border-emerald-600' : 'bg-gray-50 text-slate-400 border-transparent hover:bg-slate-100'}`}
               >
@@ -301,7 +301,7 @@ const PurchaseAnalytics = () => {
                 <span className="text-sm font-black">{summary.deflatedCount}</span>
               </button>
             </div>
-            
+
             <div className="mt-8 flex flex-col items-center py-8">
               <div className="relative w-32 h-32 flex items-center justify-center">
                 <div className="absolute inset-0 rounded-full border-[10px] border-slate-100"></div>
diff --git a/frontend/src/pages/PurchaseSummary.tsx b/frontend/src/pages/PurchaseSummary.tsx
index 2fd3b323..c1ba76ac 100644
--- a/frontend/src/pages/PurchaseSummary.tsx
+++ b/frontend/src/pages/PurchaseSummary.tsx
@@ -1,220 +1,220 @@
 import { apiFetch } from '../api';
 import { useState, useEffect } from 'react';
-import { 
-  Filter, 
-  ArrowRight,
-  Search,
-  CheckCircle2,
-  AlertCircle
+import {
+   Filter,
+   ArrowRight,
+   Search,
+   CheckCircle2,
+   AlertCircle
 } from 'lucide-react';
-import { 
-  AreaChart, 
-  Area, 
-  XAxis, 
-  YAxis, 
-  Tooltip, 
-  ResponsiveContainer
+import {
+   AreaChart,
+   Area,
+   XAxis,
+   YAxis,
+   Tooltip,
+   ResponsiveContainer
 } from 'recharts';
 import { motion } from 'framer-motion';
 
 const PurchaseSummary = () => {
-  const [activeRange, setActiveRange] = useState('Today');
-  const [data, setData] = useState<any>(null);
-  const [bills, setBills] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+   const [activeRange, setActiveRange] = useState('Today');
+   const [data, setData] = useState<any>(null);
+   const [bills, setBills] = useState<any[]>([]);
+   const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setIsLoading(true);
-        // Fetch summary and bills in parallel
-        const [summaryRes, billsRes] = await Promise.all([
-          apiFetch('/api/purchases/summary'),
-          apiFetch('/api/purchases/orders')
-        ]);
-        
-        if (summaryRes.ok && billsRes.ok) {
-          const summaryData = await summaryRes.json();
-          const billsData = await billsRes.json();
-          setData(summaryData);
-          setBills(billsData);
-        }
-      } catch (error) {
-        console.error('Error fetching purchase summary:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchData();
-  }, []);
+   useEffect(() => {
+      const fetchData = async () => {
+         try {
+            setIsLoading(true);
+            // Fetch summary and bills in parallel
+            const [summaryRes, billsRes] = await Promise.all([
+               apiFetch('/api/purchases/summary'),
+               apiFetch('/api/purchases/orders')
+            ]);
 
-  if (isLoading || !data) {
-    return (
-      <div className="h-screen flex items-center justify-center bg-slate-50/50">
-        <motion.div 
-          animate={{ scale: [1, 1.05, 1] }}
-          transition={{ repeat: Infinity, duration: 2 }}
-          className="text-[#0f4475] font-black uppercase tracking-widest text-xs"
-        >
-          Compiling Fiscal Intelligence...
-        </motion.div>
-      </div>
-    );
-  }
+            if (summaryRes.ok && billsRes.ok) {
+               const summaryData = await summaryRes.json();
+               const billsData = await billsRes.json();
+               setData(summaryData);
+               setBills(billsData);
+            }
+         } catch (error) {
+            console.error('Error fetching purchase summary:', error);
+         } finally {
+            setIsLoading(false);
+         }
+      };
+      fetchData();
+   }, []);
 
-  const summaryStats = [
-    { title: "Total Purchases", value: `₹${(data?.totalAmount ?? 0).toLocaleString()}`, icon: AlertCircle, color: "text-rose-500", bg: "bg-rose-50" },
-    { title: "Total Credits", value: `₹${(data?.balanceAmount ?? 0).toLocaleString()}`, icon: AlertCircle, color: "text-amber-500", bg: "bg-amber-50" },
-    { title: "Credit Paid", value: `₹${(data?.paidAmount ?? 0).toLocaleString()}`, icon: AlertCircle, color: "text-emerald-500", bg: "bg-emerald-50" },
-    { title: "Balance Credit", value: `₹${(data?.balanceAmount ?? 0).toLocaleString()}`, icon: AlertCircle, color: "text-indigo-500", bg: "bg-indigo-50" },
-    { title: "Bills to Pay", value: (data?.unpaidCount ?? 0).toString(), icon: AlertCircle, color: "text-blue-500", bg: "bg-blue-50" }
-  ];
+   if (isLoading || !data) {
+      return (
+         <div className="h-screen flex items-center justify-center bg-slate-50/50">
+            <motion.div
+               animate={{ scale: [1, 1.05, 1] }}
+               transition={{ repeat: Infinity, duration: 2 }}
+               className="text-[#003317] font-black uppercase tracking-widest text-xs"
+            >
+               Compiling Fiscal Intelligence...
+            </motion.div>
+         </div>
+      );
+   }
 
-  return (
-    <div className="p-8 space-y-8 bg-slate-50/50 min-h-screen font-inter">
-      {/* Top Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex flex-col">
-          <div className="flex items-center gap-2 mb-1">
-             <button title="Back" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
-                <ArrowRight className="rotate-180 text-slate-400" size={18} />
-             </button>
-             <h2 className="text-xs font-black text-[#0f4475] uppercase tracking-widest">Purchases</h2>
-          </div>
-          <h1 className="text-2xl font-black text-slate-800">Summary</h1>
-        </div>
-        
-        <div className="flex items-center gap-2 bg-white p-1 rounded-2xl border border-slate-200 shadow-sm">
-           {['Yesterday', 'Today', 'Week', '30 Days'].map(range => (
-              <button 
-               key={range}
-               onClick={() => setActiveRange(range)}
-               className={`px-4 py-2 text-[10px] font-black uppercase tracking-widest transition-all rounded-xl ${activeRange === range ? 'text-white bg-[#0f4475] shadow-md shadow-[#0f4475]/20' : 'text-slate-400 hover:text-slate-600'}`}
-              >
-                 {range}
-              </button>
-           ))}
-        </div>
-      </div>
+   const summaryStats = [
+      { title: "Total Purchases", value: `₹${(data?.totalAmount ?? 0).toLocaleString()}`, icon: AlertCircle, color: "text-rose-500", bg: "bg-rose-50" },
+      { title: "Total Credits", value: `₹${(data?.balanceAmount ?? 0).toLocaleString()}`, icon: AlertCircle, color: "text-amber-500", bg: "bg-amber-50" },
+      { title: "Credit Paid", value: `₹${(data?.paidAmount ?? 0).toLocaleString()}`, icon: AlertCircle, color: "text-emerald-500", bg: "bg-emerald-50" },
+      { title: "Balance Credit", value: `₹${(data?.balanceAmount ?? 0).toLocaleString()}`, icon: AlertCircle, color: "text-indigo-500", bg: "bg-indigo-50" },
+      { title: "Bills to Pay", value: (data?.unpaidCount ?? 0).toString(), icon: AlertCircle, color: "text-blue-500", bg: "bg-blue-50" }
+   ];
 
-      <div className="grid grid-cols-12 gap-8">
-        <div className="col-span-12 lg:col-span-5 space-y-6">
-           <div className="grid grid-cols-2 gap-4">
-              {summaryStats.map((stat, idx) => (
-                 <motion.div 
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ delay: idx * 0.05 }}
-                  key={idx}
-                  whileHover={{ y: -4 }}
-                  className="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm transition-all"
-                 >
-                    <div className="flex items-center gap-3 mb-4">
-                       <div className={`p-2.5 rounded-xl ${stat.bg} ${stat.color}`}>
-                          <stat.icon size={20} />
-                       </div>
-                       <h3 className="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none">{stat.title}</h3>
-                    </div>
-                    <p className="text-2xl font-black text-slate-800">{stat.value}</p>
-                 </motion.div>
-              ))}
-              
-              <div className="col-span-2 bg-[#0f4475] p-6 rounded-[32px] shadow-lg shadow-[#0f4475]/20 text-white relative overflow-hidden group">
-                 <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl" />
-                 <div className="relative z-10 flex items-end justify-between">
-                    <div>
-                       <h3 className="text-[10px] font-black uppercase tracking-widest opacity-80 text-white/70 mb-8">Bill Fulfillment</h3>
-                       <p className="text-4xl font-black mb-1">{bills.filter(b => b.status === 'PAID').length}</p>
-                       <p className="text-[10px] font-bold uppercase tracking-widest opacity-60">Cleared Bills</p>
-                    </div>
-                    <div className="text-right">
-                       <CheckCircle2 size={32} className="text-emerald-400 mb-6 ml-auto" />
-                       <p className="text-lg font-black text-emerald-400">
-                          {bills.length > 0 ? Math.round((bills.filter(b => b.status === 'PAID').length / bills.length) * 100) : 0}%
-                       </p>
-                       <p className="text-[9px] font-bold uppercase tracking-widest opacity-60">Success Rate</p>
-                    </div>
-                 </div>
-              </div>
-           </div>
-        </div>
-
-        <div className="col-span-12 lg:col-span-7 space-y-8">
-           <div className="bg-white p-8 rounded-[40px] border border-slate-100 shadow-sm h-full">
-              <div className="flex items-center justify-between mb-8">
-                 <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Purchase Trends</h3>
-                 <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 rounded-full bg-[#f43f5e]" />
-                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Procurement Volume</span>
-                 </div>
-              </div>
-              <div className="h-[280px]">
-                 <ResponsiveContainer width="100%" height="100%">
-                    <AreaChart data={data?.trend}>
-                       <defs>
-                          <linearGradient id="purchaseGradSum" x1="0" y1="0" x2="0" y2="1">
-                             <stop offset="5%" stopColor="#f43f5e" stopOpacity={0.1}/>
-                             <stop offset="95%" stopColor="#f43f5e" stopOpacity={0}/>
-                          </linearGradient>
-                       </defs>
-                       <XAxis dataKey="date" 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}k`} />
-                       <Tooltip contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 10px 25px -5px rgb(0 0 0 / 0.1)' }} />
-                       <Area type="monotone" dataKey="amount" stroke="#f43f5e" strokeWidth={4} fillOpacity={1} fill="url(#purchaseGradSum)" />
-                    </AreaChart>
-                 </ResponsiveContainer>
-              </div>
-           </div>
-        </div>
-      </div>
-
-      <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm p-8 pb-12">
-         <div className="flex items-center justify-between mb-8">
-            <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Recent Activity</h3>
-            <div className="flex items-center gap-4">
-               <div className="relative">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
-                  <input type="text" title="Search" placeholder="Filter bills..." className="pl-9 pr-4 py-2 bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold outline-none focus:border-[#0f4475] transition-all" />
+   return (
+      <div className="p-8 space-y-8 bg-slate-50/50 min-h-screen font-inter">
+         {/* Top Header */}
+         <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+               <div className="flex items-center gap-2 mb-1">
+                  <button title="Back" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
+                     <ArrowRight className="rotate-180 text-slate-400" size={18} />
+                  </button>
+                  <h2 className="text-xs font-black text-[#003317] uppercase tracking-widest">Purchases</h2>
                </div>
-               <button title="Filter" className="p-2.5 bg-slate-50 rounded-xl text-slate-500 border border-slate-100"><Filter size={16} /></button>
+               <h1 className="text-2xl font-black text-slate-800">Summary</h1>
+            </div>
+
+            <div className="flex items-center gap-2 bg-white p-1 rounded-2xl border border-slate-200 shadow-sm">
+               {['Yesterday', 'Today', 'Week', '30 Days'].map(range => (
+                  <button
+                     key={range}
+                     onClick={() => setActiveRange(range)}
+                     className={`px-4 py-2 text-[10px] font-black uppercase tracking-widest transition-all rounded-xl ${activeRange === range ? 'text-white bg-[#003317] shadow-md shadow-[#003317]/20' : 'text-slate-400 hover:text-slate-600'}`}
+                  >
+                     {range}
+                  </button>
+               ))}
             </div>
          </div>
 
-         <div className="overflow-x-auto">
-            <table className="w-full">
-               <thead>
-                  <tr className="bg-slate-50/50">
-                     <th className="px-6 py-4 text-left text-[10px] font-black text-slate-400 uppercase tracking-widest">Bill No</th>
-                     <th className="px-6 py-4 text-left text-[10px] font-black text-slate-400 uppercase tracking-widest">Date</th>
-                     <th className="px-6 py-4 text-left text-[10px] font-black text-slate-400 uppercase tracking-widest">Vendor</th>
-                     <th className="px-6 py-4 text-left text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>
-                     <th className="px-6 py-4 text-right text-[10px] font-black text-slate-400 uppercase tracking-widest">Balance</th>
-                     <th className="px-6 py-4 text-right text-[10px] font-black text-slate-400 uppercase tracking-widest">Amount</th>
-                  </tr>
-               </thead>
-               <tbody className="divide-y divide-slate-50">
-                  {bills.map((bill: any, idx: number) => (
-                     <tr key={idx} className="hover:bg-slate-50/50 transition-all cursor-pointer group">
-                        <td className="px-6 py-5 text-xs font-black text-slate-800">{bill.purchaseId}</td>
-                        <td className="px-6 py-5 text-xs font-bold text-slate-400">{bill.date}</td>
-                        <td className="px-6 py-5">
-                           <span className="text-xs font-black text-slate-700">{bill.vendor?.name || 'Walk-in'}</span>
-                        </td>
-                        <td className="px-6 py-5">
-                           <span className={`px-3 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-widest ${bill.status === 'PAID' ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'}`}>
-                              {bill.status}
-                           </span>
-                        </td>
-                        <td className="px-6 py-5 text-right text-xs font-black text-rose-500">₹{(bill.balance ?? 0).toLocaleString()}</td>
-                        <td className="px-6 py-5 text-right text-xs font-black text-[#0f4475]">₹{(bill.amount ?? 0).toLocaleString()}</td>
-                     </tr>
+         <div className="grid grid-cols-12 gap-8">
+            <div className="col-span-12 lg:col-span-5 space-y-6">
+               <div className="grid grid-cols-2 gap-4">
+                  {summaryStats.map((stat, idx) => (
+                     <motion.div
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ delay: idx * 0.05 }}
+                        key={idx}
+                        whileHover={{ y: -4 }}
+                        className="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm transition-all"
+                     >
+                        <div className="flex items-center gap-3 mb-4">
+                           <div className={`p-2.5 rounded-xl ${stat.bg} ${stat.color}`}>
+                              <stat.icon size={20} />
+                           </div>
+                           <h3 className="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none">{stat.title}</h3>
+                        </div>
+                        <p className="text-2xl font-black text-slate-800">{stat.value}</p>
+                     </motion.div>
                   ))}
-               </tbody>
-            </table>
+
+                  <div className="col-span-2 bg-[#003317] p-6 rounded-[32px] shadow-lg shadow-[#003317]/20 text-white relative overflow-hidden group">
+                     <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl" />
+                     <div className="relative z-10 flex items-end justify-between">
+                        <div>
+                           <h3 className="text-[10px] font-black uppercase tracking-widest opacity-80 text-white/70 mb-8">Bill Fulfillment</h3>
+                           <p className="text-4xl font-black mb-1">{bills.filter(b => b.status === 'PAID').length}</p>
+                           <p className="text-[10px] font-bold uppercase tracking-widest opacity-60">Cleared Bills</p>
+                        </div>
+                        <div className="text-right">
+                           <CheckCircle2 size={32} className="text-emerald-400 mb-6 ml-auto" />
+                           <p className="text-lg font-black text-emerald-400">
+                              {bills.length > 0 ? Math.round((bills.filter(b => b.status === 'PAID').length / bills.length) * 100) : 0}%
+                           </p>
+                           <p className="text-[9px] font-bold uppercase tracking-widest opacity-60">Success Rate</p>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+
+            <div className="col-span-12 lg:col-span-7 space-y-8">
+               <div className="bg-white p-8 rounded-[40px] border border-slate-100 shadow-sm h-full">
+                  <div className="flex items-center justify-between mb-8">
+                     <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Purchase Trends</h3>
+                     <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 rounded-full bg-[#f43f5e]" />
+                        <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Procurement Volume</span>
+                     </div>
+                  </div>
+                  <div className="h-[280px]">
+                     <ResponsiveContainer width="100%" height="100%">
+                        <AreaChart data={data?.trend}>
+                           <defs>
+                              <linearGradient id="purchaseGradSum" x1="0" y1="0" x2="0" y2="1">
+                                 <stop offset="5%" stopColor="#f43f5e" stopOpacity={0.1} />
+                                 <stop offset="95%" stopColor="#f43f5e" stopOpacity={0} />
+                              </linearGradient>
+                           </defs>
+                           <XAxis dataKey="date" 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}k`} />
+                           <Tooltip contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 10px 25px -5px rgb(0 0 0 / 0.1)' }} />
+                           <Area type="monotone" dataKey="amount" stroke="#f43f5e" strokeWidth={4} fillOpacity={1} fill="url(#purchaseGradSum)" />
+                        </AreaChart>
+                     </ResponsiveContainer>
+                  </div>
+               </div>
+            </div>
+         </div>
+
+         <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm p-8 pb-12">
+            <div className="flex items-center justify-between mb-8">
+               <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Recent Activity</h3>
+               <div className="flex items-center gap-4">
+                  <div className="relative">
+                     <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
+                     <input type="text" title="Search" placeholder="Filter bills..." className="pl-9 pr-4 py-2 bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold outline-none focus:border-[#003317] transition-all" />
+                  </div>
+                  <button title="Filter" className="p-2.5 bg-slate-50 rounded-xl text-slate-500 border border-slate-100"><Filter size={16} /></button>
+               </div>
+            </div>
+
+            <div className="overflow-x-auto">
+               <table className="w-full">
+                  <thead>
+                     <tr className="bg-slate-50/50">
+                        <th className="px-6 py-4 text-left text-[10px] font-black text-slate-400 uppercase tracking-widest">Bill No</th>
+                        <th className="px-6 py-4 text-left text-[10px] font-black text-slate-400 uppercase tracking-widest">Date</th>
+                        <th className="px-6 py-4 text-left text-[10px] font-black text-slate-400 uppercase tracking-widest">Vendor</th>
+                        <th className="px-6 py-4 text-left text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>
+                        <th className="px-6 py-4 text-right text-[10px] font-black text-slate-400 uppercase tracking-widest">Balance</th>
+                        <th className="px-6 py-4 text-right text-[10px] font-black text-slate-400 uppercase tracking-widest">Amount</th>
+                     </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-50">
+                     {bills.map((bill: any, idx: number) => (
+                        <tr key={idx} className="hover:bg-slate-50/50 transition-all cursor-pointer group">
+                           <td className="px-6 py-5 text-xs font-black text-slate-800">{bill.purchaseId}</td>
+                           <td className="px-6 py-5 text-xs font-bold text-slate-400">{bill.date}</td>
+                           <td className="px-6 py-5">
+                              <span className="text-xs font-black text-slate-700">{bill.vendor?.name || 'Walk-in'}</span>
+                           </td>
+                           <td className="px-6 py-5">
+                              <span className={`px-3 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-widest ${bill.status === 'PAID' ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'}`}>
+                                 {bill.status}
+                              </span>
+                           </td>
+                           <td className="px-6 py-5 text-right text-xs font-black text-rose-500">₹{(bill.balance ?? 0).toLocaleString()}</td>
+                           <td className="px-6 py-5 text-right text-xs font-black text-[#003317]">₹{(bill.amount ?? 0).toLocaleString()}</td>
+                        </tr>
+                     ))}
+                  </tbody>
+               </table>
+            </div>
          </div>
       </div>
-    </div>
-  );
+   );
 };
 
 export default PurchaseSummary;
diff --git a/frontend/src/pages/StoreDashboard.tsx b/frontend/src/pages/StoreDashboard.tsx
index a4669151..0aa210f9 100644
--- a/frontend/src/pages/StoreDashboard.tsx
+++ b/frontend/src/pages/StoreDashboard.tsx
@@ -1,405 +1,405 @@
 import { apiFetch } from '../api';
 import { useState, useEffect } from 'react';
-import { 
-  ChevronRight,
-  ShoppingBag,
-  Wallet,
-  ArrowRight,
-  RotateCcw,
-  Star,
-  UserMinus
+import {
+   ChevronRight,
+   ShoppingBag,
+   Wallet,
+   ArrowRight,
+   RotateCcw,
+   Star,
+   UserMinus
 } from 'lucide-react';
-import { 
-  AreaChart, 
-  Area, 
-  XAxis, 
-  YAxis, 
-  CartesianGrid, 
-  Tooltip, 
-  ResponsiveContainer,
-  PieChart,
-  Pie,
-  Cell
+import {
+   AreaChart,
+   Area,
+   XAxis,
+   YAxis,
+   CartesianGrid,
+   Tooltip,
+   ResponsiveContainer,
+   PieChart,
+   Pie,
+   Cell
 } from 'recharts';
 import { motion } from 'framer-motion';
 
 
 const StoreDashboard = () => {
-  const [activeTab, setActiveTab] = useState('Sales');
-  const [timeRange, setTimeRange] = useState('Today');
-  const [stats, setStats] = useState({
-    totalSales: 0,
-    activeOrders: 0,
-    dailyCustomers: 0,
-    revenueGrowth: 0,
-    suspendedUserCount: 0
-  });
-  const [trendingItems, setTrendingItems] = useState<any[]>([]);
-  const [salesData, setSalesData] = useState<any[]>([]);
-  const [insights, setInsights] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+   const [activeTab, setActiveTab] = useState('Sales');
+   const [timeRange, setTimeRange] = useState('Today');
+   const [stats, setStats] = useState({
+      totalSales: 0,
+      activeOrders: 0,
+      dailyCustomers: 0,
+      revenueGrowth: 0,
+      suspendedUserCount: 0
+   });
+   const [trendingItems, setTrendingItems] = useState<any[]>([]);
+   const [salesData, setSalesData] = useState<any[]>([]);
+   const [insights, setInsights] = useState<any[]>([]);
+   const [isLoading, setIsLoading] = useState(true);
 
-  const formatCurrency = (val: any) => {
-    const num = Number(val);
-    return isNaN(num) ? '0' : num.toLocaleString();
-  };
+   const formatCurrency = (val: any) => {
+      const num = Number(val);
+      return isNaN(num) ? '0' : num.toLocaleString();
+   };
 
-  const toLocalISOString = (date: Date) => {
-    const tzo = -date.getTimezoneOffset(),
-        pad = (num: number) => {
+   const toLocalISOString = (date: Date) => {
+      const tzo = -date.getTimezoneOffset(),
+         pad = (num: number) => {
             const norm = Math.floor(Math.abs(num));
             return (norm < 10 ? '0' : '') + norm;
-        };
-    return date.getFullYear() +
-        '-' + pad(date.getMonth() + 1) +
-        '-' + pad(date.getDate()) +
-        'T' + pad(date.getHours()) +
-        ':' + pad(date.getMinutes()) +
-        ':' + pad(date.getSeconds()) +
-        '.' + pad(date.getMilliseconds());
-  };
+         };
+      return date.getFullYear() +
+         '-' + pad(date.getMonth() + 1) +
+         '-' + pad(date.getDate()) +
+         'T' + pad(date.getHours()) +
+         ':' + pad(date.getMinutes()) +
+         ':' + pad(date.getSeconds()) +
+         '.' + pad(date.getMilliseconds());
+   };
 
-  const getRangeDates = (range: string) => {
-    const now = new Date();
-    const start = new Date();
-    const end = new Date();
-    
-    // Set end to end of today
-    end.setHours(23, 59, 59, 999);
+   const getRangeDates = (range: string) => {
+      const now = new Date();
+      const start = new Date();
+      const end = new Date();
 
-    switch (range) {
-      case 'Today':
-        start.setHours(0, 0, 0, 0);
-        break;
-      case 'Yesterday':
-        start.setDate(now.getDate() - 1);
-        start.setHours(0, 0, 0, 0);
-        end.setDate(now.getDate() - 1);
-        end.setHours(23, 59, 59, 999);
-        break;
-      case 'Week':
-        start.setDate(now.getDate() - 7);
-        start.setHours(0, 0, 0, 0);
-        break;
-      case '30 Days':
-        start.setDate(now.getDate() - 30);
-        start.setHours(0, 0, 0, 0);
-        break;
-      default:
-        start.setHours(0, 0, 0, 0);
-    }
-    return { from: toLocalISOString(start), to: toLocalISOString(end) };
-  };
+      // Set end to end of today
+      end.setHours(23, 59, 59, 999);
 
-  useEffect(() => {
-    const fetchStats = async () => {
-      try {
-        setIsLoading(true);
-        const range = getRangeDates(timeRange);
-        const params = new URLSearchParams();
-        params.append('from', range.from);
-        params.append('to', range.to);
-        
-        const response = await apiFetch(`/api/dashboard/stats?${params.toString()}`);
-        if (response.ok) {
-          const data = await response.json();
-          console.log('Dashboard data received successfully:', data);
-          
-          if (data.stats) {
-            setStats({
-              totalSales: data.stats.totalSales,
-              activeOrders: data.stats.activeOrders,
-              dailyCustomers: data.stats.dailyCustomers,
-              revenueGrowth: data.stats.growth,
-              suspendedUserCount: data.stats.suspendedUserCount
-            });
-          }
-
-          if (data.storeOverview && data.storeOverview.length > 0) {
-             const ritStore = data.storeOverview.find((s: any) => s.name === 'Tillo Canteen');
-             if (ritStore) {
-                setStats(prev => ({
-                   ...prev,
-                   totalSales: ritStore.sale,
-                   activeOrders: ritStore.orders,
-                   dailyCustomers: ritStore.orders * 0.9,
-                }));
-             }
-          }
-
-          if (data.trendingItems) setTrendingItems(data.trendingItems);
-          if (data.hourlySales) setSalesData(data.hourlySales);
-          if (data.insights) setInsights(data.insights);
-        }
-      } catch (error) {
-        console.error('Error fetching dashboard stats:', error);
-      } finally {
-        setIsLoading(false);
+      switch (range) {
+         case 'Today':
+            start.setHours(0, 0, 0, 0);
+            break;
+         case 'Yesterday':
+            start.setDate(now.getDate() - 1);
+            start.setHours(0, 0, 0, 0);
+            end.setDate(now.getDate() - 1);
+            end.setHours(23, 59, 59, 999);
+            break;
+         case 'Week':
+            start.setDate(now.getDate() - 7);
+            start.setHours(0, 0, 0, 0);
+            break;
+         case '30 Days':
+            start.setDate(now.getDate() - 30);
+            start.setHours(0, 0, 0, 0);
+            break;
+         default:
+            start.setHours(0, 0, 0, 0);
       }
-    };
-    fetchStats();
-  }, [timeRange]);
+      return { from: toLocalISOString(start), to: toLocalISOString(end) };
+   };
 
-  const pieData = [
-    { name: 'Full Payment', value: Number(stats.totalSales) || 0, color: '#8b5cf6' },
-    { name: 'Credit', value: 0, color: '#fbbf24' }
-  ];
+   useEffect(() => {
+      const fetchStats = async () => {
+         try {
+            setIsLoading(true);
+            const range = getRangeDates(timeRange);
+            const params = new URLSearchParams();
+            params.append('from', range.from);
+            params.append('to', range.to);
 
-  if (isLoading) {
-    return (
-      <div className="h-screen flex items-center justify-center bg-slate-50/50">
-        <motion.div 
-          animate={{ scale: [1, 1.1, 1], opacity: [0.5, 1, 0.5] }}
-          transition={{ repeat: Infinity, duration: 1.5 }}
-          className="text-[#0f4475] font-black uppercase tracking-widest text-sm"
-        >
-          Analyzing Store Data...
-        </motion.div>
-      </div>
-    );
-  }
+            const response = await apiFetch(`/api/dashboard/stats?${params.toString()}`);
+            if (response.ok) {
+               const data = await response.json();
+               console.log('Dashboard data received successfully:', data);
+
+               if (data.stats) {
+                  setStats({
+                     totalSales: data.stats.totalSales,
+                     activeOrders: data.stats.activeOrders,
+                     dailyCustomers: data.stats.dailyCustomers,
+                     revenueGrowth: data.stats.growth,
+                     suspendedUserCount: data.stats.suspendedUserCount
+                  });
+               }
+
+               if (data.storeOverview && data.storeOverview.length > 0) {
+                  const ritStore = data.storeOverview.find((s: any) => s.name === 'Tillo Canteen');
+                  if (ritStore) {
+                     setStats(prev => ({
+                        ...prev,
+                        totalSales: ritStore.sale,
+                        activeOrders: ritStore.orders,
+                        dailyCustomers: ritStore.orders * 0.9,
+                     }));
+                  }
+               }
+
+               if (data.trendingItems) setTrendingItems(data.trendingItems);
+               if (data.hourlySales) setSalesData(data.hourlySales);
+               if (data.insights) setInsights(data.insights);
+            }
+         } catch (error) {
+            console.error('Error fetching dashboard stats:', error);
+         } finally {
+            setIsLoading(false);
+         }
+      };
+      fetchStats();
+   }, [timeRange]);
+
+   const pieData = [
+      { name: 'Full Payment', value: Number(stats.totalSales) || 0, color: '#8b5cf6' },
+      { name: 'Credit', value: 0, color: '#fbbf24' }
+   ];
+
+   if (isLoading) {
+      return (
+         <div className="h-screen flex items-center justify-center bg-slate-50/50">
+            <motion.div
+               animate={{ scale: [1, 1.1, 1], opacity: [0.5, 1, 0.5] }}
+               transition={{ repeat: Infinity, duration: 1.5 }}
+               className="text-[#003317] font-black uppercase tracking-widest text-sm"
+            >
+               Analyzing Store Data...
+            </motion.div>
+         </div>
+      );
+   }
 
 
-  return (
-    <div className="p-8 space-y-8 bg-slate-50/50 min-h-screen font-inter">
-      {/* Top Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex flex-col">
-          <div className="flex items-center gap-2 mb-1">
-             <button title="Return to previous screen" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
-                <ArrowRight className="rotate-180 text-slate-400" size={18} />
-             </button>
-             <h2 className="text-xs font-black text-[#0f4475] uppercase tracking-widest">Store Dashboard</h2>
-          </div>
-          <h1 className="text-2xl font-black text-slate-800">
-            Good morning, {(() => {
-              const saved = localStorage.getItem('systemUser');
-              return saved ? JSON.parse(saved).name : 'Partner';
-            })()}
-          </h1>
-        </div>
-        
-        <div className="flex items-center gap-3">
-          {/* Action buttons or profile placeholder can go here if needed later */}
-        </div>
-      </div>
-
-      {/* Main Stats Grid */}
-      <div className="grid grid-cols-12 gap-6">
-        {/* Sales Chart Section */}
-        <div className="col-span-12 lg:col-span-5 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm relative overflow-hidden group">
-           <div className="flex items-center gap-8 mb-8 border-b border-slate-50">
-              {['Sales', 'Payments'].map(tab => (
-                 <button 
-                  key={tab}
-                  title={`Visualize ${tab.toLowerCase()} throughput data`}
-                  onClick={() => setActiveTab(tab)}
-                  className={`pb-4 text-[11px] font-black uppercase tracking-widest transition-all relative ${activeTab === tab ? 'text-[#0f4475]' : 'text-slate-400 hover:text-slate-600'}`}
-                 >
-                    {tab}
-                    {activeTab === tab && (
-                       <motion.div layoutId="tabLineStore" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0f4475]" />
-                    )}
-                 </button>
-              ))}
-           </div>
-
-           <div className="h-[280px] w-full mt-4">
-              <ResponsiveContainer width="100%" height="100%">
-                <AreaChart data={salesData}>
-                  <defs>
-                    <linearGradient id="colorSalesStore" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="#f43f5e" stopOpacity={0.2}/>
-                      <stop offset="95%" stopColor="#f43f5e" stopOpacity={0}/>
-                    </linearGradient>
-                  </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 ? `R${v/1000}k` : `R${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(#colorSalesStore)" />
-                </AreaChart>
-              </ResponsiveContainer>
-           </div>
-        </div>
-
-        {/* Total Sales Gauge */}
-        <div className="col-span-12 lg:col-span-4 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm relative">
-           <div className="relative h-[280px] flex flex-col items-center justify-center mt-8">
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
-                   <Pie
-                    data={pieData}
-                    cx="50%"
-                    cy="50%"
-                    innerRadius={80}
-                    outerRadius={105}
-                    paddingAngle={0}
-                    dataKey="value"
-                    startAngle={210}
-                    endAngle={-150}
-                   >
-                    {pieData.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                   </Pie>
-                </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>
-              </div>
-              <div className="flex gap-6 mt-4">
-                 <div className="flex items-center gap-2">
-                    <div className="w-2.5 h-2.5 rounded-full bg-[#8b5cf6]" />
-                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Full-Payment</span>
-                 </div>
-                 <div className="flex items-center gap-2">
-                    <div className="w-2.5 h-2.5 rounded-full bg-[#fbbf24]" />
-                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Credit</span>
-                 </div>
-              </div>
-           </div>
-        </div>
-
-        {/* Right Stats Column */}
-        <div className="col-span-12 lg:col-span-3 space-y-6">
-           {/* Filters */}
-           <div className="flex items-center justify-between overflow-x-auto gap-2 pb-2 scrollbar-none">
-              {['Yesterday', 'Today', 'Week', '30 Days', 'Custom'].map(range => (
-                 <button 
-                  key={range}
-                  title={`Filter metrics by ${range.toLowerCase()}`}
-                  onClick={() => setTimeRange(range)}
-                  className={`whitespace-nowrap px-2 py-2 text-[10px] font-black uppercase tracking-tighter transition-all relative ${timeRange === range ? 'text-[#0f4475]' : 'text-slate-400 hover:text-slate-600'}`}
-                 >
-                    {range}
-                    {timeRange === range && (
-                       <motion.div layoutId="rangeLineStore" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0f4475]" />
-                    )}
-                 </button>
-              ))}
-           </div>
-
-           {/* Total Orders Card */}
-           <div title="View detailed store volume and throughput" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm relative h-[180px] flex flex-col justify-between group cursor-pointer hover:border-[#0f4475]/30 transition-all">
-              <div className="flex items-center gap-3">
-                 <div className="p-2 bg-amber-50 text-amber-500 rounded-xl group-hover:scale-110 transition-transform">
-                    <ShoppingBag size={20} />
-                 </div>
-                 <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Sales</h4>
-              </div>
-              <div className="flex flex-col items-center">
-                 <h2 className="text-5xl font-black text-slate-800 tracking-tighter">{stats.activeOrders}</h2>
-                 <div className="w-full h-1 bg-green-500 rounded-full mt-4 shadow-sm" />
-              </div>
-           </div>
-
-           {/* Restricted Accounts Card */}
-           <div title="Monitor suspended customer accounts" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[130px] flex flex-col justify-between group cursor-pointer hover:border-red-500/30 transition-all">
-              <div className="flex items-center gap-3">
-                 <div className="p-2 bg-red-50 text-red-500 rounded-xl group-hover:scale-110 transition-transform">
-                    <UserMinus size={20} />
-                 </div>
-                 <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Restricted Accounts</h4>
-              </div>
-              <div className="text-center">
-                 <h2 className="text-4xl font-black text-slate-800 tracking-tighter">{stats?.suspendedUserCount || 0}</h2>
-              </div>
-           </div>
-
-           {/* Expenses Card */}
-           <div title="Monitor store operational expenditures" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[130px] flex flex-col justify-between group cursor-pointer hover:border-[#0f4475]/30 transition-all">
-              <div className="flex items-center gap-3">
-                 <div className="p-2 bg-amber-100 text-[#0f4475] rounded-xl shadow-sm">
-                    <Wallet size={20} />
-                 </div>
-                 <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Expenses</h4>
-              </div>
-              <div className="text-center">
-                 <h2 className="text-4xl font-black text-slate-800 tracking-tighter">₹0</h2>
-              </div>
-           </div>
-        </div>
-      </div>
-
-      {/* Bottom Section */}
-      <div className="grid grid-cols-12 gap-8 mt-4 pb-12">
-         {/* Trending Items */}
-         <div className="col-span-12 lg:col-span-6 bg-white rounded-[32px] border border-slate-100 shadow-sm p-6">
-            <div className="flex items-center justify-between mb-8">
-               <div className="flex items-center gap-3">
-                  <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Trending Items</h3>
-                  <div className="p-1 px-2 bg-indigo-50 rounded-lg text-indigo-400">
-                     <Star size={12} fill="currentColor" />
-                  </div>
-               </div>
-               <div className="flex items-center gap-1.5 p-1 bg-slate-50 rounded-lg border border-slate-100">
-                  <button title="View inventory metrics" className="p-1.5 text-slate-400 hover:text-slate-600 transition-all"><ShoppingBag size={14} /></button>
-                  <button title="View price distributions" className="text-[10px] font-black text-slate-400 px-1">₹</button>
+   return (
+      <div className="p-8 space-y-8 bg-slate-50/50 min-h-screen font-inter">
+         {/* Top Header */}
+         <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+               <div className="flex items-center gap-2 mb-1">
+                  <button title="Return to previous screen" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
+                     <ArrowRight className="rotate-180 text-slate-400" size={18} />
+                  </button>
+                  <h2 className="text-xs font-black text-[#003317] uppercase tracking-widest">Store Dashboard</h2>
                </div>
+               <h1 className="text-2xl font-black text-slate-800">
+                  Good morning, {(() => {
+                     const saved = localStorage.getItem('systemUser');
+                     return saved ? JSON.parse(saved).name : 'Partner';
+                  })()}
+               </h1>
             </div>
 
-            <div className="overflow-x-auto">
-               <table className="w-full">
-                  <thead>
-                    <tr className="text-left border-b border-slate-50">
-                       <th className="pb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Items</th>
-                       <th className="pb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Sold Quantity</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-slate-50">
-                    {trendingItems.map((item, idx) => (
-                       <tr key={idx} className="group cursor-pointer hover:bg-slate-50/50 transition-all">
-                          <td className="py-4">
-                             <div className="flex items-center gap-4">
-                                <div className="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 border border-slate-50 group-hover:scale-105 transition-transform flex items-center justify-center">
-                                   {item.imageUrl ? (
-                                      <img src={item.imageUrl} alt={item.name} className="w-full h-full object-cover" />
-                                   ) : (
-                                      <div className="w-full h-full bg-slate-100" />
-                                   )}
-                                </div>
-                                <div className="space-y-0.5">
-                                   <p className="text-[9px] font-black text-[#0f4475] uppercase tracking-widest brightness-110">{item.category}</p>
-                                   <p className="text-xs font-black text-slate-800 uppercase tracking-tight">{item.name}</p>
-                                </div>
-                             </div>
-                          </td>
-                          <td className="py-4 text-right">
-                             <span className="text-sm font-black text-slate-800">{item.orderCount}</span>
-                          </td>
-                       </tr>
-                    ))}
-                  </tbody>
-               </table>
+            <div className="flex items-center gap-3">
+               {/* Action buttons or profile placeholder can go here if needed later */}
             </div>
          </div>
 
-         {/* Store Insights */}
-         <div className="col-span-12 lg:col-span-6 bg-white rounded-[32px] border border-slate-100 shadow-sm p-6 flex flex-col">
-            <h3 className="text-sm font-black text-slate-800 tracking-tight mb-8 uppercase tracking-widest">Store Insights</h3>
-            
-            <div className="space-y-4 flex-1 overflow-y-auto max-h-[480px] custom-scrollbar pr-2">
-               {insights.map((insight, idx) => (
-                  <div key={idx} className={`p-4 rounded-2xl border transition-all hover:translate-x-1 ${insight.color} flex items-center gap-3`}>
-                     <div className="w-6 h-6 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center shrink-0">
-                        <Star size={12} className="opacity-70" />
+         {/* Main Stats Grid */}
+         <div className="grid grid-cols-12 gap-6">
+            {/* Sales Chart Section */}
+            <div className="col-span-12 lg:col-span-5 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm relative overflow-hidden group">
+               <div className="flex items-center gap-8 mb-8 border-b border-slate-50">
+                  {['Sales', 'Payments'].map(tab => (
+                     <button
+                        key={tab}
+                        title={`Visualize ${tab.toLowerCase()} throughput data`}
+                        onClick={() => setActiveTab(tab)}
+                        className={`pb-4 text-[11px] font-black uppercase tracking-widest transition-all relative ${activeTab === tab ? 'text-[#003317]' : 'text-slate-400 hover:text-slate-600'}`}
+                     >
+                        {tab}
+                        {activeTab === tab && (
+                           <motion.div layoutId="tabLineStore" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#003317]" />
+                        )}
+                     </button>
+                  ))}
+               </div>
+
+               <div className="h-[280px] w-full mt-4">
+                  <ResponsiveContainer width="100%" height="100%">
+                     <AreaChart data={salesData}>
+                        <defs>
+                           <linearGradient id="colorSalesStore" x1="0" y1="0" x2="0" y2="1">
+                              <stop offset="5%" stopColor="#f43f5e" stopOpacity={0.2} />
+                              <stop offset="95%" stopColor="#f43f5e" stopOpacity={0} />
+                           </linearGradient>
+                        </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 ? `R${v / 1000}k` : `R${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(#colorSalesStore)" />
+                     </AreaChart>
+                  </ResponsiveContainer>
+               </div>
+            </div>
+
+            {/* Total Sales Gauge */}
+            <div className="col-span-12 lg:col-span-4 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm relative">
+               <div className="relative h-[280px] flex flex-col items-center justify-center mt-8">
+                  <ResponsiveContainer width="100%" height="100%">
+                     <PieChart>
+                        <Pie
+                           data={pieData}
+                           cx="50%"
+                           cy="50%"
+                           innerRadius={80}
+                           outerRadius={105}
+                           paddingAngle={0}
+                           dataKey="value"
+                           startAngle={210}
+                           endAngle={-150}
+                        >
+                           {pieData.map((entry, index) => (
+                              <Cell key={`cell-${index}`} fill={entry.color} />
+                           ))}
+                        </Pie>
+                     </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>
+                  </div>
+                  <div className="flex gap-6 mt-4">
+                     <div className="flex items-center gap-2">
+                        <div className="w-2.5 h-2.5 rounded-full bg-[#8b5cf6]" />
+                        <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Full-Payment</span>
+                     </div>
+                     <div className="flex items-center gap-2">
+                        <div className="w-2.5 h-2.5 rounded-full bg-[#fbbf24]" />
+                        <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Credit</span>
                      </div>
-                     <p className="text-[11px] font-bold leading-relaxed">{insight.text}</p>
                   </div>
-               ))}
+               </div>
             </div>
 
-            <div className="mt-8 flex justify-end">
-               <button title="Analyze subsequent business cycles" className="flex items-center gap-2 px-6 py-2.5 bg-[#0f4475]/5 hover:bg-[#0f4475]/10 text-[#0f4475] text-[11px] font-black uppercase tracking-widest rounded-2xl transition-all group">
-                  Next
-                  <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
-               </button>
+            {/* Right Stats Column */}
+            <div className="col-span-12 lg:col-span-3 space-y-6">
+               {/* Filters */}
+               <div className="flex items-center justify-between overflow-x-auto gap-2 pb-2 scrollbar-none">
+                  {['Yesterday', 'Today', 'Week', '30 Days', 'Custom'].map(range => (
+                     <button
+                        key={range}
+                        title={`Filter metrics by ${range.toLowerCase()}`}
+                        onClick={() => setTimeRange(range)}
+                        className={`whitespace-nowrap px-2 py-2 text-[10px] font-black uppercase tracking-tighter transition-all relative ${timeRange === range ? 'text-[#003317]' : 'text-slate-400 hover:text-slate-600'}`}
+                     >
+                        {range}
+                        {timeRange === range && (
+                           <motion.div layoutId="rangeLineStore" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#003317]" />
+                        )}
+                     </button>
+                  ))}
+               </div>
+
+               {/* Total Orders Card */}
+               <div title="View detailed store volume and throughput" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm relative h-[180px] flex flex-col justify-between group cursor-pointer hover:border-[#003317]/30 transition-all">
+                  <div className="flex items-center gap-3">
+                     <div className="p-2 bg-amber-50 text-amber-500 rounded-xl group-hover:scale-110 transition-transform">
+                        <ShoppingBag size={20} />
+                     </div>
+                     <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Sales</h4>
+                  </div>
+                  <div className="flex flex-col items-center">
+                     <h2 className="text-5xl font-black text-slate-800 tracking-tighter">{stats.activeOrders}</h2>
+                     <div className="w-full h-1 bg-green-500 rounded-full mt-4 shadow-sm" />
+                  </div>
+               </div>
+
+               {/* Restricted Accounts Card */}
+               <div title="Monitor suspended customer accounts" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[130px] flex flex-col justify-between group cursor-pointer hover:border-red-500/30 transition-all">
+                  <div className="flex items-center gap-3">
+                     <div className="p-2 bg-red-50 text-red-500 rounded-xl group-hover:scale-110 transition-transform">
+                        <UserMinus size={20} />
+                     </div>
+                     <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Restricted Accounts</h4>
+                  </div>
+                  <div className="text-center">
+                     <h2 className="text-4xl font-black text-slate-800 tracking-tighter">{stats?.suspendedUserCount || 0}</h2>
+                  </div>
+               </div>
+
+               {/* Expenses Card */}
+               <div title="Monitor store operational expenditures" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[130px] flex flex-col justify-between group cursor-pointer hover:border-[#003317]/30 transition-all">
+                  <div className="flex items-center gap-3">
+                     <div className="p-2 bg-amber-100 text-[#003317] rounded-xl shadow-sm">
+                        <Wallet size={20} />
+                     </div>
+                     <h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Expenses</h4>
+                  </div>
+                  <div className="text-center">
+                     <h2 className="text-4xl font-black text-slate-800 tracking-tighter">₹0</h2>
+                  </div>
+               </div>
+            </div>
+         </div>
+
+         {/* Bottom Section */}
+         <div className="grid grid-cols-12 gap-8 mt-4 pb-12">
+            {/* Trending Items */}
+            <div className="col-span-12 lg:col-span-6 bg-white rounded-[32px] border border-slate-100 shadow-sm p-6">
+               <div className="flex items-center justify-between mb-8">
+                  <div className="flex items-center gap-3">
+                     <h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Trending Items</h3>
+                     <div className="p-1 px-2 bg-indigo-50 rounded-lg text-indigo-400">
+                        <Star size={12} fill="currentColor" />
+                     </div>
+                  </div>
+                  <div className="flex items-center gap-1.5 p-1 bg-slate-50 rounded-lg border border-slate-100">
+                     <button title="View inventory metrics" className="p-1.5 text-slate-400 hover:text-slate-600 transition-all"><ShoppingBag size={14} /></button>
+                     <button title="View price distributions" className="text-[10px] font-black text-slate-400 px-1">₹</button>
+                  </div>
+               </div>
+
+               <div className="overflow-x-auto">
+                  <table className="w-full">
+                     <thead>
+                        <tr className="text-left border-b border-slate-50">
+                           <th className="pb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Items</th>
+                           <th className="pb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Sold Quantity</th>
+                        </tr>
+                     </thead>
+                     <tbody className="divide-y divide-slate-50">
+                        {trendingItems.map((item, idx) => (
+                           <tr key={idx} className="group cursor-pointer hover:bg-slate-50/50 transition-all">
+                              <td className="py-4">
+                                 <div className="flex items-center gap-4">
+                                    <div className="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 border border-slate-50 group-hover:scale-105 transition-transform flex items-center justify-center">
+                                       {item.imageUrl ? (
+                                          <img src={item.imageUrl} alt={item.name} className="w-full h-full object-cover" />
+                                       ) : (
+                                          <div className="w-full h-full bg-slate-100" />
+                                       )}
+                                    </div>
+                                    <div className="space-y-0.5">
+                                       <p className="text-[9px] font-black text-[#003317] uppercase tracking-widest brightness-110">{item.category}</p>
+                                       <p className="text-xs font-black text-slate-800 uppercase tracking-tight">{item.name}</p>
+                                    </div>
+                                 </div>
+                              </td>
+                              <td className="py-4 text-right">
+                                 <span className="text-sm font-black text-slate-800">{item.orderCount}</span>
+                              </td>
+                           </tr>
+                        ))}
+                     </tbody>
+                  </table>
+               </div>
+            </div>
+
+            {/* Store Insights */}
+            <div className="col-span-12 lg:col-span-6 bg-white rounded-[32px] border border-slate-100 shadow-sm p-6 flex flex-col">
+               <h3 className="text-sm font-black text-slate-800 tracking-tight mb-8 uppercase tracking-widest">Store Insights</h3>
+
+               <div className="space-y-4 flex-1 overflow-y-auto max-h-[480px] custom-scrollbar pr-2">
+                  {insights.map((insight, idx) => (
+                     <div key={idx} className={`p-4 rounded-2xl border transition-all hover:translate-x-1 ${insight.color} flex items-center gap-3`}>
+                        <div className="w-6 h-6 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center shrink-0">
+                           <Star size={12} className="opacity-70" />
+                        </div>
+                        <p className="text-[11px] font-bold leading-relaxed">{insight.text}</p>
+                     </div>
+                  ))}
+               </div>
+
+               <div className="mt-8 flex justify-end">
+                  <button title="Analyze subsequent business cycles" className="flex items-center gap-2 px-6 py-2.5 bg-[#003317]/5 hover:bg-[#003317]/10 text-[#003317] text-[11px] font-black uppercase tracking-widest rounded-2xl transition-all group">
+                     Next
+                     <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
+                  </button>
+               </div>
             </div>
          </div>
       </div>
-    </div>
-  );
+   );
 };
 
 export default StoreDashboard;
diff --git a/ordering_site/src/contexts/AuthContext.tsx b/ordering_site/src/contexts/AuthContext.tsx
index c3e275b2..800b333f 100644
--- a/ordering_site/src/contexts/AuthContext.tsx
+++ b/ordering_site/src/contexts/AuthContext.tsx
@@ -21,13 +21,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const [user, setUser] = useState<User | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    const savedUser = localStorage.getItem('user');
-    if (savedUser) {
-      setUser(JSON.parse(savedUser));
-    }
-    setIsLoading(false);
-  }, []);
 
   const checkUserExists = async (mobileNumber: string) => {
     try {
@@ -157,11 +150,12 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
-  const refreshUser = async () => {
-    if (!user) return;
+  const refreshUser = async (userOverride?: User | null) => {
+    const targetUser = userOverride || user;
+    if (!targetUser) return;
     try {
       const token = localStorage.getItem('token');
-      const response = await fetch(`${API_BASE_URL}/user/${user.mobileNumber}`, { 
+      const response = await fetch(`${API_BASE_URL}/user/${targetUser.mobileNumber}`, {
         cache: 'no-store',
         headers: {
           ...(token ? { 'Authorization': `Bearer ${token}` } : {})
@@ -177,10 +171,14 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
           isSuspended: data.isSuspended || data.suspended,
           ritzTokenBalance: data.ritzTokenBalance
         };
-        
+
         // Update state and localStorage
-        setUser(updatedUser);
-        localStorage.setItem('user', JSON.stringify(updatedUser));
+        if (updatedUser.isSuspended) {
+          logout();
+        } else {
+          setUser(updatedUser);
+          localStorage.setItem('user', JSON.stringify(updatedUser));
+        }
       } else if (response.status === 404 || response.status === 401 || response.status === 403) {
         logout();
       }
@@ -189,6 +187,24 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
+  useEffect(() => {
+    const initAuth = async () => {
+      try {
+        const savedUser = localStorage.getItem('user');
+        if (savedUser) {
+          const parsedUser = JSON.parse(savedUser);
+          setUser(parsedUser);
+          await refreshUser(parsedUser);
+        }
+      } catch (error) {
+        console.error('Error during initial auth load:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    initAuth();
+  }, []);
+
   // Background status and balance sync
   useEffect(() => {
     if (!user) return;