sp80/.planning/codebase/CONCERNS.md

Codebase Concerns

Analysis Date: 2026-03-13

Tech Debt

Mock Data Throughout Application:

• Issue: All views contain hardcoded mock data instead of real API integrations
• Files:
  • src/app/components/views/FlashMemoryView.tsx (lines 6-25)
  • src/app/components/views/RainfallView.tsx (lines 5-10, 43-49)
  • src/app/components/views/ADCSettingView.tsx (lines 8-13)
  • src/app/components/views/CalibrationView.tsx (lines 6-11)
  • src/app/components/views/StationInfoView.tsx (lines 5-14)
  • src/app/components/views/Header.tsx (lines 56, 77, 91, 97)
• Impact: Application is not functional for production use; requires complete rewrite of data layer
• Fix approach: Implement API client layer, create custom hooks for data fetching (useApi, useSensorData), replace all mock constants with API calls

Missing API Integration Layer:

• Issue: No HTTP client configured, no API service layer exists
• Files: All view files in src/app/components/views/
• Impact: Forms don't submit, data doesn't persist, application is read-only demo
• Fix approach: Add axios or fetch wrapper, create service modules in src/app/services/ for each domain (sensors, settings, auth)

Placeholder Components:

• Issue: GraphView contains only placeholder content with no chart implementation
• File: src/app/components/views/GraphView.tsx (lines 17-19)
• Impact: Core feature is non-functional despite chart component existing (src/app/components/ui/chart.tsx)
• Fix approach: Integrate Recharts with actual data source

Known Issues

Exposed Default Credentials:

• Issue: Login page displays hardcoded default credentials in the UI
• File: src/app/components/views/LoginView.tsx (lines 54-56)
• Content: "Default credentials: admin / admin"
• Impact: Security vulnerability - exposes authentication credentials to all users
• Fix approach: Remove credential hints from UI, implement secure password reset flow, store credentials server-side only

Non-Functional Interactive Elements:

• Issue: Buttons and actions don't perform actual operations
• Files:
  • src/app/components/views/FlashMemoryView.tsx: Download and Delete buttons (lines 80-87) are non-functional
  • src/app/components/views/SettingView.tsx: Factory Reset and Reboot System buttons (lines 67-71) lack confirmation dialogs
  • src/app/components/views/GPRSSettingView.tsx: Test Connection button (lines 60-62) has no implementation
• Impact: Users receive no feedback, destructive actions can occur accidentally
• Fix approach: Implement action handlers, add confirmation dialogs for destructive operations, add toast notifications for user feedback

Security Considerations

No Authentication Implementation:

• Risk: Login form is UI-only with no auth logic
• File: src/app/components/views/LoginView.tsx - form submission not handled
• Current mitigation: None
• Recommendations: Implement JWT or session-based auth, add ProtectedRoute wrapper, store auth token securely (httpOnly cookies preferred)

Missing Input Validation:

• Risk: All forms accept any input without validation
• Files: All form-containing views (*SettingView.tsx)
• Current mitigation: None
• Recommendations: Add Zod or Yup schemas for form validation, validate on blur and submit, display inline error messages

No HTTPS Enforcement:

• Risk: Application may run over unencrypted connections
• Current mitigation: None visible
• Recommendations: Add HSTS headers, enforce HTTPS in production builds, validate API URLs use HTTPS

Hardcoded Sensitive-Looking Configuration:

• Risk: Device configuration values exposed in source
• Files:
  • src/app/components/views/StationInfoView.tsx: Hardcoded station coordinates and serial numbers (lines 5-14)
  • src/app/components/views/Header.tsx: Hardcoded station ID "STN-001" (line 56)
• Current mitigation: None
• Recommendations: Move configuration to environment variables or secure config endpoint

Performance Bottlenecks

Large Component Files:

• Problem: sidebar.tsx is 726 lines, violating single responsibility principle
• File: src/app/components/ui/sidebar.tsx
• Cause: Multiple components (SidebarProvider, Sidebar, SidebarTrigger, SidebarRail, etc.) in one file
• Improvement path: Split into separate files: sidebar-provider.tsx, sidebar-trigger.tsx, sidebar-menu.tsx, etc.

