Fix preorder/local/hold

2024-12-25 14:43:27 -05:00
parent 751a0b1f39
commit 108f4c0b9d
2 changed files with 100 additions and 174 deletions
--- a/dashboard-server/klaviyo-server/services/events.service.js
+++ b/dashboard-server/klaviyo-server/services/events.service.js
@@ -1512,21 +1512,21 @@ export class EventsService {
      const { metric, daily = false } = params;
      console.log('[EventsService] Request params:', params);

-      // Get period dates using the same logic as calculatePeriodStats
+      // Get period dates using TimeManager to respect 1 AM day start
      let periodStart, periodEnd, prevPeriodStart, prevPeriodEnd;
      if (params.startDate && params.endDate) {
-        periodStart = this.timeManager.toDateTime(params.startDate);
-        periodEnd = this.timeManager.toDateTime(params.endDate);
+        periodStart = this.timeManager.getDayStart(this.timeManager.toDateTime(params.startDate));
+        periodEnd = this.timeManager.getDayEnd(this.timeManager.toDateTime(params.endDate));
        const duration = periodEnd.diff(periodStart);
-        prevPeriodStart = periodStart.minus(duration);
-        prevPeriodEnd = periodStart.minus({ milliseconds: 1 });
+        prevPeriodStart = this.timeManager.getDayStart(periodStart.minus(duration));
+        prevPeriodEnd = this.timeManager.getDayEnd(periodStart.minus({ milliseconds: 1 }));
      } else if (params.timeRange) {
        const range = this.timeManager.getDateRange(params.timeRange);
        periodStart = range.start;
        periodEnd = range.end;
-        const duration = periodEnd.diff(periodStart);
-        prevPeriodStart = periodStart.minus(duration);
-        prevPeriodEnd = periodStart.minus({ milliseconds: 1 });
+        const prevRange = this.timeManager.getPreviousPeriod(params.timeRange);
+        prevPeriodStart = prevRange.start;
+        prevPeriodEnd = prevRange.end;
      }

      // Load both current and previous period data
@@ -1549,36 +1549,7 @@ export class EventsService {
      const currentEvents = this._transformEvents(currentResponse.data || []);
      const prevEvents = this._transformEvents(prevResponse.data || []);

-      // Filter events based on metric type
-      const filterEvents = (events) => {
-        switch (metric) {
-          case 'pre_orders':
-            return events.filter(event => 
-              Boolean(event.event_properties?.HasPreorder || 
-                     event.event_properties?.has_preorder || 
-                     event.event_properties?.preorder)
-            );
-          case 'local_pickup':
-            return events.filter(event => 
-              Boolean(event.event_properties?.LocalPickup || 
-                     event.event_properties?.local_pickup || 
-                     event.event_properties?.pickup)
-            );
-          case 'on_hold':
-            return events.filter(event => 
-              Boolean(event.event_properties?.IsOnHold || 
-                     event.event_properties?.is_on_hold || 
-                     event.event_properties?.on_hold)
-            );
-          default:
-            return events;
-        }
-      };
-
-      const filteredCurrentEvents = filterEvents(currentEvents);
-      const filteredPrevEvents = filterEvents(prevEvents);
-
-      // Initialize daily stats map with all dates in range
+      // Initialize daily stats map with all dates in range using TimeManager's day start
      const dailyStats = new Map();
      let currentDate = periodStart;
      while (currentDate <= periodEnd) {
@@ -1589,8 +1560,6 @@ export class EventsService {
          revenue: 0,
          orders: 0,
          itemCount: 0,
-          averageOrderValue: 0,
-          averageItemsPerOrder: 0,
          count: 0,
          value: 0,
          percentage: 0,
@@ -1598,98 +1567,73 @@ export class EventsService {
          prevRevenue: 0,
          prevOrders: 0,
          prevItemCount: 0,
-          prevAvgOrderValue: 0,
-          orderValueRange: {
-            largest: 0,
-            smallest: 0,
-            largestOrderId: null,
-            smallestOrderId: null,
-            distribution: {
-              under25: { count: 0, total: 0 },
-              under50: { count: 0, total: 0 },
-              under100: { count: 0, total: 0 },
-              under200: { count: 0, total: 0 },
-              over200: { count: 0, total: 0 }
-            }
-          }
+          prevValue: 0,
+          prevCount: 0,
+          prevPercentage: 0,
+          averageOrderValue: 0,
+          averageItemsPerOrder: 0,
+          prevAvgOrderValue: 0
        });
-        currentDate = currentDate.plus({ days: 1 });
+        currentDate = this.timeManager.getDayStart(currentDate.plus({ days: 1 }));
      }

-      // Get total orders for the period (needed for percentages)
-      const totalOrders = currentEvents.length;
+      // First pass: Count total orders per day using TimeManager's day boundaries
+      for (const event of currentEvents) {
+        const datetime = this.timeManager.toDateTime(event.attributes?.datetime);
+        if (!datetime) continue;

-      // Process current period events
+        // Get the day start for this event's time to ensure proper day assignment
+        const dayStart = this.timeManager.getDayStart(datetime);
+        const dateKey = dayStart.toFormat('yyyy-MM-dd');
+        if (!dailyStats.has(dateKey)) continue;
+
+        const dayStats = dailyStats.get(dateKey);
+        dayStats.orders++;
+        dailyStats.set(dateKey, dayStats);
+      }
+
+      // Second pass: Process filtered orders
+      const filterEvents = (events) => {
+        switch (metric) {
+          case 'pre_orders':
+            return events.filter(event => Boolean(event.event_properties?.HasPreorder));
+          case 'local_pickup':
+            return events.filter(event => Boolean(event.event_properties?.LocalPickup));
+          case 'on_hold':
+            return events.filter(event => Boolean(event.event_properties?.IsOnHold));
+          default:
+            return events;
+        }
+      };
+
+      const filteredCurrentEvents = filterEvents(currentEvents);
+
+      // Process current period filtered events using TimeManager's day boundaries
      for (const event of filteredCurrentEvents) {
        const datetime = this.timeManager.toDateTime(event.attributes?.datetime);
        if (!datetime) continue;

-        const dateKey = datetime.toFormat('yyyy-MM-dd');
+        // Get the day start for this event's time
+        const dayStart = this.timeManager.getDayStart(datetime);
+        const dateKey = dayStart.toFormat('yyyy-MM-dd');
        if (!dailyStats.has(dateKey)) continue;

        const dayStats = dailyStats.get(dateKey);
        const props = event.event_properties || {};
        const totalAmount = Number(props.TotalAmount || 0);
        const items = props.Items || [];
-        const orderId = props.OrderId;

-        dayStats.revenue += totalAmount;
-        dayStats.orders++;
-        dayStats.itemCount += items.length;
-        dayStats.value += totalAmount;
        dayStats.count++;
-        dayStats.totalOrders = totalOrders;
-        dayStats.percentage = (dayStats.count / totalOrders) * 100;
-        dayStats.averageOrderValue = dayStats.revenue / dayStats.orders;
-        dayStats.averageItemsPerOrder = dayStats.itemCount / dayStats.orders;
+        dayStats.value += totalAmount;
+        dayStats.itemCount += items.length;
+        dayStats.percentage = (dayStats.count / dayStats.orders) * 100;
+        dayStats.averageOrderValue = dayStats.value / dayStats.count;
+        dayStats.averageItemsPerOrder = dayStats.itemCount / dayStats.count;

-        // Track daily order value range
-        if (totalAmount > dayStats.orderValueRange.largest) {
-          dayStats.orderValueRange.largest = totalAmount;
-          dayStats.orderValueRange.largestOrderId = orderId;
-        }
-        if (totalAmount > 0) {
-          if (dayStats.orderValueRange.smallest === 0 || totalAmount < dayStats.orderValueRange.smallest) {
-            dayStats.orderValueRange.smallest = totalAmount;
-            dayStats.orderValueRange.smallestOrderId = orderId;
+        dailyStats.set(dateKey, dayStats);
      }

-          // Track order value distribution with more granular ranges
-          const ranges = [
-            { min: 0, max: 25 },
-            { min: 25, max: 50 },
-            { min: 50, max: 75 },
-            { min: 75, max: 100 },
-            { min: 100, max: 150 },
-            { min: 150, max: 200 },
-            { min: 200, max: 300 },
-            { min: 300, max: 500 },
-            { min: 500, max: Infinity }
-          ];
-
-          // Initialize distribution if not exists
-          if (!dayStats.orderValueDistribution) {
-            dayStats.orderValueDistribution = ranges.map(range => ({
-              min: range.min,
-              max: range.max === Infinity ? 'Infinity' : range.max,
-              count: 0,
-              total: 0
-            }));
-          }
-
-          // Find the appropriate range and update counts
-          const rangeIndex = ranges.findIndex(range => 
-            totalAmount >= range.min && totalAmount < range.max
-          );
-          
-          if (rangeIndex !== -1) {
-            dayStats.orderValueDistribution[rangeIndex].count++;
-            dayStats.orderValueDistribution[rangeIndex].total += totalAmount;
-          }
-        }
-      }
-
-      // Process previous period events
+      // Initialize and process previous period stats using TimeManager's day boundaries
      const prevDailyStats = new Map();
      let prevDate = prevPeriodStart;
      while (prevDate <= prevPeriodEnd) {
@@ -1697,37 +1641,47 @@ export class EventsService {
        prevDailyStats.set(dateKey, {
          date: prevDate.toISO(),
          timestamp: dateKey,
-          revenue: 0,
          orders: 0,
-          itemCount: 0,
+          count: 0,
          value: 0,
-          count: 0
+          percentage: 0
        });
-        prevDate = prevDate.plus({ days: 1 });
+        prevDate = this.timeManager.getDayStart(prevDate.plus({ days: 1 }));
      }

-      // Get total orders for previous period
-      const prevTotalOrders = prevEvents.length;
+      // First pass for previous period: Count total orders
+      for (const event of prevEvents) {
+        const datetime = this.timeManager.toDateTime(event.attributes?.datetime);
+        if (!datetime) continue;

-      // Process previous period events
+        const dayStart = this.timeManager.getDayStart(datetime);
+        const dateKey = dayStart.toFormat('yyyy-MM-dd');
+        if (!prevDailyStats.has(dateKey)) continue;
+
+        const dayStats = prevDailyStats.get(dateKey);
+        dayStats.orders++;
+        prevDailyStats.set(dateKey, dayStats);
+      }
+
+      // Second pass for previous period: Process filtered orders
+      const filteredPrevEvents = filterEvents(prevEvents);
      for (const event of filteredPrevEvents) {
        const datetime = this.timeManager.toDateTime(event.attributes?.datetime);
        if (!datetime) continue;

-        const dateKey = datetime.toFormat('yyyy-MM-dd');
+        const dayStart = this.timeManager.getDayStart(datetime);
+        const dateKey = dayStart.toFormat('yyyy-MM-dd');
        if (!prevDailyStats.has(dateKey)) continue;

        const dayStats = prevDailyStats.get(dateKey);
        const props = event.event_properties || {};
        const totalAmount = Number(props.TotalAmount || 0);
-        const items = props.Items || [];

-        dayStats.revenue += totalAmount;
-        dayStats.orders++;
-        dayStats.itemCount += items.length;
-        dayStats.value += totalAmount;
        dayStats.count++;
-        dayStats.percentage = (dayStats.count / prevTotalOrders) * 100;
+        dayStats.value += totalAmount;
+        dayStats.percentage = (dayStats.count / dayStats.orders) * 100;
+
+        prevDailyStats.set(dateKey, dayStats);
      }

      // Map previous period data to current period days
@@ -1742,13 +1696,11 @@ export class EventsService {
        if (prevDayStats && currentDayStats) {
          const dayStats = dailyStats.get(currentDayStats.timestamp);
          if (dayStats) {
-            dayStats.prevRevenue = prevDayStats.revenue;
-            dayStats.prevOrders = prevDayStats.orders;
-            dayStats.prevItemCount = prevDayStats.itemCount;
            dayStats.prevValue = prevDayStats.value;
            dayStats.prevCount = prevDayStats.count;
+            dayStats.prevOrders = prevDayStats.orders;
            dayStats.prevPercentage = prevDayStats.percentage;
-            dayStats.prevAvgOrderValue = prevDayStats.orders > 0 ? prevDayStats.revenue / prevDayStats.orders : 0;
+            dayStats.prevAvgOrderValue = prevDayStats.count > 0 ? prevDayStats.value / prevDayStats.count : 0;
            dailyStats.set(currentDayStats.timestamp, dayStats);
          }
        }
@@ -1759,29 +1711,19 @@ export class EventsService {
        .sort((a, b) => a.date.localeCompare(b.date))
        .map(day => ({
          ...day,
-          revenue: Number(day.revenue || 0),
+          revenue: Number(day.value || 0),
          orders: Number(day.orders || 0),
          itemCount: Number(day.itemCount || 0),
-          averageOrderValue: Number(day.averageOrderValue || 0),
-          averageItemsPerOrder: Number(day.averageItemsPerOrder || 0),
          count: Number(day.count || 0),
          value: Number(day.value || 0),
          percentage: Number(day.percentage || 0),
-          totalOrders: Number(day.totalOrders || 0),
-          prevRevenue: Number(day.prevRevenue || 0),
-          prevOrders: Number(day.prevOrders || 0),
-          prevItemCount: Number(day.prevItemCount || 0),
+          averageOrderValue: Number(day.averageOrderValue || 0),
+          averageItemsPerOrder: Number(day.averageItemsPerOrder || 0),
          prevValue: Number(day.prevValue || 0),
          prevCount: Number(day.prevCount || 0),
+          prevOrders: Number(day.prevOrders || 0),
          prevPercentage: Number(day.prevPercentage || 0),
-          prevAvgOrderValue: Number(day.prevAvgOrderValue || 0),
-          orderValueRange: {
-            largest: Number(day.orderValueRange?.largest || 0),
-            smallest: Number(day.orderValueRange?.smallest || 0),
-            largestOrderId: day.orderValueRange?.largestOrderId || null,
-            smallestOrderId: day.orderValueRange?.smallestOrderId || null
-          },
-          orderValueDistribution: day.orderValueDistribution || []
+          prevAvgOrderValue: Number(day.prevAvgOrderValue || 0)
        }));

      return stats;
--- a/dashboard/src/components/dashboard/StatCards.jsx
+++ b/dashboard/src/components/dashboard/StatCards.jsx
@@ -532,7 +532,6 @@ const ShippingDetails = ({ data }) => {
 const OrderTypeDetails = ({ data, type }) => {
  if (!data?.length) return <div className="text-muted-foreground">No data available for the selected time range.</div>;

-  // Access the correct daily data using the 'type' prop
  const timeSeriesData = data.map(day => ({
    timestamp: day.timestamp,
    count: day.count,
@@ -540,31 +539,16 @@ const OrderTypeDetails = ({ data, type }) => {
    percentage: day.percentage
  }));

-  const typeLabels = {
-    'pre_orders': 'Pre-Orders',
-    'local_pickup': 'Local Pickup',
-    'on_hold': 'On Hold'
+  const typeColors = {
+    'pre_orders': 'hsl(47.9 95.8% 53.1%)', // Yellow for pre-orders
+    'local_pickup': 'hsl(192.2 70.1% 51.4%)', // Cyan for local pickup
+    'on_hold': 'hsl(346.8 77.2% 49.8%)' // Red for on hold
  };

+  const color = typeColors[type];
+
  return (
    <div className="space-y-8">
-      <div className="grid grid-cols-2 gap-4">
-        <StatCard
-          title={`Total ${typeLabels[type]}`}
-          value={data[0]?.totalOrders?.toLocaleString() || 0}
-          description={`${data[0]?.percentage?.toFixed(1) || 0}% of all orders`}
-          colorClass="text-blue-600 dark:text-blue-400"
-          icon={ShoppingCart}
-        />
-        <StatCard
-          title="Total Value"
-          value={formatCurrency(data[0]?.value || 0)}
-          description={`Avg: ${formatCurrency((data[0]?.value || 0) / (data[0]?.count || 1))}`}
-          colorClass="text-green-600 dark:text-green-400"
-          icon={DollarSign}
-        />
-      </div>
-
      <div>
        <h3 className="text-lg font-medium mb-4">Daily Order Count</h3>
        <TimeSeriesChart
@@ -572,7 +556,7 @@ const OrderTypeDetails = ({ data, type }) => {
          dataKey="count"
          name="Orders"
          type="bar"
-          color="hsl(221.2 83.2% 53.3%)"
+          color={color}
        />
      </div>

@@ -582,7 +566,7 @@ const OrderTypeDetails = ({ data, type }) => {
          data={timeSeriesData}
          dataKey="value"
          name="Value"
-          color="hsl(142.1 76.2% 36.3%)"
+          color={color}
          valueFormatter={(value) => formatCurrency(value)}
        />
      </div>
@@ -593,7 +577,7 @@ const OrderTypeDetails = ({ data, type }) => {
          data={timeSeriesData}
          dataKey="percentage"
          name="Percentage"
-          color="hsl(262.1 83.3% 57.8%)"
+          color={color}
          valueFormatter={(value) => `${value.toFixed(1)}%`}
        />
      </div>
@@ -1622,7 +1606,7 @@ const StatCards = ({

          <StatCard
            title="Pre-Orders"
-            value={stats?.orderTypes?.preOrders?.percentage?.toFixed(1) || '0'}
+            value={((stats?.orderTypes?.preOrders?.count / stats?.orderCount) * 100)?.toFixed(1) || '0'}
            valueSuffix="%"
            description={`${stats?.orderTypes?.preOrders?.count || 0} orders`}
            colorClass="text-yellow-600 dark:text-yellow-400"
@@ -1634,7 +1618,7 @@ const StatCards = ({

          <StatCard
            title="Local Pickup"
-            value={stats?.orderTypes?.localPickup?.percentage?.toFixed(1) || '0'}
+            value={((stats?.orderTypes?.localPickup?.count / stats?.orderCount) * 100)?.toFixed(1) || '0'}
            valueSuffix="%"
            description={`${stats?.orderTypes?.localPickup?.count || 0} orders`}
            colorClass="text-cyan-600 dark:text-cyan-400"
@@ -1646,7 +1630,7 @@ const StatCards = ({

          <StatCard
            title="On Hold"
-            value={stats?.orderTypes?.heldItems?.percentage?.toFixed(1) || '0'}
+            value={((stats?.orderTypes?.heldItems?.count / stats?.orderCount) * 100)?.toFixed(1) || '0'}
            valueSuffix="%"
            description={`${stats?.orderTypes?.heldItems?.count || 0} orders`}
            colorClass="text-red-600 dark:text-red-400"