# abamakbar07/order-fulfillment architecture

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

- Interactive diagram: https://gitdiagram.com/abamakbar07/order-fulfillment
- Repository: https://github.com/abamakbar07/order-fulfillment

## Overview

Northstar Order Fulfillment supports a browser-based warehouse workflow: staff load purchase orders, scan and validate received lots against those orders, and review scan progress. The repository also provides an operations overview, a separate warehouse dashboard, and account and warehouse-user management. The RF scanner is embedded in the Next.js fulfillment page and accesses Supabase directly; the sampled code also shows server-side Supabase access for the overview and user APIs. Scanner source is partial, so uncertain interactions are omitted.

Main entry points: [`lib/supabase/server.ts`](https://github.com/abamakbar07/order-fulfillment/blob/main/lib/supabase/server.ts) (Server Supabase Client), [`public/fulfillment/script.js`](https://github.com/abamakbar07/order-fulfillment/blob/main/public/fulfillment/script.js) (Scanner Logic), [`app/page.tsx`](https://github.com/abamakbar07/order-fulfillment/blob/main/app/page.tsx) (Fulfillment Overview), [`script.js`](https://github.com/abamakbar07/order-fulfillment/blob/main/script.js) (Warehouse Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ops["Operations Views"]
  node_ops_view["Fulfillment Overview<br/>[page.tsx]"]
  node_warehouse_dash["Warehouse Dashboard<br/>[script.js]"]
end

subgraph group_scanner["RF Fulfillment"]
  node_fulfillment_page["Scanner Embed Page<br/>[page.tsx]"]
  node_scanner_ui["RF Scanner<br/>[index.html]"]
  node_scanner_logic["Scanner Logic<br/>[script.js]"]
  node_admin_ui["PO Admin Interface<br/>[admin.html]"]
end

subgraph group_access["Identity And Access"]
  node_auth_pages["Sign-in Pages<br/>[page.tsx]"]
  node_auth_form["Authentication Form<br/>[auth-form.tsx]"]
  node_auth_callback["Auth Callback<br/>[route.ts]"]
  node_users_page["Warehouse Users Page<br/>[page.tsx]"]
  node_user_manager["User Manager<br/>[user-manager.tsx]"]
  node_users_api["Warehouse Users API<br/>[route.ts]"]
end

subgraph group_integration["Supabase Integration"]
  node_browser_client["Browser Supabase Client<br/>[client.ts]"]
  node_server_client["Server Supabase Client<br/>[server.ts]"]
  node_supabase[("Supabase")]
end

node_staff(("Warehouse Staff"))

node_staff -->|"views overview"| node_ops_view
node_ops_view -->|"creates client"| node_server_client
node_server_client -->|"queries data"| node_supabase
node_staff -->|"views dashboard"| node_warehouse_dash
node_warehouse_dash -->|"loads warehouse data"| node_supabase
node_staff -->|"opens scanner"| node_fulfillment_page
node_fulfillment_page -->|"embeds"| node_scanner_ui
node_scanner_ui -->|"loads script"| node_scanner_logic
node_scanner_logic -->|"reads and writes"| node_supabase
node_staff -->|"manages purchase orders"| node_admin_ui
node_admin_ui -->|"uses admin logic"| node_scanner_logic
node_staff -->|"signs in"| node_auth_pages
node_auth_pages -->|"renders form"| node_auth_form
node_auth_form -->|"creates client"| node_browser_client
node_browser_client -->|"authenticates"| node_supabase
node_supabase -->|"redirects with code"| node_auth_callback
node_auth_callback -->|"creates client"| node_server_client
node_server_client -->|"exchanges code"| node_supabase
node_staff -->|"manages users"| node_users_page
node_users_page -->|"renders manager"| node_user_manager
node_user_manager -->|"fetches users"| node_users_api
node_users_api -->|"creates and lists users"| node_supabase

click node_ops_view "https://github.com/abamakbar07/order-fulfillment/blob/main/app/page.tsx"
click node_warehouse_dash "https://github.com/abamakbar07/order-fulfillment/blob/main/script.js"
click node_fulfillment_page "https://github.com/abamakbar07/order-fulfillment/blob/main/app/fulfillment/page.tsx"
click node_scanner_ui "https://github.com/abamakbar07/order-fulfillment/blob/main/public/fulfillment/index.html"
click node_scanner_logic "https://github.com/abamakbar07/order-fulfillment/blob/main/public/fulfillment/script.js"
click node_admin_ui "https://github.com/abamakbar07/order-fulfillment/blob/main/public/fulfillment/admin.html"
click node_auth_pages "https://github.com/abamakbar07/order-fulfillment/blob/main/app/auth/login/page.tsx"
click node_auth_form "https://github.com/abamakbar07/order-fulfillment/blob/main/components/auth-form.tsx"
click node_auth_callback "https://github.com/abamakbar07/order-fulfillment/blob/main/app/auth/callback/route.ts"
click node_users_page "https://github.com/abamakbar07/order-fulfillment/blob/main/app/users/page.tsx"
click node_user_manager "https://github.com/abamakbar07/order-fulfillment/blob/main/components/user-manager.tsx"
click node_users_api "https://github.com/abamakbar07/order-fulfillment/blob/main/app/api/warehouse-users/route.ts"
click node_browser_client "https://github.com/abamakbar07/order-fulfillment/blob/main/lib/supabase/client.ts"
click node_server_client "https://github.com/abamakbar07/order-fulfillment/blob/main/lib/supabase/server.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_ops_view,node_warehouse_dash toneBlue
class node_fulfillment_page,node_scanner_ui,node_scanner_logic,node_admin_ui toneAmber
class node_auth_pages,node_auth_form,node_auth_callback,node_users_page,node_user_manager,node_users_api toneMint
class node_browser_client,node_server_client,node_supabase toneRose
class node_staff toneIndigo
```

## Components

### Operations Views

- [Fulfillment Overview](https://github.com/abamakbar07/order-fulfillment/blob/main/app/page.tsx): `app/page.tsx`
- [Warehouse Dashboard](https://github.com/abamakbar07/order-fulfillment/blob/main/script.js): `script.js`

### RF Fulfillment

- [Scanner Embed Page](https://github.com/abamakbar07/order-fulfillment/blob/main/app/fulfillment/page.tsx): `app/fulfillment/page.tsx`
- [RF Scanner](https://github.com/abamakbar07/order-fulfillment/blob/main/public/fulfillment/index.html): `public/fulfillment/index.html`
- [Scanner Logic](https://github.com/abamakbar07/order-fulfillment/blob/main/public/fulfillment/script.js): `public/fulfillment/script.js`
- [PO Admin Interface](https://github.com/abamakbar07/order-fulfillment/blob/main/public/fulfillment/admin.html): `public/fulfillment/admin.html`

### Identity And Access

- [Sign-in Pages](https://github.com/abamakbar07/order-fulfillment/blob/main/app/auth/login/page.tsx): `app/auth/login/page.tsx`
- [Authentication Form](https://github.com/abamakbar07/order-fulfillment/blob/main/components/auth-form.tsx): `components/auth-form.tsx`
- [Auth Callback](https://github.com/abamakbar07/order-fulfillment/blob/main/app/auth/callback/route.ts): `app/auth/callback/route.ts`
- [Warehouse Users Page](https://github.com/abamakbar07/order-fulfillment/blob/main/app/users/page.tsx): `app/users/page.tsx`
- [User Manager](https://github.com/abamakbar07/order-fulfillment/blob/main/components/user-manager.tsx): `components/user-manager.tsx`
- [Warehouse Users API](https://github.com/abamakbar07/order-fulfillment/blob/main/app/api/warehouse-users/route.ts): `app/api/warehouse-users/route.ts`

### Supabase Integration

- [Browser Supabase Client](https://github.com/abamakbar07/order-fulfillment/blob/main/lib/supabase/client.ts): `lib/supabase/client.ts`
- [Server Supabase Client](https://github.com/abamakbar07/order-fulfillment/blob/main/lib/supabase/server.ts): `lib/supabase/server.ts`
- **Supabase**

### Other components

- **Warehouse Staff**

## Connections

- Warehouse Staff → Fulfillment Overview: views overview
- Fulfillment Overview → Server Supabase Client: creates client
- Server Supabase Client → Supabase: queries data
- Warehouse Staff → Warehouse Dashboard: views dashboard
- Warehouse Dashboard → Supabase: loads warehouse data
- Warehouse Staff → Scanner Embed Page: opens scanner
- Scanner Embed Page → RF Scanner: embeds
- RF Scanner → Scanner Logic: loads script
- Scanner Logic → Supabase: reads and writes
- Warehouse Staff → PO Admin Interface: manages purchase orders
- PO Admin Interface → Scanner Logic: uses admin logic
- Warehouse Staff → Sign-in Pages: signs in
- Sign-in Pages → Authentication Form: renders form
- Authentication Form → Browser Supabase Client: creates client
- Browser Supabase Client → Supabase: authenticates
- Supabase → Auth Callback: redirects with code
- Auth Callback → Server Supabase Client: creates client
- Server Supabase Client → Supabase: exchanges code
- Warehouse Staff → Warehouse Users Page: manages users
- Warehouse Users Page → User Manager: renders manager
- User Manager → Warehouse Users API: fetches users
- Warehouse Users API → Supabase: creates and lists users