209 lines
8.6 KiB
Markdown
209 lines
8.6 KiB
Markdown
# 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*
|