feat: Deploy React dashboard to Netlify with TypeScript fixes

dashboards/dashboard_1/src/App.tsx

@@ -4,8 +4,10 @@ import { useState } from "react";
 import { PredictionTable } from "./components/PredictionTable";
 import { PredictionChart } from "./components/PredicitionChart";
 
+type PredictionsType = Record<string, number>;
+
 function App() {
-  const [predictions, setPredictions] = useState(null);
+  const [predictions, setPredictions] = useState<PredictionsType | null>(null);
   return (
     <div className="flex flex-col max-w-screen-lg max-h-screen-lg p-10">
       <div className="space-y-0.5">

dashboards/dashboard_1/src/components/PVForecastForm.tsx

@@ -39,7 +39,9 @@ const formSchema = z.object({
     .gt(0, { message: "Site capacity must be greather than 0." }),
 });
 
-export function PVForecastForm({ updatePredictions }) {
+type PredictionsType = Record<string, number>;
+
+export function PVForecastForm({ updatePredictions }: { updatePredictions: (predictions: PredictionsType) => void }) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     mode: "onChange",
@@ -51,13 +53,19 @@ export function PVForecastForm({ updatePredictions }) {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    const response = await fetch(`http://localhost:8000/forecast`, {
+    const response = await fetch(`https://open.quartz.solar/forecast/`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(values),
+      body: JSON.stringify({
+        site: {
+          latitude: values.latitude,
+          longitude: values.longitude,
+          capacity_kwp: values.capacity_kwp,
+        },
+      }),
     });
     const data = await response.json();
-    updatePredictions(data.power_kw);
+    updatePredictions(data.predictions.power_kw);
   }
   return (
     <Form {...form}>

dashboards/dashboard_1/src/components/PredicitionChart.tsx

@@ -3,7 +3,6 @@ import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
-  ChartTooltipContent,
 } from "@/components/ui/chart";
 const chartConfig = {
   power: {
@@ -12,9 +11,16 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-function CustomizedTick(props) {
-  const { x, y, stroke, payload } = props;
-  const [date, time] = payload.value.split("T");
+interface TickProps {
+  x?: number;
+  y?: number;
+  stroke?: string;
+  payload?: { value: string };
+}
+
+function CustomizedTick(props: TickProps) {
+  const { x = 0, y = 0, payload } = props;
+  const [date, time] = (payload?.value ?? "").split("T");
   return (
     <g transform={`translate(${x},${y})`}>
       <text x={0} y={0} dy={16}>
@@ -29,7 +35,9 @@ function CustomizedTick(props) {
   );
 }
 
-export function PredictionChart({ predictions }) {
+type PredictionsType = Record<string, number>;
+
+export function PredictionChart({ predictions }: { predictions: PredictionsType }) {
   const chartData = Object.keys(predictions).map((key) => ({
     datetime: key,
     power: predictions[key],

dashboards/dashboard_1/src/components/PredictionTable.tsx

@@ -7,7 +7,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-export function PredictionTable({ predictions }) {
+
+type PredictionsType = Record<string, number>;
+
+export function PredictionTable({ predictions }: { predictions: PredictionsType }) {
   return (
     <Table className="border">
       <TableCaption>

dashboards/dashboard_1/src/components/ui/calendar.tsx

@@ -52,8 +52,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        IconRight: () => <ChevronRight className="h-4 w-4" />,
       }}
       {...props}
     />

dashboards/dashboard_1/tsconfig.app.json

@@ -1,13 +1,22 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -16,12 +25,13 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
-}
+  "include": [
+    "src"
+  ]
+}

quartz_solar_forecast/weather/open_meteo.py

@@ -99,7 +99,7 @@
             raise ValueError(
                 f"Invalid date format. Please use YYYY-MM-DD format. Error: {str(e)}"
             ) from e
-        
+
         if not (end_datetime > start_datetime):
             raise ValueError(
                 f"Invalid date range. End date ({end_date}) must be greater than "