chore: update dashboard-ui submodule

2026-06-04 06:38:13 +07:00
parent 2f59e72ddf
commit 622884e8ab
2 changed files with 470 additions and 1 deletions
@@ -0,0 +1,469 @@
+# Button Consistency Normalization
+
+## TL;DR
+
+> **Quick Summary**: Replace all raw `<button>` elements across the dashboard with `NgButton` component, normalize sizing/spacing, remove `flex-1` stretching, and ensure consistent button patterns everywhere.
+> 
+> **Deliverables**:
+> - All raw `<button>` replaced with `NgButton`
+> - DeviceDetail.vue buttons de-stretched (no more `flex-1`)
+> - Servers.vue modal buttons use NgButton
+> - TrafficHistory.vue buttons + hardcoded colors fixed
+> - Consistent button hierarchy: primary/secondary/ghost/danger
+> 
+> **Estimated Effort**: Quick
+> **Parallel Execution**: YES - 1 wave
+> **Critical Path**: All tasks independent, can run in parallel
+
+---
+
+## Context
+
+### Original Request
+User says: "jadikan semua tombol ini sama. seperti di traffic menu. contoh di view device. tombol besar jelek. tombol diskonek jelen buat semua tombol setara"
+
+Translation: Make all buttons the same. Like in the traffic menu. Example in device view — big ugly buttons, disconnect button looks bad. Make all buttons equal.
+
+### Interview Summary
+**Key Discussions**:
+- DeviceDetail.vue has `flex-1` buttons that stretch to fill container — visually heavy
+- Multiple views still use raw `<button>` with hardcoded Tailwind classes instead of NgButton
+- TrafficHistory.vue itself still has hardcoded colors (`text-cyan-400`, `bg-cyan-600`, `bg-black/30`)
+- Inconsistent button patterns: some NgButton, some raw, some with `flex-1`, some without
+
+### Button Hierarchy Standard
+| Context | NgButton Config | Rationale |
+|---------|----------------|-----------|
+| Form submit (Save, Create, Register) | `variant="primary" size="md"` | Primary action |
+| Cancel / Close / secondary | `variant="secondary" size="md"` | Destructive-neutral |
+| Delete (dangerous) | `variant="danger" size="md"` | Destructive |
+| Table row actions (Edit, Config, Firewall) | `variant="ghost" size="sm"` | Inline, low visual weight |
+| Small utility (Copy, Refresh) | `size="sm"` | Compact |
+| Action button row | `gap-2` NOT `space-x-3` OR `flex-1` | Consistent spacing |
+
+---
+
+## Work Objectives
+
+### Core Objective
+Make every button in the dashboard use `NgButton` with consistent sizing, spacing, and variant hierarchy.
+
+### Concrete Deliverables
+- `apps/dashboard-ui/src/views/DeviceDetail.vue` — buttons de-stretched
+- `apps/dashboard-ui/src/views/Servers.vue` — modal buttons use NgButton
+- `apps/dashboard-ui/src/views/Users.vue` — delete button uses NgButton
+- `apps/dashboard-ui/src/views/Devices.vue` — action buttons use NgButton
+- `apps/dashboard-ui/src/views/TrafficHistory.vue` — buttons use NgButton + design tokens
+- `apps/dashboard-ui/src/App.vue` — logout button uses NgButton
+
+### Must Have
+- Zero raw `<button>` with hardcoded Tailwind classes (except toggle switches and accordion chevrons)
+- All action buttons use `NgButton` with appropriate variant/size
+- No `flex-1` on button rows (causes ugly stretching)
+- Consistent `gap-2` spacing between button groups
+
+### Must NOT Have (Guardrails)
+- Do NOT change NgButton component itself
+- Do NOT change any API calls or data flow
+- Do NOT change toggle switches (they're custom CSS, not buttons)
+- Do NOT change accordion chevron toggles (functional, not action buttons)
+- Do NOT touch Login.vue (already redesigned)
+- Do NOT touch FirewallEditor.vue (already redesigned)
+
+---
+
+## Verification Strategy
+
+> **ZERO HUMAN INTERVENTION** - ALL verification is agent-executed.
+
+### QA Policy
+Every task includes agent-executed QA scenarios.
+Evidence saved to `.sisyphus/evidence/task-{N}-{scenario-slug}.{ext}`.
+
+- **Frontend/UI**: Build check via `npm run build`
+- **Grep checks**: Verify zero raw `<button class=` patterns (excluding known exceptions)
+
+---
+
+## Execution Strategy
+
+### Parallel Execution Waves
+
+```
+Wave 1 (Start Immediately — all independent):
+├── Task 1: Normalize DeviceDetail.vue buttons [quick]
+├── Task 2: Normalize Servers.vue modal buttons [quick]
+├── Task 3: Normalize Users.vue delete button [quick]
+├── Task 4: Normalize Devices.vue action buttons [quick]
+├── Task 5: Normalize TrafficHistory.vue buttons + tokens [quick]
+├── Task 6: Normalize App.vue logout button [quick]
+
+Wave FINAL (After ALL tasks):
+├── Build verify: npm run build
+├── Grep verify: zero raw button patterns
+└── Present results to user
+```
+
+### Dependency Matrix
+- All tasks (1-6): No dependencies — can all run in parallel
+- Final verification: After all tasks complete
+
+---
+
+## TODOs
+
+- [x] 1. Normalize DeviceDetail.vue buttons
+
+  **What to do**:
+  - Line 93: Keep `w-full` on save settings button (it's inside a form, full-width is correct)
+  - Lines 114-124: Remove `flex-1` from all 3 action buttons (Regenerate Token, Regenerate Keys, Delete Device). Change `flex space-x-3` to `flex items-center gap-2`
+  - Lines 141-145: Remove `flex-1` from Config & QR button. Remove the wrapping `<div class="flex space-x-3">` since it's a single button — just use `<NgButton>` directly
+  - Line 153: Copy token button already `size="sm"` — OK
+  - Line 187: Refresh button already `size="sm"` — OK
+
+  **Must NOT do**:
+  - Do NOT change the save settings `w-full` (form submit, full-width is correct)
+  - Do NOT change toggle switches or accordion chevrons
+
+  **Recommended Agent Profile**:
+  - **Category**: `quick`
+  - **Skills**: []
+
+  **Parallelization**:
+  - **Can Run In Parallel**: YES
+  - **Parallel Group**: Wave 1 (with Tasks 2-6)
+  - **Blocks**: Final verification
+  - **Blocked By**: None
+
+  **References**:
+  - `apps/dashboard-ui/src/views/DeviceDetail.vue` — Lines 114-124 (action buttons), 141-145 (config button)
+  - `apps/dashboard-ui/src/components/ui/NgButton.vue` — API: variant, size, loading, disabled
+
+  **Acceptance Criteria**:
+
+  **QA Scenarios:**
+  ```
+  Scenario: No flex-1 on NgButton in DeviceDetail
+    Tool: Bash
+    Steps:
+      1. Run: grep "flex-1" apps/dashboard-ui/src/views/DeviceDetail.vue
+    Expected Result: 0 matches
+    Evidence: .sisyphus/evidence/task-1-no-flex1.txt
+
+  Scenario: Build succeeds
+    Tool: Bash
+    Steps:
+      1. Run: cd apps/dashboard-ui && npm run build
+    Expected Result: Exit code 0
+    Evidence: .sisyphus/evidence/task-1-build.txt
+  ```
+
+  **Commit**: YES (groups with 2-6)
+
+---
+
+- [x] 2. Normalize Servers.vue modal buttons
+
+  **What to do**:
+  - Line 127: `<button type="submit" ... class="flex-1 bg-accent ...">Register Node</button>` → `<NgButton type="submit" :loading="loading">Register Node</NgButton>`
+  - Line 128: `<button type="button" @click="showAddModal = false" ... class="flex-1 bg-bg-elevated ...">Cancel</button>` → `<NgButton variant="secondary" @click="showAddModal = false">Cancel</NgButton>`
+  - Line 281: `<button type="submit" ... class="flex-1 bg-accent ...">Save</button>` → `<NgButton type="submit" :loading="loading">Save</NgButton>`
+  - Line 282: `<button type="button" @click="closeEdit" ... class="flex-1 bg-bg-elevated ...">Cancel</button>` → `<NgButton variant="secondary" @click="closeEdit">Cancel</NgButton>`
+  - Button rows in modals: wrap in `<div class="flex items-center gap-2 pt-4">`
+  - Lines 156-157: Table action buttons (Edit, Delete) → `NgButton variant="ghost" size="sm"`
+
+  **Must NOT do**:
+  - Do NOT change form inputs or validation logic
+  - Do NOT change toggle switches
+
+  **Recommended Agent Profile**:
+  - **Category**: `quick`
+  - **Skills**: []
+
+  **Parallelization**:
+  - **Can Run In Parallel**: YES
+  - **Parallel Group**: Wave 1 (with Tasks 1, 3-6)
+  - **Blocks**: Final verification
+  - **Blocked By**: None
+
+  **References**:
+  - `apps/dashboard-ui/src/views/Servers.vue` — Lines 127-128 (add modal buttons), 156-157 (table actions), 281-282 (edit modal buttons)
+
+  **Acceptance Criteria**:
+
+  **QA Scenarios:**
+  ```
+  Scenario: No raw button in Servers modal
+    Tool: Bash
+    Steps:
+      1. Run: grep -n '<button' apps/dashboard-ui/src/views/Servers.vue | grep -v 'NgButton' | grep -v 'toggle' | grep -v 'chevron' | grep -v 'accordion'
+    Expected Result: 0 matches (excluding toggle/accordion)
+    Evidence: .sisyphus/evidence/task-2-no-raw-button.txt
+
+  Scenario: Build succeeds
+    Tool: Bash
+    Steps:
+      1. Run: cd apps/dashboard-ui && npm run build
+    Expected Result: Exit code 0
+    Evidence: .sisyphus/evidence/task-2-build.txt
+  ```
+
+  **Commit**: YES (groups with 1, 3-6)
+
+---
+
+- [x] 3. Normalize Users.vue delete button
+
+  **What to do**:
+  - Line 51: `<button v-if="user.Username !== 'admin'" @click="handleDelete(user.ID)" class="text-danger hover:text-danger text-sm font-semibold">Delete</button>` → `<NgButton v-if="user.Username !== 'admin'" variant="ghost" size="sm" @click="handleDelete(user.ID)">Delete</NgButton>`
+  - Import NgButton if not already imported (it is — line 67)
+
+  **Must NOT do**:
+  - Do NOT change the delete confirmation logic
+
+  **Recommended Agent Profile**:
+  - **Category**: `quick`
+  - **Skills**: []
+
+  **Parallelization**:
+  - **Can Run In Parallel**: YES
+  - **Parallel Group**: Wave 1 (with Tasks 1-2, 4-6)
+  - **Blocks**: Final verification
+  - **Blocked By**: None
+
+  **References**:
+  - `apps/dashboard-ui/src/views/Users.vue` — Line 51
+
+  **Acceptance Criteria**:
+
+  **QA Scenarios:**
+  ```
+  Scenario: No raw button in Users
+    Tool: Bash
+    Steps:
+      1. Run: grep -n '<button' apps/dashboard-ui/src/views/Users.vue | grep -v 'NgButton'
+    Expected Result: 0 matches
+    Evidence: .sisyphus/evidence/task-3-no-raw-button.txt
+
+  Scenario: Build succeeds
+    Tool: Bash
+    Steps:
+      1. Run: cd apps/dashboard-ui && npm run build
+    Expected Result: Exit code 0
+    Evidence: .sisyphus/evidence/task-3-build.txt
+  ```
+
+  **Commit**: YES (groups with 1-2, 4-6)
+
+---
+
+- [x] 4. Normalize Devices.vue action buttons
+
+  **What to do**:
+  - Lines 45-47: Replace raw `<button>` with `NgButton variant="ghost" size="sm"`:
+    ```vue
+    <NgButton v-if="device.InternalIP && authStore.isAdmin" variant="ghost" size="sm" @click="openConfigModal(device.ID)">Config</NgButton>
+    <NgButton variant="ghost" size="sm" @click="openFirewall(device.ID)">Firewall</NgButton>
+    <NgButton variant="ghost" size="sm" @click="handleDelete(device.ID, device.Name)">Delete</NgButton>
+    ```
+  - Import NgButton if not already imported (it is — line 78)
+
+  **Must NOT do**:
+  - Do NOT change the delete confirmation logic
+
+  **Recommended Agent Profile**:
+  - **Category**: `quick`
+  - **Skills**: []
+
+  **Parallelization**:
+  - **Can Run In Parallel**: YES
+  - **Parallel Group**: Wave 1 (with Tasks 1-3, 5-6)
+  - **Blocks**: Final verification
+  - **Blocked By**: None
+
+  **References**:
+  - `apps/dashboard-ui/src/views/Devices.vue` — Lines 45-47
+
+  **Acceptance Criteria**:
+
+  **QA Scenarios:**
+  ```
+  Scenario: No raw button in Devices
+    Tool: Bash
+    Steps:
+      1. Run: grep -n '<button' apps/dashboard-ui/src/views/Devices.vue | grep -v 'NgButton'
+    Expected Result: 0 matches
+    Evidence: .sisyphus/evidence/task-4-no-raw-button.txt
+
+  Scenario: Build succeeds
+    Tool: Bash
+    Steps:
+      1. Run: cd apps/dashboard-ui && npm run build
+    Expected Result: Exit code 0
+    Evidence: .sisyphus/evidence/task-4-build.txt
+  ```
+
+  **Commit**: YES (groups with 1-3, 5-6)
+
+---
+
+- [x] 5. Normalize TrafficHistory.vue buttons + hardcoded colors
+
+  **What to do**:
+  - Import NgButton and useToast/useConfirm if needed
+  - Line 5-11: Export CSV button → `<NgButton @click="exportToCSV" :disabled="trafficData.length === 0">Export CSV</NgButton>`
+  - Lines 53-59: Apply Filters button → `<NgButton type="submit" :loading="loading">{{ loading ? 'Loading...' : 'Apply Filters' }}</NgButton>`
+  - Lines 110-116: Previous button → `<NgButton size="sm" @click="currentPage--" :disabled="currentPage === 1">Previous</NgButton>`
+  - Lines 118-124: Next button → `<NgButton size="sm" @click="currentPage++" :disabled="currentPage >= totalPages">Next</NgButton>`
+  - Replace ALL hardcoded colors with design tokens:
+    - `text-cyan-400` → `text-accent`
+    - `bg-cyan-600` → `bg-accent`
+    - `bg-black/30` → `bg-bg-base/30`
+    - `border-white/5` → `border-border-subtle/50`
+    - `text-gray-400` → `text-text-muted`
+    - `text-gray-500` → `text-text-muted`
+    - `bg-gradient-to-br from-gray-900/90 to-gray-800/90` → `bg-gradient-to-br from-bg-surface/90 to-bg-elevated/90`
+    - `border-white/10` → `border-border-subtle`
+    - `text-white` → `text-text-primary`
+    - `bg-black/50` → `bg-bg-base/50`
+    - `hover:bg-white/5` → `hover:bg-bg-elevated/50`
+    - `hover:bg-black/50` → `hover:bg-bg-base/50`
+    - `hover:text-white` → `hover:text-text-primary`
+    - `text-cyan-400` → `text-accent`
+    - `text-blue-400` → `text-info`
+    - `hover:shadow-cyan-500/50` → `hover:shadow-accent/50`
+  - Update `<NgButton>` import
+
+  **Must NOT do**:
+  - Do NOT change the CSV export logic
+  - Do NOT change the pagination logic
+  - Do NOT change the date filtering logic
+
+  **Recommended Agent Profile**:
+  - **Category**: `quick`
+  - **Skills**: []
+
+  **Parallelization**:
+  - **Can Run In Parallel**: YES
+  - **Parallel Group**: Wave 1 (with Tasks 1-4, 6)
+  - **Blocks**: Final verification
+  - **Blocked By**: None
+
+  **References**:
+  - `apps/dashboard-ui/src/views/TrafficHistory.vue` — Full file (326 lines). Raw buttons + extensive hardcoded colors
+  - `apps/dashboard-ui/src/components/ui/NgButton.vue` — API reference
+
+  **Acceptance Criteria**:
+
+  **QA Scenarios:**
+  ```
+  Scenario: No raw button in TrafficHistory
+    Tool: Bash
+    Steps:
+      1. Run: grep -n '<button' apps/dashboard-ui/src/views/TrafficHistory.vue | grep -v 'NgButton'
+    Expected Result: 0 matches
+    Evidence: .sisyphus/evidence/task-5-no-raw-button.txt
+
+  Scenario: No hardcoded colors
+    Tool: Bash
+    Steps:
+      1. Run: grep -cE "text-cyan-|bg-cyan-|bg-black|border-white/|text-gray-|text-blue-|hover:bg-white" apps/dashboard-ui/src/views/TrafficHistory.vue
+    Expected Result: 0 matches
+    Evidence: .sisyphus/evidence/task-5-no-hardcoded.txt
+
+  Scenario: Build succeeds
+    Tool: Bash
+    Steps:
+      1. Run: cd apps/dashboard-ui && npm run build
+    Expected Result: Exit code 0
+    Evidence: .sisyphus/evidence/task-5-build.txt
+  ```
+
+  **Commit**: YES (groups with 1-4, 6)
+
+---
+
+- [x] 6. Normalize App.vue logout button
+
+  **What to do**:
+  - Line 16: `<button @click="authStore.logout" class="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-500/10 rounded-lg transition">Logout</button>` → `<NgButton variant="ghost" @click="authStore.logout" class="w-full justify-start">Logout</NgButton>`
+  - Line 24: `<button @click="authStore.logout" class="text-red-400 text-sm">Logout</button>` → `<NgButton variant="ghost" size="sm" @click="authStore.logout">Logout</NgButton>`
+  - Import NgButton
+
+  **Must NOT do**:
+  - Do NOT change the logout logic
+  - Do NOT change sidebar behavior
+
+  **Recommended Agent Profile**:
+  - **Category**: `quick`
+  - **Skills**: []
+
+  **Parallelization**:
+  - **Can Run In Parallel**: YES
+  - **Parallel Group**: Wave 1 (with Tasks 1-5)
+  - **Blocks**: Final verification
+  - **Blocked By**: None
+
+  **References**:
+  - `apps/dashboard-ui/src/App.vue` — Lines 16, 24
+
+  **Acceptance Criteria**:
+
+  **QA Scenarios:**
+  ```
+  Scenario: No raw button in App.vue
+    Tool: Bash
+    Steps:
+      1. Run: grep -n '<button' apps/dashboard-ui/src/App.vue | grep -v 'NgButton'
+    Expected Result: 0 matches
+    Evidence: .sisyphus/evidence/task-6-no-raw-button.txt
+
+  Scenario: Build succeeds
+    Tool: Bash
+    Steps:
+      1. Run: cd apps/dashboard-ui && npm run build
+    Expected Result: Exit code 0
+    Evidence: .sisyphus/evidence/task-6-build.txt
+  ```
+
+  **Commit**: YES (groups with 1-5)
+
+---
+
+## Final Verification Wave
+
+After ALL tasks complete:
+
+```
+Wave FINAL:
+├── F1: Build verify — npm run build passes
+├── F2: Grep verify — zero raw <button class= across all .vue files
+├── F3: Grep verify — zero hardcoded colors in TrafficHistory.vue
+└── F4: Present results to user
+```
+
+---
+
+## Commit Strategy
+
+- **Commit D**: All button normalization changes
+  - Files: `DeviceDetail.vue`, `Servers.vue`, `Users.vue`, `Devices.vue`, `TrafficHistory.vue`, `App.vue`
+  - Pre-commit: `cd apps/dashboard-ui && npm run build`
+
+---
+
+## Success Criteria
+
+### Verification Commands
+```bash
+cd apps/dashboard-ui && npm run build  # Expected: ✓ built in Xs
+grep -rn '<button' src/ --include="*.vue" | grep -v 'NgButton' | grep -v 'toggle' | grep -v 'chevron' | grep -v 'sr-only'  # Expected: 0 matches (excluding known exceptions)
+grep -cE "text-cyan-|bg-cyan-|bg-black|border-white/" src/views/TrafficHistory.vue  # Expected: 0
+```
+
+### Final Checklist
+- [x] All raw `<button>` replaced with `NgButton`
+- [x] No `flex-1` on button rows
+- [x] Consistent `gap-2` spacing
+- [x] TrafficHistory.vue hardcoded colors replaced with tokens
+- [x] Frontend builds without errors