# abood207040/el-gaafar-store architecture

> Architecture diagram of the GitHub repository abood207040/el-gaafar-store, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/abood207040/el-gaafar-store
- Repository: https://github.com/abood207040/el-gaafar-store

## Overview

EL-Gaafar Store is a bilingual storefront and store-operations app backed by Supabase. Customers browse the catalog, build a cart, submit delivery or pickup orders, and track them; staff manage products, inventory, orders, customers, and delivery settings, with a separate in-store POS, shifts, returns, and customer debts. The map keeps routing, auth, and localization as shared internal layers. Unsampled pages are included where the README and source index establish capabilities; links involving their runtime calls are omitted unless documented or evidenced.

Main entry points: [`src/App.jsx`](https://github.com/abood207040/el-gaafar-store/blob/main/src/App.jsx) (Router and Cart), [`src/services/authService.js`](https://github.com/abood207040/el-gaafar-store/blob/main/src/services/authService.js) (Supabase Client and Auth), [`src/services/productsService.js`](https://github.com/abood207040/el-gaafar-store/blob/main/src/services/productsService.js) (Product Data Service), [`src/pages/admin/AdminDashboardPage.jsx`](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminDashboardPage.jsx) (Admin Console)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer Storefront"]
  node_catalog["Store Catalog<br/>[ShopPage.jsx]"]
  node_product_details["Product Details"]
  node_cart_checkout["Cart and Checkout<br/>[CheckoutPage.jsx]"]
  node_orders_pages["Order Tracking"]
  node_home["Store Home<br/>[HomePage.jsx]"]
  node_account["Customer Account"]
end

subgraph group_admin["Online Administration"]
  node_admin_ui["Admin Console"]
  node_product_admin["Product Management"]
  node_catalog_admin["Catalog Management"]
  node_order_admin["Order Management"]
  node_inventory["Inventory"]
  node_customer_admin["Customer Management"]
  node_delivery_admin["Delivery Settings"]
end

subgraph group_offline["In-Store Operations"]
  node_pos["Point of Sale<br/>[PosCheckout.jsx]"]
  node_pos_context["POS State<br/>[PosContext.jsx]"]
  node_offline_sales["Offline Sales and Returns"]
  node_shifts_debts["Shifts and Debts<br/>[ShiftManager.jsx]"]
end

subgraph group_shared["Shared Services"]
  node_app["Router and Cart<br/>[App.jsx]"]
  node_auth["Auth Provider<br/>[useAuth.jsx]"]
  node_auth_service["Supabase Client and Auth<br/>[authService.js]"]
  node_catalog_options["Catalog Options Hook"]
  node_products_service["Product Data Service<br/>[productsService.js]"]
  node_orders_service["Order Data Service<br/>[ordersService.js]"]
  node_delivery_service["Delivery Data Service<br/>[deliveryService.js]"]
  node_image_storage["Image Upload<br/>[storageService.js]"]
  node_localization["Localization<br/>[Localization.jsx]"]
  node_domain["Order and Stock Rules<br/>[domain.js]"]
end

subgraph group_platform["Backend Platform"]
  node_supabase_auth[("Supabase Auth and Database")]
  node_supabase_storage[("Supabase Storage")]
end

node_customer(("Customer"))

node_customer -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_product_details
node_app -->|"routes to"| node_cart_checkout
node_app -->|"routes to"| node_orders_pages
node_app -->|"routes to"| node_account
node_app -->|"guards and routes"| node_admin_ui
node_auth -->|"calls"| node_auth_service
node_auth_service -->|"auth requests"| node_supabase_auth
node_catalog_admin -->|"uses"| node_catalog_options
node_catalog_options -->|"reads and writes"| node_auth_service
node_product_admin -->|"manages products"| node_products_service
node_product_admin -->|"uploads images"| node_image_storage
node_catalog_admin -->|"manages catalog"| node_products_service
node_catalog_admin -->|"uploads images"| node_image_storage
node_products_service -->|"queries"| node_auth_service
node_image_storage -->|"uses client"| node_auth_service
node_image_storage -->|"uploads and reads URLs"| node_supabase_storage
node_cart_checkout -->|"submits orders"| node_orders_service
node_cart_checkout -->|"gets delivery pricing"| node_delivery_service
node_orders_pages -->|"loads order details"| node_orders_service
node_orders_service -->|"queries"| node_auth_service
node_delivery_admin -->|"manages rates"| node_delivery_service
node_delivery_service -->|"queries"| node_auth_service
node_admin_ui -.->|"routes within"| node_order_admin
node_admin_ui -.->|"routes within"| node_inventory
node_admin_ui -.->|"routes within"| node_customer_admin
node_order_admin -.->|"manages orders"| node_orders_service
node_pos -.->|"uses state"| node_pos_context
node_pos_context -->|"calls"| node_offline_sales
node_offline_sales -->|"queries and invokes RPC"| node_auth_service
node_offline_sales -->|"loads products"| node_products_service
node_shifts_debts -->|"manages shifts"| node_offline_sales
node_inventory -.->|"reads products"| node_products_service
node_localization -->|"translates domain states"| node_domain
node_products_service -->|"uses stock rules"| node_domain

click node_app "https://github.com/abood207040/el-gaafar-store/blob/main/src/App.jsx"
click node_catalog "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/ShopPage.jsx"
click node_product_details "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/ProductDetailsPage.jsx"
click node_cart_checkout "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/CheckoutPage.jsx"
click node_orders_pages "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/OrderDetailsPage.jsx"
click node_home "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/HomePage.jsx"
click node_account "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/account/AccountDashboard.jsx"
click node_admin_ui "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminDashboardPage.jsx"
click node_product_admin "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminProductFormPage.jsx"
click node_catalog_admin "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminCatalogPage.jsx"
click node_order_admin "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminOrdersPage.jsx"
click node_inventory "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminInventoryPage.jsx"
click node_customer_admin "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminCustomersPage.jsx"
click node_delivery_admin "https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminDeliveryPage.jsx"
click node_pos "https://github.com/abood207040/el-gaafar-store/blob/main/src/components/pos/PosCheckout.jsx"
click node_pos_context "https://github.com/abood207040/el-gaafar-store/blob/main/src/components/pos/PosContext.jsx"
click node_offline_sales "https://github.com/abood207040/el-gaafar-store/blob/main/src/services/adminOfflineService.js"
click node_shifts_debts "https://github.com/abood207040/el-gaafar-store/blob/main/src/components/pos/ShiftManager.jsx"
click node_auth "https://github.com/abood207040/el-gaafar-store/blob/main/src/hooks/useAuth.jsx"
click node_auth_service "https://github.com/abood207040/el-gaafar-store/blob/main/src/services/authService.js"
click node_catalog_options "https://github.com/abood207040/el-gaafar-store/blob/main/src/hooks/useCatalogOptions.js"
click node_products_service "https://github.com/abood207040/el-gaafar-store/blob/main/src/services/productsService.js"
click node_orders_service "https://github.com/abood207040/el-gaafar-store/blob/main/src/services/ordersService.js"
click node_delivery_service "https://github.com/abood207040/el-gaafar-store/blob/main/src/services/deliveryService.js"
click node_image_storage "https://github.com/abood207040/el-gaafar-store/blob/main/src/services/storageService.js"
click node_localization "https://github.com/abood207040/el-gaafar-store/blob/main/src/i18n/Localization.jsx"
click node_domain "https://github.com/abood207040/el-gaafar-store/blob/main/src/constants/domain.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_catalog,node_product_details,node_cart_checkout,node_orders_pages,node_home,node_account toneBlue
class node_admin_ui,node_product_admin,node_catalog_admin,node_order_admin,node_inventory,node_customer_admin,node_delivery_admin toneAmber
class node_pos,node_pos_context,node_offline_sales,node_shifts_debts toneMint
class node_app,node_auth,node_auth_service,node_catalog_options,node_products_service,node_orders_service,node_delivery_service,node_image_storage,node_localization,node_domain toneRose
class node_supabase_auth,node_supabase_storage,node_customer toneIndigo
```

## Components

### Customer Storefront

- [Store Catalog](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/ShopPage.jsx): `src/pages/ShopPage.jsx`
- [Product Details](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/ProductDetailsPage.jsx): `src/pages/ProductDetailsPage.jsx`
- [Cart and Checkout](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/CheckoutPage.jsx): `src/pages/CheckoutPage.jsx`
- [Order Tracking](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/OrderDetailsPage.jsx): `src/pages/OrderDetailsPage.jsx`
- [Store Home](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/HomePage.jsx): `src/pages/HomePage.jsx`
- [Customer Account](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/account/AccountDashboard.jsx): `src/pages/account/AccountDashboard.jsx`

### Online Administration

- [Admin Console](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminDashboardPage.jsx): `src/pages/admin/AdminDashboardPage.jsx`
- [Product Management](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminProductFormPage.jsx): `src/pages/admin/AdminProductFormPage.jsx`
- [Catalog Management](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminCatalogPage.jsx): `src/pages/admin/AdminCatalogPage.jsx`
- [Order Management](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminOrdersPage.jsx): `src/pages/admin/AdminOrdersPage.jsx`
- [Inventory](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminInventoryPage.jsx): `src/pages/admin/AdminInventoryPage.jsx`
- [Customer Management](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminCustomersPage.jsx): `src/pages/admin/AdminCustomersPage.jsx`
- [Delivery Settings](https://github.com/abood207040/el-gaafar-store/blob/main/src/pages/admin/AdminDeliveryPage.jsx): `src/pages/admin/AdminDeliveryPage.jsx`

### In-Store Operations

- [Point of Sale](https://github.com/abood207040/el-gaafar-store/blob/main/src/components/pos/PosCheckout.jsx): `src/components/pos/PosCheckout.jsx`
- [POS State](https://github.com/abood207040/el-gaafar-store/blob/main/src/components/pos/PosContext.jsx): `src/components/pos/PosContext.jsx`
- [Offline Sales and Returns](https://github.com/abood207040/el-gaafar-store/blob/main/src/services/adminOfflineService.js): `src/services/adminOfflineService.js`
- [Shifts and Debts](https://github.com/abood207040/el-gaafar-store/blob/main/src/components/pos/ShiftManager.jsx): `src/components/pos/ShiftManager.jsx`

### Shared Services

- [Router and Cart](https://github.com/abood207040/el-gaafar-store/blob/main/src/App.jsx): `src/App.jsx`
- [Auth Provider](https://github.com/abood207040/el-gaafar-store/blob/main/src/hooks/useAuth.jsx): `src/hooks/useAuth.jsx`
- [Supabase Client and Auth](https://github.com/abood207040/el-gaafar-store/blob/main/src/services/authService.js): `src/services/authService.js`
- [Catalog Options Hook](https://github.com/abood207040/el-gaafar-store/blob/main/src/hooks/useCatalogOptions.js): `src/hooks/useCatalogOptions.js`
- [Product Data Service](https://github.com/abood207040/el-gaafar-store/blob/main/src/services/productsService.js): `src/services/productsService.js`
- [Order Data Service](https://github.com/abood207040/el-gaafar-store/blob/main/src/services/ordersService.js): `src/services/ordersService.js`
- [Delivery Data Service](https://github.com/abood207040/el-gaafar-store/blob/main/src/services/deliveryService.js): `src/services/deliveryService.js`
- [Image Upload](https://github.com/abood207040/el-gaafar-store/blob/main/src/services/storageService.js): `src/services/storageService.js`
- [Localization](https://github.com/abood207040/el-gaafar-store/blob/main/src/i18n/Localization.jsx): `src/i18n/Localization.jsx`
- [Order and Stock Rules](https://github.com/abood207040/el-gaafar-store/blob/main/src/constants/domain.js): `src/constants/domain.js`

### Backend Platform

- **Supabase Auth and Database**
- **Supabase Storage**

### Other components

- **Customer**

## Connections

- Customer → Router and Cart: opens (evidence: `src/App.jsx`)
- Router and Cart → Store Home: routes to (evidence: `src/App.jsx`)
- Router and Cart → Store Catalog: routes to (evidence: `src/App.jsx`)
- Router and Cart → Product Details: routes to (evidence: `src/App.jsx`)
- Router and Cart → Cart and Checkout: routes to (evidence: `src/App.jsx`)
- Router and Cart → Order Tracking: routes to (evidence: `src/App.jsx`)
- Router and Cart → Customer Account: routes to (evidence: `src/App.jsx`)
- Router and Cart → Admin Console: guards and routes (evidence: `src/App.jsx`)
- Auth Provider → Supabase Client and Auth: calls (evidence: `src/hooks/useAuth.jsx`)
- Supabase Client and Auth → Supabase Auth and Database: auth requests (evidence: `src/services/authService.js`)
- Catalog Management → Catalog Options Hook: uses (evidence: `src/hooks/useCatalogOptions.js`)
- Catalog Options Hook → Supabase Client and Auth: reads and writes (evidence: `src/hooks/useCatalogOptions.js`)
- Product Management → Product Data Service: manages products (evidence: `src/pages/admin/AdminProductFormPage.jsx`)
- Product Management → Image Upload: uploads images (evidence: `src/pages/admin/AdminProductFormPage.jsx`)
- Catalog Management → Product Data Service: manages catalog (evidence: `src/pages/admin/AdminCatalogPage.jsx`)
- Catalog Management → Image Upload: uploads images (evidence: `src/pages/admin/AdminCatalogPage.jsx`)
- Product Data Service → Supabase Client and Auth: queries (evidence: `src/services/productsService.js`)
- Image Upload → Supabase Client and Auth: uses client (evidence: `src/services/storageService.js`)
- Image Upload → Supabase Storage: uploads and reads URLs (evidence: `src/services/storageService.js`)
- Cart and Checkout → Order Data Service: submits orders (evidence: `src/pages/CheckoutPage.jsx`)
- Cart and Checkout → Delivery Data Service: gets delivery pricing (evidence: `src/pages/CheckoutPage.jsx`)
- Order Tracking → Order Data Service: loads order details (evidence: `src/pages/OrderDetailsPage.jsx`)
- Order Data Service → Supabase Client and Auth: queries (evidence: `src/services/ordersService.js`)
- Delivery Settings → Delivery Data Service: manages rates (evidence: `src/pages/admin/AdminDeliveryPage.jsx`)
- Delivery Data Service → Supabase Client and Auth: queries (evidence: `src/services/deliveryService.js`)
- Admin Console → Order Management: routes within
- Admin Console → Inventory: routes within
- Admin Console → Customer Management: routes within
- Order Management → Order Data Service: manages orders
- Point of Sale → POS State: uses state
- POS State → Offline Sales and Returns: calls (evidence: `src/components/pos/PosContext.jsx`)
- Offline Sales and Returns → Supabase Client and Auth: queries and invokes RPC (evidence: `src/services/adminOfflineService.js`)
- Offline Sales and Returns → Product Data Service: loads products (evidence: `src/services/adminOfflineService.js`)
- Shifts and Debts → Offline Sales and Returns: manages shifts (evidence: `src/components/pos/ShiftManager.jsx`)
- Inventory → Product Data Service: reads products
- Localization → Order and Stock Rules: translates domain states (evidence: `src/i18n/Localization.jsx`)
- Product Data Service → Order and Stock Rules: uses stock rules (evidence: `src/services/productsService.js`)