adserver-dashboard 1.0.0

package/client/src/components/line-items/inventory-availability-section.tsx

@@ -0,0 +1,178 @@
+import { useMemo } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Calendar, Eye, CheckCircle, Clock, AlertTriangle, XCircle, Wrench } from "lucide-react";
+
+export type AvailabilityStatus = "available" | "booked" | "hold" | "maintenance" | "pending" | "unavailable";
+
+export interface ScreenAvailability {
+  screenId: string;
+  status: AvailabilityStatus;
+  bookedBy?: string;
+  bookedUntil?: string;
+}
+
+interface InventoryAvailabilitySectionProps {
+  selectedScreenIds: string[];
+  startDate?: string;
+  endDate?: string;
+  onViewDetails?: () => void;
+}
+
+const STATUS_CONFIG: Record<AvailabilityStatus, { label: string; color: string; icon: typeof CheckCircle }> = {
+  available: { label: "Available", color: "bg-green-500", icon: CheckCircle },
+  booked: { label: "Booked", color: "bg-red-500", icon: XCircle },
+  hold: { label: "Hold", color: "bg-amber-500", icon: Clock },
+  maintenance: { label: "Maintenance", color: "bg-gray-500", icon: Wrench },
+  pending: { label: "Pending", color: "bg-blue-500", icon: Clock },
+  unavailable: { label: "Unavailable", color: "bg-gray-400", icon: AlertTriangle },
+};
+
+function seededRandom(seed: string): number {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    const char = seed.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash % 100) / 100;
+}
+
+function generateMockAvailability(screenIds: string[]): ScreenAvailability[] {
+  const advertisers = ["BMW", "Apple", "Nike", "Samsung", "Coca-Cola", "Netflix", "Microsoft", "Tudor"];
+  return screenIds.map((screenId, index) => {
+    const rand = seededRandom(screenId);
+    let status: AvailabilityStatus;
+    if (rand < 0.6) status = "available";
+    else if (rand < 0.75) status = "booked";
+    else if (rand < 0.85) status = "hold";
+    else if (rand < 0.92) status = "pending";
+    else if (rand < 0.96) status = "maintenance";
+    else status = "unavailable";
+
+    return {
+      screenId,
+      status,
+      bookedBy: status === "booked" ? advertisers[index % advertisers.length] : undefined,
+      bookedUntil: status === "booked" ? "2026-03-15" : undefined,
+    };
+  });
+}
+
+export function InventoryAvailabilitySection({
+  selectedScreenIds,
+  startDate,
+  endDate,
+  onViewDetails,
+}: InventoryAvailabilitySectionProps) {
+  const availability = useMemo(() => {
+    return generateMockAvailability(selectedScreenIds);
+  }, [selectedScreenIds]);
+
+  const statusCounts = useMemo(() => {
+    const counts: Record<AvailabilityStatus, number> = {
+      available: 0,
+      booked: 0,
+      hold: 0,
+      maintenance: 0,
+      pending: 0,
+      unavailable: 0,
+    };
+    availability.forEach((a) => {
+      counts[a.status]++;
+    });
+    return counts;
+  }, [availability]);
+
+  const totalScreens = selectedScreenIds.length;
+  const availableCount = statusCounts.available;
+  const availabilityPercent = totalScreens > 0 ? Math.round((availableCount / totalScreens) * 100) : 0;
+
+  if (totalScreens === 0) {
+    return null;
+  }
+
+  return (
+    <Card data-testid="section-inventory-availability">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Calendar className="h-4 w-4 text-mw-neutral-500" />
+            Inventory Availability
+          </CardTitle>
+          {onViewDetails && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onViewDetails}
+              data-testid="button-view-availability-details"
+            >
+              <Eye className="h-4 w-4 mr-1" />
+              View Details
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0 space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <div className="text-2xl font-semibold text-mw-neutral-900 dark:text-white" data-testid="text-availability-percent">
+              {availabilityPercent}%
+            </div>
+            <div className="text-xs text-mw-neutral-500">
+              {availableCount} of {totalScreens} screens available
+              {startDate && endDate && (
+                <span className="ml-1">for selected dates</span>
+              )}
+            </div>
+          </div>
+          <div className="h-16 w-16 relative">
+            <svg viewBox="0 0 36 36" className="h-16 w-16 transform -rotate-90">
+              <path
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                className="text-mw-neutral-200 dark:text-mw-neutral-700"
+              />
+              <path
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeDasharray={`${availabilityPercent}, 100`}
+                className="text-green-500"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {Object.entries(statusCounts).map(([status, count]) => {
+            if (count === 0) return null;
+            const config = STATUS_CONFIG[status as AvailabilityStatus];
+            return (
+              <Badge
+                key={status}
+                variant="secondary"
+                className="text-xs"
+                data-testid={`badge-status-${status}`}
+              >
+                <span className={`w-2 h-2 rounded-full mr-1.5 ${config.color}`} />
+                {config.label}: {count}
+              </Badge>
+            );
+          })}
+        </div>
+
+        {statusCounts.booked > 0 && (
+          <div className="text-xs text-mw-neutral-500 border-t border-mw-neutral-200 dark:border-mw-neutral-700 pt-3">
+            <span className="font-medium text-amber-600">{statusCounts.booked} screen{statusCounts.booked !== 1 ? 's' : ''}</span>
+            {" "}currently booked. Consider adjusting dates or selecting alternatives.
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/client/src/components/line-items/line-item-schedule-manager.tsx

@@ -0,0 +1,313 @@
+import { useState, useMemo, useEffect } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { 
+  Plus, 
+  Pencil, 
+  Trash2, 
+  ChevronDown
+} from "lucide-react";
+import { Button } from "@moving-walls/design-system";
+import { cn } from "@moving-walls/design-system";
+import { 
+  ScheduleRule, 
+  LineItemScheduleData,
+  createDefaultSchedule,
+  createWeekdaySchedule,
+  createWeekendSchedule,
+  createCustomSchedule,
+  getScheduleDisplayName,
+  formatScheduleDays,
+  formatScheduleHours,
+} from "./schedule-rule-types";
+import { ScheduleRuleEditor } from "./schedule-rule-editor";
+
+interface LineItemScheduleManagerProps {
+  startDate: string;
+  endDate: string;
+  value?: LineItemScheduleData;
+  onChange?: (data: LineItemScheduleData) => void;
+  className?: string;
+  isReadOnly?: boolean;
+}
+
+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 formatDateDisplay(dateStr: string): string {
+  try {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-GB", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+export function LineItemScheduleManager({
+  startDate,
+  endDate,
+  value,
+  onChange,
+  className,
+  isReadOnly = false,
+}: LineItemScheduleManagerProps) {
+  const { t } = useTranslation('lineItems');
+  const [selectedScheduleIndex, setSelectedScheduleIndex] = useState(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [editingSchedule, setEditingSchedule] = useState<ScheduleRule | null>(null);
+  const [isAddMenuOpen, setIsAddMenuOpen] = useState(false);
+
+  const parsedStartDate = parseDate(startDate);
+  const parsedEndDate = parseDate(endDate);
+
+  const defaultScheduleData: LineItemScheduleData = useMemo(() => ({
+    schedules: [createDefaultSchedule(parsedStartDate, parsedEndDate)],
+  }), [parsedStartDate, parsedEndDate]);
+
+  const scheduleData: LineItemScheduleData = value || defaultScheduleData;
+
+  useEffect(() => {
+    if (!value && onChange) {
+      onChange(defaultScheduleData);
+    }
+  }, []);
+
+  const currentSchedule = scheduleData.schedules[selectedScheduleIndex] || scheduleData.schedules[0];
+
+  const handleAddSchedule = (type: "DEFAULT" | "WEEKDAY" | "WEEKEND" | "CUSTOM") => {
+    let newSchedule: ScheduleRule;
+    switch (type) {
+      case "WEEKDAY":
+        newSchedule = createWeekdaySchedule(parsedStartDate, parsedEndDate);
+        break;
+      case "WEEKEND":
+        newSchedule = createWeekendSchedule(parsedStartDate, parsedEndDate);
+        break;
+      case "CUSTOM":
+        newSchedule = createCustomSchedule(parsedStartDate, parsedEndDate);
+        break;
+      default:
+        newSchedule = createDefaultSchedule(parsedStartDate, parsedEndDate);
+    }
+    
+    const newSchedules = [...scheduleData.schedules, newSchedule];
+    onChange?.({
+      ...scheduleData,
+      schedules: newSchedules,
+    });
+    setSelectedScheduleIndex(newSchedules.length - 1);
+    setIsAddMenuOpen(false);
+  };
+
+  const handleEditSchedule = () => {
+    setEditingSchedule(currentSchedule);
+    setIsEditorOpen(true);
+  };
+
+  const handleDeleteSchedule = () => {
+    if (scheduleData.schedules.length <= 1) return;
+    
+    const newSchedules = scheduleData.schedules.filter((_, i) => i !== selectedScheduleIndex);
+    onChange?.({
+      ...scheduleData,
+      schedules: newSchedules,
+    });
+    setSelectedScheduleIndex(Math.max(0, selectedScheduleIndex - 1));
+  };
+
+  const handleSaveSchedule = (updatedSchedule: ScheduleRule) => {
+    const newSchedules = scheduleData.schedules.map((s, i) => 
+      i === selectedScheduleIndex ? updatedSchedule : s
+    );
+    onChange?.({
+      ...scheduleData,
+      schedules: newSchedules,
+    });
+    setIsEditorOpen(false);
+    setEditingSchedule(null);
+  };
+
+  const scheduleDays = useMemo(() => {
+    if (!currentSchedule) return "—";
+    if (currentSchedule.type === "DEFAULT") return "Mon Tue Wed Thu Fri Sat Sun";
+    if (currentSchedule.type === "WEEKDAY") return "Mon Tue Wed Thu Fri";
+    if (currentSchedule.type === "WEEKEND") return "Sat Sun";
+    if (currentSchedule.type === "CUSTOM" && currentSchedule.date) {
+      const date = new Date(currentSchedule.date);
+      return date.toLocaleDateString("en-US", { weekday: "short" });
+    }
+    return formatScheduleDays(currentSchedule);
+  }, [currentSchedule]);
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">
+          {t('scheduleManager.scheduleXOfY', { current: selectedScheduleIndex + 1, total: scheduleData.schedules.length })}
+        </span>
+        <div className="flex items-center gap-1">
+          <div className="relative">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              className="min-w-[180px]"
+            >
+              <span className="flex-1 text-left truncate">
+                {getScheduleDisplayName(currentSchedule, selectedScheduleIndex)}
+              </span>
+              <ChevronDown className="h-4 w-4 text-mw-neutral-400" />
+            </Button>
+            {isDropdownOpen && (
+              <div className="absolute top-full left-0 mt-1 w-full bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg shadow-lg z-10">
+                {scheduleData.schedules.map((schedule, index) => (
+                  <Button
+                    key={schedule.id}
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setSelectedScheduleIndex(index);
+                      setIsDropdownOpen(false);
+                    }}
+                    className={cn(
+                      "w-full",
+                      index === selectedScheduleIndex && "bg-mw-primary-50 dark:bg-mw-primary-900/20"
+                    )}
+                  >
+                    {getScheduleDisplayName(schedule, index)}
+                  </Button>
+                ))}
+              </div>
+            )}
+          </div>
+          
+          {!isReadOnly && (
+            <>
+              <div className="relative">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  isIconOnly
+                  onClick={() => setIsAddMenuOpen(!isAddMenuOpen)}
+                  title={t('scheduleManager.addSchedule')}
+                >
+                  <Plus className="h-4 w-4 text-mw-neutral-500" />
+                </Button>
+                {isAddMenuOpen && (
+                  <div className="absolute top-full right-0 mt-1 w-40 bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg shadow-lg z-10">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleAddSchedule("DEFAULT")}
+                      className="w-full"
+                    >
+                      {t('scheduleManager.default')}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleAddSchedule("WEEKDAY")}
+                      className="w-full"
+                    >
+                      {t('scheduleManager.weekday')}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleAddSchedule("WEEKEND")}
+                      className="w-full"
+                    >
+                      {t('scheduleManager.weekend')}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleAddSchedule("CUSTOM")}
+                      className="w-full"
+                    >
+                      {t('scheduleManager.custom')}
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <Button
+                variant="outline"
+                size="sm"
+                isIconOnly
+                onClick={handleEditSchedule}
+                title={t('scheduleManager.editSchedule')}
+              >
+                <Pencil className="h-4 w-4 text-mw-neutral-500" />
+              </Button>
+              
+              <Button
+                variant="destructive"
+                size="sm"
+                isIconOnly
+                onClick={handleDeleteSchedule}
+                disabled={scheduleData.schedules.length <= 1}
+                title={t('scheduleManager.deleteSchedule')}
+              >
+                <Trash2 className={cn(
+                  "h-4 w-4",
+                  scheduleData.schedules.length <= 1 ? "text-mw-neutral-400" : "text-red-500"
+                )} />
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {currentSchedule && (
+        <div className="space-y-3">
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-mw-neutral-500">{t('scheduleManager.scheduleDates')}</span>
+            <span className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+              {formatDateDisplay(currentSchedule.validity.startDate)} - {formatDateDisplay(currentSchedule.validity.endDate)}
+            </span>
+          </div>
+          
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-mw-neutral-500">{t('scheduleManager.scheduleDays')}</span>
+            <span className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+              {scheduleDays}
+            </span>
+          </div>
+          
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-mw-neutral-500">{t('scheduleManager.hours')}</span>
+            <span className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+              {formatScheduleHours(currentSchedule)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {isEditorOpen && editingSchedule && (
+        <ScheduleRuleEditor
+          schedule={editingSchedule}
+          lineItemStartDate={parsedStartDate}
+          lineItemEndDate={parsedEndDate}
+          onSave={handleSaveSchedule}
+          onCancel={() => {
+            setIsEditorOpen(false);
+            setEditingSchedule(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}