adserver-dashboard 1.0.0

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

@@ -0,0 +1,622 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { FormLabel } from "@moving-walls/design-system";
+import { PageHeader } from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@moving-walls/design-system";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from "@moving-walls/design-system";
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import {
+  Plus,
+  Search,
+  MoreHorizontal,
+  Edit,
+  Trash2,
+  Users,
+  X,
+} from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  listDspBuyers,
+  deleteDspBuyer,
+  getDspBuyer,
+  createDspBuyer,
+  updateDspBuyer,
+  getDspDropdownList,
+  type DspBuyer,
+} from "@/lib/dsp-buyer-api";
+import { AgGridTable, Card, CardHeader, CardContent } from "@moving-walls/design-system";
+import type { ColDef } from "@moving-walls/design-system";
+import { SlidersHorizontal } from "lucide-react";
+
+const PAGE_SIZE = 20;
+
+const COUNTRIES = [
+  { value: "Malaysia", label: "Malaysia" },
+  { value: "Singapore", label: "Singapore" },
+  { value: "Japan", label: "Japan" },
+  { value: "Indonesia", label: "Indonesia" },
+  { value: "Thailand", label: "Thailand" },
+  { value: "Philippines", label: "Philippines" },
+  { value: "Australia", label: "Australia" },
+  { value: "United States", label: "United States" },
+  { value: "United Kingdom", label: "United Kingdom" },
+  { value: "Germany", label: "Germany" },
+  { value: "France", label: "France" },
+  { value: "India", label: "India" },
+];
+
+const formSchema = z.object({
+  name: z.string().min(1, "DSP is required"),
+  dspId: z.string().optional().nullable(),
+  seatId: z.string().min(1, "Seat ID is required"),
+  seatName: z.string().min(1, "Seat Name is required"),
+  buyerAccountId: z.string().min(1, "Buyer Account ID is required"),
+  emailAddress: z.string().email("Please enter a valid email"),
+  country: z.string().min(1, "Country is required"),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const buyerErrorMessageMap: Record<string, string> = {
+  "DSP is required": "form.validation.dspRequired",
+  "Seat ID is required": "form.validation.seatIdRequired",
+  "Seat Name is required": "form.validation.seatNameRequired",
+  "Buyer Account ID is required": "form.validation.buyerAccountIdRequired",
+  "Please enter a valid email": "form.validation.emailInvalid",
+  "Country is required": "form.validation.countryRequired",
+};
+
+const getErrorTranslation = (t: any, message: string | undefined): string => {
+  if (!message) return "";
+  const key = buyerErrorMessageMap[message];
+  return key ? t(`buyer:${key}`) : message;
+};
+
+export default function BuyerListPage() {
+  const { t } = useTranslation(["buyer", "common"]);
+  usePageTitle(t("buyer:list.title"));
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  // List state
+  const [searchInput, setSearchInput] = useState("");
+  const [searchValue, setSearchValue] = useState("");
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Sheet state
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingBuyerId, setEditingBuyerId] = useState<string | null>(null);
+  const isEditMode = !!editingBuyerId;
+
+  // Delete dialog state
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [buyerToDelete, setBuyerToDelete] = useState<DspBuyer | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Debounce search
+  useEffect(() => {
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = setTimeout(() => {
+      const trimmed = searchInput.trim();
+      if (trimmed === "" || trimmed.length >= 2) setSearchValue(trimmed);
+    }, 300);
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, [searchInput]);
+
+  // List query
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: ["dsp-buyers", searchValue],
+      queryFn: ({ pageParam = 0 }) =>
+        listDspBuyers({ page: pageParam, size: PAGE_SIZE, searchText: searchValue || undefined }),
+      getNextPageParam: (lastPage: DspBuyer[], allPages: DspBuyer[][]) =>
+        lastPage.length < PAGE_SIZE ? undefined : allPages.length,
+      initialPageParam: 0,
+    });
+
+  const buyers = data?.pages.flat() ?? [];
+
+  useEffect(() => {
+    if (hasNextPage && !isFetchingNextPage) fetchNextPage();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  // DSP dropdown
+  const { data: dspDropdownList = [], isLoading: isDspDropdownLoading } = useQuery({
+    queryKey: ["dsp-dropdown"],
+    queryFn: getDspDropdownList,
+  });
+
+  // Fetch existing buyer when editing
+  const { data: existingBuyerData, isLoading: isFetchingBuyer } = useQuery<DspBuyer>({
+    queryKey: ["dsp-buyer", editingBuyerId],
+    queryFn: () => getDspBuyer(editingBuyerId!),
+    enabled: isEditMode && !!editingBuyerId,
+  });
+
+  // Form
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+    reset,
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      dspId: "",
+      seatId: "",
+      seatName: "",
+      buyerAccountId: "",
+      emailAddress: "",
+      country: "",
+    },
+  });
+
+  // Populate form when editing buyer data loads
+  useEffect(() => {
+    if (existingBuyerData && sheetOpen) {
+      reset({
+        name: existingBuyerData.name || "",
+        dspId: existingBuyerData.dspId || "",
+        seatId: existingBuyerData.seatId || "",
+        seatName: existingBuyerData.seatName || "",
+        buyerAccountId: existingBuyerData.buyerAccountId || "",
+        emailAddress: existingBuyerData.emailAddress || "",
+        country: existingBuyerData.country || "",
+      });
+    }
+  }, [existingBuyerData, sheetOpen, reset]);
+
+  const openAddSheet = () => {
+    setEditingBuyerId(null);
+    reset({ name: "", dspId: "", seatId: "", seatName: "", buyerAccountId: "", emailAddress: "", country: "" });
+    setSheetOpen(true);
+  };
+
+  const openEditSheet = (buyer: DspBuyer) => {
+    setEditingBuyerId(String(buyer.id));
+    reset({ name: "", dspId: "", seatId: "", seatName: "", buyerAccountId: "", emailAddress: "", country: "" });
+    setSheetOpen(true);
+  };
+
+  const closeSheet = () => {
+    setSheetOpen(false);
+    setEditingBuyerId(null);
+    reset({ name: "", dspId: "", seatId: "", seatName: "", buyerAccountId: "", emailAddress: "", country: "" });
+  };
+
+  const onSubmit = async (data: FormData) => {
+    setIsSubmitting(true);
+    try {
+      if (isEditMode && editingBuyerId && existingBuyerData) {
+        const updatedBuyer: DspBuyer = {
+          ...existingBuyerData,
+          name: data.name,
+          dspId: data.dspId || existingBuyerData.dspId,
+          seatId: data.seatId,
+          seatName: data.seatName,
+          buyerAccountId: data.buyerAccountId,
+          emailAddress: data.emailAddress,
+          country: data.country,
+        };
+        await updateDspBuyer(editingBuyerId, updatedBuyer);
+      } else {
+        await createDspBuyer({
+          name: data.name,
+          dspId: data.dspId || null,
+          seatId: data.seatId,
+          seatName: data.seatName,
+          buyerAccountId: data.buyerAccountId,
+          emailAddress: data.emailAddress,
+          country: data.country,
+        });
+      }
+      queryClient.invalidateQueries({ queryKey: ["dsp-buyers"] });
+      toast({
+        title: t("common:success"),
+        description: t("buyer:form.saveSuccess"),
+        variant: "success",
+      });
+      closeSheet();
+    } catch (error: any) {
+      toast({
+        title: t("common:error") || "Error",
+        description: error.message || "Failed to save buyer",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteClick = (buyer: DspBuyer) => {
+    setBuyerToDelete(buyer);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (buyerToDelete) {
+      setIsDeleting(true);
+      try {
+        await deleteDspBuyer(buyerToDelete.id);
+        queryClient.invalidateQueries({ queryKey: ["dsp-buyers"] });
+        toast({ title: t("common:success"), description: t("buyer:list.deleteSuccess"), variant: "success" });
+      } catch (error: any) {
+        toast({ title: t("common:error") || "Error", description: error.message || "Failed to delete buyer", variant: "destructive" });
+      } finally {
+        setIsDeleting(false);
+        setDeleteDialogOpen(false);
+        setBuyerToDelete(null);
+      }
+    }
+  };
+
+  const columnDefs = useMemo<ColDef<DspBuyer>[]>(
+    () => [
+      {
+        colId: "name",
+        headerName: t("buyer:list.columns.dsp"),
+        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: "seatId",
+        headerName: t("buyer:list.columns.seatId"),
+        field: "seatId",
+        width: 96,
+        cellRenderer: (params: { value: string }) => (
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-300">{params.value}</span>
+        ),
+      },
+      {
+        colId: "seatName",
+        headerName: t("buyer:list.columns.seatName"),
+        field: "seatName",
+        minWidth: 180,
+        cellRenderer: (params: { value: string }) => (
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-300">{params.value}</span>
+        ),
+      },
+      {
+        colId: "buyerAccountId",
+        headerName: t("buyer:list.columns.buyerAccountId"),
+        field: "buyerAccountId",
+        width: 112,
+        cellRenderer: (params: { value: string }) => (
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-300">{params.value || "-"}</span>
+        ),
+      },
+      {
+        colId: "emailAddress",
+        headerName: t("buyer:list.columns.emailId"),
+        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: "country",
+        headerName: t("buyer:list.columns.country") || "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: "actions",
+        headerName: t("buyer:list.columns.actions"),
+        width: 64,
+        sortable: false,
+        resizable: false,
+        cellRenderer: (params: { data: DspBuyer }) => {
+          const buyer = 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={() => openEditSheet(buyer)}>
+                  <Edit className="h-4 w-4 mr-2" />
+                  {t("buyer:list.actions.editBuyer")}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => handleDeleteClick(buyer)}
+                  className="text-red-600 focus:text-red-600"
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  {t("buyer:list.actions.remove")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        },
+      },
+    ],
+    [t]
+  );
+
+  return (
+    <div id="buyer-list-page" className="h-full w-full flex flex-col">
+      <PageHeader
+        title={t("buyer:list.title")}
+        subtitle={t("buyer:list.subtitle")}
+        actions={
+          <Button onClick={openAddSheet} className="gap-2">
+            <Plus className="h-4 w-4" />
+            {t("buyer:list.addBuyer")}
+          </Button>
+        }
+      />
+
+      <div id="buyer-list-section" className="flex-1 w-full overflow-hidden dark:bg-mw-neutral-900 p-4 sm:p-6 lg:p-8">
+        <Card id="buyer-list-card" className="flex flex-col h-full">
+          <CardHeader id="buyer-list-card-header" className="p-4">
+            <div className="flex items-center justify-between gap-4">
+              <div className="flex-1 max-w-md" />
+              <div id="buyer-list-toolbar" className="flex items-center gap-2">
+                <div id="buyer-list-search-container" className="relative w-80">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Search className="h-4 w-4 text-mw-neutral-400" />
+                  </div>
+                  <Input
+                    id="buyer-list-search-input"
+                    placeholder={t("buyer:list.searchPlaceholder")}
+                    value={searchInput}
+                    onChange={(e) => setSearchInput(e.target.value)}
+                    className="w-80 pl-10 pr-3 py-2"
+                  />
+                </div>
+              </div>
+            </div>
+          </CardHeader>
+
+          <CardContent id="buyer-list-card-content" className="flex-1 overflow-hidden px-4! pb-0!">
+            <AgGridTable
+              rowData={buyers}
+              columnDefs={columnDefs}
+              getRowId={(data) => String(data.id)}
+              loading={isLoading}
+              emptyMessage={t("buyer:list.noResults")}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Add / Edit Sheet */}
+      <Sheet open={sheetOpen} onOpenChange={(open) => { if (!open) closeSheet(); }}>
+        <SheetContent side="right" size="md" className="flex flex-col p-0">
+          <SheetHeader className="px-6 py-5 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="h-9 w-9 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
+                  <Users className="h-5 w-5 text-blue-500" />
+                </div>
+                <div>
+                  <SheetTitle className="text-base font-semibold text-mw-neutral-900 dark:text-white">
+                    {isEditMode ? t("buyer:form.editTitle") : t("buyer:form.addTitle")}
+                  </SheetTitle>
+                  <SheetDescription className="text-sm text-mw-neutral-500">
+                    {t("buyer:form.subtitle")}
+                  </SheetDescription>
+                </div>
+              </div>
+              <Button variant="ghost" size="sm" isIconOnly onClick={closeSheet}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </SheetHeader>
+
+          {/* Scrollable form body */}
+          <div className="flex-1 overflow-y-auto px-6 py-6">
+            {isEditMode && isFetchingBuyer ? (
+              <div className="flex items-center justify-center h-40">
+                <p className="text-sm text-mw-neutral-500">Loading...</p>
+              </div>
+            ) : (
+              <form id="buyer-sheet-form" onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+                {/* DSP */}
+                <div className="space-y-2">
+                  <FormLabel required>{t("buyer:form.fields.dsp")}</FormLabel>
+                  <SelectRoot
+                    value={watch("dspId") || ""}
+                    onValueChange={(value) => {
+                      const dspOption = dspDropdownList.find((o) => o.id === value);
+                      if (dspOption) {
+                        setValue("name", dspOption.name);
+                        setValue("dspId", dspOption.id);
+                      }
+                    }}
+                  >
+                    <SelectTrigger className={errors.name ? "border-red-500" : ""}>
+                      <SelectValue
+                        placeholder={
+                          isDspDropdownLoading ? "Loading..." : t("buyer:form.fields.selectDsp")
+                        }
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {dspDropdownList.map((item) => (
+                        <SelectItem key={item.id} value={item.id}>
+                          {item.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.name && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.name.message)}</p>
+                  )}
+                </div>
+
+                {/* Seat ID */}
+                <div className="space-y-2">
+                  <FormLabel required>{t("buyer:form.fields.seatId")}</FormLabel>
+                  <Input
+                    placeholder={t("buyer:form.fields.enterSeatId")}
+                    {...register("seatId")}
+                    className={errors.seatId ? "border-red-500" : ""}
+                  />
+                  {errors.seatId && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.seatId.message)}</p>
+                  )}
+                </div>
+
+                {/* Seat Name */}
+                <div className="space-y-2">
+                  <FormLabel required>{t("buyer:form.fields.seatName")}</FormLabel>
+                  <Input
+                    placeholder={t("buyer:form.fields.enterSeatName")}
+                    {...register("seatName")}
+                    className={errors.seatName ? "border-red-500" : ""}
+                  />
+                  {errors.seatName && (
+                    <p className="text-sm text-red-500">
+                      {getErrorTranslation(t, errors.seatName.message)}
+                    </p>
+                  )}
+                </div>
+
+                {/* Buyer Account ID */}
+                <div className="space-y-2">
+                  <FormLabel required>{t("buyer:form.fields.buyerAccountId")}</FormLabel>
+                  <Input
+                    placeholder={t("buyer:form.fields.enterBuyerAccountId")}
+                    {...register("buyerAccountId")}
+                    className={errors.buyerAccountId ? "border-red-500" : ""}
+                  />
+                  {errors.buyerAccountId && (
+                    <p className="text-sm text-red-500">
+                      {getErrorTranslation(t, errors.buyerAccountId.message)}
+                    </p>
+                  )}
+                </div>
+
+                {/* Email */}
+                <div className="space-y-2">
+                  <FormLabel required>{t("buyer:form.fields.emailId")}</FormLabel>
+                  <Input
+                    placeholder={t("buyer:form.fields.enterEmailId")}
+                    type="email"
+                    {...register("emailAddress")}
+                    className={errors.emailAddress ? "border-red-500" : ""}
+                  />
+                  {errors.emailAddress && (
+                    <p className="text-sm text-red-500">
+                      {getErrorTranslation(t, errors.emailAddress.message)}
+                    </p>
+                  )}
+                </div>
+
+                {/* Country */}
+                <div className="space-y-2">
+                  <FormLabel required>{t("buyer:form.fields.country") || "Country"}</FormLabel>
+                  <SelectRoot
+                    value={watch("country")}
+                    onValueChange={(value) => setValue("country", value)}
+                  >
+                    <SelectTrigger className={errors.country ? "border-red-500" : ""}>
+                      <SelectValue
+                        placeholder={t("buyer:form.fields.selectCountry") || "Select Country"}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {COUNTRIES.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.country && (
+                    <p className="text-sm text-red-500">
+                      {getErrorTranslation(t, errors.country.message)}
+                    </p>
+                  )}
+                </div>
+              </form>
+            )}
+          </div>
+
+          <SheetFooter className="px-6 py-4 border-t border-mw-neutral-200 dark:border-mw-neutral-700 flex gap-3">
+            <Button variant="outline" onClick={closeSheet} className="flex-1">
+              {t("buyer:form.cancel")}
+            </Button>
+            <Button
+              type="submit"
+              form="buyer-sheet-form"
+              disabled={isSubmitting || (isEditMode && isFetchingBuyer)}
+              className="flex-1 bg-mw-primary-500 hover:bg-mw-primary-600 text-white"
+            >
+              {isSubmitting
+                ? t("common:saving") || "Saving..."
+                : t("buyer:form.saveBuyer")}
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("buyer:list.deleteConfirm.title")}</DialogTitle>
+            <DialogDescription>{t("buyer:list.deleteConfirm.message")}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setDeleteDialogOpen(false); setBuyerToDelete(null); }}>
+              {t("buyer:list.deleteConfirm.cancel")}
+            </Button>
+            <Button variant="destructive" onClick={handleConfirmDelete} disabled={isDeleting}>
+              {t("buyer:list.deleteConfirm.delete")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}