johnleshan/tracksimply

Purpose and Entry Points

This is a Vite-built React single-page application for business/personal operations management: dashboard, accounts, bookkeeping, budgets, debt, inventory, vehicles, and AI assistance. The browser bootstrap is src/main.jsx; application composition and top-level routing/state layout are centered in src/App.jsx. Styling is primarily colocated CSS plus global styles in src/index.css and src/App.css.

Application Shell and Navigation

The persistent UI shell is built from navigation and workspace components:

• src/components/Navbar.jsx

• src/components/Sidebar.jsx

• src/App.jsx

The sidebar likely selects operational tools while the app root controls which tool/workspace is rendered. Product-oriented UI is separated into reusable display/detail components at src/components/ProductCard.jsx and src/components/ProductModal.jsx.

Authentication and Data Boundary

Authentication state is centralized through React context in src/context/AuthContext.jsx. Supabase client creation/configuration is isolated at src/lib/supabase.js, forming the principal boundary between browser UI and backend authentication/database services.

Tool components should consume authenticated state rather than own credential handling. The repository includes database validation, RLS, user, and deployment investigation scripts under scratch/, indicating Supabase database policies and user access are material operational concerns.

Operational Tool Modules

The primary domain stages are independent React tool views under src/components/tools/:

• Dashboard aggregation: DashboardOverview.jsx

• Account/user administration: AccountManager.jsx

• Financial records: Bookkeeping.jsx

• Planning and liabilities: BudgetPlanner.jsx, DebtTracker.jsx

• Operational assets: InventoryTracker.jsx, VehicleManagement.jsx

These modules are the core feature boundary: each owns domain-specific UI and likely reads/writes its related Supabase tables, while shared authentication and navigation remain outside them.

AI Assistance Flow

src/components/MagicAI.jsx provides the user-facing AI interaction surface. Requests are delegated through src/services/aiService.js, keeping model/API invocation separate from presentation code. The presence of scratch/test_groq.cjs suggests Groq is the intended or tested external AI provider; secrets should be supplied through environment configuration rather than frontend source.

Data, Deployment, and Infrastructure

CSV files in data/ provide seed/import-oriented business datasets for budgets, debts, inventory, users, and transactions, e.g. data/budgets.csv and data/transactions.csv. Database initialization is represented by scratch/initialize_database.sql.

The frontend is configured as a Vite application via vite.config.js, with Vercel deployment configuration in vercel.json. .env.example defines the expected environment-variable contract for services such as Supabase and AI integration.