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

app/apis/admin/create-subscribe-plan.ts

@@ -16,9 +16,13 @@ type TParameters = {
 export const createSubscribePlanRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   try {
+    const transformedPayload = {
+      ...payload,
+      status: Number(payload.status),
+    }
     const { data } = await HttpServer(restParameters).post(
       '/api/subscribe-plan/create',
-      payload,
+      transformedPayload,
     )
     return subscribePlanResponseSchema.parse(data)
   } catch (error) {

app/apis/admin/delete-tags.ts

@@ -14,7 +14,7 @@ type TParameters = {
   payload: TTagsId
 } & THttpServer
 
-export type TDeleteTagsSchema = z.infer<typeof deleteTagsResponseSchema>
+export type TDeleteTagsResponse = z.infer<typeof deleteTagsResponseSchema>
 export const deleteTagsRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   const { id } = payload

app/apis/admin/update-subscribe-plan.ts

@@ -17,9 +17,13 @@ export const updateSubscribePlanRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   const { id, ...restPayload } = payload
   try {
+    const transformedPayload = {
+      ...restPayload,
+      status: Number(payload.status),
+    }
     const { data } = await HttpServer(restParameters).put(
       `/api/subscribe-plan/${id}/update`,
-      restPayload,
+      transformedPayload,
     )
     return subscribePlanResponseSchema.parse(data)
   } catch (error) {

app/apis/common/get-news.ts

@@ -29,7 +29,7 @@ const dataResponseSchema = z.object({
 })
 
 export type TNewsResponse = z.infer<typeof newsResponseSchema>
-export type TAuthor = z.infer<typeof authorSchema>
+export type TAuthorResponse = z.infer<typeof authorSchema>
 type TParameters = {
   categories?: string[]
   tags?: string[]

app/apis/common/get-subscribe-plan.ts

@@ -15,7 +15,7 @@ const subscribePlanResponseSchema = z.object({
   data: z.array(subscribePlanSchema),
 })
 
-export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
+export type TSubscribePlanResponse = z.infer<typeof subscribePlanSchema>
 
 export const getSubscribePlan = async (parameters?: THttpServer) => {
   try {

app/components/ui/input.tsx

@@ -63,8 +63,9 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       <HeadlessInput
         type={inputType}
         className={twMerge(
-          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 pr-8',
+          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
           className,
+          type === 'password' ? 'pr-8' : '',
         )}
         placeholder={inputType === 'password' ? '******' : placeholder}
         {...register(name, rules)}

app/components/ui/select.tsx

@@ -0,0 +1,98 @@
+import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
+import { type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+  Controller,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+type TSelectProperties<T extends FieldValues> = Omit<
+  ComponentProps<'select'>,
+  'size'
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+  placeholder?: string
+  options?: {
+    name: string
+    value: string | number
+  }[]
+}
+
+export const Select = <TFormValues extends Record<string, unknown>>(
+  properties: TSelectProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    disabled,
+    placeholder,
+    options,
+    className,
+    labelClassName,
+    containerClassName,
+    ...restProperties
+  } = properties
+  const {
+    control,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className={twMerge('relative', containerClassName)}
+      disabled={disabled}
+      id={id}
+    >
+      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <HeadlessSelect
+            value={field.value}
+            onChange={field.onChange}
+            disabled={disabled}
+            className={twMerge(
+              'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+              className,
+            )}
+            {...restProperties}
+          >
+            <option
+              value=""
+              disabled
+              selected={!field.value}
+            >
+              {placeholder}
+            </option>
+            {options?.map(({ value, name }) => (
+              <option
+                key={value}
+                value={value}
+              >
+                {name}
+              </option>
+            ))}
+          </HeadlessSelect>
+        )}
+      />
+    </Field>
+  )
+}

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