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

app/apis/admin/create-ads.ts

@@ -15,10 +15,15 @@ type TParameters = {
 
 export const createAdsRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
+  const transformedPayload = {
+    ...payload,
+    start_date: new Date(payload.start_date).toISOString(),
+    end_date: new Date(payload.end_date).toISOString(),
+  }
   try {
     const { data } = await HttpServer(restParameters).post(
       '/api/ads/create',
-      payload,
+      transformedPayload,
     )
     return advertisementsResponseSchema.parse(data)
   } catch (error) {

app/apis/admin/update-ads.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TAdsSchema } from '~/pages/form-advertisements'
+
+const advertisementsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TAdsSchema
+} & THttpServer
+
+export const updateAdsRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id, ...restPayload } = payload
+  const transformedPayload = {
+    ...restPayload,
+    start_date: new Date(payload.start_date).toISOString(),
+    end_date: new Date(payload.end_date).toISOString(),
+  }
+  try {
+    const { data } = await HttpServer(restParameters).put(
+      `/api/ads/${id}/update`,
+      transformedPayload,
+    )
+    return advertisementsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

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>

app/routes/actions.admin.advertisements.update.ts

@@ -0,0 +1,61 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { updateAdsRequest } from '~/apis/admin/update-ads'
+import { handleCookie } from '~/libs/cookies'
+import { adsSchema, type TAdsSchema } from '~/pages/form-advertisements'
+
+import type { Route } from './+types/actions.admin.advertisements.create'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { staffToken: accessToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TAdsSchema>(
+      request,
+      zodResolver(adsSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: adsData } = await updateAdsRequest({ accessToken, payload })
+
+    return data(
+      {
+        success: true,
+        adsData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}

app/utils/formatter.ts

@@ -2,6 +2,7 @@ export const formatNumberWithPeriods = (number: number) => {
   return new Intl.NumberFormat('id-ID').format(number)
 }
 export const formatDate = (isoDate: string): string => {
+  if (!isoDate) return '-'
   const date = new Date(isoDate)
   return new Intl.DateTimeFormat('id-ID', {
     day: '2-digit',