AtithiOS Theme Project Graph
A visual map of architecture, routes, reusable components, logic flows, data services, and documentation coverage.
Graph Maps6Architecture, routes, components, logic, data, docs
Total Nodes61All major theme concepts and files
Total Edges59Relationships and logic dependencies
Covered Areas643 mapped file/area references
Application Architecture
Root app structure, shell services, responsive navigation, progress, health recovery, and theme providers.
12 nodes / 11 links
Coverage Matrix
What each graph covers and where to inspect the implementation.
| Area | Graph | Coverage | Primary Files |
|---|---|---|---|
| Application shell | Application Architecture | Header, sidebar, content, status bar, mobile menus, health recovery, progress loader | src/components/layout/AppShell.tsx |
| Routes and modules | Route & Module Graph | Overview, masters, transactions, production, reports, enterprise examples, user management, errors, API | src/app, src/lib/navigation.ts |
| Reusable components | Component Dependency Graph | UI, layout, dashboard, documents, enterprise, icons, exports | src/components |
| Interaction logic | Logic & Interaction Graph | Keyboard shortcuts, focus, DataGrid arrows, EditableGrid, progress, health recovery, mobile menu | src/components/layout/AppShell.tsx, src/components/ui |
| Data and services | Data, Document & Service Flow | Items, documents, reports, BOM drilldown, customer balances, OCR, S3/R2 | src/lib, src/app/api, src/app/bom, src/app/lazy-load |
| Documentation | Documentation Coverage Graph | Setup, shell, components, ERP documents, enterprise features, project graph, scripts | src/app/docs/page.tsx, src/app/project-graph/page.tsx |
1-6of6
Page 1 / 1
Node Inventory
Every mapped concept, route, component, logic block, data source, API, and doc section.
| Graph | Node | Type | Description | Primary File / Area | Links |
|---|---|---|---|---|---|
| Application Architecture | Root Layout | Shell | Wraps the full app with global CSS, theme variables, and providers. | src/app/layout.tsx | 2 |
| Application Architecture | ThemeProvider | Shell | Provides theme and toast context for all pages. | src/components/index.ts | 1 |
| Application Architecture | AppShell | Shell | Enterprise layout spine: header, navigation, content, loaders, shortcuts, health recovery. | src/components/layout/AppShell.tsx | 10 |
| Application Architecture | ERP Navigation | Data | Shared route catalog for sidebar, mobile app menu, and shortcut routing. | src/lib/navigation.ts | 1 |
| Application Architecture | Header | Component | Logo, breadcrumbs, alerts trigger, avatar, and mobile menu button. | src/components/layout/Header.tsx | 1 |
| Application Architecture | Sidebar | Component | Desktop menu and mobile sheet menu with searchable navigation. | src/components/layout/Sidebar.tsx | 1 |
| Application Architecture | Content Host | Shell | Main focus target, page transition boundary, and responsive scroll container. | src/components/layout/AppShell.module.css | 1 |
| Application Architecture | Status Bar | Component | Desktop shortcut footer and mode/status display. | src/components/layout/StatusBar.tsx | 1 |
| Application Architecture | Mobile App Shell | Logic | Bottom app bar plus slide-up menu for phone/tablet navigation. | src/components/layout/AppShell.tsx | 1 |
| Application Architecture | Progress Loader | Logic | Thin orange loader for navigation, button actions, submits, and explicit loading. | src/components/layout/AppShell.tsx | 1 |
| Application Architecture | Health Recovery | Logic | Detects offline, slow operations, failed resources, promise errors, memory pressure, and main-thread stalls. | src/components/layout/AppShell.tsx | 1 |
| Application Architecture | All App Routes | Route | Module, transaction, production, reporting, enterprise, and user management screens. | src/app | 1 |
| Route & Module Graph | Dashboard | Route | Operational home with modules, KPIs, alerts, activities, and quick actions. | src/app/page.tsx | 5 |
| Route & Module Graph | Overview Pages | Route | Components, Shortcuts, Documentation, and Project Graph pages. | src/app/components, src/app/docs, src/app/shortcuts, src/app/project-graph | 2 |
| Route & Module Graph | Master Modules | Route | Items, Items Master, Vendors, Customers, Inventory, and CRUD-style screens. | src/app/items, src/app/vendors, src/app/customers, src/app/inventory | 1 |
| Route & Module Graph | Transactions | Route | Purchase Orders, Invoices, GRN pages, document screens, and new-entry pages. | src/app/po, src/app/invoices, src/app/grn | 2 |
| Route & Module Graph | Production | Route | Production, BOM list, BOM details, and editable BOM editor. | src/app/production, src/app/bom | 1 |
| Route & Module Graph | Reports | Route | Report catalog and individual report screens backed by shared report definitions. | src/app/reports, src/lib/reports.tsx | 2 |
| Route & Module Graph | Enterprise Examples | Route | Dashboard Builder, Charts & Analytics, Files/OCR/Cloud, Customer Balances. | src/app/enterprise, src/app/lazy-load | 2 |
| Route & Module Graph | User Management | Route | User list, role cards, and RBAC permission matrix. | src/app/users/page.tsx | 1 |
| Route & Module Graph | Error & Recovery Pages | Route | 400, 403, 500, 503, not-found, and app-level error screens. | src/app/error*, src/app/not-found.tsx | 1 |
| Route & Module Graph | API Routes | API | Cloud storage presign endpoint for S3-compatible file operations. | src/app/api/cloud-storage/presign/route.ts | 1 |
| Component Dependency Graph | Theme Export Barrel | Component | Single import surface for UI, layout, dashboard, document, and enterprise components. | src/components/index.ts | 6 |
| Component Dependency Graph | Layout Components | Component | AppShell, Header, Sidebar, StatusBar, PlaceholderPage. | src/components/layout | 3 |
| Component Dependency Graph | UI Foundation | Component | Button, Card, Badge, Input, Modal, Drawer, ConfirmDialog, Toast, StateBlock. | src/components/ui | 2 |
1-25of61
Page 1 / 3
Relationship Inventory
All mapped dependencies and process flows between graph nodes.
| Graph | From | To | Relationship | Kind |
|---|---|---|---|---|
| Application Architecture | root-layout | theme-provider | wraps | strong |
| Application Architecture | root-layout | app-shell | hosts pages through | strong |
| Application Architecture | navigation-config | app-shell | shared menu data | |
| Application Architecture | app-shell | header | renders | |
| Application Architecture | app-shell | sidebar | renders | |
| Application Architecture | app-shell | content | focuses | |
| Application Architecture | app-shell | status-bar | desktop status | |
| Application Architecture | app-shell | mobile-shell | switches under 900px | strong |
| Application Architecture | app-shell | progress-loader | flashes actions | |
| Application Architecture | app-shell | health-recovery | guards failures | |
| Application Architecture | app-shell | pages | wraps route content | strong |
| Route & Module Graph | dashboard | overview-pages | links reference | |
| Route & Module Graph | dashboard | master-pages | opens masters | strong |
| Route & Module Graph | dashboard | transaction-pages | opens transactions | strong |
| Route & Module Graph | dashboard | production-pages | opens production | |
| Route & Module Graph | overview-pages | reports-pages | documents reports | |
| Route & Module Graph | transaction-pages | reports-pages | feeds reporting | dashed |
| Route & Module Graph | enterprise-pages | api-routes | signs cloud requests | strong |
| Route & Module Graph | user-pages | enterprise-pages | secures examples | dashed |
| Route & Module Graph | error-pages | dashboard | safe return | |
| Component Dependency Graph | exports | layout-components | exports | |
| Component Dependency Graph | exports | ui-foundation | exports | |
| Component Dependency Graph | exports | grid-components | exports | |
| Component Dependency Graph | exports | dashboard-components | exports | |
| Component Dependency Graph | exports | document-components | exports |
1-25of59
Page 1 / 3
Reusable Graph API
import { ProjectGraphView, type ProjectGraphMap } from '@/components';
const graph: ProjectGraphMap = {
id: 'logic',
title: 'Logic Graph',
description: 'Keyboard, loader, health, grid, and mobile menu logic.',
nodes: [
{ id: 'app-shell', title: 'AppShell', type: 'shell', description: 'Layout and logic host', x: 20, y: 50 },
{ id: 'data-grid', title: 'DataGrid', type: 'component', description: 'Keyboard table', x: 60, y: 50 },
],
edges: [
{ from: 'app-shell', to: 'data-grid', label: 'hosts and focuses' },
],
};
<ProjectGraphView graph={graph} />;