chore: improve the ui

apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx

@@ -18,6 +18,7 @@ interface User {
   email: string;
   roles: Role[];
   Subscription: Subscription[];
+  Document: Document[];
 }
 
 interface Subscription {
@@ -36,10 +37,13 @@ type UsersDataTableProps = {
   totalPages: number;
 };
 
+type Document = {
+  id: number;
+};
+
 export const UsersDataTable = ({ users, perPage, page, totalPages }: UsersDataTableProps) => {
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
-  console.log(users);
 
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
@@ -75,9 +79,9 @@ export const UsersDataTable = ({ users, perPage, page, totalPages }: UsersDataTa
             cell: ({ row }) => {
               return (
                 <>
-                  {row.original.roles.map((role: string, idx: number) => {
+                  {row.original.roles.map((role: string, i: number) => {
                     return (
-                      <span key={idx}>
+                      <span key={i}>
                         {role} {}
                       </span>
                     );
@@ -87,15 +91,32 @@ export const UsersDataTable = ({ users, perPage, page, totalPages }: UsersDataTa
             },
           },
           {
-            header: 'Subscription status',
+            header: 'Subscription',
             accessorKey: 'subscription',
+            cell: ({ row }) => {
+              if (row.original.Subscription && row.original.Subscription.length > 0) {
+                return (
+                  <>
+                    {row.original.Subscription.map((subscription: Subscription, i: number) => {
+                      return <span key={i}>{subscription.status}</span>;
+                    })}
+                  </>
+                );
+              } else {
+                return <span>NONE</span>;
+              }
+            },
+          },
+          {
+            header: 'Documents',
+            accessorKey: 'documents',
             cell: ({ row }) => {
               return (
-                <>
-                  {row.original.Subscription.map((subscription: Subscription, idx: number) => {
-                    return <span key={idx}>{subscription.status}</span>;
-                  })}
-                </>
+                <div>
+                  <Link href={`/admin/users/${row.original.id}/documents`}>
+                    {row.original.Document.length}
+                  </Link>
+                </div>
               );
             },
           },

packages/lib/server-only/admin/update-user.ts

@@ -0,0 +1,30 @@
+import { prisma } from '@documenso/prisma';
+import { Role } from '@documenso/prisma/client';
+
+export type UpdateUserOptions = {
+  userId: number;
+  name: string;
+  email: string;
+  roles: Role[];
+};
+
+export const updateUser = async ({ userId, name, email, roles }: UpdateUserOptions) => {
+  console.log('wtf');
+  await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
+  const updatedUser = await prisma.user.update({
+    where: {
+      id: userId,
+    },
+    data: {
+      name,
+      email,
+      roles,
+    },
+  });
+  return updatedUser;
+};

packages/lib/server-only/user/get-all-users.ts

@@ -23,6 +23,11 @@ export const findUsers = async ({ page = 1, perPage = 10 }: getAllUsersProps) =>
             periodEnd: true,
           },
         },
+        Document: {
+          select: {
+            id: true,
+          },
+        },
       },
       skip: Math.max(page - 1, 0) * perPage,
       take: perPage,

packages/ui/primitives/combobox.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { Role } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@documenso/ui/primitives/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+type ComboboxProps = {
+  listValues: string[];
+  onChange: (values: string[]) => void;
+};
+
+const Combobox = ({ listValues, onChange }: ComboboxProps) => {
+  const [open, setOpen] = React.useState(false);
+  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
+  const dbRoles = Object.values(Role);
+
+  React.useEffect(() => {
+    setSelectedValues(listValues);
+  }, [listValues]);
+
+  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
+
+  const handleSelect = (currentValue: string) => {
+    let newSelectedValues;
+    if (selectedValues.includes(currentValue)) {
+      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
+    } else {
+      newSelectedValues = [...selectedValues, currentValue];
+    }
+
+    setSelectedValues(newSelectedValues);
+    onChange(newSelectedValues);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-[200px] justify-between"
+          >
+            {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0">
+          <Command>
+            <CommandInput placeholder={selectedValues.join(', ')} />
+            <CommandEmpty>No value found.</CommandEmpty>
+            <CommandGroup>
+              {allRoles.map((value: string, i: number) => (
+                <CommandItem key={i} onSelect={() => handleSelect(value)}>
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
+                    )}
+                  />
+                  {value}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+};
+
+export { Combobox };