- 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>
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>
- 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>
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>
- 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)
- 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>
- 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>
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>
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.
- 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>
- Move role selector (Caretaker/Guardian) above email input in Access screen
- Remove "(view only)" suffix from Caretaker role in email templates
- Remove "expires in 7 days" text from invitation emails
- Remove expires_at field from invitation creation (invitations never expire)
- Fix deletion of accepted invitations (now also removes user_access record)
- Add favicon to accept-invite.html page
- Add GET /api/invitations/info/:code endpoint to fetch role before accepting
- Show role and permissions on accept page BEFORE clicking Accept
- Simplify success page: remove permissions list, add link to wellnuo.com
- Minimalist design: light header background, logo only
