From b15ead48a806fceeb85bc25cc669a7af924f73bd Mon Sep 17 00:00:00 2001
From: jkoren <j.korenstein@gmail.com>
Date: Mon, 6 Nov 2023 16:13:10 -0500
Subject: [PATCH] adjusted mock up to reflect 11/5/23 UA revision

---
 heat-stack/app/App.css                    |  91 ++++------
 heat-stack/app/components/CaseSummary.tsx | 193 ++++++++++++++--------
 2 files changed, 150 insertions(+), 134 deletions(-)

diff --git a/heat-stack/app/App.css b/heat-stack/app/App.css
index c7db77c2..9d1484cb 100644
--- a/heat-stack/app/App.css
+++ b/heat-stack/app/App.css
@@ -1,35 +1,7 @@
 body {
-  margin: 0;
-  padding: 0;
-  background-color: #1d2634;
-  color: #9e9ea4;
   font-family: 'Montserrat', sans-serif;
 }
 
-.icon {
-  vertical-align: middle;
-  line-height: 1px;
-  font-size: 20px;
-}
-
-.icon_header {
-  vertical-align: middle;
-  line-height: 1px;
-  font-size: 26px;
-}
-
-.icon,
-.icon_header {
-  margin-right: 5px;
-}
-
-.close_icon {
-  color: red;
-  margin-left: 30px;
-  margin-top: 10px;
-  cursor: pointer;
-}
-
 .grid-container {
   display: grid;
   grid-template-columns: 260px 1fr 1fr 1fr;
@@ -40,23 +12,6 @@ body {
   height: 100vh;
 }
 
-/* Header  */
-.header {
-  grid-area: header;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 30px 0 30px;
-  box-shadow: 0 6px 7px -3px rgba(0, 0, 0, 0.35);
-}
-
-.menu-icon {
-  display: none;
-}
-
-/* End Header  */
-
 /* Main  */
 .main-container {
   grid-area: main;
@@ -65,19 +20,20 @@ body {
   color: #9e9ea4;
 }
 
-.main-title {
-  display: flex;
-  justify-content: space-between;
-}
-
-.header-cards {
+.two-cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  margin: 15px 0;
+  gap: 10px;
+  margin: 5px 0;
+}
+.three-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+  margin: 5px 0;
 }
 
-.main-cards {
+.four-cards {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 20px;
@@ -99,20 +55,33 @@ body {
   font-size: large;
 }
 
-.navigation {
-  font-size: smaller;
+.page-title {
+  font-size: x-large;
+  text-align: center;
+}
+.section-title {
+  font-size: xx-large
+}
+
+.item-title {
+  font: bold;
+  font-size: x-large
+}
+.item-title-small {
+  font: bold;
+  font-size: medium
+}
+
+.item {
+  font-size: medium
 }
 
 .card-inner {
   display: flex;
-  align-items: center;
+  /* align-items: center; */
   justify-content: space-between;
 }
 
-.card-inner>.card_icon {
-  font-size: 25px;
-}
-
 .charts {
   display: grid;
   grid-template-columns: 1fr 1fr;
diff --git a/heat-stack/app/components/CaseSummary.tsx b/heat-stack/app/components/CaseSummary.tsx
index 94d4ef64..04a7416e 100644
--- a/heat-stack/app/components/CaseSummary.tsx
+++ b/heat-stack/app/components/CaseSummary.tsx
@@ -1,6 +1,28 @@
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'
 
 export function CaseSummary() {
+	const name = 'Pietro Schirano'
+	const street = '567 Pine Avenue Apt 21'
+	const city = 'Rivertown'
+	const state = 'MA'
+	const zip = '02856'
+	const country = 'United States of America'
+	const livingArea = '3000'
+	const designTemperature = '63'
+	const designTemperatureOverride = '65'
+	const fuelType = 'Natural Gas'
+	const heatingSystemEfficiency = '75'
+	const setPoint = '70'
+	const setbackTemperature = '65'
+	const setbackTime = '7'
+	const fileName = '20200930_Eversource.csv'
+	const averageIndoorTemperature = '63.5'
+	const dailyOtherUsage = '1.07'
+	const balancePoint = '60.5'
+	const numPeriodsIncluded = '30 / 36'
+	const standardDevationUA = '5.52'
+	const wholeHomeUA = '1,112'
+
 	const data = [
 		{
 			name: '58 F',
@@ -37,98 +59,123 @@ export function CaseSummary() {
 	return (
 		<main className="main-container">
 			<div>
-				<div className="navigation">Back to website</div>
+				<div className="page-title"> Case Summary</div>
 
-				<div className="header-cards">
+				<div className="section-title"> Home Information </div>
+				<div className="two-cards">
 					<div className="card-inner">
-						<h5 className="text-h5">Winnie Carroll’s Case Summary</h5>
+						<div className="item-title">
+							Resident / Client
+							<br />
+							<div className="item">{name}</div> <br />
+							Address
+							<div className="item">{street}</div>
+							<div className="item">
+								{city}, {state}, {zip}
+							</div>
+							<div className="item">{country}</div> <br />
+							Living Area (sf)
+							<div className="item">{livingArea}</div>
+						</div>
 					</div>
 
-					<div className="card-inner">179 Broadway, Somerville, MA 02145</div>
-				</div>
-				<div className="main-title">
-					<h5 className="text-center text-h5">
-						Summary of heat load analysis outputs
-					</h5>
-				</div>
-			</div>
-
-			<div className="main-cards">
-				<div className="card-inner">
-					<div className="card-title">
-						Avg heat load at design temp
-						<br />
-						<br />
-						<b className="card-statistic">58,582 BTU/h</b>
+					<div className="card-inner">
+						<div className="item-title">
+							Design Temperature (°F) <br />
+							<div className="item">{designTemperature}</div> <br />
+							<div className="item">Override: {designTemperatureOverride}</div>
+						</div>
 					</div>
 				</div>
 
-				<div className="card-inner">
-					<div className="card-title">
-						Average indoor temp
-						<br />
-						<br />
-						<b className="card-statistic">60.0 F</b>
+				<hr />
+
+				<div className="section-title"> Current Heating System </div>
+				<div className="two-cards">
+					<div className="card-inner">
+						<div className="item-title">
+							Fuel Type
+							<br />
+							<div className="item">{fuelType}</div> <br />
+							Heating System Efficiency (%)
+							<br />
+							<div className="item">{heatingSystemEfficiency}</div> <br />
+						</div>
 					</div>
-				</div>
 
-				<div className="card-inner">
-					<div className="card-title">
-						Standard deviation of UA
-						<br />
-						<br />
-						<b className="card-statistic">5.08%</b>
+					<div className="card-inner">
+						<div className="item-title">
+							Set Point (°F) <br />
+							<div className="item">{setPoint}</div> <br />
+							Setback Temperature (°F)
+							<br />
+							<div className="item">{setbackTemperature}</div> <br />
+							Setback Time (h)
+							<div className="item">{setbackTime}</div>
+						</div>
 					</div>
 				</div>
 
-				<div className="card-inner">
-					<div>
-						Balance point
-						<LineChart
-							width={250}
-							height={150}
-							data={data}
-							margin={{
-								top: 5,
-								right: 30,
-								left: 20,
-								bottom: 5,
-							}}
-						>
-							<CartesianGrid strokeDasharray="3 3" />
-							<XAxis dataKey="name" />
-							<YAxis />
-							<Tooltip />
-							<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
-						</LineChart>
-					</div>
+				<hr />
+
+				<div className="section-title">Energy Use History</div>
+				<div className="item-title">
+					Data Source
+					<br />
+					<div className="item">{fileName}</div> <br />
 				</div>
+				<div className="item-title">Analysis</div>
+				<div className="three-cards">
+					<div className="card-inner">
+						<div className="item-title-small">
+							Average Indoor Temperature (°F) <br />
+							<div className="item">{averageIndoorTemperature}</div> <br />
+							Daily Other Usage <br />
+							<div className="item">{dailyOtherUsage}</div> <br />
+						</div>
+					</div>
 
-				<div className="card-inner">
-					<div className="card-title">
-						Max heat load at design temp
-						<br />
-						<br />
-						<b className="card-statistic">69,793 BTU/h</b>
+					<div className="card-inner">
+						<div className="item-title-small">
+							Balance Point (°F) <br />
+							<div className="item">{balancePoint}</div> <br />
+							No. of Periods Included <br />
+							<div className="item">{numPeriodsIncluded}</div> <br />
+						</div>
 					</div>
-				</div>
 
-				<div className="card-inner">
-					<div className="card-title">
-						Design temp
-						<br />
-						<br />
-						<b className="card-statistic">8.4 F</b>
+					<div className="card-inner">
+						<div className="item-title-small">
+							Standard Deviation of UA (%) <br />
+							<div className="item">{standardDevationUA}</div> <br />
+							Whole-home UA (BTU/h-F) <br />
+							<div className="item">{wholeHomeUA}</div> <br />
+						</div>
 					</div>
 				</div>
 
-				<div className="card-inner">
-					<div className="card-title">
-						Whole home UA
-						<br />
-						<br />
-						<b className="card-statistic">1057 BTU/h-F</b>
-					</div>
+				<hr />
+
+				<div className="section-title">Graphs</div>
+				<div className="item-title">
+					Balance point
+					<LineChart
+						width={750}
+						height={450}
+						data={data}
+						margin={{
+							top: 5,
+							right: 30,
+							left: 20,
+							bottom: 5,
+						}}
+					>
+						<CartesianGrid strokeDasharray="3 3" />
+						<XAxis dataKey="name" />
+						<YAxis />
+						<Tooltip />
+						<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
+					</LineChart>
 				</div>
 			</div>
 		</main>