adserver-dashboard 1.0.0

package/client/src/pages/dsp-list.tsx

@@ -0,0 +1,239 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { useLocation } from "wouter";
+import { Button } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { PageHeader } from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import {
+  Search,
+  MoreHorizontal,
+  Eye,
+  Plus,
+} from "lucide-react";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useQuery } from "@tanstack/react-query";
+import { listDsps, type Dsp } from "@/lib/dsp-buyer-api";
+import { AgGridTable } from '@moving-walls/design-system';
+import type { AgGridTableServerSideConfig, ColDef } from '@moving-walls/design-system';
+
+
+export default function DSPListPage() {
+  const { t } = useTranslation(["dsp", "common"]);
+  usePageTitle(t("dsp:list.title"));
+  const [, setLocation] = useLocation();
+
+  const [searchInput, setSearchInput] = useState("");
+  const [searchValue, setSearchValue] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      const trimmedValue = searchInput.trim();
+      if (trimmedValue === "" || trimmedValue.length >= 2) {
+        setSearchValue(trimmedValue);
+        setCurrentPage(1);
+      }
+    }, 300);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [searchInput]);
+
+  const { data: dsps = [], isLoading, isError } = useQuery<Dsp[]>({
+    queryKey: ["dsps", currentPage, pageSize, searchValue],
+    queryFn: () =>
+      listDsps({
+        page: currentPage - 1,
+        size: pageSize,
+        searchText: searchValue || undefined,
+      }),
+  });
+
+  const handleEditDSP = (dsp: Dsp) => {
+    setLocation(`/dsp/edit/${dsp.id}`);
+  };
+
+  const handlePageChange = (page: number) => {
+    if (page >= 1) {
+      setCurrentPage(page);
+    }
+  };
+
+  const handlePageSizeChange = (newPageSize: number) => {
+    setPageSize(newPageSize);
+    setCurrentPage(1);
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  const serverSideConfig: AgGridTableServerSideConfig = {
+    totalCount: dsps.length < pageSize ? (currentPage - 1) * pageSize + dsps.length : currentPage * pageSize + 1,
+    currentPage,
+    pageSize,
+    onPageChange: handlePageChange,
+    onPageSizeChange: handlePageSizeChange,
+    pageSizeSelector: [5, 10, 25, 50],
+  };
+
+  const columnDefs = useMemo<ColDef<Dsp>[]>(() => [
+    {
+      colId: "name",
+      headerName: t("dsp:list.columns.dspName"),
+      field: "name",
+      minWidth: 160,
+      cellRenderer: (params: { value: string }) => (
+        <span className="text-sm font-medium text-mw-neutral-800 dark:text-white">{params.value}</span>
+      ),
+    },
+    {
+      colId: "ip",
+      headerName: t("dsp:list.columns.ip"),
+      field: "ip",
+      width: 112,
+      cellRenderer: (params: { value: string }) => (
+        <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-300">{params.value}</span>
+      ),
+    },
+    {
+      colId: "country",
+      headerName: t("dsp:list.columns.country"),
+      field: "country",
+      width: 96,
+      cellRenderer: (params: { value: string }) => (
+        <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-300">{params.value}</span>
+      ),
+    },
+    {
+      colId: "emailAddress",
+      headerName: t("dsp:list.columns.email"),
+      field: "emailAddress",
+      minWidth: 200,
+      cellRenderer: (params: { value: string }) => (
+        <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-300">{params.value}</span>
+      ),
+    },
+    {
+      colId: "url",
+      headerName: t("dsp:list.columns.url"),
+      field: "url",
+      minWidth: 160,
+      cellRenderer: (params: { value: string; data: Dsp }) => (
+        <a
+          href={params.value}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-mw-primary-500 hover:underline"
+        >
+          {params.value}
+        </a>
+      ),
+    },
+    {
+      colId: "createdBy",
+      headerName: t("dsp:list.columns.createdBy"),
+      field: "createdBy",
+      width: 112,
+      cellRenderer: (params: { value: string }) => (
+        <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-300">{params.value}</span>
+      ),
+    },
+    {
+      colId: "createdDate",
+      headerName: t("dsp:list.columns.createdOn"),
+      field: "createdDate",
+      width: 112,
+      cellRenderer: (params: { value: string }) => (
+        <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-300">{formatDate(params.value)}</span>
+      ),
+    },
+    {
+      colId: "actions",
+      headerName: t("dsp:list.columns.actions"),
+      width: 64,
+      sortable: false,
+      resizable: false,
+      cellRenderer: (params: { data: Dsp }) => {
+        const dsp = params.data;
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => handleEditDSP(dsp)}>
+                <Eye className="h-4 w-4 mr-2" />
+                View
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ], [t]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <PageHeader
+        title={t("dsp:list.title")}
+        subtitle={t("dsp:list.subtitle")}
+        actions={
+          <Button onClick={() => setLocation("/dsp/new")} className="gap-2">
+            <Plus className="h-4 w-4" />
+            {t("dsp:list.addDsp") || "Add DSP"}
+          </Button>
+        }
+      />
+
+      <div className="flex-1 p-6 space-y-6 overflow-hidden flex flex-col">
+        <div className="flex items-center justify-between gap-4">
+          <div className="relative w-80">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+            <Input
+              placeholder={t("dsp:list.searchPlaceholder")}
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 rounded-lg border border-mw-neutral-200 bg-white overflow-hidden" style={{ minHeight: 400 }}>
+          <AgGridTable
+            rowData={dsps}
+            columnDefs={columnDefs}
+            getRowId={(data) => String(data.id)}
+            loading={isLoading}
+            emptyMessage={isError ? (t("common:error") || "Failed to load data") : t("dsp:list.noResults")}
+            serverSidePagination={true}
+            serverSideConfig={serverSideConfig}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/pages/folder-content.tsx

@@ -0,0 +1,336 @@
+import { useState } from "react";
+import { useLocation, useRoute } from "wouter";
+import {
+  ArrowLeft,
+  Search,
+  Upload as UploadIcon,
+  LayoutGrid,
+  List,
+  Package,
+} 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, useCreatives } from "@/lib/content-hub-api";
+import { NewCreativeCard } from "@/components/creative-library/new-creative-card";
+import { CreativeList } from "@/components/creative-library/creative-list";
+import {
+  CreativeFiltersPanel,
+  type CreativeFilters as UICreativeFilters,
+} from "@/components/creative-library/creative-filters-panel";
+import {
+  CreativeDetailsView,
+  type CreativeDetails,
+} from "@/components/creative-library/creative-details-view";
+import { CreativeUpload } from "@/components/content-hub/creative-upload";
+import type { Creative } from "@/types/content-hub";
+import { CreativeStatus } from "@/types/content-hub";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+const ITEMS_PER_PAGE = 12;
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+}
+
+export default function FolderContentPage() {
+  usePageTitle("Folder");
+  const [, setLocation] = useLocation();
+  const [, params] = useRoute("/contenthub/folder/:folderId");
+  const folderId = params?.folderId;
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [uiFilters, setUiFilters] = useState<UICreativeFilters>({});
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+  const [detailsViewOpen, setDetailsViewOpen] = useState(false);
+  const [selectedCreative, setSelectedCreative] =
+    useState<CreativeDetails | null>(null);
+
+  const { data: foldersData } = useFolders({ page: 1, limit: 100 });
+  const currentFolder = foldersData?.data?.find((f) => f.id === folderId);
+
+  // Build API filters from UI filters
+  const buildApiFilters = () => {
+    const apiFilters: Record<string, any> = {
+      folder_id: folderId,
+      page: currentPage,
+      limit: ITEMS_PER_PAGE,
+      search: searchQuery || undefined,
+    };
+
+    // Duration filter
+    if (uiFilters.duration) {
+      apiFilters.min_duration = uiFilters.duration[0];
+      apiFilters.max_duration = uiFilters.duration[1];
+    }
+
+    // Resolution filter
+    if (uiFilters.resolution && uiFilters.resolution.length > 0) {
+      apiFilters.resolution = uiFilters.resolution[0];
+    }
+
+    // Status filter
+    if (uiFilters.status && uiFilters.status.length > 0) {
+      const statusMap: Record<string, CreativeStatus> = {
+        accepted: CreativeStatus.APPROVED,
+        processing: CreativeStatus.DRAFT,
+        inadequate: CreativeStatus.REJECTED,
+      };
+      apiFilters.status = statusMap[uiFilters.status[0]];
+    }
+
+    return apiFilters;
+  };
+
+  const { data: creativesData, isLoading } = useCreatives(buildApiFilters());
+
+  const creatives = creativesData?.data || [];
+  const totalPages = creativesData?.pagination?.total_pages || 1;
+
+  const convertToUICreative = (creative: Creative) => {
+    const mimeType = creative.mime_type;
+    let type: "image" | "video" | "document" = "document";
+    if (mimeType.startsWith("image/")) type = "image";
+    else if (mimeType.startsWith("video/")) type = "video";
+
+    let status: "accepted" | "processing" | "inadequate" = "processing";
+    if (creative.status === "approved") status = "accepted";
+    else if (creative.status === "rejected") status = "inadequate";
+
+    return {
+      id: creative.id,
+      filename: creative.filename,
+      type,
+      format: creative.format,
+      size: formatBytes(creative.size_bytes),
+      resolution:
+        creative.width && creative.height
+          ? `${creative.width}x${creative.height}`
+          : undefined,
+      duration: creative.duration_seconds
+        ? `${Math.round(creative.duration_seconds)}s`
+        : undefined,
+      thumbnail: creative.thumbnail || creative.cdn_path,
+      status,
+      tags: creative.tags || [],
+      uploadedBy: "User",
+    };
+  };
+
+  const convertToDetails = (creative: Creative): CreativeDetails => {
+    const uiCreative = convertToUICreative(creative);
+    return {
+      ...uiCreative,
+      resolution: uiCreative.resolution || "Unknown",
+      uploadedOn: new Date(creative.created_at).toLocaleString(),
+      approvalDetails: creative.approved_at
+        ? {
+            reviewedBy: creative.approved_by || "Admin",
+            reviewedOn: new Date(creative.approved_at).toLocaleString(),
+            comments: "Approved for use in campaigns",
+          }
+        : undefined,
+    };
+  };
+
+  const handlePreviewCreative = (creative: any) => {
+    const fullCreative = creatives.find((c) => c.id === creative.id);
+    if (fullCreative) {
+      setSelectedCreative(convertToDetails(fullCreative));
+      setDetailsViewOpen(true);
+    }
+  };
+
+  const handleBack = () => {
+    setLocation("/creatives");
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleUIFiltersChange = (newUiFilters: UICreativeFilters) => {
+    setUiFilters(newUiFilters);
+    setCurrentPage(1);
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="px-6 pt-6">
+        <HStack className="items-center gap-4 mb-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}>{currentFolder?.name || "Folder"}</Heading>
+        </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">
+            {currentFolder?.name || "Folder"}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex-1 flex flex-col min-h-0 px-6 pb-6">
+        <HStack className="items-center justify-between mb-4">
+          <div className="flex-1 max-w-md 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 creatives..."
+              value={searchQuery}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="pl-10"
+            />
+          </div>
+          <HStack spacing={2}>
+            <CreativeFiltersPanel
+              filters={uiFilters}
+              onFiltersChange={handleUIFiltersChange}
+              onClear={() => {
+                setUiFilters({});
+                setCurrentPage(1);
+              }}
+            />
+            <Button
+              variant={viewMode === "list" ? "primary" : "outline"}
+              size="sm"
+              onClick={() => setViewMode("list")}
+            >
+              <List className="w-4 h-4" />
+            </Button>
+            <Button
+              variant={viewMode === "grid" ? "primary" : "outline"}
+              size="sm"
+              onClick={() => setViewMode("grid")}
+            >
+              <LayoutGrid className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => setUploadDialogOpen(true)}
+            >
+              <UploadIcon className="w-4 h-4 mr-2" />
+              Upload
+            </Button>
+          </HStack>
+        </HStack>
+
+        <div className="flex-1 overflow-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Text variant="muted">Loading creatives...</Text>
+            </div>
+          ) : creatives.length === 0 ? (
+            <Stack
+              spacing={4}
+              className="items-center justify-center py-16 text-center"
+            >
+              <Package className="w-16 h-16 text-mw-gray-600 dark:text-mw-gray-400" />
+              <Heading level={4}>No creatives yet</Heading>
+              <Text size="sm" variant="muted" className="max-w-sm">
+                Start uploading creatives to this folder.
+              </Text>
+              <Button onClick={() => setUploadDialogOpen(true)}>
+                <UploadIcon className="w-4 h-4 mr-2" />
+                Upload Creative
+              </Button>
+            </Stack>
+          ) : viewMode === "grid" ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-6">
+              {creatives.map((creative) => (
+                <NewCreativeCard
+                  key={creative.id}
+                  {...convertToUICreative(creative)}
+                  onPreview={() =>
+                    handlePreviewCreative(convertToUICreative(creative))
+                  }
+                  onDownload={() => window.open(creative.cdn_path, "_blank")}
+                  onDelete={() => console.log("Delete", creative.id)}
+                  onMove={() => console.log("Move", creative.id)}
+                />
+              ))}
+            </div>
+          ) : (
+            <CreativeList
+              items={creatives.map((creative) => ({
+                ...convertToUICreative(creative),
+                onPreview: () =>
+                  handlePreviewCreative(convertToUICreative(creative)),
+                onDownload: () => window.open(creative.cdn_path, "_blank"),
+                onDelete: () => console.log("Delete", creative.id),
+                onMove: () => console.log("Move", creative.id),
+              }))}
+            />
+          )}
+        </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>
+
+      <CreativeUpload
+        open={uploadDialogOpen}
+        onOpenChange={setUploadDialogOpen}
+        defaultFolderId={folderId}
+        onUploadComplete={() => setUploadDialogOpen(false)}
+      />
+
+      <CreativeDetailsView
+        creative={selectedCreative}
+        open={detailsViewOpen}
+        onOpenChange={setDetailsViewOpen}
+        onDownload={() => {
+          if (selectedCreative?.id) {
+            const creative = creatives.find(
+              (c) => c.id === selectedCreative.id,
+            );
+            if (creative) window.open(creative.cdn_path, "_blank");
+          }
+        }}
+        onDelete={() => console.log("Delete", selectedCreative?.id)}
+      />
+    </div>
+  );
+}