N-FIN-42: show default category on entity page

src/app/entities/columns.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { Entity } from '@prisma/client';
+import { Category, Entity } from '@prisma/client';
 import { CellContext, ColumnDefTemplate } from '@tanstack/table-core';
 import { format } from 'date-fns';
 
 export const columns = (
     actionCell: ColumnDefTemplate<CellContext<Entity, unknown>>,
+    categories: Category[],
 ) => {
 
     return [
@@ -19,6 +20,30 @@ export const columns = (
             header: 'Type',
             size: 100,
         },
+        {
+            accessorKey: 'defaultCategoryId',
+            header: 'Default Category',
+            cell: ({row}) => {
+                const category = categories.find((category) => category.id === row.original.defaultCategoryId);
+                return (
+                    <>
+                        {
+                            category && (
+                                <div className="flex items-center space-x-4">
+                                    <svg className="h-5" fill={category?.color} viewBox="0 0 20 20"
+                                         xmlns="http://www.w3.org/2000/svg">
+                                        <circle cx="10" cy="10" r="10"/>
+                                    </svg>
+                                    <p>{category?.name ?? '-'}</p>
+                                </div>
+                            )
+                        }
+
+                    </>
+                );
+            },
+            size: 200,
+        },
         {
             accessorKey: 'createdAt',
             header: 'Created at',

src/app/entities/page.tsx

@@ -23,9 +23,24 @@ export default async function EntitiesPage() {
         ],
     });
 
+    const categories = await prismaClient.category.findMany({
+        where: {
+            userId: user?.id,
+        },
+        orderBy: [
+            {
+                name: 'asc',
+            },
+            {
+                id: 'asc',
+            },
+        ],
+    });
+
     return (
         <EntityPageClientContent
             entities={entities}
+            categories={categories}
             onSubmit={entityCreateUpdate}
             onDelete={entityDelete}
             className="flex flex-col justify-center space-y-4"/>

src/components/entityPageClientComponents.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Entity } from '@prisma/client';
+import { Category, Entity } from '@prisma/client';
 import React, { useState } from 'react';
 import { CellContext } from '@tanstack/table-core';
 import { Button } from '@/components/ui/button';
@@ -27,8 +27,9 @@ import {
 import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 
-export default function EntityPageClientContent({entities, onSubmit, onDelete, className}: {
+export default function EntityPageClientContent({entities, categories, onSubmit, onDelete, className}: {
     entities: Entity[],
+    categories: Category[],
     onSubmit: (data: z.infer<typeof entityFormSchema>) => Promise<ActionResponse>,
     onDelete: (id: number) => Promise<ActionResponse>,
     className: string,
@@ -184,7 +185,7 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
             {/* Data Table */}
             <DataTable
                 className="w-full"
-                columns={columns(actionCell)}
+                columns={columns(actionCell, categories)}
                 data={filterEntities(entities, filter)}
                 pagination/>