sp80/.planning/codebase/INTEGRATIONS.md

External Integrations

Analysis Date: 2026-03-13

APIs & External Services

Backend API Integration:

• Status: Not yet implemented
• Evidence: No fetch/axios/API client code found in source files
• Pattern Used: Static mock data in view components

Current Data Approach:

• All data is hardcoded/mock data within components
• Examples:
  • RainfallView.tsx - Static rainfall data array
  • StationInfoView.tsx - Hardcoded station information
  • FlashMemoryView.tsx - Mock file list and content
  • ADCSettingView.tsx - Mock ADC channel readings
  • CalibrationView.tsx - Mock sensor calibration status

Planned Integration Points: Based on view structure, expected API endpoints include:

• /api/rainfall - Rainfall measurement data
• /api/station - Station configuration and status
• /api/adc - ADC channel readings
• /api/calibration - Sensor calibration data
• /api/files - Flash memory file management
• /api/gprs - GPRS settings and connectivity
• /api/network - Network configuration
• /api/auth - Authentication (login/logout)

Data Storage

Databases:

• Type: None detected in frontend
• Pattern: This is a pure frontend application
• Expected Backend: RTU device likely exposes REST API or WebSocket

File Storage:

• Frontend: Local filesystem access not implemented
• Flash Memory View: Mock file browser interface (UI only)
• Expected: File download/upload via API to device storage

Caching:

• Current: React state only (useState)
• No external caching libraries detected

Authentication & Identity

Auth Provider:

• Status: UI only - Login form present but not functional
• Location: src/app/components/views/LoginView.tsx
• Current: Static credentials display ("admin / admin")
• Implementation: Basic form without API integration

Auth Pattern:

• Username/password form
• "Remember me" checkbox (localStorage potential)
• Login status indicator in header (mock state)
• Expected: JWT or session-based auth with backend

Monitoring & Observability

Error Tracking:

• Service: None detected
• Implementation: No error boundaries or logging framework

Logs:

• Approach: Console logging only (default)
• No structured logging detected

Communication Protocols

GPRS/Cellular:

• UI Location: src/app/components/views/GPRSSettingView.tsx
• Configuration: Server URL, Port, Upload Interval settings
• Integration: Form UI only - no actual GPRS client code

Network Setup:

• UI Location: src/app/components/views/NetworkSetupView.tsx
• Expected: IP configuration, DNS, Gateway settings

Mobile Setting:

• UI Location: src/app/components/views/MobileSettingView.tsx
• Purpose: SMS/cellular configuration for RTU

Hardware Integration

ADC (Analog-to-Digital Converter):

• UI Location: src/app/components/views/ADCSettingView.tsx
• Channels: 4 channels displayed (Water Level, Temperature, Pressure, Flow Rate)
• Integration: Voltage and raw value display expected from hardware

Sensors:

• Rainfall Sensor - RainfallView.tsx, RainfallSettingView.tsx
• Water Level Sensor - LevelSettingView.tsx
• Temperature/Pressure - ADCSettingView.tsx
• Evaporation Sensor - EVAPSettingView.tsx
• Siren Control - SirenSettingView.tsx

Status Monitoring:

• Header displays: Online status, battery voltage, solar voltage
• Mock state only - no real hardware polling

Environment Configuration

Required Environment Variables (Expected): Based on typical RTU applications:

VITE_API_BASE_URL=http://device.local/api
VITE_WS_URL=ws://device.local/ws
VITE_DEVICE_ID=STN-001

Current State:

• No .env files present
• No environment variable usage detected
• All values hardcoded

Secrets Location:

• Not applicable (no backend integration yet)

Webhooks & Callbacks

Incoming:

• None detected
• Expected: WebSocket for real-time sensor data

Outgoing:

• None detected
• Expected: HTTP POST for data upload to server

CI/CD & Deployment

Hosting:

• Platform: Figma Make (inferred from package name @figma/my-make-file)
• Build Command: vite build
• Output: Static SPA files in dist/

CI Pipeline:

• None detected (no .github/workflows, .gitlab-ci.yml, etc.)

Integration Gaps

Missing Critical Integrations:

1. Backend API Client

   • Missing: fetch/axios configuration
   • Impact: Application shows only static data
   • Recommendation: Add API client with error handling

2. WebSocket Connection

   • Missing: Real-time sensor data updates
   • Impact: Manual refresh required for data updates
   • Recommendation: Implement WebSocket for live data

3. Authentication Flow

   • Missing: Login/logout API integration
   • Impact: Auth is UI-only
   • Recommendation: Connect to device auth endpoint

4. File Operations

   • Missing: Download/delete API calls
   • Impact: Flash memory is read-only mock
   • Recommendation: Implement file API client

5. Hardware Commands

   • Missing: Save settings to device
   • Impact: Settings forms don't persist
   • Recommendation: Add POST endpoints for configuration

Third-Party Services Summary

Currently Integrated:

Service	Purpose	Location
Lucide React	Icons	All view components
Radix UI	Accessible components	src/app/components/ui/

Recommended for Integration:

Service	Purpose	Use Case
axios/fetch	HTTP client	API communication
SWR/React Query	Data fetching	Caching and synchronization
zod	Validation	API response validation
WebSocket API	Real-time	Sensor data streaming

---

Integration audit: 2026-03-13