adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/proof-of-play.tsx

@@ -0,0 +1,880 @@
+import { useState, useMemo, useRef, useCallback } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useLocation } from "wouter";
+import { 
+  Search, Filter, Download, Upload, FileText, Play, CheckCircle, AlertCircle, 
+  Clock, Image, Video, Trash2, Eye, MoreHorizontal, Edit, Camera, RefreshCw,
+  Wifi, WifiOff, Monitor
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PageHeader } from "@/components/page-header";
+import { DataTable } from "@/components/data-table";
+import { FilterDrawer, FilterField, FilterValues } from "@/components/filter-drawer";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { formatDate } from "@/lib/utils";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { useToast } from "@/hooks/use-toast";
+import type { Deal, LineItem, Creative, MediaOwner, ProofOfPlay, PlaylogUpload, Screen, PlayerStatus } from "@shared/schema";
+import { PROOF_OF_PLAY_SOURCES, PROOF_OF_PLAY_STATUSES, PLAYLOG_UPLOAD_STATUSES } from "@shared/schema";
+
+const initialFilterValues: FilterValues = {
+  inventory: [],
+  deal: [],
+  lineItem: [],
+  status: [],
+  source: [],
+  dateRange: { start: undefined, end: undefined },
+};
+
+export default function ProofOfPlayPage() {
+  const [, setLocation] = useLocation();
+  const { toast } = useToast();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [filterValues, setFilterValues] = useState<FilterValues>(initialFilterValues);
+  const [appliedFilters, setAppliedFilters] = useState<FilterValues>(initialFilterValues);
+  const [activeTab, setActiveTab] = useState("pop");
+  const [mediaPreviewOpen, setMediaPreviewOpen] = useState(false);
+  const [selectedMedia, setSelectedMedia] = useState<{ type: "image" | "video"; url: string } | null>(null);
+  const [webcamDialogOpen, setWebcamDialogOpen] = useState(false);
+  const [selectedScreen, setSelectedScreen] = useState<Screen | null>(null);
+  const [capturedScreenshot, setCapturedScreenshot] = useState<string | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const { data: popRecords, isLoading: popLoading } = useQuery<ProofOfPlay[]>({
+    queryKey: ["/api/proof-of-play"],
+  });
+
+  const { data: playlogUploads, isLoading: playlogsLoading } = useQuery<PlaylogUpload[]>({
+    queryKey: ["/api/playlogs"],
+  });
+
+  const { data: deals } = useQuery<Deal[]>({
+    queryKey: ["/api/deals"],
+  });
+
+  const { data: lineItems } = useQuery<LineItem[]>({
+    queryKey: ["/api/line-items"],
+  });
+
+  const { data: creatives } = useQuery<Creative[]>({
+    queryKey: ["/api/creatives"],
+  });
+
+  const { data: mediaOwners } = useQuery<MediaOwner[]>({
+    queryKey: ["/api/media-owners"],
+  });
+
+  const { data: screens } = useQuery<Screen[]>({
+    queryKey: ["/api/screens"],
+  });
+
+  const { data: playerStatuses } = useQuery<PlayerStatus[]>({
+    queryKey: ["/api/player-statuses"],
+  });
+
+  const deletePopMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await apiRequest("DELETE", `/api/proof-of-play/${id}`);
+    },
+    onSuccess: () => {
+      toast({ title: "Record Deleted", description: "Proof of play record has been deleted." });
+      queryClient.invalidateQueries({ queryKey: ["/api/proof-of-play"] });
+    },
+    onError: () => {
+      toast({ variant: "destructive", title: "Error", description: "Failed to delete record." });
+    },
+  });
+
+  const deletePlaylogMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await apiRequest("DELETE", `/api/playlogs/${id}`);
+    },
+    onSuccess: () => {
+      toast({ title: "Upload Deleted", description: "Playlog upload has been deleted." });
+      queryClient.invalidateQueries({ queryKey: ["/api/playlogs"] });
+    },
+    onError: () => {
+      toast({ variant: "destructive", title: "Error", description: "Failed to delete upload." });
+    },
+  });
+
+  const syncPlaylogsMutation = useMutation({
+    mutationFn: async (screenId: string) => {
+      await apiRequest("POST", `/api/screens/${screenId}/sync-playlogs`);
+    },
+    onSuccess: () => {
+      toast({ title: "Sync Started", description: "Fetching playlogs from CMS. This may take a moment." });
+      queryClient.invalidateQueries({ queryKey: ["/api/proof-of-play"] });
+    },
+    onError: () => {
+      toast({ variant: "destructive", title: "Sync Failed", description: "Could not fetch playlogs from CMS." });
+    },
+  });
+
+  const saveScreenshotMutation = useMutation({
+    mutationFn: async ({ screenId, imageData }: { screenId: string; imageData: string }) => {
+      await apiRequest("POST", `/api/proof-of-play/screenshot`, { screenId, imageData });
+    },
+    onSuccess: () => {
+      toast({ title: "Screenshot Saved", description: "Screenshot has been saved as proof of play." });
+      queryClient.invalidateQueries({ queryKey: ["/api/proof-of-play"] });
+      setWebcamDialogOpen(false);
+      setCapturedScreenshot(null);
+    },
+    onError: () => {
+      toast({ variant: "destructive", title: "Error", description: "Failed to save screenshot." });
+    },
+  });
+
+  const handleViewMedia = (type: "image" | "video", url: string) => {
+    setSelectedMedia({ type, url });
+    setMediaPreviewOpen(true);
+  };
+
+  const getScreenInfo = (screenId: string | null) => {
+    if (!screenId) return null;
+    return screens?.find(s => s.id === screenId);
+  };
+
+  const getPlayerStatus = (screenId: string | null) => {
+    if (!screenId) return null;
+    return playerStatuses?.find(ps => ps.screenId === screenId);
+  };
+
+  const calculateDuration = (start: string, end: string) => {
+    const startDate = new Date(start);
+    const endDate = new Date(end);
+    const diffMs = endDate.getTime() - startDate.getTime();
+    return Math.round(diffMs / 1000);
+  };
+
+  const handleOpenWebcam = (screen: Screen) => {
+    setSelectedScreen(screen);
+    setCapturedScreenshot(null);
+    setWebcamDialogOpen(true);
+  };
+
+  const handleCaptureScreenshot = useCallback(() => {
+    if (videoRef.current && canvasRef.current) {
+      const video = videoRef.current;
+      const canvas = canvasRef.current;
+      canvas.width = video.videoWidth || 640;
+      canvas.height = video.videoHeight || 360;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const dataUrl = canvas.toDataURL("image/png");
+        setCapturedScreenshot(dataUrl);
+      }
+    }
+  }, []);
+
+  const handleSaveScreenshot = () => {
+    if (capturedScreenshot && selectedScreen) {
+      saveScreenshotMutation.mutate({
+        screenId: selectedScreen.id,
+        imageData: capturedScreenshot,
+      });
+    }
+  };
+
+  const inventoryOptions = useMemo(() => 
+    screens?.map(s => ({ value: s.id, label: s.name })) || [],
+    [screens]
+  );
+
+  const dealOptions = useMemo(() => 
+    deals?.map(d => ({ value: d.id, label: d.name })) || [],
+    [deals]
+  );
+
+  const lineItemOptions = useMemo(() => 
+    lineItems?.map(li => ({ value: li.id, label: li.name })) || [],
+    [lineItems]
+  );
+
+  const sourceOptions = PROOF_OF_PLAY_SOURCES.map(s => ({ value: s.value, label: s.label }));
+  const popStatusOptions = PROOF_OF_PLAY_STATUSES.map(s => ({ value: s.value, label: s.label }));
+  const playlogStatusOptions = PLAYLOG_UPLOAD_STATUSES.map(s => ({ value: s.value, label: s.label }));
+
+  const filterFields: FilterField[] = activeTab === "pop" ? [
+    { key: "inventory", label: "Inventory", type: "multi-select", options: inventoryOptions },
+    { key: "deal", label: "Deal", type: "multi-select", options: dealOptions },
+    { key: "lineItem", label: "Line Item", type: "multi-select", options: lineItemOptions },
+    { key: "source", label: "Source", type: "multi-select", options: sourceOptions },
+    { key: "status", label: "Status", type: "multi-select", options: popStatusOptions },
+    { key: "dateRange", label: "Date Range", type: "date-range" },
+  ] : [
+    { key: "deal", label: "Deal", type: "multi-select", options: dealOptions },
+    { key: "lineItem", label: "Line Item", type: "multi-select", options: lineItemOptions },
+    { key: "status", label: "Status", type: "multi-select", options: playlogStatusOptions },
+    { key: "dateRange", label: "Upload Date", type: "date-range" },
+  ];
+
+  const handleApplyFilters = () => {
+    setAppliedFilters(filterValues);
+    setFilterOpen(false);
+  };
+
+  const handleResetFilters = () => {
+    setFilterValues(initialFilterValues);
+    setAppliedFilters(initialFilterValues);
+  };
+
+  const hasActiveFilters = Object.entries(appliedFilters).some(([key, value]) => {
+    if (key === "dateRange") {
+      return (value as any).start || (value as any).end;
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    return false;
+  });
+
+  const getDealName = (dealId: string | null) => {
+    if (!dealId) return "-";
+    return deals?.find(d => d.id === dealId)?.name || dealId;
+  };
+
+  const getLineItemName = (lineItemId: string | null) => {
+    if (!lineItemId) return "-";
+    return lineItems?.find(li => li.id === lineItemId)?.name || lineItemId;
+  };
+
+  const getCreativeName = (creativeId: string | null) => {
+    if (!creativeId) return "-";
+    return creatives?.find(c => c.id === creativeId)?.name || creativeId;
+  };
+
+  const getMediaOwnerName = (mediaOwnerId: string | null) => {
+    if (!mediaOwnerId) return "-";
+    return mediaOwners?.find(mo => mo.id === mediaOwnerId)?.name || mediaOwnerId;
+  };
+
+  const getStatusBadge = (status: string, type: "pop" | "playlog") => {
+    const statusConfig = type === "pop" 
+      ? PROOF_OF_PLAY_STATUSES.find(s => s.value === status)
+      : PLAYLOG_UPLOAD_STATUSES.find(s => s.value === status);
+    
+    const colorClass = statusConfig?.color === "green" 
+      ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+      : statusConfig?.color === "yellow"
+      ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+      : statusConfig?.color === "red"
+      ? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+      : "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200";
+
+    const Icon = status === "processed" || status === "completed" 
+      ? CheckCircle 
+      : status === "failed" 
+      ? AlertCircle 
+      : Clock;
+
+    return (
+      <Badge variant="secondary" className={colorClass}>
+        <Icon className="h-3 w-3 mr-1" />
+        {statusConfig?.label || status}
+      </Badge>
+    );
+  };
+
+  const getSourceBadge = (source: string) => {
+    const sourceConfig = PROOF_OF_PLAY_SOURCES.find(s => s.value === source);
+    return (
+      <Badge variant="outline">
+        {source === "cms" ? <Play className="h-3 w-3 mr-1" /> : <Upload className="h-3 w-3 mr-1" />}
+        {sourceConfig?.label || source}
+      </Badge>
+    );
+  };
+
+  const getWebcamStatusBadge = (screen: Screen) => {
+    if (!screen.webcamUrl) {
+      return null;
+    }
+    const isActive = screen.webcamStatus === "active";
+    return (
+      <Badge 
+        variant="outline" 
+        className={isActive 
+          ? "bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300" 
+          : "bg-gray-50 text-gray-500 border-gray-200 dark:bg-gray-900 dark:text-gray-400"
+        }
+      >
+        {isActive ? <Wifi className="h-3 w-3 mr-1" /> : <WifiOff className="h-3 w-3 mr-1" />}
+        {isActive ? "Live" : "Offline"}
+      </Badge>
+    );
+  };
+
+  const getPlayerStatusBadge = (screenId: string | null) => {
+    const playerStatus = getPlayerStatus(screenId);
+    if (!playerStatus) return null;
+    
+    const isOnline = playerStatus.status === "online";
+    return (
+      <Badge 
+        variant="outline" 
+        className={isOnline 
+          ? "bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300" 
+          : "bg-red-50 text-red-600 border-red-200 dark:bg-red-950 dark:text-red-400"
+        }
+      >
+        {isOnline ? <CheckCircle className="h-3 w-3 mr-1" /> : <AlertCircle className="h-3 w-3 mr-1" />}
+        {isOnline ? "Online" : "Offline"}
+      </Badge>
+    );
+  };
+
+  const popColumns = [
+    {
+      key: "proofMedia",
+      header: "Proof",
+      cell: (record: ProofOfPlay) => {
+        const hasImage = record.proofImageUrl;
+        const hasVideo = record.proofVideoUrl;
+        if (!hasImage && !hasVideo) {
+          return <span className="text-muted-foreground text-xs">No proof</span>;
+        }
+        return (
+          <div className="flex items-center gap-1">
+            {hasImage && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => handleViewMedia("image", record.proofImageUrl!)}
+                data-testid={`button-view-image-${record.id}`}
+              >
+                <Image className="h-4 w-4 text-blue-600" />
+              </Button>
+            )}
+            {hasVideo && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => handleViewMedia("video", record.proofVideoUrl!)}
+                data-testid={`button-view-video-${record.id}`}
+              >
+                <Video className="h-4 w-4 text-purple-600" />
+              </Button>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: "inventory",
+      header: "Inventory",
+      cell: (record: ProofOfPlay) => {
+        const screen = getScreenInfo(record.screenId);
+        const playerStatus = getPlayerStatus(record.screenId);
+        const hasWebcam = screen?.webcamUrl && screen?.webcamStatus === "active";
+        const isPlayerOnline = playerStatus?.status === "online";
+        return (
+          <div className="flex items-center gap-3">
+            <div className="flex flex-col gap-1 flex-1">
+              <div className="flex items-center gap-2">
+                <Monitor className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">{screen?.name || "Unknown"}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                {screen && getWebcamStatusBadge(screen)}
+                {getPlayerStatusBadge(record.screenId)}
+              </div>
+            </div>
+            <div className="flex items-center gap-1">
+              {hasWebcam && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => screen && handleOpenWebcam(screen)}
+                  title="View Live Feed"
+                  data-testid={`button-webcam-${record.id}`}
+                >
+                  <Camera className="h-4 w-4 text-blue-600" />
+                </Button>
+              )}
+              {isPlayerOnline && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => screen && syncPlaylogsMutation.mutate(screen.id)}
+                  disabled={syncPlaylogsMutation.isPending}
+                  title="Sync Playlogs from CMS"
+                  data-testid={`button-sync-${record.id}`}
+                >
+                  <RefreshCw className={`h-4 w-4 text-green-600 ${syncPlaylogsMutation.isPending ? 'animate-spin' : ''}`} />
+                </Button>
+              )}
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      key: "player",
+      header: "Player",
+      cell: (record: ProofOfPlay) => (
+        <span className="text-sm">{record.playerId || "-"}</span>
+      ),
+    },
+    {
+      key: "creative",
+      header: "Creative",
+      cell: (record: ProofOfPlay) => (
+        <span className="text-sm">{getCreativeName(record.creativeId)}</span>
+      ),
+    },
+    {
+      key: "deal",
+      header: "Deal / Line Item",
+      cell: (record: ProofOfPlay) => (
+        <div className="flex flex-col">
+          <span className="text-sm font-medium">{getDealName(record.dealId)}</span>
+          <span className="text-xs text-muted-foreground">{getLineItemName(record.lineItemId)}</span>
+        </div>
+      ),
+    },
+    {
+      key: "playTime",
+      header: "Play Time",
+      cell: (record: ProofOfPlay) => {
+        const duration = calculateDuration(record.startTimestamp, record.endTimestamp);
+        return (
+          <div className="flex flex-col">
+            <span className="text-sm">{formatDate(record.startTimestamp)}</span>
+            <span className="text-xs text-muted-foreground">{duration}s duration</span>
+          </div>
+        );
+      },
+    },
+    {
+      key: "source",
+      header: "Source",
+      cell: (record: ProofOfPlay) => getSourceBadge(record.source),
+    },
+    {
+      key: "status",
+      header: "Status",
+      cell: (record: ProofOfPlay) => getStatusBadge(record.status, "pop"),
+    },
+    {
+      key: "actions",
+      header: "",
+      cell: (record: ProofOfPlay) => {
+        const screen = getScreenInfo(record.screenId);
+        const playerStatus = getPlayerStatus(record.screenId);
+        const hasWebcam = screen?.webcamUrl && screen?.webcamStatus === "active";
+        const isPlayerOnline = playerStatus?.status === "online";
+
+        return (
+          <div className="flex items-center gap-1">
+            {hasWebcam && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => screen && handleOpenWebcam(screen)}
+                title="View Live Feed"
+                data-testid={`button-webcam-${record.id}`}
+              >
+                <Camera className="h-4 w-4 text-green-600" />
+              </Button>
+            )}
+            {isPlayerOnline && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => syncPlaylogsMutation.mutate(record.screenId!)}
+                disabled={syncPlaylogsMutation.isPending}
+                title="Sync Playlogs from CMS"
+                data-testid={`button-sync-${record.id}`}
+              >
+                <RefreshCw className={`h-4 w-4 text-blue-600 ${syncPlaylogsMutation.isPending ? 'animate-spin' : ''}`} />
+              </Button>
+            )}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" data-testid={`button-actions-pop-${record.id}`}>
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setLocation(`/proof-of-play/${record.id}`)} data-testid={`menu-view-${record.id}`}>
+                  <Eye className="h-4 w-4 mr-2" />
+                  View Details
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setLocation(`/proof-of-play/${record.id}/edit`)} data-testid={`menu-edit-${record.id}`}>
+                  <Edit className="h-4 w-4 mr-2" />
+                  Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem 
+                  onClick={() => deletePopMutation.mutate(record.id)} 
+                  className="text-destructive"
+                  data-testid={`menu-delete-${record.id}`}
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const playlogColumns = [
+    {
+      key: "fileName",
+      header: "File Name",
+      cell: (upload: PlaylogUpload) => (
+        <div className="flex items-center gap-2">
+          <FileText className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">{upload.fileName}</span>
+        </div>
+      ),
+    },
+    {
+      key: "deal",
+      header: "Deal",
+      cell: (upload: PlaylogUpload) => (
+        <span className="text-sm">{getDealName(upload.dealId)}</span>
+      ),
+    },
+    {
+      key: "lineItem",
+      header: "Line Item",
+      cell: (upload: PlaylogUpload) => (
+        <span className="text-sm">{getLineItemName(upload.lineItemId)}</span>
+      ),
+    },
+    {
+      key: "mediaOwner",
+      header: "Media Owner",
+      cell: (upload: PlaylogUpload) => (
+        <span className="text-sm">{getMediaOwnerName(upload.mediaOwnerId)}</span>
+      ),
+    },
+    {
+      key: "records",
+      header: "Records",
+      cell: (upload: PlaylogUpload) => (
+        <div className="flex flex-col">
+          <span className="text-sm font-medium">{upload.totalRecords} total</span>
+          <span className="text-xs text-muted-foreground">
+            <span className="text-green-600">{upload.validRecords} valid</span>
+            {(upload.invalidRecords || 0) > 0 && (
+              <span className="text-red-500 ml-1">/ {upload.invalidRecords} invalid</span>
+            )}
+          </span>
+        </div>
+      ),
+    },
+    {
+      key: "uploadedAt",
+      header: "Uploaded",
+      cell: (upload: PlaylogUpload) => (
+        <div className="flex flex-col">
+          <span className="text-sm">{formatDate(upload.uploadedAt)}</span>
+          <span className="text-xs text-muted-foreground">by {upload.uploadedBy}</span>
+        </div>
+      ),
+    },
+    {
+      key: "status",
+      header: "Status",
+      cell: (upload: PlaylogUpload) => getStatusBadge(upload.status, "playlog"),
+    },
+    {
+      key: "actions",
+      header: "",
+      cell: (upload: PlaylogUpload) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" data-testid={`button-actions-playlog-${upload.id}`}>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setLocation(`/proof-of-play/uploads/${upload.id}`)} data-testid={`menu-view-upload-${upload.id}`}>
+              <Eye className="h-4 w-4 mr-2" />
+              View Details
+            </DropdownMenuItem>
+            <DropdownMenuItem 
+              onClick={() => deletePlaylogMutation.mutate(upload.id)} 
+              className="text-destructive"
+              data-testid={`menu-delete-upload-${upload.id}`}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  const handleDownloadTemplate = () => {
+    window.location.href = "/api/playlogs/template";
+  };
+
+  const filteredPopRecords = useMemo(() => {
+    if (!popRecords) return [];
+    return popRecords.filter(record => {
+      if (searchQuery) {
+        const screen = getScreenInfo(record.screenId);
+        const searchLower = searchQuery.toLowerCase();
+        const matchesSearch = 
+          screen?.name?.toLowerCase().includes(searchLower) ||
+          record.playerId?.toLowerCase().includes(searchLower) ||
+          getDealName(record.dealId).toLowerCase().includes(searchLower) ||
+          getCreativeName(record.creativeId).toLowerCase().includes(searchLower);
+        if (!matchesSearch) return false;
+      }
+      const invFilter = appliedFilters.inventory as string[] | undefined;
+      const dealFilter = appliedFilters.deal as string[] | undefined;
+      const lineItemFilter = appliedFilters.lineItem as string[] | undefined;
+      const sourceFilter = appliedFilters.source as string[] | undefined;
+      const statusFilter = appliedFilters.status as string[] | undefined;
+      if (invFilter?.length && invFilter.length > 0 && !invFilter.includes(record.screenId || "")) return false;
+      if (dealFilter?.length && dealFilter.length > 0 && !dealFilter.includes(record.dealId || "")) return false;
+      if (lineItemFilter?.length && lineItemFilter.length > 0 && !lineItemFilter.includes(record.lineItemId || "")) return false;
+      if (sourceFilter?.length && sourceFilter.length > 0 && !sourceFilter.includes(record.source)) return false;
+      if (statusFilter?.length && statusFilter.length > 0 && !statusFilter.includes(record.status)) return false;
+      return true;
+    });
+  }, [popRecords, searchQuery, appliedFilters, screens, deals, creatives]);
+
+  const filteredPlaylogUploads = useMemo(() => {
+    if (!playlogUploads) return [];
+    return playlogUploads.filter(upload => {
+      if (searchQuery) {
+        const searchLower = searchQuery.toLowerCase();
+        const matchesSearch = 
+          upload.fileName?.toLowerCase().includes(searchLower) ||
+          getDealName(upload.dealId).toLowerCase().includes(searchLower);
+        if (!matchesSearch) return false;
+      }
+      const dealFilter = appliedFilters.deal as string[] | undefined;
+      const lineItemFilter = appliedFilters.lineItem as string[] | undefined;
+      const statusFilter = appliedFilters.status as string[] | undefined;
+      if (dealFilter?.length && dealFilter.length > 0 && !dealFilter.includes(upload.dealId || "")) return false;
+      if (lineItemFilter?.length && lineItemFilter.length > 0 && !lineItemFilter.includes(upload.lineItemId || "")) return false;
+      if (statusFilter?.length && statusFilter.length > 0 && !statusFilter.includes(upload.status)) return false;
+      return true;
+    });
+  }, [playlogUploads, searchQuery, appliedFilters, deals]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-col gap-4 p-6">
+        <PageHeader
+          title="Proof of Play"
+          description="View playback records and upload playlogs for traditional campaigns"
+          actions={
+            <div className="flex items-center gap-3">
+              <Button
+                variant="outline"
+                onClick={handleDownloadTemplate}
+                data-testid="button-download-template"
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Download Template
+              </Button>
+              <Button
+                onClick={() => setLocation("/proof-of-play/upload")}
+                data-testid="button-upload-playlog"
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                Upload Playlog
+              </Button>
+            </div>
+          }
+        />
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <TabsList className="mb-4">
+            <TabsTrigger value="pop" data-testid="tab-pop">
+              <Play className="h-4 w-4 mr-2" />
+              Proof of Play Records
+            </TabsTrigger>
+            <TabsTrigger value="playlogs" data-testid="tab-playlogs">
+              <FileText className="h-4 w-4 mr-2" />
+              Playlog Uploads
+            </TabsTrigger>
+          </TabsList>
+
+          <div className="flex items-center gap-3 mb-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={activeTab === "pop" ? "Search by inventory, player, deal..." : "Search by file name, deal..."}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 bg-white dark:bg-background border"
+                data-testid="input-search"
+              />
+            </div>
+            <Button
+              variant="outline"
+              onClick={() => setFilterOpen(true)}
+              className="bg-white dark:bg-background"
+              data-testid="button-filter"
+            >
+              <Filter className="h-4 w-4 mr-2" />
+              Filters
+              {hasActiveFilters && (
+                <Badge variant="secondary" className="ml-2">
+                  Active
+                </Badge>
+              )}
+            </Button>
+          </div>
+
+          <Card>
+            <CardContent className="pt-6">
+              <TabsContent value="pop" className="mt-0">
+                <DataTable
+                  columns={popColumns}
+                  data={filteredPopRecords}
+                  isLoading={popLoading}
+                  emptyMessage="No proof of play records found"
+                />
+              </TabsContent>
+
+              <TabsContent value="playlogs" className="mt-0">
+                <DataTable
+                  columns={playlogColumns}
+                  data={filteredPlaylogUploads}
+                  isLoading={playlogsLoading}
+                  emptyMessage="No playlog uploads found"
+                />
+              </TabsContent>
+            </CardContent>
+          </Card>
+        </Tabs>
+      </div>
+
+      <FilterDrawer
+        open={filterOpen}
+        onOpenChange={setFilterOpen}
+        fields={filterFields}
+        values={filterValues}
+        onChange={setFilterValues}
+        onApply={handleApplyFilters}
+        onClear={handleResetFilters}
+      />
+
+      <Dialog open={mediaPreviewOpen} onOpenChange={setMediaPreviewOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Proof Media</DialogTitle>
+          </DialogHeader>
+          <div className="flex items-center justify-center min-h-[300px] p-4">
+            {selectedMedia?.type === "image" ? (
+              <img 
+                src={selectedMedia.url} 
+                alt="Proof of play" 
+                className="max-w-full max-h-[500px] object-contain rounded-lg"
+              />
+            ) : selectedMedia?.type === "video" ? (
+              <video 
+                src={selectedMedia.url} 
+                controls 
+                className="max-w-full max-h-[500px] rounded-lg"
+              />
+            ) : (
+              <span className="text-muted-foreground">No media to display</span>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={webcamDialogOpen} onOpenChange={setWebcamDialogOpen}>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Camera className="h-5 w-5" />
+              Live Feed - {selectedScreen?.name}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="relative bg-black rounded-lg overflow-hidden aspect-video">
+              {selectedScreen?.webcamUrl ? (
+                <>
+                  <video
+                    ref={videoRef}
+                    src={selectedScreen.webcamUrl}
+                    autoPlay
+                    muted
+                    playsInline
+                    className="w-full h-full object-contain"
+                  />
+                  <canvas ref={canvasRef} className="hidden" />
+                </>
+              ) : (
+                <div className="flex items-center justify-center h-full text-white">
+                  <span>No webcam feed available</span>
+                </div>
+              )}
+              {capturedScreenshot && (
+                <div className="absolute inset-0 bg-black/80 flex items-center justify-center">
+                  <img 
+                    src={capturedScreenshot} 
+                    alt="Captured screenshot" 
+                    className="max-w-full max-h-full object-contain rounded-lg"
+                  />
+                </div>
+              )}
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
+                  <Wifi className="h-3 w-3 mr-1" />
+                  Live
+                </Badge>
+                <span className="text-sm text-muted-foreground">
+                  Feed from inventory management system
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                {capturedScreenshot ? (
+                  <>
+                    <Button 
+                      variant="outline" 
+                      onClick={() => setCapturedScreenshot(null)}
+                      data-testid="button-retake-screenshot"
+                    >
+                      Retake
+                    </Button>
+                    <Button 
+                      onClick={handleSaveScreenshot}
+                      disabled={saveScreenshotMutation.isPending}
+                      data-testid="button-save-screenshot"
+                    >
+                      {saveScreenshotMutation.isPending ? "Saving..." : "Save as Proof"}
+                    </Button>
+                  </>
+                ) : (
+                  <Button 
+                    onClick={handleCaptureScreenshot}
+                    data-testid="button-capture-screenshot"
+                  >
+                    <Camera className="h-4 w-4 mr-2" />
+                    Capture Screenshot
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}