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

- improved statuses acress dashboard and child cards

Browse Source
This commit is contained in:
Toba Ojo
2025-12-03 16:05:06 +00:00
parent 9b35deaf12
commit 173b1d0e51
5 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,9 +47,9 @@ const DashboardGrid = () => {
refetch={refetch}
/>
<div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3">
<CameraStatus title="Camera A" category={categoryA} />
<CameraStatus title="Camera B" category={categoryB} />
<CameraStatus title="Camera C" category={categoryC} />
<CameraStatus title="Camera A" category={categoryA} isError={isError} />
<CameraStatus title="Camera B" category={categoryB} isError={isError} />
<CameraStatus title="Camera C" category={categoryC} isError={isError} />
</div>
</div>
);

21
src/features/dashboard/components/cameraStatus/CameraStatus.tsx
View File

@@ -7,10 +7,11 @@ import CameraStatusGridItem from "./CameraStatusGridItem";
type CameraStatusProps = {
title: string;
category: SystemHealthStatus[];
isError?: boolean;
};
const CameraStatus = ({ title, category }: CameraStatusProps) => {
const isAllGood = category?.every((status) => status.tags.includes("RUNNING"));
const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
const isAllGood = category && category.length > 0 && category.every((status) => status.tags.includes("RUNNING"));
// check if some are down
// check if all are down
//check if offline
@@ -18,10 +19,22 @@ const CameraStatus = ({ title, category }: CameraStatusProps) => {
<Card className="p-4">
<div className="border-b border-gray-600">
<h3 className="text-lg flex flex-row items-center">
{isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
{isError ? (
<StatusIndicators status={"bg-red-500"} />
) : isAllGood ? (
<StatusIndicators status={"bg-green-500"} />
) : (
<StatusIndicators status={"bg-amber-500"} />
)}
{capitalize(title)}
</h3>
<p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
{isError ? (
<p className="text-sm text-red-500">Error loading camera health.</p>
) : isAllGood ? (
<p className="text-sm text-green-500">All systems running</p>
) : (
<p className="text-sm text-amber-500">Some systems down</p>
)}
</div>
{category && category?.length <= 0 ? (
<p className=" text-gray-500">Loading Camera health...</p>

3
src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
View File

@@ -11,7 +11,8 @@ type StatusGridItemProps = {
const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
const [isOpen, setIsOpen] = useState(false);
const isAllGood = statusCategory.every((status) => status.tags.includes("RUNNING"));
const isAllGood =
statusCategory && statusCategory.length > 0 && statusCategory.every((status) => status.tags.includes("RUNNING"));
const handleClick = () => {
setIsOpen(false);

11
src/features/dashboard/components/systemStatus/SystemStatusCard.tsx
View File

@@ -13,12 +13,21 @@ const SystemStatusCard = () => {
const { storeQuery } = useGetStore();
const reads = storeQuery?.data;
const isReadsLoading = storeQuery.isFetching;
const isReadsLoading = storeQuery?.isFetching;
const isError = storeQuery?.isError || !storeQuery?.data;
useEffect(() => {
storeQuery.refetch();
}, [reads]);
if (isError) {
return (
<Card className="p-4">
<CardHeader title="System Status" />
<span className="text-red-500">Error loading system status.</span>
</Card>
);
}
return (
<Card className="p-4">
<CardHeader title="System Status" />

2
src/ui/ModalComponent.tsx
View File

@@ -11,7 +11,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
<Modal
isOpen={isModalOpen}
onRequestClose={close}
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600"
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
>
{children}