# ralph-web-dev/sari-sari-app architecture

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

- Interactive diagram: https://gitdiagram.com/ralph-web-dev/sari-sari-app
- Repository: https://github.com/ralph-web-dev/sari-sari-app

## Overview

TindahanKo is an offline-first store-management app for sari-sari store owners. Owners sign in, manage inventory, record cash or credit sales, track customer debts and payments, and review reports and alerts. Screens use a local SQLite database; the documented sync engine pushes local changes to Supabase when available. The graph preserves documented barcode scanning, PDF export, notifications, and profile/settings capabilities, but their implementation details were not sampled. Arrows are limited to relationships shown in excerpts, the source index, or README.

Main entry points: [`src/db/index.ts`](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/db/index.ts) (SQLite database), [`src/app/(tabs)/products.tsx`](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/products.tsx) (Inventory management), [`src/lib/supabase.ts`](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/lib/supabase.ts) (Supabase client), [`src/lib/sync.ts`](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/lib/sync.ts) (Background sync)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["App shell<br/>[_layout.tsx]"]
  node_login["Sign-in<br/>[index.tsx]"]
  node_profile["Profile and settings<br/>[profile.tsx]"]
  node_dashboard["Dashboard<br/>[dashboard.tsx]"]
  node_profile_context["User profile state"]
end

subgraph group_commerce["Store operations"]
  node_inventory["Inventory management<br/>[products.tsx]"]
  node_product_forms["Product forms<br/>[add.tsx]"]
  node_product_detail["Product details<br/>[&#91;id&#93;.tsx]"]
  node_pos["Point of sale<br/>[sales.tsx]"]
  node_sales_history["Sales history<br/>[sales-history.tsx]"]
  node_utang["Utang management<br/>[utang.tsx]"]
  node_utang_customer["Customer records<br/>[add-customer.tsx]"]
  node_utang_detail["Debt details<br/>[&#91;id&#93;.tsx]"]
  node_payments["Payment recording<br/>[record-payment.tsx]"]
end

subgraph group_insights["Insights and alerts"]
  node_reports["Financial reports<br/>[reports.tsx]"]
  node_notifications["Notifications<br/>[notifications.tsx]"]
end

subgraph group_local["Local data"]
  node_localdb[("SQLite database<br/>[index.ts]")]
  node_schema["Store data schema<br/>[schema.ts]"]
end

subgraph group_cloud["Cloud and identity"]
  node_sync["Background sync<br/>[sync.ts]"]
  node_supabase_client["Supabase client<br/>[supabase.ts]"]
  node_supabase[("Supabase services")]
end

node_owner(("Store owner"))

node_owner -->|"signs in"| node_login
node_login -->|"authenticates with"| node_supabase_client
node_supabase_client -->|"connects to"| node_supabase
node_app -->|"provides"| node_profile_context
node_profile_context -->|"fetches user"| node_supabase_client
node_app -->|"starts sync"| node_sync
node_sync -->|"reads and updates"| node_localdb
node_sync -->|"pushes changes"| node_supabase_client
node_inventory -.->|"opens forms"| node_product_forms
node_inventory -.->|"opens details"| node_product_detail
node_inventory -->|"manages products"| node_localdb
node_pos -->|"records sales"| node_localdb
node_utang -.->|"manages customers"| node_utang_customer
node_utang -.->|"opens debt details"| node_utang_detail
node_utang_detail -.->|"records payment"| node_payments
node_payments -->|"stores payments"| node_localdb
node_reports -->|"reads store data"| node_localdb
node_notifications -->|"reads alerts"| node_localdb
node_localdb -->|"uses schema"| node_schema
node_profile -.->|"uses profile state"| node_profile_context
node_reports -.->|"exports PDF"| node_owner
node_inventory -.->|"supports barcode scanning"| node_owner
node_notifications -.->|"alerts on stock and debt"| node_owner

