adserver-dashboard 1.0.0

package/client/src/pages/deal-history.tsx

@@ -0,0 +1,434 @@
+import { useState } from "react";
+import { useParams, useLocation } from "wouter";
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Input } 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 {
+  ArrowLeft,
+  Search,
+  MoreHorizontal,
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  LayoutList,
+  Clock,
+  User,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import {
+  InfluenceDealsAPI,
+  influenceDealsRequest,
+  type Deal,
+} from "@/lib/influence-deals-api";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+interface HistoryEntry {
+  id: string;
+  action: string;
+  entityType: string;
+  entityId: string;
+  field?: string;
+  fieldLabel?: string;
+  summary?: string;
+  previousValue?: any;
+  currentValue?: any;
+  changedBy?: string | null;
+  changedByEmail?: string | null;
+  metadata?: {
+    entityName?: string;
+    totalChanges?: number;
+    changedFields?: string[];
+    // Approval-related metadata
+    approvalAction?: string;
+    decision?: string;
+    approverEmail?: string;
+    approverEmails?: string[];
+    sellerEmail?: string;
+    newDealStatus?: string;
+    rejectionReason?: string | null;
+    cascadedLineItems?: number;
+    skippedLineItems?: number;
+    expiresAt?: string;
+    success?: boolean;
+    error?: string | null;
+    timestamp?: string;
+  };
+  timestamp: string;
+}
+
+interface HistoryApiResponse {
+  dealId: string;
+  total: number;
+  items: HistoryEntry[];
+}
+
+export default function DealHistoryPage() {
+  usePageTitle("Deal History");
+  const { dealId } = useParams<{ dealId: string }>();
+  const [, setLocation] = useLocation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [actionFilter, setActionFilter] = useState<string>("all");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 15;
+
+  const { data: deal, isLoading: isLoadingDeal } = useQuery({
+    queryKey: ["deal", dealId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest(
+        InfluenceDealsAPI.deals.get(dealId!),
+        "GET",
+      );
+      return response as Deal;
+    },
+    enabled: !!dealId,
+  });
+
+  const { data: historyData, isLoading: isLoadingHistory, error: historyError } = useQuery({
+    queryKey: ["deal-history", dealId, actionFilter !== "all" ? actionFilter : undefined],
+    queryFn: async () => {
+      const params: { action?: string } = {};
+      if (actionFilter !== "all") {
+        params.action = actionFilter;
+      }
+      const response = await influenceDealsRequest<HistoryApiResponse>(
+        InfluenceDealsAPI.deals.history(dealId!, params),
+        "GET",
+      );
+      return response;
+    },
+    enabled: !!dealId,
+  });
+
+  const historyEntries = historyData?.items || [];
+
+  const filteredHistory = historyEntries.filter((entry) => {
+    const entityName = entry.metadata?.entityName || entry.fieldLabel || "";
+    const user = entry.changedByEmail || entry.changedBy || "";
+    const matchesSearch =
+      entityName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      entry.action.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (entry.summary || "").toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesAction = actionFilter === "all" || entry.action.toLowerCase().includes(actionFilter.toLowerCase());
+
+    return matchesSearch && matchesAction;
+  });
+
+  const paginatedHistory = filteredHistory.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+
+  const totalPages = Math.ceil(filteredHistory.length / itemsPerPage);
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const getActionBadge = (action: string) => {
+    const colors: Record<string, string> = {
+      Created: "bg-green-100 text-green-700 border-green-200",
+      Updated: "bg-blue-100 text-blue-700 border-blue-200",
+      "Status Changed": "bg-yellow-100 text-yellow-700 border-yellow-200",
+      "Budget Changed": "bg-purple-100 text-purple-700 border-purple-200",
+      "Inventory Added": "bg-teal-100 text-teal-700 border-teal-200",
+      "Inventory Removed": "bg-red-100 text-red-700 border-red-200",
+    };
+    return (
+      <Badge className={`${colors[action] || "bg-gray-100 text-gray-700"} text-xs`}>
+        {action}
+      </Badge>
+    );
+  };
+
+  const getEntityTypeBadge = (type: string) => {
+    const colors: Record<string, string> = {
+      Deal: "bg-mw-primary-100 text-mw-primary-700 border-mw-primary-200",
+      "Line Item": "bg-orange-100 text-orange-700 border-orange-200",
+      Creative: "bg-pink-100 text-pink-700 border-pink-200",
+    };
+    return (
+      <Badge variant="outline" className={`${colors[type] || ""} text-xs`}>
+        {type}
+      </Badge>
+    );
+  };
+
+  const getApprovalActionLabel = (action: string): string => {
+    const labels: Record<string, string> = {
+      APPROVAL_REQUESTED: "Approval requested",
+      APPROVAL_EMAIL_SENT: "Approval email sent",
+      OTP_EMAIL_SENT: "OTP verification email sent",
+      OTP_VERIFIED: "OTP verified",
+      APPROVAL_APPROVED: "Deal approved",
+      APPROVAL_REJECTED: "Deal rejected",
+      DECISION_EMAIL_SENT: "Decision notification sent",
+      APPROVAL_EXPIRED: "Approval expired",
+    };
+    return labels[action] || action;
+  };
+
+  const getEntryDetails = (entry: HistoryEntry): string => {
+    // First check for approval-related metadata
+    if (entry.metadata?.approvalAction) {
+      const action = entry.metadata.approvalAction;
+      const parts: string[] = [];
+
+      parts.push(getApprovalActionLabel(action));
+
+      if (action === "APPROVAL_REQUESTED" && entry.metadata.approverEmails?.length) {
+        parts.push(`to ${entry.metadata.approverEmails.join(", ")}`);
+      }
+
+      if (action === "APPROVAL_APPROVED" || action === "APPROVAL_REJECTED") {
+        if (entry.metadata.cascadedLineItems !== undefined && entry.metadata.cascadedLineItems > 0) {
+          parts.push(`(${entry.metadata.cascadedLineItems} line items)`);
+        }
+      }
+
+      if (action === "DECISION_EMAIL_SENT" && entry.metadata.decision) {
+        parts.push(`- ${entry.metadata.decision.toLowerCase()}`);
+      }
+
+      if (entry.metadata.rejectionReason) {
+        parts.push(`- Reason: ${entry.metadata.rejectionReason}`);
+      }
+
+      return parts.join(" ");
+    }
+
+    // Fall back to summary or field changes
+    if (entry.summary) {
+      return entry.summary;
+    }
+
+    // Generate summary from changed fields
+    if (entry.metadata?.changedFields?.length) {
+      const fieldLabels = entry.metadata.changedFields.map((f) => 
+        f.split("_").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")
+      );
+      return `Updated: ${fieldLabels.join(", ")}`;
+    }
+
+    // For CREATE actions
+    if (entry.action === "CREATE") {
+      const name = entry.metadata?.entityName || entry.entityType;
+      return `${entry.entityType} "${name}" created`;
+    }
+
+    return "-";
+  };
+
+  const isLoading = isLoadingDeal || isLoadingHistory;
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-mw-primary-500" />
+      </div>
+    );
+  }
+
+  if (historyError) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="text-center">
+          <p className="text-mw-neutral-500 mb-2">Failed to load deal history</p>
+          <p className="text-sm text-mw-neutral-400">{(historyError as Error).message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-[calc(100vh-72px)] w-full flex flex-col bg-mw-neutral-50 dark:bg-mw-neutral-900 overflow-hidden">
+      <div className="flex-shrink-0 px-6 py-4 border-b border-mw-neutral-200 bg-white dark:bg-mw-neutral-800">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Button
+              variant="ghost"
+              size="sm"
+              isIconOnly
+              onClick={() => setLocation(`/deals/${dealId}/line-items`)}
+              className="h-8 w-8 !p-0"
+            >
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-xl font-semibold text-mw-neutral-900 dark:text-white">
+                  Deal History
+                </h1>
+              </div>
+              <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">
+                {deal?.name || "Deal"} - Activity log
+              </p>
+            </div>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" isIconOnly className="h-9 w-9 !p-0">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setLocation(`/deals/${dealId}/line-items`)}>
+                <LayoutList className="h-4 w-4 mr-2" />
+                Line Items
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      <div className="flex-1 px-6 py-6 flex flex-col gap-4 overflow-hidden">
+        <div className="flex items-center gap-4 flex-shrink-0">
+          <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+            <Input
+              placeholder="Search history..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="pl-10"
+            />
+          </div>
+          <Select
+            value={actionFilter}
+            onChange={(e) => {
+              setActionFilter(e.target.value);
+              setCurrentPage(1);
+            }}
+            className="w-48"
+            options={[
+              { value: "all", label: "All Actions" },
+              { value: "created", label: "Created" },
+              { value: "updated", label: "Updated" },
+              { value: "status", label: "Status Changed" },
+              { value: "budget", label: "Budget Changed" },
+              { value: "inventory", label: "Inventory Changes" },
+            ]}
+          />
+        </div>
+
+        <Card className="flex-1 flex flex-col border-mw-neutral-200 dark:border-mw-neutral-700 overflow-hidden">
+          <div className="flex-1 overflow-auto">
+            <Table hoverable className="border-0">
+              <TableHeader className="sticky top-0 bg-white dark:bg-mw-neutral-800 z-10">
+                <TableRow>
+                  <TableHead className="text-xs font-medium text-mw-neutral-500">
+                    Timestamp
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-500">
+                    Action
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-500">
+                    Entity
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-500">
+                    Name
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-500">
+                    User
+                  </TableHead>
+                  <TableHead className="text-xs font-medium text-mw-neutral-500">
+                    Details
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedHistory.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="px-4 py-12 text-center text-mw-neutral-500">
+                      No history entries found
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  paginatedHistory.map((entry) => (
+                    <TableRow key={entry.id}>
+                      <TableCell>
+                        <div className="flex items-center gap-2 text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+                          <Clock className="h-3.5 w-3.5" />
+                          {formatDate(entry.timestamp)}
+                        </div>
+                      </TableCell>
+                      <TableCell>{getActionBadge(entry.action)}</TableCell>
+                      <TableCell>{getEntityTypeBadge(entry.entityType)}</TableCell>
+                      <TableCell>
+                        <div>
+                          <span className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                            {entry.metadata?.entityName || entry.fieldLabel || "-"}
+                          </span>
+                          {entry.field && (
+                            <p className="text-xs text-mw-neutral-500">{entry.fieldLabel || entry.field}</p>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2 text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+                          <User className="h-3.5 w-3.5" />
+                          {entry.changedByEmail || entry.changedBy || "System"}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-sm text-mw-neutral-500">
+                        {getEntryDetails(entry)}
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          {filteredHistory.length > itemsPerPage && (
+            <div className="flex items-center justify-between px-4 py-3 border-t border-mw-neutral-200 dark:border-mw-neutral-700">
+              <span className="text-sm text-mw-neutral-500">
+                Showing {(currentPage - 1) * itemsPerPage + 1} to{" "}
+                {Math.min(currentPage * itemsPerPage, filteredHistory.length)} of {filteredHistory.length} entries
+              </span>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                  disabled={currentPage === 1}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+                  Page {currentPage} of {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={currentPage === totalPages}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}