adserver-dashboard 1.0.0

package/client/src/App.tsx

@@ -0,0 +1,464 @@
+import { Switch, Route } from "wouter";
+import { useEffect, useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { queryClient } from "./lib/queryClient";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ToastProvider } from "@moving-walls/design-system";
+import { AppSidebar } from "@/components/app-sidebar";
+import { AuthProvider, useAuth } from "@/contexts/auth-context";
+import { SidebarStateProvider, useSidebarState } from "@/contexts/sidebar-state";
+import { ProtectedRoute } from "@/components/protected-route";
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { SkipLink } from "@/components/skip-link";
+import { getLanguageDirection } from "@/lib/i18n";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import {
+  User,
+  Settings as SettingsIcon,
+  LogOut,
+  Bug,
+  FileText,
+  Palette,
+  Sun,
+  Moon,
+  Monitor as MonitorIcon,
+  Check,
+  ChevronRight,
+  ChevronDown,
+  PanelLeftOpen,
+  PanelLeftClose,
+} from "lucide-react";
+import { ThemeProvider, useTheme } from "@/contexts/theme-context";
+import * as Sentry from "@sentry/react";
+import { useLocation } from "wouter";
+import { ProductSwitcher } from "@/components/product-switcher";
+import { Toaster } from "@/components/ui/toaster";
+import LoginPage from "@/pages/login";
+import AuthCallback from "@/pages/auth-callback";
+import Dashboard from "@/pages/dashboard";
+import DirectCampaigns from "@/pages/direct-campaigns-new";
+import DirectCampaignDetails from "@/pages/direct-campaign-details";
+import CreateDealPage from "@/pages/create-deal";
+import LineItemCreativesPage from "@/pages/line-item-creatives";
+import DealLineItemsPage from "@/pages/deal-line-items";
+import LineItemWizardPage from "@/pages/line-item-wizard";
+import LineItemFormPage from "@/pages/line-item-form-page";
+import CreativeAssignmentPage from "@/pages/creative-assignment-page";
+import DealHistoryPage from "@/pages/deal-history";
+import Creatives from "@/pages/creatives";
+import AllFoldersPage from "@/pages/all-folders";
+import FolderContentPage from "@/pages/folder-content";
+import NotFound from "@/pages/not-found";
+import PublicApprovalPage from "@/pages/public-approval";
+import DemoStatusPage from "@/pages/demo-status";
+import TestResultsPage from "@/pages/test-results";
+import DSPListPage from "@/pages/dsp-list";
+import DSPFormPage from "@/pages/dsp-form";
+import BuyerListPage from "@/pages/buyer-list";
+import BuyerFormPage from "@/pages/buyer-form";
+import ReportsPage from "@/pages/reports";
+import SignalsPage from "@/pages/signals";
+import ProofOfPlayPage from "@/pages/proof-of-play";
+import IntegrationsPage from "@/pages/integrations";
+import SettingsPage from "@/pages/settings";
+import TagsPage from "@/pages/tags";
+import CustomPOIsPage from "@/pages/custom-pois";
+import LineItemDetailPage from "@/pages/line-item-detail-page";
+
+function PublicRouter() {
+  const pathname = window.location.pathname;
+
+  if (pathname.startsWith("/approval")) {
+    return <PublicApprovalPage />;
+  }
+
+  if (pathname === "/test-results") {
+    return <TestResultsPage />;
+  }
+
+  return (
+    <Switch>
+      <Route path="/login" component={LoginPage} />
+      <Route path="/auth/callback" component={AuthCallback} />
+      <Route path="/approval" component={PublicApprovalPage} />
+      <Route path="/demo-status" component={DemoStatusPage} />
+      <Route path="/test-results" component={TestResultsPage} />
+    </Switch>
+  );
+}
+
+function ProtectedRouter() {
+  return (
+    <Switch>
+      <Route path="/" component={Dashboard} />
+      <Route path="/deals" component={DirectCampaigns} />
+      <Route path="/deals/create" component={CreateDealPage} />
+      <Route path="/deals/edit/:dealId" component={CreateDealPage} />
+      <Route path="/deals/:dealId/line-items" component={DealLineItemsPage} />
+      <Route path="/deals/:dealId/history" component={DealHistoryPage} />
+      <Route path="/deals/:dealId/line-items/new">
+        {(params: any) => <LineItemFormPage key={`new-${params.dealId}`} />}
+      </Route>
+      <Route path="/deals/:dealId/line-items/:lineItemId" component={LineItemDetailPage} />
+      <Route path="/deals/:dealId/line-items/:lineItemId/edit">
+        {(params: any) => (
+          <LineItemFormPage key={`edit-${params.lineItemId}`} />
+        )}
+      </Route>
+      <Route path="/deals/:id/details" component={DirectCampaignDetails} />
+      <Route
+        path="/deals/:dealId/line-items/:lineItemId/creatives"
+        component={LineItemCreativesPage}
+      />
+      <Route
+        path="/deals/:dealId/line-items/:lineItemId/assign-creatives"
+        component={CreativeAssignmentPage}
+      />
+      <Route path="/creatives" component={Creatives} />
+      <Route path="/contenthub/folders" component={AllFoldersPage} />
+      <Route path="/contenthub/folder/:folderId" component={FolderContentPage} />
+      <Route path="/dsp" component={DSPListPage} />
+      <Route path="/dsp/new" component={DSPFormPage} />
+      <Route path="/dsp/edit/:dspId" component={DSPFormPage} />
+      <Route path="/buyers" component={BuyerListPage} />
+      <Route path="/buyers/new" component={BuyerFormPage} />
+      <Route path="/buyers/edit/:buyerId" component={BuyerFormPage} />
+      <Route path="/reports" component={ReportsPage} />
+      <Route path="/signals" component={SignalsPage} />
+      <Route path="/signals/create" component={SignalsPage} />
+      <Route path="/signals/:signalId/edit" component={SignalsPage} />
+      <Route path="/proof-of-play" component={ProofOfPlayPage} />
+      <Route path="/proof-of-play/upload" component={ProofOfPlayPage} />
+      <Route path="/integrations" component={IntegrationsPage} />
+      <Route path="/settings" component={SettingsPage} />
+      <Route path="/tags" component={TagsPage} />
+      <Route path="/custom-pois" component={CustomPOIsPage} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+}
+
+
+function ThemeSubmenu() {
+  const { theme, setTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const options = [
+    { value: "light" as const, label: "Light", icon: Sun },
+    { value: "dark" as const, label: "Dark", icon: Moon },
+    { value: "system" as const, label: "System", icon: MonitorIcon },
+  ];
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <div className="flex items-center gap-3 p-1 py-1 text-base font-normal text-mw-neutral-700 hover:bg-mw-neutral-50 rounded-md cursor-pointer">
+        <Palette className="h-5 w-5" />
+        <span className="flex-1">Theme</span>
+        <ChevronRight className="h-4 w-4 text-mw-neutral-400" />
+      </div>
+      {open && (
+        <div className="absolute left-[-160px] top-0 w-[150px] bg-white border border-mw-neutral-200 rounded-lg shadow-lg p-1 z-[110]">
+          {options.map(({ value, label, icon: Icon }) => (
+            <div
+              key={value}
+              onClick={(e) => {
+                e.stopPropagation();
+                setTheme(value);
+              }}
+              className="flex items-center gap-2 px-3 py-2 text-sm text-mw-neutral-700 hover:bg-mw-neutral-50 rounded cursor-pointer"
+            >
+              <Icon className="h-4 w-4" />
+              <span className="flex-1">{label}</span>
+              {theme === value && <Check className="h-4 w-4 text-mw-primary-500" />}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AppShell() {
+  const [location, setLocation] = useLocation();
+  const { user, logout } = useAuth();
+  const { i18n, t } = useTranslation();
+  const { isCollapsed, toggleSidebar } = useSidebarState();
+
+  useEffect(() => {
+    const dir = getLanguageDirection(i18n.language);
+    document.documentElement.dir = dir;
+    document.documentElement.lang = i18n.language;
+  }, [i18n.language]);
+
+  const handleLogout = async () => {
+    await logout();
+  };
+
+  const getUserInitials = () => {
+    if (user?.name) {
+      return user.name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    if (user?.email) {
+      return user.email[0].toUpperCase();
+    }
+    return "U";
+  };
+
+  return (
+    <div className="h-screen w-screen overflow-hidden flex flex-col">
+      {/* ── Header ── */}
+      <header
+        id="app-header"
+        className="h-18 w-full bg-white border-b border-container-border flex items-center justify-between px-4 flex-shrink-0 dark:bg-mw-neutral-900 dark:border-mw-neutral-800"
+      >
+        {/* Left: logo + sidebar toggle */}
+        <div className="flex items-center gap-2.5">
+          <ProductSwitcher />
+          <div id="header-logo" className="flex items-center gap-3">
+            <img
+              src="/img/MW-logo-trans_1754045676555.png"
+              alt="Moving Walls"
+              className="h-20 w-auto"
+            />
+            <span
+              id="header-logo-text"
+              className="text-lg text-black dark:text-white font-medium"
+            >
+              Influence
+            </span>
+          </div>
+          {isCollapsed ? (
+            <PanelLeftOpen
+              id="sidebar-toggle-open"
+              className="h-7 w-7 text-mw-neutral-400 dark:text-mw-neutral-300 cursor-pointer hover:text-mw-neutral-600 dark:hover:text-mw-neutral-100 transition-colors"
+              onClick={toggleSidebar}
+            />
+          ) : (
+            <PanelLeftClose
+              id="sidebar-toggle-close"
+              className="h-7 w-7 text-mw-neutral-400 dark:text-mw-neutral-300 cursor-pointer hover:text-mw-neutral-600 dark:hover:text-mw-neutral-100 transition-colors"
+              onClick={toggleSidebar}
+            />
+          )}
+        </div>
+
+        {/* Right: actions */}
+        <div id="header-right" className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={async () => {
+              const feedback = Sentry.getFeedback();
+              if (feedback) {
+                const form = await feedback.createForm();
+                form.appendToDom();
+                form.open();
+              }
+            }}
+            title={t("user.reportBug")}
+            aria-label={t("user.reportBug")}
+          >
+            <Bug className="h-4 w-4" aria-hidden="true" />
+            <span className="hidden sm:inline">{t("user.reportBug")}</span>
+          </Button>
+
+          <div className="h-8 w-px bg-mw-neutral-200 dark:bg-mw-neutral-700" aria-hidden="true" />
+          <LanguageSwitcher />
+          <div className="h-8 w-px bg-mw-neutral-200 dark:bg-mw-neutral-700" aria-hidden="true" />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                className="flex items-center gap-3 focus:outline-none"
+                data-testid="button-user-menu"
+              >
+                <div
+                  id="user-avatar"
+                  className="h-10 w-10 relative bg-mw-success-50 rounded-lg border border-container-border cursor-pointer"
+                >
+                  <div className="left-[11px] top-[11px] absolute text-center text-black text-sm font-medium leading-none cursor-pointer">
+                    {getUserInitials()}
+                  </div>
+                </div>
+                <div
+                  id="user-info"
+                  className="text-left hidden sm:block ml-2 w-32 cursor-pointer"
+                >
+                  <div className="text-sm font-medium text-mw-neutral-900 dark:text-white leading-5 cursor-pointer">
+                    {user?.name || user?.email || "Guest"}
+                  </div>
+                  <div className="text-xs text-mw-neutral-500 leading-4 dark:text-mw-neutral-400 cursor-pointer">
+                    {user?.role_name || "Admin"}
+                  </div>
+                </div>
+                <ChevronDown className="size-5 text-mw-neutral-700 dark:text-mw-neutral-300 relative overflow-hidden cursor-pointer" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="min-w-[300px] p-2 z-[100] bg-white shadow-lg border border-mw-neutral-200 rounded-lg"
+            >
+              {/* Profile */}
+              <DropdownMenuItem
+                onClick={() => window.open(import.meta.env.VITE_ACCOUNT_URL, "_blank")}
+                className="flex items-center gap-2 px-2 py-2 text-sm text-mw-neutral-700 hover:bg-mw-neutral-50 rounded cursor-pointer"
+              >
+                <User className="h-5 w-5 relative overflow-hidden" />
+                <span className="text-base font-normal leading-loose">Profile</span>
+              </DropdownMenuItem>
+
+              {/* Company */}
+              <div
+                id="user-menu-company-section"
+                className="self-stretch px-2 py-1 rounded-sm"
+              >
+                <div className="space-y-2 w-full">
+                  <div className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">Company</div>
+                  <div className="text-sm text-mw-neutral-700 bg-mw-neutral-50 rounded px-2 py-1.5 border border-mw-neutral-200 dark:bg-mw-neutral-800 dark:border-mw-neutral-700 dark:text-mw-neutral-300">
+                    {user?.company_name || "N/A"}
+                  </div>
+                </div>
+              </div>
+
+              {/* Role */}
+              <div
+                id="user-menu-role-section"
+                className="self-stretch px-2 py-1 rounded-sm"
+              >
+                <div className="space-y-2 w-full">
+                  <div className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">Role</div>
+                  <div className="text-sm text-mw-neutral-700 bg-mw-neutral-50 rounded px-2 py-1.5 border border-mw-neutral-200 dark:bg-mw-neutral-800 dark:border-mw-neutral-700 dark:text-mw-neutral-300">
+                    {user?.role_name || "N/A"}
+                  </div>
+                </div>
+              </div>
+
+              <DropdownMenuSeparator className="my-1" />
+
+              {/* Demo Status */}
+              <DropdownMenuItem
+                onClick={() => window.open("/demo-status", "_blank")}
+                data-testid="menu-demo-status"
+                className="flex items-center gap-2 px-2 py-2 text-sm text-mw-neutral-700 hover:bg-mw-neutral-50 rounded cursor-pointer"
+              >
+                <FileText className="h-4 w-4" />
+                <span>Demo Status</span>
+              </DropdownMenuItem>
+
+              {/* Settings & Theme & Logout */}
+              <div
+                id="user-menu-actions"
+                className="self-stretch px-2 py-1 rounded-sm"
+              >
+                <div className="space-y-2">
+                  <button
+                    id="user-menu-settings-btn"
+                    onClick={() => setLocation("/settings")}
+                    data-testid="menu-settings"
+                    className="w-full flex items-center gap-3 p-1 py-1 text-base font-normal text-mw-neutral-700 dark:text-mw-neutral-300 hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700 rounded-md transition-colors"
+                  >
+                    <SettingsIcon className="h-5 w-5" />
+                    <span>Settings</span>
+                  </button>
+                  <ThemeSubmenu />
+                  <button
+                    id="user-menu-logout-btn"
+                    onClick={handleLogout}
+                    data-testid="menu-logout"
+                    className="w-full flex items-center gap-3 p-1 py-1 text-base font-normal text-mw-error-500 dark:text-mw-error-400 hover:bg-mw-error-50 dark:hover:bg-mw-error-900/20 rounded-md transition-colors"
+                  >
+                    <LogOut className="h-5 w-5" />
+                    <span>Logout</span>
+                  </button>
+                </div>
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </header>
+
+      {/* ── Body: sidebar + main ── */}
+      <div className="flex flex-1 overflow-hidden">
+        <AppSidebar />
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <main
+            id="main-content"
+            role="main"
+            className="flex-1 overflow-auto p-0 w-full bg-white dark:bg-background"
+            tabIndex={-1}
+          >
+            <ProtectedRouter />
+          </main>
+          {/* Footer */}
+          <footer className="flex-shrink-0 py-2 px-6 bg-white border-t border-mw-neutral-100 dark:bg-mw-neutral-900 dark:border-mw-neutral-800">
+            <p className="text-right text-xs text-mw-neutral-500 rtl:text-left">
+              {t("app.copyright")}
+            </p>
+          </footer>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AppContent() {
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    const dir = getLanguageDirection(i18n.language);
+    document.documentElement.dir = dir;
+    document.documentElement.lang = i18n.language;
+  }, [i18n.language]);
+
+  const pathname = window.location.pathname;
+  const isPublicRoute =
+    pathname === "/login" ||
+    pathname === "/auth/callback" ||
+    pathname.startsWith("/approval") ||
+    pathname === "/demo-status" ||
+    pathname === "/test-results";
+
+  return (
+    <ToastProvider>
+      {isPublicRoute ? (
+        <PublicRouter />
+      ) : (
+        <ProtectedRoute>
+          <SkipLink />
+          <SidebarStateProvider>
+            <AppShell />
+          </SidebarStateProvider>
+        </ProtectedRoute>
+      )}
+      <Toaster />
+    </ToastProvider>
+  );
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <AuthProvider>
+          <AppContent />
+        </AuthProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}