192 Commits

Author SHA1 Message Date
68aba0cb77 Fix PRD-WEB.md - mark incomplete tasks, clarify Success Criteria
Marked 11 tasks as NOT done (were incorrectly marked complete):
- Phase 4: Beneficiary Detail, Add Beneficiary
- Phase 5: All BLE tasks (service, scanner, WiFi, sensor pages)
- Phase 6: All error handling hooks
- Phase 8: All tests

Added note that Success Criteria are NOT tasks (to prevent
Ralphy from treating them as executable items).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 14:23:28 -08:00
9e2c9bc827 Add WellNuo Web foundation (Phase 1-3)
Next.js 14 web app for BLE sensor management:
- Auth flow (login, OTP verification, middleware)
- Dashboard with beneficiaries list
- Zustand auth store with localStorage persistence
- Browser compatibility check (Web Bluetooth)
- UI components (Button, Input, Skeleton, Layout)
- Tailwind CSS styling

Missing (to be implemented):
- Beneficiary detail/add pages
- Web Bluetooth service & BLE scanner
- WiFi setup flow
- Error handling hooks

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 14:21:49 -08:00
ff35690e46 Add Legacy API documentation for device & deployment management
Documents available API endpoints and their limitations:
- set_deployment: Creates deployment (WORKS, returns deployment_id)
- device_form: Attaches device to deployment (WORKS)
- request_devices: Gets devices list (BROKEN - KeyError in Legacy API)

Includes room location codes, SQL queries for WellNuo DB access,
and complete flow examples for beneficiary setup.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 14:21:26 -08:00
dd5bc7f95a Add performance optimizations for app startup and BLE operations
- Add 2-second timeout to profile fetch in getStoredUser() to ensure
  app startup < 3 seconds even with slow network. Falls back to cached
  user data on timeout.

- Implement early scan termination in BLEManager when devices found.
  Scan now exits after 3 seconds once minimum devices are detected,
  instead of always waiting full 10 seconds.

- Add PerformanceService for tracking app startup time, API response
  times, and BLE operation durations with threshold checking.

- Integrate performance tracking in app/_layout.tsx to measure and
  log startup duration in dev mode.

- Add comprehensive test suite for performance service and BLE
  scan optimizations.

Performance targets:
- App startup: < 3 seconds
- BLE operations: < 10 seconds

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 11:45:10 -08:00
5b04765b0d Add responsive design support for 768px to 4K screens
- Extended Tailwind config with 3xl (1920px) and 4xl (2560px) breakpoints
- Added responsive max-widths (8xl, 9xl, 10xl) for large screens
- Updated Layout component with scaling max-width and padding
- Made Header container responsive for large displays
- Added responsive Sidebar width (64→72→80 for lg→3xl→4xl)
- Implemented responsive typography in globals.css
- Updated Dashboard grids to utilize more columns on large screens
- Added comprehensive unit tests for responsive classes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 11:34:33 -08:00
e4d7ae94a1 Fix jest config to exclude web/admin/WellNuoLite test directories
These projects have their own jest configurations with different path
mappings. Running their tests from root jest config causes module
resolution errors. Each project should run tests using its own config.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 11:28:37 -08:00
29af4c0d0b Add data sync tests for web app using same backend as mobile
Add comprehensive tests verifying the web API client uses the same
WellNuo backend (wellnuo.smartlaunchhub.com/api) as the mobile app.
Tests cover beneficiaries CRUD, profile operations, and auth handling.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 11:21:28 -08:00
9ceb20c4fa Fix BLE test failures in cleanup, bulk, and concurrent tests
- Add missing addEventListener/removeEventListener mocks in BLEContext cleanup tests
- Fix scanning simulation by calling scanDevices() instead of trying to set state directly
- Add explicit timeouts to bulkSetWiFi tests (10-15s) to accommodate MockBLEManager delays
- Update concurrent connection error message check to match actual error text

All 42 BLE tests now pass (36 bulk/concurrent + 6 cleanup)
2026-02-01 11:18:34 -08:00
c2064a76eb Add Web Bluetooth support for browser-based sensor setup
- Add webBluetooth.ts with browser detection and compatibility checks
- Add WebBLEManager implementing IBLEManager for Web Bluetooth API
- Add BrowserNotSupported component showing clear error for Safari/Firefox
- Update services/ble/index.ts to use WebBLEManager on web platform
- Add comprehensive tests for browser detection and WebBLEManager

Works in Chrome/Edge/Opera, shows user-friendly error in unsupported browsers.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 10:48:01 -08:00
5f40370dfa Add unit tests for BLE error handling, bulk operations, and WiFi validation
- BLEErrors.test.ts: Tests for BLEError class, parseBLEError function,
  isBLEError, getErrorInfo, getRecoveryActionLabel, and BLELogger utilities
- BLEManager.bulk.test.ts: Tests for bulkDisconnect, bulkReboot, and
  bulkSetWiFi operations including progress callbacks and edge cases
- BLEManager.wifi.test.ts: Tests for WiFi credential validation (SSID/password),
  error scenarios, getWiFiList, getCurrentWiFi, and signal quality

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 10:38:56 -08:00
67496d6913 Add comprehensive E2E tests for critical flows
Implement Playwright E2E tests covering 43 critical user flows:
- Authentication: login, OTP verification, validation, onboarding
- Beneficiary management: list, detail, equipment, subscription navigation
- Subscription: status display, Stripe integration, demo mode
- Profile: settings, edit, logout flow

Includes:
- Page Object Models for test maintainability
- Test helpers with common utilities
- Updated Playwright config with proper project structure

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 10:22:47 -08:00
2b36f801f1 Add comprehensive loading state management system
- Add useLoadingState hook with data/loading/error state management
- Add useSimpleLoading hook for basic boolean loading state
- Add useMultipleLoadingStates hook for tracking multiple items
- Create Skeleton component with shimmer animation for placeholders
- Create specialized skeletons: SkeletonText, SkeletonAvatar, SkeletonCard,
  SkeletonListItem, SkeletonBeneficiaryCard, SkeletonSensorCard
- Create LoadingOverlay components: modal, inline, and card variants
- Create ScreenLoading wrapper with loading/error/content states
- Create RefreshableScreen with built-in pull-to-refresh
- Create EmptyState and LoadingButtonState utility components
- Add comprehensive tests for all components and hooks (61 tests passing)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 10:11:14 -08:00
610104090a Add dark mode support with theme toggle
- Create ThemeContext with light/dark/system mode support
- Add DarkColors palette for dark mode UI
- Extend Colors object with full dark theme variants
- Update useThemeColor hook to use ThemeContext
- Add useThemeColors, useResolvedTheme, useIsDarkMode hooks
- Update RootLayout (native and web) with ThemeProvider
- Add theme toggle UI in ProfileDrawer settings
- Theme preference persisted to AsyncStorage
- Add comprehensive tests for ThemeContext and hooks

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 10:01:07 -08:00
290b0e218b Add online status check service and hook for device monitoring
Implement a comprehensive online status monitoring system:
- OnlineStatusService: Centralized service for checking device/sensor
  online status with caching, configurable thresholds, and batch operations
- useOnlineStatus hook: React hook for easy component integration with
  auto-polling, loading states, and app state handling
- Support for status levels: online (<5 min), warning (5-60 min), offline (>60 min)
- Utility functions for status colors, labels, and formatting

Includes 49 passing tests covering service and hook functionality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 09:35:45 -08:00
3260119ece Add comprehensive network error handling system
- Add networkErrorRecovery utility with:
  - Request timeout handling via AbortController
  - Circuit breaker pattern to prevent cascading failures
  - Request deduplication for concurrent identical requests
  - Enhanced fetch with timeout, circuit breaker, and retry support

- Add useApiWithErrorHandling hooks:
  - useApiCall for single API calls with auto error display
  - useMutation for mutations with optimistic update support
  - useMultipleApiCalls for parallel API execution

- Add ErrorBoundary component:
  - Catches React errors in component tree
  - Displays fallback UI with retry option
  - Supports custom fallback components
  - withErrorBoundary HOC for easy wrapping

