From 36c6e33a38d05f6f4fb68f3841cc2f7afcc65eee Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Wed, 10 Jul 2024 12:55:41 +0100
Subject: [PATCH] Adding new solar page

---
 src/app/db/schema/solar.ts                    | 14 ++++
 .../[propertyId]/solar-analysis/page.tsx      | 67 ++++++++++++++++++-
 2 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/src/app/db/schema/solar.ts b/src/app/db/schema/solar.ts
index c8c23b1..59a8cc3 100644
--- a/src/app/db/schema/solar.ts
+++ b/src/app/db/schema/solar.ts
@@ -89,3 +89,17 @@ export interface SolarInterface {
   updatedAt: Date;
   googleApiResponse: GoogleApiResponse;
 }
+
+export interface RoofSegment {
+  segmentIndex: number;
+  areaMeters2: number;
+  groundAreaMeters2: number;
+  sunshineQuantiles: number[];
+  center: {
+    latitude: number;
+    longitude: number;
+  };
+  pitchDegrees: number;
+  azimuthDegrees: number;
+  planeHeightAtCenterMeters: number;
+}
diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/solar-analysis/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/solar-analysis/page.tsx
index fd4d10e..06eb3c2 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/solar-analysis/page.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/solar-analysis/page.tsx
@@ -3,9 +3,13 @@ import {
   LightBulbIcon,
   SunIcon,
   InformationCircleIcon,
+  CloudIcon,
+  SparklesIcon,
 } from "@heroicons/react/24/outline";
 import { getPropertyMeta } from "../utils";
 import { getSolarData } from "./utils";
+import FeatureTable from "@/app/components/building-passport/FeatureTable";
+import { roofSegmentsColumns } from "./roof-segments-table";
 
 export default async function SolarAnalysisPage({
   params,
@@ -33,11 +37,41 @@ export default async function SolarAnalysisPage({
     panelHeightMeters,
     panelCapacityWatts,
     panelLifetimeYears,
+    maxSunshineHoursPerYear,
+    carbonOffsetFactorKgPerMwh,
+    roofSegmentStats,
   } = solarData.googleApiResponse.solarPotential;
 
+  const getDirectionFromAzimuth = (azimuth: number): string => {
+    if ((azimuth >= 330 && azimuth <= 360) || (azimuth >= 0 && azimuth < 30))
+      return "N";
+    if (azimuth >= 30 && azimuth < 60) return "NE";
+    if (azimuth >= 60 && azimuth < 120) return "E";
+    if (azimuth >= 120 && azimuth < 150) return "SE";
+    if (azimuth >= 150 && azimuth < 210) return "S";
+    if (azimuth >= 210 && azimuth < 240) return "SW";
+    if (azimuth >= 240 && azimuth < 300) return "W";
+    if (azimuth >= 300 && azimuth < 330) return "NW";
+    return "";
+  };
+
+  const transformedRoofSegmentStats = roofSegmentStats.map(
+    ({ segmentIndex, stats, center, azimuthDegrees, ...rest }) => ({
+      ...rest,
+      areaMeters2: stats.areaMeters2.toFixed(1),
+      groundAreaMeters2: stats.groundAreaMeters2.toFixed(1),
+      azimuthDegrees: azimuthDegrees.toFixed(1),
+      center: {
+        latitude: center.latitude.toFixed(6),
+        longitude: center.longitude.toFixed(6),
+      },
+      sunshineQuantiles: stats.sunshineQuantiles.join(", "), // Join sunshineQuantiles into a string
+      direction: getDirectionFromAzimuth(azimuthDegrees),
+    })
+  );
+
   return (
     <div className="leading-loose tracking-wider">
-      <div className="flex py-8 text-lg">Solar Analysis</div>
       <div className="py-8 max-w-7xl mx-auto">
         <div className="bg-white shadow-md rounded-lg p-6 mb-8 w-full">
           <h2 className="text-l font-semibold text-gray-800 mb-4">
@@ -70,7 +104,36 @@ export default async function SolarAnalysisPage({
             </div>
           </div>
         </div>
-        {/* Add more sections here as needed */}
+
+        <div className="bg-white shadow-md rounded-lg p-6 mb-8 w-full">
+          <h2 className="text-l font-semibold text-gray-800 mb-4">
+            Weather and Environmental Data
+          </h2>
+          <div className="flex flex-col space-y-4">
+            <div className="flex items-center p-4 bg-indigo-50 rounded-lg shadow w-full">
+              <CloudIcon className="w-6 h-6 text-indigo-500 mr-2" />
+              <p className="text-lg text-gray-700">
+                Max Sunshine Hours per Year: {maxSunshineHoursPerYear} hours
+              </p>
+            </div>
+            <div className="flex items-center p-4 bg-teal-50 rounded-lg shadow w-full">
+              <SparklesIcon className="w-6 h-6 text-teal-500 mr-2" />
+              <p className="text-lg text-gray-700">
+                Carbon Offset Factor: {carbonOffsetFactorKgPerMwh} kg/MWh
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white shadow-md rounded-lg p-6 mb-8 w-full">
+          <h2 className="text-l font-semibold text-gray-800 mb-4">
+            Roof Segments Data
+          </h2>
+          <FeatureTable
+            data={transformedRoofSegmentStats}
+            columns={roofSegmentsColumns}
+          />
+        </div>
       </div>
     </div>
   );