# NataAset Web UI Polish Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Make the Laravel web dashboard feel more consistent, compact, responsive, and professional without changing the existing NataAset structure.

**Architecture:** Keep the existing Blade layout and page structure. Apply most improvements through `public/assets/css/dashboard-redesign.css`, with small Blade class additions only when a page needs more precise styling.

**Tech Stack:** Laravel Blade, plain CSS, Tabler Icons, existing dashboard JavaScript.

---

### Task 1: Normalize Dashboard Shell And Components

**Files:**
- Modify: `public/assets/css/dashboard-redesign.css`

- [ ] **Step 1: Tighten shell spacing**

Set consistent topbar, content, card, and button spacing so desktop pages feel aligned.

- [ ] **Step 2: Improve interactive states**

Add smoother hover, active, and focus styles for sidebar links, buttons, icon buttons, form controls, and dropdowns.

- [ ] **Step 3: Preserve dark mode**

Add matching dark-mode rules for the improved component colors.

### Task 2: Improve Dashboard Cards

**Files:**
- Modify: `public/assets/css/dashboard-redesign.css`

- [ ] **Step 1: Make metric cards balanced**

Keep icon, number, label, and description aligned in a compact two-column layout.

- [ ] **Step 2: Improve bottom dashboard cards**

Normalize the table card, room priority card, and scan timeline density.

### Task 3: Fix Mobile Tables And Actions

**Files:**
- Modify: `public/assets/css/dashboard-redesign.css`

- [ ] **Step 1: Make mobile table cards compact**

Use smaller gaps, stronger first-row hierarchy, and stable action button grids.

- [ ] **Step 2: Keep mobile filters usable**

Ensure filter forms, select fields, and buttons fit full width without awkward spacing.

### Task 4: Validate

**Files:**
- Test only.

- [ ] **Step 1: Run Laravel tests**

Run: `php artisan test`

Expected: all tests pass.

- [ ] **Step 2: Clear compiled views**

Run: `php artisan view:clear`

Expected: compiled views cleared successfully.

### Task 5: Replace Native Delete Confirmations

**Files:**
- Modify: `resources/views/layouts/app.blade.php`
- Modify: `resources/views/items/index.blade.php`
- Modify: `resources/views/rooms/index.blade.php`
- Modify: `resources/views/categories/index.blade.php`
- Modify: `public/assets/js/dashboard.js`

- [ ] **Step 1: Add shared action confirmation modal**

Use the existing notification modal visual language so destructive actions do not show browser-native alerts.

- [ ] **Step 2: Attach data attributes to delete forms**

Replace inline `confirm()` handlers with `data-confirm-submit`, `data-confirm-title`, and `data-confirm-message`.

- [ ] **Step 3: Intercept confirmed form submissions**

Open the modal on first submit, then submit the saved form after the user confirms.
