From 2a679ffd15e2e01a54427e3d461482ffa9778f22 Mon Sep 17 00:00:00 2001 From: dwindown Date: Thu, 6 Nov 2025 11:35:32 +0700 Subject: [PATCH] fix: Submenu active state + currency symbols + flags integration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Fixed Submenu Active State ✅ Problem: First submenu always active due to pathname.startsWith() - /dashboard matches /dashboard/analytics - Both items show as active Solution: Use exact match instead - const isActive = pathname === it.path - Only clicked item shows as active Files: DashboardSubmenuBar.tsx, SubmenuBar.tsx 2. Fixed Currency Symbol Display ✅ Problem: HTML entities showing (ءإ) Solution: Use currency code when symbol has HTML entities Before: United Arab Emirates dirham (ءإ) After: United Arab Emirates dirham (AED) Logic: const displaySymbol = (!currency.symbol || currency.symbol.includes('&#')) ? currency.code : currency.symbol; 3. Integrated Flags.json ✅ A. Moved flags.json to admin-spa/src/data/ B. Added flag support to SearchableSelect component - New icon prop in Option interface - Displays flag before label in trigger - Displays flag before label in dropdown C. Currency select now shows flags - Flag icon next to each currency - Visual country identification - Better UX for currency selection D. Dynamic store summary with flag Before: 🇮🇩 Your store is located in Indonesia After: [FLAG] Your store is located in Indonesia - Flag based on selected currency - Country name from flags.json - Currency name (not just code) - Dynamic updates when currency changes Benefits: ✅ Clear submenu navigation ✅ Readable currency symbols ✅ Visual country flags ✅ Better currency selection UX ✅ Dynamic store location display Files Modified: - DashboardSubmenuBar.tsx: Exact match for active state - SubmenuBar.tsx: Exact match for active state - Store.tsx: Currency symbol fix + flags integration - searchable-select.tsx: Icon support - flags.json: Moved to admin-spa/src/data/ --- .../components/nav/DashboardSubmenuBar.tsx | 11 +- admin-spa/src/components/nav/SubmenuBar.tsx | 5 +- .../src/components/ui/searchable-select.tsx | 16 +- admin-spa/src/data/flags.json | 1099 +++++++++++++++++ admin-spa/src/routes/Settings/Payments.tsx | 20 +- admin-spa/src/routes/Settings/Store.tsx | 57 +- .../Settings/components/SettingsLayout.tsx | 4 +- currencies.json | 1 + flags.json | 1099 +++++++++++++++++ 9 files changed, 2276 insertions(+), 36 deletions(-) create mode 100644 admin-spa/src/data/flags.json create mode 100644 currencies.json create mode 100644 flags.json diff --git a/admin-spa/src/components/nav/DashboardSubmenuBar.tsx b/admin-spa/src/components/nav/DashboardSubmenuBar.tsx index fb7da7a..7bbfb17 100644 --- a/admin-spa/src/components/nav/DashboardSubmenuBar.tsx +++ b/admin-spa/src/components/nav/DashboardSubmenuBar.tsx @@ -30,14 +30,13 @@ export default function DashboardSubmenuBar({ items = [], fullscreen = false }: return (
-
+
{/* Submenu Links */}
{items.map((it) => { const key = `${it.label}-${it.path || it.href}`; - const isActive = !!it.path && ( - it.exact ? pathname === it.path : pathname.startsWith(it.path) - ); + // Fix: Always use exact match to prevent first submenu from being always active + const isActive = !!it.path && pathname === it.path; const cls = [ 'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 border text-sm whitespace-nowrap', 'focus:outline-none focus:ring-0 focus:shadow-none', @@ -65,9 +64,9 @@ export default function DashboardSubmenuBar({ items = [], fullscreen = false }:
{/* Period Selector, Refresh & Dummy Toggle */} -
+