fix: resolve #167 #168 #169 #170 (flex/block conflict, color-only badges, hydration flash, logout race)

[Darkdruce]

Summary

Fixes four independent bugs and accessibility issues reported in issues #167–#170.

⚠️ Note: this PR contains implementation only — no automated tests have been added.

---

Changes

#167 — Conflicting flex/block classes on scope checkboxes

File: src/app/dashboard/settings/page.tsx

Removed the redundant block Tailwind class from the scope-selection <label> elements. flex is the correct and only display value; having both caused unpredictable cascade behaviour across browsers and Tailwind builds.

---

#168 — Status conveyed by color alone (WCAG 1.4.1)

Files: src/lib/utils.ts, src/app/dashboard/settlements/page.tsx, src/app/dashboard/admin/settlements/page.tsx

• Added a STATUS_ICONS export to utils.ts — a Record<string, LucideIcon> with a unique, distinguishing icon for every status value (Clock, AlertCircle, CheckCircle, RefreshCw, XCircle, HelpCircle).
• Updated every status badge in settlements/page.tsx (mobile card + table row) to render the icon alongside the text label.
• Consolidated the local statusIcons map in admin/settlements/page.tsx onto the shared STATUS_ICONS, giving all three surfaces a consistent icon set.

---

#169 — Blank page flash / premature logout on hard refresh

Files: src/lib/store.ts, src/app/dashboard/layout.tsx

• Added a hasHydrated: boolean flag to the Zustand auth store, set to true inside the persist middleware's onRehydrateStorage callback (the only reliable point at which localStorage has been read).
• The dashboard layout now renders a centered spinner until hasHydrated === true, and only then evaluates the auth guard. This eliminates both the blank flash and the edge-case premature redirect that could occur if token was read as null before hydration completed.

---

#170 — Duplicate localStorage write paths on login/logout

File: src/lib/store.ts

Removed the explicit localStorage.setItem('access_token', token) in setAuth and localStorage.removeItem('access_token') in logout. The Zustand persist middleware already owns a single, consistent write path via the dupdub-auth key; the manual calls created a second, decoupled key that could transiently disagree with the store state immediately after logout.

---

What was verified

• The build failures present on main pre-date this branch (unrelated metadata/generateMetadata use client conflicts and a JSX syntax error in payments/page.tsx).

Closes #167
Closes #168
Closes #169
Closes #170

[drips-wave]

@Darkdruce Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits