junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-08 11:37:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Split out recommendationCostSummaryCard and added separator

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-07-28 09:26:27 +01:00
parent 78ab794916
commit de3d727e39
5 changed files with 105 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
package-lock.json generated
View file

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

1
package.json
View file

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

32
src/app/components/building-passport/RecommendationCostSummaryCard.tsx Normal file
View file

@ -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 (
<table className="text-left bg-green-700 rounded-md text-gray-100">
<tbody>
<tr>
<td className="font-medium pl-4 py-2">Total Cost:</td>
<td>{"£" + formatNumber(totalCost)}</td>
</tr>
<tr>
<td className="font-medium pl-4 py-2">
Total SAP Points Improvement:
</td>
<td>{totalSap}</td>
</tr>
</tbody>
</table>
);
}

34
src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx
View file

@ -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() {
<div className="flex py-8 text-lg">Recommendations</div>
<div className="mb-4 flex flex-col grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
<table className="text-left bg-gray-600 rounded-md text-gray-100">
<tbody>
<tr>
<td className="font-medium pl-4 py-2">Total Cost:</td>
<td>{"£" + formatNumber(totalEstimatedCost)}</td>
</tr>
<RecommendationCostSummaryCard
totalEstimatedCost={totalEstimatedCost}
totalSapPoints={totalSapPoints}
/>
<tr>
<td className="font-medium pl-4 py-2">
Total SAP Points Improvement:
</td>
<td>{totalSapPoints}</td>
</tr>
</tbody>
</table>
<table className="text-left bg-gray-600 rounded-md text-gray-100">
<table className="text-left bg-green-700 rounded-md text-gray-100">
<tbody>
<tr>
<td className="font-medium pl-4 py-2">Current EPC Rating:</td>
@ -151,6 +148,9 @@ export default function Recommendations() {
</tbody>
</table>
</div>
<Separator className="mb-4" />
<div className="flex flex-col grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
{Object.entries(recommendations).map(
([componentType, recommendationData], idx) => {

31
src/app/shadcn_components/ui/separator.tsx Normal file
View file

@ -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<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }