feat: add profile update functionality with form validation and API integration

app/layouts/admin/dialog-profile.tsx

@@ -1,29 +1,47 @@
-import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect } from 'react'
 import toast from 'react-hot-toast'
-import { useFetcher } from 'react-router'
+import { useFetcher, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { InputFile } from '~/components/ui/input-file'
 import { useAdminContext } from '~/contexts/admin'
+import type { loader } from '~/routes/_admin.lg-admin'
 
-const profileSchema = z.object({
+export const profileSchema = z.object({
   name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
-  profile_picture: z.string().optional(),
+  email: z.string().email('Email is invalid'),
+  profile_picture: z.string().url({
+    message: 'URL must be valid',
+  }),
 })
 
-type TProfileSchema = z.infer<typeof profileSchema>
+export type TProfileSchema = z.infer<typeof profileSchema>
 
 export const DialogProfile = () => {
   const { editProfile, setEditProfile } = useAdminContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
+  const { staffData } = loaderData || {}
   const fetcher = useFetcher()
 
   const formMethods = useRemixForm<TProfileSchema>({
     mode: 'onSubmit',
     fetcher,
     resolver: zodResolver(profileSchema),
+    values: {
+      name: staffData?.name || '',
+      email: staffData?.email || '',
+      profile_picture: staffData?.profile_picture || '',
+    },
   })
 
   const { handleSubmit } = formMethods
@@ -57,16 +75,49 @@ export const DialogProfile = () => {
       <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
         <DialogPanel
           transition
-          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+          className="w-full max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
         >
+          <DialogTitle
+            as="h3"
+            className="text-xl font-bold"
+          >
+            Update Profile
+          </DialogTitle>
           <RemixFormProvider {...formMethods}>
             <fetcher.Form
               method="post"
               onSubmit={handleSubmit}
               className="space-y-4"
               action="/actions/admin/profile"
-              encType="multipart/form-data"
-            ></fetcher.Form>
+            >
+              <Input
+                name="name"
+                id="name"
+                label="Name"
+                placeholder="Enter your name"
+              />
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+              <InputFile
+                name="profile_picture"
+                id="profile_picture"
+                label="Profile Picture"
+                placeholder="Upload your profile picture"
+                category="profile_picture"
+              />
+              <Button
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Save
+              </Button>
+            </fetcher.Form>
           </RemixFormProvider>
         </DialogPanel>
       </div>

app/layouts/admin/dialog-upload.tsx

@@ -99,7 +99,7 @@ export const DialogUpload = () => {
       <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
         <DialogPanel
           transition
-          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+          className="w-full max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
         >
           <RemixFormProvider {...formMethods}>
             <fetcher.Form