Add codebase mapping documents

.planning/codebase/ARCHITECTURE.md

@@ -0,0 +1,129 @@
+# Architecture
+
+**Analysis Date:** 2025-03-13
+
+## Pattern Overview
+
+**Overall:** Component-based SPA with centralized routing
+
+**Key Characteristics:**
+- Single-page application using React Router v7
+- View-based architecture where each view is a self-contained component
+- Centralized navigation with collapsible sidebar
+- Dark-first theme designed for industrial touch displays
+- No state management library (local state only)
+- UI components from shadcn/ui pattern with Radix primitives
+
+## Layers
+
+**Application Layer:**
+- Purpose: Entry point and routing configuration
+- Location: `sample_interface/src/app/`
+- Contains: App.tsx, routes.ts
+- Depends on: Components layer, Views layer
+- Used by: Vite build system
+
+**Layout Layer:**
+- Purpose: Shell components providing page structure
+- Location: `sample_interface/src/app/components/`
+- Contains: DashboardLayout.tsx, Sidebar.tsx, Header.tsx, NavigationButtons.tsx
+- Depends on: UI component layer
+- Used by: React Router
+
+**Views Layer:**
+- Purpose: Page-level components representing routes
+- Location: `sample_interface/src/app/components/views/`
+- Contains: RainfallView.tsx, GraphView.tsx, ADCSettingView.tsx, LoginView.tsx, etc.
+- Depends on: UI component layer
+- Used by: React Router via routes.ts
+
+**UI Component Layer:**
+- Purpose: Reusable primitive and composite components
+- Location: `sample_interface/src/app/components/ui/`
+- Contains: button.tsx, card.tsx, input.tsx, sidebar.tsx (shadcn), ~40+ components
+- Depends on: Radix UI primitives, Tailwind CSS
+- Used by: Views, Layouts, other UI components
+
+**Style Layer:**
+- Purpose: Global styles and design tokens
+- Location: `sample_interface/src/styles/`
+- Contains: index.css, tailwind.css, theme.css
+- Depends on: Tailwind CSS v4
+- Used by: All components
+
+## Data Flow
+
+**Navigation Flow:**
+
+1. User clicks sidebar menu item
+2. React Router `<Link>` handles navigation
+3. `routes.ts` matches path to view component
+4. `DashboardLayout` renders with `<Outlet />` for view
+5. View component mounts and renders content
+6. UI components receive props and render
+
+**State Management:**
+- **Local component state only** - No Redux, Zustand, or Context API for global state
+- Sidebar collapsed state: `DashboardLayout.tsx` (useState)
+- Menu expanded items: `Sidebar.tsx` (useState)
+- Form data: Managed within each view component
+- Time/status: `Header.tsx` (useState + useEffect)
+
+## Key Abstractions
+
+**View Component Pattern:**
+- Purpose: Page-level route handlers
+- Examples: `sample_interface/src/app/components/views/RainfallView.tsx`, `sample_interface/src/app/components/views/ADCSettingView.tsx`
+- Pattern: Function component that returns JSX with Card-based layouts
+
+**UI Component Pattern (shadcn/ui):**
+- Purpose: Atomic reusable components
+- Examples: `sample_interface/src/app/components/ui/button.tsx`, `sample_interface/src/app/components/ui/card.tsx`
+- Pattern: Compositional components with `cn()` utility for class merging
+- Sub-pattern: Each component exports named exports (e.g., `Card`, `CardHeader`, `CardContent`)
+
+**Utility Pattern:**
+- Purpose: Shared helper functions
+- Examples: `sample_interface/src/app/components/ui/utils.ts` (cn function)
+- Pattern: Named exports, single responsibility
+
+## Entry Points
+
+**Application Entry:**
+- Location: `sample_interface/src/app/App.tsx`
+- Triggers: Vite dev server or production build
+- Responsibilities: Provides RouterProvider with configured router
+
+**Routing Entry:**
+- Location: `sample_interface/src/app/routes.ts`
+- Triggers: Browser URL changes
+- Responsibilities: Defines all routes, maps paths to view components
+
+**Style Entry:**
+- Location: `sample_interface/src/styles/index.css`
+- Triggers: Component rendering
+- Responsibilities: Imports fonts, Tailwind, theme variables
+
+## Error Handling
+
+**Strategy:** No centralized error handling detected
+
+**Patterns:**
+- Components render static content with no error boundaries
+- Form validation handled inline within views
+- No try/catch blocks observed in view components
+- Image fallback component: `sample_interface/src/app/components/figma/ImageWithFallback.tsx`
+
+## Cross-Cutting Concerns
+
+**Logging:** Console-based (no logging framework detected)
+
+**Validation:** Inline form validation within view components
+
+**Authentication:** UI-only in LoginView.tsx, no auth flow implemented
+
+**Theming:** Tailwind CSS with dark color palette (gray-900, gray-950 base)
+
+---
+
+*Architecture analysis: 2025-03-13*