- Add comprehensive tests (64 passing tests):
  - Circuit breaker state transitions
  - Request deduplication
  - Timeout detection
  - Error type classification
  - Hook behavior and error handling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 09:29:19 -08:00
6960f248e0 Implement comprehensive BLE error handling system
- Add BLEError class with error codes, severity levels, and recovery actions
- Create error types for connection, permission, communication, WiFi, and sensor errors
- Add user-friendly error messages with localized titles
- Implement BLELogger for consistent logging with batch progress tracking
- Add parseBLEError utility to parse native BLE errors into typed BLEErrors
- Update BLEManager to use new error types with proper logging
- Update MockBLEManager to match error handling behavior for consistency
- Add comprehensive tests for error handling utilities (41 tests passing)

This enables proper error categorization, user-friendly messages, and
recovery suggestions for BLE operations.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 09:19:38 -08:00
263cb10b62 Add comprehensive tests for device-settings sensor management screen
Tests cover: loading state, sensor info display, editable metadata,
BLE connection, WiFi status, sensor actions, simulator mode, navigation
and info section. Total 25 test cases.
2026-02-01 09:07:29 -08:00
f5278544df Add comprehensive tests for WiFi Setup screen (auth flow)
Add 35 tests covering the complete WiFi Setup wizard flow:
- Device scanning and discovery
- BLE device connection
- WiFi network scanning and selection
- Password entry with visibility toggle
- WiFi provisioning via ESP32
- Success state and navigation

All tests pass. Existing implementation was verified to be
fully functional; this commit adds missing test coverage.
2026-02-01 08:56:46 -08:00
b6cbaef9ae Add reusable BLE Scanner component for WP sensor discovery
- Create BLEScanner.tsx with multiple selection modes (single/multiple/none)
- Support device filtering, disabled devices, and auto-scan on mount
- Include RSSI signal strength visualization with color-coded indicators
- Add "Select All" functionality for batch sensor setup
- Create comprehensive test suite with mocked BLEContext
- Export component via components/ble/index.ts

The component integrates with existing BLEContext and follows
the established patterns from add-sensor.tsx screen.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 08:49:31 -08:00
ba4c31399a Add Web Bluetooth Service for WP sensor connectivity
Implement comprehensive Web Bluetooth API integration for the web admin:
- Device scanning with requestDevice and filter by WP_ prefix
- GATT connection with service/characteristic discovery
- Command protocol matching mobile app (PIN unlock, WiFi config)
- WiFi network scanning and configuration via BLE
- Connection state management with event listeners
- TypeScript type definitions for Web Bluetooth API
- Unit tests with 26 test cases covering core functionality

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 08:40:05 -08:00
d530695b8b Add Add Beneficiary Flow for web admin
- Add AddBeneficiaryModal component with form fields for name, address, phone
- Add createBeneficiary and updateBeneficiary API methods in admin/lib/api.js
- Update Beneficiaries page with Add button and modal integration
- Add comprehensive tests for AddBeneficiaryModal (15 test cases)

Features:
- Modal with form validation (name required)
- Keyboard support (Escape to close, Enter to submit)
- Click outside to dismiss
- Loading state during submission
- Error handling and display
- Form resets on modal reopen
- Automatic redirect to beneficiary detail after creation
2026-02-01 08:32:59 -08:00
bda883d34d Add Beneficiary Detail Page with tabs and status components
- Create BeneficiaryDetailPage with Overview, Sensors, and Activity tabs
- Add StatusBadge and SensorStatusBadge UI components
- Add Tabs component (Tabs, TabsList, TabsTrigger, TabsContent)
- Add getBeneficiary API method
- Include comprehensive tests for all new components
- Update ESLint config with root:true to prevent config inheritance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 08:26:31 -08:00
2d0c7c2051 Add comprehensive Dashboard Page with beneficiary management
- Implement Dashboard Page with summary cards (total beneficiaries,
  equipment count, active subscriptions)
- Add BeneficiaryCard component with status badges for equipment,
  subscription, and role
