From fa2ae6951b4b885655f0bd3b0f18bea2a04fc7de Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Mon, 10 Nov 2025 22:23:35 +0700
Subject: [PATCH] fix: Refine Store Details UX and currency display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Changes

### 1. Split Store Identity and Brand Cards ✅

**Before:** Single tall "Store Identity" card
**After:** Two focused cards

**Store Identity Card:**
- Store name
- Store tagline
- Contact email
- Customer support email
- Store phone

**Brand Card:**
- Store logo
- Store icon
- Brand colors (Primary, Accent, Error)
- Reset to default button

**Result:** Better organization, easier to scan

---

### 2. Fix Currency Symbol Fallback ✅

**Issue:** When currency has no symbol (like AUD), showed € instead
**Screenshot:** Preview showed "€1.234.568" for Australian dollar

**Fix:**
```typescript
// Get currency symbol from currencies data, fallback to currency code
const currencyInfo = currencies.find((c: any) => c.code === settings.currency);
let symbol = settings.currency; // Default to currency code

if (currencyInfo?.symbol && !currencyInfo.symbol.includes('&#')) {
  // Use symbol only if it exists and doesn't contain HTML entities
  symbol = currencyInfo.symbol;
}
```

**Result:**
- AUD → Shows "AUD1234" instead of "€1234"
- IDR → Shows "Rp1234" (has symbol)
- USD → Shows "$1234" (has symbol)
- Currencies without symbols → Show currency code

---

### 3. Move Overview Card to First Position ✅

**Before:** Overview card at the bottom
**After:** Overview card at the top

**Rationale:**
- Quick glance at store location, currency, timezone
- Sets context for the rest of the settings
- Industry standard (Shopify shows overview first)

**Card Content:**
```
📍 Store Location: Australia
Currency: Australian dollar • Timezone: Australia/Sydney
```

---

## Final Card Order

1. **Store Overview** (new position)
2. **Store Identity** (name, tagline, contacts)
3. **Brand** (logo, icon, colors)
4. **Store Address**
5. **Currency & Formatting**
6. **Standards & Formats**

**Result:** Logical flow, better UX, professional layout
---
 admin-spa/src/routes/Settings/Store.tsx | 164 +++++++++++++-----------
 1 file changed, 87 insertions(+), 77 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Store.tsx b/admin-spa/src/routes/Settings/Store.tsx
