adserver-dashboard 1.0.0

package/client/src/components/line-items/steps/schedule-step.tsx

@@ -0,0 +1,273 @@
+import { useState, useEffect, useMemo } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Card } from "@moving-walls/design-system";
+import { LineItemScheduleManager } from "../line-item-schedule-manager";
+import { CampaignForecastPanel } from "../campaign-forecast-panel";
+import {
+  type LineItemScheduleData,
+  createDefaultSchedule,
+} from "../schedule-rule-types";
+import {
+  Calendar,
+  Monitor,
+  Clock,
+} from "lucide-react";
+import type { InventoryPlanning } from "@/lib/inventory-api";
+
+interface InventoryObjectWithPlanning {
+  id: string;
+  name?: string;
+  planning?: InventoryPlanning;
+  estimatedCostPerDay?: number;
+  currency?: string;
+}
+
+interface ScheduleStepProps {
+  data?: {
+    inventories?: string[];
+    inventoryObjects?: InventoryObjectWithPlanning[];
+  };
+  lineItemData?: {
+    startDate?: string;
+    start_date?: string;
+    endDate?: string;
+    end_date?: string;
+  };
+  scheduleData?: LineItemScheduleData;
+  onComplete: (data: { scheduleData: LineItemScheduleData; apiSchedules: any[] }) => void;
+  onBack?: () => void;
+  isLoading?: boolean;
+  isPlannerRestricted?: boolean;
+  formId?: string;
+}
+
+function parseDate(dateStr: string): string {
+  if (!dateStr) return new Date().toISOString().split("T")[0];
+  try {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return new Date().toISOString().split("T")[0];
+    return date.toISOString().split("T")[0];
+  } catch {
+    return new Date().toISOString().split("T")[0];
+  }
+}
+
+function formatDate(dateStr: string): string {
+  if (!dateStr) return "";
+  try {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return dateStr;
+    return date.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatNumber(num: number): string {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + "M";
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1) + "K";
+  }
+  return num.toFixed(0);
+}
+
+function formatCurrency(amount: number, currency: string = "MYR"): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+export function ScheduleStep({
+  data,
+  lineItemData,
+  scheduleData: initialScheduleData,
+  onComplete,
+  onBack,
+  isLoading,
+  isPlannerRestricted = false,
+  formId = "schedule-step-form",
+}: ScheduleStepProps) {
+  const { t } = useTranslation("lineItems");
+  const [scheduleData, setScheduleData] = useState<LineItemScheduleData | undefined>(initialScheduleData);
+
+  const flightStartDate = lineItemData?.startDate || lineItemData?.start_date || new Date().toISOString().split("T")[0];
+  const flightEndDate = lineItemData?.endDate || lineItemData?.end_date || new Date().toISOString().split("T")[0];
+
+  const selectedInventories = data?.inventories || [];
+  const inventoryObjects = data?.inventoryObjects || [];
+
+  useEffect(() => {
+    if (!scheduleData && selectedInventories.length > 0) {
+      const parsedStartDate = parseDate(flightStartDate);
+      const parsedEndDate = parseDate(flightEndDate);
+      setScheduleData({
+        schedules: [createDefaultSchedule(parsedStartDate, parsedEndDate)],
+      });
+    }
+  }, [selectedInventories.length, scheduleData, flightStartDate, flightEndDate]);
+
+  useEffect(() => {
+    if (initialScheduleData) {
+      setScheduleData(initialScheduleData);
+    }
+  }, [initialScheduleData]);
+
+  const aggregatedForecast = useMemo(() => {
+    let totalImpressions = 0;
+    let totalReach = 0;
+    let totalSlots = 0;
+    let totalCost = 0;
+    let totalCpm = 0;
+    let sovSum = 0;
+    let sotSum = 0;
+    let count = 0;
+
+    inventoryObjects.forEach((inv) => {
+      if (inv?.planning) {
+        totalImpressions += inv.planning.estimates?.impressions || 0;
+        totalReach += inv.planning.estimates?.reach || 0;
+        totalSlots += inv.planning.allocation?.slots || 0;
+        totalCost += inv.planning.pricing?.estimatedCost || 0;
+        totalCpm += inv.planning.pricing?.cpm || 0;
+        sovSum += inv.planning.allocation?.sov || 0;
+        sotSum += inv.planning.allocation?.sot || 0;
+        count++;
+      }
+    });
+
+    const avgFrequency = totalReach > 0 ? totalImpressions / totalReach : 0;
+    const avgCpm = count > 0 ? totalCpm / count : 0;
+    const avgEcpm = totalImpressions > 0 ? (totalCost / totalImpressions) * 1000 : 0;
+    const avgSov = count > 0 ? (sovSum / count) * 100 : 0;
+    const avgSot = count > 0 ? (sotSum / count) * 100 : 0;
+
+    return {
+      impressions: totalImpressions,
+      reach: totalReach,
+      frequency: avgFrequency,
+      adPlays: totalSlots,
+      sov: avgSov,
+      cpm: avgCpm,
+      ecpm: avgEcpm,
+      totalCost: totalCost,
+      sot: avgSot,
+    };
+  }, [inventoryObjects, selectedInventories.length]);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const apiSchedules = scheduleData?.schedules?.map((schedule) => {
+      const apiSchedule: any = {
+        type: schedule.type,
+        validity: {
+          startDate: schedule.validity.startDate,
+          endDate: schedule.validity.endDate,
+        },
+        hours: schedule.hours.map((h) => ({ start: h.start, end: h.end })),
+        priority:
+          schedule.priority ??
+          (schedule.type === "DEFAULT"
+            ? 10
+            : schedule.type === "CUSTOM"
+              ? 100
+              : 50),
+        daysOfWeek:
+          schedule.daysOfWeek ||
+          (schedule.type === "DEFAULT"
+            ? [1, 2, 3, 4, 5, 6, 7]
+            : schedule.type === "WEEKDAY"
+              ? [1, 2, 3, 4, 5]
+              : schedule.type === "WEEKEND"
+                ? [6, 7]
+                : [1, 2, 3, 4, 5, 6, 7]),
+      };
+      if (schedule.type === "CUSTOM") {
+        apiSchedule.date = schedule.date || schedule.validity.startDate;
+      }
+      return apiSchedule;
+    }) || [];
+
+    onComplete({
+      scheduleData: scheduleData || { schedules: [] },
+      apiSchedules,
+    });
+  };
+
+  return (
+    <form
+      id={formId}
+      onSubmit={handleFormSubmit}
+      className="flex flex-col h-full"
+    >
+      {isPlannerRestricted && (
+        <div className="mb-4 p-3 bg-purple-50 border border-purple-200 rounded-lg">
+          <p className="text-sm text-purple-700 font-medium">{t('wizard.common.readOnly')}</p>
+          <p className="text-xs text-purple-600">
+            {t('wizard.schedule.plannerRestrictedDesc')}
+          </p>
+        </div>
+      )}
+
+      <div className="flex-1 flex gap-6">
+        <div className="flex-1 min-w-0 flex flex-col">
+          <Card className="p-4 flex-1">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                <Clock className="h-5 w-5 text-mw-primary-500" />
+                <h3 className="font-semibold text-base text-mw-neutral-900 dark:text-white">
+                  {t('wizard.schedule.lineItemSchedule')}
+                </h3>
+              </div>
+              <div className="flex items-center gap-1 text-xs text-mw-neutral-500">
+                <Calendar className="h-3.5 w-3.5" />
+                <span>
+                  {formatDate(flightStartDate)} - {formatDate(flightEndDate)}
+                </span>
+              </div>
+            </div>
+
+            {selectedInventories.length === 0 ? (
+              <div className="border border-dashed border-mw-neutral-300 dark:border-mw-neutral-600 rounded-lg p-6 flex items-center justify-center min-h-[200px]">
+                <p className="text-sm text-mw-neutral-500 text-center">
+                  {t('wizard.schedule.noInventoriesSelected')}
+                </p>
+              </div>
+            ) : (
+              <LineItemScheduleManager
+                startDate={flightStartDate}
+                endDate={flightEndDate}
+                value={scheduleData}
+                onChange={setScheduleData}
+                isReadOnly={isPlannerRestricted}
+              />
+            )}
+
+            <div className="mt-4 pt-4 border-t border-mw-neutral-100 dark:border-mw-neutral-800">
+              <div className="flex items-center gap-2 text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+                <Monitor className="h-4 w-4" />
+                <span>{selectedInventories.length} {t('wizard.inventory.inventoriesSelected')}</span>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        <div className="w-[220px] flex-shrink-0">
+          <CampaignForecastPanel 
+            forecast={aggregatedForecast} 
+            currency="JPY" 
+          />
+        </div>
+      </div>
+    </form>
+  );
+}