dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
376 Commits 1 Branch 1 Tag
cc672886144215db913a59038fa28bdc02a62bac
Commit Graph

14 Commits

Author SHA1 Message Date
Dwindi Ramadhana
cc67288614 fix: Submenu active states + Guest wishlist frontend check 
Submenu Active State Fix:
Problem: Dashboard Overview never active, All Orders/Products/Customers always active
Root Cause: Submenu path matching didn't respect 'exact' flag from backend
Solution: Added proper exact flag handling in SubmenuBar component
- If item.exact = true: only match exact path (for Overview at /dashboard)
- If item.exact = false/undefined: match path + sub-paths (for All Orders at /orders)
Result: Submenu items now show correct active state ✅

Guest Wishlist Frontend Fix:
Problem: Guest wishlist enabled in backend but frontend blocked with login prompt
Root Cause: useWishlist hook had frontend login checks before API calls
Solution: Removed frontend login checks from addToWishlist and removeFromWishlist
- Backend already enforces permission via check_permission() based on enable_guest_wishlist
- Frontend now lets backend handle authorization
- API returns proper error if guest wishlist disabled
Result: Guests can add/remove wishlist items when setting enabled ✅

Files Modified (2):
- admin-spa/src/components/nav/SubmenuBar.tsx (exact flag handling)
- customer-spa/src/hooks/useWishlist.ts (removed login checks)
- admin-spa/dist/app.js + customer-spa/dist/app.js (rebuilt)

Both submenu and guest wishlist issues resolved!
 2025-12-26 22:50:25 +07:00
dwindown
97e24ae408 feat(ui): Make cards linkable and hide submenu on detail pages 
Improved mobile UX matching Orders/Products pattern

Issue 1: Coupons and Customers cards not linkable
❌ Cards had separate checkbox and edit button
❌ Inconsistent with Orders/Products beautiful card design
❌ Less intuitive UX (extra tap required)

Issue 2: Submenu showing on detail/new/edit pages
❌ Submenu tabs visible on mobile detail/new/edit pages
❌ Distracting and annoying (user feedback)
❌ Redundant (page has own tabs + back button)

Changes Made:

1. Created CouponCard Component:
✅ Linkable card matching OrderCard/ProductCard pattern
✅ Whole card is tappable (better mobile UX)
✅ Checkbox with stopPropagation for selection
✅ Chevron icon indicating it's tappable
✅ Beautiful layout: Badge + Description + Usage + Amount
✅ Active scale animation on tap
✅ Hover effects

2. Updated Coupons/index.tsx:
✅ Replaced old card structure with CouponCard
✅ Fixed desktop edit link: /coupons/${id} → /coupons/${id}/edit
✅ Changed spacing: space-y-2 → space-y-3 (consistent with Orders)
✅ Cleaner, more maintainable code

3. Updated Customers/index.tsx:
✅ Made cards linkable (whole card is Link)
✅ Added ChevronRight icon
✅ Checkbox with stopPropagation
✅ Better layout: Name + Email + Stats + Total Spent
✅ Changed spacing: space-y-2 → space-y-3
✅ Matches Orders/Products card design

4. Updated SubmenuBar.tsx:
✅ Hide on mobile for detail/new/edit pages
✅ Show on desktop (still useful for navigation)
✅ Regex pattern: /\/(orders|products|coupons|customers)\/(?:new|\d+(?:\/edit)?)$/
✅ Applied via: hidden md:block class

Card Pattern Comparison:

Before (Coupons/Customers):

After (All modules):

Submenu Behavior:

Mobile:
- Index pages: ✅ Show submenu [All | New]
- Detail/New/Edit: ❌ Hide submenu (has own tabs + back button)

Desktop:
- All pages: ✅ Show submenu (useful for quick navigation)

Benefits:
✅ Consistent UX across all modules
✅ Better mobile experience (fewer taps)
✅ Less visual clutter on detail pages
✅ Cleaner, more intuitive navigation
✅ Matches industry standards (Shopify, WooCommerce)

Result: Mobile UX now matches the beautiful Orders/Products design!
 2025-11-20 23:34:37 +07:00
dwindown
a42ae0d689 fix: Match Customer Events styling and fix submenu active state 
## 🐛 Bug Fixes

### Issue #1: Customer Events Styling Inconsistency ✅
**Customer/Events.tsx:**
- ✅ Added `p-3 rounded-lg border bg-card` to channel rows
- ✅ Added `p-2 rounded-lg` with conditional background to icons
- ✅ Changed Badge variant from "outline" to "secondary"
- ✅ Changed "Recipient:" to "Send to:" format
- ✅ Now matches Staff Events styling exactly

### Issue #2: Submenu Active State ✅
**SubmenuBar.tsx:**
- ✅ Fixed active state detection for sub-pages
- ✅ Changed from exact match to `startsWith` check
- ✅ Now highlights "Notifications" when on /staff or /customer pages
- ✅ Pattern: `pathname === it.path || pathname.startsWith(it.path + "/")`

### Issue #3: Customer Channels Toggles ✅
- Already correct! Customer channels show "Enabled" text without toggles
- This is intentional - customers cannot disable core channels from admin

### Issue #4: WooCommerce Template Integration 📋
**Status:** Documented as future enhancement
**Reason:** Requires deep WooCommerce integration
**Current:** Uses hardcoded default templates
**Future:** Load actual WooCommerce email templates

---

**Result:** UI consistency fixed, navigation working correctly! 🎉
 2025-11-11 21:04:48 +07:00
dwindown
4746834a82 docs: Audit and cleanup documentation 
## Task 1: Translation Support Audit ✅
- Audited all settings pages for translation support
- Found 3 pages missing `__` function: Store, Payments, Developer
- Most pages already have proper i18n implementation
- Action: Add translation support in next iteration

## Task 2: Documentation Cleanup ✅

### Created
- DOCS_AUDIT_REPORT.md - Comprehensive audit of 36 MD files
- TASKS_SUMMARY.md - Current tasks and progress tracking

### Deleted (12 obsolete docs)
Removed completed/superseded documentation:
- CUSTOMER_SETTINGS_404_FIX.md - Bug fixed
- MENU_FIX_SUMMARY.md - Menu implemented
- DASHBOARD_TWEAKS_TODO.md - Dashboard complete
- DASHBOARD_PLAN.md - Dashboard implemented
- SPA_ADMIN_MENU_PLAN.md - Menu implemented
- STANDALONE_ADMIN_SETUP.md - Standalone complete
- STANDALONE_MODE_SUMMARY.md - Duplicate doc
- SETTINGS_PAGES_PLAN.md - Superseded by V2
- SETTINGS_PAGES_PLAN_V2.md - Settings implemented
- SETTINGS_TREE_PLAN.md - Navigation implemented
- SETTINGS_PLACEMENT_STRATEGY.md - Strategy finalized
- TAX_NOTIFICATIONS_PLAN.md - Merged into notification strategy

### Result
- **Before:** 36 documents
- **After:** 24 documents
- **Reduction:** 33% fewer docs
- **Benefit:** Clearer focus, easier navigation

### Remaining Docs
- 15 essential docs (core architecture, guides)
- 9 docs to consolidate later (low priority)

## Task 3: Notification System - Ready
- Read NOTIFICATION_STRATEGY.md
- Created implementation plan in TASKS_SUMMARY.md
- Ready to start Phase 1 implementation

---

**Next:** Implement notification core framework
 2025-11-11 11:59:52 +07:00
dwindown
9c5bdebf6f fix: Complete UI/UX polish - all 7 issues resolved 
## ✅ Issue 1: Customers Submenu Missing in WP-Admin
**Problem:** Tax and Customer submenus only visible in standalone mode
**Root Cause:** PHP navigation registry did not include Customers
**Fixed:** Added Customers to NavigationRegistry.php settings children
**Result:** Customers submenu now shows in all modes

## ✅ Issue 2: App Logo/Title in Topbar
**Problem:** Should show logo → store name → "WooNooW" fallback
**Fixed:** Header component now:
- Fetches branding from /store/branding endpoint
- Shows logo image if available
- Falls back to store name text
- Updates on store settings change event
**Result:** Proper branding hierarchy in app header