click node_app "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/_layout.tsx"
click node_login "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/index.tsx"
click node_profile "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(screens)/profile.tsx"
click node_dashboard "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/dashboard.tsx"
click node_inventory "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/products.tsx"
click node_product_forms "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/product/add.tsx"
click node_product_detail "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/product/%5Bid%5D.tsx"
click node_pos "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/sales.tsx"
click node_sales_history "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/sales-history.tsx"
click node_utang "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/utang.tsx"
click node_utang_customer "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/utang/add-customer.tsx"
click node_utang_detail "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/utang/%5Bid%5D.tsx"
click node_payments "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/utang/record-payment.tsx"
click node_reports "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/reports.tsx"
click node_notifications "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(screens)/notifications.tsx"
click node_localdb "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/db/index.ts"
click node_schema "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/db/schema.ts"
click node_sync "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/lib/sync.ts"
click node_profile_context "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/context/UserProfileContext.tsx"
click node_supabase_client "https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/lib/supabase.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_login,node_profile,node_dashboard,node_profile_context toneBlue
class node_inventory,node_product_forms,node_product_detail,node_pos,node_sales_history,node_utang,node_utang_customer,node_utang_detail,node_payments toneAmber
class node_reports,node_notifications toneMint
class node_localdb,node_schema toneRose
class node_sync,node_supabase_client,node_supabase,node_owner toneIndigo
```

## Components

### App experience

- [App shell](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/_layout.tsx): `src/app/_layout.tsx`
- [Sign-in](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/index.tsx): `src/app/index.tsx`
- [Profile and settings](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(screens)/profile.tsx): `src/app/(screens)/profile.tsx`
- [Dashboard](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/dashboard.tsx): `src/app/(tabs)/dashboard.tsx`
- [User profile state](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/context/UserProfileContext.tsx): `src/context/UserProfileContext.tsx`

### Store operations

- [Inventory management](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/products.tsx): `src/app/(tabs)/products.tsx`
- [Product forms](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/product/add.tsx): `src/app/product/add.tsx`
- [Product details](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/product/%5Bid%5D.tsx): `src/app/product/[id].tsx`
- [Point of sale](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/sales.tsx): `src/app/(tabs)/sales.tsx`
- [Sales history](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/sales-history.tsx): `src/app/(tabs)/sales-history.tsx`
- [Utang management](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/utang.tsx): `src/app/(tabs)/utang.tsx`
- [Customer records](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/utang/add-customer.tsx): `src/app/utang/add-customer.tsx`
- [Debt details](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/utang/%5Bid%5D.tsx): `src/app/utang/[id].tsx`
- [Payment recording](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/utang/record-payment.tsx): `src/app/utang/record-payment.tsx`

### Insights and alerts

- [Financial reports](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(tabs)/reports.tsx): `src/app/(tabs)/reports.tsx`
- [Notifications](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/app/(screens)/notifications.tsx): `src/app/(screens)/notifications.tsx`

### Local data

- [SQLite database](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/db/index.ts): `src/db/index.ts`
- [Store data schema](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/db/schema.ts): `src/db/schema.ts`

### Cloud and identity

- [Background sync](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/lib/sync.ts): `src/lib/sync.ts`
- [Supabase client](https://github.com/ralph-web-dev/sari-sari-app/blob/main/src/lib/supabase.ts): `src/lib/supabase.ts`
- **Supabase services**

### Other components

- **Store owner**

## Connections

- Store owner → Sign-in: signs in
- Sign-in → Supabase client: authenticates with (evidence: `src/app/index.tsx`)
- Supabase client → Supabase services: connects to
- App shell → User profile state: provides (evidence: `src/app/_layout.tsx`)
- User profile state → Supabase client: fetches user (evidence: `src/context/UserProfileContext.tsx`)
- App shell → Background sync: starts sync (evidence: `src/app/_layout.tsx`)
- Background sync → SQLite database: reads and updates (evidence: `src/lib/sync.ts`)
- Background sync → Supabase client: pushes changes (evidence: `src/lib/sync.ts`)
- Inventory management → Product forms: opens forms
- Inventory management → Product details: opens details
- Inventory management → SQLite database: manages products
- Point of sale → SQLite database: records sales (evidence: `src/app/(tabs)/sales.tsx`)
- Utang management → Customer records: manages customers
- Utang management → Debt details: opens debt details
- Debt details → Payment recording: records payment
- Payment recording → SQLite database: stores payments (evidence: `src/app/utang/record-payment.tsx`)
- Financial reports → SQLite database: reads store data (evidence: `src/app/(tabs)/reports.tsx`)
- Notifications → SQLite database: reads alerts (evidence: `src/app/(screens)/notifications.tsx`)
- SQLite database → Store data schema: uses schema (evidence: `src/db/index.ts`)
- Profile and settings → User profile state: uses profile state
- Financial reports → Store owner: exports PDF
- Inventory management → Store owner: supports barcode scanning
- Notifications → Store owner: alerts on stock and debt