adserver-dashboard 1.0.0

package/client/src/components/line-items/schedule-rule-editor.tsx

@@ -0,0 +1,649 @@
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from "@moving-walls/design-system";
+import { Label } from "@moving-walls/design-system";
+import { Checkbox } from "@moving-walls/design-system";
+import { DateRangePicker } from "@moving-walls/design-system";
+import { 
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@moving-walls/design-system";
+import { cn } from "@moving-walls/design-system";
+import {
+  X,
+  ChevronDown,
+  Hand
+} from "lucide-react";
+import { 
+  ScheduleRule, 
+  ScheduleHours,
+  ScheduleRuleType,
+  SCHEDULE_TYPE_LABELS,
+  WEEKDAY_DAYS,
+  WEEKEND_DAYS,
+} from "./schedule-rule-types";
+
+interface ScheduleRuleEditorProps {
+  schedule: ScheduleRule;
+  lineItemStartDate: string;
+  lineItemEndDate: string;
+  onSave: (schedule: ScheduleRule) => void;
+  onCancel: () => void;
+  isOpen?: boolean;
+}
+
+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);
+
+interface PresetOption {
+  value: string;
+  label: string;
+  hours: ScheduleHours[];
+  apiType: ScheduleRuleType;
+}
+
+const PRESET_OPTIONS: PresetOption[] = [
+  { value: "business", label: "Business Hours", hours: [{ start: 9, end: 17 }], apiType: "DEFAULT" },
+  { value: "nightlife", label: "Nightlife", hours: [{ start: 18, end: 23 }], apiType: "DEFAULT" },
+  { value: "weekday", label: "Weekday Schedule", hours: [{ start: 8, end: 22 }], apiType: "WEEKDAY" },
+  { value: "weekend", label: "Weekend Focus", hours: [{ start: 10, end: 20 }], apiType: "WEEKEND" },
+  { value: "247", label: "24/7", hours: [{ start: 0, end: 24 }], apiType: "DEFAULT" },
+  { value: "custom", label: "Custom", hours: [], apiType: "CUSTOM" },
+];
+
+function hoursToSet(hoursArray: ScheduleHours[]): Set<number> {
+  const set = new Set<number>();
+  hoursArray.forEach((h) => {
+    for (let i = h.start; i < h.end; i++) {
+      set.add(i);
+    }
+  });
+  return set;
+}
+
+function setsEqual(a: Set<number>, b: Set<number>): boolean {
+  if (a.size !== b.size) return false;
+  const aArray = Array.from(a);
+  for (let i = 0; i < aArray.length; i++) {
+    if (!b.has(aArray[i])) return false;
+  }
+  return true;
+}
+
+function detectPresetFromHours(hours: ScheduleHours[], type: ScheduleRuleType): string {
+  const currentSet = hoursToSet(hours);
+  
+  if (type === "WEEKDAY") {
+    const weekdayPreset = PRESET_OPTIONS.find(p => p.value === "weekday");
+    if (weekdayPreset && setsEqual(currentSet, hoursToSet(weekdayPreset.hours))) {
+      return "weekday";
+    }
+  }
+  
+  if (type === "WEEKEND") {
+    const weekendPreset = PRESET_OPTIONS.find(p => p.value === "weekend");
+    if (weekendPreset && setsEqual(currentSet, hoursToSet(weekendPreset.hours))) {
+      return "weekend";
+    }
+  }
+  
+  for (const preset of PRESET_OPTIONS) {
+    if (preset.value === "custom" || preset.value === "weekday" || preset.value === "weekend") continue;
+    const presetSet = hoursToSet(preset.hours);
+    if (setsEqual(currentSet, presetSet)) {
+      return preset.value;
+    }
+  }
+  return "custom";
+}
+
+function parseDate(dateStr: string): Date {
+  if (!dateStr) return new Date();
+  const date = new Date(dateStr);
+  return isNaN(date.getTime()) ? new Date() : date;
+}
+
+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 formatDateForInput(date: Date): string {
+  return date.toISOString().split("T")[0];
+}
+
+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 ScheduleRuleEditor({
+  schedule,
+  lineItemStartDate,
+  lineItemEndDate,
+  onSave,
+  onCancel,
+  isOpen = true,
+}: ScheduleRuleEditorProps) {
+  const { t } = useTranslation('lineItems');
+  const gridRef = useRef<HTMLDivElement>(null);
+  const [editedSchedule, setEditedSchedule] = useState<ScheduleRule>({ ...schedule });
+  const [selectedDays, setSelectedDays] = useState<number[]>(
+    schedule.daysOfWeek || (schedule.type === "DEFAULT" ? [1, 2, 3, 4, 5, 6, 7] : 
+    schedule.type === "WEEKDAY" ? WEEKDAY_DAYS : 
+    schedule.type === "WEEKEND" ? WEEKEND_DAYS : [1, 2, 3, 4, 5, 6, 7])
+  );
+  const [dateHours, setDateHours] = useState<Record<string, number[]>>({});
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragMode, setDragMode] = useState<"select" | "deselect">("select");
+  const [showPresetDropdown, setShowPresetDropdown] = useState(false);
+  const [selectAllDays, setSelectAllDays] = useState(selectedDays.length === 7);
+  
+  const initialPreset = useMemo(() => detectPresetFromHours(schedule.hours, schedule.type), [schedule.hours, schedule.type]);
+  const [selectedPreset, setSelectedPreset] = useState<string>(initialPreset);
+  const [userModifiedGrid, setUserModifiedGrid] = useState(false);
+
+  const lineItemStart = useMemo(() => parseDate(lineItemStartDate), [lineItemStartDate]);
+  const lineItemEnd = useMemo(() => parseDate(lineItemEndDate), [lineItemEndDate]);
+
+  const parsedStartDate = useMemo(() => parseDate(editedSchedule.validity.startDate), [editedSchedule.validity.startDate]);
+  const parsedEndDate = useMemo(() => parseDate(editedSchedule.validity.endDate), [editedSchedule.validity.endDate]);
+
+  const scheduleDateRange = useMemo(() => ({
+    from: parsedStartDate,
+    to: parsedEndDate
+  }), [parsedStartDate, parsedEndDate]);
+
+  const handleDateRangeChange = (range: { from: Date | null; to: Date | null }) => {
+    if (range.from && range.to) {
+      setEditedSchedule(prev => ({
+        ...prev,
+        validity: {
+          ...prev.validity,
+          startDate: formatDateForInput(range.from!),
+          endDate: formatDateForInput(range.to!),
+        }
+      }));
+    } else if (range.from) {
+      setEditedSchedule(prev => ({
+        ...prev,
+        validity: {
+          ...prev.validity,
+          startDate: formatDateForInput(range.from!),
+        }
+      }));
+    }
+  };
+
+  const dateRange = useMemo(
+    () => generateDateRange(parsedStartDate, parsedEndDate),
+    [parsedStartDate, parsedEndDate]
+  );
+
+  useEffect(() => {
+    if (schedule.hours.length > 0) {
+      const initialHours: Record<string, number[]> = {};
+      const allDates = generateDateRange(parseDate(schedule.validity.startDate), parseDate(schedule.validity.endDate));
+      const scheduleDays = schedule.daysOfWeek || [1, 2, 3, 4, 5, 6, 7];
+      const filtered = allDates.filter((date) => scheduleDays.includes(getDayOfWeek(date)));
+      
+      filtered.forEach((date) => {
+        const key = getDateKey(date);
+        const hours: number[] = [];
+        schedule.hours.forEach((h) => {
+          for (let i = h.start; i < h.end; i++) {
+            if (!hours.includes(i)) hours.push(i);
+          }
+        });
+        initialHours[key] = hours;
+      });
+      setDateHours(initialHours);
+    }
+  }, []);
+
+  const handleCellToggle = useCallback((dateKey: string, hour: number) => {
+    setDateHours((prev) => {
+      const current = prev[dateKey] || [];
+      const newHours = current.includes(hour)
+        ? current.filter((h) => h !== hour)
+        : [...current, hour].sort((a, b) => a - b);
+      return { ...prev, [dateKey]: newHours };
+    });
+    if (!userModifiedGrid) {
+      setUserModifiedGrid(true);
+      setSelectedPreset("custom");
+    }
+  }, [userModifiedGrid]);
+
+  const handleMouseDown = (dateKey: string, hour: number) => {
+    const current = dateHours[dateKey] || [];
+    const mode = current.includes(hour) ? "deselect" : "select";
+    setDragMode(mode);
+    setIsDragging(true);
+    handleCellToggle(dateKey, hour);
+  };
+
+  const handleMouseEnter = (dateKey: string, hour: number) => {
+    if (!isDragging) return;
+    const current = dateHours[dateKey] || [];
+    if (dragMode === "select" && !current.includes(hour)) {
+      handleCellToggle(dateKey, hour);
+    } else if (dragMode === "deselect" && current.includes(hour)) {
+      handleCellToggle(dateKey, hour);
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  useEffect(() => {
+    const handleGlobalMouseUp = () => setIsDragging(false);
+    window.addEventListener("mouseup", handleGlobalMouseUp);
+    return () => window.removeEventListener("mouseup", handleGlobalMouseUp);
+  }, []);
+
+  const handleDayToggle = (day: number) => {
+    setSelectedDays((prev) => 
+      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day].sort()
+    );
+  };
+
+  const handleSelectAll = () => {
+    const allHours = HOURS.slice(0, 24);
+    const newDateHours: Record<string, number[]> = {};
+    dateRange.forEach((date) => {
+      if (selectedDays.includes(getDayOfWeek(date))) {
+        newDateHours[getDateKey(date)] = [...allHours];
+      }
+    });
+    setDateHours(newDateHours);
+    setUserModifiedGrid(true);
+    setSelectedPreset("custom");
+  };
+
+  const handleDeselectAll = () => {
+    setDateHours({});
+    setUserModifiedGrid(true);
+    setSelectedPreset("custom");
+  };
+
+  const handleRowSelect = (dateKey: string) => {
+    const currentHours = dateHours[dateKey] || [];
+    const allHours = HOURS.slice(0, 24);
+    const isRowFullySelected = allHours.every(h => currentHours.includes(h));
+    
+    setDateHours(prev => ({
+      ...prev,
+      [dateKey]: isRowFullySelected ? [] : [...allHours]
+    }));
+    setUserModifiedGrid(true);
+    setSelectedPreset("custom");
+  };
+
+  const handleColumnSelect = (hour: number) => {
+    const allSelected = dateRange.every(date => {
+      if (!selectedDays.includes(getDayOfWeek(date))) return true;
+      const key = getDateKey(date);
+      return (dateHours[key] || []).includes(hour);
+    });
+    
+    setDateHours(prev => {
+      const newDateHours = { ...prev };
+      dateRange.forEach(date => {
+        if (!selectedDays.includes(getDayOfWeek(date))) return;
+        const key = getDateKey(date);
+        const current = newDateHours[key] || [];
+        if (allSelected) {
+          newDateHours[key] = current.filter(h => h !== hour);
+        } else {
+          if (!current.includes(hour)) {
+            newDateHours[key] = [...current, hour].sort((a, b) => a - b);
+          }
+        }
+      });
+      return newDateHours;
+    });
+    setUserModifiedGrid(true);
+    setSelectedPreset("custom");
+  };
+
+  const handleApplyPreset = (preset: PresetOption) => {
+    const newDateHours: Record<string, number[]> = {};
+    
+    if (preset.value === "weekend") {
+      setSelectedDays(WEEKEND_DAYS);
+      dateRange.forEach((date) => {
+        if (WEEKEND_DAYS.includes(getDayOfWeek(date))) {
+          const hours: number[] = [];
+          preset.hours.forEach((h) => {
+            for (let i = h.start; i < h.end; i++) {
+              if (!hours.includes(i)) hours.push(i);
+            }
+          });
+          newDateHours[getDateKey(date)] = hours;
+        }
+      });
+    } else if (preset.value === "weekday") {
+      setSelectedDays(WEEKDAY_DAYS);
+      dateRange.forEach((date) => {
+        if (WEEKDAY_DAYS.includes(getDayOfWeek(date))) {
+          const hours: number[] = [];
+          preset.hours.forEach((h) => {
+            for (let i = h.start; i < h.end; i++) {
+              if (!hours.includes(i)) hours.push(i);
+            }
+          });
+          newDateHours[getDateKey(date)] = hours;
+        }
+      });
+    } else {
+      dateRange.forEach((date) => {
+        if (selectedDays.includes(getDayOfWeek(date))) {
+          const hours: number[] = [];
+          preset.hours.forEach((h) => {
+            for (let i = h.start; i < h.end; i++) {
+              if (!hours.includes(i)) hours.push(i);
+            }
+          });
+          newDateHours[getDateKey(date)] = hours;
+        }
+      });
+    }
+    
+    setDateHours(newDateHours);
+    setSelectedPreset(preset.value);
+    setUserModifiedGrid(false);
+    setShowPresetDropdown(false);
+  };
+
+  const handleSave = () => {
+    const hoursFromGrid: ScheduleHours[] = [];
+    const allSelectedHours = new Set<number>();
+    
+    Object.values(dateHours).forEach((hours) => {
+      hours.forEach((h) => allSelectedHours.add(h));
+    });
+    
+    const sortedHours = Array.from(allSelectedHours).sort((a, b) => a - b);
+    
+    if (sortedHours.length > 0) {
+      let start = sortedHours[0];
+      let end = sortedHours[0] + 1;
+      
+      for (let i = 1; i < sortedHours.length; i++) {
+        if (sortedHours[i] === end) {
+          end = sortedHours[i] + 1;
+        } else {
+          hoursFromGrid.push({ start, end });
+          start = sortedHours[i];
+          end = sortedHours[i] + 1;
+        }
+      }
+      hoursFromGrid.push({ start, end });
+    }
+    
+    const selectedPresetOption = PRESET_OPTIONS.find(p => p.value === selectedPreset);
+    const apiType: ScheduleRuleType = selectedPresetOption?.apiType || "DEFAULT";
+    
+    const presetLabel = selectedPresetOption?.label || "Custom";
+    
+    const updatedSchedule: ScheduleRule = {
+      ...editedSchedule,
+      type: apiType,
+      hours: hoursFromGrid.length > 0 ? hoursFromGrid : [{ start: 7, end: 23 }],
+      daysOfWeek: selectedDays,
+      name: presetLabel === "Custom" ? editedSchedule.name : presetLabel,
+      priority: editedSchedule.priority ?? (
+        apiType === "DEFAULT" ? 10 :
+        apiType === "CUSTOM" ? 100 : 50
+      ),
+    };
+    
+    onSave(updatedSchedule);
+  };
+
+  const currentPresetLabel = PRESET_OPTIONS.find(p => p.value === selectedPreset)?.label || "Custom";
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+      <SheetContent side="right" className="w-full sm:max-w-4xl p-0 flex flex-col">
+        <SheetHeader className="px-6 py-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <SheetTitle className="text-lg font-semibold">
+              {t('scheduleEditor.editSchedule', { name: editedSchedule.name || SCHEDULE_TYPE_LABELS[editedSchedule.type] })}
+            </SheetTitle>
+            <button
+              type="button"
+              onClick={onCancel}
+              className="p-1.5 hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-800 rounded-full"
+            >
+              <X className="h-5 w-5 text-mw-neutral-500" />
+            </button>
+          </div>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto p-6">
+          <div className="grid grid-cols-2 gap-6 mb-6">
+            <div>
+              <Label className="text-sm font-medium mb-2 block">{t('scheduleEditor.scheduleDate')}</Label>
+              <DateRangePicker
+                value={scheduleDateRange}
+                onChange={handleDateRangeChange}
+                placeholder={t('scheduleEditor.selectScheduleDateRange')}
+                minDate={lineItemStart}
+                maxDate={lineItemEnd}
+                format="dd/MM/yyyy"
+                numberOfMonths={2}
+              />
+              <p className="text-xs text-mw-neutral-500 mt-1">
+                {t('scheduleEditor.withinLineItemDates', { start: formatDateShort(lineItemStart), end: formatDateShort(lineItemEnd) })}
+              </p>
+            </div>
+            
+            <div>
+              <Label className="text-sm font-medium mb-2 block">{t('scheduleEditor.selectDaysOfSchedule')}</Label>
+              <div className="flex items-center gap-1">
+                <Checkbox
+                  checked={selectAllDays}
+                  onChange={() => {
+                    const newSelectAll = !selectAllDays;
+                    setSelectAllDays(newSelectAll);
+                    setSelectedDays(newSelectAll ? [1, 2, 3, 4, 5, 6, 7] : []);
+                  }}
+                />
+                <span className="text-xs text-mw-neutral-500 mr-2">{t('scheduleEditor.selectAllDays')}</span>
+                {DAYS_OF_WEEK.map((day) => (
+                  <button
+                    key={day.key}
+                    type="button"
+                    onClick={() => handleDayToggle(day.key)}
+                    className={cn(
+                      "w-9 h-8 text-xs font-medium rounded transition-colors",
+                      selectedDays.includes(day.key)
+                        ? "bg-mw-primary-500 text-white"
+                        : "bg-mw-neutral-100 text-mw-neutral-600 hover:bg-mw-neutral-200 dark:bg-mw-neutral-800 dark:text-mw-neutral-400"
+                    )}
+                  >
+                    {day.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-4">
+            <div className="flex items-center justify-between mb-3">
+              <Label className="text-sm font-medium">{t('scheduleEditor.scheduleGrids')}</Label>
+              <div className="flex items-center gap-4">
+                <label className="flex items-center gap-2 text-sm">
+                  <input
+                    type="radio"
+                    name="selectMode"
+                    onChange={handleSelectAll}
+                    className="text-mw-primary-500"
+                  />
+                  {t('scheduleEditor.selectAll')}
+                </label>
+                <label className="flex items-center gap-2 text-sm">
+                  <input
+                    type="radio"
+                    name="selectMode"
+                    onChange={handleDeselectAll}
+                    className="text-mw-primary-500"
+                  />
+                  {t('scheduleEditor.deselectAll')}
+                </label>
+                
+                <div className="relative">
+                  <button
+                    type="button"
+                    onClick={() => setShowPresetDropdown(!showPresetDropdown)}
+                    className="flex items-center gap-2 px-3 py-1.5 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg text-sm min-w-[160px]"
+                  >
+                    <span className="flex-1 text-left">{currentPresetLabel}</span>
+                    <ChevronDown className="h-4 w-4" />
+                  </button>
+                  {showPresetDropdown && (
+                    <div className="absolute top-full right-0 mt-1 w-48 bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg shadow-lg z-[60]">
+                      {PRESET_OPTIONS.map((preset) => (
+                        <button
+                          key={preset.value}
+                          type="button"
+                          onClick={() => handleApplyPreset(preset)}
+                          className={cn(
+                            "w-full px-3 py-2 text-left text-sm hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 first:rounded-t-lg last:rounded-b-lg",
+                            selectedPreset === preset.value && "bg-mw-primary-50 dark:bg-mw-primary-900/20 text-mw-primary-600"
+                          )}
+                        >
+                          {preset.label}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div 
+              ref={gridRef}
+              className="border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg overflow-auto max-h-[500px]"
+              onMouseUp={handleMouseUp}
+              onMouseLeave={handleMouseUp}
+            >
+              <table className="w-full border-collapse text-xs">
+                <thead className="sticky top-0 bg-white dark:bg-mw-neutral-900 z-10">
+                  <tr>
+                    <th className="p-2 text-left font-medium text-mw-neutral-500 border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700 min-w-[100px]">
+                      {t('scheduleEditor.dateHours')}
+                    </th>
+                    {HOURS.map((hour) => (
+                      <th 
+                        key={hour} 
+                        onClick={() => handleColumnSelect(hour)}
+                        className="p-1 text-center font-medium text-mw-neutral-500 border-b border-mw-neutral-200 dark:border-mw-neutral-700 min-w-[24px] cursor-pointer hover:bg-mw-primary-100 dark:hover:bg-mw-primary-900/30 transition-colors group"
+                        title={`Click to select/deselect hour ${hour} for all dates`}
+                      >
+                        <div className="flex flex-col items-center">
+                          <Hand className="h-3 w-3 text-mw-neutral-300 group-hover:text-mw-primary-500 mb-0.5" />
+                          <span>{hour}</span>
+                        </div>
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {dateRange.map((date) => {
+                    const dateKey = getDateKey(date);
+                    const selectedHours = dateHours[dateKey] || [];
+                    const dayOfWeek = getDayOfWeek(date);
+                    const isDaySelected = selectedDays.includes(dayOfWeek);
+                    
+                    return (
+                      <tr key={dateKey} className={cn(!isDaySelected && "opacity-40")}>
+                        <td 
+                          onClick={() => handleRowSelect(dateKey)}
+                          className="p-2 text-mw-neutral-700 dark:text-mw-neutral-300 border-r border-mw-neutral-200 dark:border-mw-neutral-700 whitespace-nowrap cursor-pointer hover:bg-mw-primary-100 dark:hover:bg-mw-primary-900/30 transition-colors group"
+                          title={`Click to select/deselect all hours for ${formatDateShort(date)}`}
+                        >
+                          <div className="flex items-center gap-1">
+                            <Hand className="h-3 w-3 text-mw-neutral-300 group-hover:text-mw-primary-500" />
+                            <span>{formatDateShort(date)}</span>
+                          </div>
+                        </td>
+                        {HOURS.map((hour) => {
+                          const isSelected = selectedHours.includes(hour);
+                          return (
+                            <td
+                              key={hour}
+                              onMouseDown={() => handleMouseDown(dateKey, hour)}
+                              onMouseEnter={() => handleMouseEnter(dateKey, hour)}
+                              className={cn(
+                                "p-0 border border-mw-neutral-100 dark:border-mw-neutral-800 cursor-pointer select-none transition-colors",
+                                isSelected
+                                  ? "bg-mw-primary-500"
+                                  : "bg-mw-neutral-50 dark:bg-mw-neutral-800 hover:bg-mw-primary-100 dark:hover:bg-mw-primary-900/30"
+                              )}
+                            >
+                              <div className="w-6 h-6" />
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+            <p className="text-xs text-mw-neutral-500 mt-2">
+              {t('scheduleEditor.showingDays', { count: dateRange.length })}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end px-6 py-4 border-t border-mw-neutral-200 dark:border-mw-neutral-700 bg-mw-neutral-50 dark:bg-mw-neutral-800 flex-shrink-0">
+          <div className="flex items-center gap-3">
+            <Button type="button" variant="outline" onClick={onCancel}>
+              {t('scheduleEditor.cancel')}
+            </Button>
+            <Button type="button" onClick={handleSave}>
+              {t('scheduleEditor.saveSchedule')}
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}