# leon0113/kajan_frontend architecture

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

- Interactive diagram: https://gitdiagram.com/leon0113/kajan_frontend
- Repository: https://github.com/leon0113/kajan_frontend

## Overview

1. This repository is a client-side React single-page application built with Vite and TypeScript. There is no visible backend, database, or API layer in the tree, so the architecture is focused on local UI composition and in-browser computation.

2. The top-level app entry is `src/main.tsx`, which bootstraps `App.tsx` into `index.html`. `App.tsx` is the central composition point where page selection and application-wide structure are likely wired together.

3. The app is organized around page-level screens in `src/pages`: `Dashboard`, `Calculator`, `Leads`, `Index`, and `NotFound`. This suggests a route-driven architecture, with each page owning a distinct user task or workflow.

4. A shared layout subsystem lives in `src/components/layout`. `MainLayout` and `AppSidebar` indicate a persistent shell around the pages, with navigation likely anchored in the sidebar and content swapped into the main region.

5. The calculator domain is isolated under `src/components/calculator`. `MortgageCalculator`, `MortgageCostCalculator`, `DownPaymentPlanner`, and `CalculatedScenario` point to a workflow where users enter mortgage-related inputs and receive computed scenario outputs and cost breakdowns. This is the main data-processing area of the app.

6. The dashboard domain is smaller and centered on presentation. `src/components/dashboard/StatsCard.tsx` suggests summary metrics or KPIs are surfaced on the dashboard page, probably fed from calculator results or static sample data.

7. Shared UI primitives are vendored under `src/components/ui`. This is a shadcn-style component library layer containing buttons, cards, dialogs, forms, tables, sidebars, toasts, charts, and other building blocks. These components provide the design system and interaction primitives used across pages and feature components.

8. Reusable utility hooks live in `src/hooks`. `use-mobile.tsx` likely drives responsive behavior, while `use-toast.ts` integrates the toast/notification system. These are cross-cutting concerns rather than feature-specific logic.

9. Styling is handled by Tailwind CSS plus local CSS entry points (`src/index.css` and `src/App.css`). Supporting config files such as `tailwind.config.ts`, `postcss.config.js`, and `components.json` reinforce that the UI layer is assembled from utility classes and generated/managed component patterns.

10. The architecture boundary is primarily “UI composition + client-side calculations.” Inputs originate in calculator components, derived values are passed into scenario/result components, and summary views like the dashboard render those outcomes. There is no evidence of server synchronization, auth, persistence, or third-party data integration in this repo snapshot.

11. Static/public assets are minimal, with `public/robots.txt` and `src/assets` for bundled images or icons. The app appears self-contained and deployable as static frontend assets via the Vite build.

12. For an architecture diagram, the key boxes are: app bootstrap, layout shell, page routes, calculator feature cluster, dashboard feature cluster, shared UI library, and utility hooks/styles. The main flow is user interaction in pages → local state/calculation in feature components → rendered summaries and notifications in shared UI.

