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>
- 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
- 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>
- 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>
