# Dashboard Realistic Palette 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 NataAset web dashboard feel like a realistic operational inventory system by refining dashboard colors, icon choices, and card styling.

**Architecture:** Keep the existing Blade structure and CSS file. Update only dashboard-facing icon mappings, dashboard conic chart colors, and CSS tokens/styles used by the dashboard surfaces so the change is focused and reversible.

**Tech Stack:** Laravel Blade, PHPUnit feature tests, CSS, Tabler Icons.

---

### Task 1: Lock New Dashboard Visual Direction With Tests

**Files:**
- Modify: `tests/Feature/ExampleTest.php`

- [ ] **Step 1: Add an assertion test**

Add assertions that the dashboard uses realistic icons and palette variables:

```php
$this->assertStringContainsString("ti-package", $dashboard);
$this->assertStringContainsString("ti-alert-circle", $dashboard);
$this->assertStringContainsString("ti-refresh-dot", $dashboard);
$this->assertStringContainsString("--ops-primary: #1e3a5f;", $css);
$this->assertStringContainsString("--ops-success: #1f7a4d;", $css);
```

- [ ] **Step 2: Run the targeted test**

Run: `php artisan test --filter=test_dashboard_uses_realistic_operational_palette`

Expected: FAIL because the new palette and icon assertions are not implemented yet.

### Task 2: Apply Realistic Dashboard Icons And Palette

**Files:**
- Modify: `resources/views/dashboard.blade.php`
- Modify: `public/assets/css/dashboard-redesign.css`

- [ ] **Step 1: Update dashboard icons**

Use operational Tabler icons:

```php
$metricIcons = ['ti-package', 'ti-alert-circle', 'ti-tool', 'ti-refresh-dot'];
```

- [ ] **Step 2: Update dashboard chart colors**

Use more grounded status colors:

```php
$conditionColors = [
  'good' => '#1f7a4d',
  'maintenance' => '#b7791f',
  'broken' => '#b42318',
  'replace' => '#315a8c',
];
```

- [ ] **Step 3: Add operational CSS tokens and refine dashboard cards**

Add `--ops-*` variables and make metric cards flatter, icons less candy-like, and cards more solid.

### Task 3: Verify

**Files:**
- Test: `tests/Feature/ExampleTest.php`

- [ ] **Step 1: Run targeted visual contract test**

Run: `php artisan test --filter=test_dashboard_uses_realistic_operational_palette`

Expected: PASS.

- [ ] **Step 2: Run full checks**

Run:

```bash
php artisan view:cache
php artisan test
php artisan view:clear
```

Expected: Blade cache succeeds and all tests pass.
