adserver-dashboard 1.0.0

package/client/src/components/inventory/inventory-availability-view.tsx

@@ -0,0 +1,486 @@
+import { useState, useMemo } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { X, ChevronLeft, ChevronRight, Calendar, Filter } from "lucide-react";
+import { Sheet, SheetContent, cn } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Checkbox } from "@moving-walls/design-system";
+
+export interface AvailabilityInventoryItem {
+  id: string;
+  name: string;
+  address?: string;
+  publisherName?: string;
+}
+
+export type AvailabilityStatus = "available" | "booked" | "unavailable";
+
+export interface AvailabilitySlot {
+  date: string;
+  status: AvailabilityStatus;
+  bookingDetails?: {
+    dealName?: string;
+    clientName?: string;
+    startDate?: string;
+    endDate?: string;
+  };
+}
+
+export interface InventoryAvailability {
+  inventoryId: string;
+  slots: AvailabilitySlot[];
+}
+
+export interface InventoryAvailabilityViewProps {
+  inventories: AvailabilityInventoryItem[];
+  dateRange?: {
+    startDate: string;
+    endDate: string;
+  };
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+type ViewMode = "week" | "month";
+
+function generateMockAvailability(
+  inventoryId: string,
+  startDate: Date,
+  days: number
+): AvailabilitySlot[] {
+  const slots: AvailabilitySlot[] = [];
+  const seed = inventoryId.charCodeAt(0) + inventoryId.charCodeAt(inventoryId.length - 1);
+  
+  for (let i = 0; i < days; i++) {
+    const date = new Date(startDate);
+    date.setDate(date.getDate() + i);
+    const dateStr = date.toISOString().split("T")[0];
+    
+    const rand = (seed + i * 7) % 100;
+    let status: AvailabilityStatus;
+    let bookingDetails: AvailabilitySlot["bookingDetails"] | undefined;
+    
+    if (rand < 50) {
+      status = "available";
+    } else if (rand < 80) {
+      status = "booked";
+      bookingDetails = {
+        dealName: `Campaign ${Math.floor(rand / 10)}`,
+        clientName: `Client ${String.fromCharCode(65 + (rand % 26))}`,
+        startDate: dateStr,
+        endDate: new Date(date.getTime() + 3 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
+      };
+    } else {
+      status = "unavailable";
+    }
+    
+    slots.push({ date: dateStr, status, bookingDetails });
+  }
+  
+  return slots;
+}
+
+function getStatusColor(status: AvailabilityStatus): string {
+  switch (status) {
+    case "available":
+      return "bg-green-500";
+    case "booked":
+      return "bg-orange-500";
+    case "unavailable":
+      return "bg-gray-400";
+    default:
+      return "bg-gray-300";
+  }
+}
+
+function getStatusBgColor(status: AvailabilityStatus): string {
+  switch (status) {
+    case "available":
+      return "bg-green-100 dark:bg-green-900/30";
+    case "booked":
+      return "bg-orange-100 dark:bg-orange-900/30";
+    case "unavailable":
+      return "bg-gray-100 dark:bg-gray-800";
+    default:
+      return "bg-gray-50";
+  }
+}
+
+function formatDateHeader(date: Date, viewMode: ViewMode): string {
+  if (viewMode === "week") {
+    return date.toLocaleDateString("en-US", { weekday: "short", day: "numeric" });
+  }
+  return date.getDate().toString();
+}
+
+function isWeekend(date: Date): boolean {
+  const day = date.getDay();
+  return day === 0 || day === 6;
+}
+
+export function InventoryAvailabilityView({
+  inventories,
+  dateRange,
+  open,
+  onOpenChange,
+}: InventoryAvailabilityViewProps) {
+  const { t } = useTranslation('inventory');
+  const [viewMode, setViewMode] = useState<ViewMode>("week");
+  const [currentStartDate, setCurrentStartDate] = useState<Date>(() => {
+    if (dateRange?.startDate) {
+      return new Date(dateRange.startDate);
+    }
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const dayOfWeek = today.getDay();
+    const diff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+    today.setDate(today.getDate() + diff);
+    return today;
+  });
+  const [showOnlyAvailable, setShowOnlyAvailable] = useState(false);
+  const [hoveredSlot, setHoveredSlot] = useState<{
+    inventoryId: string;
+    slot: AvailabilitySlot;
+    position: { x: number; y: number };
+  } | null>(null);
+
+  const daysToShow = viewMode === "week" ? 7 : 30;
+
+  const dates = useMemo(() => {
+    const result: Date[] = [];
+    for (let i = 0; i < daysToShow; i++) {
+      const date = new Date(currentStartDate);
+      date.setDate(date.getDate() + i);
+      result.push(date);
+    }
+    return result;
+  }, [currentStartDate, daysToShow]);
+
+  const availabilityData = useMemo(() => {
+    const data: Map<string, AvailabilitySlot[]> = new Map();
+    inventories.forEach((inv) => {
+      data.set(inv.id, generateMockAvailability(inv.id, currentStartDate, daysToShow));
+    });
+    return data;
+  }, [inventories, currentStartDate, daysToShow]);
+
+  const filteredInventories = useMemo(() => {
+    if (!showOnlyAvailable) return inventories;
+    
+    return inventories.filter((inv) => {
+      const slots = availabilityData.get(inv.id);
+      return slots?.some((slot) => slot.status === "available");
+    });
+  }, [inventories, showOnlyAvailable, availabilityData]);
+
+  const handlePrevious = () => {
+    setCurrentStartDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setDate(newDate.getDate() - daysToShow);
+      return newDate;
+    });
+  };
+
+  const handleNext = () => {
+    setCurrentStartDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setDate(newDate.getDate() + daysToShow);
+      return newDate;
+    });
+  };
+
+  const handleToday = () => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    if (viewMode === "week") {
+      const dayOfWeek = today.getDay();
+      const diff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+      today.setDate(today.getDate() + diff);
+    } else {
+      today.setDate(1);
+    }
+    setCurrentStartDate(today);
+  };
+
+  const handleSlotHover = (
+    inventoryId: string,
+    slot: AvailabilitySlot,
+    event: React.MouseEvent
+  ) => {
+    if (slot.status === "booked" && slot.bookingDetails) {
+      const rect = event.currentTarget.getBoundingClientRect();
+      setHoveredSlot({
+        inventoryId,
+        slot,
+        position: { x: rect.left + rect.width / 2, y: rect.top },
+      });
+    }
+  };
+
+  const getHeaderDateRange = (): string => {
+    const endDate = new Date(currentStartDate);
+    endDate.setDate(endDate.getDate() + daysToShow - 1);
+    
+    const startMonth = currentStartDate.toLocaleDateString("en-US", { month: "short" });
+    const endMonth = endDate.toLocaleDateString("en-US", { month: "short" });
+    const year = currentStartDate.getFullYear();
+    
+    if (startMonth === endMonth) {
+      return `${currentStartDate.getDate()} - ${endDate.getDate()} ${startMonth} ${year}`;
+    }
+    return `${currentStartDate.getDate()} ${startMonth} - ${endDate.getDate()} ${endMonth} ${year}`;
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="w-[90vw] sm:max-w-[900px] p-0 flex flex-col h-full overflow-hidden"
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0">
+          <div className="flex items-center gap-3">
+            <Calendar className="h-5 w-5 text-mw-primary-500" />
+            <div>
+              <h2 className="text-lg font-semibold text-mw-neutral-900 dark:text-white">
+                {t('availability.title')}
+              </h2>
+              <p className="text-sm text-mw-neutral-500">
+                {t('availability.subtitle')}
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onOpenChange(false)}
+            className="h-8 w-8 p-0 flex-shrink-0"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="flex items-center justify-between px-6 py-3 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0 bg-mw-neutral-50 dark:bg-mw-neutral-900">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-1 bg-white dark:bg-mw-neutral-800 rounded-lg p-1 border border-mw-neutral-200 dark:border-mw-neutral-700">
+              <Button
+                type="button"
+                variant={viewMode === "week" ? "primary" : "ghost"}
+                size="sm"
+                onClick={() => setViewMode("week")}
+              >
+                {t('availability.week')}
+              </Button>
+              <Button
+                type="button"
+                variant={viewMode === "month" ? "primary" : "ghost"}
+                size="sm"
+                onClick={() => setViewMode("month")}
+              >
+                {t('availability.month')}
+              </Button>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handlePrevious}
+                className="h-8 w-8 p-0"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300 min-w-[180px] text-center">
+                {getHeaderDateRange()}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleNext}
+                className="h-8 w-8 p-0"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleToday}
+                className="h-8 px-3 text-xs"
+              >
+                {t('availability.today')}
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Filter className="h-4 w-4 text-mw-neutral-500" />
+            <Checkbox
+              id="show-available"
+              checked={showOnlyAvailable}
+              onChange={() => setShowOnlyAvailable(!showOnlyAvailable)}
+            />
+            <label
+              htmlFor="show-available"
+              className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400 cursor-pointer"
+            >
+              {t('availability.showOnlyAvailable')}
+            </label>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-auto">
+          <div
+            className="grid"
+            style={{
+              gridTemplateColumns: `200px repeat(${daysToShow}, minmax(${viewMode === "week" ? "80px" : "30px"}, 1fr))`,
+            }}
+          >
+            <div className="sticky left-0 z-20 bg-white dark:bg-mw-neutral-900 border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700 px-4 py-3">
+              <span className="text-xs font-semibold text-mw-neutral-500 uppercase tracking-wider">
+                {t('availability.inventory')}
+              </span>
+            </div>
+            {dates.map((date, idx) => (
+              <div
+                key={idx}
+                className={cn(
+                  "border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700 px-2 py-3 text-center",
+                  isWeekend(date) && "bg-mw-neutral-50 dark:bg-mw-neutral-800/50"
+                )}
+              >
+                <span className={cn(
+                  "text-xs font-medium",
+                  isWeekend(date) 
+                    ? "text-mw-neutral-400" 
+                    : "text-mw-neutral-700 dark:text-mw-neutral-300"
+                )}>
+                  {formatDateHeader(date, viewMode)}
+                </span>
+                {viewMode === "month" && (
+                  <div className="text-[10px] text-mw-neutral-400 mt-0.5">
+                    {date.toLocaleDateString("en-US", { weekday: "narrow" })}
+                  </div>
+                )}
+              </div>
+            ))}
+
+            {filteredInventories.map((inventory) => {
+              const slots = availabilityData.get(inventory.id) || [];
+              return (
+                <>
+                  <div
+                    key={`inv-${inventory.id}`}
+                    className="sticky left-0 z-10 bg-white dark:bg-mw-neutral-900 border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700 px-4 py-3"
+                  >
+                    <div className="truncate">
+                      <p className="text-sm font-medium text-mw-neutral-900 dark:text-white truncate">
+                        {inventory.name}
+                      </p>
+                      {inventory.address && (
+                        <p className="text-xs text-mw-neutral-500 truncate mt-0.5">
+                          {inventory.address}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  {slots.map((slot, slotIdx) => (
+                    <div
+                      key={`slot-${inventory.id}-${slotIdx}`}
+                      className={cn(
+                        "border-b border-r border-mw-neutral-200 dark:border-mw-neutral-700 p-1 flex items-center justify-center",
+                        isWeekend(dates[slotIdx]) && "bg-mw-neutral-50 dark:bg-mw-neutral-800/50"
+                      )}
+                      onMouseEnter={(e) => handleSlotHover(inventory.id, slot, e)}
+                      onMouseLeave={() => setHoveredSlot(null)}
+                    >
+                      <div
+                        className={cn(
+                          "w-full h-6 rounded cursor-pointer transition-all hover:opacity-80",
+                          getStatusBgColor(slot.status),
+                          "flex items-center justify-center"
+                        )}
+                      >
+                        <div
+                          className={cn(
+                            "w-2 h-2 rounded-full",
+                            getStatusColor(slot.status)
+                          )}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </>
+              );
+            })}
+          </div>
+
+          {filteredInventories.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <Calendar className="h-12 w-12 text-mw-neutral-300 mb-4" />
+              <h3 className="text-lg font-semibold text-mw-neutral-900 dark:text-white mb-2">
+                {t('availability.noInventories')}
+              </h3>
+              <p className="text-sm text-mw-neutral-500 max-w-xs">
+                {showOnlyAvailable
+                  ? t('availability.noAvailableSlots')
+                  : t('availability.addInventories')}
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between px-6 py-3 border-t border-mw-neutral-200 dark:border-mw-neutral-700 bg-mw-neutral-50 dark:bg-mw-neutral-900 flex-shrink-0">
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-green-500" />
+              <span className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                {t('availability.available')}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-orange-500" />
+              <span className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                {t('availability.booked')}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-gray-400" />
+              <span className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                {t('availability.unavailable')}
+              </span>
+            </div>
+          </div>
+          <p className="text-xs text-mw-neutral-500">
+            {t('availability.showing', { count: filteredInventories.length, total: inventories.length })}
+          </p>
+        </div>
+
+        {hoveredSlot && hoveredSlot.slot.bookingDetails && (
+          <div
+            className="fixed z-50 bg-white dark:bg-mw-neutral-800 rounded-lg shadow-lg border border-mw-neutral-200 dark:border-mw-neutral-700 p-3 pointer-events-none"
+            style={{
+              left: hoveredSlot.position.x,
+              top: hoveredSlot.position.y - 10,
+              transform: "translate(-50%, -100%)",
+            }}
+          >
+            <div className="text-xs space-y-1">
+              <p className="font-semibold text-mw-neutral-900 dark:text-white">
+                {hoveredSlot.slot.bookingDetails.dealName}
+              </p>
+              <p className="text-mw-neutral-500">
+                {t('availability.client')} {hoveredSlot.slot.bookingDetails.clientName}
+              </p>
+              <p className="text-mw-neutral-500">
+                {hoveredSlot.slot.bookingDetails.startDate} - {hoveredSlot.slot.bookingDetails.endDate}
+              </p>
+            </div>
+            <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-full">
+              <div className="border-8 border-transparent border-t-white dark:border-t-mw-neutral-800" />
+            </div>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default InventoryAvailabilityView;