index 34d80be..fdca450 100644
--- a/admin-spa/src/routes/Settings/Store.tsx
+++ b/admin-spa/src/routes/Settings/Store.tsx
@@ -200,7 +200,14 @@ export default function StoreDetailsPage() {
       .replace('.', settings.decimalSep)
       .replace(/\B(?=(\d{3})+(?!\d))/g, settings.thousandSep);
     
-    const symbol = settings.currency === 'IDR' ? 'Rp' : settings.currency === 'USD' ? '$' : '€';
+    // Get currency symbol from currencies data, fallback to currency code
+    const currencyInfo = currencies.find((c: any) => c.code === settings.currency);
+    let symbol = settings.currency; // Default to currency code
+    
+    if (currencyInfo?.symbol && !currencyInfo.symbol.includes('&#')) {
+      // Use symbol only if it exists and doesn't contain HTML entities
+      symbol = currencyInfo.symbol;
+    }
     
     switch (settings.currencyPosition) {
       case 'left':
@@ -223,6 +230,26 @@ export default function StoreDetailsPage() {
       onSave={handleSave}
       isLoading={isLoading}
     >
+      {/* Store Overview */}
+      <div className="bg-primary/10 border border-primary/20 rounded-lg p-4">
+        {(() => {
+          const currencyFlag = flagsData.find((f: any) => f.code === settings.currency);
+          const currencyInfo = currencies.find((c: any) => c.code === settings.currency);
+          const countryName = currencyFlag?.country || settings.country;
+          
+          return (
+            <>
+              <p className="text-sm font-medium">
+                📍 Store Location: {countryName}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Currency: {currencyInfo?.name || settings.currency} • Timezone: {settings.timezone}
+              </p>
+            </>
+          );
+        })()}
+      </div>
+
       {/* Store Identity */}
       <SettingsCard
         title="Store Identity"
@@ -237,6 +264,19 @@ export default function StoreDetailsPage() {
           />
         </SettingsSection>
 
+        <SettingsSection
+          label="Store tagline"
+          description="A short tagline or slogan for your store"
+          htmlFor="storeTagline"
+        >
+          <Input
+            id="storeTagline"
+            value={settings.storeTagline}
+            onChange={(e) => updateSetting('storeTagline', e.target.value)}
+            placeholder="Quality products, delivered fast"
+          />
+        </SettingsSection>
+
         <SettingsSection
           label="Contact email"
           description="Customers will use this email to contact you"
@@ -278,20 +318,13 @@ export default function StoreDetailsPage() {
             placeholder="+62 812 3456 7890"
           />
         </SettingsSection>
+      </SettingsCard>
 
-        <SettingsSection
-          label="Store tagline"
-          description="A short tagline or slogan for your store"
-          htmlFor="storeTagline"
-        >
-          <Input
-            id="storeTagline"
-            value={settings.storeTagline}
-            onChange={(e) => updateSetting('storeTagline', e.target.value)}
-            placeholder="Quality products, delivered fast"
-          />
-        </SettingsSection>
-
+      {/* Brand */}
+      <SettingsCard
+        title="Brand"
+        description="Logo, icon, and colors for your store"
+      >
         <SettingsSection label="Store logo" description="Recommended: 200x60px PNG with transparent background">
           <ImageUpload
             value={settings.storeLogo}
@@ -309,53 +342,50 @@ export default function StoreDetailsPage() {
             maxSize={1}
           />
         </SettingsSection>
-      </SettingsCard>
 
-      {/* Brand Colors */}
-      <SettingsCard
-        title="Brand Colors"
-        description="Customize your admin interface colors"
-      >
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <ColorPicker
-            label="Primary Color"
-            description="Main brand color"
-            value={settings.primaryColor}
-            onChange={(color) => updateSetting('primaryColor', color)}
-          />
+        <div className="pt-4 border-t">
+          <h4 className="text-sm font-medium mb-4">Brand Colors</h4>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <ColorPicker
+              label="Primary Color"
+              description="Main brand color"
+              value={settings.primaryColor}
+              onChange={(color) => updateSetting('primaryColor', color)}
+            />
 
-          <ColorPicker
-            label="Accent Color"
-            description="Success and highlights"
-            value={settings.accentColor}
-            onChange={(color) => updateSetting('accentColor', color)}
-          />
+            <ColorPicker
+              label="Accent Color"
+              description="Success and highlights"
+              value={settings.accentColor}
+              onChange={(color) => updateSetting('accentColor', color)}
+            />
 
-          <ColorPicker
-            label="Error Color"
-            description="Errors and warnings"
-            value={settings.errorColor}
-            onChange={(color) => updateSetting('errorColor', color)}
-          />
-        </div>
+            <ColorPicker
+              label="Error Color"
+              description="Errors and warnings"
+              value={settings.errorColor}
+              onChange={(color) => updateSetting('errorColor', color)}
+            />
+          </div>
 
-        <div className="flex items-center gap-2 mt-4 pt-4 border-t">
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              updateSetting('primaryColor', '#3b82f6');
-              updateSetting('accentColor', '#10b981');
-              updateSetting('errorColor', '#ef4444');
-              toast.success('Colors reset to default');
-            }}
-          >
-            Reset to Default
-          </Button>
-          <p className="text-sm text-muted-foreground">
-            Changes apply after saving
-          </p>
+          <div className="flex items-center gap-2 mt-4">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                updateSetting('primaryColor', '#3b82f6');
+                updateSetting('accentColor', '#10b981');
+                updateSetting('errorColor', '#ef4444');
+                toast.success('Colors reset to default');
+              }}
+            >
+              Reset to Default
+            </Button>
+            <p className="text-sm text-muted-foreground">
+              Changes apply after saving
+            </p>
+          </div>
         </div>
       </SettingsCard>
 
@@ -562,26 +592,6 @@ export default function StoreDetailsPage() {
           </SettingsSection>
         </div>
       </SettingsCard>
-
-      {/* Summary Card - Professional, No Flag */}
-      <div className="bg-primary/10 border border-primary/20 rounded-lg p-4">
-        {(() => {
-          const currencyFlag = flagsData.find((f: any) => f.code === settings.currency);
-          const currencyInfo = currencies.find((c: any) => c.code === settings.currency);
-          const countryName = currencyFlag?.country || settings.country;
-          
-          return (
-            <>
-              <p className="text-sm font-medium">
-                📍 Store Location: {countryName}
-              </p>
-              <p className="text-sm text-muted-foreground mt-1">
-                Currency: {currencyInfo?.name || settings.currency} • Timezone: {settings.timezone}
-              </p>
-            </>
-          );
-        })()}
-      </div>
     </SettingsLayout>
   );
 }