# alvinshofa13/sikopi-order-web architecture

> Architecture diagram of the GitHub repository alvinshofa13/sikopi-order-web, 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/alvinshofa13/sikopi-order-web
- Repository: https://github.com/alvinshofa13/sikopi-order-web

## Overview

sikopi is a café self-ordering and cashier/POS application. Customers verify a cashier-issued token, browse the menu, build a cart, submit payment/order details, and reach a confirmation/receipt view; staff manage tokens, orders, menus, settings, and sales reporting. The frontend uses a shared API client and stores, while a FastAPI backend exposes the corresponding API and persists application data. The sampled excerpts establish frontend state/API use and backend startup/auth wiring; other router behavior is represented only at the documented subsystem level, so uncertain endpoint-level links are omitted.

Main entry points: [`frontend/src/stores/orderStore.js`](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/stores/orderStore.js) (Order state), [`frontend/src/views/AdminView.vue`](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/AdminView.vue) (POS dashboard), [`backend/main.py`](https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/main.py) (FastAPI application), [`backend/database.py`](https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/database.py) (Database access)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_customer["Customer ordering"]
  node_menu_view["Browse menu<br/>[MenuView.vue]"]
  node_cart_view["Cart<br/>[CartView.vue]"]
  node_checkout_view["Checkout<br/>[CheckoutView.vue]"]
  node_confirmation_view["Order confirmation"]
  node_token_modal["Token verification<br/>[TokenAuthModal.vue]"]
end

subgraph group_staff["Cashier administration"]
  node_admin_view["POS dashboard<br/>[AdminView.vue]"]
end

subgraph group_frontend["Frontend state and services"]
  node_order_store["Order state<br/>[orderStore.js]"]
  node_admin_store["Admin state<br/>[adminStore.js]"]
  node_api_client["API client<br/>[api.js]"]
  node_qris["QRIS generation<br/>[qris.js]"]
  node_analytics["Sales analytics<br/>[salesAnalytics.js]"]
  node_printer["Bluetooth receipts"]
end

subgraph group_backend["Backend API and persistence"]
  node_api_app["FastAPI application<br/>[main.py]"]
  node_auth_routes["Authentication routes<br/>[auth.py]"]
  node_domain_routes["Menu, order, token, settings APIs"]
  node_auth_dependency["Admin sessions<br/>[auth_dep.py]"]
  node_database_layer["Database access<br/>[database.py]"]
  node_models["Domain models<br/>[models.py]"]
end

node_customer_actor(("Customer"))
node_staff_actor(("Cashier / admin"))
node_db_store[("Application database")]
node_web_bluetooth["Bluetooth printer"]

node_customer_actor -->|"enters identity and token"| node_token_modal
node_token_modal -->|"verifies session"| node_order_store
node_customer_actor -->|"browses"| node_menu_view
node_menu_view -->|"reads menu"| node_order_store
node_customer_actor -->|"selects items"| node_cart_view
node_cart_view -->|"updates cart"| node_order_store
node_customer_actor -->|"submits order"| node_checkout_view
node_checkout_view -->|"creates order"| node_order_store
node_order_store -->|"provides order details"| node_confirmation_view
node_staff_actor -->|"manages POS"| node_admin_view
node_admin_view -->|"uses admin state"| node_admin_store
node_admin_view -->|"manages orders and menu"| node_order_store
node_admin_view -->|"generates payment QR"| node_qris
node_admin_view -->|"derives sales metrics"| node_analytics
node_admin_view -->|"prints receipts"| node_printer
node_order_store -->|"requests application data"| node_api_client
node_admin_store -->|"requests admin data"| node_api_client
node_api_client -->|"calls API"| node_api_app
node_api_app -->|"dispatches auth routes"| node_auth_routes
node_api_app -->|"dispatches domain routes"| node_domain_routes
node_auth_routes -->|"issues or revokes sessions"| node_auth_dependency
node_auth_routes -->|"uses database session"| node_database_layer
node_api_app -->|"initializes and seeds"| node_database_layer
node_database_layer -->|"maps domain records"| node_models
node_database_layer -->|"reads and writes"| node_db_store
node_printer -.->|"writes receipt data"| node_web_bluetooth

