- added add and remove regions on paint selector

- minor tweaks to ui across app
- updated icon
2025-11-25 20:49:11 +00:00 · 2025-11-25 15:49:53 +00:00 · 2025-11-25 15:02:18 +00:00 · 2025-11-25 14:59:25 +00:00
9 changed files with 100 additions and 19 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BayIQ</title>
  </head>
--- a/public/MAV-Blue.svg
+++ b/public/MAV-Blue.svg
@@ -0,0 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.27 52.63">
  <defs>
    <style>
      .cls-1 {
        fill: #20456f;
      }
    </style>
  </defs>
  <g id="Layer_2-2" data-name="Layer_2">
    <g>
      <g id="Layer_1-2">
        <path class="cls-1" d="M150.57,0h-40.57c-7.53,0-13.64,6.11-13.64,13.64v38.99h13.64v-13.68h40.57v13.68h13.64V13.64c0-7.53-6.11-13.64-13.64-13.64ZM110,28.55v-12.59c0-1.72,1.39-3.11,3.11-3.11h34.34c1.72,0,3.11,1.39,3.11,3.11v12.59h-40.57,0ZM88.45,13.64v38.99h-13.64V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.5c-1.72,0-3.11,1.39-3.11,3.11v36.67h-13.73V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.49c-1.72,0-3.11,1.39-3.11,3.11v36.67H0V13.64C0,6.11,6.11,0,13.64,0h23.55c2.72,0,5.18,1.05,7.03,2.76,1.85-1.71,4.32-2.76,7.03-2.76h23.55c7.53,0,13.64,6.11,13.64,13.64h.01ZM193.88,52.63c-1.19,0-2.28-.68-2.8-1.75L166.25,0h13.16c1.19,0,2.28.68,2.8,1.75,0,0,12.25,25.11,16.55,33.92,4.3-8.81,16.55-33.92,16.55-33.92.53-1.07,1.61-1.75,2.8-1.75h13.16l-24.83,50.88c-.52,1.07-1.61,1.75-2.8,1.75h-9.78.02Z"/>
      </g>
      <path class="cls-1" d="M222.79,48.39c0-2.36,1.9-4.24,4.24-4.24s4.24,1.88,4.24,4.24-1.88,4.24-4.24,4.24-4.24-1.9-4.24-4.24ZM223.45,48.39c0,1.96,1.6,3.58,3.58,3.58s3.56-1.62,3.56-3.58-1.58-3.56-3.56-3.56-3.58,1.56-3.58,3.56ZM228.17,50.83l-1.26-1.92h-.8v1.92h-.72v-4.86h1.98c.9,0,1.62.58,1.62,1.48,0,1.08-.96,1.44-1.24,1.44l1.3,1.94h-.88ZM226.11,46.57v1.72h1.26c.5,0,.88-.34.88-.84,0-.54-.38-.88-.88-.88h-1.26Z"/>
    </g>
  </g>
 </svg>
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -39,6 +39,13 @@ const CameraGrid = () => {
        tabIndex={tabIndex}
        setTabIndex={setTabIndex}
        paintedCells={paintedCellsRef}
        onAddRegion={() => {
          setRegions((prev) => [...prev, { name: `Region ${prev.length + 1}`, brushColour: "#ffffff" }]);
        }}
        OnRemoveRegion={() => {
          setRegions((prev) => prev.filter((_, i) => i !== selectedRegionIndex));
          setSelectedRegionIndex((prev) => (prev > 0 ? prev - 1 : 0));
        }}
      />
      <PlatePatch />
    </div>
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -15,6 +15,8 @@ type CameraSettingsProps = {
  setTabIndex: (tabIndex: number) => void;
  tabIndex: number;
  paintedCells: RefObject<Map<string, PaintedCell>>;
  onAddRegion: () => void;
  OnRemoveRegion: () => void;
 };
 const CameraSettings = ({
@@ -27,6 +29,8 @@ const CameraSettings = ({
  tabIndex,
  setTabIndex,
  paintedCells,
  onAddRegion,
  OnRemoveRegion,
 }: CameraSettingsProps) => {
  return (
    <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
@@ -50,6 +54,8 @@ const CameraSettings = ({
            mode={mode}
            onSelectMode={onSelectMode}
            paintedCells={paintedCells}
            onAddRegion={onAddRegion}
            OnRemoveRegion={OnRemoveRegion}
          />
        </TabPanel>
        <TabPanel>
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -10,6 +10,8 @@ type RegionSelectorProps = {
  mode: string;
  onSelectMode: (mode: string) => void;
  paintedCells: RefObject<Map<string, PaintedCell>>;
  onAddRegion: () => void;
  OnRemoveRegion: () => void;
 };
 const RegionSelector = ({
@@ -20,16 +22,26 @@ const RegionSelector = ({
  mode,
  onSelectMode,
  paintedCells,
  onAddRegion,
  OnRemoveRegion,
 }: RegionSelectorProps) => {
  const handleChange = (e: { target: { value: string } }) => {
    onSelectMode(e.target.value);
  };
  const handleAddClick = () => {
    onAddRegion();
  };
  const handleResetClick = () => {
    const map = paintedCells.current;
    map.clear();
  };
  const handleRemoveClick = () => {
    OnRemoveRegion();
  };
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
@@ -102,9 +114,17 @@ const RegionSelector = ({
            );
          })}
        </>
        <div className=" mx-auto flex flex-row gap-4  mt-4">
          <button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddClick}>
            Add Region
          </button>
          <button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
            Remove Region
          </button>
        </div>
      </div>
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
        <div className="flex flex-col">
          <h2 className="text-2xl mb-2">Actions</h2>
          <button
--- a/src/features/dashboard/components/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -6,31 +6,40 @@ type SystemHealthProps = {
  uptime: string;
  statuses: SystemHealthStatus[];
  isLoading: boolean;
  isError: boolean;
  dateUpdatedAt?: number;
 };
-const SystemHealth = ({ startTime, uptime, statuses, isLoading }: SystemHealthProps) => {
+const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
  const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
  if (isError) {
    return <span className="text-red-500">Error loading system health.</span>;
  }
  if (isLoading) {
    return <span className="text-slate-500">Loading system health…</span>;
  }
  return (
-    <div className="h-100 md:h-70">
+    <div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
      <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
-        <div>
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
        </div>
-        <div>
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
        </div>
      </div>
-
+      <div className="h-50 overflow-auto">
      <div>
        {statuses?.map((status: SystemHealthStatus) => (
          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between">
            <span>{status.id}</span> <Badge text={status.tags[0]} />
          </div>
        ))}
      </div>
      <div className="border-t border-gray-500">
        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
      </div>
    </div>
  );
 };
--- a/src/features/dashboard/components/SystemOverview.tsx
+++ b/src/features/dashboard/components/SystemOverview.tsx
@@ -11,10 +11,21 @@ const SystemOverview = () => {
  const uptime = query?.data?.UptimeHumane;
  const statuses = query?.data?.Status;
  const isLoading = query?.isLoading;
  const isError = query?.isError;
  const dateUpdatedAt = query?.dataUpdatedAt;
  console.log(query?.dataUpdatedAt);
  return (
    <Card className="p-4">
      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
-      <SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} />
+      <SystemHealth
        startTime={startTime}
        uptime={uptime}
        statuses={statuses}
        isLoading={isLoading}
        isError={isError}
        dateUpdatedAt={dateUpdatedAt}
      />
    </Card>
  );
 };
--- a/src/ui/CardHeader.tsx
+++ b/src/ui/CardHeader.tsx
@@ -21,7 +21,7 @@ const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps)
          {status && <StatusIndicators status={status} />}
          {title}
        </h2>
-        {icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />}
+        {icon && <FontAwesomeIcon icon={icon} className="hover:cursor-pointer" onClick={refetch} />}
      </div>
    </div>
  );
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -1,29 +1,39 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGaugeHigh } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";
 const Header = () => {
  return (
-    <header className="bg-[#253445] p-4 flex  border-b border-gray-500 justify-between">
+    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
      <div className="w-28">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
-      <div className="flex gap-4">
+      <div className="flex gap-4 text-lg items-center">
-        <Link to="/" className="[&.active]:font-bold">
+        <Link
-          <FontAwesomeIcon icon={faGaugeHigh} />
+          to="/"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
          Dashboard
        </Link>
-        <Link to="/baywatch" className="[&.active]:font-bold">
+        <Link
          to="/baywatch"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Cameras
        </Link>
-        <Link to="/output" className="[&.active]:font-bold">
+        <Link
          to="/output"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Output
        </Link>
-        <Link to="/settings" className="[&.active]:font-bold">
+        <Link
          to="/settings"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Settings
        </Link>
      </div>
Author	SHA1	Message	Date
Toba Ojo	225a2a6168	- added add and remove regions on paint selector	2025-11-25 20:49:11 +00:00
Toba Ojo	2aa0b4377f	- minor tweaks to ui across app	2025-11-25 15:49:53 +00:00
Toba Ojo	0d385061e0	- updated icon	2025-11-25 15:02:18 +00:00
TobaOjo	3bbb3166ba	Merge pull request '- improved ui for region selector and camera settings' (#5 ) from feature/cameras-2 into develop Reviewed-on: #5	2025-11-25 14:59:25 +00:00