# ar-pixeltech/ivorytable-frontend architecture

> Architecture diagram of the GitHub repository ar-pixeltech/ivorytable-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ar-pixeltech/ivorytable-frontend
- Repository: https://github.com/ar-pixeltech/ivorytable-frontend

## Overview

IvoryTable is a multi-vendor POS SaaS frontend. The main vendor workflow is to enter the POS, build and adjust a cart, then proceed through checkout; the tree identifies these stages, but the POS source was not sampled, so their wiring is not asserted. Sampled code shows admin login calling the admin service, storing session state, and guarding role-specific routes. Service modules expose vendor management, menu, sales, invoice, and subscription operations through an authenticated HTTP client. The README also advertises inventory and order tracking, but their implementation paths are not identifiable in the supplied tree.

Main entry points: [`app/login/page.tsx`](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/login/page.tsx) (Admin Login), [`services/admin.service.ts`](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/admin.service.ts) (Admin Service), [`services/vendor.service.ts`](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/vendor.service.ts) (Vendor Service), [`lib/axios.ts`](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/lib/axios.ts) (HTTP Client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and Access"]
  node_home["Landing Page<br/>[page.tsx]"]
  node_admin_login["Admin Login<br/>[page.tsx]"]
  node_route_guard["Route Guard<br/>[RouteGuard.tsx]"]
end

subgraph group_pos["Point of Sale"]
  node_pos_page["POS Order Screen<br/>[page.tsx]"]
  node_product_grid["Product Grid<br/>[ProductGrid.tsx]"]
  node_product_card["Product Card<br/>[ProductCard.tsx]"]
  node_cart_panel["Cart Panel<br/>[CartPanel.tsx]"]
  node_adjustment_modal["Cart Adjustments"]
  node_checkout_modal["Checkout<br/>[CheckoutModal.tsx]"]
  node_cart_store[("Cart State<br/>[cartStore.ts]")]
end

subgraph group_admin["Platform Administration"]
  node_admin_dashboard["Admin Dashboard<br/>[page.tsx]"]
  node_admin_vendors["Vendor Administration<br/>[page.tsx]"]
  node_admin_subscriptions["Subscription Plans<br/>[page.tsx]"]
  node_admin_service["Admin Service<br/>[admin.service.ts]"]
end

subgraph group_vendor["Vendor Operations"]
  node_vendor_dashboard["Vendor Dashboard<br/>[page.tsx]"]
  node_menu_management["Menu Management<br/>[vendor.service.ts]"]
  node_sales_invoices["Sales and Invoices<br/>[vendor.service.ts]"]
  node_inventory_orders["Inventory and Orders"]
  node_vendor_service["Vendor Service<br/>[vendor.service.ts]"]
end

subgraph group_transport["API and Session"]
  node_auth_context["Auth Context<br/>[AuthContext.tsx]"]
  node_http_client["HTTP Client<br/>[axios.ts]"]
end

node_browser(("Browser User"))
node_api_server[("IvoryTable API")]

node_browser -->|"opens"| node_home
node_home -->|"links to login"| node_admin_login
node_browser -->|"uses POS"| node_pos_page
node_browser -->|"submits credentials"| node_admin_login
node_admin_login -->|"calls login"| node_admin_service
node_admin_login -->|"stores session"| node_auth_context
node_admin_login -->|"wraps page"| node_route_guard
node_route_guard -->|"checks role"| node_auth_context
node_admin_login -->|"navigates after login"| node_admin_dashboard
node_admin_vendors -->|"vendor operations"| node_admin_service
node_admin_subscriptions -->|"plan operations"| node_admin_service
node_vendor_dashboard -->|"dashboard data"| node_vendor_service
node_menu_management -->|"menu operations"| node_vendor_service
node_sales_invoices -->|"sales and invoice calls"| node_vendor_service
node_admin_service -->|"sends requests"| node_http_client
node_vendor_service -->|"sends requests"| node_http_client
node_http_client -->|"HTTP requests"| node_api_server

click node_home "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/page.tsx"
click node_admin_login "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/login/page.tsx"
click node_route_guard "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/components/RouteGuard.tsx"
click node_auth_context "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/context/AuthContext.tsx"
click node_pos_page "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/page.tsx"
click node_product_grid "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/ProductGrid.tsx"
click node_product_card "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/ProductCard.tsx"
click node_cart_panel "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/CartPanel.tsx"
click node_adjustment_modal "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/AdjustmentModal.tsx"
click node_checkout_modal "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/CheckoutModal.tsx"
click node_cart_store "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/store/cartStore.ts"
click node_admin_dashboard "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/admin/(dashboard)/dashboard/page.tsx"
click node_admin_vendors "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/admin/(dashboard)/vendors/page.tsx"
click node_admin_subscriptions "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/admin/(dashboard)/subscriptions/page.tsx"
click node_vendor_dashboard "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/admin/(dashboard)/dashboard/page.tsx"
click node_menu_management "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/vendor.service.ts"
click node_sales_invoices "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/vendor.service.ts"
click node_inventory_orders "https://github.com/ar-pixeltech/ivorytable-frontend/tree/develop/app/pos"
click node_admin_service "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/admin.service.ts"
click node_vendor_service "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/vendor.service.ts"
click node_http_client "https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/lib/axios.ts"

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_home,node_admin_login,node_route_guard,node_browser toneBlue
class node_pos_page,node_product_grid,node_product_card,node_cart_panel,node_adjustment_modal,node_checkout_modal,node_cart_store,node_api_server toneAmber
class node_admin_dashboard,node_admin_vendors,node_admin_subscriptions,node_admin_service toneMint
class node_vendor_dashboard,node_menu_management,node_sales_invoices,node_inventory_orders,node_vendor_service toneRose
class node_auth_context,node_http_client toneIndigo
```

## Components

### Entry and Access

- [Landing Page](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/page.tsx): `app/page.tsx`
- [Admin Login](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/login/page.tsx): `app/login/page.tsx`
- [Route Guard](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/components/RouteGuard.tsx): `components/RouteGuard.tsx`

### Point of Sale

- [POS Order Screen](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/page.tsx): `app/pos/order/page.tsx`
- [Product Grid](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/ProductGrid.tsx): `app/pos/order/components/ProductGrid.tsx`
- [Product Card](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/ProductCard.tsx): `app/pos/order/components/ProductCard.tsx`
- [Cart Panel](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/CartPanel.tsx): `app/pos/order/components/CartPanel.tsx`
- [Cart Adjustments](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/AdjustmentModal.tsx): `app/pos/order/components/AdjustmentModal.tsx`
- [Checkout](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/pos/order/components/CheckoutModal.tsx): `app/pos/order/components/CheckoutModal.tsx`
- [Cart State](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/store/cartStore.ts): `store/cartStore.ts`

### Platform Administration

- [Admin Dashboard](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/admin/(dashboard)/dashboard/page.tsx): `app/admin/(dashboard)/dashboard/page.tsx`
- [Vendor Administration](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/admin/(dashboard)/vendors/page.tsx): `app/admin/(dashboard)/vendors/page.tsx`
- [Subscription Plans](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/admin/(dashboard)/subscriptions/page.tsx): `app/admin/(dashboard)/subscriptions/page.tsx`
- [Admin Service](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/admin.service.ts): `services/admin.service.ts`

### Vendor Operations

- [Vendor Dashboard](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/app/admin/(dashboard)/dashboard/page.tsx): `app/admin/(dashboard)/dashboard/page.tsx`
- [Menu Management](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/vendor.service.ts): `services/vendor.service.ts`
- [Sales and Invoices](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/vendor.service.ts): `services/vendor.service.ts`
- [Inventory and Orders](https://github.com/ar-pixeltech/ivorytable-frontend/tree/develop/app/pos): `app/pos`
- [Vendor Service](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/services/vendor.service.ts): `services/vendor.service.ts`

### API and Session

- [Auth Context](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/context/AuthContext.tsx): `context/AuthContext.tsx`
- [HTTP Client](https://github.com/ar-pixeltech/ivorytable-frontend/blob/develop/lib/axios.ts): `lib/axios.ts`

### Other components

- **Browser User**
- **IvoryTable API**

## Connections

- Browser User → Landing Page: opens
- Landing Page → Admin Login: links to login
- Browser User → POS Order Screen: uses POS
- Browser User → Admin Login: submits credentials
- Admin Login → Admin Service: calls login
- Admin Login → Auth Context: stores session
- Admin Login → Route Guard: wraps page
- Route Guard → Auth Context: checks role
- Admin Login → Admin Dashboard: navigates after login
- Vendor Administration → Admin Service: vendor operations
- Subscription Plans → Admin Service: plan operations
- Vendor Dashboard → Vendor Service: dashboard data
- Menu Management → Vendor Service: menu operations
- Sales and Invoices → Vendor Service: sales and invoice calls
- Admin Service → HTTP Client: sends requests
- Vendor Service → HTTP Client: sends requests
- HTTP Client → IvoryTable API: HTTP requests