## QA PASSED See QA report document: 1415055e-254c-42bf-b73c-4b788bcbcd7e **Bug Fix Verified:** The Device Form Dialog crash (Radix UI Select empty string error) has been fixed. The dialog now opens without errors using the sentinel value approach. **Features Verified Working:** - Device Management section visible on Settings page - Create Device dialog opens without crash - Device creation works (name, type, height, rack assignment) - Devices appear in list with correct display - Action buttons (edit, delete, outlet assignment) present - Toast notifications working **Screenshots:** - /tmp/APC-47-final-02-dialog-opened.png - Dialog opens correctly - /tmp/APC-47-final-04-after-create.png - Device created successfully - /tmp/APC-47-final-12-final.png - Multiple devices in list All hypotheses tested. Critical bug fixed and verified. Marking as done.

## Fix Applied for QA Bug (Device Form Dialog Crash) ### Problem The Device Form Dialog crashed when opened because the rack assignment Select component had an empty string value: ```tsx <SelectItem value="">Not assigned</SelectItem> ``` Radix UI Select reserves empty string ("") for clearing selections and showing placeholders, so it throws an error when used as an actual item value. ### Solution 1. **Added sentinel constant** (line 41-43): ```tsx // Sentinel value for "no rack assigned" - Radix UI Select does not allow empty string values // because empty string is reserved for clearing selection and showing placeholder const NO_RACK_VALUE = "none" ``` 2. **Updated state initialization** (line 56): Changed default from "" to `NO_RACK_VALUE` 3. **Updated form reset logic** (lines 68, 75): Convert null rack_id to sentinel value when loading device data 4. **Updated form submission** (line 105-106): Convert sentinel value back to null for API: ```tsx const effectiveRackId = rackId && rackId !== NO_RACK_VALUE ? parseInt(rackId, 10) : null ``` 5. **Updated Select item** (line 202): Changed `value=""` to `value={NO_RACK_VALUE}` 6. **Updated conditional render** (line 213): Rack position field now checks `rackId !== NO_RACK_VALUE` ### Verification - Frontend build: PASSED (no TypeScript errors) - Frontend tests: 111 tests passed - All changes isolated to `frontend/src/components/device-form-dialog.tsx` ### File Changed `/home/gateway/gitea/apc-controller/frontend/src/components/device-form-dialog.tsx`

## QA FAILED See QA report document: 8a004e2e-9c3b-484d-91ed-c1a2eaba6a02 **Critical Bug Found:** The Device Form Dialog crashes immediately when opened due to an invalid empty string value in a Radix UI Select component. **Error:** ``` A <Select.Item /> must have a value prop that is not an empty string. ``` **Location:** `frontend/src/components/device-form-dialog.tsx:195` **Code:** `<SelectItem value="">Not assigned</SelectItem>` **Fix Required:** Change `value=""` to a non-empty sentinel value like `value="none"` and update form logic accordingly. **What Works:** - Settings page navigation - Device Management section display - Add Device button visibility **Blocked Tests:** - Device creation - Outlet assignment - Rack visualization - Device editing - Device deletion Returning to TODO for fixes.

## Implementation Summary Added device management UI to the Settings page with the following features: ### 1. Device Management Section - **Device list**: Shows all devices with type icon, name, height (U), rack location, and assigned outlets - **Create device**: Dialog form with name, type (server/network/storage/other), height units, rack assignment, rack position, and description - **Edit device**: Same form pre-populated with existing values - **Delete device**: Confirmation dialog with warning about outlet assignments being removed ### 2. Outlet Assignment - **Outlet dialog**: Grid showing all 24 PDU outlets with current state (on/off) and current draw - **Multi-select**: Checkboxes to select multiple outlets for devices with dual PSUs - **Conflict detection**: Outlets assigned to other devices are disabled and show which device owns them - **Visual feedback**: Shows 'Will be added' / 'Will be removed' indicators for pending changes ### 3. Rack Visualization - **Interactive rack diagram**: Shows devices in their rack positions with status indicators - **Status colors**: Green (all outlets on), Red (all off), Yellow (partial), Gray (no outlets) - **Click to edit**: Clicking a device in the diagram opens the edit form - **Multi-rack support**: Buttons to switch between racks if multiple exist ### Files Changed **New Components:** - frontend/src/components/device-form-dialog.tsx - Create/edit device form - frontend/src/components/outlet-assignment-dialog.tsx - Outlet assignment UI **Modified Files:** - frontend/src/lib/api.ts - Added API functions: createRackDevice, deleteRackDevice, assignDeviceOutlets, removeDeviceOutlet, getRacks, createRack - frontend/src/app/settings/page.tsx - Complete rewrite with device management UI - frontend/src/components/ui/select.tsx - Added shadcn select component - frontend/src/components/ui/checkbox.tsx - Added shadcn checkbox component - frontend/src/components/ui/textarea.tsx - Added shadcn textarea component ### Testing - Frontend build: PASSED - Frontend tests: 111 passed - Backend tests: 269 passed, 3 pre-existing failures (unrelated SNMP error handling tests)