# fandyajpo/notain architecture

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

- Interactive diagram: https://gitdiagram.com/fandyajpo/notain
- Repository: https://github.com/fandyajpo/notain

## Overview

Notain is an Indonesian SME invoicing product. A user signs in, creates and manages invoices and customers, applies a reusable template, then prints a PDF through the browser; the product also provides finance dashboards, organizations, subscription payments, public sites, and administration. The architecture separates React islands, application use cases, pure domain logic, repository adapters, and Appwrite/R2-backed services. Edges are limited to relationships visible in excerpts, SOURCE INDEX references, or README statements; many unsampled feature internals are represented by their existing directories.

Main entry points: [`src/components/react/invoice`](https://github.com/fandyajpo/notain/tree/main/src/components/react/invoice) (Invoice editor and print), [`src/infra`](https://github.com/fandyajpo/notain/tree/main/src/infra) (Appwrite repositories), [`functions/_lib`](https://github.com/fandyajpo/notain/tree/main/functions/_lib) (Function utilities), [`functions/api`](https://github.com/fandyajpo/notain/tree/main/functions/api) (Pages API functions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User experience"]
  node_invoice_ui["Invoice editor and print"]
  node_customer_ui["Customer directory"]
  node_dashboard_ui["Dashboard"]
  node_auth_ui["Authentication UI"]
  node_template_ui["Template editor"]
  node_product_ui["Other product UI"]
end

subgraph group_application["Application services"]
  node_auth_app["Authentication use cases<br/>[auth.ts]"]
  node_data_api["Data API client<br/>[data-api.ts]"]
  node_container["Repository container<br/>[container.ts]"]
end

subgraph group_domain["Product domain"]
  node_invoice_domain["Invoice model and rules<br/>[model.ts]"]
  node_invoice_calculation["Invoice calculations<br/>[calculator.ts]"]
  node_customer_domain["Customer model<br/>[model.ts]"]
  node_finance_domain["Finance metrics<br/>[finance.ts]"]
  node_template_domain["Template model<br/>[model.ts]"]
  node_billing_domain["Plans and payments"]
end

subgraph group_storage["Persistence and assets"]
  node_appwrite_repos["Appwrite repositories"]
  node_appwrite[("Appwrite Cloud")]
  node_asset_repo["R2 asset adapter"]
  node_r2[("Cloudflare R2")]
end

subgraph group_platform["HTTP and integrations"]
  node_functions["Pages API functions"]
  node_function_lib["Function utilities"]
  node_invoice_shell["Invoice edit shell<br/>[&#91;&#91;id&#93;&#93;.ts]"]
  node_template_shell["Template edit shell<br/>[&#91;&#91;id&#93;&#93;.ts]"]
  node_site_shell["Site edit shell<br/>[&#91;&#91;id&#93;&#93;.ts]"]
end

node_user(("SME user"))
node_doku["DOKU Checkout"]

node_user -->|"signs in"| node_auth_ui
node_auth_ui -->|"calls"| node_auth_app
node_auth_app -->|"uses"| node_container
node_container -->|"registers"| node_appwrite_repos
node_appwrite_repos -.->|"persists data"| node_appwrite
node_user -->|"creates invoices"| node_invoice_ui
node_invoice_ui -->|"uses model"| node_invoice_domain
node_invoice_ui -->|"calculates totals"| node_invoice_calculation
node_invoice_ui -.->|"saves invoices"| node_appwrite_repos
node_appwrite_repos -->|"writes rows"| node_data_api
node_data_api -->|"accesses tables"| node_appwrite
node_invoice_ui -.->|"manages separately"| node_customer_ui
node_customer_ui -.->|"uses model"| node_customer_domain
node_appwrite_repos -->|"maps rows"| node_customer_domain
node_dashboard_ui -.->|"shows metrics"| node_finance_domain
node_appwrite_repos -->|"supplies entries"| node_finance_domain
node_finance_domain -->|"calculates totals"| node_invoice_calculation
node_template_ui -.->|"edits templates"| node_template_domain
node_invoice_ui -->|"renders template"| node_template_domain
node_user -->|"uses features"| node_product_ui
node_product_ui -.->|"views plans"| node_billing_domain
node_billing_domain -.->|"starts checkout"| node_doku
node_functions -->|"uses helpers"| node_function_lib
node_functions -.->|"verifies sessions"| node_appwrite
node_functions -->|"reads and writes logos"| node_r2
node_asset_repo -.->|"stores assets"| node_r2
node_user -->|"opens edit route"| node_invoice_shell
node_invoice_shell -->|"builds shell response"| node_function_lib
node_user -->|"opens edit route"| node_template_shell
node_template_shell -->|"builds shell response"| node_function_lib
node_user -.->|"opens site route"| node_site_shell
node_site_shell -->|"builds shell response"| node_function_lib

click node_invoice_ui "https://github.com/fandyajpo/notain/tree/main/src/components/react/invoice"
click node_customer_ui "https://github.com/fandyajpo/notain/tree/main/src/components/react/customers"
click node_dashboard_ui "https://github.com/fandyajpo/notain/tree/main/src/components/react/dashboard"
click node_auth_ui "https://github.com/fandyajpo/notain/tree/main/src/components/react/auth"
click node_template_ui "https://github.com/fandyajpo/notain/tree/main/src/components/react/template"
click node_product_ui "https://github.com/fandyajpo/notain/tree/main/src/components/react"
click node_auth_app "https://github.com/fandyajpo/notain/blob/main/src/app/auth.ts"
click node_data_api "https://github.com/fandyajpo/notain/blob/main/src/app/data-api.ts"
click node_container "https://github.com/fandyajpo/notain/blob/main/src/infra/container.ts"
click node_invoice_domain "https://github.com/fandyajpo/notain/blob/main/src/core/invoice/model.ts"
click node_invoice_calculation "https://github.com/fandyajpo/notain/blob/main/src/core/invoice/calculator.ts"
click node_customer_domain "https://github.com/fandyajpo/notain/blob/main/src/core/customer/model.ts"
click node_finance_domain "https://github.com/fandyajpo/notain/blob/main/src/core/stats/finance.ts"
click node_template_domain "https://github.com/fandyajpo/notain/blob/main/src/core/template/model.ts"
click node_billing_domain "https://github.com/fandyajpo/notain/tree/main/src/core/billing"
click node_appwrite_repos "https://github.com/fandyajpo/notain/tree/main/src/infra"
click node_asset_repo "https://github.com/fandyajpo/notain/blob/main/src/infra/r2-asset-repository.ts"
click node_functions "https://github.com/fandyajpo/notain/tree/main/functions/api"
click node_function_lib "https://github.com/fandyajpo/notain/tree/main/functions/_lib"
click node_invoice_shell "https://github.com/fandyajpo/notain/blob/main/functions/invoice/%5B%5Bid%5D%5D.ts"
click node_template_shell "https://github.com/fandyajpo/notain/blob/main/functions/templates/%5B%5Bid%5D%5D.ts"
click node_site_shell "https://github.com/fandyajpo/notain/blob/main/functions/site/%5B%5Bid%5D%5D.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_invoice_ui,node_customer_ui,node_dashboard_ui,node_auth_ui,node_template_ui,node_product_ui,node_user toneBlue
class node_auth_app,node_data_api,node_container toneAmber
class node_invoice_domain,node_invoice_calculation,node_customer_domain,node_finance_domain,node_template_domain,node_billing_domain toneMint
class node_appwrite_repos,node_appwrite,node_asset_repo,node_r2 toneRose
class node_functions,node_function_lib,node_invoice_shell,node_template_shell,node_site_shell,node_doku toneIndigo
```

## Components

### User experience

- [Invoice editor and print](https://github.com/fandyajpo/notain/tree/main/src/components/react/invoice): `src/components/react/invoice`
- [Customer directory](https://github.com/fandyajpo/notain/tree/main/src/components/react/customers): `src/components/react/customers`
- [Dashboard](https://github.com/fandyajpo/notain/tree/main/src/components/react/dashboard): `src/components/react/dashboard`
- [Authentication UI](https://github.com/fandyajpo/notain/tree/main/src/components/react/auth): `src/components/react/auth`
- [Template editor](https://github.com/fandyajpo/notain/tree/main/src/components/react/template): `src/components/react/template`
- [Other product UI](https://github.com/fandyajpo/notain/tree/main/src/components/react): `src/components/react`

### Application services

- [Authentication use cases](https://github.com/fandyajpo/notain/blob/main/src/app/auth.ts): `src/app/auth.ts`
- [Data API client](https://github.com/fandyajpo/notain/blob/main/src/app/data-api.ts): `src/app/data-api.ts`
- [Repository container](https://github.com/fandyajpo/notain/blob/main/src/infra/container.ts): `src/infra/container.ts`

### Product domain

- [Invoice model and rules](https://github.com/fandyajpo/notain/blob/main/src/core/invoice/model.ts): `src/core/invoice/model.ts`
- [Invoice calculations](https://github.com/fandyajpo/notain/blob/main/src/core/invoice/calculator.ts): `src/core/invoice/calculator.ts`
- [Customer model](https://github.com/fandyajpo/notain/blob/main/src/core/customer/model.ts): `src/core/customer/model.ts`
- [Finance metrics](https://github.com/fandyajpo/notain/blob/main/src/core/stats/finance.ts): `src/core/stats/finance.ts`
- [Template model](https://github.com/fandyajpo/notain/blob/main/src/core/template/model.ts): `src/core/template/model.ts`
- [Plans and payments](https://github.com/fandyajpo/notain/tree/main/src/core/billing): `src/core/billing`

### Persistence and assets

- [Appwrite repositories](https://github.com/fandyajpo/notain/tree/main/src/infra): `src/infra`
- **Appwrite Cloud**
- [R2 asset adapter](https://github.com/fandyajpo/notain/blob/main/src/infra/r2-asset-repository.ts): `src/infra/r2-asset-repository.ts`
- **Cloudflare R2**

### HTTP and integrations

- [Pages API functions](https://github.com/fandyajpo/notain/tree/main/functions/api): `functions/api`
- [Function utilities](https://github.com/fandyajpo/notain/tree/main/functions/_lib): `functions/_lib`
- [Invoice edit shell](https://github.com/fandyajpo/notain/blob/main/functions/invoice/%5B%5Bid%5D%5D.ts): `functions/invoice/[[id]].ts`
- [Template edit shell](https://github.com/fandyajpo/notain/blob/main/functions/templates/%5B%5Bid%5D%5D.ts): `functions/templates/[[id]].ts`
- [Site edit shell](https://github.com/fandyajpo/notain/blob/main/functions/site/%5B%5Bid%5D%5D.ts): `functions/site/[[id]].ts`

### Other components

- **SME user**
- **DOKU Checkout**

## Connections

- SME user → Authentication UI: signs in (evidence: `README.md`)
- Authentication UI → Authentication use cases: calls (evidence: `src/components/react/auth/auth-form.tsx`)
- Authentication use cases → Repository container: uses (evidence: `src/app/auth.ts`)
- Repository container → Appwrite repositories: registers (evidence: `src/infra/container.ts`)
- Appwrite repositories → Appwrite Cloud: persists data (evidence: `README.md`)
- SME user → Invoice editor and print: creates invoices (evidence: `README.md`)
- Invoice editor and print → Invoice model and rules: uses model (evidence: `src/components/react/invoice/invoice-preview.tsx`)
- Invoice editor and print → Invoice calculations: calculates totals (evidence: `src/components/react/invoice/invoice-preview.tsx`)
- Invoice editor and print → Appwrite repositories: saves invoices
- Appwrite repositories → Data API client: writes rows (evidence: `src/infra/appwrite-invoice-repository.ts`)
- Data API client → Appwrite Cloud: accesses tables (evidence: `src/app/data-api.ts`)
- Invoice editor and print → Customer directory: manages separately
- Customer directory → Customer model: uses model
- Appwrite repositories → Customer model: maps rows (evidence: `src/infra/appwrite-customer-repository.ts`)
- Dashboard → Finance metrics: shows metrics
- Appwrite repositories → Finance metrics: supplies entries (evidence: `src/infra/appwrite-invoice-repository.ts`)
- Finance metrics → Invoice calculations: calculates totals (evidence: `src/core/stats/finance.ts`)
- Template editor → Template model: edits templates
- Invoice editor and print → Template model: renders template (evidence: `src/components/react/invoice/invoice-preview.tsx`)
- SME user → Other product UI: uses features (evidence: `README.md`)
- Other product UI → Plans and payments: views plans (evidence: `src/components/react/landing/pricing-preview.tsx`)
- Plans and payments → DOKU Checkout: starts checkout
- Pages API functions → Function utilities: uses helpers (evidence: `functions/api/orgs.ts`)
- Pages API functions → Appwrite Cloud: verifies sessions (evidence: `README.md`)
- Pages API functions → Cloudflare R2: reads and writes logos (evidence: `README.md`)
- R2 asset adapter → Cloudflare R2: stores assets
- SME user → Invoice edit shell: opens edit route (evidence: `README.md`)
- Invoice edit shell → Function utilities: builds shell response (evidence: `functions/invoice/[[id]].ts`)
- SME user → Template edit shell: opens edit route (evidence: `README.md`)
- Template edit shell → Function utilities: builds shell response (evidence: `functions/templates/[[id]].ts`)
- SME user → Site edit shell: opens site route
- Site edit shell → Function utilities: builds shell response (evidence: `functions/site/[[id]].ts`)