Beautify admin UI

frontend-admin/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@mantine/core": "^7.5.2",
     "@mantine/hooks": "^7.5.2",
+    "@tabler/icons-react": "^3.7.0",
     "@tanstack/react-query": "^5.14.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend-admin/src/api/routes.ts

@@ -1,8 +1,27 @@
 import { QueryClient } from "@tanstack/react-query";
-import { Stop } from "../pages/routes/route-types";
-
+import { Route, Stop, Van, VanStatus } from "./types";
 const baseUrl = import.meta.env.VITE_BACKEND_URL;
 
+export const getVanStatus = async () => {
+  const response = await fetch(`${baseUrl}/vans/v2`);
+  const data = await response.json() as VanStatus[];
+  return data;
+}
+
+export const getVans = async () => {
+  const response = await fetch(`${baseUrl}/vans/`);
+  const data = await response.json();
+  const van_data = (data as Van[]) || [];
+  return van_data;
+};
+
+export const getRoutes = async () => {
+  const response = await fetch(`${baseUrl}/routes/`);
+  const data = await response.json();
+  const route_data = data as Route[];
+  return route_data;
+};
+
 export const getKML = async () => {
   const response = await fetch(`${baseUrl}/routes/kmlfile`);
   const data = await response.json();
@@ -33,7 +52,7 @@ export const clearRoutes = async (queryClient: QueryClient) => {
   }
 };
 
-export const fetchStops = async (routeId: number) => {
+export const getStops = async (routeId: number) => {
   const response = await fetch(`${baseUrl}/routes/${routeId}/stops`);
   const data = await response.json();
   const stops_data = (data as Stop[]) || [];

frontend-admin/src/api/types.ts

@@ -0,0 +1,23 @@
+export interface Van {
+  id: number;
+  routeId: number;
+}
+
+export interface Route {
+  id: number;
+  name: string;
+  color: string;
+  description: string;
+}
+
+export interface Stop {
+  id: number;
+  name: string;
+}
+
+export interface VanStatus {
+  guid: string;
+  alive: boolean;
+  started: number;
+  updated: number;
+}

frontend-admin/src/components/card/card.scss

@@ -1,6 +1,5 @@
 .c-card {
   display: flex;
   flex-direction: column;
-  // background: #e9e9e9;
-  // width: fit-content;
+  background: #e9e9e9;
 }

frontend-admin/src/components/card/card.tsx

@@ -3,21 +3,18 @@ import React from "react";
 import "./card.scss";
 
 interface CardProps {
-  title: string;
   onClick?: () => void;
   children?: React.ReactNode;
+  className?: string;
 }
-const Card: React.FC<CardProps> = ({ title, onClick, children }) => {
+const Card: React.FC<CardProps> = ({ children, className, onClick }) => {
   return (
     <Paper
-      withBorder
+      p="lg"
+      className={`c-card ${className}`}
+      radius="lg"
       onClick={onClick}
-      p="md"
-      shadow="xs"
-      className="c-card
-    "
     >
-      <h2>{title}</h2>
       <div className="card-content">{children}</div>
     </Paper>
   );

frontend-admin/src/components/navbar/navbar.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import logo from '../../assets/logo.png';
-import './navbar.scss';
-interface NavBarProps { }
+import React from "react";
+import { NavLink } from "react-router-dom";
+import logo from "../../assets/logo.png";
+import "./navbar.scss";
+interface NavBarProps {}
 
 const NavBar: React.FC<NavBarProps> = () => {
   return (
@@ -12,14 +12,27 @@ const NavBar: React.FC<NavBarProps> = () => {
           <img src={logo} />
         </div>
         <ul className="nav-links">
-          <li><NavLink to="/vans">Vans</NavLink></li>
-          <li><NavLink to="/alerts">Alerts</NavLink></li>
-          <li><NavLink to="/routes">Routes</NavLink></li>
-          <li><NavLink to="/ridership">Ridership</NavLink></li>
-          <li><NavLink to="/accommodations">Accommodations</NavLink></li>
+          <li>
+            <NavLink to="/vans">Vans</NavLink>
+          </li>
+          <li>
+            <NavLink to="/van-status">Van Status</NavLink>
+          </li>
+          <li>
+            <NavLink to="/alerts">Alerts</NavLink>
+          </li>
+          <li>
+            <NavLink to="/routes">Routes</NavLink>
+          </li>
+          <li>
+            <NavLink to="/ridership">Ridership</NavLink>
+          </li>
+          <li>
+            <NavLink to="/accommodations">Accommodations</NavLink>
+          </li>
         </ul>
       </nav>
-      <div className='divider'></div>
+      <div className="divider"></div>
     </div>
   );
 };

frontend-admin/src/main.tsx

@@ -12,6 +12,7 @@ import Root from "./templates/root";
 
 import { MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.layer.css";
+import { VanStatusPage } from "./pages/van-status/van-status-page";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -21,6 +22,7 @@ const router = createBrowserRouter([
         path: "/vans",
         element: <VanPage />,
       },
+      { path: "/van-status", element: <VanStatusPage /> },
       {
         path: "/ridership",
         element: <RidershipPage />,
@@ -46,7 +48,7 @@ const queryClient = new QueryClient();
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <QueryClientProvider client={queryClient}>
     <React.StrictMode>
-      <MantineProvider>
+      <MantineProvider forceColorScheme="light">
         <RouterProvider router={router} />
       </MantineProvider>
     </React.StrictMode>

frontend-admin/src/pages/alerts/alerts-page.tsx

@@ -108,12 +108,13 @@ const AlertsPage: React.FC = () => {
       <div className="cards-container">
         {alerts?.map((alert: Alert) => (
           <Card
-            title={`Alert ${alert.id}`}
             key={alert.id}
             onClick={() => {
               handleEdit(alert.id);
             }}
-          ></Card>
+          >
+            <h2>Alert ${alert.id}</h2>
+          </Card>
         ))}
       </div>
 

frontend-admin/src/pages/routes/edit-route-form.tsx

@@ -1,49 +1,52 @@
 import { forwardRef, useImperativeHandle, useRef } from "react";
-import { Route, RouteEditFormRef, RouteEditProps } from "./route-types";
-
-const EditRouteForm = forwardRef<RouteEditFormRef, RouteEditProps>(({onSubmit, onDelete, onCancel}, ref) => {
-
-  const nameRef = useRef<HTMLInputElement>(null);
-  const kmlRef = useRef<HTMLInputElement>(null);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.currentTarget);
-
-    onSubmit(formData);
-  };
-
-  const setData = (data: Route) => {
-    if (nameRef.current && kmlRef.current) {
-      nameRef.current.value = data.name;
-    }
+import { Route } from "../../api/types";
+import { RouteEditFormRef, RouteEditProps } from "./route-types";
+const EditRouteForm = forwardRef<RouteEditFormRef, RouteEditProps>(
+  ({ onSubmit, onDelete, onCancel }, ref) => {
+    const nameRef = useRef<HTMLInputElement>(null);
+    const kmlRef = useRef<HTMLInputElement>(null);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      onSubmit(formData);
+    };
+
+    const setData = (data: Route) => {
+      if (nameRef.current && kmlRef.current) {
+        nameRef.current.value = data.name;
+      }
+    };
+
+    const clearForm = () => {
+      nameRef.current!.value = "";
+      kmlRef.current!.value = "";
+    };
+
+    useImperativeHandle(ref, () => ({
+      setData,
+      clearForm,
+    }));
+
+    return (
+      <form className="edit-form" onSubmit={handleSubmit}>
+        <h2>Edit Route</h2>
+        <label htmlFor="name">Name</label>
+        <input type="text" id="name" name="name" ref={nameRef} />
+        <br />
+        <label htmlFor="kml">KML File</label>
+        <input type="file" id="kml" name="kml" ref={kmlRef} />
+        <br />
+        <button type="submit">Submit</button>
+        <button type="button" onClick={onDelete}>
+          Delete
+        </button>
+        <button type="button" onClick={onCancel}>
+          Cancel
+        </button>
+      </form>
+    );
   }
-
-  const clearForm = () => {
-    nameRef.current!.value = '';
-    kmlRef.current!.value = '';
-  };
-
-  useImperativeHandle(ref, () => ({
-    setData,
-    clearForm,
-  }));
-
-  return (
-    <form className="edit-form" onSubmit={handleSubmit}>
-      <h2>Edit Route</h2>
-      <label htmlFor="name">Name</label>
-      <input type="text" id="name" name="name" ref={nameRef} />
-      <br />
-      <label htmlFor="kml">KML File</label>
-      <input type="file" id="kml" name="kml" ref={kmlRef} />
-      <br />
-      <button type="submit">Submit</button>
-      <button type="button" onClick={onDelete}>Delete</button>
-      <button type="button" onClick={onCancel}>Cancel</button>
-    </form>
-  );
-});
+);
 
 export default EditRouteForm;

frontend-admin/src/pages/routes/route-types.tsx

@@ -1,12 +1,4 @@
-export interface Route {
-  id: number;
-  name: string;
-}
-
-export interface Stop {
-  id: number;
-  name: string;
-}
+import { Route } from "../../api/types";
 
 export interface AddRouteFormProps {
   onSubmit: (data: FormData) => void; // or Promise<void> if async