adserver-dashboard 1.0.0

package/client/src/components/approval/line-item-details-sheet.tsx

@@ -0,0 +1,371 @@
+import { useTranslation } from '@/lib/i18n';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@moving-walls/design-system';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import {
+  Loader2,
+  Monitor,
+  Calendar,
+  Image as ImageIcon,
+  MapPin,
+  Clock,
+  Video,
+  FileImage,
+  Gauge,
+  Play,
+} from 'lucide-react';
+import { usePublicLineItemInventories } from '@/hooks/use-approval';
+import type { PublicLineItem, PublicInventory } from '@/types/approval';
+
+interface LineItemDetailsSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  lineItem: PublicLineItem | null;
+  token: string;
+}
+
+export function LineItemDetailsSheet({ open, onOpenChange, lineItem, token }: LineItemDetailsSheetProps) {
+  const { t } = useTranslation('approval');
+  const { data: inventoriesData, isLoading: isLoadingInventories } = usePublicLineItemInventories(
+    token,
+    lineItem?.id || null
+  );
+
+  const inventories = inventoriesData?.inventories || [];
+
+  if (!lineItem) return null;
+
+  const formatDaysOfWeek = (daysOfWeek: number[]): string => {
+    if (!daysOfWeek || daysOfWeek.length === 0) return '--';
+    const dayNames = ['', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+    const sorted = [...daysOfWeek].sort((a, b) => a - b);
+    if (sorted.length === 7 && sorted[0] === 1 && sorted[6] === 7) {
+      return 'Mon-Sun';
+    }
+    if (sorted.length === 5 && sorted[0] === 1 && sorted[4] === 5) {
+      return 'Mon-Fri';
+    }
+    return sorted.map((d) => dayNames[d] || d).join(', ');
+  };
+
+  const formatHours = (hours: Array<{ start: number; end: number }>): string => {
+    if (!hours || hours.length === 0) return '--';
+    return hours
+      .map((h) => {
+        const startStr = String(h.start).padStart(2, '0') + ':00';
+        const endStr = String(h.end).padStart(2, '0') + ':00';
+        return `${startStr} - ${endStr}`;
+      })
+      .join(', ');
+  };
+
+  const formatScheduleRule = (rule: any) => {
+    if (!rule) return null;
+
+    return {
+      type: rule.type || '--',
+      daysOfWeek: formatDaysOfWeek(rule.days_of_week),
+      hours: formatHours(rule.hours),
+      validity: rule.validity
+        ? `${formatDate(rule.validity.start_date)} - ${formatDate(rule.validity.end_date)}`
+        : '--',
+      priority: rule.priority,
+    };
+  };
+
+  const formatNumber = (num?: number): string => {
+    if (num === undefined || num === null) return '--';
+    return new Intl.NumberFormat('en-US').format(num);
+  };
+
+  const formatDate = (dateStr?: string | null): string => {
+    if (!dateStr) return '--';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric',
+    });
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-2xl p-0 overflow-y-auto">
+        <SheetHeader className="px-6 pt-6 pb-4 border-b border-mw-neutral-100 bg-white sticky top-0 z-10">
+          <SheetTitle className="text-xl font-bold text-mw-neutral-900">{lineItem.name}</SheetTitle>
+          <div className="flex flex-wrap items-center gap-2 mt-2">
+            {lineItem.creativeType && (
+              <Badge variant="outline" className="text-xs font-medium bg-mw-primary-50 text-mw-primary-700 border-mw-primary-200">
+                {lineItem.creativeType}
+              </Badge>
+            )}
+            {lineItem.duration && (
+              <Badge variant="secondary" className="text-xs font-medium bg-mw-neutral-100 text-mw-neutral-700">
+                {lineItem.duration}s
+              </Badge>
+            )}
+            {lineItem.publisher && (
+              <Badge variant="outline" className="text-xs font-medium">
+                {lineItem.publisher}
+              </Badge>
+            )}
+          </div>
+        </SheetHeader>
+
+        <div className="p-6 space-y-6">
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+            <div className="bg-gradient-to-br from-mw-neutral-50 to-white p-4 rounded-xl border border-mw-neutral-100">
+              <p className="text-xs text-mw-neutral-500 uppercase tracking-wide font-medium mb-1">{t('lineItems.publisher')}</p>
+              <p className="text-sm font-bold text-mw-neutral-900">{lineItem.publisher || '--'}</p>
+            </div>
+            <div className="bg-gradient-to-br from-mw-neutral-50 to-white p-4 rounded-xl border border-mw-neutral-100">
+              <p className="text-xs text-mw-neutral-500 uppercase tracking-wide font-medium mb-1">{t('lineItems.inventories')}</p>
+              <p className="text-sm font-bold text-mw-neutral-900">{lineItem.totalInventories || 0}</p>
+            </div>
+            <div className="bg-gradient-to-br from-mw-neutral-50 to-white p-4 rounded-xl border border-mw-neutral-100">
+              <p className="text-xs text-mw-neutral-500 uppercase tracking-wide font-medium mb-1">{t('lineItems.duration')}</p>
+              <p className="text-sm font-bold text-mw-neutral-900">{lineItem.duration ? `${lineItem.duration}s` : '--'}</p>
+            </div>
+            <div className="bg-gradient-to-br from-mw-neutral-50 to-white p-4 rounded-xl border border-mw-neutral-100">
+              <p className="text-xs text-mw-neutral-500 uppercase tracking-wide font-medium mb-1">{t('lineItems.resolutions')}</p>
+              <p className="text-sm font-bold text-mw-neutral-900">{lineItem.resolutions?.join(', ') || '--'}</p>
+            </div>
+          </div>
+
+          <Tabs defaultValue="inventories" className="w-full">
+            <TabsList className="w-full grid grid-cols-3 bg-mw-neutral-100 p-1 rounded-xl">
+              <TabsTrigger
+                value="inventories"
+                className="text-sm font-medium rounded-lg py-2.5 data-[state=active]:bg-white data-[state=active]:text-mw-primary-600 data-[state=active]:shadow-sm transition-all"
+              >
+                <Monitor className="h-4 w-4 mr-2" />
+                {t('tabs.inventory')}
+              </TabsTrigger>
+              <TabsTrigger
+                value="schedule"
+                className="text-sm font-medium rounded-lg py-2.5 data-[state=active]:bg-white data-[state=active]:text-mw-primary-600 data-[state=active]:shadow-sm transition-all"
+              >
+                <Calendar className="h-4 w-4 mr-2" />
+                {t('tabs.schedule')}
+              </TabsTrigger>
+              <TabsTrigger
+                value="creatives"
+                className="text-sm font-medium rounded-lg py-2.5 data-[state=active]:bg-white data-[state=active]:text-mw-primary-600 data-[state=active]:shadow-sm transition-all"
+              >
+                <ImageIcon className="h-4 w-4 mr-2" />
+                {t('tabs.creatives')}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="inventories" className="mt-6">
+              {isLoadingInventories ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="h-8 w-8 animate-spin text-mw-primary-500" />
+                </div>
+              ) : inventories.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-mw-neutral-500">
+                  <div className="w-16 h-16 rounded-full bg-mw-neutral-100 flex items-center justify-center mb-4">
+                    <Monitor className="h-8 w-8 text-mw-neutral-400" />
+                  </div>
+                  <p className="font-medium">{t('inventoryDetails.noInventories')}</p>
+                </div>
+              ) : (
+                <div className="space-y-3 max-h-[400px] overflow-y-auto pr-1">
+                  {inventories.map((inventory: PublicInventory, index: number) => (
+                    <div
+                      key={inventory.id}
+                      className="p-4 bg-white border border-mw-neutral-200 rounded-xl hover:border-mw-primary-200 hover:shadow-md transition-all duration-200"
+                    >
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex items-start gap-3 flex-1 min-w-0">
+                          <div className="w-10 h-10 rounded-lg bg-mw-primary-100 flex items-center justify-center flex-shrink-0">
+                            <Monitor className="h-5 w-5 text-mw-primary-600" />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="font-semibold text-sm text-mw-neutral-900 truncate">
+                              {inventory.name}
+                            </p>
+                            {inventory.address && (
+                              <p className="text-xs text-mw-neutral-500 flex items-center gap-1 mt-1 truncate">
+                                <MapPin className="h-3 w-3 flex-shrink-0" />
+                                <span className="truncate">{inventory.address}</span>
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                        <div className="flex flex-col items-end gap-2 flex-shrink-0">
+                          {inventory.venueType && (
+                            <Badge variant="outline" className="text-xs font-medium">
+                              {inventory.venueType}
+                            </Badge>
+                          )}
+                          {inventory.size && (
+                            <span className="text-xs text-mw-neutral-500 font-medium">{inventory.size}</span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="schedule" className="mt-6 space-y-4">
+              {lineItem.pacing && (
+                <div className="p-4 bg-gradient-to-br from-mw-primary-50 to-white rounded-xl border border-mw-primary-100">
+                  <div className="flex items-center gap-3 mb-4">
+                    <div className="w-10 h-10 rounded-lg bg-mw-primary-100 flex items-center justify-center">
+                      <Gauge className="h-5 w-5 text-mw-primary-600" />
+                    </div>
+                    <span className="text-sm font-bold text-mw-neutral-900">{t('schedule.pacingConfiguration')}</span>
+                  </div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="bg-white/80 rounded-lg p-3 border border-mw-primary-100/50">
+                      <p className="text-xs text-mw-neutral-500 uppercase tracking-wide font-medium">{t('schedule.type')}</p>
+                      <p className="font-bold text-mw-neutral-900 capitalize mt-1">{lineItem.pacing.type || '--'}</p>
+                    </div>
+                    <div className="bg-white/80 rounded-lg p-3 border border-mw-primary-100/50">
+                      <p className="text-xs text-mw-neutral-500 uppercase tracking-wide font-medium">{t('schedule.dailyCap')}</p>
+                      <p className="font-bold text-mw-neutral-900 mt-1">{formatNumber(lineItem.pacing.daily_cap)}</p>
+                    </div>
+                    <div className="bg-white/80 rounded-lg p-3 border border-mw-primary-100/50">
+                      <p className="text-xs text-mw-neutral-500 uppercase tracking-wide font-medium">{t('schedule.hourlyCap')}</p>
+                      <p className="font-bold text-mw-neutral-900 mt-1">{formatNumber(lineItem.pacing.hourly_cap)}</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {!lineItem.schedule || lineItem.schedule.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-mw-neutral-500">
+                  <div className="w-16 h-16 rounded-full bg-mw-neutral-100 flex items-center justify-center mb-4">
+                    <Clock className="h-8 w-8 text-mw-neutral-400" />
+                  </div>
+                  <p className="font-medium">{t('schedule.noScheduleRules')}</p>
+                </div>
+              ) : (
+                <div className="space-y-3 max-h-[400px] overflow-y-auto pr-1">
+                  {lineItem.schedule.map((rule: any, index: number) => {
+                    const formatted = formatScheduleRule(rule);
+                    if (!formatted) return null;
+                    return (
+                      <div
+                        key={index}
+                        className="p-4 bg-white border border-mw-neutral-200 rounded-xl hover:border-mw-primary-200 hover:shadow-md transition-all duration-200"
+                      >
+                        <div className="flex items-center justify-between mb-4">
+                          <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 rounded-lg bg-mw-primary-100 flex items-center justify-center">
+                              <Calendar className="h-5 w-5 text-mw-primary-600" />
+                            </div>
+                            <span className="text-sm font-bold text-mw-neutral-900">{t('schedule.scheduleRule')} {index + 1}</span>
+                          </div>
+                          <Badge variant="outline" className="text-xs font-medium capitalize bg-mw-neutral-50">
+                            {formatted.type}
+                          </Badge>
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                          <div className="bg-mw-neutral-50 rounded-lg p-3">
+                            <p className="text-xs text-mw-neutral-500 font-medium mb-1">{t('schedule.days')}</p>
+                            <p className="text-sm text-mw-neutral-900 font-medium">{formatted.daysOfWeek}</p>
+                          </div>
+                          <div className="bg-mw-neutral-50 rounded-lg p-3">
+                            <p className="text-xs text-mw-neutral-500 font-medium mb-1">{t('schedule.hours')}</p>
+                            <p className="text-sm text-mw-neutral-900 font-medium">{formatted.hours}</p>
+                          </div>
+                          <div className="col-span-2 bg-mw-neutral-50 rounded-lg p-3">
+                            <p className="text-xs text-mw-neutral-500 font-medium mb-1">{t('schedule.validityPeriod')}</p>
+                            <p className="text-sm text-mw-neutral-900 font-medium">{formatted.validity}</p>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="creatives" className="mt-6">
+              {!lineItem.creatives || lineItem.creatives.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-mw-neutral-500">
+                  <div className="w-16 h-16 rounded-full bg-mw-neutral-100 flex items-center justify-center mb-4">
+                    <ImageIcon className="h-8 w-8 text-mw-neutral-400" />
+                  </div>
+                  <p className="font-medium">{t('creatives.noCreatives')}</p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-2 gap-4 max-h-[400px] overflow-y-auto pr-1">
+                  {lineItem.creatives.map((creative: any, index: number) => {
+                    const isVideo =
+                      creative.creativeType === 'VIDEO' ||
+                      creative.type === 'VIDEO' ||
+                      creative.mimeType?.startsWith('video/');
+                    const mediaUrl = creative.creativeUri || creative.url || creative.thumbnailUrl;
+
+                    return (
+                      <div
+                        key={creative.creativeId || creative.id || index}
+                        className="bg-white border border-mw-neutral-200 rounded-xl overflow-hidden hover:border-mw-primary-200 hover:shadow-lg transition-all duration-200 group"
+                      >
+                        <div className="aspect-video bg-mw-neutral-100 relative overflow-hidden">
+                          {isVideo && mediaUrl ? (
+                            <video
+                              src={mediaUrl}
+                              controls
+                              className="w-full h-full object-cover"
+                              poster={creative.thumbnailUrl}
+                            >
+                              Your browser does not support the video tag.
+                            </video>
+                          ) : mediaUrl ? (
+                            <img
+                              src={mediaUrl}
+                              alt={creative.name || 'Creative'}
+                              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                              onError={(e) => {
+                                (e.target as HTMLImageElement).style.display = 'none';
+                              }}
+                            />
+                          ) : (
+                            <div className="w-full h-full flex items-center justify-center">
+                              <FileImage className="h-12 w-12 text-mw-neutral-300" />
+                            </div>
+                          )}
+                          {isVideo && (
+                            <div className="absolute top-2 right-2">
+                              <div className="w-8 h-8 rounded-full bg-black/50 flex items-center justify-center backdrop-blur-sm">
+                                <Play className="h-4 w-4 text-white fill-white" />
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                        <div className="p-3 space-y-2">
+                          <p className="font-semibold text-sm text-mw-neutral-900 truncate">
+                            {creative.name || `${t('creatives.creative')} ${index + 1}`}
+                          </p>
+                          <div className="flex items-center gap-2 flex-wrap">
+                            {(creative.creativeType || creative.type) && (
+                              <Badge variant="secondary" className="text-xs bg-mw-neutral-100 text-mw-neutral-600">
+                                {creative.creativeType || creative.type}
+                              </Badge>
+                            )}
+                            {creative.resolution && (
+                              <span className="text-xs text-mw-neutral-500 font-medium">{creative.resolution}</span>
+                            )}
+                            {creative.duration && (
+                              <span className="text-xs text-mw-neutral-500 font-medium">{creative.duration}s</span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}