From 9ec4a32c17fcbbbd32efee024494f4de123d2971 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 12:19:08 -0500
Subject: [PATCH 01/27] Centralize env var gathering for backend

---
 python-backend/localmart_backend/config.py |  8 ++++++++
 python-backend/localmart_backend/main.py   | 11 ++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 python-backend/localmart_backend/config.py

diff --git a/python-backend/localmart_backend/config.py b/python-backend/localmart_backend/config.py
new file mode 100644
index 0000000..cba1912
--- /dev/null
+++ b/python-backend/localmart_backend/config.py
@@ -0,0 +1,8 @@
+import os
+
+class Config:
+    UBER_CLIENT_ID = os.getenv('LOCALMART_UBER_DIRECT_CLIENT_ID')
+    UBER_CLIENT_SECRET = os.getenv('LOCALMART_UBER_DIRECT_CLIENT_SECRET')
+    UBER_CUSTOMER_ID = os.getenv('LOCALMART_UBER_DIRECT_CUSTOMER_ID')
+    STRIPE_SECRET_KEY = os.getenv('STRIPE_SECRET_KEY')
+    STRIPE_WEBHOOK_SECRET = os.getenv('STRIPE_WEBHOOK_SECRET') 
\ No newline at end of file
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index 7568a0e..7c20664 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -15,6 +15,7 @@
 
 from .uber_direct import UberDirectClient
 from .pocketbase_service import PocketBaseService
+from .config import Config
 
 # Initialize logging
 logging.basicConfig(level=logging.INFO)
@@ -26,9 +27,9 @@
 pb_service = PocketBaseService(POCKETBASE_URL)
 
 # Get Uber Direct credentials from environment
-UBER_CUSTOMER_ID = os.getenv('LOCALMART_UBER_DIRECT_CUSTOMER_ID')
-UBER_CLIENT_ID = os.getenv('LOCALMART_UBER_DIRECT_CLIENT_ID')
-UBER_CLIENT_SECRET = os.getenv('LOCALMART_UBER_DIRECT_CLIENT_SECRET')
+UBER_CUSTOMER_ID = Config.UBER_CUSTOMER_ID
+UBER_CLIENT_ID = Config.UBER_CLIENT_ID
+UBER_CLIENT_SECRET = Config.UBER_CLIENT_SECRET
 
 # Initialize Uber Direct client
 uber_client = UberDirectClient(UBER_CUSTOMER_ID, UBER_CLIENT_ID, UBER_CLIENT_SECRET)
@@ -37,10 +38,10 @@
 active_deliveries: Set[str] = set()
 
 # Initialize Stripe
-stripe.api_key = os.getenv('STRIPE_SECRET_KEY')
+stripe.api_key = Config.STRIPE_SECRET_KEY
 
 # Initialize Stripe webhook secret
-STRIPE_WEBHOOK_SECRET = os.getenv('STRIPE_WEBHOOK_SECRET')
+STRIPE_WEBHOOK_SECRET = Config.STRIPE_WEBHOOK_SECRET
 
 @contextmanager
 def user_auth_context(token: str):

From 7a55167dc9c1be59836f7bc6426ac80e1cd21d74 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 17:26:20 -0500
Subject: [PATCH 02/27] Allow admins to get orders/users

---
 .../1739303000_updated_users_add_roles.js     | 30 +++++++++++++++++++
 .../1739303001_updated_users_rules.js         | 20 +++++++++++++
 .../1739303002_updated_orders_rules.js        | 30 +++++++++++++++++++
 db/pb_migrations/1739826655_updated_orders.js | 22 ++++++++++++++
 db/pb_migrations/1739830958_updated_users.js  | 22 ++++++++++++++
 python-backend/localmart_backend/main.py      | 13 ++++++--
 6 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 db/pb_migrations/1739303000_updated_users_add_roles.js
 create mode 100644 db/pb_migrations/1739303001_updated_users_rules.js
 create mode 100644 db/pb_migrations/1739303002_updated_orders_rules.js
 create mode 100644 db/pb_migrations/1739826655_updated_orders.js
 create mode 100644 db/pb_migrations/1739830958_updated_users.js

diff --git a/db/pb_migrations/1739303000_updated_users_add_roles.js b/db/pb_migrations/1739303000_updated_users_add_roles.js
new file mode 100644
index 0000000..cc86b31
--- /dev/null
+++ b/db/pb_migrations/1739303000_updated_users_add_roles.js
@@ -0,0 +1,30 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_");
+
+  // add roles field
+  collection.fields.addAt(0, new Field({
+    "system": false,
+    "id": "roles",
+    "name": "roles",
+    "type": "select",
+    "required": false,
+    "presentable": false,
+    "unique": false,
+    "maxSelect": 3,
+    "values": [
+      "admin",
+      "delivery",
+      "vendor"
+    ]
+  }));
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_");
+
+  // remove roles field
+  collection.fields.removeById("roles");
+
+  return app.save(collection);
+}); 
\ No newline at end of file
diff --git a/db/pb_migrations/1739303001_updated_users_rules.js b/db/pb_migrations/1739303001_updated_users_rules.js
new file mode 100644
index 0000000..f41f795
--- /dev/null
+++ b/db/pb_migrations/1739303001_updated_users_rules.js
@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_");
+
+  // Update view rule to allow admin users to view all user data
+  collection.viewRule = '@request.auth.roles ?= "admin" || @request.auth.id = id';
+
+  // Update list rule to allow admin users to list all users
+  collection.listRule = '@request.auth.roles ?= "admin" || @request.auth.id = id';
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_");
+
+  // Revert to default rules
+  collection.viewRule = '@request.auth.id = id';
+  collection.listRule = '@request.auth.id = id';
+
+  return app.save(collection);
+}); 
\ No newline at end of file
diff --git a/db/pb_migrations/1739303002_updated_orders_rules.js b/db/pb_migrations/1739303002_updated_orders_rules.js
new file mode 100644
index 0000000..4698cfd
--- /dev/null
+++ b/db/pb_migrations/1739303002_updated_orders_rules.js
@@ -0,0 +1,30 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("orders");
+
+  // Update view rule to allow admin users to view all orders and their expanded data
+  collection.viewRule = '@request.auth.roles ?= "admin" || user.id = @request.auth.id';
+
+  // Update list rule to allow admin users to list all orders
+  collection.listRule = '@request.auth.roles ?= "admin" || user.id = @request.auth.id';
+
+  // Update expand rule to allow admin users to expand all relations
+  collection.options = {
+    ...collection.options,
+    expandRule: '@request.auth.roles ?= "admin" || user.id = @request.auth.id'
+  };
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("orders");
+
+  // Revert to default rules
+  collection.viewRule = 'user.id = @request.auth.id';
+  collection.listRule = 'user.id = @request.auth.id';
+  collection.options = {
+    ...collection.options,
+    expandRule: 'user.id = @request.auth.id'
+  };
+
+  return app.save(collection);
+}); 
\ No newline at end of file
diff --git a/db/pb_migrations/1739826655_updated_orders.js b/db/pb_migrations/1739826655_updated_orders.js
new file mode 100644
index 0000000..bf83abd
--- /dev/null
+++ b/db/pb_migrations/1739826655_updated_orders.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ \"admin\" || user.id = @request.auth.id",
+    "viewRule": "@request.auth.roles ?~ \"admin\" || user.id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?= \"admin\" || user.id = @request.auth.id",
+    "viewRule": "@request.auth.roles ?= \"admin\" || user.id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739830958_updated_users.js b/db/pb_migrations/1739830958_updated_users.js
new file mode 100644
index 0000000..c72c8cd
--- /dev/null
+++ b/db/pb_migrations/1739830958_updated_users.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ \"admin\" || @request.auth.id = id",
+    "viewRule": "@request.auth.roles ?~ \"admin\" || @request.auth.id = id"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?= \"admin\" || @request.auth.id = id",
+    "viewRule": "@request.auth.roles ?= \"admin\" || @request.auth.id = id"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index 7c20664..f36ffe2 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -311,12 +311,16 @@ async def get_user_orders(request: Request):
     decoded_token = decode_jwt(token)
     user_id = decoded_token['id']
 
+    # if user is admin, then filter by user, otherwise don't
+    user = pb_service.get_user_from_token(token)
+    is_admin = 'admin' in (getattr(user, 'roles', []) or [])
+
     with user_auth_context(token):
         # Get user's orders
         orders = pb_service.get_list(
             'orders',
             query_params={
-                "filter": f'user = "{user_id}"',
+                "filter": f'user = "{user_id}"' if not is_admin else '',
                 "sort": "-created",
                 "expand": "order_items(order).store_item,order_items(order).store_item.store,user"
             }
@@ -358,8 +362,13 @@ async def get_user_orders(request: Request):
                     'price': item.price_at_time
                 })
 
-            # Get user info from expanded user record
             user = order.expand.get('user', {})
+
+            if not user:
+                print(f"Order: {order}")
+                print(f"Order expand: {order.expand}")
+
+            # Get user info from expanded user record
             customer_name = f"{user.first_name} {user.last_name}".strip() if user else "Unknown"
             
             # Format user's address

From 08e14c7161b859965ff10b338077361677d5c950 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 17:31:25 -0500
Subject: [PATCH 03/27] Only show the admin links to admin users

---
 frontend/src/app/contexts/auth.tsx       | 11 ++++++++
 frontend/src/components/Header.tsx       | 35 ++++++++++++++----------
 python-backend/localmart_backend/main.py |  2 ++
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/contexts/auth.tsx b/frontend/src/app/contexts/auth.tsx
index 59c74b8..e235686 100644
--- a/frontend/src/app/contexts/auth.tsx
+++ b/frontend/src/app/contexts/auth.tsx
@@ -8,6 +8,7 @@ interface User {
   email: string;
   name: string;
   token: string;
+  roles: string[];
 }
 
 interface AuthContextType {
@@ -44,12 +45,16 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     }
 
     const data = await response.json();
+    console.log('Login response data:', data);  // Debug log
+    console.log('User roles from backend:', data.user.roles);  // Debug log
     const userData = {
       id: data.user.id,
       email: data.user.email,
       name: `${data.user.first_name} ${data.user.last_name}`.trim(),
       token: data.token,
+      roles: data.user.roles || [],
     };
+    console.log('Final user data with roles:', userData);  // Debug log
 
     setUser(userData);
     localStorage.setItem('auth', JSON.stringify(userData));
@@ -84,6 +89,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       email: data.user.email,
       name: `${data.user.first_name} ${data.user.last_name}`.trim(),
       token: data.token,
+      roles: data.user.roles || [],
     };
 
     setUser(userData);
@@ -108,4 +114,9 @@ export function useAuth() {
     throw new Error('useAuth must be used within an AuthProvider');
   }
   return context;
+}
+
+export function useIsAdmin() {
+  const { user } = useAuth();
+  return user?.roles?.includes('admin') || false;
 } 
\ No newline at end of file
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index b4f7d0e..19f5d82 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useAuth } from '../app/contexts/auth'
+import { useAuth, useIsAdmin } from '../app/contexts/auth'
 import { useCart } from '../app/contexts/cart'
 import Link from 'next/link'
 import { useState, useEffect } from 'react'
@@ -11,6 +11,7 @@ import { config } from '@/config'
 
 export default function Header() {
   const { user, logout } = useAuth()
+  const isAdmin = useIsAdmin()
   const { totalItems } = useCart()
   const [showOrderHistory, setShowOrderHistory] = useState(false)
   const [showCart, setShowCart] = useState(false)
@@ -82,20 +83,24 @@ export default function Header() {
           </Link>
           {user && (
             <>
-              <a
-                href={`${config.pocketbaseUrl}/_/`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-white/80 hover:text-white transition-colors ml-2"
-              >
-                database
-              </a>
-              <Link
-                href="/orders"
-                className="text-sm text-white/80 hover:text-white transition-colors ml-2"
-              >
-                orders
-              </Link>
+              {isAdmin && (
+                <>
+                  <a
+                    href={`${config.pocketbaseUrl}/_/`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-white/80 hover:text-white transition-colors ml-2"
+                  >
+                    database
+                  </a>
+                  <Link
+                    href="/orders"
+                    className="text-sm text-white/80 hover:text-white transition-colors ml-2"
+                  >
+                    orders
+                  </Link>
+                </>
+              )}
             </>
           )}
         </div>
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index f36ffe2..bf4c226 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -474,6 +474,7 @@ async def signup(user: UserSignup):
                 "email": auth_data.record.email,
                 "first_name": auth_data.record.first_name,
                 "last_name": auth_data.record.last_name,
+                "roles": getattr(auth_data.record, 'roles', []),
             }
         }
     except Exception as e:
@@ -501,6 +502,7 @@ async def login(user: UserLogin):
                 "email": auth_data.record.email,
                 "first_name": auth_data.record.first_name,
                 "last_name": auth_data.record.last_name,
+                "roles": getattr(auth_data.record, 'roles', []),
             }
         }
     except Exception as e:

From b59777d1636580452d6d2a0a2eece3571f79373e Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 18:11:46 -0500
Subject: [PATCH 04/27] Add a basic vendor dashboard

---
 .../1739303004_created_store_roles.js         |  78 +++++
 frontend/src/app/hooks/useStoreRoles.ts       |  56 ++++
 frontend/src/app/store/[id]/StoreContent.tsx  |  16 +-
 .../src/app/store/[id]/dashboard/page.tsx     | 307 ++++++++++++++++++
 frontend/src/components/Header.tsx            |   2 +-
 python-backend/localmart_backend/main.py      | 149 ++++++++-
 6 files changed, 603 insertions(+), 5 deletions(-)
 create mode 100644 db/pb_migrations/1739303004_created_store_roles.js
 create mode 100644 frontend/src/app/hooks/useStoreRoles.ts
 create mode 100644 frontend/src/app/store/[id]/dashboard/page.tsx

