N-FIN-6: add category page UI

src/app/categories/columns.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { Category } from '@prisma/client';
+import { CellContext, ColumnDefTemplate } from '@tanstack/table-core';
+
+export const columns = (
+    actionCell: ColumnDefTemplate<CellContext<Category, unknown>>,
+) => {
+
+    return [
+        {
+            accessorKey: 'name',
+            header: 'Name',
+        },
+        {
+            accessorKey: 'color',
+            header: 'Color',
+            cell: ({row}) => {
+                return (
+                    <svg className="h-5" fill={row.original.color} viewBox="0 0 20 20"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="10" cy="10" r="10"/>
+                    </svg>
+                );
+            },
+        },
+        {
+            accessorKey: 'createdAt',
+            header: 'Created at',
+            cell: ({row}) => {
+                const date = row.getValue('createdAt') as Date;
+                return date.toDateString();
+            },
+        },
+        {
+            accessorKey: 'updatedAt',
+            header: 'Updated at',
+            cell: ({row}) => {
+                const date = row.getValue('updatedAt') as Date;
+                return date.toDateString();
+            },
+        },
+        {
+            id: 'actions',
+            cell: actionCell,
+        },
+    ] as ColumnDef<Category>[];
+};

src/app/categories/page.tsx

@@ -1,7 +1,30 @@
+import { getUser } from '@/auth';
+import { prismaClient } from '@/prisma';
+import React from 'react';
+import CategoryPageClientContent from '@/components/categoryPageClientComponents';
+import categoryCreateUpdate from '@/lib/actions/categoryCreateUpdate';
+import categoryDelete from '@/lib/actions/categoryDelete';
+
 export default async function CategoriesPage() {
+
+    const user = await getUser();
+
+    const categories = await prismaClient.category.findMany({
+        where: {
+            userId: user?.id,
+        },
+        orderBy: [
+            {
+                name: 'asc',
+            },
+        ],
+    });
+
     return (
-        <main className="flex items-center justify-center min-h-screen text-3xl">
-            Categories
-        </main>
+        <CategoryPageClientContent
+            categories={categories}
+            onSubmit={categoryCreateUpdate}
+            onDelete={categoryDelete}
+            className="flex flex-col justify-center space-y-4 p-10"/>
     );
 }