adserver-dashboard 1.0.0

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

@@ -0,0 +1,479 @@
+import { useState, useMemo } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useLocation, Link } from "wouter";
+import { ArrowLeft, Upload, Download, FileText, X, AlertCircle, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { PageHeader } from "@/components/page-header";
+import { SearchableCombobox } from "@/components/searchable-combobox";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import type { Deal, LineItem, Creative, MediaOwner, InsertPlaylogUpload } from "@shared/schema";
+
+export default function ProofOfPlayUpload() {
+  const [, setLocation] = useLocation();
+  const { toast } = useToast();
+  
+  const [selectedDealId, setSelectedDealId] = useState<string | null>(null);
+  const [selectedLineItemId, setSelectedLineItemId] = useState<string | null>(null);
+  const [selectedCreativeId, setSelectedCreativeId] = useState<string | null>(null);
+  const [selectedMediaOwnerId, setSelectedMediaOwnerId] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [proofFiles, setProofFiles] = useState<File[]>([]);
+  const [notes, setNotes] = useState("");
+  const [dragActive, setDragActive] = useState(false);
+
+  const { data: deals } = useQuery<Deal[]>({
+    queryKey: ["/api/deals"],
+  });
+
+  const { data: allLineItems } = useQuery<LineItem[]>({
+    queryKey: ["/api/line-items"],
+  });
+
+  const { data: creatives } = useQuery<Creative[]>({
+    queryKey: ["/api/creatives"],
+  });
+
+  const { data: mediaOwners } = useQuery<MediaOwner[]>({
+    queryKey: ["/api/media-owners"],
+  });
+
+  const lineItems = useMemo(() => {
+    if (!selectedDealId || !allLineItems) return [];
+    return allLineItems.filter(li => li.dealId === selectedDealId);
+  }, [selectedDealId, allLineItems]);
+
+  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 creativeOptions = useMemo(() => 
+    creatives?.map(c => ({ value: c.id, label: c.name })) || [],
+    [creatives]
+  );
+
+  const mediaOwnerOptions = useMemo(() => 
+    mediaOwners?.map(mo => ({ value: mo.id, label: mo.name })) || [],
+    [mediaOwners]
+  );
+
+  const uploadMutation = useMutation({
+    mutationFn: async (data: InsertPlaylogUpload) => {
+      const response = await apiRequest("POST", "/api/playlogs/upload", data);
+      return response.json();
+    },
+    onSuccess: () => {
+      toast({
+        title: "Playlog Uploaded",
+        description: "Your playlog file has been uploaded and is being processed.",
+      });
+      queryClient.invalidateQueries({ queryKey: ["/api/playlogs"] });
+      setLocation("/proof-of-play");
+    },
+    onError: (error: Error) => {
+      toast({
+        variant: "destructive",
+        title: "Upload Failed",
+        description: error.message || "Failed to upload playlog. Please try again.",
+      });
+    },
+  });
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+
+  const isValidFileType = (fileName: string) => {
+    return fileName.endsWith(".csv") || fileName.endsWith(".xlsx") || fileName.endsWith(".xls");
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const droppedFile = e.dataTransfer.files[0];
+      if (isValidFileType(droppedFile.name)) {
+        setFile(droppedFile);
+      } else {
+        toast({
+          variant: "destructive",
+          title: "Invalid File Type",
+          description: "Please upload a CSV or Excel (.xlsx) file.",
+        });
+      }
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const selectedFile = e.target.files[0];
+      if (isValidFileType(selectedFile.name)) {
+        setFile(selectedFile);
+      } else {
+        toast({
+          variant: "destructive",
+          title: "Invalid File Type",
+          description: "Please upload a CSV or Excel (.xlsx) file.",
+        });
+      }
+    }
+  };
+
+  const handleProofFilesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const newFiles = Array.from(e.target.files);
+      setProofFiles(prev => [...prev, ...newFiles]);
+    }
+  };
+
+  const removeProofFile = (index: number) => {
+    setProofFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedMediaOwnerId) {
+      toast({
+        variant: "destructive",
+        title: "Missing Required Field",
+        description: "Please select a media owner.",
+      });
+      return;
+    }
+
+    if (!file) {
+      toast({
+        variant: "destructive",
+        title: "Missing File",
+        description: "Please upload a playlog CSV file.",
+      });
+      return;
+    }
+
+    const uploadData: InsertPlaylogUpload = {
+      dealId: selectedDealId,
+      lineItemId: selectedLineItemId,
+      creativeId: selectedCreativeId,
+      mediaOwnerId: selectedMediaOwnerId,
+      fileName: file.name,
+      fileUrl: `/uploads/${file.name}`,
+      totalRecords: 0,
+      validRecords: 0,
+      invalidRecords: 0,
+      status: "uploaded",
+      proofMediaUrls: proofFiles.map(f => `/uploads/proof/${f.name}`),
+      uploadedBy: "Current User",
+      uploadedAt: new Date().toISOString(),
+      notes: notes || null,
+    };
+
+    uploadMutation.mutate(uploadData);
+  };
+
+  const handleDownloadTemplate = () => {
+    const params = new URLSearchParams();
+    if (selectedDealId) {
+      params.set("dealId", selectedDealId);
+      const deal = deals?.find(d => d.id === selectedDealId);
+      if (deal) params.set("dealName", deal.name);
+    }
+    if (selectedLineItemId) {
+      params.set("lineItemId", selectedLineItemId);
+      const lineItem = lineItems.find(li => li.id === selectedLineItemId);
+      if (lineItem) params.set("lineItemName", lineItem.name);
+    }
+    const queryString = params.toString();
+    const url = `/api/playlogs/template${queryString ? `?${queryString}` : ""}`;
+    
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "playlog_template.csv";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <PageHeader
+        title={
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="icon" asChild>
+              <Link href="/proof-of-play">
+                <ArrowLeft className="h-4 w-4" />
+              </Link>
+            </Button>
+            <span>Upload Playlog</span>
+          </div>
+        }
+        description="Upload playlog data for traditional campaigns"
+      />
+
+      <div className="flex-1 p-6">
+        <div className="max-w-3xl mx-auto space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Campaign Selection</CardTitle>
+              <CardDescription>
+                Select the campaign details for this playlog. Deal and Line Item are recommended for proper data mapping.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="mediaOwner">Media Owner *</Label>
+                <SearchableCombobox
+                  options={mediaOwnerOptions}
+                  value={selectedMediaOwnerId || ""}
+                  onValueChange={(value) => setSelectedMediaOwnerId(value || null)}
+                  placeholder="Select media owner..."
+                  emptyMessage="No media owners found"
+                  data-testid="select-media-owner"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="deal">Deal (Recommended)</Label>
+                <SearchableCombobox
+                  options={dealOptions}
+                  value={selectedDealId || ""}
+                  onValueChange={(value) => {
+                    setSelectedDealId(value || null);
+                    setSelectedLineItemId(null);
+                  }}
+                  placeholder="Select deal..."
+                  emptyMessage="No deals found"
+                  data-testid="select-deal"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="lineItem">Line Item (Recommended)</Label>
+                <SearchableCombobox
+                  options={lineItemOptions}
+                  value={selectedLineItemId || ""}
+                  onValueChange={(value) => setSelectedLineItemId(value || null)}
+                  placeholder={selectedDealId ? "Select line item..." : "Select a deal first"}
+                  emptyMessage="No line items found"
+                  disabled={!selectedDealId}
+                  data-testid="select-line-item"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="creative">Creative (Optional)</Label>
+                <SearchableCombobox
+                  options={creativeOptions}
+                  value={selectedCreativeId || ""}
+                  onValueChange={(value) => setSelectedCreativeId(value || null)}
+                  placeholder="Select creative..."
+                  emptyMessage="No creatives found"
+                  data-testid="select-creative"
+                />
+              </div>
+
+              {(!selectedDealId || !selectedLineItemId) && (
+                <div className="p-3 bg-amber-50 dark:bg-amber-950 border border-amber-200 dark:border-amber-800 rounded-lg">
+                  <div className="flex items-start gap-2">
+                    <AlertCircle className="h-4 w-4 mt-0.5 text-amber-600 dark:text-amber-400" />
+                    <p className="text-sm text-amber-700 dark:text-amber-300">
+                      Selecting a Deal and Line Item ensures proper mapping of playlog data. 
+                      You can also include deal_id and line_item_id columns directly in your CSV file.
+                    </p>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>Playlog File</CardTitle>
+                  <CardDescription>
+                    Upload a CSV file with playlog data. Download the template to see the required format.
+                  </CardDescription>
+                </div>
+                <Button variant="outline" size="sm" onClick={handleDownloadTemplate}>
+                  <Download className="h-4 w-4 mr-2" />
+                  Download Template
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div
+                className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
+                  dragActive
+                    ? "border-primary bg-primary/5"
+                    : file
+                    ? "border-green-500 bg-green-50 dark:bg-green-950"
+                    : "border-muted-foreground/25 hover:border-muted-foreground/50"
+                }`}
+                onDragEnter={handleDrag}
+                onDragLeave={handleDrag}
+                onDragOver={handleDrag}
+                onDrop={handleDrop}
+              >
+                {file ? (
+                  <div className="flex items-center justify-center gap-3">
+                    <CheckCircle className="h-8 w-8 text-green-600" />
+                    <div className="text-left">
+                      <p className="font-medium">{file.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {(file.size / 1024).toFixed(1)} KB
+                      </p>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => setFile(null)}
+                      className="ml-4"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    <div className="flex justify-center">
+                      <FileText className="h-12 w-12 text-muted-foreground" />
+                    </div>
+                    <div>
+                      <p className="font-medium">Drop your CSV or Excel file here</p>
+                      <p className="text-sm text-muted-foreground">or click to browse</p>
+                    </div>
+                    <input
+                      type="file"
+                      accept=".csv,.xlsx,.xls"
+                      onChange={handleFileChange}
+                      className="hidden"
+                      id="file-upload"
+                    />
+                    <Button variant="secondary" asChild>
+                      <label htmlFor="file-upload" className="cursor-pointer">
+                        <Upload className="h-4 w-4 mr-2" />
+                        Browse Files
+                      </label>
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <div className="mt-4 p-4 bg-muted/50 rounded-lg">
+                <div className="flex items-start gap-2">
+                  <AlertCircle className="h-4 w-4 mt-0.5 text-muted-foreground" />
+                  <div className="text-sm text-muted-foreground">
+                    <p className="font-medium">CSV Format Requirements:</p>
+                    <ul className="mt-1 list-disc list-inside space-y-0.5">
+                      <li>Deal ID, Line Item ID, Reference ID, Player ID, Creative ID, Start Time, End Time, Notes</li>
+                      <li>Datetime format: ISO 8601 (e.g., 2024-01-15T10:00:00Z)</li>
+                      <li>Duration and Impressions are calculated automatically by Measure</li>
+                      <li>Template includes guidelines - do not delete the header row</li>
+                      <li>Excel (.xlsx) files are supported and will be converted automatically</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Proof Media (Optional)</CardTitle>
+              <CardDescription>
+                Upload images or videos as proof of play. These will be attached to the playlog for verification.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <input
+                  type="file"
+                  accept="image/*,video/*"
+                  multiple
+                  onChange={handleProofFilesChange}
+                  className="hidden"
+                  id="proof-upload"
+                />
+                <Button variant="outline" asChild>
+                  <label htmlFor="proof-upload" className="cursor-pointer">
+                    <Upload className="h-4 w-4 mr-2" />
+                    Add Proof Media
+                  </label>
+                </Button>
+
+                {proofFiles.length > 0 && (
+                  <div className="space-y-2">
+                    {proofFiles.map((pf, index) => (
+                      <div
+                        key={index}
+                        className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
+                      >
+                        <div className="flex items-center gap-3">
+                          <FileText className="h-4 w-4 text-muted-foreground" />
+                          <span className="text-sm">{pf.name}</span>
+                          <span className="text-xs text-muted-foreground">
+                            ({(pf.size / 1024).toFixed(1)} KB)
+                          </span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => removeProofFile(index)}
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Notes (Optional)</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Textarea
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                placeholder="Add any additional notes about this playlog upload..."
+                rows={3}
+                data-testid="input-notes"
+              />
+            </CardContent>
+          </Card>
+
+          <div className="flex justify-end gap-3">
+            <Button variant="outline" asChild>
+              <Link href="/proof-of-play">Cancel</Link>
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              disabled={!selectedMediaOwnerId || !file || uploadMutation.isPending}
+              data-testid="button-submit-upload"
+            >
+              {uploadMutation.isPending ? "Uploading..." : "Upload Playlog"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}