feat: profile page done

apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader } from 'lucide-react';
 import { Controller, useForm } from 'react-hook-form';
 
@@ -10,10 +11,13 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Combobox } from '@documenso/ui/primitives/combobox';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { FormErrorMessage } from '../../../../../components/form/form-error-message';
+import {
+  TUserFormSchema,
+  ZUserFormSchema,
+} from '../../../../../providers/admin-user-profile-update.types';
 
 export default function UserPage({ params }: { params: { id: number } }) {
   const { toast } = useToast();
@@ -28,7 +32,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
     },
   );
 
-  const roles = result.data?.roles;
+  const user = result.data;
+
+  const roles = user?.roles;
   let rolesArr: string[] = [];
 
   if (roles) {
@@ -42,29 +48,22 @@ export default function UserPage({ params }: { params: { id: number } }) {
     control,
     handleSubmit,
     formState: { errors, isSubmitting },
-  } = useForm();
+  } = useForm<TUserFormSchema>({
-
+    resolver: zodResolver(ZUserFormSchema),
-  const onSubmit = async (data) => {
+    values: {
-    console.log(data);
+      name: user?.name ?? '',
-
+      email: user?.email ?? '',
-    // const submittedRoles = data.roles
+      roles: user?.roles ?? [],
-    //   .split(',')
+    },
-    //   .map((role: string) => role.trim())
+  });
-    //   .map((role: string) => role.toUpperCase());
-
-    // const dbRoles = JSON.stringify(Role);
-
-    // const roleExists = submittedRoles.some((role: string) => dbRoles.includes(role));
-    // console.log('roleExists', roleExists);
-
-    // console.log('db roles', dbRoles);
 
+  const onSubmit = async ({ name, email, roles }: TUserFormSchema) => {
     try {
       await updateUserMutation({
-        id: Number(result.data?.id),
+        id: Number(user?.id),
-        name: data.name,
+        name,
-        email: data.email,
+        email,
-        roles: data.roles,
+        roles,
       });
 
       router.refresh();
@@ -86,20 +85,20 @@ export default function UserPage({ params }: { params: { id: number } }) {
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage {result.data?.name}'s profile</h2>
+      <h2 className="text-4xl font-semibold">Manage {user?.name}'s profile</h2>
       <form className="mt-6 flex w-full flex-col gap-y-4" onSubmit={handleSubmit(onSubmit)}>
         <div>
           <Label htmlFor="name" className="text-muted-foreground">
             Name
           </Label>
-          <Input placeholder={result.data?.name} type="text" {...register('name')} />
+          <Input defaultValue={user?.name ?? ''} type="text" {...register('name')} />
           <FormErrorMessage className="mt-1.5" error={errors.name} />
         </div>
         <div>
           <Label htmlFor="email" className="text-muted-foreground">
             Email
           </Label>
-          <Input placeholder={result.data?.email} {...register('email')} />
+          <Input defaultValue={user?.email} type="email" {...register('email')} />
           <FormErrorMessage className="mt-1.5" error={errors.email} />
         </div>
         <div className="flex flex-col gap-2">
@@ -115,26 +114,6 @@ export default function UserPage({ params }: { params: { id: number } }) {
           />
           <FormErrorMessage className="mt-1.5" error={errors.roles} />
         </div>
-        {/* <div>
-          <Label htmlFor="signature" className="text-muted-foreground">
-            Signature
-          </Label>
-
-          <div className="mt-2">
-            <Controller
-              control={control}
-              name="signature"
-              render={({ field: { onChange } }) => (
-                <SignaturePad
-                  className="h-44 w-full rounded-lg border bg-white backdrop-blur-sm dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
-                  defaultValue={result.data?.signature ?? undefined}
-                  onChange={(v) => onChange(v ?? '')}
-                />
-              )}
-            />
-            <FormErrorMessage className="mt-1.5" error={errors.signature} />
-          </div>
-        </div> */}
 
         <div className="mt-4">
           <Button type="submit" disabled={isSubmitting}>

apps/web/src/providers/admin-user-profile-update.types.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+import { ZUpdateProfileMutationByAdminSchema } from '@documenso/trpc/server/admin-router/schema';
+
+export const ZUserFormSchema = ZUpdateProfileMutationByAdminSchema.omit({ id: true });
+export type TUserFormSchema = z.infer<typeof ZUserFormSchema>;

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

@@ -3,13 +3,12 @@ import { Role } from '@documenso/prisma/client';
 
 export type UpdateUserOptions = {
   id: number;
-  name: string;
+  name: string | null | undefined;
-  email: string;
+  email: string | undefined;
-  roles: Role[];
+  roles: Role[] | undefined;
 };
 
 export const updateUser = async ({ id, name, email, roles }: UpdateUserOptions) => {
-  console.log('wtf');
   await prisma.user.findFirstOrThrow({
     where: {
       id,

packages/trpc/server/admin-router/schema.ts

@@ -3,9 +3,9 @@ import z from 'zod';
 
 export const ZUpdateProfileMutationByAdminSchema = z.object({
   id: z.number().min(1),
-  name: z.string(),
+  name: z.string().nullish(),
-  email: z.string().email(),
+  email: z.string().email().optional(),
-  roles: z.array(z.nativeEnum(Role)),
+  roles: z.array(z.nativeEnum(Role)).optional(),
 });
 
 export type TUpdateProfileMutationByAdminSchema = z.infer<