cve-dashboard/.kiro/specs/admin-page-overhaul/tasks.md

# Implementation Plan: Admin Page Overhaul

## Overview

Replace the current inline `UserManagement` modal rendering on the admin page with a full-page, themed `AdminPage` component. The new component lives at `frontend/src/components/pages/AdminPage.js` and provides three tabbed panels — User Management, Audit Log, and System Info — all styled with the dark tactical intelligence theme. No new backend endpoints are needed; the component reuses existing `/api/users` and `/api/audit-logs` routes. Existing modal components (`UserManagement`, `AuditLog`) are preserved for quick-access from `UserMenu`.

## Tasks

- [x] 1. Create AdminPage component with page header and tab navigation
  - [x] 1.1 Create `frontend/src/components/pages/AdminPage.js` with the page shell
    - Import React, useState, useAuth from AuthContext, and lucide-react icons (Shield, Clock, Activity)
    - Define `API_BASE` constant matching project convention
    - Define `TABS` array: `[{ id: 'users', label: 'User Management', icon: Shield }, { id: 'audit', label: 'Audit Log', icon: Clock }, { id: 'system', label: 'System Info', icon: Activity }]`
    - Render page header with "Admin Panel" title in monospace uppercase with `--intel-accent` text glow
    - Render tab navigation bar with monospace uppercase text, `--intel-accent` active styling, and muted inactive styling matching the CompliancePage team-tab pattern
    - Manage `activeTab` state defaulting to `'users'`
    - Conditionally render placeholder `<div>` for each panel based on `activeTab`
    - _Requirements: 1.1, 1.2, 1.3, 2.1, 2.2, 2.3, 2.4_

  - [x] 1.2 Integrate AdminPage into App.js
    - Import `AdminPage` from `./components/pages/AdminPage`
    - Replace the existing `{currentPage === 'admin' && isAdmin() && (<div className="space-y-6"><UserManagement onClose={() => setCurrentPage('home')} /></div>)}` block with `{currentPage === 'admin' && isAdmin() && <AdminPage />}`
    - Add non-admin redirect: `{currentPage === 'admin' && !isAdmin() && setCurrentPage('home')}` (or useEffect equivalent)
    - Keep existing `{showUserManagement && <UserManagement onClose={...} />}` and `{showAuditLog && <AuditLog onClose={...} />}` modal triggers unchanged
    - _Requirements: 1.2, 6.1, 6.2, 6.3, 6.4_

- [-] 2. Implement UserManagementPanel
  - [x] 2.1 Build the themed user table and group badges
    - Define `GROUP_BADGE_THEMED` map with themed colors: Admin → danger, Standard_User → accent, Leadership → warning, Read_Only → muted
    - Fetch users from `GET /api/users` with `credentials: 'include'` on panel mount
    - Render user table with columns: username, email, group, active status, last login
    - Style table with dark theme rows using `data-row` hover effects and `--text-primary` / `--text-secondary` text colors
    - Render group badges using the themed color map with severity-style badge coloring
    - Display loading spinner (`loading-spinner` class, `--intel-accent` color) while fetching
    - Display error banner with `--intel-danger` styling on fetch failure
    - _Requirements: 3.1, 3.2, 3.3, 7.1, 7.2_

  - [x] 2.2 Implement inline add/edit form and CRUD operations
    - Add "Add User" button styled with `intel-button` primary variant
    - Show inline form with `intel-input` styled fields for username, email, password, and group dropdown
    - On edit action: populate form with selected user's data (username, email, group; password blank)
    - On form submit: POST (create) or PATCH (update) to `/api/users` or `/api/users/:id`
    - On delete action: show confirmation prompt, then DELETE to `/api/users/:id`
    - On active status toggle: PATCH to `/api/users/:id` with `is_active` toggled, update UI without full reload
    - Prevent self-modification: disable group dropdown and active toggle for the current authenticated user's row
    - Display form validation errors with `--intel-danger` color
    - Display success toast with `--intel-success` color, auto-dismiss after 2 seconds
    - _Requirements: 3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 7.3_

  - [ ] 2.3 Write property test: Group badge color mapping is total and correct
    - **Property 1: Group badge color mapping is total and correct**
    - Install `fast-check` as a dev dependency in `frontend/`
    - Create test file `frontend/src/components/pages/__tests__/AdminPage.property.test.js`
    - Generate random strings including the four valid groups and arbitrary invalid strings
    - Verify the badge function returns correct themed colors for valid groups and default muted styling for invalid groups
    - Use `fc.assert(property, { numRuns: 100 })`
    - **Validates: Requirements 3.3**

  - [ ] 2.4 Write property test: Edit form population preserves user data
    - **Property 2: Edit form population preserves user data**
    - Generate random user objects with arbitrary username, email, and group values
    - Verify that populating the edit form results in `formData.username === user.username`, `formData.email === user.email`, `formData.group === user.group`, and `formData.password === ''`
    - Use `fc.assert(property, { numRuns: 100 })`
    - **Validates: Requirements 3.5**

  - [ ] 2.5 Write property test: Self-modification prevention
    - **Property 3: Self-modification prevention**
    - Generate random user lists that include a user matching the current admin's ID
    - Verify the admin's own row has group dropdown disabled and active toggle disabled
    - Verify all other users have those controls enabled
    - Use `fc.assert(property, { numRuns: 100 })`
    - **Validates: Requirements 3.8**

- [x] 3. Checkpoint — Verify user management panel
  - Ensure all tests pass, ask the user if questions arise.

- [-] 4. Implement AuditLogPanel
  - [x] 4.1 Build the themed audit log table with action badges and filters
    - Define `ACTION_BADGE_THEMED` map with themed colors: login/success → green, delete → danger, create → accent, update → warning, default → muted
    - Fetch audit logs from `GET /api/audit-logs?page=1&limit=25` with `credentials: 'include'` on panel mount
    - Fetch action types from `GET /api/audit-logs/actions` for the action filter dropdown
    - Render log table with columns: timestamp, username, action, entity type, entity ID, details, IP address
    - Style timestamps and IP addresses with monospace font
    - Render action type badges using the themed color map
    - Style table with dark theme rows and `data-row` hover effects
    - Display loading spinner while fetching, error banner on failure
    - Display "No audit log entries found" message with `--text-muted` color when results are empty
    - _Requirements: 4.1, 4.2, 4.3, 4.4, 4.9, 4.10, 7.1, 7.2_

  - [x] 4.2 Implement filter controls and pagination
    - Render filter bar with: username text input, action type dropdown, entity type dropdown, start date picker, end date picker
    - Style all filter controls with `intel-input` and `intel-button` components
    - On filter apply: re-fetch audit logs from page 1 with selected filter parameters
    - Render pagination controls showing current page, total pages, and total entry count
    - On page change: fetch the requested page
    - _Requirements: 4.5, 4.6, 4.7, 4.8_

  - [ ] 4.3 Write property test: Action badge color mapping is total and correct
    - **Property 4: Action badge color mapping is total and correct**
    - Generate random action strings including all known actions and arbitrary unknown strings
    - Verify the badge function returns correct themed colors for known actions and default muted styling for unknown actions
    - Use `fc.assert(property, { numRuns: 100 })`
    - **Validates: Requirements 4.4**

  - [ ] 4.4 Write property test: Applying filters resets pagination to page 1
    - **Property 5: Applying filters resets pagination to page 1**
    - Generate random filter combinations (username text, action type, entity type, start date, end date) and random current page numbers
    - Verify that applying filters results in a fetch call with `page=1`
    - Use `fc.assert(property, { numRuns: 100 })`
    - **Validates: Requirements 4.7**

- [-] 5. Implement SystemInfoPanel
  - [x] 5.1 Build stat cards and recent activity list
    - Fetch users from `GET /api/users` and recent audit logs from `GET /api/audit-logs?limit=10&page=1` on panel mount
    - Compute derived stats: total users (`users.length`), active users (`users.filter(u => u.is_active)`), recent logins (users with `last_login` within last 7 days), total audit entries (from pagination.total)
    - Render four stat cards using the `stat-card` pattern with accent-colored top bar and hover lift effect
    - Render "Recent Activity" section showing the 10 most recent audit log entries in a compact list format
    - Show "Unable to load" fallback in affected stat cards when individual API requests fail
    - Display loading spinner while fetching
    - _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 7.1_

  - [ ] 5.2 Write property test: Recent login count computation
    - **Property 6: Recent login count computation**
    - Generate random user lists with random `last_login` timestamps (including null values)
    - Verify the computed "recent logins" count equals the number of users whose `last_login` is non-null and falls within the last 7 days
    - Use `fc.assert(property, { numRuns: 100 })`
    - **Validates: Requirements 5.1**

- [x] 6. Checkpoint — Verify all panels and integration
  - Ensure all tests pass, ask the user if questions arise.

- [-] 7. Access control and final wiring
  - [x] 7.1 Verify access control integration
    - Confirm `AdminPage` reads auth context via `useAuth()` and only renders content for Admin-group users
    - Confirm `App.js` redirects non-admin users to home when `currentPage === 'admin'`
    - Confirm `NavDrawer` continues to show "Admin Panel" only for Admin-group users (no changes needed — verify existing behavior)
    - Confirm `UserMenu` quick-access links ("Manage Users", "Audit Log") continue to open existing modal components (no changes needed — verify existing behavior)
    - _Requirements: 6.1, 6.2, 6.3, 6.4_

  - [ ] 7.2 Write property test: Admin-only access control
    - **Property 7: Admin-only access control**
    - Generate random user objects with random group values
    - Verify admin page content renders if and only if `user.group === 'Admin'`
    - Verify non-Admin groups trigger redirect to home
    - Use `fc.assert(property, { numRuns: 100 })`
    - **Validates: Requirements 6.1, 6.2**

- [x] 8. Final checkpoint — Ensure all tests pass
  - Ensure all tests pass, ask the user if questions arise.

## Notes

- Tasks marked with `*` are optional and can be skipped for faster MVP
- Each task references specific requirements for traceability
- Checkpoints ensure incremental validation
- Property tests validate universal correctness properties from the design document using fast-check
- Unit tests validate specific examples and edge cases
- Existing `UserManagement.js` and `AuditLog.js` modal components are not modified — they remain for UserMenu quick-access
- All styling follows the project convention of inline styles + App.css classes (no Tailwind in the new component)
- The `fast-check` library must be installed as a dev dependency before running property tests