adserver-dashboard 1.0.0

package/client/src/components/deals/import-from-planner-dialog.tsx

@@ -0,0 +1,399 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "@/lib/i18n";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@moving-walls/design-system";
+import { Button, cn } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Select } from "@moving-walls/design-system";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@moving-walls/design-system";
+import { Loader2, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, X } from "lucide-react";
+
+interface PlannerDeal {
+  id: string;
+  dealName: string;
+  cid: string;
+  brand: string;
+  brandCategory: string;
+  plannedBy: string;
+  plannedByRole: string;
+  startDate: string;
+  endDate: string;
+  daysRemaining: number;
+  totalDays: number;
+  status: "approved" | "pending" | "rejected";
+  inventories: number;
+  budget: number;
+  totalCost: number;
+  currency: string;
+}
+
+interface ImportFromPlannerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onProceed: (deal: PlannerDeal) => void;
+}
+
+export function ImportFromPlannerDialog({
+  open,
+  onOpenChange,
+  onProceed,
+}: ImportFromPlannerDialogProps) {
+  const { t } = useTranslation('deals');
+  const [selectedDealId, setSelectedDealId] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const { data: dealsData, isLoading } = useQuery({
+    queryKey: ["planner-deals", currentPage, pageSize],
+    queryFn: async (): Promise<{ deals: PlannerDeal[]; total: number }> => {
+      return {
+        deals: [
+          {
+            id: "plan-001",
+            dealName: "Campaign A1",
+            cid: "1234",
+            brand: "Campaign A1",
+            brandCategory: "Sports & Fitness",
+            plannedBy: "Arun Prakash",
+            plannedByRole: "Media Owner",
+            startDate: "Sep 01, 2025",
+            endDate: "Oct 31, 2025",
+            daysRemaining: 35,
+            totalDays: 60,
+            status: "approved",
+            inventories: 3,
+            budget: 250000,
+            totalCost: 250000,
+            currency: "MYR",
+          },
+          {
+            id: "plan-002",
+            dealName: "A2 Super Campaign...",
+            cid: "1236",
+            brand: "A2 Super Campaign...",
+            brandCategory: "Technology",
+            plannedBy: "Arun Prakash",
+            plannedByRole: "Media Owner",
+            startDate: "Sep 01, 2025",
+            endDate: "Oct 31, 2025",
+            daysRemaining: 5,
+            totalDays: 30,
+            status: "approved",
+            inventories: 20,
+            budget: 750000,
+            totalCost: 750000,
+            currency: "MYR",
+          },
+        ],
+        total: 100,
+      };
+    },
+    enabled: open,
+    staleTime: 30000,
+  });
+
+  const deals = dealsData?.deals || [];
+  const totalItems = dealsData?.total || 0;
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  const handleProceed = () => {
+    const selectedDeal = deals.find((d) => d.id === selectedDealId);
+    if (selectedDeal) {
+      onProceed(selectedDeal);
+      onOpenChange(false);
+      setSelectedDealId(null);
+    }
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+    setSelectedDealId(null);
+  };
+
+  const formatCurrency = (amount: number, currency: string) => {
+    return `${currency} ${amount.toLocaleString()}`;
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "approved":
+        return (
+          <Badge className="bg-green-100 text-green-700 border-green-200 text-xs">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-500 mr-1.5" />
+            {t('importFromPlanner.approved')}
+          </Badge>
+        );
+      case "pending":
+        return (
+          <Badge className="bg-yellow-100 text-yellow-700 border-yellow-200 text-xs">
+            <span className="w-1.5 h-1.5 rounded-full bg-yellow-500 mr-1.5" />
+            {t('importFromPlanner.pending')}
+          </Badge>
+        );
+      default:
+        return (
+          <Badge className="bg-red-100 text-red-700 border-red-200 text-xs">
+            <span className="w-1.5 h-1.5 rounded-full bg-red-500 mr-1.5" />
+            {t('importFromPlanner.rejected')}
+          </Badge>
+        );
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent 
+        side="right" 
+        className="w-full max-w-[1000px] sm:max-w-[1000px] p-0 flex flex-col [&>button]:hidden"
+      >
+        <SheetHeader className="px-6 py-4 border-b border-mw-neutral-200 flex-row items-center justify-between">
+          <SheetTitle className="text-xl font-semibold text-mw-neutral-900">
+            {t('importFromPlanner.title')}
+          </SheetTitle>
+          <Button
+            variant="ghost"
+            size="sm"
+            isIconOnly
+            onClick={handleCancel}
+          >
+            <X className="w-5 h-5 text-mw-neutral-500" />
+          </Button>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="w-6 h-6 animate-spin text-mw-primary-500" />
+              <span className="ml-2 text-mw-neutral-500">{t('importFromPlanner.loading')}</span>
+            </div>
+          ) : deals.length === 0 ? (
+            <div className="py-16 text-center text-mw-neutral-500">
+              {t('importFromPlanner.noDeals')}
+            </div>
+          ) : (
+            <Table hoverable className="border-0">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600 w-12">
+                    {t('importFromPlanner.sno')}
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600">
+                    {t('importFromPlanner.dealName')}
+                    <span className="ml-1 text-mw-neutral-400">↕</span>
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600">
+                    {t('importFromPlanner.brand')}
+                    <span className="ml-1 text-mw-neutral-400">↕</span>
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600">
+                    {t('importFromPlanner.plannedBy')}
+                    <span className="ml-1 text-mw-neutral-400">↕</span>
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600">
+                    {t('importFromPlanner.flightDates')}
+                    <span className="ml-1 text-mw-neutral-400">↕</span>
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600">
+                    {t('importFromPlanner.status')}
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600">
+                    {t('importFromPlanner.inventories')}
+                    <span className="ml-1 text-mw-neutral-400">↕</span>
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600">
+                    {t('importFromPlanner.budget')}
+                    <span className="ml-1 text-mw-neutral-400">↕</span>
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-600">
+                    {t('importFromPlanner.totalCost')}
+                    <span className="ml-1 text-mw-neutral-400">↕</span>
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {deals.map((deal, index) => (
+                  <TableRow
+                    key={deal.id}
+                    onClick={() => setSelectedDealId(deal.id)}
+                    className={cn(
+                      "cursor-pointer",
+                      selectedDealId === deal.id
+                        ? "bg-mw-primary-50"
+                        : ""
+                    )}
+                  >
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <span className="text-sm text-mw-neutral-500">
+                          {String((currentPage - 1) * pageSize + index + 1).padStart(2, "0")}
+                        </span>
+                        <div
+                          className={cn(
+                            "w-5 h-5 rounded-full border-2 flex items-center justify-center",
+                            selectedDealId === deal.id
+                              ? "border-mw-primary-500"
+                              : "border-mw-neutral-300"
+                          )}
+                        >
+                          {selectedDealId === deal.id && (
+                            <div className="w-2.5 h-2.5 rounded-full bg-mw-primary-500" />
+                          )}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="text-sm font-medium text-mw-neutral-900">
+                          {deal.dealName}
+                        </p>
+                        <p className="text-xs text-mw-neutral-500">
+                          {t('importFromPlanner.cid')} : {deal.cid}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="text-sm text-mw-neutral-900">{deal.brand}</p>
+                        <p className="text-xs text-mw-neutral-500">
+                          {deal.brandCategory}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="text-sm text-mw-neutral-900">
+                          {deal.plannedBy}
+                        </p>
+                        <p className="text-xs text-mw-neutral-500">
+                          {deal.plannedByRole}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="text-sm text-mw-neutral-900">
+                          {deal.startDate} - {deal.endDate}
+                        </p>
+                        <p
+                          className={cn(
+                            "text-xs",
+                            deal.daysRemaining <= 10
+                              ? "text-orange-500"
+                              : "text-mw-neutral-500"
+                          )}
+                        >
+                          {t('importFromPlanner.daysRemaining', { remaining: deal.daysRemaining, total: deal.totalDays })}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell>{getStatusBadge(deal.status)}</TableCell>
+                    <TableCell>
+                      <span className="text-sm text-mw-neutral-900">
+                        {String(deal.inventories).padStart(2, "0")} {t('importFromPlanner.units')}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm text-mw-neutral-900">
+                        {formatCurrency(deal.budget, deal.currency)}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm text-mw-neutral-900">
+                        {formatCurrency(deal.totalCost, deal.currency)}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+
+        <div className="px-6 py-3 border-t border-mw-neutral-200 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-mw-neutral-600">{t('importFromPlanner.pageItems')} :</span>
+            <Select
+              value={String(pageSize)}
+              onChange={(e) => {
+                setPageSize(Number(e.target.value));
+                setCurrentPage(1);
+              }}
+              className="h-8 px-2 text-sm rounded border border-mw-neutral-200 bg-white"
+              options={[
+                { value: "10", label: "10" },
+                { value: "20", label: "20" },
+                { value: "50", label: "50" },
+              ]}
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-mw-neutral-600">
+              {t('importFromPlanner.itemsRange', { from: (currentPage - 1) * pageSize + 1, to: Math.min(currentPage * pageSize, totalItems), total: totalItems })}
+            </span>
+
+            <div className="flex items-center gap-1">
+              <span className="text-sm text-mw-neutral-600 mr-2">
+                {t('importFromPlanner.pageInfo', { current: currentPage, total: totalPages })}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                isIconOnly
+                onClick={() => setCurrentPage(1)}
+                disabled={currentPage === 1}
+              >
+                <ChevronsLeft className="w-4 h-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                isIconOnly
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                isIconOnly
+                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+              >
+                <ChevronRight className="w-4 h-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                isIconOnly
+                onClick={() => setCurrentPage(totalPages)}
+                disabled={currentPage === totalPages}
+              >
+                <ChevronsRight className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-6 py-4 border-t border-mw-neutral-200 flex items-center justify-end gap-3">
+          <Button variant="outline" onClick={handleCancel}>
+            {t('importFromPlanner.cancel')}
+          </Button>
+          <Button
+            onClick={handleProceed}
+            disabled={!selectedDealId}
+            className="bg-[var(--color-mw-primary-500)] hover:bg-[var(--color-mw-primary-600)] text-white"
+          >
+            {t('importFromPlanner.proceed')}
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/client/src/components/deals/market-insights-panel.tsx

@@ -0,0 +1,237 @@
+import { useMemo } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Card, CardContent, CardHeader, CardTitle } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Globe, Users, BarChart3, TrendingUp } from "lucide-react";
+
+interface CountryData {
+  code: string;
+  name: string;
+  population: string;
+  inventories: number;
+  impressions: string;
+  region: string;
+}
+
+const COUNTRY_DATA: Record<string, CountryData> = {
+  MY: { code: "MY", name: "Malaysia", population: "32.7M", inventories: 45000, impressions: "385B", region: "APAC" },
+  SG: { code: "SG", name: "Singapore", population: "5.9M", inventories: 12450, impressions: "95B", region: "APAC" },
+  JP: { code: "JP", name: "Japan", population: "125M", inventories: 85000, impressions: "620B", region: "APAC" },
+  ID: { code: "ID", name: "Indonesia", population: "274M", inventories: 65000, impressions: "520B", region: "APAC" },
+  TH: { code: "TH", name: "Thailand", population: "70M", inventories: 35000, impressions: "280B", region: "APAC" },
+  PH: { code: "PH", name: "Philippines", population: "109M", inventories: 28000, impressions: "210B", region: "APAC" },
+  AU: { code: "AU", name: "Australia", population: "26M", inventories: 42000, impressions: "195B", region: "APAC" },
+  US: { code: "US", name: "United States", population: "331M", inventories: 250000, impressions: "2.1T", region: "NA" },
+  GB: { code: "GB", name: "United Kingdom", population: "67M", inventories: 75000, impressions: "420B", region: "EMEA" },
+  DE: { code: "DE", name: "Germany", population: "84M", inventories: 68000, impressions: "380B", region: "EMEA" },
+  FR: { code: "FR", name: "France", population: "68M", inventories: 52000, impressions: "290B", region: "EMEA" },
+  IN: { code: "IN", name: "India", population: "1.4B", inventories: 95000, impressions: "890B", region: "APAC" },
+  CN: { code: "CN", name: "China", population: "1.4B", inventories: 180000, impressions: "1.8T", region: "APAC" },
+  KR: { code: "KR", name: "South Korea", population: "52M", inventories: 55000, impressions: "340B", region: "APAC" },
+  AE: { code: "AE", name: "UAE", population: "9.9M", inventories: 18000, impressions: "120B", region: "MENA" },
+};
+
+const COUNTRY_NAME_TO_CODE: Record<string, string> = {
+  "Malaysia": "MY",
+  "Singapore": "SG",
+  "Japan": "JP",
+  "Indonesia": "ID",
+  "Thailand": "TH",
+  "Philippines": "PH",
+  "Australia": "AU",
+  "United States": "US",
+  "United Kingdom": "GB",
+  "Germany": "DE",
+  "France": "FR",
+  "India": "IN",
+  "China": "CN",
+  "South Korea": "KR",
+  "UAE": "AE",
+};
+
+interface MarketInsightsPanelProps {
+  selectedCountries: string[];
+  currency: string;
+}
+
+export function MarketInsightsPanel({ selectedCountries, currency }: MarketInsightsPanelProps) {
+  const { t } = useTranslation();
+
+  const selectedData = useMemo(() => {
+    return selectedCountries
+      .map((country) => {
+        const code = COUNTRY_NAME_TO_CODE[country] || country;
+        return COUNTRY_DATA[code];
+      })
+      .filter(Boolean);
+  }, [selectedCountries]);
+
+  const aggregatedStats = useMemo(() => {
+    if (selectedData.length === 0) return null;
+
+    let totalPop = 0;
+    let totalInv = 0;
+    let totalImpBillions = 0;
+
+    selectedData.forEach((country) => {
+      const popNum = parseFloat(country.population.replace(/[BMT]/g, "")) * 
+        (country.population.includes("B") ? 1000 : country.population.includes("M") ? 1 : 0.001);
+      totalPop += popNum;
+      totalInv += country.inventories;
+      const impNum = parseFloat(country.impressions.replace(/[BMT]/g, "")) * 
+        (country.impressions.includes("T") ? 1000 : country.impressions.includes("B") ? 1 : 0.001);
+      totalImpBillions += impNum;
+    });
+
+    const formatPop = totalPop >= 1000 
+      ? `${(totalPop / 1000).toFixed(1)}B` 
+      : `${totalPop.toFixed(1)}M`;
+    
+    const formatImp = totalImpBillions >= 1000 
+      ? `${(totalImpBillions / 1000).toFixed(1)}T` 
+      : `${totalImpBillions.toFixed(0)}B`;
+
+    return {
+      population: formatPop,
+      inventories: totalInv.toLocaleString(),
+      impressions: formatImp,
+    };
+  }, [selectedData]);
+
+  const regionBreakdown = useMemo(() => {
+    if (selectedData.length <= 1) return null;
+    
+    const regions: Record<string, number> = {};
+    selectedData.forEach((country) => {
+      regions[country.region] = (regions[country.region] || 0) + 1;
+    });
+    
+    return Object.entries(regions).map(([region, count]) => ({
+      region,
+      count,
+    }));
+  }, [selectedData]);
+
+  if (selectedCountries.length === 0) {
+    return (
+      <Card className="border-mw-neutral-200 dark:border-mw-neutral-700">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Globe className="h-4 w-4 text-mw-primary-500" />
+            {t("deals:createDeal.marketInsights")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-mw-neutral-500 text-center py-4">
+            {t("deals:createDeal.selectCountries")}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border-mw-neutral-200 dark:border-mw-neutral-700">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm font-medium flex items-center gap-2">
+          <Globe className="h-4 w-4 text-mw-primary-500" />
+          {t("deals:createDeal.marketInsights")}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-0 space-y-4">
+        <div className="flex flex-wrap gap-1">
+          {selectedData.map((country) => (
+            <Badge 
+              key={country.code} 
+              variant="secondary"
+              className="text-xs font-medium"
+            >
+              {country.code}
+            </Badge>
+          ))}
+        </div>
+
+        <div className="relative w-full aspect-[2/1] bg-mw-neutral-100 dark:bg-mw-neutral-800 rounded-md overflow-hidden">
+          <svg viewBox="0 0 360 180" className="w-full h-full">
+            <rect fill="currentColor" className="text-mw-neutral-200 dark:text-mw-neutral-700" width="360" height="180" />
+            <g className="text-mw-neutral-300 dark:text-mw-neutral-600">
+              <ellipse cx="65" cy="65" rx="25" ry="30" fill="currentColor" />
+              <ellipse cx="95" cy="105" rx="20" ry="25" fill="currentColor" />
+              <ellipse cx="155" cy="55" rx="30" ry="25" fill="currentColor" />
+              <ellipse cx="155" cy="95" rx="25" ry="20" fill="currentColor" />
+              <ellipse cx="145" cy="130" rx="15" ry="12" fill="currentColor" />
+              <ellipse cx="230" cy="70" rx="35" ry="30" fill="currentColor" />
+              <ellipse cx="270" cy="55" rx="25" ry="25" fill="currentColor" />
+              <ellipse cx="305" cy="80" rx="20" ry="35" fill="currentColor" />
+              <ellipse cx="295" cy="140" rx="30" ry="20" fill="currentColor" />
+            </g>
+            {selectedData.some(c => c.region === "NA") && (
+              <ellipse cx="65" cy="65" rx="25" ry="30" className="fill-mw-primary-500" opacity="0.8" />
+            )}
+            {selectedData.some(c => c.region === "EMEA") && (
+              <ellipse cx="155" cy="65" rx="28" ry="22" className="fill-mw-primary-500" opacity="0.8" />
+            )}
+            {selectedData.some(c => c.region === "APAC") && (
+              <>
+                <ellipse cx="270" cy="65" rx="30" ry="28" className="fill-mw-primary-500" opacity="0.8" />
+                <ellipse cx="305" cy="100" rx="18" ry="25" className="fill-mw-primary-500" opacity="0.8" />
+              </>
+            )}
+            {selectedData.some(c => c.region === "MENA") && (
+              <ellipse cx="175" cy="90" rx="15" ry="12" className="fill-mw-primary-500" opacity="0.8" />
+            )}
+          </svg>
+        </div>
+
+        {aggregatedStats && (
+          <div className="grid grid-cols-1 gap-2">
+            <div className="flex items-center gap-3 p-2.5 bg-blue-50 dark:bg-blue-900/20 rounded-md">
+              <Users className="h-4 w-4 text-blue-500" />
+              <div className="flex-1">
+                <div className="text-xs text-mw-neutral-500">{t("deals:createDeal.population")}</div>
+                <div className="text-sm font-semibold text-blue-600 dark:text-blue-400">
+                  {aggregatedStats.population}
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-2.5 bg-green-50 dark:bg-green-900/20 rounded-md">
+              <BarChart3 className="h-4 w-4 text-green-500" />
+              <div className="flex-1">
+                <div className="text-xs text-mw-neutral-500">{t("deals:createDeal.availableInventories")}</div>
+                <div className="text-sm font-semibold text-green-600 dark:text-green-400">
+                  {aggregatedStats.inventories}
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-2.5 bg-purple-50 dark:bg-purple-900/20 rounded-md">
+              <TrendingUp className="h-4 w-4 text-purple-500" />
+              <div className="flex-1">
+                <div className="text-xs text-mw-neutral-500">{t("deals:createDeal.estimatedImpressions")}</div>
+                <div className="text-sm font-semibold text-purple-600 dark:text-purple-400">
+                  {aggregatedStats.impressions}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {regionBreakdown && regionBreakdown.length > 1 && (
+          <div className="pt-2 border-t border-mw-neutral-200 dark:border-mw-neutral-700">
+            <div className="text-xs text-mw-neutral-500 mb-2">Region Breakdown</div>
+            <div className="flex flex-wrap gap-2">
+              {regionBreakdown.map(({ region, count }) => (
+                <Badge 
+                  key={region} 
+                  variant="outline"
+                  className="text-xs"
+                >
+                  {region}: {count}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}