adserver-dashboard 1.0.0

package/client/src/components/product-switcher.tsx

@@ -0,0 +1,105 @@
+import { useTranslation } from "@/lib/i18n";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import { Grip } from "lucide-react";
+
+interface Product {
+  id: string;
+  nameKey: string;
+  descriptionKey: string;
+  url: string;
+}
+
+const PRODUCTS: Product[] = [
+  {
+    id: "planner",
+    nameKey: "products.planner.name",
+    descriptionKey: "products.planner.description",
+    url: import.meta.env.VITE_PLANNER_URL || "#",
+  },
+  {
+    id: "influence",
+    nameKey: "products.influence.name",
+    descriptionKey: "products.influence.description",
+    url: import.meta.env.VITE_INFLUENCE_URL || "#",
+  },
+  {
+    id: "inventory",
+    nameKey: "products.inventory.name",
+    descriptionKey: "products.inventory.description",
+    url: import.meta.env.VITE_INVENTORY_URL || "#",
+  },
+  {
+    id: "measure",
+    nameKey: "products.measure.name",
+    descriptionKey: "products.measure.description",
+    url: import.meta.env.VITE_MEASURE_URL || "#",
+  },
+  {
+    id: "console",
+    nameKey: "products.console.name",
+    descriptionKey: "products.console.description",
+    url: import.meta.env.VITE_ACCOUNT_URL || "#",
+  },
+];
+
+const CURRENT_PRODUCT = import.meta.env.VITE_CURRENT_PRODUCT || "influence";
+
+export function ProductSwitcher() {
+  const { t } = useTranslation("common");
+
+  return (
+    <div className="p-2 bg-mw-primary-50 rounded inline-flex justify-center items-center gap-1">
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Grip
+          className="size-6 text-black cursor-pointer focus:outline-none"
+          data-testid="button-product-switcher"
+          aria-label={t("accessibility.switchProduct", "Switch product")}
+          role="button"
+          tabIndex={0}
+        />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="left"
+        className="w-80 p-4 bg-white border border-mw-neutral-200 rounded-lg shadow-lg"
+      >
+        <div className="flex flex-col gap-1">
+          {PRODUCTS.map((product) => {
+            const isActive = product.id === CURRENT_PRODUCT;
+
+            return (
+              <a
+                key={product.id}
+                href={product.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`
+                  flex flex-col gap-1 p-2 rounded-lg transition-colors no-underline
+                  ${isActive ? "bg-mw-primary-50" : "hover:bg-mw-neutral-50"}
+                `}
+                data-testid={`product-${product.id}`}
+              >
+                <span
+                  className={`text-sm font-normal ${isActive ? "text-mw-primary-500" : "text-mw-neutral-700"}`}
+                >
+                  {t(product.nameKey)}
+                </span>
+                <span
+                  className={`text-xs ${isActive ? "text-mw-primary-400" : "text-mw-neutral-400"}`}
+                >
+                  {t(product.descriptionKey)}
+                </span>
+              </a>
+            );
+          })}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    </div>
+  );
+}

package/client/src/components/protected-route.tsx

@@ -0,0 +1,49 @@
+/**
+ * Protected Route Component
+ * 
+ * Wraps routes that require authentication
+ * Redirects to login if user is not authenticated
+ */
+
+import { useEffect } from "react";
+import { useLocation } from "wouter";
+import { useAuth } from "@/contexts/auth-context";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const [, setLocation] = useLocation();
+  const { isAuthenticated, isLoading } = useAuth();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      // Store the current location to redirect back after login
+      const currentPath = window.location.pathname;
+      if (currentPath !== '/login') {
+        sessionStorage.setItem('auth_return_to', currentPath);
+      }
+      setLocation('/login');
+    }
+  }, [isAuthenticated, isLoading, setLocation]);
+
+  // Show loading state while checking authentication
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <div className="space-y-4 text-center">
+          <div className="mx-auto h-12 w-12 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Don't render children if not authenticated
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

package/client/src/components/skip-link.tsx

@@ -0,0 +1,22 @@
+import { useTranslation } from '@/lib/i18n';
+
+export function SkipLink() {
+  const { t } = useTranslation('common');
+
+  return (
+    <a
+      href="#main-content"
+      className="
+        sr-only focus:not-sr-only
+        focus:fixed focus:top-4 focus:left-4 focus:z-[9999]
+        focus:px-4 focus:py-2 focus:rounded-lg
+        focus:bg-mw-primary-500 focus:text-white
+        focus:font-medium focus:text-sm
+        focus:outline-none focus:ring-2 focus:ring-mw-primary-300 focus:ring-offset-2
+        transition-all
+      "
+    >
+      {t('accessibility.skipToContent')}
+    </a>
+  );
+}

