adserver-dashboard 1.0.0

package/client/src/components/deals/resend-approval-sheet.tsx

@@ -0,0 +1,201 @@
+import { useState } from 'react';
+import { 
+  Sheet, 
+  SheetContent, 
+  SheetHeader, 
+  SheetTitle, 
+  SheetDescription,
+  SheetFooter 
+} from '@moving-walls/design-system';
+import { Button } from '@moving-walls/design-system';
+import { Checkbox } from '@moving-walls/design-system';
+import { ScrollArea } from '@moving-walls/design-system';
+import { Mail, Loader2, RefreshCw, CheckCircle2 } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import { useResendApprovalEmail } from '@/hooks/use-approval';
+
+interface ResendApprovalSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dealId: string;
+  existingEmails?: string[];
+}
+
+export function ResendApprovalSheet({
+  open,
+  onOpenChange,
+  dealId,
+  existingEmails,
+}: ResendApprovalSheetProps) {
+  const { toast } = useToast();
+  const resendApprovalMutation = useResendApprovalEmail(dealId);
+  const [selectedEmails, setSelectedEmails] = useState<Set<string>>(new Set());
+  
+  const emails = existingEmails ?? [];
+
+  const handleToggleEmail = (email: string) => {
+    setSelectedEmails(prev => {
+      const next = new Set(prev);
+      if (next.has(email)) {
+        next.delete(email);
+      } else {
+        next.add(email);
+      }
+      return next;
+    });
+  };
+
+  const handleSelectAll = () => {
+    if (selectedEmails.size === emails.length) {
+      setSelectedEmails(new Set());
+    } else {
+      setSelectedEmails(new Set(emails));
+    }
+  };
+
+  const handleSubmit = () => {
+    if (selectedEmails.size === 0) {
+      toast({
+        title: 'No emails selected',
+        description: 'Please select at least one approver to resend the email',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const frontendUrl = `${import.meta.env.VITE_INFLUENCE_URL || window.location.origin}/approval`;
+
+    resendApprovalMutation.mutate(
+      { 
+        frontendUrl,
+        emails: Array.from(selectedEmails),
+      },
+      {
+        onSuccess: () => {
+          toast({
+            title: 'Approval email resent',
+            description: `Email sent to ${selectedEmails.size} approver${selectedEmails.size > 1 ? 's' : ''}`,
+          });
+          setSelectedEmails(new Set());
+          onOpenChange(false);
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to resend email',
+            description: error.message || 'Please try again later',
+            variant: 'destructive',
+          });
+        },
+      }
+    );
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-[400px] sm:w-[450px]" data-testid="resend-approval-sheet">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <RefreshCw className="h-5 w-5 text-mw-info-500" />
+            Resend Approval Email
+          </SheetTitle>
+          <SheetDescription>
+            Select the approvers to resend the approval request email to.
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="py-6 space-y-4">
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium text-mw-gray-700 dark:text-mw-gray-300">
+              Approvers ({emails.length})
+            </h4>
+            {emails.length > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleSelectAll}
+                className="text-xs"
+              >
+                {selectedEmails.size === emails.length ? 'Deselect All' : 'Select All'}
+              </Button>
+            )}
+          </div>
+          
+          {emails.length === 0 ? (
+            <div className="flex items-center justify-center py-8 text-mw-gray-500 dark:text-mw-gray-400">
+              <div className="text-center">
+                <Mail className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                <p className="text-sm">No approvers configured</p>
+                <p className="text-xs mt-1">Add approver emails in deal settings</p>
+              </div>
+            </div>
+          ) : (
+            <ScrollArea className="max-h-[350px]">
+              <div className="space-y-2" data-testid="email-list">
+                {emails.map((email) => (
+                  <div
+                    key={email}
+                    className={`flex items-center gap-3 px-3 py-2.5 rounded-lg border transition-colors cursor-pointer
+                      ${selectedEmails.has(email) 
+                        ? 'bg-mw-info-50 border-mw-info-300 dark:bg-mw-info-900/20 dark:border-mw-info-500' 
+                        : 'bg-white border-mw-gray-200 hover:bg-mw-gray-50 dark:bg-mw-gray-800 dark:border-mw-gray-700 dark:hover:bg-mw-gray-700'
+                      }`}
+                    onClick={() => handleToggleEmail(email)}
+                  >
+                    <Checkbox
+                      checked={selectedEmails.has(email)}
+                      onChange={() => handleToggleEmail(email)}
+                      className="pointer-events-none"
+                    />
+                    <Mail className="h-4 w-4 text-mw-gray-400 flex-shrink-0" />
+                    <span className="text-sm text-mw-gray-700 dark:text-mw-gray-200 truncate">
+                      {email}
+                    </span>
+                    {selectedEmails.has(email) && (
+                      <CheckCircle2 className="h-4 w-4 text-mw-info-500 ml-auto flex-shrink-0" />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          )}
+
+          {selectedEmails.size > 0 && (
+            <div className="text-sm text-mw-info-600 dark:text-mw-info-400 bg-mw-info-50 dark:bg-mw-info-900/20 px-3 py-2 rounded-md">
+              {selectedEmails.size} approver{selectedEmails.size > 1 ? 's' : ''} selected
+            </div>
+          )}
+        </div>
+
+        <SheetFooter className="flex gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            data-testid="button-cancel"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={handleSubmit}
+            disabled={selectedEmails.size === 0 || resendApprovalMutation.isPending}
+            data-testid="button-submit"
+          >
+            {resendApprovalMutation.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Sending...
+              </>
+            ) : (
+              <>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Resend Email
+              </>
+            )}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/client/src/components/direct-campaigns/campaign-card.tsx

@@ -0,0 +1,283 @@
+import React from "react";
+import { Calendar, Info, MoreHorizontal, Eye, Pencil, FileText, Archive } from "lucide-react";
+import { Card, CardContent, CardFooter, CardHeader, cn } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { StatusBadge } from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import { DirectCampaign } from "@shared/direct-io-schema";
+import { Deal, isDealEditable } from "@/lib/influence-deals-api";
+
+type StatusColor = "green" | "gray" | "yellow" | "blue" | "red";
+type CampaignType = DirectCampaign | Deal;
+
+interface CampaignCardProps {
+  campaign: CampaignType;
+  onViewLineItems?: (id: string) => void;
+  onSummary?: (id: string) => void;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+  className?: string;
+}
+
+function isDeal(campaign: CampaignType): campaign is Deal {
+  return 'startDate' in campaign || 'dealId' in campaign;
+}
+
+const getStatusColor = (status: string): StatusColor => {
+  switch (status.toLowerCase()) {
+    case "active":
+    case "live":
+    case "approved":
+      return "green";
+    case "draft":
+    case "generated":
+      return "gray";
+    case "paused":
+    case "pending":
+    case "requested":
+    case "pending_creatives":
+      return "yellow";
+    case "completed":
+    case "attribution":
+      return "blue";
+    case "cancelled":
+    case "canceled":
+    case "archived":
+    case "rejected":
+    case "expired":
+      return "red";
+    default:
+      return "gray";
+  }
+};
+
+const formatDate = (date: Date | string): string => {
+  const d = new Date(date);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+};
+
+const formatDateRange = (startDate?: Date | string | null, endDate?: Date | string | null): string => {
+  if (!startDate || !endDate) return 'N/A - N/A';
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const options: Intl.DateTimeFormatOptions = { month: 'short', day: '2-digit', year: 'numeric' };
+  return `${start.toLocaleDateString('en-US', options)} - ${end.toLocaleDateString('en-US', options)}`;
+};
+
+const calculateDaysRemaining = (endDate?: Date | string | null): string | null => {
+  if (!endDate) return null;
+  const end = new Date(endDate);
+  const now = new Date();
+  const days = Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+  if (days < 0) return 'Ended';
+  if (days === 0) return 'Ends today';
+  return `${days} days left`;
+};
+
+export function CampaignCard({
+  campaign,
+  onViewLineItems,
+  onSummary,
+  onEdit,
+  onDelete,
+  className,
+}: CampaignCardProps) {
+  const isFromDealApi = isDeal(campaign);
+  
+  const startDate = isFromDealApi 
+    ? (campaign as Deal).startDate 
+    : (campaign as DirectCampaign).start_date;
+  const endDate = isFromDealApi 
+    ? (campaign as Deal).endDate 
+    : (campaign as DirectCampaign).end_date;
+  const rawBrand = isFromDealApi 
+    ? ((campaign as Deal).advertiser || (campaign as Deal).brand || 'N/A')
+    : (campaign as DirectCampaign).brand;
+  const brand = typeof rawBrand === 'object' && rawBrand !== null
+    ? ('name' in rawBrand ? (rawBrand as { name: string }).name : 'N/A')
+    : (rawBrand || 'N/A');
+  const source = isFromDealApi ? (campaign as Deal).source : (campaign as DirectCampaign).source;
+  const campaignId = isFromDealApi 
+    ? ((campaign as Deal).dealId || campaign.id) 
+    : campaign.id;
+  const daysRemaining = calculateDaysRemaining(endDate);
+
+  return (
+    <Card
+      className={cn(
+        "hover:shadow-md transition-shadow cursor-pointer border-mw-neutral-200 dark:border-mw-neutral-700 flex flex-col h-full bg-white dark:bg-mw-neutral-900",
+        className
+      )}
+    >
+      <CardHeader className="flex flex-row items-start justify-between p-4 pb-3 gap-2">
+        <div className="flex flex-col min-w-0">
+          <p 
+            className="font-medium text-mw-primary-600 text-sm truncate cursor-pointer hover:underline" 
+            title={campaign.name}
+            onClick={() => onViewLineItems?.(campaign.id)}
+          >
+            {campaign.name}
+          </p>
+          <p className="text-xs text-mw-neutral-500">
+            DealID: {campaignId.length > 16 ? campaignId.slice(0, 16) + '...' : campaignId}
+          </p>
+          {source === 'mw-planner' && (
+            <div className="flex items-center gap-1 mt-1">
+              <span className="text-xs px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full font-medium inline-flex items-center gap-1">
+                mw-planner
+                {((campaign as Deal).externalId || (campaign as any).external_id) && (
+                  <span className="text-purple-500">
+                    | {((campaign as Deal).externalId || (campaign as any).external_id).length > 12 
+                      ? ((campaign as Deal).externalId || (campaign as any).external_id).slice(0, 12) + '...' 
+                      : ((campaign as Deal).externalId || (campaign as any).external_id)}
+                  </span>
+                )}
+              </span>
+            </div>
+          )}
+        </div>
+        <StatusBadge status={getStatusColor(campaign.status)} className="shrink-0 ml-auto">
+          {campaign.status.charAt(0).toUpperCase() + campaign.status.slice(1).toLowerCase()}
+        </StatusBadge>
+      </CardHeader>
+
+      <CardContent className="p-4 pt-0 space-y-3 flex-1 flex flex-col">
+        <div className="flex items-center gap-2 text-mw-neutral-600 dark:text-mw-neutral-400">
+          <Calendar className="size-4 text-mw-neutral-400" />
+          <span className="text-sm">
+            {formatDateRange(startDate, endDate)}
+          </span>
+          {daysRemaining && (
+            <span className={cn(
+              "text-xs ml-auto",
+              daysRemaining === 'Ended' ? 'text-red-500' : 'text-mw-primary-500'
+            )}>
+              {daysRemaining}
+            </span>
+          )}
+        </div>
+
+        <div className="h-px bg-mw-neutral-100 dark:bg-mw-neutral-800" />
+
+        <div className="space-y-2">
+          <div>
+            <p className="text-xs text-mw-neutral-500 mb-0.5">Brand</p>
+            <p className="font-medium text-mw-neutral-900 dark:text-white text-sm">{brand}</p>
+          </div>
+
+          <div>
+            <p className="text-xs text-mw-neutral-500 mb-0.5">Inventories Used</p>
+            <p className="font-medium text-mw-neutral-900 dark:text-white text-sm">
+              {(campaign as any).inventoriesCount || (campaign as any).inventories?.length || '0'} Units
+            </p>
+          </div>
+
+          {isFromDealApi && (campaign as Deal).totalBudget && (
+            <div>
+              <p className="text-xs text-mw-neutral-500 mb-0.5">Budget Utilization</p>
+              <p className="font-medium text-mw-neutral-900 dark:text-white text-sm">
+                {(campaign as Deal).currency || 'MYR'} {((campaign as Deal).totalBudget || 0).toLocaleString()}
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="h-px bg-mw-neutral-100 dark:bg-mw-neutral-800" />
+
+        <div className="grid grid-cols-2 gap-4 mt-auto">
+          <div>
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-mw-neutral-500">Impressions</span>
+              <Info className="size-3 text-mw-neutral-400" />
+            </div>
+            <p className="font-semibold text-mw-neutral-900 dark:text-white text-base">
+              {(campaign as any).impressions?.toLocaleString() || 'N/A'}
+            </p>
+          </div>
+          <div>
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-mw-neutral-500">Reach</span>
+              <Info className="size-3 text-mw-neutral-400" />
+            </div>
+            <p className="font-semibold text-mw-neutral-900 dark:text-white text-base">
+              {(campaign as any).reach?.toLocaleString() || 'N/A'}
+            </p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-mw-neutral-500">SOV</span>
+              <Info className="size-3 text-mw-neutral-400" />
+            </div>
+            <p className="font-semibold text-mw-neutral-900 dark:text-white text-base">
+              {(campaign as any).sov || 'N/A'}
+            </p>
+          </div>
+          <div>
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-mw-neutral-500">SOT</span>
+              <Info className="size-3 text-mw-neutral-400" />
+            </div>
+            <p className="font-semibold text-mw-neutral-900 dark:text-white text-base">
+              {(campaign as any).sot || 'N/A'}
+            </p>
+          </div>
+        </div>
+      </CardContent>
+
+      <CardFooter className="p-4 pt-0">
+        <div className="flex w-full gap-2">
+          <Button
+            variant="outline"
+            size="md"
+            className="flex-1 border-mw-primary-500 text-mw-primary-500 hover:bg-mw-primary-50 font-medium"
+            onClick={() => onViewLineItems?.(campaign.id)}
+          >
+            View Details
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="md"
+                className="border-mw-primary-500 text-mw-primary-500 hover:bg-mw-primary-50 px-3 shrink-0"
+              >
+                <MoreHorizontal className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="border-container-border w-48">
+              <DropdownMenuItem onClick={() => onViewLineItems?.(campaign.id)} className="flex items-center gap-2">
+                <Eye className="size-4 shrink-0" />
+                <span>View Line Items</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onSummary?.(campaign.id)} className="flex items-center gap-2">
+                <FileText className="size-4 shrink-0" />
+                <span>Summary</span>
+              </DropdownMenuItem>
+              {isDealEditable(campaign.status) && (
+                <DropdownMenuItem onClick={() => onEdit?.(campaign.id)} className="flex items-center gap-2">
+                  <Pencil className="size-4 shrink-0" />
+                  <span>Edit Deal</span>
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem 
+                onClick={() => onDelete?.(campaign.id)}
+                className="flex items-center gap-2 text-red-600 dark:text-red-400"
+              >
+                <Archive className="size-4 shrink-0" />
+                <span>Move to Archive</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}