Add src/components/dashboard/ComplianceCard.jsx

src/components/dashboard/ComplianceCard.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { AlertCircle, Truck, Package, AlertTriangle } from "lucide-react";
+
+const tabs = [
+  { label: "Carrier View", icon: Truck, count: 0 },
+  { label: "Parcel View", icon: Package, count: 0 },
+  { label: "Consolidation Exceptions", icon: AlertTriangle, count: 0 },
+];
+
+export default function ComplianceCard() {
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <div id="compliance-card" className="bg-white rounded-xl border border-gray-200 p-6">
+      <div className="flex items-center gap-2 mb-4">
+        <AlertCircle className="w-5 h-5 text-red-500" />
+        <h3 className="text-sm font-bold text-gray-800">Compliance Events</h3>
+        <div className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 text-[10px] flex items-center justify-center cursor-help">i</div>
+      </div>
+      <p className="text-xs text-gray-500 mb-4">Issues requiring attention</p>
+
+      <div className="flex gap-2 mb-4">
+        {tabs.map((tab, i) => (
+          <button
+            key={tab.label}
+            onClick={() => setActiveTab(i)}
+            className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-all ${
+              activeTab === i
+                ? "bg-gray-900 text-white shadow-sm"
+                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+            }`}
+          >
+            <tab.icon className="w-3.5 h-3.5" />
+            {tab.label}
+            <span className={`ml-1 px-1.5 py-0.5 rounded text-[10px] ${
+              activeTab === i ? "bg-white/20 text-white" : "bg-gray-200 text-gray-500"
+            }`}>
+              {tab.count}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      <div className="text-center py-8 text-gray-400 text-sm">
+        No data
+      </div>
+    </div>
+  );
+}