diff --git a/db/pb_migrations/1739303004_created_store_roles.js b/db/pb_migrations/1739303004_created_store_roles.js
new file mode 100644
index 0000000..2129ea1
--- /dev/null
+++ b/db/pb_migrations/1739303004_created_store_roles.js
@@ -0,0 +1,78 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "id": "store_roles",
+    "name": "store_roles",
+    "type": "base",
+    "system": false,
+    "fields": [
+      {
+        "id": "user_relation",
+        "name": "user",
+        "type": "relation",
+        "required": true,
+        "presentable": false,
+        "system": false,
+        "cascadeDelete": true,
+        "collectionId": "_pb_users_auth_",
+        "maxSelect": 1,
+        "minSelect": 1
+      },
+      {
+        "id": "store_relation",
+        "name": "store",
+        "type": "relation",
+        "required": true,
+        "presentable": false,
+        "system": false,
+        "cascadeDelete": true,
+        "collectionId": "pbc_3800236418",
+        "maxSelect": 1,
+        "minSelect": 1
+      },
+      {
+        "id": "store_role",
+        "name": "role",
+        "type": "select",
+        "required": true,
+        "presentable": false,
+        "system": false,
+        "values": ["admin", "staff"],
+        "maxSelect": 1
+      },
+      {
+        "id": "created",
+        "name": "created",
+        "type": "autodate",
+        "required": false,
+        "presentable": false,
+        "system": false,
+        "hidden": false,
+        "onCreate": true,
+        "onUpdate": false
+      },
+      {
+        "id": "updated",
+        "name": "updated",
+        "type": "autodate",
+        "required": false,
+        "presentable": false,
+        "system": false,
+        "hidden": false,
+        "onCreate": true,
+        "onUpdate": true
+      }
+    ],
+    "indexes": ["CREATE UNIQUE INDEX idx_unique_user_store ON store_roles (user, store)"],
+    "listRule": "@request.auth.id != ''",
+    "viewRule": "@request.auth.id != ''",
+    "createRule": "@request.auth.roles.admin = true",
+    "updateRule": "@request.auth.roles.admin = true",
+    "deleteRule": "@request.auth.roles.admin = true"
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("store_roles");
+  return app.delete(collection);
+}); 
\ No newline at end of file
diff --git a/frontend/src/app/hooks/useStoreRoles.ts b/frontend/src/app/hooks/useStoreRoles.ts
new file mode 100644
index 0000000..6212777
--- /dev/null
+++ b/frontend/src/app/hooks/useStoreRoles.ts
@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '../contexts/auth';
+import { config } from '@/config';
+
+export function useStoreRoles(storeId: string) {
+  const { user } = useAuth();
+  const [roles, setRoles] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchRoles = async () => {
+      if (!user?.token) {
+        return;
+      }
+
+      try {
+        const response = await fetch(
+          `${config.apiUrl}/api/v0/stores/${storeId}/roles`,
+          {
+            headers: {
+              'Authorization': `Bearer ${user.token}`
+            }
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch store roles');
+        }
+
+        const data = await response.json();
+        setRoles(data.roles);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch store roles');
+        setRoles([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRoles();
+  }, [user, storeId]);
+
+  const isAdmin = roles.includes('admin');
+  const isStaff = roles.includes('staff');
+
+  console.log('roles', roles);
+
+  return {
+    roles,
+    isAdmin,
+    isStaff,
+    loading,
+    error
+  };
+} 
\ No newline at end of file
diff --git a/frontend/src/app/store/[id]/StoreContent.tsx b/frontend/src/app/store/[id]/StoreContent.tsx
index 42ec788..4063772 100644
--- a/frontend/src/app/store/[id]/StoreContent.tsx
+++ b/frontend/src/app/store/[id]/StoreContent.tsx
@@ -7,6 +7,8 @@ import { FaInstagram, FaFacebook, FaXTwitter } from 'react-icons/fa6';
 import { SiBluesky } from 'react-icons/si';
 import { ClockIcon, MapPinIcon } from '@heroicons/react/24/outline';
 import { config } from '@/config';
+import { useStoreRoles } from '@/app/hooks/useStoreRoles';
+import Link from 'next/link';
 
 interface Store {
   id: string;
@@ -30,6 +32,7 @@ interface StoreItem {
 
 export default function StoreContent({ storeId }: { storeId: string }) {
   const { addItem } = useCart();
+  const { isAdmin } = useStoreRoles(storeId);
   const [store, setStore] = useState<Store | null>(null);
   const [items, setItems] = useState<StoreItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -105,15 +108,24 @@ export default function StoreContent({ storeId }: { storeId: string }) {
   return (
     <main className="min-h-[calc(100vh-64px)] bg-[#F5F2EB]">
       {/* Hero Section */}
-      <div className="bg-white/50 backdrop-blur-sm border-b pt-16">
+      <div className="bg-white/50 backdrop-blur-sm border-b pt-24">
         <div className="h-32 bg-gradient-to-r from-[#2A9D8F]/10 to-[#2A9D8F]/5 relative overflow-hidden">
           <div className="absolute inset-0 bg-[url('/pattern-bg.png')] opacity-5"></div>
           <div className="container mx-auto px-4 h-full">
             <div className="flex flex-col md:flex-row md:items-center md:justify-between h-full py-6">
               {/* Store Name and Type */}
-              <div>
+              <div className="relative z-10">
                 <h1 className="text-2xl font-bold text-[#2D3748]">{store.name}</h1>
                 <p className="text-[#4A5568] text-sm">Local market & grocery</p>
+                {/* Add dashboard link for store admins */}
+                {isAdmin && (
+                  <Link
+                    href={`/store/${storeId}/dashboard`}
+                    className="inline-flex items-center mt-2 text-sm text-[#2A9D8F] hover:text-[#40B4A6] transition-colors"
+                  >
+                    View Dashboard
+                  </Link>
+                )}
                 {/* Social Links */}
                 <div className="flex gap-3 mt-3">
                   <a
diff --git a/frontend/src/app/store/[id]/dashboard/page.tsx b/frontend/src/app/store/[id]/dashboard/page.tsx
new file mode 100644
index 0000000..93c4b8e
--- /dev/null
+++ b/frontend/src/app/store/[id]/dashboard/page.tsx
@@ -0,0 +1,307 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/app/contexts/auth';
+import { useStoreRoles } from '@/app/hooks/useStoreRoles';
+import { toast } from 'react-hot-toast';
+import { config } from '@/config';
+import { useRouter } from 'next/navigation';
+import { use } from 'react';
+
+interface OrderItem {
+  id: string;
+  name: string;
+  quantity: number;
+  price: number;
+}
+
+interface Store {
+  store: {
+    id: string;
+    name: string;
+  };
+  items: OrderItem[];
+}
+
+interface Order {
+  id: string;
+  created: string;
+  status: string;
+  payment_status: string;
+  delivery_fee: number;
+  total_amount: number;
+  customer_name: string;
+  customer_phone?: string;
+  delivery_address: {
+    street_address: string[];
+    city: string;
+    state: string;
+    zip_code: string;
+    country: string;
+  } | null;
+  stores: Store[];
+}
+
+const statusColors = {
+  pending: 'bg-yellow-100 text-yellow-800',
+  confirmed: 'bg-blue-100 text-blue-800',
+  picked_up: 'bg-purple-100 text-purple-800',
+  delivered: 'bg-green-100 text-green-800',
+  cancelled: 'bg-red-100 text-red-800'
+};
+
+const statusLabels = {
+  pending: 'Pending',
+  confirmed: 'Confirmed',
+  picked_up: 'Picked Up',
+  delivered: 'Delivered',
+  cancelled: 'Cancelled'
+};
+
+const paymentStatusColors = {
+  pending: 'bg-yellow-100 text-yellow-800',
+  processing: 'bg-blue-100 text-blue-800',
+  succeeded: 'bg-green-100 text-green-800',
+  failed: 'bg-red-100 text-red-800',
+  refunded: 'bg-gray-100 text-gray-800'
+};
+
+const paymentStatusLabels = {
+  pending: 'Payment Pending',
+  processing: 'Processing',
+  succeeded: 'Paid',
+  failed: 'Failed',
+  refunded: 'Refunded'
+};
+
+function formatDateTime(isoString: string) {
+  return new Date(isoString).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true
+  });
+}
+
+export default function StoreDashboard({ params }: { params: Promise<{ id: string }> }) {
+  const { id: storeId } = use(params);
+  const { user } = useAuth();
+  const { isAdmin, loading: rolesLoading } = useStoreRoles(storeId);
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    // Only redirect if we're done loading roles, have a user, and we're not an admin
+    if (!rolesLoading && user && !isAdmin) {
+      router.push(`/store/${storeId}`);
+      toast.error("You don't have permission to access this page");
+    }
+  }, [isAdmin, rolesLoading, router, storeId, user]);
+
+  useEffect(() => {
+    const fetchOrders = async () => {
+      if (!user?.token || rolesLoading) return; // Don't fetch if still loading roles
+
+      try {
+        const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/orders`, {
+          headers: {
+            'Authorization': `Bearer ${user.token}`,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch orders');
+        }
+
+        const data = await response.json();
+        setOrders(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch orders');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (isAdmin) {
+      fetchOrders();
+    }
+  }, [user, storeId, isAdmin, rolesLoading]);
+
+  const updateOrderStatus = async (orderId: string, newStatus: string) => {
+    try {
+      const response = await fetch(`${config.apiUrl}/api/v0/orders/${orderId}/status`, {
+        method: 'PATCH',
+        headers: {
+          'Authorization': `Bearer ${user?.token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ status: newStatus })
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.detail || 'Failed to update order status');
+      }
+
+      setOrders(currentOrders =>
+        currentOrders.map(order =>
+          order.id === orderId
+            ? { ...order, status: newStatus }
+            : order
+        )
+      );
+
+      toast.success('Order status updated');
+    } catch (err) {
+      console.error('Status update error:', err);
+      toast.error('Failed to update order status');
+    }
+  };
+
+  if (rolesLoading || loading) {
+    return (
+      <main className="min-h-screen bg-[#F5F2EB] pt-24">
+        <div className="container mx-auto px-4">
+          <div className="animate-pulse">
+            <div className="h-8 bg-white/50 rounded w-1/4 mb-8"></div>
+            <div className="space-y-4">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="h-16 bg-white/50 rounded-lg"></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  if (error) {
+    return (
+      <main className="min-h-screen bg-[#F5F2EB] pt-24">
+        <div className="container mx-auto px-4">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-[#2D3748]">Error</h2>
+            <p className="mt-2 text-[#4A5568]">{error}</p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-[#F5F2EB] pt-24">
+      <div className="container mx-auto px-4">
+        <h1 className="text-3xl font-bold text-[#2D3748] mb-8">Store Orders Dashboard</h1>
+        
+        <div className="bg-white/80 backdrop-blur-sm rounded-lg shadow-sm overflow-hidden">
+          <table className="min-w-full divide-y divide-[#2A9D8F]/10">
+            <thead className="bg-[#2A9D8F]/5">
+              <tr>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Order ID
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Date & Time
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Customer
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Phone
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Delivery Address
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Status
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Payment
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Items
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-[#2D3748] uppercase tracking-wider">
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-[#2A9D8F]/10">
+              {orders.map((order) => (
+                <tr key={order.id}>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
+                    #{order.id.slice(-6)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#4A5568]">
+                    {formatDateTime(order.created)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
+                    {order.customer_name}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#4A5568]">
+                    {order.customer_phone || '-'}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-[#4A5568]">
+                    {order.delivery_address ? (
+                      <>
+                        <div>
+                          {order.delivery_address.street_address.filter(Boolean).join(', ')}
+                        </div>
+                        <div>
+                          {order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}
+                        </div>
+                      </>
+                    ) : (
+                      <span className="text-gray-400 italic">No address available</span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="flex items-center gap-2">
+                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColors[order.status as keyof typeof statusColors]}`}>
+                        {statusLabels[order.status as keyof typeof statusLabels]}
+                      </span>
+                      <select
+                        value={order.status}
+                        onChange={(e) => updateOrderStatus(order.id, e.target.value)}
+                        className="text-sm border-[#2A9D8F]/20 rounded-md focus:ring-[#2A9D8F] focus:border-[#2A9D8F]"
+                      >
+                        {Object.entries(statusLabels).map(([value, label]) => (
+                          <option key={value} value={value}>{label}</option>
+                        ))}
+                      </select>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${paymentStatusColors[order.payment_status as keyof typeof paymentStatusColors]}`}>
+                      {paymentStatusLabels[order.payment_status as keyof typeof paymentStatusLabels]}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="text-sm text-[#4A5568]">
+                      {order.stores.map((store) => (
+                        <div key={store.store.id} className="mb-2 last:mb-0">
+                          {store.items.map((item) => (
+                            <div key={item.id} className="ml-4">
+                              {item.quantity}x {item.name} (${item.price.toFixed(2)})
+                            </div>
+                          ))}
+                        </div>
+                      ))}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
+                    ${order.total_amount.toFixed(2)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </main>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 19f5d82..04b706b 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -74,7 +74,7 @@ export default function Header() {
   }
 
   return (
-    <header className="fixed top-0 left-0 right-0 bg-[#2A9D8F] text-white p-4 shadow-md z-50">
+    <header className="fixed top-0 left-0 right-0 bg-[#2A9D8F] text-white p-4 shadow-md z-30">
       <div className="max-w-6xl mx-auto flex justify-between items-center">
         <div className="flex items-center gap-2">
           <Link href="/" className="flex items-center gap-2 group">
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index bf4c226..5932599 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -322,7 +322,7 @@ async def get_user_orders(request: Request):
             query_params={
                 "filter": f'user = "{user_id}"' if not is_admin else '',
                 "sort": "-created",
-                "expand": "order_items(order).store_item,order_items(order).store_item.store,user"
+                "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store,user"
             }
         )
 
@@ -333,7 +333,7 @@ async def get_user_orders(request: Request):
             stores_dict = {}
 
             # Get all order items for this order
-            order_items = order.expand.get('order_items(order)', [])
+            order_items = order.expand.get('order_items_via_order', [])
 
             for item in order_items:
                 if not hasattr(item, 'expand') or not item.expand.get('store_item'):
@@ -841,3 +841,148 @@ async def stripe_webhook(request: Request):
             logger.error(json.dumps(payment_intent, indent=2))
 
     return {"status": "success"}
+
+@app.get("/api/v0/stores/{store_id}/roles", response_model=Dict)
+async def get_store_roles(store_id: str, request: Request):
+    """Get the current user's roles for a specific store"""
+    token = get_token_from_request(request)
+    decoded_token = decode_jwt(token)
+    user_id = decoded_token['id']
+
+    with user_auth_context(token):
+        try:
+            # Check if user is a global admin first
+            user = pb_service.get_user_from_token(token)
+            if 'admin' in (getattr(user, 'roles', []) or []):
+                return {"roles": ["admin"]}
+
+            # Get store roles for this user and store
+            store_roles = pb_service.get_list(
+                'store_roles',
+                query_params={
+                    "filter": f'user = "{user_id}" && store = "{store_id}"',
+                    "expand": "role"
+                }
+            )
+            
+            roles = [sr.role for sr in store_roles.items]
+            return {"roles": roles}
+        except Exception as e:
+            logger.error(f"Error fetching store roles: {str(e)}")
+            raise HTTPException(
+                status_code=500,
+                detail=f"Failed to fetch store roles: {str(e)}"
+            )
+
+@app.get("/api/v0/stores/{store_id}/orders", response_model=List[Dict])
+async def get_store_orders(store_id: str, request: Request):
+    """Get orders for a specific store (requires store admin role)"""
+    token = get_token_from_request(request)
+    decoded_token = decode_jwt(token)
+    user_id = decoded_token['id']
+
+    with user_auth_context(token):
+        try:
+            # Check if user is a global admin or store admin
+            user = pb_service.get_user_from_token(token)
+            is_global_admin = 'admin' in (getattr(user, 'roles', []) or [])
+            
+            if not is_global_admin:
+                # Check store roles
+                store_roles = pb_service.get_list(
+                    'store_roles',
+                    query_params={
+                        "filter": f'user = "{user_id}" && store = "{store_id}"'
+                    }
+                )
+                
+                if not any(sr.role == 'admin' for sr in store_roles.items):
+                    raise HTTPException(
+                        status_code=403,
+                        detail="You don't have permission to view this store's orders"
+                    )
+
+            # Get all orders with expanded order items and store items
+            orders = pb_service.get_list(
+                'orders',
+                query_params={
+                    "sort": "-created",
+                    "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store,user"
+                }
+            )
+
+            # Format orders for response
+            formatted_orders = []
+            for order in orders.items:
+                stores_dict = {}
+                order_items = order.expand.get('order_items_via_order', [])
+
+                # Check if any order items belong to this store
+                has_store_items = False
+                for item in order_items:
+                    if not hasattr(item, 'expand') or not item.expand.get('store_item'):
+                        continue
+
+                    store_item = item.expand['store_item']
+                    if not hasattr(store_item, 'expand') or not store_item.expand.get('store'):
+                        continue
+
+                    store = store_item.expand['store']
+                    if store.id != store_id:  # Skip items not from this store
+                        continue
+
+                    has_store_items = True
+                    store_id_key = store.id
+                    if store_id_key not in stores_dict:
+                        stores_dict[store_id_key] = {
+                            'store': {
+                                'id': store.id,
+                                'name': store.name
+                            },
+                            'items': []
+                        }
+
+                    stores_dict[store_id_key]['items'].append({
+                        'id': item.id,
+                        'name': store_item.name,
+                        'quantity': item.quantity,
+                        'price': item.price_at_time
+                    })
+
+                # Only include orders that have items from this store
+                if has_store_items:
+                    user = order.expand.get('user', {})
+                    customer_name = f"{user.first_name} {user.last_name}".strip() if user else "Unknown"
+                    
+                    delivery_address = {
+                        'street_address': [user.street_1] + ([user.street_2] if user.street_2 else []),
+                        'city': user.city,
+                        'state': user.state,
+                        'zip_code': user.zip,
+                        'country': 'US'
+                    } if user else None
+
+                    formatted_order = {
+                        'id': order.id,
+                        'created': order.created,
+                        'status': order.status,
+                        'payment_status': order.payment_status,
+                        'delivery_fee': order.delivery_fee,
+                        'total_amount': order.total_amount,
+                        'tax_amount': order.tax_amount,
+                        'customer_name': customer_name,
+                        'customer_phone': getattr(user, 'phone_number', None),
+                        'delivery_address': delivery_address,
+                        'stores': list(stores_dict.values())
+                    }
+                    formatted_orders.append(formatted_order)
+
+            return formatted_orders
+        except HTTPException:
+            raise
+        except Exception as e:
+            logger.error(f"Error fetching store orders: {str(e)}")
+            raise HTTPException(
+                status_code=500,
+                detail=f"Failed to fetch store orders: {str(e)}"
+            )

From d2a8676e041d6ab303457edfd306663dc4dd8a79 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 18:16:46 -0500
Subject: [PATCH 05/27] Update cart modal to show order cost details

---
 frontend/src/components/CartModal.tsx | 98 +++++++++++++++++++++------
 1 file changed, 79 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/CartModal.tsx b/frontend/src/components/CartModal.tsx
index d298338..6e28381 100644
--- a/frontend/src/components/CartModal.tsx
+++ b/frontend/src/components/CartModal.tsx
@@ -34,6 +34,13 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
   const [isCheckingOut, setIsCheckingOut] = useState(false);
   const [savedCards, setSavedCards] = useState<SavedCard[]>([]);
   const [selectedCardId, setSelectedCardId] = useState<string>('');
+  const [showCheckoutConfirm, setShowCheckoutConfirm] = useState(false);
+  const [orderSummary, setOrderSummary] = useState<{
+    subtotalAmount: number;
+    taxAmount: number;
+    deliveryFee: number;
+    totalAmount: number;
+  } | null>(null);
 
   // Fetch store details when items change
   useEffect(() => {
@@ -103,7 +110,7 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
     }
   }, [isOpen, user]);
 
-  const handleCheckout = async () => {
+  const handleCheckoutClick = () => {
     if (!user) {
       toast.error('Please log in to checkout');
       return;
@@ -119,16 +126,30 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
       return;
     }
 
+    // Calculate amounts
+    const subtotalAmount = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+    const taxRate = 0.08875; // Example tax rate (8.875%)
+    const taxAmount = subtotalAmount * taxRate;
+    const deliveryFee = 5.99; // Example delivery fee
+    const totalAmount = subtotalAmount + taxAmount + deliveryFee;
+
+    setOrderSummary({
+      subtotalAmount,
+      taxAmount,
+      deliveryFee,
+      totalAmount
+    });
+    setShowCheckoutConfirm(true);
+  };
+
+  const handleCheckout = async () => {
+    if (!user || !store || !selectedCardId || !orderSummary) {
+      return;
+    }
+
     setIsCheckingOut(true);
 
     try {
-      // Calculate amounts
-      const subtotalAmount = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
-      const taxRate = 0.08875; // Example tax rate (8.875%)
-      const taxAmount = subtotalAmount * taxRate;
-      const deliveryFee = 5.99; // Example delivery fee
-      const totalAmount = subtotalAmount + taxAmount + deliveryFee;
-
       // Create order payload
       const orderData = {
         user_id: user.id,
@@ -138,10 +159,10 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
           quantity: item.quantity,
           price: item.price
         })),
-        subtotal_amount: subtotalAmount,
-        tax_amount: taxAmount,
-        delivery_fee: deliveryFee,
-        total_amount: totalAmount,
+        subtotal_amount: orderSummary.subtotalAmount,
+        tax_amount: orderSummary.taxAmount,
+        delivery_fee: orderSummary.deliveryFee,
+        total_amount: orderSummary.totalAmount,
         payment_method_id: selectedCardId,
         delivery_address: {
           street_address: ["123 Main St"], // TODO: Get from user input
@@ -182,6 +203,7 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
       toast.error('Failed to place order. Please try again.');
     } finally {
       setIsCheckingOut(false);
+      setShowCheckoutConfirm(false);
     }
   };
 
@@ -321,13 +343,51 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
                         Shipping and taxes will be calculated at checkout.
                       </p>
                       <div className="mt-6">
-                        <button
-                          onClick={handleCheckout}
-                          disabled={isCheckingOut || items.length === 0 || savedCards.length === 0}
-                          className="w-full flex items-center justify-center rounded-md border border-transparent bg-[#2A9D8F] px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-[#40B4A6] active:bg-[#1E7268] disabled:opacity-50 disabled:cursor-not-allowed"
-                        >
-                          {isCheckingOut ? 'Processing...' : 'Checkout'}
-                        </button>
+                        {showCheckoutConfirm ? (
+                          <div className="space-y-4">
+                            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 space-y-2">
+                              <div className="flex justify-between text-sm text-[#4A5568]">
+                                <span>Subtotal</span>
+                                <span>${orderSummary?.subtotalAmount.toFixed(2)}</span>
+                              </div>
+                              <div className="flex justify-between text-sm text-[#4A5568]">
+                                <span>Tax (8.875%)</span>
+                                <span>${orderSummary?.taxAmount.toFixed(2)}</span>
+                              </div>
+                              <div className="flex justify-between text-sm text-[#4A5568]">
+                                <span>Delivery Fee</span>
+                                <span>${orderSummary?.deliveryFee.toFixed(2)}</span>
+                              </div>
+                              <div className="flex justify-between text-base font-medium text-[#2D3748] pt-2 border-t border-[#2A9D8F]/10">
+                                <span>Total</span>
+                                <span>${orderSummary?.totalAmount.toFixed(2)}</span>
+                              </div>
+                            </div>
+                            <div className="flex gap-3">
+                              <button
+                                onClick={() => setShowCheckoutConfirm(false)}
+                                className="flex-1 rounded-md border border-[#2A9D8F] bg-white px-6 py-3 text-base font-medium text-[#2A9D8F] shadow-sm hover:bg-[#2A9D8F]/5"
+                              >
+                                Back
+                              </button>
+                              <button
+                                onClick={handleCheckout}
+                                disabled={isCheckingOut}
+                                className="flex-1 rounded-md border border-transparent bg-[#2A9D8F] px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-[#40B4A6] active:bg-[#1E7268] disabled:opacity-50 disabled:cursor-not-allowed"
+                              >
+                                {isCheckingOut ? 'Processing...' : 'Submit Order'}
+                              </button>
+                            </div>
+                          </div>
+                        ) : (
+                          <button
+                            onClick={handleCheckoutClick}
+                            disabled={isCheckingOut || items.length === 0 || savedCards.length === 0}
+                            className="w-full flex items-center justify-center rounded-md border border-transparent bg-[#2A9D8F] px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-[#40B4A6] active:bg-[#1E7268] disabled:opacity-50 disabled:cursor-not-allowed"
+                          >
+                            {isCheckingOut ? 'Processing...' : 'Checkout'}
+                          </button>
+                        )}
                       </div>
                     </div>
                   </div>

From 97b93157fb7150c35bae74b5625d31eba150a9e6 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 18:21:24 -0500
Subject: [PATCH 06/27] Reset the checkout modal when focus is lost

---
 frontend/src/components/CartModal.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/components/CartModal.tsx b/frontend/src/components/CartModal.tsx
index 6e28381..46add91 100644
--- a/frontend/src/components/CartModal.tsx
+++ b/frontend/src/components/CartModal.tsx
@@ -42,6 +42,22 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
     totalAmount: number;
   } | null>(null);
 
+  // Reset checkout state when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      setShowCheckoutConfirm(false);
+      setOrderSummary(null);
+      setIsCheckingOut(false);
+    }
+  }, [isOpen]);
+
+  // Reset checkout state when items change
+  useEffect(() => {
+    setShowCheckoutConfirm(false);
+    setOrderSummary(null);
+    setIsCheckingOut(false);
+  }, [items]);
+
   // Fetch store details when items change
   useEffect(() => {
     const fetchStore = async () => {

From ed26548491552a72c2613028548fde8b88e9a185 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 18:31:46 -0500
Subject: [PATCH 07/27] Add metrics to vendor dashboard

---
 .../src/app/store/[id]/dashboard/page.tsx     | 194 ++++++++++++++----
 1 file changed, 152 insertions(+), 42 deletions(-)

diff --git a/frontend/src/app/store/[id]/dashboard/page.tsx b/frontend/src/app/store/[id]/dashboard/page.tsx
index 93c4b8e..af1cae3 100644
--- a/frontend/src/app/store/[id]/dashboard/page.tsx
+++ b/frontend/src/app/store/[id]/dashboard/page.tsx
@@ -7,6 +7,7 @@ import { toast } from 'react-hot-toast';
 import { config } from '@/config';
 import { useRouter } from 'next/navigation';
 import { use } from 'react';
+import { CurrencyDollarIcon, ShoppingBagIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
 
 interface OrderItem {
   id: string;
@@ -85,15 +86,35 @@ function formatDateTime(isoString: string) {
   });
 }
 
+function calculateMetrics(orders: Order[]) {
+  const totalOrders = orders.length;
+  const totalRevenue = orders.reduce((sum, order) => sum + order.total_amount, 0);
+  const pendingOrders = orders.filter(order => order.status === 'pending').length;
+  const avgOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;
+
+  return {
+    totalOrders,
+    totalRevenue,
+    pendingOrders,
+    avgOrderValue
+  };
+}
+
 export default function StoreDashboard({ params }: { params: Promise<{ id: string }> }) {
   const { id: storeId } = use(params);
   const { user } = useAuth();
   const { isAdmin, loading: rolesLoading } = useStoreRoles(storeId);
   const [orders, setOrders] = useState<Order[]>([]);
+  const [filteredOrders, setFilteredOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [store, setStore] = useState<{ name: string } | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [searchTerm, setSearchTerm] = useState('');
   const router = useRouter();
 
+  const metrics = calculateMetrics(orders);
+
   useEffect(() => {
     // Only redirect if we're done loading roles, have a user, and we're not an admin
     if (!rolesLoading && user && !isAdmin) {
@@ -131,36 +152,45 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
     }
   }, [user, storeId, isAdmin, rolesLoading]);
 
-  const updateOrderStatus = async (orderId: string, newStatus: string) => {
-    try {
-      const response = await fetch(`${config.apiUrl}/api/v0/orders/${orderId}/status`, {
-        method: 'PATCH',
-        headers: {
-          'Authorization': `Bearer ${user?.token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ status: newStatus })
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.detail || 'Failed to update order status');
+  // Fetch store details
+  useEffect(() => {
+    const fetchStore = async () => {
+      try {
+        const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}`);
+        if (!response.ok) {
+          throw new Error('Failed to fetch store details');
+        }
+        const data = await response.json();
+        setStore(data);
+      } catch (err) {
+        console.error('Error fetching store:', err);
+        setError(err instanceof Error ? err.message : 'Failed to fetch store details');
       }
+    };
 
-      setOrders(currentOrders =>
-        currentOrders.map(order =>
-          order.id === orderId
-            ? { ...order, status: newStatus }
-            : order
-        )
-      );
+    fetchStore();
+  }, [storeId]);
 
-      toast.success('Order status updated');
-    } catch (err) {
-      console.error('Status update error:', err);
-      toast.error('Failed to update order status');
+  // Filter orders when status filter or search term changes
+  useEffect(() => {
+    let result = [...orders];
+    
+    // Apply status filter
+    if (statusFilter !== 'all') {
+      result = result.filter(order => order.status === statusFilter);
     }
-  };
+    
+    // Apply search filter (on order ID or customer name)
+    if (searchTerm) {
+      const lowercaseSearch = searchTerm.toLowerCase();
+      result = result.filter(order => 
+        order.id.toLowerCase().includes(lowercaseSearch) ||
+        order.customer_name.toLowerCase().includes(lowercaseSearch)
+      );
+    }
+    
+    setFilteredOrders(result);
+  }, [orders, statusFilter, searchTerm]);
 
   if (rolesLoading || loading) {
     return (
@@ -195,8 +225,99 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
   return (
     <main className="min-h-screen bg-[#F5F2EB] pt-24">
       <div className="container mx-auto px-4">
-        <h1 className="text-3xl font-bold text-[#2D3748] mb-8">Store Orders Dashboard</h1>
+        {/* Header Section */}
+        <div className="mb-12">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
+            <div>
+              {store && (
+                <h1 className="text-4xl font-bold text-[#2D3748] mb-2">{store.name}</h1>
+              )}
+              <p className="text-lg text-[#4A5568]">Vendor Dashboard</p>
+            </div>
+
+            {/* Metrics Grid */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              {/* Pending Orders */}
+              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-[#2A9D8F]/10 rounded-lg">
+                    <ClockIcon className="w-5 h-5 text-[#2A9D8F]" />
+                  </div>
+                  <h3 className="text-sm font-medium text-[#4A5568]">Pending Orders</h3>
+                </div>
+                <p className="text-2xl font-bold text-[#2D3748]">{metrics.pendingOrders}</p>
+              </div>
+
+              {/* Total Orders */}
+              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-[#2A9D8F]/10 rounded-lg">
+                    <ShoppingBagIcon className="w-5 h-5 text-[#2A9D8F]" />
+                  </div>
+                  <h3 className="text-sm font-medium text-[#4A5568]">Total Orders</h3>
+                </div>
+                <p className="text-2xl font-bold text-[#2D3748]">{metrics.totalOrders}</p>
+              </div>
+
+              {/* Average Order Value */}
+              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-[#2A9D8F]/10 rounded-lg">
+                    <ChartBarIcon className="w-5 h-5 text-[#2A9D8F]" />
+                  </div>
+                  <h3 className="text-sm font-medium text-[#4A5568]">Avg. Order Value</h3>
+                </div>
+                <p className="text-2xl font-bold text-[#2D3748]">${metrics.avgOrderValue.toFixed(2)}</p>
+              </div>
+
+              {/* Total Revenue */}
+              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-[#2A9D8F]/10 rounded-lg">
+                    <CurrencyDollarIcon className="w-5 h-5 text-[#2A9D8F]" />
+                  </div>
+                  <h3 className="text-sm font-medium text-[#4A5568]">Total Revenue</h3>
+                </div>
+                <p className="text-2xl font-bold text-[#2D3748]">${metrics.totalRevenue.toFixed(2)}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters Section */}
+        <div className="mb-8 flex flex-col sm:flex-row gap-4 items-start sm:items-center">
+          <h2 className="text-2xl font-bold text-[#2D3748]">Orders</h2>
+          <div className="flex-1 flex flex-col sm:flex-row gap-4">
+            <div className="flex-1 max-w-xs">
+              <input
+                type="text"
+                placeholder="Search orders..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full px-4 py-2 rounded-lg border border-[#2A9D8F]/20 bg-white focus:ring-2 focus:ring-[#2A9D8F] focus:border-transparent"
+              />
+            </div>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="px-4 py-2 rounded-lg border border-[#2A9D8F]/20 bg-white focus:ring-2 focus:ring-[#2A9D8F] focus:border-transparent"
+            >
+              <option value="all">All Statuses</option>
+              {Object.entries(statusLabels).map(([value, label]) => (
+                <option key={value} value={value}>{label}</option>
+              ))}
+            </select>
+          </div>
+        </div>
         
+        {/* Results Summary */}
+        <div className="mb-4 text-sm text-[#4A5568]">
+          Showing {filteredOrders.length} {filteredOrders.length === 1 ? 'order' : 'orders'}
+          {statusFilter !== 'all' && ` with status "${statusLabels[statusFilter as keyof typeof statusLabels]}"`}
+          {searchTerm && ` matching "${searchTerm}"`}
+        </div>
+
+        {/* Table */}
         <div className="bg-white/80 backdrop-blur-sm rounded-lg shadow-sm overflow-hidden">
           <table className="min-w-full divide-y divide-[#2A9D8F]/10">
             <thead className="bg-[#2A9D8F]/5">
@@ -231,7 +352,7 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
               </tr>
             </thead>
             <tbody className="divide-y divide-[#2A9D8F]/10">
-              {orders.map((order) => (
+              {filteredOrders.map((order) => (
                 <tr key={order.id}>
                   <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
                     #{order.id.slice(-6)}
@@ -260,20 +381,9 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
                     )}
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="flex items-center gap-2">
-                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColors[order.status as keyof typeof statusColors]}`}>
-                        {statusLabels[order.status as keyof typeof statusLabels]}
-                      </span>
-                      <select
-                        value={order.status}
-                        onChange={(e) => updateOrderStatus(order.id, e.target.value)}
-                        className="text-sm border-[#2A9D8F]/20 rounded-md focus:ring-[#2A9D8F] focus:border-[#2A9D8F]"
-                      >
-                        {Object.entries(statusLabels).map(([value, label]) => (
-                          <option key={value} value={value}>{label}</option>
-                        ))}
-                      </select>
-                    </div>
+                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColors[order.status as keyof typeof statusColors]}`}>
+                      {statusLabels[order.status as keyof typeof statusLabels]}
+                    </span>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
                     <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${paymentStatusColors[order.payment_status as keyof typeof paymentStatusColors]}`}>

From 66c9aab2c362ca2f1ae747aaa5e4fd57a257965d Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 18:37:49 -0500
Subject: [PATCH 08/27] Add metrics to overall dashboard

---
 Makefile                                      |   2 +-
 frontend/package-lock.json                    | 348 +++++++++++++++++-
 frontend/package.json                         |   3 +-
 frontend/src/app/orders/page.tsx              | 151 +++++++-
 .../src/app/store/[id]/dashboard/page.tsx     |  74 ++++
 5 files changed, 573 insertions(+), 5 deletions(-)

diff --git a/Makefile b/Makefile
index dbbf0a2..0addab2 100644
--- a/Makefile
+++ b/Makefile
@@ -41,4 +41,4 @@ deploy-meilisearch-prod:
 deploy-search-prod:
 	cd search && fly deploy --config fly.prod.toml
 
-deploy-all-prod: deploy-frontend-prod deploy-backend-prod deploy-pocketbase-prod deploy-meilisearch-prod deploy-search-prod
\ No newline at end of file
+deploy-all-prod: deploy-frontend-prod deploy-backend-prod deploy-pocketbase-prod deploy-meilisearch-prod deploy-search-prod
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3fe5599..07ceea0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,7 +17,8 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-hot-toast": "^2.5.1",
-        "react-icons": "^5.4.0"
+        "react-icons": "^5.4.0",
+        "recharts": "^2.15.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -45,6 +46,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
+      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -1140,6 +1153,69 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -2052,6 +2128,127 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -2131,6 +2328,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2211,6 +2414,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2894,6 +3107,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2901,6 +3120,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+      "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -3444,6 +3672,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4068,6 +4305,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4869,6 +5112,37 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4892,6 +5166,44 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
+      "integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -4915,6 +5227,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -5740,6 +6058,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5940,6 +6264,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2118c43..079e290 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.5.1",
-    "react-icons": "^5.4.0"
+    "react-icons": "^5.4.0",
+    "recharts": "^2.15.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/frontend/src/app/orders/page.tsx b/frontend/src/app/orders/page.tsx
index c861881..6f38288 100644
--- a/frontend/src/app/orders/page.tsx
+++ b/frontend/src/app/orders/page.tsx
@@ -4,6 +4,8 @@ import { useState, useEffect } from 'react';
 import { useAuth } from '@/app/contexts/auth';
 import { toast } from 'react-hot-toast';
 import { config } from '@/config';
+import { CurrencyDollarIcon, ShoppingBagIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
 
 interface OrderItem {
   id: string;
@@ -85,12 +87,61 @@ const formatDateTime = (isoString: string) => {
   }).format(utcDate);
 };
 
+function calculateMetrics(orders: Order[]) {
+  const totalOrders = orders.length;
+  const totalRevenue = orders.reduce((sum, order) => sum + order.total_amount, 0);
+  const pendingOrders = orders.filter(order => order.status === 'pending').length;
+  const avgOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;
+
+  return {
+    totalOrders,
+    totalRevenue,
+    pendingOrders,
+    avgOrderValue
+  };
+}
+
+function calculateDailyOrderCounts(orders: Order[]) {
+  // Get date range for last 30 days
+  const today = new Date();
+  const thirtyDaysAgo = new Date(today);
+  thirtyDaysAgo.setDate(today.getDate() - 29); // 30 days including today
+
+  // Create array of last 30 days
+  const days = Array.from({ length: 30 }, (_, i) => {
+    const date = new Date(thirtyDaysAgo);
+    date.setDate(thirtyDaysAgo.getDate() + i);
+    return date;
+  });
+
+  // Initialize counts for each day
+  const dailyCounts = days.map(date => ({
+    date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+    count: 0,
+    timestamp: date.getTime() // for sorting
+  }));
+
+  // Count orders for each day
+  orders.forEach(order => {
+    const orderDate = new Date(order.created);
+    const orderDateStr = orderDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    const dayData = dailyCounts.find(d => d.date === orderDateStr);
+    if (dayData) {
+      dayData.count++;
+    }
+  });
+
+  return dailyCounts;
+}
+
 export default function OrdersDashboard() {
   const { user } = useAuth();
   const [orders, setOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const metrics = calculateMetrics(orders);
+
   useEffect(() => {
     const fetchOrders = async () => {
       try {
@@ -182,8 +233,104 @@ export default function OrdersDashboard() {
   return (
     <main className="min-h-screen bg-[#F5F2EB] pt-24">
       <div className="container mx-auto px-4">
-        <h1 className="text-3xl font-bold text-[#2D3748] mb-8">Orders Dashboard</h1>
-        
+        {/* Header Section */}
+        <div className="mb-12">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
+            <div>
+              <h1 className="text-4xl font-bold text-[#2D3748] mb-2">Orders Dashboard</h1>
+              <p className="text-lg text-[#4A5568]">All Orders Overview</p>
+            </div>
+
+            {/* Metrics Grid */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              {/* Pending Orders */}
+              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-[#2A9D8F]/10 rounded-lg">
+                    <ClockIcon className="w-5 h-5 text-[#2A9D8F]" />
+                  </div>
+                  <h3 className="text-sm font-medium text-[#4A5568]">Pending Orders</h3>
+                </div>
+                <p className="text-2xl font-bold text-[#2D3748]">{metrics.pendingOrders}</p>
+              </div>
+
+              {/* Total Orders */}
+              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-[#2A9D8F]/10 rounded-lg">
+                    <ShoppingBagIcon className="w-5 h-5 text-[#2A9D8F]" />
+                  </div>
+                  <h3 className="text-sm font-medium text-[#4A5568]">Total Orders</h3>
+                </div>
+                <p className="text-2xl font-bold text-[#2D3748]">{metrics.totalOrders}</p>
+              </div>
+
+              {/* Average Order Value */}
+              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-[#2A9D8F]/10 rounded-lg">
+                    <ChartBarIcon className="w-5 h-5 text-[#2A9D8F]" />
+                  </div>
+                  <h3 className="text-sm font-medium text-[#4A5568]">Avg. Order Value</h3>
+                </div>
+                <p className="text-2xl font-bold text-[#2D3748]">${metrics.avgOrderValue.toFixed(2)}</p>
+              </div>
+
+              {/* Total Revenue */}
+              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-[#2A9D8F]/10 rounded-lg">
+                    <CurrencyDollarIcon className="w-5 h-5 text-[#2A9D8F]" />
+                  </div>
+                  <h3 className="text-sm font-medium text-[#4A5568]">Total Revenue</h3>
+                </div>
+                <p className="text-2xl font-bold text-[#2D3748]">${metrics.totalRevenue.toFixed(2)}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Orders Chart */}
+        <div className="mb-12">
+          <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
+            <h2 className="text-xl font-bold text-[#2D3748] mb-6">Daily Orders (Last 30 Days)</h2>
+            <div className="h-[300px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={calculateDailyOrderCounts(orders)} margin={{ top: 10, right: 10, left: 0, bottom: 20 }}>
+                  <XAxis 
+                    dataKey="date" 
+                    angle={-45}
+                    textAnchor="end"
+                    height={70}
+                    tick={{ fill: '#4A5568', fontSize: 11 }}
+                    interval={1}
+                  />
+                  <YAxis 
+                    allowDecimals={false}
+                    tick={{ fill: '#4A5568', fontSize: 12 }}
+                  />
+                  <Tooltip 
+                    contentStyle={{ 
+                      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                      borderColor: '#2A9D8F',
+                      borderRadius: '0.5rem'
+                    }}
+                    cursor={{ fill: 'rgba(42, 157, 143, 0.1)' }}
+                    labelFormatter={(label) => `Orders on ${label}`}
+                  />
+                  <Bar 
+                    dataKey="count" 
+                    fill="#2A9D8F"
+                    radius={[4, 4, 0, 0]}
+                    name="Orders"
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+
+        {/* Orders Table */}
         <div className="bg-white/80 backdrop-blur-sm rounded-lg shadow-sm overflow-hidden">
           <table className="min-w-full divide-y divide-[#2A9D8F]/10">
             <thead className="bg-[#2A9D8F]/5">
diff --git a/frontend/src/app/store/[id]/dashboard/page.tsx b/frontend/src/app/store/[id]/dashboard/page.tsx
index af1cae3..9d3002a 100644
--- a/frontend/src/app/store/[id]/dashboard/page.tsx
+++ b/frontend/src/app/store/[id]/dashboard/page.tsx
@@ -8,6 +8,7 @@ import { config } from '@/config';
 import { useRouter } from 'next/navigation';
 import { use } from 'react';
 import { CurrencyDollarIcon, ShoppingBagIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
 
 interface OrderItem {
   id: string;
@@ -100,6 +101,39 @@ function calculateMetrics(orders: Order[]) {
   };
 }
 
+function calculateDailyOrderCounts(orders: Order[]) {
+  // Get date range for last 30 days
+  const today = new Date();
+  const thirtyDaysAgo = new Date(today);
+  thirtyDaysAgo.setDate(today.getDate() - 29); // 30 days including today
+
+  // Create array of last 30 days
+  const days = Array.from({ length: 30 }, (_, i) => {
+    const date = new Date(thirtyDaysAgo);
+    date.setDate(thirtyDaysAgo.getDate() + i);
+    return date;
+  });
+
+  // Initialize counts for each day
+  const dailyCounts = days.map(date => ({
+    date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+    count: 0,
+    timestamp: date.getTime() // for sorting
+  }));
+
+  // Count orders for each day
+  orders.forEach(order => {
+    const orderDate = new Date(order.created);
+    const orderDateStr = orderDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    const dayData = dailyCounts.find(d => d.date === orderDateStr);
+    if (dayData) {
+      dayData.count++;
+    }
+  });
+
+  return dailyCounts;
+}
+
 export default function StoreDashboard({ params }: { params: Promise<{ id: string }> }) {
   const { id: storeId } = use(params);
   const { user } = useAuth();
@@ -284,6 +318,46 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
           </div>
         </div>
 
+        {/* Orders Chart */}
+        <div className="mb-12">
+          <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
+            <h2 className="text-xl font-bold text-[#2D3748] mb-6">Daily Orders (Last 30 Days)</h2>
+            <div className="h-[300px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={calculateDailyOrderCounts(orders)} margin={{ top: 10, right: 10, left: 0, bottom: 20 }}>
+                  <XAxis 
+                    dataKey="date" 
+                    angle={-45}
+                    textAnchor="end"
+                    height={70}
+                    tick={{ fill: '#4A5568', fontSize: 11 }}
+                    interval={1}
+                  />
+                  <YAxis 
+                    allowDecimals={false}
+                    tick={{ fill: '#4A5568', fontSize: 12 }}
+                  />
+                  <Tooltip 
+                    contentStyle={{ 
+                      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                      borderColor: '#2A9D8F',
+                      borderRadius: '0.5rem'
+                    }}
+                    cursor={{ fill: 'rgba(42, 157, 143, 0.1)' }}
+                    labelFormatter={(label) => `Orders on ${label}`}
+                  />
+                  <Bar 
+                    dataKey="count" 
+                    fill="#2A9D8F"
+                    radius={[4, 4, 0, 0]}
+                    name="Orders"
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+
         {/* Filters Section */}
         <div className="mb-8 flex flex-col sm:flex-row gap-4 items-start sm:items-center">
           <h2 className="text-2xl font-bold text-[#2D3748]">Orders</h2>

From 00d1e3b0ad688f887cdb393fb7e9a585ec3c7500 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 18:48:32 -0500
Subject: [PATCH 09/27] Color code the all orders dash

---
 frontend/src/app/orders/page.tsx | 236 ++++++++++++++++++++-----------
 1 file changed, 150 insertions(+), 86 deletions(-)

diff --git a/frontend/src/app/orders/page.tsx b/frontend/src/app/orders/page.tsx
index 6f38288..a60c75b 100644
--- a/frontend/src/app/orders/page.tsx
+++ b/frontend/src/app/orders/page.tsx
@@ -5,7 +5,7 @@ import { useAuth } from '@/app/contexts/auth';
 import { toast } from 'react-hot-toast';
 import { config } from '@/config';
 import { CurrencyDollarIcon, ShoppingBagIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 
 interface OrderItem {
   id: string;
@@ -43,6 +43,12 @@ interface Order {
   }>;
 }
 
+interface DailyCount {
+  date: string;
+  timestamp: number;
+  [storeId: string]: string | number; // Allow string indexes for store IDs
+}
+
 const statusColors = {
   pending: 'bg-yellow-100 text-yellow-800',
   confirmed: 'bg-blue-100 text-blue-800',
@@ -114,24 +120,65 @@ function calculateDailyOrderCounts(orders: Order[]) {
     return date;
   });
 
-  // Initialize counts for each day
-  const dailyCounts = days.map(date => ({
-    date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
-    count: 0,
-    timestamp: date.getTime() // for sorting
-  }));
+  // Get unique stores from all orders
+  const storeIds = new Set<string>();
+  const storeNames = new Map<string, string>();
+  orders.forEach(order => {
+    order.stores.forEach(store => {
+      storeIds.add(store.store.id);
+      storeNames.set(store.store.id, store.store.name);
+    });
+  });
+
+  // Initialize counts for each day with store-specific counts
+  const dailyCounts: DailyCount[] = days.map(date => {
+    const baseCount = {
+      date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+      timestamp: date.getTime()
+    };
+
+    // Add a count property for each store, initialized to 0
+    const storeCounts: { [key: string]: number } = {};
+    storeIds.forEach(storeId => {
+      storeCounts[storeId] = 0;
+    });
+
+    return {
+      ...baseCount,
+      ...storeCounts
+    };
+  });
 
-  // Count orders for each day
+  // Count orders for each day and store
   orders.forEach(order => {
     const orderDate = new Date(order.created);
     const orderDateStr = orderDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
     const dayData = dailyCounts.find(d => d.date === orderDateStr);
+    
     if (dayData) {
-      dayData.count++;
+      order.stores.forEach(store => {
+        const currentCount = dayData[store.store.id] as number;
+        dayData[store.store.id] = currentCount + 1;
+      });
     }
   });
 
-  return dailyCounts;
+  // Convert storeIds to array for consistent ordering
+  const storeIdsArray = Array.from(storeIds);
+
+  return {
+    data: dailyCounts,
+    stores: storeIdsArray.map(id => ({
+      id,
+      name: storeNames.get(id) || 'Unknown Store'
+    }))
+  };
+}
+
+// Add color generation function
+function getStoreColor(index: number, opacity: number = 0.9) {
+  const hue = (166 + index * 30) % 360;
+  return `hsla(${hue}, 85%, 35%, ${opacity})`;
 }
 
 export default function OrdersDashboard() {
@@ -293,10 +340,13 @@ export default function OrdersDashboard() {
         {/* Orders Chart */}
         <div className="mb-12">
           <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
-            <h2 className="text-xl font-bold text-[#2D3748] mb-6">Daily Orders (Last 30 Days)</h2>
+            <h2 className="text-xl font-bold text-[#2D3748] mb-6">Daily Orders by Store (Last 30 Days)</h2>
             <div className="h-[300px]">
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={calculateDailyOrderCounts(orders)} margin={{ top: 10, right: 10, left: 0, bottom: 20 }}>
+                <BarChart 
+                  data={calculateDailyOrderCounts(orders).data} 
+                  margin={{ top: 10, right: 10, left: 0, bottom: 20 }}
+                >
                   <XAxis 
                     dataKey="date" 
                     angle={-45}
@@ -316,14 +366,18 @@ export default function OrdersDashboard() {
                       borderRadius: '0.5rem'
                     }}
                     cursor={{ fill: 'rgba(42, 157, 143, 0.1)' }}
-                    labelFormatter={(label) => `Orders on ${label}`}
-                  />
-                  <Bar 
-                    dataKey="count" 
-                    fill="#2A9D8F"
-                    radius={[4, 4, 0, 0]}
-                    name="Orders"
                   />
+                  <Legend />
+                  {calculateDailyOrderCounts(orders).stores.map((store, index) => (
+                    <Bar 
+                      key={store.id}
+                      dataKey={store.id}
+                      name={store.name}
+                      stackId="stores"
+                      fill={getStoreColor(index)}
+                      radius={[index === 0 ? 4 : 0, index === 0 ? 4 : 0, 0, 0]}
+                    />
+                  ))}
                 </BarChart>
               </ResponsiveContainer>
             </div>
@@ -365,78 +419,88 @@ export default function OrdersDashboard() {
               </tr>
             </thead>
             <tbody className="divide-y divide-[#2A9D8F]/10">
-              {orders.map((order) => (
-                <tr key={order.id}>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
-                    #{order.id.slice(-6)}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#4A5568]">
-                    {formatDateTime(order.created)}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
-                    {order.customer_name}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#4A5568]">
-                    {order.customer_phone || '-'}
-                  </td>
-                  <td className="px-6 py-4 text-sm text-[#4A5568]">
-                    {order.delivery_address ? (
-                      <>
-                        <div>
-                          {order.delivery_address.street_address.filter(Boolean).join(', ')}
-                        </div>
-                        <div>
-                          {order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}
-                        </div>
-                      </>
-                    ) : (
-                      <span className="text-gray-400 italic">No address available</span>
-                    )}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="flex items-center gap-2">
-                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColors[order.status as keyof typeof statusColors]}`}>
-                        {statusLabels[order.status as keyof typeof statusLabels]}
+              {orders.map((order) => {
+                // Get the first store's index for coloring
+                const storeIndex = calculateDailyOrderCounts(orders).stores
+                  .findIndex(s => s.id === order.stores[0]?.store.id);
+
+                return (
+                  <tr 
+                    key={order.id}
+                    style={{ backgroundColor: getStoreColor(storeIndex, 0.15) }}
+                    className="transition-colors hover:bg-white/60"
+                  >
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
+                      #{order.id.slice(-6)}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-[#4A5568]">
+                      {formatDateTime(order.created)}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
+                      {order.customer_name}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-[#4A5568]">
+                      {order.customer_phone || '-'}
+                    </td>
+                    <td className="px-6 py-4 text-sm text-[#4A5568]">
+                      {order.delivery_address ? (
+                        <>
+                          <div>
+                            {order.delivery_address.street_address.filter(Boolean).join(', ')}
+                          </div>
+                          <div>
+                            {order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}
+                          </div>
+                        </>
+                      ) : (
+                        <span className="text-gray-400 italic">No address available</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center gap-2">
+                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColors[order.status as keyof typeof statusColors]}`}>
+                          {statusLabels[order.status as keyof typeof statusLabels]}
+                        </span>
+                        <select
+                          value={order.status}
+                          onChange={(e) => updateOrderStatus(order.id, e.target.value)}
+                          className="text-sm border-[#2A9D8F]/20 rounded-md focus:ring-[#2A9D8F] focus:border-[#2A9D8F]"
+                        >
+                          {Object.entries(statusLabels).map(([value, label]) => (
+                            <option key={value} value={value}>{label}</option>
+                          ))}
+                        </select>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${paymentStatusColors[order.payment_status as keyof typeof paymentStatusColors]}`}>
+                        {paymentStatusLabels[order.payment_status as keyof typeof paymentStatusLabels]}
                       </span>
-                      <select
-                        value={order.status}
-                        onChange={(e) => updateOrderStatus(order.id, e.target.value)}
-                        className="text-sm border-[#2A9D8F]/20 rounded-md focus:ring-[#2A9D8F] focus:border-[#2A9D8F]"
-                      >
-                        {Object.entries(statusLabels).map(([value, label]) => (
-                          <option key={value} value={value}>{label}</option>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="text-sm text-[#4A5568]">
+                        {order.stores.map((store) => (
+                          <div key={store.store.id} className="mb-2 last:mb-0">
+                            <div className="font-medium text-[#2D3748]">{store.store.name}</div>
+                            {store.items.map((item) => (
+                              <div key={item.id} className="ml-4">
+                                {item.quantity}x {item.name} (${item.price.toFixed(2)})
+                              </div>
+                            ))}
+                          </div>
                         ))}
-                      </select>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${paymentStatusColors[order.payment_status as keyof typeof paymentStatusColors]}`}>
-                      {paymentStatusLabels[order.payment_status as keyof typeof paymentStatusLabels]}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4">
-                    <div className="text-sm text-[#4A5568]">
-                      {order.stores.map((store) => (
-                        <div key={store.store.id} className="mb-2 last:mb-0">
-                          <div className="font-medium text-[#2D3748]">{store.store.name}</div>
-                          {store.items.map((item) => (
-                            <div key={item.id} className="ml-4">
-                              {item.quantity}x {item.name} (${item.price.toFixed(2)})
-                            </div>
-                          ))}
-                        </div>
-                      ))}
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
-                    ${order.total_amount.toFixed(2)}
-                  </td>
-                </tr>
-              ))}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
+                      ${order.total_amount.toFixed(2)}
+                    </td>
+                  </tr>
+                );
+              })}
             </tbody>
           </table>
         </div>
       </div>
     </main>
   );
-} 
\ No newline at end of file
+}
\ No newline at end of file

From 4c213ea0271217d053158dd2ffafc2215bd4e93a Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Mon, 17 Feb 2025 18:51:16 -0500
Subject: [PATCH 10/27] Add status filters to all orders dash

---
 frontend/src/app/orders/page.tsx | 103 ++++++++++++++++++++++++++++++-
 1 file changed, 102 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/orders/page.tsx b/frontend/src/app/orders/page.tsx
index a60c75b..ec51e70 100644
--- a/frontend/src/app/orders/page.tsx
+++ b/frontend/src/app/orders/page.tsx
@@ -186,9 +186,39 @@ export default function OrdersDashboard() {
   const [orders, setOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [selectedStatuses, setSelectedStatuses] = useState<Set<string>>(new Set(Object.keys(statusLabels)));
+  const [searchTerm, setSearchTerm] = useState('');
 
   const metrics = calculateMetrics(orders);
 
+  // Filter orders based on selected statuses and search term
+  const filteredOrders = orders.filter(order => {
+    const matchesStatus = selectedStatuses.has(order.status);
+    const searchLower = searchTerm.toLowerCase();
+    const matchesSearch = !searchTerm || 
+      order.id.toLowerCase().includes(searchLower) ||
+      order.customer_name.toLowerCase().includes(searchLower);
+    return matchesStatus && matchesSearch;
+  });
+
+  // Toggle status filter
+  const toggleStatus = (status: string) => {
+    setSelectedStatuses(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(status)) {
+        newSet.delete(status);
+      } else {
+        newSet.add(status);
+      }
+      return newSet;
+    });
+  };
+
+  // Select/deselect all statuses
+  const toggleAll = (select: boolean) => {
+    setSelectedStatuses(new Set(select ? Object.keys(statusLabels) : []));
+  };
+
   useEffect(() => {
     const fetchOrders = async () => {
       try {
@@ -384,6 +414,77 @@ export default function OrdersDashboard() {
           </div>
         </div>
 
+        {/* Filters Section */}
+        <div className="mb-8">
+          <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
+            <div className="flex flex-col sm:flex-row gap-6">
+              {/* Status Filter */}
+              <div className="flex-1">
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-sm font-medium text-[#2D3748]">Filter by Status</h3>
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => toggleAll(true)}
+                      className="text-xs text-[#2A9D8F] hover:text-[#40B4A6] transition-colors"
+                    >
+                      Select All
+                    </button>
+                    <button
+                      onClick={() => toggleAll(false)}
+                      className="text-xs text-[#2A9D8F] hover:text-[#40B4A6] transition-colors"
+                    >
+                      Clear All
+                    </button>
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  {Object.entries(statusLabels).map(([value, label]) => (
+                    <label
+                      key={value}
+                      className={`
+                        flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer transition-all
+                        ${selectedStatuses.has(value) 
+                          ? 'border-[#2A9D8F] bg-[#2A9D8F]/5 text-[#2D3748]' 
+                          : 'border-[#2A9D8F]/20 bg-white/50 text-[#4A5568]'
+                        }
+                        hover:border-[#2A9D8F] hover:bg-[#2A9D8F]/5
+                      `}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedStatuses.has(value)}
+                        onChange={() => toggleStatus(value)}
+                        className="h-4 w-4 rounded border-[#2A9D8F]/20 text-[#2A9D8F] focus:ring-[#2A9D8F]"
+                      />
+                      <span className="text-sm whitespace-nowrap">{label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {/* Search */}
+              <div className="sm:w-72">
+                <h3 className="text-sm font-medium text-[#2D3748] mb-3">Search Orders</h3>
+                <input
+                  type="text"
+                  placeholder="Search by order ID or customer..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full px-4 py-2 rounded-lg border border-[#2A9D8F]/20 bg-white focus:ring-2 focus:ring-[#2A9D8F] focus:border-transparent"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        {/* Results Summary */}
+        <div className="mb-4 text-sm text-[#4A5568]">
+          Showing {filteredOrders.length} {filteredOrders.length === 1 ? 'order' : 'orders'}
+          {selectedStatuses.size < Object.keys(statusLabels).length && 
+            ` with status${selectedStatuses.size === 1 ? '' : 'es'}: ${Array.from(selectedStatuses).map(s => statusLabels[s as keyof typeof statusLabels]).join(', ')}`}
+          {searchTerm && ` matching "${searchTerm}"`}
+        </div>
+
         {/* Orders Table */}
         <div className="bg-white/80 backdrop-blur-sm rounded-lg shadow-sm overflow-hidden">
           <table className="min-w-full divide-y divide-[#2A9D8F]/10">
@@ -419,7 +520,7 @@ export default function OrdersDashboard() {
               </tr>
             </thead>
             <tbody className="divide-y divide-[#2A9D8F]/10">
-              {orders.map((order) => {
+              {filteredOrders.map((order) => {
                 // Get the first store's index for coloring
                 const storeIndex = calculateDailyOrderCounts(orders).stores
                   .findIndex(s => s.id === order.stores[0]?.store.id);

From 24414a81cc7dfb85010cbbd490cde772da04183a Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Tue, 18 Feb 2025 00:57:54 -0500
Subject: [PATCH 11/27] Add an inventory dashboard

---
 .../1739857597_updated_order_items.js         |  28 ++
 .../1739857689_updated_order_items.js         |  28 ++
 .../1739857745_updated_store_items.js         |  20 +
 .../1739857799_updated_order_items.js         |  28 ++
 .../1739857921_updated_order_items.js         |  28 ++
 .../1739858051_updated_store_items.js         |  22 ++
 frontend/src/app/orders/page.tsx              |   3 +-
 frontend/src/app/store/[id]/StoreContent.tsx  |  26 +-
 .../src/app/store/[id]/dashboard/page.tsx     | 283 +++++++++++---
 .../src/app/store/[id]/inventory/page.tsx     | 365 ++++++++++++++++++
 python-backend/localmart_backend/main.py      | 108 +++++-
 11 files changed, 875 insertions(+), 64 deletions(-)
 create mode 100644 db/pb_migrations/1739857597_updated_order_items.js
 create mode 100644 db/pb_migrations/1739857689_updated_order_items.js
 create mode 100644 db/pb_migrations/1739857745_updated_store_items.js
 create mode 100644 db/pb_migrations/1739857799_updated_order_items.js
 create mode 100644 db/pb_migrations/1739857921_updated_order_items.js
 create mode 100644 db/pb_migrations/1739858051_updated_store_items.js
 create mode 100644 frontend/src/app/store/[id]/inventory/page.tsx

diff --git a/db/pb_migrations/1739857597_updated_order_items.js b/db/pb_migrations/1739857597_updated_order_items.js
new file mode 100644
index 0000000..a9eb975
--- /dev/null
+++ b/db/pb_migrations/1739857597_updated_order_items.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'",
+    "deleteRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'",
+    "listRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'",
+    "updateRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'",
+    "viewRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": null,
+    "listRule": "",
+    "updateRule": null,
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739857689_updated_order_items.js b/db/pb_migrations/1739857689_updated_order_items.js
new file mode 100644
index 0000000..8e46dc9
--- /dev/null
+++ b/db/pb_migrations/1739857689_updated_order_items.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "deleteRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "listRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "updateRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'",
+    "deleteRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'",
+    "listRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'",
+    "updateRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'",
+    "viewRule": "@request.auth.roles ?~ 'admin' || @collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin'"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739857745_updated_store_items.js b/db/pb_migrations/1739857745_updated_store_items.js
new file mode 100644
index 0000000..71eb9fe
--- /dev/null
+++ b/db/pb_migrations/1739857745_updated_store_items.js
@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1842453536")
+
+  // update collection data
+  unmarshal({
+    "updateRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1842453536")
+
+  // update collection data
+  unmarshal({
+    "updateRule": null
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739857799_updated_order_items.js b/db/pb_migrations/1739857799_updated_order_items.js
new file mode 100644
index 0000000..51025b4
--- /dev/null
+++ b/db/pb_migrations/1739857799_updated_order_items.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin'",
+    "deleteRule": "@request.auth.roles ?~ 'admin'",
+    "listRule": "@request.auth.roles ?~ 'admin'",
+    "updateRule": "@request.auth.roles ?~ 'admin'",
+    "viewRule": "@request.auth.roles ?~ 'admin'"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "deleteRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "listRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "updateRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739857921_updated_order_items.js b/db/pb_migrations/1739857921_updated_order_items.js
new file mode 100644
index 0000000..2620d5b
--- /dev/null
+++ b/db/pb_migrations/1739857921_updated_order_items.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.role ?= 'admin' || @request.body.order.user.id = @request.auth.id",
+    "deleteRule": null,
+    "listRule": "@request.auth.role ?= 'admin' || @request.body.order.user.id = @request.auth.id",
+    "updateRule": null,
+    "viewRule": "@request.auth.role ?= 'admin' || @request.body.order.user.id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin'",
+    "deleteRule": "@request.auth.roles ?~ 'admin'",
+    "listRule": "@request.auth.roles ?~ 'admin'",
+    "updateRule": "@request.auth.roles ?~ 'admin'",
+    "viewRule": "@request.auth.roles ?~ 'admin'"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739858051_updated_store_items.js b/db/pb_migrations/1739858051_updated_store_items.js
new file mode 100644
index 0000000..a22e7b1
--- /dev/null
+++ b/db/pb_migrations/1739858051_updated_store_items.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1842453536")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "deleteRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1842453536")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/frontend/src/app/orders/page.tsx b/frontend/src/app/orders/page.tsx
index ec51e70..124f7c3 100644
--- a/frontend/src/app/orders/page.tsx
+++ b/frontend/src/app/orders/page.tsx
@@ -314,8 +314,7 @@ export default function OrdersDashboard() {
         <div className="mb-12">
           <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
             <div>
-              <h1 className="text-4xl font-bold text-[#2D3748] mb-2">Orders Dashboard</h1>
-              <p className="text-lg text-[#4A5568]">All Orders Overview</p>
+              <h1 className="text-4xl font-bold text-[#2D3748] mb-2">Localmart Dashboard</h1>
             </div>
 
             {/* Metrics Grid */}
diff --git a/frontend/src/app/store/[id]/StoreContent.tsx b/frontend/src/app/store/[id]/StoreContent.tsx
index 4063772..ca2e8c5 100644
--- a/frontend/src/app/store/[id]/StoreContent.tsx
+++ b/frontend/src/app/store/[id]/StoreContent.tsx
@@ -5,7 +5,7 @@ import { useCart } from '../../contexts/cart';
 import { toast } from 'react-hot-toast';
 import { FaInstagram, FaFacebook, FaXTwitter } from 'react-icons/fa6';
 import { SiBluesky } from 'react-icons/si';
-import { ClockIcon, MapPinIcon } from '@heroicons/react/24/outline';
+import { ClockIcon, MapPinIcon, ChartBarIcon, ShoppingBagIcon } from '@heroicons/react/24/outline';
 import { config } from '@/config';
 import { useStoreRoles } from '@/app/hooks/useStoreRoles';
 import Link from 'next/link';
@@ -117,14 +117,24 @@ export default function StoreContent({ storeId }: { storeId: string }) {
               <div className="relative z-10">
                 <h1 className="text-2xl font-bold text-[#2D3748]">{store.name}</h1>
                 <p className="text-[#4A5568] text-sm">Local market & grocery</p>
-                {/* Add dashboard link for store admins */}
+                {/* Vendor Links */}
                 {isAdmin && (
-                  <Link
-                    href={`/store/${storeId}/dashboard`}
-                    className="inline-flex items-center mt-2 text-sm text-[#2A9D8F] hover:text-[#40B4A6] transition-colors"
-                  >
-                    View Dashboard
-                  </Link>
+                  <div className="flex items-center gap-4 mt-2">
+                    <Link
+                      href={`/store/${storeId}/dashboard`}
+                      className="text-sm text-[#2A9D8F] hover:text-[#40B4A6] transition-colors flex items-center gap-1"
+                    >
+                      <ChartBarIcon className="w-4 h-4" />
+                      <span>View Orders</span>
+                    </Link>
+                    <Link
+                      href={`/store/${storeId}/inventory`}
+                      className="text-sm text-[#2A9D8F] hover:text-[#40B4A6] transition-colors flex items-center gap-1"
+                    >
+                      <ShoppingBagIcon className="w-4 h-4" />
+                      <span>Manage Inventory</span>
+                    </Link>
+                  </div>
                 )}
                 {/* Social Links */}
                 <div className="flex gap-3 mt-3">
diff --git a/frontend/src/app/store/[id]/dashboard/page.tsx b/frontend/src/app/store/[id]/dashboard/page.tsx
index 9d3002a..75ebc1d 100644
--- a/frontend/src/app/store/[id]/dashboard/page.tsx
+++ b/frontend/src/app/store/[id]/dashboard/page.tsx
@@ -8,7 +8,8 @@ import { config } from '@/config';
 import { useRouter } from 'next/navigation';
 import { use } from 'react';
 import { CurrencyDollarIcon, ShoppingBagIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import Link from 'next/link';
 
 interface OrderItem {
   id: string;
@@ -44,6 +45,12 @@ interface Order {
   stores: Store[];
 }
 
+interface DailyCount {
+  date: string;
+  timestamp: number;
+  [itemName: string]: string | number; // Allow string indexes for item names
+}
+
 const statusColors = {
   pending: 'bg-yellow-100 text-yellow-800',
   confirmed: 'bg-blue-100 text-blue-800',
@@ -93,14 +100,67 @@ function calculateMetrics(orders: Order[]) {
   const pendingOrders = orders.filter(order => order.status === 'pending').length;
   const avgOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;
 
+  // Calculate items per order
+  const totalItems = orders.reduce((sum, order) => {
+    return sum + order.stores[0]?.items.reduce((itemSum, item) => itemSum + item.quantity, 0) || 0;
+  }, 0);
+  const avgItemsPerOrder = totalOrders > 0 ? totalItems / totalOrders : 0;
+
+  // Calculate popular items
+  const itemCounts: { [key: string]: { count: number; revenue: number; name: string } } = {};
+  orders.forEach(order => {
+    order.stores[0]?.items.forEach(item => {
+      if (!itemCounts[item.name]) {
+        itemCounts[item.name] = { count: 0, revenue: 0, name: item.name };
+      }
+      itemCounts[item.name].count += item.quantity;
+      itemCounts[item.name].revenue += item.price * item.quantity;
+    });
+  });
+
+  const popularItems = Object.entries(itemCounts)
+    .map(([name, data]) => ({ id: name, ...data }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 5);
+
+  // Calculate week-over-week growth
+  const now = new Date();
+  const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+  const twoWeeksAgo = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000);
+
+  const thisWeekRevenue = orders
+    .filter(order => new Date(order.created) >= oneWeekAgo)
+    .reduce((sum, order) => sum + order.total_amount, 0);
+
+  const lastWeekRevenue = orders
+    .filter(order => {
+      const date = new Date(order.created);
+      return date >= twoWeeksAgo && date < oneWeekAgo;
+    })
+    .reduce((sum, order) => sum + order.total_amount, 0);
+
+  const weekOverWeekGrowth = lastWeekRevenue > 0 
+    ? ((thisWeekRevenue - lastWeekRevenue) / lastWeekRevenue) * 100 
+    : 0;
+
   return {
     totalOrders,
     totalRevenue,
     pendingOrders,
-    avgOrderValue
+    avgOrderValue,
+    avgItemsPerOrder,
+    popularItems,
+    weekOverWeekGrowth,
+    thisWeekRevenue,
+    lastWeekRevenue
   };
 }
 
+function getStoreColor(index: number, opacity: number = 0.8) {
+  const hue = (166 + index * 30) % 360;
+  return `hsla(${hue}, 85%, 35%, ${opacity})`;
+}
+
 function calculateDailyOrderCounts(orders: Order[]) {
   // Get date range for last 30 days
   const today = new Date();
@@ -114,24 +174,50 @@ function calculateDailyOrderCounts(orders: Order[]) {
     return date;
   });
 
+  // Get unique items from all orders
+  const uniqueItems = new Set<string>();
+  orders.forEach(order => {
+    order.stores[0]?.items.forEach(item => {
+      uniqueItems.add(item.name);
+    });
+  });
+
   // Initialize counts for each day
-  const dailyCounts = days.map(date => ({
-    date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
-    count: 0,
-    timestamp: date.getTime() // for sorting
-  }));
+  const dailyCounts: DailyCount[] = days.map(date => {
+    const baseCount = {
+      date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+      timestamp: date.getTime()
+    };
+
+    // Add a count property for each unique item, initialized to 0
+    const itemCounts: { [key: string]: number } = {};
+    uniqueItems.forEach(itemName => {
+      itemCounts[itemName] = 0;
+    });
 
-  // Count orders for each day
+    return {
+      ...baseCount,
+      ...itemCounts
+    };
+  });
+
+  // Count items for each day
   orders.forEach(order => {
     const orderDate = new Date(order.created);
     const orderDateStr = orderDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
     const dayData = dailyCounts.find(d => d.date === orderDateStr);
+    
     if (dayData) {
-      dayData.count++;
+      order.stores[0]?.items.forEach(item => {
+        dayData[item.name] = (dayData[item.name] as number || 0) + item.quantity;
+      });
     }
   });
 
-  return dailyCounts;
+  return {
+    data: dailyCounts,
+    items: Array.from(uniqueItems)
+  };
 }
 
 export default function StoreDashboard({ params }: { params: Promise<{ id: string }> }) {
@@ -144,6 +230,7 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
   const [error, setError] = useState<string | null>(null);
   const [store, setStore] = useState<{ name: string } | null>(null);
   const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [selectedStatuses, setSelectedStatuses] = useState<Set<string>>(new Set(Object.keys(statusLabels)));
   const [searchTerm, setSearchTerm] = useState('');
   const router = useRouter();
 
@@ -205,13 +292,31 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
     fetchStore();
   }, [storeId]);
 
-  // Filter orders when status filter or search term changes
+  // Toggle status filter
+  const toggleStatus = (status: string) => {
+    setSelectedStatuses(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(status)) {
+        newSet.delete(status);
+      } else {
+        newSet.add(status);
+      }
+      return newSet;
+    });
+  };
+
+  // Select/deselect all statuses
+  const toggleAll = (select: boolean) => {
+    setSelectedStatuses(new Set(select ? Object.keys(statusLabels) : []));
+  };
+
+  // Update filter effect
   useEffect(() => {
     let result = [...orders];
     
     // Apply status filter
-    if (statusFilter !== 'all') {
-      result = result.filter(order => order.status === statusFilter);
+    if (selectedStatuses.size < Object.keys(statusLabels).length) {
+      result = result.filter(order => selectedStatuses.has(order.status));
     }
     
     // Apply search filter (on order ID or customer name)
@@ -224,7 +329,7 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
     }
     
     setFilteredOrders(result);
-  }, [orders, statusFilter, searchTerm]);
+  }, [orders, selectedStatuses, searchTerm]);
 
   if (rolesLoading || loading) {
     return (
@@ -264,12 +369,23 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
           <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
             <div>
               {store && (
-                <h1 className="text-4xl font-bold text-[#2D3748] mb-2">{store.name}</h1>
+                <Link href={`/store/${storeId}`}>
+                  <h1 className="text-4xl font-bold text-[#2D3748] mb-2 hover:text-[#2A9D8F] transition-colors">{store.name}</h1>
+                </Link>
               )}
-              <p className="text-lg text-[#4A5568]">Vendor Dashboard</p>
+              <div className="flex items-center gap-4">
+                <p className="text-lg text-[#4A5568]">Vendor Dashboard</p>
+                <Link
+                  href={`/store/${storeId}/inventory`}
+                  className="text-[#2A9D8F] hover:text-[#40B4A6] transition-colors text-sm flex items-center gap-1"
+                >
+                  <span>Manage Inventory</span>
+                  <ChartBarIcon className="w-4 h-4" />
+                </Link>
+              </div>
             </div>
 
-            {/* Metrics Grid */}
+            {/* Key Metrics Grid */}
             <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
               {/* Pending Orders */}
               <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
@@ -318,13 +434,38 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
           </div>
         </div>
 
-        {/* Orders Chart */}
-        <div className="mb-12">
+        {/* New Insights Sections */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
+          {/* Popular Items */}
+          <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
+            <h2 className="text-xl font-bold text-[#2D3748] mb-4">Top Selling Items</h2>
+            <div className="divide-y divide-[#2A9D8F]/10">
+              {metrics.popularItems.map((item, index) => (
+                <div key={item.id} className="py-4 first:pt-0 last:pb-0">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <span className="text-lg font-bold text-[#2A9D8F]">#{index + 1}</span>
+                      <div>
+                        <p className="font-medium text-[#2D3748]">{item.name}</p>
+                        <p className="text-sm text-[#4A5568]">{item.count} units sold</p>
+                      </div>
+                    </div>
+                    <p className="font-medium text-[#2D3748]">${item.revenue.toFixed(2)}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Daily Orders Chart */}
           <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
             <h2 className="text-xl font-bold text-[#2D3748] mb-6">Daily Orders (Last 30 Days)</h2>
             <div className="h-[300px]">
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={calculateDailyOrderCounts(orders)} margin={{ top: 10, right: 10, left: 0, bottom: 20 }}>
+                <BarChart 
+                  data={calculateDailyOrderCounts(orders).data} 
+                  margin={{ top: 10, right: 10, left: 0, bottom: 20 }}
+                >
                   <XAxis 
                     dataKey="date" 
                     angle={-45}
@@ -344,50 +485,94 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
                       borderRadius: '0.5rem'
                     }}
                     cursor={{ fill: 'rgba(42, 157, 143, 0.1)' }}
-                    labelFormatter={(label) => `Orders on ${label}`}
-                  />
-                  <Bar 
-                    dataKey="count" 
-                    fill="#2A9D8F"
-                    radius={[4, 4, 0, 0]}
-                    name="Orders"
                   />
+                  <Legend />
+                  {calculateDailyOrderCounts(orders).items.map((itemName, index) => (
+                    <Bar 
+                      key={itemName}
+                      dataKey={itemName}
+                      name={itemName}
+                      stackId="items"
+                      fill={getStoreColor(index)}
+                    />
+                  ))}
                 </BarChart>
               </ResponsiveContainer>
             </div>
           </div>
         </div>
 
+        {/* Orders Table Title */}
+        <h2 className="text-2xl font-bold text-[#2D3748] mb-6">All Orders</h2>
+
         {/* Filters Section */}
-        <div className="mb-8 flex flex-col sm:flex-row gap-4 items-start sm:items-center">
-          <h2 className="text-2xl font-bold text-[#2D3748]">Orders</h2>
-          <div className="flex-1 flex flex-col sm:flex-row gap-4">
-            <div className="flex-1 max-w-xs">
-              <input
-                type="text"
-                placeholder="Search orders..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full px-4 py-2 rounded-lg border border-[#2A9D8F]/20 bg-white focus:ring-2 focus:ring-[#2A9D8F] focus:border-transparent"
-              />
+        <div className="mb-8">
+          <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
+            <div className="flex flex-col sm:flex-row gap-6">
+              {/* Status Filter */}
+              <div className="flex-1">
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-sm font-medium text-[#2D3748]">Filter by Status</h3>
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => toggleAll(true)}
+                      className="text-xs text-[#2A9D8F] hover:text-[#40B4A6] transition-colors"
+                    >
+                      Select All
+                    </button>
+                    <button
+                      onClick={() => toggleAll(false)}
+                      className="text-xs text-[#2A9D8F] hover:text-[#40B4A6] transition-colors"
+                    >
+                      Clear All
+                    </button>
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  {Object.entries(statusLabels).map(([value, label]) => (
+                    <label
+                      key={value}
+                      className={`
+                        flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer transition-all
+                        ${selectedStatuses.has(value) 
+                          ? 'border-[#2A9D8F] bg-[#2A9D8F]/5 text-[#2D3748]' 
+                          : 'border-[#2A9D8F]/20 bg-white/50 text-[#4A5568]'
+                        }
+                        hover:border-[#2A9D8F] hover:bg-[#2A9D8F]/5
+                      `}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedStatuses.has(value)}
+                        onChange={() => toggleStatus(value)}
+                        className="h-4 w-4 rounded border-[#2A9D8F]/20 text-[#2A9D8F] focus:ring-[#2A9D8F]"
+                      />
+                      <span className="text-sm whitespace-nowrap">{label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {/* Search */}
+              <div className="sm:w-72">
+                <h3 className="text-sm font-medium text-[#2D3748] mb-3">Search Orders</h3>
+                <input
+                  type="text"
+                  placeholder="Search by order ID or customer..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full px-4 py-2 rounded-lg border border-[#2A9D8F]/20 bg-white focus:ring-2 focus:ring-[#2A9D8F] focus:border-transparent"
+                />
+              </div>
             </div>
-            <select
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value)}
-              className="px-4 py-2 rounded-lg border border-[#2A9D8F]/20 bg-white focus:ring-2 focus:ring-[#2A9D8F] focus:border-transparent"
-            >
-              <option value="all">All Statuses</option>
-              {Object.entries(statusLabels).map(([value, label]) => (
-                <option key={value} value={value}>{label}</option>
-              ))}
-            </select>
           </div>
         </div>
         
         {/* Results Summary */}
         <div className="mb-4 text-sm text-[#4A5568]">
           Showing {filteredOrders.length} {filteredOrders.length === 1 ? 'order' : 'orders'}
-          {statusFilter !== 'all' && ` with status "${statusLabels[statusFilter as keyof typeof statusLabels]}"`}
+          {selectedStatuses.size < Object.keys(statusLabels).length && 
+            ` with status${selectedStatuses.size === 1 ? '' : 'es'}: ${Array.from(selectedStatuses).map(s => statusLabels[s as keyof typeof statusLabels]).join(', ')}`}
           {searchTerm && ` matching "${searchTerm}"`}
         </div>
 
diff --git a/frontend/src/app/store/[id]/inventory/page.tsx b/frontend/src/app/store/[id]/inventory/page.tsx
new file mode 100644
index 0000000..bc8af32
--- /dev/null
+++ b/frontend/src/app/store/[id]/inventory/page.tsx
@@ -0,0 +1,365 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/app/contexts/auth';
+import { useStoreRoles } from '@/app/hooks/useStoreRoles';
+import { toast } from 'react-hot-toast';
+import { config } from '@/config';
+import { useRouter } from 'next/navigation';
+import { use } from 'react';
+import { PlusIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+
+interface StoreItem {
+  id: string;
+  name: string;
+  price: number;
+  description?: string;
+  imageUrl?: string;
+}
+
+interface EditItemModalProps {
+  item?: StoreItem;
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (item: Partial<StoreItem>) => void;
+}
+
+function EditItemModal({ item, isOpen, onClose, onSave }: EditItemModalProps) {
+  const [name, setName] = useState(item?.name || '');
+  const [price, setPrice] = useState(item?.price?.toString() || '');
+  const [description, setDescription] = useState(item?.description || '');
+
+  useEffect(() => {
+    if (isOpen) {
+      setName(item?.name || '');
+      setPrice(item?.price?.toString() || '');
+      setDescription(item?.description || '');
+    }
+  }, [isOpen, item]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({
+      name,
+      price: parseFloat(price),
+      description
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md">
+        <h2 className="text-xl font-bold text-[#2D3748] mb-4">
+          {item ? 'Edit Item' : 'Add New Item'}
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-[#4A5568]">
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-[#2A9D8F]/20 px-3 py-2 focus:border-[#2A9D8F] focus:ring focus:ring-[#2A9D8F]/50"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="price" className="block text-sm font-medium text-[#4A5568]">
+              Price
+            </label>
+            <input
+              type="number"
+              id="price"
+              value={price}
+              onChange={(e) => setPrice(e.target.value)}
+              step="0.01"
+              min="0"
+              className="mt-1 block w-full rounded-md border border-[#2A9D8F]/20 px-3 py-2 focus:border-[#2A9D8F] focus:ring focus:ring-[#2A9D8F]/50"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-[#4A5568]">
+              Description
+            </label>
+            <textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-[#2A9D8F]/20 px-3 py-2 focus:border-[#2A9D8F] focus:ring focus:ring-[#2A9D8F]/50"
+              rows={3}
+            />
+          </div>
+          <div className="flex justify-end gap-3 mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-[#4A5568] hover:text-[#2D3748] transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-[#2A9D8F] text-white rounded-md hover:bg-[#40B4A6] transition-colors"
+            >
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default function StoreInventory({ params }: { params: Promise<{ id: string }> }) {
+  const { id: storeId } = use(params);
+  const { user } = useAuth();
+  const { isAdmin, loading: rolesLoading } = useStoreRoles(storeId);
+  const [items, setItems] = useState<StoreItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [store, setStore] = useState<{ name: string } | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState<StoreItem | undefined>();
+  const [searchTerm, setSearchTerm] = useState('');
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!rolesLoading && user && !isAdmin) {
+      router.push(`/store/${storeId}`);
+      toast.error("You don't have permission to access this page");
+    }
+  }, [isAdmin, rolesLoading, router, storeId, user]);
+
+  useEffect(() => {
+    const fetchStoreAndItems = async () => {
+      try {
+        // Fetch store details
+        const storeResponse = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}`);
+        if (!storeResponse.ok) {
+          throw new Error('Failed to fetch store');
+        }
+        const storeData = await storeResponse.json();
+        setStore(storeData);
+
+        // Fetch store items
+        const itemsResponse = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items`);
+        if (!itemsResponse.ok) {
+          throw new Error('Failed to fetch store items');
+        }
+        const itemsData = await itemsResponse.json();
+        setItems(itemsData);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch store data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (isAdmin) {
+      fetchStoreAndItems();
+    }
+  }, [storeId, isAdmin]);
+
+  const handleAddItem = () => {
+    setEditingItem(undefined);
+    setIsModalOpen(true);
+  };
+
+  const handleEditItem = (item: StoreItem) => {
+    setEditingItem(item);
+    setIsModalOpen(true);
+  };
+
+  const handleSaveItem = async (itemData: Partial<StoreItem>) => {
+    try {
+      if (editingItem) {
+        // Update existing item
+        const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items/${editingItem.id}`, {
+          method: 'PATCH',
+          headers: {
+            'Authorization': `Bearer ${user?.token}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(itemData)
+        });
+
+        if (!response.ok) throw new Error('Failed to update item');
+
+        const updatedItem = await response.json();
+        setItems(items.map(item => item.id === editingItem.id ? updatedItem : item));
+        toast.success('Item updated successfully');
+      } else {
+        // Create new item
+        const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${user?.token}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(itemData)
+        });
+
+        if (!response.ok) throw new Error('Failed to create item');
+
+        const newItem = await response.json();
+        setItems([...items, newItem]);
+        toast.success('Item created successfully');
+      }
+
+      setIsModalOpen(false);
+    } catch (error) {
+      toast.error('Failed to save item');
+      console.error('Error saving item:', error);
+    }
+  };
+
+  const handleDeleteItem = async (itemId: string) => {
+    if (!confirm('Are you sure you want to delete this item?')) return;
+
+    try {
+      const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items/${itemId}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${user?.token}`
+        }
+      });
+
+      if (!response.ok) throw new Error('Failed to delete item');
+
+      setItems(items.filter(item => item.id !== itemId));
+      toast.success('Item deleted successfully');
+    } catch (error) {
+      toast.error('Failed to delete item');
+      console.error('Error deleting item:', error);
+    }
+  };
+
+  const filteredItems = items.filter(item =>
+    item.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  if (loading || rolesLoading) {
+    return (
+      <main className="min-h-screen bg-[#F5F2EB] pt-24">
+        <div className="container mx-auto px-4">
+          <div className="animate-pulse">
+            <div className="h-8 bg-white/50 rounded w-1/4 mb-8"></div>
+            <div className="space-y-4">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="h-16 bg-white/50 rounded-lg"></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  if (error) {
+    return (
+      <main className="min-h-screen bg-[#F5F2EB] pt-24">
+        <div className="container mx-auto px-4">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-[#2D3748]">Error</h2>
+            <p className="mt-2 text-[#4A5568]">{error}</p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-[#F5F2EB] pt-24">
+      <div className="container mx-auto px-4">
+        {/* Header Section */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between">
+            <div>
+              {store && (
+                <Link href={`/store/${storeId}`}>
+                  <h1 className="text-4xl font-bold text-[#2D3748] mb-2 hover:text-[#2A9D8F] transition-colors">{store.name}</h1>
+                </Link>
+              )}
+              <div className="flex items-center gap-4">
+                <p className="text-lg text-[#4A5568]">Inventory Management</p>
+                <Link
+                  href={`/store/${storeId}/dashboard`}
+                  className="text-[#2A9D8F] hover:text-[#40B4A6] transition-colors text-sm"
+                >
+                  Back to Dashboard
+                </Link>
+              </div>
+            </div>
+            <button
+              onClick={handleAddItem}
+              className="bg-[#2A9D8F] text-white px-4 py-2 rounded-lg hover:bg-[#40B4A6] transition-colors flex items-center gap-2"
+            >
+              <PlusIcon className="w-5 h-5" />
+              Add Item
+            </button>
+          </div>
+        </div>
+
+        {/* Search Bar */}
+        <div className="mb-6">
+          <input
+            type="text"
+            placeholder="Search items..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full max-w-md px-4 py-2 rounded-lg border border-[#2A9D8F]/20 bg-white focus:ring-2 focus:ring-[#2A9D8F] focus:border-transparent"
+          />
+        </div>
+
+        {/* Items Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredItems.map((item) => (
+            <div
+              key={item.id}
+              className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm"
+            >
+              <div className="flex justify-between items-start mb-4">
+                <div>
+                  <h3 className="text-lg font-semibold text-[#2D3748]">{item.name}</h3>
+                  <p className="text-[#4A5568]">${item.price.toFixed(2)}</p>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => handleEditItem(item)}
+                    className="p-2 text-[#4A5568] hover:text-[#2A9D8F] transition-colors"
+                  >
+                    <PencilIcon className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={() => handleDeleteItem(item.id)}
+                    className="p-2 text-[#4A5568] hover:text-red-500 transition-colors"
+                  >
+                    <TrashIcon className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+              {item.description && (
+                <p className="text-sm text-[#4A5568]">{item.description}</p>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Edit/Add Item Modal */}
+        <EditItemModal
+          item={editingItem}
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSave={handleSaveItem}
+        />
+      </div>
+    </main>
+  );
+} 
\ No newline at end of file
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index 5932599..14e4044 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -48,7 +48,8 @@ def user_auth_context(token: str):
     """Context manager to handle user authentication state"""
     try:
         pb_service.set_token(token)
-        yield
+        user = pb_service.get_user_from_token(token)
+        yield user
     finally:
         pb_service.clear_token()
 
@@ -93,6 +94,11 @@ class DeliveryQuoteRequest(BaseModel):
     item_id: str
     delivery_address: Dict
 
+class StoreItem(BaseModel):
+    name: str
+    price: float
+    description: Optional[str] = None
+
 app = FastAPI(
     title="LocalMart Backend",
     description="Backend API for LocalMart application",
@@ -598,11 +604,13 @@ def serialize_store(store) -> Dict:
     }
 
 def serialize_store_item(item) -> Dict:
-    """Extract item fields from a store item record"""
+    """Enhanced serializer for store items"""
     return {
-        "id": item.id,
-        "name": item.name,
-        "price": item.price
+        'id': item.id,
+        'name': item.name,
+        'price': float(item.price),
+        'description': item.description if hasattr(item, 'description') else None,
+        'store': item.store
     }
 
 @app.post("/api/v0/payment/setup-intent")
@@ -986,3 +994,93 @@ async def get_store_orders(store_id: str, request: Request):
                 status_code=500,
                 detail=f"Failed to fetch store orders: {str(e)}"
             )
+
+@app.post("/api/v0/stores/{store_id}/items", response_model=Dict)
+async def create_store_item(store_id: str, item: StoreItem, request: Request):
+    try:
+        token = get_token_from_request(request)
+        with user_auth_context(token) as user:
+            # Check if user has admin role for the store or is a global admin
+            if not 'admin' in user.roles:
+                store_roles = pb_service.pb.collection('store_roles').get_list(
+                    1, 1, 
+                    query_params={
+                        "filter": f'user="{user.id}" && store="{store_id}" && role="admin"'
+                    }
+                )
+                if not store_roles.items:
+                    raise HTTPException(status_code=403, detail="Not authorized to manage store items")
+
+            # Create the item
+            new_item = pb_service.pb.collection('store_items').create({
+                'name': item.name,
+                'price': item.price,
+                'description': item.description,
+                'store': store_id
+            })
+
+            return serialize_store_item(new_item)
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+@app.patch("/api/v0/stores/{store_id}/items/{item_id}", response_model=Dict)
+async def update_store_item(store_id: str, item_id: str, item: StoreItem, request: Request):
+    try:
+        token = get_token_from_request(request)
+        with user_auth_context(token) as user:
+            # Check if user has admin role for the store or is a global admin
+            if not 'admin' in user.roles:
+                store_roles = pb_service.pb.collection('store_roles').get_list(
+                    1, 1, 
+                    query_params={
+                        "filter": f'user="{user.id}" && store="{store_id}" && role="admin"'
+                    }
+                )
+                if not store_roles.items:
+                    raise HTTPException(status_code=403, detail="Not authorized to manage store items")
+
+            # Verify item belongs to store
+            existing_item = pb_service.pb.collection('store_items').get_one(item_id)
+            if existing_item.store != store_id:
+                raise HTTPException(status_code=404, detail="Item not found in store")
+
+            # Update the item
+            updated_item = pb_service.pb.collection('store_items').update(item_id, {
+                'name': item.name,
+                'price': item.price,
+                'description': item.description
+            })
+
+            return serialize_store_item(updated_item)
+    except Exception as e:
+        logger.error(f"Error updating store item: {str(e)}")
+        logger.error(f"Store ID: {store_id}, Item ID: {item_id}")
+        logger.error(f"Request data: {item.dict() if item else 'No item data'}")
+        raise HTTPException(status_code=400, detail=str(e))
+
+@app.delete("/api/v0/stores/{store_id}/items/{item_id}")
+async def delete_store_item(store_id: str, item_id: str, request: Request):
+    try:
+        token = get_token_from_request(request)
+        with user_auth_context(token) as user:
+            # Check if user has admin role for the store or is a global admin
+            if not 'admin' in user.roles:
+                store_roles = pb_service.pb.collection('store_roles').get_list(
+                    1, 1, 
+                    query_params={
+                        "filter": f'user="{user.id}" && store="{store_id}" && role="admin"'
+                    }
+                )
+                if not store_roles.items:
+                    raise HTTPException(status_code=403, detail="Not authorized to manage store items")
+
+            # Verify item belongs to store
+            existing_item = pb_service.pb.collection('store_items').get_one(item_id)
+            if existing_item.store != store_id:
+                raise HTTPException(status_code=404, detail="Item not found in store")
+
+            # Delete the item
+            pb_service.pb.collection('store_items').delete(item_id)
+            return {"success": True}
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
\ No newline at end of file

From 673124d9273015cfa596d4ccf20900a3e37fefd6 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Tue, 18 Feb 2025 20:13:15 -0500
Subject: [PATCH 12/27] Fix vendor dash for vendor admins

---
 db/pb_migrations/1739923684_updated_orders.js |  22 ++
 db/pb_migrations/1739923701_updated_orders.js |  20 ++
 db/pb_migrations/1739925919_updated_orders.js |  22 ++
 db/pb_migrations/1739925939_updated_orders.js |  20 ++
 db/pb_migrations/1739925955_updated_orders.js |  20 ++
 db/pb_migrations/1739926005_updated_orders.js |  22 ++
 db/pb_migrations/1739926077_updated_orders.js |  22 ++
 db/pb_migrations/1739926527_updated_orders.js |  22 ++
 .../1739927119_updated_order_items.js         |  24 +++
 frontend/src/components/CartModal.tsx         | 180 +++++++++-------
 python-backend/localmart_backend/main.py      | 200 ++++++++----------
 11 files changed, 384 insertions(+), 190 deletions(-)
 create mode 100644 db/pb_migrations/1739923684_updated_orders.js
 create mode 100644 db/pb_migrations/1739923701_updated_orders.js
 create mode 100644 db/pb_migrations/1739925919_updated_orders.js
 create mode 100644 db/pb_migrations/1739925939_updated_orders.js
 create mode 100644 db/pb_migrations/1739925955_updated_orders.js
 create mode 100644 db/pb_migrations/1739926005_updated_orders.js
 create mode 100644 db/pb_migrations/1739926077_updated_orders.js
 create mode 100644 db/pb_migrations/1739926527_updated_orders.js
 create mode 100644 db/pb_migrations/1739927119_updated_order_items.js

diff --git a/db/pb_migrations/1739923684_updated_orders.js b/db/pb_migrations/1739923684_updated_orders.js
new file mode 100644
index 0000000..563bbb8
--- /dev/null
+++ b/db/pb_migrations/1739923684_updated_orders.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ \"admin\" || user.id = @request.auth.id",
+    "viewRule": "@request.auth.roles ?~ \"admin\" || user.id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739923701_updated_orders.js b/db/pb_migrations/1739923701_updated_orders.js
new file mode 100644
index 0000000..612abba
--- /dev/null
+++ b/db/pb_migrations/1739923701_updated_orders.js
@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "viewRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739925919_updated_orders.js b/db/pb_migrations/1739925919_updated_orders.js
new file mode 100644
index 0000000..b7e55d5
--- /dev/null
+++ b/db/pb_migrations/1739925919_updated_orders.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739925939_updated_orders.js b/db/pb_migrations/1739925939_updated_orders.js
new file mode 100644
index 0000000..f8dd81c
--- /dev/null
+++ b/db/pb_migrations/1739925939_updated_orders.js
@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739925955_updated_orders.js b/db/pb_migrations/1739925955_updated_orders.js
new file mode 100644
index 0000000..bdfa4c5
--- /dev/null
+++ b/db/pb_migrations/1739925955_updated_orders.js
@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": ""
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739926005_updated_orders.js b/db/pb_migrations/1739926005_updated_orders.js
new file mode 100644
index 0000000..5ead215
--- /dev/null
+++ b/db/pb_migrations/1739926005_updated_orders.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role ?= 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role ?= 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739926077_updated_orders.js b/db/pb_migrations/1739926077_updated_orders.js
new file mode 100644
index 0000000..519f884
--- /dev/null
+++ b/db/pb_migrations/1739926077_updated_orders.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role ?= 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role ?= 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739926527_updated_orders.js b/db/pb_migrations/1739926527_updated_orders.js
new file mode 100644
index 0000000..6bb4b2a
--- /dev/null
+++ b/db/pb_migrations/1739926527_updated_orders.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = order_items_via_order.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = order_items_via_order.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.items.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739927119_updated_order_items.js b/db/pb_migrations/1739927119_updated_order_items.js
new file mode 100644
index 0000000..f6806c4
--- /dev/null
+++ b/db/pb_migrations/1739927119_updated_order_items.js
@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.role ?= 'admin' || \n@request.body.order.user.id = @request.auth.id",
+    "listRule": "@request.auth.role ?= 'admin' || \n@request.body.order.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.role ?= 'admin' || \n@request.body.order.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.role ?= 'admin' || @request.body.order.user.id = @request.auth.id",
+    "listRule": "@request.auth.role ?= 'admin' || @request.body.order.user.id = @request.auth.id",
+    "viewRule": "@request.auth.role ?= 'admin' || @request.body.order.user.id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/frontend/src/components/CartModal.tsx b/frontend/src/components/CartModal.tsx
index 46add91..5ddc41f 100644
--- a/frontend/src/components/CartModal.tsx
+++ b/frontend/src/components/CartModal.tsx
@@ -7,6 +7,7 @@ import { useCart } from '@/app/contexts/cart';
 import { useAuth } from '@/app/contexts/auth';
 import { toast } from 'react-hot-toast';
 import { config } from '@/config';
+import { useRouter } from 'next/navigation';
 
 interface CartModalProps {
   isOpen: boolean;
@@ -30,6 +31,7 @@ interface SavedCard {
 export default function CartModal({ isOpen, onClose }: CartModalProps) {
   const { items, updateQuantity, removeItem, totalPrice, clearCart } = useCart();
   const { user } = useAuth();
+  const router = useRouter();
   const [store, setStore] = useState<Store | null>(null);
   const [isCheckingOut, setIsCheckingOut] = useState(false);
   const [savedCards, setSavedCards] = useState<SavedCard[]>([]);
@@ -159,35 +161,30 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
   };
 
   const handleCheckout = async () => {
-    if (!user || !store || !selectedCardId || !orderSummary) {
-      return;
-    }
+    if (!user || !store || !selectedCardId || !orderSummary) return;
 
     setIsCheckingOut(true);
-
     try {
-      // Create order payload
-      const orderData = {
-        user_id: user.id,
-        store_id: store.id,
-        items: items.map(item => ({
-          store_item_id: item.id,
-          quantity: item.quantity,
-          price: item.price
-        })),
-        subtotal_amount: orderSummary.subtotalAmount,
-        tax_amount: orderSummary.taxAmount,
-        delivery_fee: orderSummary.deliveryFee,
-        total_amount: orderSummary.totalAmount,
-        payment_method_id: selectedCardId,
-        delivery_address: {
-          street_address: ["123 Main St"], // TODO: Get from user input
-          city: "New York",
-          state: "NY",
-          zip_code: "10001"
-        },
-        customer_notes: "" // TODO: Add notes field if needed
-      };
+      // Get user's profile for delivery address
+      const profileResponse = await fetch(`${config.apiUrl}/api/v0/auth/profile`, {
+        headers: {
+          'Authorization': `Bearer ${user.token}`
+        }
+      });
+
+      if (!profileResponse.ok) {
+        throw new Error('Failed to get user profile');
+      }
+
+      const profile = await profileResponse.json();
+
+      // Validate delivery address
+      if (!profile.street_1 || !profile.city || !profile.state || !profile.zip) {
+        toast.error('Please complete your delivery address in your profile');
+        onClose();
+        router.push('/profile');
+        return;
+      }
 
       // Create the order
       const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
@@ -196,27 +193,44 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
           'Content-Type': 'application/json',
           'Authorization': `Bearer ${user.token}`
         },
-        body: JSON.stringify(orderData)
+        body: JSON.stringify({
+          token: user.token,
+          user_id: user.id,
+          store_id: store.id,
+          payment_method_id: selectedCardId,
+          items: items.map(item => ({
+            store_item_id: item.id,
+            quantity: item.quantity,
+            price: item.price
+          })),
+          subtotal_amount: orderSummary.subtotalAmount,
+          tax_amount: orderSummary.taxAmount,
+          delivery_fee: orderSummary.deliveryFee,
+          total_amount: orderSummary.totalAmount,
+          delivery_address: {
+            street_address: [profile.street_1].concat(profile.street_2 ? [profile.street_2] : []),
+            city: profile.city,
+            state: profile.state,
+            zip_code: profile.zip,
+            country: 'US'
+          }
+        })
       });
 
       if (!response.ok) {
-        throw new Error('Failed to create order');
+        const error = await response.json();
+        throw new Error(error.detail || 'Failed to create order');
       }
 
       const data = await response.json();
       
-      // Clear the cart
-      clearCart();
-      
-      // Show success message
       toast.success('Order placed successfully!');
-      
-      // Close the modal
+      clearCart();
       onClose();
-
+      router.push('/orders');
     } catch (error) {
-      console.error('Checkout error:', error);
-      toast.error('Failed to place order. Please try again.');
+      console.error('Error creating order:', error);
+      toast.error(error instanceof Error ? error.message : 'Failed to create order');
     } finally {
       setIsCheckingOut(false);
       setShowCheckoutConfirm(false);
@@ -351,60 +365,62 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
                         </div>
                       )}
 
-                      <div className="flex justify-between text-lg font-medium text-[#2D3748]">
-                        <p>Subtotal</p>
-                        <p>${totalPrice.toFixed(2)}</p>
-                      </div>
-                      <p className="mt-0.5 body-small text-[#4A5568]">
-                        Shipping and taxes will be calculated at checkout.
-                      </p>
-                      <div className="mt-6">
-                        {showCheckoutConfirm ? (
-                          <div className="space-y-4">
-                            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 space-y-2">
-                              <div className="flex justify-between text-sm text-[#4A5568]">
-                                <span>Subtotal</span>
-                                <span>${orderSummary?.subtotalAmount.toFixed(2)}</span>
-                              </div>
-                              <div className="flex justify-between text-sm text-[#4A5568]">
-                                <span>Tax (8.875%)</span>
-                                <span>${orderSummary?.taxAmount.toFixed(2)}</span>
-                              </div>
-                              <div className="flex justify-between text-sm text-[#4A5568]">
-                                <span>Delivery Fee</span>
-                                <span>${orderSummary?.deliveryFee.toFixed(2)}</span>
-                              </div>
-                              <div className="flex justify-between text-base font-medium text-[#2D3748] pt-2 border-t border-[#2A9D8F]/10">
-                                <span>Total</span>
-                                <span>${orderSummary?.totalAmount.toFixed(2)}</span>
-                              </div>
+                      {showCheckoutConfirm ? (
+                        <div className="space-y-4">
+                          <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 space-y-2">
+                            <div className="flex justify-between text-sm text-[#4A5568]">
+                              <span>Subtotal</span>
+                              <span>${orderSummary?.subtotalAmount.toFixed(2)}</span>
+                            </div>
+                            <div className="flex justify-between text-sm text-[#4A5568]">
+                              <span>Tax (8.875%)</span>
+                              <span>${orderSummary?.taxAmount.toFixed(2)}</span>
+                            </div>
+                            <div className="flex justify-between text-sm text-[#4A5568]">
+                              <span>Delivery Fee</span>
+                              <span>${orderSummary?.deliveryFee.toFixed(2)}</span>
                             </div>
-                            <div className="flex gap-3">
-                              <button
-                                onClick={() => setShowCheckoutConfirm(false)}
-                                className="flex-1 rounded-md border border-[#2A9D8F] bg-white px-6 py-3 text-base font-medium text-[#2A9D8F] shadow-sm hover:bg-[#2A9D8F]/5"
-                              >
-                                Back
-                              </button>
-                              <button
-                                onClick={handleCheckout}
-                                disabled={isCheckingOut}
-                                className="flex-1 rounded-md border border-transparent bg-[#2A9D8F] px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-[#40B4A6] active:bg-[#1E7268] disabled:opacity-50 disabled:cursor-not-allowed"
-                              >
-                                {isCheckingOut ? 'Processing...' : 'Submit Order'}
-                              </button>
+                            <div className="flex justify-between text-base font-medium text-[#2D3748] pt-2 border-t border-[#2A9D8F]/10">
+                              <span>Total</span>
+                              <span>${orderSummary?.totalAmount.toFixed(2)}</span>
                             </div>
                           </div>
-                        ) : (
+                          <div className="flex gap-3">
+                            <button
+                              onClick={() => setShowCheckoutConfirm(false)}
+                              className="flex-1 rounded-md border border-[#2A9D8F] bg-white px-6 py-3 text-base font-medium text-[#2A9D8F] shadow-sm hover:bg-[#2A9D8F]/5"
+                            >
+                              Back
+                            </button>
+                            <button
+                              onClick={handleCheckout}
+                              disabled={isCheckingOut}
+                              className="flex-1 rounded-md border border-transparent bg-[#2A9D8F] px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-[#40B4A6] active:bg-[#1E7268] disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                              {isCheckingOut ? 'Processing...' : 'Submit Order'}
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <>
+                          <div className="mb-4">
+                            <div className="flex justify-between text-sm text-[#4A5568]">
+                              <span>Items Subtotal</span>
+                              <span>${totalPrice.toFixed(2)}</span>
+                            </div>
+                            <p className="mt-1 text-sm text-[#4A5568]">
+                              Tax and delivery fee will be calculated at checkout.
+                            </p>
+                          </div>
                           <button
                             onClick={handleCheckoutClick}
                             disabled={isCheckingOut || items.length === 0 || savedCards.length === 0}
                             className="w-full flex items-center justify-center rounded-md border border-transparent bg-[#2A9D8F] px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-[#40B4A6] active:bg-[#1E7268] disabled:opacity-50 disabled:cursor-not-allowed"
                           >
-                            {isCheckingOut ? 'Processing...' : 'Checkout'}
+                            {isCheckingOut ? 'Processing...' : 'Go to checkout'}
                           </button>
-                        )}
-                      </div>
+                        </>
+                      )}
                     </div>
                   </div>
                 </Dialog.Panel>
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index 14e4044..6e5795f 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -44,14 +44,22 @@
 STRIPE_WEBHOOK_SECRET = Config.STRIPE_WEBHOOK_SECRET
 
 @contextmanager
-def user_auth_context(token: str):
-    """Context manager to handle user authentication state"""
+def user_auth_context(token: Optional[str]):
+    """Context manager to handle user authentication for PocketBase operations"""
+    if not token:
+        raise HTTPException(status_code=401, detail="No authorization token")
+    
     try:
-        pb_service.set_token(token)
+        # Verify the user's token
+        token = token.split(' ')[1] if token.startswith('Bearer ') else token
         user = pb_service.get_user_from_token(token)
+        if not user:
+            raise HTTPException(status_code=401, detail="Invalid token")
+        
         yield user
-    finally:
-        pb_service.clear_token()
+    except Exception as e:
+        logger.error(f"Auth error: {str(e)}")
+        raise HTTPException(status_code=401, detail="Authentication failed")
 
 def get_token_from_request(request: Request) -> str:
     """Extract and validate the auth token from a request"""
@@ -242,63 +250,64 @@ async def get_delivery_quote(request: DeliveryQuoteRequest):
 async def create_order(request: Dict):
     """Create a new order with basic status tracking"""
     try:
-        # Get the payment method
-        payment_method = pb_service.get_one('payment_methods', request['payment_method_id'])
-        if not payment_method:
-            raise HTTPException(status_code=400, detail="Invalid payment method")
-
-        # Get the customer
-        customers = pb_service.get_list(
-            'stripe_customers',
-            query_params={"filter": f'user = "{request["user_id"]}"'}
-        )
-        if not customers.items:
-            raise HTTPException(status_code=400, detail="No Stripe customer found")
-        
-        stripe_customer_id = customers.items[0].stripe_customer_id
-
-        # Create a payment intent
-        payment_intent = stripe.PaymentIntent.create(
-            amount=int(request['total_amount'] * 100),  # Convert to cents
-            currency='usd',
-            customer=stripe_customer_id,
-            payment_method=payment_method.stripe_payment_method_id,
-            off_session=True,
-            confirm=True,
-        )
+        # Get the payment method within the user's auth context
+        with user_auth_context(request.get('token')) as user:
+            payment_method = pb_service.get_one('payment_methods', request['payment_method_id'])
+            if not payment_method:
+                raise HTTPException(status_code=400, detail="Invalid payment method")
+
+            # Get the customer
+            customers = pb_service.get_list(
+                'stripe_customers',
+                query_params={"filter": f'user = "{request["user_id"]}"'}
+            )
+            if not customers.items:
+                raise HTTPException(status_code=400, detail="No Stripe customer found")
+            
+            stripe_customer_id = customers.items[0].stripe_customer_id
 
-        # Create the order in PocketBase with simplified fields
-        order = pb_service.create('orders', {
-            'user': request['user_id'],
-            'store': request['store_id'],
-            'status': 'pending',  # Initial status
-            'payment_status': 'pending',  # Initial payment status
-            'payment_method': payment_method.id,  # Link to payment method
-            'stripe_payment_intent_id': payment_intent.id,
-            'subtotal_amount': request['subtotal_amount'],
-            'tax_amount': request['tax_amount'],
-            'delivery_fee': request['delivery_fee'],
-            'total_amount': request['total_amount'],
-            'delivery_address': request['delivery_address'],
-            'customer_notes': request.get('customer_notes', ''),
-        })
+            # Create a payment intent
+            payment_intent = stripe.PaymentIntent.create(
+                amount=int(request['total_amount'] * 100),  # Convert to cents
+                currency='usd',
+                customer=stripe_customer_id,
+                payment_method=payment_method.stripe_payment_method_id,
+                off_session=True,
+                confirm=True,
+            )
 
-        # Create order items
-        for item in request['items']:
-            pb_service.create('order_items', {
-                'order': order.id,
-                'store_item': item['store_item_id'],
-                'quantity': item['quantity'],
-                'price_at_time': item['price'],
-                'total_price': item['price'] * item['quantity']
+            # Create the order in PocketBase with simplified fields
+            order = pb_service.create('orders', {
+                'user': request['user_id'],
+                'store': request['store_id'],
+                'status': 'pending',  # Initial status
+                'payment_status': 'pending',  # Initial payment status
+                'payment_method': payment_method.id,  # Link to payment method
+                'stripe_payment_intent_id': payment_intent.id,
+                'subtotal_amount': request['subtotal_amount'],
+                'tax_amount': request['tax_amount'],
+                'delivery_fee': request['delivery_fee'],
+                'total_amount': request['total_amount'],
+                'delivery_address': request['delivery_address'],
+                'customer_notes': request.get('customer_notes', ''),
             })
 
-        return {
-            'order_id': order.id,
-            'status': 'pending',
-            'payment_intent_client_secret': payment_intent.client_secret,
-            'message': 'Order created successfully'
-        }
+            # Create order items
+            for item in request['items']:
+                pb_service.create('order_items', {
+                    'order': order.id,
+                    'store_item': item['store_item_id'],
+                    'quantity': item['quantity'],
+                    'price_at_time': item['price'],
+                    'total_price': item['price'] * item['quantity']
+                })
+
+            return {
+                'order_id': order.id,
+                'status': 'pending',
+                'payment_intent_client_secret': payment_intent.client_secret,
+                'message': 'Order created successfully'
+            }
 
     except stripe.error.StripeError as e:
         logger.error(f"Stripe error creating order: {str(e)}")
@@ -369,22 +378,9 @@ async def get_user_orders(request: Request):
                 })
 
             user = order.expand.get('user', {})
-
-            if not user:
-                print(f"Order: {order}")
-                print(f"Order expand: {order.expand}")
-
-            # Get user info from expanded user record
             customer_name = f"{user.first_name} {user.last_name}".strip() if user else "Unknown"
             
-            # Format user's address
-            delivery_address = {
-                'street_address': [user.street_1] + ([user.street_2] if user.street_2 else []),
-                'city': user.city,
-                'state': user.state,
-                'zip_code': user.zip,
-                'country': 'US'
-            } if user else None
+            delivery_address = order.delivery_address if hasattr(order, 'delivery_address') else None
 
             formatted_order = {
                 'id': order.id,
@@ -900,11 +896,11 @@ async def get_store_orders(store_id: str, request: Request):
                 store_roles = pb_service.get_list(
                     'store_roles',
                     query_params={
-                        "filter": f'user = "{user_id}" && store = "{store_id}"'
+                        "filter": f'user = "{user_id}" && store = "{store_id}" && role = "admin"'
                     }
                 )
                 
-                if not any(sr.role == 'admin' for sr in store_roles.items):
+                if not store_roles.items:
                     raise HTTPException(
                         status_code=403,
                         detail="You don't have permission to view this store's orders"
@@ -915,7 +911,8 @@ async def get_store_orders(store_id: str, request: Request):
                 'orders',
                 query_params={
                     "sort": "-created",
-                    "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store,user"
+                    "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store,user",
+                    "filter": f'order_items_via_order.store_item.store = "{store_id}"'
                 }
             )
 
@@ -925,8 +922,7 @@ async def get_store_orders(store_id: str, request: Request):
                 stores_dict = {}
                 order_items = order.expand.get('order_items_via_order', [])
 
-                # Check if any order items belong to this store
-                has_store_items = False
+                # Process items for this store
                 for item in order_items:
                     if not hasattr(item, 'expand') or not item.expand.get('store_item'):
                         continue
@@ -936,10 +932,6 @@ async def get_store_orders(store_id: str, request: Request):
                         continue
 
                     store = store_item.expand['store']
-                    if store.id != store_id:  # Skip items not from this store
-                        continue
-
-                    has_store_items = True
                     store_id_key = store.id
                     if store_id_key not in stores_dict:
                         stores_dict[store_id_key] = {
@@ -957,33 +949,25 @@ async def get_store_orders(store_id: str, request: Request):
                         'price': item.price_at_time
                     })
 
-                # Only include orders that have items from this store
-                if has_store_items:
-                    user = order.expand.get('user', {})
-                    customer_name = f"{user.first_name} {user.last_name}".strip() if user else "Unknown"
-                    
-                    delivery_address = {
-                        'street_address': [user.street_1] + ([user.street_2] if user.street_2 else []),
-                        'city': user.city,
-                        'state': user.state,
-                        'zip_code': user.zip,
-                        'country': 'US'
-                    } if user else None
-
-                    formatted_order = {
-                        'id': order.id,
-                        'created': order.created,
-                        'status': order.status,
-                        'payment_status': order.payment_status,
-                        'delivery_fee': order.delivery_fee,
-                        'total_amount': order.total_amount,
-                        'tax_amount': order.tax_amount,
-                        'customer_name': customer_name,
-                        'customer_phone': getattr(user, 'phone_number', None),
-                        'delivery_address': delivery_address,
-                        'stores': list(stores_dict.values())
-                    }
-                    formatted_orders.append(formatted_order)
+                user = order.expand.get('user', {})
+                customer_name = f"{user.first_name} {user.last_name}".strip() if user else "Unknown"
+                
+                delivery_address = order.delivery_address if hasattr(order, 'delivery_address') else None
+
+                formatted_order = {
+                    'id': order.id,
+                    'created': order.created,
+                    'status': order.status,
+                    'payment_status': order.payment_status,
+                    'delivery_fee': order.delivery_fee,
+                    'total_amount': order.total_amount,
+                    'tax_amount': order.tax_amount,
+                    'customer_name': customer_name,
+                    'customer_phone': getattr(user, 'phone_number', None),
+                    'delivery_address': delivery_address,
+                    'stores': list(stores_dict.values())
+                }
+                formatted_orders.append(formatted_order)
 
             return formatted_orders
         except HTTPException:

From 19917d1f54342f4fcdbaa1653c91cc7819e62231 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Tue, 18 Feb 2025 20:36:18 -0500
Subject: [PATCH 13/27] Use the json delivery address, make order history
 accordions

---
 frontend/src/app/orders/page.tsx              |  28 ++-
 .../src/app/store/[id]/dashboard/page.tsx     |  13 +-
 frontend/src/components/CartModal.tsx         |   3 +-
 frontend/src/components/OrderHistoryModal.tsx | 189 +++++++++---------
 python-backend/localmart_backend/main.py      |  20 +-
 5 files changed, 139 insertions(+), 114 deletions(-)

diff --git a/frontend/src/app/orders/page.tsx b/frontend/src/app/orders/page.tsx
index 124f7c3..e24fbc2 100644
--- a/frontend/src/app/orders/page.tsx
+++ b/frontend/src/app/orders/page.tsx
@@ -6,6 +6,7 @@ import { toast } from 'react-hot-toast';
 import { config } from '@/config';
 import { CurrencyDollarIcon, ShoppingBagIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import { useRouter } from 'next/navigation';
 
 interface OrderItem {
   id: string;
@@ -25,14 +26,14 @@ interface Order {
   payment_status: string;
   delivery_fee: number;
   total_amount: number;
-  customer_name: string;
-  customer_phone?: string;
   delivery_address: {
     street_address: string[];
     city: string;
     state: string;
     zip_code: string;
     country: string;
+    customer_name: string;
+    customer_phone?: string;
   } | null;
   stores: Array<{
     store: {
@@ -188,6 +189,7 @@ export default function OrdersDashboard() {
   const [error, setError] = useState<string | null>(null);
   const [selectedStatuses, setSelectedStatuses] = useState<Set<string>>(new Set(Object.keys(statusLabels)));
   const [searchTerm, setSearchTerm] = useState('');
+  const router = useRouter();
 
   const metrics = calculateMetrics(orders);
 
@@ -197,7 +199,7 @@ export default function OrdersDashboard() {
     const searchLower = searchTerm.toLowerCase();
     const matchesSearch = !searchTerm || 
       order.id.toLowerCase().includes(searchLower) ||
-      order.customer_name.toLowerCase().includes(searchLower);
+      order.delivery_address?.customer_name.toLowerCase().includes(searchLower);
     return matchesStatus && matchesSearch;
   });
 
@@ -219,9 +221,25 @@ export default function OrdersDashboard() {
     setSelectedStatuses(new Set(select ? Object.keys(statusLabels) : []));
   };
 
+  // Check for global admin access
+  useEffect(() => {
+    if (!loading && user) {
+      const isGlobalAdmin = user.roles?.includes('admin');
+      if (!isGlobalAdmin) {
+        router.push('/');
+        toast.error("You don't have permission to access this page");
+      }
+    }
+  }, [loading, user, router]);
+
   useEffect(() => {
     const fetchOrders = async () => {
       try {
+        // Only fetch if user is a global admin
+        if (!user?.roles?.includes('admin')) {
+          return;
+        }
+
         const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
           headers: {
             'Authorization': `Bearer ${user?.token}`,
@@ -537,10 +555,10 @@ export default function OrdersDashboard() {
                       {formatDateTime(order.created)}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
-                      {order.customer_name}
+                      {order.delivery_address?.customer_name || '-'}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-[#4A5568]">
-                      {order.customer_phone || '-'}
+                      {order.delivery_address?.customer_phone || '-'}
                     </td>
                     <td className="px-6 py-4 text-sm text-[#4A5568]">
                       {order.delivery_address ? (
diff --git a/frontend/src/app/store/[id]/dashboard/page.tsx b/frontend/src/app/store/[id]/dashboard/page.tsx
index 75ebc1d..178e82d 100644
--- a/frontend/src/app/store/[id]/dashboard/page.tsx
+++ b/frontend/src/app/store/[id]/dashboard/page.tsx
@@ -33,14 +33,14 @@ interface Order {
   payment_status: string;
   delivery_fee: number;
   total_amount: number;
-  customer_name: string;
-  customer_phone?: string;
   delivery_address: {
     street_address: string[];
     city: string;
     state: string;
     zip_code: string;
     country: string;
+    customer_name: string;
+    customer_phone?: string;
   } | null;
   stores: Store[];
 }
@@ -214,6 +214,9 @@ function calculateDailyOrderCounts(orders: Order[]) {
     }
   });
 
+  // Sort dailyCounts by timestamp to ensure chronological order
+  dailyCounts.sort((a, b) => a.timestamp - b.timestamp);
+
   return {
     data: dailyCounts,
     items: Array.from(uniqueItems)
@@ -324,7 +327,7 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
       const lowercaseSearch = searchTerm.toLowerCase();
       result = result.filter(order => 
         order.id.toLowerCase().includes(lowercaseSearch) ||
-        order.customer_name.toLowerCase().includes(lowercaseSearch)
+        order.delivery_address?.customer_name.toLowerCase().includes(lowercaseSearch)
       );
     }
     
@@ -620,10 +623,10 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
                     {formatDateTime(order.created)}
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-sm text-[#2D3748]">
-                    {order.customer_name}
+                    {order.delivery_address?.customer_name || '-'}
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-sm text-[#4A5568]">
-                    {order.customer_phone || '-'}
+                    {order.delivery_address?.customer_phone || '-'}
                   </td>
                   <td className="px-6 py-4 text-sm text-[#4A5568]">
                     {order.delivery_address ? (
diff --git a/frontend/src/components/CartModal.tsx b/frontend/src/components/CartModal.tsx
index 5ddc41f..d819082 100644
--- a/frontend/src/components/CartModal.tsx
+++ b/frontend/src/components/CartModal.tsx
@@ -227,7 +227,8 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
       toast.success('Order placed successfully!');
       clearCart();
       onClose();
-      router.push('/orders');
+      // Instead of redirecting, trigger the order history modal to open
+      document.dispatchEvent(new Event('openOrderHistory'));
     } catch (error) {
       console.error('Error creating order:', error);
       toast.error(error instanceof Error ? error.message : 'Failed to create order');
diff --git a/frontend/src/components/OrderHistoryModal.tsx b/frontend/src/components/OrderHistoryModal.tsx
index b0d6e0c..b762dbb 100644
--- a/frontend/src/components/OrderHistoryModal.tsx
+++ b/frontend/src/components/OrderHistoryModal.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, Transition, Disclosure } from '@headlessui/react'
 import { Fragment } from 'react'
 import { formatCurrency } from '@/utils/currency'
-import { ClockIcon, MapPinIcon, BuildingStorefrontIcon } from '@heroicons/react/24/outline'
+import { ClockIcon, MapPinIcon, BuildingStorefrontIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
 
 const formatDateTime = (isoString: string) => {
   // Parse the UTC time string and create a Date object
@@ -140,100 +140,109 @@ export default function OrderHistoryModal({ isOpen, onClose, orders }: OrderHist
                   Order History
                 </Dialog.Title>
 
-                <div className="space-y-6">
+                <div className="space-y-4">
                   {orders.map((order) => (
-                    <div
-                      key={order.id}
-                      className="bg-white/80 backdrop-blur-sm rounded-lg p-6 hover:shadow-md transition-shadow"
-                    >
-                      {/* Order Header */}
-                      <div className="flex justify-between items-start border-b border-[#2A9D8F]/10 pb-4 mb-4">
-                        <div>
-                          <div className="flex items-center gap-2">
-                            <p className="font-medium text-[#2D3748]">Order #{order.id.slice(-6)}</p>
-                            <span
-                              className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}
-                            >
-                              {getStatusLabel(order.status)}
-                            </span>
-                            <span
-                              className={`px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}
-                            >
-                              {getPaymentStatusLabel(order.payment_status)}
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-2 mt-1 text-sm text-[#4A5568]">
-                            <ClockIcon className="w-4 h-4" />
-                            <time dateTime={order.created}>
-                              {formatDateTime(order.created)}
-                            </time>
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* Delivery Address Section */}
-                      <div className="mb-4">
-                        <h4 className="font-medium text-[#2D3748] mb-2">Delivery Address</h4>
-                        <div className="flex items-start gap-2 text-sm text-[#4A5568]">
-                          <MapPinIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
-                          <div>
-                            {order.delivery_address ? (
-                              <>
-                                <p>{order.delivery_address.street_address.filter(Boolean).join(', ')}</p>
-                                <p>{order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}</p>
-                              </>
-                            ) : (
-                              <p className="italic">No address available</p>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* Order Items by Store */}
-                      <div className="space-y-4 border-t border-[#2A9D8F]/10 pt-4">
-                        {order.stores.map((store) => (
-                          <div key={store.store.id}>
-                            <div className="flex items-center gap-2 mb-2">
-                              <BuildingStorefrontIcon className="w-4 h-4 text-[#2A9D8F]" />
-                              <h4 className="font-medium text-[#2D3748]">{store.store.name}</h4>
+                    <Disclosure key={order.id}>
+                      {({ open }) => (
+                        <div className="bg-white/80 backdrop-blur-sm rounded-lg hover:shadow-md transition-shadow">
+                          <Disclosure.Button className="w-full px-6 py-4 flex justify-between items-start">
+                            <div>
+                              <div className="flex items-center gap-2">
+                                <p className="font-medium text-[#2D3748]">Order #{order.id.slice(-6)}</p>
+                                <span
+                                  className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}
+                                >
+                                  {getStatusLabel(order.status)}
+                                </span>
+                                <span
+                                  className={`px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}
+                                >
+                                  {getPaymentStatusLabel(order.payment_status)}
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-2 mt-1 text-sm text-[#4A5568]">
+                                <ClockIcon className="w-4 h-4" />
+                                <time dateTime={order.created}>
+                                  {formatDateTime(order.created)}
+                                </time>
+                              </div>
                             </div>
-                            <div className="bg-white/50 rounded-lg p-3">
-                              {store.items.map((item) => (
-                                <div key={item.id} className="flex justify-between py-1 text-sm">
-                                  <div className="flex gap-2">
-                                    <span className="text-[#4A5568] font-medium">{item.quantity}×</span>
-                                    <span className="text-[#2D3748]">{item.name}</span>
+                            <ChevronUpIcon
+                              className={`${
+                                open ? 'rotate-180 transform' : ''
+                              } h-5 w-5 text-[#2A9D8F]`}
+                            />
+                          </Disclosure.Button>
+                          
+                          <Disclosure.Panel className="px-6 pb-4">
+                            <div className="border-t border-[#2A9D8F]/10 pt-4">
+                              {/* Delivery Address Section */}
+                              <div className="mb-4">
+                                <h4 className="font-medium text-[#2D3748] mb-2">Delivery Address</h4>
+                                <div className="flex items-start gap-2 text-sm text-[#4A5568]">
+                                  <MapPinIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                                  <div>
+                                    {order.delivery_address ? (
+                                      <>
+                                        <p>{order.delivery_address.street_address.filter(Boolean).join(', ')}</p>
+                                        <p>{order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}</p>
+                                      </>
+                                    ) : (
+                                      <p className="italic">No address available</p>
+                                    )}
                                   </div>
-                                  <span className="text-[#4A5568]">{formatCurrency(item.price * item.quantity)}</span>
                                 </div>
-                              ))}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
+                              </div>
 
-                      {/* Price Breakdown */}
-                      <div className="mt-4 space-y-2 text-sm border-t border-[#2A9D8F]/10 pt-4">
-                        <div className="flex justify-between items-center">
-                          <span className="text-[#4A5568]">Subtotal</span>
-                          <span className="text-[#2D3748]">{formatCurrency(order.stores.reduce((acc, store) => 
-                            acc + store.items.reduce((itemAcc, item) => itemAcc + (item.price * item.quantity), 0), 0
-                          ))}</span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-[#4A5568]">Tax</span>
-                          <span className="text-[#2D3748]">{formatCurrency(order.tax_amount || 0)}</span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-[#4A5568]">Delivery Fee</span>
-                          <span className="text-[#2D3748]">{formatCurrency(order.delivery_fee)}</span>
-                        </div>
-                        <div className="flex justify-between items-center pt-2 border-t border-[#2A9D8F]/10 font-medium">
-                          <span className="text-[#2D3748]">Total</span>
-                          <span className="text-[#2D3748]">{formatCurrency(order.total_amount)}</span>
+                              {/* Order Items by Store */}
+                              <div className="space-y-4">
+                                {order.stores.map((store) => (
+                                  <div key={store.store.id}>
+                                    <div className="flex items-center gap-2 mb-2">
+                                      <BuildingStorefrontIcon className="w-4 h-4 text-[#2A9D8F]" />
+                                      <h4 className="font-medium text-[#2D3748]">{store.store.name}</h4>
+                                    </div>
+                                    <div className="bg-white/50 rounded-lg p-3">
+                                      {store.items.map((item) => (
+                                        <div key={item.id} className="flex justify-between py-1 text-sm">
+                                          <div className="flex gap-2">
+                                            <span className="text-[#4A5568] font-medium">{item.quantity}×</span>
+                                            <span className="text-[#2D3748]">{item.name}</span>
+                                          </div>
+                                          <span className="text-[#4A5568]">{formatCurrency(item.price * item.quantity)}</span>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
+
+                              {/* Price Breakdown */}
+                              <div className="mt-4 space-y-2 text-sm border-t border-[#2A9D8F]/10 pt-4">
+                                <div className="flex justify-between items-center">
+                                  <span className="text-[#4A5568]">Subtotal</span>
+                                  <span className="text-[#2D3748]">{formatCurrency(order.stores.reduce((acc, store) => 
+                                    acc + store.items.reduce((itemAcc, item) => itemAcc + (item.price * item.quantity), 0), 0
+                                  ))}</span>
+                                </div>
+                                <div className="flex justify-between items-center">
+                                  <span className="text-[#4A5568]">Tax</span>
+                                  <span className="text-[#2D3748]">{formatCurrency(order.tax_amount || 0)}</span>
+                                </div>
+                                <div className="flex justify-between items-center">
+                                  <span className="text-[#4A5568]">Delivery Fee</span>
+                                  <span className="text-[#2D3748]">{formatCurrency(order.delivery_fee)}</span>
+                                </div>
+                                <div className="flex justify-between items-center pt-2 border-t border-[#2A9D8F]/10 font-medium">
+                                  <span className="text-[#2D3748]">Total</span>
+                                  <span className="text-[#2D3748]">{formatCurrency(order.total_amount)}</span>
+                                </div>
+                              </div>
+                            </div>
+                          </Disclosure.Panel>
                         </div>
-                      </div>
-                    </div>
+                      )}
+                    </Disclosure>
                   ))}
 
                   {orders.length === 0 && (
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index 6e5795f..a8feca6 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -288,7 +288,11 @@ async def create_order(request: Dict):
                 'tax_amount': request['tax_amount'],
                 'delivery_fee': request['delivery_fee'],
                 'total_amount': request['total_amount'],
-                'delivery_address': request['delivery_address'],
+                'delivery_address': {
+                    **request['delivery_address'],
+                    'customer_name': f"{user.first_name} {user.last_name}".strip(),
+                    'customer_phone': getattr(user, 'phone_number', None)
+                },
                 'customer_notes': request.get('customer_notes', ''),
             })
 
@@ -337,7 +341,7 @@ async def get_user_orders(request: Request):
             query_params={
                 "filter": f'user = "{user_id}"' if not is_admin else '',
                 "sort": "-created",
-                "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store,user"
+                "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store"
             }
         )
 
@@ -377,9 +381,6 @@ async def get_user_orders(request: Request):
                     'price': item.price_at_time
                 })
 
-            user = order.expand.get('user', {})
-            customer_name = f"{user.first_name} {user.last_name}".strip() if user else "Unknown"
-            
             delivery_address = order.delivery_address if hasattr(order, 'delivery_address') else None
 
             formatted_order = {
@@ -390,8 +391,6 @@ async def get_user_orders(request: Request):
                 'delivery_fee': order.delivery_fee,
                 'total_amount': order.total_amount,
                 'tax_amount': order.tax_amount,
-                'customer_name': customer_name,
-                'customer_phone': getattr(user, 'phone_number', None),
                 'delivery_address': delivery_address,
                 'stores': list(stores_dict.values())
             }
@@ -911,7 +910,7 @@ async def get_store_orders(store_id: str, request: Request):
                 'orders',
                 query_params={
                     "sort": "-created",
-                    "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store,user",
+                    "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store",
                     "filter": f'order_items_via_order.store_item.store = "{store_id}"'
                 }
             )
@@ -949,9 +948,6 @@ async def get_store_orders(store_id: str, request: Request):
                         'price': item.price_at_time
                     })
 
-                user = order.expand.get('user', {})
-                customer_name = f"{user.first_name} {user.last_name}".strip() if user else "Unknown"
-                
                 delivery_address = order.delivery_address if hasattr(order, 'delivery_address') else None
 
                 formatted_order = {
@@ -962,8 +958,6 @@ async def get_store_orders(store_id: str, request: Request):
                     'delivery_fee': order.delivery_fee,
                     'total_amount': order.total_amount,
                     'tax_amount': order.tax_amount,
-                    'customer_name': customer_name,
-                    'customer_phone': getattr(user, 'phone_number', None),
                     'delivery_address': delivery_address,
                     'stores': list(stores_dict.values())
                 }

From 699626b93dde5170462f63f4bffa533647b51384 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Tue, 18 Feb 2025 20:44:51 -0500
Subject: [PATCH 14/27] Fix inventory management for store admins

---
 .../1739929352_updated_store_items.js         | 24 ++++++++
 .../1739929423_updated_store_items.js         | 24 ++++++++
 python-backend/localmart_backend/main.py      | 56 +++++++++----------
 3 files changed, 73 insertions(+), 31 deletions(-)
 create mode 100644 db/pb_migrations/1739929352_updated_store_items.js
 create mode 100644 db/pb_migrations/1739929423_updated_store_items.js

diff --git a/db/pb_migrations/1739929352_updated_store_items.js b/db/pb_migrations/1739929352_updated_store_items.js
new file mode 100644
index 0000000..53c5250
--- /dev/null
+++ b/db/pb_migrations/1739929352_updated_store_items.js
@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1842453536")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "deleteRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "updateRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1842453536")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "deleteRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')",
+    "updateRule": "@request.auth.roles ?~ 'admin' || (@collection.store_roles.user.id = @request.auth.id && @collection.store_roles.store.id = @request.body.store_item.store.id && @collection.store_roles.role = 'admin')"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739929423_updated_store_items.js b/db/pb_migrations/1739929423_updated_store_items.js
new file mode 100644
index 0000000..fee9dbb
--- /dev/null
+++ b/db/pb_migrations/1739929423_updated_store_items.js
@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1842453536")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "deleteRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "updateRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1842453536")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "deleteRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "updateRule": "@request.auth.roles ?~ 'admin' ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = @request.body.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index a8feca6..fe8a435 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -1003,38 +1003,32 @@ async def create_store_item(store_id: str, item: StoreItem, request: Request):
 
 @app.patch("/api/v0/stores/{store_id}/items/{item_id}", response_model=Dict)
 async def update_store_item(store_id: str, item_id: str, item: StoreItem, request: Request):
-    try:
-        token = get_token_from_request(request)
-        with user_auth_context(token) as user:
-            # Check if user has admin role for the store or is a global admin
-            if not 'admin' in user.roles:
-                store_roles = pb_service.pb.collection('store_roles').get_list(
-                    1, 1, 
-                    query_params={
-                        "filter": f'user="{user.id}" && store="{store_id}" && role="admin"'
-                    }
-                )
-                if not store_roles.items:
-                    raise HTTPException(status_code=403, detail="Not authorized to manage store items")
-
-            # Verify item belongs to store
-            existing_item = pb_service.pb.collection('store_items').get_one(item_id)
-            if existing_item.store != store_id:
-                raise HTTPException(status_code=404, detail="Item not found in store")
-
-            # Update the item
-            updated_item = pb_service.pb.collection('store_items').update(item_id, {
-                'name': item.name,
-                'price': item.price,
-                'description': item.description
-            })
+    token = get_token_from_request(request)
+    with user_auth_context(token) as user:
+        # Check if user has admin role for the store or is a global admin
+        if not 'admin' in user.roles:
+            store_roles = pb_service.pb.collection('store_roles').get_list(
+                1, 1, 
+                query_params={
+                    "filter": f'user="{user.id}" && store="{store_id}" && role="admin"'
+                }
+            )
+            if not store_roles.items:
+                raise HTTPException(status_code=403, detail="Not authorized to manage store items")
+
+        # Verify item belongs to store
+        existing_item = pb_service.pb.collection('store_items').get_one(item_id)
+        if existing_item.store != store_id:
+            raise HTTPException(status_code=404, detail="Item not found in store")
+
+        # Update the item
+        updated_item = pb_service.pb.collection('store_items').update(item_id, {
+            'name': item.name,
+            'price': item.price,
+            'description': item.description
+        })
 
-            return serialize_store_item(updated_item)
-    except Exception as e:
-        logger.error(f"Error updating store item: {str(e)}")
-        logger.error(f"Store ID: {store_id}, Item ID: {item_id}")
-        logger.error(f"Request data: {item.dict() if item else 'No item data'}")
-        raise HTTPException(status_code=400, detail=str(e))
+        return serialize_store_item(updated_item)
 
 @app.delete("/api/v0/stores/{store_id}/items/{item_id}")
 async def delete_store_item(store_id: str, item_id: str, request: Request):

From afae859381ad2f172d04e1ad8a718ed95078fa6a Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Tue, 18 Feb 2025 20:54:55 -0500
Subject: [PATCH 15/27] Add order page

---
 frontend/src/app/orders/[id]/page.tsx         | 267 ++++++++++++++++++
 frontend/src/components/OrderHistoryModal.tsx | 153 ++++------
 2 files changed, 318 insertions(+), 102 deletions(-)
 create mode 100644 frontend/src/app/orders/[id]/page.tsx

diff --git a/frontend/src/app/orders/[id]/page.tsx b/frontend/src/app/orders/[id]/page.tsx
new file mode 100644
index 0000000..6764dc1
--- /dev/null
+++ b/frontend/src/app/orders/[id]/page.tsx
@@ -0,0 +1,267 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/app/contexts/auth';
+import { config } from '@/config';
+import { formatCurrency } from '@/utils/currency';
+import { MapPinIcon, BuildingStorefrontIcon, XMarkIcon, ClockIcon } from '@heroicons/react/24/outline';
+import { useRouter, useParams } from 'next/navigation';
+
+interface OrderItem {
+  id: string;
+  name: string;
+  quantity: number;
+  price: number;
+}
+
+interface Store {
+  store: {
+    id: string;
+    name: string;
+  };
+  items: OrderItem[];
+}
+
+interface Order {
+  id: string;
+  created: string;
+  status: string;
+  payment_status: string;
+  delivery_fee: number;
+  total_amount: number;
+  tax_amount: number;
+  delivery_address?: {
+    street_address: string[];
+    city: string;
+    state: string;
+    zip_code: string;
+  };
+  customer_phone?: string;
+  stores: Store[];
+}
+
+const formatDateTime = (isoString: string) => {
+  const utcDate = new Date(isoString + 'Z');
+  return new Intl.DateTimeFormat('en-US', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  }).format(utcDate);
+};
+
+export default function OrderViewPage() {
+  const { user } = useAuth();
+  const [order, setOrder] = useState<Order | null>(null);
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+  const params = useParams();
+  const orderId = params?.id as string;
+
+  useEffect(() => {
+    const fetchOrder = async () => {
+      if (!user?.token || !orderId) return;
+
+      try {
+        const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
+          headers: {
+            'Authorization': `Bearer ${user.token}`,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch orders');
+        }
+
+        const orders = await response.json();
+        const order = orders.find((o: Order) => o.id === orderId);
+        
+        if (!order) {
+          throw new Error('Order not found');
+        }
+
+        setOrder(order);
+      } catch (error) {
+        console.error('Error fetching order:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (user) {
+      fetchOrder();
+    }
+  }, [user, orderId]);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return 'bg-yellow-100 text-yellow-800'
+      case 'confirmed':
+        return 'bg-blue-100 text-blue-800'
+      case 'picked_up':
+        return 'bg-purple-100 text-purple-800'
+      case 'delivered':
+        return 'bg-green-100 text-green-800'
+      case 'cancelled':
+        return 'bg-red-100 text-red-800'
+      default:
+        return 'bg-gray-100 text-gray-800'
+    }
+  }
+
+  const getStatusLabel = (status: string) => {
+    return status.charAt(0).toUpperCase() + status.slice(1).replace('_', ' ')
+  }
+
+  const getPaymentStatusColor = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return 'bg-yellow-100 text-yellow-800'
+      case 'processing':
+        return 'bg-blue-100 text-blue-800'
+      case 'succeeded':
+        return 'bg-green-100 text-green-800'
+      case 'failed':
+        return 'bg-red-100 text-red-800'
+      case 'refunded':
+        return 'bg-gray-100 text-gray-800'
+      default:
+        return 'bg-gray-100 text-gray-800'
+    }
+  }
+
+  const getPaymentStatusLabel = (status: string) => {
+    const labels: { [key: string]: string } = {
+      pending: 'Payment Pending',
+      processing: 'Processing Payment',
+      succeeded: 'Payment Successful',
+      failed: 'Payment Failed',
+      refunded: 'Payment Refunded'
+    }
+    return labels[status] || status.charAt(0).toUpperCase() + status.slice(1)
+  }
+
+  if (loading || !order) {
+    return (
+      <div className="min-h-screen bg-[#F5F2EB] pt-24">
+        <div className="container mx-auto px-4">
+          <div className="animate-pulse">
+            <div className="h-8 bg-white/50 rounded w-1/4 mb-8"></div>
+            <div className="space-y-4">
+              <div className="h-64 bg-white/50 rounded-lg"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[#F5F2EB] pt-24 relative">
+      {/* Mock Map Background */}
+      <div className="absolute inset-0 pt-24 bg-gray-200">
+        <img 
+          src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s+2A9D8F(-73.9229,40.7594),pin-s+E76F51(-73.9265,40.7614)/-73.9247,40.7604,14/800x600@2x?access_token=YOUR_MAPBOX_TOKEN" 
+          alt="Map showing delivery route"
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      {/* Floating Order Panel */}
+      <div className="absolute left-8 top-32 w-full max-w-lg bg-white/95 backdrop-blur-sm rounded-lg shadow-xl">
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-6">
+            <h1 className="text-2xl font-bold text-[#2D3748]">
+              Order #{order.id.slice(-6)}
+            </h1>
+            <button
+              onClick={() => router.back()}
+              className="p-2 text-[#4A5568] hover:text-[#2D3748] rounded-full hover:bg-[#2A9D8F]/5"
+            >
+              <XMarkIcon className="w-6 h-6" />
+            </button>
+          </div>
+
+          <div className="space-y-6">
+            {/* Status and Time */}
+            <div className="flex items-center gap-2">
+              <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
+                {getStatusLabel(order.status)}
+              </span>
+              <span className={`px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}>
+                {getPaymentStatusLabel(order.payment_status)}
+              </span>
+              <div className="flex items-center gap-1 text-sm text-[#4A5568]">
+                <ClockIcon className="w-4 h-4" />
+                <time dateTime={order.created}>{formatDateTime(order.created)}</time>
+              </div>
+            </div>
+
+            {/* Delivery Address */}
+            <div>
+              <h2 className="font-medium text-[#2D3748] mb-2">Delivery Address</h2>
+              <div className="flex items-start gap-2 text-sm text-[#4A5568]">
+                <MapPinIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                <div>
+                  {order.delivery_address ? (
+                    <>
+                      <p>{order.delivery_address.street_address.filter(Boolean).join(', ')}</p>
+                      <p>{order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}</p>
+                    </>
+                  ) : (
+                    <p className="italic">No address available</p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Order Items */}
+            <div className="space-y-4">
+              {order.stores.map((store) => (
+                <div key={store.store.id}>
+                  <div className="flex items-center gap-2 mb-2">
+                    <BuildingStorefrontIcon className="w-4 h-4 text-[#2A9D8F]" />
+                    <h2 className="font-medium text-[#2D3748]">{store.store.name}</h2>
+                  </div>
+                  <div className="bg-white/50 rounded-lg p-3">
+                    {store.items.map((item) => (
+                      <div key={item.id} className="flex justify-between py-1 text-sm">
+                        <div className="flex gap-2">
+                          <span className="text-[#4A5568] font-medium">{item.quantity}×</span>
+                          <span className="text-[#2D3748]">{item.name}</span>
+                        </div>
+                        <span className="text-[#4A5568]">{formatCurrency(item.price * item.quantity)}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Price Breakdown */}
+            <div className="space-y-2 text-sm border-t border-[#2A9D8F]/10 pt-4">
+              <div className="flex justify-between items-center">
+                <span className="text-[#4A5568]">Subtotal</span>
+                <span className="text-[#2D3748]">{formatCurrency(order.stores.reduce((acc, store) => 
+                  acc + store.items.reduce((itemAcc, item) => itemAcc + (item.price * item.quantity), 0), 0
+                ))}</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-[#4A5568]">Tax</span>
+                <span className="text-[#2D3748]">{formatCurrency(order.tax_amount || 0)}</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-[#4A5568]">Delivery Fee</span>
+                <span className="text-[#2D3748]">{formatCurrency(order.delivery_fee)}</span>
+              </div>
+              <div className="flex justify-between items-center pt-2 border-t border-[#2A9D8F]/10 font-medium">
+                <span className="text-[#2D3748]">Total</span>
+                <span className="text-[#2D3748]">{formatCurrency(order.total_amount)}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/src/components/OrderHistoryModal.tsx b/frontend/src/components/OrderHistoryModal.tsx
index b762dbb..25a762a 100644
--- a/frontend/src/components/OrderHistoryModal.tsx
+++ b/frontend/src/components/OrderHistoryModal.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { Dialog, Transition, Disclosure } from '@headlessui/react'
+import { Dialog, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
 import { formatCurrency } from '@/utils/currency'
-import { ClockIcon, MapPinIcon, BuildingStorefrontIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
+import { ClockIcon } from '@heroicons/react/24/outline'
+import { useRouter } from 'next/navigation'
 
 const formatDateTime = (isoString: string) => {
   // Parse the UTC time string and create a Date object
@@ -57,6 +58,8 @@ interface OrderHistoryModalProps {
 }
 
 export default function OrderHistoryModal({ isOpen, onClose, orders }: OrderHistoryModalProps) {
+  const router = useRouter();
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'pending':
@@ -106,6 +109,11 @@ export default function OrderHistoryModal({ isOpen, onClose, orders }: OrderHist
     return labels[status] || status.charAt(0).toUpperCase() + status.slice(1)
   }
 
+  const handleOrderClick = (orderId: string) => {
+    onClose();
+    router.push(`/orders/${orderId}`);
+  };
+
   return (
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-50" onClose={onClose}>
@@ -142,107 +150,48 @@ export default function OrderHistoryModal({ isOpen, onClose, orders }: OrderHist
 
                 <div className="space-y-4">
                   {orders.map((order) => (
-                    <Disclosure key={order.id}>
-                      {({ open }) => (
-                        <div className="bg-white/80 backdrop-blur-sm rounded-lg hover:shadow-md transition-shadow">
-                          <Disclosure.Button className="w-full px-6 py-4 flex justify-between items-start">
-                            <div>
-                              <div className="flex items-center gap-2">
-                                <p className="font-medium text-[#2D3748]">Order #{order.id.slice(-6)}</p>
-                                <span
-                                  className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}
-                                >
-                                  {getStatusLabel(order.status)}
-                                </span>
-                                <span
-                                  className={`px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}
-                                >
-                                  {getPaymentStatusLabel(order.payment_status)}
-                                </span>
-                              </div>
-                              <div className="flex items-center gap-2 mt-1 text-sm text-[#4A5568]">
-                                <ClockIcon className="w-4 h-4" />
-                                <time dateTime={order.created}>
-                                  {formatDateTime(order.created)}
-                                </time>
-                              </div>
-                            </div>
-                            <ChevronUpIcon
-                              className={`${
-                                open ? 'rotate-180 transform' : ''
-                              } h-5 w-5 text-[#2A9D8F]`}
-                            />
-                          </Disclosure.Button>
-                          
-                          <Disclosure.Panel className="px-6 pb-4">
-                            <div className="border-t border-[#2A9D8F]/10 pt-4">
-                              {/* Delivery Address Section */}
-                              <div className="mb-4">
-                                <h4 className="font-medium text-[#2D3748] mb-2">Delivery Address</h4>
-                                <div className="flex items-start gap-2 text-sm text-[#4A5568]">
-                                  <MapPinIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
-                                  <div>
-                                    {order.delivery_address ? (
-                                      <>
-                                        <p>{order.delivery_address.street_address.filter(Boolean).join(', ')}</p>
-                                        <p>{order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}</p>
-                                      </>
-                                    ) : (
-                                      <p className="italic">No address available</p>
-                                    )}
-                                  </div>
-                                </div>
-                              </div>
-
-                              {/* Order Items by Store */}
-                              <div className="space-y-4">
-                                {order.stores.map((store) => (
-                                  <div key={store.store.id}>
-                                    <div className="flex items-center gap-2 mb-2">
-                                      <BuildingStorefrontIcon className="w-4 h-4 text-[#2A9D8F]" />
-                                      <h4 className="font-medium text-[#2D3748]">{store.store.name}</h4>
-                                    </div>
-                                    <div className="bg-white/50 rounded-lg p-3">
-                                      {store.items.map((item) => (
-                                        <div key={item.id} className="flex justify-between py-1 text-sm">
-                                          <div className="flex gap-2">
-                                            <span className="text-[#4A5568] font-medium">{item.quantity}×</span>
-                                            <span className="text-[#2D3748]">{item.name}</span>
-                                          </div>
-                                          <span className="text-[#4A5568]">{formatCurrency(item.price * item.quantity)}</span>
-                                        </div>
-                                      ))}
-                                    </div>
-                                  </div>
-                                ))}
-                              </div>
-
-                              {/* Price Breakdown */}
-                              <div className="mt-4 space-y-2 text-sm border-t border-[#2A9D8F]/10 pt-4">
-                                <div className="flex justify-between items-center">
-                                  <span className="text-[#4A5568]">Subtotal</span>
-                                  <span className="text-[#2D3748]">{formatCurrency(order.stores.reduce((acc, store) => 
-                                    acc + store.items.reduce((itemAcc, item) => itemAcc + (item.price * item.quantity), 0), 0
-                                  ))}</span>
-                                </div>
-                                <div className="flex justify-between items-center">
-                                  <span className="text-[#4A5568]">Tax</span>
-                                  <span className="text-[#2D3748]">{formatCurrency(order.tax_amount || 0)}</span>
-                                </div>
-                                <div className="flex justify-between items-center">
-                                  <span className="text-[#4A5568]">Delivery Fee</span>
-                                  <span className="text-[#2D3748]">{formatCurrency(order.delivery_fee)}</span>
-                                </div>
-                                <div className="flex justify-between items-center pt-2 border-t border-[#2A9D8F]/10 font-medium">
-                                  <span className="text-[#2D3748]">Total</span>
-                                  <span className="text-[#2D3748]">{formatCurrency(order.total_amount)}</span>
-                                </div>
-                              </div>
-                            </div>
-                          </Disclosure.Panel>
+                    <div
+                      key={order.id}
+                      onClick={() => handleOrderClick(order.id)}
+                      className="bg-white/80 backdrop-blur-sm rounded-lg p-6 hover:shadow-md transition-all cursor-pointer"
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <p className="font-medium text-[#2D3748]">Order #{order.id.slice(-6)}</p>
+                            <span
+                              className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}
+                            >
+                              {getStatusLabel(order.status)}
+                            </span>
+                            <span
+                              className={`px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}
+                            >
+                              {getPaymentStatusLabel(order.payment_status)}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-2 mt-1 text-sm text-[#4A5568]">
+                            <ClockIcon className="w-4 h-4" />
+                            <time dateTime={order.created}>
+                              {formatDateTime(order.created)}
+                            </time>
+                          </div>
+                        </div>
+                        <div className="text-right">
+                          <p className="text-sm text-[#4A5568]">Total</p>
+                          <p className="font-medium text-[#2D3748]">{formatCurrency(order.total_amount)}</p>
                         </div>
-                      )}
-                    </Disclosure>
+                      </div>
+                      <div className="mt-2 text-sm text-[#4A5568]">
+                        {order.stores.map((store) => (
+                          <div key={store.store.id} className="flex items-center gap-1">
+                            <span className="font-medium">{store.store.name}</span>
+                            <span>•</span>
+                            <span>{store.items.length} {store.items.length === 1 ? 'item' : 'items'}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
                   ))}
 
                   {orders.length === 0 && (

From 224ae8487f273a3a2ddc27abc13b0a6e3376b13b Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Tue, 18 Feb 2025 22:56:51 -0500
Subject: [PATCH 16/27] Add map to order page

---
 frontend/package-lock.json                  |  51 ++++
 frontend/package.json                       |   3 +
 frontend/public/marker-icon-2x.png          |   1 +
 frontend/public/marker-icon.png             |   1 +
 frontend/public/marker-shadow.png           | Bin 0 -> 608 bytes
 frontend/src/app/orders/[id]/map.module.css |  57 ++++
 frontend/src/app/orders/[id]/page.tsx       | 291 ++++++++++++++------
 7 files changed, 321 insertions(+), 83 deletions(-)
 create mode 100644 frontend/public/marker-icon-2x.png
 create mode 100644 frontend/public/marker-icon.png
 create mode 100644 frontend/public/marker-shadow.png
 create mode 100644 frontend/src/app/orders/[id]/map.module.css

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 07ceea0..27bbea1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,17 +12,20 @@
         "@heroicons/react": "^2.2.0",
         "@stripe/react-stripe-js": "^3.1.1",
         "@stripe/stripe-js": "^5.6.0",
+        "leaflet": "^1.9.4",
         "next": "15.1.5",
         "pocketbase": "^0.25.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-hot-toast": "^2.5.1",
         "react-icons": "^5.4.0",
+        "react-leaflet": "^5.0.0",
         "recharts": "^2.15.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@tailwindcss/aspect-ratio": "^0.4.2",
+        "@types/leaflet": "^1.9.16",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1043,6 +1046,17 @@
         "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@react-stately/utils": {
       "version": "3.10.5",
       "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
@@ -1223,6 +1237,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1237,6 +1258,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz",
+      "integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.17.14",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.14.tgz",
@@ -4255,6 +4286,12 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5112,6 +5149,20 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-smooth": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 079e290..7f09039 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,17 +13,20 @@
     "@heroicons/react": "^2.2.0",
     "@stripe/react-stripe-js": "^3.1.1",
     "@stripe/stripe-js": "^5.6.0",
+    "leaflet": "^1.9.4",
     "next": "15.1.5",
     "pocketbase": "^0.25.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.5.1",
     "react-icons": "^5.4.0",
+    "react-leaflet": "^5.0.0",
     "recharts": "^2.15.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@types/leaflet": "^1.9.16",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
diff --git a/frontend/public/marker-icon-2x.png b/frontend/public/marker-icon-2x.png
new file mode 100644
index 0000000..1becba2
--- /dev/null
+++ b/frontend/public/marker-icon-2x.png
@@ -0,0 +1 @@
+404: Not Found
\ No newline at end of file
diff --git a/frontend/public/marker-icon.png b/frontend/public/marker-icon.png
new file mode 100644
index 0000000..1becba2
--- /dev/null
+++ b/frontend/public/marker-icon.png
@@ -0,0 +1 @@
+404: Not Found
\ No newline at end of file
diff --git a/frontend/public/marker-shadow.png b/frontend/public/marker-shadow.png
new file mode 100644
index 0000000000000000000000000000000000000000..84c580847f0b20fa72d328985a08c0c176554a69
GIT binary patch
literal 608
zcmV-m0-ybfP)<h;3K|Lk000e1NJLTq001cf001cn1ONa40%^#70006fNkl<ZcmeIw
zg^rs+5CdR`ncn}s%FN6SljV^mt+G?@i7vhi?<fB=Y2u&Xu86!QugS(wlamRDU;oz6
z$wuBYV@>9uxu(PDa20NtOu&LOs@Hz6GMI+Q6g1Z=qj$sxT(UW7u!XkL;lC1Sux{-k
zrKG=Ll3X`pmJ#TlL7Pm#g6k<}JL*YPF{=D*Jt9ddf(0rbK-p3Q$jBIdfPIGdCL={p
zPZe29%|u7Kq6UF#1O~k@qlzy)@7NJH5b5QZH0w1L>&ZF>IAnU}cyCIWV=(@k>0)}s
z#u&vVyO&ex=p?gju}^>lcQj(kJsJ0NpK8Z8sR=XG6xB+HOVoRA8qCQS`s8N(9~4t_
zw-PKkoa*ao^O6^s672eiQj0-B4xiUrcGz&vi|)FMV#poEi8-3nKkDR!>3g5X98WNi
zBH}N}lhCgFIR?EBbvrT#<`}O6sF8c@fZ`WtHr_)(%$^a*sAHW3!6o*hm;#OI1-8RB
zNTX3GBfs<OFj#O$1h!$e%+9DjOE+$kj9YpngjQHGE3Ac@G?=tJVNG;z)axLyCiac_
zZt@b$$Sn`;2sz-<HL1_c7nACE0oF<I%ilar_1h5nfcMNtkxPM|VgY94j>k44PkjCr
z@9>IwOYpNAYKBY&%*Z2;ebvG5gr4Fto(cRG^HWGEFqo0PtqHs*^9XnG5HESz!R>^Z
uBWCvJ<QA`SA2$g;$0saf5u#v9soc(EVF&nw&Md(I0000<MNUMnLSTX%{~jU$

literal 0
HcmV?d00001

diff --git a/frontend/src/app/orders/[id]/map.module.css b/frontend/src/app/orders/[id]/map.module.css
new file mode 100644
index 0000000..e1021f2
--- /dev/null
+++ b/frontend/src/app/orders/[id]/map.module.css
@@ -0,0 +1,57 @@
+/* Fix for Leaflet default marker icons */
+.leafletContainer {
+  z-index: 0;
+}
+
+.leafletContainer :global(.leaflet-div-icon) {
+  background: transparent;
+  border: none;
+}
+
+/* Custom marker styling */
+.marker {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #2A9D8F;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.marker svg {
+  width: 14px;
+  height: 14px;
+  color: #2A9D8F;
+}
+
+/* Popup styling */
+.leafletContainer :global(.leaflet-popup-content-wrapper) {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(8px);
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.leafletContainer :global(.leaflet-popup-tip) {
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.leafletContainer :global(.leaflet-popup-content) {
+  margin: 8px 12px;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  color: #2D3748;
+}
+
+/* Ensure popups appear above the order panel */
+.leafletContainer :global(.leaflet-popup) {
+  z-index: 1000;
+}
+
+/* Ensure controls appear above the order panel */
+.leafletContainer :global(.leaflet-control) {
+  z-index: 1000;
+} 
\ No newline at end of file
diff --git a/frontend/src/app/orders/[id]/page.tsx b/frontend/src/app/orders/[id]/page.tsx
index 6764dc1..b483eb0 100644
--- a/frontend/src/app/orders/[id]/page.tsx
+++ b/frontend/src/app/orders/[id]/page.tsx
@@ -6,6 +6,34 @@ import { config } from '@/config';
 import { formatCurrency } from '@/utils/currency';
 import { MapPinIcon, BuildingStorefrontIcon, XMarkIcon, ClockIcon } from '@heroicons/react/24/outline';
 import { useRouter, useParams } from 'next/navigation';
+import dynamic from 'next/dynamic';
+import 'leaflet/dist/leaflet.css';
+import type { LatLngExpression, LatLngTuple } from 'leaflet';
+import styles from './map.module.css';
+import ReactDOMServer from 'react-dom/server';
+import L from 'leaflet';
+
+// Dynamically import the map components to avoid SSR issues
+const MapContainer = dynamic(
+  () => import('react-leaflet').then((mod) => mod.MapContainer),
+  { ssr: false }
+);
+const TileLayer = dynamic(
+  () => import('react-leaflet').then((mod) => mod.TileLayer),
+  { ssr: false }
+);
+const Marker = dynamic(
+  () => import('react-leaflet').then((mod) => mod.Marker),
+  { ssr: false }
+);
+const Popup = dynamic(
+  () => import('react-leaflet').then((mod) => mod.Popup),
+  { ssr: false }
+);
+const Polyline = dynamic(
+  () => import('react-leaflet').then((mod) => mod.Polyline),
+  { ssr: false }
+);
 
 interface OrderItem {
   id: string;
@@ -49,6 +77,25 @@ const formatDateTime = (isoString: string) => {
   }).format(utcDate);
 };
 
+// Mock coordinates for demo (we'll replace these with real geocoding later)
+const MOCK_COORDINATES: { store: LatLngTuple; delivery: LatLngTuple } = {
+  store: [40.7594, -73.9229],
+  delivery: [40.7614, -73.9265]
+};
+
+// Custom marker icon components
+const StoreMarker = () => (
+  <div className={styles.marker}>
+    <BuildingStorefrontIcon />
+  </div>
+);
+
+const DeliveryMarker = () => (
+  <div className={styles.marker}>
+    <MapPinIcon />
+  </div>
+);
+
 export default function OrderViewPage() {
   const { user } = useAuth();
   const [order, setOrder] = useState<Order | null>(null);
@@ -57,6 +104,9 @@ export default function OrderViewPage() {
   const params = useParams();
   const orderId = params?.id as string;
 
+  // Create a ref for the map instance
+  const [mapReady, setMapReady] = useState(false);
+
   useEffect(() => {
     const fetchOrder = async () => {
       if (!user?.token || !orderId) return;
@@ -92,6 +142,11 @@ export default function OrderViewPage() {
     }
   }, [user, orderId]);
 
+  useEffect(() => {
+    // This effect ensures Leaflet is only loaded client-side
+    setMapReady(true);
+  }, []);
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'pending':
@@ -110,7 +165,14 @@ export default function OrderViewPage() {
   }
 
   const getStatusLabel = (status: string) => {
-    return status.charAt(0).toUpperCase() + status.slice(1).replace('_', ' ')
+    const labels: { [key: string]: string } = {
+      pending: 'Delivery Pending',
+      confirmed: 'Confirmed',
+      picked_up: 'Picked Up',
+      delivered: 'Delivered',
+      cancelled: 'Cancelled'
+    }
+    return labels[status] || status.charAt(0).toUpperCase() + status.slice(1)
   }
 
   const getPaymentStatusColor = (status: string) => {
@@ -148,7 +210,7 @@ export default function OrderViewPage() {
           <div className="animate-pulse">
             <div className="h-8 bg-white/50 rounded w-1/4 mb-8"></div>
             <div className="space-y-4">
-              <div className="h-64 bg-white/50 rounded-lg"></div>
+              <div className="h-[600px] bg-white/50 rounded-lg"></div>
             </div>
           </div>
         </div>
@@ -157,106 +219,169 @@ export default function OrderViewPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#F5F2EB] pt-24 relative">
-      {/* Mock Map Background */}
-      <div className="absolute inset-0 pt-24 bg-gray-200">
-        <img 
-          src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s+2A9D8F(-73.9229,40.7594),pin-s+E76F51(-73.9265,40.7614)/-73.9247,40.7604,14/800x600@2x?access_token=YOUR_MAPBOX_TOKEN" 
-          alt="Map showing delivery route"
-          className="w-full h-full object-cover"
-        />
+    <div className="min-h-screen bg-[#F5F2EB] pt-16 relative">
+      {/* Map Background */}
+      <div className="absolute inset-0 pt-16">
+        {mapReady && (
+          <MapContainer
+            center={[
+              (MOCK_COORDINATES.store[0] + MOCK_COORDINATES.delivery[0]) / 2,
+              (MOCK_COORDINATES.store[1] + MOCK_COORDINATES.delivery[1]) / 2 - 0.007
+            ]}
+            zoom={15}
+            style={{ height: '100%', width: '100%' }}
+            zoomControl={false}
+            className={styles.leafletContainer}
+          >
+            <TileLayer
+              url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png"
+              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'
+            />
+            <Marker 
+              position={MOCK_COORDINATES.store}
+              icon={L.divIcon({
+                className: 'custom-marker',
+                html: ReactDOMServer.renderToString(<StoreMarker />)
+              })}
+            >
+              <Popup>
+                <div className="font-medium">Store Location</div>
+                <div className="text-sm text-[#4A5568]">{order.stores[0]?.store.name}</div>
+              </Popup>
+            </Marker>
+            <Marker 
+              position={MOCK_COORDINATES.delivery}
+              icon={L.divIcon({
+                className: 'custom-marker',
+                html: ReactDOMServer.renderToString(<DeliveryMarker />)
+              })}
+            >
+              <Popup>
+                <div className="font-medium">Delivery Location</div>
+                {order.delivery_address && (
+                  <div className="text-sm text-[#4A5568]">
+                    {order.delivery_address.street_address.filter(Boolean).join(', ')}
+                  </div>
+                )}
+              </Popup>
+            </Marker>
+            <Polyline
+              positions={[
+                MOCK_COORDINATES.store,
+                MOCK_COORDINATES.delivery
+              ]}
+              color="#2A9D8F"
+              weight={3}
+              opacity={0.7}
+            />
+          </MapContainer>
+        )}
       </div>
 
       {/* Floating Order Panel */}
-      <div className="absolute left-8 top-32 w-full max-w-lg bg-white/95 backdrop-blur-sm rounded-lg shadow-xl">
-        <div className="p-6">
-          <div className="flex items-center justify-between mb-6">
-            <h1 className="text-2xl font-bold text-[#2D3748]">
-              Order #{order.id.slice(-6)}
-            </h1>
-            <button
-              onClick={() => router.back()}
-              className="p-2 text-[#4A5568] hover:text-[#2D3748] rounded-full hover:bg-[#2A9D8F]/5"
-            >
-              <XMarkIcon className="w-6 h-6" />
-            </button>
+      <div className="absolute left-8 top-24 w-full max-w-lg z-10">
+        {/* Back Button */}
+        <button
+          onClick={() => router.back()}
+          className="mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-[#4A5568] bg-white/90 rounded-lg hover:bg-white transition-colors shadow-sm"
+        >
+          <XMarkIcon className="w-4 h-4" />
+          <span>Back</span>
+        </button>
+
+        {/* Main Order Card */}
+        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden border border-white/20">
+          {/* Header Section */}
+          <div className="bg-[#2A9D8F]/10 px-6 py-5 border-b border-[#2A9D8F]/10">
+            <div className="flex items-center justify-between mb-4">
+              <h1 className="text-2xl font-bold text-[#2D3748]">
+                Order #{order.id.slice(-6)}
+              </h1>
+              <div className="flex items-center gap-2">
+                <span className={`px-3 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}>
+                  {getPaymentStatusLabel(order.payment_status)}
+                </span>
+                <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
+                  {getStatusLabel(order.status)}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center gap-2 text-sm text-[#4A5568]">
+              <ClockIcon className="w-4 h-4" />
+              <time dateTime={order.created}>{formatDateTime(order.created)}</time>
+            </div>
           </div>
 
-          <div className="space-y-6">
-            {/* Status and Time */}
-            <div className="flex items-center gap-2">
-              <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
-                {getStatusLabel(order.status)}
-              </span>
-              <span className={`px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}>
-                {getPaymentStatusLabel(order.payment_status)}
-              </span>
-              <div className="flex items-center gap-1 text-sm text-[#4A5568]">
-                <ClockIcon className="w-4 h-4" />
-                <time dateTime={order.created}>{formatDateTime(order.created)}</time>
+          <div className="divide-y divide-[#2A9D8F]/10">
+            {/* Order Items Section */}
+            <div className="p-6">
+              <h2 className="text-sm font-medium text-[#2D3748] uppercase tracking-wider mb-3">Order Details</h2>
+              <div className="space-y-6">
+                {order.stores.map((store) => (
+                  <div key={store.store.id} className="bg-white/50 rounded-lg border border-[#2A9D8F]/10">
+                    <div className="px-4 py-3 border-b border-[#2A9D8F]/10 flex items-center gap-2">
+                      <BuildingStorefrontIcon className="w-4 h-4 text-[#2A9D8F]" />
+                      <h3 className="font-medium text-[#2D3748]">{store.store.name}</h3>
+                    </div>
+                    <div className="p-4 space-y-2">
+                      {store.items.map((item) => (
+                        <div key={item.id} className="flex justify-between items-center text-sm">
+                          <div className="flex items-center gap-3">
+                            <span className="w-6 h-6 flex items-center justify-center bg-[#2A9D8F]/10 rounded text-[#2A9D8F] font-medium">
+                              {item.quantity}
+                            </span>
+                            <span className="text-[#2D3748]">{item.name}</span>
+                          </div>
+                          <span className="text-[#4A5568] font-medium">{formatCurrency(item.price * item.quantity)}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
               </div>
             </div>
 
-            {/* Delivery Address */}
-            <div>
-              <h2 className="font-medium text-[#2D3748] mb-2">Delivery Address</h2>
-              <div className="flex items-start gap-2 text-sm text-[#4A5568]">
-                <MapPinIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
-                <div>
+            {/* Delivery Address Section */}
+            <div className="p-6">
+              <h2 className="text-sm font-medium text-[#2D3748] uppercase tracking-wider mb-3">Delivery Address</h2>
+              <div className="flex items-start gap-3 p-4 bg-[#2A9D8F]/5 rounded-lg">
+                <MapPinIcon className="w-5 h-5 text-[#2A9D8F] flex-shrink-0 mt-0.5" />
+                <div className="text-sm">
                   {order.delivery_address ? (
                     <>
-                      <p>{order.delivery_address.street_address.filter(Boolean).join(', ')}</p>
-                      <p>{order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}</p>
+                      <p className="font-medium text-[#2D3748]">{order.delivery_address.street_address.filter(Boolean).join(', ')}</p>
+                      <p className="text-[#4A5568]">{order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}</p>
                     </>
                   ) : (
-                    <p className="italic">No address available</p>
+                    <p className="italic text-[#4A5568]">No address available</p>
                   )}
                 </div>
               </div>
             </div>
 
-            {/* Order Items */}
-            <div className="space-y-4">
-              {order.stores.map((store) => (
-                <div key={store.store.id}>
-                  <div className="flex items-center gap-2 mb-2">
-                    <BuildingStorefrontIcon className="w-4 h-4 text-[#2A9D8F]" />
-                    <h2 className="font-medium text-[#2D3748]">{store.store.name}</h2>
-                  </div>
-                  <div className="bg-white/50 rounded-lg p-3">
-                    {store.items.map((item) => (
-                      <div key={item.id} className="flex justify-between py-1 text-sm">
-                        <div className="flex gap-2">
-                          <span className="text-[#4A5568] font-medium">{item.quantity}×</span>
-                          <span className="text-[#2D3748]">{item.name}</span>
-                        </div>
-                        <span className="text-[#4A5568]">{formatCurrency(item.price * item.quantity)}</span>
-                      </div>
-                    ))}
+            {/* Price Breakdown Section */}
+            <div className="p-6 bg-[#2A9D8F]/5">
+              <div className="space-y-3 text-sm">
+                <div className="flex justify-between items-center text-[#4A5568]">
+                  <span>Subtotal</span>
+                  <span>{formatCurrency(order.stores.reduce((acc, store) => 
+                    acc + store.items.reduce((itemAcc, item) => itemAcc + (item.price * item.quantity), 0), 0
+                  ))}</span>
+                </div>
+                <div className="flex justify-between items-center text-[#4A5568]">
+                  <span>Tax</span>
+                  <span>{formatCurrency(order.tax_amount || 0)}</span>
+                </div>
+                <div className="flex justify-between items-center text-[#4A5568]">
+                  <span>Delivery Fee</span>
+                  <span>{formatCurrency(order.delivery_fee)}</span>
+                </div>
+                <div className="pt-3 border-t border-[#2A9D8F]/10">
+                  <div className="flex justify-between items-center text-lg font-medium text-[#2D3748]">
+                    <span>Total</span>
+                    <span>{formatCurrency(order.total_amount)}</span>
                   </div>
                 </div>
-              ))}
-            </div>
-
-            {/* Price Breakdown */}
-            <div className="space-y-2 text-sm border-t border-[#2A9D8F]/10 pt-4">
-              <div className="flex justify-between items-center">
-                <span className="text-[#4A5568]">Subtotal</span>
-                <span className="text-[#2D3748]">{formatCurrency(order.stores.reduce((acc, store) => 
-                  acc + store.items.reduce((itemAcc, item) => itemAcc + (item.price * item.quantity), 0), 0
-                ))}</span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-[#4A5568]">Tax</span>
-                <span className="text-[#2D3748]">{formatCurrency(order.tax_amount || 0)}</span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-[#4A5568]">Delivery Fee</span>
-                <span className="text-[#2D3748]">{formatCurrency(order.delivery_fee)}</span>
-              </div>
-              <div className="flex justify-between items-center pt-2 border-t border-[#2A9D8F]/10 font-medium">
-                <span className="text-[#2D3748]">Total</span>
-                <span className="text-[#2D3748]">{formatCurrency(order.total_amount)}</span>
               </div>
             </div>
           </div>

From 916ac921006f1be16a1e8c454825d8e921175f45 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Tue, 18 Feb 2025 23:28:40 -0500
Subject: [PATCH 17/27] Update the status display names

---
 frontend/src/app/orders/page.tsx               | 2 +-
 frontend/src/app/store/[id]/dashboard/page.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/orders/page.tsx b/frontend/src/app/orders/page.tsx
index e24fbc2..259f2a7 100644
--- a/frontend/src/app/orders/page.tsx
+++ b/frontend/src/app/orders/page.tsx
@@ -59,7 +59,7 @@ const statusColors = {
 };
 
 const statusLabels = {
-  pending: 'Pending',
+  pending: 'Delivery Pending',
   confirmed: 'Confirmed',
   picked_up: 'Picked Up',
   delivered: 'Delivered',
diff --git a/frontend/src/app/store/[id]/dashboard/page.tsx b/frontend/src/app/store/[id]/dashboard/page.tsx
index 178e82d..d78265c 100644
--- a/frontend/src/app/store/[id]/dashboard/page.tsx
+++ b/frontend/src/app/store/[id]/dashboard/page.tsx
@@ -60,8 +60,8 @@ const statusColors = {
 };
 
 const statusLabels = {
-  pending: 'Pending',
-  confirmed: 'Confirmed',
+  pending: 'Pickup Pending',
+  confirmed: 'Pickup Confirmed',
   picked_up: 'Picked Up',
   delivered: 'Delivered',
   cancelled: 'Cancelled'

From 51365b834ccca45b50a332b1142c5f44a2202eb1 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Wed, 19 Feb 2025 01:17:26 -0500
Subject: [PATCH 18/27] Change the tagline

---
 frontend/src/app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 4c44d1e..b706f32 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -84,7 +84,7 @@ export default function Page() {
               <h1 className="text-4xl font-bold text-[#2D3748] font-display">localmart</h1>
             </div>
             <p className="text-lg text-[#4A5568]">
-              Shop from your favorite local stores with same-day delivery
+              Shop local, same-day delivery.
             </p>
             <SearchProvider>
                 { productSearchEnabled && <Search />}

From 3f93af6d744744d434835d3cf171b2895886bb75 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Wed, 19 Feb 2025 01:27:07 -0500
Subject: [PATCH 19/27] Update order rules

---
 db/pb_migrations/1739946005_updated_orders.js | 24 +++++++++++++++++++
 .../1739946102_updated_order_items.js         | 24 +++++++++++++++++++
 .../1739946117_updated_order_items.js         | 20 ++++++++++++++++
 .../1739946138_updated_order_items.js         | 20 ++++++++++++++++
 db/pb_migrations/1739946154_updated_orders.js | 20 ++++++++++++++++
 5 files changed, 108 insertions(+)
 create mode 100644 db/pb_migrations/1739946005_updated_orders.js
 create mode 100644 db/pb_migrations/1739946102_updated_order_items.js
 create mode 100644 db/pb_migrations/1739946117_updated_order_items.js
 create mode 100644 db/pb_migrations/1739946138_updated_order_items.js
 create mode 100644 db/pb_migrations/1739946154_updated_orders.js

diff --git a/db/pb_migrations/1739946005_updated_orders.js b/db/pb_migrations/1739946005_updated_orders.js
new file mode 100644
index 0000000..3997753
--- /dev/null
+++ b/db/pb_migrations/1739946005_updated_orders.js
@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' ||\nuser.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = order_items_via_order.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "updateRule": "@request.auth.roles ?~ 'admin' ||\nuser.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = order_items_via_order.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' ||\nuser.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = order_items_via_order.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = order_items_via_order.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "updateRule": "",
+    "viewRule": "@request.auth.roles ?~ 'admin' || (\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = order_items_via_order.store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739946102_updated_order_items.js b/db/pb_migrations/1739946102_updated_order_items.js
new file mode 100644
index 0000000..23304c9
--- /dev/null
+++ b/db/pb_migrations/1739946102_updated_order_items.js
@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "listRule": "@request.auth.role ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.role ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.role ?= 'admin' || \n@request.body.order.user.id = @request.auth.id",
+    "listRule": "@request.auth.role ?= 'admin' || \n@request.body.order.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.role ?= 'admin' || \n@request.body.order.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739946117_updated_order_items.js b/db/pb_migrations/1739946117_updated_order_items.js
new file mode 100644
index 0000000..e552536
--- /dev/null
+++ b/db/pb_migrations/1739946117_updated_order_items.js
@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.role ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": ""
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739946138_updated_order_items.js b/db/pb_migrations/1739946138_updated_order_items.js
new file mode 100644
index 0000000..8fb3aa8
--- /dev/null
+++ b/db/pb_migrations/1739946138_updated_order_items.js
@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "order.user.id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "createRule": "@request.auth.role ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739946154_updated_orders.js b/db/pb_migrations/1739946154_updated_orders.js
new file mode 100644
index 0000000..6669a1e
--- /dev/null
+++ b/db/pb_migrations/1739946154_updated_orders.js
@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "createRule": "user.id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3527180448")
+
+  // update collection data
+  unmarshal({
+    "createRule": ""
+  }, collection)
+
+  return app.save(collection)
+})

From 2c92012fab201c3620f15f2b98695728c4884a25 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Wed, 19 Feb 2025 01:44:00 -0500
Subject: [PATCH 20/27] Update the homepage

---
 frontend/src/app/page.tsx | 209 ++++++++++++++++++++++++++++++--------
 1 file changed, 167 insertions(+), 42 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index b706f32..4b900ad 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -2,10 +2,12 @@
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { BuildingStorefrontIcon } from '@heroicons/react/24/outline';
+import { BuildingStorefrontIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { SearchProvider } from '@/app/contexts/search';
 import { Search } from '@/components/Search';
 import { useFeatureFlag } from '@/app/contexts/featureFlags';
+import { useCart } from '@/app/contexts/cart';
+import { toast } from 'react-hot-toast';
 
 interface Store {
   id: string;
@@ -15,6 +17,14 @@ interface Store {
   city: string;
   state: string;
   zip_code: string;
+  items?: StoreItem[];
+}
+
+interface StoreItem {
+  id: string;
+  name: string;
+  price: number;
+  imageUrl?: string;
 }
 
 export default function Page() {
@@ -22,18 +32,37 @@ export default function Page() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const productSearchEnabled = useFeatureFlag('product_search');
+  const { addItem, items: cartItems } = useCart();
 
   useEffect(() => {
     const fetchStores = async () => {
       try {
-        // Use environment variable with fallback for client-side fetching
         const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-        const response = await fetch(`${baseUrl}/api/v0/stores`);
-        if (!response.ok) {
+        // Fetch stores
+        const storesResponse = await fetch(`${baseUrl}/api/v0/stores`);
+        if (!storesResponse.ok) {
           throw new Error('Failed to fetch stores');
         }
-        const data = await response.json();
-        setStores(data);
+        const storesData = await storesResponse.json();
+        
+        // Fetch items for each store
+        const storesWithItems = await Promise.all(
+          storesData.map(async (store: Store) => {
+            const itemsResponse = await fetch(`${baseUrl}/api/v0/stores/${store.id}/items`);
+            if (itemsResponse.ok) {
+              const items = await itemsResponse.json();
+              // Add mock image URLs to items
+              const itemsWithImages = items.map((item: StoreItem) => ({
+                ...item,
+                imageUrl: `https://picsum.photos/seed/${item.id}/400/300`
+              }));
+              return { ...store, items: itemsWithImages };
+            }
+            return store;
+          })
+        );
+        
+        setStores(storesWithItems);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to fetch stores');
       } finally {
@@ -44,12 +73,36 @@ export default function Page() {
     fetchStores();
   }, []);
 
+  const handleAddToCart = (storeId: string, item: StoreItem) => {
+    const hasItemsFromDifferentStore = cartItems.length > 0 && cartItems[0].store !== storeId;
+    
+    if (hasItemsFromDifferentStore) {
+      toast.error('You can only add items from one store at a time');
+      return;
+    }
+
+    addItem({
+      ...item,
+      store: storeId
+    });
+    toast.success('Added to cart');
+  };
+
   if (loading) {
     return (
       <main className="min-h-[calc(100vh-64px)] bg-[#F5F2EB] pt-16">
         <div className="container mx-auto px-4">
-          <div className="animate-pulse">
+          <div className="animate-pulse space-y-8">
+            {/* Hero section skeleton */}
+            <div className="h-64 bg-white/50 rounded-lg"></div>
+            {/* Featured stores skeleton */}
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="h-48 bg-white/50 rounded-lg"></div>
+              ))}
+            </div>
+            {/* Items grid skeleton */}
+            <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
               {[1, 2, 3, 4, 5, 6].map((i) => (
                 <div key={i} className="h-64 bg-white/50 rounded-lg"></div>
               ))}
@@ -76,53 +129,125 @@ export default function Page() {
   return (
     <main className="min-h-[calc(100vh-64px)] bg-[#F5F2EB]">
       {/* Hero Section */}
-      <div className="bg-white/50 backdrop-blur-sm border-b pt-16">
-        <div className="container mx-auto px-4 py-12">
+      <div className="bg-gradient-to-b from-[#2A9D8F]/10 to-transparent pt-36 pb-14">
+        <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
             <div className="flex items-center justify-center gap-3 mb-6">
-              <BuildingStorefrontIcon className="h-12 w-12 text-[#2A9D8F]" />
-              <h1 className="text-4xl font-bold text-[#2D3748] font-display">localmart</h1>
+              <BuildingStorefrontIcon className="h-14 w-14 text-[#2A9D8F]" />
+              <h1 className="text-5xl font-bold text-[#2D3748] font-display">localmart</h1>
             </div>
-            <p className="text-lg text-[#4A5568]">
-              Shop local, same-day delivery.
+            <p className="text-xl text-[#4A5568] mb-10 max-w-2xl mx-auto leading-relaxed">
+              Shop local. Same-day delivery.
+              <br />
+              From your favorite neighborhood stores.
             </p>
             <SearchProvider>
-                { productSearchEnabled && <Search />}
+              {productSearchEnabled && <Search />}
             </SearchProvider>
           </div>
         </div>
       </div>
 
-      {/* Stores Grid */}
-      <div className="container mx-auto px-4 py-12">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {stores.map((store) => (
-            <Link
-              key={store.id}
-              href={`/store/${store.id}`}
-              className="bg-white/80 backdrop-blur-sm rounded-lg p-6 hover:bg-white transition-all duration-200 group"
-            >
-              <div className="flex gap-4">
-                <div className="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0">
-                  <img
-                    src={`https://picsum.photos/seed/${store.id}/200/200`}
-                    alt={store.name}
-                    className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-200"
-                  />
+      {/* Main Content Container */}
+      <div className="container mx-auto px-4 -mt-4">
+        {/* Local Stores Section - Commented Out
+        <div className="bg-[#FFFFFF]/90 backdrop-blur-sm rounded-2xl shadow-sm ring-1 ring-black/5 p-8 mb-8">
+          <h2 className="text-3xl font-bold text-[#2D3748] mb-8">Local Stores</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {stores.map((store) => (
+              <Link
+                key={store.id}
+                href={`/store/${store.id}`}
+                className="group relative bg-[#F8F6F0] rounded-xl p-6 hover:bg-[#F5F2EB] transition-all duration-200 ring-1 ring-black/5 hover:ring-[#2A9D8F]/10"
+              >
+                <div className="flex gap-4">
+                  <div className="w-28 h-28 rounded-lg overflow-hidden flex-shrink-0 ring-1 ring-black/10">
+                    <img
+                      src={`https://picsum.photos/seed/${store.id}/200/200`}
+                      alt={store.name}
+                      className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-200"
+                    />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-semibold text-[#2D3748] mb-2 group-hover:text-[#2A9D8F] transition-colors">
+                      {store.name}
+                    </h3>
+                    <p className="text-[#4A5568] text-sm mb-3">
+                      {store.street_1}
+                      {store.street_2 && `, ${store.street_2}`}
+                      <br />
+                      {store.city}, {store.state} {store.zip_code}
+                    </p>
+                    <p className="text-[#2A9D8F] text-sm font-medium flex items-center gap-1">
+                      View store
+                      <span className="transform group-hover:translate-x-1 transition-transform duration-200">→</span>
+                    </p>
+                  </div>
                 </div>
-                <div>
-                  <h2 className="text-xl font-semibold text-[#2D3748] mb-2">{store.name}</h2>
-                  <p className="text-[#4A5568]">
-                    {store.street_1}
-                    {store.street_2 && `, ${store.street_2}`}
-                    <br />
-                    {store.city}, {store.state} {store.zip_code}
-                  </p>
-                </div>
-              </div>
-            </Link>
-          ))}
+              </Link>
+            ))}
+          </div>
         </div>
+        */}
+
+        {/* Popular Items Sections */}
+        {stores.map((store, storeIndex) => store.items && store.items.length > 0 && (
+          <div key={store.id} className="bg-[#FAF9F6]/80 backdrop-blur-sm rounded-2xl shadow-sm ring-1 ring-black/5 p-8 mb-8">
+            <div className="flex items-center justify-between mb-8">
+              <Link
+                href={`/store/${store.id}`}
+                className="group"
+              >
+                <h2 className="text-2xl font-bold text-[#2D3748] group-hover:text-[#2A9D8F] transition-colors">{store.name}</h2>
+              </Link>
+              <Link
+                href={`/store/${store.id}`}
+                className="text-[#2A9D8F] hover:text-[#40B4A6] transition-colors text-sm font-medium flex items-center gap-1 group"
+              >
+                See all
+                <span className="transform group-hover:translate-x-1 transition-transform duration-200">→</span>
+              </Link>
+            </div>
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
+              {store.items.slice(0, 6).map((item) => (
+                <div
+                  key={item.id}
+                  className="group relative bg-[#FFFFFF]/95 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden ring-1 ring-black/5 hover:ring-[#2A9D8F]/10"
+                >
+                  <Link href={`/store/${store.id}`}>
+                    <div className="aspect-w-4 aspect-h-3">
+                      <img
+                        src={item.imageUrl}
+                        alt={item.name}
+                        className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-200"
+                      />
+                    </div>
+                  </Link>
+                  <div className="p-4">
+                    <Link href={`/store/${store.id}`}>
+                      <h3 className="text-sm font-semibold text-[#2D3748] mb-1 group-hover:text-[#2A9D8F] transition-colors line-clamp-2">
+                        {item.name}
+                      </h3>
+                    </Link>
+                    <div className="flex items-center justify-between mt-2">
+                      <p className="text-[#4A5568] font-medium">${item.price.toFixed(2)}</p>
+                      <button
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleAddToCart(store.id, item);
+                        }}
+                        className="p-2 text-[#2A9D8F] hover:text-white hover:bg-[#2A9D8F] rounded-full transition-colors group/btn"
+                        aria-label={`Add ${item.name} to cart`}
+                      >
+                        <PlusIcon className="w-5 h-5" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
       </div>
     </main>
   );

From cbb7d682173ea07706d56c89bfa9bac1b217f981 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Wed, 19 Feb 2025 02:02:52 -0500
Subject: [PATCH 21/27] Go to the order page after order

---
 frontend/src/app/page.tsx             | 40 +++++++++++++++++++--------
 frontend/src/components/CartModal.tsx |  4 +--
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 4b900ad..3714a80 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -131,19 +131,35 @@ export default function Page() {
       {/* Hero Section */}
       <div className="bg-gradient-to-b from-[#2A9D8F]/10 to-transparent pt-36 pb-14">
         <div className="container mx-auto px-4">
-          <div className="max-w-4xl mx-auto text-center">
-            <div className="flex items-center justify-center gap-3 mb-6">
-              <BuildingStorefrontIcon className="h-14 w-14 text-[#2A9D8F]" />
-              <h1 className="text-5xl font-bold text-[#2D3748] font-display">localmart</h1>
+          <div className="flex justify-between items-start">
+            <div className="max-w-4xl">
+              <div className="flex items-center gap-3 mb-6">
+                <BuildingStorefrontIcon className="h-14 w-14 text-[#2A9D8F]" />
+                <h1 className="text-5xl font-bold text-[#2D3748] font-display">localmart</h1>
+              </div>
+              <p className="text-xl text-[#4A5568] mb-10 max-w-2xl leading-relaxed">
+                Shop local. Same-day delivery.
+                <br />
+                From your favorite neighborhood stores.
+              </p>
+              <SearchProvider>
+                {productSearchEnabled && <Search />}
+              </SearchProvider>
+            </div>
+
+            {/* Region Select */}
+            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm ring-1 ring-black/5">
+              <label htmlFor="region-select" className="block text-sm font-medium text-[#4A5568] mb-2">
+                Neighborhood
+              </label>
+              <select
+                id="region-select"
+                className="w-48 rounded-lg border border-[#2A9D8F]/20 bg-white py-2 px-3 shadow-sm focus:border-[#2A9D8F] focus:outline-none focus:ring-1 focus:ring-[#2A9D8F] text-[#2D3748] font-medium"
+                defaultValue="astoria"
+              >
+                <option value="astoria">Astoria</option>
+              </select>
             </div>
-            <p className="text-xl text-[#4A5568] mb-10 max-w-2xl mx-auto leading-relaxed">
-              Shop local. Same-day delivery.
-              <br />
-              From your favorite neighborhood stores.
-            </p>
-            <SearchProvider>
-              {productSearchEnabled && <Search />}
-            </SearchProvider>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/CartModal.tsx b/frontend/src/components/CartModal.tsx
index d819082..378d218 100644
--- a/frontend/src/components/CartModal.tsx
+++ b/frontend/src/components/CartModal.tsx
@@ -227,8 +227,8 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
       toast.success('Order placed successfully!');
       clearCart();
       onClose();
-      // Instead of redirecting, trigger the order history modal to open
-      document.dispatchEvent(new Event('openOrderHistory'));
+      // Navigate to the order page
+      router.push(`/orders/${data.order_id}`);
     } catch (error) {
       console.error('Error creating order:', error);
       toast.error(error instanceof Error ? error.message : 'Failed to create order');

From 058b01978e7e754df2e7ccb39b6d5f9f2c964115 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Wed, 19 Feb 2025 02:07:05 -0500
Subject: [PATCH 22/27] Update homepage again

---
 frontend/src/app/page.tsx | 54 ++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 3714a80..d5ed5c8 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -129,43 +129,55 @@ export default function Page() {
   return (
     <main className="min-h-[calc(100vh-64px)] bg-[#F5F2EB]">
       {/* Hero Section */}
-      <div className="bg-gradient-to-b from-[#2A9D8F]/10 to-transparent pt-36 pb-14">
-        <div className="container mx-auto px-4">
+      <div className="bg-gradient-to-b from-[#2A9D8F]/20 to-transparent pt-36 pb-14 relative overflow-hidden">
+        {/* Decorative Background Pattern */}
+        <div className="absolute inset-0 opacity-[0.15]" style={{ 
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232A9D8F' fill-rule='evenodd'%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+          backgroundSize: '52px 26px'
+        }} />
+        
+        {/* Gradient Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-r from-[#2A9D8F]/10 via-transparent to-[#2A9D8F]/5" />
+        
+        <div className="container mx-auto px-4 relative">
           <div className="flex justify-between items-start">
-            <div className="max-w-4xl">
-              <div className="flex items-center gap-3 mb-6">
-                <BuildingStorefrontIcon className="h-14 w-14 text-[#2A9D8F]" />
-                <h1 className="text-5xl font-bold text-[#2D3748] font-display">localmart</h1>
-              </div>
-              <p className="text-xl text-[#4A5568] mb-10 max-w-2xl leading-relaxed">
-                Shop local. Same-day delivery.
-                <br />
-                From your favorite neighborhood stores.
-              </p>
-              <SearchProvider>
-                {productSearchEnabled && <Search />}
-              </SearchProvider>
-            </div>
-
             {/* Region Select */}
-            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm ring-1 ring-black/5">
-              <label htmlFor="region-select" className="block text-sm font-medium text-[#4A5568] mb-2">
+            <div className="bg-white/95 backdrop-blur-sm rounded-xl p-5 shadow-lg ring-1 ring-[#2A9D8F]/20">
+              <label htmlFor="region-select" className="block text-base font-semibold text-[#2D3748] mb-2.5">
                 Neighborhood
               </label>
               <select
                 id="region-select"
-                className="w-48 rounded-lg border border-[#2A9D8F]/20 bg-white py-2 px-3 shadow-sm focus:border-[#2A9D8F] focus:outline-none focus:ring-1 focus:ring-[#2A9D8F] text-[#2D3748] font-medium"
+                className="w-56 rounded-lg border-2 border-[#2A9D8F]/30 bg-white py-2.5 px-4 text-base shadow-sm 
+                  focus:border-[#2A9D8F] focus:outline-none focus:ring-2 focus:ring-[#2A9D8F]/20 
+                  text-[#2D3748] font-medium hover:border-[#2A9D8F]/50 transition-colors"
                 defaultValue="astoria"
               >
                 <option value="astoria">Astoria</option>
               </select>
             </div>
+
+            {/* Main Hero Content */}
+            <div className="max-w-xl text-right">
+              <div className="flex items-center justify-end gap-3 mb-6">
+                <h1 className="text-5xl font-bold text-[#2D3748] font-display">localmart</h1>
+                <BuildingStorefrontIcon className="h-14 w-14 text-[#2A9D8F]" />
+              </div>
+              <p className="text-xl text-[#4A5568] mb-10 leading-relaxed">
+                Shop local. Same-day delivery.
+                <br />
+                From your favorite neighborhood stores.
+              </p>
+              <SearchProvider>
+                {productSearchEnabled && <Search />}
+              </SearchProvider>
+            </div>
           </div>
         </div>
       </div>
 
       {/* Main Content Container */}
-      <div className="container mx-auto px-4 -mt-4">
+      <div className="container mx-auto px-4 -mt-8">
         {/* Local Stores Section - Commented Out
         <div className="bg-[#FFFFFF]/90 backdrop-blur-sm rounded-2xl shadow-sm ring-1 ring-black/5 p-8 mb-8">
           <h2 className="text-3xl font-bold text-[#2D3748] mb-8">Local Stores</h2>

From 65e2e26c1c339e67cbef6bc99f98be318eac66a2 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Wed, 19 Feb 2025 02:21:44 -0500
Subject: [PATCH 23/27] Update order history modal to only show user's orders
 (even for admins)

---
 .../1739949362_updated_order_items.js         |  22 +++
 .../1739949416_updated_order_items.js         |  22 +++
 frontend/src/components/OrderHistoryModal.tsx | 140 ++++++++++++------
 python-backend/localmart_backend/main.py      |  80 +++++++++-
 4 files changed, 212 insertions(+), 52 deletions(-)
 create mode 100644 db/pb_migrations/1739949362_updated_order_items.js
 create mode 100644 db/pb_migrations/1739949416_updated_order_items.js

diff --git a/db/pb_migrations/1739949362_updated_order_items.js b/db/pb_migrations/1739949362_updated_order_items.js
new file mode 100644
index 0000000..a224c65
--- /dev/null
+++ b/db/pb_migrations/1739949362_updated_order_items.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.role ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.role ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/db/pb_migrations/1739949416_updated_order_items.js b/db/pb_migrations/1739949416_updated_order_items.js
new file mode 100644
index 0000000..431f0e9
--- /dev/null
+++ b/db/pb_migrations/1739949416_updated_order_items.js
@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?~ 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?~ 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2456927940")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.roles ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)",
+    "viewRule": "@request.auth.roles ?= 'admin' || \norder.user.id = @request.auth.id ||\n(\n  @collection.store_roles.user.id = @request.auth.id &&\n  @collection.store_roles.store.id = store_item.store.id &&\n  @collection.store_roles.role = 'admin'\n)"
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/frontend/src/components/OrderHistoryModal.tsx b/frontend/src/components/OrderHistoryModal.tsx
index 25a762a..7e76eea 100644
--- a/frontend/src/components/OrderHistoryModal.tsx
+++ b/frontend/src/components/OrderHistoryModal.tsx
@@ -1,10 +1,13 @@
 'use client';
 
 import { Dialog, Transition } from '@headlessui/react'
-import { Fragment } from 'react'
+import { Fragment, useState, useEffect } from 'react'
 import { formatCurrency } from '@/utils/currency'
 import { ClockIcon } from '@heroicons/react/24/outline'
 import { useRouter } from 'next/navigation'
+import { useAuth } from '@/app/contexts/auth'
+import { toast } from 'react-hot-toast'
+import { config } from '@/config'
 
 const formatDateTime = (isoString: string) => {
   // Parse the UTC time string and create a Date object
@@ -59,6 +62,39 @@ interface OrderHistoryModalProps {
 
 export default function OrderHistoryModal({ isOpen, onClose, orders }: OrderHistoryModalProps) {
   const router = useRouter();
+  const { user } = useAuth();
+  const [userOrders, setUserOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchOrders = async () => {
+      if (!user?.token) return;
+
+      try {
+        const response = await fetch(`${config.apiUrl}/api/v0/user/orders`, {
+          headers: {
+            'Authorization': `Bearer ${user.token}`
+          }
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch orders');
+        }
+
+        const data = await response.json();
+        setUserOrders(data);
+      } catch (error) {
+        console.error('Error fetching orders:', error);
+        toast.error('Failed to load orders');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (isOpen && user) {
+      fetchOrders();
+    }
+  }, [isOpen, user]);
 
   const getStatusColor = (status: string) => {
     switch (status) {
@@ -148,58 +184,68 @@ export default function OrderHistoryModal({ isOpen, onClose, orders }: OrderHist
                   Order History
                 </Dialog.Title>
 
-                <div className="space-y-4">
-                  {orders.map((order) => (
-                    <div
-                      key={order.id}
-                      onClick={() => handleOrderClick(order.id)}
-                      className="bg-white/80 backdrop-blur-sm rounded-lg p-6 hover:shadow-md transition-all cursor-pointer"
-                    >
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <div className="flex items-center gap-2">
-                            <p className="font-medium text-[#2D3748]">Order #{order.id.slice(-6)}</p>
-                            <span
-                              className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}
-                            >
-                              {getStatusLabel(order.status)}
-                            </span>
-                            <span
-                              className={`px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}
-                            >
-                              {getPaymentStatusLabel(order.payment_status)}
-                            </span>
+                {loading ? (
+                  <div className="space-y-4">
+                    {[1, 2, 3].map((i) => (
+                      <div key={i} className="animate-pulse">
+                        <div className="h-32 bg-white/50 rounded-lg"></div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    {userOrders.map((order) => (
+                      <div
+                        key={order.id}
+                        onClick={() => handleOrderClick(order.id)}
+                        className="bg-white/80 backdrop-blur-sm rounded-lg p-6 hover:shadow-md transition-all cursor-pointer"
+                      >
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <p className="font-medium text-[#2D3748]">Order #{order.id.slice(-6)}</p>
+                              <span
+                                className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}
+                              >
+                                {getStatusLabel(order.status)}
+                              </span>
+                              <span
+                                className={`px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(order.payment_status)}`}
+                              >
+                                {getPaymentStatusLabel(order.payment_status)}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-2 mt-1 text-sm text-[#4A5568]">
+                              <ClockIcon className="w-4 h-4" />
+                              <time dateTime={order.created}>
+                                {formatDateTime(order.created)}
+                              </time>
+                            </div>
                           </div>
-                          <div className="flex items-center gap-2 mt-1 text-sm text-[#4A5568]">
-                            <ClockIcon className="w-4 h-4" />
-                            <time dateTime={order.created}>
-                              {formatDateTime(order.created)}
-                            </time>
+                          <div className="text-right">
+                            <p className="text-sm text-[#4A5568]">Total</p>
+                            <p className="font-medium text-[#2D3748]">{formatCurrency(order.total_amount)}</p>
                           </div>
                         </div>
-                        <div className="text-right">
-                          <p className="text-sm text-[#4A5568]">Total</p>
-                          <p className="font-medium text-[#2D3748]">{formatCurrency(order.total_amount)}</p>
+                        <div className="mt-2 text-sm text-[#4A5568]">
+                          {order.stores.map((store) => (
+                            <div key={store.store.id} className="flex items-center gap-1">
+                              <span className="font-medium">{store.store.name}</span>
+                              <span>•</span>
+                              <span>{store.items.length} {store.items.length === 1 ? 'item' : 'items'}</span>
+                            </div>
+                          ))}
                         </div>
                       </div>
-                      <div className="mt-2 text-sm text-[#4A5568]">
-                        {order.stores.map((store) => (
-                          <div key={store.store.id} className="flex items-center gap-1">
-                            <span className="font-medium">{store.store.name}</span>
-                            <span>•</span>
-                            <span>{store.items.length} {store.items.length === 1 ? 'item' : 'items'}</span>
-                          </div>
-                        ))}
+                    ))}
+
+                    {userOrders.length === 0 && (
+                      <div className="text-center py-8 text-[#4A5568]">
+                        <p>No orders found</p>
                       </div>
-                    </div>
-                  ))}
-
-                  {orders.length === 0 && (
-                    <div className="text-center py-8 text-[#4A5568]">
-                      <p>No orders found</p>
-                    </div>
-                  )}
-                </div>
+                    )}
+                  </div>
+                )}
 
                 <div className="mt-6">
                   <button
diff --git a/python-backend/localmart_backend/main.py b/python-backend/localmart_backend/main.py
index fe8a435..86577c2 100644
--- a/python-backend/localmart_backend/main.py
+++ b/python-backend/localmart_backend/main.py
@@ -324,22 +324,92 @@ async def create_order(request: Dict):
         )
 
 @app.get("/api/v0/orders", response_model=List[Dict])
+async def get_all_orders(request: Request):
+    """Get all orders (admin only)"""
+    token = get_token_from_request(request)
+    decoded_token = decode_jwt(token)
+
+    # Verify user is admin
+    user = pb_service.get_user_from_token(token)
+    if not 'admin' in (getattr(user, 'roles', []) or []):
+        raise HTTPException(status_code=403, detail="Admin access required")
+
+    with user_auth_context(token):
+        # Get all orders
+        orders = pb_service.get_list(
+            'orders',
+            query_params={
+                "sort": "-created",
+                "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store"
+            }
+        )
+
+        # Format orders for response
+        formatted_orders = []
+        for order in orders.items:
+            # Group items by store
+            stores_dict = {}
+
+            # Get all order items for this order
+            order_items = order.expand.get('order_items_via_order', [])
+
+            for item in order_items:
+                if not hasattr(item, 'expand') or not item.expand.get('store_item'):
+                    continue
+
+                store_item = item.expand['store_item']
+                if not hasattr(store_item, 'expand') or not store_item.expand.get('store'):
+                    continue
+
+                store = store_item.expand['store']
+                store_id = store.id
+
+                if store_id not in stores_dict:
+                    stores_dict[store_id] = {
+                        'store': {
+                            'id': store.id,
+                            'name': store.name
+                        },
+                        'items': []
+                    }
+
+                stores_dict[store_id]['items'].append({
+                    'id': item.id,
+                    'name': store_item.name,
+                    'quantity': item.quantity,
+                    'price': item.price_at_time
+                })
+
+            delivery_address = order.delivery_address if hasattr(order, 'delivery_address') else None
+
+            formatted_order = {
+                'id': order.id,
+                'created': order.created,
+                'status': order.status,
+                'payment_status': order.payment_status,
+                'delivery_fee': order.delivery_fee,
+                'total_amount': order.total_amount,
+                'tax_amount': order.tax_amount,
+                'delivery_address': delivery_address,
+                'stores': list(stores_dict.values())
+            }
+            formatted_orders.append(formatted_order)
+
+        return formatted_orders
+
+@app.get("/api/v0/user/orders", response_model=List[Dict])
 async def get_user_orders(request: Request):
     """Get orders for the authenticated user"""
     token = get_token_from_request(request)
     decoded_token = decode_jwt(token)
     user_id = decoded_token['id']
 
-    # if user is admin, then filter by user, otherwise don't
-    user = pb_service.get_user_from_token(token)
-    is_admin = 'admin' in (getattr(user, 'roles', []) or [])
-
     with user_auth_context(token):
         # Get user's orders
         orders = pb_service.get_list(
             'orders',
             query_params={
-                "filter": f'user = "{user_id}"' if not is_admin else '',
+                "filter": f'user = "{user_id}"',
                 "sort": "-created",
                 "expand": "order_items_via_order.store_item,order_items_via_order.store_item.store"
             }

From 3b112117773facf91af467fec4bdce738fe4afad Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Wed, 19 Feb 2025 02:24:44 -0500
Subject: [PATCH 24/27] Update homepage

---
 frontend/src/app/page.tsx | 104 +++++++++++++++++++-------------------
 1 file changed, 53 insertions(+), 51 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index d5ed5c8..f7ae854 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -219,63 +219,65 @@ export default function Page() {
         */}
 
         {/* Popular Items Sections */}
-        {stores.map((store, storeIndex) => store.items && store.items.length > 0 && (
-          <div key={store.id} className="bg-[#FAF9F6]/80 backdrop-blur-sm rounded-2xl shadow-sm ring-1 ring-black/5 p-8 mb-8">
-            <div className="flex items-center justify-between mb-8">
-              <Link
-                href={`/store/${store.id}`}
-                className="group"
-              >
-                <h2 className="text-2xl font-bold text-[#2D3748] group-hover:text-[#2A9D8F] transition-colors">{store.name}</h2>
-              </Link>
-              <Link
-                href={`/store/${store.id}`}
-                className="text-[#2A9D8F] hover:text-[#40B4A6] transition-colors text-sm font-medium flex items-center gap-1 group"
-              >
-                See all
-                <span className="transform group-hover:translate-x-1 transition-transform duration-200">→</span>
-              </Link>
-            </div>
-            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
-              {store.items.slice(0, 6).map((item) => (
-                <div
-                  key={item.id}
-                  className="group relative bg-[#FFFFFF]/95 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden ring-1 ring-black/5 hover:ring-[#2A9D8F]/10"
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {stores.map((store, storeIndex) => store.items && store.items.length > 0 && (
+            <div key={store.id} className="bg-[#FAF9F6]/80 backdrop-blur-sm rounded-2xl shadow-sm ring-1 ring-black/5 p-8">
+              <div className="flex items-center justify-between mb-8">
+                <Link
+                  href={`/store/${store.id}`}
+                  className="group"
                 >
-                  <Link href={`/store/${store.id}`}>
-                    <div className="aspect-w-4 aspect-h-3">
-                      <img
-                        src={item.imageUrl}
-                        alt={item.name}
-                        className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-200"
-                      />
-                    </div>
-                  </Link>
-                  <div className="p-4">
+                  <h2 className="text-2xl font-bold text-[#2D3748] group-hover:text-[#2A9D8F] transition-colors">{store.name}</h2>
+                </Link>
+                <Link
+                  href={`/store/${store.id}`}
+                  className="text-[#2A9D8F] hover:text-[#40B4A6] transition-colors text-sm font-medium flex items-center gap-1 group"
+                >
+                  See all
+                  <span className="transform group-hover:translate-x-1 transition-transform duration-200">→</span>
+                </Link>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                {store.items.slice(0, 3).map((item) => (
+                  <div
+                    key={item.id}
+                    className="group relative bg-[#FFFFFF]/95 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden ring-1 ring-black/5 hover:ring-[#2A9D8F]/10"
+                  >
                     <Link href={`/store/${store.id}`}>
-                      <h3 className="text-sm font-semibold text-[#2D3748] mb-1 group-hover:text-[#2A9D8F] transition-colors line-clamp-2">
-                        {item.name}
-                      </h3>
+                      <div className="aspect-w-4 aspect-h-3">
+                        <img
+                          src={item.imageUrl}
+                          alt={item.name}
+                          className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-200"
+                        />
+                      </div>
                     </Link>
-                    <div className="flex items-center justify-between mt-2">
-                      <p className="text-[#4A5568] font-medium">${item.price.toFixed(2)}</p>
-                      <button
-                        onClick={(e) => {
-                          e.preventDefault();
-                          handleAddToCart(store.id, item);
-                        }}
-                        className="p-2 text-[#2A9D8F] hover:text-white hover:bg-[#2A9D8F] rounded-full transition-colors group/btn"
-                        aria-label={`Add ${item.name} to cart`}
-                      >
-                        <PlusIcon className="w-5 h-5" />
-                      </button>
+                    <div className="p-4">
+                      <Link href={`/store/${store.id}`}>
+                        <h3 className="text-sm font-semibold text-[#2D3748] mb-1 group-hover:text-[#2A9D8F] transition-colors line-clamp-2">
+                          {item.name}
+                        </h3>
+                      </Link>
+                      <div className="flex items-center justify-between mt-2">
+                        <p className="text-[#4A5568] font-medium">${item.price.toFixed(2)}</p>
+                        <button
+                          onClick={(e) => {
+                            e.preventDefault();
+                            handleAddToCart(store.id, item);
+                          }}
+                          className="p-2 text-[#2A9D8F] hover:text-white hover:bg-[#2A9D8F] rounded-full transition-colors group/btn"
+                          aria-label={`Add ${item.name} to cart`}
+                        >
+                          <PlusIcon className="w-5 h-5" />
+                        </button>
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
+                ))}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     </main>
   );

From d26153f9a2da4c77e0981990d1487e23442f41fd Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Sun, 23 Feb 2025 17:02:20 -0500
Subject: [PATCH 25/27] Fix user orders endpoint

---
 frontend/src/components/Header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 04b706b..e253de6 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -50,7 +50,7 @@ export default function Header() {
       try {
         console.log('User token:', user.token?.slice(0, 20) + '...')  // Log first 20 chars of token
         
-        const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
+        const response = await fetch(`${config.apiUrl}/api/v0/user/orders`, {
           headers: {
             'Authorization': `Bearer ${user.token}`,
             'Content-Type': 'application/json'
@@ -97,7 +97,7 @@ export default function Header() {
                     href="/orders"
                     className="text-sm text-white/80 hover:text-white transition-colors ml-2"
                   >
-                    orders
+                    admin
                   </Link>
                 </>
               )}

From 0d2f69392069f4f0212f588f74724b3dfd5eab2c Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Sun, 23 Feb 2025 17:26:01 -0500
Subject: [PATCH 26/27] Factor all of the API calls into their own file

---
 frontend/src/api/index.ts                     | 371 ++++++++++++++++++
 frontend/src/app/contexts/auth.tsx            |  49 +--
 frontend/src/app/page.tsx                     |  45 +--
 frontend/src/app/profile/page.tsx             | 142 +------
 frontend/src/app/store/[id]/StoreContent.tsx  |  46 +--
 frontend/src/components/CartModal.tsx         | 127 ++----
 frontend/src/components/Header.tsx            |  40 +-
 frontend/src/components/OrderHistoryModal.tsx |  44 +--
 8 files changed, 450 insertions(+), 414 deletions(-)
 create mode 100644 frontend/src/api/index.ts

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
new file mode 100644
index 0000000..1b30df8
--- /dev/null
+++ b/frontend/src/api/index.ts
@@ -0,0 +1,371 @@
+import { config } from '@/config';
+
+// Types
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  token: string;
+  roles: string[];
+}
+
+export interface UserResponse {
+  user: {
+    id: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+    roles: string[];
+  };
+  token: string;
+}
+
+export interface Profile {
+  first_name: string;
+  last_name: string;
+  phone_number: string;
+  street_1: string;
+  street_2: string;
+  city: string;
+  state: string;
+  zip: string;
+}
+
+export interface Order {
+  id: string;
+  created: string;
+  status: string;
+  payment_status: string;
+  delivery_fee: number;
+  total_amount: number;
+  tax_amount: number;
+  delivery_address?: {
+    street_address: string[];
+    city: string;
+    state: string;
+    zip_code: string;
+  };
+  customer_phone?: string;
+  stores: {
+    store: {
+      id: string;
+      name: string;
+    };
+    items: {
+      id: string;
+      name: string;
+      quantity: number;
+      price: number;
+    }[];
+  }[];
+}
+
+export interface Store {
+  id: string;
+  name: string;
+  street_1: string;
+  street_2?: string;
+  city: string;
+  state: string;
+  zip_code: string;
+  instagram?: string;
+  facebook?: string;
+  twitter?: string;
+  items?: StoreItem[];
+}
+
+export interface StoreItem {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  quantity: number;
+  imageUrl?: string;
+}
+
+export interface SavedCard {
+  id: string;
+  last4: string;
+  brand: string;
+  exp_month: number;
+  exp_year: number;
+  isDefault: boolean;
+}
+
+export interface OrderCreateData {
+  token: string;
+  user_id: string;
+  store_id: string;
+  payment_method_id: string;
+  items: {
+    store_item_id: string;
+    quantity: number;
+    price: number;
+  }[];
+  subtotal_amount: number;
+  tax_amount: number;
+  delivery_fee: number;
+  total_amount: number;
+  delivery_address: {
+    street_address: string[];
+    city: string;
+    state: string;
+    zip_code: string;
+    country: string;
+  };
+}
+
+// Helper function to handle API responses
+async function handleResponse<T>(response: Response): Promise<T> {
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.detail || `API Error: ${response.status}`);
+  }
+  return response.json();
+}
+
+// Auth API
+export const authApi = {
+  login: async (email: string, password: string): Promise<UserResponse> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    });
+    return handleResponse(response);
+  },
+
+  signup: async (email: string, password: string, first_name: string, last_name: string): Promise<UserResponse> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/auth/signup`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        email,
+        password,
+        passwordConfirm: password,
+        first_name,
+        last_name
+      }),
+    });
+    return handleResponse(response);
+  },
+
+  getProfile: async (token: string): Promise<Profile> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/auth/profile`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  updateProfile: async (token: string, profile: Partial<Profile>): Promise<Profile> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/auth/profile`, {
+      method: 'PATCH',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(profile),
+    });
+    return handleResponse(response);
+  },
+};
+
+// Orders API
+export const ordersApi = {
+  getUserOrders: async (token: string): Promise<Order[]> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/user/orders`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  getAdminOrders: async (token: string): Promise<Order[]> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  getOrder: async (token: string, orderId: string): Promise<Order> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/orders/${orderId}`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  createOrder: async (token: string, orderData: OrderCreateData): Promise<Order> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(orderData),
+    });
+    return handleResponse(response);
+  },
+
+  getOrderById: async (token: string, orderId: string): Promise<Order> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/orders/${orderId}`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  updateOrderStatus: async (token: string, orderId: string, status: string): Promise<Order> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/orders/${orderId}/status`, {
+      method: 'PATCH',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ status }),
+    });
+    return handleResponse(response);
+  },
+};
+
+// Stores API
+export const storesApi = {
+  getAllStores: async (): Promise<Store[]> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/stores`);
+    return handleResponse(response);
+  },
+
+  getStore: async (storeId: string): Promise<Store> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}`);
+    return handleResponse(response);
+  },
+
+  getStoreItems: async (storeId: string): Promise<StoreItem[]> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items`);
+    return handleResponse(response);
+  },
+
+  getStoreOrders: async (token: string, storeId: string): Promise<Order[]> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/orders`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  getStoreRoles: async (token: string, storeId: string): Promise<{ roles: string[] }> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/roles`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  createStoreItem: async (token: string, storeId: string, itemData: Partial<StoreItem>): Promise<StoreItem> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(itemData),
+    });
+    return handleResponse(response);
+  },
+
+  updateStoreItem: async (token: string, storeId: string, itemId: string, itemData: Partial<StoreItem>): Promise<StoreItem> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items/${itemId}`, {
+      method: 'PATCH',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(itemData),
+    });
+    return handleResponse(response);
+  },
+
+  deleteStoreItem: async (token: string, storeId: string, itemId: string): Promise<void> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items/${itemId}`, {
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  getStoreWithItems: async (storeId: string): Promise<Store & { items: StoreItem[] }> => {
+    const [store, items] = await Promise.all([
+      storesApi.getStore(storeId),
+      storesApi.getStoreItems(storeId)
+    ]);
+    return {
+      ...store,
+      items: items.map(item => ({
+        ...item,
+        imageUrl: `https://picsum.photos/seed/${item.id}/400/300`
+      }))
+    };
+  },
+
+  getAllStoresWithItems: async (): Promise<(Store & { items: StoreItem[] })[]> => {
+    const stores = await storesApi.getAllStores();
+    const storesWithItems = await Promise.all(
+      stores.map(async (store) => {
+        const items = await storesApi.getStoreItems(store.id);
+        return {
+          ...store,
+          items: items.map(item => ({
+            ...item,
+            imageUrl: `https://picsum.photos/seed/${item.id}/400/300`
+          }))
+        };
+      })
+    );
+    return storesWithItems;
+  },
+};
+
+// Payment API
+export const paymentApi = {
+  getCards: async (token: string): Promise<SavedCard[]> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/payment/cards`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    if (response.status === 404) return [];
+    return handleResponse(response);
+  },
+
+  createSetupIntent: async (token: string): Promise<{ clientSecret: string }> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/payment/setup-intent`, {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+
+  attachCard: async (token: string, paymentMethodId: string): Promise<SavedCard> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/payment/cards`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ payment_method_id: paymentMethodId }),
+    });
+    return handleResponse(response);
+  },
+
+  deleteCard: async (token: string, cardId: string): Promise<void> => {
+    const response = await fetch(`${config.apiUrl}/api/v0/payment/cards/${cardId}`, {
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    return handleResponse(response);
+  },
+};
+
+// Search API
+export const searchApi = {
+  searchProducts: async (query: string): Promise<any[]> => {
+    const response = await fetch(
+      `${config.searchUrl}/api/search?query=${encodeURIComponent(query)}&index=products`
+    );
+    const { hits } = await handleResponse<{ hits: any[] }>(response);
+    return hits;
+  },
+}; 
\ No newline at end of file
diff --git a/frontend/src/app/contexts/auth.tsx b/frontend/src/app/contexts/auth.tsx
index e235686..4e15cfa 100644
--- a/frontend/src/app/contexts/auth.tsx
+++ b/frontend/src/app/contexts/auth.tsx
@@ -1,15 +1,7 @@
 'use client';
 
 import React, { createContext, useContext, useState, useEffect } from 'react';
-import { config } from '@/config';
-
-interface User {
-  id: string;
-  email: string;
-  name: string;
-  token: string;
-  roles: string[];
-}
+import { authApi, User } from '@/api';
 
 interface AuthContextType {
   user: User | null;
@@ -32,21 +24,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   const login = async (email: string, password: string) => {
-    const response = await fetch(`${config.apiUrl}/api/v0/auth/login`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ email, password }),
-    });
-
-    if (!response.ok) {
-      throw new Error('Login failed');
-    }
-
-    const data = await response.json();
-    console.log('Login response data:', data);  // Debug log
-    console.log('User roles from backend:', data.user.roles);  // Debug log
+    const data = await authApi.login(email, password);
     const userData = {
       id: data.user.id,
       email: data.user.email,
@@ -54,7 +32,6 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       token: data.token,
       roles: data.user.roles || [],
     };
-    console.log('Final user data with roles:', userData);  // Debug log
 
     setUser(userData);
     localStorage.setItem('auth', JSON.stringify(userData));
@@ -63,27 +40,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   const signup = async (email: string, password: string, name: string) => {
     // Split name into first and last name
     const [first_name, ...lastNameParts] = name.trim().split(' ');
-    const last_name = lastNameParts.join(' ') || ''; // Join remaining parts or empty string
-
-    const response = await fetch(`${config.apiUrl}/api/v0/auth/signup`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        email,
-        password,
-        passwordConfirm: password,
-        first_name,
-        last_name
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error('Signup failed');
-    }
+    const last_name = lastNameParts.join(' ') || '';
 
-    const data = await response.json();
+    const data = await authApi.signup(email, password, first_name, last_name);
     const userData = {
       id: data.user.id,
       email: data.user.email,
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index f7ae854..9e08d7f 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -8,24 +8,7 @@ import { Search } from '@/components/Search';
 import { useFeatureFlag } from '@/app/contexts/featureFlags';
 import { useCart } from '@/app/contexts/cart';
 import { toast } from 'react-hot-toast';
-
-interface Store {
-  id: string;
-  name: string;
-  street_1: string;
-  street_2?: string;
-  city: string;
-  state: string;
-  zip_code: string;
-  items?: StoreItem[];
-}
-
-interface StoreItem {
-  id: string;
-  name: string;
-  price: number;
-  imageUrl?: string;
-}
+import { storesApi, Store, StoreItem } from '@/api';
 
 export default function Page() {
   const [stores, setStores] = useState<Store[]>([]);
@@ -37,31 +20,7 @@ export default function Page() {
   useEffect(() => {
     const fetchStores = async () => {
       try {
-        const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-        // Fetch stores
-        const storesResponse = await fetch(`${baseUrl}/api/v0/stores`);
-        if (!storesResponse.ok) {
-          throw new Error('Failed to fetch stores');
-        }
-        const storesData = await storesResponse.json();
-        
-        // Fetch items for each store
-        const storesWithItems = await Promise.all(
-          storesData.map(async (store: Store) => {
-            const itemsResponse = await fetch(`${baseUrl}/api/v0/stores/${store.id}/items`);
-            if (itemsResponse.ok) {
-              const items = await itemsResponse.json();
-              // Add mock image URLs to items
-              const itemsWithImages = items.map((item: StoreItem) => ({
-                ...item,
-                imageUrl: `https://picsum.photos/seed/${item.id}/400/300`
-              }));
-              return { ...store, items: itemsWithImages };
-            }
-            return store;
-          })
-        );
-        
+        const storesWithItems = await storesApi.getAllStoresWithItems();
         setStores(storesWithItems);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to fetch stores');
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index 4f1bc07..cdebf3d 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -6,30 +6,11 @@ import { toast } from 'react-hot-toast';
 import { config } from '@/config';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements, useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
+import { authApi, paymentApi, Profile, SavedCard } from '@/api';
 
 // Initialize Stripe
 const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!);
 
-interface UserProfile {
-  first_name: string;
-  last_name: string;
-  phone_number: string;
-  street_1: string;
-  street_2: string;
-  city: string;
-  state: string;
-  zip: string;
-}
-
-interface SavedCard {
-  id: string;
-  last4: string;
-  brand: string;
-  exp_month: number;
-  exp_year: number;
-  isDefault: boolean;
-}
-
 // Card form component
 function CardForm({ onSuccess }: { onSuccess: () => void }) {
   const stripe = useStripe();
@@ -44,18 +25,7 @@ function CardForm({ onSuccess }: { onSuccess: () => void }) {
     setLoading(true);
     try {
       // Get setup intent from backend
-      const setupResponse = await fetch(`${config.apiUrl}/api/v0/payment/setup-intent`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${user.token}`,
-        }
-      });
-
-      if (!setupResponse.ok) {
-        throw new Error('Failed to create setup intent');
-      }
-
-      const { clientSecret } = await setupResponse.json();
+      const { clientSecret } = await paymentApi.createSetupIntent(user.token);
 
       // Confirm card setup
       const result = await stripe.confirmCardSetup(clientSecret, {
@@ -71,22 +41,13 @@ function CardForm({ onSuccess }: { onSuccess: () => void }) {
         throw new Error(result.error.message);
       }
 
-      // Notify backend of successful setup
-      const attachResponse = await fetch(`${config.apiUrl}/api/v0/payment/cards`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${user.token}`,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          payment_method_id: result.setupIntent!.payment_method,
-        }),
-      });
-
-      if (!attachResponse.ok) {
-        throw new Error('Failed to save card');
+      if (!result.setupIntent?.payment_method || typeof result.setupIntent.payment_method !== 'string') {
+        throw new Error('Invalid payment method');
       }
 
+      // Notify backend of successful setup
+      await paymentApi.attachCard(user.token, result.setupIntent.payment_method);
+
       toast.success('Card added successfully');
       onSuccess();
     } catch (error) {
@@ -128,11 +89,7 @@ function CardForm({ onSuccess }: { onSuccess: () => void }) {
 
 export default function ProfilePage() {
   const { user } = useAuth();
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [showCardForm, setShowCardForm] = useState(false);
-  const [savedCards, setSavedCards] = useState<SavedCard[]>([]);
-  const [profile, setProfile] = useState<UserProfile>({
+  const [profile, setProfile] = useState<Profile>({
     first_name: '',
     last_name: '',
     phone_number: '',
@@ -142,6 +99,10 @@ export default function ProfilePage() {
     state: '',
     zip: ''
   });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [showAddCard, setShowAddCard] = useState(false);
+  const [savedCards, setSavedCards] = useState<SavedCard[]>([]);
 
   const formatPhoneNumber = (value: string) => {
     // Remove all non-digits
@@ -167,27 +128,8 @@ export default function ProfilePage() {
       if (!user?.token) return;
 
       try {
-        const response = await fetch(`${config.apiUrl}/api/v0/auth/profile`, {
-          headers: {
-            'Authorization': `Bearer ${user.token}`
-          }
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch profile');
-        }
-
-        const data = await response.json();
-        setProfile({
-          first_name: data.first_name || '',
-          last_name: data.last_name || '',
-          phone_number: data.phone_number || '',
-          street_1: data.street_1 || '',
-          street_2: data.street_2 || '',
-          city: data.city || '',
-          state: data.state || '',
-          zip: data.zip || ''
-        });
+        const data = await authApi.getProfile(user.token);
+        setProfile(data);
       } catch (error) {
         console.error('Error fetching profile:', error);
         toast.error('Failed to load profile');
@@ -203,30 +145,10 @@ export default function ProfilePage() {
     if (!user?.token) return;
 
     try {
-      const response = await fetch(`${config.apiUrl}/api/v0/payment/cards`, {
-        headers: {
-          'Authorization': `Bearer ${user.token}`
-        }
-      });
-
-      if (response.status === 404) {
-        // No cards is a valid state
-        setSavedCards([]);
-        return;
-      }
-
-      if (!response.ok) {
-        console.error('Error fetching cards:', response.status, response.statusText);
-        const errorData = await response.json().catch(() => ({}));
-        console.error('Error details:', errorData);
-        throw new Error('Failed to fetch cards');
-      }
-
-      const data = await response.json();
-      setSavedCards(Array.isArray(data) ? data : []);
+      const cards = await paymentApi.getCards(user.token);
+      setSavedCards(cards);
     } catch (error) {
       console.error('Error fetching cards:', error);
-      // Don't show error toast for no cards
       setSavedCards([]);
     }
   };
@@ -241,19 +163,7 @@ export default function ProfilePage() {
 
     setSaving(true);
     try {
-      const response = await fetch(`${config.apiUrl}/api/v0/auth/profile`, {
-        method: 'PATCH',
-        headers: {
-          'Authorization': `Bearer ${user.token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(profile)
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to update profile');
-      }
-
+      await authApi.updateProfile(user.token, profile);
       toast.success('Profile updated successfully');
     } catch (error) {
       console.error('Error updating profile:', error);
@@ -267,17 +177,7 @@ export default function ProfilePage() {
     if (!user?.token) return;
 
     try {
-      const response = await fetch(`${config.apiUrl}/api/v0/payment/cards/${cardId}`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${user.token}`,
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to remove card');
-      }
-
+      await paymentApi.deleteCard(user.token, cardId);
       toast.success('Card removed successfully');
       setSavedCards(cards => cards.filter(card => card.id !== cardId));
     } catch (error) {
@@ -505,18 +405,18 @@ export default function ProfilePage() {
             </div>
 
             {/* Add Card Section */}
-            {showCardForm ? (
+            {showAddCard ? (
               <Elements stripe={stripePromise}>
                 <CardForm
                   onSuccess={() => {
-                    setShowCardForm(false);
+                    setShowAddCard(false);
                     fetchCards();
                   }}
                 />
               </Elements>
             ) : (
               <button
-                onClick={() => setShowCardForm(true)}
+                onClick={() => setShowAddCard(true)}
                 type="button"
                 className="w-full flex items-center justify-center rounded-md border border-[#2A9D8F] bg-white px-4 py-2 text-sm font-medium text-[#2A9D8F] shadow-sm hover:bg-[#2A9D8F] hover:text-white focus:outline-none focus:ring-2 focus:ring-[#2A9D8F] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
               >
diff --git a/frontend/src/app/store/[id]/StoreContent.tsx b/frontend/src/app/store/[id]/StoreContent.tsx
index ca2e8c5..1510c37 100644
--- a/frontend/src/app/store/[id]/StoreContent.tsx
+++ b/frontend/src/app/store/[id]/StoreContent.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useCart } from '../../contexts/cart';
+import { useCart } from '@/app/contexts/cart';
 import { toast } from 'react-hot-toast';
 import { FaInstagram, FaFacebook, FaXTwitter } from 'react-icons/fa6';
 import { SiBluesky } from 'react-icons/si';
@@ -9,26 +9,7 @@ import { ClockIcon, MapPinIcon, ChartBarIcon, ShoppingBagIcon } from '@heroicons
 import { config } from '@/config';
 import { useStoreRoles } from '@/app/hooks/useStoreRoles';
 import Link from 'next/link';
-
-interface Store {
-  id: string;
-  name: string;
-  street_1: string;
-  street_2?: string;
-  city: string;
-  state: string;
-  zip_code: string;
-  instagram?: string;
-  facebook?: string;
-  twitter?: string;
-}
-
-interface StoreItem {
-  id: string;
-  name: string;
-  price: number;
-  imageUrl?: string;
-}
+import { storesApi, Store, StoreItem } from '@/api';
 
 export default function StoreContent({ storeId }: { storeId: string }) {
   const { addItem } = useCart();
@@ -45,26 +26,9 @@ export default function StoreContent({ storeId }: { storeId: string }) {
   useEffect(() => {
     const fetchStoreAndItems = async () => {
       try {
-        // Fetch store details
-        const storeResponse = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}`);
-        if (!storeResponse.ok) {
-          throw new Error('Failed to fetch store');
-        }
-        const storeData = await storeResponse.json();
-        setStore(storeData);
-
-        // Fetch store items
-        const itemsResponse = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items`);
-        if (!itemsResponse.ok) {
-          throw new Error('Failed to fetch store items');
-        }
-        const itemsData = await itemsResponse.json();
-        // Add mock image URLs to items
-        const itemsWithImages = itemsData.map((item: StoreItem) => ({
-          ...item,
-          imageUrl: `https://picsum.photos/seed/${item.id}/400/300`
-        }));
-        setItems(itemsWithImages);
+        const storeWithItems = await storesApi.getStoreWithItems(storeId);
+        setStore(storeWithItems);
+        setItems(storeWithItems.items);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to fetch store data');
       } finally {
diff --git a/frontend/src/components/CartModal.tsx b/frontend/src/components/CartModal.tsx
index 378d218..f54c6fb 100644
--- a/frontend/src/components/CartModal.tsx
+++ b/frontend/src/components/CartModal.tsx
@@ -8,35 +8,22 @@ import { useAuth } from '@/app/contexts/auth';
 import { toast } from 'react-hot-toast';
 import { config } from '@/config';
 import { useRouter } from 'next/navigation';
+import { storesApi, paymentApi, authApi, ordersApi, SavedCard, Store } from '@/api';
 
 interface CartModalProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
-interface Store {
-  id: string;
-  name: string;
-}
-
-interface SavedCard {
-  id: string;
-  last4: string;
-  brand: string;
-  exp_month: number;
-  exp_year: number;
-  isDefault: boolean;
-}
-
 export default function CartModal({ isOpen, onClose }: CartModalProps) {
   const { items, updateQuantity, removeItem, totalPrice, clearCart } = useCart();
   const { user } = useAuth();
   const router = useRouter();
   const [store, setStore] = useState<Store | null>(null);
-  const [isCheckingOut, setIsCheckingOut] = useState(false);
   const [savedCards, setSavedCards] = useState<SavedCard[]>([]);
   const [selectedCardId, setSelectedCardId] = useState<string>('');
   const [showCheckoutConfirm, setShowCheckoutConfirm] = useState(false);
+  const [isCheckingOut, setIsCheckingOut] = useState(false);
   const [orderSummary, setOrderSummary] = useState<{
     subtotalAmount: number;
     taxAmount: number;
@@ -60,25 +47,17 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
     setIsCheckingOut(false);
   }, [items]);
 
-  // Fetch store details when items change
+  // Fetch store details when cart has items
   useEffect(() => {
     const fetchStore = async () => {
       if (items.length > 0) {
         try {
-          const response = await fetch(`${config.apiUrl}/api/v0/stores/${items[0].store}`);
-          if (!response.ok) {
-            console.error(`Failed to fetch store: ${response.status} ${response.statusText}`);
-            const errorData = await response.json().catch(() => ({}));
-            console.error('Error details:', errorData);
-            return;
-          }
-          const storeData = await response.json();
+          const storeData = await storesApi.getStore(items[0].store);
           setStore(storeData);
         } catch (error) {
           console.error('Error fetching store:', error);
+          toast.error('Failed to load store details');
         }
-      } else {
-        setStore(null);
       }
     };
 
@@ -91,26 +70,10 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
       if (!user?.token) return;
 
       try {
-        const response = await fetch(`${config.apiUrl}/api/v0/payment/cards`, {
-          headers: {
-            'Authorization': `Bearer ${user.token}`
-          }
-        });
-
-        if (response.status === 404) {
-          // No cards found is a valid state
-          setSavedCards([]);
-          return;
-        }
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch cards');
-        }
-
-        const cards = await response.json();
-        setSavedCards(Array.isArray(cards) ? cards : []);
+        const cards = await paymentApi.getCards(user.token);
+        setSavedCards(cards);
         // Set the default card if available
-        const defaultCard = cards.find((card: SavedCard) => card.isDefault);
+        const defaultCard = cards.find(card => card.isDefault);
         if (defaultCard) {
           setSelectedCardId(defaultCard.id);
         } else if (cards.length > 0) {
@@ -118,7 +81,6 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
         }
       } catch (error) {
         console.error('Error fetching cards:', error);
-        // Don't show error toast for no cards
         setSavedCards([]);
       }
     };
@@ -166,17 +128,7 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
     setIsCheckingOut(true);
     try {
       // Get user's profile for delivery address
-      const profileResponse = await fetch(`${config.apiUrl}/api/v0/auth/profile`, {
-        headers: {
-          'Authorization': `Bearer ${user.token}`
-        }
-      });
-
-      if (!profileResponse.ok) {
-        throw new Error('Failed to get user profile');
-      }
-
-      const profile = await profileResponse.json();
+      const profile = await authApi.getProfile(user.token);
 
       // Validate delivery address
       if (!profile.street_1 || !profile.city || !profile.state || !profile.zip) {
@@ -187,51 +139,36 @@ export default function CartModal({ isOpen, onClose }: CartModalProps) {
       }
 
       // Create the order
-      const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${user.token}`
-        },
-        body: JSON.stringify({
-          token: user.token,
-          user_id: user.id,
-          store_id: store.id,
-          payment_method_id: selectedCardId,
-          items: items.map(item => ({
-            store_item_id: item.id,
-            quantity: item.quantity,
-            price: item.price
-          })),
-          subtotal_amount: orderSummary.subtotalAmount,
-          tax_amount: orderSummary.taxAmount,
-          delivery_fee: orderSummary.deliveryFee,
-          total_amount: orderSummary.totalAmount,
-          delivery_address: {
-            street_address: [profile.street_1].concat(profile.street_2 ? [profile.street_2] : []),
-            city: profile.city,
-            state: profile.state,
-            zip_code: profile.zip,
-            country: 'US'
-          }
-        })
+      await ordersApi.createOrder(user.token, {
+        token: user.token,
+        user_id: user.id,
+        store_id: store.id,
+        payment_method_id: selectedCardId,
+        items: items.map(item => ({
+          store_item_id: item.id,
+          quantity: item.quantity,
+          price: item.price
+        })),
+        subtotal_amount: orderSummary.subtotalAmount,
+        tax_amount: orderSummary.taxAmount,
+        delivery_fee: orderSummary.deliveryFee,
+        total_amount: orderSummary.totalAmount,
+        delivery_address: {
+          street_address: [profile.street_1].concat(profile.street_2 ? [profile.street_2] : []),
+          city: profile.city,
+          state: profile.state,
+          zip_code: profile.zip,
+          country: 'US'
+        }
       });
 
-      if (!response.ok) {
-        const error = await response.json();
-        throw new Error(error.detail || 'Failed to create order');
-      }
-
-      const data = await response.json();
-      
       toast.success('Order placed successfully!');
       clearCart();
       onClose();
-      // Navigate to the order page
-      router.push(`/orders/${data.order_id}`);
+      router.push('/orders');
     } catch (error) {
       console.error('Error creating order:', error);
-      toast.error(error instanceof Error ? error.message : 'Failed to create order');
+      toast.error('Failed to place order');
     } finally {
       setIsCheckingOut(false);
       setShowCheckoutConfirm(false);
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index e253de6..bc0ed84 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -8,6 +8,7 @@ import OrderHistoryModal from './OrderHistoryModal'
 import CartModal from './CartModal'
 import { ShoppingCartIcon, BuildingStorefrontIcon } from '@heroicons/react/24/outline'
 import { config } from '@/config'
+import { authApi, ordersApi, Order } from '@/api'
 
 export default function Header() {
   const { user, logout } = useAuth()
@@ -15,7 +16,7 @@ export default function Header() {
   const { totalItems } = useCart()
   const [showOrderHistory, setShowOrderHistory] = useState(false)
   const [showCart, setShowCart] = useState(false)
-  const [orders, setOrders] = useState([])
+  const [orders, setOrders] = useState<Order[]>([])
   const [firstName, setFirstName] = useState('')
 
   useEffect(() => {
@@ -23,18 +24,7 @@ export default function Header() {
       if (!user?.token) return;
 
       try {
-        const response = await fetch(`${config.apiUrl}/api/v0/auth/profile`, {
-          headers: {
-            'Authorization': `Bearer ${user.token}`
-          }
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch profile');
-        }
-
-        const data = await response.json();
-        console.log('Profile data:', data); // Debug log
+        const data = await authApi.getProfile(user.token);
         setFirstName(data.first_name || 'there');
       } catch (error) {
         console.error('Error fetching profile:', error);
@@ -48,27 +38,11 @@ export default function Header() {
   const handleShowOrderHistory = async () => {
     if (user) {
       try {
-        console.log('User token:', user.token?.slice(0, 20) + '...')  // Log first 20 chars of token
-        
-        const response = await fetch(`${config.apiUrl}/api/v0/user/orders`, {
-          headers: {
-            'Authorization': `Bearer ${user.token}`,
-            'Content-Type': 'application/json'
-          }
-        })
-        
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({}));
-          console.error('Orders error response:', errorData)  // Log error response
-          throw new Error(errorData.detail || 'Failed to fetch orders');
-        }
-        
-        const data = await response.json()
-        console.log('Orders fetched:', data)  // Debug log
-        setOrders(data)
-        setShowOrderHistory(true)
+        const data = await ordersApi.getUserOrders(user.token);
+        setOrders(data);
+        setShowOrderHistory(true);
       } catch (error) {
-        console.error('Failed to fetch orders:', error)
+        console.error('Failed to fetch orders:', error);
       }
     }
   }
diff --git a/frontend/src/components/OrderHistoryModal.tsx b/frontend/src/components/OrderHistoryModal.tsx
index 7e76eea..b1eed0d 100644
--- a/frontend/src/components/OrderHistoryModal.tsx
+++ b/frontend/src/components/OrderHistoryModal.tsx
@@ -7,7 +7,13 @@ import { ClockIcon } from '@heroicons/react/24/outline'
 import { useRouter } from 'next/navigation'
 import { useAuth } from '@/app/contexts/auth'
 import { toast } from 'react-hot-toast'
-import { config } from '@/config'
+import { ordersApi, Order } from '@/api'
+
+interface OrderHistoryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  orders: Order[];
+}
 
 const formatDateTime = (isoString: string) => {
   // Parse the UTC time string and create a Date object
@@ -36,30 +42,6 @@ interface Store {
   items: OrderItem[];
 }
 
-interface Order {
-  id: string;
-  created: string;
-  status: string;
-  payment_status: string;
-  delivery_fee: number;
-  total_amount: number;
-  tax_amount: number;
-  delivery_address?: {
-    street_address: string[];
-    city: string;
-    state: string;
-    zip_code: string;
-  };
-  customer_phone?: string;
-  stores: Store[];
-}
-
-interface OrderHistoryModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  orders: Order[];
-}
-
 export default function OrderHistoryModal({ isOpen, onClose, orders }: OrderHistoryModalProps) {
   const router = useRouter();
   const { user } = useAuth();
@@ -71,17 +53,7 @@ export default function OrderHistoryModal({ isOpen, onClose, orders }: OrderHist
       if (!user?.token) return;
 
       try {
-        const response = await fetch(`${config.apiUrl}/api/v0/user/orders`, {
-          headers: {
-            'Authorization': `Bearer ${user.token}`
-          }
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch orders');
-        }
-
-        const data = await response.json();
+        const data = await ordersApi.getUserOrders(user.token);
         setUserOrders(data);
       } catch (error) {
         console.error('Error fetching orders:', error);

From ee642f2fe3c237e25cef31784ca49ecff61a8343 Mon Sep 17 00:00:00 2001
From: Peter Valdez <ptr.vldz@gmail.com>
Date: Sun, 23 Feb 2025 17:30:45 -0500
Subject: [PATCH 27/27] Factor out remaining API fetches

---
 frontend/src/api/index.ts                     |  3 +
 frontend/src/app/hooks/useStoreRoles.ts       | 17 +---
 frontend/src/app/orders/[id]/page.tsx         | 67 +++-------------
 frontend/src/app/orders/page.tsx              | 79 ++++---------------
 .../src/app/store/[id]/dashboard/page.tsx     | 75 +++++-------------
 .../src/app/store/[id]/inventory/page.tsx     | 65 +++------------
 frontend/src/components/Search.tsx            |  9 +--
 7 files changed, 65 insertions(+), 250 deletions(-)

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 1b30df8..a3747bf 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -44,6 +44,9 @@ export interface Order {
     city: string;
     state: string;
     zip_code: string;
+    country?: string;
+    customer_name?: string;
+    customer_phone?: string;
   };
   customer_phone?: string;
   stores: {
diff --git a/frontend/src/app/hooks/useStoreRoles.ts b/frontend/src/app/hooks/useStoreRoles.ts
index 6212777..9cb3f4e 100644
--- a/frontend/src/app/hooks/useStoreRoles.ts
+++ b/frontend/src/app/hooks/useStoreRoles.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useAuth } from '../contexts/auth';
-import { config } from '@/config';
+import { storesApi } from '@/api';
 
 export function useStoreRoles(storeId: string) {
   const { user } = useAuth();
@@ -15,20 +15,7 @@ export function useStoreRoles(storeId: string) {
       }
 
       try {
-        const response = await fetch(
-          `${config.apiUrl}/api/v0/stores/${storeId}/roles`,
-          {
-            headers: {
-              'Authorization': `Bearer ${user.token}`
-            }
-          }
-        );
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch store roles');
-        }
-
-        const data = await response.json();
+        const data = await storesApi.getStoreRoles(user.token, storeId);
         setRoles(data.roles);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to fetch store roles');
diff --git a/frontend/src/app/orders/[id]/page.tsx b/frontend/src/app/orders/[id]/page.tsx
index b483eb0..3295f83 100644
--- a/frontend/src/app/orders/[id]/page.tsx
+++ b/frontend/src/app/orders/[id]/page.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useEffect } from 'react';
 import { useAuth } from '@/app/contexts/auth';
-import { config } from '@/config';
 import { formatCurrency } from '@/utils/currency';
 import { MapPinIcon, BuildingStorefrontIcon, XMarkIcon, ClockIcon } from '@heroicons/react/24/outline';
 import { useRouter, useParams } from 'next/navigation';
@@ -12,6 +11,7 @@ import type { LatLngExpression, LatLngTuple } from 'leaflet';
 import styles from './map.module.css';
 import ReactDOMServer from 'react-dom/server';
 import L from 'leaflet';
+import { ordersApi, Order } from '@/api';
 
 // Dynamically import the map components to avoid SSR issues
 const MapContainer = dynamic(
@@ -35,48 +35,6 @@ const Polyline = dynamic(
   { ssr: false }
 );
 
-interface OrderItem {
-  id: string;
-  name: string;
-  quantity: number;
-  price: number;
-}
-
-interface Store {
-  store: {
-    id: string;
-    name: string;
-  };
-  items: OrderItem[];
-}
-
-interface Order {
-  id: string;
-  created: string;
-  status: string;
-  payment_status: string;
-  delivery_fee: number;
-  total_amount: number;
-  tax_amount: number;
-  delivery_address?: {
-    street_address: string[];
-    city: string;
-    state: string;
-    zip_code: string;
-  };
-  customer_phone?: string;
-  stores: Store[];
-}
-
-const formatDateTime = (isoString: string) => {
-  const utcDate = new Date(isoString + 'Z');
-  return new Intl.DateTimeFormat('en-US', {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-  }).format(utcDate);
-};
-
 // Mock coordinates for demo (we'll replace these with real geocoding later)
 const MOCK_COORDINATES: { store: LatLngTuple; delivery: LatLngTuple } = {
   store: [40.7594, -73.9229],
@@ -96,6 +54,15 @@ const DeliveryMarker = () => (
   </div>
 );
 
+const formatDateTime = (isoString: string) => {
+  const utcDate = new Date(isoString + 'Z');
+  return new Intl.DateTimeFormat('en-US', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  }).format(utcDate);
+};
+
 export default function OrderViewPage() {
   const { user } = useAuth();
   const [order, setOrder] = useState<Order | null>(null);
@@ -112,18 +79,8 @@ export default function OrderViewPage() {
       if (!user?.token || !orderId) return;
 
       try {
-        const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
-          headers: {
-            'Authorization': `Bearer ${user.token}`,
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch orders');
-        }
-
-        const orders = await response.json();
-        const order = orders.find((o: Order) => o.id === orderId);
+        const orders = await ordersApi.getAdminOrders(user.token);
+        const order = orders.find(o => o.id === orderId);
         
         if (!order) {
           throw new Error('Order not found');
diff --git a/frontend/src/app/orders/page.tsx b/frontend/src/app/orders/page.tsx
index 259f2a7..73fc68e 100644
--- a/frontend/src/app/orders/page.tsx
+++ b/frontend/src/app/orders/page.tsx
@@ -7,6 +7,7 @@ import { config } from '@/config';
 import { CurrencyDollarIcon, ShoppingBagIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { useRouter } from 'next/navigation';
+import { ordersApi, Order } from '@/api';
 
 interface OrderItem {
   id: string;
@@ -19,31 +20,6 @@ interface OrderItem {
   };
 }
 
-interface Order {
-  id: string;
-  created: string;
-  status: string;
-  payment_status: string;
-  delivery_fee: number;
-  total_amount: number;
-  delivery_address: {
-    street_address: string[];
-    city: string;
-    state: string;
-    zip_code: string;
-    country: string;
-    customer_name: string;
-    customer_phone?: string;
-  } | null;
-  stores: Array<{
-    store: {
-      id: string;
-      name: string;
-    };
-    items: OrderItem[];
-  }>;
-}
-
 interface DailyCount {
   date: string;
   timestamp: number;
@@ -240,57 +216,34 @@ export default function OrdersDashboard() {
           return;
         }
 
-        const response = await fetch(`${config.apiUrl}/api/v0/orders`, {
-          headers: {
-            'Authorization': `Bearer ${user?.token}`,
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch orders');
-        }
-
-        const data = await response.json();
-        setOrders(data);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to fetch orders');
+        const orders = await ordersApi.getAdminOrders(user.token);
+        setOrders(orders);
+      } catch (error) {
+        console.error('Error fetching orders:', error);
+        setError(error instanceof Error ? error.message : 'Failed to fetch orders');
       } finally {
         setLoading(false);
       }
     };
 
-    if (user) {
+    if (user?.token) {
       fetchOrders();
     }
   }, [user]);
 
   const updateOrderStatus = async (orderId: string, newStatus: string) => {
-    try {
-      const response = await fetch(`${config.apiUrl}/api/v0/orders/${orderId}/status`, {
-        method: 'PATCH',
-        headers: {
-          'Authorization': `Bearer ${user?.token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ status: newStatus })
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.detail || 'Failed to update order status');
-      }
+    if (!user?.token) return;
 
-      setOrders(currentOrders =>
-        currentOrders.map(order =>
-          order.id === orderId
-            ? { ...order, status: newStatus }
-            : order
+    try {
+      const updatedOrder = await ordersApi.updateOrderStatus(user.token, orderId, newStatus);
+      setOrders(prevOrders => 
+        prevOrders.map(order => 
+          order.id === orderId ? updatedOrder : order
         )
       );
-
-      toast.success('Order status updated');
-    } catch (err) {
-      console.error('Status update error:', err);
+      toast.success('Order status updated successfully');
+    } catch (error) {
+      console.error('Error updating order status:', error);
       toast.error('Failed to update order status');
     }
   };
diff --git a/frontend/src/app/store/[id]/dashboard/page.tsx b/frontend/src/app/store/[id]/dashboard/page.tsx
index d78265c..b3357f4 100644
--- a/frontend/src/app/store/[id]/dashboard/page.tsx
+++ b/frontend/src/app/store/[id]/dashboard/page.tsx
@@ -10,6 +10,7 @@ import { use } from 'react';
 import { CurrencyDollarIcon, ShoppingBagIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import Link from 'next/link';
+import { storesApi, ordersApi, Order } from '@/api';
 
 interface OrderItem {
   id: string;
@@ -26,25 +27,6 @@ interface Store {
   items: OrderItem[];
 }
 
-interface Order {
-  id: string;
-  created: string;
-  status: string;
-  payment_status: string;
-  delivery_fee: number;
-  total_amount: number;
-  delivery_address: {
-    street_address: string[];
-    city: string;
-    state: string;
-    zip_code: string;
-    country: string;
-    customer_name: string;
-    customer_phone?: string;
-  } | null;
-  stores: Store[];
-}
-
 interface DailyCount {
   date: string;
   timestamp: number;
@@ -249,51 +231,34 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
 
   useEffect(() => {
     const fetchOrders = async () => {
-      if (!user?.token || rolesLoading) return; // Don't fetch if still loading roles
+      if (!user?.token) return;
 
       try {
-        const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/orders`, {
-          headers: {
-            'Authorization': `Bearer ${user.token}`,
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch orders');
-        }
-
-        const data = await response.json();
-        setOrders(data);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to fetch orders');
-      } finally {
-        setLoading(false);
+        const orders = await storesApi.getStoreOrders(user.token, storeId);
+        setOrders(orders);
+      } catch (error) {
+        console.error('Error fetching orders:', error);
+        setError(error instanceof Error ? error.message : 'Failed to fetch orders');
       }
     };
 
-    if (isAdmin) {
-      fetchOrders();
-    }
-  }, [user, storeId, isAdmin, rolesLoading]);
-
-  // Fetch store details
-  useEffect(() => {
     const fetchStore = async () => {
       try {
-        const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}`);
-        if (!response.ok) {
-          throw new Error('Failed to fetch store details');
-        }
-        const data = await response.json();
-        setStore(data);
-      } catch (err) {
-        console.error('Error fetching store:', err);
-        setError(err instanceof Error ? err.message : 'Failed to fetch store details');
+        const store = await storesApi.getStore(storeId);
+        setStore(store);
+      } catch (error) {
+        console.error('Error fetching store:', error);
+        setError(error instanceof Error ? error.message : 'Failed to fetch store');
+      } finally {
+        setLoading(false);
       }
     };
 
-    fetchStore();
-  }, [storeId]);
+    if (isAdmin) {
+      fetchOrders();
+      fetchStore();
+    }
+  }, [storeId, isAdmin, user]);
 
   // Toggle status filter
   const toggleStatus = (status: string) => {
@@ -327,7 +292,7 @@ export default function StoreDashboard({ params }: { params: Promise<{ id: strin
       const lowercaseSearch = searchTerm.toLowerCase();
       result = result.filter(order => 
         order.id.toLowerCase().includes(lowercaseSearch) ||
-        order.delivery_address?.customer_name.toLowerCase().includes(lowercaseSearch)
+        order.delivery_address?.customer_name?.toLowerCase().includes(lowercaseSearch) || false
       );
     }
     
diff --git a/frontend/src/app/store/[id]/inventory/page.tsx b/frontend/src/app/store/[id]/inventory/page.tsx
index bc8af32..969f625 100644
--- a/frontend/src/app/store/[id]/inventory/page.tsx
+++ b/frontend/src/app/store/[id]/inventory/page.tsx
@@ -4,19 +4,11 @@ import { useState, useEffect } from 'react';
 import { useAuth } from '@/app/contexts/auth';
 import { useStoreRoles } from '@/app/hooks/useStoreRoles';
 import { toast } from 'react-hot-toast';
-import { config } from '@/config';
 import { useRouter } from 'next/navigation';
 import { use } from 'react';
 import { PlusIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
-
-interface StoreItem {
-  id: string;
-  name: string;
-  price: number;
-  description?: string;
-  imageUrl?: string;
-}
+import { storesApi, StoreItem } from '@/api';
 
 interface EditItemModalProps {
   item?: StoreItem;
@@ -140,20 +132,11 @@ export default function StoreInventory({ params }: { params: Promise<{ id: strin
   useEffect(() => {
     const fetchStoreAndItems = async () => {
       try {
-        // Fetch store details
-        const storeResponse = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}`);
-        if (!storeResponse.ok) {
-          throw new Error('Failed to fetch store');
-        }
-        const storeData = await storeResponse.json();
+        // Fetch store details and items
+        const storeData = await storesApi.getStore(storeId);
         setStore(storeData);
 
-        // Fetch store items
-        const itemsResponse = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items`);
-        if (!itemsResponse.ok) {
-          throw new Error('Failed to fetch store items');
-        }
-        const itemsData = await itemsResponse.json();
+        const itemsData = await storesApi.getStoreItems(storeId);
         setItems(itemsData);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to fetch store data');
@@ -178,37 +161,17 @@ export default function StoreInventory({ params }: { params: Promise<{ id: strin
   };
 
   const handleSaveItem = async (itemData: Partial<StoreItem>) => {
+    if (!user?.token) return;
+
     try {
       if (editingItem) {
         // Update existing item
-        const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items/${editingItem.id}`, {
-          method: 'PATCH',
-          headers: {
-            'Authorization': `Bearer ${user?.token}`,
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(itemData)
-        });
-
-        if (!response.ok) throw new Error('Failed to update item');
-
-        const updatedItem = await response.json();
+        const updatedItem = await storesApi.updateStoreItem(user.token, storeId, editingItem.id, itemData);
         setItems(items.map(item => item.id === editingItem.id ? updatedItem : item));
         toast.success('Item updated successfully');
       } else {
         // Create new item
-        const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items`, {
-          method: 'POST',
-          headers: {
-            'Authorization': `Bearer ${user?.token}`,
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(itemData)
-        });
-
-        if (!response.ok) throw new Error('Failed to create item');
-
-        const newItem = await response.json();
+        const newItem = await storesApi.createStoreItem(user.token, storeId, itemData);
         setItems([...items, newItem]);
         toast.success('Item created successfully');
       }
@@ -221,18 +184,10 @@ export default function StoreInventory({ params }: { params: Promise<{ id: strin
   };
 
   const handleDeleteItem = async (itemId: string) => {
-    if (!confirm('Are you sure you want to delete this item?')) return;
+    if (!user?.token || !confirm('Are you sure you want to delete this item?')) return;
 
     try {
-      const response = await fetch(`${config.apiUrl}/api/v0/stores/${storeId}/items/${itemId}`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${user?.token}`
-        }
-      });
-
-      if (!response.ok) throw new Error('Failed to delete item');
-
+      await storesApi.deleteStoreItem(user.token, storeId, itemId);
       setItems(items.filter(item => item.id !== itemId));
       toast.success('Item deleted successfully');
     } catch (error) {
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index c3beb09..c79076b 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef } from "react";
 import { useSearch } from "@/app/contexts/search";
 import { SearchItem } from "@/app/contexts/search";
-import { config } from "@/config";
+import { searchApi } from "@/api";
 
 export function Search() {
   const { setSearchItems, setIsLoading, isLoading } = useSearch();
@@ -15,12 +15,7 @@ export function Search() {
   const handleSearch = async (searchQuery: string) => {
     try {
       setIsLoading(true);
-      const response = await fetch(
-        `${config.searchUrl}/api/search?query=${encodeURIComponent(
-          searchQuery,
-        )}&index=${productIndex}`,
-      );
-      const { hits } = await response.json();
+      const hits = await searchApi.searchProducts(searchQuery);
       setSearchItems(hits as SearchItem[]);
     } catch (error) {
       console.error("Search failed:", error);