elsaminsut · Aug 26, 2026 · Aug 21, 2026 · Aug 21, 2026 · Aug 21, 2026 · Aug 21, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -53,6 +53,10 @@ jobs:
         working-directory: frontend
         run: npm ci
 
+      - name: Check formatting
+        working-directory: frontend
+        run: npm run format:check
+
       - name: Lint
         working-directory: frontend
         run: npm run lint

diff --git a/frontend/README.md b/frontend/README.md
@@ -23,15 +23,15 @@ Talks to the [PyPhos backend API](../backend/README.md) for authentication, proj
 
 ## Screens
 
-| Screen | Route | Description |
-|---|---|---|
-| `Login` | `/login` | Sign in |
-| `Signup` | `/signup` | Create an account |
-| `AllProjects` | `/projects` | List and create projects |
-| `Project` | `/projects/:projectId` | View a project's details, its scenarios and their reports |
-| `CreateScenario` | `/projects/:projectId/scenarios/create` | Configure a new scenario |
-| `Scenario` | `/projects/:projectId/scenarios/:scenarioId` | Edit scenario details |
-| `Settings` | `/settings` | Manage account settings |
+| Screen           | Route                                        | Description                                               |
+| ---------------- | -------------------------------------------- | --------------------------------------------------------- |
+| `Login`          | `/login`                                     | Sign in                                                   |
+| `Signup`         | `/signup`                                    | Create an account                                         |
+| `AllProjects`    | `/projects`                                  | List and create projects                                  |
+| `Project`        | `/projects/:projectId`                       | View a project's details, its scenarios and their reports |
+| `CreateScenario` | `/projects/:projectId/scenarios/create`      | Configure a new scenario                                  |
+| `Scenario`       | `/projects/:projectId/scenarios/:scenarioId` | Edit scenario details                                     |
+| `Settings`       | `/settings`                                  | Manage account settings                                   |
 
 All routes except `/login` and `/signup` are behind `PrivateRoute`, which checks for a valid JWT and redirects to `/login` otherwise.
 
@@ -48,4 +48,4 @@ npm install
 npm run dev
 ```
 
-The app will be available at `http://localhost:5173`. Requests to `/api/*` are proxied to `http://localhost:8000` in development (see `vite.config.js`), and to the deployed backend in production (see `vercel.json`).
+The app will be available at `http://localhost:5173`. Requests to `/api/*` are proxied to `http://localhost:8000` in development (see `vite.config.js`), and to the deployed backend in production (see `vercel.json`).
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -1,13 +1,13 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     extends: [
       js.configs.recommended,
       reactHooks.configs.flat.recommended,
@@ -18,20 +18,23 @@ export default defineConfig([
       parserOptions: { ecmaFeatures: { jsx: true } },
     },
     rules: {
-      'no-unused-vars': ['error', {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-        caughtErrorsIgnorePattern: '^_',
-      }],
+      "no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
     },
   },
   {
     // Vendored shadcn/ui components: many co-export a variants function
     // (e.g. buttonVariants) alongside their component by design, which
     // trips this rule. That's expected here, not an app bug.
-    files: ['src/components/ui/**/*.{js,jsx}'],
+    files: ["src/components/ui/**/*.{js,jsx}"],
     rules: {
-      'react-refresh/only-export-components': 'off',
+      "react-refresh/only-export-components": "off",
     },
   },
-])
+]);
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PyPhos</title>
   </head>

diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
@@ -15,4 +15,4 @@
 //       "@/*": ["./src/*"]
 //     }
 //   }
-// }
+// }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
@@ -46,6 +48,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "prettier": "3.9.6",
     "vite": "^8.0.12"
   }
 }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,49 +1,91 @@
-import { useContext } from "react"
-import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router"
+import { useContext } from "react";
+import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router";
 
-import { AuthProvider } from './lib/AuthContext';
-import { AuthContext } from './lib/auth-context';
-import { isTokenValid } from './lib/utils';
-import { Toaster } from '@/components/ui/sonner'
-import Landing from './screens/Landing'
-import Login from './screens/Login'
-import Signup from './screens/Signup'
-import AllProjects from './screens/AllProjects'
-import Project from './screens/Project'
-import CreateScenario from './screens/CreateScenario'
-import Report from './screens/Report'
-import Scenario from './screens/Scenario'
-import Settings from './screens/Settings'
+import { AuthProvider } from "./lib/AuthContext";
+import { AuthContext } from "./lib/auth-context";
+import { isTokenValid } from "./lib/utils";
+import { Toaster } from "@/components/ui/sonner";
+import Landing from "./screens/Landing";
+import Login from "./screens/Login";
+import Signup from "./screens/Signup";
+import AllProjects from "./screens/AllProjects";
+import Project from "./screens/Project";
+import CreateScenario from "./screens/CreateScenario";
+import Report from "./screens/Report";
+import Scenario from "./screens/Scenario";
+import Settings from "./screens/Settings";
 