## ✅ Issue 3: Zone Card Header Density on Mobile
**Problem:** "Indonesia Addons" row with 3 icons too cramped on mobile
**Fixed:** Shipping.tsx zone card header:
- Reduced gap from gap-3 to gap-2/gap-1 on mobile
- Smaller font size on mobile (text-sm md:text-lg)
- Added min-w-0 for proper text truncation
- flex-shrink-0 on icon buttons
**Result:** Better mobile spacing and readability

## ✅ Issue 4: Go to WP Admin Button
**Problem:** Should show in standalone mode, not wp-admin
**Fixed:** More page now shows "Go to WP Admin" button:
- Only in standalone mode
- Before Logout button
- Links to /wp-admin
**Result:** Easy access to WP Admin from standalone mode

## ✅ Issue 5: Customer Settings 403 Error
**Problem:** Permission check failing for customer-settings endpoint
**Fixed:** StoreController.php check_permission():
- Added fallback: manage_woocommerce OR manage_options
- Ensures administrators always have access
**Result:** Customer Settings page loads successfully

## ✅ Issue 6: Dark Mode Logo Upload Field
**Problem:** No UI to upload dark mode logo
**Fixed:** Store settings page now has:
- "Store logo (Light mode)" field
- "Store logo (Dark mode)" field (optional)
- Backend support in StoreSettingsProvider
- Full save/load functionality
**Result:** Users can upload separate logos for light/dark modes

## ✅ Issue 7: Login Card Background Too Dark
**Problem:** Login card same color as background in dark mode
**Fixed:** Login.tsx card styling:
- Changed from dark:bg-gray-800 (solid)
- To dark:bg-gray-900/50 (semi-transparent)
- Added backdrop-blur-xl for glass effect
- Added border for definition
**Result:** Login card visually distinct with modern glass effect

---

## Summary

**All 7 Issues Resolved:**
1. ✅ Customers submenu in all modes
2. ✅ Logo/title hierarchy in topbar
3. ✅ Mobile zone card spacing
4. ✅ Go to WP Admin in standalone
5. ✅ Customer Settings permission fix
6. ✅ Dark mode logo upload field
7. ✅ Lighter login card background

**Files Modified:**
- NavigationRegistry.php - Added Customers to nav
- App.tsx - Logo/branding in header
- Shipping.tsx - Mobile spacing
- More/index.tsx - WP Admin button
- StoreController.php - Permission fallback
- Store.tsx - Dark logo field
- StoreSettingsProvider.php - Dark logo backend
- Login.tsx - Card background

**Ready for production!** 🎉
 2025-11-11 09:49:31 +07:00
dwindown
5a4e2bab06 fix: Polish UI/UX across all modes 
## Issue 1: Submenu Hidden in WP-Admin Modes ✅

**Problem:** Tax and Customer submenus visible in standalone but hidden in wp-admin modes

**Root Cause:** Incorrect `top` positioning calculation
- Was: `top-[calc(7rem+32px)]` (112px + 32px = 144px)
- Should be: `top-16` (64px - header height)

**Fixed:**
- `DashboardSubmenuBar.tsx` - Updated positioning
- `SubmenuBar.tsx` - Updated positioning

**Result:** Submenus now visible in all modes ✅

---

## Issue 2: Inconsistent Title in Standalone ✅

**Problem:** Title should prioritize: Logo → Store Name → WooNooW

**Fixed:**
- `StandaloneAdmin.php` - Use `woonoow_store_name` option first
- Falls back to `blogname`, then "WooNooW"

---

## Issue 3: Dense Card Header on Mobile ✅

**Problem:** Card header with title, description, and button too cramped on mobile

**Solution:** Stack vertically on mobile, horizontal on desktop

**Fixed:**
- `SettingsCard.tsx` - Changed from `flex-row` to `flex-col sm:flex-row`
- Button now full width on mobile, auto on desktop

**Result:** Better mobile UX, readable spacing ✅

---

## Issue 4: Missing "Go to WP Admin" Link ✅

**Added:**
- New button in More page (wp-admin modes only)
- Positioned before Exit Fullscreen/Logout
- Uses `ExternalLink` icon
- Links to `/wp-admin/`

---

## Issue 5: Customer Settings 403 Error ⚠️

**Status:** Backend ready, needs testing
- `CustomerSettingsProvider.php` exists and is autoloaded
- REST endpoints registered in `StoreController.php`
- Permission callback uses `manage_woocommerce`

