feat: initial lunarfront-manager app

2026-04-03 06:23:56 -05:00
commit 8287fbf5b8
16 changed files with 793 additions and 0 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LunarFront Manager</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; background: #0f0f0f; color: #e0e0e0; min-height: 100vh; padding: 2rem; }
+    h1 { font-size: 1.5rem; margin-bottom: 2rem; color: #fff; }
+    .card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 1.5rem; max-width: 480px; }
+    h2 { font-size: 1rem; margin-bottom: 1rem; color: #aaa; text-transform: uppercase; letter-spacing: 0.05em; }
+    label { display: block; font-size: 0.85rem; color: #aaa; margin-bottom: 0.4rem; }
+    input { width: 100%; padding: 0.6rem 0.8rem; background: #111; border: 1px solid #333; border-radius: 6px; color: #fff; font-size: 0.95rem; margin-bottom: 1rem; }
+    input:focus { outline: none; border-color: #555; }
+    button { padding: 0.6rem 1.2rem; background: #2563eb; border: none; border-radius: 6px; color: #fff; font-size: 0.95rem; cursor: pointer; }
+    button:hover { background: #1d4ed8; }
+    button:disabled { background: #333; cursor: not-allowed; }
+    .status { margin-top: 1rem; font-size: 0.85rem; padding: 0.6rem 0.8rem; border-radius: 6px; display: none; }
+    .status.success { background: #14532d; color: #86efac; display: block; }
+    .status.error { background: #450a0a; color: #fca5a5; display: block; }
+  </style>
+</head>
+<body>
+  <h1>LunarFront Manager</h1>
+
+  <div class="card">
+    <h2>Provision Customer</h2>
+    <label for="name">Customer Slug</label>
+    <input id="name" type="text" placeholder="acme-shop" pattern="[a-z0-9-]+" />
+    <button id="provision-btn" onclick="provision()">Provision</button>
+    <div id="provision-status" class="status"></div>
+  </div>
+
+  <script>
+    async function provision() {
+      const name = document.getElementById('name').value.trim();
+      const btn = document.getElementById('provision-btn');
+      const status = document.getElementById('provision-status');
+
+      if (!name) return;
+
+      btn.disabled = true;
+      btn.textContent = 'Provisioning...';
+      status.className = 'status';
+
+      try {
+        const res = await fetch('/api/customers', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name }),
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.message ?? 'Unknown error');
+        status.textContent = `✓ ${data.slug} provisioned successfully`;
+        status.className = 'status success';
+        document.getElementById('name').value = '';
+      } catch (err) {
+        status.textContent = `✗ ${err.message}`;
+        status.className = 'status error';
+      } finally {
+        btn.disabled = false;
+        btn.textContent = 'Provision';
+      }
+    }
+  </script>
+</body>
+</html>