From 05438a8f4462d847a00e31fe36b5a50920cf897f Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Thu, 21 Aug 2025 22:07:37 +0000
Subject: [PATCH] added the funding modal

---
 .../building-passport/RecommendationCard.tsx  |  12 +-
 .../RecommendationContainer.tsx               |   4 +-
 .../ValuationImpactComponent.tsx              | 109 ++++++++++++++++--
 .../[propertyId]/plans/[planId]/page.tsx      |   3 +-
 4 files changed, 106 insertions(+), 22 deletions(-)

diff --git a/src/app/components/building-passport/RecommendationCard.tsx b/src/app/components/building-passport/RecommendationCard.tsx
index 4633e383..c3313210 100644
--- a/src/app/components/building-passport/RecommendationCard.tsx
+++ b/src/app/components/building-passport/RecommendationCard.tsx
@@ -136,7 +136,7 @@ export default function RecommendationCard({
 
   const optionTextClassName = alreadyInstalled
     ? "text-brandgold"
-    : "text-blue-500 hover:text-blue-300";
+    : "text-brandbrown hover:text-blue-300";
 
   const optionsText = alreadyInstalled
     ? "Already installed"
@@ -173,22 +173,16 @@ export default function RecommendationCard({
           <tbody>
             <tr>
               <td className="font-medium">Estimated Cost:</td>
-              <td>
+              <td className="font-bold">
                 {cardComponent
                   ? "£" + formatNumber(cardComponent?.estimatedCost || 0)
                   : ""}
               </td>
             </tr>
-            {cardComponent.newUValue && (
-              <tr>
-                <td className="font-medium">New U-Value:</td>
-                <td>{cardComponent.newUValue}</td>
-              </tr>
-            )}
             {cardComponent.sapPoints != null && (
               <tr>
                 <td className="font-medium">SAP Points:</td>
-                <td>
+                <td className="font-bold">
                   {cardComponent.sapPoints < 0.1 &&
                   cardComponent.type !== "mechanical_ventilation"
                     ? "Negligible"
diff --git a/src/app/components/building-passport/RecommendationContainer.tsx b/src/app/components/building-passport/RecommendationContainer.tsx
index 6c3211b0..af9dc110 100644
--- a/src/app/components/building-passport/RecommendationContainer.tsx
+++ b/src/app/components/building-passport/RecommendationContainer.tsx
@@ -332,7 +332,7 @@ export default function RecommendationContainer({
 
   return (
     <>
-      <div className="mb-4 flex-col grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
+      <div className="mt-8 mb-4 flex-col grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
         <WorksPackageCard
           totalEstimatedCost={totalEstimatedCost}
           totalLabourDays={totalLabourDays}
@@ -361,7 +361,7 @@ export default function RecommendationContainer({
         />
       </div>
 
-      <Separator className="mb-4 bg-brandblue" />
+      <Separator className="mb-4 bg-brandbrown" />
 
       <div className="flex-col grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
         {Object.entries(categorizedRecommendations).map(
diff --git a/src/app/components/building-passport/ValuationImpactComponent.tsx b/src/app/components/building-passport/ValuationImpactComponent.tsx
index f5f797cf..f1856a0f 100644
--- a/src/app/components/building-passport/ValuationImpactComponent.tsx
+++ b/src/app/components/building-passport/ValuationImpactComponent.tsx
@@ -7,6 +7,10 @@ import { formatNumber } from "@/app/utils";
 import {Card, CardContent} from "@/app/shadcn_components/ui/card";
 import { Button } from "@/app/shadcn_components/ui/button";
 import { PiggyBank } from 'lucide-react'
+import { Dialog, Transition } from '@headlessui/react'
+import { Fragment } from 'react'
+import { FundingPackageMeasure } from "@/app/db/schema/funding";
+import { set } from "cypress/types/lodash";
 
 
 type FundingSummaryProps = {
@@ -27,7 +31,7 @@ export const FundingSummary: React.FC<FundingSummaryProps> = ({ scheme, onSeeMor
     <Card className="w-full max-w-sm bg-brandblue border-none shadow-none">
       <CardContent className="p-4 flex flex-col items-center text-center space-y-2">
         {message ? (
-          <p className="text-sm text-muted-foreground">{message}</p>
+          <p className="text-sm text-brandbrown">{message}</p>
         ) : (
           <>
             <div className="flex items-center gap-2 text-xl font-semibold uppercase tracking-wide text-brandbrown">
@@ -37,14 +41,16 @@ export const FundingSummary: React.FC<FundingSummaryProps> = ({ scheme, onSeeMor
             <p className="text-sm text-white max-w-xs">
               Click below to learn more about available funding options.
             </p>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onSeeMore}
-              className="text-brandbrown hover:bg-brandbrown hover:text-brandblue"
-            >
-              See More
-            </Button>
+            {!message && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onSeeMore}
+                className="text-brandbrown hover:bg-brandbrown hover:text-brandblue"
+              >
+                See More
+              </Button>
+            )}
           </>
         )}
       </CardContent>
@@ -102,6 +108,91 @@ export default function ValuationImpactComponent({
         scheme={funding.scheme}
         onSeeMore={openFundingModal}
       />
+      <FundingSummaryModal
+        isOpen={fundingModalIsOpen}
+        closeModal={() => setFundingModalIsOpen(false)}
+        scheme={funding.scheme}
+        fundingPackageMeasures={funding.fundingPackageMeasures}
+      />
     </div>
   );
 }
+
+
+type FundingSummaryModalProps = {
+  isOpen: boolean
+  closeModal: () => void
+  scheme?: string | null;
+  fundingPackageMeasures: FundingPackageMeasure[]
+}
+
+export function FundingSummaryModal({
+  isOpen,
+  closeModal,
+  scheme,
+  fundingPackageMeasures,
+}: FundingSummaryModalProps) {
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={closeModal}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-150"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-30" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Title className="text-xl font-semibold text-brandblue flex items-center gap-2 mb-4">
+                  <PiggyBank className="h-5 w-5 text-brandbrown" />
+                  {scheme?.toUpperCase() || 'Funding Details'}
+                </Dialog.Title>
+
+                <p className="text-sm text-gray-700 mb-4">
+                  This package has been optimised to meet the eligibility criteria of the <strong>{scheme?.toUpperCase()}</strong> funding scheme. Measures have been selected to maximise the property’s improvement while minimising cost and ensuring compliance.
+                </p>
+
+                <div className="mb-4">
+                  <h4 className="text-sm font-semibold text-brandblue mb-2">Included Measures</h4>
+                  <ul className="list-disc list-inside text-sm text-gray-800 space-y-1">
+                    {fundingPackageMeasures.map((measure) => (
+                      <li key={measure.id.toString()}>
+                        {measure.measure.replace(/_/g, ' ')}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="mt-6 flex justify-end">
+                  <button
+                    type="button"
+                    onClick={closeModal}
+                    className="inline-flex justify-center rounded-md bg-brandblue px-4 py-2 text-sm font-medium text-white hover:bg-hoverblue focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+                  >
+                    Close
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}
diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
index a51eee2d..3c270be5 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
@@ -12,11 +12,10 @@ export default async function Recommendations(
   const planMeta = await getPlanMeta(params.planId);
   const funding = await getPlanFunding(params.planId);
 
-  console.log("Funding Data:", funding);
+  console.log(funding)
 
   return (
     <div className="leading-loose tracking-wider">
-      <div className="flex py-8 text-lg">Recommendations</div>
       <RecommendationContainer
         recommendations={recommendations}
         propertyMeta={propertyMeta}