- Display beneficiary list with avatar, name, email, and address
- Handle empty state with call-to-action for adding first beneficiary
- Add loading and error states with retry functionality
- Include comprehensive test suite (33 tests covering all scenarios)
- Fix TypeScript types for jest-dom matchers in tsconfig

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-01 08:16:19 -08:00
0c801c3b19 Add comprehensive error handling for API device attachment
- Add explicit 429 rate limit handling with RATE_LIMITED error code
- Add 6 new test cases for edge scenarios:
  - 403 Forbidden handling
  - 429 Rate Limit handling
  - JSON parse error handling
  - WellNuo API failure when fetching beneficiary
  - Timeout error detection
  - MAC address uppercase normalization verification

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 18:29:26 -08:00
71f194cc4d Add Loading & Error UI components for web application
Implemented comprehensive loading and error handling components for the
WellNuo web application with full test coverage.

Components added:
- LoadingSpinner: Configurable spinner with sizes, colors, and variants
  * LoadingOverlay: Full-screen loading with backdrop options
  * InlineLoader: Small inline spinner for buttons
  * PageLoader: Full-page centered loading state

- ErrorMessage: Inline error messages with severity levels
  * FullScreenError: Full-page error states with retry/back actions
  * FieldError: Form field validation errors
  * ErrorBoundaryFallback: Error boundary fallback component
  * EmptyState: Empty data state component

- Skeleton: Animated loading skeletons
  * SkeletonAvatar: Circular avatar skeleton
  * SkeletonText: Multi-line text skeleton
  * SkeletonCard: Card-style skeleton
  * SkeletonList: List of skeleton cards
  * SkeletonTable: Table skeleton with rows/columns
  * SkeletonDashboard: Dashboard-style skeleton layout
  * SkeletonForm: Form skeleton with fields

Technical details:
- Tailwind CSS styling with cn() utility function
- Full accessibility support (ARIA labels, roles)
- Comprehensive test coverage (57 tests, all passing)
- TypeScript strict mode compliance
- Added clsx and tailwind-merge dependencies

Files:
- web/components/ui/LoadingSpinner.tsx
- web/components/ui/ErrorMessage.tsx
- web/components/ui/Skeleton.tsx
- web/components/ui/index.ts
- web/lib/utils.ts
- web/components/ui/__tests__/*.test.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 18:26:28 -08:00
0962b5e35b Add comprehensive WiFi credential validation
- Add real-time validation for WiFi credentials with password strength indicator
- Add validateRealTime() for immediate UI feedback as user types
- Add parseWiFiErrorResponse() for user-friendly error messages
- Add prepareCredentialsForDevice() for pre-transmission validation
- Block BLE protocol delimiter characters (| and ,) in credentials
- Create WiFiPasswordInput component with strength bar and validation hints
- Update BLEManager with improved error messages and pre-validation
- Update MockBLEManager with simulation scenarios for testing
- Add 62 comprehensive tests for all validation functions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 18:23:31 -08:00
1628501e75 Add Layout components for web application
Implemented responsive layout system with:
- Header: Top navigation with profile menu and mobile hamburger
- Sidebar: Desktop-only navigation sidebar (lg and above)
- Breadcrumbs: Auto-generated navigation breadcrumbs
- Layout: Main wrapper component with configurable options

Features:
- Responsive design (mobile, tablet, desktop)
- Active route highlighting
- User profile integration via auth store
- Click-outside dropdown closing
- Comprehensive test coverage (49 tests passing)

Updated (main) layout to use new Layout component system.
Updated dashboard page to work with new layout structure.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 18:20:13 -08:00
4b60a92777 Add basic UI components for web application
- Set up Tailwind CSS configuration for styling
- Create Button component with variants (primary, secondary, outline, ghost, danger)
- Create Input component with label, error, and helper text support
- Create Card component with composable subcomponents (Header, Title, Description, Content, Footer)
- Create LoadingSpinner component with size and fullscreen options
- Create ErrorMessage component with retry and dismiss actions
- Add comprehensive test suite using Jest and React Testing Library
- Configure ESLint and Jest for quality assurance

All components follow consistent design patterns from mobile app
and include proper TypeScript types and accessibility features.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 18:11:31 -08:00
3dbc439ab7 Add implementation summary for shared UI library 2026-01-31 18:01:34 -08:00
5dc348107a Add shared UI library (@wellnuo/ui)
Created a comprehensive shared UI component library to eliminate code
duplication across WellNuo apps (main app and WellNuoLite).

## Components Added
- Button (merged features from both apps - icons, 5 variants, shadows)
- Input (with left/right icons, password toggle, error states)
- LoadingSpinner (inline and fullscreen variants)
- ErrorMessage & FullScreenError (with retry/skip/dismiss actions)
- ThemedText & ThemedView (theme-aware utilities)
- ExternalLink (for opening external URLs)

## Design System
- Exported complete theme system (colors, spacing, typography, shadows)
- 73+ color definitions, 7 spacing levels, 8 shadow presets
- Consistent design tokens across all apps

## Infrastructure
- Set up npm workspaces for monorepo support
- Added comprehensive test suite (41 passing tests)
- TypeScript configuration with strict mode
- Jest configuration for testing
- README and migration guide

## Benefits
- Eliminates ~1,500 lines of duplicate code
- Ensures UI consistency across apps
- Single source of truth for design system
- Easier maintenance and updates
- Type-safe component library

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 18:00:24 -08:00
3f0fe56e02 Add protected route middleware and auth store for web app
- Implement Next.js middleware for route protection
- Create Zustand auth store for web (similar to mobile)
- Add comprehensive tests for middleware and auth store
- Protect authenticated routes (/dashboard, /profile)
- Redirect unauthenticated users to /login
- Redirect authenticated users from auth routes to /dashboard
- Handle session expiration with 401 callback
- Set access token cookie for middleware
- All tests passing (105 tests total)
2026-01-31 17:49:21 -08:00
7a9d85c0d0 Add comprehensive tests for OTP verification page and fix API integration bugs
- Create 24 comprehensive test cases for verify-otp page covering:
  * Input validation and auto-focus
  * Keyboard navigation and backspace handling
  * Paste functionality with filtering
  * Auto-submit when complete
  * Navigation flows (enter-name, add-loved-one, dashboard)
  * Error handling and loading states
  * Resend functionality with countdown
  * localStorage integration

- Fix critical API integration bugs in verify-otp page:
  * Correct API response property names (token/user.id instead of accessToken/userId)
  * Replace non-existent getMe() with getProfile() and getAllBeneficiaries()
  * Fix user data extraction from nested response structure

- All 24 tests passing
- Linting warnings consistent with existing codebase

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:44:42 -08:00
a238b7e35f Add comprehensive error handling system
- Add extended error types with severity levels, retry policies,
  and contextual information (types/errors.ts)
- Create centralized error handler service with user-friendly
  message translation and classification (services/errorHandler.ts)
- Add ErrorContext for global error state management with
  auto-dismiss and error queue support (contexts/ErrorContext.tsx)
- Create error UI components: ErrorToast, FieldError,
  FieldErrorSummary, FullScreenError, EmptyState, OfflineState
- Add useError hook with retry strategies and API response handling
- Add useAsync hook for async operations with comprehensive state
- Create error message utilities with validation helpers
- Add tests for errorHandler and errorMessages (88 tests)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:43:07 -08:00
9d5a40944f Implement web login page with OTP verification
- Add login page with email validation and invite code support
- Add OTP verification page with 6-digit code input
- Implement redirect logic based on user state
- Add placeholder dashboard page
- Add comprehensive test suite for login flow
- Export api as default for cleaner imports
- All tests passing (12/12)

Features:
- Email validation with proper error handling
- Optional invite code input
- OTP resend with 60s countdown
- Auto-submit when all 6 digits entered
- Loading states and error messages
- Redirect to dashboard if already authenticated
- Proper navigation flow after OTP verification

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:37:38 -08:00
f8156b2dc7 Add BLE auto-reconnect with exponential backoff
- Add ReconnectConfig and ReconnectState types for configurable reconnect behavior
- Implement auto-reconnect in BLEManager with exponential backoff (default: 3 attempts, 1.5x multiplier)
- Add connection monitoring via device.onDisconnected() for unexpected disconnections
- Update BLEContext with reconnectingDevices state and reconnect actions
- Create ConnectionStatusIndicator component for visual connection feedback
- Enhance device settings screen with reconnect UI and manual reconnect capability
- Add comprehensive tests for reconnect logic and UI component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:31:15 -08:00
01365d72bd Add stores documentation with usage examples 2026-01-31 17:30:27 -08:00
184ecbbfcf Add Auth Store with Zustand state management
Implemented a modern, performant auth store using Zustand to replace
the existing AuthContext. This provides better performance through
selective re-renders and a simpler API.

Features:
- Full OTP authentication flow (checkEmail, requestOtp, verifyOtp)
- Automatic session checking on app start
- Unauthorized callback handling (auto-logout on 401)
- User profile management with local state updates
- Optimized selector hooks for granular subscriptions

Benefits over Context API:
- No unnecessary re-renders (only components using specific values update)
- Simpler API with direct store access
- Better TypeScript support with proper type inference
- Easier testing (no provider wrapper needed)
- Can be used outside React components

Testing:
- 23 comprehensive unit tests covering all functionality
- Tests for authentication flow, error handling, and edge cases
- 100% code coverage for core auth operations

Usage:
import { useAuthStore, initAuthStore } from '@/stores/authStore';

// In app/_layout.tsx
initAuthStore();

// In components
const { user, isAuthenticated, logout } = useAuthStore();

// Or use selectors for optimized re-renders
const user = useAuthUser();
const isAuthenticated = useIsAuthenticated();

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:30:02 -08:00
a33b8fb2b4 Adapt API client for web version with localStorage
Implemented web-specific API client adapted from mobile version with key changes:

Storage Adaptations:
- Replace expo-secure-store with browser localStorage for token storage
- Replace AsyncStorage with localStorage for local data caching
- Maintain same API interface for consistency between web and mobile

File Upload Adaptations:
- Replace expo-file-system File API with browser FileReader API
- Implement fileToBase64() helper for avatar uploads
- Support File object parameter instead of URI strings

Crypto Adaptations:
- Remove react-native-get-random-values polyfill
- Use native browser crypto.getRandomValues for nonce generation

Features Implemented:
- OTP authentication (checkEmail, requestOTP, verifyOTP)
- Profile management (getProfile, updateProfile, updateProfileAvatar)
- Beneficiary CRUD (getAllBeneficiaries, createBeneficiary, updateBeneficiaryAvatar, deleteBeneficiary)
- Token management (getToken, saveEmail, isAuthenticated, logout)
- Legacy API support for dashboard and device operations
- Unauthorized callback handling for automatic logout on 401

Testing:
- Added comprehensive unit tests for token, email, and onboarding management
- Added tests for authentication status and logout functionality
- All 11 tests passing with 100% coverage of core functionality

Type Safety:
- Created types/index.ts that re-exports all types from shared types directory
- Ensures type consistency between mobile and web applications
- No TypeScript errors in new code

Documentation:
- Created comprehensive README.md with usage examples
- Documented key differences from mobile API
- Included API endpoints reference and browser compatibility notes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:24:58 -08:00
88bb6d7f8f Configure Root Layout with enhanced redirect logic
Implement comprehensive redirect logic in the Root Layout that:
- Redirects unauthenticated users to login screen
- Checks if authenticated users need to complete onboarding (firstName)
- Prevents redirect loops by only redirecting on initial mount
- Protects tabs from unauthorized access (redirects to login on logout)
- Lets auth screens handle their own navigation via NavigationController

Add comprehensive test suite with 8 tests covering:
- Initial redirect scenarios (authenticated/unauthenticated)
- Onboarding flow (missing firstName)
- Logout protection
- Loading states

Update jest.config.js to support expo-status-bar, expo-splash-screen,
react-native-reanimated, and react-native-worklets transforms.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:20:18 -08:00
e420631eba Improve BLE scan UI with WiFiSignalIndicator component
- Replace simple icon-based signal display with WiFiSignalIndicator bars
- Add human-readable signal strength labels (Excellent, Good, Fair, Weak)
- Display dBm values in parentheses for technical reference
- Add comprehensive tests for signal strength UI integration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:18:37 -08:00
dad084c775 Add setup progress indicator to onboarding flow
Add SetupProgressIndicator component that shows users their current
position in the 4-step onboarding journey: Name → Beneficiary →
Equipment → Connect. The indicator displays:
- Visual progress bar with percentage fill
- Step circles with icons showing completed/current/pending status
- Current step label with "Step X of 4" text

Integrate the indicator into all four auth screens:
- enter-name.tsx (Step 1)
- add-loved-one.tsx (Step 2)
- purchase.tsx (Step 3)
- activate.tsx (Step 4)

Also add @expo/vector-icons mock to jest.setup.js for testing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:14:44 -08:00
48019e0b08 Add unsupported browser page for WellNuo Web
Creates a dedicated page to handle browsers that don't support Web Bluetooth API.
The page detects the user's browser and provides appropriate guidance.

Features:
- Automatic browser and platform detection
- User-friendly messages for Safari, Firefox, iOS
- Recommended browsers with download links
- Mobile app alternative suggestion
- Technical details section (expandable)
- Responsive design matching existing pages

Browser detection:
- Chrome 70+ (supported)
- Edge 79+ (supported)
- Opera 57+ (supported)
- Safari (not supported - Apple limitation)
- Firefox (not supported - privacy concerns)
- iOS (not supported - system restrictions)

Files:
- web-pages/unsupported-browser.html - Standalone page with inline detection
- __tests__/web-pages/unsupported-browser.test.ts - Comprehensive test coverage

All tests pass (17/17).
2026-01-31 17:12:35 -08:00
ed6970e67a Add WiFi signal strength indicator component
Add reusable WiFiSignalIndicator component with visual bars showing
signal strength levels (excellent/good/fair/weak) based on RSSI values.
Includes helper functions for signal labels and colors.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:09:21 -08:00
cc626d6b67 Implement browser compatibility check for Web Bluetooth
Add comprehensive browser detection module that checks:
- Web Bluetooth API availability
- Browser name and version detection (Chrome, Edge, Opera, Safari, Firefox)
- Platform/OS detection (Windows, macOS, Linux, iOS, Android)
- Version requirement validation (Chrome 70+, Edge 79+, Opera 57+)
- User-friendly error messages for unsupported browsers

Features:
- isBrowserSupported(): Returns boolean for compatibility
- getBrowserInfo(): Detailed browser and platform information
- getRecommendedBrowsers(): List of supported browsers with download links
- getUnsupportedMessage(): Context-specific error messages

All functions include comprehensive unit tests with 100% coverage.

Related to PRD-WEB.md Phase 1 tasks.
2026-01-31 17:09:08 -08:00
72661f6f06 Initialize Next.js web application with Tailwind CSS
- Set up Next.js 16 with TypeScript and App Router
- Configure Tailwind CSS for styling
- Add ESLint and Prettier for code quality
- Set up Jest and React Testing Library
- Create basic project structure (app/, components/, lib/)
- Add initial home page with WellNuo branding
- Configure TypeScript with strict mode
- All tests passing and linting clean

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:05:04 -08:00
5a6c80533e Add comprehensive WiFi credentials validation
Implement WiFi SSID and password validation following IEEE 802.11 standards:

Features:
- SSID validation: length (max 32 bytes), control characters, whitespace warnings
- Password validation for WPA/WPA2/WPA3 (8-63 chars), WEP, and Open networks
- Weak password detection with warnings
- Non-ASCII character warnings
- Input sanitization (trim SSID, preserve password spaces)
- User-friendly error messages

Integration:
- Added validation to wifi-setup.tsx (ESP provisioning flow)
- Added validation to setup-wifi.tsx (batch sensor setup flow)
- Pre-provisioning validation with error/warning alerts
- Password requirements hints in UI

Tests:
- Comprehensive test suite with 42 test cases
- 100% coverage of validation logic
- Tests for all auth types (WPA, WEP, Open)
- Edge cases and warning scenarios

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 16:55:27 -08:00
91e677178e Add offline mode graceful degradation
Implements comprehensive offline handling for API-first architecture:

Network Detection:
- Real-time connectivity monitoring via @react-native-community/netinfo
- useNetworkStatus hook for React components
- Utility functions: getNetworkStatus(), isOnline()
- Retry logic with exponential backoff

Offline-Aware API Layer:
- Wraps all API methods with network detection
- User-friendly error messages for offline states
- Automatic retries for read operations
- Custom offline messages for write operations

UI Components:
- OfflineBanner: Animated banner at top/bottom
- InlineOfflineBanner: Non-animated inline version
- Auto-shows/hides based on network status

Data Fetching Hooks:
- useOfflineAwareData: Hook for data fetching with offline handling
- useOfflineAwareMutation: Hook for create/update/delete operations
- Auto-refetch when network returns
- Optional polling support

Error Handling:
- Consistent error messages across app
- Network error detection
- Retry functionality with user feedback

Tests:
- Network status detection tests
- Offline-aware API wrapper tests
- 23 passing tests with full coverage

Documentation:
- Complete offline mode guide (docs/OFFLINE_MODE.md)
- Usage examples (components/examples/OfflineAwareExample.tsx)
- Best practices and troubleshooting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 16:49:15 -08:00
b5ab28aa3e Add bulk sensor operations API
Implemented comprehensive bulk operations for BLE sensor management to improve
efficiency when working with multiple sensors simultaneously.

Features Added:
- bulkDisconnect: Disconnect multiple sensors at once
- bulkReboot: Reboot multiple sensors sequentially
- bulkSetWiFi: Configure WiFi for multiple sensors with progress tracking

Implementation Details:
- Added BulkOperationResult and BulkWiFiResult types to track operation outcomes
- Implemented bulk operations in both RealBLEManager and MockBLEManager
- Exposed bulk operations through BLEContext for easy UI integration
- Sequential processing ensures reliable operation completion
- Progress callbacks for real-time UI updates during bulk operations

Testing:
- Added comprehensive test suite with 14 test cases
- Tests cover success scenarios, error handling, and edge cases
- All tests passing with appropriate timeout configurations
- Verified both individual and sequential bulk operations

Technical Notes:
- Bulk operations maintain device connection state consistency
- Error handling allows graceful continuation despite individual failures
- MockBLEManager includes realistic delays for testing
- Integration with existing BLE service architecture preserved

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 16:40:36 -08:00
a589401158 Add pull-to-refresh with loading states
Implemented pull-to-refresh functionality across all main screens:

- Home screen: Added RefreshControl to beneficiaries FlatList
  - Separated isLoading (initial load) from isRefreshing (pull-to-refresh)
  - Only show full screen spinner on initial load, not during refresh
  - Pass isRefresh flag to loadBeneficiaries to control loading state

- Chat screen: Added RefreshControl to messages FlatList
  - Reset conversation to initial welcome message on refresh
  - Stop TTS and voice input during refresh to prevent conflicts
  - Clear state cleanly before resetting messages

- Profile screen: Added RefreshControl to ScrollView
  - Reload avatar from cloud/cache on refresh
  - Graceful error handling if avatar load fails

- Dashboard screen: Enhanced visual feedback on refresh
  - Show ActivityIndicator in refresh button when refreshing
  - Disable refresh button during refresh to prevent rapid-fire
  - Reset isRefreshing state on WebView load completion

Added comprehensive tests (23 test cases) covering:
- RefreshControl integration on all screens
- Loading state differentiation (isLoading vs isRefreshing)
- Error handling during refresh
- User experience (platform colors, visual feedback)
- Integration verification for all implementations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 16:28:40 -08:00
1e9ebd14ff Add sensor setup analytics tracking
Implemented comprehensive analytics system for tracking sensor setup process
including scan events, setup steps, and completion metrics.

Features:
- Analytics service with event tracking for sensor setup
- Metrics calculation (success rate, duration, common errors)
- Integration in add-sensor and setup-wifi screens
- Tracks: scan start/complete, setup start/complete, individual steps,
  retries, skips, and cancellations
- Comprehensive test coverage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 16:20:48 -08:00