update

app/details/[slug]/page.tsx

@@ -0,0 +1,19 @@
+import DetailContent from "@/components/details/details-content";
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+import Image from "next/image";
+
+export default function Slug() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
+        <Navbar />
+        <div className="flex-1">
+          <DetailContent />
+        </div>
+
+        <Footer />
+      </div>
+    </div>
+  );
+}

components/details/details-content.tsx

@@ -2,7 +2,11 @@
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { getArticleById, getListArticle } from "@/service/article";
+import {
+  getArticleById,
+  getArticleBySlug,
+  getListArticle,
+} from "@/service/article";
 import { close, error, loading } from "@/config/swal";
 import { useParams, usePathname } from "next/navigation";
 import Author from "../landing-page/author";
@@ -16,6 +20,7 @@ import {
 } from "@/service/master-user";
 import { saveActivity } from "@/service/activity-log";
 import { useForm } from "react-hook-form";
+import { Badge } from "../ui/badge";
 
 type TabKey = "trending" | "comments" | "latest";
 
@@ -25,6 +30,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   thumbnailUrl: string;
   categories: {
@@ -54,6 +60,7 @@ type Advertise = {
 export default function DetailContent() {
   const params = useParams();
   const id = params?.id;
+  const slug = params?.slug;
   const pathname = usePathname();
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
@@ -295,13 +302,13 @@ export default function DetailContent() {
 
   async function initStateData() {
     loading();
-    const res = await getArticleById(id);
-    const data = res.data?.data;
+    const res = await getArticleBySlug(slug);
+    const data = res?.data?.data;
 
     setThumbnail(data?.thumbnailUrl);
     setDiseId(data?.aiArticleId);
     setDetailFiles(data?.files);
-    setArticleDetail(data);
+    setArticleDetail(data); // <-- Add this
     close();
   }
 
@@ -543,9 +550,17 @@ export default function DetailContent() {
                 </span>
                 <div className="flex flex-wrap gap-2 mt-1">
                   {articleDetail?.tags ? (
-                    <span className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded">
-                      {articleDetail.tags}
-                    </span>
+                    articleDetail.tags
+                      .split(",") // pisahkan berdasarkan koma
+                      .map((tag: string, index: number) => (
+                        <Badge
+                          key={index}
+                          variant="secondary"
+                          className="text-sm"
+                        >
+                          {tag.trim()}
+                        </Badge>
+                      ))
                   ) : (
                     <span className="text-sm text-gray-500">Tidak ada tag</span>
                   )}

components/landing-page/breaking-news.tsx

@@ -13,6 +13,7 @@ type Article = {
   categoryName: string;
   createdAt: string;
   createdByName: string;
+  slug: string;
   thumbnailUrl: string;
   categories: {
     title: string;
@@ -111,7 +112,7 @@ export default function BreakingNews() {
       <div className="md:col-span-2 space-y-6">
         {articles.map((item) => (
           <div key={item.id} className="flex gap-4 border-b pb-4">
-            <Link className="flex gap-4" href={`/detail/${item?.id}`}>
+            <Link className="flex gap-4" href={`/details/${item?.slug}`}>
               <Image
                 src={item.thumbnailUrl || "/dummy.jpg"}
                 alt={item.title}
@@ -187,7 +188,7 @@ export default function BreakingNews() {
 
         {popular.length > 0 && (
           <div className="space-y-5">
-            <Link className="flex gap-4" href={`/detail/${popular[0]?.id}`}>
+            <Link className="flex gap-4" href={`/details/${popular[0]?.slug}`}>
               {/* Item pertama tampil besar */}
               <div className="relative">
                 <Image
@@ -218,7 +219,7 @@ export default function BreakingNews() {
                   key={item.id}
                   className="flex gap-3 items-start border-b pb-2 last:border-b-0"
                 >
-                  <Link className="flex gap-4" href={`/detail/${item?.id}`}>
+                  <Link className="flex gap-4" href={`/details/${item?.slug}`}>
                     <span className="text-lg font-bold text-gray-400">
                       0{i + 2}
                     </span>

components/landing-page/header-latest.tsx

@@ -11,6 +11,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   thumbnailUrl: string;
   categories: {
@@ -51,7 +52,7 @@ export default function HeaderLatest() {
   return (
     <header className="w-full pt-3 flex justify-center">
       <div className="relative max-w-screen-xl w-full h-[320px] md:h-[480px] mx-3 md:mx-5 overflow-hidden group">
-        <Link className="flex gap-4" href={`/detail/${article?.id}`}>
+        <Link className="flex gap-4" href={`/details/${article?.slug}`}>
           <Image
             src={article?.thumbnailUrl || "/dummy.jpg"}
             alt={article?.title || "No Title"}

components/landing-page/header.tsx

@@ -11,6 +11,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   thumbnailUrl: string;
   categories: {
@@ -52,7 +53,7 @@ export default function Header() {
   return (
     <header className="bg-white w-full pt-3 flex justify-center">
       <div className="relative max-w-screen-xl h-auto md:h-[483px] flex flex-col md:flex-row overflow-hidden shadow-md mx-3 md:mx-3 lg:mx-5">
-        <Link className="flex" href={`/detail/${article?.id}`}>
+        <Link className="flex" href={`/details/${article?.slug}`}>
           <div className="w-full md:w-1/2 h-[250px] md:h-full">
             <Image
               src={article?.thumbnailUrl || "/dummy.jpg"}

components/landing-page/news.tsx

@@ -23,6 +23,7 @@ type Article = {
   createdAt: string;
   createdByName: string;
   thumbnailUrl: string;
+  slug: string;
   categories: {
     title: string;
   }[];
@@ -129,7 +130,7 @@ export default function News() {
                 key={item.id}
                 className="flex flex-col md:flex-row gap-4 pb-6"
               >
-                <Link className="flex gap-4" href={`/detail/${item?.id}`}>
+                <Link className="flex gap-4" href={`/details/${item?.slug}`}>
                   <div className="w-full md:w-[250px]">
                     <Image
                       src={item.thumbnailUrl || "/dummy.jpg"}

components/landing-page/opini.tsx

@@ -12,6 +12,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   thumbnailUrl: string;
   categories: {
@@ -122,7 +123,7 @@ export default function Opini() {
                 key={item.id}
                 className="flex items-start gap-4 border-b pb-4"
               >
-                <Link className="flex gap-4" href={`/detail/${item?.id}`}>
+                <Link className="flex gap-4" href={`/details/${item?.slug}`}>
                   <Image
                     src={item.thumbnailUrl || "/dummy.jpg"}
                     alt={item.title}
@@ -187,7 +188,7 @@ export default function Opini() {
 
           {jagaNegeri.length > 0 && (
             <div className="mt-6 flex flex-col md:flex-row gap-6">
-              <Link className="flex" href={`/detail/${jagaNegeri[0]?.id}`}>
+              <Link className="flex" href={`/details/${jagaNegeri[0]?.slug}`}>
                 <div className="w-full md:w-[455px]">
                   <Image
                     src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"}
@@ -215,7 +216,7 @@ export default function Opini() {
               <div className="w-full md:w-4/12 flex flex-col gap-4">
                 {jagaNegeri.slice(1).map((item) => (
                   <div key={item.id} className="flex flex-col gap-3">
-                    <Link className=" gap-3" href={`/detail/${item?.id}`}>
+                    <Link className=" gap-3" href={`/details/${item?.slug}`}>
                       <Image
                         src={item.thumbnailUrl || "/dummy.jpg"}
                         alt={item.title}

components/landing-page/popular-news.tsx

@@ -13,6 +13,7 @@ type Article = {
   categoryName: string;
   createdAt: string;
   createdByName: string;
+  slug: string;
   thumbnailUrl: string;
   categories: {
     title: string;
@@ -104,7 +105,7 @@ export default function PopularNews() {
                 key={news.id}
                 className="relative h-[358px] group overflow-hidden"
               >
-                <Link className=" gap-3" href={`/detail/${news?.id}`}>
+                <Link className=" gap-3" href={`/details/${news?.slug}`}>
                   <Image
                     src={news.thumbnailUrl || "/dummy.jpg"}
                     alt={news.title}

components/table/article-table.tsx

@@ -199,11 +199,11 @@ export default function ArticleTable() {
     initState();
   };
 
-  const copyUrlArticle = async (id: number) => {
+  const copyUrlArticle = async (slug: any) => {
     const url =
       `${window.location.protocol}//${window.location.host}` +
-      "/detail/" +
-      `${id}`;
+      "/details/" +
+      `${slug}`;
     try {
       await navigator.clipboard.writeText(url);
       successToast("Success", "Article Copy to Clipboard");
@@ -263,7 +263,9 @@ export default function ArticleTable() {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56">
-                  <DropdownMenuItem onClick={() => copyUrlArticle(article.id)}>
+                  <DropdownMenuItem
+                    onClick={() => copyUrlArticle(article.slug)}
+                  >
                     <CopyIcon className="mr-2 h-4 w-4" />
                     Copy Url Article
                   </DropdownMenuItem>

service/article.ts

@@ -106,6 +106,13 @@ export async function getArticleById(id: any) {
   return await httpGet(`/articles/${id}`, headers);
 }
 
+export async function getArticleBySlug(slug: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(`/articles/slug/${slug}`, headers);
+}
+
 export async function deleteArticle(id: string) {
   const headers = {
     "content-type": "application/json",