adserver-dashboard 1.0.0

package/client/src/lib/tolgee.ts

@@ -0,0 +1,85 @@
+import { Tolgee, DevTools, FormatSimple } from "@tolgee/react";
+
+export const supportedLanguages = [
+  { code: 'en', name: 'English', shortName: 'ENG', dir: 'ltr' },
+  { code: 'zh', name: '中文', shortName: 'CHN', dir: 'ltr' },
+  { code: 'ja', name: '日本語', shortName: 'JPN', dir: 'ltr' },
+  { code: 'ar', name: 'العربية', shortName: 'ARB', dir: 'rtl' },
+] as const;
+
+export type SupportedLanguage = typeof supportedLanguages[number]['code'];
+
+export const getLanguageDirection = (lang: string): 'ltr' | 'rtl' => {
+  const language = supportedLanguages.find(l => l.code === lang);
+  return language?.dir || 'ltr';
+};
+
+const namespaces = ['common', 'deals', 'creatives', 'navigation', 'dsp', 'buyer', 'contentHub', 'wizard', 'campaigns', 'inventory', 'lineItems', 'approval', 'dashboard'];
+const languages = ['en', 'zh', 'ja', 'ar'];
+
+const flattenObject = (obj: Record<string, unknown>, prefix = ''): Record<string, string> => {
+  const result: Record<string, string> = {};
+  for (const key in obj) {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      Object.assign(result, flattenObject(obj[key] as Record<string, unknown>, fullKey));
+    } else {
+      result[fullKey] = String(obj[key]);
+    }
+  }
+  return result;
+};
+
+type StaticDataValue = Record<string, string> | (() => Promise<Record<string, string>>);
+
+const loadNamespaceData = async (lang: string, ns: string): Promise<Record<string, string>> => {
+  try {
+    const response = await fetch(`/locales/${lang}/${ns}.json`);
+    if (response.ok) {
+      const data = await response.json();
+      return flattenObject(data);
+    }
+  } catch (e) {
+    console.warn(`Failed to load locale ${lang}/${ns}:`, e);
+  }
+  return {};
+};
+
+const staticData: Record<string, StaticDataValue> = {};
+for (const lang of languages) {
+  for (const ns of namespaces) {
+    staticData[`${lang}:${ns}`] = () => loadNamespaceData(lang, ns);
+  }
+}
+
+const storedLanguage = typeof localStorage !== 'undefined' 
+  ? localStorage.getItem('tolgee_language') || 'en'
+  : 'en';
+
+if (typeof document !== 'undefined') {
+  document.documentElement.lang = storedLanguage;
+  document.documentElement.dir = getLanguageDirection(storedLanguage);
+}
+
+export const tolgee = Tolgee()
+  .use(DevTools())
+  .use(FormatSimple())
+  .init({
+    language: storedLanguage,
+    availableLanguages: languages,
+    staticData,
+    defaultNs: 'common',
+    ns: namespaces,
+    fallbackLanguage: 'en',
+  });
+
+export const getCurrentLanguage = (): SupportedLanguage => {
+  return (tolgee.getLanguage() || 'en') as SupportedLanguage;
+};
+
+export const changeLanguage = async (lang: SupportedLanguage) => {
+  await tolgee.changeLanguage(lang);
+  localStorage.setItem('tolgee_language', lang);
+  document.documentElement.lang = lang;
+  document.documentElement.dir = getLanguageDirection(lang);
+};

package/client/src/main.tsx

@@ -0,0 +1,67 @@
+import React, { Suspense } from "react";
+import { createRoot } from "react-dom/client";
+import * as Sentry from "@sentry/react";
+import { Provider } from "react-redux";
+import { TolgeeProvider } from "@tolgee/react";
+import { store } from "./store";
+import App from "./App";
+import "./index.css";
+import "@moving-walls/design-system/dist/styles/index.css";
+import { initializeAuth } from "./lib/auth-service";
+import { tolgee } from "./lib/tolgee";
+
+Sentry.init({
+  dsn: "https://240222718af254749b172f2d1012d434@o4510359146921984.ingest.us.sentry.io/4510589118185472",
+  sendDefaultPii: true,
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.browserProfilingIntegration(),
+    Sentry.replayIntegration(),
+    Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }),
+    Sentry.feedbackIntegration({
+      colorScheme: "system",
+      isNameRequired: true,
+      isEmailRequired: true,
+      autoInject: false,
+    }),
+  ],
+  _experiments: {
+    enableLogs: true,
+  },
+  tracesSampleRate: 1.0,
+  tracePropagationTargets: [/^http:\/\/localhost/],
+  profileSessionSampleRate: 1.0,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+});
+
+// Initialize authentication configuration from environment variables
+initializeAuth();
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error('Root element with id "root" not found');
+}
+
+const root = createRoot(rootElement);
+
+function AppLoader() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-mw-primary-500" />
+    </div>
+  );
+}
+
+root.render(
+  <React.StrictMode>
+    <TolgeeProvider tolgee={tolgee} fallback={<AppLoader />}>
+      <Provider store={store}>
+        <Suspense fallback={<AppLoader />}>
+          <App />
+        </Suspense>
+      </Provider>
+    </TolgeeProvider>
+  </React.StrictMode>,
+);

package/client/src/mapbox-draw-modes.d.ts

@@ -0,0 +1,32 @@
+declare module 'mapbox-gl-draw-circle' {
+  export const CircleMode: any;
+  export const DragCircleMode: any;
+  export const DirectMode: any;
+  export const SimpleSelectMode: any;
+}
+
+declare module 'mapbox-gl-draw-rectangle-mode' {
+  const RectangleMode: any;
+  export default RectangleMode;
+}
+
+declare module '@mapbox/mapbox-gl-geocoder' {
+  import mapboxgl from 'mapbox-gl';
+  
+  interface GeocoderOptions {
+    accessToken: string;
+    mapboxgl?: typeof mapboxgl;
+    countries?: string;
+    placeholder?: string;
+    marker?: boolean;
+  }
+  
+  class MapboxGeocoder implements mapboxgl.IControl {
+    constructor(options: GeocoderOptions);
+    on(event: string, callback: (result: any) => void): this;
+    onAdd(map: mapboxgl.Map): HTMLElement;
+    onRemove(): void;
+  }
+  
+  export default MapboxGeocoder;
+}

package/client/src/pages/all-folders.tsx

@@ -0,0 +1,203 @@
+
+import { useState } from "react";
+import { useLocation } from "wouter";
+import { ArrowLeft, Search, Upload as UploadIcon, Plus } from "lucide-react";
+import { Button } from "@moving-walls/design-system";
+import { HStack, Stack } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Heading, Text } from "@moving-walls/design-system";
+import { Pagination } from "@moving-walls/design-system";
+import { useFolders } from "@/lib/content-hub-api";
+import { FolderCard } from "@/components/creative-library/folder-card";
+import {
+  CreateFolderDialog,
+  UpdateFolderDialog,
+  DeleteFolderDialog,
+} from "@/components/content-hub/folder-dialogs";
+import { CreativeUpload } from "@/components/content-hub/creative-upload";
+import type { Folder } from "@/types/content-hub";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+const ITEMS_PER_PAGE = 12;
+
+export default function AllFoldersPage() {
+  usePageTitle("Folders");
+  const [, setLocation] = useLocation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [createFolderOpen, setCreateFolderOpen] = useState(false);
+  const [updateFolderOpen, setUpdateFolderOpen] = useState(false);
+  const [deleteFolderOpen, setDeleteFolderOpen] = useState(false);
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+  const [selectedFolder, setSelectedFolder] = useState<Folder | null>(null);
+
+  const { data: foldersData, isLoading } = useFolders({
+    page: currentPage,
+    limit: ITEMS_PER_PAGE,
+    search: searchQuery || undefined,
+  });
+
+  const folders = foldersData?.data || [];
+  const totalPages = foldersData?.pagination?.total_pages || 1;
+
+  const getFolderSize = (folder: Folder): string => {
+    const totalFiles = folder.no_of_creatives;
+    const avgSize = 2;
+    return `${totalFiles * avgSize} MB`;
+  };
+
+  const handleFolderClick = (folderId: string) => {
+    setLocation(`/contenthub/folder/${folderId}`);
+  };
+
+  const handleBack = () => {
+    setLocation("/creatives");
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="px-6 pt-6">
+        <HStack className="items-center justify-between mb-4">
+          <HStack className="items-center gap-4">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleBack}
+              className="flex items-center gap-2 p-0 hover:bg-transparent"
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </Button>
+            <Heading level={4}>All Folders</Heading>
+          </HStack>
+          <HStack spacing={2}>
+            <Button variant="outline" onClick={() => setCreateFolderOpen(true)}>
+              <Plus className="w-4 h-4 mr-2" />
+              New Folder
+            </Button>
+            <Button variant="primary" onClick={() => setUploadDialogOpen(true)}>
+              <UploadIcon className="w-4 h-4 mr-2" />
+              Upload Creative
+            </Button>
+          </HStack>
+        </HStack>
+
+        <div className="flex items-center gap-2 text-sm text-mw-gray-600 dark:text-mw-gray-400 mb-6">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setLocation("/")}
+          >
+            Home
+          </Button>
+          <span>/</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setLocation("/creatives")}
+          >
+            Creatives
+          </Button>
+          <span>/</span>
+          <span className="text-mw-gray-900 dark:text-mw-gray-100 font-medium">
+            All Folders
+          </span>
+        </div>
+      </div>
+
+      <div className="flex-1 flex flex-col min-h-0 px-6 pb-6">
+        <div className="mb-6">
+          <HStack className="items-center justify-between">
+            <Heading level={5}>Folders</Heading>
+            <HStack spacing={3} className="flex-1 max-w-md ml-auto">
+              <div className="flex-1 relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-mw-gray-600 dark:text-mw-gray-400" />
+                <Input
+                  placeholder="Search here..."
+                  value={searchQuery}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setSearchQuery(e.target.value);
+                    setCurrentPage(1);
+                  }}
+                  className="pl-10"
+                />
+              </div>
+            </HStack>
+          </HStack>
+        </div>
+
+        <div className="flex-1 overflow-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Text variant="muted">Loading folders...</Text>
+            </div>
+          ) : folders.length === 0 ? (
+            <div className="flex items-center justify-center py-16">
+              <Text variant="muted">No folders found</Text>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pb-6">
+              {folders.map((folder) => (
+                <FolderCard
+                  key={folder.id}
+                  id={folder.id}
+                  name={folder.name}
+                  fileCount={folder.no_of_creatives}
+                  size={getFolderSize(folder)}
+                  onClick={() => handleFolderClick(folder.id)}
+                  onRename={() => {
+                    setSelectedFolder(folder);
+                    setUpdateFolderOpen(true);
+                  }}
+                  onDelete={() => {
+                    setSelectedFolder(folder);
+                    setDeleteFolderOpen(true);
+                  }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {totalPages > 1 && (
+          <div className="pt-4 border-t border-mw-gray-200 dark:border-mw-gray-700">
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={handlePageChange}
+              showFirstLast={true}
+              showPrevNext={true}
+            />
+          </div>
+        )}
+      </div>
+
+      <CreateFolderDialog
+        open={createFolderOpen}
+        onOpenChange={setCreateFolderOpen}
+      />
+
+      <UpdateFolderDialog
+        open={updateFolderOpen}
+        onOpenChange={setUpdateFolderOpen}
+        folder={selectedFolder}
+      />
+
+      <DeleteFolderDialog
+        open={deleteFolderOpen}
+        onOpenChange={setDeleteFolderOpen}
+        folder={selectedFolder}
+      />
+
+      <CreativeUpload
+        open={uploadDialogOpen}
+        onOpenChange={setUploadDialogOpen}
+        onUploadComplete={() => setUploadDialogOpen(false)}
+      />
+    </div>
+  );
+}

package/client/src/pages/auth-callback.tsx

@@ -0,0 +1,115 @@
+/**
+ * OAuth Callback Page
+ * 
+ * Handles the OAuth redirect from Direct Campaigns API
+ * Exchanges authorization code for tokens and redirects to dashboard
+ */
+
+import { useEffect, useState, useRef } from "react";
+import { useLocation } from "wouter";
+import * as oauthService from "@/lib/oauth-service";
+import { useAuth } from "@/contexts/auth-context";
+import { clearAll } from "@/lib/storage-utils";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { Loading } from "@moving-walls/design-system";
+
+export default function AuthCallback() {
+  usePageTitle("Authenticating");
+  const [, setLocation] = useLocation();
+  const { checkAuth, isAuthenticated, isLoading } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(true);
+  const [authComplete, setAuthComplete] = useState(false);
+  const processedCodeRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      try {
+        // Extract code and state from URL parameters
+        const params = new URLSearchParams(window.location.search);
+        const code = params.get('code');
+        const state = params.get('state');
+
+        if (!code) {
+          throw new Error('Authorization code not found');
+        }
+
+        if (!state) {
+          throw new Error('State parameter not found');
+        }
+
+        // Prevent duplicate processing of the same code (React StrictMode runs effects twice)
+        if (processedCodeRef.current === code) {
+          console.log('[OAuth] Callback already processed for this code, skipping');
+          return;
+        }
+
+        processedCodeRef.current = code;
+
+        // Exchange code for tokens
+        await oauthService.handleCallback(code, state);
+        
+        console.log('[OAuth] Token exchange complete, updating auth context');
+        
+        // Update auth context with new tokens
+        await checkAuth();
+        
+        console.log('[OAuth] Auth context updated, ready to redirect');
+        setIsProcessing(false);
+        setAuthComplete(true);
+      } catch (err) {
+        console.error('OAuth callback error:', err);
+        const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
+        setError(errorMessage);
+        setIsProcessing(false);
+
+        // Clear all OAuth data from cookies on error
+        clearAll();
+
+        // Redirect to login after showing error
+        setTimeout(() => {
+          setLocation('/login?error=' + encodeURIComponent(errorMessage));
+        }, 2000);
+      }
+    };
+
+    handleCallback();
+  }, [checkAuth, setLocation]);
+
+  // Watch for auth state changes and redirect once authenticated
+  useEffect(() => {
+    if (authComplete && !isLoading && isAuthenticated) {
+      console.log('[OAuth] Authentication confirmed, redirecting to dashboard');
+      const returnTo = sessionStorage.getItem('auth_return_to') || '/';
+      sessionStorage.removeItem('auth_return_to');
+      setLocation(returnTo);
+    }
+  }, [authComplete, isAuthenticated, isLoading, setLocation]);
+
+  if (error) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <div className="mx-auto max-w-md space-y-6 rounded-lg border bg-card p-8 text-center shadow-lg">
+          <div className="space-y-2">
+            <h1 className="text-2xl font-bold text-destructive">Authentication Error</h1>
+            <p className="text-sm text-muted-foreground">
+              {error}
+            </p>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Redirecting to login page...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Loading
+      className="fixed inset-0 bg-white z-50"
+      size="lg"
+      variant="primary"
+      text={isProcessing ? 'Verifying your credentials...' : 'Success! Redirecting...'}
+    />
+  );
+}