Adding basic portfolio plan table

src/app/components/portfolio/plan/PlanTable.tsx

@@ -16,17 +16,16 @@ import {
   TableRow,
 } from "@/app/shadcn_components/ui/table";
 
-import { Feature, GeneralFeature } from "@/app/db/schema/property";
+import { PortfolioPlanRecommendation } from "@/app/db/schema/recommendations";
 
-interface DataTableProps<T extends Feature | GeneralFeature> {
+interface DataTableProps<T extends PortfolioPlanRecommendation> {
   columns: ColumnDef<T>[];
   data: T[];
 }
 
-export default function FeatureTable<T extends Feature | GeneralFeature>({
-  data,
-  columns,
-}: DataTableProps<T>) {
+export default function PortfolioPlanTable<
+  T extends PortfolioPlanRecommendation
+>({ data, columns }: DataTableProps<T>) {
   // Initialise the table
 
   const table = useReactTable({

src/app/components/portfolio/plan/PlanTableColumns.tsx

@@ -1,24 +1,62 @@
 "use client";
 
 import { PortfolioPlanRecommendation } from "@/app/db/schema/recommendations";
-import { Badge } from "@/app/shadcn_components/ui/badge";
+import { formatNumber } from "@/app/utils";
 import { ColumnDef } from "@tanstack/react-table";
 
-export const retrofitColumns: ColumnDef<PortfolioPlanRecommendation>[] = [
+const formattedQuantity = {
+  m2: "m²",
+};
+
+const formattedMeasure = {
+  internal_wall_insulation: "Internal Wall Insulation",
+  external_wall_insulation: "External Wall Insulation",
+};
+
+export const portfolioPlanColumns: ColumnDef<PortfolioPlanRecommendation>[] = [
   {
     accessorKey: "materialType",
     header: "Retrofit Measure",
+    cell: ({ row }) => {
+      return (
+        <div>
+          {
+            formattedMeasure[
+              row.original.materialType as keyof typeof formattedMeasure
+            ]
+          }
+        </div>
+      );
+    },
   },
   {
-    accessorKey: "Number o",
-    header: "Number of Properties",
+    accessorKey: "numberOfProperties",
+    header: "Number of properties",
+    cell: ({ row }) => {
+      return (
+        <div className="text-center">{row.original.numberOfProperties}</div>
+      );
+    },
   },
   {
     accessorKey: "quantity",
-    header: "Number of Properties",
+    header: "Quantity required",
+    cell: ({ row }) => {
+      return (
+        <div>
+          {row.original.quantity +
+            formattedQuantity[
+              row.original.quantityUnit as keyof typeof formattedQuantity
+            ]}
+        </div>
+      );
+    },
   },
   {
     accessorKey: "estimatedCost",
     header: "Estimated Cost",
+    cell: ({ row }) => {
+      return <div>{"£" + formatNumber(row.original.estimatedCost)}</div>;
+    },
   },
 ];

src/app/portfolio/[slug]/(portfolio)/plan/page.tsx

@@ -1,4 +1,6 @@
+import PortfolioPlanTable from "@/app/components/portfolio/plan/PlanTable";
 import { getPortfolioPlan } from "../../utils";
+import { portfolioPlanColumns } from "@/app/components/portfolio/plan/PlanTableColumns";
 
 export default async function PortfolioPlan({
   params,
@@ -8,5 +10,16 @@ export default async function PortfolioPlan({
   const portfolioId = params.slug;
   const portfolioPlan = await getPortfolioPlan(portfolioId);
 
-  return <section>{String(portfolioPlan)}</section>;
+  return (
+    <>
+      <div className="flex justify-center mt-8">
+        {
+          <PortfolioPlanTable
+            data={portfolioPlan}
+            columns={portfolioPlanColumns}
+          />
+        }
+      </div>
+    </>
+  );
 }