**Next:** Test endpoint directly to verify

---

## Issue 6: Dark Mode Logo Support ✅

**Added:**
- New field: `store_logo_dark`
- Stored in: `woonoow_store_logo_dark` option
- Added to `StoreSettingsProvider.php`:
  - `get_settings()` - Returns dark logo
  - `save_settings()` - Saves dark logo

**Frontend:** Ready for implementation (use `useTheme()` to switch)

---

## Issue 7: Consistent Dark Background ✅

**Problem:** Login and Dashboard use different dark backgrounds
- Login: `dark:from-gray-900 dark:to-gray-800` (pure gray)
- Dashboard: `--background: 222.2 84% 4.9%` (dark blue-gray)

**Solution:** Use design system variables consistently

**Fixed:**
- `Login.tsx` - Changed to `dark:from-background dark:to-background`
- Card background: `dark:bg-card` instead of `dark:bg-gray-800`

**Result:** Consistent dark mode across all screens ✅

---

## Summary

✅ **Fixed 6 issues:**
1. Submenu visibility in all modes
2. Standalone title logic
3. Mobile card header density
4. WP Admin link in More page
5. Dark mode logo backend support
6. Consistent dark background colors

⚠️ **Needs Testing:**
- Customer Settings 403 error (backend ready, verify endpoint)

**Files Modified:**
- `DashboardSubmenuBar.tsx`
- `SubmenuBar.tsx`
- `StandaloneAdmin.php`
- `SettingsCard.tsx`
- `More/index.tsx`
- `StoreSettingsProvider.php`
- `Login.tsx`

**All UI/UX polish complete!** 🎨
 2025-11-11 09:26:06 +07:00
dwindown
e0a236fc64 feat: Modern mobile-first Orders UI redesign 
Implemented complete mobile-first redesign of Orders page with app-like UX.

Problem:
- Desktop table layout on mobile (cramped, not touch-friendly)
- "New order" button redundant with FAB
- Desktop-style filters not mobile-optimized
- Checkbox selection too small for touch
- Old-school pagination

Solution: Full Modern Mobile-First Redesign

New Components Created:

1. OrderCard.tsx
   - Card-based layout for mobile
   - Touch-friendly tap targets
   - Order number + status badge
   - Customer name
   - Items brief
   - Date + total amount
   - Chevron indicator
   - Checkbox for selection
   - Tap card → navigate to detail

2. FilterBottomSheet.tsx
   - Modern bottom sheet UI
   - Drag handle
   - Status filter
   - Date range picker
   - Sort order
   - Active filter count badge
   - Reset + Apply buttons
   - Smooth slide-in animation

3. SearchBar.tsx
   - Search input with icon
   - Filter button with badge
   - Clean, modern design
   - Touch-optimized

Orders Page Redesign:

Mobile Layout:
┌─────────────────────────────────┐
│ [🔍 Search orders...]      [⚙] │ ← Search + Filter
├─────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 📦 #337              💰      │ │ ← Order card
│ │ Processing                   │ │
│ │ Dwindi Ramadhana             │ │
│ │ 2 items · Product A, ...     │ │
│ │ 2 hours ago      Rp64.500    │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 📦 #336              ✓       │ │
│ │ Completed                    │ │
│ │ John Doe                     │ │
│ │ 1 item · Product B           │ │
│ │ Yesterday        Rp125.000   │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ [Previous]  Page 1  [Next]      │
├─────────────────────────────────┤
│ Dashboard Orders Products ...   │
└─────────────────────────────────┘
                            ( + ) ← FAB

Desktop Layout:
- Keeps table view (familiar for desktop users)
- Inline filters at top
- All existing functionality preserved

Features Implemented:

✅ Card-based mobile layout
✅ Search orders (by number, customer, status)
✅ Bottom sheet filters
✅ Active filter count badge
✅ Pull-to-refresh indicator
✅ Bulk selection with sticky action bar
✅ Touch-optimized tap targets
✅ Smooth animations
✅ Empty states with helpful messages
✅ Responsive: cards on mobile, table on desktop
✅ FAB for new order (removed redundant button)
✅ Clean, modern, app-like UX

Mobile-Specific Improvements:

1. No "New order" button at top (use FAB)
2. Search bar replaces desktop filters
3. Filter icon opens bottom sheet
4. Cards instead of cramped table
5. Larger touch targets
6. Sticky bulk action bar
7. Pull-to-refresh support
8. Better empty states

Desktop Unchanged:
- Table layout preserved
- Inline filters
- All existing features work

Result:
✅ Modern, app-like mobile UI
✅ Touch-friendly interactions
✅ Clean, uncluttered design
✅ Fast, responsive
✅ Desktop functionality preserved
✅ Consistent with mobile-first vision

Files Created:
- routes/Orders/components/OrderCard.tsx
- routes/Orders/components/FilterBottomSheet.tsx
- routes/Orders/components/SearchBar.tsx

Files Modified:
- routes/Orders/index.tsx (complete redesign)

The Orders page is now a modern, mobile-first experience! 🎯
 2025-11-08 13:16:19 +07:00
dwindown
b93a873765 fix: Finally fix top-16 gap and add dashboard redirect on exit 
The Real Problem:
After removing contextual headers, SubmenuBar still used headerVisible
logic to calculate top position. This caused the persistent top-16 gap
because it thought a header existed when it did not.

Root Cause Analysis:
1. We removed contextual headers from Dashboard pages ✓
2. But SubmenuBar still had: top-16 when headerVisible=true
3. Header was being tracked but did not exist
4. Result: 64px gap at top (top-16 = 4rem = 64px)

The Solution:
Since we removed ALL contextual headers, submenu should ALWAYS be at
top-0 in fullscreen mode. No conditional logic needed.

Changes Made:

1. SubmenuBar.tsx
   Before:
   const topClass = fullscreen
     ? (headerVisible ? "top-16" : "top-0")  ← Wrong!
     : "top-[calc(7rem+32px)]";

   After:
   const topClass = fullscreen
     ? "top-0"  ← Always top-0, no header exists!
     : "top-[calc(7rem+32px)]";

2. DashboardSubmenuBar.tsx
   Same fix as SubmenuBar

3. App.tsx
   - Removed headerVisible prop from submenu components
   - Removed isHeaderVisible state (no longer needed)
   - Removed onVisibilityChange from Header (no longer tracking)
   - Cleaned up unused scroll detection logic

4. More/index.tsx
   - Added handleExitFullscreen function
   - Exits fullscreen + navigates to dashboard (/)
   - User requested: "redirect member to dashboard overview"

Why This Was Hard:
The issue was not the padding itself, but the LOGIC that calculated it.
We had multiple layers of conditional logic (fullscreen, headerVisible,
standalone) that became inconsistent after removing contextual headers.

The fix required understanding the entire flow:
- No contextual headers → No header exists
- No header → No need to offset submenu
- Submenu always at top-0 in fullscreen

Result:
✅ No top gap - submenu starts at top-0
✅ Exit fullscreen redirects to dashboard
✅ Simplified logic - removed unnecessary tracking
✅ Clean, predictable behavior

Files Modified:
- SubmenuBar.tsx
- DashboardSubmenuBar.tsx
- App.tsx
- More/index.tsx

The top-16 nightmare is finally over! 🎯
 2025-11-06 23:31:07 +07:00
dwindown
87d2704a72 feat: Complete mobile navigation implementation 
Fixed 3 issues and completed FAB implementation:

1. ✅ Dynamic Submenu Top Position
   - Submenu now moves to top-0 when header is hidden
   - Moves back to top-16 when header is visible
   - Smooth transition based on scroll

   Implementation:
   - Added isHeaderVisible state in Shell
   - Header notifies parent via onVisibilityChange callback
   - Submenu receives headerVisible prop
   - Dynamic topClass: headerVisible ? 'top-16' : 'top-0'

2. ✅ Hide Submenu on More Page
   - More page now has no submenu bar
   - Cleaner UI for navigation menu

   Implementation:
   - Added isMorePage check: location.pathname === '/more'
   - Conditionally render submenu: {!isMorePage && (...)}

3. ✅ FAB Working on All Pages
   - Dashboard: Quick Actions (placeholder)
   - Orders: Create Order → /orders/new ✅
   - Products: Add Product → /products/new
   - Customers: Add Customer → /customers/new
   - Coupons: Create Coupon → /coupons/new

   Implementation:
   - Added useFABConfig('orders') to Orders page
   - FAB now visible and functional
   - Clicking navigates to create page

Mobile Navigation Flow:
┌─────────────────────────────────┐
│ App Bar (hides on scroll)       │
├─────────────────────────────────┤
│ Submenu (top-0 when bar hidden) │ ← Dynamic!
├─────────────────────────────────┤
│ Page Header (sticky)            │
├─────────────────────────────────┤
│ Content (scrollable)            │
│                        [+] FAB  │ ← Working!
├─────────────────────────────────┤
│ Bottom Nav (fixed)              │
└─────────────────────────────────┘

More Page (Clean):
┌─────────────────────────────────┐
│ App Bar                         │
├─────────────────────────────────┤
│ (No submenu)                    │ ← Clean!
├─────────────────────────────────┤
│ More Page Content               │
│ - Coupons                       │
│ - Settings                      │
├─────────────────────────────────┤
│ Bottom Nav                      │
└─────────────────────────────────┘

Files Modified:
- App.tsx: Added header visibility tracking, More page check
- SubmenuBar.tsx: Added headerVisible prop, dynamic top
- DashboardSubmenuBar.tsx: Added headerVisible prop, dynamic top
- Orders/index.tsx: Added useFABConfig('orders')

Next Steps:
- Add useFABConfig to Products, Customers, Coupons pages
- Implement speed dial menu for Dashboard FAB
- Test on real devices

Result:
✅ Submenu position responds to header visibility
✅ More page has clean layout
✅ FAB working on Orders page
✅ Ready to add FAB to remaining pages
 2025-11-06 21:38:30 +07:00
dwindown
2008f2f141 feat: Add flags to Country select + Bank account repeater for BACS 
1. Added Emoji Flags to Country/Region Select ✅

   Before: Indonesia
   After:  🇮🇩 Indonesia

   Implementation:
   - Uses same countryCodeToEmoji() helper
   - Flags for all countries in dropdown
   - Better visual identification

2. Implemented Bank Account Repeater Field ✅

   New field type: 'account'
   - Add/remove multiple bank accounts
   - Each account has 6 fields:
     * Account Name (required)
     * Account Number (required)
     * Bank Name (required)
     * Sort Code / Branch Code (optional)
     * IBAN (optional)
     * BIC / SWIFT (optional)

   UI Features:
   ✅ Compact card layout with muted background
   ✅ 2-column grid on desktop, 1-column on mobile
   ✅ Delete button per account (trash icon)
   ✅ Add button at bottom with plus icon
   ✅ Account numbering (Account 1, Account 2, etc.)
   ✅ Smaller inputs (h-9) for compact layout
   ✅ Clear labels with required indicators

   Perfect for:
   - Direct Bank Transfer (BACS)
   - Manual payment methods
   - Multiple bank account management

3. Updated GenericGatewayForm ✅

   Added support:
   - New 'account' field type
   - BankAccount interface
   - Repeater logic (add/remove/update)
   - Plus and Trash2 icons from lucide-react

   Data structure:
   interface BankAccount {
     account_name: string;
     account_number: string;
     bank_name: string;
     sort_code?: string;
     iban?: string;
     bic?: string;
   }

Benefits:
✅ Country select now has visual flags
✅ Bank accounts are easy to manage
✅ Compact, responsive UI
✅ Clear visual hierarchy
✅ Supports international formats (IBAN, BIC, Sort Code)

Files Modified:
- Store.tsx: Added flags to country select
- GenericGatewayForm.tsx: Bank account repeater
- SubmenuBar.tsx: Fullscreen prop (user change)
 2025-11-06 12:23:38 +07:00
dwindown
39a215c188 fix: Sticky submenu + emoji flags instead of images 
1. Made Settings Submenu Sticky ✅
   Problem: Settings submenu wasn't sticky like Dashboard
   Solution: Added sticky positioning to SubmenuBar

   Added classes:
   - sticky top-0 z-20
   - bg-background/95 backdrop-blur
   - supports-[backdrop-filter]:bg-background/60

   Result: ✅ Settings submenu now stays at top when scrolling

