permissions table complete

package.json

@@ -14,8 +14,11 @@
     "@prisma/client": "5.3.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",

src/app/(private)/users/TableWrapper.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { getUsers } from './actions';
+import { columns } from './columns';
+import { DataTable } from '@/components/table/DataTable';
+
+interface Props {
+  data: Awaited<ReturnType<typeof getUsers>>;
+  perPage: number;
+  currentPage: number;
+}
+
+export default function Wrapper({ data, currentPage, perPage }: Props) {
+  function handleSelectRows(selectedIndeces: Record<number, boolean>) {
+    Object.keys(selectedIndeces).forEach((index) => {
+      const user = data.users[Number(index)];
+      user; // do something with user
+    });
+  }
+
+  return (
+    <div className='px-2'>
+      <DataTable
+        onSelectRows={handleSelectRows}
+        pathName='/users'
+        columns={columns}
+        data={data.users}
+        count={data.count}
+        perPage={perPage}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}

src/app/(private)/users/actions.ts

@@ -12,9 +12,11 @@ export async function getUsers(args: {
   date_to?: string;
 }) {
   const { page, per_page, username, email, status } = args;
+  const table = prisma.user;
 
-  const getUsersData = async () => {
-    return await prisma.user.findMany({
+  const getCount = () => table.count();
+  const getData = async () => {
+    return await table.findMany({
       skip: page * per_page - per_page,
       take: per_page,
       select: {
@@ -41,10 +43,7 @@ export async function getUsers(args: {
     });
   };
 
-  const [users, count] = await Promise.all([
-    getUsersData(),
-    await prisma.user.count(),
-  ]);
+  const [users, count] = await Promise.all([getData(), getCount()]);
 
   return { users, count };
 }

src/app/(private)/users/columns.tsx

@@ -3,13 +3,44 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { getUsers } from './actions';
 import { formatDate } from '@/utils/dates';
+import { ArrowUpDown } from 'lucide-react';
+import { Checkbox } from '@/components/ui/checkbox';
 
 type User = Awaited<ReturnType<typeof getUsers>>['users'][number];
 
 export const columns: ColumnDef<User>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label='Select all'
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label='Select row'
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
   {
     accessorKey: 'username',
-    header: 'Username',
+    header: ({ column }) => {
+      return (
+        <button
+          className='flex items-center'
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Username
+          <ArrowUpDown className='ml-2 h-4 w-4' />
+        </button>
+      );
+    },
   },
   {
     accessorKey: 'email',

src/app/(private)/users/permissions/CreateNewPermissionDialog.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+
+import { Button } from '@/components/ui/button';
+import { Plus } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { NewPermission, newPermissionSchema } from './zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useToast } from '@/components/ui/use-toast';
+import { useRouter } from 'next/navigation';
+import { createNewPermission } from './actions';
+
+export default function CreateNewPermissionDialog() {
+  const [loading, setLoading] = useState<true | undefined>();
+  const [open, setOpen] = useState(false);
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const {
+    reset,
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<NewPermission>({ resolver: zodResolver(newPermissionSchema) });
+
+  const onSubmit: SubmitHandler<NewPermission> = async (data) => {
+    setLoading(true);
+    const res = await createNewPermission(data.name);
+    setLoading(undefined);
+
+    if (res?.error) {
+      toast({
+        title: res.error,
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setOpen(false);
+    router.refresh();
+    reset();
+    toast({
+      title: 'Permission created successfully',
+    });
+  };
+
+  return (
+    <Dialog open={loading || open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus className='mr-2' size={16} />
+          New
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className='sm:max-w-[425px]' preventClose={loading}>
+        <form onSubmit={handleSubmit(onSubmit)} onReset={() => reset()}>
+          <DialogHeader>
+            <DialogTitle>Create new permission</DialogTitle>
+          </DialogHeader>
+
+          <div className='my-4'>
+            <Input
+              disabled={loading}
+              {...register('name')}
+              label='Permission name'
+              error={errors.name?.message}
+              placeholder='e.g. permissions.read'
+            />
+          </div>
+
+          <DialogFooter>
+            <Button type='reset' variant={'outline'}>
+              Reset
+            </Button>
+            <Button loading={loading}>Save</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/(private)/users/permissions/TableWrapper.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { getPermissions } from './actions';
+import { DataTable } from '@/components/table/DataTable';
+
+import CreateNewPermissionDialog from './CreateNewPermissionDialog';
+import { usePermissionTableColumns } from './columns';
+
+type Props = {
+  data: Awaited<ReturnType<typeof getPermissions>>;
+  perPage: number;
+  currentPage: number;
+};
+
+export default function TableWrapper({ currentPage, data, perPage }: Props) {
+  const columns = usePermissionTableColumns();
+
+  return (
+    <div className='px-2'>
+      <DataTable
+        pathName='/users/permissions'
+        columns={columns}
+        data={data.permissions}
+        count={data.count}
+        perPage={perPage}
+        currentPage={currentPage}
+        extraRightTools={<CreateNewPermissionDialog />}
+      />
+    </div>
+  );
+}

src/app/(private)/users/permissions/UpdatePermissionComponent.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { updatePermission } from './actions';
+
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { UpdatePermission, updatePermissionSchema } from './zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
+import { useToast } from '@/components/ui/use-toast';
+import useOnKeypress from '@/hooks/useOnKeypress';
+
+type Props = {
+  name: string;
+  id: number;
+  onSuccess: () => void;
+  onCancel: () => void;
+};
+
+export default function UpdatePermissionComponent({
+  id,
+  name,
+  onSuccess,
+  onCancel,
+}: Props) {
+  useOnKeypress('Escape', onCancel);
+  const router = useRouter();
+  const { toast } = useToast();
+  const [loading, setLoading] = useState(false);
+
+  const {
+    formState: { errors, isDirty },
+    register,
+    reset,
+    handleSubmit,
+  } = useForm<UpdatePermission>({
+    resolver: zodResolver(updatePermissionSchema),
+  });
+
+  const onSubmit: SubmitHandler<UpdatePermission> = async (data) => {
+    setLoading(true);
+    const res = await updatePermission(id, data.name);
+    setLoading(false);
+
+    if (res?.error) {
+      toast({
+        title: res.error,
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    reset();
+    onSuccess();
+    router.refresh();
+  };
+
+  return (
+    <form className='flex items-center gap-2' onSubmit={handleSubmit(onSubmit)}>
+      <Input
+        autoFocus
+        type='text'
+        className='h-8'
+        defaultValue={name}
+        {...register('name')}
+        error={errors.name?.message}
+        placeholder='e.g. resource.action'
+      />
+      <Button
+        size={'sm'}
+        type='button'
+        onClick={onCancel}
+        variant={'outline'}
+        disabled={loading}
+      >
+        Cancel
+      </Button>
+      <Button size={'sm'} type='submit' loading={loading} disabled={!isDirty}>
+        Save
+      </Button>
+    </form>
+  );
+}