feat: add start_date and end_date fields to advertisements with transformation and display in forms

app/pages/form-advertisements/index.tsx

@@ -19,6 +19,12 @@ export const adsSchema = z.object({
   url: z.string().url({
     message: 'URL must be valid',
   }),
+  start_date: z.string().min(1, {
+    message: 'Tanggal mulai is required',
+  }),
+  end_date: z.string().min(1, {
+    message: 'Tanggal berakhir is required',
+  }),
 })
 export type TAdsSchema = z.infer<typeof adsSchema>
 type TProperties = {
@@ -37,6 +43,12 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
       id: adData?.id || undefined,
       image: adData?.image_url || '',
       url: adData?.url || '',
+      start_date: adData?.start_date
+        ? new Date(adData.start_date).toISOString().split('T')[0]
+        : '',
+      end_date: adData?.end_date
+        ? new Date(adData.end_date).toISOString().split('T')[0]
+        : '',
     },
   })
 
@@ -97,6 +109,26 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
                 Save
               </Button>
             </div>
+            <div className="flex items-end justify-between gap-4">
+              <Input
+                id="start_date"
+                label="Tanggal Mulai"
+                type="date"
+                name="start_date"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+              <Input
+                id="end_date"
+                label="Tanggal Berakhir"
+                type="date"
+                name="end_date"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+            </div>
           </fetcher.Form>
         </RemixFormProvider>
       </div>