From 65f7bbe0aa5ddc0bf86521b3992f46d500a15ed5 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Mon, 24 Mar 2025 15:45:43 +0800
Subject: [PATCH] feat: add views field to news response schema and update
 dashboard pages

---
 app/apis/common/get-news.ts                  |  1 +
 app/pages/dashboard-advertisements/index.tsx |  3 ++-
 app/pages/dashboard-contents/index.tsx       | 28 ++++++++++++++------
 app/pages/dashboard/data.ts                  | 12 ++++-----
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/app/apis/common/get-news.ts b/app/apis/common/get-news.ts
index b0576bd..186bd08 100644
--- a/app/apis/common/get-news.ts
+++ b/app/apis/common/get-news.ts
@@ -23,6 +23,7 @@ export const newsResponseSchema = z.object({
   created_at: z.string(),
   updated_at: z.string(),
   author: authorSchema,
+  views: z.number(),
 })
 const dataResponseSchema = z.object({
   data: z.array(newsResponseSchema),
diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index 161fbde..ef3428a 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -14,7 +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'
+import { formatDate, formatNumberWithPeriods } from '~/utils/formatter'
 
 export const AdvertisementsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -70,6 +70,7 @@ export const AdvertisementsPage = () => {
         />
       )
     },
+    5: (value: number) => formatNumberWithPeriods(value),
     6: (value: string, _type: unknown, data: TAdResponse) => (
       <div className="flex space-x-2">
         <Button
diff --git a/app/pages/dashboard-contents/index.tsx b/app/pages/dashboard-contents/index.tsx
index d269d23..c5b21bb 100644
--- a/app/pages/dashboard-contents/index.tsx
+++ b/app/pages/dashboard-contents/index.tsx
@@ -16,7 +16,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.contents._index'
-import { formatDate } from '~/utils/formatter'
+import { formatDate, formatNumberWithPeriods } from '~/utils/formatter'
 
 export const ContentsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -48,17 +48,20 @@ export const ContentsPage = () => {
       title: 'Penulis',
       data: 'author',
     },
-    { title: 'Judul', data: 'title', className: 'text-sm' },
+    { title: 'Judul', data: 'title' },
     {
       title: 'Kategori',
       data: 'categories',
-      className: 'text-xs',
     },
-    { title: 'Tag', data: 'tags', className: 'text-xs' },
+    { title: 'Tag', data: 'tags' },
     {
       title: 'Subscription',
       data: 'is_premium',
     },
+    {
+      title: 'Jumlah Pembaca',
+      data: 'views',
+    },
     {
       title: 'Action',
       data: 'id',
@@ -72,9 +75,17 @@ export const ContentsPage = () => {
         <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
       </>
     ),
-    4: (value: TCategoryResponse[]) =>
-      value.map((item) => item.name).join(', '),
-    5: (value: TTagResponse[]) => value.map((item) => item.name).join(', '),
+    3: (value: string) => <span className="text-sm">{value}</span>,
+    4: (value: TCategoryResponse[]) => (
+      <span className="text-xs">
+        {value.map((item) => item.name).join(', ')}
+      </span>
+    ),
+    5: (value: TTagResponse[]) => (
+      <span className="text-xs">
+        {value.map((item) => item.name).join(', ')}
+      </span>
+    ),
     6: (value: string) =>
       value ? (
         <div className="rounded-full bg-[#FFFCAF] px-2 text-center text-[#DBCA6E]">
@@ -85,7 +96,8 @@ export const ContentsPage = () => {
           Normal
         </div>
       ),
-    7: (value: string, _type: unknown, data: TNewsResponse) => (
+    7: (value: number) => formatNumberWithPeriods(value),
+    8: (value: string, _type: unknown, data: TNewsResponse) => (
       <div className="flex space-x-2">
         <Button
           as="a"
diff --git a/app/pages/dashboard/data.ts b/app/pages/dashboard/data.ts
index 4edcaf8..1feb7ba 100644
--- a/app/pages/dashboard/data.ts
+++ b/app/pages/dashboard/data.ts
@@ -1,11 +1,11 @@
 import { ChartBarIcon, ChartPieIcon } from '@heroicons/react/24/solid'
 
 export const REPORT = [
-  { title: 'Total User', amount: 10_800, icon: ChartBarIcon },
-  { title: '⁠Total User Subscribe', amount: 5000, icon: ChartBarIcon },
+  { title: 'Total User', amount: 8, icon: ChartBarIcon },
+  { title: '⁠Total User Subscribe', amount: 0, icon: ChartBarIcon },
   {
     title: 'Total Nilai Subscribe',
-    amount: 250_000_000,
+    amount: 0,
     icon: ChartBarIcon,
     currency: 'Rp. ',
   },
@@ -14,12 +14,12 @@ export const REPORT = [
 export const HISTORY = [
   {
     title: 'Total Content Biasa',
-    amount: 2890,
+    amount: 7,
     icon: ChartPieIcon,
   },
   {
-    title: 'Total Content Premium',
-    amount: 274,
+    title: 'Total Content Premium',
+    amount: 3,
     icon: ChartPieIcon,
   },
 ]