dwindown
9c31b4ce6c
feat: Mobile chart optimization + VIP customer settings
...
## Task 4: Mobile Chart Optimization ✅
**Problem:** Too many data points = tight/crowded lines on mobile
**Solution:** Horizontal scroll container
**Implementation:**
- ChartCard component enhanced with mobile scroll
- Calculates minimum width based on data points (40px per point)
- Desktop: Full width responsive
- Mobile: Fixed width chart in scrollable container
```tsx
// ChartCard.tsx
const mobileMinWidth = Math.max(600, dataPoints * 40);
<div className="overflow-x-auto -mx-6 px-6 md:mx-0 md:px-0">
<div style={{ minWidth: `${mobileMinWidth}px` }}>
{children}
</div>
</div>
```
**Benefits:**
- ✅ All data visible (no loss)
- ✅ Natural swipe gesture
- ✅ Readable spacing
- ✅ Works for all chart types
- ✅ No data aggregation needed
---
## Task 5: VIP Customer Settings ✅
**New Feature:** Configure VIP customer qualification criteria
### Backend (PHP)
**Files Created:**
- `includes/Compat/CustomerSettingsProvider.php`
- VIP settings management
- VIP detection logic
- Customer stats calculation
**API Endpoints:**
- `GET /store/customer-settings` - Fetch settings
- `POST /store/customer-settings` - Save settings
**Settings:**
```php
woonoow_vip_min_spent = 1000
woonoow_vip_min_orders = 10
woonoow_vip_timeframe = 'all' | '30' | '90' | '365'
woonoow_vip_require_both = true
woonoow_vip_exclude_refunded = true
```
**VIP Detection:**
```php
CustomerSettingsProvider::is_vip_customer($customer_id)
CustomerSettingsProvider::get_vip_stats($customer_id)
```
### Frontend (React)
**Files Created:**
- `admin-spa/src/routes/Settings/Customers.tsx`
**Features:**
- 💰 Minimum total spent (currency input)
- �� Minimum order count (number input)
- 📅 Timeframe selector (all-time, 30/90/365 days)
- ⚙️ Require both criteria toggle
- 🚫 Exclude refunded orders toggle
- 👑 Live preview of VIP qualification
**Navigation:**
- Added to Settings menu
- Route: `/settings/customers`
- Position: After Tax, before Notifications
---
## Summary
✅ **Mobile Charts:** Horizontal scroll for readable spacing
✅ **VIP Settings:** Complete backend + frontend implementation
**Mobile Chart Strategy:**
- Minimum 600px width
- 40px per data point
- Smooth horizontal scroll
- Desktop remains responsive
**VIP Customer System:**
- Flexible qualification criteria
- Multiple timeframes
- AND/OR logic support
- Refunded order exclusion
- Ready for customer list integration
**All tasks complete!** 🎉
2025-11-11 00:49:07 +07:00
dwindown
dd2ff2074f
fix: Login logo 401, link focus styles, payment/shipping active colors
...
## 1. Fix Logo 401 Error on Login ✅
**Issue:** Logo image returns 401 Unauthorized on login page
**Root Cause:** `/store/settings` endpoint requires authentication
**Solution:** Created public branding endpoint
```php
// GET /woonoow/v1/store/branding (PUBLIC)
public function get_branding() {
return [
'store_name' => get_option('blogname'),
'store_logo' => get_option('woonoow_store_logo'),
'store_icon' => get_option('woonoow_store_icon'),
'store_tagline' => get_option('woonoow_store_tagline'),
];
}
```
**Frontend:** Updated Login.tsx to use `/store/branding` instead
**Result:** Logo loads without authentication ✅
---
## 2. Override WordPress Link Focus Styles ✅
**Issue:** WordPress common.css applies focus/active styles to links
**Solution:** Added CSS override
```css
a:focus,
a:active {
outline: none !important;
box-shadow: none !important;
}
```
**Result:** Clean focus states, no WordPress interference
---
## 3. Active Color for Manual Payment Methods ✅
**Issue:** Manual payments use static gray icon, online payments use green/primary
**Solution:** Applied same active color logic
```tsx
<div className={`p-2 rounded-lg ${
gateway.enabled
? 'bg-green-500/20 text-green-500'
: 'bg-primary/10 text-primary'
}`}>
<Banknote className="h-5 w-5" />
</div>
```
**Result:**
- ✅ Enabled = Green background + green icon
- ✅ Disabled = Primary background + primary icon
- ✅ Consistent with online payments
---
## 4. Active Color for Shipping Icons ✅
**Issue:** Shipping icons always gray, no visual indicator of enabled state
**Solution:** Applied active color to all shipping icons
- Zone summary view
- Desktop accordion view
- Mobile accordion view
```tsx
<div className={`p-2 rounded-lg ${
rate.enabled
? 'bg-green-500/20 text-green-500'
: 'bg-primary/10 text-primary'
}`}>
<Truck className="h-4 w-4" />
</div>
```
**Result:**
- ✅ Enabled shipping = Green icon
- ✅ Disabled shipping = Primary icon
- ✅ Consistent visual language across payments & shipping
---
## 5. Notification Strategy ✅
**Acknowledged:** Clean structure, ready for implementation
---
## Summary
✅ Public branding endpoint (no auth required)
✅ Logo loads on login page
✅ WordPress link focus styles overridden
✅ Manual payments have active colors
✅ Shipping methods have active colors
✅ Consistent visual language (green = active, primary = inactive)
**Visual Consistency Achieved:**
- Payments (manual & online) ✓
- Shipping methods ✓
- All use same color system ✓
2025-11-11 00:03:14 +07:00