click node_menu_view "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/MenuView.vue"
click node_cart_view "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/CartView.vue"
click node_checkout_view "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/CheckoutView.vue"
click node_confirmation_view "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/ConfirmationView.vue"
click node_token_modal "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/components/TokenAuthModal.vue"
click node_admin_view "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/AdminView.vue"
click node_order_store "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/stores/orderStore.js"
click node_admin_store "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/stores/adminStore.js"
click node_api_client "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/services/api.js"
click node_qris "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/utils/qris.js"
click node_analytics "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/utils/salesAnalytics.js"
click node_printer "https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/utils/bluetoothPrinter.js"
click node_api_app "https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/main.py"
click node_auth_routes "https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/routers/auth.py"
click node_domain_routes "https://github.com/alvinshofa13/sikopi-order-web/tree/main/backend/routers"
click node_auth_dependency "https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/auth_dep.py"
click node_database_layer "https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/database.py"
click node_models "https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/models.py"

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_menu_view,node_cart_view,node_checkout_view,node_confirmation_view,node_token_modal toneBlue
class node_admin_view,node_db_store toneAmber
class node_order_store,node_admin_store,node_api_client,node_qris,node_analytics,node_printer toneMint
class node_api_app,node_auth_routes,node_domain_routes,node_auth_dependency,node_database_layer,node_models toneRose
class node_customer_actor,node_staff_actor,node_web_bluetooth toneIndigo
```

## Components

### Customer ordering

- [Browse menu](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/MenuView.vue): `frontend/src/views/MenuView.vue`
- [Cart](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/CartView.vue): `frontend/src/views/CartView.vue`
- [Checkout](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/CheckoutView.vue): `frontend/src/views/CheckoutView.vue`
- [Order confirmation](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/ConfirmationView.vue): `frontend/src/views/ConfirmationView.vue`
- [Token verification](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/components/TokenAuthModal.vue): `frontend/src/components/TokenAuthModal.vue`

### Cashier administration

- [POS dashboard](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/views/AdminView.vue): `frontend/src/views/AdminView.vue`

### Frontend state and services

- [Order state](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/stores/orderStore.js): `frontend/src/stores/orderStore.js`
- [Admin state](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/stores/adminStore.js): `frontend/src/stores/adminStore.js`
- [API client](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`
- [QRIS generation](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/utils/qris.js): `frontend/src/utils/qris.js`
- [Sales analytics](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/utils/salesAnalytics.js): `frontend/src/utils/salesAnalytics.js`
- [Bluetooth receipts](https://github.com/alvinshofa13/sikopi-order-web/blob/main/frontend/src/utils/bluetoothPrinter.js): `frontend/src/utils/bluetoothPrinter.js`

### Backend API and persistence

- [FastAPI application](https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/main.py): `backend/main.py`
- [Authentication routes](https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/routers/auth.py): `backend/routers/auth.py`
- [Menu, order, token, settings APIs](https://github.com/alvinshofa13/sikopi-order-web/tree/main/backend/routers): `backend/routers`
- [Admin sessions](https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/auth_dep.py): `backend/auth_dep.py`
- [Database access](https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/database.py): `backend/database.py`
- [Domain models](https://github.com/alvinshofa13/sikopi-order-web/blob/main/backend/models.py): `backend/models.py`

### Other components

- **Customer**
- **Cashier / admin**
- **Application database**
- **Bluetooth printer**

## Connections

- Customer → Token verification: enters identity and token
- Token verification → Order state: verifies session
- Customer → Browse menu: browses
- Browse menu → Order state: reads menu
- Customer → Cart: selects items
- Cart → Order state: updates cart
- Customer → Checkout: submits order
- Checkout → Order state: creates order
- Order state → Order confirmation: provides order details
- Cashier / admin → POS dashboard: manages POS
- POS dashboard → Admin state: uses admin state
- POS dashboard → Order state: manages orders and menu
- POS dashboard → QRIS generation: generates payment QR
- POS dashboard → Sales analytics: derives sales metrics
- POS dashboard → Bluetooth receipts: prints receipts
- Order state → API client: requests application data
- Admin state → API client: requests admin data
- API client → FastAPI application: calls API
- FastAPI application → Authentication routes: dispatches auth routes
- FastAPI application → Menu, order, token, settings APIs: dispatches domain routes
- Authentication routes → Admin sessions: issues or revokes sessions
- Authentication routes → Database access: uses database session
- FastAPI application → Database access: initializes and seeds
- Database access → Domain models: maps domain records
- Database access → Application database: reads and writes
- Bluetooth receipts → Bluetooth printer: writes receipt data