junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updating fonts and styling

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-11-29 10:20:35 +00:00
parent c196e913b0
commit 1a2bfca9af
4 changed files with 69 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/StatusBadge.tsx
View file

@ -55,8 +55,8 @@ const statusColor: {
propertyHoverText: "This property is currently in scoping",
},
assessment: {
class: "bg-emerald-500 hover:bg-emerald-500",
text: "assessment",
class: "bg-emerald-400 hover:bg-emerald-500",
text: "Non-invasive Assessment",
hoverText: "This portfolio is currently in the assessment stage",
propertyHoverText: "This property is currently in the assessment stage",
},

49
src/app/portfolio/[slug]/(portfolio)/page.tsx
View file

@ -133,85 +133,80 @@ function SummaryBox({
Portfolio Summary
</h2>
<div className="grid grid-cols-1 md:grid-cols-1 gap-6">
<div className="p-4 bg-gray-50 rounded-lg">
<h3 className="text-lg font-semibold text-gray-700 mb-2">
<div className="p-4 bg-brandblue rounded-lg">
<h3 className="text-lg font-semibold text-gray-200 mb-2">
Work Package
</h3>
<table className="w-full">
<tbody>
<tr>
<td className="text-gray-700 ">Total Budget</td>
<td className="text-gray-600 text-end">{budgetFormatted}</td>
<td className="text-gray-200 ">Total Budget</td>
<td className="text-gray-200 text-end">{budgetFormatted}</td>
</tr>
<tr>
<td className="text-gray-700 ">Total Cost</td>
<td className="text-gray-600 text-end">{totalCostFormatted}</td>
<td className="text-gray-200 ">Total Cost</td>
<td className="text-gray-200 text-end">{totalCostFormatted}</td>
</tr>
{/* <tr>
<td className="text-gray-700 ">Annual rental yield Increase</td>
<td className="text-gray-600 text-end">{"-"}</td>
</tr> */}
<tr>
<td className="text-gray-700">Estimated Duration</td>
<td className="text-gray-600 text-end">
<td className="text-gray-200">Estimated Duration</td>
<td className="text-gray-200 text-end">
{estimatedDurationFormatted}
</td>
</tr>
<tr>
<td className="text-gray-700">Total properties</td>
<td className="text-gray-600 text-end">{numProperties}</td>
<td className="text-gray-200">Total properties</td>
<td className="text-gray-200 text-end">{numProperties}</td>
</tr>
</tbody>
</table>
</div>
<div className="p-4 bg-gray-50 rounded-lg">
<div className="p-4 bg-brandblue rounded-lg">
{/* Environmental Impact */}
<h3 className="text-lg font-semibold text-gray-700 mb-2">
<h3 className="text-lg font-semibold text-gray-200 mb-2">
Environmental Impact
</h3>
<table className="w-full">
<tbody>
<tr>
<td className="text-gray-700">
<td className="text-gray-200">
Annual{" "}
<span>
CO<sub>2</sub>
</span>{" "}
Savings
</td>
<td className="text-gray-600 text-end">
<td className="text-gray-200 text-end">
{co2EquivalentSavingsFormatted}
</td>
</tr>
<tr>
<td className="text-gray-700">Annual Energy Savings</td>
<td className="text-gray-600 text-end">
<td className="text-gray-200">Annual Energy Savings</td>
<td className="text-gray-200 text-end">
{energySavingsFormatted}
</td>
</tr>
</tbody>
</table>
</div>
<div className="p-4 bg-gray-50 rounded-lg">
<div className="p-4 bg-brandblue rounded-lg">
{/* Financial Impact table */}
<h3 className="text-lg font-semibold text-gray-700 mb-2">
<h3 className="text-lg font-semibold text-gray-200 mb-2">
Financial Impact
</h3>
<table className="w-full">
<tbody>
<tr>
<td className="text-gray-700 ">Annual Energy Bill Reduction</td>
<td className="text-gray-600 text-end">
<td className="text-gray-200 ">Annual Energy Bill Reduction</td>
<td className="text-gray-200 text-end">
{energyCostSavingsFormatted}
</td>
</tr>
<tr>
<td className="text-gray-700 ">Total Value Increase</td>
<td className="text-gray-600 text-end">
<td className="text-gray-200 ">Total Value Increase</td>
<td className="text-gray-200 text-end">
{totalValueIncreaseFormatted}
</td>
</tr>

41
src/app/portfolio/[slug]/components/propertyTableColumns.tsx
View file

@ -28,6 +28,39 @@ interface DataTableColumnHeaderProps<TData, TValue>
title: string;
}
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 (
<div
className={`inline-flex items-center justify-center w-6 h-6 rounded-full ${getColorClass(
letter
)} text-white text-m font-bold shadow-outline-black`}
>
{letter}
</div>
);
};
export function DataTableFilterHeader<TData, TValue>({
column,
title,
@ -89,7 +122,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
return (
<div className="flex items-center space-x-2">
<HomeIcon className="h-8 w-8 text-gray-200" />
<HomeIcon className="h-8 w-8 text-brandmidblue" />
<div className="flex flex-col">
<a
href={`${portfolioId}/building-passport/${propertyId}`}
@ -127,9 +160,11 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
accessorKey: "currentEpc",
header: () => <div className="flex justify-center">Current EPC Rating</div>,
cell: ({ row }) => {
console.log(row.original.currentEpcRating);
return (
<div className="text-gray-700 font-medium flex justify-center">
{row.original.currentEpcRating || ""}
{<EpcLetterBubble letter={row.original.currentEpcRating || ""} />}
</div>
);
},
@ -161,7 +196,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
return (
<div className="text-gray-700 font-medium flex justify-center">
{expectedEpc || ""}
{<EpcLetterBubble letter={expectedEpc || ""} />}
</div>
);
},

7
tailwind.config.js
View file

@ -23,6 +23,13 @@ module.exports = {
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
colors: {
epc_a: "#117d58",
epc_b: "#2da55c",
epc_c: "#8dbd40",
epc_d: "#f7cd14",
epc_e: "#f3a96a",
epc_f: "#ef8026",
epc_g: "#e41e3b",
brandblue: "#14163d",
hoverblue: "#3e4073",
brandtan: "#d3b488",