+ Get solar energy predictions for 48 hours ahead.
+
+
+
+
+
+ {predictions ? (
+
+
+
+
+ ) : (
+
+ Please enter site details to see predictions.
+
+ )}
+
+
+ );
+}
+
+export default App;
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/components/PVForecastForm.tsx b/frontend/src/components/PVForecastForm.tsx
new file mode 100644
index 00000000..44691c17
--- /dev/null
+++ b/frontend/src/components/PVForecastForm.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+
+const formSchema = z.object({
+ latitude: z.coerce
+ .number({ required_error: "Site latitude is required." })
+ .min(-90, {
+ message: "Latitude must be greater than or equal to -90.",
+ })
+ .max(90, {
+ message: "Latitude must be smaller than or equal to 90",
+ }),
+ longitude: z.coerce
+ .number({ required_error: "Site longitude is required." })
+
+ .min(-180, {
+ message: "Longitude must be greater than or equal to -180",
+ })
+ .max(180, {
+ message: "Longitude must be smaller than or equal to 180",
+ }),
+ capacity_kwp: z.coerce
+ .number({ required_error: "Site capacity is required." })
+ .gt(0, { message: "Site capacity must be greather than 0." }),
+});
+
+export function PVForecastForm({ updatePredictions }) {
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ mode: "onChange",
+ defaultValues: {
+ latitude: 51.75,
+ longitude: -1.25,
+ capacity_kwp: 1.25,
+ },
+ });
+
+ async function onSubmit(values: z.infer) {
+ const response = await fetch(`http://localhost:8000/forecast`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(values),
+ });
+ const data = await response.json();
+ updatePredictions(data.power_kw);
+ }
+ return (
+
+
+ );
+}
diff --git a/frontend/src/components/PredicitionChart.tsx b/frontend/src/components/PredicitionChart.tsx
new file mode 100644
index 00000000..486ed098
--- /dev/null
+++ b/frontend/src/components/PredicitionChart.tsx
@@ -0,0 +1,70 @@
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from "@/components/ui/chart";
+const chartConfig = {
+ power: {
+ label: "Power (kw)",
+ color: "hsl(var(--chart-1))",
+ },
+} satisfies ChartConfig;
+
+function CustomizedTick(props) {
+ const { x, y, stroke, payload } = props;
+ const [date, time] = payload.value.split("T");
+ return (
+
+
+
+ {time.slice(0, 5)}
+
+
+ {date}
+
+
+
+ );
+}
+
+export function PredictionChart({ predictions }) {
+ const chartData = Object.keys(predictions).map((key) => ({
+ datetime: key,
+ power: predictions[key],
+ }));
+
+ return (
+
+
+
+ }
+ />
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/PredictionTable.tsx b/frontend/src/components/PredictionTable.tsx
new file mode 100644
index 00000000..608683e8
--- /dev/null
+++ b/frontend/src/components/PredictionTable.tsx
@@ -0,0 +1,35 @@
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+export function PredictionTable({ predictions }) {
+ return (
+
+
+ Solar energy predicted for each time step in a 15 minute interval from
+ now
+
+
+
+ Datetime
+ Power (kw)
+
+
+
+ {Object.keys(predictions).map((datetime) => (
+
+ {datetime}
+
+ {predictions[datetime].toFixed(6)}
+
+
+ ))}
+
+