# arman897/hisaab-kitaab architecture

> Architecture diagram of the GitHub repository arman897/hisaab-kitaab, 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/arman897/hisaab-kitaab
- Repository: https://github.com/arman897/hisaab-kitaab

## Overview

Ledgerly is a browser-based personal-finance tracker. Users manage profiles and record financial activity, then review profile balances, recent transactions, and charts; filters and analytics support further review, while lending records can be settled with a balancing transaction. The visible application logic is concentrated in one JavaScript file, so the graph separates its responsibilities without implying separate modules. Excerpts are incomplete; storage and feature links are limited to behavior shown in the sampled source.

Main entry points: [`index.html`](https://github.com/arman897/hisaab-kitaab/blob/main/index.html) (App page), [`app.js`](https://github.com/arman897/hisaab-kitaab/blob/main/app.js) (Profile management), [`index.css`](https://github.com/arman897/hisaab-kitaab/blob/main/index.css) (Interface styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["User interaction"]
  node_page["App page<br/>[index.html]"]
  node_styles["Interface styling<br/>[index.css]"]
  node_app["Application logic<br/>[app.js]"]
  node_auth["Authentication UI<br/>[app.js]"]
end

subgraph group_finance["Finance management"]
  node_profiles["Profile management<br/>[app.js]"]
  node_transactions["Transaction entry<br/>[app.js]"]
  node_debt["Debt settlement<br/>[app.js]"]
  node_filters["Transaction filters<br/>[app.js]"]
  node_browserstorage[("Browser storage")]
end

subgraph group_insights["Review and analytics"]
  node_dashboard["Dashboard<br/>[app.js]"]
  node_analytics["Analytics<br/>[app.js]"]
  node_chartjs["Chart.js"]
end

node_user(("User"))

node_user -->|"uses"| node_page
node_page -->|"loads"| node_app
node_page -->|"uses"| node_styles
node_app -->|"checks status"| node_auth
node_auth -->|"saves session"| node_browserstorage
node_profiles -->|"reads profiles"| node_browserstorage
node_profiles -->|"saves profiles"| node_browserstorage
node_user -->|"manages"| node_profiles
node_user -->|"records activity"| node_transactions
node_user -->|"sets filters"| node_filters
node_user -->|"settles debt"| node_debt
node_filters -->|"updates view"| node_dashboard
node_dashboard -->|"renders charts"| node_chartjs
node_user -->|"reviews"| node_analytics
node_analytics -->|"renders charts"| node_chartjs

click node_page "https://github.com/arman897/hisaab-kitaab/blob/main/index.html"
click node_styles "https://github.com/arman897/hisaab-kitaab/blob/main/index.css"
click node_app "https://github.com/arman897/hisaab-kitaab/blob/main/app.js"
click node_auth "https://github.com/arman897/hisaab-kitaab/blob/main/app.js"
click node_profiles "https://github.com/arman897/hisaab-kitaab/blob/main/app.js"
click node_transactions "https://github.com/arman897/hisaab-kitaab/blob/main/app.js"
click node_debt "https://github.com/arman897/hisaab-kitaab/blob/main/app.js"
click node_filters "https://github.com/arman897/hisaab-kitaab/blob/main/app.js"
click node_dashboard "https://github.com/arman897/hisaab-kitaab/blob/main/app.js"
click node_analytics "https://github.com/arman897/hisaab-kitaab/blob/main/app.js"

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_page,node_styles,node_app,node_auth,node_user toneBlue
class node_profiles,node_transactions,node_debt,node_filters,node_browserstorage toneAmber
class node_dashboard,node_analytics,node_chartjs toneMint
```

## Components

### User interaction

- [App page](https://github.com/arman897/hisaab-kitaab/blob/main/index.html): `index.html`
- [Interface styling](https://github.com/arman897/hisaab-kitaab/blob/main/index.css): `index.css`
- [Application logic](https://github.com/arman897/hisaab-kitaab/blob/main/app.js): `app.js`
- [Authentication UI](https://github.com/arman897/hisaab-kitaab/blob/main/app.js): `app.js`

### Finance management

- [Profile management](https://github.com/arman897/hisaab-kitaab/blob/main/app.js): `app.js`
- [Transaction entry](https://github.com/arman897/hisaab-kitaab/blob/main/app.js): `app.js`
- [Debt settlement](https://github.com/arman897/hisaab-kitaab/blob/main/app.js): `app.js`
- [Transaction filters](https://github.com/arman897/hisaab-kitaab/blob/main/app.js): `app.js`
- **Browser storage**

### Review and analytics

- [Dashboard](https://github.com/arman897/hisaab-kitaab/blob/main/app.js): `app.js`
- [Analytics](https://github.com/arman897/hisaab-kitaab/blob/main/app.js): `app.js`
- **Chart.js**

### Other components

- **User**

## Connections

- User → App page: uses
- App page → Application logic: loads
- App page → Interface styling: uses
- Application logic → Authentication UI: checks status
- Authentication UI → Browser storage: saves session
- Profile management → Browser storage: reads profiles
- Profile management → Browser storage: saves profiles
- User → Profile management: manages
- User → Transaction entry: records activity
- User → Transaction filters: sets filters
- User → Debt settlement: settles debt
- Transaction filters → Dashboard: updates view
- Dashboard → Chart.js: renders charts
- User → Analytics: reviews
- Analytics → Chart.js: renders charts