udpates on the ui changesand api integration

src/components/AwaitingApi.tsx

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { PlugZap } from 'lucide-react';
+
+/**
+ * Explicit "this data has no backend yet" placeholder. Used for UI sections whose
+ * live API is not built (see docs/03_REQUIRED_BACKEND_APIS.md → [R*] ids). We show
+ * this instead of fabricated numbers so nothing fake reaches staging.
+ */
+export default function AwaitingApi({
+  label,
+  api,
+  className = '',
+  compact = false,
+}: {
+  /** What the section will show once wired (e.g. "Operational alerts"). */
+  label: string;
+  /** The required-API id from the spec doc, e.g. "[R12]". */
+  api?: string;
+  className?: string;
+  compact?: boolean;
+}) {
+  return (
+    <div
+      className={`flex flex-col items-center justify-center text-center rounded-xl border border-dashed border-slate-300 bg-slate-50/60 text-slate-400 ${
+        compact ? 'p-4 gap-1.5' : 'p-8 gap-2'
+      } ${className}`}
+    >
+      <PlugZap size={compact ? 16 : 22} className="text-slate-300" />
+      <p className={`font-semibold text-slate-500 ${compact ? 'text-xs' : 'text-sm'}`}>{label}</p>
+      <p className="text-[11px] leading-relaxed">
+        Awaiting backend API{api ? ` ${api}` : ''} — no live data source yet.
+      </p>
+    </div>
+  );
+}