moved and amended some stuff

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

@@ -0,0 +1,98 @@
+"use client";
+
+import { TrashIcon } from "@heroicons/react/24/outline";
+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";
+import { formatDateTime, formatNumber } from "@/app/utils";
+
+export default 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="relative flex items-start">
+      {/* Delete button (top-right, subtle) */}
+      <button
+        type="button"
+        onClick={() =>
+          console.log("going to delete soon", { planId, isDefault })
+        }
+        className="
+          absolute top-3 right-3
+          rounded-md p-1.5
+          text-gray-400
+          hover:text-red-600 hover:bg-red-50
+          focus:outline-none focus:ring-2 focus:ring-red-400/40
+          transition
+        "
+        aria-label="Delete plan"
+        title="Delete plan"
+      >
+        <TrashIcon className="h-4 w-4" />
+      </button>
+
+      {/* EPC card — unchanged */}
+      <div className="flex-none w-1/5">
+        <EpcCard
+          epcRating={expectedEpcRating}
+          fullMargin={true}
+          expected={true}
+        />
+      </div>
+
+      {/* Main content */}
+      <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>
+
+      {/* Right column */}
+      <div className="flex flex-col justify-end mr-2 self-stretch w-1/5">
+        <div className="flex flex-col items-end gap-2">
+          {/* <div className="text-xs text-gray-400">
+            Created {formatDateTime(createdAt)}
+          </div> */}
+
+          <GoToPlanButton planId={planId} />
+        </div>
+      </div>
+
+    </Card>
+  );
+}

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

@@ -121,55 +121,6 @@ export default function PropertyTable({
   const [previewError, setPreviewError] = useState<string | null>(null);
   const [deleteLoading, setDeleteLoading] = useState(false);
 
-  /* ----------------------------------------
-     Fetch delete preview
-  ----------------------------------------- */
-  useEffect(() => {
-    if (!deletePropertyId) return;
-
-    setPreviewLoading(true);
-    setPreviewError(null);
-    setDeletePreview(null);
-
-    fetch(`/api/properties/${deletePropertyId}/delete/preview`, {
-      method: "POST",
-    })
-      .then(async (res) => {
-        if (!res.ok) throw new Error("Failed to fetch delete preview");
-        return res.json();
-      })
-      .then((data) => setDeletePreview(data.preview))
-      .catch((err) => setPreviewError(err.message))
-      .finally(() => setPreviewLoading(false));
-  }, [deletePropertyId]);
-
-  /* ----------------------------------------
-     Confirm delete
-  ----------------------------------------- */
-  const handleConfirmDelete = async () => {
-    if (!deletePropertyId) return;
-
-    setDeleteLoading(true);
-
-    try {
-      await fetch(`/api/properties/${deletePropertyId}/delete/confirm`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ confirm: true }),
-      });
-
-      // Close modal
-      setDeletePropertyId(null);
-      setDeletePreview(null);
-
-      // ✅ THIS FIXES THE GHOST ROW
-      await refetch();
-    } catch (err) {
-      console.error("[DELETE] failed", err);
-    } finally {
-      setDeleteLoading(false);
-    }
-  };
 
   return (
     <div className="flex justify-center">