Dokumentasi

Diagram arsitektur ini dibuat dari struktur kode saat ini (App Router, route handlers API, auth, SQLite, data statis, dan halaman admin DB).

Architecture Pillar Status

Tabel ini dievaluasi saat pre-commit lewat bun run architecture:check.

StrongFully implemented

WeakPartially implemented

MissingNot implemented

Pillar	Description	Status
Code Quality	Linting and static type safety are green.	Weak
Reliability	Automated tests are passing for core behavior.	Strong
Routing & Docs Integrity	Routing and documentation signals stay verifiable.	Weak
Data/Auth Boundaries	Data and auth boundaries remain protected by tests/types.	Weak
Maintainability	Codebase remains maintainable (dead code and duplication).	Weak

Last evaluated: 20 Feb 2026, 03.18 (overall: Weak)

Architecture V1

→Depends on / calls

Entry point

Client

API

Server

Data

Rendering architecture diagram...

Mermaid Source V1


%%{init: {
  "flowchart": {
    "curve": "basis",
    "nodeSpacing": 20,
    "rankSpacing": 35,
    "padding": 5,
    "subgraphTitleGap": 8
  },
  "themeVariables": {
    "fontSize": "13px",
    "fontFamily": "ui-sans-serif, system-ui, sans-serif",
    "clusterBkg": "rgba(0,0,0,0.03)",
    "clusterBorder": "#d4d4d8"
  }
}}%%
flowchart TB
  U["Browser"] --> APP["Next.js App"]

  subgraph CLIENT["Client"]
    AUTH_CLIENT["auth-client"]
    SETTINGS_HOOK["SettingsProvider"]
    DB_ADMIN_UI["DB Admin"]
    SEARCH_MODULE["Search"]
    EDITOR_UI["Math Editor"]
  end

  APP --> AUTH_CLIENT & SETTINGS_HOOK & SEARCH_MODULE & EDITOR_UI & DB_ADMIN_UI

  subgraph API["API Routes"]
    API_AUTH["/api/auth"]
    API_SETTINGS["/api/settings"]
    API_SESSIONS["/api/sessions"]
    API_SQLITE["/api/sqlite"]
  end

  AUTH_CLIENT --> API_AUTH
  SETTINGS_HOOK --> API_SETTINGS
  APP --> API_SESSIONS
  DB_ADMIN_UI --> API_SQLITE

  subgraph SERVER["Server Auth"]
    AUTH_CORE["better-auth"]
  end

  API_AUTH --> AUTH_CORE
  API_SETTINGS --> AUTH_CORE

  subgraph DATA["Data"]
    SQLITE["SQLite"]
    STATIC_DATA["Static Data"]
    OAUTH_GH["GitHub OAuth"]
    OAUTH_GOOGLE["Google OAuth"]
  end

  AUTH_CORE --> SQLITE & OAUTH_GH & OAUTH_GOOGLE
  API_SETTINGS & API_SESSIONS & API_SQLITE --> SQLITE
  SEARCH_MODULE --> STATIC_DATA
  APP --> STATIC_DATA

  classDef edge fill:#eff6ff,stroke:#2563eb,stroke-width:1px,color:#1e3a8a;
  classDef client fill:#f0fdf4,stroke:#16a34a,stroke-width:1px,color:#14532d;
  classDef api fill:#fff7ed,stroke:#ea580c,stroke-width:1px,color:#7c2d12;
  classDef server fill:#f5f3ff,stroke:#7c3aed,stroke-width:1px,color:#4c1d95;
  classDef data fill:#fef2f2,stroke:#dc2626,stroke-width:1px,color:#7f1d1d;

  class U,APP edge;
  class AUTH_CLIENT,SETTINGS_HOOK,DB_ADMIN_UI,SEARCH_MODULE,EDITOR_UI client;
  class API_AUTH,API_SETTINGS,API_SESSIONS,API_SQLITE api;
  class AUTH_CORE server;
  class SQLITE,STATIC_DATA,OAUTH_GH,OAUTH_GOOGLE data;

Architecture V2 (with Calendar)

→Depends on / calls

Entry point

Client

API

Server

Data

Rendering architecture diagram...

Mermaid Source V2


%%{init: {
  "flowchart": {
    "curve": "basis",
    "nodeSpacing": 20,
    "rankSpacing": 35,
    "padding": 5,
    "subgraphTitleGap": 8
  },
  "themeVariables": {
    "fontSize": "13px",
    "fontFamily": "ui-sans-serif, system-ui, sans-serif",
    "clusterBkg": "rgba(0,0,0,0.03)",
    "clusterBorder": "#d4d4d8"
  }
}}%%
flowchart TB
  U["Browser"] --> APP["Next.js App"]

  subgraph CLIENT["Client"]
    AUTH_CLIENT["auth-client"]
    SETTINGS_HOOK["SettingsProvider"]
    DB_ADMIN_UI["DB Admin"]
    SEARCH_MODULE["Search"]
    EDITOR_UI["Math Editor"]
    CALENDAR_UI["Calendar"]
  end

  APP --> AUTH_CLIENT & SETTINGS_HOOK & SEARCH_MODULE & EDITOR_UI & DB_ADMIN_UI & CALENDAR_UI

  subgraph API["API Routes"]
    API_AUTH["/api/auth"]
    API_SETTINGS["/api/settings"]
    API_SESSIONS["/api/sessions"]
    API_SQLITE["/api/sqlite"]
    API_CALENDAR["/api/calendar"]
  end

  AUTH_CLIENT --> API_AUTH
  SETTINGS_HOOK --> API_SETTINGS
  APP --> API_SESSIONS
  DB_ADMIN_UI --> API_SQLITE
  CALENDAR_UI --> API_CALENDAR

  subgraph SERVER["Server Auth"]
    AUTH_CORE["better-auth"]
  end

  API_AUTH --> AUTH_CORE
  API_SETTINGS --> AUTH_CORE
  API_CALENDAR --> AUTH_CORE

  subgraph DATA["Data"]
    SQLITE["SQLite"]
    STATIC_DATA["Static Data"]
    OAUTH_GH["GitHub OAuth"]
    OAUTH_GOOGLE["Google OAuth"]
    CAL_TABLES["Calendar Tables"]
  end

  AUTH_CORE --> SQLITE & OAUTH_GH & OAUTH_GOOGLE
  API_SETTINGS & API_SESSIONS & API_SQLITE --> SQLITE
  SEARCH_MODULE --> STATIC_DATA
  APP --> STATIC_DATA
  API_CALENDAR --> CAL_TABLES --> SQLITE

  classDef edge fill:#eff6ff,stroke:#2563eb,stroke-width:1px,color:#1e3a8a;
  classDef client fill:#f0fdf4,stroke:#16a34a,stroke-width:1px,color:#14532d;
  classDef api fill:#fff7ed,stroke:#ea580c,stroke-width:1px,color:#7c2d12;
  classDef server fill:#f5f3ff,stroke:#7c3aed,stroke-width:1px,color:#4c1d95;
  classDef data fill:#fef2f2,stroke:#dc2626,stroke-width:1px,color:#7f1d1d;

  class U,APP edge;
  class AUTH_CLIENT,SETTINGS_HOOK,DB_ADMIN_UI,SEARCH_MODULE,EDITOR_UI,CALENDAR_UI client;
  class API_AUTH,API_SETTINGS,API_SESSIONS,API_SQLITE,API_CALENDAR api;
  class AUTH_CORE server;
  class SQLITE,STATIC_DATA,OAUTH_GH,OAUTH_GOOGLE,CAL_TABLES data;

Information Flow (Input - Process - Output/Storage)

Input source

Client/UI

API route

Server/business logic

Database storage

Output

-.->Placeholder / not persisted yet

Rendering architecture diagram...

Mermaid Source Information Flow


