44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
|
import Card from "../../../components/ui/Card";
|
||
|
|
import { useGetStore } from "../hooks/useGetStore";
|
||
|
|
|
||
|
|
import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
|
||
|
|
import PlatesProcessed from "./PlatesProcessed";
|
||
|
|
import SystemStatusContent from "./SystemStatusContent";
|
||
|
|
|
||
|
|
const SystemOverview = () => {
|
||
|
|
const { systemHealthQuery } = useGetSystemHealth();
|
||
|
|
const { storeQuery } = useGetStore();
|
||
|
|
|
||
|
|
const platesProcessed = storeQuery?.data || {};
|
||
|
|
const upTime = systemHealthQuery?.data?.UptimeHumane || 0;
|
||
|
|
const startTime = systemHealthQuery?.data?.StartTimeHumane || "";
|
||
|
|
const cameraStatus = systemHealthQuery?.data?.Status || [];
|
||
|
|
const isError = systemHealthQuery?.isError || false;
|
||
|
|
|
||
|
|
if (systemHealthQuery.isLoading) {
|
||
|
|
return <div>Loading system overview...</div>;
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
|
|
<Card className="p-4 hover:bg-[#233241] cursor-pointer">
|
||
|
|
<SystemStatusContent status={cameraStatus} isError={isError} />
|
||
|
|
</Card>
|
||
|
|
<Card className="p-4 hover:bg-[#233241] cursor-pointer">
|
||
|
|
<h3 className="text-lg">Active Sightings</h3>
|
||
|
|
</Card>
|
||
|
|
<Card className="p-4 hover:bg-[#233241] cursor-pointer">
|
||
|
|
<h3 className="text-lg">Reads</h3>
|
||
|
|
<PlatesProcessed platesProcessed={platesProcessed} />
|
||
|
|
</Card>
|
||
|
|
<Card className="p-4 hover:bg-[#233241] cursor-pointer">
|
||
|
|
<h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{upTime}</span>
|
||
|
|
<h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SystemOverview;
|