251209:0000 Backend Test stagenot finish & Frontend add Task 013-015

specs/06-tasks/TASK-FE-015-security-admin-ui.md

@@ -0,0 +1,99 @@
+# TASK-FE-015: Security & System Administration UI
+
+**ID:** TASK-FE-015
+**Title:** Security & System Administration UI
+**Category:** Administration
+**Priority:** P2 (High)
+**Effort:** 5-7 days
+**Dependencies:** TASK-FE-010, TASK-BE-002, TASK-BE-011
+**Assigned To:** Frontend Developer
+
+---
+
+## 📋 Overview
+
+Provide advanced administrative tools for managing system security (RBAC), monitoring active user sessions, and viewing system-level error logs (specifically for critical features like Document Numbering).
+
+---
+
+## 🎯 Objectives
+
+1. **RBAC Matrix Editor:** Visual interface to assign permissions to roles.
+2. **Session Management:** View and revoke active user sessions/tokens.
+3. **System Logs:** View specific error logs (e.g., `document_number_errors`) and Audit Logs.
+
+---
+
+## ✅ Acceptance Criteria
+
+- [ ] **RBAC Matrix:** Grid view showing Roles (Columns) vs Permissions (Rows) with toggle switches.
+- [ ] **Session Monitor:** List active users/sessions with "Force Logout" capability.
+- [ ] **Numbering Logs:** Specific view for `document_number_audit` and `document_number_errors`.
+- [ ] **Security:** These pages must be restricted to Super Admin only.
+
+---
+
+## 🔧 Implementation Steps
+
+### Step 1: RBAC Matrix Component
+
+```typescript
+// File: src/components/admin/security/rbac-matrix.tsx
+'use client';
+
+import { Checkbox } from '@/components/ui/checkbox';
+// ...
+
+// Matrix layout:
+// | Permission | Admin | User | Approver |
+// |------------|-------|------|----------|
+// | rfa.view   | [x]   | [x]  | [x]      |
+// | rfa.create | [x]   | [ ]  | [ ]      |
+
+export function RbacMatrix({ roles, permissions, matrix }) {
+  const handleToggle = (roleId, permId) => {
+     // Call API to toggle permission
+  };
+
+  return (
+    <Table>
+      {/* ... Render Matrix ... */}
+    </Table>
+  );
+}
+```
+
+### Step 2: Active Sessions Page
+
+```typescript
+// File: src/app/(admin)/admin/security/sessions/page.tsx
+'use client';
+
+// List active refresh tokens or sessions from backend
+// Columns: User, IP, Last Active, Device, Actions (Revoke)
+```
+
+### Step 3: Document Numbering Logs
+
+```typescript
+// File: src/app/(admin)/admin/logs/numbering/page.tsx
+'use client';
+
+// specific table for 'document_number_errors' and 'document_number_audit'
+// Critical for diagnosing failed number generation
+```
+
+---
+
+## 📦 Deliverables
+
+- [ ] RBAC Configuration Page
+- [ ] Active Sessions / Security Page
+- [ ] Document Numbering Diagnostics Page
+
+---
+
+## 🔗 Related Documents
+
+- [TASK-BE-002: Auth & RBAC](./TASK-BE-002-auth-rbac.md)
+- [TASK-BE-011: Notification & Audit](./TASK-BE-011-notification-audit.md)