flowchart TB
  subgraph INPUT["Input Sources"]
    IN_EMAIL["Email + password input"]
    IN_OAUTH["OAuth button click"]
    IN_PROFILE["Open profile page"]
    IN_SETTINGS["Toggle preference switch"]
    IN_CALENDAR["Create/update/delete calendar event"]
    IN_DB_ADMIN["Admin CRUD form input"]
    IN_BIMBEL["Bimbel order form input"]
  end

  subgraph CLIENT["Client / UI"]
    UI_LOGIN["/login page + authClient"]
    UI_PROFILE["/profil page"]
    UI_SETTINGS["SettingsProvider hook"]
    UI_CALENDAR["CalendarApp"]
    UI_DB_ADMIN["/x7k9m2p-db-admin page"]
    UI_BIMBEL["/bimbel/pesan page"]
  end

  subgraph API["API Routes"]
    API_AUTH["/api/auth/[...all]"]
    API_SESSIONS["/api/sessions"]
    API_SETTINGS["/api/settings"]
    API_CAL_EVENTS["/api/calendar/events + /api/calendar/events/[id]"]
    API_CAL_PREFS["/api/calendar/preferences"]
    API_CAL_DUE["/api/calendar/reminders/due"]
    API_SQLITE["/api/sqlite"]
  end

  subgraph SERVER["Business / Server Utils"]
    SVC_AUTH["better-auth core"]
    SVC_CURRENT_USER["getCurrentUser()"]
    SVC_AUTHZ["isDbAdminUser()"]
    SVC_SETTINGS["settings read/write logic"]
    SVC_CAL_DB["calendar-db access layer"]
    SVC_CAL_DOMAIN["calendar domain utils (recurrence/conflicts/reminders)"]
    SVC_SQLITE["sqlite admin CRUD handler"]
    SVC_BIMBEL["handleOrder() / handleCariGuru() server actions"]
  end

  subgraph STORAGE["Storage (SQLite Tables)"]
    T_USER["user"]
    T_SESSION["session"]
    T_ACCOUNT["account"]
    T_VERIFICATION["verification"]
    T_USER_SETTINGS["user_settings"]
    T_CAL_EVENTS["calendar_events"]
    T_CAL_RECURRENCE["calendar_event_recurrence"]
    T_CAL_REMINDERS["calendar_event_reminders"]
    T_CAL_PREFS["calendar_user_prefs"]
  end

  subgraph OUTPUT["Outputs"]
    OUT_AUTH["Session cookie + authenticated state"]
    OUT_PROFILE["Login history JSON -> profile table"]
    OUT_SETTINGS["Persisted UI toggles"]
    OUT_CALENDAR["Calendar occurrences/conflicts/reminders"]
    OUT_DB_ADMIN["Table rows + CRUD status"]
    OUT_BIMBEL["Order flow result (placeholder)"]
  end

  IN_EMAIL --> UI_LOGIN
  IN_OAUTH --> UI_LOGIN
  UI_LOGIN -- "sign in/up" --> API_AUTH
  API_AUTH --> SVC_AUTH
  SVC_AUTH -- "read/write" --> T_USER
  SVC_AUTH -- "read/write" --> T_SESSION
  SVC_AUTH -- "read/write" --> T_ACCOUNT
  SVC_AUTH -- "read/write" --> T_VERIFICATION
  SVC_AUTH --> OUT_AUTH

  IN_PROFILE --> UI_PROFILE
  UI_PROFILE -- "fetch sessions" --> API_SESSIONS
  API_SESSIONS --> SVC_CURRENT_USER
  API_SESSIONS -- "read latest 10" --> T_SESSION
  API_SESSIONS --> OUT_PROFILE

  IN_SETTINGS --> UI_SETTINGS
  UI_SETTINGS -- "GET / PUT" --> API_SETTINGS
  API_SETTINGS --> SVC_CURRENT_USER
  API_SETTINGS --> SVC_SETTINGS
  SVC_SETTINGS -- "read/write" --> T_USER_SETTINGS
  SVC_SETTINGS --> OUT_SETTINGS

  IN_CALENDAR --> UI_CALENDAR
  UI_CALENDAR -- "events CRUD" --> API_CAL_EVENTS
  UI_CALENDAR -- "preferences GET/PATCH" --> API_CAL_PREFS
  UI_CALENDAR -- "poll due reminders" --> API_CAL_DUE
  API_CAL_EVENTS --> SVC_CURRENT_USER
  API_CAL_PREFS --> SVC_CURRENT_USER
  API_CAL_DUE --> SVC_CURRENT_USER
  API_CAL_EVENTS --> SVC_CAL_DB
  API_CAL_PREFS --> SVC_CAL_DB
  API_CAL_DUE --> SVC_CAL_DB
  API_CAL_EVENTS --> SVC_CAL_DOMAIN
  API_CAL_DUE --> SVC_CAL_DOMAIN
  SVC_CAL_DB -- "read/write" --> T_CAL_EVENTS
  SVC_CAL_DB -- "read/write" --> T_CAL_RECURRENCE
  SVC_CAL_DB -- "read/write" --> T_CAL_REMINDERS
  SVC_CAL_DB -- "read/write" --> T_CAL_PREFS
  SVC_CAL_DOMAIN --> OUT_CALENDAR
  SVC_CAL_DB --> OUT_CALENDAR

  IN_DB_ADMIN --> UI_DB_ADMIN
  UI_DB_ADMIN -- "CRUD requests" --> API_SQLITE
  API_SQLITE --> SVC_CURRENT_USER
  API_SQLITE --> SVC_AUTHZ
  API_SQLITE --> SVC_SQLITE
  SVC_SQLITE -- "allowlisted read/write" --> T_USER
  SVC_SQLITE -- "allowlisted read/write" --> T_SESSION
  SVC_SQLITE -- "allowlisted read/write" --> T_ACCOUNT
  SVC_SQLITE -- "allowlisted read/write" --> T_VERIFICATION
  SVC_SQLITE -- "allowlisted read/write" --> T_USER_SETTINGS
  SVC_SQLITE -- "allowlisted read/write" --> T_CAL_EVENTS
  SVC_SQLITE -- "allowlisted read/write" --> T_CAL_RECURRENCE
  SVC_SQLITE -- "allowlisted read/write" --> T_CAL_REMINDERS
  SVC_SQLITE -- "allowlisted read/write" --> T_CAL_PREFS
  SVC_SQLITE --> OUT_DB_ADMIN

  IN_BIMBEL --> UI_BIMBEL
  UI_BIMBEL -. "server action submit" .-> SVC_BIMBEL
  SVC_BIMBEL -. "no DB write yet" .-> OUT_BIMBEL

  classDef input fill:#ecfeff,stroke:#0f766e,stroke-width:1px,color:#134e4a;
  classDef client fill:#f0fdf4,stroke:#16a34a,stroke-width:1px,color:#14532d;
  classDef api fill:#fff7ed,stroke:#ea580c,stroke-width:1px,color:#7c2d12;
  classDef server fill:#f5f3ff,stroke:#7c3aed,stroke-width:1px,color:#4c1d95;
  classDef data fill:#fef2f2,stroke:#dc2626,stroke-width:1px,color:#7f1d1d;
  classDef output fill:#eff6ff,stroke:#2563eb,stroke-width:1px,color:#1e3a8a;

  class IN_EMAIL,IN_OAUTH,IN_PROFILE,IN_SETTINGS,IN_CALENDAR,IN_DB_ADMIN,IN_BIMBEL input;
  class UI_LOGIN,UI_PROFILE,UI_SETTINGS,UI_CALENDAR,UI_DB_ADMIN,UI_BIMBEL client;
  class API_AUTH,API_SESSIONS,API_SETTINGS,API_CAL_EVENTS,API_CAL_PREFS,API_CAL_DUE,API_SQLITE api;
  class SVC_AUTH,SVC_CURRENT_USER,SVC_AUTHZ,SVC_SETTINGS,SVC_CAL_DB,SVC_CAL_DOMAIN,SVC_SQLITE,SVC_BIMBEL server;
  class T_USER,T_SESSION,T_ACCOUNT,T_VERIFICATION,T_USER_SETTINGS,T_CAL_EVENTS,T_CAL_RECURRENCE,T_CAL_REMINDERS,T_CAL_PREFS data;
  class OUT_AUTH,OUT_PROFILE,OUT_SETTINGS,OUT_CALENDAR,OUT_DB_ADMIN,OUT_BIMBEL output;

