jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add themed admin page with user management, audit log, and system info panels; add compliance note delete functionality

Browse Source
This commit is contained in:
root
2026-04-20 21:39:43 +00:00
parent 043c85cc69
commit 0cdaecf890
5 changed files with 1506 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
.kiro/specs/admin-page-overhaul/tasks.md
View File

@@ -6,8 +6,8 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
## Tasks
- [ ] 1. Create AdminPage component with page header and tab navigation
- [ ] 1.1 Create `frontend/src/components/pages/AdminPage.js` with the page shell
- [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 }]`
@@ -17,15 +17,15 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- 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_
- [ ] 1.2 Integrate AdminPage into App.js
- [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
- [ ] 2.1 Build the themed user table and group badges
- [-] 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
@@ -35,7 +35,7 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- Display error banner with `--intel-danger` styling on fetch failure
- _Requirements: 3.1, 3.2, 3.3, 7.1, 7.2_
- [ ] 2.2 Implement inline add/edit form and CRUD operations
- [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)
@@ -47,7 +47,7 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- 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
- [ ] 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`
@@ -56,14 +56,14 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 3.3**
- [ ]* 2.4 Write property test: Edit form population preserves user data
- [ ] 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
- [ ] 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
@@ -71,11 +71,11 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 3.8**
- [ ] 3. Checkpoint — Verify user management panel
- [x] 3. Checkpoint — Verify user management panel
- Ensure all tests pass, ask the user if questions arise.
- [ ] 4. Implement AuditLogPanel
- [ ] 4.1 Build the themed audit log table with action badges and filters
- [-] 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
@@ -87,7 +87,7 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- 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_
- [ ] 4.2 Implement filter controls and pagination
- [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
@@ -95,22 +95,22 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- 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
- [ ] 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
- [ ] 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
- [ ] 5.1 Build stat cards and recent activity list
- [-] 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
@@ -119,25 +119,25 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- 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
- [ ] 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**
- [ ] 6. Checkpoint — Verify all panels and integration
- [x] 6. Checkpoint — Verify all panels and integration
- Ensure all tests pass, ask the user if questions arise.
- [ ] 7. Access control and final wiring
- [ ] 7.1 Verify access control integration
- [-] 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
- [ ] 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'`
@@ -145,7 +145,7 @@ Replace the current inline `UserManagement` modal rendering on the admin page wi
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 6.1, 6.2**
- [ ] 8. Final checkpoint — Ensure all tests pass
- [x] 8. Final checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
## Notes