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)

web/src/pages/admin/forms/import-excel-form.tsx

@@ -1,4 +1,3 @@
-import { Checkbox } from '@/components/ui/checkbox';
 import {
   Form,
   FormControl,
@@ -14,8 +13,8 @@ import { useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
-interface ImportExcelFormData {
-  file: FileList;
+export interface ImportExcelFormData {
+  file: File;
   overwriteExisting: boolean;
 }
 
@@ -43,6 +42,7 @@ export const ImportExcelForm = ({
         <FormField
           control={form.control}
           name="file"
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
           render={({ field: { onChange, value, ...field } }) => (
             <FormItem>
               <FormLabel className="text-sm font-medium">
@@ -56,7 +56,7 @@ export const ImportExcelForm = ({
                   className="mt-2 px-3 h-10 bg-bg-input border-border-button file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-bg-accent file:text-text-primary hover:file:bg-bg-accent/80"
                   onChange={(e) => {
                     const files = e.target.files;
-                    onChange(files);
+                    onChange(files?.[0]);
                   }}
                   {...field}
                 />
@@ -66,27 +66,7 @@ export const ImportExcelForm = ({
           )}
         />
 
-        {/* Overwrite checkbox */}
-        <FormField
-          control={form.control}
-          name="overwriteExisting"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel className="flex items-center gap-2 text-sm font-medium">
-                <FormControl>
-                  <Checkbox
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                </FormControl>
-
-                {t('admin.importOverwriteExistingEmails')}
-              </FormLabel>
-            </FormItem>
-          )}
-        />
-
-        <p className="text-xs text-text-secondary">
+        <p className="text-sm text-text-secondary">
           <Trans
             i18nKey="admin.importFileTips"
             components={{ code: <code /> }}
@@ -105,21 +85,14 @@ function useImportExcelForm() {
   const schema = useMemo(() => {
     return z.object({
       file: z
-        .any()
-        .refine((files) => files && files.length > 0, {
-          message: t('admin.importFileRequired'),
-        })
+        .instanceof(File, { message: t('admin.importFileRequired') })
         .refine(
-          (files) => {
-            if (!files || files.length === 0) return false;
-            const [file] = files;
+          (file) => {
             return (
               file.type ===
                 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-              // || file.type === 'application/vnd.ms-excel'
               file.name.endsWith('.xlsx')
             );
-            // || file.name.endsWith('.xls');
           },
           {
             message: t('admin.invalidExcelFile'),