1 files changed, 77 insertions, 0 deletions
diff --git a/makima/frontend/src/components/directives/ApprovalsTab.tsx b/makima/frontend/src/components/directives/ApprovalsTab.tsx
new file mode 100644
index 0000000..dca48df
--- /dev/null
+++ b/makima/frontend/src/components/directives/ApprovalsTab.tsx
@@ -0,0 +1,77 @@
+import type { DirectiveWithProgress } from "../../lib/api";
+
+export function ApprovalsTab({ directive, onRefresh }: { directive: DirectiveWithProgress; onRefresh: () => void }) {
+  if (directive.pendingApprovals.length === 0) {
+    return (
+      <div className="text-center py-8">
+        <p className="font-mono text-sm text-[#556677]">No pending approvals</p>
+      </div>
+    );
+  }
+
+  const handleApprove = async (approvalId: string) => {
+    try {
+      const { approveDirectiveRequest } = await import("../../lib/api");
+      await approveDirectiveRequest(directive.id, approvalId);
+      onRefresh();
+    } catch (err) {
+      console.error("Failed to approve:", err);
+    }
+  };
+
+  const handleDeny = async (approvalId: string) => {
+    try {
+      const { denyDirectiveRequest } = await import("../../lib/api");
+      await denyDirectiveRequest(directive.id, approvalId);
+      onRefresh();
+    } catch (err) {
+      console.error("Failed to deny:", err);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {directive.pendingApprovals.map((approval) => {
+        const urgencyColor = {
+          low: "text-[#556677]",
+          normal: "text-[#75aafc]",
+          high: "text-yellow-400",
+          critical: "text-red-400",
+        }[approval.urgency] || "text-[#556677]";
+
+        return (
+          <div
+            key={approval.id}
+            className="p-4 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.2)]"
+          >
+            <div className="flex items-start justify-between">
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-sm text-[#dbe7ff]">{approval.approvalType}</span>
+                  <span className={`font-mono text-[10px] uppercase ${urgencyColor}`}>
+                    {approval.urgency}
+                  </span>
+                </div>
+                <p className="font-mono text-xs text-[#9bc3ff] mt-1">{approval.description}</p>
+              </div>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => handleApprove(approval.id)}
+                  className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-green-700 border border-green-600 hover:bg-green-600 uppercase"
+                >
+                  Approve
+                </button>
+                <button
+                  onClick={() => handleDeny(approval.id)}
+                  className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-red-700 border border-red-600 hover:bg-red-600 uppercase"
+                >
+                  Deny
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}