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

addind dashboard features will come back to finish

Browse Source
This commit is contained in:
Toba Ojo
2025-11-21 08:55:23 +00:00
parent 8284b1dd11
commit 25a744bd8d
7 changed files with 43 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -1,10 +1,10 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MAV | BayiQ</title> <title>BayIQ</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

19
src/features/dashboard/components/CameraStatus.tsx
View File

@@ -0,0 +1,19 @@
import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader";
type CameraStatusProps = {
title: string;
status?: string;
description: string;
};
const CameraStatus = ({ title, status, description }: CameraStatusProps) => {
return (
<Card className="p-4 w-[40%]">
<CardHeader title={title} status={status} />
<p className=" text-gray-500">{description}</p>
</Card>
);
};
export default CameraStatus;

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

@@ -1,9 +1,12 @@
import CameraStatus from "./CameraStatus";
import SystemStatusCard from "./SystemStatusCard"; import SystemStatusCard from "./SystemStatusCard";
const DashboardGrid = () => { const DashboardGrid = () => {
return ( return (
<div> <div className="grid grid-rows-2">
<SystemStatusCard /> <SystemStatusCard />
<CameraStatus title="Camera 1" status={"bg-red-500"} description={"Camera not responding"} />
<CameraStatus title="Camera 2" status={"bg-gray-500"} description={"Camera Offline"} />
</div> </div>
); );
}; };

2
src/features/dashboard/components/SystemStatusCard.tsx
View File

@@ -11,7 +11,7 @@ const SystemStatusCard = () => {
{stats ? ( {stats ? (
<> <>
<div>UTC: {stats["system-clock-utc"]}</div> <div>UTC: {stats["system-clock-utc"]}</div>
<span>Local: {stats["system-clock-local"]}</span> <div>Local: {stats["system-clock-local"]}</div>
<span>CPU: {stats["memory-cpu-status"]}</span> <span>CPU: {stats["memory-cpu-status"]}</span>
<span>Threads: {stats["thread-count"]}</span> <span>Threads: {stats["thread-count"]}</span>
</> </>

2
src/types/types.ts
View File

@@ -10,3 +10,5 @@ export type InfoBarData = {
"memory-cpu-status": string; "memory-cpu-status": string;
"thread-count": string; "thread-count": string;
}; };
export type StatusIndicator = "neutral-quaternary" | "dark" | "info" | "success" | "warning" | "danger";

8
src/ui/CardHeader.tsx
View File

@@ -1,17 +1,21 @@
import clsx from "clsx"; import clsx from "clsx";
import StatusIndicators from "./StatusIndicators";
type CameraOverviewHeaderProps = { type CameraOverviewHeaderProps = {
title?: string; title?: string;
status?: string;
}; };
const CardHeader = ({ title }: CameraOverviewHeaderProps) => { const CardHeader = ({ title, status }: CameraOverviewHeaderProps) => {
console.log(status);
return ( return (
<div <div
className={clsx( className={clsx(
"w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between", "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between",
)} )}
> >
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-1">
{/* {icon && <FontAwesomeIcon icon={icon} className="size-4" />} */} {/* {icon && <FontAwesomeIcon icon={icon} className="size-4" />} */}
{status && <StatusIndicators status={status} />}
<h2 className="text-xl">{title}</h2> <h2 className="text-xl">{title}</h2>
</div> </div>
</div> </div>

9
src/ui/StatusIndicators.tsx Normal file
View File

@@ -0,0 +1,9 @@
import clsx from "clsx";
type StatusIndicatorsProps = { status: string };
const StatusIndicators = ({ status }: StatusIndicatorsProps) => {
return <span className={clsx(`flex w-3 h-3 me-2 rounded-full`, status)}></span>;
};
export default StatusIndicators;