table constant data is added and Compliance Safety completed

components/common/actionButton.tsx

@@ -0,0 +1,35 @@
+import { List, Pencil, Power, QrCode, ShieldCheck } from "lucide-react";
+import Button from "./button";
+
+export default function ActionButtons () 
+ {
+ return(
+ 
+  <div className="flex items-center justify-center gap-1.5">
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <Pencil size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <List size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <ShieldCheck size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <QrCode size={13} />
+    </Button>
+
+    <Button
+      className='flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 hover:bg-slate-800 transition ${
+      
+      '
+    >
+      <Power size={13} />
+    </Button>
+  </div>
+ );
+ }
+  

components/common/infoBanner.tsx

@@ -10,9 +10,9 @@ export default function InfoBanner({
     <div className="w-full
  rounded-xl border border-l-4 border-[#142538]
   border-l-[#10b981] bg-[#091624] 
-  p-4 flex items-center shadow-sm">
+  p-2 flex items-center shadow-sm">
     
-        <p className="text-sm font-medium text-slate-300 tracking-wide leading-relaxed">
+        <p className="text-xs font-medium text-slate-300 tracking-wide leading-relaxed">
           {boldText && <strong className="text-white font-bold mr-1.5">{boldText}</strong>}
           {normalText}
         </p>

components/common/statusBadge.tsx

@@ -0,0 +1,14 @@
+export const StatusBadge = ({
+  text,
+  color,
+}: {
+  text: string;
+  color: string;
+}) => (
+  <span
+    className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
+  >
+    <span className="h-1.5 w-1.5 rounded-full bg-current" />
+    {text}
+  </span>
+);