Main entry points: [`src/App.tsx`](https://github.com/leon0113/kajan_frontend/blob/main/src/App.tsx) (App), [`src/components/ui`](https://github.com/leon0113/kajan_frontend/tree/main/src/components/ui) (UI Kit), [`src/components/calculator/MortgageCalculator.tsx`](https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/MortgageCalculator.tsx) (Mortgage Calc), [`src/pages/Dashboard.tsx`](https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Dashboard.tsx) (Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_app["App Shell"]
  node_node_main["main.tsx<br/>bootstrap<br/>[main.tsx]"]
  node_node_app["App<br/>composition<br/>[App.tsx]"]
end

subgraph group_grp_pages["Pages"]
  node_node_index_page["Index<br/>landing page<br/>[Index.tsx]"]
  node_node_dashboard_page["Dashboard<br/>page<br/>[Dashboard.tsx]"]
  node_node_calculator_page["Calculator<br/>page<br/>[Calculator.tsx]"]
  node_node_leads_page["Leads<br/>page<br/>[Leads.tsx]"]
  node_node_notfound_page["Not Found<br/>404 page<br/>[NotFound.tsx]"]
end

subgraph group_grp_calc["Calculator Domain"]
  node_node_mortgage_calc["Mortgage Calc<br/>calculator UI"]
  node_node_cost_calc["Cost Calc<br/>cost breakdown"]
  node_node_down_payment["Down Payment<br/>planning tool"]
  node_node_scenario["Scenario<br/>result view"]
end

subgraph group_grp_dash["Dashboard Domain"]
  node_node_stats_card["Stats Card<br/>summary card<br/>[StatsCard.tsx]"]
end

subgraph group_grp_layout["Layout"]
  node_node_mainlayout["MainLayout<br/>shell layout<br/>[MainLayout.tsx]"]
  node_node_sidebar["Sidebar<br/>nav component<br/>[AppSidebar.tsx]"]
end

subgraph group_grp_shared["Shared UI"]
  node_node_ui["UI Kit<br/>design system"]
  node_node_hooks["Hooks"]
  node_node_toast["Toaster<br/>notification layer<br/>[toaster.tsx]"]
  node_node_styles["Styles<br/>styling layer<br/>[index.css]"]
end

node_node_main -->|"mounts"| node_node_app
node_node_app -->|"wraps"| node_node_mainlayout
node_node_mainlayout -->|"contains"| node_node_sidebar
node_node_app -->|"routes to"| node_node_index_page
node_node_app -->|"routes to"| node_node_dashboard_page
node_node_app -->|"routes to"| node_node_calculator_page
node_node_app -->|"routes to"| node_node_leads_page
node_node_app -->|"fallback"| node_node_notfound_page
node_node_calculator_page -->|"uses"| node_node_mortgage_calc
node_node_mortgage_calc -->|"derives"| node_node_cost_calc
node_node_mortgage_calc -->|"plans"| node_node_down_payment
node_node_mortgage_calc -->|"outputs"| node_node_scenario
node_node_dashboard_page -->|"renders"| node_node_stats_card
node_node_mainlayout -->|"builds with"| node_node_ui
node_node_calculator_page -->|"builds with"| node_node_ui
node_node_dashboard_page -->|"builds with"| node_node_ui
node_node_leads_page -->|"builds with"| node_node_ui
node_node_app -->|"depends on"| node_node_hooks
node_node_ui -->|"includes"| node_node_toast
node_node_ui -->|"styled by"| node_node_styles
node_node_hooks -->|"feeds"| node_node_toast

click node_node_main "https://github.com/leon0113/kajan_frontend/blob/main/src/main.tsx"
click node_node_app "https://github.com/leon0113/kajan_frontend/blob/main/src/App.tsx"
click node_node_index_page "https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Index.tsx"
click node_node_dashboard_page "https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Dashboard.tsx"
click node_node_calculator_page "https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Calculator.tsx"
click node_node_leads_page "https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Leads.tsx"
click node_node_notfound_page "https://github.com/leon0113/kajan_frontend/blob/main/src/pages/NotFound.tsx"
click node_node_mainlayout "https://github.com/leon0113/kajan_frontend/blob/main/src/components/layout/MainLayout.tsx"
click node_node_sidebar "https://github.com/leon0113/kajan_frontend/blob/main/src/components/layout/AppSidebar.tsx"
click node_node_mortgage_calc "https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/MortgageCalculator.tsx"
click node_node_cost_calc "https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/MortgageCostCalculator.tsx"
click node_node_down_payment "https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/DownPaymentPlanner.tsx"
click node_node_scenario "https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/CalculatedScenario.tsx"
click node_node_stats_card "https://github.com/leon0113/kajan_frontend/blob/main/src/components/dashboard/StatsCard.tsx"
click node_node_ui "https://github.com/leon0113/kajan_frontend/tree/main/src/components/ui"
click node_node_hooks "https://github.com/leon0113/kajan_frontend/tree/main/src/hooks"
click node_node_toast "https://github.com/leon0113/kajan_frontend/blob/main/src/components/ui/toaster.tsx"
click node_node_styles "https://github.com/leon0113/kajan_frontend/blob/main/src/index.css"

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_node_main,node_node_app toneBlue
class node_node_index_page,node_node_dashboard_page,node_node_calculator_page,node_node_leads_page,node_node_notfound_page toneAmber
class node_node_mortgage_calc,node_node_cost_calc,node_node_down_payment,node_node_scenario toneMint
class node_node_stats_card toneRose
class node_node_mainlayout,node_node_sidebar toneIndigo
class node_node_ui,node_node_hooks,node_node_toast,node_node_styles toneTeal
```

## Components

### App Shell

Bootstraps the SPA and wires the top-level composition.

- [main.tsx](https://github.com/leon0113/kajan_frontend/blob/main/src/main.tsx): bootstrap · Vite entry that mounts the React app. · `src/main.tsx`
- [App](https://github.com/leon0113/kajan_frontend/blob/main/src/App.tsx): composition · Top-level app composition and page wiring. · `src/App.tsx`

### Pages

Route-level screens and user-facing entry points.

- [Index](https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Index.tsx): landing page · Primary landing or redirect screen. · `src/pages/Index.tsx`
- [Dashboard](https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Dashboard.tsx): page · Dashboard screen for summary metrics. · `src/pages/Dashboard.tsx`
- [Calculator](https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Calculator.tsx): page · Page hosting mortgage calculation workflows. · `src/pages/Calculator.tsx`
- [Leads](https://github.com/leon0113/kajan_frontend/blob/main/src/pages/Leads.tsx): page · Leads-related screen or workflow. · `src/pages/Leads.tsx`
- [Not Found](https://github.com/leon0113/kajan_frontend/blob/main/src/pages/NotFound.tsx): 404 page · Fallback route for unknown paths. · `src/pages/NotFound.tsx`

### Calculator Domain

Mortgage calculation workflow and scenario outputs.

- [Mortgage Calc](https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/MortgageCalculator.tsx): calculator UI · Core mortgage input and computation component. · `src/components/calculator/MortgageCalculator.tsx`
- [Cost Calc](https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/MortgageCostCalculator.tsx): cost breakdown · Derives mortgage cost and payment details. · `src/components/calculator/MortgageCostCalculator.tsx`
- [Down Payment](https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/DownPaymentPlanner.tsx): planning tool · Helps plan or tune down payment scenarios. · `src/components/calculator/DownPaymentPlanner.tsx`
- [Scenario](https://github.com/leon0113/kajan_frontend/blob/main/src/components/calculator/CalculatedScenario.tsx): result view · Renders calculated scenario output. · `src/components/calculator/CalculatedScenario.tsx`

### Dashboard Domain

Summary presentation for key metrics.

- [Stats Card](https://github.com/leon0113/kajan_frontend/blob/main/src/components/dashboard/StatsCard.tsx): summary card · Dashboard metric card component. · `src/components/dashboard/StatsCard.tsx`

### Layout

Persistent navigation shell around page content.

- [MainLayout](https://github.com/leon0113/kajan_frontend/blob/main/src/components/layout/MainLayout.tsx): shell layout · Persistent application shell for page content. · `src/components/layout/MainLayout.tsx`
- [Sidebar](https://github.com/leon0113/kajan_frontend/blob/main/src/components/layout/AppSidebar.tsx): nav component · Primary navigation and section switching. · `src/components/layout/AppSidebar.tsx`

### Shared UI

Reusable UI primitives and cross-cutting hooks/styles.

- [UI Kit](https://github.com/leon0113/kajan_frontend/tree/main/src/components/ui): design system · Reusable shadcn-style primitives for forms, cards, charts, dialogs, and navigation. · `src/components/ui`
- [Hooks](https://github.com/leon0113/kajan_frontend/tree/main/src/hooks): shared hooks · Cross-cutting hooks for responsive behavior and toasts. · `src/hooks`
- [Toaster](https://github.com/leon0113/kajan_frontend/blob/main/src/components/ui/toaster.tsx): notification layer · Toast rendering and notification plumbing. · `src/components/ui/toaster.tsx`
- [Styles](https://github.com/leon0113/kajan_frontend/blob/main/src/index.css): styling layer · Tailwind and global CSS entry points. · `src/index.css`

## Connections

- main.tsx → App: mounts · Bootstraps the application root.
- App → MainLayout: wraps · Provides the persistent shell around routed content.
- MainLayout → Sidebar: contains · Navigation lives in the layout shell.
- App → Index: routes to · Selects the landing screen.
- App → Dashboard: routes to · Selects the dashboard screen.
- App → Calculator: routes to · Selects the calculator screen.
- App → Leads: routes to · Selects the leads screen.
- App → Not Found: fallback · Handles unmatched routes.
- Calculator → Mortgage Calc: uses · Page hosts the core calculation UI.
- Mortgage Calc → Cost Calc: derives · Computes mortgage cost breakdowns.
- Mortgage Calc → Down Payment: plans · Supports down payment scenario exploration.
- Mortgage Calc → Scenario: outputs · Surfaces computed scenario results.
- Dashboard → Stats Card: renders · Dashboard summarizes metrics via cards.
- MainLayout → UI Kit: builds with · Layout composes shared primitives.
- Calculator → UI Kit: builds with · Feature UI is assembled from shared components.
- Dashboard → UI Kit: builds with · Dashboard presentation uses the design system.
- Leads → UI Kit: builds with · Leads screen uses shared UI primitives.
- App → Hooks: depends on · App-level behavior relies on shared hooks.
- UI Kit → Toaster: includes · Notification primitives are part of the shared layer.
- UI Kit → Styles: styled by · UI primitives are themed with global styles.
- Hooks → Toaster: feeds · Toast hook drives notification rendering.