No Code Splitting:

• Problem: All routes loaded upfront in single bundle
• File: src/app/routes.ts - static imports of all view components
• Cause: No lazy loading or dynamic imports
• Improvement path: Use React.lazy() and Suspense for route-based code splitting

Direct DOM Manipulation:

• Problem: NavigationButtons uses imperative DOM access instead of React refs
• File: src/app/components/views/NavigationButtons.tsx (lines 8-19)
• Code: document.getElementById("details-panel")
• Improvement path: Use React ref forwarded from DashboardLayout, or use scroll context

Fragile Areas

Chart Component Null Returns:

• Files: src/app/components/ui/chart.tsx (lines 78, 133, 153, 168, 267)
• Issue: Multiple early return null statements may cause React reconciliation issues
• Safe modification: Ensure parent components handle null returns gracefully, add error boundaries

Form State Management:

• Issue: All forms use uncontrolled inputs with defaultValue only
• Files: All *SettingView.tsx files
• Why fragile: Form state not tracked, can't validate, can't persist, can't show pending state
• Safe modification: Convert to controlled inputs with useState, or use React Hook Form library

Hardcoded Route Paths:

• Issue: Route paths defined in multiple places
• Files:
  • src/app/routes.ts - route definitions
  • src/app/components/Sidebar.tsx (lines 39-87) - navigation links
• Why fragile: Route changes require updates in multiple files, easy to miss one
• Safe modification: Create src/app/constants/routes.ts with path constants, use throughout app

No Error Boundaries:

• Issue: Single component error can crash entire application
• Current state: No ErrorBoundary component found
• Safe modification: Add error boundaries at route level and around complex components

Scaling Limits

Current Capacity:

• 72 source files, ~13,300 lines of TypeScript
• No test coverage
• All data hardcoded (no real data volume)

Limitations:

• No pagination implementation for data lists
• No virtualization for long lists
• No caching strategy

Scaling Path:

• Implement React Query or SWR for server state management
• Add virtualized lists for large datasets
• Implement proper pagination in data views

Dependencies at Risk

React Router v7 Migration:

• Current: react-router version 7.13.0
• Risk: Recently released major version, API may change
• Impact: Route definitions in src/app/routes.ts use newer createBrowserRouter API
• Migration plan: Monitor for breaking changes, lock version if needed

Tailwind CSS v4:

• Current: Version 4.1.12 with @theme inline syntax
• Risk: New major version with different configuration approach
• Impact: theme.css uses new v4 syntax
• Migration plan: Maintain lockfile, test before upgrades

Missing Critical Features

Real-Time Data Updates:

• Problem: Dashboard shows static values, no live sensor data
• Blocks: Production deployment for monitoring use cases
• Priority: High

Form Validation:

• Problem: No validation on any input fields
• Files: All *SettingView.tsx files
• Blocks: Data integrity, user experience
• Priority: High

Error Handling:

• Problem: No error states, no user feedback for failures
• Blocks: Production reliability
• Priority: High

API Integration:

• Problem: No backend communication
• Blocks: All CRUD operations
• Priority: Critical

Authentication/Authorization:

• Problem: Login form is decorative only
• Blocks: Security requirements
• Priority: Critical

Confirmation Dialogs:

• Problem: Destructive actions (Factory Reset, Reboot, Delete) have no confirmation
• Files: src/app/components/views/SettingView.tsx, src/app/components/views/FlashMemoryView.tsx
• Priority: Medium

Test Coverage Gaps

No Testing Infrastructure:

• What's not tested: Everything (100% gap)
• Files: Zero test files found
• Risk: No regression protection, no confidence in changes
• Priority: Critical

Recommended Testing Stack:

• Unit tests: Vitest + React Testing Library for components
• Integration tests: Test form submissions, navigation flows
• E2E tests: Playwright for critical user journeys

Critical Test Priorities:

1. Form validation and submission flows
2. Authentication state management
3. Data fetching and error handling
4. Navigation and routing
5. Settings persistence

---

Concerns audit: 2026-03-13