leon0113/kajan_frontend

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.