# vhaenzz/umroh architecture

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

- Interactive diagram: https://gitdiagram.com/vhaenzz/umroh
- Repository: https://github.com/vhaenzz/umroh

## Overview

This is an Indonesian Umroh and Haji travel-agency website: visitors browse and compare programs, inspect package details, then contact the agency through WhatsApp. The `/admin` CMS lets editors manage company and package content, upload media, and save or reset site data; the README documents Supabase multi-user storage with a local-file fallback. The route, data-store, and CMS edges are grounded in the supplied excerpts and README; unsampled page and component wiring is intentionally kept high-level.

Main entry points: [`src/lib/cms/store.ts`](https://github.com/vhaenzz/umroh/blob/main/src/lib/cms/store.ts) (CMS Data Store), [`src/components/CmsDashboard.tsx`](https://github.com/vhaenzz/umroh/blob/main/src/components/CmsDashboard.tsx) (CMS Dashboard), [`src/app/umroh/page.tsx`](https://github.com/vhaenzz/umroh/blob/main/src/app/umroh/page.tsx) (Umroh Catalog), [`src/app/haji/page.tsx`](https://github.com/vhaenzz/umroh/blob/main/src/app/haji/page.tsx) (Haji Catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public Website"]
  node_home["Home Page<br/>[page.tsx]"]
  node_umroh["Umroh Catalog<br/>[page.tsx]"]
  node_haji["Haji Catalog<br/>[page.tsx]"]
  node_packagecatalog["Package Catalog View"]
  node_umrohd["Umroh Details<br/>[page.tsx]"]
  node_hajid["Haji Details<br/>[page.tsx]"]
  node_paketcatalog["General Packages<br/>[page.tsx]"]
  node_paketdetail["Package Details<br/>[page.tsx]"]
  node_sitepages["Company and Info Pages"]
  node_layout["Shared Site Layout<br/>[layout.tsx]"]
end

subgraph group_content["Packages and Content"]
  node_contact["Contact Link Builder<br/>[contact.ts]"]
  node_packagedata["Package Seed Data<br/>[packages.ts]"]
  node_types["Package Types<br/>[package.ts]"]
end

subgraph group_cms["CMS Administration"]
  node_adminpage["Admin Page<br/>[page.tsx]"]
  node_dashboard["CMS Dashboard<br/>[CmsDashboard.tsx]"]
  node_media["Media Upload<br/>[CmsMediaUpload.tsx]"]
  node_cmsapi["CMS API<br/>[route.ts]"]
end

subgraph group_persistence["Content Persistence"]
  node_defaultdata["Default Site Data<br/>[default-data.ts]"]
  node_store["CMS Data Store<br/>[store.ts]"]
  node_supabaseserver["Supabase Server Access<br/>[server.ts]"]
  node_supabasebrowser["Supabase Browser Access<br/>[browser.ts]"]
  node_localfiles[("Local CMS Storage")]
end

node_visitor(("Visitor"))
node_whatsapp(("WhatsApp Contact"))
node_adminactor(("CMS Editor"))
node_supabase[("Supabase")]

node_visitor -->|"opens site"| node_home
node_visitor -->|"browses"| node_umroh
node_visitor -->|"browses"| node_haji
node_visitor -->|"browses"| node_paketcatalog
node_umroh -->|"renders"| node_packagecatalog
node_haji -->|"renders"| node_packagecatalog
node_umroh -->|"reads packages"| node_store
node_haji -->|"reads packages"| node_store
node_umrohd -->|"reads packages"| node_store
node_hajid -->|"reads packages"| node_store
node_paketcatalog -->|"reads packages"| node_store
node_paketdetail -->|"reads packages"| node_store
node_store -->|"loads fallback"| node_defaultdata
node_store -->|"reads or writes"| node_supabaseserver
node_supabaseserver -.->|"queries data"| node_supabase
node_store -->|"reads or writes"| node_localfiles
node_umrohd -->|"builds inquiry link"| node_contact
node_hajid -->|"builds inquiry link"| node_contact
node_contact -->|"opens chat"| node_whatsapp
node_adminactor -->|"opens admin"| node_adminpage
node_adminpage -->|"renders"| node_dashboard
node_dashboard -->|"creates client"| node_supabasebrowser
node_dashboard -->|"uses uploader"| node_media
node_dashboard -->|"loads or saves"| node_cmsapi
node_cmsapi -->|"reads or writes"| node_store
node_cmsapi -->|"resets from seed"| node_defaultdata
node_supabasebrowser -.->|"auth and media"| node_supabase
node_layout -->|"reads company data"| node_store
node_home -.->|"uses seed content"| node_packagedata

click node_home "https://github.com/vhaenzz/umroh/blob/main/src/app/page.tsx"
click node_umroh "https://github.com/vhaenzz/umroh/blob/main/src/app/umroh/page.tsx"
click node_haji "https://github.com/vhaenzz/umroh/blob/main/src/app/haji/page.tsx"
click node_packagecatalog "https://github.com/vhaenzz/umroh/blob/main/src/components/PackageCatalogView.tsx"
click node_umrohd "https://github.com/vhaenzz/umroh/blob/main/src/app/umroh/%5Bslug%5D/page.tsx"
click node_hajid "https://github.com/vhaenzz/umroh/blob/main/src/app/haji/%5Bslug%5D/page.tsx"
click node_paketcatalog "https://github.com/vhaenzz/umroh/blob/main/src/app/paket/page.tsx"
click node_paketdetail "https://github.com/vhaenzz/umroh/blob/main/src/app/paket/%5Bslug%5D/page.tsx"
click node_sitepages "https://github.com/vhaenzz/umroh/blob/main/src/components/SiteContentPages.tsx"
click node_layout "https://github.com/vhaenzz/umroh/blob/main/src/app/layout.tsx"
click node_contact "https://github.com/vhaenzz/umroh/blob/main/src/lib/contact.ts"
click node_packagedata "https://github.com/vhaenzz/umroh/blob/main/src/data/packages.ts"
click node_types "https://github.com/vhaenzz/umroh/blob/main/src/types/package.ts"
click node_adminpage "https://github.com/vhaenzz/umroh/blob/main/src/app/admin/page.tsx"
click node_dashboard "https://github.com/vhaenzz/umroh/blob/main/src/components/CmsDashboard.tsx"
click node_media "https://github.com/vhaenzz/umroh/blob/main/src/components/CmsMediaUpload.tsx"
click node_cmsapi "https://github.com/vhaenzz/umroh/blob/main/src/app/api/cms/route.ts"
click node_defaultdata "https://github.com/vhaenzz/umroh/blob/main/src/lib/cms/default-data.ts"
click node_store "https://github.com/vhaenzz/umroh/blob/main/src/lib/cms/store.ts"
click node_supabaseserver "https://github.com/vhaenzz/umroh/blob/main/src/lib/supabase/server.ts"
click node_supabasebrowser "https://github.com/vhaenzz/umroh/blob/main/src/lib/supabase/browser.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_home,node_umroh,node_haji,node_packagecatalog,node_umrohd,node_hajid,node_paketcatalog,node_paketdetail,node_sitepages,node_layout toneBlue
class node_contact,node_packagedata,node_types,node_supabase toneAmber
class node_adminpage,node_dashboard,node_media,node_cmsapi toneMint
class node_defaultdata,node_store,node_supabaseserver,node_supabasebrowser,node_localfiles toneRose
class node_visitor,node_whatsapp,node_adminactor toneIndigo
```

## Components

### Public Website

- [Home Page](https://github.com/vhaenzz/umroh/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Umroh Catalog](https://github.com/vhaenzz/umroh/blob/main/src/app/umroh/page.tsx): `src/app/umroh/page.tsx`
- [Haji Catalog](https://github.com/vhaenzz/umroh/blob/main/src/app/haji/page.tsx): `src/app/haji/page.tsx`
- [Package Catalog View](https://github.com/vhaenzz/umroh/blob/main/src/components/PackageCatalogView.tsx): `src/components/PackageCatalogView.tsx`
- [Umroh Details](https://github.com/vhaenzz/umroh/blob/main/src/app/umroh/%5Bslug%5D/page.tsx): `src/app/umroh/[slug]/page.tsx`
- [Haji Details](https://github.com/vhaenzz/umroh/blob/main/src/app/haji/%5Bslug%5D/page.tsx): `src/app/haji/[slug]/page.tsx`
- [General Packages](https://github.com/vhaenzz/umroh/blob/main/src/app/paket/page.tsx): `src/app/paket/page.tsx`
- [Package Details](https://github.com/vhaenzz/umroh/blob/main/src/app/paket/%5Bslug%5D/page.tsx): `src/app/paket/[slug]/page.tsx`
- [Company and Info Pages](https://github.com/vhaenzz/umroh/blob/main/src/components/SiteContentPages.tsx): `src/components/SiteContentPages.tsx`
- [Shared Site Layout](https://github.com/vhaenzz/umroh/blob/main/src/app/layout.tsx): `src/app/layout.tsx`

### Packages and Content

- [Contact Link Builder](https://github.com/vhaenzz/umroh/blob/main/src/lib/contact.ts): `src/lib/contact.ts`
- [Package Seed Data](https://github.com/vhaenzz/umroh/blob/main/src/data/packages.ts): `src/data/packages.ts`
- [Package Types](https://github.com/vhaenzz/umroh/blob/main/src/types/package.ts): `src/types/package.ts`

### CMS Administration

- [Admin Page](https://github.com/vhaenzz/umroh/blob/main/src/app/admin/page.tsx): `src/app/admin/page.tsx`
- [CMS Dashboard](https://github.com/vhaenzz/umroh/blob/main/src/components/CmsDashboard.tsx): `src/components/CmsDashboard.tsx`
- [Media Upload](https://github.com/vhaenzz/umroh/blob/main/src/components/CmsMediaUpload.tsx): `src/components/CmsMediaUpload.tsx`
- [CMS API](https://github.com/vhaenzz/umroh/blob/main/src/app/api/cms/route.ts): `src/app/api/cms/route.ts`

### Content Persistence

- [Default Site Data](https://github.com/vhaenzz/umroh/blob/main/src/lib/cms/default-data.ts): `src/lib/cms/default-data.ts`
- [CMS Data Store](https://github.com/vhaenzz/umroh/blob/main/src/lib/cms/store.ts): `src/lib/cms/store.ts`
- [Supabase Server Access](https://github.com/vhaenzz/umroh/blob/main/src/lib/supabase/server.ts): `src/lib/supabase/server.ts`
- [Supabase Browser Access](https://github.com/vhaenzz/umroh/blob/main/src/lib/supabase/browser.ts): `src/lib/supabase/browser.ts`
- **Local CMS Storage**

### Other components

- **Visitor**
- **WhatsApp Contact**
- **CMS Editor**
- **Supabase**

## Connections

- Visitor → Home Page: opens site
- Visitor → Umroh Catalog: browses
- Visitor → Haji Catalog: browses
- Visitor → General Packages: browses
- Umroh Catalog → Package Catalog View: renders
- Haji Catalog → Package Catalog View: renders
- Umroh Catalog → CMS Data Store: reads packages
- Haji Catalog → CMS Data Store: reads packages
- Umroh Details → CMS Data Store: reads packages
- Haji Details → CMS Data Store: reads packages
- General Packages → CMS Data Store: reads packages
- Package Details → CMS Data Store: reads packages
- CMS Data Store → Default Site Data: loads fallback
- CMS Data Store → Supabase Server Access: reads or writes
- Supabase Server Access → Supabase: queries data
- CMS Data Store → Local CMS Storage: reads or writes
- Umroh Details → Contact Link Builder: builds inquiry link
- Haji Details → Contact Link Builder: builds inquiry link
- Contact Link Builder → WhatsApp Contact: opens chat
- CMS Editor → Admin Page: opens admin
- Admin Page → CMS Dashboard: renders
- CMS Dashboard → Supabase Browser Access: creates client
- CMS Dashboard → Media Upload: uses uploader
- CMS Dashboard → CMS API: loads or saves
- CMS API → CMS Data Store: reads or writes
- CMS API → Default Site Data: resets from seed
- Supabase Browser Access → Supabase: auth and media
- Shared Site Layout → CMS Data Store: reads company data
- Home Page → Package Seed Data: uses seed content