added current epc tooltip

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
@@ -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">