Feat: Admin UI whitelist management and role management (#10910)

### What problem does this PR solve? Add whitelist management and role management in Admin UI ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2026-01-31 23:55:06 +08:00 · 2025-11-03 09:52:23 +08:00
parent 685311814f
commit 7ec587fa9e
20 changed files with 1037 additions and 1004 deletions
--- a/web/src/pages/admin/whitelist.tsx
+++ b/web/src/pages/admin/whitelist.tsx
@ -1,3 +1,27 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as XLSX from 'xlsx';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import {
+  LucideDownload,
+  LucidePlus,
+  LucideSearch,
+  LucideTrash2,
+  LucideUpload,
+  LucideUserPen,
+} from 'lucide-react';
+
 import { TableEmpty } from '@/components/table-skeleton';
 import { Button } from '@/components/ui/button';
 import {
@ -27,45 +51,27 @@ import {
  TableHeader,
  TableRow,
 } from '@/components/ui/table';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+
 import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  LucideDownload,
-  LucidePlus,
-  LucideSearch,
-  LucideTrash2,
-  LucideUpload,
-  LucideUserPen,
-} from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+  createWhitelistEntry,
+  deleteWhitelistEntry,
+  importWhitelistFromExcel,
+  listWhitelist,
+  updateWhitelistEntry,
+  type AdminService,
+} from '@/services/admin-service';
+
+import { EMPTY_DATA, createFuzzySearchFn, getSortIcon } from './utils';
+
 import useCreateEmailForm from './forms/email-form';
-import useImportExcelForm from './forms/import-excel-form';
-import { EMPTY_DATA, createFuzzySearchFn } from './utils';
+import useImportExcelForm, {
+  ImportExcelFormData,
+} from './forms/import-excel-form';

-// #region FAKE DATA
-function _pickRandom<T extends unknown>(arr: T[]): T | void {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
-
-const PSEUDO_TABLE_ITEMS = Array.from({ length: 20 }, () => ({
-  id: Math.random().toString(36).slice(2, 8),
-  email: `${Math.random().toString(36).slice(2, 6)}@example.com`,
-  created_by: _pickRandom(['Alice', 'Bob', 'Carol', 'Dave']) || 'System',
-  created_at: Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 30),
-}));
 // #endregion

-const columnHelper = createColumnHelper<(typeof PSEUDO_TABLE_ITEMS)[0]>();
-const globalFilterFn = createFuzzySearchFn<(typeof PSEUDO_TABLE_ITEMS)[0]>([
+const columnHelper = createColumnHelper<AdminService.ListWhitelistItem>();
+const globalFilterFn = createFuzzySearchFn<AdminService.ListWhitelistItem>([
  'email',
 ]);

@ -74,104 +80,114 @@ function AdminWhitelist() {
  const queryClient = useQueryClient();

  const createEmailForm = useCreateEmailForm();
+  const editEmailForm = useCreateEmailForm();
  const importExcelForm = useImportExcelForm();

-  const [emailToMakeAction, setEmailToMakeAction] = useState<string | null>(
-    null,
-  );
+  const [itemToMakeAction, setItemToMakeAction] =
+    useState<AdminService.ListWhitelistItem | null>(null);
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [editModalOpen, setEditModalOpen] = useState(false);

  const [importModalOpen, setImportModalOpen] = useState(false);

+  const { data: whitelist } = useQuery({
+    queryKey: ['admin/listWhitelist'],
+    queryFn: async () => (await listWhitelist())?.data?.data?.white_list,
+    retry: false,
+  });
+
  // Reset form when editing a different email
  useEffect(() => {
-    if (emailToMakeAction && editModalOpen) {
-      createEmailForm.form.setValue('email', emailToMakeAction);
+    if (itemToMakeAction && editModalOpen) {
+      editEmailForm.form.setValue('email', itemToMakeAction.email);
    }
-  }, [emailToMakeAction, editModalOpen, createEmailForm.form]);
+  }, [itemToMakeAction, editModalOpen, editEmailForm.form]);

-  const { isPending: isCreating, mutateAsync: createEmail } = useMutation({
-    mutationFn: async (data: { email: string }) => {
-      /* create email API call */
-    },
+  const createWhitelistEntryMutation = useMutation({
+    mutationFn: (data: { email: string }) => createWhitelistEntry(data.email),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin/whitelist'] });
+      queryClient.invalidateQueries({ queryKey: ['admin/listWhitelist'] });
      setCreateModalOpen(false);
-      setEmailToMakeAction(null);
      createEmailForm.form.reset();
    },
    onError: (error) => {
      console.error('Error creating email:', error);
    },
+    retry: false,
  });

-  const { isPending: isEditing, mutateAsync: updateEmail } = useMutation({
-    mutationFn: async (data: { email: string }) => {
-      /* update email API call */
-    },
+  const updateWhitelistEntryMutation = useMutation({
+    mutationFn: (data: { id: number; email: string }) =>
+      updateWhitelistEntry(data.id, data.email),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin/whitelist'] });
+      queryClient.invalidateQueries({ queryKey: ['admin/listWhitelist'] });
      setEditModalOpen(false);
-      setEmailToMakeAction(null);
-      createEmailForm.form.reset();
+      setItemToMakeAction(null);
+      editEmailForm.form.reset();
    },
  });

-  const { isPending: isDeleting, mutateAsync: deleteEmail } = useMutation({
-    mutationFn: async (data: { email: string }) => {
-      /* delete email API call */
-    },
+  const deleteWhitelistEntryMutation = useMutation({
+    mutationFn: (data: { email: string }) => deleteWhitelistEntry(data.email),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin/whitelist'] });
+      queryClient.invalidateQueries({ queryKey: ['admin/listWhitelist'] });
      setDeleteModalOpen(false);
-      setEmailToMakeAction(null);
+      setItemToMakeAction(null);
    },
    onError: (error) => {
      console.error('Error deleting email:', error);
    },
  });

-  const { isPending: isImporting, mutateAsync: importExcel } = useMutation({
-    mutationFn: async (data: {
-      file: FileList;
-      overwriteExisting: boolean;
-    }) => {
-      /* import Excel API call */
-      console.log(
-        'Importing Excel file:',
-        data.file[0]?.name,
-        'Overwrite:',
-        data.overwriteExisting,
-      );
-    },
+  const importExcelMutation = useMutation({
+    mutationFn: (data: ImportExcelFormData) =>
+      importWhitelistFromExcel(data.file),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin/whitelist'] });
+      queryClient.invalidateQueries({ queryKey: ['admin/listWhitelist'] });
      setImportModalOpen(false);
      importExcelForm.form.reset();
    },
    onError: (error) => {
      console.error('Error importing Excel:', error);
    },
+    retry: false,
  });

+  const handleExportExcel = () => {
+    const columnData = (whitelist ?? EMPTY_DATA).map((item) => ({
+      email: item.email,
+    }));
+
+    const now = new Date();
+    const YYYY = String(now.getFullYear()).padStart(4, '0');
+    const MM = String(now.getMonth()).padStart(2, '0');
+    const dd = String(now.getDate()).padStart(2, '0');
+    const HH = String(now.getHours()).padStart(2, '0');
+    const mm = String(now.getMinutes()).padStart(2, '0');
+    const ss = String(now.getSeconds()).padStart(2, '0');
+
+    const worksheet = XLSX.utils.json_to_sheet(columnData);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+    XLSX.writeFile(workbook, `whitelist_${YYYY}${MM}${dd}${HH}${mm}${ss}.xlsx`);
+  };
+
  const columnDefs = useMemo(
    () => [
      columnHelper.accessor('email', {
-        header: 'Email',
+        header: t('admin.email'),
+        enableSorting: false,
      }),
-      columnHelper.accessor('created_by', {
-        header: 'Created by',
+      columnHelper.accessor('create_date', {
+        header: t('admin.createDate'),
      }),
-      columnHelper.accessor('created_at', {
-        header: 'Created date',
-        cell: ({ row }) =>
-          new Date(row.getValue('created_at') as number).toLocaleString(),
+      columnHelper.accessor('update_date', {
+        header: t('admin.updateDate'),
      }),
      columnHelper.display({
        id: 'actions',
-        header: 'Actions',
+        header: t('admin.actions'),
        cell: ({ row }) => (
          <div className="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-100">
            <Button
@ -179,7 +195,7 @@ function AdminWhitelist() {
              size="icon"
              className="border-0 text-text-secondary"
              onClick={() => {
-                setEmailToMakeAction(row.original.email);
+                setItemToMakeAction(row.original);
                setEditModalOpen(true);
              }}
            >
@ -190,7 +206,7 @@ function AdminWhitelist() {
              size="icon"
              className="border-0 text-text-secondary"
              onClick={() => {
-                setEmailToMakeAction(row.original.email);
+                setItemToMakeAction(row.original);
                setDeleteModalOpen(true);
              }}
            >
@ -200,11 +216,11 @@ function AdminWhitelist() {
        ),
      }),
    ],
-    [],
+    [t],
  );

  const table = useReactTable({
-    data: PSEUDO_TABLE_ITEMS ?? EMPTY_DATA,
+    data: whitelist ?? EMPTY_DATA,
    columns: columnDefs,

    globalFilterFn,
@ -217,7 +233,7 @@ function AdminWhitelist() {

  return (
    <>
-      <Card className="h-full border border-border-button bg-transparent rounded-xl overflow-x-hidden overflow-y-auto">
+      <Card className="!shadow-none h-full border border-border-button bg-transparent rounded-xl overflow-x-hidden overflow-y-auto">
        <ScrollArea className="size-full">
          <CardHeader className="space-y-0 flex flex-row justify-between items-center">
            <CardTitle>{t('admin.whitelistManagement')}</CardTitle>
@ -236,6 +252,7 @@ function AdminWhitelist() {
              <Button
                variant="outline"
                className="h-10 px-4 dark:bg-bg-input dark:border-border-button text-text-secondary"
+                onClick={handleExportExcel}
              >
                <LucideUpload />
                {t('admin.exportAsExcel')}
@ -264,8 +281,8 @@ function AdminWhitelist() {
            <Table>
              <colgroup>
                <col />
-                <col className="w-[20%]" />
-                <col className="w-[30%]" />
+                <col className="w-[25%]" />
+                <col className="w-[25%]" />
                <col className="w-[12rem]" />
              </colgroup>

@ -274,12 +291,23 @@ function AdminWhitelist() {
                  <TableRow key={headerGroup.id}>
                    {headerGroup.headers.map((header) => (
                      <TableHead key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
+                        {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                          <Button
+                            variant="ghost"
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(
                              header.column.columnDef.header,
                              header.getContext(),
                            )}
+                            {getSortIcon(header.column.getIsSorted())}
+                          </Button>
+                        ) : (
+                          flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )
+                        )}
                      </TableHead>
                    ))}
                  </TableRow>
@ -328,7 +356,7 @@ function AdminWhitelist() {
          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!deleteModalOpen) {
-              setEmailToMakeAction(null);
+              setItemToMakeAction(null);
            }
          }}
        >
@ -341,7 +369,7 @@ function AdminWhitelist() {
              {t('admin.deleteWhitelistEmailConfirmation')}

              <div className="rounded-lg mt-6 p-4 border border-border-button">
-                {emailToMakeAction}
+                {itemToMakeAction?.email}
              </div>
            </DialogDescription>
          </section>
@ -351,7 +379,7 @@ function AdminWhitelist() {
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
              onClick={() => setDeleteModalOpen(false)}
-              disabled={isDeleting}
+              disabled={deleteWhitelistEntryMutation.isPending}
            >
              {t('admin.cancel')}
            </Button>
@ -360,10 +388,14 @@ function AdminWhitelist() {
              className="px-4 h-10"
              variant="destructive"
              onClick={() => {
-                deleteEmail({ email: emailToMakeAction! });
+                if (itemToMakeAction) {
+                  deleteWhitelistEntryMutation.mutate({
+                    email: itemToMakeAction?.email,
+                  });
+                }
              }}
-              disabled={isDeleting}
-              loading={isDeleting}
+              disabled={deleteWhitelistEntryMutation.isPending}
+              loading={deleteWhitelistEntryMutation.isPending}
            >
              {t('admin.delete')}
            </LoadingButton>
@ -372,14 +404,15 @@ function AdminWhitelist() {
      </Dialog>

      {/* Create Email Modal */}
-      <Dialog
-        open={createModalOpen}
-        onOpenChange={() => {
-          setCreateModalOpen(false);
-          createEmailForm.form.reset();
-        }}
-      >
-        <DialogContent className="p-0 border-border-button">
+      <Dialog open={createModalOpen} onOpenChange={setCreateModalOpen}>
+        <DialogContent
+          className="p-0 border-border-button"
+          onAnimationEnd={() => {
+            if (!createModalOpen) {
+              createEmailForm.form.reset();
+            }
+          }}
+        >
          <DialogHeader className="p-6 border-b border-border-button">
            <DialogTitle>{t('admin.createEmail')}</DialogTitle>
          </DialogHeader>
@ -387,7 +420,7 @@ function AdminWhitelist() {
          <section className="px-12 py-4 text-text-secondary">
            <createEmailForm.FormComponent
              id={createEmailForm.id}
-              onSubmit={createEmail}
+              onSubmit={createWhitelistEntryMutation.mutate}
            />
          </section>

@ -395,11 +428,8 @@ function AdminWhitelist() {
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
-              onClick={() => {
-                setCreateModalOpen(false);
-                createEmailForm.form.reset();
-              }}
-              disabled={isCreating}
+              onClick={() => setCreateModalOpen(false)}
+              disabled={createWhitelistEntryMutation.isPending}
            >
              {t('admin.cancel')}
            </Button>
@ -409,8 +439,8 @@ function AdminWhitelist() {
              type="submit"
              className="px-4 h-10"
              variant="default"
-              disabled={isCreating}
-              loading={isCreating}
+              disabled={createWhitelistEntryMutation.isPending}
+              loading={createWhitelistEntryMutation.isPending}
            >
              {t('admin.confirm')}
            </LoadingButton>
@ -419,20 +449,13 @@ function AdminWhitelist() {
      </Dialog>

      {/* Edit Email Modal */}
-      <Dialog
-        open={editModalOpen}
-        onOpenChange={() => {
-          setEditModalOpen(false);
-          setEmailToMakeAction(null);
-          createEmailForm.form.reset();
-        }}
-      >
+      <Dialog open={editModalOpen} onOpenChange={setEditModalOpen}>
        <DialogContent
          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!editModalOpen) {
-              setEmailToMakeAction(null);
-              createEmailForm.form.reset();
+              setItemToMakeAction(null);
+              editEmailForm.form.reset();
            }
          }}
        >
@ -441,9 +464,16 @@ function AdminWhitelist() {
          </DialogHeader>

          <section className="px-12 py-4 text-text-secondary">
-            <createEmailForm.FormComponent
-              id={createEmailForm.id}
-              onSubmit={updateEmail}
+            <editEmailForm.FormComponent
+              id={editEmailForm.id}
+              onSubmit={(value) => {
+                if (itemToMakeAction) {
+                  updateWhitelistEntryMutation.mutate({
+                    id: itemToMakeAction.id,
+                    email: value.email,
+                  });
+                }
+              }}
            />
          </section>

@ -451,23 +481,19 @@ function AdminWhitelist() {
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
-              onClick={() => {
-                setEditModalOpen(false);
-                setEmailToMakeAction(null);
-                createEmailForm.form.reset();
-              }}
-              disabled={isEditing}
+              onClick={() => setEditModalOpen(false)}
+              disabled={updateWhitelistEntryMutation.isPending}
            >
              {t('admin.cancel')}
            </Button>

            <LoadingButton
-              form={createEmailForm.id}
+              form={editEmailForm.id}
              type="submit"
              className="px-4 h-10"
              variant="default"
-              disabled={isEditing}
-              loading={isEditing}
+              disabled={updateWhitelistEntryMutation.isPending}
+              loading={updateWhitelistEntryMutation.isPending}
            >
              {t('admin.confirm')}
            </LoadingButton>
@ -477,7 +503,14 @@ function AdminWhitelist() {

      {/* Import Excel Modal */}
      <Dialog open={importModalOpen} onOpenChange={setImportModalOpen}>
-        <DialogContent className="p-0 border-border-button">
+        <DialogContent
+          className="p-0 border-border-button"
+          onAnimationEnd={() => {
+            if (!importModalOpen) {
+              importExcelForm.form.reset();
+            }
+          }}
+        >
          <DialogHeader className="p-6 border-b border-border-button">
            <DialogTitle>{t('admin.importWhitelist')}</DialogTitle>
          </DialogHeader>
@ -485,7 +518,7 @@ function AdminWhitelist() {
          <section className="px-12 py-4 text-text-secondary">
            <importExcelForm.FormComponent
              id={importExcelForm.id}
-              onSubmit={importExcel}
+              onSubmit={importExcelMutation.mutate}
            />
          </section>

@ -493,11 +526,8 @@ function AdminWhitelist() {
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
-              onClick={() => {
-                setImportModalOpen(false);
-                importExcelForm.form.reset();
-              }}
-              disabled={isImporting}
+              onClick={() => setImportModalOpen(false)}
+              disabled={importExcelMutation.isPending}
            >
              {t('admin.cancel')}
            </Button>
@ -507,8 +537,8 @@ function AdminWhitelist() {
              type="submit"
              className="px-4 h-10"
              variant="default"
-              disabled={isImporting}
-              loading={isImporting}
+              disabled={importExcelMutation.isPending}
+              loading={importExcelMutation.isPending}
            >
              {t('admin.import')}
            </LoadingButton>