All Available Routes

→Parent-child route hierarchy

Page routes

API routes

Rendering architecture diagram...

Mermaid Source All Routes


%%{init: {
  "flowchart": {
    "curve": "basis",
    "nodeSpacing": 20,
    "rankSpacing": 35,
    "padding": 5,
    "subgraphTitleGap": 8
  },
  "themeVariables": {
    "fontSize": "13px",
    "fontFamily": "ui-sans-serif, system-ui, sans-serif",
    "clusterBkg": "rgba(0,0,0,0.03)",
    "clusterBorder": "#d4d4d8"
  }
}}%%
flowchart TB
  subgraph PAGES_CLUSTER["Pages"]
    PAGES_ROOT["Pages"]
    PAGE_0["/"]
    PAGE_1["/analisis"]
    PAGE_2["/bimbel"]
    PAGE_3["/dokumentasi"]
    PAGE_4["/editor"]
    PAGE_5["/harga"]
    PAGE_6["/kalkulator"]
    PAGE_7["/kebijakan-privasi"]
    PAGE_8["/ketentuan-penggunaan"]
    PAGE_9["/login"]
    PAGE_10["/math-parsing"]
    PAGE_11["/pencarian"]
    PAGE_12["/peta-situs"]
    PAGE_13["/profil"]
    PAGE_14["/referensi"]
    PAGE_15["/rilis"]
    PAGE_16["/statistik"]
    PAGE_17["/status"]
    PAGE_18["/tes"]
    PAGE_19["/x7k9m2p-db-admin"]
    PAGE_20["/analisis/analisis-baru"]
    PAGE_21["/analisis/daftar-analisis"]
    PAGE_22["/bimbel/akan-datang"]
    PAGE_23["/bimbel/kalender"]
    PAGE_24["/bimbel/pesan"]
    PAGE_25["/bimbel/riwayat-pembayaran"]
    PAGE_26["/bimbel/riwayat-pertemuan"]
    PAGE_27["/referensi/fisika"]
    PAGE_28["/referensi/markah"]
    PAGE_29["/referensi/matematika"]
    PAGE_30["/tes/buat-tes"]
    PAGE_31["/tes/flashcard"]
    PAGE_32["/tes/mini-tes"]
    PAGE_33["/referensi/fisika/fluida"]
    PAGE_34["/referensi/fisika/fluida/fluida-statis"]
    PAGE_35["/referensi/fisika/fluida/fluida-statis/hukum-archimedes"]
  end
  subgraph API_CLUSTER["API Routes"]
    API_ROOT["API Routes"]
    API_0["/api/sessions"]
    API_1["/api/settings"]
    API_2["/api/sqlite"]
    API_3["/api/auth/[...all]"]
    API_4["/api/calendar/events"]
    API_5["/api/calendar/preferences"]
    API_6["/api/calendar/events/[id]"]
    API_7["/api/calendar/reminders/due"]
  end
  PAGE_0 --> PAGE_0
  PAGE_0 --> PAGE_1
  PAGE_0 --> PAGE_2
  PAGE_0 --> PAGE_3
  PAGE_0 --> PAGE_4
  PAGE_0 --> PAGE_5
  PAGE_0 --> PAGE_6
  PAGE_0 --> PAGE_7
  PAGE_0 --> PAGE_8
  PAGE_0 --> PAGE_9
  PAGE_0 --> PAGE_10
  PAGE_0 --> PAGE_11
  PAGE_0 --> PAGE_12
  PAGE_0 --> PAGE_13
  PAGE_0 --> PAGE_14
  PAGE_0 --> PAGE_15
  PAGE_0 --> PAGE_16
  PAGE_0 --> PAGE_17
  PAGE_0 --> PAGE_18
  PAGE_0 --> PAGE_19
  PAGE_1 --> PAGE_20
  PAGE_1 --> PAGE_21
  PAGE_2 --> PAGE_22
  PAGE_2 --> PAGE_23
  PAGE_2 --> PAGE_24
  PAGE_2 --> PAGE_25
  PAGE_2 --> PAGE_26
  PAGE_14 --> PAGE_27
  PAGE_14 --> PAGE_28
  PAGE_14 --> PAGE_29
  PAGE_18 --> PAGE_30
  PAGE_18 --> PAGE_31
  PAGE_18 --> PAGE_32
  PAGE_27 --> PAGE_33
  PAGE_33 --> PAGE_34
  PAGE_34 --> PAGE_35
  API_ROOT --> API_0
  API_ROOT --> API_1
  API_ROOT --> API_2
  API_ROOT --> API_3
  API_ROOT --> API_4
  API_ROOT --> API_5
  API_4 --> API_6
  API_ROOT --> API_7
  class PAGE_0,PAGE_1,PAGE_2,PAGE_3,PAGE_4,PAGE_5,PAGE_6,PAGE_7,PAGE_8,PAGE_9,PAGE_10,PAGE_11,PAGE_12,PAGE_13,PAGE_14,PAGE_15,PAGE_16,PAGE_17,PAGE_18,PAGE_19,PAGE_20,PAGE_21,PAGE_22,PAGE_23,PAGE_24,PAGE_25,PAGE_26,PAGE_27,PAGE_28,PAGE_29,PAGE_30,PAGE_31,PAGE_32,PAGE_33,PAGE_34,PAGE_35 pageRoute;
  class API_0,API_1,API_2,API_3,API_4,API_5,API_6,API_7 apiRoute;
  class PAGES_ROOT,API_ROOT bucket;
  classDef pageRoute fill:#eff6ff,stroke:#2563eb,stroke-width:1px,color:#1e3a8a;
  classDef apiRoute fill:#fff7ed,stroke:#ea580c,stroke-width:1px,color:#7c2d12;
  classDef bucket fill:#f4f4f5,stroke:#a1a1aa,stroke-width:1px,color:#3f3f46;