2. Switched to Emoji Flags ✅
   Problem: Base64 images not showing in select options
   Better Solution: Use native emoji flags

   Benefits:
   - ✅ No image loading required
   - ✅ Native OS rendering
   - ✅ Smaller bundle size
   - ✅ Better performance
   - ✅ Always works (no broken images)

   Implementation:
   function countryCodeToEmoji(countryCode: string): string {
     const codePoints = countryCode
       .toUpperCase()
       .split('')
       .map(char => 127397 + char.charCodeAt(0));
     return String.fromCodePoint(...codePoints);
   }

   // AE → 🇦🇪
   // US → 🇺🇸
   // ID → 🇮🇩

3. Updated Currency Select ✅
   Before: [Image] United Arab Emirates dirham (AED)
   After:  🇦🇪 United Arab Emirates dirham (AED)

   - Emoji flag in label
   - No separate icon prop needed
   - Works immediately

4. Updated Store Summary ✅
   Before: [Image] Your store is located in Indonesia
   After:  🇮🇩 Your store is located in Indonesia

   - Dynamic emoji flag based on currency
   - Cleaner implementation
   - No image loading

5. Simplified SearchableSelect ✅
   - Removed icon prop (not needed with emoji)
   - Removed image rendering code
   - Simpler component API

Files Modified:
- SubmenuBar.tsx: Added sticky positioning
- Store.tsx: Emoji flags + helper function
- searchable-select.tsx: Removed icon support

Why Emoji > Images:
✅ Universal support (all modern browsers/OS)
✅ No loading time
✅ No broken images
✅ Smaller code
✅ Native rendering
✅ Accessibility friendly
 2025-11-06 12:08:04 +07:00
dwindown
2a679ffd15 fix: Submenu active state + currency symbols + flags integration 
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/
 2025-11-06 11:35:32 +07:00
dwindown
e49a0d1e3d feat: Implement Phase 1 Shopify-inspired settings (Store, Payments, Shipping) 
✨ Features:
- Store Details page with live currency preview
- Payments page with visual provider cards and test mode
- Shipping & Delivery page with zone cards and local pickup
- Shared components: SettingsLayout, SettingsCard, SettingsSection, ToggleField

🎨 UI/UX:
- Card-based layouts (not boring forms)
- Generous whitespace and visual hierarchy
- Toast notifications using sonner (reused from Orders)
- Sticky save button at top
- Mobile-responsive design

🔧 Technical:
- Installed ESLint with TypeScript support
- Fixed all lint errors (0 errors)
- Phase 1 files have zero warnings
- Used existing toast from sonner (not reinvented)
- Updated routes in App.tsx

📝 Files Created:
- Store.tsx (currency preview, address, timezone)
- Payments.tsx (provider cards, manual methods)
- Shipping.tsx (zone cards, rates, local pickup)
- SettingsLayout.tsx, SettingsCard.tsx, SettingsSection.tsx, ToggleField.tsx

Phase 1 complete: 18-24 hours estimated work
 2025-11-05 18:54:41 +07:00
dwindown
232059e928 feat: Complete Dashboard API Integration with Analytics Controller 
✨ Features:
- Implemented API integration for all 7 dashboard pages
- Added Analytics REST API controller with 7 endpoints
- Full loading and error states with retry functionality
- Seamless dummy data toggle for development

📊 Dashboard Pages:
- Customers Analytics (complete)
- Revenue Analytics (complete)
- Orders Analytics (complete)
- Products Analytics (complete)
- Coupons Analytics (complete)
- Taxes Analytics (complete)
- Dashboard Overview (complete)

🔌 Backend:
- Created AnalyticsController.php with REST endpoints
- All endpoints return 501 (Not Implemented) for now
- Ready for HPOS-based implementation
- Proper permission checks

🎨 Frontend:
- useAnalytics hook for data fetching
- React Query caching
- ErrorCard with retry functionality
- TypeScript type safety
- Zero build errors

📝 Documentation:
- DASHBOARD_API_IMPLEMENTATION.md guide
- Backend implementation roadmap
- Testing strategy

🔧 Build:
- All pages compile successfully
- Production-ready with dummy data fallback
- Zero TypeScript errors
 2025-11-04 11:19:00 +07:00