From b61235a3b51af5ea42c6c9cdacf17dce9beb803d Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Thu, 6 Mar 2025 19:47:45 +0700
Subject: [PATCH] feat: update dashboard contents to include category names and
 format dates

---
 app/app.css                            | 23 ++--------------
 app/pages/dashboard-contents/index.tsx | 21 ++++++++++----
 app/types/news.ts                      | 38 ++++++++++++++++++++++++++
 app/utils/formatter.ts                 |  8 ++++++
 4 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/app/app.css b/app/app.css
index ef30239..74741fe 100644
--- a/app/app.css
+++ b/app/app.css
@@ -33,26 +33,7 @@ table.dataTable tbody > tr > td {
   border-bottom: 1px solid #ebebeb;
 }
 
-/* .embla.hero {
-  overflow: hidden;
-}
-.embla__container.hero {
+nav[aria-label='pagination'] {
   display: flex;
-  background-color: yellow;
+  justify-content: center;
 }
-.embla__slide.hero {
-  flex: 0 0 100%;
-  min-width: 0;
-} */
-
-/* .embla__slide {
-  margin-right: 10px;
-  flex: 0 0 auto;
-  min-width: 0;
-  max-width: 100%;
-}
-@media (min-width: 768px) {
-  .embla__slide {
-    margin-right: 30px;
-  }
-} */
diff --git a/app/pages/dashboard-contents/index.tsx b/app/pages/dashboard-contents/index.tsx
index 9c3726d..e7fa581 100644
--- a/app/pages/dashboard-contents/index.tsx
+++ b/app/pages/dashboard-contents/index.tsx
@@ -6,6 +6,8 @@ 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.contents'
+import type { TCategory } from '~/types/news'
+import { formatDate } from '~/utils/formatter'
 
 export const ContentsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -20,7 +22,7 @@ export const ContentsPage = () => {
     { title: 'Tanggal Konten', data: 'created_at' },
     { title: 'Nama Penulis', data: 'author_id' },
     { title: 'Judul', data: 'title' },
-    // { title: 'Kategori', data: 'category' },
+    { title: 'Kategori', data: 'categories' },
     {
       title: 'Tags',
       data: 'is_premium',
@@ -30,12 +32,21 @@ export const ContentsPage = () => {
           : `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-4 py-2 rounded-full">Normal</span>`
       },
     },
-    // {
-    //   title: 'Action',
-    //   data: 'id',
-    // },
+    {
+      title: 'Action',
+      data: 'id',
+    },
   ]
   const dataSlot = {
+    1: (value: string) => {
+      return formatDate(value)
+    },
+
+    4: (value: TCategory[]) => {
+      return value.map((item: { name: string }) => {
+        return `${item.name}`
+      })
+    },
     6: (value: string | number) => {
       return (
         <Button
diff --git a/app/types/news.ts b/app/types/news.ts
index d04e998..327a755 100644
--- a/app/types/news.ts
+++ b/app/types/news.ts
@@ -18,3 +18,41 @@ export type TNewsDetail = {
   isPremium?: boolean
   categories?: Array<string>
 }
+
+export type TTag = {
+  id: string
+  code: string
+  name: string
+  created_at: string
+  updated_at: string
+}
+
+export type TCategory = {
+  id: string
+  name: string
+  code: string
+  created_at: string
+  updated_at: string
+}
+
+export type Author = {
+  id: string
+  name: string
+  profile_picture: string
+}
+
+export type TKontents = {
+  id: string
+  title: string
+  content: string
+  featured_image: string
+  tags: TTag[]
+  categories: TCategory[]
+  is_premium: boolean
+  slug: string
+  author_id: string
+  live_at: string
+  created_at: string
+  updated_at: string
+  author: Author
+}
diff --git a/app/utils/formatter.ts b/app/utils/formatter.ts
index 9de8842..0d4bba3 100644
--- a/app/utils/formatter.ts
+++ b/app/utils/formatter.ts
@@ -1,3 +1,11 @@
 export const formatNumberWithPeriods = (number: number) => {
   return new Intl.NumberFormat('id-ID').format(number)
 }
+export const formatDate = (isoDate: string): string => {
+  const date = new Date(isoDate)
+  const day = date.getDate().toString().padStart(2, '0')
+  const month = (date.getMonth() + 1).toString().padStart(2, '0') // Month is zero-based
+  const year = date.getFullYear()
+
+  return `${day}/${month}/${year}`
+}