@meshxdata/fops 0.1.52 → 0.1.54

package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Costs.jsx

@@ -0,0 +1,305 @@
+import React, { useState } from "react";
+import Sidebar from "../partials/Sidebar";
+import Header from "../partials/Header";
+import { useCosts } from "../api/queries";
+
+const CURRENCIES = [
+  { code: "USD", symbol: "$" },
+  { code: "EUR", symbol: "€" },
+  { code: "GBP", symbol: "£" },
+  { code: "CHF", symbol: "CHF" },
+  { code: "AED", symbol: "AED" },
+];
+
+function formatCost(amount, currency = "USD") {
+  const cur = CURRENCIES.find((c) => c.code === currency) || CURRENCIES[0];
+  return `${cur.symbol} ${parseFloat(amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+
+function exportCsv(vmCosts, clusterCosts, serviceCosts, currency) {
+  const lines = ["Type,Name,Amount,Currency"];
+  for (const c of vmCosts) lines.push(`VM,"${c.name}",${c.amount},${currency}`);
+  for (const c of clusterCosts) lines.push(`Cluster,"${c.name}",${c.amount},${currency}`);
+  for (const c of serviceCosts) lines.push(`Service,"${c.name}",${c.amount},${currency}`);
+  const blob = new Blob([lines.join("\n")], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `cost-report-${new Date().toISOString().slice(0, 10)}.csv`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function CostBar({ amount, max, currency }) {
+  const pct = max > 0 ? (amount / max) * 100 : 0;
+  return (
+    <div className="flex items-center gap-3 w-full">
+      <div className="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
+        <div className="h-full bg-violet-500 rounded-full" style={{ width: `${Math.max(pct, 1)}%` }} />
+      </div>
+      <span className="text-sm font-mono text-gray-800 dark:text-gray-100 whitespace-nowrap w-28 text-right">{formatCost(amount, currency)}</span>
+    </div>
+  );
+}
+
+function Costs() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [days, setDays] = useState(30);
+  const [selectedCurrency, setSelectedCurrency] = useState("USD");
+  const { data, isLoading, error } = useCosts(days);
+
+  // Merge data from all providers
+  const allVmCosts = [];
+  const allClusterCosts = [];
+  const allServiceCosts = [];
+  let currency = "USD";
+  let costError = null;
+  let cachedAt = null;
+
+  if (data) {
+    for (const [, providerData] of Object.entries(data)) {
+      if (providerData.error) {
+        costError = providerData.error;
+        continue;
+      }
+      if (providerData.currency) currency = providerData.currency;
+      if (providerData.fromCache && providerData.cachedAt) {
+        cachedAt = new Date(providerData.cachedAt);
+      }
+
+      for (const [name, amount] of Object.entries(providerData.vmCosts || {})) {
+        allVmCosts.push({ name, amount });
+      }
+      for (const [name, amount] of Object.entries(providerData.clusterCosts || {})) {
+        allClusterCosts.push({ name, amount });
+      }
+      for (const [name, amount] of Object.entries(providerData.byService || {})) {
+        allServiceCosts.push({ name, amount });
+      }
+    }
+  }
+
+  allVmCosts.sort((a, b) => b.amount - a.amount);
+  allClusterCosts.sort((a, b) => b.amount - a.amount);
+  allServiceCosts.sort((a, b) => b.amount - a.amount);
+
+  const vmTotal = allVmCosts.reduce((s, c) => s + c.amount, 0);
+  const clusterTotal = allClusterCosts.reduce((s, c) => s + c.amount, 0);
+  const serviceTotal = allServiceCosts.reduce((s, c) => s + c.amount, 0);
+  const maxVm = allVmCosts[0]?.amount || 0;
+  const maxCluster = allClusterCosts[0]?.amount || 0;
+  const maxService = allServiceCosts[0]?.amount || 0;
+
+  const hasData = allVmCosts.length > 0 || allClusterCosts.length > 0 || allServiceCosts.length > 0;
+
+  const thClass = "px-5 py-3 font-semibold text-left whitespace-nowrap";
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+        <main className="grow">
+          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
+            <div className="sm:flex sm:justify-between sm:items-center mb-8">
+              <div className="mb-4 sm:mb-0">
+                <h1 className="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">Costs</h1>
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Azure Cost Management data for tracked resources</p>
+              </div>
+              <div className="flex items-center gap-2">
+                {cachedAt && (
+                  <span className="text-xs text-amber-600 dark:text-amber-400 bg-amber-500/10 px-2 py-1 rounded-lg">
+                    Cached {cachedAt.toLocaleString()}
+                  </span>
+                )}
+                <select
+                  className="form-select bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-sm text-gray-600 dark:text-gray-300 rounded-lg"
+                  value={days}
+                  onChange={(e) => setDays(Number(e.target.value))}
+                >
+                  <option value={7}>Last 7 days</option>
+                  <option value={14}>Last 14 days</option>
+                  <option value={30}>Last 30 days</option>
+                  <option value={60}>Last 60 days</option>
+                  <option value={90}>Last 90 days</option>
+                </select>
+                <select
+                  className="form-select bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-sm text-gray-600 dark:text-gray-300 rounded-lg"
+                  value={selectedCurrency}
+                  onChange={(e) => setSelectedCurrency(e.target.value)}
+                >
+                  {CURRENCIES.map((c) => (
+                    <option key={c.code} value={c.code}>{c.code} ({c.symbol})</option>
+                  ))}
+                </select>
+                <button
+                  className="btn bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
+                  onClick={() => exportCsv(allVmCosts, allClusterCosts, allServiceCosts, selectedCurrency)}
+                  disabled={isLoading || !hasData}
+                >
+                  <svg className="shrink-0 fill-current mr-1" width="16" height="16" viewBox="0 0 16 16"><path d="M8 1a1 1 0 0 1 1 1v6.6l2.3-2.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4L7 8.6V2a1 1 0 0 1 1-1ZM2 13a1 1 0 0 1 1 1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1v0a1 1 0 0 1 1-1Z"/></svg>
+                  Export CSV
+                </button>
+              </div>
+            </div>
+
+            {isLoading ? (
+              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-gray-400 dark:text-gray-500 text-center py-12">
+                Loading cost data... This may take a moment.
+              </div>
+            ) : error ? (
+              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-red-500 text-center py-12">
+                Failed to load costs: {error.message}
+              </div>
+            ) : costError && !hasData ? (
+              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-center py-12 px-5">
+                <div className="text-red-500 mb-2">Cost query failed: {costError}</div>
+                <div className="text-gray-400 dark:text-gray-500">
+                  Make sure you are logged into Azure (<code className="text-xs bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded font-mono">az login</code>) and have Cost Management access.
+                </div>
+              </div>
+            ) : !hasData ? (
+              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-gray-400 dark:text-gray-500 text-center py-12">
+                No cost data available for the selected period.
+              </div>
+            ) : (
+              <div className="space-y-6">
+                {/* Summary cards */}
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl px-5 py-4">
+                    <div className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold mb-1">VM Total ({days}d)</div>
+                    <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">{formatCost(vmTotal, selectedCurrency)}</div>
+                    <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">{allVmCosts.length} VM(s)</div>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl px-5 py-4">
+                    <div className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold mb-1">Cluster Total ({days}d)</div>
+                    <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">{formatCost(clusterTotal, selectedCurrency)}</div>
+                    <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">{allClusterCosts.length} cluster(s)</div>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl px-5 py-4">
+                    <div className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold mb-1">Subscription Total ({days}d)</div>
+                    <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">{formatCost(serviceTotal, selectedCurrency)}</div>
+                    <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">{allServiceCosts.length} service(s)</div>
+                  </div>
+                </div>
+
+                {/* VM costs */}
+                {allVmCosts.length > 0 && (
+                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
+                    <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
+                      <h2 className="font-semibold text-gray-800 dark:text-gray-100">Cost by VM</h2>
+                    </header>
+                    <div className="overflow-x-auto">
+                      <table className="table-auto w-full dark:text-gray-300">
+                        <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
+                          <tr>
+                            <th className={thClass}>VM</th>
+                            <th className={`${thClass} w-full`}>Cost ({days}d)</th>
+                            <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">% of Total</th>
+                          </tr>
+                        </thead>
+                        <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
+                          {allVmCosts.map((c) => (
+                            <tr key={c.name}>
+                              <td className="px-5 py-3 whitespace-nowrap font-medium text-gray-800 dark:text-gray-100">{c.name}</td>
+                              <td className="px-5 py-3"><CostBar amount={c.amount} max={maxVm} currency={selectedCurrency} /></td>
+                              <td className="px-5 py-3 whitespace-nowrap text-right text-gray-500 dark:text-gray-400 font-mono text-xs">{vmTotal > 0 ? ((c.amount / vmTotal) * 100).toFixed(1) : "0.0"}%</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                        <tfoot>
+                          <tr className="border-t border-gray-200 dark:border-gray-700">
+                            <td className="px-5 py-3 font-semibold text-gray-800 dark:text-gray-100">Total</td>
+                            <td className="px-5 py-3 font-mono font-semibold text-gray-800 dark:text-gray-100 text-right" colSpan="2">{formatCost(vmTotal, selectedCurrency)}</td>
+                          </tr>
+                        </tfoot>
+                      </table>
+                    </div>
+                  </div>
+                )}
+
+                {/* Cluster costs */}
+                {allClusterCosts.length > 0 && (
+                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
+                    <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
+                      <h2 className="font-semibold text-gray-800 dark:text-gray-100">Cost by Cluster</h2>
+                    </header>
+                    <div className="overflow-x-auto">
+                      <table className="table-auto w-full dark:text-gray-300">
+                        <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
+                          <tr>
+                            <th className={thClass}>Cluster</th>
+                            <th className={`${thClass} w-full`}>Cost ({days}d)</th>
+                            <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">% of Total</th>
+                          </tr>
+                        </thead>
+                        <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
+                          {allClusterCosts.map((c) => (
+                            <tr key={c.name}>
+                              <td className="px-5 py-3 whitespace-nowrap font-medium text-gray-800 dark:text-gray-100">{c.name}</td>
+                              <td className="px-5 py-3"><CostBar amount={c.amount} max={maxCluster} currency={selectedCurrency} /></td>
+                              <td className="px-5 py-3 whitespace-nowrap text-right text-gray-500 dark:text-gray-400 font-mono text-xs">{clusterTotal > 0 ? ((c.amount / clusterTotal) * 100).toFixed(1) : "0.0"}%</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                        <tfoot>
+                          <tr className="border-t border-gray-200 dark:border-gray-700">
+                            <td className="px-5 py-3 font-semibold text-gray-800 dark:text-gray-100">Total</td>
+                            <td className="px-5 py-3 font-mono font-semibold text-gray-800 dark:text-gray-100 text-right" colSpan="2">{formatCost(clusterTotal, selectedCurrency)}</td>
+                          </tr>
+                        </tfoot>
+                      </table>
+                    </div>
+                  </div>
+                )}
+
+                {/* Cost by service */}
+                {allServiceCosts.length > 0 && (
+                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
+                    <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
+                      <h2 className="font-semibold text-gray-800 dark:text-gray-100">Cost by Azure Service</h2>
+                    </header>
+                    <div className="overflow-x-auto">
+                      <table className="table-auto w-full dark:text-gray-300">
+                        <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
+                          <tr>
+                            <th className={thClass}>Service</th>
+                            <th className={`${thClass} w-full`}>Cost ({days}d)</th>
+                            <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">% of Total</th>
+                          </tr>
+                        </thead>
+                        <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
+                          {allServiceCosts.map((c) => (
+                            <tr key={c.name}>
+                              <td className="px-5 py-3 whitespace-nowrap font-medium text-gray-800 dark:text-gray-100">{c.name}</td>
+                              <td className="px-5 py-3"><CostBar amount={c.amount} max={maxService} currency={selectedCurrency} /></td>
+                              <td className="px-5 py-3 whitespace-nowrap text-right text-gray-500 dark:text-gray-400 font-mono text-xs">{serviceTotal > 0 ? ((c.amount / serviceTotal) * 100).toFixed(1) : "0.0"}%</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                        <tfoot>
+                          <tr className="border-t border-gray-200 dark:border-gray-700">
+                            <td className="px-5 py-3 font-semibold text-gray-800 dark:text-gray-100">Total</td>
+                            <td className="px-5 py-3 font-mono font-semibold text-gray-800 dark:text-gray-100 text-right" colSpan="2">{formatCost(serviceTotal, selectedCurrency)}</td>
+                          </tr>
+                        </tfoot>
+                      </table>
+                    </div>
+                  </div>
+                )}
+
+                {costError && (
+                  <div className="text-xs text-yellow-600 dark:text-yellow-400 bg-yellow-500/10 rounded-lg px-4 py-2">
+                    Warning: {costError}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default Costs;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/CreateResource.jsx

@@ -0,0 +1,285 @@
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import Sidebar from "../partials/Sidebar";
+import Header from "../partials/Header";
+import LogPanel from "../components/LogPanel";
+import { useCreateResource } from "../api/queries";
+import { pollJob } from "../api/client";
+
+const STORAGE_KEY = "cloud-provision-job";
+
+const LOCATIONS = [
+  { value: "uaenorth", label: "UAE North", flag: "🇦🇪" },
+  { value: "eastus", label: "East US", flag: "🇺🇸" },
+  { value: "westeurope", label: "West Europe", flag: "🇪🇺" },
+  { value: "northeurope", label: "North Europe", flag: "🇪🇺" },
+  { value: "southeastasia", label: "Southeast Asia", flag: "🇸🇬" },
+];
+const VM_SIZES = [
+  { value: "Standard_B2s", label: "B2s", spec: "2 vCPU · 4 GiB" },
+  { value: "Standard_B2ms", label: "B2ms", spec: "2 vCPU · 8 GiB" },
+  { value: "Standard_D2s_v5", label: "D2s v5", spec: "2 vCPU · 8 GiB" },
+  { value: "Standard_D4s_v5", label: "D4s v5", spec: "4 vCPU · 16 GiB" },
+];
+
+const ALL_STEPS = ["Type", "Configure", "Review", "Deploy"];
+
+// Shared tile class for selectable options
+const tileBase = "text-left rounded-lg border transition-all cursor-pointer";
+const tileActive = "border-violet-500 bg-violet-500/10 shadow-sm shadow-violet-500/10";
+const tileInactive = "border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 bg-gray-50 dark:bg-gray-900/50";
+const tile = (active) => `${tileBase} ${active ? tileActive : tileInactive}`;
+
+function CreateResource() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const navigate = useNavigate();
+  const createResource = useCreateResource();
+  const [step, setStep] = useState(0);
+  const [form, setForm] = useState({ type: "vm", vmName: "", location: "uaenorth", vmSize: "Standard_B2s", resourceGroup: "", clusterName: "", nodeCount: 2, kubernetesVersion: "1.30" });
+  const [logs, setLogs] = useState([]);
+  const [reconnecting, setReconnecting] = useState(false);
+  const [reconnectDone, setReconnectDone] = useState(false);
+  const pollingRef = useRef(false);
+  const set = (f) => (e) => setForm((p) => ({ ...p, [f]: e.target.value }));
+  const canProceed = step === 0 ? true : step === 1 ? (form.type === "vm" ? form.vmName.length >= 3 : form.clusterName.length >= 3) : true;
+
+  const onLine = useCallback((text, type) => setLogs((prev) => [...prev, { text, type }]), []);
+  const onJobId = useCallback((jobId) => localStorage.setItem(STORAGE_KEY, jobId), []);
+
+  useEffect(() => {
+    const savedJobId = localStorage.getItem(STORAGE_KEY);
+    if (!savedJobId || pollingRef.current) return;
+    pollingRef.current = true;
+    setStep(3);
+    setReconnecting(true);
+    pollJob(savedJobId, (text, type) => setLogs((prev) => [...prev, { text, type }]))
+      .then(() => { setReconnecting(false); setReconnectDone(true); localStorage.removeItem(STORAGE_KEY); })
+      .catch(() => { localStorage.removeItem(STORAGE_KEY); setReconnecting(false); setStep(0); pollingRef.current = false; });
+  }, []);
+
+  const handleCreate = () => {
+    const body = form.type === "vm"
+      ? { type: "vm", vmName: form.vmName, location: form.location, vmSize: form.vmSize, resourceGroup: form.resourceGroup || undefined }
+      : { type: "cluster", clusterName: form.clusterName, location: form.location, nodeCount: Number(form.nodeCount), kubernetesVersion: form.kubernetesVersion };
+    setLogs([]);
+    setStep(3);
+    createResource.mutate({ body, onLine, onJobId }, { onSuccess: () => localStorage.removeItem(STORAGE_KEY) });
+  };
+
+  const isRunning = reconnecting || createResource.isPending;
+  const isDone = reconnectDone || (!createResource.isPending && !createResource.isError && logs.length > 0);
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+        <main className="grow">
+          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-4xl mx-auto">
+
+            {/* Pipeline header */}
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h1 className="text-xl font-bold text-gray-800 dark:text-gray-100">Foundation Factory</h1>
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Provision a Foundation environment</p>
+              </div>
+              {step < 3 && (
+                <button className="btn-sm border border-gray-200 dark:border-gray-700/60 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 rounded-lg" onClick={() => navigate("/")}>Cancel</button>
+              )}
+            </div>
+
+            {/* Pipeline stepper */}
+            <div className="flex items-center mb-8">
+              {ALL_STEPS.map((s, i) => {
+                const done = i < step || (i === 3 && isDone);
+                const active = i === step && !(i === 3 && isDone);
+                return (
+                  <React.Fragment key={s}>
+                    <div className="flex items-center gap-2">
+                      <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 ${
+                        done ? "bg-green-500 text-white shadow-sm shadow-green-500/30"
+                        : active ? "bg-violet-500 text-white shadow-sm shadow-violet-500/30 ring-4 ring-violet-500/20"
+                        : "bg-gray-200 dark:bg-gray-800 text-gray-400 dark:text-gray-500 border border-gray-300 dark:border-gray-700/60"
+                      }`}>
+                        {done ? "✓" : i + 1}
+                      </div>
+                      <span className={`text-sm font-medium hidden sm:inline ${
+                        done ? "text-green-600 dark:text-green-500" : active ? "text-gray-800 dark:text-gray-100" : "text-gray-400 dark:text-gray-600"
+                      }`}>{s}</span>
+                    </div>
+                    {i < ALL_STEPS.length - 1 && (
+                      <div className={`flex-1 h-px mx-3 transition-colors duration-500 ${i < step ? "bg-green-500/40" : "bg-gray-200 dark:bg-gray-700/60"}`} />
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+
+            {/* Content card */}
+            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 shadow-xs rounded-xl overflow-hidden">
+
+              {/* Step 0: Type */}
+              {step === 0 && (
+                <div className="p-6">
+                  <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Select Target</h2>
+                  <div className="grid grid-cols-2 gap-4">
+                    {[
+                      { type: "vm", label: "Virtual Machine", desc: "Single-node Foundation on Azure VM", icon: "🖥" },
+                      { type: "cluster", label: "AKS Cluster", desc: "Distributed Foundation on managed Kubernetes", icon: "☸" },
+                    ].map((opt) => (
+                      <button key={opt.type} onClick={() => setForm((p) => ({ ...p, type: opt.type }))} className={`${tile(form.type === opt.type)} p-5`}>
+                        <div className="text-2xl mb-3">{opt.icon}</div>
+                        <div className="text-sm font-semibold text-gray-800 dark:text-gray-100">{opt.label}</div>
+                        <div className="text-xs text-gray-500 mt-1">{opt.desc}</div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Step 1: VM Config */}
+              {step === 1 && form.type === "vm" && (
+                <div className="p-6 space-y-5">
+                  <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">VM Configuration</h2>
+                  <Field label="Name" hint="Unique identifier for this VM">
+                    <input className="field-input" placeholder="my-foundation-vm" value={form.vmName} onChange={set("vmName")} />
+                  </Field>
+                  <Field label="Region">
+                    <div className="grid grid-cols-3 gap-2">
+                      {LOCATIONS.map((l) => (
+                        <button key={l.value} onClick={() => setForm((p) => ({ ...p, location: l.value }))} className={`${tile(form.location === l.value)} px-3 py-2.5 text-sm`}>
+                          <span className="mr-1.5">{l.flag}</span>
+                          <span className={form.location === l.value ? "text-gray-800 dark:text-gray-100" : "text-gray-600 dark:text-gray-400"}>{l.label}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </Field>
+                  <Field label="Size">
+                    <div className="grid grid-cols-2 gap-2">
+                      {VM_SIZES.map((s) => (
+                        <button key={s.value} onClick={() => setForm((p) => ({ ...p, vmSize: s.value }))} className={`${tile(form.vmSize === s.value)} px-3 py-2.5 text-sm`}>
+                          <div className={`font-medium ${form.vmSize === s.value ? "text-gray-800 dark:text-gray-100" : "text-gray-700 dark:text-gray-200"}`}>{s.label}</div>
+                          <div className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{s.spec}</div>
+                        </button>
+                      ))}
+                    </div>
+                  </Field>
+                  <Field label="Resource Group" hint="Leave empty for auto-generated">
+                    <input className="field-input" placeholder="FOUNDATION-VM-RG" value={form.resourceGroup} onChange={set("resourceGroup")} />
+                  </Field>
+                </div>
+              )}
+
+              {/* Step 1: Cluster Config */}
+              {step === 1 && form.type === "cluster" && (
+                <div className="p-6 space-y-5">
+                  <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">Cluster Configuration</h2>
+                  <Field label="Cluster Name">
+                    <input className="field-input" placeholder="my-aks-cluster" value={form.clusterName} onChange={set("clusterName")} />
+                  </Field>
+                  <Field label="Region">
+                    <div className="grid grid-cols-3 gap-2">
+                      {LOCATIONS.map((l) => (
+                        <button key={l.value} onClick={() => setForm((p) => ({ ...p, location: l.value }))} className={`${tile(form.location === l.value)} px-3 py-2.5 text-sm`}>
+                          <span className="mr-1.5">{l.flag}</span>
+                          <span className={form.location === l.value ? "text-gray-800 dark:text-gray-100" : "text-gray-600 dark:text-gray-400"}>{l.label}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </Field>
+                  <Field label="Node Count">
+                    <input className="field-input" type="number" min={1} max={20} value={form.nodeCount} onChange={set("nodeCount")} />
+                  </Field>
+                  <Field label="Kubernetes Version">
+                    <input className="field-input" placeholder="1.30" value={form.kubernetesVersion} onChange={set("kubernetesVersion")} />
+                  </Field>
+                </div>
+              )}
+
+              {/* Step 2: Review */}
+              {step === 2 && (
+                <div className="p-6">
+                  <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Review Deployment</h2>
+                  <div className="bg-gray-50 dark:bg-gray-900/60 rounded-lg border border-gray-200 dark:border-gray-700/60 divide-y divide-gray-200 dark:divide-gray-700/60">
+                    {(form.type === "vm"
+                      ? [
+                          ["Target", "Virtual Machine"],
+                          ["Name", form.vmName],
+                          ["Region", LOCATIONS.find(l => l.value === form.location)?.label || form.location],
+                          ["Size", (VM_SIZES.find(s => s.value === form.vmSize)?.label || "") + " — " + (VM_SIZES.find(s => s.value === form.vmSize)?.spec || form.vmSize)],
+                          ...(form.resourceGroup ? [["Resource Group", form.resourceGroup]] : []),
+                        ]
+                      : [
+                          ["Target", "AKS Cluster"],
+                          ["Name", form.clusterName],
+                          ["Region", LOCATIONS.find(l => l.value === form.location)?.label || form.location],
+                          ["Nodes", String(form.nodeCount)],
+                          ["K8s Version", form.kubernetesVersion],
+                        ]
+                    ).map(([label, value]) => (
+                      <div key={label} className="flex justify-between items-center px-4 py-3">
+                        <span className="text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">{label}</span>
+                        <span className="text-sm font-mono text-gray-800 dark:text-gray-200">{value}</span>
+                      </div>
+                    ))}
+                  </div>
+                  {createResource.isError && <p className="text-sm text-red-500 mt-4">{createResource.error?.message || "Failed"}</p>}
+                </div>
+              )}
+
+              {/* Step 3: Deploy */}
+              {step === 3 && (
+                <div className="p-6">
+                  <div className="flex items-center gap-3 mb-1">
+                    {isRunning && <div className="w-4 h-4 border-2 border-violet-500 border-t-transparent rounded-full animate-spin" />}
+                    <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                      {isRunning ? (reconnecting ? "Reconnecting..." : "Deploying") : isDone ? "Deployment Complete" : "Failed"}
+                    </h2>
+                  </div>
+                  <LogPanel lines={logs} title="" isDone={isDone} showPhases />
+                  {!isRunning && (
+                    <div className="mt-5">
+                      <button className="btn bg-violet-500 text-white hover:bg-violet-600" onClick={() => navigate("/")}>Go to Registry</button>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Nav bar */}
+              {step < 3 && (
+                <div className="flex justify-between items-center px-6 py-4 border-t border-gray-100 dark:border-gray-700/60 bg-gray-50 dark:bg-gray-900/40">
+                  <button
+                    className="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition disabled:opacity-30"
+                    onClick={() => setStep((s) => s - 1)}
+                    disabled={step === 0}
+                  >&larr; Back</button>
+                  {step < 2 ? (
+                    <button className="btn bg-violet-500 text-white hover:bg-violet-600 disabled:opacity-40" onClick={() => setStep((s) => s + 1)} disabled={!canProceed}>
+                      Continue &rarr;
+                    </button>
+                  ) : (
+                    <button className="btn bg-green-600 text-white hover:bg-green-500" onClick={handleCreate}>
+                      Deploy &rarr;
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, hint, children }) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{label}</label>
+      {children}
+      {hint && <p className="text-xs text-gray-400 dark:text-gray-600 mt-1.5">{hint}</p>}
+    </div>
+  );
+}
+
+export default CreateResource;