implement mui stepper

backend/package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.46.1",
     "cors": "^2.8.5",
-    "dependencies": "^0.0.1",
     "dotenv": "^16.4.5",
     "express": "^4.21.0",
     "jsonwebtoken": "^9.0.2",

frontend/package.json

@@ -17,7 +17,6 @@
     "@mui/material": "^6.1.2",
     "@supabase/supabase-js": "^2.45.5",
     "axios": "^1.7.7",
-    "dependencies": "^0.0.1",
     "pdfjs-dist": "^4.7.76",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/components/Buttons/LogHistoryButton.jsx

@@ -6,7 +6,7 @@ export default function LogHistoryButton({ variant }) {
   const navigate = useNavigate();
 
   const handleViewHistory = () => {
-    navigate("/logHistory");
+    navigate("/log-history");
   };
 
   return (

frontend/src/components/Buttons/SignUpButton.jsx

@@ -5,7 +5,7 @@ export default function SignUpButton() {
   const navigate = useNavigate();
 
   const handleSignUpClick = () => {
-    navigate("/signup");
+    navigate("/sign-up");
   };
   return (
     <div className="sign-up-button-container">

frontend/src/main.jsx

@@ -6,28 +6,28 @@ import App from "./App.jsx";
 import Login from "./pages/login/Login.jsx";
 import SignUp from "./pages/sign_up/SignUp.jsx";
 import NotFound from "./pages/not_found/NotFound.jsx";
-import Home from "./pages/Homepage.jsx";
+import Home from "./pages/home/Home.jsx";
 import Dashboard from "./pages/Dashboard.jsx";
 import NewLog from "./pages/NewLog.jsx";
 import LogHistory from "./pages/LogHistory.jsx";
 import UploadPhotos from "./pages/UploadPhoto.jsx";
-import ManualEdit from "./pages/ManualEdit.jsx";
+import ManualEntry from "./pages/manual_entry/ManualEntry.jsx";
 import "./index.css";
 
 createRoot(document.getElementById("root")).render(
   <AuthProvider>
     <BrowserRouter>
       <Routes>
         <Route path="/login" element={<Login />} />
-        <Route path="/homepage" element={<Home />} />
-        <Route path="/signup" element={<SignUp />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="/sign-up" element={<SignUp />} />
         <Route element={<ProtectedRoutes />}>
           <Route index element={<App />} />
           <Route path="/dashboard" element={<Dashboard />} />
-          <Route path="/newLog" element={<NewLog />} />
-          <Route path="/logHistory" element={<LogHistory />} />
-          <Route path="/uploadPhotos" element={<UploadPhotos />} />
-          <Route path="/manualEdit" element={<ManualEdit />} />
+          <Route path="/new-log" element={<NewLog />} />
+          <Route path="/log-history" element={<LogHistory />} />
+          <Route path="/upload-photos" element={<UploadPhotos />} />
+          <Route path="/manual-entry" element={<ManualEntry />} />
         </Route>
         <Route path="*" element={<NotFound />} />
       </Routes>

frontend/src/pages/NewLog.jsx

@@ -17,7 +17,7 @@ function CTASection() {
   const navigate = useNavigate();
 
   const handleUploadPhoto = () => {
-    navigate("/uploadPhotos");
+    navigate("/upload-photos");
   };
 
   const handleEnterManually = () => {

frontend/src/pages/UploadPhoto.jsx

@@ -37,7 +37,7 @@ export default function UploadPhotos() {
   };
 
   const handleBack = () => {
-    navigate("/newLog");
+    navigate("/new-log");
   };
 
   return (

frontend/src/pages/home/Home.jsx

@@ -0,0 +1,29 @@
+import SignUpButton from "../../components/Buttons/SignUpButton";
+import Navbar from "../../components/Navbar/Navbar";
+
+const mainColour = "#646cff";
+
+export default function Home() {
+  return (
+    <div className="home-container">
+      <Navbar variant="homepage" />
+      <CTASection mainColour={mainColour} />
+    </div>
+  );
+}
+
+function CTASection() {
+  return (
+    <div className="cta-section">
+      <h1>
+        Welcome to <br />
+        <span style={{ color: mainColour }}>FlowLeaflets</span>
+      </h1>
+      <p className="cta-paragraph">
+        Detailed caselogs for patients you see, vital care for those in need,
+        globally
+      </p>
+      <SignUpButton />
+    </div>
+  );
+}

frontend/src/pages/login/Login.jsx

@@ -57,7 +57,7 @@ export default function Login() {
           Login
         </button>
       </form>
-      <Link to="/signup">Don&apos;t have an Account? Register</Link>
+      <Link to="/sign-up">Don&apos;t have an Account? Register</Link>
     </div>
   );
 }

frontend/src/pages/manual_entry/ManualEntry.jsx

@@ -0,0 +1,66 @@
+import { useState, Fragment } from 'react';
+
+import Box from '@mui/material/Box';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+
+const steps = ['Step 1', 'Step 2', 'Step 3'];
+
+export default function HorizontalLinearStepper() {
+  const [activeStep, setActiveStep] = useState(0);
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stepper activeStep={activeStep}>
+        {steps.map((label) => {
+          const stepProps = {};
+          const labelProps = {};
+          return (
+            <Step key={label} {...stepProps}>
+              <StepLabel {...labelProps}>{label}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>
+      {activeStep === steps.length ? (
+        <Fragment>
+          <Typography sx={{ mt: 2, mb: 1 }}>
+            All steps completed - you&apos;re finished
+          </Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+            <Box sx={{ flex: '1 1 auto' }} />
+          </Box>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+            <Button
+              backgroundColor="inherit"
+              disabled={activeStep === 0}
+              onClick={handleBack}
+              sx={{ mr: 1 }}
+            >
+              Back
+            </Button>
+            <Box sx={{ flex: '1 1 auto' }} />
+            <Button onClick={handleNext}>
+              {activeStep === steps.length - 1 ? 'Save to Log History' : 'Next'}
+            </Button>
+          </Box>
+        </Fragment>
+      )}
+    </Box>
+  );
+}