adserver-dashboard 1.0.0

package/client/src/components/line-items/planner-inventory-card.tsx

@@ -0,0 +1,495 @@
+import { useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Badge } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Checkbox } from "@moving-walls/design-system";
+import { Select } from "@moving-walls/design-system";
+import { cn } from "@moving-walls/design-system";
+import { ChevronUp, ChevronDown, Info, Eye, Sparkles, Image as ImageIcon } from "lucide-react";
+import * as HoverCard from "@radix-ui/react-hover-card";
+import type { InventoryPlanning } from "@/lib/inventory-api";
+
+export interface PlannerInventoryCardProps {
+  id: string;
+  name: string;
+  location?: string;
+  tags?: Array<{ label: string; variant: "primary" | "secondary" | "success" | "warning" | "error" | "outline" }>;
+  planning?: InventoryPlanning;
+  screens?: number;
+  poi?: string;
+  owner?: string;
+  currency?: string;
+  isSelected: boolean;
+  onToggleSelect?: () => void;
+  onViewDetails?: () => void;
+  isReadOnly?: boolean;
+  referenceId?: string;
+  estimatedCost?: number;
+  thumbnail?: string;
+  publisherName?: string;
+  finalScore?: number;
+  why?: string;
+  availability?: {
+    availableDays?: number;
+    totalDays?: number;
+    availabilityPercentage?: number;
+    summary?: string;
+  };
+  componentScores?: {
+    geoFit?: number;
+    availability?: number;
+    budgetFit?: number;
+    audienceFit?: number;
+    brandFit?: number;
+    qualityFit?: number;
+    timeFit?: number;
+  };
+  onSovChange?: (value: number) => void;
+  sovValue?: number;
+  impressions?: number;
+  reach?: number;
+  frequency?: number;
+  cpmRate?: number;
+  ecpm?: number;
+  showPlanningData?: boolean;
+}
+
+function formatNumber(num: number | undefined): string {
+  if (num === undefined || num === null) return "N/A";
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(2) + "M";
+  }
+  if (num >= 1000) {
+    return num.toLocaleString();
+  }
+  return num.toString();
+}
+
+function formatDuration(seconds: number | undefined): string {
+  if (seconds === undefined || seconds === null) return "0h";
+  const hours = Math.floor(seconds / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  if (hours > 0 && mins > 0) {
+    return `${hours}h ${mins}m`;
+  }
+  if (hours > 0) {
+    return `${hours}h`;
+  }
+  return `${mins}m`;
+}
+
+function getScoreColorClass(score: number): string {
+  if (score >= 70) return "text-emerald-600 dark:text-emerald-400";
+  if (score >= 40) return "text-amber-600 dark:text-amber-400";
+  return "text-red-600 dark:text-red-400";
+}
+
+interface ScoreBreakdownItem {
+  label: string;
+  value: number;
+}
+
+interface SmartRecommendationBadgeProps {
+  score: number;
+  componentScores?: {
+    geoFit?: number;
+    availability?: number;
+    budgetFit?: number;
+    audienceFit?: number;
+    brandFit?: number;
+    qualityFit?: number;
+    timeFit?: number;
+  };
+}
+
+function SmartRecommendationBadge({ score }: SmartRecommendationBadgeProps) {
+  const { t } = useTranslation('lineItems');
+
+  return (
+    <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-gradient-to-r from-teal-500 to-emerald-500 text-white text-xs font-medium shadow-sm">
+      <Sparkles className="h-3.5 w-3.5" />
+      <span>{`Smart ${Math.round(score)}%`}</span>
+    </div>
+  );
+}
+
+function FitnessScoreContent({ componentScores }: { componentScores?: SmartRecommendationBadgeProps['componentScores'] }) {
+  const { t } = useTranslation('lineItems');
+
+  const scoreBreakdown: ScoreBreakdownItem[] = [
+    { label: t('planner.scores.budgetRelevance'), value: componentScores?.budgetFit ?? 0 },
+    { label: t('planner.scores.campaignGoalMatch'), value: 60 },
+    { label: t('planner.scores.geographyRelevance'), value: componentScores?.geoFit ?? 0 },
+    { label: t('planner.scores.audienceRelevance'), value: componentScores?.audienceFit ?? 0 },
+    { label: t('planner.scores.brandCategoryRelevance'), value: componentScores?.brandFit ?? 0 },
+    { label: t('planner.scores.inventoryQuality'), value: componentScores?.qualityFit ?? 0 },
+    { label: t('planner.scores.timeAlignment'), value: componentScores?.timeFit ?? 0 },
+    { label: t('planner.scores.measureConfidence'), value: 90 },
+    { label: t('planner.scores.availabilityWindow'), value: componentScores?.availability ?? 0 },
+  ];
+
+  return (
+    <div className="space-y-3">
+      <h4 className="text-sm font-semibold text-mw-neutral-900 dark:text-white">
+        {t('planner.fitnessScoreCard')}
+      </h4>
+      <div className="space-y-2">
+        {scoreBreakdown.map((item, index) => (
+          <div
+            key={index}
+            className="flex items-center justify-between text-xs"
+          >
+            <span className="text-mw-neutral-600 dark:text-mw-neutral-400">
+              {item.label}
+            </span>
+            <span className={cn("font-medium", getScoreColorClass(item.value))}>
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function PlannerInventoryCard({
+  id,
+  name,
+  location,
+  tags = [],
+  planning,
+  screens = 1,
+  poi,
+  owner,
+  currency = "USD",
+  isSelected,
+  onToggleSelect,
+  onViewDetails,
+  isReadOnly = false,
+  referenceId,
+  estimatedCost: propEstimatedCost,
+  thumbnail,
+  publisherName,
+  finalScore,
+  why,
+  availability,
+  componentScores,
+  onSovChange,
+  sovValue,
+  impressions,
+  reach,
+  frequency,
+  cpmRate,
+  ecpm,
+  showPlanningData = true,
+}: PlannerInventoryCardProps) {
+  const { t } = useTranslation('lineItems');
+  const [selectedSov, setSelectedSov] = useState<string>(sovValue ? `${sovValue}` : "10");
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const estimatedCost = propEstimatedCost ?? planning?.pricing?.estimatedCost;
+  const adPlays = planning?.allocation?.slots;
+  const sov = sovValue ?? planning?.allocation?.sov;
+  const sotPlayTime = planning?.allocation?.playTimeSec;
+  const totalCapacityTime = planning?.capacity?.available?.playTimeSec;
+  const campaignDays = planning?.capacity?.campaignDays || 1;
+  const dailyPlays = adPlays ? Math.floor(adPlays / campaignDays) : undefined;
+  
+  const displayImpressions = impressions ?? planning?.estimates?.impressions;
+  const displayReach = reach ?? planning?.estimates?.reach;
+  const displayFrequency = frequency ?? planning?.estimates?.frequency;
+  const displayCpmRate = cpmRate ?? planning?.pricing?.cpm;
+  const displayEcpm = ecpm ?? (displayImpressions && estimatedCost ? (estimatedCost / displayImpressions) * 1000 : undefined);
+
+  const handleSovChange = (value: string) => {
+    setSelectedSov(value);
+    onSovChange?.(parseInt(value, 10));
+  };
+
+  return (
+    <div
+      className={cn(
+        "border rounded-lg transition-colors bg-white dark:bg-mw-neutral-900",
+        isSelected
+          ? "border-teal-500 bg-teal-50/30 dark:bg-teal-900/10"
+          : "border-mw-neutral-200 dark:border-mw-neutral-700"
+      )}
+    >
+      <div className="p-4">
+        <div className="flex items-start gap-3">
+          <Checkbox
+            checked={isSelected}
+            onChange={onToggleSelect}
+            onClick={(e) => e.stopPropagation()}
+            disabled={isReadOnly}
+            className="mt-1"
+          />
+
+          <div className="w-16 h-16 rounded-lg overflow-hidden bg-mw-neutral-100 dark:bg-mw-neutral-800 flex-shrink-0 flex items-center justify-center">
+            {thumbnail ? (
+              <img
+                src={thumbnail}
+                alt={name}
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <ImageIcon className="h-6 w-6 text-mw-neutral-400" />
+            )}
+          </div>
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start justify-between gap-2 mb-1">
+              <div className="flex items-center gap-2 min-w-0 flex-wrap">
+                <span className="font-medium text-sm text-mw-neutral-900 dark:text-white">
+                  {name}
+                </span>
+                {tags.slice(0, 2).map((tag, index) => (
+                  <Badge
+                    key={index}
+                    variant={tag.variant}
+                    size="sm"
+                    className="text-[10px] px-2 py-0.5"
+                  >
+                    {tag.label}
+                  </Badge>
+                ))}
+              </div>
+              <div className="flex items-center gap-2 flex-shrink-0">
+                {referenceId && (
+                  <span className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                    {referenceId}
+                  </span>
+                )}
+                {availability?.availabilityPercentage === 0 && (
+                  <Badge variant="error" size="sm" className="text-[10px] px-2 py-0.5">
+                    Invalid
+                  </Badge>
+                )}
+              </div>
+            </div>
+
+            {location && (
+              <p className="text-xs text-mw-neutral-500 mb-1">{location}</p>
+            )}
+
+            {(publisherName || owner) && (
+              <p className="text-xs text-mw-neutral-500">
+                {t('planner.owner')}{" "}
+                <span className="text-teal-600 dark:text-teal-400 font-medium">
+                  {publisherName || owner}
+                </span>
+              </p>
+            )}
+          </div>
+
+          {finalScore !== undefined && (
+            <div className="flex-shrink-0">
+              <SmartRecommendationBadge score={finalScore} componentScores={componentScores} />
+            </div>
+          )}
+
+          {finalScore !== undefined && componentScores ? (
+            <HoverCard.Root openDelay={200} closeDelay={100}>
+              <HoverCard.Trigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  isIconOnly
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIsExpanded(!isExpanded);
+                  }}
+                  className="flex-shrink-0"
+                  aria-label={isExpanded ? t('planner.collapseDetails') : t('planner.expandDetails')}
+                >
+                  {isExpanded ? (
+                    <ChevronUp className="h-4 w-4 text-mw-neutral-500" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4 text-mw-neutral-500" />
+                  )}
+                </Button>
+              </HoverCard.Trigger>
+              <HoverCard.Portal>
+                <HoverCard.Content
+                  className="z-50 w-72 rounded-lg border border-mw-neutral-200 dark:border-mw-neutral-700 bg-white dark:bg-mw-neutral-900 p-4 shadow-lg"
+                  sideOffset={8}
+                  align="end"
+                >
+                  <FitnessScoreContent componentScores={componentScores} />
+                  <HoverCard.Arrow className="fill-white dark:fill-mw-neutral-900" />
+                </HoverCard.Content>
+              </HoverCard.Portal>
+            </HoverCard.Root>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              isIconOnly
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsExpanded(!isExpanded);
+              }}
+              className="flex-shrink-0"
+              aria-label={isExpanded ? t('planner.collapseDetails') : t('planner.expandDetails')}
+            >
+              {isExpanded ? (
+                <ChevronUp className="h-4 w-4 text-mw-neutral-500" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-mw-neutral-500" />
+              )}
+            </Button>
+          )}
+        </div>
+
+        {isExpanded && (
+          <div className="mt-4 pt-3 border-t border-mw-neutral-100 dark:border-mw-neutral-800">
+            <div className="flex items-center gap-6 flex-wrap">
+              <div className="flex items-center gap-1 text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                <span>{t('planner.screens')}</span>
+                <Info className="h-3 w-3 text-mw-neutral-400" />
+                <span className="font-medium text-mw-neutral-900 dark:text-white ml-1">{screens}</span>
+              </div>
+              <div className="flex items-center gap-1 text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                <span>{t('planner.poi')}</span>
+                <Info className="h-3 w-3 text-mw-neutral-400" />
+                <span className="font-medium text-mw-neutral-900 dark:text-white ml-1">{poi || "N/A"}</span>
+              </div>
+              <div className="flex items-center gap-1 text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                <span>{t('planner.owner').replace(':', '')}</span>
+                <Info className="h-3 w-3 text-mw-neutral-400" />
+                <span className="font-medium text-mw-neutral-900 dark:text-white ml-1">{publisherName || owner || "N/A"}</span>
+              </div>
+            </div>
+
+            {showPlanningData && (
+              <div className="mt-3 pt-3 border-t border-mw-neutral-100 dark:border-mw-neutral-800">
+                <div className="grid grid-cols-5 gap-4 mb-3">
+                  <div>
+                    <div className="flex items-center gap-1 text-xs text-mw-neutral-500 dark:text-mw-neutral-400 mb-1">
+                      {t('planner.impressions')}
+                      <Info className="h-3 w-3" />
+                    </div>
+                    <div className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                      {formatNumber(displayImpressions)}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-1 text-xs text-mw-neutral-500 dark:text-mw-neutral-400 mb-1">
+                      {t('planner.reach')}
+                      <Info className="h-3 w-3" />
+                    </div>
+                    <div className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                      {formatNumber(displayReach)}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-1 text-xs text-mw-neutral-500 dark:text-mw-neutral-400 mb-1">
+                      {t('planner.frequency')}
+                      <Info className="h-3 w-3" />
+                    </div>
+                    <div className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                      {displayFrequency !== undefined ? displayFrequency.toFixed(1) : "N/A"}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-1 text-xs text-mw-neutral-500 dark:text-mw-neutral-400 mb-1">
+                      {t('planner.cpmRate')}
+                      <Info className="h-3 w-3" />
+                    </div>
+                    <div className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                      {displayCpmRate !== undefined ? `${currency} ${displayCpmRate.toFixed(2)}` : "N/A"}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-1 text-xs text-mw-neutral-500 dark:text-mw-neutral-400 mb-1">
+                      {t('planner.ecpm')}
+                      <Info className="h-3 w-3" />
+                    </div>
+                    <div className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                      {displayEcpm !== undefined ? `${currency} ${displayEcpm.toFixed(2)}` : "N/A"}
+                    </div>
+                  </div>
+                </div>
+                <div className="grid grid-cols-5 gap-4">
+                  <div>
+                    <div className="flex items-center gap-1 text-xs text-mw-neutral-500 dark:text-mw-neutral-400 mb-1">
+                      {t('planner.adPlays')}
+                      <Info className="h-3 w-3" />
+                    </div>
+                    <div className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                      {formatNumber(adPlays)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className="mt-4 pt-3 border-t border-mw-neutral-100 dark:border-mw-neutral-800">
+          <div className="flex items-center justify-between gap-4 flex-wrap">
+            <div className="flex items-center gap-4 flex-wrap">
+              {showPlanningData && (
+                <>
+                  <Select
+                    value={selectedSov}
+                    onChange={(e) => handleSovChange(e.target.value)}
+                    className="h-7 px-2 text-xs border border-mw-neutral-200 dark:border-mw-neutral-600 rounded bg-white dark:bg-mw-neutral-800 text-mw-neutral-700 dark:text-mw-neutral-200 focus:outline-none focus:ring-1 focus:ring-teal-500"
+                    options={[
+                      { value: "5", label: "SOV 5%" },
+                      { value: "10", label: "SOV 10%" },
+                      { value: "15", label: "SOV 15%" },
+                      { value: "20", label: "SOV 20%" },
+                      { value: "25", label: "SOV 25%" },
+                      { value: "50", label: "SOV 50%" },
+                      { value: "100", label: "SOV 100%" },
+                    ]}
+                  />
+
+                  <div className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                    <span className="font-medium">{t('planner.sot')}</span>{" "}
+                    {formatDuration(sotPlayTime)} / {formatDuration(totalCapacityTime)}
+                  </div>
+
+                  {dailyPlays !== undefined && (
+                    <div className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                      {`${formatNumber(dailyPlays)} daily plays`}
+                    </div>
+                  )}
+
+                  {estimatedCost !== undefined && estimatedCost > 0 && (
+                    <div className="flex items-center gap-1 text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                      <span>
+                        {t('planner.estimatedCost')}{" "}
+                        <span className="font-medium text-mw-neutral-900 dark:text-white">
+                          {currency} {formatNumber(estimatedCost)}
+                        </span>
+                      </span>
+                      <Info className="h-3.5 w-3.5 text-mw-neutral-400" />
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onViewDetails?.();
+              }}
+              className="text-xs h-7 px-3"
+            >
+              {t('planner.viewDetails')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}