service message table added

apps/hub/app/(app)/admin/message/page.tsx

@@ -1,19 +1,54 @@
+"use client";
+
 import { MessageSquareWarning } from "lucide-react";
 import { MessageForm } from "./_components/messageForm";
+import { PaginatedTable } from "_components/PaginatedTable";
+import { ColumnDef } from "@tanstack/react-table";
+import { Notam } from "@repo/db";
 
 export default function MessagePage() {
 	return (
-		<div className="grid grid-cols-6 gap-4">
+		<>
-			<div className="col-span-full">
+			<div className="grid grid-cols-6 gap-4">
-				<p className="text-2xl font-semibold text-left flex items-center gap-2">
+				<div className="col-span-full">
-					<MessageSquareWarning className="w-5 h-5" /> Service Nachrichten
+					<p className="text-2xl font-semibold text-left flex items-center gap-2">
-				</p>
+						<MessageSquareWarning className="w-5 h-5" /> Service Nachrichten
-			</div>
+					</p>
-			<div className="card bg-base-200 shadow-xl mb-4 col-span-6">
+				</div>
-				<div className="card-body">
+				<div className="card bg-base-200 shadow-xl mb-4 col-span-6">
-					<MessageForm />
+					<div className="card-body">
+						<MessageForm />
+					</div>
 				</div>
 			</div>
-		</div>
+			<PaginatedTable
+				prismaModel="notam"
+				columns={
+					[
+						{
+							accessorKey: "message",
+							header: "Nachricht",
+						},
+						{
+							accessorKey: "color",
+							header: "Status",
+							cell: ({ row }) => {
+								const color = row.getValue("color");
+								return color;
+							},
+						},
+						{
+							accessorKey: "createdAt",
+							header: "Erstellt am",
+							sortDescFirst: false,
+							cell: ({ cell }) => {
+								const date = new Date(cell.getValue() as string);
+								return date.toLocaleDateString();
+							},
+						},
+					] as ColumnDef<Notam>[]
+				}
+			/>
+		</>
 	);
 }