addind dashboard features will come back to finish

src/ui/CardHeader.tsx

@@ -1,17 +1,21 @@
 import clsx from "clsx";
+import StatusIndicators from "./StatusIndicators";
 
 type CameraOverviewHeaderProps = {
   title?: string;
+  status?: string;
 };
-const CardHeader = ({ title }: CameraOverviewHeaderProps) => {
+const CardHeader = ({ title, status }: CameraOverviewHeaderProps) => {
+  console.log(status);
   return (
     <div
       className={clsx(
         "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" />} */}
+        {status && <StatusIndicators status={status} />}
         <h2 className="text-xl">{title}</h2>
       </div>
     </div>

src/ui/StatusIndicators.tsx

@@ -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;