added User edit

apps/hub/app/(app)/admin/user/[id]/page.tsx

@@ -0,0 +1,22 @@
+import { PrismaClient } from '@repo/db';
+
+export default async ({ params }: { params: Promise<{ id: string }> }) => {
+  const prisma = new PrismaClient();
+  const { id } = await params;
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: id,
+    },
+  });
+  console.log(user);
+  return (
+    <div>
+      <h1>
+        {user?.firstname} {user?.lastname}
+      </h1>
+      <p>{user?.email}</p>
+      {/* TODO: Hier Nutzerdaten bearbeiten */}
+    </div>
+  );
+};

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

@@ -1,8 +1,10 @@
+import Link from 'next/link';
 import { PaginatedTable } from '../../../_components/PaginatedTable';
 
 export default async () => {
   return (
     <PaginatedTable
+      showEditButton
       prismaModel="user"
       columns={[
         {
@@ -21,10 +23,6 @@ export default async () => {
           header: 'Email',
           accessorKey: 'email',
         },
-        {
-          header: 'Role',
-          accessorKey: 'role',
-        },
       ]}
     />
   );

apps/hub/app/_components/PaginatedTable.tsx

@@ -8,11 +8,13 @@ interface PaginatedTableProps<TData>
   extends Omit<SortableTableProps<TData>, 'data'> {
   prismaModel: keyof PrismaClient;
   rowsPerPage?: number;
+  showEditButton?: boolean;
 }
 
 export function PaginatedTable<TData>({
   prismaModel,
   rowsPerPage = 10,
+  showEditButton = false,
   ...restProps
 }: PaginatedTableProps<TData>) {
   const [data, setData] = useState<TData[]>([]);
@@ -30,7 +32,12 @@ export function PaginatedTable<TData>({
 
   return (
     <div className="space-y-4">
-      <SortableTable data={data} {...restProps} />
+      <SortableTable
+        data={data}
+        prismaModel={prismaModel}
+        showEditButton={showEditButton}
+        {...restProps}
+      />
       <Pagination
         totalPages={Math.ceil(total / rowsPerPage)}
         page={page}

apps/hub/app/_components/Table.tsx

@@ -9,21 +9,43 @@ import {
   flexRender,
 } from '@tanstack/react-table';
 import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from 'lucide-react'; // Icons for sorting
+import Link from 'next/link';
+import { PrismaClient } from '@repo/db';
 
 export interface SortableTableProps<TData> {
   data: TData[];
   columns: ColumnDef<TData>[];
+  showEditButton?: boolean;
+  prismaModel?: keyof PrismaClient;
 }
 
 export default function SortableTable<TData>({
   data,
   columns,
+  prismaModel,
+  showEditButton,
 }: SortableTableProps<TData>) {
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const table = useReactTable({
     data,
-    columns,
+    columns: showEditButton
+      ? [
+          ...columns,
+          {
+            header: 'Actions',
+            cell: ({ row }) => (
+              <div className="flex items-center gap-1">
+                <Link
+                  href={`/admin/${prismaModel as string}/${(row.original as any).id}`}
+                >
+                  <button className="btn">Edit</button>
+                </Link>
+              </div>
+            ),
+          },
+        ]
+      : columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     onSortingChange: setSorting,

apps/hub/app/_components/ui/Nav.tsx

@@ -29,7 +29,7 @@ export const VerticalNav = () => {
             </summary>
             <ul>
               <li>
-                <Link href="/admin/users">User</Link>
+                <Link href="/admin/user">User</Link>
               </li>
             </ul>
           </details>