feat: restructure ads mgmt by creating a new layout for ads creation and updating related schemas

app/pages/dashboard-advertisements/index.tsx

@@ -1,23 +1,36 @@
 import type { ConfigColumns } from 'datatables.net-dt'
 import type { DataTableSlots } from 'datatables.net-react'
-import { Link } from 'react-router'
-import { twMerge } from 'tailwind-merge'
+import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
-import { BANNER } from '~/data/contents'
-
-type TStatusColors = 'draft' | 'active' | 'inactive'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.advertisements._index'
 
 export const AdvertisementsPage = () => {
-  const dataBanner = BANNER
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.advertisements._index',
+  )
+  const { adsData: dataTable } = loaderData || {}
+
   const dataColumns: ConfigColumns[] = [
-    { title: 'No', data: 'id' },
-    { title: 'Banner', data: 'urlImage' },
-    { title: 'Link', data: 'link' },
-    { title: 'Tgl Create', data: 'createdAt' },
-    { title: 'Status', data: 'status' },
+    {
+      title: 'No',
+      render: (
+        _data: unknown,
+        _type: unknown,
+        _row: unknown,
+        meta: { row: number },
+      ) => {
+        return meta.row + 1
+      },
+    },
+    { title: 'Banner', data: 'image_url' },
+    { title: 'Link', data: 'url' },
+    {
+      title: 'Action',
+      data: 'id',
+    },
   ]
   const dataSlot: DataTableSlots = {
     1: (value: string) => {
@@ -25,30 +38,22 @@ export const AdvertisementsPage = () => {
         <div>
           <img
             src={value}
-            alt={`banner - ${value}`}
-            className="aspect-[15/1] h-[50px] max-w-[200px] rounded"
+            alt={value}
+            className="aspect-[15/1] h-[50px] max-h-[100px] min-h-[65px] rounded object-cover"
           />
         </div>
       )
     },
-    4: (value: string) => {
-      const statusColors = {
-        draft: 'bg-gray-300',
-        active: 'bg-[#04D182]',
-        inactive: 'bg-[#F96D19]',
-      }
-      const status = value as TStatusColors
-      return (
-        <span
-          className={twMerge(
-            'rounded-md px-2 py-1 text-sm',
-            status ? statusColors[status] : '',
-          )}
-        >
-          {status}
-        </span>
-      )
-    },
+    3: (value: string) => (
+      <Button
+        as="a"
+        href={`/lg-admin/advertisements/update/${value}`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Update Banner Iklan
+      </Button>
+    ),
   }
 
   return (
@@ -68,7 +73,7 @@ export const AdvertisementsPage = () => {
       </div>
 
       <UiTable
-        data={dataBanner}
+        data={dataTable}
         columns={dataColumns}
         slots={dataSlot}
         title="Daftar Banner Iklan"