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} 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">
<CameraStatus title="Camera A" category={categoryA} /> <CameraStatus title="Camera A" category={categoryA} isError={isError} />
<CameraStatus title="Camera B" category={categoryB} /> <CameraStatus title="Camera B" category={categoryB} isError={isError} />
<CameraStatus title="Camera C" category={categoryC} /> <CameraStatus title="Camera C" category={categoryC} isError={isError} />
</div> </div>
</div> </div>
); );

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

@@ -7,10 +7,11 @@ import CameraStatusGridItem from "./CameraStatusGridItem";
type CameraStatusProps = { type CameraStatusProps = {
title: string; title: string;
category: SystemHealthStatus[]; category: SystemHealthStatus[];
isError?: boolean;
}; };
const CameraStatus = ({ title, category }: CameraStatusProps) => { const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
const isAllGood = category?.every((status) => status.tags.includes("RUNNING")); const isAllGood = category && category.length > 0 && category.every((status) => status.tags.includes("RUNNING"));
// check if some are down // check if some are down
// check if all are down // check if all are down
//check if offline //check if offline
@@ -18,10 +19,22 @@ const CameraStatus = ({ title, category }: CameraStatusProps) => {
<Card className="p-4"> <Card className="p-4">
<div className="border-b border-gray-600"> <div className="border-b border-gray-600">
<h3 className="text-lg flex flex-row items-center"> <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)} {capitalize(title)}
</h3> </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> </div>
{category && category?.length <= 0 ? ( {category && category?.length <= 0 ? (
<p className=" text-gray-500">Loading Camera health...</p> <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 StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
const [isOpen, setIsOpen] = useState(false); 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 = () => { const handleClick = () => {
setIsOpen(false); setIsOpen(false);

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

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

2
src/ui/ModalComponent.tsx
View File

@@ -11,7 +11,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
<Modal <Modal
isOpen={isModalOpen} isOpen={isModalOpen}
onRequestClose={close} 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" overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
> >
{children} {children}