feat: implement category update functionality with validation and new fields in form

app/pages/form-category/index.tsx

@@ -11,8 +11,11 @@ import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
 export const createCategorySchema = z.object({
-  code: z.string().min(3, 'Kode minimal 3 karakter'),
+  id: z.string().optional(),
   name: z.string().min(3, 'Nama minimal 3 karakter'),
+  code: z.string(),
+  sequence: z.preprocess(Number, z.number().optional()),
+  description: z.string(),
 })
 export type TCategorySchema = z.infer<typeof createCategorySchema>
 type TProperties = {
@@ -28,8 +31,11 @@ export const FormCategoryPage = (properties: TProperties) => {
     fetcher,
     resolver: zodResolver(createCategorySchema),
     values: {
+      id: categoryData?.id || undefined,
       code: categoryData?.code || '',
       name: categoryData?.name || '',
+      sequence: categoryData?.sequence || undefined,
+      description: categoryData?.description || '',
     },
   })
   const [error, setError] = useState<string>()
@@ -63,7 +69,7 @@ export const FormCategoryPage = (properties: TProperties) => {
           <fetcher.Form
             method="post"
             onSubmit={handleSubmit}
-            action="/actions/admin/categories/create"
+            action={`/actions/admin/categories/${categoryData ? 'update' : 'create'}`}
             className="space-y-4"
           >
             {error && (
@@ -98,6 +104,27 @@ export const FormCategoryPage = (properties: TProperties) => {
                 Save
               </Button>
             </div>
+            <div className="flex items-end justify-between gap-4">
+              <Input
+                id="sequence"
+                label="Urutan"
+                placeholder="Urutan Kategori"
+                name="sequence"
+                type="number"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="w-44"
+              />
+              <Input
+                id="description"
+                label="Deskripsi"
+                placeholder="Masukkan Deskripsi Kategori"
+                name="description"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+            </div>
           </fetcher.Form>
         </RemixFormProvider>
       </div>

app/pages/form-contents/index.tsx

@@ -75,7 +75,7 @@ export const FormContentsPage = (properties: TProperties) => {
     fetcher,
     resolver: zodResolver(contentSchema),
     values: {
-      id: newsData?.id || '',
+      id: newsData?.id || undefined,
       categories: newsData?.categories || [],
       tags: newsData?.tags || [],
       title: newsData?.title || '',