added tests for pre sap ui with removed duplication

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

@@ -1740,13 +1740,18 @@ export default function PropertyDetailDrawer({
                       label="Pre-SAP Score"
                       value={
                         deal.preSapScore
-                          ? <span className={`font-semibold px-1.5 py-0.5 rounded text-xs ${
-                              Number(deal.preSapScore) < 30
-                                ? "text-red-600 bg-red-50"
-                                : Number(deal.preSapScore) < 50
-                                  ? "text-amber-700 bg-amber-50"
-                                  : "text-emerald-700 bg-emerald-50"
-                            }`}>{deal.preSapScore}</span>
+                          ? (() => {
+                              const num = parseInt(deal.preSapScore.replace(/^[A-Za-z]+/, ""), 10);
+                              return (
+                                <span className={`font-semibold px-1.5 py-0.5 rounded text-xs ${
+                                  num < 30
+                                    ? "text-red-600 bg-red-50"
+                                    : num < 50
+                                      ? "text-amber-700 bg-amber-50"
+                                      : "text-emerald-700 bg-emerald-50"
+                                }`}>{deal.preSapScore}</span>
+                              );
+                            })()
                           : null
                       }
                     />

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

@@ -15,7 +15,7 @@ import {
   TooltipTrigger,
 } from "@/app/shadcn_components/ui/tooltip";
 import { AlertTriangle, ChevronRight, ChevronDown } from "lucide-react";
-import { sapToEpc } from "@/app/utils";
+import { sapToEpc, getEpcAccentClasses, parsePreSap } from "@/app/utils";
 import { parseMeasures } from "@/app/lib/parseMeasures";
 import { outOfOrderInstructionWarning } from "@/app/lib/softWarnings";
 import type { ClassifiedDeal, PortfolioCapabilityType, DocStatus, EffectiveRemovalState } from "../types";
@@ -78,7 +78,7 @@ export default function DealPage({
     router.replace(`?tab=${tab}`, { scroll: false });
   };
 
-  const epcCurrent = sapToEpc(deal.preSapScore != null ? Number(deal.preSapScore) : null);
+  const parsedPreSap = parsePreSap(deal.preSapScore);
   const epcPotential = sapToEpc(deal.epcSapScorePotential != null ? Number(deal.epcSapScorePotential) : null);
   const technicalApprovedMeasures = parseMeasures(
     deal.technicalApprovedMeasuresForInstall ?? null,
@@ -134,14 +134,17 @@ export default function DealPage({
                 Energy Performance
               </p>
               <div className="flex items-baseline gap-2">
-                <span className="text-2xl font-black text-brandblue">{epcCurrent}</span>
-                {epcPotential !== "Unknown" && epcPotential !== epcCurrent && (
+                {parsedPreSap ? (
+                  <span className={`text-2xl font-black ${getEpcAccentClasses(parsedPreSap.letter)}`}>
+                    {parsedPreSap.display}
+                  </span>
+                ) : (
+                  <span className="text-2xl font-black text-gray-400">—</span>
+                )}
+                {epcPotential !== "Unknown" && epcPotential !== (parsedPreSap?.letter ?? "Unknown") && (
                   <span className="text-sm text-gray-400">→ {epcPotential}</span>
                 )}
               </div>
-              {deal.preSapScore !== null && deal.preSapScore !== undefined && (
-                <p className="text-xs text-gray-500">SAP: {deal.preSapScore}</p>
-              )}
             </div>
 
             {/* Key details */}
@@ -160,24 +163,6 @@ export default function DealPage({
               <InfoRow label="Lodgement Status" value={deal.lodgementStatus} />
               <InfoRow label="Measures Lodged" value={formatDate(deal.measuresLodgementDate)} />
               <InfoRow label="Full Lodgement" value={formatDate(deal.fullLodgementDate)} />
-              <InfoRow
-                label="Pre-SAP"
-                value={
-                  deal.preSapScore ? (
-                    <span
-                      className={`font-semibold px-1.5 py-0.5 rounded text-xs ${
-                        Number(deal.preSapScore) < 30
-                          ? "text-red-600 bg-red-50"
-                          : Number(deal.preSapScore) < 50
-                            ? "text-amber-700 bg-amber-50"
-                            : "text-emerald-700 bg-emerald-50"
-                      }`}
-                    >
-                      {deal.preSapScore}
-                    </span>
-                  ) : null
-                }
-              />
             </div>
 
             {/* Survey info */}

src/app/utils.ts

@@ -132,6 +132,17 @@ export function sapToEpc(sapPoints: number | null): string {
   }
 }
 
+// Handles "D55" (new format) and "56" (legacy numeric-only format)
+export function parsePreSap(raw: string | null | undefined): { letter: string; display: string } | null {
+  if (!raw) return null;
+  const match = raw.trim().match(/^([A-Za-z]?)(\d+)$/);
+  if (!match) return null;
+  const num = parseInt(match[2], 10);
+  const letter = match[1] ? match[1].toUpperCase() : sapToEpc(num);
+  if (letter === "Unknown") return null;
+  return { letter, display: `${letter}${num}` };
+}
+
 export function formatDateTime(dateTimeString: string | Date): string {
   // Create a new Date object
   const dateTime = new Date(dateTimeString);