Merge pull request #221 from Hestia-Homes/bug/calico-project-reporting

Bug/calico project reporting

src/app/api/property-meta/[propertyId]/route.ts

@@ -26,6 +26,7 @@ export async function GET(request: NextRequest, props: { params: Promise<{ prope
       tenure: true,
       currentEpcRating: true,
       currentSapPoints: true,
+      originalSapPoints: true,
       updatedAt: true,
       currentValuation: true,
     },

src/app/components/building-passport/CurrentEfficiencyCard.tsx

@@ -0,0 +1,139 @@
+import { sapToEpc } from "@/app/utils";
+import { EpcInfoTooltip } from "./EpcInfoTooltip";
+import { LodgedEpcTooltip } from "./LodgedEpcTooltip";
+
+interface CurrentEfficiencyCardProps {
+  epcRating: string | null;
+  sapPoints: number;
+  originalSapPoints?: number | null;
+}
+
+function getEpcHex(letter: string | null | undefined): string {
+  switch (letter?.toUpperCase()) {
+    case "A": return "#117d58";
+    case "B": return "#2da55c";
+    case "C": return "#8dbd40";
+    case "D": return "#f7cd14";
+    case "E": return "#f3a96a";
+    case "F": return "#ef8026";
+    case "G": return "#e41e3b";
+    default:  return "#9ca3af";
+  }
+}
+
+const EPC_STOPS = [
+  { sap: 0,  color: "#e41e3b" }, // G
+  { sap: 21, color: "#ef8026" }, // F
+  { sap: 39, color: "#f3a96a" }, // E
+  { sap: 55, color: "#f7cd14" }, // D
+  { sap: 69, color: "#8dbd40" }, // C
+  { sap: 81, color: "#2da55c" }, // B
+  { sap: 92, color: "#117d58" }, // A
+];
+
+function getEpcGradient(sapPoints: number, epcHex: string): string {
+  if (sapPoints <= 0) return epcHex;
+  const stops = EPC_STOPS.filter(s => s.sap <= sapPoints);
+  const gradientStops = stops.map(s => {
+    const pct = s.sap === 0 ? 0 : (s.sap / sapPoints) * 100;
+    return `${s.color} ${pct.toFixed(1)}%`;
+  });
+  gradientStops.push(`${epcHex} 100%`);
+  return `linear-gradient(to right, ${gradientStops.join(", ")})`;
+}
+
+function getEpcDescription(letter: string | null | undefined): string {
+  switch (letter?.toUpperCase()) {
+    case "A":
+    case "B": return "This property is performing at or above modern energy standards.";
+    case "C": return "This property meets modern energy performance benchmarks.";
+    case "D": return "This property is performing slightly below modern energy standards.";
+    case "E": return "This property is performing below modern energy standards.";
+    case "F":
+    case "G": return "This property is performing significantly below modern energy standards.";
+    default:  return "Energy performance data is not yet available for this property.";
+  }
+}
+
+export function CurrentEfficiencyCard({
+  epcRating,
+  sapPoints,
+  originalSapPoints,
+}: CurrentEfficiencyCardProps) {
+  const epcHex = getEpcHex(epcRating);
+  const lodgedLetter = originalSapPoints ? sapToEpc(originalSapPoints) : null;
+  const showLodgedBadge = lodgedLetter !== null && lodgedLetter !== epcRating;
+  const lodgedHex = getEpcHex(lodgedLetter);
+
+  return (
+    <section className="col-span-12 lg:col-span-5 bg-white rounded-2xl p-10 flex flex-col justify-between shadow-sm border border-gray-100 relative overflow-hidden">
+      <div
+        className="absolute top-0 right-0 w-72 h-72 rounded-full blur-3xl -mr-20 -mt-20 opacity-10"
+        style={{ backgroundColor: epcHex }}
+      />
+
+      {showLodgedBadge && (
+        <div className="absolute top-3 right-3 z-20 rounded-xl border-2 border-brandbrown/60 bg-white/90 px-3 py-2.5 shadow-sm">
+          <div className="flex items-center gap-1 mb-1">
+            <span className="text-[9px] font-bold uppercase tracking-widest text-brandbrown">
+              Lodged EPC
+            </span>
+            <LodgedEpcTooltip />
+          </div>
+          <div className="flex items-baseline gap-1.5">
+            <span
+              className="text-2xl font-black font-manrope leading-none"
+              style={{ color: lodgedHex }}
+            >
+              {lodgedLetter}
+            </span>
+            {originalSapPoints != null && (
+              <span className="text-xs font-bold text-gray-400">
+                / {Math.round(originalSapPoints)}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="relative z-10">
+        <div className="flex items-center gap-2 mb-6">
+          <p className="font-manrope text-xs font-bold text-brandmidblue uppercase tracking-widest">
+            Current Efficiency State
+          </p>
+          <EpcInfoTooltip />
+        </div>
+        <div className="flex items-baseline gap-4 mb-4">
+          <span
+            className="text-[110px] font-black font-manrope leading-none tracking-tighter"
+            style={{ color: epcHex }}
+          >
+            {epcRating ?? "—"}
+          </span>
+          <span className="text-4xl font-bold font-manrope text-gray-400">
+            / {sapPoints || "—"}
+          </span>
+        </div>
+        <p className="text-gray-500 font-medium text-sm max-w-xs leading-relaxed">
+          {getEpcDescription(epcRating)}
+        </p>
+      </div>
+
+      <div className="mt-10 space-y-3">
+        <div className="relative h-2.5 w-full bg-gray-100 rounded-full overflow-hidden">
+          <div
+            className="absolute inset-y-0 left-0 rounded-full"
+            style={{
+              width: `${Math.min(100, Math.max(2, sapPoints))}%`,
+              background: getEpcGradient(sapPoints, epcHex),
+            }}
+          />
+        </div>
+        <div className="flex justify-between text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+          <span>Very Inefficient</span>
+          <span>Very Efficient</span>
+        </div>
+      </div>
+    </section>
+  );
+}

src/app/components/building-passport/LodgedEpcTooltip.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/app/shadcn_components/ui/tooltip";
+
+export function LodgedEpcTooltip() {
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-brandbrown/60 hover:text-brandbrown transition-colors focus:outline-none"
+            aria-label="Lodged EPC rating explanation"
+          >
+            <QuestionMarkCircleIcon className="w-3.5 h-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent
+          side="left"
+          className="max-w-xs p-0 overflow-hidden border-gray-200 shadow-xl"
+          sideOffset={8}
+        >
+          <div className="px-4 pt-3 pb-2 bg-gray-50 border-b border-gray-100">
+            <p className="text-xs font-bold text-gray-700 uppercase tracking-widest">Lodged EPC Rating</p>
+            <p className="text-[11px] text-gray-400 mt-0.5">From the official EPC register</p>
+          </div>
+          <div className="px-4 py-3 space-y-2.5">
+            <p className="text-[11px] text-gray-500 leading-snug">
+              This is the rating recorded on the{" "}
+              <span className="font-semibold text-gray-700">official EPC register</span> at the time of the last survey.
+            </p>
+            <p className="text-[11px] text-gray-500 leading-snug">
+              Your <span className="font-semibold text-gray-700">current rating</span> may differ because we re-model this property under{" "}
+              <span className="font-semibold text-gray-700">SAP 10</span>, which uses updated energy factors and can produce a different result than the original survey.
+            </p>
+            <p className="text-[11px] text-gray-500 leading-snug">
+              We also re-model when the EPC has{" "}
+              <span className="font-semibold text-gray-700">expired</span> or is{" "}
+              <span className="font-semibold text-gray-700">invalid</span>, or when you have told us the property has{" "}
+              <span className="font-semibold text-gray-700">changed</span> since the last survey.
+            </p>
+          </div>
+          <div className="px-4 py-2.5 bg-gray-50 border-t border-gray-100">
+            <p className="text-[11px] text-gray-400 leading-snug">
+              SAP 10 is the latest version of the{" "}
+              <span className="font-semibold text-gray-600">Standard Assessment Procedure</span>, introduced to better reflect modern energy use and lower-carbon fuels.
+            </p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

src/app/db/schema/crm/hubspot_deal_table.ts

@@ -48,7 +48,7 @@ export const hubspotDealData = pgTable("hubspot_deal_data", {
   damnpMouldAndRepairComments: text("damp_mould_and_repairs_comments"),
   confirmedSurveyDate: timestamp("confirmed_survey_date", { precision: 6, withTimezone: true }),
   confirmedSurveyTime: text("confirmed_survey_time"),
-  SurveyedDate: timestamp("surveyed_date", { precision: 6, withTimezone: true }),
+  surveyedDate: timestamp("surveyed_date", { precision: 6, withTimezone: true }),
 
   createdAt: timestamp("created_at", { precision: 6, withTimezone: true })
     .defaultNow()

src/app/db/schema/property.ts

@@ -34,6 +34,7 @@ export interface PropertyMeta {
   tenure: string;
   currentEpcRating: string;
   currentSapPoints: number;
+  originalSapPoints: number | null;
   updatedAt: string;
   currentValuation: number | null;
   detailsEpc: {

src/app/portfolio/[slug]/(portfolio)/your-projects/live/CompletionTrendsChart.tsx

@@ -110,9 +110,9 @@ const DESIGN_TYPE_ORDER = [
 
 function getMondayOfWeek(date: Date): string {
   const d = new Date(date);
-  const day = d.getDay();
-  d.setDate(d.getDate() - (day === 0 ? 6 : day - 1));
-  d.setHours(0, 0, 0, 0);
+  const day = d.getUTCDay();
+  d.setUTCDate(d.getUTCDate() - (day === 0 ? 6 : day - 1));
+  d.setUTCHours(0, 0, 0, 0);
   return d.toISOString().split("T")[0];
 }
 
@@ -132,7 +132,7 @@ function fillWeekGaps(keys: string[]): string[] {
   const end = new Date(sorted[sorted.length - 1]);
   while (current <= end) {
     result.push(current.toISOString().split("T")[0]);
-    current.setDate(current.getDate() + 7);
+    current.setUTCDate(current.getUTCDate() + 7);
   }
   return result;
 }
@@ -314,14 +314,28 @@ export default function CompletionTrendsChart({
   const isDesign       = metric === "design";
   const isStacked = isCoordination || isAssessments || isLodgement || isDesign;
 
-  // External assessments with no date
+  // Assessments (retrofit or EPC) with no date
   const undatedAssessments = isAssessments
     ? deals.filter((d) => {
         const o = d.outcome ?? "";
-        return (o === "Surveyed" || o === "Surveyed - Pending Upload") && !d.surveyedDate;
+        return (
+          (o === "Surveyed" || o === "Surveyed - Pending Upload" || o === "EPC Completed") &&
+          !d.surveyedDate
+        );
       })
     : [];
 
+  // Dated assessments broken down by type — used for summary badges
+  const retrofitDeals = isAssessments
+    ? deals.filter((d) => {
+        const o = d.outcome ?? "";
+        return (o === "Surveyed" || o === "Surveyed - Pending Upload") && !!d.surveyedDate;
+      })
+    : [];
+  const epcDeals = isAssessments
+    ? deals.filter((d) => d.outcome === "EPC Completed" && !!d.surveyedDate)
+    : [];
+
   // Build chart data
   let chartData: Record<string, string | number>[];
   let categories: string[];
@@ -363,7 +377,37 @@ export default function CompletionTrendsChart({
           <Title className="text-brandblue text-lg font-bold">
             Trends Over Time
           </Title>
-          {totalCompleted !== null && (
+          {isAssessments ? (
+            <div className="flex flex-wrap gap-2">
+              {([
+                { label: "Retrofit Assessments", dealList: retrofitDeals },
+                { label: "EPCs", dealList: epcDeals },
+              ] as const).filter(({ dealList }) => dealList.length > 0).map(({ label, dealList }) => (
+                <button
+                  key={label}
+                  type="button"
+                  onClick={() =>
+                    onOpenTable?.(
+                      `Completed — ${label}`,
+                      dealList,
+                      ["dealname", "landlordPropertyId", "outcome", "surveyedDate"],
+                      {
+                        dealname: "Address",
+                        landlordPropertyId: "Property Ref.",
+                        outcome: "Work Type",
+                        surveyedDate: "Survey Date",
+                      },
+                    )
+                  }
+                  className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-gradient-to-r from-brandmidblue/10 to-brandlightblue/50 border border-brandblue/20 shadow-sm hover:border-brandblue/40 hover:shadow-md transition-all cursor-pointer"
+                >
+                  <span className="text-brandmidblue font-bold text-base leading-none">{dealList.length}</span>
+                  <span className="text-xs text-brandblue font-medium">{label}</span>
+                  <span className="text-brandmidblue text-xs leading-none">✦</span>
+                </button>
+              ))}
+            </div>
+          ) : totalCompleted !== null && (
             <div className="inline-flex items-center gap-2 self-start px-3 py-1.5 rounded-full bg-gradient-to-r from-brandmidblue/10 to-brandlightblue/50 border border-brandblue/20 shadow-sm">
               <span className="text-brandmidblue font-bold text-base leading-none" suppressHydrationWarning>{totalCompleted}</span>
               <span className="text-xs text-brandblue font-medium">

src/app/portfolio/[slug]/(portfolio)/your-projects/live/SurveyIssuesPanel.tsx

@@ -5,7 +5,7 @@ import { AlertCircle } from "lucide-react";
 import { Card, CardContent } from "@/app/shadcn_components/ui/card";
 import type { ClassifiedDeal } from "./types";
 
-const SUCCESSFUL_OUTCOMES = new Set(["Surveyed", "Surveyed - Pending Upload"]);
+const SUCCESSFUL_OUTCOMES = new Set(["Surveyed", "Surveyed - Pending Upload", "EPC Completed"]);
 
 const COLUMNS: (keyof ClassifiedDeal)[] = [
   "dealname",

src/app/portfolio/[slug]/(portfolio)/your-projects/live/page.tsx

@@ -53,7 +53,7 @@ function mapDbRowToHubspotDeal(row: DbDeal): HubspotDeal {
     measuresLodgementDate: row.measuresLodgementDate,
     fullLodgementDate: row.lodgementDate,
     confirmedSurveyDate: row.confirmedSurveyDate,
-    surveyedDate: row.SurveyedDate,
+    surveyedDate: row.surveyedDate,
     designType: row.dealType,
     createdAt: row.createdAt,
     updatedAt: row.updatedAt,

src/app/portfolio/[slug]/(portfolio)/your-projects/live/types.ts

@@ -230,6 +230,7 @@ export type DocumentDrawerState = {
 export const SURVEYOR_OUTCOMES = [
   "Surveyed",
   "Surveyed - Pending Upload",
+  "EPC Completed",
   "Tenant Refusal",
   "Other",
   "Not Viable",

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

@@ -18,36 +18,10 @@ import {
 import { getSolarData, getSolarScenarioData } from "../solar-analysis/utils";
 import PropertyMapWrapper from "../solar-analysis/PropertyMapWrapper";
 import SolarSimulationWrapper from "../solar-analysis/SolarSimulationWrapper";
-import { EpcInfoTooltip } from "./EpcInfoTooltip";
+import { CurrentEfficiencyCard } from "@/app/components/building-passport/CurrentEfficiencyCard";
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
-function getEpcHex(letter: string | null | undefined): string {
-  switch (letter?.toUpperCase()) {
-    case "A": return "#117d58";
-    case "B": return "#2da55c";
-    case "C": return "#8dbd40";
-    case "D": return "#f7cd14";
-    case "E": return "#f3a96a";
-    case "F": return "#ef8026";
-    case "G": return "#e41e3b";
-    default:  return "#9ca3af";
-  }
-}
-
-function getEpcDescription(letter: string | null | undefined): string {
-  switch (letter?.toUpperCase()) {
-    case "A":
-    case "B": return "This property is performing at or above modern energy standards.";
-    case "C": return "This property meets modern energy performance benchmarks.";
-    case "D": return "This property is performing slightly below modern energy standards.";
-    case "E": return "This property is performing below modern energy standards.";
-    case "F":
-    case "G": return "This property is performing significantly below modern energy standards.";
-    default:  return "Energy performance data is not yet available for this property.";
-  }
-}
-
 function getDirectionLabel(az: number): { label: string; short: string } {
   const norm = ((az % 360) + 360) % 360;
   if (norm >= 337.5 || norm < 22.5)  return { short: "N",  label: "North" };
@@ -211,10 +185,6 @@ export default async function PreAssessmentReport(props: {
   const rawSolar = await getSolarData(Number(propertyMeta.uprn));
   const solarData = rawSolar ?? null;
 
-  const epcLetter = propertyMeta.currentEpcRating ?? null;
-  const sapScore = propertyMeta.currentSapPoints ?? 0;
-  const epcHex = getEpcHex(epcLetter);
-
   // Solar derived values
   const sp = solarData?.googleApiResponse?.solarPotential ?? null;
   const solarScenarioData = solarData ? await getSolarScenarioData(String(solarData.id)) : null;
@@ -265,49 +235,11 @@ export default async function PreAssessmentReport(props: {
       <div className="grid grid-cols-12 gap-6 items-stretch">
 
         {/* EPC Hero — matches overview page style */}
-        <section className="col-span-12 lg:col-span-5 bg-white rounded-2xl p-10 flex flex-col justify-between shadow-sm border border-gray-100 relative overflow-hidden">
-          <div
-            className="absolute top-0 right-0 w-72 h-72 rounded-full blur-3xl -mr-20 -mt-20 opacity-10"
-            style={{ backgroundColor: epcHex }}
-          />
-          <div className="relative z-10">
-            <div className="flex items-center gap-2 mb-6">
-              <p className="font-manrope text-xs font-bold text-brandmidblue uppercase tracking-widest">
-                Current Efficiency State
-              </p>
-              <EpcInfoTooltip />
-            </div>
-            <div className="flex items-baseline gap-4 mb-4">
-              <span
-                className="text-[110px] font-black font-manrope leading-none tracking-tighter"
-                style={{ color: epcHex }}
-              >
-                {epcLetter ?? "—"}
-              </span>
-              <span className="text-4xl font-bold font-manrope text-gray-400">
-                / {sapScore || "—"}
-              </span>
-            </div>
-            <p className="text-gray-500 font-medium text-sm max-w-xs leading-relaxed">
-              {getEpcDescription(epcLetter)}
-            </p>
-          </div>
-          <div className="mt-10 space-y-3">
-            <div className="relative h-2.5 w-full bg-gray-100 rounded-full overflow-hidden">
-              <div
-                className="absolute inset-y-0 left-0 rounded-full"
-                style={{
-                  width: `${Math.min(100, Math.max(2, sapScore))}%`,
-                  background: "linear-gradient(to right, #e41e3b, #ef8026, #f7cd14, #8dbd40, #117d58)",
-                }}
-              />
-            </div>
-            <div className="flex justify-between text-[10px] font-bold text-gray-400 uppercase tracking-wider">
-              <span>Very Inefficient</span>
-              <span>Very Efficient</span>
-            </div>
-          </div>
-        </section>
+        <CurrentEfficiencyCard
+          epcRating={propertyMeta.currentEpcRating ?? null}
+          sapPoints={propertyMeta.currentSapPoints ?? 0}
+          originalSapPoints={propertyMeta.originalSapPoints}
+        />
 
         {/* Right column: 3 metric cards + general features grid */}
         <div className="col-span-12 lg:col-span-7 flex flex-col gap-6">

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

@@ -15,6 +15,7 @@ import {
   getInstalledMeasuresByUprn,
 } from "./utils";
 import { HeritageTooltip } from "./HeritageTooltip";
+import { CurrentEfficiencyCard } from "@/app/components/building-passport/CurrentEfficiencyCard";
 
 export const revalidate = 1;
 
@@ -25,33 +26,6 @@ function formatGbp(value: number | null | undefined): string {
   return `£${Math.round(value).toLocaleString("en-GB")}`;
 }
 
-/** Map EPC letter to its hex color from the project's palette */
-function getEpcHex(letter: string | null | undefined): string {
-  switch (letter?.toUpperCase()) {
-    case "A": return "#117d58";
-    case "B": return "#2da55c";
-    case "C": return "#8dbd40";
-    case "D": return "#f7cd14";
-    case "E": return "#f3a96a";
-    case "F": return "#ef8026";
-    case "G": return "#e41e3b";
-    default:  return "#9ca3af";
-  }
-}
-
-function getEpcDescription(letter: string | null | undefined): string {
-  switch (letter?.toUpperCase()) {
-    case "A":
-    case "B": return "This property is performing at or above modern energy standards.";
-    case "C": return "This property meets modern energy performance benchmarks.";
-    case "D": return "This property is performing slightly below modern energy standards.";
-    case "E": return "This property is performing below modern energy standards.";
-    case "F":
-    case "G": return "This property is performing significantly below modern energy standards.";
-    default:  return "Energy performance data is not yet available for this property.";
-  }
-}
-
 // ── Sub-components ────────────────────────────────────────────────────────────
 
 function SectionHeading({ icon, label }: { icon: React.ReactNode; label: string }) {
@@ -102,10 +76,6 @@ export default async function BuildingPassportHome(props: {
     (conditionReport.hotWaterEnergyCostCurrent ?? 0) +
     (conditionReport.lightingEnergyCostCurrent ?? 0);
 
-  const epcLetter = propertyMeta.currentEpcRating ?? null;
-  const sapScore = propertyMeta.currentSapPoints ?? 0;
-  const epcHex = getEpcHex(epcLetter);
-
   return (
     <div className="max-w-7xl mx-auto px-6 py-10 space-y-6">
 
@@ -113,46 +83,11 @@ export default async function BuildingPassportHome(props: {
       <div className="grid grid-cols-12 gap-6">
 
         {/* EPC Hero */}
-        <section className="col-span-12 lg:col-span-5 bg-white rounded-2xl p-10 flex flex-col justify-between shadow-sm border border-gray-100 relative overflow-hidden">
-          <div
-            className="absolute top-0 right-0 w-72 h-72 rounded-full blur-3xl -mr-20 -mt-20 opacity-10"
-            style={{ backgroundColor: epcHex }}
-          />
-          <div className="relative z-10">
-            <p className="font-manrope text-xs font-bold text-brandmidblue uppercase tracking-widest mb-6">
-              Current Efficiency State
-            </p>
-            <div className="flex items-baseline gap-4 mb-4">
-              <span
-                className="text-[110px] font-black font-manrope leading-none tracking-tighter"
-                style={{ color: epcHex }}
-              >
-                {epcLetter ?? "—"}
-              </span>
-              <span className="text-4xl font-bold font-manrope text-gray-400">
-                / {sapScore || "—"}
-              </span>
-            </div>
-            <p className="text-gray-500 font-medium text-sm max-w-xs leading-relaxed">
-              {getEpcDescription(epcLetter)}
-            </p>
-          </div>
-          <div className="mt-10 space-y-3">
-            <div className="relative h-2.5 w-full bg-gray-100 rounded-full overflow-hidden">
-              <div
-                className="absolute inset-y-0 left-0 rounded-full"
-                style={{
-                  width: `${Math.min(100, Math.max(2, sapScore))}%`,
-                  background: "linear-gradient(to right, #e41e3b, #ef8026, #f7cd14, #8dbd40, #117d58)",
-                }}
-              />
-            </div>
-            <div className="flex justify-between text-[10px] font-bold text-gray-400 uppercase tracking-wider">
-              <span>Very Inefficient</span>
-              <span>Very Efficient</span>
-            </div>
-          </div>
-        </section>
+        <CurrentEfficiencyCard
+          epcRating={propertyMeta.currentEpcRating ?? null}
+          sapPoints={propertyMeta.currentSapPoints ?? 0}
+          originalSapPoints={propertyMeta.originalSapPoints}
+        />
 
         {/* Energy Stats + Heritage Status */}
         <div className="col-span-12 lg:col-span-7 flex flex-col gap-4">

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

@@ -0,0 +1,51 @@
+"use client";
+
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/app/shadcn_components/ui/tooltip";
+
+export function CurrentEpcTooltip() {
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className="inline-flex items-center justify-center w-4 h-4 rounded-full text-gray-400 hover:text-brandblue transition-colors focus:outline-none"
+            aria-label="Current EPC rating explanation"
+          >
+            <QuestionMarkCircleIcon className="w-4 h-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent
+          side="right"
+          className="max-w-xs p-0 overflow-hidden border-gray-200 shadow-xl"
+          sideOffset={8}
+        >
+          <div className="px-4 pt-3 pb-2 bg-gray-50 border-b border-gray-100">
+            <p className="text-xs font-bold text-gray-700 uppercase tracking-widest">Current EPC Rating</p>
+            <p className="text-[11px] text-gray-400 mt-0.5">How we calculate this rating</p>
+          </div>
+          <div className="px-4 py-3 space-y-2.5">
+            <p className="text-[11px] text-gray-500 leading-snug">
+              We show a <span className="font-semibold text-gray-700">modelled rating</span> when:
+            </p>
+            <ul className="text-[11px] text-gray-500 leading-snug space-y-1 pl-3">
+              <li className="flex items-start gap-1.5"><span className="mt-0.5 shrink-0 text-gray-400">•</span>The lodged EPC is <span className="font-semibold text-gray-700 ml-1">expired or invalid</span></li>
+              <li className="flex items-start gap-1.5"><span className="mt-0.5 shrink-0 text-gray-400">•</span>You have told us the property differs from the last survey</li>
+            </ul>
+          </div>
+          <div className="px-4 py-2.5 bg-gray-50 border-t border-gray-100">
+            <p className="text-[11px] text-gray-400 leading-snug">
+              This rating may differ from the <span className="font-semibold text-gray-600">lodged EPC</span> because we re-model under{" "}
+              <span className="font-semibold text-gray-600">SAP 10</span>.
+            </p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

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

@@ -21,6 +21,7 @@ import {
   TENURE_OPTIONS,
   MAINFUEL_OPTIONS,
 } from "@/app/utils/propertyFilters";
+import { CurrentEpcTooltip } from "./CurrentEpcTooltip";
 
 /* -----------------------------------------------------------------------
    Helpers
@@ -199,7 +200,7 @@ const coreColumns: ColumnDef<PropertyWithRelations>[] = [
         <div className="flex flex-col gap-0.5">
           <a
             href={`${portfolioId}/building-passport/${propertyId}`}
-            className="text-xs font-bold text-primary hover:text-secondary transition-colors truncate"
+            className="text-xs font-bold text-primary hover:text-brandmidblue transition-colors truncate"
           >
             {address}
           </a>
@@ -222,7 +223,10 @@ const coreColumns: ColumnDef<PropertyWithRelations>[] = [
   {
     accessorKey: "currentEpc",
     header: () => (
-      <div className="flex justify-center text-xs">Current EPC</div>
+      <div className="flex items-center justify-center gap-1 text-xs">
+        Current EPC
+        <CurrentEpcTooltip />
+      </div>
     ),
     cell: ({ row }) => (
       <div className="text-gray-700 font-medium flex justify-center">