UI Phase 2 (L0): shared layout primitives + chrome standardization

Extract four shared layout widgets from the best existing implementations and
adopt them across list/overview screens, deleting duplicated inline code.
Layout/consistency only — no behavior change.

New primitives (lib/widgets/):
- app_section_header.dart  — AppSectionHeader (azure accent bar + uppercase
  telemetry label; promoted from the dashboard's _sectionTitle).
- app_metric_card.dart     — AppMetricCard (uppercase label + mono value on a
  flat hairline surface; unifies KPI/stat tiles).
- app_status_summary.dart  — AppStatusSummaryRow/Item/Chip (dot + count + label,
  selectable; semantic AppStatusColors).
- app_filter_bar.dart      — AppFilterBar (responsive filter-row chrome).

Adopted / de-duplicated:
- Dashboard: _MetricCard now wraps AppMetricCard; section titles use
  AppSectionHeader (removed local _sectionTitle).
- Tickets / Tasks / ISR: three separate summary-chip implementations
  (_StatusSummaryCard x2, _SummaryChip) collapsed into AppStatusSummaryRow.
- Network Map overview: Sites/Devices tiles -> AppMetricCard (removed local
  _SummaryCard).
- Workforce: "Duty Schedules" header -> AppSectionHeader with trailing chip.

Verified: flutter analyze lib clean; flutter build web green; visual QA (tickets
+ ISR summary chips) in dark.

Co-Authored-By: claude-flow <ruv@ruv.net>

analysis_options.yaml

@@ -6,3 +6,10 @@ analyzer:
     - lib/brick/*.g.dart
     - lib/brick/**/*.g.dart
     - lib/brick/db/*.dart
+    - build/**
+    - android/**
+    - ios/**
+    - web/**
+    - windows/**
+    - macos/**
+    - linux/**

docs/qa/QA_REPORT.md

@@ -0,0 +1,177 @@
+# TasQ QA Report
+
+Status: **In progress (loop round 3).**
+- Round 1 covered everything reachable without logging in.
+- Round 2 covered the **standard** role end-to-end at 1440×900 and 390×844.
+- Round 3: logged in as **admin** (via `ADMIN_USERNAME`/`ADMIN_PASSWORD` in `.env`), then used User Management to set one **dispatcher**, **it_staff** and **programmer** account each to the shared test password. All five roles now have working logins and saved sessions. Verified role landing, route gating, network-map write gating, several earlier fixes, and dark mode.
+
+**Round-3 confirmations (browser, live):**
+- QA-004 landing routes for **all five roles**: admin/dispatcher/programmer → `/dashboard`, it_staff → `/tasks`, standard → `/tickets`.
+- QA-005 deep links no longer bounce authorized roles; QA-006 gating is consistent (dispatcher/it_staff blocked from `/settings/*`, programmer allowed).
+- QA-032 (dates instead of "4490h ago") and QA-035 (staff names, not initials) on the Dashboard pulse.
+- Network-map write gating: dispatcher read-only (no "Add site"), admin has it.
+- QA-016 reproduced live: as programmer, User Management fires a **403 per row** and shows every email "Unknown".
+- Dark mode clean on Dashboard, User Management, Reports.
+
+Last updated: 2026-09-25
+
+## 1. Environment
+
+| Item | Value |
+|---|---|
+| Flutter / Dart | **3.47.5** / 3.13.4 on the host at `~/flutter` (upgraded from 3.41.9 per QA-002; the two blocking packages were bumped so the project now builds on current stable). |
+| Browser driver | agent-browser 0.27.0 with system Chrome 152, driving the app through Flutter's semantics tree |
+| App under test | `flutter run -d web-server` in debug mode at `127.0.0.1:8787` |
+| Backend | Hosted test Supabase project `pwbxgsuskvqwwaejxutj` (from `.env`). Email confirmation is off. |
+| Test account | A self-registered `standard` user, "QA Standard User" (office: Accounting). All QA data is prefixed `[QA-standard]`. |
+
+## 2. Static baseline
+
+| Check | Before | Now |
+|---|---|---|
+| `flutter analyze` | 0 issues | 0 issues |
+| `flutter test` | 126 pass / **8 fail** / 1 skip. The same 8 fail on clean `HEAD`. | **139 pass / 0 fail** / 1 skip |
+
+Side effects on the working tree:
+- `flutter pub get` refreshed `pubspec.lock` (drops `dio`) and added build and platform folders to `analysis_options.yaml`.
+- An accidental `dart format` run was reverted by a verified 3-way merge. The one exception is `lib/screens/tasks/task_detail_screen.dart`, which stays formatted. Its behaviour is identical; the approved plan called for formatting it anyway.
+
+## 3. Coverage
+
+| Area | Desktop | Mobile | Dark | Roles checked |
+|---|---|---|---|---|
+| Auth: login and sign-up | ✅ | ✅ | ✅ | signed out |
+| Shell: rail, bottom nav, More sheet, gated URLs | ✅ | ✅ | – | standard |
+| Dashboard | ✅ | ✅ | – | standard |
+| Tickets: list, filters, create, detail, chat, status menu | ✅ | ✅ | – | standard |
+| Tasks: list, tabs, table columns | ✅ | – | – | standard |
+| IT service requests: list, create dialog | ✅ | ✅ | – | standard. Create is blocked on the backend (QA-026). |
+| Announcements, Workforce, Notifications, Profile | ✅ | ✅ | – | standard |
+| Server security probes (RLS) | ✅ | | | standard token |
+| Attendance (geofence detection verified; check-in RPC needs a real device — see below) | ✅ partial | – | – | admin |
+| Whereabouts, Settings | ✅ | – | dark ok | admin/all |
+| Reports: RPC data + all 14 widgets render, Export PDF generates (print stub caught, no hang) | ✅ | | | admin |
+| Network Map: overview/sites/devices, **VLAN validation (QA-048)**, write RLS admin/it_staff-only (verified secure) | ✅ | | | admin |
+| Cross-role: task create → assign → notify → transition | ✅ | | | admin+it_staff |
+| Workforce: schedule generation (preview → warnings → commit → render → conflict guard → delete) | ✅ | | | admin |
+| Announcements: create + role targeting + banner + notification fan-out + **cross-role RLS visibility** + delete (cascade) | ✅ | | | admin + standard |
+| Approval-chain RLS audit: leave (secure), pass-slip (**QA-046 fixed+verified**), swap (**QA-047 fixed+verified**) | ✅ audit + live probes | | | inspection + REST (admin/it_staff tokens) |
+| Live approval **workflows** (file → approve → notify in-browser), PDF export | ⛔ not yet | | | |
+
+## 4. Issues
+
+Severity:
+- **P0:** build, crash, data loss or security
+- **P1:** feature broken
+- **P2:** UX, visual or accessibility defect
+- **P3:** polish
+
+"Verified" means checked in the browser; "unit/smoke" means checked by the test suite.
+
+| ID | Sev | Area | Issue | Root cause | Status |
+|---|---|---|---|---|---|
+| QA-001 | P0 | Security | Anyone can download the whole `.env` from the web build at `/assets/.env`, and it ships inside the APK. It contains `GEMINI_API_KEY`, `DEEPSEEK_API_KEY` and the commented production credentials. | `.env` is bundled as a Flutter asset; `ai_service.dart` reads the keys on the client | **Accepted / deferred** (owner decision 2026-09-26: leave the Gemini/DeepSeek keys as-is, no rotation). ⚠️ **Noted for a future security pass:** these keys remain publicly readable in every web build and APK. When revisited, the fix is an `ai_proxy` edge function that holds the keys as server secrets so they stop shipping to clients (and rotate them then). No code changed. |
+| QA-015 | **P0** | Security | Any signed-in user could read every office's IT service requests, **edit any of them, approve their own**, and assign or unassign staff through the REST API. | `USING (true)` policies in `20260308090000_add_it_service_requests.sql` | **Verified fixed.** standard reads 0 other-office ISRs (was 2); cross-office edit/self-approve → rows=0; **own** self-approve → 403 "Only admins can approve" (trigger); admin approve → 200; creator can still edit own pending request. Migration `20260924090000_isr_rls_hardening.sql`. |
+| QA-039 | P1 | Backend | The QA-015 SELECT tightening broke **standard-user ISR creation**: `insert_it_service_request_with_number` computes `MAX(request_number)` under the caller's RLS, so a non-privileged creator (who can't see others' rows) regenerated `ISR-2026-0001` and hit the unique constraint (23505). Privileged roles (it_staff verified) create fine. | The function isn't `SECURITY DEFINER` | **Verified fixed.** Standard create now succeeds (`ISR-2026-0005`, forced `pending_approval`, creator = the user). Function is `SECURITY DEFINER`, creator pinned, status clamped. |
+| QA-040 | P2 | Backend | Migration `20260604090000` added an 8-arg `insert_it_service_request_with_number` via `CREATE OR REPLACE` without dropping the original 7-arg one, leaving two overloads (PGRST203). | Overload not dropped | **Verified fixed** (single function; standard create resolves cleanly) |
+| QA-041 | P3 | Tasks | On the task detail page the **Details** panel (assignees, signatories, attachments, type) is collapsed by default, and on wide screens Chat occupies the prominent right pane — so the assignment control is two clicks deep. | Default-collapsed section | Open (minor UX) |
+| QA-042 | P2 | Attendance | A Dart console error `Too many positional arguments. Expected: 1 Actual: 2` fires when the Check-In geofence status refreshes (seen with and without a stubbed location). No visible impact, but it's an uncaught error worth a look. | Unknown (no stack trace captured); likely a geolocation/position callback arity mismatch | Open — needs investigation on a device |
+| QA-043 | P2 | Workforce | Schedule Generator "Uncovered shifts" panel ignored already-committed schedules. After committing a schedule, regenerating the same range produced an empty preview (the weekly-hours cap correctly blocks new drafts) **and** falsely flagged *every* required shift as uncovered — directly contradicting the Schedule tab. This also made it impossible to use the generator to fill a genuine gap after a partial commit. | `_buildWarnings` computed the day's "covered" set only from freshly generated drafts, never from existing `dutySchedulesProvider` rows | **Verified fixed** (browser + debug trace). `_buildWarnings` now also counts committed schedules for each day. `workforce_screen.dart` |
+| QA-044 | P2 | Workforce | Every Saturday and Sunday in a preview permanently reported "missing On Call", even in the first generation, although a weekend on-call shift *was* generated and committed. | The coverage check requires a generic `on_call` each day, but the generator emits the weekend variants `on_call_saturday` / `on_call_sunday`, which never matched. `_normalizeShiftType` (intended to fold variants) was an identity no-op and is load-bearing for template/generation, so it couldn't be changed globally | **Verified fixed** (debug trace: Sat/Sun `required={on_call,normal}` now satisfied by `available={normal,on_call}`). Added a coverage-only `_coverageShiftType` that folds the weekend variants to `on_call`; generation/template code untouched. `workforce_screen.dart` |
+| QA-045 | P3 | Tests | `dashboard_metrics_provider_test.dart` → "rejected leave should not affect schedule status" was time-of-day dependent: it hard-coded an 08:00–16:00 shift and asserted the status isn't "off", so it passed only when the suite ran during the day and failed (correctly reading "Off duty") at night. Production status logic is correct. | Fixture used a fixed daytime window instead of anchoring the shift around `now` | **Fixed.** Shift now spans `now-1h`…`now+4h` (matching the leave-window style already in the same test); suite is green regardless of clock. `test/dashboard_metrics_provider_test.dart` |
+| QA-046 | **P1** | Security | **Pass-slip self-approval bypass.** The `pass_slips_update` policy has a `USING` of `user_id = auth.uid() OR admin/dispatcher` and **no `WITH CHECK`**, so Postgres reuses `USING` as the check — the slip **owner can PATCH their own row to `status='approved'`** (plus `approved_by`/`approved_at`) via REST, self-approving their own duty excusal. Approval is only gated in the UI. Same class as QA-015. Confirmed by policy inspection (not live-probed: `pass_slips` has no `DELETE` policy and `duty_schedule_id` is RESTRICT-referenced, so a probe would leave un-removable test data). | Missing `WITH CHECK` in `20260306090200_pass_slips.sql:38` | **Verified fixed** (migration applied + live REST probes with an it_staff owner token): owner self-approve (pending→approved) → **0 rows**; owner approved→rejected → **42501 RLS violation**; admin approve → 200; owner approved→completed → 200. `supabase/migrations/20260926090000_pass_slip_rls_hardening.sql`. Probe left two un-deletable rows (`pass_slips` has no DELETE policy, `duty_schedule_id` is RESTRICT): one **completed** `[QA]` slip + one **2027-02-01** duty schedule — benign, removable only via SQL. |
+| QA-048 | P2 | Network map | Two dialogs accepted the Create click unconditionally (`Navigator.pop(ctx, true)`) and validated only *after* the dialog closed, with no `else` — so invalid input silently closed the dialog and created nothing, with **no feedback**: (1) **New VLAN** — out-of-range ID (0, 4095), non-numeric, or empty name; (2) **New location** (device edit) — empty name. | Validation ran post-close; no guard on the button | **Fixed** (both). Create is now disabled until input is valid (same pattern as QA-029). VLAN verified in-browser (empty/0/4095/"abc" → disabled, 20 → enabled); New location fix is identical (analyze clean). `network_map_vlan_screen.dart`, `network_map_device_edit_screen.dart`. |
+| QA-047 | **P1** | Security | **Shift-swap authorization bypass (confirmed live).** The RPCs (`respond_shift_swap`) correctly guard accept/reject by identity, but the `swap_requests` **table** has no scoped RLS, so the RPCs are bypassable via direct PostgREST: (a) a requester PATCHed their **own** swap straight to `status='accepted'`, forging the recipient's acceptance (200, 1 row); (b) a **non-participant** it_staff PATCHed **someone else's** swap (200, 1 row); (c) SELECT is unscoped too — any it_staff reads **all 60** swaps, incl. 48 they're not in. | `swap_requests` base-table policies (out-of-repo) allow any authenticated user to read/update any row | **Verified fixed** (migration applied + re-probed via MCP-confirmed policies and it_staff REST token): non-participant SELECT now `0` (was 48); requester direct status write → **0 rows**; non-participant direct write → **0 rows**; legitimate `request_shift_swap` create still succeeds. `supabase/migrations/20260926100000_swap_requests_rls_hardening.sql`. |
+| QA-027 | P1 | Security | The `it_service_attachments` storage bucket is public, and any signed-in user can delete any attachment | Storage `DELETE` policy was `bucket_id = 'it_service_attachments'` for all authenticated users | **Fixed + applied** (per your decision: keep bucket public, tighten delete). DELETE now requires `owner = auth.uid()` OR an ISR-privileged role (admin/programmer/dispatcher/it_staff). Reads/uploads unchanged. `supabase/migrations/20260926110000_isr_attachment_delete_hardening.sql`, applied to the test backend. **Related (also fixed + applied):** the separate `task_attachments` bucket had INSERT/UPDATE/DELETE open to the `public` role (unauthenticated users could upload/overwrite/delete). Writes are now `authenticated`-only, with UPDATE/DELETE scoped to uploader-or-privileged; reads unchanged. `supabase/migrations/20260926120000_task_attachment_write_hardening.sql`. |
+| QA-026 | P1 | Backend | Creating an IT service request failed with `PGRST202`; `network_devices.status` was missing (`42703`). | Test backend was missing migrations `20260604090000`, `20260605100000`, `20260605110000` | **Migrations applied.** it_staff ISR create now works and lands on the detail page. Standard create still blocked by QA-039 until the re-apply. |
+| QA-002 | P1 | Build | Doesn't compile on Flutter ≥ 3.44 | `font_awesome_flutter` 10.12 (extends now-`final` `IconData`) and `flutter_quill` 11.5.0 (missing `TextInputClient.onFocusReceived`) | **Fixed + verified** (per your decision: upgrade). Moved to **Flutter 3.47.5 / Dart 3.13.4**; `font_awesome_flutter` → 11.0.0, `flutter_quill` → 11.6.0, and `pdfrx` → 2.6.5 / `pdfrx_engine` → 0.6.1 (0.3.9 failed native compile under Dart 3.13 — would have broken the APK). `pubspec` Dart floor `^3.10.7` → `^3.12.0`. Cleared the 4 resulting deprecations (`axisAlignment`, `onReorder`×2, `dismissPdfiumWasmWarnings`). **Result: `flutter analyze` 0 issues, 139 tests pass, `flutter build web` succeeds, app runs (icons + Quill render, no console errors).** |
+| QA-003 | P1 | Build (Android) | The uncommitted diff dropped the `flutter_keyboard_visibility: ^6.0.0` override | `pubspec.yaml` | **Fixed** |
+| QA-004 | P1 | Auth | Every login landed on `/tickets` instead of the role's home route | `login_screen.dart` forced `context.go('/tickets')` | **Verified** across all 5 roles |
+| QA-005 | P1 | Routing | Opening a gated route directly bounced even an admin while the profile loaded | `app_router.dart` treated a still-loading role as "no access" | **Verified** |
+| QA-006 | P1 | Shell | Dispatchers saw Settings items and standard users saw Reports, both of which the router blocks | Nav rules didn't match the router | **Verified** (standard, dispatcher, it_staff, programmer) |
+| QA-007 | P1 | Notifications | In-app notification banners never appeared. Two latent bugs were behind that: the wrong item, and false banners on startup and resume. | `NotificationBridge` used a messenger with no Scaffold, and `.last` on a newest-first list | **Fixed + pipeline verified live.** admin assigns task → `notifications` row (201) → it_staff sees "ihomp assigned you … Just now" + 99+ bell → tap routes to the task → it_staff transitions it to in_progress (204). Banner-selection logic is unit-tested. |
+| QA-008 | P1 | Data | Lists came back reversed across the app: pickers Z→A, ports and VLANs descending, comments and chat ordered differently online and offline | postgrest `.order()` defaults to descending | **Fixed.** Verified (`order=name.asc`) |
+| QA-009 | P1 | Tasks | The Tasks table hid Status on almost every desktop width | The list-width check was measured against a screen breakpoint | **Fixed.** Verified at 1440 (`screenshots/QA-009-…`) |
+| QA-028 | P1 | Tickets | Standard users could file a ticket for **any** office. It then vanished from their own list, because they only see their own offices' tickets. | The create dialog used the all-offices provider | **Fixed.** Verified: only the user's office is offered |
+| QA-033 | P1 | Performance | Every client re-downloaded the **whole** `duty_schedules` table, and `swap_requests`, every 3 s on every page: about 40 requests a minute per user | A 3 s "safety-net" `Timer.periodic` in `workforce_provider.dart` | **Fixed.** Now 60 s; realtime remains the primary path |
+| QA-025 | P2 | UX | Error messages showed raw exception text, e.g. `AuthApiException(message: …, statusCode: 400…)`. This affected 64 places. | Callers put `'$e'` straight into the message | **Fixed** once in `snackbar.dart` (`humanizeErrorText`, with a unit test). Verified |
+| QA-029 | P2 | IT service requests, Workforce | "New Request" closed on an empty name and discarded what the user had entered. The "Add holiday" dialog silently did nothing on an empty name. | Validation ran after the dialog closed | **Fixed.** The button stays disabled until valid. Verified |
+| QA-030 | P2 | Tickets | The table showed 36-character UUIDs, which pushed Status off-screen at 1440 | Raw `ticket.id` | **Fixed.** Now an 8-character ID with the full ID in a tooltip. Verified |
+| QA-031 | P2 | Web | The mobile-only "Never miss an update" dialog, whose "Open settings" does nothing on web, appeared on web | No platform check | **Fixed.** Skipped on web |
+| QA-032 | P2 | Dashboard | Stale times read "Last seen outside · 4490h ago" | Relative times were only ever shown in hours | **Verified** (shows dates); `AppTime.relative()` added, 2 dup helpers removed |
+| QA-034 | P2 | Shell | The rail highlighted Dashboard while on Profile and Notifications | The index lookup fell back to 0 | **Fixed.** Verified |
+| QA-035 | P2 | Dashboard (mobile) | IT Staff Pulse showed initials-only avatars, with names only in a long-press tooltip | A mobile-specific branch | **Verified.** Names shown, ellipsized |
+| QA-010 | P2 | Web | Every page load logged "Could not navigate to initial route" | A wrapper `MaterialApp` on web | **Fixed.** Verified |
+| QA-011 | P2 | Attendance | `Platform.isAndroid` threw on web | No `kIsWeb` guard | **Fixed** |
+| QA-012 | P2 | Detail pages | The "Assigned IT Staff" header overflowed by 13 px | Fixed-width text with a `Spacer` | **Fixed** (smoke test) |
+| QA-013 | P2 | Accessibility | Password show/hide buttons had no label | No tooltip | **Fixed.** Verified |
+| QA-014 | P2 | Tests | 8 tests were failing before this work, and 1 passed by accident | Stale expectations, and a smoke-test helper whose screen size didn't reach `MediaQuery` | **Fixed** (139/139) |
+| QA-016 | P1 | Settings | Programmers can open User Management, but every row 403s and emails show "Unknown" | The edge function allows admin only | **Fixed + verified + deployed** (per your decision: programmers may manage users). `admin_user_management/index.ts` now allows `admin` or `programmer`; deployed to the test backend (v12). Verified: a programmer token's `list_users` returns 200 (was 403). |
+| QA-017 | P2 | Detail pages | Detail routes have no app-bar title | `_routeToTitle` | Open. No double app bar on ticket detail; network map not yet checked |
+| QA-018 | P2 | Startup | Up to about 40 s of blank screen on a slow network | Startup timeouts add up | Open |
+| QA-019 | P2 | Accessibility | No `Semantics` or `semanticLabel` anywhere. The ticket detail back button has no label. | App-wide | Open |
+| QA-020 | P3 | Web | Warning about the viewport `<meta>` on every load | `web/index.html` | Open |
+| QA-021 | P3 | Auth | Validation errors stay visible after the field is fixed | `autovalidateMode` | Open |
+| QA-022 | P3 | Data | Duplicate office names ("dddd", "dawd" ×3) | No unique constraint | Open |
+| QA-023 | P3 | Web | The connectivity check sends a `HEAD` every 5 s | `connectivity_provider.dart` | Open |
+| QA-024 | P3 | Auth | No "forgot password" flow | Not built | Reported only |
+| QA-036 | P3 | Copy | The Workforce empty state tells everyone to "Use the Generator tab", which non-admins don't have. The nav says "Announcement" but the page says "Announcements". The mobile label "IT Service Requests" wraps. The Pulse columns (Tickets, Tasks, Events) don't say they count "closed today". | Copy | Open |
+| QA-037 | P3 | Privacy | Standard users can see IT staff location status ("Last seen outside…") on the Dashboard, even though Whereabouts is blocked for them | The dashboard is identical for all roles | Open. Product decision |
+| QA-038 | P3 | Data | Two separate accounts share the display name "Paola Ross Liberato" (`paolaliberato92@gmail.com` = standard, `pao@mail.com` = programmer). Duplicate display names make User Management and pickers ambiguous. | No name uniqueness; likely a real re-registration | Open. Test-backend data, but the UI should disambiguate (show email) |
+
+## 5. Server-side probes (standard user token, test backend)
+
+| Table | Rows the standard user can read | Verdict |
+|---|---|---|
+| tickets | 8, all from the user's office | ✅ scoped |
+| tasks | 48, all from the user's office | ✅ scoped |
+| it_service_requests | 2, **both from other offices** | ❌ QA-015 |
+| profiles | 21 (the full directory) | Acceptable |
+| user_offices | 1 (own) | ✅ |
+| it_service_requests PATCH on another office's row | **HTTP 200, 1 row** | ❌ QA-015 |
+
+## 6. Blockers and decisions needed
+
+Admin login is now resolved (round 3). All five role sessions exist. Remaining:
+
+All prior decisions have been resolved by the owner (2026-09-26):
+- ~~QA-015/039/040~~ — fixed + verified (ISR RLS).
+- ~~QA-016~~ — programmers may manage users → fixed, deployed, verified.
+- ~~QA-027~~ — keep buckets public, tighten deletes → done (it_service + task_attachments).
+- ~~QA-002~~ — upgrade → done (Flutter 3.47.5).
+- **QA-001** — leave the AI keys, **noted for a future security enhancement** (server-side `ai_proxy`). This is the one remaining known exposure, deliberately deferred.
+
+## 6b. Harness limits (need a real device / manual)
+
+- **Attendance check-in / overtime RPC:** headless Chrome doesn't grant geolocation, and the in-handler `Geolocator.getCurrentPosition` doesn't resolve with a stubbed position, so the check-in RPC can't be driven here. Geofence *detection* is verified (screen flips to "Within geofence" with a stubbed location). The check-in, face verification, and PDF print-dialog flows need on-device testing.
+- **QA-046/047 probe residue — cleaned up.** The pass-slip and swap probes left rows that REST couldn't delete (`pass_slips`/`swap_requests` have no DELETE policy; the schedule was RESTRICT-referenced). Once the Supabase MCP reconnected these were removed with service access: `pass_slips 55046efa…`, `swap_requests 514c97ed…`/`befed0d0…`, `duty_schedules 5fe10a17…` — all confirmed gone (0 rows). The only remaining trace is a cosmetic `updated_at` bump on real long-rejected swap `ebb4b9e5…` from the non-destructive PROBE C (status unchanged).
+  - Minor observation: neither `pass_slips` nor `swap_requests` has a DELETE policy, so erroneous rows can't be removed through the app — likely intentional (immutable records), noted for awareness.
+
+## 7. Files changed by QA
+
+`lib/`
+- `main.dart`
+- `routing/app_router.dart`
+- `services/notification_bridge.dart`
+- `utils/`: `app_time.dart`, `device_security.dart`, `snackbar.dart`
+- `widgets/`: `app_shell.dart`, `tasq_adaptive_list.dart`, `task_assignment_section.dart`
+- `screens/`
+  - `auth/login_screen.dart`, `auth/signup_screen.dart`
+  - `dashboard/dashboard_screen.dart`
+  - `tickets/tickets_list_screen.dart`
+  - `it_service_requests/it_service_requests_list_screen.dart`
+  - `workforce/rotation_settings_dialog.dart`, `workforce/workforce_screen.dart` (QA-043/044: coverage warnings)
+  - `announcements/announcements_screen.dart`, `announcements/announcement_comments_section.dart`
+- `providers/`
+  - `chat`, `profile`, `announcements`, `workforce`, `tickets`, `services`, `user_offices` and `teams` providers
+  - `network_map/{network_devices,network_sites}_provider.dart`
+  - `network_map/network_map_vlan_screen.dart`, `network_map/network_map_device_edit_screen.dart` (QA-048: dialog validation)
+
+QA-002 upgrade also touched: `pubspec.yaml`/`pubspec.lock` (Flutter 3.47.5 + font_awesome 11 + flutter_quill 11.6 + pdfrx 2.6.5), `lib/main.dart` (dropped deprecated pdfrx flag), `lib/screens/network_map/widgets/topology_legend.dart` (`axisAlignment`→`alignment`), `lib/screens/workforce/rotation_settings_dialog.dart` (`onReorder`→`onReorderItem`), `lib/providers/stream_recovery.dart` (lint suppression).
+
+Everything else:
+- `pubspec.yaml`
+- `supabase/migrations/20260924090000_isr_rls_hardening.sql` (new)
+- `supabase/migrations/20260926090000_pass_slip_rls_hardening.sql` (new — QA-046)
+- `supabase/migrations/20260926100000_swap_requests_rls_hardening.sql` (new — QA-047)
+- tests: `notification_bridge_test.dart` (new), `snackbar_humanize_test.dart` (new), `layout_smoke_test.dart`, `offline_sync_test.dart`, `dashboard_metrics_provider_test.dart` (QA-045: de-flaked)

lib/app.dart

@@ -6,7 +6,7 @@ import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'routing/app_router.dart';
-import 'models/profile.dart';
+import 'models/profile.model.dart';
 import 'providers/connectivity_provider.dart';
 import 'providers/profile_provider.dart';
 import 'services/background_location_service.dart';

lib/main.dart

@@ -249,8 +249,7 @@ Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
-  // The flag optionally hides annoying WASM warnings in your Chrome dev console
+  pdfrxFlutterInitialize();
-  pdfrxFlutterInitialize(dismissPdfiumWasmWarnings: true);
 
   // initialize Firebase before anything that uses messaging
   try {
@@ -268,6 +267,21 @@ Future<void> main() async {
     debugPrint('dotenv load failed or timed out: $e');
   }
 
+  // Read VAPID_KEY once at startup. trim() handles trailing whitespace / BOM
+  // artifacts that the .env parser may leave, which would cause isEmpty to
+  // return true even when the key is present with a non-empty value.
+  final vapidKey = kIsWeb ? (dotenv.env['VAPID_KEY']?.trim() ?? '') : '';
+  if (kIsWeb) {
+    if (vapidKey.isEmpty) {
+      debugPrint(
+        'Web FCM: VAPID_KEY not set in .env — web push notifications disabled. '
+        'Add VAPID_KEY=<key> from Firebase Console → Project Settings → Cloud Messaging.',
+      );
+    } else {
+      debugPrint('Web FCM: VAPID_KEY loaded (${vapidKey.length} chars).');
+    }
+  }
+
   AppTime.initialize(location: 'Asia/Manila');
 
   final supabaseUrl = dotenv.env['SUPABASE_URL'] ?? '';
@@ -336,17 +350,9 @@ Future<void> main() async {
     final event = data.event;
 
     // Web: register FCM token for iOS 16.4+ PWA push support.
-    // Requires the VAPID key from Firebase Console → Project Settings →
+    // vapidKey was read once at startup from dotenv — see boot sequence above.
-    // Cloud Messaging → Web Push certificates → Key pair.
-    // Add VAPID_KEY=<your_key> to your .env file.
     if (kIsWeb) {
-      final vapidKey = dotenv.env['VAPID_KEY'] ?? '';
+      if (vapidKey.isEmpty) return; // already warned at startup
-      if (vapidKey.isEmpty) {
-        debugPrint(
-          'Web FCM: VAPID_KEY not set in .env — skipping token registration.',
-        );
-        return;
-      }
       if (event == AuthChangeEvent.signedIn) {
         try {
           final token = await FirebaseMessaging.instance.getToken(
@@ -761,6 +767,10 @@ class _UpdateCheckWrapperState extends State<UpdateCheckWrapper> {
 
   @override
   Widget build(BuildContext context) {
+    // Web has no update check. Skip the wrapper MaterialApp there: its plain
+    // Navigator gets the browser URL as its initial route and logs "Could not
+    // navigate to initial route" on every deep link.
+    if (kIsWeb) return const NotificationBridge(child: TasqApp());
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       theme: AppTheme.light(),
@@ -784,14 +794,12 @@ class _UpdateCheckWrapperState extends State<UpdateCheckWrapper> {
             ),
           );
         },
-        child: kIsWeb
+        child: _done
-            ? const NotificationBridge(child: TasqApp())
-            : (_done
             ? const NotificationBridge(child: TasqApp())
             : UpdateCheckingScreen(
                 checkForUpdates: _checkForUpdates,
                 onCompleted: _handleUpdateComplete,
-                    )),
+              ),
       ),
     );
   }

lib/models/announcement.dart

@@ -1 +0,0 @@
-export 'announcement.model.dart';

lib/models/announcement_comment.dart

@@ -1 +0,0 @@
-export 'announcement_comment.model.dart';

lib/models/attendance_log.dart

@@ -1 +0,0 @@
-export 'attendance_log.model.dart';

lib/models/chat_message.dart

@@ -1 +0,0 @@
-export 'chat_message.model.dart';

lib/models/duty_schedule.dart

@@ -1 +0,0 @@
-export 'duty_schedule.model.dart';

lib/models/it_service_request.dart

@@ -1 +0,0 @@
-export 'it_service_request.model.dart';

lib/models/it_service_request_action.dart

@@ -1 +0,0 @@
-export 'it_service_request_action.model.dart';

lib/models/it_service_request_activity_log.dart

@@ -1 +0,0 @@
-export 'it_service_request_activity_log.model.dart';

lib/models/it_service_request_assignment.dart

@@ -1 +0,0 @@
-export 'it_service_request_assignment.model.dart';

lib/models/leave_of_absence.dart

@@ -1 +0,0 @@
-export 'leave_of_absence.model.dart';

lib/models/network/network_device.dart

@@ -1,6 +1,52 @@
 import 'package:brick_offline_first_with_supabase/brick_offline_first_with_supabase.dart';
 import 'package:brick_supabase/brick_supabase.dart';
 
+enum NetworkDeviceStatus {
+  online,
+  offline,
+  warning,
+  unknown;
+
+  String get wire {
+    switch (this) {
+      case NetworkDeviceStatus.online:
+        return 'online';
+      case NetworkDeviceStatus.offline:
+        return 'offline';
+      case NetworkDeviceStatus.warning:
+        return 'warning';
+      case NetworkDeviceStatus.unknown:
+        return 'unknown';
+    }
+  }
+
+  String get label {
+    switch (this) {
+      case NetworkDeviceStatus.online:
+        return 'Online';
+      case NetworkDeviceStatus.offline:
+        return 'Offline';
+      case NetworkDeviceStatus.warning:
+        return 'Warning';
+      case NetworkDeviceStatus.unknown:
+        return 'Unknown';
+    }
+  }
+
+  static NetworkDeviceStatus fromWire(String? value) {
+    switch (value) {
+      case 'online':
+        return NetworkDeviceStatus.online;
+      case 'offline':
+        return NetworkDeviceStatus.offline;
+      case 'warning':
+        return NetworkDeviceStatus.warning;
+      default:
+        return NetworkDeviceStatus.unknown;
+    }
+  }
+}
+
 enum NetworkDeviceKind {
   router,
   switchDevice,
@@ -173,6 +219,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
   final String? mac;
   final String? locationId;
   final NetworkImportSource importSource;
+  final NetworkDeviceStatus status;
   final String? notes;
   final DateTime createdAt;
   final DateTime updatedAt;
@@ -189,6 +236,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
     this.mac,
     this.locationId,
     this.importSource = NetworkImportSource.manual,
+    this.status = NetworkDeviceStatus.unknown,
     this.notes,
     required this.createdAt,
     required this.updatedAt,
@@ -207,6 +255,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
       mac: map['mac']?.toString(),
       locationId: map['location_id'] as String?,
       importSource: NetworkImportSource.fromWire(map['import_source'] as String?),
+      status: NetworkDeviceStatus.fromWire(map['status'] as String?),
       notes: map['notes'] as String?,
       createdAt:
           DateTime.tryParse(map['created_at']?.toString() ?? '') ?? DateTime.now(),
@@ -226,6 +275,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
         if (mac != null) 'mac': mac,
         if (locationId != null) 'location_id': locationId,
         'import_source': importSource.wire,
+        'status': status.wire,
         if (notes != null) 'notes': notes,
       };
 
@@ -239,6 +289,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
         'mgmt_ip': mgmtIp,
         'mac': mac,
         'location_id': locationId,
+        'status': status.wire,
         'notes': notes,
       };
 
@@ -252,6 +303,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
     String? mgmtIp,
     String? mac,
     String? locationId,
+    NetworkDeviceStatus? status,
     String? notes,
   }) {
     return NetworkDevice(
@@ -266,6 +318,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
       mac: mac ?? this.mac,
       locationId: locationId ?? this.locationId,
       importSource: importSource,
+      status: status ?? this.status,
       notes: notes ?? this.notes,
       createdAt: createdAt,
       updatedAt: updatedAt,

lib/models/notification_item.dart

@@ -1 +0,0 @@
-export 'notification_item.model.dart';

lib/models/office.dart

@@ -1 +0,0 @@
-export 'office.model.dart';

lib/models/pass_slip.dart

@@ -1 +0,0 @@
-export 'pass_slip.model.dart';

lib/models/profile.dart

@@ -1 +0,0 @@
-export 'profile.model.dart';

lib/models/service.dart

@@ -1 +0,0 @@
-export 'service.model.dart';

lib/models/swap_request.dart

@@ -1 +0,0 @@
-export 'swap_request.model.dart';

lib/models/task.dart

@@ -1 +0,0 @@
-export 'task.model.dart';

lib/models/task_activity_log.dart

@@ -1 +0,0 @@
-export 'task_activity_log.model.dart';

lib/models/team.dart

@@ -1 +0,0 @@
-export 'team.model.dart';

lib/models/ticket.dart

@@ -1 +0,0 @@
-export 'ticket.model.dart';

lib/providers/announcements_provider.dart

@@ -3,8 +3,8 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:uuid/uuid.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/announcement.dart';
+import '../models/announcement.model.dart';
-import '../models/announcement_comment.dart';
+import '../models/announcement_comment.model.dart';
 import '../utils/app_time.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
 import 'connectivity_provider.dart';
@@ -278,29 +278,31 @@ final announcementCommentsProvider =
             .from('announcement_comments')
             .stream(primaryKey: ['id'])
             .eq('announcement_id', announcementId)
-        .order('created_at'),
+            .order('created_at', ascending: true),
         onPollData: () async {
           final data = await client
               .from('announcement_comments')
               .select()
               .eq('announcement_id', announcementId)
-          .order('created_at');
+              .order('created_at', ascending: true);
           return data.map(AnnouncementComment.fromMap).toList();
         },
         fromMap: AnnouncementComment.fromMap,
         channelName: 'announcement_comments_$announcementId',
-    onStatusChanged: ref.read(realtimeControllerProvider).handleChannelStatus,
+        onStatusChanged: ref
+            .read(realtimeControllerProvider)
+            .handleChannelStatus,
         onOfflineData: () async {
           final all = await cachedListFromBrick<AnnouncementComment>();
-      final filtered = all
+          final filtered =
-          .where((c) => c.announcementId == announcementId)
+              all.where((c) => c.announcementId == announcementId).toList()
-          .toList()
                 ..sort((a, b) => a.createdAt.compareTo(b.createdAt));
           return applyPending(filtered);
         },
         onCacheMirror: (rows) => mirrorBatchToBrick<AnnouncementComment>(
           rows,
-        tag: 'announcement_comments'),
+          tag: 'announcement_comments',
+        ),
       );
 
   ref.onDispose(wrapper.dispose);

lib/providers/attendance_provider.dart

@@ -8,7 +8,7 @@ import 'package:supabase_flutter/supabase_flutter.dart';
 import 'package:uuid/uuid.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/attendance_log.dart';
+import '../models/attendance_log.model.dart';
 import '../utils/app_time.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
 import 'connectivity_provider.dart';

lib/providers/chat_provider.dart

@@ -4,7 +4,7 @@ import 'package:supabase_flutter/supabase_flutter.dart';
 import 'package:uuid/uuid.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/chat_message.dart';
+import '../models/chat_message.model.dart';
 import '../utils/app_time.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
 import 'connectivity_provider.dart';
@@ -42,21 +42,22 @@ final chatMessagesProvider = StreamProvider.family<List<ChatMessage>, String>((
       byId.putIfAbsent(p.id, () => p);
     }
     return byId.values.toList()
-      ..sort((a, b) => a.createdAt.compareTo(b.createdAt));
+      ..sort((a, b) => b.createdAt.compareTo(a.createdAt));
   }
 
+  // Newest-first everywhere: the swap chat renders with ListView(reverse: true).
   final wrapper = StreamRecoveryWrapper<ChatMessage>(
     stream: client
         .from('chat_messages')
         .stream(primaryKey: ['id'])
         .eq('thread_id', threadId)
-        .order('created_at'),
+        .order('created_at', ascending: false),
     onPollData: () async {
       final data = await client
           .from('chat_messages')
           .select()
           .eq('thread_id', threadId)
-          .order('created_at');
+          .order('created_at', ascending: false);
       return data.map(ChatMessage.fromMap).toList();
     },
     fromMap: ChatMessage.fromMap,
@@ -64,10 +65,8 @@ final chatMessagesProvider = StreamProvider.family<List<ChatMessage>, String>((
     onStatusChanged: ref.read(realtimeControllerProvider).handleChannelStatus,
     onOfflineData: () async {
       final all = await cachedListFromBrick<ChatMessage>();
-      final filtered = all
+      final filtered = all.where((m) => m.threadId == threadId).toList()
-          .where((m) => m.threadId == threadId)
+        ..sort((a, b) => b.createdAt.compareTo(a.createdAt));
-          .toList()
-        ..sort((a, b) => a.createdAt.compareTo(b.createdAt));
       return applyPending(filtered);
     },
     onCacheMirror: (rows) =>

lib/providers/it_service_request_provider.dart

@@ -9,10 +9,10 @@ import 'package:flutter/material.dart';
 import 'package:uuid/uuid.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/it_service_request.dart';
+import '../models/it_service_request.model.dart';
-import '../models/it_service_request_assignment.dart';
+import '../models/it_service_request_assignment.model.dart';
-import '../models/it_service_request_activity_log.dart';
+import '../models/it_service_request_activity_log.model.dart';
-import '../models/it_service_request_action.dart';
+import '../models/it_service_request_action.model.dart';
 import '../utils/app_time.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
 import 'connectivity_provider.dart';

lib/providers/leave_provider.dart

@@ -4,7 +4,7 @@ import 'package:supabase_flutter/supabase_flutter.dart';
 import 'package:uuid/uuid.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/leave_of_absence.dart';
+import '../models/leave_of_absence.model.dart';
 import '../utils/app_time.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
 import 'connectivity_provider.dart';

lib/providers/network_map/network_devices_provider.dart

@@ -8,7 +8,7 @@ import '../supabase_provider.dart';
 
 final networkDevicesProvider = FutureProvider<List<NetworkDevice>>((ref) async {
   final client = ref.watch(supabaseClientProvider);
-  final rows = await client.from('network_devices').select().order('name');
+  final rows = await client.from('network_devices').select().order('name', ascending: true);
   return (rows as List)
       .map((r) => NetworkDevice.fromMap(r as Map<String, dynamic>))
       .toList();
@@ -16,7 +16,7 @@ final networkDevicesProvider = FutureProvider<List<NetworkDevice>>((ref) async {
 
 final networkPortsProvider = FutureProvider<List<NetworkPort>>((ref) async {
   final client = ref.watch(supabaseClientProvider);
-  final rows = await client.from('network_ports').select().order('port_number');
+  final rows = await client.from('network_ports').select().order('port_number', ascending: true);
   return (rows as List)
       .map((r) => NetworkPort.fromMap(r as Map<String, dynamic>))
       .toList();
@@ -32,7 +32,7 @@ final networkLinksProvider = FutureProvider<List<NetworkLink>>((ref) async {
 
 final networkVlansProvider = FutureProvider<List<NetworkVlan>>((ref) async {
   final client = ref.watch(supabaseClientProvider);
-  final rows = await client.from('network_vlans').select().order('vlan_id');
+  final rows = await client.from('network_vlans').select().order('vlan_id', ascending: true);
   return (rows as List)
       .map((r) => NetworkVlan.fromMap(r as Map<String, dynamic>))
       .toList();
@@ -57,7 +57,7 @@ final networkPortsByDeviceProvider =
       .from('network_ports')
       .select()
       .eq('device_id', deviceId)
-      .order('port_number');
+      .order('port_number', ascending: true);
   return (rows as List)
       .map((r) => NetworkPort.fromMap(r as Map<String, dynamic>))
       .toList();
@@ -78,6 +78,7 @@ class NetworkDevicesController {
     String? mac,
     String? locationId,
     NetworkImportSource importSource = NetworkImportSource.manual,
+    NetworkDeviceStatus status = NetworkDeviceStatus.unknown,
     String? notes,
   }) async {
     final client = ref.read(supabaseClientProvider);
@@ -94,6 +95,7 @@ class NetworkDevicesController {
           'mac': ?mac,
           'location_id': ?locationId,
           'import_source': importSource.wire,
+          'status': status.wire,
           'notes': ?notes,
         })
         .select()

lib/providers/network_map/network_sites_provider.dart

@@ -6,7 +6,7 @@ import '../supabase_provider.dart';
 
 final networkSitesProvider = FutureProvider<List<NetworkSite>>((ref) async {
   final client = ref.watch(supabaseClientProvider);
-  final rows = await client.from('network_sites').select().order('name');
+  final rows = await client.from('network_sites').select().order('name', ascending: true);
   return (rows as List)
       .map((r) => NetworkSite.fromMap(r as Map<String, dynamic>))
       .toList();
@@ -14,7 +14,7 @@ final networkSitesProvider = FutureProvider<List<NetworkSite>>((ref) async {
 
 final networkLocationsProvider = FutureProvider<List<NetworkLocation>>((ref) async {
   final client = ref.watch(supabaseClientProvider);
-  final rows = await client.from('network_locations').select().order('name');
+  final rows = await client.from('network_locations').select().order('name', ascending: true);
   return (rows as List)
       .map((r) => NetworkLocation.fromMap(r as Map<String, dynamic>))
       .toList();

lib/providers/notifications_provider.dart

@@ -4,7 +4,7 @@ import 'package:supabase_flutter/supabase_flutter.dart';
 import '../utils/device_id.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/notification_item.dart';
+import '../models/notification_item.model.dart';
 import '../utils/app_time.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
 import 'connectivity_provider.dart';

lib/providers/pass_slip_provider.dart

@@ -4,7 +4,7 @@ import 'package:supabase_flutter/supabase_flutter.dart';
 import 'package:uuid/uuid.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/pass_slip.dart';
+import '../models/pass_slip.model.dart';
 import '../utils/app_time.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
 import 'connectivity_provider.dart';

lib/providers/profile_provider.dart

@@ -9,7 +9,7 @@ import 'package:shared_preferences/shared_preferences.dart';
 import 'package:supabase_flutter/supabase_flutter.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/profile.dart';
+import '../models/profile.model.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
 import 'auth_provider.dart';
 import 'connectivity_provider.dart';
@@ -165,9 +165,12 @@ final profilesProvider = StreamProvider<List<Profile>>((ref) {
     stream: client
         .from('profiles')
         .stream(primaryKey: ['id'])
-        .order('full_name'),
+        .order('full_name', ascending: true),
     onPollData: () async {
-      final data = await client.from('profiles').select().order('full_name');
+      final data = await client
+          .from('profiles')
+          .select()
+          .order('full_name', ascending: true);
       return data.map(Profile.fromMap).toList();
     },
     fromMap: Profile.fromMap,

lib/providers/services_provider.dart

@@ -1,7 +1,7 @@
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../brick/cache_helpers.dart';
-import '../models/service.dart';
+import '../models/service.model.dart';
 import 'supabase_provider.dart';
 import 'stream_recovery.dart';
 import 'realtime_controller.dart';
@@ -10,9 +10,15 @@ final servicesProvider = StreamProvider<List<Service>>((ref) {
   final client = ref.watch(supabaseClientProvider);
 
   final wrapper = StreamRecoveryWrapper<Service>(
-    stream: client.from('services').stream(primaryKey: ['id']).order('name'),
+    stream: client
+        .from('services')
+        .stream(primaryKey: ['id'])
+        .order('name', ascending: true),
     onPollData: () async {
-      final data = await client.from('services').select().order('name');
+      final data = await client
+          .from('services')
+          .select()
+          .order('name', ascending: true);
       return data.map(Service.fromMap).toList();
     },
     fromMap: Service.fromMap,
@@ -33,7 +39,10 @@ final servicesProvider = StreamProvider<List<Service>>((ref) {
 
 final servicesOnceProvider = FutureProvider<List<Service>>((ref) async {
   final client = ref.watch(supabaseClientProvider);
-  final rows = await client.from('services').select().order('name');
+  final rows = await client
+      .from('services')
+      .select()
+      .order('name', ascending: true);
   return (rows as List<dynamic>)
       .map((r) => Service.fromMap(r as Map<String, dynamic>))
       .toList();

lib/providers/stream_recovery.dart

@@ -1,3 +1,7 @@
+// The constructor deliberately exposes public named params (onPollData, …) that
+// initialize private fields (_onPollData, …); the initializing-formal "fix"
+// would rename the params to private and break all call sites.
+// ignore_for_file: prefer_initializing_formals
 import 'dart:async';
 import 'dart:math' as math;
 import 'package:flutter/foundation.dart';

lib/providers/tasks_provider.dart

@@ -9,8 +9,8 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:supabase_flutter/supabase_flutter.dart';
 import '../brick/cache_helpers.dart';
 import '../brick/repository.dart';
-import '../models/task.dart';
+import '../models/task.model.dart';
-import '../models/task_activity_log.dart';
+import '../models/task_activity_log.model.dart';
 import 'connectivity_provider.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';

lib/providers/teams_provider.dart

@@ -2,7 +2,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../brick/cache_helpers.dart';
 import '../brick/cache_warmer.dart';
-import '../models/team.dart';
+import '../models/team.model.dart';
 import '../models/team_member.dart';
 import 'realtime_controller.dart';
 import 'stream_recovery.dart';
@@ -13,9 +13,15 @@ final teamsProvider = StreamProvider<List<Team>>((ref) {
   final client = ref.watch(supabaseClientProvider);
 
   final wrapper = StreamRecoveryWrapper<Team>(
-    stream: client.from('teams').stream(primaryKey: ['id']).order('name'),
+    stream: client
+        .from('teams')
+        .stream(primaryKey: ['id'])
+        .order('name', ascending: true),
     onPollData: () async {
-      final data = await client.from('teams').select().order('name');
+      final data = await client
+          .from('teams')
+          .select()
+          .order('name', ascending: true);
       return data.map(Team.fromMap).toList();
     },
     fromMap: Team.fromMap,

lib/providers/tickets_provider.dart

@@ -10,8 +10,8 @@ import 'package:uuid/uuid.dart';
 import '../brick/cache_helpers.dart';
 import '../brick/repository.dart';
 import '../utils/snackbar.dart' show isOfflineSaveError;
-import '../models/office.dart';
+import '../models/office.model.dart';
-import '../models/ticket.dart';
+import '../models/ticket.model.dart';
 import '../models/ticket_message.dart';
 import 'profile_provider.dart';
 import 'supabase_provider.dart';
@@ -39,9 +39,15 @@ final officesProvider = StreamProvider<List<Office>>((ref) {
   }
 
   final wrapper = StreamRecoveryWrapper<Office>(
-    stream: client.from('offices').stream(primaryKey: ['id']).order('name'),
+    stream: client
+        .from('offices')
+        .stream(primaryKey: ['id'])
+        .order('name', ascending: true),
     onPollData: () async {
-      final data = await client.from('offices').select().order('name');
+      final data = await client
+          .from('offices')
+          .select()
+          .order('name', ascending: true);
       return data.map(Office.fromMap).toList();
     },
     fromMap: Office.fromMap,
@@ -94,7 +100,10 @@ final officesProvider = StreamProvider<List<Office>>((ref) {
 
 final officesOnceProvider = FutureProvider<List<Office>>((ref) async {
   final client = ref.watch(supabaseClientProvider);
-  final rows = await client.from('offices').select().order('name');
+  final rows = await client
+      .from('offices')
+      .select()
+      .order('name', ascending: true);
   return (rows as List<dynamic>)
       .map((row) => Office.fromMap(row as Map<String, dynamic>))
       .toList();

lib/providers/user_offices_provider.dart

@@ -52,9 +52,9 @@ final userOfficesProvider = StreamProvider<List<UserOffice>>((ref) {
     stream: client
         .from('user_offices')
         .stream(primaryKey: ['user_id', 'office_id'])
-        .order('created_at'),
+        .order('created_at', ascending: true),
     onPollData: () async {
-      final data = await client.from('user_offices').select().order('created_at');
+      final data = await client.from('user_offices').select().order('created_at', ascending: true);
       return data.map(UserOffice.fromMap).toList();
     },
     fromMap: UserOffice.fromMap,

lib/providers/workforce_provider.dart

@@ -7,8 +7,8 @@ import 'package:supabase_flutter/supabase_flutter.dart';
 
 import '../brick/cache_helpers.dart';
 import '../models/app_settings.dart';
-import '../models/duty_schedule.dart';
+import '../models/duty_schedule.model.dart';
-import '../models/swap_request.dart';
+import '../models/swap_request.model.dart';
 import 'profile_provider.dart';
 import 'supabase_provider.dart';
 import 'stream_recovery.dart';
@@ -65,12 +65,12 @@ final dutySchedulesProvider = StreamProvider<List<DutySchedule>>((ref) {
     stream: client
         .from('duty_schedules')
         .stream(primaryKey: ['id'])
-        .order('start_time'),
+        .order('start_time', ascending: true),
     onPollData: () async {
       final data = await client
           .from('duty_schedules')
           .select()
-          .order('start_time');
+          .order('start_time', ascending: true);
       return data.map(DutySchedule.fromMap).toList();
     },
     fromMap: DutySchedule.fromMap,
@@ -89,13 +89,16 @@ final dutySchedulesProvider = StreamProvider<List<DutySchedule>>((ref) {
 
   // Immediate poll so any changes that happened while this provider was
   // not alive (e.g. a swap was accepted on another device) are reflected
-  // right away — before the 3-second periodic timer fires.
+  // right away — before the periodic timer fires.
   wrapper.pollNow();
 
-  // Periodic safety-net: keep polling every 3 s so that ownership changes
+  // Periodic safety-net: keep polling so that ownership changes
   // (swap accepted → user_id updated on duty_schedules) are always picked
   // up even if Supabase Realtime misses the event.
-  final dutyRefreshTimer = Timer.periodic(const Duration(seconds: 3), (_) {
+  // ponytail: was 3 s, i.e. every client re-downloaded the whole table ~20x a
+  // minute. Realtime is the primary path; 60 s bounds how stale a missed swap
+  // can get. Tighten only if swaps need faster convergence.
+  final dutyRefreshTimer = Timer.periodic(const Duration(seconds: 60), (_) {
     wrapper.pollNow();
   });
   ref.onDispose(dutyRefreshTimer.cancel);
@@ -135,7 +138,7 @@ final dutySchedulesForUserProvider =
                   .eq('user_id', userId)
                   /* exclude past schedules by ensuring the shift has not ended */
                   .gte('end_time', nowIso)
-                  .order('start_time')
+                  .order('start_time', ascending: true)
               as List<dynamic>;
       return rows
           .map((r) => DutySchedule.fromMap(r as Map<String, dynamic>))
@@ -201,13 +204,14 @@ final swapRequestsProvider = StreamProvider<List<SwapRequest>>((ref) {
 
   // Immediate poll: fetch fresh data right away so any status changes that
   // happened while this provider was not alive are reflected instantly,
-  // before the 3-second periodic timer fires for the first time.
+  // before the periodic timer fires for the first time.
   wrapper.pollNow();
 
-  // Periodic safety-net: keep polling every 3 s to catch any status changes
+  // Periodic safety-net: keep polling to catch any status changes
   // that Supabase Realtime may have missed (e.g. when the swap_requests table
   // is not yet in the supabase_realtime publication).
-  final refreshTimer = Timer.periodic(const Duration(seconds: 3), (_) {
+  // ponytail: was 3 s (see dutySchedulesProvider); 60 s safety net.
+  final refreshTimer = Timer.periodic(const Duration(seconds: 60), (_) {
     wrapper.pollNow();
   });
   ref.onDispose(refreshTimer.cancel);

lib/routing/app_router.dart

@@ -41,6 +41,9 @@ import '../theme/m3_motion.dart';
 
 import '../utils/navigation.dart';
 
+Page<dynamic> Function(BuildContext, GoRouterState) _page(Widget child) =>
+    (context, state) => M3SharedAxisPage(key: state.pageKey, child: child);
+
 String _defaultRouteForRole(String? role) {
   switch (role) {
     case 'it_staff':
@@ -100,15 +103,19 @@ final appRouterProvider = Provider<GoRouter>((ref) {
         return _defaultRouteForRole(role);
       }
       // Deferred post-login redirect: profile loaded after the initial redirect
-      // (which fell back to /dashboard because role was null). Only fires once
+      // (which fell back to /dashboard because role was null). Consumed once
-      // per sign-in and only when the user is still on /dashboard.
+      // per sign-in; only redirects when the user is still on /dashboard.
-      if (isSignedIn &&
+      if (isSignedIn && notifier._needsRoleRedirect && role != null) {
-          notifier._needsRoleRedirect &&
-          role != null &&
-          state.matchedLocation == '/dashboard') {
         notifier._needsRoleRedirect = false;
+        if (state.matchedLocation == '/dashboard') {
           return _defaultRouteForRole(role);
         }
+      }
+      // Role unknown while the profile loads: hold the deep link instead of
+      // bouncing it. RouterNotifier re-runs this once the profile arrives.
+      if (isSignedIn && profileAsync.isLoading && role == null) {
+        return null;
+      }
       if (isAdminRoute && !isAdmin) {
         return '/tickets';
       }
@@ -145,31 +152,19 @@ final appRouterProvider = Provider<GoRouter>((ref) {
         routes: [
           GoRoute(
             path: '/settings/teams',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const TeamsScreen()),
-              key: state.pageKey,
-              child: const TeamsScreen(),
-            ),
           ),
           GoRoute(
             path: '/settings/app-update',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const AppUpdateScreen()),
-              key: state.pageKey,
-              child: const AppUpdateScreen(),
-            ),
           ),
           GoRoute(
             path: '/dashboard',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const DashboardScreen()),
-              key: state.pageKey,
-              child: const DashboardScreen(),
-            ),
           ),
           GoRoute(
             path: '/tickets',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const TicketsListScreen()),
-              key: state.pageKey,
-              child: const TicketsListScreen(),
-            ),
             routes: [
               GoRoute(
                 path: ':id',
@@ -184,10 +179,7 @@ final appRouterProvider = Provider<GoRouter>((ref) {
           ),
           GoRoute(
             path: '/tasks',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const TasksListScreen()),
-              key: state.pageKey,
-              child: const TasksListScreen(),
-            ),
             routes: [
               GoRoute(
                 path: ':id',
@@ -202,10 +194,7 @@ final appRouterProvider = Provider<GoRouter>((ref) {
           ),
           GoRoute(
             path: '/it-service-requests',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const ItServiceRequestsListScreen()),
-              key: state.pageKey,
-              child: const ItServiceRequestsListScreen(),
-            ),
             routes: [
               GoRoute(
                 path: ':id',
@@ -220,80 +209,44 @@ final appRouterProvider = Provider<GoRouter>((ref) {
           ),
           GoRoute(
             path: '/announcements',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const AnnouncementsScreen()),
-              key: state.pageKey,
-              child: const AnnouncementsScreen(),
-            ),
           ),
           GoRoute(
             path: '/workforce',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const WorkforceScreen()),
-              key: state.pageKey,
-              child: const WorkforceScreen(),
-            ),
           ),
           GoRoute(
             path: '/attendance',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const AttendanceScreen()),
-              key: state.pageKey,
-              child: const AttendanceScreen(),
-            ),
           ),
           GoRoute(
             path: '/whereabouts',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const WhereaboutsScreen()),
-              key: state.pageKey,
-              child: const WhereaboutsScreen(),
-            ),
-          ),
-          GoRoute(
-            path: '/reports',
-            pageBuilder: (context, state) => M3SharedAxisPage(
-              key: state.pageKey,
-              child: const ReportsScreen(),
-            ),
           ),
+          GoRoute(path: '/reports', pageBuilder: _page(const ReportsScreen())),
           GoRoute(
             path: '/settings/users',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const UserManagementScreen()),
-              key: state.pageKey,
-              child: const UserManagementScreen(),
-            ),
           ),
           GoRoute(
             path: '/settings/offices',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const OfficesScreen()),
-              key: state.pageKey,
-              child: const OfficesScreen(),
-            ),
           ),
           GoRoute(
             path: '/settings/geofence-test',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const GeofenceTestScreen()),
