# xygritte/miftahul-mubin architecture

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

- Interactive diagram: https://gitdiagram.com/xygritte/miftahul-mubin
- Repository: https://github.com/xygritte/miftahul-mubin

## Overview

Miftahul Mubin is a mosque information portal paired with an administrative console. The main public workflow is visitors opening a content route, live components loading and presenting repository data, and the Supabase-backed repository returning records for display. The admin workflow manages content and operational records through protected modules and Supabase. The README documents additional public domains and live refresh behavior; sampled source confirms repository and storage interactions, but not every route’s wiring.

Main entry points: [`lib/supabase/client.ts`](https://github.com/xygritte/miftahul-mubin/blob/main/lib/supabase/client.ts) (Supabase Client), [`components/live/useLiveContent.ts`](https://github.com/xygritte/miftahul-mubin/blob/main/components/live/useLiveContent.ts) (Live Content), [`lib/supabase/storage.ts`](https://github.com/xygritte/miftahul-mubin/blob/main/lib/supabase/storage.ts) (Storage Operations), [`app/page.tsx`](https://github.com/xygritte/miftahul-mubin/blob/main/app/page.tsx) (Public Routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public Portal"]
  node_public_routes["Public Routes<br/>[page.tsx]"]
  node_news_views["News Views<br/>[page.tsx]"]
  node_islamic_views["Islamic Views<br/>[page.tsx]"]
  node_event_views["Event Views<br/>[page.tsx]"]
  node_announcement_views["Announcements<br/>[page.tsx]"]
  node_management_views["Management Views<br/>[page.tsx]"]
  node_finance_views["Finance Views<br/>[page.tsx]"]
  node_documentation_views["Documentation<br/>[page.tsx]"]
  node_site_info_views["Profile and Contact<br/>[page.tsx]"]
  node_site_shell["Global Navigation<br/>[Header.tsx]"]
  node_live_content["Live Content<br/>[useLiveContent.ts]"]
end

subgraph group_admin["Admin Console"]
  node_admin_login["Admin Login<br/>[page.tsx]"]
  node_admin_guard["Protected Area<br/>[AdminAuthGuard.tsx]"]
  node_admin_content["Content Managers"]
  node_admin_management["Management Editor"]
  node_admin_documentation["Documentation Editor"]
  node_admin_finance["Finance Editor"]
  node_admin_storage["Storage Manager"]
end

subgraph group_data["Data Access"]
  node_presentation["Presentation Adapters<br/>[presentation.ts]"]
  node_repository_contract["Repository Contract<br/>[repository.ts]"]
  node_public_repository["Public Repository"]
end

subgraph group_integrations["External Services"]
  node_supabase_client["Supabase Client<br/>[client.ts]"]
  node_storage_helpers["Storage Operations<br/>[storage.ts]"]
  node_supabase_service[("Supabase")]
end

node_visitor(("Visitor"))
node_admin_actor(("Administrator"))

node_visitor -->|"opens"| node_public_routes
node_public_routes -->|"renders live modules"| node_live_content
node_news_views -->|"renders live modules"| node_live_content
node_islamic_views -->|"renders live modules"| node_live_content
node_event_views -->|"renders live modules"| node_live_content
node_announcement_views -->|"renders live modules"| node_live_content
node_management_views -->|"renders live modules"| node_live_content
node_finance_views -->|"renders live modules"| node_live_content
node_documentation_views -->|"renders live modules"| node_live_content
node_site_info_views -->|"renders live modules"| node_live_content
node_public_routes -->|"uses navigation"| node_site_shell
node_live_content -->|"requests content"| node_repository_contract
node_repository_contract -->|"implemented by"| node_public_repository
node_public_repository -->|"queries records"| node_supabase_client
node_public_repository -->|"adapts records"| node_presentation
node_supabase_client -->|"reads data"| node_supabase_service
node_admin_actor -->|"signs in"| node_admin_login
node_admin_login -->|"authenticates"| node_supabase_client
node_admin_actor -->|"opens protected area"| node_admin_guard
node_admin_guard -->|"checks session"| node_supabase_client
node_admin_content -->|"manages records"| node_supabase_client
node_admin_management -->|"manages periods and members"| node_supabase_client
node_admin_documentation -->|"manages albums and media"| node_supabase_client
node_admin_finance -->|"manages finance records"| node_supabase_client
node_admin_storage -->|"checks roles and files"| node_supabase_client
node_admin_storage -->|"uploads and removes files"| node_storage_helpers
node_admin_management -->|"uploads member photos"| node_storage_helpers
node_admin_documentation -->|"uploads media"| node_storage_helpers
node_admin_finance -->|"uploads proof files"| node_storage_helpers
node_storage_helpers -->|"operates on buckets"| node_supabase_client
node_supabase_client -->|"sends requests"| node_supabase_service

click node_public_routes "https://github.com/xygritte/miftahul-mubin/blob/main/app/page.tsx"
click node_news_views "https://github.com/xygritte/miftahul-mubin/blob/main/app/berita/page.tsx"
click node_islamic_views "https://github.com/xygritte/miftahul-mubin/blob/main/app/keislaman/page.tsx"
click node_event_views "https://github.com/xygritte/miftahul-mubin/blob/main/app/kegiatan/page.tsx"
click node_announcement_views "https://github.com/xygritte/miftahul-mubin/blob/main/app/pengumuman/page.tsx"
click node_management_views "https://github.com/xygritte/miftahul-mubin/blob/main/app/kepengurusan/page.tsx"
click node_finance_views "https://github.com/xygritte/miftahul-mubin/blob/main/app/keuangan/page.tsx"
click node_documentation_views "https://github.com/xygritte/miftahul-mubin/blob/main/app/dokumentasi/page.tsx"
click node_site_info_views "https://github.com/xygritte/miftahul-mubin/blob/main/app/profil/page.tsx"
click node_site_shell "https://github.com/xygritte/miftahul-mubin/blob/main/components/layout/Header.tsx"
click node_live_content "https://github.com/xygritte/miftahul-mubin/blob/main/components/live/useLiveContent.ts"
click node_presentation "https://github.com/xygritte/miftahul-mubin/blob/main/lib/data/presentation.ts"
click node_repository_contract "https://github.com/xygritte/miftahul-mubin/blob/main/lib/data/repository.ts"
click node_public_repository "https://github.com/xygritte/miftahul-mubin/blob/main/lib/data/supabasePublicRepository.ts"
click node_admin_login "https://github.com/xygritte/miftahul-mubin/blob/main/app/admin/login/page.tsx"
click node_admin_guard "https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminAuthGuard.tsx"
click node_admin_content "https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminContentManager.tsx"
click node_admin_management "https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminManagementManager.tsx"
click node_admin_documentation "https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminDocumentationManager.tsx"
click node_admin_finance "https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminFinanceManager.tsx"
click node_admin_storage "https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminStorageManager.tsx"
click node_supabase_client "https://github.com/xygritte/miftahul-mubin/blob/main/lib/supabase/client.ts"
click node_storage_helpers "https://github.com/xygritte/miftahul-mubin/blob/main/lib/supabase/storage.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_public_routes,node_news_views,node_islamic_views,node_event_views,node_announcement_views,node_management_views,node_finance_views,node_documentation_views,node_site_info_views,node_site_shell,node_live_content toneBlue
class node_admin_login,node_admin_guard,node_admin_content,node_admin_management,node_admin_documentation,node_admin_finance,node_admin_storage toneAmber
class node_presentation,node_repository_contract,node_public_repository toneMint
class node_supabase_client,node_storage_helpers,node_supabase_service toneRose
class node_visitor,node_admin_actor toneIndigo
```

## Components

### Public Portal

- [Public Routes](https://github.com/xygritte/miftahul-mubin/blob/main/app/page.tsx): `app/page.tsx`
- [News Views](https://github.com/xygritte/miftahul-mubin/blob/main/app/berita/page.tsx): `app/berita/page.tsx`
- [Islamic Views](https://github.com/xygritte/miftahul-mubin/blob/main/app/keislaman/page.tsx): `app/keislaman/page.tsx`
- [Event Views](https://github.com/xygritte/miftahul-mubin/blob/main/app/kegiatan/page.tsx): `app/kegiatan/page.tsx`
- [Announcements](https://github.com/xygritte/miftahul-mubin/blob/main/app/pengumuman/page.tsx): `app/pengumuman/page.tsx`
- [Management Views](https://github.com/xygritte/miftahul-mubin/blob/main/app/kepengurusan/page.tsx): `app/kepengurusan/page.tsx`
- [Finance Views](https://github.com/xygritte/miftahul-mubin/blob/main/app/keuangan/page.tsx): `app/keuangan/page.tsx`
- [Documentation](https://github.com/xygritte/miftahul-mubin/blob/main/app/dokumentasi/page.tsx): `app/dokumentasi/page.tsx`
- [Profile and Contact](https://github.com/xygritte/miftahul-mubin/blob/main/app/profil/page.tsx): `app/profil/page.tsx`
- [Global Navigation](https://github.com/xygritte/miftahul-mubin/blob/main/components/layout/Header.tsx): `components/layout/Header.tsx`
- [Live Content](https://github.com/xygritte/miftahul-mubin/blob/main/components/live/useLiveContent.ts): `components/live/useLiveContent.ts`

### Admin Console

- [Admin Login](https://github.com/xygritte/miftahul-mubin/blob/main/app/admin/login/page.tsx): `app/admin/login/page.tsx`
- [Protected Area](https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminAuthGuard.tsx): `components/admin/AdminAuthGuard.tsx`
- [Content Managers](https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminContentManager.tsx): `components/admin/AdminContentManager.tsx`
- [Management Editor](https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminManagementManager.tsx): `components/admin/AdminManagementManager.tsx`
- [Documentation Editor](https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminDocumentationManager.tsx): `components/admin/AdminDocumentationManager.tsx`
- [Finance Editor](https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminFinanceManager.tsx): `components/admin/AdminFinanceManager.tsx`
- [Storage Manager](https://github.com/xygritte/miftahul-mubin/blob/main/components/admin/AdminStorageManager.tsx): `components/admin/AdminStorageManager.tsx`

### Data Access

- [Presentation Adapters](https://github.com/xygritte/miftahul-mubin/blob/main/lib/data/presentation.ts): `lib/data/presentation.ts`
- [Repository Contract](https://github.com/xygritte/miftahul-mubin/blob/main/lib/data/repository.ts): `lib/data/repository.ts`
- [Public Repository](https://github.com/xygritte/miftahul-mubin/blob/main/lib/data/supabasePublicRepository.ts): `lib/data/supabasePublicRepository.ts`

### External Services

- [Supabase Client](https://github.com/xygritte/miftahul-mubin/blob/main/lib/supabase/client.ts): `lib/supabase/client.ts`
- [Storage Operations](https://github.com/xygritte/miftahul-mubin/blob/main/lib/supabase/storage.ts): `lib/supabase/storage.ts`
- **Supabase**

### Other components

- **Visitor**
- **Administrator**

## Connections

- Visitor → Public Routes: opens
- Public Routes → Live Content: renders live modules
- News Views → Live Content: renders live modules
- Islamic Views → Live Content: renders live modules
- Event Views → Live Content: renders live modules
- Announcements → Live Content: renders live modules
- Management Views → Live Content: renders live modules
- Finance Views → Live Content: renders live modules
- Documentation → Live Content: renders live modules
- Profile and Contact → Live Content: renders live modules
- Public Routes → Global Navigation: uses navigation
- Live Content → Repository Contract: requests content
- Repository Contract → Public Repository: implemented by
- Public Repository → Supabase Client: queries records
- Public Repository → Presentation Adapters: adapts records
- Supabase Client → Supabase: reads data
- Administrator → Admin Login: signs in
- Admin Login → Supabase Client: authenticates
- Administrator → Protected Area: opens protected area
- Protected Area → Supabase Client: checks session
- Content Managers → Supabase Client: manages records
- Management Editor → Supabase Client: manages periods and members
- Documentation Editor → Supabase Client: manages albums and media
- Finance Editor → Supabase Client: manages finance records
- Storage Manager → Supabase Client: checks roles and files
- Storage Manager → Storage Operations: uploads and removes files
- Management Editor → Storage Operations: uploads member photos
- Documentation Editor → Storage Operations: uploads media
- Finance Editor → Storage Operations: uploads proof files
- Storage Operations → Supabase Client: operates on buckets
- Supabase Client → Supabase: sends requests