diff --git a/package-lock.json b/package-lock.json index e04c0da..378759f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-navigation-menu": "^1.1.3", "@radix-ui/react-select": "^1.2.2", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@tanstack/react-query": "^4.29.12", "@tanstack/react-table": "^8.9.3", @@ -2099,6 +2100,29 @@ } } }, + "node_modules/@radix-ui/react-separator": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz", + "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", diff --git a/package.json b/package.json index 46d6a75..4b36d5e 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-navigation-menu": "^1.1.3", "@radix-ui/react-select": "^1.2.2", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@tanstack/react-query": "^4.29.12", "@tanstack/react-table": "^8.9.3", diff --git a/src/app/components/building-passport/RecommendationCostSummaryCard.tsx b/src/app/components/building-passport/RecommendationCostSummaryCard.tsx new file mode 100644 index 0000000..b98c94c --- /dev/null +++ b/src/app/components/building-passport/RecommendationCostSummaryCard.tsx @@ -0,0 +1,32 @@ +"use client"; +import { formatNumber } from "@/app/utils"; +import { useState } from "react"; + +export default function RecommendationCostSummaryCard({ + totalEstimatedCost, + totalSapPoints, +}: { + totalEstimatedCost: number; + totalSapPoints: number; +}) { + const [totalCost, setTotalcost] = useState(totalEstimatedCost); + const [totalSap, setTotalSap] = useState(totalEstimatedCost); + + return ( + + + + + + + + + + + + +
Total Cost:{"£" + formatNumber(totalCost)}
+ Total SAP Points Improvement: + {totalSap}
+ ); +} diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx index 408b07b..24bc02b 100644 --- a/src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx +++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx @@ -5,8 +5,10 @@ import { import RecommendationCard from "@/app/components/building-passport/RecommendationCard"; import { formatNumber, sapToEpc } from "@/app/utils"; import { PropertyMeta } from "@/app/db/schema/property"; +import RecommendationCostSummaryCard from "@/app/components/building-passport/RecommendationCostSummaryCard"; +import { Separator } from "@/app/shadcn_components/ui/separator"; -export default function Recommendations() { +export default async function Recommendations() { const propertyMeta: PropertyMeta = { id: 1, address: "123 Fake Street", @@ -105,6 +107,12 @@ export default function Recommendations() { (defaultFloorRecommendations.estimatedCost || 0) + (defaultVentiliationRecommendations.estimatedCost || 0); + const costMap = { + Walls: defaultWallsRecommendations.estimatedCost, + Floor: defaultFloorRecommendations.estimatedCost, + Ventilation: defaultVentiliationRecommendations.estimatedCost, + }; + const totalSapPoints = (defaultWallsRecommendations.sapPoints || 0) + (defaultFloorRecommendations.sapPoints || 0) + @@ -121,23 +129,12 @@ export default function Recommendations() {
Recommendations
- - - - - - + - - - - - -
Total Cost:{"£" + formatNumber(totalEstimatedCost)}
- Total SAP Points Improvement: - {totalSapPoints}
- - +
@@ -151,6 +148,9 @@ export default function Recommendations() {
Current EPC Rating:
+ + +
{Object.entries(recommendations).map( ([componentType, recommendationData], idx) => { diff --git a/src/app/shadcn_components/ui/separator.tsx b/src/app/shadcn_components/ui/separator.tsx new file mode 100644 index 0000000..12d81c4 --- /dev/null +++ b/src/app/shadcn_components/ui/separator.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator }