mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
update up to allow showing valuation when here isn't one
This commit is contained in:
Khalim Conn-Kowlessar
parent
0b3aa8fb28
commit
a45529f5bd
1 changed files with 71 additions and 43 deletions
|
|
@ -1,30 +1,32 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
import { FundingPackageWithMeasures } from "@/app/db/schema/funding";
|
||||
import { formatNumber } from "@/app/utils";
|
||||
import {Card, CardContent} from "@/app/shadcn_components/ui/card";
|
||||
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 { 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 = {
|
||||
scheme: string | null;
|
||||
onSeeMore: () => void
|
||||
}
|
||||
onSeeMore: () => void;
|
||||
};
|
||||
|
||||
export const FundingSummary: React.FC<FundingSummaryProps> = ({ scheme, onSeeMore }) => {
|
||||
let message: string | null = null
|
||||
export const FundingSummary: React.FC<FundingSummaryProps> = ({
|
||||
scheme,
|
||||
onSeeMore,
|
||||
}) => {
|
||||
let message: string | null = null;
|
||||
|
||||
if (!scheme) {
|
||||
message = 'Funding not assessed for this measure package'
|
||||
} else if (scheme.toLowerCase() === 'none') {
|
||||
message = 'Funding not eligible for this measure package'
|
||||
message = "Funding not assessed for this measure package";
|
||||
} else if (scheme.toLowerCase() === "none") {
|
||||
message = "Funding not eligible for this measure package";
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -55,8 +57,8 @@ export const FundingSummary: React.FC<FundingSummaryProps> = ({ scheme, onSeeMor
|
|||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default function ValuationImpactComponent({
|
||||
currentValuation,
|
||||
|
|
@ -70,44 +72,65 @@ export default function ValuationImpactComponent({
|
|||
funding: FundingPackageWithMeasures;
|
||||
}) {
|
||||
const [fundingModalIsOpen, setFundingModalIsOpen] = useState(false);
|
||||
// If we have no current valuation, we return no component
|
||||
if (!currentValuation) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const lowerBoundValuation =
|
||||
currentValuation + (valuationIncreaseLowerBound ?? 0);
|
||||
currentValuation && valuationIncreaseLowerBound
|
||||
? currentValuation + valuationIncreaseLowerBound
|
||||
: null;
|
||||
|
||||
const upperBoundValuation =
|
||||
currentValuation + (valuationIncreaseUpperBound ?? 0);
|
||||
currentValuation && valuationIncreaseUpperBound
|
||||
? currentValuation + valuationIncreaseUpperBound
|
||||
: null;
|
||||
|
||||
function openFundingModal() {
|
||||
setFundingModalIsOpen(true);
|
||||
}
|
||||
|
||||
function renderCurrency(value: number | null) {
|
||||
return value ? (
|
||||
`£${formatNumber(value)}`
|
||||
) : (
|
||||
<span className="text-gray-300 italic">Not available</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="col-span-1 md:col-span-2 lg:col-span-3 w-full p-4 bg-brandblue rounded-lg shadow-md grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Current Valuation */}
|
||||
<div className="flex flex-col items-center justify-center text-center h-full space-y-1">
|
||||
<span className="text-gray-100 text-lg">Current Property Value</span>
|
||||
<span className="text-3xl font-bold text-brandbrown">
|
||||
£{formatNumber(currentValuation)}
|
||||
{currentValuation
|
||||
? `£${formatNumber(currentValuation)}`
|
||||
: "Not available"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* After Retrofit Valuation */}
|
||||
<div className="flex flex-col items-center justify-center text-center space-y-1">
|
||||
<span className="text-gray-100 text-lg">After Retrofit Valuation</span>
|
||||
<div className="text-2xl text-brandbrown font-bold">
|
||||
£{formatNumber(lowerBoundValuation)} - £{formatNumber(upperBoundValuation)}
|
||||
</div>
|
||||
<span className="text-gray-100 text-lg">Estimated improvement:</span>
|
||||
<span className="text-brandbrown font-bold">
|
||||
£{formatNumber(valuationIncreaseLowerBound || 0)} - £{formatNumber(valuationIncreaseUpperBound || 0)}
|
||||
</span>
|
||||
{lowerBoundValuation && upperBoundValuation ? (
|
||||
<>
|
||||
<div className="text-2xl text-brandbrown font-bold">
|
||||
£{formatNumber(lowerBoundValuation)} - £
|
||||
{formatNumber(upperBoundValuation)}
|
||||
</div>
|
||||
<span className="text-gray-100 text-lg">
|
||||
Estimated improvement:
|
||||
</span>
|
||||
<span className="text-brandbrown font-bold">
|
||||
£{formatNumber(valuationIncreaseLowerBound || 0)} - £
|
||||
{formatNumber(valuationIncreaseUpperBound || 0)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-lg text-gray-300 italic">Not available</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FundingSummary
|
||||
scheme={funding?.scheme}
|
||||
onSeeMore={openFundingModal}
|
||||
/>
|
||||
{/* Funding summary always shown */}
|
||||
<FundingSummary scheme={funding?.scheme} onSeeMore={openFundingModal} />
|
||||
<FundingSummaryModal
|
||||
isOpen={fundingModalIsOpen}
|
||||
closeModal={() => setFundingModalIsOpen(false)}
|
||||
|
|
@ -118,13 +141,12 @@ export default function ValuationImpactComponent({
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
type FundingSummaryModalProps = {
|
||||
isOpen: boolean
|
||||
closeModal: () => void
|
||||
isOpen: boolean;
|
||||
closeModal: () => void;
|
||||
scheme?: string | null;
|
||||
fundingPackageMeasures: FundingPackageMeasure[]
|
||||
}
|
||||
fundingPackageMeasures: FundingPackageMeasure[];
|
||||
};
|
||||
|
||||
export function FundingSummaryModal({
|
||||
isOpen,
|
||||
|
|
@ -161,19 +183,25 @@ export function FundingSummaryModal({
|
|||
<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'}
|
||||
{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.
|
||||
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>
|
||||
<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, ' ')}
|
||||
{measure.measure.replace(/_/g, " ")}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -194,5 +222,5 @@ export function FundingSummaryModal({
|
|||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue