fix: typo & remove readonly on form input

app/pages/dashboard-category-create/index.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState, type ChangeEvent } from 'react'
+import { useEffect, useState } from 'react'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -7,7 +7,6 @@ import { z } from 'zod'
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 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'),
@@ -25,8 +24,6 @@ export const CreateCategoryPage = () => {
   })
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
-  const [code, setCode] = useState<string>('')
-  const [name, setName] = useState<string>('')
 
   const { handleSubmit } = formMethods
 
@@ -42,15 +39,9 @@ export const CreateCategoryPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
-  const handelCodeAuto = (name: ChangeEvent<HTMLInputElement>) => {
-    const inputName = name.target.value
-    setName(inputName)
-    setCode(urlFriendlyCode(inputName))
-  }
-
   return (
     <div className="relative">
-      <TitleDashboard title="Buat Kategory" />
+      <TitleDashboard title="Buat Kategori" />
       <div>
         <RemixFormProvider {...formMethods}>
           <fetcher.Form
@@ -65,25 +56,21 @@ export const CreateCategoryPage = () => {
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="name"
-                label="Nama Kategory"
+                label="Nama Kategori"
-                placeholder="Masukkan Nama Kategory"
+                placeholder="Masukkan Nama Kategori"
                 name="name"
-                onChange={handelCodeAuto}
                 className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
-                value={name}
               />
               <Input
                 id="code"
-                label="Kode Kategory"
+                label="Kode Kategori"
-                readOnly
+                placeholder="Masukkan Kode Kategori"
-                placeholder="Masukkan Kode Kategory"
                 name="code"
-                className="border-0 bg-gray-100 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
-                value={code}
               />
               <Button
                 disabled={disabled}

app/pages/dashboard-tags-create/index.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState, type ChangeEvent } from 'react'
+import { useEffect, useState } from 'react'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -7,7 +7,6 @@ import { z } from 'zod'
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
-import { urlFriendlyCode } from '~/utils/formatter'
 
 export const createTagsSchema = z.object({
   code: z.string().min(3, 'Kode minimal 3 karakter'),
@@ -25,8 +24,6 @@ export const CreateTagsPage = () => {
   })
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
-  const [code, setCode] = useState<string>('')
-  const [name, setName] = useState<string>('')
 
   const { handleSubmit } = formMethods
 
@@ -42,12 +39,6 @@ export const CreateTagsPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
-  const handelCodeAuto = (name: ChangeEvent<HTMLInputElement>) => {
-    const inputName = name.target.value
-    setName(inputName)
-    setCode(urlFriendlyCode(name.target.value))
-  }
-
   return (
     <div className="relative">
       <TitleDashboard title="Buat Tag" />
@@ -68,22 +59,18 @@ export const CreateTagsPage = () => {
                 label="Nama Tag"
                 placeholder="Masukkan Nama Tag"
                 name="name"
-                onChange={handelCodeAuto}
                 className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
-                value={name}
               />
               <Input
                 id="code"
                 label="Kode Tag"
-                readOnly
                 placeholder="Masukkan Kode Tag"
                 name="code"
-                className="border-0 bg-gray-100 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
-                value={code}
               />
               <Button
                 disabled={disabled}