Package Dependencies

→Depends on

Root

Framework

Editor

Auth/DB

Viz

Rendering architecture diagram...

Mermaid Source Dependencies


%%{init: {
  "flowchart": {
    "curve": "basis",
    "nodeSpacing": 20,
    "rankSpacing": 35,
    "padding": 5,
    "subgraphTitleGap": 8
  },
  "themeVariables": {
    "fontSize": "13px",
    "fontFamily": "ui-sans-serif, system-ui, sans-serif",
    "clusterBkg": "rgba(0,0,0,0.03)",
    "clusterBorder": "#d4d4d8"
  }
}}%%
flowchart TB
  HARISLAB["harislab"]

  subgraph FRAMEWORK["FW"]
    NEXT["next"] --> REACT["react"] --> REACT_DOM["react-dom"]
  end

  subgraph UI["UI"]
    subgraph UI_R["Radix"]
      R_ACC["accordion"]
      R_SW["switch"]
      R_TAB["tabs"]
      R_TIP["tooltip"]
    end
    subgraph UI_C["CSS"]
      TW["tailwindcss"]
      TWR["tw-radix"]
      CS["corner-shape"]
    end
    subgraph UI_O["More"]
      BU["base-ui"]
      HI["heroicons"]
      WB["wrap-balancer"]
    end
    UI_R --> UI_C --> UI_O
  end

  subgraph EDITOR["Editor"]
    LEX["lexical"]
    LEX_R["lexical-react"]
    LEX_RT["lexical-rich"]
    KATEX["katex"]
  end

  subgraph AUTH_DB["Auth/DB"]
    AUTH["better-auth"]
    SQLITE["sqlite3"]
    ZOD["zod"]
  end

  subgraph VIZ["Viz"]
    MERM["mermaid"]
  end

  HARISLAB --> NEXT
  HARISLAB --> TW & TWR & CS & R_ACC & R_SW & R_TAB & R_TIP & BU & HI & WB
  HARISLAB --> LEX & LEX_R & LEX_RT & KATEX
  HARISLAB --> AUTH & SQLITE & ZOD
  HARISLAB --> MERM

  R_ACC & R_SW & R_TAB & R_TIP & BU & HI & WB --> REACT
  LEX_R --> LEX & REACT
  LEX_RT --> LEX
  KATEX --> REACT
  AUTH --> ZOD & SQLITE
  MERM --> REACT

  classDef root fill:#eff6ff,stroke:#2563eb,stroke-width:2px,color:#1e3a8a;
  classDef framework fill:#f0fdf4,stroke:#16a34a,stroke-width:1px,color:#14532d;
  classDef ui fill:#fff7ed,stroke:#ea580c,stroke-width:1px,color:#7c2d12;
  classDef editor fill:#f5f3ff,stroke:#7c3aed,stroke-width:1px,color:#4c1d95;
  classDef auth fill:#fef2f2,stroke:#dc2626,stroke-width:1px,color:#7f1d1d;
  classDef viz fill:#ecfdf5,stroke:#059669,stroke-width:1px,color:#065f46;

  class HARISLAB root;
  class NEXT,REACT,REACT_DOM framework;
  class TW,TWR,CS,R_ACC,R_SW,R_TAB,R_TIP,BU,HI,WB ui;
  class LEX,LEX_R,LEX_RT,KATEX editor;
  class AUTH,SQLITE,ZOD auth;
  class MERM viz;

Memuat...