adserver-dashboard 1.0.0

package/client/src/pages/login.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from "@moving-walls/design-system";
+import * as oauthService from "@/lib/oauth-service";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+export default function LoginPage() {
+  const { t } = useTranslation('common');
+  usePageTitle(t('user.login'));
+  const [error, setError] = useState("");
+  const [showUI, setShowUI] = useState(false);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const errorParam = params.get('error');
+    
+    if (errorParam) {
+      setError(decodeURIComponent(errorParam));
+      setShowUI(true);
+    } else {
+      oauthService.authorize();
+    }
+  }, []);
+
+  if (!showUI) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white dark:bg-background">
+        <div className="text-center space-y-4">
+          <div className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-primary/10">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+          </div>
+          <p className="text-mw-neutral-600 dark:text-mw-neutral-400">{t('login.redirecting', 'Redirecting to login...')}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      id="login-page"
+      className="bg-white dark:bg-background min-h-screen flex flex-col lg:flex-row"
+    >
+      <div
+        id="login-page-hero"
+        className="hidden lg:block lg:w-1/2 relative gap-5 m-5 rounded-xl bg-primary overflow-hidden"
+      >
+        <div className="left-[10%] top-[55%] absolute">
+          <div className="w-10 h-10 opacity-30 bg-primary/80 rounded-full" />
+        </div>
+        <div className="right-[-64px] top-[-60px] absolute">
+          <div className="w-64 h-64 opacity-30 bg-primary/80 rounded-full" />
+        </div>
+        <div className="left-[-108px] top-1 absolute">
+          <div className="w-52 h-52 opacity-30 bg-primary/80 rounded-full" />
+        </div>
+        <div className="right-[-32px] top-[55%] absolute">
+          <div className="w-24 h-24 opacity-30 bg-primary/80 rounded-full" />
+        </div>
+
+        <div className="h-full flex flex-col justify-between px-6 md:px-8 lg:px-10 py-8 md:py-10 lg:py-12">
+          <div className="self-stretch flex-1 flex flex-col justify-center items-start gap-6 md:gap-8">
+            <div className="self-stretch flex flex-col justify-start items-start gap-3 md:gap-4">
+              <div className="self-stretch justify-center text-white text-2xl md:text-3xl lg:text-4xl font-bold leading-tight">
+                {t('login.hero.title', 'Control Your OOH')}
+                <br />
+                {t('login.hero.titleLine2', 'Advertising In One Platform')}
+              </div>
+              <div className="self-stretch justify-center text-white text-base md:text-lg font-normal leading-relaxed">
+                {t('login.hero.description', 'Global technology platform built by OOH experts. Automate planning, buying, executing, and measuring campaigns worldwide.')}
+              </div>
+            </div>
+          </div>
+
+          <div className="justify-start items-end gap-5">
+            <div className="px-6 md:px-8 lg:px-10 py-5 md:py-6 lg:py-7 bg-black/20 rounded-xl md:rounded-2xl backdrop-blur-md flex flex-col justify-start items-start gap-2.5">
+              <div className="self-stretch flex flex-col justify-start items-center gap-4 md:gap-6">
+                <div className="self-stretch flex flex-col justify-start items-start gap-2">
+                  <div className="self-stretch justify-center text-white text-xl md:text-2xl font-medium leading-relaxed">
+                    {t('login.hero.globalReach', 'Global Reach')}
+                  </div>
+                  <div className="self-stretch flex flex-col justify-start items-start gap-2">
+                    <div className="self-stretch justify-center text-white text-3xl md:text-4xl font-semibold leading-tight">
+                      500K+
+                    </div>
+                    <div className="self-stretch justify-center text-white text-base md:text-lg font-normal leading-relaxed">
+                      {t('login.hero.mediaSites', '500K+ media sites across 4 continents')}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="login-page-form-container"
+        className="w-full md:w-full lg:w-1/2 xl:w-2/5 flex items-center justify-center p-4 md:p-6 lg:p-8 xl:p-12"
+      >
+        <div className="max-w-md md:max-w-lg lg:max-w-md xl:max-w-lg w-full">
+          <div
+            id="login-page-header"
+            className="self-stretch flex flex-col justify-start items-start gap-2 md:mb-8 lg:mb-5"
+          >
+            <img
+              id="login-logo"
+              src="/img/MW-logo-trans_1754045676555.png"
+              alt="Moving Walls"
+              className="h-20 w-20 object-contain"
+            />
+
+            <h2
+              id="login-title"
+              className="leading-tight md:leading-3xl text-2xl md:text-3xl lg:text-3xl xl:text-4xl font-bold text-foreground text-left mb-2 md:mb-3"
+            >
+              {t('login.signIn', 'Sign In')}
+            </h2>
+            <p
+              id="login-subtitle"
+              className="text-muted-foreground text-left text-sm md:text-base"
+            >
+              {t('login.subtitle', 'Sign in to access your global OOH campaign management platform')}
+            </p>
+          </div>
+
+          <div>
+            <div className="space-y-4 md:space-y-5 lg:space-y-4">
+              {error && (
+                <div
+                  id="login-error"
+                  className="text-sm md:text-base text-destructive bg-destructive/10 border border-destructive/20 rounded-md p-3"
+                >
+                  {error}
+                </div>
+              )}
+
+              <Button
+                id="oauth-login-btn"
+                type="button"
+                variant="primary"
+                size="lg"
+                className="w-full"
+                onClick={() => oauthService.authorize()}
+                data-testid="button-oauth-login"
+              >
+                {t('login.signInWithMWID', 'Sign in with MW ID')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/pages/not-found.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent } from "@moving-walls/design-system";
+import { AlertCircle } from "lucide-react";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+export default function NotFound() {
+  usePageTitle("Page Not Found");
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
+      <Card className="w-full max-w-md mx-4">
+        <CardContent className="pt-6">
+          <div className="flex mb-4 gap-2">
+            <AlertCircle className="h-8 w-8 text-red-500" />
+            <h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
+          </div>
+
+          <p className="mt-4 text-sm text-gray-600">
+            Did you forget to add the page to the router?
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/client/src/pages/proof-of-play.tsx

@@ -0,0 +1,397 @@
+import { useState } from "react";
+import { useLocation } from "wouter";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Button,
+  Input,
+  Badge,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  PageHeader,
+} from "@moving-walls/design-system";
+import { AgGridTable } from '@moving-walls/design-system';
+import type { ColDef } from '@moving-walls/design-system';
+
+import {
+  Download,
+  Upload,
+  Search,
+  SlidersHorizontal,
+  FileText,
+  Play,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+} from "lucide-react";
+import { useTranslation } from "@/lib/i18n";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+interface ProofOfPlayRecord {
+  id: string;
+  deal: string;
+  lineItem: string;
+  creative: string;
+  screenPlayer: string;
+  playerId?: string;
+  playTime: string;
+  duration: string;
+  impressions: number;
+  source: "cms" | "manual";
+  status: "processed" | "failed" | "pending";
+}
+
+interface PlaylogUpload {
+  id: string;
+  fileName: string;
+  deal: string;
+  lineItem: string;
+  mediaOwner: string;
+  totalRecords: number;
+  validRecords: number;
+  invalidRecords: number;
+  uploadedAt: string;
+  uploadedBy: string;
+  status: "completed" | "processing" | "failed" | "pending";
+}
+
+const mockPopRecords: ProofOfPlayRecord[] = [];
+const mockPlaylogUploads: PlaylogUpload[] = [];
+
+export default function ProofOfPlayPage() {
+  const { t } = useTranslation(["common"]);
+  usePageTitle("Proof of Play");
+  const [, setLocation] = useLocation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeTab, setActiveTab] = useState("pop-records");
+
+  const getStatusBadge = (status: string, type: "pop" | "playlog") => {
+    const statusConfig: Record<string, { color: string; icon: React.ReactNode; label: string }> = {
+      processed: {
+        color: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+        icon: <CheckCircle className="h-3 w-3 mr-1" />,
+        label: "Processed",
+      },
+      completed: {
+        color: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+        icon: <CheckCircle className="h-3 w-3 mr-1" />,
+        label: "Completed",
+      },
+      failed: {
+        color: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+        icon: <AlertCircle className="h-3 w-3 mr-1" />,
+        label: "Failed",
+      },
+      pending: {
+        color: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+        icon: <Clock className="h-3 w-3 mr-1" />,
+        label: "Pending",
+      },
+      processing: {
+        color: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+        icon: <Clock className="h-3 w-3 mr-1" />,
+        label: "Processing",
+      },
+    };
+
+    const config = statusConfig[status] || statusConfig.pending;
+
+    return (
+      <Badge className={`${config.color} flex items-center`}>
+        {config.icon}
+        {config.label}
+      </Badge>
+    );
+  };
+
+  const getSourceBadge = (source: "cms" | "manual") => {
+    if (source === "cms") {
+      return (
+        <Badge variant="outline" className="flex items-center">
+          <Play className="h-3 w-3 mr-1" />
+          CMS
+        </Badge>
+      );
+    }
+    return (
+      <Badge variant="outline" className="flex items-center">
+        <Upload className="h-3 w-3 mr-1" />
+        Manual
+      </Badge>
+    );
+  };
+
+  const handleDownloadTemplate = () => {
+    console.log("Downloading template...");
+  };
+
+  const handleUploadPlaylog = () => {
+    setLocation("/proof-of-play/upload");
+  };
+
+  const filteredPopRecords = mockPopRecords.filter((record) =>
+    searchQuery
+      ? record.deal.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        record.lineItem.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        record.creative.toLowerCase().includes(searchQuery.toLowerCase())
+      : true
+  );
+
+  const filteredPlaylogUploads = mockPlaylogUploads.filter((upload) =>
+    searchQuery
+      ? upload.fileName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        upload.deal.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        upload.lineItem.toLowerCase().includes(searchQuery.toLowerCase())
+      : true
+  );
+
+  return (
+    <div id="pop-page" className="h-full w-full flex flex-col">
+      <PageHeader
+        title="Proof of Play"
+        subtitle="View playback records and upload playlogs for traditional campaigns"
+        actions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={handleDownloadTemplate}
+              data-testid="button-download-template"
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Download Template
+            </Button>
+            <Button
+              onClick={handleUploadPlaylog}
+              data-testid="button-upload-playlog"
+            >
+              <Upload className="h-4 w-4 mr-2" />
+              Upload Playlog
+            </Button>
+          </div>
+        }
+      />
+
+      <div id="pop-section" className="flex-1 w-full overflow-hidden dark:bg-mw-neutral-900 p-4 sm:p-6 lg:p-8">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-full">
+          <Card id="pop-card" className="flex flex-col h-full">
+            <CardHeader id="pop-card-header" className="p-4">
+              <div className="flex items-center justify-between gap-4">
+                <TabsList>
+                  <TabsTrigger value="pop-records" data-testid="tab-pop-records">
+                    Proof of Play Records
+                  </TabsTrigger>
+                  <TabsTrigger value="playlog-uploads" data-testid="tab-playlog-uploads">
+                    Playlog Uploads
+                  </TabsTrigger>
+                </TabsList>
+                <div id="pop-toolbar" className="flex items-center gap-2">
+                  <div id="pop-search-container" className="relative w-80">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Search className="h-4 w-4 text-mw-neutral-400" />
+                    </div>
+                    <Input
+                      id="pop-search-input"
+                      placeholder={activeTab === "pop-records" ? "Search here..." : "Search here..."}
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="w-80 pl-10 pr-3 py-2"
+                      data-testid="input-search"
+                    />
+                  </div>
+                  <Button
+                    id="pop-filter-btn"
+                    variant="outline"
+                    size="sm"
+                    className="relative inline-flex items-center gap-2 px-3 py-2.5 text-sm font-medium"
+                    data-testid="button-filter"
+                  >
+                    <SlidersHorizontal className="h-4 w-4" />
+                    Filter
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+
+            <CardContent id="pop-card-content" className="flex-1 overflow-hidden px-4! pb-0!">
+              <TabsContent value="pop-records" className="mt-0 h-full">
+                {filteredPopRecords.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-16 text-center">
+                    <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+                      <Play className="h-8 w-8 text-muted-foreground" />
+                    </div>
+                    <h3 className="text-lg font-semibold mb-2">No proof of play records</h3>
+                    <p className="text-muted-foreground max-w-sm">
+                      Proof of play records will appear here once playback data is received from CMS or uploaded manually.
+                    </p>
+                  </div>
+                ) : (
+                  <AgGridTable
+                    rowData={filteredPopRecords}
+                    columnDefs={[
+                      {
+                        colId: 'deal',
+                        headerName: 'Deal',
+                        field: 'deal',
+                        cellRenderer: (params: { value: string }) => (
+                          <span className="font-medium">{params.value}</span>
+                        ),
+                      },
+                      {
+                        colId: 'lineItem',
+                        headerName: 'Line Item',
+                        field: 'lineItem',
+                      },
+                      {
+                        colId: 'creative',
+                        headerName: 'Creative',
+                        field: 'creative',
+                      },
+                      {
+                        colId: 'screenPlayer',
+                        headerName: 'Screen/Player',
+                        field: 'screenPlayer',
+                        cellRenderer: (params: { data: ProofOfPlayRecord }) => (
+                          <div className="flex flex-col">
+                            <span className="text-sm">{params.data.screenPlayer}</span>
+                            {params.data.playerId && (
+                              <span className="text-xs text-muted-foreground">
+                                {params.data.playerId}
+                              </span>
+                            )}
+                          </div>
+                        ),
+                      },
+                      {
+                        colId: 'playTime',
+                        headerName: 'Play Time',
+                        field: 'playTime',
+                        cellRenderer: (params: { data: ProofOfPlayRecord }) => (
+                          <div className="flex flex-col">
+                            <span className="text-sm">{params.data.playTime}</span>
+                            <span className="text-xs text-muted-foreground">
+                              {params.data.duration}
+                            </span>
+                          </div>
+                        ),
+                      },
+                      {
+                        colId: 'impressions',
+                        headerName: 'Impressions',
+                        field: 'impressions',
+                      },
+                      {
+                        colId: 'source',
+                        headerName: 'Source',
+                        field: 'source',
+                        cellRenderer: (params: { value: "cms" | "manual" }) => getSourceBadge(params.value),
+                      },
+                      {
+                        colId: 'status',
+                        headerName: 'Status',
+                        field: 'status',
+                        cellRenderer: (params: { value: string }) => getStatusBadge(params.value, "pop"),
+                      },
+                    ] as ColDef<ProofOfPlayRecord>[]}
+                    getRowId={(row) => row.id}
+                    emptyMessage="No proof of play records"
+                    pagination={false}
+                  />
+                )}
+              </TabsContent>
+
+              <TabsContent value="playlog-uploads" className="mt-0 h-full">
+                {filteredPlaylogUploads.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-16 text-center">
+                    <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+                      <FileText className="h-8 w-8 text-muted-foreground" />
+                    </div>
+                    <h3 className="text-lg font-semibold mb-2">No playlog uploads</h3>
+                    <p className="text-muted-foreground max-w-sm">
+                      Upload playlog files to import proof of play data for traditional campaigns.
+                    </p>
+                    <Button className="mt-4" onClick={handleUploadPlaylog}>
+                      <Upload className="h-4 w-4 mr-2" />
+                      Upload Playlog
+                    </Button>
+                  </div>
+                ) : (
+                  <AgGridTable
+                    rowData={filteredPlaylogUploads}
+                    columnDefs={[
+                      {
+                        colId: 'fileName',
+                        headerName: 'File Name',
+                        field: 'fileName',
+                        cellRenderer: (params: { value: string }) => (
+                          <div className="flex items-center gap-2">
+                            <FileText className="h-4 w-4 text-muted-foreground" />
+                            <span className="font-medium">{params.value}</span>
+                          </div>
+                        ),
+                      },
+                      {
+                        colId: 'deal',
+                        headerName: 'Deal',
+                        field: 'deal',
+                      },
+                      {
+                        colId: 'lineItem',
+                        headerName: 'Line Item',
+                        field: 'lineItem',
+                      },
+                      {
+                        colId: 'mediaOwner',
+                        headerName: 'Media Owner',
+                        field: 'mediaOwner',
+                      },
+                      {
+                        colId: 'records',
+                        headerName: 'Records',
+                        field: 'totalRecords',
+                        cellRenderer: (params: { data: PlaylogUpload }) => (
+                          <div className="flex flex-col">
+                            <span className="text-sm font-medium">
+                              {params.data.totalRecords} total
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              {params.data.validRecords} valid, {params.data.invalidRecords} invalid
+                            </span>
+                          </div>
+                        ),
+                      },
+                      {
+                        colId: 'uploaded',
+                        headerName: 'Uploaded',
+                        field: 'uploadedAt',
+                        cellRenderer: (params: { data: PlaylogUpload }) => (
+                          <div className="flex flex-col">
+                            <span className="text-sm">{params.data.uploadedAt}</span>
+                            <span className="text-xs text-muted-foreground">
+                              by {params.data.uploadedBy}
+                            </span>
+                          </div>
+                        ),
+                      },
+                      {
+                        colId: 'status',
+                        headerName: 'Status',
+                        field: 'status',
+                        cellRenderer: (params: { value: string }) => getStatusBadge(params.value, "playlog"),
+                      },
+                    ] as ColDef<PlaylogUpload>[]}
+                    getRowId={(row) => row.id}
+                    emptyMessage="No playlog uploads"
+                    pagination={false}
+                  />
+                )}
+              </TabsContent>
+            </CardContent>
+          </Card>
+        </Tabs>
+      </div>
+    </div>
+  );
+}