feat: add length, price, and status fields to subscription plan schema and forms

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

@@ -1,3 +1,4 @@
+import { Field, Label, Select } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState } from 'react'
 import { useFetcher, useNavigate } from 'react-router'
@@ -13,6 +14,9 @@ export const createSubscribePlanSchema = z.object({
   id: z.string().optional(),
   name: z.string().min(3, 'Nama minimal 3 karakter'),
   code: z.string(),
+  length: z.preprocess(Number, z.number().optional()),
+  price: z.preprocess(Number, z.number().optional()),
+  status: z.boolean().optional(),
 })
 export type TSubscribePlanSchema = z.infer<typeof createSubscribePlanSchema>
 type TProperties = {
@@ -31,6 +35,9 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
       id: subscribePlanData?.id || undefined,
       code: subscribePlanData?.code || '',
       name: subscribePlanData?.name || '',
+      length: subscribePlanData?.length || undefined,
+      price: subscribePlanData?.price || undefined,
+      status: subscribePlanData?.status || undefined,
     },
   })
   const [error, setError] = useState<string>()
@@ -101,6 +108,41 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 Save
               </Button>
             </div>
+            <div className="flex items-end justify-between gap-4">
+              <Input
+                id="length"
+                label="Length"
+                type="number"
+                placeholder="Masukkan Subscribe Plan Length (days)"
+                name="length"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+              <Input
+                id="price"
+                label="Price"
+                placeholder="Masukkan Price"
+                type="number"
+                name="price"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                labelClassName="text-sm font-medium text-[#363636]"
+                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>
+            </div>
           </fetcher.Form>
         </RemixFormProvider>
       </div>