feat: styling tablecolumn list event admin

Author: mpsalunggg

src/features/events/components/ColumnsEventListAdmin.tsx

@@ -0,0 +1,56 @@
+"use client";
+import Badge from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { EventType } from "@/domains/Events";
+import { formatDateEvent } from "@/lib/format";
+import { ColumnDef } from "@tanstack/react-table";
+import { Edit2, SquareChartGantt } from "lucide-react";
+
+export const columnsEventListAdmin: ColumnDef<EventType>[] = [
+  {
+    accessorKey: "title",
+    header: "Event Title",
+  },
+  {
+    accessorKey: "date_event",
+    header: "Date",
+    cell: ({ row }) => <p>{formatDateEvent(row.original.date_event)}</p>,
+  },
+  {
+    accessorKey: "location",
+    header: "Location",
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div>
+        <Badge variant={row.original.status}>{row.original.status}</Badge>
+      </div>
+    ),
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    cell: ({ row }) => (
+      <div className="flex gap-2">
+        <Button
+          size="icon"
+          variant="outline"
+          className="cursor-poiner h-8 w-8 cursor-pointer border-blue-500 bg-blue-500 text-white hover:bg-blue-600 hover:text-white"
+          onClick={() => console.log("Edit event:", row.original.id)}
+        >
+          <Edit2 className="h-4 w-4" />
+        </Button>
+        <Button
+          size="icon"
+          variant="outline"
+          className="h-8 w-8 cursor-pointer border-emerald-500 bg-emerald-500 text-white hover:bg-emerald-600 hover:text-white"
+          onClick={() => console.log("View event:", row.original.id)}
+        >
+          <SquareChartGantt className="h-4 w-4" />
+        </Button>
+      </div>
+    ),
+  },
+];

src/features/events/components/MyEventCard.tsx

@@ -3,7 +3,7 @@ import { Clock, Pin } from "lucide-react";
 import Badge from "@/components/ui/Badge";
 import { Card, CardContent, CardFooter } from "@/components/ui/Card";
 import { UserEventType } from "@/domains/Events";
-import { useFormatDateEvent } from "@/lib/format";
+import { formatDateEvent } from "@/lib/format";
 
 const MyEventCard = ({ data }: { data: UserEventType }) => {
   const { order_no, status } = data;
@@ -38,7 +38,7 @@ const MyEventCard = ({ data }: { data: UserEventType }) => {
           <CardFooter className="mt-auto flex flex-col items-start gap-2 px-4 pt-3 pb-4">
             <div className="flex items-center gap-2">
               <Clock size={15} className="text-gray-500" />
-              <p className="text-sm">{useFormatDateEvent(data.event_detail.date as string) || "-"}</p>
+              <p className="text-sm">{formatDateEvent(data.event_detail.date as string) || "-"}</p>
             </div>
             <div className="flex items-center gap-2">
               <Pin size={15} className="text-gray-500" />

src/features/events/pages/AdminEventsListPage.tsx

@@ -3,12 +3,11 @@
 import TableData from "@/components/common/TableData";
 import { Button } from "@/components/ui/Button";
 import { useRouter } from "@/lib/navigation";
-import { ColumnDef } from "@tanstack/react-table";
 import { Plus } from "lucide-react";
 import { useEventsAdmin } from "../hooks/useEvent";
-import { EventType } from "@/domains/Events";
 import { useQueryParams } from "@/hooks";
 import Loader from "@/components/common/Loader";
+import { columnsEventListAdmin } from "../components/ColumnsEventListAdmin";
 
 const AdminEventsListPage = () => {
   const router = useRouter();
@@ -18,42 +17,8 @@ const AdminEventsListPage = () => {
   const searchQuery = getParam("search", "");
 
   const { data: eventsResponse, isLoading } = useEventsAdmin(currentPage, itemsPerPage, searchQuery);
-  console.log(eventsResponse);
   const totalPages = eventsResponse?.pagination?.total_pages || 1;
 
-  const columns: ColumnDef<EventType>[] = [
-    {
-      accessorKey: "title",
-      header: "Event Title",
-    },
-    {
-      accessorKey: "date_event",
-      header: "Date",
-    },
-    {
-      accessorKey: "location",
-      header: "Location",
-    },
-    {
-      accessorKey: "status",
-      header: "Status",
-    },
-    {
-      id: "actions",
-      header: "Actions",
-      cell: ({ row }) => (
-        <div className="flex gap-2">
-          <Button size="sm" variant="outline" onClick={() => console.log("Edit event:", row.original.id)}>
-            Edit
-          </Button>
-          <Button size="sm" variant="outline" onClick={() => console.log("View event:", row.original.id)}>
-            View
-          </Button>
-        </div>
-      ),
-    },
-  ];
-
   const createEventButton = (
     <Button
       className="bg-hmc-base-blue hover:bg-hmc-base-blue/90 cursor-pointer"
@@ -76,7 +41,7 @@ const AdminEventsListPage = () => {
       ) : (
         <TableData
           data={eventsResponse?.data || []}
-          columns={columns}
+          columns={columnsEventListAdmin}
           searchable
           searchPlaceholder="Search events"
           rightAction={createEventButton}

src/lib/format.ts

@@ -22,7 +22,7 @@ export function useFormatPrice(price?: number) {
   }).format(price as number);
 }
 
-export const useFormatDateEvent = (dateString: string): string => {
+export const formatDateEvent = (dateString: string): string => {
   const date = new Date(dateString);
   return new Intl.DateTimeFormat("id-ID", {
     weekday: "long",