# jangbersahaja/wokkang architecture

> Architecture diagram of the GitHub repository jangbersahaja/wokkang, 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/jangbersahaja/wokkang
- Repository: https://github.com/jangbersahaja/wokkang

## Overview

StoreHub Transaction Monitor is a Next.js dashboard for authenticated staff to inspect live sales and transaction details. The main workflow polls the app’s transaction and product endpoints, which enforce session access and fetch/normalize StoreHub data; the dashboard then derives sales, payment and product metrics. Separate account workflows support sign-in, token-based registration, and role-governed invitations and account removal. The graph reflects the supplied excerpts and README; some page and persistence wiring is represented only at the supported directory or module level.

Main entry points: [`app/actions/auth.ts`](https://github.com/jangbersahaja/wokkang/blob/main/app/actions/auth.ts) (Auth actions), [`app/page.tsx`](https://github.com/jangbersahaja/wokkang/blob/main/app/page.tsx) (Dashboard), [`lib/auth/session.ts`](https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/session.ts) (Session cookies), [`app/api/transactions/route.ts`](https://github.com/jangbersahaja/wokkang/blob/main/app/api/transactions/route.ts) (Transactions endpoint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_dashboard["Sales dashboard"]
  node_dashboard_page["Dashboard<br/>[page.tsx]"]
  node_metrics["Dashboard cards<br/>[MetricCard.tsx]"]
  node_payments["Payment cards"]
  node_status["Transaction status<br/>[StatusBadge.tsx]"]
end

subgraph group_api["StoreHub data"]
  node_transactions_route["Transactions endpoint<br/>[route.ts]"]
  node_products_route["Products endpoint<br/>[route.ts]"]
  node_storehub_client["StoreHub integration<br/>[storehubApi.ts]"]
end

subgraph group_identity["Identity and access"]
  node_login_page["Sign-in page<br/>[page.tsx]"]
  node_auth_actions["Auth actions<br/>[auth.ts]"]
  node_session["Session cookies<br/>[session.ts]"]
  node_auth_guard["Session authorization<br/>[dal.ts]"]
  node_roles["Role rules<br/>[roles.ts]"]
  node_user_store["User and token data<br/>[users.ts]"]
end

subgraph group_accounts["Account administration"]
  node_registration_page["Token registration<br/>[page.tsx]"]
  node_admin_accounts["Account management"]
  node_account_client["Account controls"]
end

node_staff(("Staff user"))
node_storehub{{"StoreHub API"}}
node_database[("Application database<br/>[db.ts]")]

node_staff -->|"views"| node_dashboard_page
node_dashboard_page -->|"requests transactions"| node_transactions_route
node_dashboard_page -->|"requests products"| node_products_route
node_transactions_route -->|"checks session"| node_session
node_products_route -->|"checks session"| node_session
node_transactions_route -->|"fetches transactions"| node_storehub_client
node_products_route -->|"fetches products"| node_storehub_client
node_storehub_client -->|"calls API"| node_storehub
node_dashboard_page -->|"renders metrics"| node_metrics
node_dashboard_page -->|"renders breakdown"| node_payments
node_dashboard_page -->|"renders status"| node_status
node_staff -->|"signs in"| node_login_page
node_login_page -->|"submits credentials"| node_auth_actions
node_auth_actions -->|"looks up users"| node_user_store
node_auth_actions -->|"creates session"| node_session
node_staff -->|"uses invitation"| node_registration_page
node_registration_page -->|"submits registration"| node_auth_actions
node_auth_actions -->|"manages users and tokens"| node_user_store
node_auth_actions -->|"checks role rules"| node_roles
node_admin_accounts -->|"renders controls"| node_account_client
node_account_client -->|"invites or removes"| node_auth_actions
node_auth_guard -->|"verifies session"| node_session
node_auth_guard -->|"checks access"| node_roles
node_user_store -->|"reads and writes"| node_database

click node_dashboard_page "https://github.com/jangbersahaja/wokkang/blob/main/app/page.tsx"
click node_metrics "https://github.com/jangbersahaja/wokkang/blob/main/components/dashboard/MetricCard.tsx"
click node_payments "https://github.com/jangbersahaja/wokkang/blob/main/components/dashboard/PaymentMethodCard.tsx"
click node_status "https://github.com/jangbersahaja/wokkang/blob/main/components/dashboard/StatusBadge.tsx"
click node_transactions_route "https://github.com/jangbersahaja/wokkang/blob/main/app/api/transactions/route.ts"
click node_products_route "https://github.com/jangbersahaja/wokkang/blob/main/app/api/products/route.ts"
click node_storehub_client "https://github.com/jangbersahaja/wokkang/blob/main/lib/storehubApi.ts"
click node_login_page "https://github.com/jangbersahaja/wokkang/blob/main/app/login/page.tsx"
click node_auth_actions "https://github.com/jangbersahaja/wokkang/blob/main/app/actions/auth.ts"
click node_session "https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/session.ts"
click node_auth_guard "https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/dal.ts"
click node_roles "https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/roles.ts"
click node_user_store "https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/users.ts"
click node_database "https://github.com/jangbersahaja/wokkang/blob/main/lib/db.ts"
click node_registration_page "https://github.com/jangbersahaja/wokkang/blob/main/app/register/%5Btoken%5D/page.tsx"
click node_admin_accounts "https://github.com/jangbersahaja/wokkang/tree/main/app/admin/accounts"
click node_account_client "https://github.com/jangbersahaja/wokkang/blob/main/app/admin/accounts/AccountsManagementClient.tsx"

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_dashboard_page,node_metrics,node_payments,node_status,node_staff toneBlue
class node_transactions_route,node_products_route,node_storehub_client,node_database toneAmber
class node_login_page,node_auth_actions,node_session,node_auth_guard,node_roles,node_user_store,node_storehub toneMint
class node_registration_page,node_admin_accounts,node_account_client toneRose
```

## Components

### Sales dashboard

- [Dashboard](https://github.com/jangbersahaja/wokkang/blob/main/app/page.tsx): `app/page.tsx`
- [Dashboard cards](https://github.com/jangbersahaja/wokkang/blob/main/components/dashboard/MetricCard.tsx): `components/dashboard/MetricCard.tsx`
- [Payment cards](https://github.com/jangbersahaja/wokkang/blob/main/components/dashboard/PaymentMethodCard.tsx): `components/dashboard/PaymentMethodCard.tsx`
- [Transaction status](https://github.com/jangbersahaja/wokkang/blob/main/components/dashboard/StatusBadge.tsx): `components/dashboard/StatusBadge.tsx`

### StoreHub data

- [Transactions endpoint](https://github.com/jangbersahaja/wokkang/blob/main/app/api/transactions/route.ts): `app/api/transactions/route.ts`
- [Products endpoint](https://github.com/jangbersahaja/wokkang/blob/main/app/api/products/route.ts): `app/api/products/route.ts`
- [StoreHub integration](https://github.com/jangbersahaja/wokkang/blob/main/lib/storehubApi.ts): `lib/storehubApi.ts`

### Identity and access

- [Sign-in page](https://github.com/jangbersahaja/wokkang/blob/main/app/login/page.tsx): `app/login/page.tsx`
- [Auth actions](https://github.com/jangbersahaja/wokkang/blob/main/app/actions/auth.ts): `app/actions/auth.ts`
- [Session cookies](https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/session.ts): `lib/auth/session.ts`
- [Session authorization](https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/dal.ts): `lib/auth/dal.ts`
- [Role rules](https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/roles.ts): `lib/auth/roles.ts`
- [User and token data](https://github.com/jangbersahaja/wokkang/blob/main/lib/auth/users.ts): `lib/auth/users.ts`

### Account administration

- [Token registration](https://github.com/jangbersahaja/wokkang/blob/main/app/register/%5Btoken%5D/page.tsx): `app/register/[token]/page.tsx`
- [Account management](https://github.com/jangbersahaja/wokkang/tree/main/app/admin/accounts): `app/admin/accounts`
- [Account controls](https://github.com/jangbersahaja/wokkang/blob/main/app/admin/accounts/AccountsManagementClient.tsx): `app/admin/accounts/AccountsManagementClient.tsx`

### Other components

- **Staff user**
- **StoreHub API**
- [Application database](https://github.com/jangbersahaja/wokkang/blob/main/lib/db.ts): `lib/db.ts`

## Connections

- Staff user → Dashboard: views
- Dashboard → Transactions endpoint: requests transactions
- Dashboard → Products endpoint: requests products
- Transactions endpoint → Session cookies: checks session
- Products endpoint → Session cookies: checks session
- Transactions endpoint → StoreHub integration: fetches transactions
- Products endpoint → StoreHub integration: fetches products
- StoreHub integration → StoreHub API: calls API
- Dashboard → Dashboard cards: renders metrics
- Dashboard → Payment cards: renders breakdown
- Dashboard → Transaction status: renders status
- Staff user → Sign-in page: signs in
- Sign-in page → Auth actions: submits credentials
- Auth actions → User and token data: looks up users
- Auth actions → Session cookies: creates session
- Staff user → Token registration: uses invitation
- Token registration → Auth actions: submits registration
- Auth actions → User and token data: manages users and tokens
- Auth actions → Role rules: checks role rules
- Account management → Account controls: renders controls
- Account controls → Auth actions: invites or removes
- Session authorization → Session cookies: verifies session
- Session authorization → Role rules: checks access
- User and token data → Application database: reads and writes