adserver-dashboard 1.0.0

package/client/src/components/inventory/inventory-details-sheet.tsx

@@ -0,0 +1,376 @@
+import { useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { X, ChevronLeft, ChevronRight, MapPin, BarChart3, Settings, Clock, Calendar, Image as ImageIcon } from "lucide-react";
+import { Sheet, SheetContent, cn } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@moving-walls/design-system";
+import type { InventoryPlanning } from "@/lib/inventory-api";
+
+export interface InventoryDetailsItem {
+  id: string;
+  name: string;
+  address?: string;
+  thumbnail?: string;
+  images?: string[];
+  publisherName?: string;
+  mediaOwner?: string;
+  type?: string;
+  mediaType?: string;
+  format?: string;
+  size?: string;
+  screens?: number;
+  operationMode?: string;
+  execution?: string;
+  operatingHours?: string;
+  planning?: InventoryPlanning;
+  location?: {
+    cityName?: string;
+    stateName?: string;
+    countryName?: string;
+    latitude?: number;
+    longitude?: number;
+  };
+  availability?: {
+    availableDays?: number;
+    totalDays?: number;
+    availabilityPercentage?: number;
+    summary?: string;
+  };
+}
+
+export interface InventoryDetailsSheetProps {
+  inventory: InventoryDetailsItem | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+type TabValue = "details" | "location" | "performance" | "operations" | "busyness" | "availability";
+
+const PLACEHOLDER_IMAGES = [
+  "/img/placeholder-billboard-1.jpg",
+  "/img/placeholder-billboard-2.jpg",
+  "/img/placeholder-billboard-3.jpg",
+  "/img/placeholder-billboard-4.jpg",
+  "/img/placeholder-billboard-5.jpg",
+];
+
+export function InventoryDetailsSheet({
+  inventory,
+  open,
+  onOpenChange,
+}: InventoryDetailsSheetProps) {
+  const { t } = useTranslation('inventory');
+  const [activeTab, setActiveTab] = useState<TabValue>("details");
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  if (!inventory) return null;
+
+  const images = inventory.images && inventory.images.length > 0 
+    ? inventory.images 
+    : inventory.thumbnail 
+      ? [inventory.thumbnail, ...PLACEHOLDER_IMAGES.slice(1)]
+      : PLACEHOLDER_IMAGES;
+
+  const handlePreviousImage = () => {
+    setCurrentImageIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  };
+
+  const handleNextImage = () => {
+    setCurrentImageIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+  };
+
+  const handleThumbnailClick = (index: number) => {
+    setCurrentImageIndex(index);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent 
+        side="right" 
+        className="w-[600px] sm:max-w-[600px] 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">
+          <h2 className="text-lg font-semibold text-mw-neutral-900 dark:text-white truncate pr-4">
+            {inventory.name}
+          </h2>
+          <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>
+
+        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabValue)} className="flex flex-col flex-1 overflow-hidden">
+          <div className="px-6 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0">
+            <TabsList className="h-12 bg-transparent border-0 p-0 gap-0">
+              <TabsTrigger 
+                value="details" 
+                className="relative h-12 px-4 rounded-none border-0 bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:text-teal-600 dark:data-[state=active]:text-teal-400 text-mw-neutral-600 dark:text-mw-neutral-400 font-medium text-sm data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:left-0 data-[state=active]:after:right-0 data-[state=active]:after:h-0.5 data-[state=active]:after:bg-teal-600 dark:data-[state=active]:after:bg-teal-400"
+              >
+                {t('details.tabs.details')}
+              </TabsTrigger>
+              <TabsTrigger 
+                value="location" 
+                className="relative h-12 px-4 rounded-none border-0 bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:text-teal-600 dark:data-[state=active]:text-teal-400 text-mw-neutral-600 dark:text-mw-neutral-400 font-medium text-sm data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:left-0 data-[state=active]:after:right-0 data-[state=active]:after:h-0.5 data-[state=active]:after:bg-teal-600 dark:data-[state=active]:after:bg-teal-400"
+              >
+                {t('details.tabs.locationMap')}
+              </TabsTrigger>
+              <TabsTrigger 
+                value="performance" 
+                className="relative h-12 px-4 rounded-none border-0 bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:text-teal-600 dark:data-[state=active]:text-teal-400 text-mw-neutral-600 dark:text-mw-neutral-400 font-medium text-sm data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:left-0 data-[state=active]:after:right-0 data-[state=active]:after:h-0.5 data-[state=active]:after:bg-teal-600 dark:data-[state=active]:after:bg-teal-400"
+              >
+                {t('details.tabs.performance')}
+              </TabsTrigger>
+              <TabsTrigger 
+                value="operations" 
+                className="relative h-12 px-4 rounded-none border-0 bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:text-teal-600 dark:data-[state=active]:text-teal-400 text-mw-neutral-600 dark:text-mw-neutral-400 font-medium text-sm data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:left-0 data-[state=active]:after:right-0 data-[state=active]:after:h-0.5 data-[state=active]:after:bg-teal-600 dark:data-[state=active]:after:bg-teal-400"
+              >
+                {t('details.tabs.operations')}
+              </TabsTrigger>
+              <TabsTrigger 
+                value="busyness" 
+                className="relative h-12 px-4 rounded-none border-0 bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:text-teal-600 dark:data-[state=active]:text-teal-400 text-mw-neutral-600 dark:text-mw-neutral-400 font-medium text-sm data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:left-0 data-[state=active]:after:right-0 data-[state=active]:after:h-0.5 data-[state=active]:after:bg-teal-600 dark:data-[state=active]:after:bg-teal-400"
+              >
+                {t('details.tabs.busyness')}
+              </TabsTrigger>
+              <TabsTrigger 
+                value="availability" 
+                className="relative h-12 px-4 rounded-none border-0 bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:text-teal-600 dark:data-[state=active]:text-teal-400 text-mw-neutral-600 dark:text-mw-neutral-400 font-medium text-sm data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:left-0 data-[state=active]:after:right-0 data-[state=active]:after:h-0.5 data-[state=active]:after:bg-teal-600 dark:data-[state=active]:after:bg-teal-400"
+              >
+                {t('details.tabs.availability')}
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          <div className="flex-1 overflow-y-auto">
+            <TabsContent value="details" className="m-0 p-6 focus-visible:outline-none focus-visible:ring-0">
+              <DetailsTabContent 
+                inventory={inventory}
+                images={images}
+                currentImageIndex={currentImageIndex}
+                onPreviousImage={handlePreviousImage}
+                onNextImage={handleNextImage}
+                onThumbnailClick={handleThumbnailClick}
+              />
+            </TabsContent>
+
+            <TabsContent value="location" className="m-0 p-6 focus-visible:outline-none focus-visible:ring-0">
+              <PlaceholderTabContent 
+                icon={MapPin}
+                title={t('details.tabs.locationMap')}
+                description={t('details.placeholder.locationMap')}
+              />
+            </TabsContent>
+
+            <TabsContent value="performance" className="m-0 p-6 focus-visible:outline-none focus-visible:ring-0">
+              <PlaceholderTabContent 
+                icon={BarChart3}
+                title={t('details.tabs.performance')}
+                description={t('details.placeholder.performance')}
+              />
+            </TabsContent>
+
+            <TabsContent value="operations" className="m-0 p-6 focus-visible:outline-none focus-visible:ring-0">
+              <PlaceholderTabContent 
+                icon={Settings}
+                title={t('details.tabs.operations')}
+                description={t('details.placeholder.operations')}
+              />
+            </TabsContent>
+
+            <TabsContent value="busyness" className="m-0 p-6 focus-visible:outline-none focus-visible:ring-0">
+              <PlaceholderTabContent 
+                icon={Clock}
+                title={t('details.tabs.busyness')}
+                description={t('details.placeholder.busyness')}
+              />
+            </TabsContent>
+
+            <TabsContent value="availability" className="m-0 p-6 focus-visible:outline-none focus-visible:ring-0">
+              <PlaceholderTabContent 
+                icon={Calendar}
+                title={t('details.tabs.availability')}
+                description={t('details.placeholder.availability')}
+              />
+            </TabsContent>
+          </div>
+        </Tabs>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+interface DetailsTabContentProps {
+  inventory: InventoryDetailsItem;
+  images: string[];
+  currentImageIndex: number;
+  onPreviousImage: () => void;
+  onNextImage: () => void;
+  onThumbnailClick: (index: number) => void;
+}
+
+function DetailsTabContent({
+  inventory,
+  images,
+  currentImageIndex,
+  onPreviousImage,
+  onNextImage,
+  onThumbnailClick,
+}: DetailsTabContentProps) {
+  const { t } = useTranslation('inventory');
+  const thumbnails = images.slice(0, 5);
+
+  return (
+    <div className="space-y-6">
+      <div className="relative rounded-lg overflow-hidden bg-mw-neutral-100 dark:bg-mw-neutral-800">
+        <div className="aspect-video relative flex items-center justify-center">
+          <img
+            src={images[currentImageIndex]}
+            alt={`${inventory.name} - Image ${currentImageIndex + 1}`}
+            className="w-full h-full object-cover"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none';
+              (e.target as HTMLImageElement).nextElementSibling?.classList.remove('hidden');
+            }}
+          />
+          <div className="hidden absolute inset-0 flex items-center justify-center">
+            <ImageIcon className="h-16 w-16 text-mw-neutral-400" />
+          </div>
+        </div>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          isIconOnly
+          onClick={onPreviousImage}
+          className="absolute left-3 top-1/2 -translate-y-1/2"
+          aria-label={t('details.previousImage')}
+        >
+          <ChevronLeft className="h-5 w-5 text-mw-neutral-700 dark:text-mw-neutral-300" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          isIconOnly
+          onClick={onNextImage}
+          className="absolute right-3 top-1/2 -translate-y-1/2"
+          aria-label={t('details.nextImage')}
+        >
+          <ChevronRight className="h-5 w-5 text-mw-neutral-700 dark:text-mw-neutral-300" />
+        </Button>
+
+        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 bg-black/50 text-white text-xs px-2 py-1 rounded">
+          {currentImageIndex + 1} / {images.length}
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        {thumbnails.map((thumb, index) => (
+          <Button
+            key={index}
+            variant="ghost"
+            size="sm"
+            onClick={() => onThumbnailClick(index)}
+            className={cn(
+              "flex-shrink-0",
+              currentImageIndex === index
+                ? "border-teal-500"
+                : "border-transparent"
+            )}
+          >
+            <img
+              src={thumb}
+              alt={`${t('details.thumbnail')} ${index + 1}`}
+              className="w-full h-full object-cover"
+              onError={(e) => {
+                (e.target as HTMLImageElement).style.display = 'none';
+              }}
+            />
+          </Button>
+        ))}
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-base font-semibold text-mw-neutral-900 dark:text-white">
+          {t('details.inventoryInfo')}
+        </h3>
+
+        <div className="grid grid-cols-2 gap-4">
+          <InfoItem 
+            label={t('details.mediaOwner')} 
+            value={inventory.publisherName || inventory.mediaOwner || t('details.na')} 
+          />
+          <InfoItem 
+            label={t('details.type')} 
+            value={inventory.mediaType || inventory.type || t('details.na')} 
+          />
+          <InfoItem 
+            label={t('details.format')} 
+            value={inventory.format || t('details.na')} 
+          />
+          <InfoItem 
+            label={t('details.size')} 
+            value={inventory.size || t('details.na')} 
+          />
+          <InfoItem 
+            label={t('details.screens')} 
+            value={inventory.screens?.toString() || "1"} 
+          />
+          <InfoItem 
+            label={t('details.operationMode')} 
+            value={inventory.operationMode || t('details.na')} 
+          />
+          <InfoItem 
+            label={t('details.execution')} 
+            value={inventory.execution || t('details.na')} 
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface InfoItemProps {
+  label: string;
+  value: string;
+}
+
+function InfoItem({ label, value }: InfoItemProps) {
+  return (
+    <div className="space-y-1">
+      <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">
+        {label}
+      </p>
+      <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+        {value}
+      </p>
+    </div>
+  );
+}
+
+interface PlaceholderTabContentProps {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+}
+
+function PlaceholderTabContent({ icon: Icon, title, description }: PlaceholderTabContentProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      <div className="w-16 h-16 rounded-full bg-mw-neutral-100 dark:bg-mw-neutral-800 flex items-center justify-center mb-4">
+        <Icon className="h-8 w-8 text-mw-neutral-400" />
+      </div>
+      <h3 className="text-lg font-semibold text-mw-neutral-900 dark:text-white mb-2">
+        {title}
+      </h3>
+      <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400 max-w-xs">
+        {description}
+      </p>
+    </div>
+  );
+}
+
+export default InventoryDetailsSheet;