# mellowmir94/gfo-preorder-system architecture

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

- Interactive diagram: https://gitdiagram.com/mellowmir94/gfo-preorder-system
- Repository: https://github.com/mellowmir94/gfo-preorder-system

## Overview

GFO Pre-Order System is a mobile-first storefront and admin tool for managing shirt preorder batches and orders. Customers check batch availability, choose sizes and delivery, submit contact details and payment receipt, then receive an order confirmation; admins manage batches and orders, verify payment, and provide official receipts. The sampled code supports the checkout, capacity checks, receipt storage, Telegram notification, admin management, and token-protected paid receipts. Some admin UI/API behavior is only described by filenames or partial excerpts, so uncertain wiring is omitted.

Main entry points: [`lib/db.ts`](https://github.com/mellowmir94/gfo-preorder-system/blob/main/lib/db.ts) (Supabase access), [`app/api/orders/route.ts`](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/orders/route.ts) (Order submission), [`app/admin/page.tsx`](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/admin/page.tsx) (Order and batch console), [`app/page.tsx`](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/page.tsx) (Order storefront)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer storefront"]
  node_storefront_ui["Order storefront<br/>[page.tsx]"]
  node_availability["Batch availability<br/>[route.ts]"]
end

subgraph group_orders["Order processing"]
  node_order_api["Order submission<br/>[route.ts]"]
  node_pricing["Pricing rules<br/>[config.ts]"]
  node_telegram["Order notification<br/>[telegram.ts]"]
  node_receipt_page["Paid receipt page<br/>[page.tsx]"]
  node_receipt_print["Receipt print control<br/>[PrintButton.tsx]"]
end

subgraph group_management["Admin management"]
  node_login["Admin login<br/>[page.tsx]"]
  node_admin_ui["Order and batch console<br/>[page.tsx]"]
  node_admin_orders["Order listing API<br/>[route.ts]"]
  node_admin_order["Order update API<br/>[route.ts]"]
  node_admin_batches["Batch management API<br/>[route.ts]"]
  node_admin_receipt["Receipt access API<br/>[route.ts]"]
end

subgraph group_services["External services"]
  node_db_access["Supabase access<br/>[db.ts]"]
  node_orders_db[("Orders and batches")]
  node_receipt_storage[("Receipt bucket")]
  node_auth_service["Supabase Auth"]
  node_telegram_service["Telegram Bot API"]
end

node_customer(("Customer"))
node_admin(("Admin"))

node_customer -->|"opens"| node_storefront_ui
node_storefront_ui -->|"checks availability"| node_availability
node_availability -->|"queries batch capacity"| node_db_access
node_db_access -->|"reads"| node_orders_db
node_storefront_ui -->|"submits order"| node_order_api
node_order_api -->|"queries and writes"| node_db_access
node_order_api -->|"calculates total"| node_pricing
node_order_api -->|"uploads receipt"| node_receipt_storage
node_order_api -->|"notifies"| node_telegram
node_telegram -.->|"sends message"| node_telegram_service
node_admin -->|"signs in"| node_login
node_login -->|"authenticates"| node_auth_service
node_admin -->|"manages"| node_admin_ui
node_admin_ui -->|"loads orders"| node_admin_orders
node_admin_ui -->|"updates orders"| node_admin_order
node_admin_ui -->|"manages batches"| node_admin_batches
node_admin_ui -->|"opens receipt"| node_admin_receipt
node_admin_orders -->|"reads orders"| node_db_access
node_admin_order -->|"updates orders"| node_db_access
node_admin_order -->|"recalculates items"| node_pricing
node_admin_batches -->|"manages batches"| node_db_access
node_admin_receipt -->|"looks up order"| node_db_access
node_admin_receipt -->|"creates signed link"| node_receipt_storage
node_db_access -->|"checks admin"| node_auth_service
node_customer -->|"opens receipt"| node_receipt_page
node_receipt_page -->|"loads paid order"| node_db_access
node_receipt_page -->|"renders print control"| node_receipt_print
node_db_access -->|"reads and writes"| node_orders_db

click node_storefront_ui "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/page.tsx"
click node_availability "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/preorder/route.ts"
click node_order_api "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/orders/route.ts"
click node_pricing "https://github.com/mellowmir94/gfo-preorder-system/blob/main/lib/config.ts"
click node_telegram "https://github.com/mellowmir94/gfo-preorder-system/blob/main/lib/telegram.ts"
click node_receipt_page "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/receipt/%5BorderNumber%5D/page.tsx"
click node_receipt_print "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/receipt/%5BorderNumber%5D/PrintButton.tsx"
click node_login "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/login/page.tsx"
click node_admin_ui "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/admin/page.tsx"
click node_admin_orders "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/admin/orders/route.ts"
click node_admin_order "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/admin/orders/%5Bid%5D/route.ts"
click node_admin_batches "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/admin/preorder/route.ts"
click node_admin_receipt "https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/admin/orders/%5Bid%5D/receipt/route.ts"
click node_db_access "https://github.com/mellowmir94/gfo-preorder-system/blob/main/lib/db.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_storefront_ui,node_availability toneBlue
class node_order_api,node_pricing,node_telegram,node_receipt_page,node_receipt_print toneAmber
class node_login,node_admin_ui,node_admin_orders,node_admin_order,node_admin_batches,node_admin_receipt toneMint
class node_db_access,node_orders_db,node_receipt_storage,node_auth_service,node_telegram_service toneRose
class node_customer,node_admin toneIndigo
```

## Components

### Customer storefront

- [Order storefront](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/page.tsx): `app/page.tsx`
- [Batch availability](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/preorder/route.ts): `app/api/preorder/route.ts`

### Order processing

- [Order submission](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/orders/route.ts): `app/api/orders/route.ts`
- [Pricing rules](https://github.com/mellowmir94/gfo-preorder-system/blob/main/lib/config.ts): `lib/config.ts`
- [Order notification](https://github.com/mellowmir94/gfo-preorder-system/blob/main/lib/telegram.ts): `lib/telegram.ts`
- [Paid receipt page](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/receipt/%5BorderNumber%5D/page.tsx): `app/receipt/[orderNumber]/page.tsx`
- [Receipt print control](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/receipt/%5BorderNumber%5D/PrintButton.tsx): `app/receipt/[orderNumber]/PrintButton.tsx`

### Admin management

- [Admin login](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/login/page.tsx): `app/login/page.tsx`
- [Order and batch console](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/admin/page.tsx): `app/admin/page.tsx`
- [Order listing API](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/admin/orders/route.ts): `app/api/admin/orders/route.ts`
- [Order update API](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/admin/orders/%5Bid%5D/route.ts): `app/api/admin/orders/[id]/route.ts`
- [Batch management API](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/admin/preorder/route.ts): `app/api/admin/preorder/route.ts`
- [Receipt access API](https://github.com/mellowmir94/gfo-preorder-system/blob/main/app/api/admin/orders/%5Bid%5D/receipt/route.ts): `app/api/admin/orders/[id]/receipt/route.ts`

### External services

- [Supabase access](https://github.com/mellowmir94/gfo-preorder-system/blob/main/lib/db.ts): `lib/db.ts`
- **Orders and batches**
- **Receipt bucket**
- **Supabase Auth**
- **Telegram Bot API**

### Other components

- **Customer**
- **Admin**

## Connections

- Customer → Order storefront: opens
- Order storefront → Batch availability: checks availability
- Batch availability → Supabase access: queries batch capacity
- Supabase access → Orders and batches: reads
- Order storefront → Order submission: submits order
- Order submission → Supabase access: queries and writes
- Order submission → Pricing rules: calculates total
- Order submission → Receipt bucket: uploads receipt
- Order submission → Order notification: notifies
- Order notification → Telegram Bot API: sends message
- Admin → Admin login: signs in
- Admin login → Supabase Auth: authenticates
- Admin → Order and batch console: manages
- Order and batch console → Order listing API: loads orders
- Order and batch console → Order update API: updates orders
- Order and batch console → Batch management API: manages batches
- Order and batch console → Receipt access API: opens receipt
- Order listing API → Supabase access: reads orders
- Order update API → Supabase access: updates orders
- Order update API → Pricing rules: recalculates items
- Batch management API → Supabase access: manages batches
- Receipt access API → Supabase access: looks up order
- Receipt access API → Receipt bucket: creates signed link
- Supabase access → Supabase Auth: checks admin
- Customer → Paid receipt page: opens receipt
- Paid receipt page → Supabase access: loads paid order
- Paid receipt page → Receipt print control: renders print control
- Supabase access → Orders and batches: reads and writes