Update styles for article form and table (#33)

* style: update styles for article form and table

* style: remove Tailwind styling when displaying article details

app/admin/dashboard/article/[slug]/edit/page.tsx

@@ -3,8 +3,8 @@
 import React, { FC, useEffect, useState } from 'react';
 import { notFound } from 'next/navigation';
 import { useRouter } from 'next/navigation';
-import { Article } from "../../lib/definition";
 import ArticleForm from '../../components/articleForm';
+import { Article } from '@prisma/client';
 
 interface EditArticlePageProps {
   params: Promise<{ slug: string }>; // Mengubah menjadi Promise yang harus dibongkar

app/admin/dashboard/article/[slug]/page.tsx

@@ -1,25 +1,55 @@
+"use client"
+
 import { notFound } from 'next/navigation';
-import { PrismaClient } from '@prisma/client';
+import { Article, PrismaClient } from '@prisma/client';
 import { Badge } from '@/components/ui/badge';
 import Link from 'next/link';
 import { ChevronLeft } from 'lucide-react';
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
 
 const prisma = new PrismaClient();
 
 interface PageProps {
   params: Promise<{ slug: string }>
 }
 
-export default async function Page({ params }: PageProps) {
-  const { slug } = await params;
+export default function Page({ params }: PageProps) {
+  const [slug, setSlug] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [existingArticle, setExistingArticle] = useState<Article | null>(null);
+  // const { slug } = await params;
+
+  useEffect(() => {
+    const getParams = async () => {
+      const resolvedParams = await params;
+      setSlug(resolvedParams.slug);
+    };
+    getParams();
+  }, [params]);
+
+  useEffect(() => {
+    const fetchArticle = async () => {
+      if (!slug) return;
+      const response = await fetch(`/api/article/${slug}`);
+      const articleData = await response.json();
+
+      if (!articleData) return notFound();
+      articleData.date = new Date(articleData.date)
+      setExistingArticle(articleData);
+      setLoading(false);
+    };
+
+    fetchArticle();
+  }, [slug]);
 
-  // Fetch artikel dari database
-  const existingArticle = await prisma.article.findUnique({
-    where: { slug },
-  });
+  if (loading) {
+    return <div>Loading...</div>;
+  }
 
-  if (!existingArticle) return notFound();
+  if (!existingArticle) {
+    return <div>Article not found</div>;
+  }
 
   return (
     <div className="px-6 py-4 max-w-[80rem] mx-auto flex flex-col gap-8">
@@ -48,7 +78,7 @@ export default async function Page({ params }: PageProps) {
       </div>
 
       {/* Content Section */}
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 prose">
         <p
           className="text-justify text-slate-700 leading-relaxed"
           dangerouslySetInnerHTML={{

app/admin/dashboard/article/components/actionButton.tsx

@@ -52,7 +52,7 @@ const ActionButton: FC<ActionButtonProps> = ({ data }) => {
             // Tindakan setelah artikel berhasil dihapus
             toast.success('Article deleted successfully');
             router.refresh();
-            router.push('/admin/dashboard');
+            router.push('/admin/dashboard/article');
             // auto refresh
         } else {
             toast.error('Failed to delete article');

app/admin/dashboard/article/components/articleColumns.tsx

@@ -3,16 +3,14 @@
 import { ColumnDef } from "@tanstack/react-table";
 import ActionButton from "./actionButton";
 import { Article } from "../lib/definition";
-import Image from "next/image"; // Import Image from next/image
 
 
 export const columns: ColumnDef<Article>[] = [
   {
-    accessorKey: "id",
-    header: "ID",
+    id: "count",
+    header: "#",
     cell: ({ row }) => {
-      const article = row.original;
-      return <div className="py-4">{row.index + 1}</div>;
+      return <div className="py-4">{row.index + 1}.</div>;
     },
   },
   {
@@ -41,45 +39,6 @@ export const columns: ColumnDef<Article>[] = [
       return <div className="py-4">{formattedDate}</div>;
     },
   },
-  {
-    accessorKey: "content",
-    header: "Content",
-    cell: ({ row }) => {
-      const article = row.original;
-      const truncatedContent =
-        article.content.length > 100
-          ? `${article.content.slice(0, 100)}...`
-          : article.content;
-
-      return (
-        <div className="py-4 whitespace-nowrap overflow-hidden text-ellipsis max-w-[300px]">
-          {truncatedContent}
-        </div>
-      );
-    },
-  },
-  // {
-  //   accessorKey: "banner",
-  //   header: "Banner",
-  //   cell: ({ row }) => {
-  //     const article = row.original;
-
-  //     // Handle empty or invalid `banner` values
-  //     const imageSrc = article.banner ? article.banner : "banner.png";
-
-  //     return (
-  //       <div className="py-4">
-  //         <img
-  //           src="/banner.png" // Use a placeholder image
-  //           alt="article banner"
-  //           width={60} // Set fixed width
-  //           height={60} // Set fixed height
-  //           className="rounded-full" // Retain rounded shape
-  //         />
-  //       </div>
-  //     );
-  //   },
-  // },
   {
     id: "action",
     header: () => {