package/client/src/components/stat-card.tsx

@@ -0,0 +1,53 @@
+import { Card, CardContent, CardHeader, CardTitle, cn } from "@moving-walls/design-system";
+import { LucideIcon } from "lucide-react";
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  icon: LucideIcon;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+  description?: string;
+  className?: string;
+}
+
+export function StatCard({
+  title,
+  value,
+  icon: Icon,
+  trend,
+  description,
+  className,
+}: StatCardProps) {
+  return (
+    <Card className={cn("hover-elevate", className)} data-testid={`card-stat-${title.toLowerCase().replace(/\s+/g, '-')}`}>
+      <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+        <Icon className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold" data-testid={`text-stat-value-${title.toLowerCase().replace(/\s+/g, '-')}`}>{value}</div>
+        {trend && (
+          <p className="text-xs text-muted-foreground mt-1">
+            <span
+              className={cn(
+                trend.isPositive ? "text-success" : "text-destructive"
+              )}
+            >
+              {trend.isPositive ? "+" : ""}
+              {trend.value}%
+            </span>{" "}
+            from last month
+          </p>
+        )}
+        {description && (
+          <p className="text-xs text-muted-foreground mt-1">{description}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/client/src/components/status-badge.tsx

@@ -0,0 +1,96 @@
+import { useTranslation } from "@/lib/i18n";
+import { cn } from "@moving-walls/design-system";
+
+type StatusType = "draft" | "planned" | "reviewing" | "negotiating" | "pending" | "approved" | "active" | "inactive" | "live" | "rejected" | "completed" | "archived" | "maintenance";
+
+interface StatusBadgeProps {
+  status: StatusType;
+  className?: string;
+}
+
+const statusConfig: Record<StatusType, { labelKey: string; dotClass: string; bgClass: string }> = {
+  draft: {
+    labelKey: "status.draft",
+    dotClass: "bg-mw-neutral-500",
+    bgClass: "bg-mw-neutral-50 text-mw-neutral-500",
+  },
+  planned: {
+    labelKey: "status.planned",
+    dotClass: "bg-mw-purple-500",
+    bgClass: "bg-mw-purple-50 text-mw-purple-500",
+  },
+  reviewing: {
+    labelKey: "status.reviewing",
+    dotClass: "bg-mw-primary-500",
+    bgClass: "bg-mw-primary-50 text-mw-primary-500",
+  },
+  negotiating: {
+    labelKey: "status.negotiating",
+    dotClass: "bg-mw-orange-warning-800",
+    bgClass: "bg-mw-orange-warning-50 text-mw-orange-warning-800",
+  },
+  pending: {
+    labelKey: "status.pending",
+    dotClass: "bg-mw-warning-500",
+    bgClass: "bg-mw-warning-50 text-mw-warning-500",
+  },
+  approved: {
+    labelKey: "status.approved",
+    dotClass: "bg-mw-success-500",
+    bgClass: "bg-mw-success-50 text-mw-success-500",
+  },
+  active: {
+    labelKey: "status.active",
+    dotClass: "bg-mw-light-green-500",
+    bgClass: "bg-mw-light-green-50 text-mw-light-green-500",
+  },
+  inactive: {
+    labelKey: "status.inactive",
+    dotClass: "bg-mw-error-500",
+    bgClass: "bg-mw-error-50 text-mw-error-500",
+  },
+  live: {
+    labelKey: "status.live",
+    dotClass: "bg-mw-light-green-500",
+    bgClass: "bg-mw-light-green-50 text-mw-light-green-500",
+  },
+  rejected: {
+    labelKey: "status.rejected",
+    dotClass: "bg-mw-error-500",
+    bgClass: "bg-mw-error-50 text-mw-error-500",
+  },
+  completed: {
+    labelKey: "status.completed",
+    dotClass: "bg-mw-purple-warning-500",
+    bgClass: "bg-mw-purple-warning-50 text-mw-purple-warning-500",
+  },
+  archived: {
+    labelKey: "status.archived",
+    dotClass: "bg-mw-blush-grey-500",
+    bgClass: "bg-mw-blush-grey-50 text-mw-blush-grey-500",
+  },
+  maintenance: {
+    labelKey: "status.maintenance",
+    dotClass: "bg-mw-warning-500",
+    bgClass: "bg-mw-warning-50 text-mw-warning-500",
+  },
+};
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+  const { t } = useTranslation('common');
+  const config = statusConfig[status];
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
+        config.bgClass,
+        className
+      )}
+      data-testid={`badge-status-${status}`}
+    >
+      <span className={cn("w-2 h-2 rounded-full mr-1", config.dotClass)} />
+      {t(config.labelKey)}
+    </span>
+  );
+}