TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- improved layouts across app

Browse Source 
- adjusted card spacing
This commit is contained in:
Toba Ojo
2025-12-05 17:01:57 +00:00
parent 9e89193747
commit f0587a2b43
7 changed files with 98 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/features/cameras/components/CameraGrid.tsx
View File

@@ -9,10 +9,16 @@ const CameraGrid = () => {
const [tabIndex, setTabIndex] = useState(0); const [tabIndex, setTabIndex] = useState(0);
return ( return (
<div className="flex flex-col gap-4 p-4 md:grid md:grid-cols-5 md:grid-rows-5 md:max-h-screen md:gap-0 md:p-0"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 h-screen max-h-screen overflow-hidden">
<VideoFeedGridPainter /> <div className="col-span-2 flex flex-col gap-4">
<div className="shrink-0">
<VideoFeedGridPainter />
</div>
<div className="flex-1 overflow-hidden">
<PlatePatch />
</div>
</div>
<CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} /> <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
<PlatePatch />
</div> </div>
); );
}; };

2
src/features/cameras/components/CameraSettings/CameraSettings.tsx
View File

@@ -10,7 +10,7 @@ type CameraSettingsProps = {
const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => { const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
return ( return (
<Card className="p-4 w-full overflow-auto md:col-span-2 md:row-span-5 md:col-start-4 md:row-start-1"> <Card className="p-4 w-full h-full max-h-screen ">
<Tabs <Tabs
selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1" selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
className="react-tabs" className="react-tabs"

158
src/features/cameras/components/CameraSettings/RegionSelector.tsx
View File

@@ -106,99 +106,105 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
}; };
return ( return (
<div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4"> <div className="flex flex-col gap-4 max-h-[50%]">
<div className="p-2 border border-gray-600 rounded-lg flex flex-col"> <div className="flex flex-row gap-3">
<h2 className="text-2xl mb-2">Tools</h2> <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-50 w-full">
<div className="flex flex-col"> <h2 className="text-2xl mb-2">Tools</h2>
<label <div className="flex flex-col">
htmlFor="paintMode" <label
className={`p-4 border rounded-lg mb-2 htmlFor="paintMode"
className={`p-4 border rounded-lg mb-2
${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
hover:bg-[#202b36] hover:cursor-pointer`} hover:bg-[#202b36] hover:cursor-pointer`}
> >
<input <input
id="paintMode" id="paintMode"
type="radio" type="radio"
onChange={handleChange} onChange={handleChange}
checked={mode === "painter"} checked={mode === "painter"}
value="painter" value="painter"
className="sr-only" className="sr-only"
/> />
<span className="text-xl">Paint mode</span> <span className="text-xl">Paint mode</span>
</label> </label>
<label <label
htmlFor="eraseMode" htmlFor="eraseMode"
className={`p-4 border rounded-lg mb-2 className={`p-4 border rounded-lg mb-2
${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
hover:bg-[#202b36] hover:cursor-pointer`} hover:bg-[#202b36] hover:cursor-pointer`}
> >
<input <input
id="eraseMode" id="eraseMode"
type="radio" type="radio"
onChange={handleChange} onChange={handleChange}
checked={mode === "eraser"} checked={mode === "eraser"}
value={"eraser"} value={"eraser"}
className="sr-only" className="sr-only"
/> />
<span className="text-xl">Erase mode</span> <span className="text-xl">Erase mode</span>
</label> </label>
</div>
</div> </div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col"> <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
<h2 className="text-2xl mb-2">Bay Select</h2> <h2 className="text-2xl mb-2">Bay Select</h2>
<> <>
{regions?.map((region, idx) => { {regions?.map((region, idx) => {
const isSelected = selectedRegionIndex === idx; const isSelected = selectedRegionIndex === idx;
const inputId = `region-${idx}`; const inputId = `region-${idx}`;
return ( return (
<label <label
htmlFor={inputId} htmlFor={inputId}
key={region.name} key={region.name}
className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`} ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
> >
<div className="flex flex-row gap-4 items-center"> <div className="flex flex-row gap-4 items-center">
<input <input
type="radio" type="radio"
checked={isSelected} checked={isSelected}
id={inputId} id={inputId}
name="region" name="region"
className="sr-only" className="sr-only"
onChange={() => { onChange={() => {
handleModeChange("painter"); handleModeChange("painter");
handleRegionSelect(idx); handleRegionSelect(idx);
}} }}
/>
<span className="text-xl">{region.name}</span>
</div>
<ColourPicker
colour={region.brushColour}
setColour={(c: string) => handleRegionColourChange(idx, c)}
/> />
<span className="text-xl">{region.name}</span> <div></div>
</div> </label>
<ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} /> );
<div></div> })}
</label> </>
); <div className="flex flex-col gap-4 mt-4">
})} <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
</> Add Bay
<div className="flex flex-col gap-4 mt-4"> </button>
<button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}> <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Add Bay Remove Bay
</button> </button>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}> </div>
Remove Bay
</button>
</div> </div>
</div> </div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50"> <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
<div className="flex flex-col"> <h2 className="text-2xl mb-2">Actions</h2>
<h2 className="text-2xl mb-2">Actions</h2> <div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
<button <button
onClick={handleSaveclick} onClick={handleSaveclick}
className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer" className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
> >
Save Region Save Region
</button> </button>
<button <button
onClick={handleResetRegion} onClick={handleResetRegion}
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer" className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
> >
Reset Region Reset Region
</button> </button>

4
src/features/cameras/components/PlatePatch/SightingPatch.tsx
View File

@@ -6,9 +6,9 @@ import SightingExitTable from "./SightingExitTable";
const PlatePatch = () => { const PlatePatch = () => {
return ( return (
<Card className="p-4 w-full md:w-[95%] md:row-start-4 md:col-span-3 md:h-[190%]"> <Card className="p-4 w-full max-h-[600px] overflow-hidden flex flex-col">
<CardHeader title="Entry / Exit" /> <CardHeader title="Entry / Exit" />
<Tabs defaultIndex={1}> <Tabs defaultIndex={1} className="flex-1 overflow-hidden flex flex-col">
<TabList> <TabList>
<Tab>Entry Sightings</Tab> <Tab>Entry Sightings</Tab>
<Tab>Exit Sightings</Tab> <Tab>Exit Sightings</Tab>

2
src/features/cameras/components/Video/VideoFeedGridPainter.tsx
View File

@@ -93,7 +93,7 @@ const VideoFeedGridPainter = () => {
const width = window.innerWidth; const width = window.innerWidth;
const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT; const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
const newWidth = width * 0.55; const newWidth = width * 0.6;
const newHeight = newWidth / aspectRatio; const newHeight = newWidth / aspectRatio;
setStageSize({ width: newWidth, height: newHeight }); setStageSize({ width: newWidth, height: newHeight });
}; };

4
src/features/dashboard/components/DashboardGrid.tsx
View File

@@ -35,7 +35,7 @@ const DashboardGrid = () => {
const categoryC = statusCategories?.channelC ?? []; const categoryC = statusCategories?.channelC ?? [];
return ( return (
<div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2"> <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2 gap-4">
<SystemStatusCard /> <SystemStatusCard />
<SystemHealthCard <SystemHealthCard
startTime={startTime} startTime={startTime}
@@ -46,7 +46,7 @@ const DashboardGrid = () => {
dateUpdatedAt={dateUpdatedAt} dateUpdatedAt={dateUpdatedAt}
refetch={refetch} refetch={refetch}
/> />
<div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3"> <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3 gap-x-4">
<CameraStatus title="Camera A" category={categoryA} isError={isError} /> <CameraStatus title="Camera A" category={categoryA} isError={isError} />
<CameraStatus title="Camera B" category={categoryB} isError={isError} /> <CameraStatus title="Camera B" category={categoryB} isError={isError} />
<CameraStatus title="Camera C" category={categoryC} isError={isError} /> <CameraStatus title="Camera C" category={categoryC} isError={isError} />

2
src/ui/Card.tsx
View File

@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
return ( return (
<div <div
className={clsx( className={clsx(
"bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ", "bg-[#253445] rounded-lg mt-4 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
className, className,
)} )}
> >