-import './App.css'
+import "./App.css";
 
 export default function App() {
-    return (
-        <AuthProvider>
-            <Router>
-                <Routes>
-                    <Route path="/" element={<Landing />} />
-                    <Route path="/login" element={<Login />} />
-                    <Route path="/signup" element={<Signup />} />
-                    <Route path="/settings" element={<PrivateRoute><Settings /></PrivateRoute>} />
-                    <Route path="/projects" element={<GuestOrPrivateRoute><AllProjects /></GuestOrPrivateRoute>} />
-                    <Route path="/projects/:projectId" element={<GuestOrPrivateRoute><Project /></GuestOrPrivateRoute>} />
-                    <Route path="/projects/:projectId/scenarios/create" element={<GuestOrPrivateRoute><CreateScenario /></GuestOrPrivateRoute>} />
-                    <Route path="/projects/:projectId/scenarios/:scenarioId" element={<GuestOrPrivateRoute><Scenario /></GuestOrPrivateRoute>} />
-                    <Route path="/projects/:projectId/scenarios/:scenarioId/report" element={<PrivateRoute><Report /></PrivateRoute>} />
-                </Routes>
-            </Router>
-            <Toaster />
-        </AuthProvider>
-    )
+  return (
+    <AuthProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Landing />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route
+            path="/settings"
+            element={
+              <PrivateRoute>
+                <Settings />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/projects"
+            element={
+              <GuestOrPrivateRoute>
+                <AllProjects />
+              </GuestOrPrivateRoute>
+            }
+          />
+          <Route
+            path="/projects/:projectId"
+            element={
+              <GuestOrPrivateRoute>
+                <Project />
+              </GuestOrPrivateRoute>
+            }
+          />
+          <Route
+            path="/projects/:projectId/scenarios/create"
+            element={
+              <GuestOrPrivateRoute>
+                <CreateScenario />
+              </GuestOrPrivateRoute>
+            }
+          />
+          <Route
+            path="/projects/:projectId/scenarios/:scenarioId"
+            element={
+              <GuestOrPrivateRoute>
+                <Scenario />
+              </GuestOrPrivateRoute>
+            }
+          />
+          <Route
+            path="/projects/:projectId/scenarios/:scenarioId/report"
+            element={
+              <PrivateRoute>
+                <Report />
+              </PrivateRoute>
+            }
+          />
+        </Routes>
+      </Router>
+      <Toaster />
+    </AuthProvider>
+  );
 }
 
 const GuestOrPrivateRoute = ({ children }) => {
   const { isGuest, token } = useContext(AuthContext);
-  return isGuest || isTokenValid(token) ? children : <Navigate to="/login" />
+  return isGuest || isTokenValid(token) ? children : <Navigate to="/login" />;
 };
 
 const PrivateRoute = ({ children }) => {
   const { token } = useContext(AuthContext);
-  return isTokenValid(token) ? children : <Navigate to="/login" />
+  return isTokenValid(token) ? children : <Navigate to="/login" />;
 };
diff --git a/frontend/src/components/AngleSlider.jsx b/frontend/src/components/AngleSlider.jsx
@@ -1,9 +1,8 @@
-"use client"
-
-import { Label } from "@/components/ui/label"
-import { Slider } from "@/components/ui/slider"
-import { getCompassDirection } from "@/lib/utils"
+"use client";
 
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { getCompassDirection } from "@/lib/utils";
 
 export function AngleSlider({ name, min, max, value, onValueChange, tag }) {
   return (
@@ -22,5 +21,5 @@ export function AngleSlider({ name, min, max, value, onValueChange, tag }) {
         max={max}
       />
     </div>
-  )
+  );
 }
diff --git a/frontend/src/components/BarChart.jsx b/frontend/src/components/BarChart.jsx
@@ -1,22 +1,22 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+import * as React from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@/components/ui/card";
 import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
+} from "@/components/ui/chart";
 
-export const description = "An interactive bar chart"
+export const description = "An interactive bar chart";
 
 const chartConfig = {
   yield: {
@@ -27,24 +27,24 @@ const chartConfig = {
     label: "Solar radiation",
     color: "var(--chart-1)",
   },
-}
+};
 
 export function ChartBarInteractive({ data, height = 250 }) {
-  const [activeChart, setActiveChart] = React.useState("yield")
+  const [activeChart, setActiveChart] = React.useState("yield");
 
   const totals = React.useMemo(
     () => ({
       yield: data?.reduce((acc, curr) => acc + curr.yield, 0) ?? 0,
       radiation: data?.reduce((acc, curr) => acc + curr.radiation, 0) ?? 0,
     }),
-    [data]
-  )
+    [data],
+  );
 
   if (!data || data.length === 0) {
-    return null
+    return null;
   }
 
-  const units = { yield: "kWh", radiation: "kWh/m²" }
+  const units = { yield: "kWh", radiation: "kWh/m²" };
 
   return (
     <Card className="py-0">
@@ -67,7 +67,9 @@ export function ChartBarInteractive({ data, height = 250 }) {
                 {chartConfig[key].label}
               </span>
               <span className="text-lg leading-none font-bold sm:text-3xl">
-                {totals[key].toLocaleString(undefined, { maximumFractionDigits: 0 })}
+                {totals[key].toLocaleString(undefined, {
+                  maximumFractionDigits: 0,
+                })}
                 <span className="ml-1 text-xs font-normal text-muted-foreground">
                   {units[key]}
                 </span>
@@ -114,5 +116,5 @@ export function ChartBarInteractive({ data, height = 250 }) {
         </ChartContainer>
       </CardContent>
     </Card>
-  )
+  );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ @@
     //       "@/*": ["./src/*"]
     //     }
     //   }
-    // }
+    // }