adserver-dashboard 1.0.0

package/client/src/components/line-items/planner-schedule-grid.tsx

@@ -0,0 +1,495 @@
+import { useState, useMemo, useCallback, useRef } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { ChevronDown, Minus, Plus } from "lucide-react";
+import { cn } from "@moving-walls/design-system";
+
+interface PlannerScheduleGridProps {
+  startDate: string;
+  endDate: string;
+  value?: ScheduleGridData;
+  onChange?: (data: ScheduleGridData) => void;
+  className?: string;
+}
+
+export interface ScheduleGridData {
+  selectedDays: number[];
+  duration: string;
+  spotsPerLoop: number;
+  spotsPerHour: number;
+  dateHours: Record<string, number[]>;
+}
+
+const DAYS_OF_WEEK = [
+  { key: 1, label: "Mon" },
+  { key: 2, label: "Tue" },
+  { key: 3, label: "Wed" },
+  { key: 4, label: "Thu" },
+  { key: 5, label: "Fri" },
+  { key: 6, label: "Sat" },
+  { key: 7, label: "Sun" },
+];
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+
+const DURATION_OPTIONS = [
+  { value: "10", label: "10 Sec" },
+  { value: "15", label: "15 Sec" },
+  { value: "20", label: "20 Sec" },
+  { value: "30", label: "30 Sec" },
+  { value: "60", label: "60 Sec" },
+];
+
+function parseDate(dateStr: string): Date {
+  if (!dateStr) return new Date();
+  
+  const formats = [
+    /^(\d{4})-(\d{2})-(\d{2})/,
+    /^(\d{1,2})\s+(\w+)\s+(\d{4})/,
+    /^(\w+)\s+(\d{1,2}),?\s+(\d{4})/,
+  ];
+  
+  for (const fmt of formats) {
+    const match = dateStr.match(fmt);
+    if (match) {
+      if (fmt === formats[0]) {
+        return new Date(parseInt(match[1]), parseInt(match[2]) - 1, parseInt(match[3]));
+      }
+    }
+  }
+  
+  const parsed = new Date(dateStr);
+  return isNaN(parsed.getTime()) ? new Date() : parsed;
+}
+
+function formatDateShort(date: Date): string {
+  const day = date.getDate();
+  const month = date.toLocaleString("en-US", { month: "short" });
+  const dayName = date.toLocaleString("en-US", { weekday: "short" });
+  return `${day} ${month} (${dayName})`;
+}
+
+function getDateKey(date: Date): string {
+  return date.toISOString().split("T")[0];
+}
+
+function getDayOfWeek(date: Date): number {
+  const day = date.getDay();
+  return day === 0 ? 7 : day;
+}
+
+function generateDateRange(start: Date, end: Date): Date[] {
+  const dates: Date[] = [];
+  const current = new Date(start);
+  current.setHours(0, 0, 0, 0);
+  const endDate = new Date(end);
+  endDate.setHours(0, 0, 0, 0);
+  
+  while (current <= endDate) {
+    dates.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  
+  return dates;
+}
+
+export function PlannerScheduleGrid({
+  startDate,
+  endDate,
+  value,
+  onChange,
+  className,
+}: PlannerScheduleGridProps) {
+  const { t } = useTranslation('lineItems');
+  const gridRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragMode, setDragMode] = useState<"select" | "deselect">("select");
+  const [showDurationDropdown, setShowDurationDropdown] = useState(false);
+
+  const [selectedDays, setSelectedDays] = useState<number[]>(
+    value?.selectedDays || [1, 2, 3, 4, 5, 6, 7]
+  );
+  const [duration, setDuration] = useState(value?.duration || "15");
+  const [spotsPerLoop, setSpotsPerLoop] = useState(value?.spotsPerLoop || 1);
+  const [spotsPerHour, setSpotsPerHour] = useState(value?.spotsPerHour || 10);
+  const [dateHours, setDateHours] = useState<Record<string, number[]>>(
+    value?.dateHours || {}
+  );
+
+  const parsedStartDate = useMemo(() => parseDate(startDate), [startDate]);
+  const parsedEndDate = useMemo(() => parseDate(endDate), [endDate]);
+  const dateRange = useMemo(
+    () => generateDateRange(parsedStartDate, parsedEndDate),
+    [parsedStartDate, parsedEndDate]
+  );
+
+  const emitChange = useCallback(
+    (updates: Partial<ScheduleGridData>) => {
+      const newData: ScheduleGridData = {
+        selectedDays: updates.selectedDays ?? selectedDays,
+        duration: updates.duration ?? duration,
+        spotsPerLoop: updates.spotsPerLoop ?? spotsPerLoop,
+        spotsPerHour: updates.spotsPerHour ?? spotsPerHour,
+        dateHours: updates.dateHours ?? dateHours,
+      };
+      onChange?.(newData);
+    },
+    [selectedDays, duration, spotsPerLoop, spotsPerHour, dateHours, onChange]
+  );
+
+  const toggleDay = (day: number) => {
+    const newDays = selectedDays.includes(day)
+      ? selectedDays.filter((d) => d !== day)
+      : [...selectedDays, day];
+    setSelectedDays(newDays);
+    emitChange({ selectedDays: newDays });
+  };
+
+  const selectAllDays = () => {
+    const allDays = [1, 2, 3, 4, 5, 6, 7];
+    const allSelected = selectedDays.length === 7;
+    const newDays = allSelected ? [] : allDays;
+    setSelectedDays(newDays);
+    emitChange({ selectedDays: newDays });
+  };
+
+  const isCellSelected = (date: Date, hour: number): boolean => {
+    const key = getDateKey(date);
+    return dateHours[key]?.includes(hour) ?? false;
+  };
+
+  const toggleCell = (date: Date, hour: number) => {
+    const key = getDateKey(date);
+    const currentHours = dateHours[key] || [];
+    const newHours = currentHours.includes(hour)
+      ? currentHours.filter((h) => h !== hour)
+      : [...currentHours, hour].sort((a, b) => a - b);
+    
+    const newDateHours = { ...dateHours, [key]: newHours };
+    if (newHours.length === 0) {
+      delete newDateHours[key];
+    }
+    setDateHours(newDateHours);
+    emitChange({ dateHours: newDateHours });
+  };
+
+  const setCellSelected = (date: Date, hour: number, selected: boolean) => {
+    const key = getDateKey(date);
+    const currentHours = dateHours[key] || [];
+    const isCurrentlySelected = currentHours.includes(hour);
+    
+    if (selected === isCurrentlySelected) return;
+    
+    const newHours = selected
+      ? [...currentHours, hour].sort((a, b) => a - b)
+      : currentHours.filter((h) => h !== hour);
+    
+    const newDateHours = { ...dateHours, [key]: newHours };
+    if (newHours.length === 0) {
+      delete newDateHours[key];
+    }
+    setDateHours(newDateHours);
+    emitChange({ dateHours: newDateHours });
+  };
+
+  const handleSelectAll = () => {
+    const newDateHours: Record<string, number[]> = {};
+    dateRange.forEach((date) => {
+      const dayOfWeek = getDayOfWeek(date);
+      if (selectedDays.includes(dayOfWeek)) {
+        newDateHours[getDateKey(date)] = [...HOURS];
+      }
+    });
+    setDateHours(newDateHours);
+    emitChange({ dateHours: newDateHours });
+  };
+
+  const handleDeselectAll = () => {
+    setDateHours({});
+    emitChange({ dateHours: {} });
+  };
+
+  const handleMouseDown = (date: Date, hour: number) => {
+    setIsDragging(true);
+    const isSelected = isCellSelected(date, hour);
+    setDragMode(isSelected ? "deselect" : "select");
+    setCellSelected(date, hour, !isSelected);
+  };
+
+  const handleMouseEnter = (date: Date, hour: number) => {
+    if (!isDragging) return;
+    setCellSelected(date, hour, dragMode === "select");
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const formatFlightDates = (): string => {
+    const start = parsedStartDate.toLocaleDateString("en-GB", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    });
+    const end = parsedEndDate.toLocaleDateString("en-GB", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    });
+    return `${start} - ${end}`;
+  };
+
+  return (
+    <div
+      className={cn("space-y-4", className)}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      <div className="flex items-center gap-2 p-3 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg bg-mw-neutral-50 dark:bg-mw-neutral-800">
+        <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+          {formatFlightDates()}
+        </span>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400 mr-2">
+            {t('scheduleGrid.selectDaysOfSchedule')}
+          </span>
+          {DAYS_OF_WEEK.map((day) => (
+            <button
+              key={day.key}
+              type="button"
+              onClick={() => toggleDay(day.key)}
+              className={cn(
+                "px-2.5 py-1 text-xs font-medium rounded transition-colors",
+                selectedDays.includes(day.key)
+                  ? "bg-[#2176cc] text-white"
+                  : "bg-mw-neutral-100 text-mw-neutral-600 hover:bg-mw-neutral-200 dark:bg-mw-neutral-700 dark:text-mw-neutral-400"
+              )}
+            >
+              {day.label}
+            </button>
+          ))}
+        </div>
+        <label className="flex items-center gap-2 text-sm text-mw-neutral-600 dark:text-mw-neutral-400 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={selectedDays.length === 7}
+            onChange={selectAllDays}
+            className="rounded border-mw-neutral-300"
+          />
+          {t('scheduleGrid.selectAllDays')}
+        </label>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400 mb-1.5 block">
+            {t('scheduleGrid.duration')}
+          </label>
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => setShowDurationDropdown(!showDurationDropdown)}
+              className="w-full flex items-center justify-between px-3 py-2 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg text-sm bg-white dark:bg-mw-neutral-800"
+            >
+              {DURATION_OPTIONS.find((o) => o.value === duration)?.label || "15 Sec"}
+              <ChevronDown className="h-4 w-4 text-mw-neutral-400" />
+            </button>
+            {showDurationDropdown && (
+              <div className="absolute top-full left-0 w-full mt-1 bg-white dark:bg-mw-neutral-800 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg shadow-lg z-10">
+                {DURATION_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => {
+                      setDuration(opt.value);
+                      setShowDurationDropdown(false);
+                      emitChange({ duration: opt.value });
+                    }}
+                    className={cn(
+                      "w-full px-3 py-2 text-left text-sm hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700",
+                      duration === opt.value && "bg-mw-primary-50 text-mw-primary-600"
+                    )}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex gap-4">
+          <div>
+            <label className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400 mb-1.5 block">
+              {t('scheduleGrid.spotsPerLoop')}
+            </label>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => {
+                  const val = Math.max(1, spotsPerLoop - 1);
+                  setSpotsPerLoop(val);
+                  emitChange({ spotsPerLoop: val });
+                }}
+                className="h-9 w-9 flex items-center justify-center border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700"
+              >
+                <Minus className="h-4 w-4" />
+              </button>
+              <input
+                type="number"
+                value={spotsPerLoop}
+                onChange={(e) => {
+                  const val = Math.max(1, parseInt(e.target.value) || 1);
+                  setSpotsPerLoop(val);
+                  emitChange({ spotsPerLoop: val });
+                }}
+                className="h-9 w-12 text-center border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg text-sm"
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  const val = spotsPerLoop + 1;
+                  setSpotsPerLoop(val);
+                  emitChange({ spotsPerLoop: val });
+                }}
+                className="h-9 w-9 flex items-center justify-center border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700"
+              >
+                <Plus className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <label className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400 mb-1.5 block">
+              {t('scheduleGrid.spotsPerHour')}
+            </label>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => {
+                  const val = Math.max(1, spotsPerHour - 1);
+                  setSpotsPerHour(val);
+                  emitChange({ spotsPerHour: val });
+                }}
+                className="h-9 w-9 flex items-center justify-center border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700"
+              >
+                <Minus className="h-4 w-4" />
+              </button>
+              <input
+                type="number"
+                value={spotsPerHour}
+                onChange={(e) => {
+                  const val = Math.max(1, parseInt(e.target.value) || 1);
+                  setSpotsPerHour(val);
+                  emitChange({ spotsPerHour: val });
+                }}
+                className="h-9 w-12 text-center border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg text-sm"
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  const val = spotsPerHour + 1;
+                  setSpotsPerHour(val);
+                  emitChange({ spotsPerHour: val });
+                }}
+                className="h-9 w-9 flex items-center justify-center border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700"
+              >
+                <Plus className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg overflow-hidden">
+        <div className="flex items-center justify-between px-4 py-2 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+          <div className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">
+            {t('scheduleGrid.scheduleGrids')}
+          </div>
+          <div className="flex items-center gap-4">
+            <label className="flex items-center gap-1.5 text-sm text-mw-neutral-600 cursor-pointer">
+              <input
+                type="radio"
+                name="selectMode"
+                onChange={handleSelectAll}
+                className="text-mw-primary-500"
+              />
+              {t('scheduleGrid.selectAll')}
+            </label>
+            <label className="flex items-center gap-1.5 text-sm text-mw-neutral-600 cursor-pointer">
+              <input
+                type="radio"
+                name="selectMode"
+                onChange={handleDeselectAll}
+                className="text-mw-primary-500"
+              />
+              {t('scheduleGrid.deselectAll')}
+            </label>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto" ref={gridRef}>
+          <div className="min-w-max">
+            <div className="flex">
+              <div className="w-28 flex-shrink-0 px-3 py-2 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700">
+                <span className="text-xs font-medium text-mw-neutral-600 dark:text-mw-neutral-400">
+                  {t('scheduleGrid.dateHours')}
+                </span>
+              </div>
+              {HOURS.map((hour) => (
+                <div
+                  key={hour}
+                  className="w-8 flex-shrink-0 px-1 py-2 text-center bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700"
+                >
+                  <span className="text-xs font-medium text-mw-neutral-600 dark:text-mw-neutral-400">
+                    {hour}
+                  </span>
+                </div>
+              ))}
+            </div>
+
+            <div className="max-h-[300px] overflow-y-auto">
+              {dateRange.map((date) => {
+                const dayOfWeek = getDayOfWeek(date);
+                const isEnabledDay = selectedDays.includes(dayOfWeek);
+                
+                return (
+                  <div key={getDateKey(date)} className="flex">
+                    <div className="w-28 flex-shrink-0 px-3 py-1.5 bg-white dark:bg-mw-neutral-900 border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700">
+                      <span className="text-xs text-mw-neutral-700 dark:text-mw-neutral-300">
+                        {formatDateShort(date)}
+                      </span>
+                    </div>
+                    {HOURS.map((hour) => {
+                      const isSelected = isCellSelected(date, hour);
+                      const isBusinessHour = hour >= 7 && hour <= 19;
+                      
+                      return (
+                        <div
+                          key={`${getDateKey(date)}-${hour}`}
+                          onMouseDown={() => isEnabledDay && handleMouseDown(date, hour)}
+                          onMouseEnter={() => isEnabledDay && handleMouseEnter(date, hour)}
+                          className={cn(
+                            "w-8 h-7 flex-shrink-0 border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700 transition-colors",
+                            !isEnabledDay && "bg-mw-neutral-100 dark:bg-mw-neutral-800 cursor-not-allowed",
+                            isEnabledDay && !isSelected && "bg-white dark:bg-mw-neutral-900 cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900/20",
+                            isEnabledDay && isSelected && "bg-[#2176cc] cursor-pointer",
+                            isEnabledDay && isBusinessHour && !isSelected && "bg-blue-50/50 dark:bg-blue-900/10"
+                          )}
+                        />
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PlannerScheduleGrid;