adserver-dashboard 1.0.0

package/client/src/pages/integrations.tsx

@@ -0,0 +1,429 @@
+import { useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Plus, Search, MoreHorizontal, Trash2, Edit, Plug, Zap, Link2, Check } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  Button,
+  Input,
+  Badge,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Select,
+  PageHeader,
+} from "@moving-walls/design-system";
+import { useToast } from "@/hooks/use-toast";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+interface Partner {
+  id: string;
+  name: string;
+  endpoint: string;
+  status: "active" | "inactive" | "pending";
+}
+
+const SAMPLE_SSP_PARTNERS: Partner[] = [
+  { id: "ssp-1", name: "Influence", endpoint: "https://api.influence.io/v1", status: "active" },
+  { id: "ssp-2", name: "Hivestack", endpoint: "https://api.hivestack.com/v2", status: "active" },
+  { id: "ssp-3", name: "Vistar", endpoint: "https://api.vistarmedia.com/v1", status: "active" },
+  { id: "ssp-4", name: "Place Exchange", endpoint: "https://api.placeexchange.com/v1", status: "pending" },
+  { id: "ssp-5", name: "VIOOH", endpoint: "https://api.viooh.com/v1", status: "active" },
+  { id: "ssp-6", name: "Broadsign", endpoint: "https://api.broadsign.com/v1", status: "inactive" },
+  { id: "ssp-7", name: "Magnite", endpoint: "https://api.magnite.com/v1", status: "active" },
+];
+
+const SAMPLE_DSP_PARTNERS: Partner[] = [
+  { id: "dsp-1", name: "Activate", endpoint: "https://api.activate.com/v1", status: "active" },
+  { id: "dsp-2", name: "The Trade Desk", endpoint: "https://api.thetradedesk.com/v3", status: "active" },
+  { id: "dsp-3", name: "DV360", endpoint: "https://displayvideo.googleapis.com/v2", status: "active" },
+  { id: "dsp-4", name: "Xandr", endpoint: "https://api.xandr.com/v1", status: "pending" },
+  { id: "dsp-5", name: "Yahoo DSP", endpoint: "https://api.yahooadtech.com/v1", status: "active" },
+  { id: "dsp-6", name: "Cassie", endpoint: "https://api.cassie.io/v1", status: "inactive" },
+];
+
+
+export default function IntegrationsPage() {
+  const { t } = useTranslation(["common"]);
+  usePageTitle("Integrations");
+  const { toast } = useToast();
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sspPartners, setSspPartners] = useState<Partner[]>(SAMPLE_SSP_PARTNERS);
+  const [dspPartners, setDspPartners] = useState<Partner[]>(SAMPLE_DSP_PARTNERS);
+
+  // Form state
+  const [partnerType, setPartnerType] = useState<'ssp' | 'dsp'>('ssp');
+  const [partnerName, setPartnerName] = useState('');
+  const [endpoint, setEndpoint] = useState('');
+  const [apiKey, setApiKey] = useState('');
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!partnerName.trim()) {
+      toast({
+        title: "Validation Error",
+        description: "Partner name is required",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const newPartner: Partner = {
+      id: `${partnerType}-${Date.now()}`,
+      name: partnerName,
+      endpoint: endpoint || "",
+      status: "pending",
+    };
+
+    if (partnerType === "ssp") {
+      setSspPartners((prev) => [...prev, newPartner]);
+    } else {
+      setDspPartners((prev) => [...prev, newPartner]);
+    }
+
+    setIsDialogOpen(false);
+    setPartnerType('ssp');
+    setPartnerName('');
+    setEndpoint('');
+    setApiKey('');
+    toast({
+      title: "Partner added",
+      description: "The integration partner has been added successfully.",
+      variant: "success",
+    });
+  };
+
+  const handleRemoveSSP = (id: string) => {
+    setSspPartners((prev) => prev.filter((p) => p.id !== id));
+    toast({
+      title: "Partner removed",
+      description: "The SSP partner has been removed.",
+      variant: "success",
+    });
+  };
+
+  const handleRemoveDSP = (id: string) => {
+    setDspPartners((prev) => prev.filter((p) => p.id !== id));
+    toast({
+      title: "Partner removed",
+      description: "The DSP partner has been removed.",
+      variant: "success",
+    });
+  };
+
+  const filteredSSP = sspPartners.filter((p) =>
+    p.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const filteredDSP = dspPartners.filter((p) =>
+    p.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getStatusBadge = (status: Partner["status"]) => {
+    switch (status) {
+      case "active":
+        return (
+          <Badge variant="outline" className="bg-emerald-500/15 text-emerald-600 border-emerald-500/20">
+            <Check className="h-3 w-3 mr-1" />
+            Active
+          </Badge>
+        );
+      case "inactive":
+        return (
+          <Badge variant="outline" className="bg-red-500/15 text-red-600 border-red-500/20">
+            Inactive
+          </Badge>
+        );
+      case "pending":
+        return (
+          <Badge variant="outline" className="bg-amber-500/15 text-amber-600 border-amber-500/20">
+            Pending
+          </Badge>
+        );
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <PageHeader
+        title="Integrations"
+        subtitle="Manage SSP and DSP partner connections"
+        actions={
+          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+            <DialogTrigger asChild>
+              <Button data-testid="button-add-partner">
+                <Plus className="h-4 w-4 mr-2" />
+                Add Partner
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[500px]">
+              <DialogHeader>
+                <DialogTitle>Add Integration Partner</DialogTitle>
+                <DialogDescription>
+                  Connect a new SSP or DSP partner to your ad server.
+                </DialogDescription>
+              </DialogHeader>
+              <form onSubmit={onSubmit} className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                    Partner Type
+                  </label>
+                  <Select
+                    options={[
+                      { value: 'ssp', label: 'SSP (Supply-Side Platform)' },
+                      { value: 'dsp', label: 'DSP (Demand-Side Platform)' }
+                    ]}
+                    value={partnerType}
+                    onChange={(e) => setPartnerType(e.target.value as 'ssp' | 'dsp')}
+                    data-testid="select-partner-type"
+                  />
+                  <p className="text-sm text-muted-foreground">
+                    SSPs help you sell inventory. DSPs help you buy from external sources.
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                    Partner Name
+                  </label>
+                  <Input
+                    placeholder="Enter partner name"
+                    value={partnerName}
+                    onChange={(e) => setPartnerName(e.target.value)}
+                    data-testid="input-partner-name"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                    API Endpoint
+                  </label>
+                  <Input
+                    placeholder="https://api.partner.com/v1"
+                    value={endpoint}
+                    onChange={(e) => setEndpoint(e.target.value)}
+                    data-testid="input-endpoint"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                    API Key (Optional)
+                  </label>
+                  <Input
+                    type="password"
+                    placeholder="Enter API key"
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                    data-testid="input-api-key"
+                  />
+                </div>
+
+                <DialogFooter>
+                  <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" data-testid="button-submit-partner">
+                    Add Partner
+                  </Button>
+                </DialogFooter>
+              </form>
+            </DialogContent>
+          </Dialog>
+        }
+      />
+
+      <div className="flex-1 p-6 space-y-6">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search partners..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+            data-testid="input-search-partners"
+          />
+        </div>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-emerald-500/10">
+                  <Zap className="h-4 w-4 text-emerald-500" />
+                </div>
+                Built-in SSP
+              </CardTitle>
+              <CardDescription>
+                Your native supply-side platform for programmatic inventory monetization
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between p-4 rounded-md border bg-muted/50">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary text-primary-foreground font-bold text-lg">
+                    I
+                  </div>
+                  <div>
+                    <div className="font-medium">Influence SSP</div>
+                    <div className="text-sm text-muted-foreground">Internal programmatic exchange</div>
+                  </div>
+                </div>
+                <Badge variant="outline" className="bg-emerald-500/15 text-emerald-600 border-emerald-500/20">
+                  <Check className="h-3 w-3 mr-1" />
+                  Active
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-blue-500/10">
+                  <Link2 className="h-4 w-4 text-blue-500" />
+                </div>
+                SSP Partners
+              </CardTitle>
+              <CardDescription>
+                External supply-side platform integrations
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {filteredSSP.length > 0 ? (
+                <div className="space-y-3">
+                  {filteredSSP.map((partner) => (
+                    <div
+                      key={partner.id}
+                      className="flex items-center justify-between p-4 rounded-md border"
+                      data-testid={`ssp-partner-${partner.id}`}
+                    >
+                      <div className="flex items-center gap-4">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
+                          <Plug className="h-5 w-5 text-muted-foreground" />
+                        </div>
+                        <div>
+                          <div className="font-medium">{partner.name}</div>
+                          <div className="text-sm text-muted-foreground">
+                            {partner.endpoint || "No endpoint configured"}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {getStatusBadge(partner.status)}
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="sm" className="w-9 h-9 p-0">
+                              <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem>
+                              <Edit className="h-4 w-4 mr-2" />
+                              Edit
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              className="text-destructive"
+                              onClick={() => handleRemoveSSP(partner.id)}
+                            >
+                              <Trash2 className="h-4 w-4 mr-2" />
+                              Remove
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  No SSP partners found.
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-purple-500/10">
+                  <Link2 className="h-4 w-4 text-purple-500" />
+                </div>
+                DSP Partners
+              </CardTitle>
+              <CardDescription>
+                Demand-side platform integrations for programmatic buying
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {filteredDSP.length > 0 ? (
+                <div className="space-y-3">
+                  {filteredDSP.map((partner) => (
+                    <div
+                      key={partner.id}
+                      className="flex items-center justify-between p-4 rounded-md border"
+                      data-testid={`dsp-partner-${partner.id}`}
+                    >
+                      <div className="flex items-center gap-4">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
+                          <Plug className="h-5 w-5 text-muted-foreground" />
+                        </div>
+                        <div>
+                          <div className="font-medium">{partner.name}</div>
+                          <div className="text-sm text-muted-foreground">
+                            {partner.endpoint || "No endpoint configured"}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {getStatusBadge(partner.status)}
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="sm" className="w-9 h-9 p-0">
+                              <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem>
+                              <Edit className="h-4 w-4 mr-2" />
+                              Edit
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              className="text-destructive"
+                              onClick={() => handleRemoveDSP(partner.id)}
+                            >
+                              <Trash2 className="h-4 w-4 mr-2" />
+                              Remove
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  No DSP partners found.
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}