feat(dashboard): implement bulk selection and deletion for admins and cores

- Added bulk selection functionality in the admins and cores tables.
- Introduced bulk delete actions with confirmation dialogs for selected admins and cores.
- Updated localization files to remove "Active Users" label and adjust translations accordingly.
- Enhanced user interface components to support selection and bulk actions.

Author: x0sina

dashboard/public/statics/locales/en.json

@@ -553,7 +553,6 @@
   "saving": "Saving...",
   "general": "General",
   "core": "Core Configs",
-  "activeUsers": "Active Users",
   "apply": "Apply",
   "cancel": "Cancel",
   "created": "Created",

dashboard/public/statics/locales/fa.json

@@ -441,7 +441,6 @@
     }
   },
   "core": "هسته‌ها",
-  "activeUsers": "کاربران فعال",
   "apply": "تایید",
   "cancel": "لغو",
   "created": "ایجاد شده",
@@ -1972,7 +1971,7 @@
     "reviewAndApplyDesc": "تنظیمات خود را بررسی کنید و عملیات گروهی را اعمال کنید",
     "operationSummary": "خلاصه عملیات",
     "settings": "تنظیمات",
-    "targets": "اهداف",
+    "targets": "هدف",
     "allTargets": "همه کاربران، مدیران و گروه‌ها",
     "warning": "هشدار",
     "applyToAllWarning": "این عملیات به همه کاربران، مدیران و گروه‌های سیستم اعمال خواهد شد.",

dashboard/public/statics/locales/ru.json

@@ -539,7 +539,6 @@
   "saving": "Сохранение...",
   "general": "Общие",
   "core": "Ядра",
-  "activeUsers": "Пользователи",
   "apply": "Применить",
   "cancel": "Отмена",
   "created": "Создано",

dashboard/public/statics/locales/zh.json

@@ -552,7 +552,6 @@
   "saving": "保存中...",
   "general": "常规",
   "core": "核心",
-  "activeUsers": "活跃用户",
   "apply": "应用",
   "cancel": "取消",
   "created": "已创建",

dashboard/src/components/admins/admins-table.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import type { AdminDetails } from '@/service/api'
-import { useActivateAllDisabledUsers, useDisableAllActiveUsers, useGetAdmins, useRemoveAllUsers } from '@/service/api'
+import { useActivateAllDisabledUsers, useBulkDeleteAdmins, useDisableAllActiveUsers, useGetAdmins, useRemoveAllUsers } from '@/service/api'
 import { DataTable } from './data-table'
 import { setupColumns } from './columns'
 import { Filters } from './filters'
@@ -14,6 +14,8 @@ import { toast } from 'sonner'
 import { useAdmin } from '@/hooks/use-admin'
 import { patchAdminInAdminsCache } from '@/utils/adminsCache'
 import { useQueryClient } from '@tanstack/react-query'
+import { BulkActionsBar } from '@/components/users/bulk-actions-bar'
+import { BulkActionAlertDialog } from '@/components/users/bulk-action-alert-dialog'
 
 interface AdminFilters {
   sort?: string
@@ -187,11 +189,15 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
   const [resetUsersUsageDialogOpen, setResetUsersUsageDialogOpen] = useState(false)
   const [bulkUsersStatusDialogOpen, setBulkUsersStatusDialogOpen] = useState(false)
   const [removeAllUsersDialogOpen, setRemoveAllUsersDialogOpen] = useState(false)
+  const [selectedAdminUsernames, setSelectedAdminUsernames] = useState<string[]>([])
+  const [resetSelectionKey, setResetSelectionKey] = useState(0)
+  const [bulkAction, setBulkAction] = useState<'delete' | null>(null)
   const [adminToDelete, setAdminToDelete] = useState<AdminDetails | null>(null)
   const [adminToToggleStatus, setAdminToToggleStatus] = useState<AdminDetails | null>(null)
   const [adminToReset, setAdminToReset] = useState<string | null>(null)
   const [bulkUsersStatusAction, setBulkUsersStatusAction] = useState<{ username: string; actionType: BulkUsersActionType } | null>(null)
   const [adminToRemoveAllUsers, setAdminToRemoveAllUsers] = useState<string | null>(null)
+  const bulkDeleteAdminsMutation = useBulkDeleteAdmins()
 
   const {
     data: adminsResponse,
@@ -277,6 +283,11 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
     setDeleteDialogOpen(true)
   }
 
+  const clearSelection = () => {
+    setResetSelectionKey(prev => prev + 1)
+    setSelectedAdminUsernames([])
+  }
+
   const handleStatusToggleClick = (admin: AdminDetails) => {
     setAdminToToggleStatus(admin)
     setStatusToggleDialogOpen(true)
@@ -329,7 +340,8 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
       toast.success(t('success', { defaultValue: 'Success' }), {
         description: t(actionType === 'disable' ? 'admins.disableAllActiveUsersSuccess' : 'admins.activateAllDisabledUsersSuccess', {
           name: username,
-          defaultValue: actionType === 'disable' ? `All active users under admin "${username}" have been disabled successfully` : `All disabled users under admin "${username}" have been activated successfully`,
+          defaultValue:
+            actionType === 'disable' ? `All active users under admin "${username}" have been disabled successfully` : `All disabled users under admin "${username}" have been activated successfully`,
         }),
       })
       closeBulkUsersStatusDialog()
@@ -431,6 +443,36 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
     }
   }
 
