added delete button

package-lock.json

@@ -33,6 +33,7 @@
         "@tanstack/react-query": "^4.29.12",
         "@tanstack/react-table": "^8.9.3",
         "@tremor/react": "^3.18.7",
+        "@types/node": "20.2.3",
         "@types/react-dom": "18.3.1",
         "@vercel/speed-insights": "^1.2.0",
         "autoprefixer": "10.4.14",

package.json

@@ -39,6 +39,7 @@
     "@tanstack/react-query": "^4.29.12",
     "@tanstack/react-table": "^8.9.3",
     "@tremor/react": "^3.18.7",
+    "@types/node": "20.2.3",
     "@types/react-dom": "18.3.1",
     "@vercel/speed-insights": "^1.2.0",
     "autoprefixer": "10.4.14",

src/app/portfolio/[slug]/building-passport/[propertyId]/plans/page.tsx

@@ -1,65 +1,6 @@
 import { getPlans, getPropertyMeta } from "../utils";
-import { formatDateTime, formatNumber, sapToEpc } from "@/app/utils";
-import EpcCard from "@/app/components/building-passport/EpcCard";
-import { Card, CardContent, CardHeader } from "@/app/shadcn_components/ui/card";
-import GoToPlanButton from "@/app/components/building-passport/GoToPlanButton";
-
-function PlanCard({
-  expectedEpcRating,
-  createdAt,
-  totalEstimatedCost,
-  totalSapPoints,
-  planName,
-  planId,
-  isDefault,
-}: {
-  expectedEpcRating: string;
-  createdAt: Date;
-  totalEstimatedCost: number;
-  totalSapPoints: number;
-  planName: string | null;
-  planId: string;
-  isDefault: boolean;
-}) {
-  return (
-    <Card className="flex items-start">
-      <div className="flex-none w-1/5">
-        <EpcCard
-          epcRating={expectedEpcRating}
-          fullMargin={true}
-          expected={true}
-        />
-      </div>
-      <div className="flex-grow pl-4 flex flex-col justify-between">
-        <CardHeader className="flex justify-end items-start">
-          {planName && (
-            <div className="text-lg font-bold mb-2 text-gray-900">
-              {planName}
-            </div>
-          )}
-        </CardHeader>
-        <CardContent>
-          <div className="flex justify-between mb-2">
-            <span>Total cost:</span>
-            <span>£{formatNumber(totalEstimatedCost)}</span>
-          </div>
-          <div className="flex justify-between">
-            <span>Total SAP points:</span>
-            <span>
-              {Math.round((totalSapPoints + Number.EPSILON) * 100) / 100}
-            </span>
-          </div>
-        </CardContent>
-      </div>
-      <div className="flex flex-col justify-between mr-2 self-stretch w-1/5">
-        <div className="text-xs text-gray-400 p-0 text-end">
-          Created: {formatDateTime(createdAt)}
-        </div>
-        <GoToPlanButton planId={planId} />
-      </div>
-    </Card>
-  );
-}
+import { sapToEpc } from "@/app/utils";
+import PlanCard from "./PlanCard";
 
 export default async function RecommendationPlans(props: {
   params: Promise<{ slug: string; propertyId: string }>;
@@ -68,23 +9,18 @@ export default async function RecommendationPlans(props: {
   const propertyMeta = await getPropertyMeta(params.propertyId);
   const plans = await getPlans(params.propertyId);
 
-  // TODO: We don't currently have any visual identification of plans that have been set as default vs not
-
   return (
     <div className="leading-loose tracking-wider">
       <div className="flex py-8 text-lg">Retrofit Plans</div>
 
       <div className="max-w-3xl">
-        {plans.map((plan, index) => {
-          // We  accumulate the cost and the sap points for only the default recommendations
-
+        {plans.map((plan) => {
           const totalEstimatedCost = plan.costOfWorks || 0;
 
           const totalSapPoints =
             (plan.postSapPoints || propertyMeta.currentSapPoints) -
             propertyMeta.currentSapPoints;
 
-          // Placeholder while we return 999 for all sap points
           const expectedSapPoints = Math.min(
             propertyMeta.currentSapPoints + totalSapPoints,
             100
@@ -93,9 +29,8 @@ export default async function RecommendationPlans(props: {
           const expectedEpcRating = sapToEpc(expectedSapPoints);
 
           return (
-            <div key={index} className="mb-4">
+            <div key={plan.id} className="mb-4">
               <PlanCard
-                key={index}
                 expectedEpcRating={expectedEpcRating}
                 createdAt={plan.createdAt}
                 totalEstimatedCost={totalEstimatedCost}

src/app/portfolio/[slug]/components/propertyTableColumns.tsx

@@ -318,16 +318,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
                   Settings
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  className="text-red-500 focus:text-red-700 cursor-pointer"
-                  onClick={() => {
-                    console.log("[UI] Delete clicked for:", propertyId);
 
-                    table.options.meta?.onDeleteProperty?.(propertyId);
-                  }}
-                >
-                  Delete Property
-                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>