adserver-dashboard 1.0.0

package/client/src/pages/tags.tsx

@@ -0,0 +1,318 @@
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Label } from "@moving-walls/design-system";
+import { Textarea } from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import { AgGridTable } from '@moving-walls/design-system';
+import type { ColDef } from '@moving-walls/design-system';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@moving-walls/design-system";
+import { Tag, Plus, Search, MoreHorizontal, Trash2, Pencil, Link2, Palette } from "lucide-react";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+interface TagItem {
+  id: string;
+  name: string;
+  color: string;
+  description: string;
+  usageCount: {
+    deals: number;
+    creatives: number;
+    lineItems: number;
+  };
+  createdAt: string;
+  createdBy: string;
+}
+
+const mockTags: TagItem[] = [
+  {
+    id: "tag-1",
+    name: "Premium",
+    color: "#3B82F6",
+    description: "High-value premium campaigns and creatives",
+    usageCount: { deals: 12, creatives: 45, lineItems: 28 },
+    createdAt: "2025-01-15",
+    createdBy: "John Doe",
+  },
+  {
+    id: "tag-2",
+    name: "Automotive",
+    color: "#EF4444",
+    description: "Automotive industry campaigns",
+    usageCount: { deals: 8, creatives: 22, lineItems: 15 },
+    createdAt: "2025-01-10",
+    createdBy: "Jane Smith",
+  },
+  {
+    id: "tag-3",
+    name: "Q1 2025",
+    color: "#10B981",
+    description: "Campaigns running in Q1 2025",
+    usageCount: { deals: 25, creatives: 78, lineItems: 52 },
+    createdAt: "2025-01-01",
+    createdBy: "Mike Johnson",
+  },
+  {
+    id: "tag-4",
+    name: "Retail",
+    color: "#F59E0B",
+    description: "Retail sector campaigns",
+    usageCount: { deals: 18, creatives: 56, lineItems: 34 },
+    createdAt: "2024-12-20",
+    createdBy: "Sarah Wilson",
+  },
+  {
+    id: "tag-5",
+    name: "Airport",
+    color: "#8B5CF6",
+    description: "Airport and travel-related campaigns",
+    usageCount: { deals: 6, creatives: 18, lineItems: 12 },
+    createdAt: "2024-12-15",
+    createdBy: "John Doe",
+  },
+];
+
+const colorPresets = [
+  "#3B82F6",
+  "#EF4444",
+  "#10B981",
+  "#F59E0B",
+  "#8B5CF6",
+  "#EC4899",
+  "#06B6D4",
+  "#84CC16",
+];
+
+export default function TagsPage() {
+  usePageTitle("Tags");
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [tags] = useState<TagItem[]>(mockTags);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [selectedColor, setSelectedColor] = useState(colorPresets[0]);
+
+  const filteredTags = tags.filter(
+    (tag) =>
+      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      tag.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleCreate = () => {
+    setShowCreateDialog(false);
+  };
+
+  return (
+    <div className="h-[calc(100vh-72px)] w-full flex flex-col bg-mw-neutral-50 dark:bg-mw-neutral-900 overflow-hidden">
+      <div className="flex-shrink-0 px-6 py-4 border-b border-mw-neutral-200 bg-white dark:bg-mw-neutral-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-xl font-semibold text-mw-neutral-900 dark:text-white">Tags</h1>
+            <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">
+              Create and manage tags for organizing your deals and creatives across platforms
+            </p>
+          </div>
+          <Button onClick={() => setShowCreateDialog(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            Create Tag
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto px-6 py-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Tag className="h-5 w-5" />
+              Tag Library
+            </CardTitle>
+            <CardDescription>
+              Tags are stored in Admin Console and shared across all Moving Walls platforms
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-4 mb-6">
+              <div className="relative flex-1 max-w-md">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="Search tags..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+            </div>
+
+            <div style={{ height: '500px' }}>
+              <AgGridTable
+                rowData={filteredTags}
+                columnDefs={[
+                  {
+                    colId: 'tag',
+                    headerName: 'Tag',
+                    field: 'name',
+                    cellRenderer: (params: { data: TagItem }) => (
+                      <div className="flex items-center gap-2">
+                        <div
+                          className="w-3 h-3 rounded-full"
+                          style={{ backgroundColor: params.data.color }}
+                        />
+                        <Badge
+                          variant="outline"
+                          style={{
+                            borderColor: params.data.color,
+                            color: params.data.color,
+                          }}
+                        >
+                          {params.data.name}
+                        </Badge>
+                      </div>
+                    ),
+                  },
+                  {
+                    colId: 'description',
+                    headerName: 'Description',
+                    field: 'description',
+                    cellRenderer: (params: { value: string }) => (
+                      <p className="text-sm text-muted-foreground truncate">
+                        {params.value}
+                      </p>
+                    ),
+                  },
+                  {
+                    colId: 'usage',
+                    headerName: 'Usage',
+                    cellRenderer: (params: { data: TagItem }) => (
+                      <div className="flex gap-3 text-xs text-muted-foreground">
+                        <span>{params.data.usageCount.deals} deals</span>
+                        <span>{params.data.usageCount.creatives} creatives</span>
+                        <span>{params.data.usageCount.lineItems} line items</span>
+                      </div>
+                    ),
+                  },
+                  {
+                    colId: 'created',
+                    headerName: 'Created',
+                    field: 'createdAt',
+                    cellRenderer: (params: { data: TagItem }) => (
+                      <div className="text-sm">
+                        <div>{params.data.createdAt}</div>
+                        <div className="text-muted-foreground text-xs">{params.data.createdBy}</div>
+                      </div>
+                    ),
+                  },
+                  {
+                    colId: 'actions',
+                    headerName: '',
+                    width: 60,
+                    sortable: false,
+                    resizable: false,
+                    cellRenderer: () => (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>
+                            <Pencil className="h-4 w-4 mr-2" />
+                            Edit
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <Link2 className="h-4 w-4 mr-2" />
+                            View Usage
+                          </DropdownMenuItem>
+                          <DropdownMenuItem className="text-destructive">
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    ),
+                  },
+                ] as ColDef<TagItem>[]}
+                getRowId={(row) => row.id}
+                emptyMessage="No tags found matching your search."
+                pagination={false}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Tag</DialogTitle>
+            <DialogDescription>
+              Create a new tag that will be synced to Admin Console and available across all platforms.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="tag-name">Tag Name</Label>
+              <Input id="tag-name" placeholder="Enter tag name" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="tag-description">Description</Label>
+              <Textarea
+                id="tag-description"
+                placeholder="Describe the purpose of this tag"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Color</Label>
+              <div className="flex items-center gap-2">
+                {colorPresets.map((color) => (
+                  <button
+                    key={color}
+                    type="button"
+                    className={`w-8 h-8 rounded-full border-2 transition-all ${
+                      selectedColor === color
+                        ? "border-foreground scale-110"
+                        : "border-transparent"
+                    }`}
+                    style={{ backgroundColor: color }}
+                    onClick={() => setSelectedColor(color)}
+                  />
+                ))}
+                <div className="flex items-center gap-2 ml-2">
+                  <Palette className="h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type="color"
+                    value={selectedColor}
+                    onChange={(e) => setSelectedColor(e.target.value)}
+                    className="w-12 h-8 p-0 border-0"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowCreateDialog(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreate}>
+              Create Tag
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/client/src/pages/test-results.tsx

@@ -0,0 +1,328 @@
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { CheckCircle, XCircle, Clock, AlertTriangle, RefreshCw } from "lucide-react";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+interface TestResult {
+  assertionResults: Array<{
+    ancestorTitles: string[];
+    fullName: string;
+    status: string;
+    title: string;
+    duration?: number;
+  }>;
+  startTime: number;
+  endTime: number;
+  status: string;
+  message: string;
+  name: string;
+}
+
+interface TestReport {
+  numTotalTestSuites: number;
+  numPassedTestSuites: number;
+  numFailedTestSuites: number;
+  numPendingTestSuites: number;
+  numTotalTests: number;
+  numPassedTests: number;
+  numFailedTests: number;
+  numPendingTests: number;
+  numTodoTests: number;
+  startTime: number;
+  success: boolean;
+  testResults: TestResult[];
+}
+
+export default function TestResultsPage() {
+  usePageTitle("Test Results");
+  const [report, setReport] = useState<TestReport | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+
+  const fetchResults = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/test-results/results.json");
+      if (!response.ok) {
+        throw new Error("Test results not available. Run `npm test` to generate them.");
+      }
+      const data = await response.json();
+      setReport(data);
+      setLastUpdated(new Date());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load test results");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchResults();
+  }, []);
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case "passed":
+        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
+      case "failed":
+        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+      case "pending":
+      case "skipped":
+        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
+      default:
+        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200";
+    }
+  };
+
+  const formatDuration = (ms: number) => {
+    if (ms < 1000) return `${ms}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+  };
+
+  const getTestFileName = (path: string) => {
+    const parts = path.split("/");
+    return parts[parts.length - 1];
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-mw-neutral-50 dark:bg-mw-neutral-900 flex items-center justify-center">
+        <div className="text-center">
+          <RefreshCw className="h-8 w-8 animate-spin text-mw-primary-500 mx-auto mb-4" />
+          <p className="text-mw-neutral-600 dark:text-mw-neutral-400">Loading test results...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-mw-neutral-50 dark:bg-mw-neutral-900 p-6">
+        <Card className="max-w-2xl mx-auto">
+          <CardContent className="p-8 text-center">
+            <AlertTriangle className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
+            <h2 className="text-xl font-semibold text-mw-neutral-900 dark:text-white mb-2">
+              Test Results Not Available
+            </h2>
+            <p className="text-mw-neutral-600 dark:text-mw-neutral-400 mb-4">{error}</p>
+            <p className="text-sm text-mw-neutral-500">
+              Run <code className="bg-mw-neutral-100 dark:bg-mw-neutral-800 px-2 py-1 rounded">npm test</code> to generate test results.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!report) return null;
+
+  const passRate = report.numTotalTests > 0 
+    ? ((report.numPassedTests / report.numTotalTests) * 100).toFixed(1)
+    : "0";
+
+  const suitePassRate = report.numTotalTestSuites > 0
+    ? ((report.numPassedTestSuites / report.numTotalTestSuites) * 100).toFixed(1)
+    : "0";
+
+  return (
+    <div className="min-h-screen bg-mw-neutral-50 dark:bg-mw-neutral-900 p-6">
+      <div className="max-w-6xl mx-auto space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-mw-neutral-900 dark:text-white">
+              Unit Test Results
+            </h1>
+            <p className="text-mw-neutral-500 dark:text-mw-neutral-400">
+              Vitest test suite results and coverage
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            {lastUpdated && (
+              <span className="text-sm text-mw-neutral-500">
+                Last updated: {lastUpdated.toLocaleString()}
+              </span>
+            )}
+            <Button
+              variant="primary"
+              onClick={fetchResults}
+            >
+              <RefreshCw className="h-4 w-4" />
+              Refresh
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                {report.success ? (
+                  <CheckCircle className="h-10 w-10 text-green-500" />
+                ) : (
+                  <XCircle className="h-10 w-10 text-red-500" />
+                )}
+                <div>
+                  <p className="text-sm text-mw-neutral-500">Overall Status</p>
+                  <p className={`text-xl font-bold ${report.success ? "text-green-600" : "text-red-600"}`}>
+                    {report.success ? "PASSED" : "FAILED"}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="h-10 w-10 rounded-full bg-mw-primary-100 dark:bg-mw-primary-900 flex items-center justify-center">
+                  <span className="text-lg font-bold text-mw-primary-600">{passRate}%</span>
+                </div>
+                <div>
+                  <p className="text-sm text-mw-neutral-500">Tests Pass Rate</p>
+                  <p className="text-xl font-bold text-mw-neutral-900 dark:text-white">
+                    {report.numPassedTests} / {report.numTotalTests}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+                  <span className="text-lg font-bold text-blue-600">{suitePassRate}%</span>
+                </div>
+                <div>
+                  <p className="text-sm text-mw-neutral-500">Suites Pass Rate</p>
+                  <p className="text-xl font-bold text-mw-neutral-900 dark:text-white">
+                    {report.numPassedTestSuites} / {report.numTotalTestSuites}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <Clock className="h-10 w-10 text-mw-neutral-400" />
+                <div>
+                  <p className="text-sm text-mw-neutral-500">Run Date</p>
+                  <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                    {new Date(report.startTime).toLocaleString()}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          <Card className="bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
+            <CardContent className="p-4 flex items-center gap-3">
+              <CheckCircle className="h-8 w-8 text-green-500" />
+              <div>
+                <p className="text-2xl font-bold text-green-700 dark:text-green-300">
+                  {report.numPassedTests}
+                </p>
+                <p className="text-sm text-green-600 dark:text-green-400">Tests Passed</p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800">
+            <CardContent className="p-4 flex items-center gap-3">
+              <XCircle className="h-8 w-8 text-red-500" />
+              <div>
+                <p className="text-2xl font-bold text-red-700 dark:text-red-300">
+                  {report.numFailedTests}
+                </p>
+                <p className="text-sm text-red-600 dark:text-red-400">Tests Failed</p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-yellow-50 dark:bg-yellow-950 border-yellow-200 dark:border-yellow-800">
+            <CardContent className="p-4 flex items-center gap-3">
+              <Clock className="h-8 w-8 text-yellow-500" />
+              <div>
+                <p className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">
+                  {report.numPendingTests + report.numTodoTests}
+                </p>
+                <p className="text-sm text-yellow-600 dark:text-yellow-400">Pending/Todo</p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Test Suites</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {report.testResults.map((suite, index) => (
+                <div
+                  key={index}
+                  className="p-4 rounded-lg border border-mw-neutral-200 dark:border-mw-neutral-700 bg-white dark:bg-mw-neutral-800"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      {suite.status === "passed" ? (
+                        <CheckCircle className="h-5 w-5 text-green-500" />
+                      ) : (
+                        <XCircle className="h-5 w-5 text-red-500" />
+                      )}
+                      <span className="font-medium text-mw-neutral-900 dark:text-white">
+                        {getTestFileName(suite.name)}
+                      </span>
+                    </div>
+                    <Badge className={getStatusColor(suite.status)}>
+                      {suite.status.toUpperCase()}
+                    </Badge>
+                  </div>
+                  
+                  {suite.message && (
+                    <p className="text-sm text-red-600 dark:text-red-400 mt-2 bg-red-50 dark:bg-red-900/20 p-2 rounded">
+                      {suite.message}
+                    </p>
+                  )}
+
+                  {suite.assertionResults.length > 0 && (
+                    <div className="mt-3 space-y-1">
+                      {suite.assertionResults.map((test, testIndex) => (
+                        <div
+                          key={testIndex}
+                          className="flex items-center gap-2 text-sm pl-6"
+                        >
+                          {test.status === "passed" ? (
+                            <CheckCircle className="h-4 w-4 text-green-500 flex-shrink-0" />
+                          ) : (
+                            <XCircle className="h-4 w-4 text-red-500 flex-shrink-0" />
+                          )}
+                          <span className="text-mw-neutral-700 dark:text-mw-neutral-300 truncate">
+                            {test.title}
+                          </span>
+                          {test.duration !== undefined && (
+                            <span className="text-mw-neutral-400 text-xs ml-auto">
+                              {formatDuration(test.duration)}
+                            </span>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/client/src/store/hooks.ts

@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './index';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

package/client/src/store/index.ts

@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+import mapMarkerLocationsReducer from './mapMarkerLocationsSlice';
+
+export const store = configureStore({
+  reducer: {
+    mapMarkerLocations: mapMarkerLocationsReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;