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

app/pages/dashboard-advertisements/index.tsx

@@ -14,6 +14,7 @@ import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.advertisements._index'
+import { formatDate } from '~/utils/formatter'
 
 export const AdvertisementsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -36,6 +37,20 @@ export const AdvertisementsPage = () => {
     },
     { title: 'Banner', data: 'image_url' },
     { title: 'Link', data: 'url' },
+    {
+      title: 'Tanggal Mulai',
+      data: 'start_date',
+      render: (data: string) => {
+        return formatDate(data)
+      },
+    },
+    {
+      title: 'Tanggal Berakhir',
+      data: 'end_date',
+      render: (data: string) => {
+        return formatDate(data)
+      },
+    },
     {
       title: 'Action',
       data: 'id',
@@ -51,7 +66,7 @@ export const AdvertisementsPage = () => {
         />
       )
     },
-    3: (value: string, _type: unknown, data: TAdResponse) => (
+    5: (value: string, _type: unknown, data: TAdResponse) => (
       <div className="flex space-x-2">
         <Button
           as="a"

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>