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);
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">
<VideoFeedGridPainter />
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 h-screen max-h-screen overflow-hidden">
<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} />
<PlatePatch />
</div>
);
};

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

@@ -10,7 +10,7 @@ type CameraSettingsProps = {
const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
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
selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
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 (
<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">
<h2 className="text-2xl mb-2">Tools</h2>
<div className="flex flex-col">
<label
htmlFor="paintMode"
className={`p-4 border rounded-lg mb-2
<div className="flex flex-col gap-4 max-h-[50%]">
<div className="flex flex-row gap-3">
<div className="p-2 border border-gray-600 rounded-lg flex flex-col h-50 w-full">
<h2 className="text-2xl mb-2">Tools</h2>
<div className="flex flex-col">
<label
htmlFor="paintMode"
className={`p-4 border rounded-lg mb-2
${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
hover:bg-[#202b36] hover:cursor-pointer`}
>
<input
id="paintMode"
type="radio"
onChange={handleChange}
checked={mode === "painter"}
value="painter"
className="sr-only"
/>
<span className="text-xl">Paint mode</span>
</label>
<label
htmlFor="eraseMode"
className={`p-4 border rounded-lg mb-2
>
<input
id="paintMode"
type="radio"
onChange={handleChange}
checked={mode === "painter"}
value="painter"
className="sr-only"
/>
<span className="text-xl">Paint mode</span>
</label>
<label
htmlFor="eraseMode"
className={`p-4 border rounded-lg mb-2
${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
hover:bg-[#202b36] hover:cursor-pointer`}
>
<input
id="eraseMode"
type="radio"
onChange={handleChange}
checked={mode === "eraser"}
value={"eraser"}
className="sr-only"
/>
<span className="text-xl">Erase mode</span>
</label>
>
<input
id="eraseMode"
type="radio"
onChange={handleChange}
checked={mode === "eraser"}
value={"eraser"}
className="sr-only"
/>
<span className="text-xl">Erase mode</span>
</label>
</div>
</div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col">
<h2 className="text-2xl mb-2">Bay Select</h2>
<>
{regions?.map((region, idx) => {
const isSelected = selectedRegionIndex === idx;
const inputId = `region-${idx}`;
return (
<label
htmlFor={inputId}
key={region.name}
className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
<h2 className="text-2xl mb-2">Bay Select</h2>
<>
{regions?.map((region, idx) => {
const isSelected = selectedRegionIndex === idx;
const inputId = `region-${idx}`;
return (
<label
htmlFor={inputId}
key={region.name}
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`}
>
<div className="flex flex-row gap-4 items-center">
<input
type="radio"
checked={isSelected}
id={inputId}
name="region"
className="sr-only"
onChange={() => {
handleModeChange("painter");
handleRegionSelect(idx);
}}
>
<div className="flex flex-row gap-4 items-center">
<input
type="radio"
checked={isSelected}
id={inputId}
name="region"
className="sr-only"
onChange={() => {
handleModeChange("painter");
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>
<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
</button>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Remove Bay
</button>
<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
</button>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Remove Bay
</button>
</div>
</div>
</div>
<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>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
<h2 className="text-2xl mb-2">Actions</h2>
<div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
<button
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
</button>
<button
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
</button>

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

@@ -6,9 +6,9 @@ import SightingExitTable from "./SightingExitTable";
const PlatePatch = () => {
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" />
<Tabs defaultIndex={1}>
<Tabs defaultIndex={1} className="flex-1 overflow-hidden flex flex-col">
<TabList>
<Tab>Entry 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 aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
const newWidth = width * 0.55;
const newWidth = width * 0.6;
const newHeight = newWidth / aspectRatio;
setStageSize({ width: newWidth, height: newHeight });
};

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

@@ -35,7 +35,7 @@ const DashboardGrid = () => {
const categoryC = statusCategories?.channelC ?? [];
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 />
<SystemHealthCard
startTime={startTime}
@@ -46,7 +46,7 @@ const DashboardGrid = () => {
dateUpdatedAt={dateUpdatedAt}
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 B" category={categoryB} 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 (
<div
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,
)}
>