dwindown 8fd3691975 feat: Fill missing dates in charts + no-data states ...

## Task 1: Fill Missing Dates in Chart Data ✅

**Issue:** Charts only show dates with actual data, causing:
- Gaps in timeline
- Tight/crowded lines on mobile
- Inconsistent X-axis

**Solution:** Backend now fills ALL dates in range with zeros

**Files Updated:**
- `includes/Api/AnalyticsController.php`
  - `calculate_revenue_metrics()` - Revenue chart
  - `calculate_orders_metrics()` - Orders chart
  - `calculate_coupons_metrics()` - Coupons chart

**Implementation:**
```php
// Create data map from query results
$data_map = [];
foreach ($chart_data_raw as $row) {
    $data_map[$row->date] = [...];
}

// Fill ALL dates in range
for ($i = $days - 1; $i >= 0; $i--) {
    $date = date('Y-m-d', strtotime("-{$i} days"));
    if (isset($data_map[$date])) {
        // Use real data
    } else {
        // Fill with zeros
    }
}
```

**Result:**
- ✅ Consistent X-axis with all dates
- ✅ No gaps in timeline
- ✅ Better mobile display (evenly spaced)

---

## Task 2: No-Data States for Charts ✅

**Issue:** Charts show broken/empty state when no data

**Solution:** Show friendly message like Overview does

**Files Updated:**
- `admin-spa/src/routes/Dashboard/Revenue.tsx`
- `admin-spa/src/routes/Dashboard/Orders.tsx`
- `admin-spa/src/routes/Dashboard/Coupons.tsx`

**Implementation:**
```tsx
{chartData.length === 0 || chartData.every(d => d.value === 0) ? (
  <div className="flex items-center justify-center h-[300px]">
    <div className="text-center">
      <Package className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
      <p className="text-muted-foreground font-medium">
        No {type} data available
      </p>
      <p className="text-sm text-muted-foreground mt-1">
        Data will appear once you have {action}
      </p>
    </div>
  </div>
) : (
  <ResponsiveContainer>...</ResponsiveContainer>
)}
```

**Result:**
- ✅ Revenue: "No revenue data available"
- ✅ Orders: "No orders data available"
- ✅ Coupons: "No coupon usage data available"
- ✅ Consistent with Overview page
- ✅ User-friendly empty states

---

## Summary

✅ **Backend:** All dates filled in chart data
✅ **Frontend:** No-data states added to 3 charts
✅ **UX:** Consistent, professional empty states

**Next:** VIP customer settings + mobile chart optimization

2025-11-11 00:37:22 +07:00

37 KiB

Raw Blame History

View Raw