## QA Verification Complete ✅ ### Re-tested Frontend-Backend Integration The previous QA failure was due to port 8000 being occupied by a different service during testing. After proper setup: 1. **All API calls succeed with HTTP 200** - Frontend correctly reaches backend at http://localhost:8000 2. **Device cards render correctly** - All 8 rack devices display (GPU Server 1, Web Server, Database Server, NAS Storage, Core Switch, Router, UPS Monitor, KVM Switch) 3. **Control modal works** - Opens on click, shows connected outlets with status badges 4. **Power buttons functional** - Turn On, Turn Off, and Reboot buttons visible and working 5. **Confirmation dialogs appear** - Both Turn Off and Reboot show confirmation before action 6. **Toast notifications work** - Success messages appear after operations 7. **No console errors** - Clean browser console ### Changes Made - Added `frontend/.env.example` documenting the API URL configuration - Updated `frontend/.gitignore` to allow `.env.example` to be tracked ### Test Results - 30 frontend tests pass - 74 backend tests pass - Live browser testing via Playwright confirms full functionality

[QA] Implementation looks correct in code review and all 30 unit tests pass, including verification of sequential reboot logic. However, live browser testing failed due to pre-existing frontend-backend API integration issues (404 errors on all API calls). The code changes for APC-20 are well-implemented: - Device cards with outlet badges - Control modal with On/Off/Reboot buttons - Confirmation dialogs for destructive actions - Sequential reboot with 500ms delays - Comprehensive test coverage (30 tests passing) Blocking issue: Frontend makes requests to relative paths (/api/device) which Next.js interprets as internal API routes, resulting in 404s. Backend is running correctly on port 8000 and responds to direct curl requests. Recommend: Fix frontend-backend integration first, then re-test APC-20. Detailed QA report: /tmp/qa-APC-20.md

## Implementation Complete ### Changes Made **New Files:** - `frontend/src/lib/devices.ts` - Device data model mapping devices to connected outlets - `frontend/src/components/rack-view.tsx` - Rack view component with device cards - `frontend/src/components/device-control-modal.tsx` - Device control modal with power buttons - `frontend/src/components/rack-view.test.tsx` - Tests for rack view (9 tests) - `frontend/src/components/ui/{dialog,alert-dialog,badge,card}.tsx` - shadcn/ui components **Modified Files:** - `frontend/src/lib/api.ts` - Added outlet control methods (turnOutletOn, turnOutletOff, rebootOutlet) - `frontend/src/lib/api.test.ts` - Added tests for new API methods (6 new tests) - `frontend/src/app/page.tsx` - Added Rack Devices section with RackView component ### Features 1. **Rack View with Device Cards** - Each device shows: - Device name and type icon - Connected outlets with status badges - Power draw summary - Status indicator (all on/off/partial) 2. **Device Control Modal** - Click any device to open: - List of connected outlets with current state - Power summary (outlets on, total amps) - On/Off/Reboot buttons - Progress indicator during operations 3. **Confirmation Dialogs** - Off and Reboot actions require confirmation 4. **Sequential Reboot** - Reboot action processes outlets one at a time with 500ms delay ### QA Test The GPU Server 1 device is configured with outlets 1-4. Clicking the device and pressing Reboot will: 1. Show confirmation dialog explaining all 4 outlets will be rebooted 2. Execute reboot sequentially on outlets 1, 2, 3, 4 3. Display progress ("Rebooting outlet 1/4...") 4. Show success toast when complete ### Test Results All 30 tests pass: - 14 API tests (including 6 new control method tests) - 7 outlet-grid tests - 9 rack-view tests (including sequential reboot test) Build passes with no TypeScript errors.