refactor: transform payload status to number in subscribe plan requests and update type definitions

app/pages/form-subscribe-plan/index.tsx

@@ -1,4 +1,4 @@
-import { Field, Label, Select } from '@headlessui/react'
+import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect } from 'react'
 import toast from 'react-hot-toast'
@@ -6,8 +6,10 @@ import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
+import { Select } from '~/components/ui/select'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
@@ -17,11 +19,11 @@ export const subscribePlanSchema = z.object({
   code: z.string(),
   length: z.preprocess(Number, z.number().min(1, 'Length minimal 1')),
   price: z.preprocess(Number, z.number().min(1, 'Harga minimal 1')),
-  status: z.number(),
+  status: z.string().min(1, 'Status is required'),
 })
 export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
 type TProperties = {
-  subscribePlanData?: TSubscribePlanSchema
+  subscribePlanData?: TSubscribePlanResponse
 }
 
 export const FormSubscribePlanPage = (properties: TProperties) => {
@@ -38,11 +40,11 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
       name: subscribePlanData?.name || '',
       length: subscribePlanData?.length || 0,
       price: subscribePlanData?.price || 0,
-      status: subscribePlanData?.status || 0,
+      status: subscribePlanData?.status.toString() || '',
     },
   })
 
-  const { handleSubmit, watch, setValue } = formMethods
+  const { handleSubmit, watch, setValue, control } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
@@ -131,22 +133,25 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
 
-              <Field className={'flex-1'}>
-                <Label className="mb-2 block text-sm font-medium">Status</Label>
-                <Select
-                  name="status"
-                  id="status"
-                  className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                >
-                  <option disabled>Pilih Status</option>
-                  <option value={1}>Aktif</option>
-                  <option value={0}>Nonaktif</option>
-                </Select>
-              </Field>
+              <Select
+                id="status"
+                name="status"
+                label="Status"
+                placeholder="Pilih Status"
+                options={[
+                  { value: 1, name: 'Aktif' },
+                  { value: 0, name: 'Nonaktif' },
+                ]}
+                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"
+              />
             </div>
           </fetcher.Form>
         </RemixFormProvider>
       </div>
+
+      <DevTool control={control} />
     </div>
   )
 }