From cf78d137edf3ea1f85c921928db0af40942b28f4 Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Thu, 26 Feb 2026 12:11:35 +0800 Subject: [PATCH] update form article --- components/main/news-image.tsx | 218 +++++++++++++++------------------ utils/global.tsx | 14 ++- 2 files changed, 111 insertions(+), 121 deletions(-) diff --git a/components/main/news-image.tsx b/components/main/news-image.tsx index dc725fa..35d28db 100644 --- a/components/main/news-image.tsx +++ b/components/main/news-image.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -15,74 +15,54 @@ import { } from "@/components/ui/table"; import { Search, Filter, Eye, Pencil, Trash2, Plus } from "lucide-react"; import Link from "next/link"; +import { getArticlePagination } from "@/service/article"; +import { formatDate } from "@/utils/global"; +import { close, loading } from "@/config/swal"; export default function NewsImage() { - const [activeCategory, setActiveCategory] = useState("All"); + const [articles, setArticles] = useState([]); + const [page, setPage] = useState(1); + const [totalPage, setTotalPage] = useState(1); + const [search, setSearch] = useState(""); - const categories = [ - { name: "All", count: 24 }, - { name: "Technology", count: 8 }, - { name: "Partnership", count: 5 }, - { name: "Investment", count: 3 }, - { name: "News", count: 4 }, - { name: "Event", count: 2 }, - { name: "CSR", count: 2 }, - ]; + useEffect(() => { + fetchData(); + }, [page, search]); - const articles = [ - { - title: - "Novita Hardini: Jangan Sampai Pariwisata Meminggirkan Warga Lokal", - category: "Technology", - author: "John Kontributor", - status: "Published", - date: "2024-01-15", - }, - { - title: - "Bharatu Mardi Hadji Gugur Saat Bertugas, Diganjar Kenaikan Pangkat Luar Biasa", - category: "Partnership", - author: "Sarah Editor", - status: "Pending", - date: "2024-01-14", - }, - { - title: - "Lestari Moerdijat: Butuh Afirmasi dan Edukasi untuk Dorong Perempuan Aktif di Dunia Politik", - category: "Investment", - author: "Mike Writer", - status: "Draft", - date: "2024-01-13", - }, - { - title: "SEKRETARIS MAHKAMAH AGUNG LANTIK HAKIM TINGGI PENGAWAS", - category: "CSR", - author: "Jane Content", - status: "Published", - date: "2024-01-12", - }, - { - title: - "Mudik Nyaman Bersama Pertamina: Layanan 24 Jam, Motoris, dan Fasilitas Lengkap", - category: "Event", - author: "John Kontributor", - status: "Rejected", - date: "2024-01-11", - }, - ]; + async function fetchData() { + loading(); + + const req = { + limit: "10", + page: page, + search: search, + source: "internal", // jika ingin filter image/internal + sort: "desc", + sortBy: "created_at", + }; + + const res = await getArticlePagination(req); + + const data = res?.data?.data || []; + + setArticles(data); + setTotalPage(res?.data?.meta?.totalPage || 1); + + close(); + } const statusVariant = (status: string) => { - switch (status) { - case "Published": + switch (status?.toLowerCase()) { + case "publish": return "bg-green-100 text-green-700"; - case "Pending": + case "pending": return "bg-yellow-100 text-yellow-700"; - case "Draft": + case "draft": return "bg-gray-200 text-gray-600"; - case "Rejected": + case "reject": return "bg-red-100 text-red-600"; default: - return ""; + return "bg-gray-200 text-gray-600"; } }; @@ -106,28 +86,14 @@ export default function NewsImage() { - {/* ================= CATEGORY FILTER ================= */} -
- {categories.map((cat) => ( - - ))} -
- - {/* ================= SEARCH + FILTER ================= */} + {/* ================= SEARCH ================= */}
setSearch(e.target.value)} />
@@ -153,68 +119,86 @@ export default function NewsImage() { - {articles.map((article, index) => ( - - - {article.title} - + {articles.length > 0 ? ( + articles.map((article, index) => ( + + + {article.title} + - - {article.category} - + + + {article?.categories + ?.map((c: any) => c.title) + .join(", ")} + + - {article.author} + + {article.customCreatorName || article.createdByName} + - - - {article.status} - - + + + {article.publishStatus} + + - {article.date} + {formatDate(article.createdAt)} - - - - + + + + + + + )) + ) : ( + + + No data available - ))} + )} {/* ================= PAGINATION ================= */}
-

Showing 1 to 5 of 24 articles

+

+ Page {page} of {totalPage} +

- - - - - -
diff --git a/utils/global.tsx b/utils/global.tsx index 445ec6d..b28198f 100644 --- a/utils/global.tsx +++ b/utils/global.tsx @@ -165,10 +165,16 @@ export function convertDateFormatNoTime(date: Date): string { return `${year}-${month}-${day}`; } -export function formatDate(date: Date | null) { +export function formatDate(date: Date | string | null) { if (!date) return ""; - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, "0"); - const day = String(date.getDate()).padStart(2, "0"); + + const parsedDate = typeof date === "string" ? new Date(date) : date; + + if (isNaN(parsedDate.getTime())) return ""; + + const year = parsedDate.getFullYear(); + const month = String(parsedDate.getMonth() + 1).padStart(2, "0"); + const day = String(parsedDate.getDate()).padStart(2, "0"); + return `${year}-${month}-${day}`; }