feat(admin): add import and export users to admin panel (#10810)

packages/frontend/admin/src/modules/accounts/components/columns.tsx

@@ -17,6 +17,8 @@ import {
 } from 'lucide-react';
 import type { ReactNode } from 'react';
 
+import { Checkbox } from '../../../components/ui/checkbox';
+import { DataTableColumnHeader } from './data-table-column-header';
 import { DataTableRowActions } from './data-table-row-actions';
 
 const StatusItem = ({
@@ -54,9 +56,36 @@ const StatusItem = ({
 
 export const columns: ColumnDef<UserType>[] = [
   {
-    accessorKey: 'info',
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-[2px]"
+      />
+    ),
     cell: ({ row }) => (
-      <div className="flex gap-3 items-center max-w-[50vw] overflow-hidden">
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'info',
+    header: ({ column }) => (
+      <DataTableColumnHeader className="text-xs" column={column} title="Name" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex gap-4 items-center max-w-[50vw] overflow-hidden">
         <Avatar className="w-10 h-10">
           <AvatarImage src={row.original.avatarUrl ?? undefined} />
           <AvatarFallback>
@@ -102,6 +131,13 @@ export const columns: ColumnDef<UserType>[] = [
   },
   {
     accessorKey: 'property',
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        className="text-xs max-md:hidden"
+        column={column}
+        title="UUID"
+      />
+    ),
     cell: ({ row: { original: user } }) => (
       <div className="flex items-center gap-2">
         <div className="flex flex-col gap-2 text-xs max-md:hidden">
@@ -124,8 +160,18 @@ export const columns: ColumnDef<UserType>[] = [
             />
           </div>
         </div>
-        <DataTableRowActions user={user} />
       </div>
     ),
   },
+  {
+    id: 'actions',
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        className="text-xs"
+        column={column}
+        title="Actions"
+      />
+    ),
+    cell: ({ row: { original: user } }) => <DataTableRowActions user={user} />,
+  },
 ];