-              key: state.pageKey,
-              child: const GeofenceTestScreen(),
-            ),
           ),
           GoRoute(
             path: '/settings/permissions',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const PermissionsScreen()),
-              key: state.pageKey,
-              child: const PermissionsScreen(),
-            ),
           ),
           GoRoute(
             path: '/network-map',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const NetworkMapOverviewScreen()),
-              key: state.pageKey,
-              child: const NetworkMapOverviewScreen(),
-            ),
             routes: [
               GoRoute(
                 path: 'import',
-                pageBuilder: (context, state) => M3SharedAxisPage(
+                pageBuilder: _page(const NetworkMapImportScreen()),
-                  key: state.pageKey,
-                  child: const NetworkMapImportScreen(),
-                ),
                 routes: [
                   GoRoute(
                     path: ':importId/review',
@@ -308,10 +261,7 @@ final appRouterProvider = Provider<GoRouter>((ref) {
               ),
               GoRoute(
                 path: 'vlans',
-                pageBuilder: (context, state) => M3SharedAxisPage(
+                pageBuilder: _page(const NetworkMapVlanScreen()),
-                  key: state.pageKey,
-                  child: const NetworkMapVlanScreen(),
-                ),
               ),
               GoRoute(
                 path: 'site/:siteId',
@@ -357,18 +307,9 @@ final appRouterProvider = Provider<GoRouter>((ref) {
           ),
           GoRoute(
             path: '/notifications',
-            pageBuilder: (context, state) => M3SharedAxisPage(
+            pageBuilder: _page(const NotificationsScreen()),
-              key: state.pageKey,
-              child: const NotificationsScreen(),
-            ),
-          ),
-          GoRoute(
-            path: '/profile',
-            pageBuilder: (context, state) => M3SharedAxisPage(
-              key: state.pageKey,
-              child: const ProfileScreen(),
-            ),
           ),
+          GoRoute(path: '/profile', pageBuilder: _page(const ProfileScreen())),
         ],
       ),
     ],

lib/screens/admin/geofence_test_screen.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+
+import '../../theme/app_status_colors.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:flutter_map/flutter_map.dart';
@@ -111,8 +113,8 @@ class _GeofenceTestScreenState extends ConsumerState<GeofenceTestScreen> {
                                                                     .check_circle
                                                               : Icons.cancel,
                                                           color: inside
-                                                              ? Colors.green
+                                                              ? AppStatusColors.of(context).success.color
-                                                              : Colors.red,
+                                                              : AppStatusColors.of(context).danger.color,
                                                         ),
                                                         const SizedBox(
                                                           width: 8,
@@ -166,8 +168,8 @@ class _GeofenceTestScreenState extends ConsumerState<GeofenceTestScreen> {
                                                         ? Icons.check_circle
                                                         : Icons.cancel,
                                                     color: inside
-                                                        ? Colors.green
+                                                        ? AppStatusColors.of(context).success.color
-                                                        : Colors.red,
+                                                        : AppStatusColors.of(context).danger.color,
                                                   ),
                                                   const SizedBox(width: 8),
                                                   Text(
@@ -275,10 +277,10 @@ class _GeofenceTestScreenState extends ConsumerState<GeofenceTestScreen> {
                                 width: 40,
                                 height: 40,
                                 // `child` is used by newer flutter_map Marker API.
-                                child: const Icon(
+                                child: Icon(
                                   Icons.person_pin_circle,
                                   size: 36,
-                                  color: Colors.blue,
+                                  color: Theme.of(context).colorScheme.primary,
                                 ),
                               ),
                             );
@@ -289,10 +291,12 @@ class _GeofenceTestScreenState extends ConsumerState<GeofenceTestScreen> {
                                   polygons: [
                                     Polygon(
                                       points: polygonPoints,
-                                      color: Colors.green.withValues(
+                                      color: AppStatusColors.of(context)
-                                        alpha: 0.15,
+                                          .success
-                                      ),
+                                          .color
-                                      borderColor: Colors.green,
+                                          .withValues(alpha: 0.15),
+                                      borderColor:
+                                          AppStatusColors.of(context).success.color,
                                       borderStrokeWidth: 2,
                                     ),
                                   ],
@@ -304,9 +308,10 @@ class _GeofenceTestScreenState extends ConsumerState<GeofenceTestScreen> {
                                   circles: [
                                     CircleMarker(
                                       point: LatLng(cfg!.lat!, cfg.lng!),
-                                      color: Colors.green.withValues(
+                                      color: AppStatusColors.of(context)
-                                        alpha: 0.10,
+                                          .success
-                                      ),
+                                          .color
+                                          .withValues(alpha: 0.10),
                                       borderStrokeWidth: 2,
                                       useRadiusInMeter: true,
                                       radius: cfg.radiusMeters ?? 100,
@@ -387,11 +392,15 @@ class _GeofenceTestScreenState extends ConsumerState<GeofenceTestScreen> {
                                               width: 12,
                                               height: 12,
                                               decoration: BoxDecoration(
-                                                color: Colors.green.withValues(
+                                                color: AppStatusColors.of(
+                                                  context,
+                                                ).success.color.withValues(
                                                   alpha: 0.25,
                                                 ),
                                                 border: Border.all(
-                                                  color: Colors.green,
+                                                  color: AppStatusColors.of(
+                                                    context,
+                                                  ).success.color,
                                                 ),
                                               ),
                                             ),
@@ -420,14 +429,16 @@ class _GeofenceTestScreenState extends ConsumerState<GeofenceTestScreen> {
                                             top: 6.0,
                                           ),
                                           child: Row(
-                                            children: const [
+                                            children: [
                                               Icon(
                                                 Icons.person_pin_circle,
                                                 size: 14,
-                                                color: Colors.blue,
+                                                color: Theme.of(
+                                                  context,
+                                                ).colorScheme.primary,
                                               ),
-                                              SizedBox(width: 8),
+                                              const SizedBox(width: 8),
-                                              Text('You'),
+                                              const Text('You'),
                                             ],
                                           ),
                                         ),

lib/screens/admin/offices_screen.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import '../../theme/m3_motion.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import '../../models/office.dart';
+import '../../models/office.model.dart';
 import '../../providers/profile_provider.dart';
 import '../../providers/tickets_provider.dart';
 import '../../providers/services_provider.dart';

lib/screens/admin/user_management_screen.dart

@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
 import '../../theme/m3_motion.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:intl/intl.dart';
 
-import '../../models/office.dart';
+import '../../models/office.model.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
 import '../../models/ticket_message.dart';
 import '../../models/user_office.dart';
 import '../../providers/admin_user_provider.dart';
@@ -713,9 +714,7 @@ String _formatLastActiveLabel(DateTime? value) {
   if (diff.inHours < 1) return '${diff.inMinutes}m ago';
   if (diff.inDays < 1) return '${diff.inHours}h ago';
   if (diff.inDays < 7) return '${diff.inDays}d ago';
-  final month = value.month.toString().padLeft(2, '0');
+  return DateFormat('yyyy-MM-dd').format(value);
-  final day = value.day.toString().padLeft(2, '0');
-  return '${value.year}-$month-$day';
 }
 
 class _StatusBadge extends StatelessWidget {

lib/screens/announcements/announcement_comments_section.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import '../../models/announcement_comment.dart';
+import '../../models/announcement_comment.model.dart';
 import '../../providers/announcements_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../utils/app_time.dart';
@@ -49,10 +49,9 @@ class _AnnouncementCommentsSectionState
       // Comment was posted; only push notification delivery failed.
       _controller.clear();
       if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
+        showInfoSnackBar(
-          const SnackBar(
+          context,
-            content: Text('Comment posted, but notifications may not have been sent.'),
+          'Comment posted, but notifications may not have been sent.',
-          ),
         );
       }
     } catch (e) {
@@ -225,7 +224,7 @@ class _CommentTile extends StatelessWidget {
                   const SizedBox(width: 8),
                   Flexible(
                     child: Text(
-                      _relativeTime(comment.createdAt),
+                      AppTime.relative(comment.createdAt),
                       style: tt.labelSmall
                           ?.copyWith(color: cs.onSurfaceVariant),
                       overflow: TextOverflow.ellipsis,
@@ -252,12 +251,3 @@ class _CommentTile extends StatelessWidget {
   }
 }
 
-String _relativeTime(DateTime dt) {
-  final now = AppTime.now();
-  final diff = now.difference(dt);
-  if (diff.inMinutes < 1) return 'just now';
-  if (diff.inMinutes < 60) return '${diff.inMinutes}m ago';
-  if (diff.inHours < 24) return '${diff.inHours}h ago';
-  if (diff.inDays < 7) return '${diff.inDays}d ago';
-  return AppTime.formatDate(dt);
-}

lib/screens/announcements/announcements_screen.dart

@@ -4,7 +4,7 @@ import 'dart:math' as math show min;
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import '../../models/announcement.dart';
+import '../../models/announcement.model.dart';
 import '../../providers/announcements_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../theme/m3_motion.dart';
@@ -381,7 +381,7 @@ class _AnnouncementCardState extends ConsumerState<_AnnouncementCard> {
                           children: [
                             Flexible(
                               child: Text(
-                                _relativeTime(widget.announcement.createdAt),
+                                AppTime.relative(widget.announcement.createdAt),
                                 style: tt.labelSmall
                                     ?.copyWith(color: cs.onSurfaceVariant),
                               ),
@@ -578,16 +578,6 @@ class _AnnouncementCardState extends ConsumerState<_AnnouncementCard> {
 // Helpers
 // ─────────────────────────────────────────────────────────────────────────────
 
-String _relativeTime(DateTime dt) {
-  final now = AppTime.now();
-  final diff = now.difference(dt);
-  if (diff.inMinutes < 1) return 'Just now';
-  if (diff.inMinutes < 60) return '${diff.inMinutes}m ago';
-  if (diff.inHours < 24) return '${diff.inHours}h ago';
-  if (diff.inDays < 7) return '${diff.inDays}d ago';
-  return AppTime.formatDate(dt);
-}
-
 String _roleLabel(String role) {
   const labels = {
     'admin': 'Admin',

lib/screens/announcements/create_announcement_dialog.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import '../../models/announcement.dart';
+import '../../models/announcement.model.dart';
 import '../../providers/announcements_provider.dart';
 import '../../theme/m3_motion.dart';
 import '../../utils/app_time.dart';
@@ -260,12 +260,9 @@ class _CreateAnnouncementContentState
           widget.editing != null ? 'Announcement updated.' : 'Announcement posted.');
     } on AnnouncementNotificationException {
       if (mounted) {
-        final messenger = ScaffoldMessenger.of(context);
         Navigator.of(context).pop();
-        messenger.showSnackBar(
+        showInfoSnackBarGlobal(
-          const SnackBar(
+          'Posted, but some notifications failed to send.',
-            content: Text('Posted, but some notifications failed to send.'),
-          ),
         );
       }
     } catch (e) {

lib/screens/attendance/logbook_day_activity.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:intl/intl.dart';
 
-import '../../models/attendance_log.dart';
+import '../../models/attendance_log.model.dart';
-import '../../models/it_service_request.dart';
+import '../../models/it_service_request.model.dart';
-import '../../models/pass_slip.dart';
+import '../../models/pass_slip.model.dart';
-import '../../models/task.dart';
+import '../../models/task.model.dart';
-import '../../models/ticket.dart';
+import '../../models/ticket.model.dart';
+import '../../theme/app_surfaces.dart';
 import '../../theme/m3_motion.dart';
 import '../../utils/app_time.dart';
 
@@ -392,16 +394,8 @@ class LogbookDayActivitySheet extends ConsumerWidget {
     );
   }
 
-  static String _formatDate(DateTime d) {
+  static String _formatDate(DateTime d) =>
-    const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+      DateFormat('EEE, MMM d, yyyy', 'en_US').format(d);
-    const months = [
-      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
-    ];
-    final wd = weekdays[d.weekday - 1];
-    final mo = months[d.month - 1];
-    return '$wd, $mo ${d.day}, ${d.year}';
-  }
 
   static String _initials(String name) {
     final parts = name.trim().split(RegExp(r'\s+'));
@@ -434,7 +428,7 @@ class _SummaryChip extends StatelessWidget {
       padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
       decoration: BoxDecoration(
         color: color,
-        borderRadius: BorderRadius.circular(20),
+        borderRadius: BorderRadius.circular(AppSurfaces.of(context).chipRadius),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,

lib/screens/attendance/work_log_tab.dart

@@ -8,14 +8,14 @@ import 'package:intl/intl.dart';
 import 'package:printing/printing.dart';
 import 'package:share_plus/share_plus.dart';
 
-import '../../models/attendance_log.dart';
+import '../../models/attendance_log.model.dart';
-import '../../models/it_service_request.dart';
+import '../../models/it_service_request.model.dart';
-import '../../models/it_service_request_assignment.dart';
+import '../../models/it_service_request_assignment.model.dart';
-import '../../models/pass_slip.dart';
+import '../../models/pass_slip.model.dart';
-import '../../models/task.dart';
+import '../../models/task.model.dart';
-import '../../models/task_activity_log.dart';
+import '../../models/task_activity_log.model.dart';
 import '../../models/task_assignment.dart';
-import '../../models/ticket.dart';
+import '../../models/ticket.model.dart';
 import '../../providers/attendance_provider.dart';
 import '../../providers/it_service_request_provider.dart';
 import '../../providers/pass_slip_provider.dart';
@@ -24,6 +24,7 @@ import '../../providers/tasks_provider.dart';
 import '../../providers/tickets_provider.dart';
 import '../../theme/m3_motion.dart';
 import '../../utils/app_time.dart';
+import '../../utils/snackbar.dart';
 import 'work_log_pdf.dart';
 
 // ─── Domain types ────────────────────────────────────────────────────────────
@@ -674,9 +675,7 @@ class _WorkLogTabState extends ConsumerState<WorkLogTab> {
           }
         } catch (e) {
           if (context.mounted) {
-            ScaffoldMessenger.of(context).showSnackBar(
+            showErrorSnackBar(context, 'Export failed: $e');
-              SnackBar(content: Text('Export failed: $e')),
-            );
           }
         } finally {
           entry.remove();
@@ -691,7 +690,6 @@ class _WorkLogTabState extends ConsumerState<WorkLogTab> {
     String personName,
     String rangeLabel,
   ) async {
-    final messenger = ScaffoldMessenger.of(context);
     try {
       final range = _effectiveDateRange;
       final modeLabel = switch (_viewMode) {
@@ -730,9 +728,7 @@ class _WorkLogTabState extends ConsumerState<WorkLogTab> {
       );
     } catch (e) {
       if (!context.mounted) return;
-      messenger.showSnackBar(
+      showErrorSnackBar(context, 'Export failed: $e');
-        SnackBar(content: Text('Export failed: $e')),
-      );
     }
   }
 
@@ -862,7 +858,6 @@ class _WorkLogTabState extends ConsumerState<WorkLogTab> {
     String personName,
     List<_DailySummaryData> multiDaySummaries,
   ) async {
-    final messenger = ScaffoldMessenger.of(context);
     try {
       late Uint8List bytes;
       if (!_isMultiDay || _isDrilling) {
@@ -901,9 +896,7 @@ class _WorkLogTabState extends ConsumerState<WorkLogTab> {
       );
     } catch (e) {
       if (!context.mounted) return;
-      messenger.showSnackBar(
+      showErrorSnackBar(context, 'Failed to generate PDF: $e');
-        SnackBar(content: Text('Failed to generate PDF: $e')),
-      );
     }
   }
 

lib/screens/auth/login_screen.dart

@@ -72,9 +72,9 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
         email: _emailController.text.trim(),
         password: _passwordController.text,
       );
-      if (response.session != null && mounted) {
+      // On success the router's auth redirect sends each role to its landing
-        context.go('/tickets');
+      // route (_defaultRouteForRole), so don't navigate here.
-      } else if (mounted) {
+      if (response.session == null && mounted) {
         showInfoSnackBar(context, 'Check your email to confirm sign-in.');
       }
     } on Exception catch (error) {
@@ -205,6 +205,9 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
                                     labelText: 'Password',
                                     prefixIcon: const Icon(Icons.lock_outlined),
                                     suffixIcon: IconButton(
+                                      tooltip: _obscurePassword
+                                          ? 'Show password'
+                                          : 'Hide password',
                                       icon: Icon(
                                         _obscurePassword
                                             ? Icons.visibility_outlined

lib/screens/auth/signup_screen.dart

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 
 import '../../providers/auth_provider.dart';
 import '../../providers/tickets_provider.dart';
+import '../../theme/app_status_colors.dart';
 import '../../theme/m3_motion.dart';
 import '../../utils/snackbar.dart';
 
@@ -202,6 +203,9 @@ class _SignUpScreenState extends ConsumerState<SignUpScreen>
                                     labelText: 'Password',
                                     prefixIcon: const Icon(Icons.lock_outlined),
                                     suffixIcon: IconButton(
+                                      tooltip: _obscurePassword
+                                          ? 'Show password'
+                                          : 'Hide password',
                                       icon: Icon(
                                         _obscurePassword
                                             ? Icons.visibility_outlined
@@ -280,6 +284,9 @@ class _SignUpScreenState extends ConsumerState<SignUpScreen>
                                     labelText: 'Confirm password',
                                     prefixIcon: const Icon(Icons.lock_outlined),
                                     suffixIcon: IconButton(
+                                      tooltip: _obscureConfirm
+                                          ? 'Show password'
+                                          : 'Hide password',
                                       icon: Icon(
                                         _obscureConfirm
                                             ? Icons.visibility_outlined
@@ -557,23 +564,24 @@ class _SignUpScreenState extends ConsumerState<SignUpScreen>
     }
 
     final normalized = (score / 6).clamp(0.0, 1.0);
+    final s = AppStatusColors.of(context);
     String label;
     Color color;
     if (normalized <= 0.2) {
       label = 'Very weak';
-      color = Colors.red;
+      color = s.danger.color;
     } else if (normalized <= 0.4) {
       label = 'Weak';
-      color = Colors.deepOrange;
+      color = s.danger.color;
     } else if (normalized <= 0.6) {
       label = 'Fair';
-      color = Colors.orange;
+      color = s.warning.color;
     } else if (normalized <= 0.8) {
       label = 'Strong';
-      color = Colors.green;
+      color = s.info.color;
     } else {
       label = 'Excellent';
-      color = Colors.teal;
+      color = s.success.color;
     }
 
     setState(() {

lib/screens/dashboard/dashboard_screen.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import '../../theme/m3_motion.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -5,18 +6,18 @@ import 'package:permission_handler/permission_handler.dart';
 
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import '../../models/attendance_log.dart';
+import '../../models/attendance_log.model.dart';
-import '../../models/duty_schedule.dart';
+import '../../models/duty_schedule.model.dart';
-import '../../models/leave_of_absence.dart';
+import '../../models/leave_of_absence.model.dart';
 import '../../models/live_position.dart';
-import '../../models/pass_slip.dart';
+import '../../models/pass_slip.model.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
-import '../../models/task.dart';
+import '../../models/task.model.dart';
 import '../../models/task_assignment.dart';
-import '../../models/ticket.dart';
+import '../../models/ticket.model.dart';
 import '../../models/ticket_message.dart';
-import '../../models/it_service_request.dart';
+import '../../models/it_service_request.model.dart';
-import '../../models/it_service_request_assignment.dart';
+import '../../models/it_service_request_assignment.model.dart';
 import '../../providers/attendance_provider.dart';
 import '../../providers/leave_provider.dart';
 import '../../providers/pass_slip_provider.dart';
@@ -27,7 +28,7 @@ import '../../providers/whereabouts_provider.dart';
 import '../../providers/workforce_provider.dart';
 import '../../providers/it_service_request_provider.dart';
 import '../../providers/teams_provider.dart';
-import '../../models/team.dart';
+import '../../models/team.model.dart';
 import '../../models/team_member.dart';
 import 'dart:math' as math;
 import '../../widgets/responsive_body.dart';
@@ -37,8 +38,11 @@ import '../../widgets/app_breakpoints.dart';
 import '../../providers/realtime_controller.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import '../../theme/app_surfaces.dart';
+import '../../theme/app_status_colors.dart';
 import '../../widgets/mono_text.dart';
+import '../../widgets/app_metric_card.dart';
 import '../../widgets/app_page_header.dart';
+import '../../widgets/app_section_header.dart';
 import '../../utils/app_time.dart';
 
 class DashboardMetrics {
@@ -407,10 +411,7 @@ final dashboardMetricsProvider = Provider<AsyncValue<DashboardMetrics>>((ref) {
           AppTime.now().difference(livePos.updatedAt) >
           const Duration(minutes: 15);
       if (stale) {
-        final diff = AppTime.now().difference(livePos.updatedAt);
+        final ago = AppTime.relative(livePos.updatedAt);
-        final ago = diff.inMinutes < 60
-            ? '${diff.inMinutes}m ago'
-            : '${diff.inHours}h ago';
         whereabouts = livePos.inPremise
             ? 'Last seen in premise \u00b7 $ago'
             : 'Last seen outside \u00b7 $ago';
@@ -628,6 +629,8 @@ class _DashboardScreenState extends State<DashboardScreen> {
   void initState() {
     super.initState();
     WidgetsBinding.instance.addPostFrameCallback((_) async {
+      // Sound/vibration settings and openAppSettings() don't apply on web.
+      if (kIsWeb) return;
       final prefs = await SharedPreferences.getInstance();
       final seen = prefs.getBool('has_seen_notif_showcase') ?? false;
       if (!seen) {
@@ -672,13 +675,13 @@ class _DashboardScreenState extends State<DashboardScreen> {
           builder: (context, constraints) {
             final sections = <Widget>[
               const SizedBox(height: 16),
-              _sectionTitle(context, 'IT Staff Pulse'),
+              const AppSectionHeader('IT Staff Pulse'),
               const _StaffTable(),
               const SizedBox(height: 12),
-              _sectionTitle(context, 'Team Activity'),
+              const AppSectionHeader('Team Activity'),
               const _StaffActivityChart(),
               const SizedBox(height: 20),
-              _sectionTitle(context, 'Core Daily KPIs'),
+              const AppSectionHeader('Core Daily KPIs'),
               _cardGrid(context, [
                 _MetricCard(
                   title: 'New tickets today',
@@ -694,7 +697,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
                 ),
               ]),
               const SizedBox(height: 20),
-              _sectionTitle(context, 'Task Flow'),
+              const AppSectionHeader('Task Flow'),
               _cardGrid(context, [
                 _MetricCard(
                   title: 'Tasks created',
@@ -712,7 +715,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
                 ),
               ]),
               const SizedBox(height: 20),
-              _sectionTitle(context, 'TAT / Response'),
+              const AppSectionHeader('TAT / Response'),
               _cardGrid(context, [
                 _MetricCard(
                   title: 'Avg response',
@@ -775,18 +778,6 @@ class _DashboardScreenState extends State<DashboardScreen> {
     );
   }
 
-  Widget _sectionTitle(BuildContext context, String title) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 12),
-      child: Text(
-        title,
-        style: Theme.of(context).textTheme.titleMedium?.copyWith(
-          fontWeight: FontWeight.w700,
-          color: Theme.of(context).colorScheme.onSurfaceVariant,
-        ),
-      ),
-    );
-  }
 
   Widget _cardGrid(BuildContext context, List<Widget> cards) {
     return LayoutBuilder(
@@ -905,7 +896,6 @@ class _MetricCard extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final cs = Theme.of(context).colorScheme;
     // Only watch the single string value for this card so unrelated metric
     // updates don't rebuild the whole card. This makes updates feel much
     // smoother and avoids full-page refreshes.
@@ -918,46 +908,7 @@ class _MetricCard extends ConsumerWidget {
         ),
       ),
     );
-    return AnimatedContainer(
+    return AppMetricCard(title: title, value: value);
-      duration: const Duration(milliseconds: 400),
-      curve: Curves.easeOutCubic,
-      padding: const EdgeInsets.all(20),
-      decoration: BoxDecoration(
-        color: cs.surfaceContainerLow,
-        borderRadius: BorderRadius.circular(16),
-      ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Text(
-            title,
-            style: Theme.of(context).textTheme.labelLarge?.copyWith(
-              fontWeight: FontWeight.w600,
-              color: cs.onSurfaceVariant,
-            ),
-          ),
-          const SizedBox(height: 12),
-
-          // Animate only the metric text (not the whole card) for a
-          // subtle, smooth update.
-          AnimatedSwitcher(
-            duration: const Duration(milliseconds: 400),
-            switchInCurve: Curves.easeOutCubic,
-            switchOutCurve: Curves.easeInCubic,
-            transitionBuilder: (child, anim) =>
-                FadeTransition(opacity: anim, child: child),
-            child: MonoText(
-              value,
-              key: ValueKey(value),
-              style: Theme.of(context).textTheme.headlineSmall?.copyWith(
-                fontWeight: FontWeight.w700,
-                color: cs.onSurface,
-              ),
-            ),
-          ),
-        ],
-      ),
-    );
   }
 }
 
@@ -967,14 +918,16 @@ class _StaffTable extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final cs = Theme.of(context).colorScheme;
-    // M3 Expressive: tonal surface container, 28 dp radius for large containers.
+    final isDark = cs.brightness == Brightness.dark;
+    // Cyber/IT panel: flat tonal fill + hairline outline.
     return Container(
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
-        color: cs.surfaceContainerLow,
+        color: isDark ? cs.surfaceContainer : cs.surfaceContainerLowest,
         borderRadius: BorderRadius.circular(
           AppSurfaces.of(context).containerRadius,
         ),
+        border: Border.all(color: cs.outlineVariant),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -1059,18 +1012,23 @@ class _StaffTableBody extends ConsumerWidget {
     );
 
     if (providerState == 'loading') {
-      return const Text('Loading staff...');
+      return _panelHint(context, Icons.hourglass_empty_rounded, 'Loading staff…');
     }
 
     if (providerState.startsWith('error:')) {
       final err = providerState.substring(6);
-      return Text('Failed to load staff: $err');
+      return _panelHint(
+        context,
+        Icons.error_outline_rounded,
+        'Failed to load staff: $err',
+      );
     }
 
     if (staffRows.isEmpty) {
-      return Text(
+      return _panelHint(
+        context,
+        Icons.groups_outlined,
         'No IT staff available.',
-        style: Theme.of(context).textTheme.bodySmall,
       );
     }
 
@@ -1110,36 +1068,24 @@ class _StaffRow extends StatelessWidget {
       );
     }
 
-    // IT Staff cell: avatar on mobile, name on desktop, with team color dot
+    // IT Staff cell: name (ellipsized on narrow screens) with team color dot.
-    Widget staffCell;
+    // Mobile used initials-only avatars, which are ambiguous and need a
-    if (isMobile) {
+    // long-press tooltip to identify anyone.
-      staffCell = Row(
+    final staffCell = Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          teamMarker,
-          const SizedBox(width: 4),
-          Flexible(
-            child: Tooltip(
-              message: row.name,
-              child: ProfileAvatar(
-                fullName: row.name,
-                avatarUrl: row.avatarUrl,
-                radius: 14,
-              ),
-            ),
-          ),
-        ],
-      );
-    } else {
-      staffCell = Row(
       mainAxisSize: MainAxisSize.min,
       children: [
         teamMarker,
         const SizedBox(width: 6),
-          Flexible(child: Text(row.name, style: valueStyle)),
+        Flexible(
+          child: Text(
+            row.name,
+            style: valueStyle,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
       ],
     );
-    }
 
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 6),
@@ -1154,20 +1100,24 @@ class _StaffRow extends StatelessWidget {
             Expanded(
               flex: 4,
               child: Center(
-                child: Text(
+                child: Builder(
+                  builder: (context) {
+                    final status = AppStatusColors.of(context);
+                    final Color? color = row.whereabouts == 'In premise'
+                        ? status.success.color
+                        : (row.whereabouts == 'Outside premise' ||
+                              row.whereabouts == 'Tracking off' ||
+                              row.whereabouts.startsWith('Last seen'))
+                        ? status.neutral.color
+                        : null;
+                    return Text(
                       row.whereabouts,
                       style: valueStyle?.copyWith(
-                    color: row.whereabouts == 'In premise'
+                        color: color,
-                        ? Colors.green
-                        : row.whereabouts == 'Outside premise'
-                        ? Colors.grey
-                        : row.whereabouts == 'Tracking off'
-                        ? Colors.grey
-                        : row.whereabouts.startsWith('Last seen')
-                        ? Colors.grey
-                        : null,
                         fontWeight: FontWeight.w600,
                       ),
+                    );
+                  },
                 ),
               ),
             ),
@@ -1214,21 +1164,24 @@ class _StaffActivityChart extends ConsumerWidget {
 
     final cs = Theme.of(context).colorScheme;
 
+    final isDark = cs.brightness == Brightness.dark;
     return Container(
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
-        color: cs.surfaceContainerLow,
+        color: isDark ? cs.surfaceContainer : cs.surfaceContainerLowest,
         borderRadius: BorderRadius.circular(
           AppSurfaces.of(context).containerRadius,
         ),
+        border: Border.all(color: cs.outlineVariant),
       ),
       child: metricsAsync.when(
         data: (metrics) {
           final staffRows = metrics.staffRows;
           if (staffRows.isEmpty) {
-            return Text(
+            return _panelHint(
+              context,
+              Icons.bar_chart_outlined,
               'No staff activity data available.',
-              style: Theme.of(context).textTheme.bodySmall,
             );
           }
 
@@ -1405,16 +1358,16 @@ class _StaffActivityChart extends ConsumerWidget {
                               vertical: 2,
                             ),
                             decoration: BoxDecoration(
-                              color: Colors.black.withAlpha(
+                              color: cs.inverseSurface.withValues(alpha: 0.9),
-                                (0.35 * 255).round(),
+                              borderRadius: BorderRadius.circular(
+                                AppSurfaces.of(context).chipRadius,
                               ),
-                              borderRadius: BorderRadius.circular(8),
                             ),
-                            child: Text(
+                            child: MonoText(
                               total.toString(),
                               style: Theme.of(context).textTheme.bodySmall
                                   ?.copyWith(
-                                    color: Colors.white,
+                                    color: cs.onInverseSurface,
                                     fontWeight: FontWeight.w700,
                                   ),
                             ),
@@ -1546,8 +1499,13 @@ class _StaffActivityChart extends ConsumerWidget {
             },
           );
         },
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () =>
-        error: (error, stack) => Text('Failed to load activity: $error'),
+            _panelHint(context, Icons.hourglass_empty_rounded, 'Loading activity…'),
+        error: (error, stack) => _panelHint(
+          context,
+          Icons.error_outline_rounded,
+          'Failed to load activity: $error',
+        ),
       ),
     );
   }
@@ -1568,29 +1526,28 @@ class _PulseStatusPill extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final s = AppStatusColors.of(context);
     final (Color bg, Color fg) = switch (label.toLowerCase()) {
-      'arrival' => (Colors.amber.shade100, Colors.amber.shade900),
+      'arrival' => (s.success.container, s.success.onContainer),
-      'late' => (Colors.red.shade100, Colors.red.shade900),
+      'late' => (s.warning.container, s.warning.onContainer),
-      'noon break' => (Colors.blue.shade100, Colors.blue.shade900),
+      'noon break' => (s.info.container, s.info.onContainer),
-      'vacant' => (Colors.green.shade100, Colors.green.shade900),
+      'vacant' => (s.neutral.container, s.neutral.onContainer),
-      'on task' => (Colors.purple.shade100, Colors.purple.shade900),
+      'on task' => (cs.primaryContainer, cs.onPrimaryContainer),
-      'on event' => (Colors.purple.shade100, Colors.purple.shade900),
+      'on event' => (cs.tertiaryContainer, cs.onTertiaryContainer),
-      'in triage' => (Colors.orange.shade100, Colors.orange.shade900),
+      'in triage' => (s.warning.container, s.warning.onContainer),
-      'early out' => (Colors.deepOrange.shade100, Colors.deepOrange.shade900),
+      'early out' => (s.warning.container, s.warning.onContainer),
-      'on leave' => (Colors.teal.shade100, Colors.teal.shade900),
+      'on leave' => (s.info.container, s.info.onContainer),
-      'absent' => (Colors.red.shade200, Colors.red.shade900),
+      'absent' => (s.danger.container, s.danger.onContainer),
-      'off duty' => (Colors.grey.shade200, Colors.grey.shade700),
+      'off duty' => (s.neutral.container, s.neutral.onContainer),
-      _ => (
+      _ => (cs.tertiaryContainer, cs.onTertiaryContainer),
-        Theme.of(context).colorScheme.tertiaryContainer,
-        Theme.of(context).colorScheme.onTertiaryContainer,
-      ),
     };
 
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
       decoration: BoxDecoration(
         color: bg,
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(AppSurfaces.of(context).chipRadius),
       ),
       child: Text(
         label,
@@ -1603,6 +1560,31 @@ class _PulseStatusPill extends StatelessWidget {
   }
 }
 
+/// Compact, muted, centered hint for empty/loading/error states inside a
+/// bounded dashboard panel (too small for the full-screen AppEmptyView).
+Widget _panelHint(BuildContext context, IconData icon, String message) {
+  final cs = Theme.of(context).colorScheme;
+  return Padding(
+    padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 12),
+    child: Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Icon(icon, size: 18, color: cs.onSurfaceVariant),
+        const SizedBox(width: 8),
+        Flexible(
+          child: Text(
+            message,
+            textAlign: TextAlign.center,
+            style: Theme.of(
+              context,
+            ).textTheme.bodySmall?.copyWith(color: cs.onSurfaceVariant),
+          ),
+        ),
+      ],
+    ),
+  );
+}
+
 Duration? _averageDuration(List<Duration> durations) {
   if (durations.isEmpty) {
     return null;

lib/screens/it_service_requests/it_service_request_detail_screen.dart

@@ -9,12 +9,12 @@ import 'package:file_picker/file_picker.dart';
 import 'package:flutter_quill/flutter_quill.dart' as quill;
 import 'package:skeletonizer/skeletonizer.dart';
 
-import '../../models/it_service_request.dart';
+import '../../models/it_service_request.model.dart';
-import '../../models/it_service_request_assignment.dart';
+import '../../models/it_service_request_assignment.model.dart';
-import '../../models/it_service_request_activity_log.dart';
+import '../../models/it_service_request_activity_log.model.dart';
-import '../../models/it_service_request_action.dart';
+import '../../models/it_service_request_action.model.dart';
-import '../../models/office.dart';
+import '../../models/office.model.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
 import '../../providers/it_service_request_provider.dart';
 import '../../providers/notifications_provider.dart';
 import '../../providers/profile_provider.dart';
@@ -22,12 +22,14 @@ import '../../providers/supabase_provider.dart';
 import '../../providers/tickets_provider.dart';
 import '../../services/ai_service.dart';
 import '../../utils/app_time.dart';
+import '../../utils/debouncer.dart';
 import '../../utils/snackbar.dart';
 import '../../widgets/app_breakpoints.dart';
 import '../../widgets/gemini_animated_text_field.dart';
 import '../../widgets/m3_card.dart';
 import '../../widgets/mono_text.dart';
 import '../../widgets/responsive_body.dart';
+import '../../theme/app_status_colors.dart';
 import '../../widgets/status_pill.dart';
 import 'it_service_request_pdf.dart';
 
@@ -85,7 +87,7 @@ class _ItServiceRequestDetailScreenState
 
   Timer? _eventDetailsDebounce;
   Timer? _remarksDebounce;
-  Timer? _actionDebounce;
+  final _actionDebounce = Debouncer(const Duration(milliseconds: 800));
 
   String _eventDetailsLastPlain = '';
   String _remarksLastPlain = '';
@@ -147,7 +149,7 @@ class _ItServiceRequestDetailScreenState
     _actionTakenController?.dispose();
     _eventDetailsDebounce?.cancel();
     _remarksDebounce?.cancel();
-    _actionDebounce?.cancel();
+    _actionDebounce.cancel();
     _savedBadgeTimer?.cancel();
     _saveAnimController.dispose();
     _tabController.dispose();
@@ -410,13 +412,13 @@ class _ItServiceRequestDetailScreenState
                     ),
                   )
                 : _hasRecentSave
-                ? const Padding(
+                ? Padding(
-                    key: ValueKey('isr_saved'),
+                    key: const ValueKey('isr_saved'),
-                    padding: EdgeInsets.symmetric(horizontal: 8),
+                    padding: const EdgeInsets.symmetric(horizontal: 8),
                     child: Icon(
                       Icons.check_circle,
                       size: 18,
-                      color: Colors.green,
+                      color: AppStatusColors.of(context).success.color,
                     ),
                   )
                 : const SizedBox(key: ValueKey('isr_idle')),
@@ -554,7 +556,10 @@ class _ItServiceRequestDetailScreenState
                 if (request.requestNumber != null)
                   MonoText(request.requestNumber!),
                 const SizedBox(width: 12),
-                StatusPill(label: ItServiceRequestStatus.label(request.status)),
+                StatusPill.kind(
+                  _isrStatusKind(request.status),
+                  label: ItServiceRequestStatus.label(request.status),
+                ),
                 const Spacer(),
                 Text(
                   'Created ${AppTime.formatDate(request.createdAt)}',
@@ -1230,10 +1235,10 @@ class _ItServiceRequestDetailScreenState
                       child: const Icon(Icons.save, size: 14),
                     )
                   : isSaved
-                  ? const Icon(
+                  ? Icon(
                       Icons.check_circle,
-                      key: ValueKey('label_saved'),
+                      key: const ValueKey('label_saved'),
-                      color: Colors.green,
+                      color: AppStatusColors.of(context).success.color,
                       size: 14,
                     )
                   : const SizedBox(key: ValueKey('label_idle')),
@@ -1388,8 +1393,7 @@ class _ItServiceRequestDetailScreenState
     final plain = _actionTakenController!.document.toPlainText().trim();
     if (plain == _actionLastPlain) return;
     _actionLastPlain = plain;
-    _actionDebounce?.cancel();
+    _actionDebounce.run(() async {
-    _actionDebounce = Timer(const Duration(milliseconds: 800), () async {
       final delta = _actionTakenController!.document.toDelta();
       final deltaJson = jsonEncode(delta.toJson());
       if (mounted) {
@@ -1584,9 +1588,6 @@ class _ItServiceRequestDetailScreenState
           final controller = TextEditingController();
           return AlertDialog(
             title: const Text('Cancellation Reason'),
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(28),
-            ),
             content: TextField(
               controller: controller,
               decoration: const InputDecoration(
@@ -1836,7 +1837,6 @@ class _StaffPickerDialogState extends State<_StaffPickerDialog> {
         .toList();
     return AlertDialog(
       title: const Text('Select IT Staff'),
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)),
       content: SizedBox(
         width: 350,
         height: 400,
@@ -2245,3 +2245,16 @@ class _EvidenceSectionState extends ConsumerState<_EvidenceSection> {
     );
   }
 }
+
+/// Maps an IT service request status to a semantic [StatusKind]
+/// (amber=pending approval, blue=scheduled/in-progress, green=completed,
+/// grey=cancelled).
+StatusKind _isrStatusKind(String status) => switch (status) {
+  ItServiceRequestStatus.pendingApproval => StatusKind.warning,
+  ItServiceRequestStatus.scheduled => StatusKind.info,
+  ItServiceRequestStatus.inProgress => StatusKind.info,
+  ItServiceRequestStatus.inProgressDryRun => StatusKind.info,
+  ItServiceRequestStatus.completed => StatusKind.success,
+  ItServiceRequestStatus.cancelled => StatusKind.neutral,
+  _ => StatusKind.neutral,
+};

lib/screens/it_service_requests/it_service_request_pdf.dart

@@ -8,10 +8,10 @@ import 'package:pdf/widgets.dart' as pw;
 import 'package:pdf/pdf.dart' as pdf;
 import 'package:printing/printing.dart';
 
-import '../../models/it_service_request.dart';
+import '../../models/it_service_request.model.dart';
-import '../../models/it_service_request_assignment.dart';
+import '../../models/it_service_request_assignment.model.dart';
-import '../../models/office.dart';
+import '../../models/office.model.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
 import '../../utils/app_time.dart';
 
 /// Build PDF bytes for IT Service Request Form.

lib/screens/it_service_requests/it_service_requests_list_screen.dart

@@ -5,10 +5,10 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 
-import '../../models/it_service_request.dart';
+import '../../models/it_service_request.model.dart';
-import '../../models/it_service_request_assignment.dart';
+import '../../models/it_service_request_assignment.model.dart';
-import '../../models/office.dart';
+import '../../models/office.model.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
 import '../../brick/cache_helpers.dart';
 import '../../providers/it_service_request_provider.dart';
 import '../../providers/profile_provider.dart';
@@ -17,6 +17,8 @@ import '../../providers/tickets_provider.dart';
 import '../../theme/m3_motion.dart';
 import '../../utils/app_time.dart';
 import '../../utils/snackbar.dart';
+import '../../theme/app_status_colors.dart';
+import '../../widgets/app_status_summary.dart';
 import '../../widgets/m3_card.dart';
 import '../../widgets/mono_text.dart';
 import '../../widgets/reconnect_overlay.dart';
@@ -381,9 +383,6 @@ class _ItServiceRequestsListScreenState
           builder: (ctx, setDialogState) {
             return AlertDialog(
               title: const Text('New IT Service Request'),
-              shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(28),
-              ),
               content: SizedBox(
                 width: 400,
                 child: SingleChildScrollView(
@@ -430,10 +429,17 @@ class _ItServiceRequestsListScreenState
                   onPressed: () => Navigator.pop(ctx, false),
                   child: const Text('Cancel'),
                 ),
-                FilledButton(
+                // Disabled until named, so the dialog never closes and drops
-                  onPressed: () => Navigator.pop(ctx, true),
+                // the user's input on a validation failure.
+                ValueListenableBuilder<TextEditingValue>(
+                  valueListenable: nameController,
+                  builder: (context, value, child) => FilledButton(
+                    onPressed: value.text.trim().isEmpty
+                        ? null
+                        : () => Navigator.pop(ctx, true),
                     child: const Text('Create'),
                   ),
+                ),
               ],
             );
           },
@@ -442,10 +448,6 @@ class _ItServiceRequestsListScreenState
     );
 
     if (result != true || !context.mounted) return;
-    if (nameController.text.trim().isEmpty) {
-      showWarningSnackBar(context, 'Event name is required');
-      return;
-    }
 
     try {
       final ctrl = ref.read(itServiceRequestControllerProvider);
@@ -534,7 +536,6 @@ class _StatusSummaryRow extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final cs = Theme.of(context).colorScheme;
     final pending = requests
         .where((r) => r.status == ItServiceRequestStatus.pendingApproval)
         .length;
@@ -552,88 +553,38 @@ class _StatusSummaryRow extends StatelessWidget {
         .where((r) => r.status == ItServiceRequestStatus.completed)
         .length;
 
-    return SingleChildScrollView(
+    return AppStatusSummaryRow(
-      scrollDirection: Axis.horizontal,
+      padding: const EdgeInsets.symmetric(vertical: 8),
-      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      items: [
-      child: Row(
+        AppStatusSummaryItem(
-        children: [
-          _SummaryChip(
           label: 'Pending',
           count: pending,
-            color: cs.tertiary,
+          kind: StatusKind.warning,
           selected: selectedStatus == ItServiceRequestStatus.pendingApproval,
           onTap: () => onStatusTap(ItServiceRequestStatus.pendingApproval),
         ),
-          const SizedBox(width: 8),
+        AppStatusSummaryItem(
-          _SummaryChip(
           label: 'Scheduled',
           count: scheduled,
-            color: cs.primary,
+          kind: StatusKind.neutral,
           selected: selectedStatus == ItServiceRequestStatus.scheduled,
           onTap: () => onStatusTap(ItServiceRequestStatus.scheduled),
         ),
-          const SizedBox(width: 8),
+        AppStatusSummaryItem(
-          _SummaryChip(
           label: 'In Progress',
           count: inProgress,
-            color: cs.secondary,
+          kind: StatusKind.info,
           selected: selectedStatus == ItServiceRequestStatus.inProgress,
           onTap: () => onStatusTap(ItServiceRequestStatus.inProgress),
         ),
-          const SizedBox(width: 8),
+        AppStatusSummaryItem(
-          _SummaryChip(
           label: 'Completed',
           count: completed,
-            color: Colors.green,
+          kind: StatusKind.success,
           selected: selectedStatus == ItServiceRequestStatus.completed,
           onTap: () => onStatusTap(ItServiceRequestStatus.completed),
         ),
       ],
-      ),
-    );
-  }
-}
-
-class _SummaryChip extends StatelessWidget {
-  const _SummaryChip({
-    required this.label,
-    required this.count,
-    required this.color,
-    required this.selected,
-    required this.onTap,
-  });
-
-  final String label;
-  final int count;
-  final Color color;
-  final bool selected;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    return M3Card.filled(
-      onTap: onTap,
-      color: selected
-          ? color.withValues(alpha: 0.2)
-          : Theme.of(context).colorScheme.surfaceContainerHighest,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Text(
-              count.toString(),
-              style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                fontWeight: FontWeight.bold,
-                color: color,
-              ),
-            ),
-            const SizedBox(width: 8),
-            Text(label, style: Theme.of(context).textTheme.bodySmall),
-          ],
-        ),
-      ),
     );
   }
 }

lib/screens/network_map/network_map_device_edit_screen.dart

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 
 import '../../models/network/network_device.dart';
 import '../../models/network/network_location.dart';
+import '../../theme/app_status_colors.dart';
 import '../../providers/network_map/network_devices_provider.dart';
 import '../../providers/network_map/network_sites_provider.dart';
 import '../../widgets/app_state_view.dart';
@@ -39,6 +40,7 @@ class _NetworkMapDeviceEditScreenState
   final _notesCtrl = TextEditingController();
   NetworkDeviceKind _kind = NetworkDeviceKind.switchDevice;
   NetworkDeviceRole? _role;
+  NetworkDeviceStatus _status = NetworkDeviceStatus.unknown;
   String? _siteId;
   String? _locationId;
   bool _saving = false;
@@ -67,7 +69,7 @@ class _NetworkMapDeviceEditScreenState
     _notesCtrl.text = d.notes ?? '';
     _kind = d.kind;
     _role = d.role;
-    // Resolve the device's location → its site for the pickers.
+    _status = d.status;
     if (d.locationId != null) {
       _locationId = d.locationId;
       for (final l in locations) {
@@ -111,6 +113,7 @@ class _NetworkMapDeviceEditScreenState
                 decoration: const InputDecoration(
                   labelText: 'Name (e.g. Floor 3, Rack U-12)',
                 ),
+                onChanged: (_) => setLocal(() {}),
               ),
               const SizedBox(height: 12),
               DropdownButtonFormField<NetworkLocationKind>(
@@ -134,7 +137,11 @@ class _NetworkMapDeviceEditScreenState
               child: const Text('Cancel'),
             ),
             FilledButton(
-              onPressed: () => Navigator.pop(ctx, true),
+              // Keep Create disabled until a name is entered, instead of
+              // silently discarding an empty submit after close (QA-048).
+              onPressed: nameCtrl.text.trim().isEmpty
+                  ? null
+                  : () => Navigator.pop(ctx, true),
               child: const Text('Create'),
             ),
           ],
@@ -179,6 +186,7 @@ class _NetworkMapDeviceEditScreenState
           name: _nameCtrl.text.trim(),
           kind: _kind,
           role: _role,
+          status: _status,
           vendor: _vendorCtrl.text.trim().isEmpty ? null : _vendorCtrl.text.trim(),
           model: _modelCtrl.text.trim().isEmpty ? null : _modelCtrl.text.trim(),
           serial: _serialCtrl.text.trim().isEmpty ? null : _serialCtrl.text.trim(),
@@ -195,6 +203,7 @@ class _NetworkMapDeviceEditScreenState
           name: _nameCtrl.text.trim(),
           kind: _kind,
           role: _role,
+          status: _status,
           vendor: _vendorCtrl.text.trim().isEmpty ? null : _vendorCtrl.text.trim(),
           model: _modelCtrl.text.trim().isEmpty ? null : _modelCtrl.text.trim(),
           serial: _serialCtrl.text.trim().isEmpty ? null : _serialCtrl.text.trim(),
@@ -219,6 +228,28 @@ class _NetworkMapDeviceEditScreenState
     );
   }
 
+  Icon _statusIcon(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    switch (_status) {
+      case NetworkDeviceStatus.online:
+        return Icon(
+          Icons.circle,
+          size: 14,
+          color: AppStatusColors.of(context).success.color,
+        );
+      case NetworkDeviceStatus.offline:
+        return Icon(Icons.circle, size: 14, color: cs.error);
+      case NetworkDeviceStatus.warning:
+        return Icon(
+          Icons.circle,
+          size: 14,
+          color: AppStatusColors.of(context).warning.color,
+        );
+      case NetworkDeviceStatus.unknown:
+        return Icon(Icons.circle_outlined, size: 14, color: cs.onSurfaceVariant);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final existingAsync = widget.deviceId == null
@@ -227,8 +258,6 @@ class _NetworkMapDeviceEditScreenState
     final sitesAsync = ref.watch(networkSitesProvider);
     final locationsAsync = ref.watch(networkLocationsProvider);
 
-    // For a new device under a specific site (from the /site/:id/device/new
-    // route), pre-fill the site picker so the user can save without picking.
     if (!_initialized && widget.deviceId == null && widget.initialSiteId != null) {
       _siteId = widget.initialSiteId;
     }
@@ -241,9 +270,18 @@ class _NetworkMapDeviceEditScreenState
         ),
         title: Text(widget.deviceId == null ? 'New device' : 'Edit device'),
         actions: [
-          TextButton(
+          Padding(
+            padding: const EdgeInsets.only(right: 8),
+            child: FilledButton(
               onPressed: _saving ? null : _save,
-            child: _saving ? const Text('Saving…') : const Text('Save'),
+              child: _saving
+                  ? const SizedBox(
+                      width: 16,
+                      height: 16,
+                      child: CircularProgressIndicator(strokeWidth: 2),
+                    )
+                  : const Text('Save'),
+            ),
           ),
         ],
       ),
@@ -262,53 +300,92 @@ class _NetworkMapDeviceEditScreenState
             child: Form(
               key: _formKey,
               child: SingleChildScrollView(
-                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    // ── Identity ────────────────────────────────────────────
+                    _SectionCard(
+                      icon: Icons.badge_outlined,
+                      title: 'Identity',
                       children: [
                         TextFormField(
                           controller: _nameCtrl,
+                          autofocus: widget.deviceId == null,
                           decoration: const InputDecoration(labelText: 'Name *'),
                           validator: (v) => (v == null || v.trim().isEmpty)
                               ? 'Name is required'
                               : null,
                         ),
                         const SizedBox(height: 12),
-                  DropdownButtonFormField<NetworkDeviceKind>(
+                        _FieldRow(
+                          left: DropdownButtonFormField<NetworkDeviceKind>(
                             initialValue: _kind,
                             items: NetworkDeviceKind.values
-                        .map((k) =>
+                                .map((k) => DropdownMenuItem(
-                            DropdownMenuItem(value: k, child: Text(k.label)))
+                                      value: k,
+                                      child: Text(k.label),
+                                    ))
                                 .toList(),
                             onChanged: (v) => setState(() => _kind = v ?? _kind),
                             decoration: const InputDecoration(labelText: 'Type *'),
                           ),
-                  const SizedBox(height: 12),
+                          right: DropdownButtonFormField<NetworkDeviceRole?>(
-                  DropdownButtonFormField<NetworkDeviceRole?>(
                             initialValue: _role,
                             items: [
                               const DropdownMenuItem<NetworkDeviceRole?>(
-                          value: null, child: Text('(none)')),
+                                value: null,
+                                child: Text('(none)'),
+                              ),
                               for (final r in NetworkDeviceRole.values)
                                 DropdownMenuItem(value: r, child: Text(r.label)),
                             ],
                             onChanged: (v) => setState(() => _role = v),
-                    decoration:
+                            decoration: const InputDecoration(labelText: 'Role'),
-                        const InputDecoration(labelText: 'Logical role'),
+                          ),
                         ),
                         const SizedBox(height: 12),
+                        DropdownButtonFormField<NetworkDeviceStatus>(
+                          initialValue: _status,
+                          items: NetworkDeviceStatus.values
+                              .map((s) => DropdownMenuItem(
+                                    value: s,
+                                    child: Text(s.label),
+                                  ))
+                              .toList(),
+                          onChanged: (v) => setState(
+                              () => _status = v ?? NetworkDeviceStatus.unknown),
+                          decoration: InputDecoration(
+                            labelText: 'Status',
+                            prefixIcon: Padding(
+                              padding: const EdgeInsets.symmetric(horizontal: 12),
+                              child: _statusIcon(context),
+                            ),
+                            prefixIconConstraints:
+                                const BoxConstraints(minWidth: 0, minHeight: 0),
+                          ),
+                        ),
+                      ],
+                    ),
+                    const SizedBox(height: 16),
+
+                    // ── Location ─────────────────────────────────────────────
+                    _SectionCard(
+                      icon: Icons.location_on_outlined,
+                      title: 'Location',
+                      children: [
                         DropdownButtonFormField<String?>(
                           initialValue: _siteId,
                           items: [
                             const DropdownMenuItem<String?>(
-                          value: null, child: Text('Unassigned')),
+                              value: null,
+                              child: Text('Unassigned'),
+                            ),
                             for (final s in sitesAsync.valueOrNull ?? [])
                               DropdownMenuItem(value: s.id, child: Text(s.name)),
                           ],
                           onChanged: (v) => setState(() {
                             _siteId = v;
-                      // Reset location when site changes — old location wouldn't
-                      // belong to the new site.
                             _locationId = null;
                           }),
                           decoration: const InputDecoration(
@@ -344,7 +421,7 @@ class _NetworkMapDeviceEditScreenState
                                   labelText: 'Location',
                                   helperText: _siteId == null
                                       ? 'Pick a site first.'
-                                : 'Specific building / floor / room / rack within the site.',
+                                      : 'Building / floor / room / rack within the site.',
                                   enabled: _siteId != null,
                                 ),
                               ),
@@ -352,64 +429,73 @@ class _NetworkMapDeviceEditScreenState
                             const SizedBox(width: 8),
                             IconButton.filledTonal(
                               tooltip: 'Add new location to this site',
-                        onPressed: _siteId == null
+                              onPressed:
-                            ? null
+                                  _siteId == null ? null : _showAddLocationDialog,
-                            : _showAddLocationDialog,
                               icon: const Icon(Icons.add_location_alt_outlined),
                             ),
                           ],
                         ),
-                  const SizedBox(height: 12),
+                      ],
-                  TextFormField(
+                    ),
+                    const SizedBox(height: 16),
+
+                    // ── Hardware Details ─────────────────────────────────────
+                    _SectionCard(
+                      icon: Icons.memory_outlined,
+                      title: 'Hardware Details',
+                      children: [
+                        _FieldRow(
+                          left: TextFormField(
                             controller: _vendorCtrl,
                             decoration: const InputDecoration(
-                      labelText: 'Vendor (e.g. Ruijie, TP-Link)',
+                              labelText: 'Vendor',
+                              hintText: 'e.g. Ruijie, TP-Link',
                             ),
                           ),
-                  const SizedBox(height: 12),
+                          right: TextFormField(
-                  TextFormField(
                             controller: _modelCtrl,
                             decoration: const InputDecoration(labelText: 'Model'),
                           ),
-                  const SizedBox(height: 12),
-                  TextFormField(
-                    controller: _serialCtrl,
-                    decoration: const InputDecoration(labelText: 'Serial'),
                         ),
                         const SizedBox(height: 12),
-                  TextFormField(
+                        _FieldRow(
-                    controller: _mgmtIpCtrl,
+                          left: TextFormField(
+                            controller: _serialCtrl,
                             decoration:
-                        const InputDecoration(labelText: 'Management IP'),
+                                const InputDecoration(labelText: 'Serial'),
+                          ),
+                          right: TextFormField(
+                            controller: _mgmtIpCtrl,
+                            decoration: const InputDecoration(
+                                labelText: 'Management IP'),
                             keyboardType: TextInputType.text,
                           ),
+                        ),
                         const SizedBox(height: 12),
                         TextFormField(
                           controller: _macCtrl,
-                    decoration: const InputDecoration(labelText: 'MAC address'),
+                          decoration:
+                              const InputDecoration(labelText: 'MAC address'),
                         ),
                         const SizedBox(height: 12),
                         TextFormField(
                           controller: _notesCtrl,
                           decoration: const InputDecoration(labelText: 'Notes'),
-                    maxLines: 3,
+                          maxLines: 4,
                         ),
+                      ],
+                    ),
+
+                    // ── Ports (edit mode only) ────────────────────────────────
                     if (widget.deviceId != null) ...[
+                      const SizedBox(height: 16),
+                      _PortsSectionCard(
+                        deviceId: widget.deviceId!,
+                        onAddPort: () => _addPort(widget.deviceId!),
+                      ),
+                    ],
+
                     const SizedBox(height: 24),
-                    Row(
-                      children: [
-                        Text('Ports',
-                            style: Theme.of(context).textTheme.titleMedium),
-                        const Spacer(),
-                        TextButton.icon(
-                          onPressed: () => _addPort(widget.deviceId!),
-                          icon: const Icon(Icons.add),
-                          label: const Text('Add port'),
-                        ),
-                      ],
-                    ),
-                    _PortsList(deviceId: widget.deviceId!),
-                  ],
                   ],
                 ),
               ),
@@ -421,12 +507,138 @@ class _NetworkMapDeviceEditScreenState
   }
 }
 
+// ── Helper widgets ────────────────────────────────────────────────────────────
+
+/// Outlined card with a section header (icon + title) and field children.
+class _SectionCard extends StatelessWidget {
+  const _SectionCard({
+    required this.icon,
+    required this.title,
+    required this.children,
+  });
+
+  final IconData icon;
+  final String title;
+  final List<Widget> children;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final tt = Theme.of(context).textTheme;
+    return Card.outlined(
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              children: [
+                Icon(icon, size: 16, color: cs.primary),
+                const SizedBox(width: 8),
+                Text(
+                  title,
+                  style: tt.labelLarge?.copyWith(color: cs.primary),
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+            ...children,
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Renders two widgets side-by-side on wide screens (≥480dp), stacked on narrow.
+class _FieldRow extends StatelessWidget {
+  const _FieldRow({
+    required this.left,
+    required this.right,
+  });
+
+  final Widget left;
+  final Widget right;
+  static const double threshold = 480;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        if (constraints.maxWidth >= threshold) {
+          return Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(child: left),
+              const SizedBox(width: 12),
+              Expanded(child: right),
+            ],
+          );
+        }
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            left,
+            const SizedBox(height: 12),
+            right,
+          ],
+        );
+      },
+    );
+  }
+}
+
+/// Ports section card with header and add-port button.
+class _PortsSectionCard extends StatelessWidget {
+  const _PortsSectionCard({
+    required this.deviceId,
+    required this.onAddPort,
+  });
+
+  final String deviceId;
+  final VoidCallback onAddPort;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final tt = Theme.of(context).textTheme;
+    return Card.outlined(
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              children: [
+                Icon(Icons.cable_outlined, size: 16, color: cs.primary),
+                const SizedBox(width: 8),
+                Text(
+                  'Ports',
+                  style: tt.labelLarge?.copyWith(color: cs.primary),
+                ),
+                const Spacer(),
+                FilledButton.tonal(
+                  onPressed: onAddPort,
+                  child: const Text('Add port'),
+                ),
+              ],
+            ),
+            const SizedBox(height: 8),
+            _PortsList(deviceId: deviceId),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class _PortsList extends ConsumerWidget {
   const _PortsList({required this.deviceId});
   final String deviceId;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final cs = Theme.of(context).colorScheme;
     final portsAsync = ref.watch(networkPortsByDeviceProvider(deviceId));
     return portsAsync.when(
       loading: () => const Padding(
@@ -436,9 +648,19 @@ class _PortsList extends ConsumerWidget {
       error: (e, _) => Text('Error: $e'),
       data: (ports) {
         if (ports.isEmpty) {
-          return const Padding(
+          return Padding(
-            padding: EdgeInsets.symmetric(vertical: 8),
+            padding: const EdgeInsets.symmetric(vertical: 16),
-            child: Text('No ports yet.'),
+            child: Column(
+              children: [
+                Icon(Icons.cable_outlined,
+                    size: 32, color: cs.onSurfaceVariant),
+                const SizedBox(height: 8),
+                Text(
+                  'No ports configured yet.',
+                  style: TextStyle(color: cs.onSurfaceVariant),
+                ),
+              ],
+            ),
           );
         }
         return Column(
@@ -447,8 +669,8 @@ class _PortsList extends ConsumerWidget {
               PortListTile(
                 port: p,
                 canEdit: true,
-                onTap: () => showPortEditDialog(
+                onTap: (ctx) => showPortEditDialog(
-                  context: context,
+                  context: ctx,
                   ref: ref,
                   deviceId: deviceId,
                   existing: p,

lib/screens/network_map/network_map_device_screen.dart

@@ -7,6 +7,7 @@ import '../../providers/network_map/network_devices_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../widgets/app_state_view.dart';
 import '../../widgets/responsive_body.dart';
+import 'widgets/link_edit_dialog.dart';
 import 'widgets/port_edit_dialog.dart';
 import 'widgets/port_list_tile.dart';
 
@@ -98,6 +99,13 @@ class NetworkMapDeviceScreen extends ConsumerWidget {
             return null;
           }
 
+          String? linkIdForPort(String portId) {
+            for (final link in links) {
+              if (link.portA == portId || link.portB == portId) return link.id;
+            }
+            return null;
+          }
+
           return ResponsiveBody(
             maxWidth: 720,
             child: ListView(
@@ -124,13 +132,36 @@ class NetworkMapDeviceScreen extends ConsumerWidget {
                       linkedPortLabel: otherPortLabel(port.id),
                       canEdit: canEdit,
                       onTap: canEdit
-                          ? () => showPortEditDialog(
+                          ? (ctx) => showPortEditDialog(
-                                context: context,
+                                context: ctx,
                                 ref: ref,
                                 deviceId: device.id,
                                 existing: port,
                               )
                           : null,
+                      onConnect: canEdit
+                          ? (ctx) => showLinkEditDialog(
+                                context: ctx,
+                                ref: ref,
+                                portId: port.id,
+                                currentDeviceId: device.id,
+                              )
+                          : null,
+                      onDisconnect: canEdit
+                          ? (_) {
+                              final lid = linkIdForPort(port.id);
+                              if (lid != null) {
+                                ref
+                                    .read(networkDevicesControllerProvider)
+                                    .deleteLink(lid);
+                              }
+                            }
+                          : null,
+                      onDelete: canEdit
+                          ? () => ref
+                              .read(networkDevicesControllerProvider)
+                              .deletePort(port.id)
+                          : null,
                     ),
                 if (device.notes != null && device.notes!.trim().isNotEmpty) ...[
                   Padding(

lib/screens/network_map/network_map_import_review_screen.dart

@@ -8,6 +8,7 @@ import '../../models/network/network_port.dart';
 import '../../providers/network_map/network_devices_provider.dart';
 import '../../providers/network_map/network_import_provider.dart';
 import '../../providers/network_map/network_sites_provider.dart';
+import '../../utils/snackbar.dart';
 import '../../widgets/app_state_view.dart';
 import 'widgets/import_diff_view.dart';
 
@@ -247,12 +248,11 @@ class NetworkMapImportReviewScreen extends ConsumerWidget {
         );
 
     if (context.mounted) {
-      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+      showSuccessSnackBar(
-        content: Text(
+        context,
         'Applied ${createdDeviceIds.length} devices, '
         '${createdLinkIds.length} links.',
-        ),
+      );
-      ));
       context.go('/network-map');
     }
   }

lib/screens/network_map/network_map_overview_screen.dart

@@ -6,6 +6,8 @@ import '../../models/network/network_device.dart';
 import '../../providers/network_map/network_devices_provider.dart';
 import '../../providers/network_map/network_sites_provider.dart';
 import '../../providers/profile_provider.dart';
+import '../../utils/snackbar.dart';
+import '../../widgets/app_metric_card.dart';
 import '../../widgets/app_page_header.dart';
 import '../../widgets/app_state_view.dart';
 import '../../widgets/responsive_body.dart';
@@ -166,41 +168,24 @@ class _SummaryRow extends StatelessWidget {
   Widget build(BuildContext context) {
     return Row(
       children: [
-        Expanded(child: _SummaryCard(label: 'Sites', value: siteCount.toString(), icon: Icons.location_city_outlined)),
+        Expanded(
+          child: AppMetricCard(
+            title: 'Sites',
+            value: siteCount.toString(),
+            icon: Icons.location_city_outlined,
+            animateValue: false,
+          ),
+        ),
         const SizedBox(width: 12),
-        Expanded(child: _SummaryCard(label: 'Devices', value: deviceCount.toString(), icon: Icons.devices_outlined)),
+        Expanded(
-      ],
+          child: AppMetricCard(
-    );
+            title: 'Devices',
-  }
+            value: deviceCount.toString(),
-}
+            icon: Icons.devices_outlined,
-
+            animateValue: false,
-class _SummaryCard extends StatelessWidget {
-  const _SummaryCard({required this.label, required this.value, required this.icon});
-  final String label;
-  final String value;
-  final IconData icon;
-
-  @override
-  Widget build(BuildContext context) {
-    final tt = Theme.of(context).textTheme;
-    final cs = Theme.of(context).colorScheme;
-    return Card(
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
-        child: Row(
-          children: [
-            Icon(icon, color: cs.primary),
-            const SizedBox(width: 12),
-            Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(label, style: tt.labelSmall?.copyWith(color: cs.onSurfaceVariant)),
-                Text(value, style: tt.headlineSmall?.copyWith(fontWeight: FontWeight.w700)),
-              ],
-            ),
-          ],
           ),
         ),
+      ],
     );
   }
 }
@@ -276,9 +261,7 @@ class _UnassignedSection extends ConsumerWidget {
   ) async {
     final sites = ref.read(networkSitesProvider).valueOrNull ?? const [];
     if (sites.isEmpty) {
-      ScaffoldMessenger.of(context).showSnackBar(
+      showWarningSnackBar(context, 'Create a site first.');
-        const SnackBar(content: Text('Create a site first.')),
-      );
       return;
     }
     String? picked = sites.first.id;
@@ -321,9 +304,7 @@ class _UnassignedSection extends ConsumerWidget {
     }
 
     if (context.mounted) {
-      ScaffoldMessenger.of(context).showSnackBar(
+      showSuccessSnackBar(context, 'Moved ${devices.length} devices.');
-        SnackBar(content: Text('Moved ${devices.length} devices.')),
-      );
     }
   }
 }

lib/screens/network_map/network_map_site_screen.dart

@@ -8,15 +8,48 @@ import '../../providers/network_map/network_topology_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../widgets/app_state_view.dart';
 import 'widgets/topology_canvas.dart';
+import 'widgets/topology_legend.dart';
+import 'widgets/topology_minimap.dart';
+import 'widgets/zoom_controls.dart';
 
-class NetworkMapSiteScreen extends ConsumerWidget {
+class NetworkMapSiteScreen extends ConsumerStatefulWidget {
   const NetworkMapSiteScreen({super.key, required this.siteId});
 
   final String siteId;
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  ConsumerState<NetworkMapSiteScreen> createState() =>
-    final topologyAsync = ref.watch(topologyForSiteProvider(siteId));
+      _NetworkMapSiteScreenState();
+}
+
+class _NetworkMapSiteScreenState extends ConsumerState<NetworkMapSiteScreen> {
+  late final TransformationController _transformController;
+  Map<String, Offset> _nodePositions = const {};
+  Size _canvasSize = const Size(600, 400);
+
+  @override
+  void initState() {
+    super.initState();
+    _transformController = TransformationController();
+  }
+
+  @override
+  void dispose() {
+    _transformController.dispose();
+    super.dispose();
+  }
+
+  void _onLayoutUpdated(Map<String, Offset> positions, Size canvasSize) {
+    if (!mounted) return;
+    setState(() {
+      _nodePositions = positions;
+      _canvasSize = canvasSize;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final topologyAsync = ref.watch(topologyForSiteProvider(widget.siteId));
     final viewMode = ref.watch(topologyViewModeProvider);
     final sitesAsync = ref.watch(networkSitesProvider);
     final profileAsync = ref.watch(currentProfileProvider);
@@ -27,7 +60,7 @@ class NetworkMapSiteScreen extends ConsumerWidget {
 
     final siteName = sitesAsync.valueOrNull
         ?.firstWhere(
-          (s) => s.id == siteId,
+          (s) => s.id == widget.siteId,
           orElse: () => sitesAsync.valueOrNull!.first,
         )
         .name;
@@ -64,7 +97,7 @@ class NetworkMapSiteScreen extends ConsumerWidget {
               tooltip: 'Add device',
               icon: const Icon(Icons.add_circle_outline),
               onPressed: () =>
-                  context.go('/network-map/site/$siteId/device/new'),
+                  context.go('/network-map/site/${widget.siteId}/device/new'),
             ),
         ],
       ),
@@ -72,15 +105,97 @@ class NetworkMapSiteScreen extends ConsumerWidget {
         loading: () => const Center(child: CircularProgressIndicator()),
         error: (e, _) => AppErrorView(
           error: e,
-          onRetry: () => ref.invalidate(topologyForSiteProvider(siteId)),
+          onRetry: () => ref.invalidate(topologyForSiteProvider(widget.siteId)),
         ),
-        data: (graph) => TopologyCanvas(
+        data: (graph) => _CanvasWithOverlays(
           graph: graph,
           viewMode: viewMode,
-          onDeviceTap: (device) =>
+          siteId: widget.siteId,
-              context.go('/network-map/device/${device.id}'),
+          transformController: _transformController,
+          nodePositions: _nodePositions,
+          canvasSize: _canvasSize,
+          onLayoutUpdated: _onLayoutUpdated,
         ),
       ),
     );
   }
 }
+
+/// Canvas + all overlay widgets (legend, zoom controls, minimap) in a Stack.
+class _CanvasWithOverlays extends StatelessWidget {
+  const _CanvasWithOverlays({
+    required this.graph,
+    required this.viewMode,
+    required this.siteId,
+    required this.transformController,
+    required this.nodePositions,
+    required this.canvasSize,
+    required this.onLayoutUpdated,
+  });
+
+  final TopologyGraph graph;
+  final TopologyViewMode viewMode;
+  final String siteId;
+  final TransformationController transformController;
+  final Map<String, Offset> nodePositions;
+  final Size canvasSize;
+  final void Function(Map<String, Offset>, Size) onLayoutUpdated;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final viewportSize = Size(constraints.maxWidth, constraints.maxHeight);
+
+        return Stack(
+          children: [
+            // ── Main topology canvas ─────────────────────────────────────
+            Positioned.fill(
+              child: TopologyCanvas(
+                graph: graph,
+                viewMode: viewMode,
+                transformationController: transformController,
+                onLayoutUpdated: onLayoutUpdated,
+                onDeviceTap: (device) =>
+                    context.push('/network-map/device/${device.id}'),
+              ),
+            ),
+
+            // ── Legend — bottom-left ─────────────────────────────────────
+            Positioned(
+              left: 16,
+              bottom: 16,
+              child: const TopologyLegend(),
+            ),
+
+            // ── Zoom controls + minimap — bottom-right ───────────────────
+            Positioned(
+              right: 16,
+              bottom: 16,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.end,
+                children: [
+                  // Minimap above zoom controls
+                  TopologyMinimap(
+                    graph: graph,
+                    nodePositions: nodePositions,
+                    canvasSize: canvasSize,
+                    controller: transformController,
+                    viewportSize: viewportSize,
+                  ),
+                  const SizedBox(height: 8),
+                  ZoomControls(
+                    controller: transformController,
+                    canvasSize: canvasSize,
+                    viewportSize: viewportSize,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

lib/screens/network_map/network_map_vlan_screen.dart

@@ -98,7 +98,17 @@ class NetworkMapVlanScreen extends ConsumerWidget {
     final descCtrl = TextEditingController();
     final ok = await showDialog<bool>(
       context: context,
-      builder: (ctx) => AlertDialog(
+      builder: (ctx) => StatefulBuilder(
+        // Keep Create disabled until the input is valid, instead of accepting
+        // the click and silently discarding out-of-range/empty input after the
+        // dialog closes (QA-048; matches the QA-029 disabled-until-valid fix).
+        builder: (ctx, setDialogState) {
+          final parsedId = int.tryParse(idCtrl.text.trim());
+          final isValid = parsedId != null &&
+              parsedId >= 1 &&
+              parsedId <= 4094 &&
+              nameCtrl.text.trim().isNotEmpty;
+          return AlertDialog(
             title: const Text('New VLAN'),
             content: Column(
               mainAxisSize: MainAxisSize.min,
@@ -106,19 +116,23 @@ class NetworkMapVlanScreen extends ConsumerWidget {
                 TextField(
                   controller: idCtrl,
                   keyboardType: TextInputType.number,
-              decoration: const InputDecoration(labelText: 'VLAN ID (1-4094)'),
+                  decoration:
+                      const InputDecoration(labelText: 'VLAN ID (1-4094)'),
                   autofocus: true,
+                  onChanged: (_) => setDialogState(() {}),
                 ),
                 const SizedBox(height: 8),
                 TextField(
                   controller: nameCtrl,
                   decoration: const InputDecoration(labelText: 'Name'),
+                  onChanged: (_) => setDialogState(() {}),
                 ),
                 const SizedBox(height: 8),
                 TextField(
                   controller: descCtrl,
-              decoration:
+                  decoration: const InputDecoration(
-                  const InputDecoration(labelText: 'Description (optional)'),
+                    labelText: 'Description (optional)',
+                  ),
                 ),
               ],
             ),
@@ -128,10 +142,12 @@ class NetworkMapVlanScreen extends ConsumerWidget {
                 child: const Text('Cancel'),
               ),
               FilledButton(
-            onPressed: () => Navigator.pop(ctx, true),
+                onPressed: isValid ? () => Navigator.pop(ctx, true) : null,
                 child: const Text('Create'),
               ),
             ],
+          );
+        },
       ),
     );
     final vlanId = int.tryParse(idCtrl.text.trim());

lib/screens/network_map/widgets/device_node.dart

@@ -1,17 +1,13 @@
 import 'package:flutter/material.dart';
 
 import '../../../models/network/network_device.dart';
+import '../../../theme/app_status_colors.dart';
+import 'network_device_icon.dart';
 
 /// A styled node representing one network device on the topology canvas.
 ///
-/// Designed to feel solid at ~120-160dp wide so it remains legible at the
+/// Accepts an explicit [nodeSize] so role-based sizing can be applied by the
-/// "good for 200 nodes" zoom level called out in the V1 spec.
+/// canvas without this widget needing to know the layout strategy.
-///
-/// The node has three visual states beyond its default rest:
-///   - [isSelected]: stronger primary-tinted background + 2dp primary border.
-///   - [isHighlighted]: softer secondary tint + primary outline, used when an
-///     edge touching this device is hovered on the canvas.
-///   - [isSelected] takes precedence over [isHighlighted].
 class DeviceNode extends StatelessWidget {
   const DeviceNode({
     super.key,
@@ -19,6 +15,7 @@ class DeviceNode extends StatelessWidget {
     this.portCount,
     this.isSelected = false,
     this.isHighlighted = false,
+    this.nodeSize = const Size(160, 110),
     this.onTap,
   });
 
@@ -26,29 +23,9 @@ class DeviceNode extends StatelessWidget {
   final int? portCount;
   final bool isSelected;
   final bool isHighlighted;
+  final Size nodeSize;
   final VoidCallback? onTap;
 
-  IconData _iconForKind(NetworkDeviceKind kind) {
-    switch (kind) {
-      case NetworkDeviceKind.router:
-        return Icons.router_outlined;
-      case NetworkDeviceKind.switchDevice:
-        return Icons.hub_outlined;
-      case NetworkDeviceKind.ap:
-        return Icons.wifi_outlined;
-      case NetworkDeviceKind.firewall:
-        return Icons.security_outlined;
-      case NetworkDeviceKind.server:
-        return Icons.dns_outlined;
-      case NetworkDeviceKind.endpoint:
-        return Icons.devices_outlined;
-      case NetworkDeviceKind.patchPanel:
-        return Icons.view_module_outlined;
-      case NetworkDeviceKind.other:
-        return Icons.device_unknown_outlined;
-    }
-  }
-
   Color _accentForRole(ColorScheme cs, NetworkDeviceRole? role) {
     switch (role) {
       case NetworkDeviceRole.core:
@@ -65,11 +42,26 @@ class DeviceNode extends StatelessWidget {
     }
   }
 
+  Color? _statusColor(BuildContext context, NetworkDeviceStatus status) {
+    final s = AppStatusColors.of(context);
+    switch (status) {
+      case NetworkDeviceStatus.online:
+        return s.success.color;
+      case NetworkDeviceStatus.offline:
+        return Theme.of(context).colorScheme.error;
+      case NetworkDeviceStatus.warning:
+        return s.warning.color;
+      case NetworkDeviceStatus.unknown:
+        return null; // No dot shown
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final cs = Theme.of(context).colorScheme;
     final tt = Theme.of(context).textTheme;
     final accent = _accentForRole(cs, device.role);
+    final statusColor = _statusColor(context, device.status);
 
     final bgColor = isSelected
         ? cs.primaryContainer
@@ -105,8 +97,10 @@ class DeviceNode extends StatelessWidget {
         child: InkWell(
           onTap: onTap,
           borderRadius: BorderRadius.circular(16),
-          child: Container(
+          child: Stack(
-            width: 160,
+            children: [
+              Container(
+                width: nodeSize.width,
                 padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
@@ -114,7 +108,11 @@ class DeviceNode extends StatelessWidget {
                   children: [
                     Row(
                       children: [
-                    Icon(_iconForKind(device.kind), size: 18, color: accent),
+                        NetworkDeviceIcon(
+                          kind: device.kind,
+                          color: accent,
+                          size: 20,
+                        ),
                         const SizedBox(width: 6),
                         Expanded(
                           child: Text(
@@ -140,7 +138,8 @@ class DeviceNode extends StatelessWidget {
                           if (device.vendor != null) device.vendor,
                           if (device.model != null) device.model,
                         ].whereType<String>().join(' • '),
-                    style: tt.labelSmall?.copyWith(color: cs.onSurfaceVariant),
+                        style: tt.labelSmall?.copyWith(
+                            color: cs.onSurfaceVariant),
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                       ),
@@ -167,6 +166,26 @@ class DeviceNode extends StatelessWidget {
                   ],
                 ),
               ),
+              // Status dot — top-right, only shown when status is not unknown
+              if (statusColor != null)
+                Positioned(
+                  top: 8,
+                  right: 8,
+                  child: Container(
+                    width: 8,
+                    height: 8,
+                    decoration: BoxDecoration(
+                      color: statusColor,
+                      shape: BoxShape.circle,
+                      border: Border.all(
+                        color: bgColor,
+                        width: 1.5,
+                      ),
+                    ),
+                  ),
+                ),
+            ],
+          ),
         ),
       ),
     );

lib/screens/network_map/widgets/link_edit_dialog.dart

@@ -0,0 +1,187 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../../models/network/network_link.dart';
+import '../../../models/network/network_port.dart';
+import '../../../providers/network_map/network_devices_provider.dart';
+import '../../../utils/snackbar.dart';
+
+/// Opens an M3 dialog to connect [portId] to a port on another device.
+///
+/// Returns true if a link was successfully created.
+Future<bool> showLinkEditDialog({
+  required BuildContext context,
+  required WidgetRef ref,
+  required String portId,
+  required String currentDeviceId,
+}) async {
+  final result = await showDialog<bool>(
+    context: context,
+    builder: (_) => _LinkEditDialog(
+      portId: portId,
+      currentDeviceId: currentDeviceId,
+    ),
+  );
+  return result == true;
+}
+
+class _LinkEditDialog extends ConsumerStatefulWidget {
+  const _LinkEditDialog({
+    required this.portId,
+    required this.currentDeviceId,
+  });
+
+  final String portId;
+  final String currentDeviceId;
+
+  @override
+  ConsumerState<_LinkEditDialog> createState() => _LinkEditDialogState();
+}
+
+class _LinkEditDialogState extends ConsumerState<_LinkEditDialog> {
+  String? _selectedDeviceId;
+  String? _selectedPortId;
+  NetworkLinkKind? _linkKind;
+  final _cableLabelCtrl = TextEditingController();
+  bool _saving = false;
+
+  @override
+  void dispose() {
+    _cableLabelCtrl.dispose();
+    super.dispose();
+  }
+
+  Future<void> _save() async {
+    final portA = widget.portId;
+    final portB = _selectedPortId;
+    if (portB == null) return;
+    setState(() => _saving = true);
+    try {
+      ref.invalidate(networkLinksProvider);
+      final controller = ref.read(networkDevicesControllerProvider);
+      await controller.createLink(
+        portA: portA,
+        portB: portB,
+        linkKind: _linkKind,
+        cableLabel: _cableLabelCtrl.text.trim().isEmpty
+            ? null
+            : _cableLabelCtrl.text.trim(),
+      );
+      if (mounted) Navigator.of(context).pop(true);
+    } catch (e) {
+      if (mounted) {
+        showErrorSnackBar(context, 'Failed to create link: $e');
+      }
+    } finally {
+      if (mounted) setState(() => _saving = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final devicesAsync = ref.watch(networkDevicesProvider);
+    final portsAsync = _selectedDeviceId != null
+        ? ref.watch(networkPortsByDeviceProvider(_selectedDeviceId!))
+        : const AsyncValue<List<NetworkPort>>.data([]);
+    final allLinksAsync = ref.watch(networkLinksProvider);
+
+    final otherDevices = (devicesAsync.valueOrNull ?? const [])
+        .where((d) => d.id != widget.currentDeviceId)
+        .toList()
+      ..sort((a, b) => a.name.compareTo(b.name));
+
+    final allLinks = allLinksAsync.valueOrNull ?? const [];
+    final usedPortIds = <String>{
+      for (final link in allLinks) ...[link.portA, link.portB],
+    };
+
+    final devicePorts = portsAsync.valueOrNull ?? const [];
+    final availablePorts =
+        devicePorts.where((p) => !usedPortIds.contains(p.id)).toList();
+
+    final canSave = _selectedPortId != null && !_saving;
+
+    return AlertDialog(
+      title: const Text('Connect port'),
+      content: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 420),
+        child: SingleChildScrollView(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              DropdownButtonFormField<String>(
+                initialValue: _selectedDeviceId,
+                decoration:
+                    const InputDecoration(labelText: 'Remote device *'),
+                items: [
+                  for (final d in otherDevices)
+                    DropdownMenuItem(value: d.id, child: Text(d.name)),
+                ],
+                onChanged: (v) => setState(() {
+                  _selectedDeviceId = v;
+                  _selectedPortId = null;
+                }),
+              ),
+              const SizedBox(height: 12),
+              DropdownButtonFormField<String>(
+                key: ValueKey(_selectedDeviceId),
+                initialValue: _selectedPortId,
+                decoration: InputDecoration(
+                  labelText: 'Remote port *',
+                  helperText: _selectedDeviceId == null
+                      ? 'Select a device first'
+                      : availablePorts.isEmpty
+                          ? 'No available ports on this device'
+                          : null,
+                ),
+                items: [
+                  for (final p in availablePorts)
+                    DropdownMenuItem(
+                      value: p.id,
+                      child: Text(p.portNumber),
+                    ),
+                ],
+                onChanged: _selectedDeviceId == null
+                    ? null
+                    : (v) => setState(() => _selectedPortId = v),
+              ),
+              const SizedBox(height: 12),
+              DropdownButtonFormField<NetworkLinkKind?>(
+                initialValue: _linkKind,
+                decoration: const InputDecoration(labelText: 'Link type'),
+                items: [
+                  const DropdownMenuItem<NetworkLinkKind?>(
+                    value: null,
+                    child: Text('(unknown)'),
+                  ),
+                  for (final k in NetworkLinkKind.values)
+                    DropdownMenuItem(value: k, child: Text(k.label)),
+                ],
+                onChanged: (v) => setState(() => _linkKind = v),
+              ),
+              const SizedBox(height: 12),
+              TextField(
+                controller: _cableLabelCtrl,
+                decoration: const InputDecoration(
+                  labelText: 'Cable label',
+                  helperText: 'e.g. "CAT6-01", "SMF-A3" (optional)',
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: _saving ? null : () => Navigator.pop(context, false),
+          child: const Text('Cancel'),
+        ),
+        FilledButton(
+          onPressed: canSave ? _save : null,
+          child: Text(_saving ? 'Saving…' : 'Connect'),
+        ),
+      ],
+    );
+  }
+}

lib/screens/network_map/widgets/network_device_icon.dart

@@ -0,0 +1,374 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../../../models/network/network_device.dart';
+
+/// Custom-painted network equipment icon for each [NetworkDeviceKind].
+///
+/// Draws simplified but recognizable symbols matching professional network
+/// topology diagram conventions (Cisco-style silhouettes).
+class NetworkDeviceIcon extends StatelessWidget {
+  const NetworkDeviceIcon({
+    super.key,
+    required this.kind,
+    required this.color,
+    this.size = 20,
+  });
+
+  final NetworkDeviceKind kind;
+  final Color color;
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: size,
+      height: size,
+      child: CustomPaint(
+        painter: _DeviceIconPainter(kind: kind, color: color),
+      ),
+    );
+  }
+}
+
+class _DeviceIconPainter extends CustomPainter {
+  _DeviceIconPainter({required this.kind, required this.color});
+
+  final NetworkDeviceKind kind;
+  final Color color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    switch (kind) {
+      case NetworkDeviceKind.router:
+        _drawRouter(canvas, size);
+      case NetworkDeviceKind.switchDevice:
+        _drawSwitch(canvas, size);
+      case NetworkDeviceKind.ap:
+        _drawAp(canvas, size);
+      case NetworkDeviceKind.firewall:
+        _drawFirewall(canvas, size);
+      case NetworkDeviceKind.server:
+        _drawServer(canvas, size);
+      case NetworkDeviceKind.endpoint:
+        _drawEndpoint(canvas, size);
+      case NetworkDeviceKind.patchPanel:
+        _drawPatchPanel(canvas, size);
+      case NetworkDeviceKind.other:
+        _drawOther(canvas, size);
+    }
+  }
+
+  Paint get _stroke => Paint()
+    ..color = color
+    ..style = PaintingStyle.stroke
+    ..strokeCap = StrokeCap.round
+    ..strokeJoin = StrokeJoin.round
+    ..strokeWidth = 1.4;
+
+  Paint get _fill => Paint()
+    ..color = color
+    ..style = PaintingStyle.fill;
+
+  // ─── Router: cylinder body + 4 arrows ─────────────────────────────────────
+
+  void _drawRouter(Canvas canvas, Size s) {
+    final cx = s.width / 2;
+    final cy = s.height / 2;
+    final r = s.width * 0.28;
+    final p = _stroke;
+
+    // Circle body
+    canvas.drawCircle(Offset(cx, cy), r, p);
+
+    // 4 directional arrows at N/S/E/W
+    const arrowLen = 0.22;
+    const arrowHead = 0.1;
+    for (var i = 0; i < 4; i++) {
+      final angle = i * math.pi / 2;
+      final ax = cx + math.cos(angle) * (r + s.width * arrowLen);
+      final ay = cy + math.sin(angle) * (r + s.width * arrowLen);
+      final bx = cx + math.cos(angle) * (r + 1);
+      final by = cy + math.sin(angle) * (r + 1);
+      canvas.drawLine(Offset(bx, by), Offset(ax, ay), p);
+      // Arrowhead
+      final perp = angle + math.pi / 2;
+      final hw = s.width * arrowHead;
+      canvas.drawPath(
+        Path()
+          ..moveTo(ax, ay)
+          ..lineTo(
+            ax - math.cos(angle) * hw + math.cos(perp) * hw / 2,
+            ay - math.sin(angle) * hw + math.sin(perp) * hw / 2,
+          )
+          ..lineTo(
+            ax - math.cos(angle) * hw - math.cos(perp) * hw / 2,
+            ay - math.sin(angle) * hw - math.sin(perp) * hw / 2,
+          )
+          ..close(),
+        _fill,
+      );
+    }
+  }
+
+  // ─── Switch: rectangle + port lines ───────────────────────────────────────
+
+  void _drawSwitch(Canvas canvas, Size s) {
+    final w = s.width * 0.86;
+    final h = s.height * 0.42;
+    final left = (s.width - w) / 2;
+    final top = (s.height - h) / 2;
+    final p = _stroke;
+
+    // Body
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, w, h),
+        const Radius.circular(2),
+      ),
+      p,
+    );
+
+    // Port lines (8 evenly spaced)
+    const ports = 8;
+    final portSpacing = w / (ports + 1);
+    final portH = h * 0.5;
+    final portTop = top + h * 0.2;
+    for (var i = 1; i <= ports; i++) {
+      final px = left + portSpacing * i;
+      canvas.drawLine(
+        Offset(px, portTop),
+        Offset(px, portTop + portH),
+        p,
+      );
+    }
+    // Two legs at bottom center
+    final legX1 = s.width * 0.38;
+    final legX2 = s.width * 0.62;
+    final bodyBottom = top + h;
+    canvas.drawLine(
+      Offset(legX1, bodyBottom),
+      Offset(legX1, s.height * 0.85),
+      p,
+    );
+    canvas.drawLine(
+      Offset(legX2, bodyBottom),
+      Offset(legX2, s.height * 0.85),
+      p,
+    );
+    canvas.drawLine(
+      Offset(legX1, s.height * 0.85),
+      Offset(legX2, s.height * 0.85),
+      p,
+    );
+  }
+
+  // ─── AP: semicircle waves + stem ──────────────────────────────────────────
+
+  void _drawAp(Canvas canvas, Size s) {
+    final cx = s.width / 2;
+    final base = s.height * 0.72;
+    final p = _stroke;
+
+    // Stem
+    canvas.drawLine(Offset(cx, base), Offset(cx, s.height * 0.88), p);
+    canvas.drawLine(
+      Offset(cx - s.width * 0.15, s.height * 0.88),
+      Offset(cx + s.width * 0.15, s.height * 0.88),
+      p,
+    );
+
+    // 3 concentric arcs from narrow to wide
+    for (var i = 1; i <= 3; i++) {
+      final r = s.width * 0.13 * i;
+      final rect = Rect.fromCircle(center: Offset(cx, base), radius: r);
+      canvas.drawArc(rect, math.pi, -math.pi, false, p);
+    }
+  }
+
+  // ─── Firewall: brick-wall grid ─────────────────────────────────────────────
+
+  void _drawFirewall(Canvas canvas, Size s) {
+    final w = s.width * 0.8;
+    final h = s.height * 0.72;
+    final left = (s.width - w) / 2;
+    final top = (s.height - h) / 2;
+    final p = _stroke;
+
+    // Outer rect
+    canvas.drawRect(Rect.fromLTWH(left, top, w, h), p);
+
+    // 3 rows, 2 staggered bricks each
+    final rowH = h / 3;
+    for (var row = 0; row < 3; row++) {
+      final rowTop = top + row * rowH;
+      // horizontal mortar line
+      if (row > 0) {
+        canvas.drawLine(
+          Offset(left, rowTop),
+          Offset(left + w, rowTop),
+          p,
+        );
+      }
+      // vertical mortar — offset every other row by half a brick
+      final offset = (row % 2 == 0) ? w / 2 : w / 4;
+      canvas.drawLine(
+        Offset(left + offset, rowTop),
+        Offset(left + offset, rowTop + rowH),
+        p,
+      );
+    }
+  }
+
+  // ─── Server: rack unit with LED dots ──────────────────────────────────────
+
+  void _drawServer(Canvas canvas, Size s) {
+    final w = s.width * 0.72;
+    final h = s.height * 0.78;
+    final left = (s.width - w) / 2;
+    final top = (s.height - h) / 2;
+    final p = _stroke;
+    final fp = _fill;
+
+    // Body
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, w, h),
+        const Radius.circular(2),
+      ),
+      p,
+    );
+
+    // 3 horizontal rack-unit dividers + LED dots
+    final unitH = h / 3;
+    for (var i = 0; i < 3; i++) {
+      final unitTop = top + i * unitH;
+      if (i > 0) {
+        canvas.drawLine(
+          Offset(left, unitTop),
+          Offset(left + w, unitTop),
+          p,
+        );
+      }
+      // Small LED dot on right side of each unit
+      canvas.drawCircle(
+        Offset(left + w - w * 0.15, unitTop + unitH / 2),
+        s.width * 0.05,
+        fp,
+      );
+    }
+  }
+
+  // ─── Endpoint: monitor + stand ─────────────────────────────────────────────
+
+  void _drawEndpoint(Canvas canvas, Size s) {
+    final monW = s.width * 0.76;
+    final monH = s.height * 0.52;
+    final left = (s.width - monW) / 2;
+    final top = s.height * 0.08;
+    final p = _stroke;
+
+    // Monitor bezel
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, monW, monH),
+        const Radius.circular(2),
+      ),
+      p,
+    );
+
+    // Screen inner (inset 2dp)
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left + 3, top + 3, monW - 6, monH - 6),
+        const Radius.circular(1),
+      ),
+      p,
+    );
+
+    // Neck
+    final neckX = s.width / 2;
+    final neckTop = top + monH;
+    canvas.drawLine(
+      Offset(neckX, neckTop),
+      Offset(neckX, neckTop + s.height * 0.18),
+      p,
+    );
+
+    // Base
+    canvas.drawLine(
+      Offset(s.width * 0.25, s.height * 0.88),
+      Offset(s.width * 0.75, s.height * 0.88),
+      p,
+    );
+  }
+
+  // ─── Patch panel: flat rect with 2 rows of port circles ──────────────────
+
+  void _drawPatchPanel(Canvas canvas, Size s) {
+    final w = s.width * 0.9;
+    final h = s.height * 0.44;
+    final left = (s.width - w) / 2;
+    final top = (s.height - h) / 2;
+    final p = _stroke;
+
+    // Body
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, w, h),
+        const Radius.circular(2),
+      ),
+      p,
+    );
+
+    // 2 rows × 5 port circles
+    const cols = 5;
+    const rows = 2;
+    final colSpacing = w / (cols + 1);
+    final rowSpacing = h / (rows + 1);
+    final dotR = s.width * 0.04;
+    for (var row = 1; row <= rows; row++) {
+      for (var col = 1; col <= cols; col++) {
+        canvas.drawCircle(
+          Offset(left + colSpacing * col, top + rowSpacing * row),
+          dotR,
+          p,
+        );
+      }
+    }
+  }
+
+  // ─── Other: circle with question mark ─────────────────────────────────────
+
+  void _drawOther(Canvas canvas, Size s) {
+    final cx = s.width / 2;
+    final cy = s.height / 2;
+    final r = s.width * 0.42;
+    final p = _stroke;
+
+    canvas.drawCircle(Offset(cx, cy), r, p);
+
+    // "?" drawn as a small arc + dot
+    final tp = TextPainter(
+      text: TextSpan(
+        text: '?',
+        style: TextStyle(
+          fontSize: s.width * 0.52,
+          fontWeight: FontWeight.w700,
+          color: color,
+          height: 1,
+        ),
+      ),
+      textDirection: TextDirection.ltr,
+    )..layout();
+    tp.paint(
+      canvas,
+      Offset(cx - tp.width / 2, cy - tp.height / 2),
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant _DeviceIconPainter old) =>
+      old.kind != kind || old.color != color;
+}

lib/screens/network_map/widgets/port_edit_dialog.dart

@@ -131,18 +131,19 @@ class _PortEditDialogState extends ConsumerState<_PortEditDialog> {
     return AlertDialog(
       title: Text(widget.existing == null ? 'Add port' : 'Edit port'),
       content: ConstrainedBox(
-        constraints: const BoxConstraints(maxWidth: 420),
+        constraints: const BoxConstraints(minWidth: 320, maxWidth: 480),
         child: SingleChildScrollView(
           child: Column(
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
+              // ── Identity ─────────────────────────────────────────
               TextField(
                 controller: _numberCtrl,
                 autofocus: widget.existing == null,
                 decoration: const InputDecoration(
                   labelText: 'Port number *',
-                  helperText: 'Exactly as labeled on the device (e.g. Gi0/1, eth0, 24)',
+                  helperText: 'e.g. Gi0/1, eth0, port24',
                 ),
               ),
               const SizedBox(height: 12),
@@ -161,6 +162,7 @@ class _PortEditDialogState extends ConsumerState<_PortEditDialog> {
               ),
               const SizedBox(height: 12),
               Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Expanded(
                     child: TextField(
@@ -182,39 +184,43 @@ class _PortEditDialogState extends ConsumerState<_PortEditDialog> {
                       inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                       decoration: InputDecoration(
                         labelText: 'Access VLAN',
-                        helperText: _isTrunk
+                        helperText: _isTrunk ? 'Disabled for trunk' : '1–4094',
-                            ? 'Disabled — trunk port'
-                            : 'Single VLAN ID (1–4094)',
                       ),
                     ),
                   ),
                 ],
               ),
-              const SizedBox(height: 12),
+              // ── Switching config ──────────────────────────────────
+              const Divider(height: 28),
               SwitchListTile.adaptive(
                 value: _isTrunk,
                 onChanged: (v) => setState(() => _isTrunk = v),
                 contentPadding: EdgeInsets.zero,
                 title: const Text('Trunk port'),
-                subtitle: Text(
+                subtitle: Text('Carries multiple VLANs', style: tt.bodySmall),
-                  'Carries multiple VLANs',
-                  style: tt.bodySmall,
               ),
-              ),
+              AnimatedSize(
-              if (_isTrunk) ...[
+                duration: const Duration(milliseconds: 200),
-                const SizedBox(height: 4),
+                curve: Curves.easeInOut,
-                TextField(
+                child: _isTrunk
+                    ? Padding(
+                        padding: const EdgeInsets.only(top: 8),
+                        child: TextField(
                           controller: _trunkVlansCtrl,
                           decoration: const InputDecoration(
-                    labelText: 'Allowed VLANs (comma-separated)',
+                            labelText: 'Allowed VLANs',
-                    helperText: 'e.g. 10, 20, 100-105',
+                            helperText: 'Comma-separated, e.g. 10, 20, 100',
                           ),
                         ),
-              ],
+                      )
+                    : const SizedBox.shrink(),
+              ),
+              // ── Notes ─────────────────────────────────────────────
               const SizedBox(height: 12),
               TextField(
                 controller: _notesCtrl,
-                maxLines: 2,
+                minLines: 2,
+                maxLines: 4,
                 decoration: const InputDecoration(labelText: 'Notes'),
               ),
             ],
@@ -228,7 +234,13 @@ class _PortEditDialogState extends ConsumerState<_PortEditDialog> {
         ),
         FilledButton(
           onPressed: _saving ? null : _save,
-          child: Text(_saving ? 'Saving…' : 'Save'),
+          child: _saving
+              ? const SizedBox(
+                  width: 16,
+                  height: 16,
+                  child: CircularProgressIndicator(strokeWidth: 2),
+                )
+              : Text(widget.existing == null ? 'Add' : 'Save'),
         ),
       ],
     );

lib/screens/network_map/widgets/port_list_tile.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 
 import '../../../models/network/network_port.dart';
 
+enum _PortAction { editPort, connect, disconnect, deletePort }
+
 class PortListTile extends StatelessWidget {
   const PortListTile({
     super.key,
@@ -10,6 +12,8 @@ class PortListTile extends StatelessWidget {
     this.linkedPortLabel,
     this.canEdit = false,
     this.onTap,
+    this.onConnect,
+    this.onDisconnect,
     this.onDelete,
   });
 
@@ -17,7 +21,9 @@ class PortListTile extends StatelessWidget {
   final String? linkedDeviceName;
   final String? linkedPortLabel;
   final bool canEdit;
-  final VoidCallback? onTap;
+  final void Function(BuildContext)? onTap;
+  final void Function(BuildContext)? onConnect;
+  final void Function(BuildContext)? onDisconnect;
   final VoidCallback? onDelete;
 
   @override
@@ -34,7 +40,7 @@ class PortListTile extends StatelessWidget {
     ];
 
     return ListTile(
-      onTap: onTap,
+      onTap: onTap == null ? null : () => onTap!(context),
       leading: CircleAvatar(
         backgroundColor: isLinked
             ? cs.primaryContainer
@@ -64,10 +70,56 @@ class PortListTile extends StatelessWidget {
         ],
       ),
       trailing: canEdit
-          ? IconButton(
+          ? PopupMenuButton<_PortAction>(
-              icon: const Icon(Icons.delete_outline),
+              tooltip: 'Port actions',
-              tooltip: 'Delete port',
+              onSelected: (action) {
-              onPressed: onDelete,
+                switch (action) {
+                  case _PortAction.editPort:
+                    onTap?.call(context);
+                  case _PortAction.connect:
+                    onConnect?.call(context);
+                  case _PortAction.disconnect:
+                    onDisconnect?.call(context);
+                  case _PortAction.deletePort:
+                    onDelete?.call();
+                }
+              },
+              itemBuilder: (_) => [
+                const PopupMenuItem(
+                  value: _PortAction.editPort,
+                  child: ListTile(
+                    leading: Icon(Icons.edit_outlined),
+                    title: Text('Edit port'),
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                ),
+                if (!isLinked)
+                  const PopupMenuItem(
+                    value: _PortAction.connect,
+                    child: ListTile(
+                      leading: Icon(Icons.add_link),
+                      title: Text('Connect to…'),
+                      contentPadding: EdgeInsets.zero,
+                    ),
+                  ),
+                if (isLinked)
+                  const PopupMenuItem(
+                    value: _PortAction.disconnect,
+                    child: ListTile(
+                      leading: Icon(Icons.link_off),
+                      title: Text('Disconnect'),
+                      contentPadding: EdgeInsets.zero,
+                    ),
+                  ),
+                const PopupMenuItem(
+                  value: _PortAction.deletePort,
+                  child: ListTile(
+                    leading: Icon(Icons.delete_outline),
+                    title: Text('Delete port'),
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                ),
+              ],
             )
           : null,
     );

lib/screens/network_map/widgets/topology_legend.dart

@@ -0,0 +1,250 @@
+import 'package:flutter/material.dart';
+
+import '../../../models/network/network_device.dart';
+import '../../../models/network/network_link.dart';
+import '../../../theme/app_surfaces.dart';
+
+/// Collapsible legend overlay explaining device role border colours and link
+/// type colours. Positioned at the bottom-left of the topology canvas view.
+class TopologyLegend extends StatefulWidget {
+  const TopologyLegend({super.key});
+
+  @override
+  State<TopologyLegend> createState() => _TopologyLegendState();
+}
+
+class _TopologyLegendState extends State<TopologyLegend>
+    with SingleTickerProviderStateMixin {
+  bool _expanded = false;
+  late final AnimationController _anim;
+  late final Animation<double> _fade;
+
+  @override
+  void initState() {
+    super.initState();
+    _anim = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 200),
+    );
+    _fade = CurvedAnimation(parent: _anim, curve: Curves.easeOut);
+  }
+
+  @override
+  void dispose() {
+    _anim.dispose();
+    super.dispose();
+  }
+
+  void _toggle() {
+    setState(() => _expanded = !_expanded);
+    if (_expanded) {
+      _anim.forward();
+    } else {
+      _anim.reverse();
+    }
+  }
+
+  Color _roleColor(ColorScheme cs, NetworkDeviceRole role) {
+    switch (role) {
+      case NetworkDeviceRole.core:
+        return cs.error;
+      case NetworkDeviceRole.distribution:
+        return cs.tertiary;
+      case NetworkDeviceRole.access:
+        return cs.primary;
+      case NetworkDeviceRole.edge:
+        return cs.secondary;
+      case NetworkDeviceRole.endpoint:
+        return cs.outline;
+    }
+  }
+
+  Color _linkColor(ColorScheme cs, NetworkLinkKind kind) {
+    switch (kind) {
+      case NetworkLinkKind.copper:
+        return cs.primary;
+      case NetworkLinkKind.fiber:
+        return cs.tertiary;
+      case NetworkLinkKind.wireless:
+        return cs.secondary;
+      case NetworkLinkKind.virtual:
+        return cs.outline;
+      case NetworkLinkKind.unknown:
+        return cs.outline;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final tt = Theme.of(context).textTheme;
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        // Expand/collapse toggle chip
+        Material(
+          color: cs.surfaceContainerHigh,
+          borderRadius: BorderRadius.circular(
+            AppSurfaces.of(context).containerRadius,
+          ),
+          elevation: 2,
+          child: InkWell(
+            onTap: _toggle,
+            borderRadius: BorderRadius.circular(
+              AppSurfaces.of(context).containerRadius,
+            ),
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(
+                    Icons.legend_toggle_outlined,
+                    size: 16,
+                    color: cs.onSurfaceVariant,
+                  ),
+                  const SizedBox(width: 6),
+                  Text(
+                    'Legend',
+                    style: tt.labelSmall?.copyWith(
+                      color: cs.onSurfaceVariant,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  const SizedBox(width: 4),
+                  AnimatedRotation(
+                    turns: _expanded ? 0.5 : 0,
+                    duration: const Duration(milliseconds: 200),
+                    child: Icon(
+                      Icons.expand_more,
+                      size: 16,
+                      color: cs.onSurfaceVariant,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+        // Expandable panel
+        FadeTransition(
+          opacity: _fade,
+          child: SizeTransition(
+            sizeFactor: _fade,
+            alignment: const Alignment(-1.0, -1.0),
+            child: Padding(
+              padding: const EdgeInsets.only(top: 6),
+              child: Material(
+                color: cs.surfaceContainerHigh,
+                borderRadius: BorderRadius.circular(12),
+                elevation: 3,
+                child: Padding(
+                  padding: const EdgeInsets.all(12),
+                  child: SizedBox(
+                    width: 200,
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        // ── Device Roles ─────────────────────────────
+                        Text(
+                          'Device Roles',
+                          style: tt.labelSmall?.copyWith(
+                            color: cs.onSurfaceVariant,
+                            fontWeight: FontWeight.w700,
+                            letterSpacing: 0.8,
+                          ),
+                        ),
+                        const SizedBox(height: 6),
+                        for (final role in NetworkDeviceRole.values)
+                          _LegendRow(
+                            color: _roleColor(cs, role),
+                            label: role.label,
+                            isLine: false,
+                          ),
+                        const SizedBox(height: 10),
+                        Divider(
+                            height: 1,
+                            color: cs.outlineVariant.withValues(alpha: 0.5)),
+                        const SizedBox(height: 10),
+                        // ── Link Types ───────────────────────────────
+                        Text(
+                          'Link Types',
+                          style: tt.labelSmall?.copyWith(
+                            color: cs.onSurfaceVariant,
+                            fontWeight: FontWeight.w700,
+                            letterSpacing: 0.8,
+                          ),
+                        ),
+                        const SizedBox(height: 6),
+                        for (final kind in NetworkLinkKind.values)
+                          _LegendRow(
+                            color: _linkColor(cs, kind),
+                            label: kind.label,
+                            isLine: true,
+                          ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _LegendRow extends StatelessWidget {
+  const _LegendRow({
+    required this.color,
+    required this.label,
+    required this.isLine,
+  });
+
+  final Color color;
+  final String label;
+  final bool isLine;
+
+  @override
+  Widget build(BuildContext context) {
+    final tt = Theme.of(context).textTheme;
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 2),
+      child: Row(
+        children: [
+          if (isLine)
+            // Coloured line segment for link types
+            Container(
+              width: 20,
+              height: 3,
+              decoration: BoxDecoration(
+                color: color,
+                borderRadius: BorderRadius.circular(2),
+              ),
+            )
+          else
+            // Coloured square for device roles (border indicator)
+            Container(
+              width: 12,
+              height: 12,
+              decoration: BoxDecoration(
+                border: Border.all(color: color, width: 2),
+                borderRadius: BorderRadius.circular(3),
+              ),
+            ),
+          const SizedBox(width: 8),
+          Text(
+            label,
+            style: tt.labelSmall?.copyWith(
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/screens/network_map/widgets/topology_minimap.dart

@@ -0,0 +1,248 @@
+import 'package:flutter/material.dart';
+
+import '../../../models/network/network_device.dart';
+import '../../../models/network/topology_graph.dart';
+
+/// Scaled-down overview of the topology canvas with a viewport indicator.
+///
+/// Shows all device nodes as small colour-coded rectangles and all edges as
+/// thin lines. A semi-transparent white rectangle indicates the current
+/// viewport within the full canvas. Tapping on the minimap pans the main
+/// canvas to centre on that point.
+class TopologyMinimap extends StatefulWidget {
+  const TopologyMinimap({
+    super.key,
+    required this.graph,
+    required this.nodePositions,
+    required this.canvasSize,
+    required this.controller,
+    required this.viewportSize,
+  });
+
+  final TopologyGraph graph;
+
+  /// Current interpolated node positions (top-left corners) from the canvas.
+  final Map<String, Offset> nodePositions;
+
+  final Size canvasSize;
+  final TransformationController controller;
+  final Size viewportSize;
+
+  static const Size _minimapSize = Size(160, 100);
+
+  @override
+  State<TopologyMinimap> createState() => _TopologyMinimapState();
+}
+
+class _TopologyMinimapState extends State<TopologyMinimap> {
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.addListener(_onTransformChanged);
+  }
+
+  @override
+  void didUpdateWidget(covariant TopologyMinimap oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.controller != widget.controller) {
+      oldWidget.controller.removeListener(_onTransformChanged);
+      widget.controller.addListener(_onTransformChanged);
+    }
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_onTransformChanged);
+    super.dispose();
+  }
+
+  void _onTransformChanged() => setState(() {});
+
+  double get _scaleX {
+    if (widget.canvasSize.width == 0) return 1;
+    return TopologyMinimap._minimapSize.width / widget.canvasSize.width;
+  }
+
+  double get _scaleY {
+    if (widget.canvasSize.height == 0) return 1;
+    return TopologyMinimap._minimapSize.height / widget.canvasSize.height;
+  }
+
+  double get _scale => _scaleX < _scaleY ? _scaleX : _scaleY;
+
+  Offset _toMinimap(Offset canvasPoint) {
+    final s = _scale;
+    final offsetX = (TopologyMinimap._minimapSize.width - widget.canvasSize.width * s) / 2;
+    final offsetY = (TopologyMinimap._minimapSize.height - widget.canvasSize.height * s) / 2;
+    return Offset(canvasPoint.dx * s + offsetX, canvasPoint.dy * s + offsetY);
+  }
+
+  /// Convert a tap on the minimap to a canvas point, then pan the main canvas
+  /// so that point appears at the viewport centre.
+  void _onTap(Offset localPos) {
+    final s = _scale;
+    if (s == 0) return;
+    final offsetX = (TopologyMinimap._minimapSize.width - widget.canvasSize.width * s) / 2;
+    final offsetY = (TopologyMinimap._minimapSize.height - widget.canvasSize.height * s) / 2;
+    final canvasX = (localPos.dx - offsetX) / s;
+    final canvasY = (localPos.dy - offsetY) / s;
+
+    final currentScale = widget.controller.value.getMaxScaleOnAxis();
+    final tx = widget.viewportSize.width / 2 - canvasX * currentScale;
+    final ty = widget.viewportSize.height / 2 - canvasY * currentScale;
+    final result = Matrix4.translationValues(tx, ty, 0);
+    result.multiply(Matrix4.diagonal3Values(currentScale, currentScale, 1.0));
+    widget.controller.value = result;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+
+    return GestureDetector(
+      onTapDown: (d) => _onTap(d.localPosition),
+      child: Material(
+        color: cs.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(8),
+        elevation: 2,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(8),
+          child: SizedBox(
+            width: TopologyMinimap._minimapSize.width,
+            height: TopologyMinimap._minimapSize.height,
+            child: CustomPaint(
+              painter: _MinimapPainter(
+                graph: widget.graph,
+                nodePositions: widget.nodePositions,
+                canvasSize: widget.canvasSize,
+                controller: widget.controller,
+                viewportSize: widget.viewportSize,
+                colorScheme: cs,
+                scale: _scale,
+                toMinimap: _toMinimap,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _MinimapPainter extends CustomPainter {
+  _MinimapPainter({
+    required this.graph,
+    required this.nodePositions,
+    required this.canvasSize,
+    required this.controller,
+    required this.viewportSize,
+    required this.colorScheme,
+    required this.scale,
+    required this.toMinimap,
+  });
+
+  final TopologyGraph graph;
+  final Map<String, Offset> nodePositions;
+  final Size canvasSize;
+  final TransformationController controller;
+  final Size viewportSize;
+  final ColorScheme colorScheme;
+  final double scale;
+  final Offset Function(Offset) toMinimap;
+
+  static const Size _nodeRectSize = Size(8, 5);
+
+  Color _roleColor(NetworkDeviceRole? role) {
+    switch (role) {
+      case NetworkDeviceRole.core:
+        return colorScheme.error;
+      case NetworkDeviceRole.distribution:
+        return colorScheme.tertiary;
+      case NetworkDeviceRole.access:
+        return colorScheme.primary;
+      case NetworkDeviceRole.edge:
+        return colorScheme.secondary;
+      case NetworkDeviceRole.endpoint:
+      case null:
+        return colorScheme.outline;
+    }
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    // Edges
+    final edgePaint = Paint()
+      ..color = colorScheme.outline.withValues(alpha: 0.4)
+      ..strokeWidth = 0.6
+      ..style = PaintingStyle.stroke
+      ..strokeCap = StrokeCap.round;
+
+    for (final edge in graph.edges) {
+      final fromPos = nodePositions[edge.fromDeviceId];
+      final toPos = nodePositions[edge.toDeviceId];
+      if (fromPos == null || toPos == null) continue;
+
+      // Use node centres
+      final from = toMinimap(fromPos + const Offset(80, 55));
+      final to = toMinimap(toPos + const Offset(80, 55));
+      canvas.drawLine(from, to, edgePaint);
+    }
+
+    // Device nodes
+    for (final node in graph.nodes) {
+      final pos = nodePositions[node.device.id];
+      if (pos == null) continue;
+      final minimapPos = toMinimap(pos);
+      final rect = Rect.fromLTWH(
+        minimapPos.dx - _nodeRectSize.width / 2,
+        minimapPos.dy - _nodeRectSize.height / 2,
+        _nodeRectSize.width,
+        _nodeRectSize.height,
+      );
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(rect, const Radius.circular(1.5)),
+        Paint()
+          ..color = _roleColor(node.device.role)
+          ..style = PaintingStyle.fill,
+      );
+    }
+
+    // Viewport rectangle
+    final m = controller.value;
+    final currentScale = m.getMaxScaleOnAxis();
+    if (currentScale > 0) {
+      // The translation is in the 3rd column of the matrix
+      final tx = m.getTranslation().x;
+      final ty = m.getTranslation().y;
+
+      // Viewport in canvas coordinates
+      final vpLeft = -tx / currentScale;
+      final vpTop = -ty / currentScale;
+      final vpWidth = viewportSize.width / currentScale;
+      final vpHeight = viewportSize.height / currentScale;
+
+      final tl = toMinimap(Offset(vpLeft, vpTop));
+      final br = toMinimap(Offset(vpLeft + vpWidth, vpTop + vpHeight));
+      final vpRect = Rect.fromPoints(tl, br);
+
+      // Fill
+      canvas.drawRect(
+        vpRect,
+        Paint()
+          ..color = colorScheme.primary.withValues(alpha: 0.08)
+          ..style = PaintingStyle.fill,
+      );
+      // Border
+      canvas.drawRect(
+        vpRect,
+        Paint()
+          ..color = colorScheme.primary.withValues(alpha: 0.6)
+          ..strokeWidth = 1.0
+          ..style = PaintingStyle.stroke,
+      );
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant _MinimapPainter old) => true;
+}

lib/screens/network_map/widgets/zoom_controls.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+
+/// Vertical +/−/fit-to-view zoom controls for the topology canvas.
+/// Requires a [TransformationController] shared with the [InteractiveViewer].
+class ZoomControls extends StatelessWidget {
+  const ZoomControls({
+    super.key,
+    required this.controller,
+    required this.canvasSize,
+    required this.viewportSize,
+  });
+
+  final TransformationController controller;
+
+  /// Full canvas size (from [computeSugiyamaLayout] result).
+  final Size canvasSize;
+
+  /// Viewport widget size (the screen area the canvas is displayed in).
+  final Size viewportSize;
+
+  static const double _zoomIn = 1.25;
+  static const double _zoomOut = 0.8;
+  static const double _minScale = 0.2;
+  static const double _maxScale = 2.5;
+
+  void _applyZoom(double factor) {
+    final current = controller.value.getMaxScaleOnAxis();
+    final next = (current * factor).clamp(_minScale, _maxScale);
+    final scale = next / current;
+    final cx = viewportSize.width / 2;
+    final cy = viewportSize.height / 2;
+    // Compose: T(cx,cy) * Scale(s) * T(-cx,-cy) * currentTransform
+    final result = Matrix4.translationValues(cx, cy, 0);
+    result.multiply(Matrix4.diagonal3Values(scale, scale, 1.0));
+    result.multiply(Matrix4.translationValues(-cx, -cy, 0));
+    result.multiply(controller.value);
+    controller.value = result;
+  }
+
+  void _fitToView() {
+    if (canvasSize.isEmpty) return;
+    final scaleX = viewportSize.width / canvasSize.width;
+    final scaleY = viewportSize.height / canvasSize.height;
+    final scale = (scaleX < scaleY ? scaleX : scaleY).clamp(_minScale, _maxScale);
+    final tx = (viewportSize.width - canvasSize.width * scale) / 2;
+    final ty = (viewportSize.height - canvasSize.height * scale) / 2;
+    // Build: T(tx,ty,0) * Scale(s,s,1) — maps canvas (0,0) → (tx,ty) on screen
+    final result = Matrix4.translationValues(tx, ty, 0);
+    result.multiply(Matrix4.diagonal3Values(scale, scale, 1.0));
+    controller.value = result;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+
+    return Material(
+      color: cs.surfaceContainerHigh,
+      borderRadius: BorderRadius.circular(12),
+      elevation: 2,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 4),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _ZoomButton(
+              icon: Icons.add,
+              tooltip: 'Zoom in',
+              onTap: () => _applyZoom(_zoomIn),
+            ),
+            _Divider(color: cs.outlineVariant.withValues(alpha: 0.4)),
+            _ZoomButton(
+              icon: Icons.remove,
+              tooltip: 'Zoom out',
+              onTap: () => _applyZoom(_zoomOut),
+            ),
+            _Divider(color: cs.outlineVariant.withValues(alpha: 0.4)),
+            _ZoomButton(
+              icon: Icons.fit_screen_outlined,
+              tooltip: 'Fit to view',
+              onTap: _fitToView,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _ZoomButton extends StatelessWidget {
+  const _ZoomButton({
+    required this.icon,
+    required this.tooltip,
+    required this.onTap,
+  });
+
+  final IconData icon;
+  final String tooltip;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    return Tooltip(
+      message: tooltip,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(8),
+        child: SizedBox(
+          width: 40,
+          height: 40,
+          child: Icon(icon, size: 18, color: cs.onSurfaceVariant),
+        ),
+      ),
+    );
+  }
+}
+
+class _Divider extends StatelessWidget {
+  const _Divider({required this.color});
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8),
+      child: Divider(height: 1, color: color),
+    );
+  }
+}

lib/screens/notifications/notifications_screen.dart

@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:permission_handler/permission_handler.dart';
 
-import '../../models/notification_item.dart';
+import '../../models/notification_item.model.dart';
 import '../../services/notification_service.dart';
 import '../../providers/notifications_provider.dart';
 import '../../providers/profile_provider.dart';

lib/screens/profile/profile_screen.dart

@@ -2,8 +2,9 @@ import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:image_picker/image_picker.dart';
+import 'package:intl/intl.dart';
 
-import '../../models/office.dart';
+import '../../models/office.model.dart';
 import '../../providers/auth_provider.dart' show sessionProvider;
 import '../../providers/profile_provider.dart';
 import '../../providers/tickets_provider.dart';
@@ -426,9 +427,7 @@ class _ProfileScreenState extends ConsumerState<ProfileScreen> {
     );
   }
 
-  String _formatDate(DateTime dt) {
+  String _formatDate(DateTime dt) => DateFormat('yyyy-MM-dd').format(dt);
-    return '${dt.year}-${dt.month.toString().padLeft(2, '0')}-${dt.day.toString().padLeft(2, '0')}';
-  }
 
   Future<void> _pickAvatar(ImageSource source) async {
     try {

lib/screens/reports/reports_screen.dart

@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../../theme/m3_motion.dart';
 import '../../providers/reports_provider.dart';
+import '../../utils/snackbar.dart';
 import '../../widgets/app_page_header.dart';
 import 'report_date_filter.dart';
 import 'report_widget_selector.dart';
@@ -59,9 +60,7 @@ class _ReportsScreenState extends ConsumerState<ReportsScreen> {
       await ReportPdfExport.sharePdf(pdfBytes);
     } catch (e) {
       if (mounted) {
-        ScaffoldMessenger.of(
+        showErrorSnackBar(context, 'PDF export failed: $e');
-          context,
-        ).showSnackBar(SnackBar(content: Text('PDF export failed: $e')));
       }
     } finally {
       if (mounted) setState(() => _exporting = false);

lib/screens/reports/widgets/request_distribution_charts.dart

@@ -109,7 +109,7 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
                     radius: isTouched ? 60 : 50,
                     color: colorFor(i, e.name),
                     borderSide: isTouched
-                        ? const BorderSide(color: Colors.white, width: 2)
+                        ? BorderSide(color: Theme.of(context).colorScheme.surface, width: 2)
                         : BorderSide.none,
                   );
                 }).toList(),
@@ -240,7 +240,7 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
                     radius: isTouched ? 60 : 50,
                     color: colorFor(i, e.name),
                     borderSide: isTouched
-                        ? const BorderSide(color: Colors.white, width: 2)
+                        ? BorderSide(color: Theme.of(context).colorScheme.surface, width: 2)
                         : BorderSide.none,
                   );
                 }).toList(),

lib/screens/reports/widgets/status_charts.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../../../providers/reports_provider.dart';
+import '../../../theme/app_status_colors.dart';
 import 'report_card_wrapper.dart';
 
 /// Donut chart  ticket counts per status with hover animation.
@@ -84,7 +85,7 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
                         radius: isTouched ? 60 : 50,
                         color: _ticketStatusColor(context, e.status),
                         borderSide: isTouched
-                            ? const BorderSide(color: Colors.white, width: 2)
+                            ? BorderSide(color: Theme.of(context).colorScheme.surface, width: 2)
                             : BorderSide.none,
                       );
                     }).toList(),
@@ -116,16 +117,18 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
   }
 
   Color _ticketStatusColor(BuildContext context, String status) {
-    final colors = Theme.of(context).colorScheme;
+    final s = AppStatusColors.of(context);
     switch (status) {
+      case 'critical':
+        return s.danger.color;
       case 'pending':
-        return colors.tertiary;
+        return s.warning.color;
       case 'promoted':
-        return colors.secondary;
+        return s.info.color;
       case 'closed':
-        return colors.primary;
+        return s.success.color;
       default:
-        return colors.outlineVariant;
+        return s.neutral.color;
     }
   }
 }
@@ -208,7 +211,7 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
                         radius: isTouched ? 60 : 50,
                         color: _taskStatusColor(context, e.status),
                         borderSide: isTouched
-                            ? const BorderSide(color: Colors.white, width: 2)
+                            ? BorderSide(color: Theme.of(context).colorScheme.surface, width: 2)
                             : BorderSide.none,
                       );
                     }).toList(),
@@ -240,18 +243,20 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
   }
 
   Color _taskStatusColor(BuildContext context, String status) {
-    final colors = Theme.of(context).colorScheme;
+    final s = AppStatusColors.of(context);
     switch (status) {
+      case 'critical':
+        return s.danger.color;
       case 'queued':
-        return colors.surfaceContainerHighest;
+        return s.neutral.color;
       case 'in_progress':
-        return colors.secondary;
+        return s.info.color;
       case 'completed':
-        return colors.primary;
+        return s.success.color;
       case 'cancelled':
-        return colors.error;
+        return s.danger.color;
       default:
-        return colors.outlineVariant;
+        return s.neutral.color;
     }
   }
 

lib/screens/shared/mobile_verification_screen.dart

@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../../providers/verification_session_provider.dart';
 import '../../services/face_verification.dart' as face;
+import '../../theme/app_status_colors.dart';
 
 /// Screen opened on mobile when the user scans a QR code for cross-device
 /// face verification. Performs liveness detection and uploads the result.
@@ -144,7 +145,11 @@ class _MobileVerificationScreenState
       return Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Icon(Icons.check_circle, size: 64, color: Colors.green),
+          Icon(
+            Icons.check_circle,
+            size: 64,
+            color: AppStatusColors.of(context).success.color,
+          ),
           const SizedBox(height: 16),
           Text('Verification Complete', style: theme.textTheme.headlineSmall),
           const SizedBox(height: 8),

lib/screens/shared/permissions_screen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../theme/app_status_colors.dart';
 import '../../theme/m3_motion.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:permission_handler/permission_handler.dart';
@@ -67,7 +68,10 @@ class _PermissionsScreenState extends ConsumerState<PermissionsScreen> {
             title: Text(info.label),
             subtitle: Text(status?.toString() ?? 'unknown'),
             trailing: granted
-                ? const Icon(Icons.check, color: Colors.green)
+                ? Icon(
+                    Icons.check,
+                    color: AppStatusColors.of(context).success.color,
+                  )
                 : Row(
                     mainAxisSize: MainAxisSize.min,
                     children: [

lib/screens/tasks/task_pdf.dart

@@ -10,11 +10,11 @@ import 'package:pdf/pdf.dart' as pdf;
 import 'package:printing/printing.dart';
 import 'package:pdfrx/pdfrx.dart';
 
-import '../../models/task.dart';
+import '../../models/task.model.dart';
-import '../../models/ticket.dart';
+import '../../models/ticket.model.dart';
-import '../../models/task_activity_log.dart';
+import '../../models/task_activity_log.model.dart';
 import '../../models/task_assignment.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
 import '../../utils/app_time.dart';
 
 Future<Uint8List> buildTaskPdfBytes(

lib/screens/tasks/tasks_list_screen.dart

@@ -7,14 +7,15 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
 import 'package:tasq/utils/app_time.dart';
 import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
 
-import '../../models/notification_item.dart';
+import '../../models/notification_item.model.dart';
-import '../../models/office.dart';
+import '../../models/office.model.dart';
 import '../../widgets/office_picker.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
-import '../../models/task.dart';
+import '../../models/task.model.dart';
 import '../../models/task_assignment.dart';
-import '../../models/ticket.dart';
+import '../../models/ticket.model.dart';
 import '../../providers/notifications_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../providers/tasks_provider.dart';
@@ -28,6 +29,8 @@ import '../../widgets/responsive_body.dart';
 import '../../widgets/tasq_adaptive_list.dart';
 import '../../widgets/typing_dots.dart';
 import '../../theme/app_surfaces.dart';
+import '../../theme/app_status_colors.dart';
+import '../../widgets/app_status_summary.dart';
 import '../../utils/snackbar.dart';
 import '../../widgets/app_breakpoints.dart';
 import '../../widgets/app_page_header.dart';
@@ -522,10 +525,10 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen>
                             if (task.status == 'completed' &&
                                 task.hasIncompleteDetails) ...[
                               const SizedBox(width: 4),
-                              const Icon(
+                              Icon(
                                 Icons.warning_amber_rounded,
                                 size: 16,
-                                color: Colors.orange,
+                                color: AppStatusColors.of(context).warning.color,
                               ),
                             ],
                           ],
@@ -619,10 +622,10 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen>
                                 if (task.status == 'completed' &&
                                     task.hasIncompleteDetails) ...[
                                   const SizedBox(width: 4),
-                                  const Icon(
+                                  Icon(
                                     Icons.warning_amber_rounded,
                                     size: 16,
-                                    color: Colors.orange,
+                                    color: AppStatusColors.of(context).warning.color,
                                   ),
                                 ],
                                 if (showTyping) ...[
@@ -1327,78 +1330,28 @@ class _StatusSummaryRow extends StatelessWidget {
     final entries = counts.entries.toList()
       ..sort((a, b) => a.key.compareTo(b.key));
 
-    return SingleChildScrollView(
+    return AppStatusSummaryRow(
-      scrollDirection: Axis.horizontal,
+      items: [
-      child: Row(
+        for (final e in entries)
-        children: [
+          AppStatusSummaryItem(
-          for (int i = 0; i < entries.length; i++) ...[
+            label: e.key.replaceAll('_', ' '),
-            if (i > 0) const SizedBox(width: 8),
+            count: e.value,
-            _StatusSummaryCard(
+            kind: _taskStatusKind(e.key),
-              status: entries[i].key,
-              count: entries[i].value,
           ),
       ],
-        ],
-      ),
     );
   }
 }
 
-class _StatusSummaryCard extends StatelessWidget {
+/// Maps a task status to a semantic [StatusKind] (red=critical, blue=in
-  const _StatusSummaryCard({required this.status, required this.count});
+/// progress, green=completed, grey=queued).
-
+StatusKind _taskStatusKind(String status) => switch (status) {
-  final String status;
+  'critical' => StatusKind.danger,
-  final int count;
+  'in_progress' => StatusKind.info,
-
+  'completed' => StatusKind.success,
-  @override
+  'queued' => StatusKind.neutral,
-  Widget build(BuildContext context) {
+  _ => StatusKind.neutral,
-    final scheme = Theme.of(context).colorScheme;
-    final background = switch (status) {
-      'critical' => scheme.errorContainer,
-      'queued' => scheme.surfaceContainerHighest,
-      'in_progress' => scheme.secondaryContainer,
-      'completed' => scheme.primaryContainer,
-      _ => scheme.surfaceContainerHigh,
 };
-    final foreground = switch (status) {
-      'critical' => scheme.onErrorContainer,
-      'queued' => scheme.onSurfaceVariant,
-      'in_progress' => scheme.onSecondaryContainer,
-      'completed' => scheme.onPrimaryContainer,
-      _ => scheme.onSurfaceVariant,
-    };
-    final label = status.replaceAll('_', ' ').toUpperCase();
-
-    return Material(
-      color: background,
-      borderRadius: BorderRadius.circular(20),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Text(
-              label,
-              style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                color: foreground,
-                fontWeight: FontWeight.w600,
-                letterSpacing: 0.4,
-              ),
-            ),
-            const SizedBox(width: 6),
-            Text(
-              count.toString(),
-              style: Theme.of(context).textTheme.labelLarge?.copyWith(
-                color: foreground,
-                fontWeight: FontWeight.w700,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
 
 String _assignedAgent(Map<String, Profile> profileById, String? userId) {
   if (userId == null || userId.isEmpty) {
@@ -1411,14 +1364,8 @@ String _assignedAgent(Map<String, Profile> profileById, String? userId) {
   return profile.fullName.isNotEmpty ? profile.fullName : profile.id;
 }
 
-String _formatTimestamp(DateTime value) {
+String _formatTimestamp(DateTime value) =>
-  final year = value.year.toString().padLeft(4, '0');
+    DateFormat('yyyy-MM-dd HH:mm').format(value);
-  final month = value.month.toString().padLeft(2, '0');
-  final day = value.day.toString().padLeft(2, '0');
-  final hour = value.hour.toString().padLeft(2, '0');
-  final minute = value.minute.toString().padLeft(2, '0');
-  return '$year-$month-$day $hour:$minute';
-}
 
 class _StatusBadge extends StatelessWidget {
   const _StatusBadge({required this.status});
@@ -1427,21 +1374,9 @@ class _StatusBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final scheme = Theme.of(context).colorScheme;
+    final swatch = AppStatusColors.of(context).byKind(_taskStatusKind(status));
-    final background = switch (status) {
+    final background = swatch.container;
-      'critical' => scheme.errorContainer,
+    final foreground = swatch.onContainer;
-      'queued' => scheme.surfaceContainerHighest,
-      'in_progress' => scheme.secondaryContainer,
-      'completed' => scheme.primaryContainer,
-      _ => scheme.surfaceContainerHighest,
-    };
-    final foreground = switch (status) {
-      'critical' => scheme.onErrorContainer,
-      'queued' => scheme.onSurfaceVariant,
-      'in_progress' => scheme.onSecondaryContainer,
-      'completed' => scheme.onPrimaryContainer,
-      _ => scheme.onSurfaceVariant,
-    };
 
     return Badge(
       backgroundColor: background,

lib/screens/teams/teams_screen.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import '../../theme/m3_motion.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import '../../models/office.dart';
+import '../../models/office.model.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
-import '../../models/team.dart';
+import '../../models/team.model.dart';
 import '../../providers/teams_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../providers/tickets_provider.dart';

lib/screens/tickets/ticket_detail_screen.dart

@@ -4,9 +4,9 @@ import 'package:tasq/utils/app_time.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 
-import '../../models/office.dart';
+import '../../models/office.model.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
-import '../../models/ticket.dart';
+import '../../models/ticket.model.dart';
 import '../../models/ticket_message.dart';
 import '../../providers/notifications_provider.dart';
 import '../../providers/supabase_provider.dart';
@@ -22,6 +22,7 @@ import '../../widgets/responsive_body.dart';
 import '../../widgets/task_assignment_section.dart';
 import '../../widgets/typing_dots.dart';
 import '../../theme/app_surfaces.dart';
+import '../../theme/app_status_colors.dart';
 
 class TicketDetailScreen extends ConsumerStatefulWidget {
   const TicketDetailScreen({super.key, required this.ticketId});
@@ -424,7 +425,9 @@ class _TicketDetailScreenState extends ConsumerState<TicketDetailScreen> {
                                   color: Theme.of(
                                     context,
                                   ).colorScheme.surfaceContainerHighest,
-                                  borderRadius: BorderRadius.circular(16),
+                                  borderRadius: BorderRadius.circular(
+                                    AppSurfaces.of(context).cardRadius,
+                                  ),
                                 ),
                                 child: Row(
                                   mainAxisSize: MainAxisSize.min,
@@ -467,7 +470,9 @@ class _TicketDetailScreenState extends ConsumerState<TicketDetailScreen> {
                               color: Theme.of(context)
                                   .colorScheme
                                   .surfaceContainerHighest,
-                              borderRadius: BorderRadius.circular(28),
+                              borderRadius: BorderRadius.circular(
+                                AppSurfaces.of(context).containerRadius,
+                              ),
                             ),
                             padding: const EdgeInsets.only(
                               left: 16,
@@ -1357,34 +1362,20 @@ class _TicketStatusChip extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final cs = Theme.of(context).colorScheme;
+    final s = AppStatusColors.of(context);
-    final (icon, bg, fg) = switch (status) {
+    final (IconData icon, StatusSwatch swatch) = switch (status) {
-      'pending' => (
+      'pending' => (Icons.hourglass_empty_rounded, s.warning),
-        Icons.hourglass_empty_rounded,
+      'promoted' => (Icons.trending_up_rounded, s.info),
-        cs.secondaryContainer,
+      'closed' => (Icons.lock_rounded, s.success),
-        cs.onSecondaryContainer,
+      _ => (Icons.help_outline_rounded, s.neutral),
-      ),
-      'promoted' => (
-        Icons.trending_up_rounded,
-        cs.primaryContainer,
-        cs.onPrimaryContainer,
-      ),
-      'closed' => (
-        Icons.lock_rounded,
-        cs.tertiaryContainer,
-        cs.onTertiaryContainer,
-      ),
-      _ => (
-        Icons.help_outline_rounded,
-        cs.surfaceContainerHighest,
-        cs.onSurface,
-      ),
     };
+    final bg = swatch.container;
+    final fg = swatch.onContainer;
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
       decoration: BoxDecoration(
         color: bg,
-        borderRadius: BorderRadius.circular(20),
+        borderRadius: BorderRadius.circular(AppSurfaces.of(context).chipRadius),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,

lib/screens/tickets/tickets_list_screen.dart

@@ -3,17 +3,19 @@ import '../../theme/m3_motion.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:tasq/utils/app_time.dart';
 import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
 
-import '../../models/office.dart';
+import '../../models/office.model.dart';
 import '../../widgets/office_picker.dart';
-import '../../models/notification_item.dart';
+import '../../models/notification_item.model.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
-import '../../models/ticket.dart';
+import '../../models/ticket.model.dart';
 import '../../providers/notifications_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../providers/tickets_provider.dart';
 import '../../providers/realtime_controller.dart';
 import '../../providers/typing_provider.dart';
+import '../../providers/user_offices_provider.dart';
 import '../../widgets/mono_text.dart';
 import '../../widgets/reconnect_overlay.dart';
 import 'package:skeletonizer/skeletonizer.dart';
@@ -21,10 +23,12 @@ import '../../widgets/responsive_body.dart';
 import '../../widgets/tasq_adaptive_list.dart';
 import '../../widgets/typing_dots.dart';
 import '../../theme/app_surfaces.dart';
+import '../../theme/app_status_colors.dart';
 import '../../utils/snackbar.dart';
 import '../../widgets/app_breakpoints.dart';
 import '../../widgets/app_page_header.dart';
 import '../../widgets/app_state_view.dart';
+import '../../widgets/app_status_summary.dart';
 import '../../widgets/sync_pending_badge.dart';
 
 class TicketsListScreen extends ConsumerStatefulWidget {
@@ -288,7 +292,10 @@ class _TicketsListScreenState extends ConsumerState<TicketsListScreen> {
                     TasQColumn<Ticket>(
                       header: 'Ticket ID',
                       technical: true,
-                      cellBuilder: (context, ticket) => Text(ticket.id),
+                      cellBuilder: (context, ticket) => Tooltip(
+                        message: ticket.id,
+                        child: Text(_shortId(ticket.id)),
+                      ),
                     ),
                     TasQColumn<Ticket>(
                       header: 'Subject',
@@ -362,7 +369,7 @@ class _TicketsListScreenState extends ConsumerState<TicketsListScreen> {
                               const SizedBox(height: 2),
                               Text('Filed by: $assigned'),
                               const SizedBox(height: 4),
-                              MonoText('ID ${ticket.id}'),
+                              MonoText('ID ${_shortId(ticket.id)}'),
                               const SizedBox(height: 2),
                               Text(_formatTimestamp(ticket.createdAt)),
                             ],
@@ -450,6 +457,17 @@ class _TicketsListScreenState extends ConsumerState<TicketsListScreen> {
       return Consumer(
         builder: (context, ref, _) {
           final officesAsync = ref.watch(officesProvider);
+          final profile = ref.watch(currentProfileProvider).valueOrNull;
+          final isGlobal = const {
+            'admin',
+            'programmer',
+            'dispatcher',
+            'it_staff',
+          }.contains(profile?.role);
+          final myOfficeIds = {
+            for (final a in ref.watch(userOfficesProvider).valueOrNull ?? [])
+              if (a.userId == profile?.id) a.officeId,
+          };
           return Column(
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -468,8 +486,18 @@ class _TicketsListScreenState extends ConsumerState<TicketsListScreen> {
               ),
               const SizedBox(height: 12),
               officesAsync.when(
-                data: (offices) {
+                data: (allOffices) {
-                  if (offices.isEmpty) return const Text('No offices assigned.');
+                  // ticketsProvider only shows non-global users their own
+                  // offices' tickets, so only offer those offices here —
+                  // otherwise the new ticket vanishes from the filer's list.
+                  final offices = isGlobal
+                      ? allOffices
+                      : allOffices
+                            .where((o) => myOfficeIds.contains(o.id))
+                            .toList();
+                  if (offices.isEmpty) {
+                    return const Text('No offices assigned.');
+                  }
                   final officesSorted = List<Office>.from(offices)
                     ..sort((a, b) => a.name.toLowerCase().compareTo(b.name.toLowerCase()));
                   return OfficeSelectorField(
@@ -688,78 +716,33 @@ class _StatusSummaryRow extends StatelessWidget {
     final entries = counts.entries.toList()
       ..sort((a, b) => a.key.compareTo(b.key));
 
-    return SingleChildScrollView(
+    return AppStatusSummaryRow(
-      scrollDirection: Axis.horizontal,
+      items: [
-      child: Row(
+        for (final e in entries)
-        children: [
+          AppStatusSummaryItem(
-          for (int i = 0; i < entries.length; i++) ...[
+            label: e.key.replaceAll('_', ' '),
-            if (i > 0) const SizedBox(width: 8),
+            count: e.value,
-            _StatusSummaryCard(
+            kind: _ticketStatusKind(e.key),
-              status: entries[i].key,
-              count: entries[i].value,
           ),
       ],
-        ],
-      ),
     );
   }
 }
 
-class _StatusSummaryCard extends StatelessWidget {
+/// Maps a ticket status to a semantic [StatusKind] so its color carries meaning
-  const _StatusSummaryCard({required this.status, required this.count});
+/// (red=critical, amber=pending, blue=promoted/escalated, green=closed).
-
+StatusKind _ticketStatusKind(String status) => switch (status) {
-  final String status;
+  'critical' => StatusKind.danger,
-  final int count;
+  'pending' => StatusKind.warning,
-
+  'promoted' => StatusKind.info,
-  @override
+  'closed' => StatusKind.success,
-  Widget build(BuildContext context) {
+  _ => StatusKind.neutral,
-    final scheme = Theme.of(context).colorScheme;
-    final background = switch (status) {
-      'critical' => scheme.errorContainer,
-      'pending' => scheme.tertiaryContainer,
-      'promoted' => scheme.secondaryContainer,
-      'closed' => scheme.primaryContainer,
-      _ => scheme.surfaceContainerHigh,
 };
-    final foreground = switch (status) {
-      'critical' => scheme.onErrorContainer,
-      'pending' => scheme.onTertiaryContainer,
-      'promoted' => scheme.onSecondaryContainer,
-      'closed' => scheme.onPrimaryContainer,
-      _ => scheme.onSurfaceVariant,
-    };
-    final label = status.replaceAll('_', ' ').toUpperCase();
 
-    return Material(
+/// First 8 chars of the UUID, like a short git hash; the full id is in the
-      color: background,
+/// tooltip. Tickets have no human-friendly number.
-      borderRadius: BorderRadius.circular(20),
+String _shortId(String id) =>
-      child: Padding(
+    id.length > 8 ? id.substring(0, 8).toUpperCase() : id;
-        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Text(
-              label,
-              style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                color: foreground,
-                fontWeight: FontWeight.w600,
-                letterSpacing: 0.4,
-              ),
-            ),
-            const SizedBox(width: 6),
-            Text(
-              count.toString(),
-              style: Theme.of(context).textTheme.labelLarge?.copyWith(
-                color: foreground,
-                fontWeight: FontWeight.w700,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
 
 String _assignedAgent(Map<String, Profile> profileById, String? userId) {
   if (userId == null || userId.isEmpty) {
@@ -772,14 +755,8 @@ String _assignedAgent(Map<String, Profile> profileById, String? userId) {
   return profile.fullName.isNotEmpty ? profile.fullName : profile.id;
 }
 
-String _formatTimestamp(DateTime value) {
+String _formatTimestamp(DateTime value) =>
-  final year = value.year.toString().padLeft(4, '0');
+    DateFormat('yyyy-MM-dd HH:mm').format(value);
-  final month = value.month.toString().padLeft(2, '0');
-  final day = value.day.toString().padLeft(2, '0');
-  final hour = value.hour.toString().padLeft(2, '0');
-  final minute = value.minute.toString().padLeft(2, '0');
-  return '$year-$month-$day $hour:$minute';
-}
 
 class _StatusBadge extends StatelessWidget {
   const _StatusBadge({required this.status});
@@ -788,21 +765,9 @@ class _StatusBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final scheme = Theme.of(context).colorScheme;
+    final swatch = AppStatusColors.of(context).byKind(_ticketStatusKind(status));
-    final background = switch (status) {
+    final background = swatch.container;
-      'critical' => scheme.errorContainer,
+    final foreground = swatch.onContainer;
-      'pending' => scheme.tertiaryContainer,
-      'promoted' => scheme.secondaryContainer,
-      'closed' => scheme.primaryContainer,
-      _ => scheme.surfaceContainerHighest,
-    };
-    final foreground = switch (status) {
-      'critical' => scheme.onErrorContainer,
-      'pending' => scheme.onTertiaryContainer,
-      'promoted' => scheme.onSecondaryContainer,
-      'closed' => scheme.onPrimaryContainer,
-      _ => scheme.onSurfaceVariant,
-    };
 
     return Badge(
       backgroundColor: background,

lib/screens/whereabouts/whereabouts_screen.dart

@@ -4,14 +4,15 @@ import 'package:flutter_map/flutter_map.dart';
 import 'package:latlong2/latlong.dart' show LatLng;
 
 import '../../models/app_settings.dart';
-import '../../models/attendance_log.dart';
+import '../../models/attendance_log.model.dart';
 import '../../models/live_position.dart';
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
 import '../../providers/attendance_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../providers/whereabouts_provider.dart';
 import '../../providers/workforce_provider.dart';
 import '../../theme/app_surfaces.dart';
+import '../../theme/app_status_colors.dart';
 import '../../widgets/app_page_header.dart';
 import '../../widgets/responsive_body.dart';
 import '../../utils/app_time.dart';
@@ -232,8 +233,10 @@ class _WhereaboutsMap extends StatelessWidget {
             polygons: [
               Polygon(
                 points: points,
-                color: Colors.blue.withValues(alpha: 0.1),
+                color: Theme.of(
-                borderColor: Colors.blue,
+                  context,
+                ).colorScheme.primary.withValues(alpha: 0.12),
+                borderColor: Theme.of(context).colorScheme.primary,
                 borderStrokeWidth: 2.0,
               ),
             ],
@@ -313,11 +316,20 @@ class _StaffLegendPanel extends StatelessWidget {
                   ).textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w700),
                 ),
                 const Spacer(),
-                _RoleBadge(color: Colors.blue.shade700, label: 'Admin'),
+                _RoleBadge(
+                  color: Theme.of(context).colorScheme.primary,
+                  label: 'Admin',
+                ),
                 const SizedBox(width: 12),
-                _RoleBadge(color: Colors.green.shade700, label: 'IT Staff'),
+                _RoleBadge(
+                  color: Theme.of(context).colorScheme.secondary,
+                  label: 'IT Staff',
+                ),
                 const SizedBox(width: 12),
-                _RoleBadge(color: Colors.orange.shade700, label: 'Dispatcher'),
+                _RoleBadge(
+                  color: Theme.of(context).colorScheme.tertiary,
+                  label: 'Dispatcher',
+                ),
               ],
             ),
           ),
@@ -416,6 +428,7 @@ class _StaffLegendTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final cs = Theme.of(context).colorScheme;
+    final status = AppStatusColors.of(context);
     final roleColor = _roleColor(profile.role, cs);
 
     final hasPosition = position != null;
@@ -445,30 +458,30 @@ class _StaffLegendTile extends StatelessWidget {
             ? 'In premise (Tracking off) \u00b7 $timeLabel'
             : 'Outside premise (Tracking off) \u00b7 $timeLabel';
         statusColor = isStale
-            ? Colors.grey
+            ? status.neutral.color
-            : (isInPremise ? Colors.green : Colors.grey);
+            : (isInPremise ? status.success.color : status.neutral.color);
       } else if (inferredInPremise) {
         statusText = 'In premise (Checked in)';
-        statusColor = Colors.green;
+        statusColor = status.success.color;
       } else {
         statusText = 'Tracking off';
-        statusColor = Colors.grey;
+        statusColor = status.neutral.color;
       }
     } else if (isStale && hasPosition) {
       final timeLabel = _timeAgo(position!.updatedAt);
       statusText = isInPremise
           ? 'Last seen in premise \u00b7 $timeLabel'
           : 'Last seen outside premise \u00b7 $timeLabel';
-      statusColor = Colors.grey;
+      statusColor = status.neutral.color;
     } else if (isActive) {
       statusText = 'In premise \u00b7 ${_timeAgo(position!.updatedAt)}';
-      statusColor = Colors.green;
+      statusColor = status.success.color;
     } else if (hasPosition) {
       statusText = 'Outside premise \u00b7 ${_timeAgo(position!.updatedAt)}';
-      statusColor = Colors.grey;
+      statusColor = status.neutral.color;
     } else {
       statusText = 'No location data';
-      statusColor = Colors.grey;
+      statusColor = status.neutral.color;
     }
 
     final IconData statusIcon;

lib/screens/workforce/rotation_settings_dialog.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import '../../models/profile.dart';
+import '../../models/profile.model.dart';
 import '../../models/rotation_config.dart';
 import '../../providers/profile_provider.dart';
 import '../../providers/rotation_config_provider.dart';
@@ -287,9 +287,8 @@ class _RotationOrderTabState extends ConsumerState<_RotationOrderTab> {
           child: ReorderableListView.builder(
             padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
             itemCount: order.length,
-            onReorder: (oldIndex, newIndex) {
+            onReorderItem: (oldIndex, newIndex) {
               setState(() {
-                if (newIndex > oldIndex) newIndex--;
                 final item = order.removeAt(oldIndex);
                 order.insert(newIndex, item);
               });
@@ -422,9 +421,8 @@ class _FridayAmTabState extends ConsumerState<_FridayAmTab> {
             child: ReorderableListView.builder(
               padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
               itemCount: order.length,
-              onReorder: (oldIndex, newIndex) {
+              onReorderItem: (oldIndex, newIndex) {
                 setState(() {
-                  if (newIndex > oldIndex) newIndex--;
                   final item = order.removeAt(oldIndex);
                   order.insert(newIndex, item);
                 });
@@ -1394,7 +1392,9 @@ class _HolidaySettingsTabState extends ConsumerState<_HolidaySettingsTab> {
                   child: const Text('Cancel'),
                 ),
                 FilledButton(
-                  onPressed: () => Navigator.of(dialogContext).pop(true),
+                  onPressed: name.trim().isEmpty
+                      ? null
+                      : () => Navigator.of(dialogContext).pop(true),
                   child: const Text('Add'),
                 ),
               ],
@@ -1404,7 +1404,7 @@ class _HolidaySettingsTabState extends ConsumerState<_HolidaySettingsTab> {
       },
     );
 
-    if (confirmed != true || name.isEmpty) return;
+    if (confirmed != true || name.trim().isEmpty) return;
 
     setState(() {
       _holidays = [