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

app/pages/dashboard-contents/index.tsx

@@ -3,7 +3,7 @@ import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
-import type { TAuthor } from '~/apis/common/get-news'
+import type { TAuthorResponse } from '~/apis/common/get-news'
 import type { TTagResponse } from '~/apis/common/get-tags'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
@@ -58,7 +58,7 @@ export const ContentsPage = () => {
   ]
   const dataSlot: DataTableSlots = {
     1: (value: string) => formatDate(value),
-    2: (value: TAuthor) => (
+    2: (value: TAuthorResponse) => (
       <div>
         <div>{value.name}</div>
         <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>

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

@@ -2,7 +2,7 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
-import type { TSubscribePlanSchema } from '~/apis/common/get-subscribe-plan'
+import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
 import { Button } from '~/components/ui/button'
 import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
 import { UiTable } from '~/components/ui/table'
@@ -66,8 +66,10 @@ export const SubscribePlanPage = () => {
         {value === 1 ? 'Active' : 'Inactive'}
       </span>
     ),
-    6: (value: string, _type: unknown, data: TSubscribePlanSchema) =>
-      data.code !== 'basic' && (
+    6: (value: string, _type: unknown, data: TSubscribePlanResponse) =>
+      data.code === 'basic' ? (
+        ''
+      ) : (
         <Button
           as="a"
           href={`/lg-admin/subscribe-plan/update/${value}`}

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>
   )
 }