# housseint/talabkum architecture

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

- Interactive diagram: https://gitdiagram.com/housseint/talabkum
- Repository: https://github.com/housseint/talabkum

## Overview

TALABKUM is a multi-branch restaurant storefront: customers choose or enter a branch-specific menu, customize items, build a cart, and submit delivery details through WhatsApp checkout. Branch configuration drives localized pricing, availability, routing, and store hours; language context supplies Arabic/English UI state. README capabilities are included where source excerpts were unavailable, with those connections limited to documented behavior.

Main entry points: [`src/App.tsx`](https://github.com/housseint/talabkum/blob/main/src/App.tsx) (Application shell), [`src/pages/Index.tsx`](https://github.com/housseint/talabkum/blob/main/src/pages/Index.tsx) (Menu storefront), [`src/context/BranchContext.tsx`](https://github.com/housseint/talabkum/blob/main/src/context/BranchContext.tsx) (Branch state), [`src/components/MenuGrid.tsx`](https://github.com/housseint/talabkum/blob/main/src/components/MenuGrid.tsx) (Menu browser)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and routing"]
  node_app["Application shell<br/>[App.tsx]"]
  node_branchgate["Branch gate<br/>[ProtectedRoute.tsx]"]
end

subgraph group_branch["Branch operations"]
  node_selector["Branch selector<br/>[BranchSelector.tsx]"]
  node_branchstate["Branch state<br/>[BranchContext.tsx]"]
  node_branchdata["Branch settings<br/>[branch.ts]"]
  node_storestate["Store hours<br/>[StoreContext.tsx]"]
  node_statuscheck["Store status check"]
end

subgraph group_ordering["Menu and ordering"]
  node_storefront["Menu storefront<br/>[Index.tsx]"]
  node_hero["Storefront hero<br/>[HeroSection.tsx]"]
  node_menugrid["Menu browser<br/>[MenuGrid.tsx]"]
  node_menudata["Branch menu catalog<br/>[menu.ts]"]
  node_itemcard["Menu item card<br/>[ItemCard.tsx]"]
  node_customizer["Item customization"]
  node_notes["Item notes"]
  node_addons["Add-ons<br/>[AddOnsSection.tsx]"]
  node_cart["Cart and checkout<br/>[CartSheet.tsx]"]
end

subgraph group_localization["Localization"]
  node_language["Language state"]
  node_translations["UI translations<br/>[translations.ts]"]
end

node_customer(("Customer"))
node_whatsapp(("WhatsApp"))

node_customer -->|"opens storefront"| node_app
node_app -->|"routes through"| node_branchgate
node_branchgate -->|"allows branch"| node_storefront
node_app -->|"routes to"| node_selector
node_app -->|"provides branch state"| node_branchstate
node_app -->|"provides store state"| node_storestate
node_app -->|"provides language state"| node_language
node_branchstate -->|"reads settings"| node_branchdata
node_storestate -->|"reads hours and timezone"| node_branchdata
node_app -->|"wraps routes"| node_statuscheck
node_storefront -->|"renders"| node_hero
node_storefront -->|"renders"| node_menugrid
node_storefront -->|"renders checkout"| node_cart
node_menugrid -->|"reads menu"| node_menudata
node_menugrid -->|"renders items"| node_itemcard
node_itemcard -->|"opens customization"| node_customizer
node_customizer -->|"offers add-ons"| node_addons
node_customizer -->|"collects notes"| node_notes
node_cart -.->|"sends order"| node_whatsapp
node_language -->|"reads strings"| node_translations
node_branchstate -.->|"selects branch pricing and availability"| node_menudata
node_customer -->|"selects branch"| node_selector

click node_app "https://github.com/housseint/talabkum/blob/main/src/App.tsx"
click node_branchgate "https://github.com/housseint/talabkum/blob/main/src/components/ProtectedRoute.tsx"
click node_selector "https://github.com/housseint/talabkum/blob/main/src/pages/BranchSelector.tsx"
click node_storefront "https://github.com/housseint/talabkum/blob/main/src/pages/Index.tsx"
click node_branchstate "https://github.com/housseint/talabkum/blob/main/src/context/BranchContext.tsx"
click node_branchdata "https://github.com/housseint/talabkum/blob/main/src/config/branch.ts"
click node_storestate "https://github.com/housseint/talabkum/blob/main/src/context/StoreContext.tsx"
click node_statuscheck "https://github.com/housseint/talabkum/blob/main/src/components/StoreStatusChecker.tsx"
click node_hero "https://github.com/housseint/talabkum/blob/main/src/components/HeroSection.tsx"
click node_menugrid "https://github.com/housseint/talabkum/blob/main/src/components/MenuGrid.tsx"
click node_menudata "https://github.com/housseint/talabkum/blob/main/src/data/menu.ts"
click node_itemcard "https://github.com/housseint/talabkum/blob/main/src/components/ItemCard.tsx"
click node_customizer "https://github.com/housseint/talabkum/blob/main/src/components/ItemCustomizationDialog.tsx"
click node_notes "https://github.com/housseint/talabkum/blob/main/src/components/AddItemNoteDialog.tsx"
click node_addons "https://github.com/housseint/talabkum/blob/main/src/components/AddOnsSection.tsx"
click node_cart "https://github.com/housseint/talabkum/blob/main/src/components/CartSheet.tsx"
click node_language "https://github.com/housseint/talabkum/blob/main/src/i18n/LanguageContext.tsx"
click node_translations "https://github.com/housseint/talabkum/blob/main/src/i18n/translations.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_app,node_branchgate toneBlue
class node_selector,node_branchstate,node_branchdata,node_storestate,node_statuscheck toneAmber
class node_storefront,node_hero,node_menugrid,node_menudata,node_itemcard,node_customizer,node_notes,node_addons,node_cart toneMint
class node_language,node_translations toneRose
class node_customer,node_whatsapp toneIndigo
```

## Components

### App and routing

- [Application shell](https://github.com/housseint/talabkum/blob/main/src/App.tsx): `src/App.tsx`
- [Branch gate](https://github.com/housseint/talabkum/blob/main/src/components/ProtectedRoute.tsx): `src/components/ProtectedRoute.tsx`

### Branch operations

- [Branch selector](https://github.com/housseint/talabkum/blob/main/src/pages/BranchSelector.tsx): `src/pages/BranchSelector.tsx`
- [Branch state](https://github.com/housseint/talabkum/blob/main/src/context/BranchContext.tsx): `src/context/BranchContext.tsx`
- [Branch settings](https://github.com/housseint/talabkum/blob/main/src/config/branch.ts): `src/config/branch.ts`
- [Store hours](https://github.com/housseint/talabkum/blob/main/src/context/StoreContext.tsx): `src/context/StoreContext.tsx`
- [Store status check](https://github.com/housseint/talabkum/blob/main/src/components/StoreStatusChecker.tsx): `src/components/StoreStatusChecker.tsx`

### Menu and ordering

- [Menu storefront](https://github.com/housseint/talabkum/blob/main/src/pages/Index.tsx): `src/pages/Index.tsx`
- [Storefront hero](https://github.com/housseint/talabkum/blob/main/src/components/HeroSection.tsx): `src/components/HeroSection.tsx`
- [Menu browser](https://github.com/housseint/talabkum/blob/main/src/components/MenuGrid.tsx): `src/components/MenuGrid.tsx`
- [Branch menu catalog](https://github.com/housseint/talabkum/blob/main/src/data/menu.ts): `src/data/menu.ts`
- [Menu item card](https://github.com/housseint/talabkum/blob/main/src/components/ItemCard.tsx): `src/components/ItemCard.tsx`
- [Item customization](https://github.com/housseint/talabkum/blob/main/src/components/ItemCustomizationDialog.tsx): `src/components/ItemCustomizationDialog.tsx`
- [Item notes](https://github.com/housseint/talabkum/blob/main/src/components/AddItemNoteDialog.tsx): `src/components/AddItemNoteDialog.tsx`
- [Add-ons](https://github.com/housseint/talabkum/blob/main/src/components/AddOnsSection.tsx): `src/components/AddOnsSection.tsx`
- [Cart and checkout](https://github.com/housseint/talabkum/blob/main/src/components/CartSheet.tsx): `src/components/CartSheet.tsx`

### Localization

- [Language state](https://github.com/housseint/talabkum/blob/main/src/i18n/LanguageContext.tsx): `src/i18n/LanguageContext.tsx`
- [UI translations](https://github.com/housseint/talabkum/blob/main/src/i18n/translations.ts): `src/i18n/translations.ts`

### Other components

- **Customer**
- **WhatsApp**

## Connections

- Customer → Application shell: opens storefront
- Application shell → Branch gate: routes through
- Branch gate → Menu storefront: allows branch
- Application shell → Branch selector: routes to
- Application shell → Branch state: provides branch state
- Application shell → Store hours: provides store state
- Application shell → Language state: provides language state
- Branch state → Branch settings: reads settings
- Store hours → Branch settings: reads hours and timezone
- Application shell → Store status check: wraps routes
- Menu storefront → Storefront hero: renders
- Menu storefront → Menu browser: renders
- Menu storefront → Cart and checkout: renders checkout
- Menu browser → Branch menu catalog: reads menu
- Menu browser → Menu item card: renders items
- Menu item card → Item customization: opens customization
- Item customization → Add-ons: offers add-ons
- Item customization → Item notes: collects notes
- Cart and checkout → WhatsApp: sends order
- Language state → UI translations: reads strings
- Branch state → Branch menu catalog: selects branch pricing and availability
- Customer → Branch selector: selects branch