diff --git a/src/app/api/property-meta/[propertyId]/route.ts b/src/app/api/property-meta/[propertyId]/route.ts index 8951eba..0bf718c 100644 --- a/src/app/api/property-meta/[propertyId]/route.ts +++ b/src/app/api/property-meta/[propertyId]/route.ts @@ -30,6 +30,14 @@ export async function GET( updatedAt: true, }, where: eq(property.id, BigInt(propertyId)), + with: { + detailsEpc: { + columns: { + adjustedEnergyConsumption: true, + co2Emissions: true, + }, + }, + }, }); return new NextResponse(JSON.stringify(propertyMeta, serializeBigInt)); diff --git a/src/app/components/building-passport/EpcCard.tsx b/src/app/components/building-passport/EpcCard.tsx index 4925a0b..55dac72 100644 --- a/src/app/components/building-passport/EpcCard.tsx +++ b/src/app/components/building-passport/EpcCard.tsx @@ -1,11 +1,17 @@ +import { getEpcColorClass } from "@/app/utils"; + export default function EpcCard({ epcRating, fullMargin = true, expected = false, + kwh = null, + carbon = null, }: { epcRating: string; fullMargin: boolean; expected?: boolean; + kwh?: number | null; + carbon?: number | null; }) { let marginClass = ""; if (fullMargin) { @@ -13,24 +19,42 @@ export default function EpcCard({ } let title; - let bgStyling; if (expected) { title = "Expected Energy Rating"; - bgStyling = "bg-green-600"; } else { title = "Energy Rating"; - bgStyling = "bg-brandblue"; } + const bgColour = getEpcColorClass(epcRating); + return (
{title}
-
{epcRating}
+
{epcRating}
+ + {(kwh || carbon) && ( + + + {kwh && ( + + + + + )} + {carbon && ( + + + + + )} + +
Energy:{kwh.toFixed(0)} kWh
CO2:{carbon}t
+ )}
); } diff --git a/src/app/db/schema/property.ts b/src/app/db/schema/property.ts index 19f2569..c4ef120 100644 --- a/src/app/db/schema/property.ts +++ b/src/app/db/schema/property.ts @@ -31,6 +31,10 @@ export interface PropertyMeta { currentEpcRating: string; currentSapPoints: number; updatedAt: string; + detailsEpc: { + adjustedEnergyConsumption: number | null; + co2Emissions: number | null; + }; } export type Rating = "Very good" | "Good" | "Poor" | "Very poor" | "N/A"; diff --git a/src/app/db/schema/relations.ts b/src/app/db/schema/relations.ts index 6640da2..6d1647b 100644 --- a/src/app/db/schema/relations.ts +++ b/src/app/db/schema/relations.ts @@ -1,7 +1,7 @@ // This script contains ALL relations for the database, used by drizzle-orm import { relations } from "drizzle-orm"; -import { property, propertyTargets } from "./property"; +import { property, propertyDetailsEpc, propertyTargets } from "./property"; import { plan, planRecommendations, @@ -77,6 +77,10 @@ export const propertyRelations = relations(property, ({ one, many }) => ({ references: [propertyTargets.propertyId], }), recommendations: many(recommendation), + detailsEpc: one(propertyDetailsEpc, { + fields: [property.id], + references: [propertyDetailsEpc.propertyId], + }), })); // We have a many to many relationship between users and portfolios diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx index 2f717d4..15d0f5c 100644 --- a/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx +++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx @@ -1,5 +1,4 @@ import EpcCard from "@/app/components/building-passport/EpcCard"; -import { PropertyMeta } from "@/app/db/schema/property"; import { formatDateTime } from "@/app/utils"; import { HomeIcon, @@ -22,10 +21,17 @@ export default async function BuildingPassportHome({ // the response is cached so we just gain access to the data const propertyMeta = await getPropertyMeta(params.propertyId); + console.log(propertyMeta); + return (
- +
Your property
@@ -55,7 +61,7 @@ export default async function BuildingPassportHome({
-
Number of Rooms:
+
Number of Habitable Rooms:
{propertyMeta.numberOfRooms}
diff --git a/src/app/portfolio/[slug]/components/propertyTableColumns.tsx b/src/app/portfolio/[slug]/components/propertyTableColumns.tsx index 08136f8..0a2cc81 100644 --- a/src/app/portfolio/[slug]/components/propertyTableColumns.tsx +++ b/src/app/portfolio/[slug]/components/propertyTableColumns.tsx @@ -14,7 +14,7 @@ import { ArrowUpDown, MoreHorizontal } from "lucide-react"; import StatusBadge from "@/app/components/StatusBadge"; import { HomeIcon } from "@heroicons/react/20/solid"; import { FunnelIcon } from "@heroicons/react/24/outline"; -import { formatNumber, sapToEpc } from "@/app/utils"; +import { formatNumber, getEpcColorClass, sapToEpc } from "@/app/utils"; import { cn } from "@/lib/utils"; import { PortfolioStatus } from "@/app/db/schema/portfolio"; import { @@ -29,30 +29,9 @@ interface DataTableColumnHeaderProps } const EpcLetterBubble = ({ letter }: { letter: string }) => { - const getColorClass = (letter: string) => { - switch (letter.toUpperCase()) { - case "A": - return "bg-epc_a"; - case "B": - return "bg-epc_b"; - case "C": - return "bg-epc_c"; - case "D": - return "bg-epc_d"; - case "E": - return "bg-epc_e"; - case "F": - return "bg-epc_f"; - case "G": - return "bg-epc_d"; - default: - return "bg-gray-500"; - } - }; - return (
diff --git a/src/app/utils.ts b/src/app/utils.ts index 9fbd2a8..ed5347b 100644 --- a/src/app/utils.ts +++ b/src/app/utils.ts @@ -1,5 +1,26 @@ import { Rating } from "./db/schema/property"; +export const getEpcColorClass = (letter: string) => { + switch (letter.toUpperCase()) { + case "A": + return "bg-epc_a"; + case "B": + return "bg-epc_b"; + case "C": + return "bg-epc_c"; + case "D": + return "bg-epc_d"; + case "E": + return "bg-epc_e"; + case "F": + return "bg-epc_f"; + case "G": + return "bg-epc_d"; + default: + return "bg-gray-500"; + } +}; + export const getRating = (rating: number | null): Rating => { if (rating == null) { return "N/A";