+  const handleBulkDelete = async () => {
+    if (!selectedAdminUsernames.length) return
+
+    try {
+      const response = await bulkDeleteAdminsMutation.mutateAsync({
+        data: {
+          usernames: selectedAdminUsernames,
+        },
+      })
+      toast.success(t('success', { defaultValue: 'Success' }), {
+        description: t('admins.bulkDeleteSuccess', {
+          count: response.count,
+          defaultValue: '{{count}} admins deleted successfully.',
+        }),
+      })
+      clearSelection()
+      setBulkAction(null)
+      queryClient.invalidateQueries({ queryKey: ['/api/admins'] })
+    } catch (error: any) {
+      toast.error(t('error', { defaultValue: 'Error' }), {
+        description:
+          error?.data?.detail ||
+          error?.message ||
+          t('admins.bulkDeleteFailed', {
+            defaultValue: 'Failed to delete selected admins.',
+          }),
+      })
+    }
+  }
+
   const columns = setupColumns({
     t,
     handleSort,
@@ -451,6 +493,7 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
   return (
     <div>
       <Filters filters={filters} onFilterChange={handleFilterChange} handleSort={handleSort} refetch={handleManualRefresh} />
+      <BulkActionsBar selectedCount={selectedAdminUsernames.length} onClear={clearSelection} onDelete={selectedAdminUsernames.length > 0 ? () => setBulkAction('delete') : undefined} />
       <DataTable
         columns={columns}
         data={adminsData || []}
@@ -461,6 +504,8 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
         onDisableAllActiveUsers={handleDisableAllActiveUsersClick}
         onActivateAllDisabledUsers={handleActivateAllDisabledUsersClick}
         onRemoveAllUsers={handleRemoveAllUsersClick}
+        onSelectionChange={setSelectedAdminUsernames}
+        resetSelectionKey={resetSelectionKey}
         currentAdminUsername={currentAdmin?.username}
         setStatusToggleDialogOpen={setStatusToggleDialogOpen}
         isLoading={isCurrentlyLoading && isFirstLoadRef.current}
@@ -504,6 +549,19 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
           onClose={() => setRemoveAllUsersDialogOpen(false)}
         />
       )}
+      <BulkActionAlertDialog
+        open={bulkAction === 'delete'}
+        onOpenChange={open => setBulkAction(open ? 'delete' : null)}
+        title={t('admins.bulkDeleteTitle', { defaultValue: 'Delete Selected Admins' })}
+        description={t('admins.bulkDeletePrompt', {
+          count: selectedAdminUsernames.length,
+          defaultValue: 'Are you sure you want to delete {{count}} selected admins? This action cannot be undone.',
+        })}
+        actionLabel={t('delete')}
+        onConfirm={handleBulkDelete}
+        isPending={bulkDeleteAdminsMutation.isPending}
+        destructive
+      />
     </div>
   )
 }

dashboard/src/components/admins/columns.tsx

@@ -1,10 +1,11 @@
 import { AdminDetails } from '@/service/api'
-import { ColumnDef } from '@tanstack/react-table'
+import { ColumnDef, Row, Table } from '@tanstack/react-table'
 import { ChartPie, ChevronDown, MoreVertical, Pen, Power, PowerOff, RefreshCw, Trash2, User, UserCheck, UserMinus, UserX } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { formatBytes } from '@/utils/formatByte.ts'
 import { AdminStatusBadge } from './admin-status-badge'
+import { Checkbox } from '@/components/ui/checkbox'
 
 interface ColumnSetupProps {
   t: (key: string) => string
@@ -36,7 +37,7 @@ const createSortButton = (
   }
 
   return (
-    <button onClick={handleClick} className="flex w-full items-center gap-1">
+    <button type="button" onClick={handleClick} className="flex w-full items-center gap-1">
       <div className="text-xs">{t(label)}</div>
       {filters.sort && (filters.sort === column || filters.sort === '-' + column) && (
         <ChevronDown size={16} className={`transition-transform duration-300 ${filters.sort === column ? 'rotate-180' : ''} ${filters.sort === '-' + column ? 'rotate-0' : ''} `} />
@@ -58,6 +59,42 @@ export const setupColumns = ({
   onActivateAllDisabledUsers,
   onRemoveAllUsers,
 }: ColumnSetupProps): ColumnDef<AdminDetails>[] => [
+  {
+    id: 'select',
+    header: ({ table }: { table: Table<AdminDetails> }) => (
+      <div className="flex h-5 items-center justify-center">
+        <Checkbox
+          aria-label={t('selectAll')}
+          className="h-3.5 w-3.5 rounded-[3px] border-muted-foreground/40 data-[state=checked]:border-primary"
+          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+          onClick={event => event.stopPropagation()}
+          onPointerDown={event => event.stopPropagation()}
+          onKeyDown={event => event.stopPropagation()}
+        />
+      </div>
+    ),
+    cell: ({ row }: { row: Row<AdminDetails> }) => (
+      <div className="flex h-5 items-center justify-center">
+        {row.getCanSelect() ? (
+          <Checkbox
+            aria-label={t('select')}
+            className="h-3.5 w-3.5 rounded-[3px] border-muted-foreground/40 bg-background data-[state=checked]:border-primary data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground"
+            checked={row.getIsSelected()}
+            onCheckedChange={value => row.toggleSelected(!!value)}
+            onClick={event => event.stopPropagation()}
+            onPointerDown={event => event.stopPropagation()}
+            onKeyDown={event => event.stopPropagation()}
+          />
+        ) : (
+          <div className="h-3.5 w-3.5" />
+        )}
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    size: 40,
+  },
   {
     accessorKey: 'username',
     header: () => createSortButton('username', 'username', t, handleSort, filters),