feat: customers management UI with paginated table and full delete

- Fix SSH key missing trailing newline (error in libcrypto)
- Pass env with SSH command through all git operations
- Add customers table (modules, start/expiration dates, created/updated timestamps)
- Idempotent ALTER TABLE for existing deployments
- GET /customers with pagination, search, and sort
- POST /customers persists slug with modules and dates to DB
- DELETE /customers/:slug removes ArgoCD chart, DO DB, pgbouncer pool, and manager record
- Redesigned frontend: dark slate theme, customers table page with search/sort/pagination, delete confirm dialog, module checkboxes, slate buttons

frontend/index.html

@@ -6,7 +6,7 @@
   <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; }
+    body { font-family: "Inter", system-ui, sans-serif; background: #0d1117; color: #c9d1d9; min-height: 100vh; }
 
     /* ── Login ── */
     #login-view {
@@ -16,15 +16,15 @@
       justify-content: center;
     }
     .login-box {
-      background: #1a1a1a;
-      border: 1px solid #2a2a2a;
+      background: #161b22;
+      border: 1px solid #30363d;
       border-radius: 10px;
       padding: 2.5rem;
       width: 100%;
       max-width: 360px;
     }
-    .login-box h1 { font-size: 1.2rem; color: #fff; margin-bottom: 0.4rem; }
-    .login-box p  { font-size: 0.85rem; color: #666; margin-bottom: 1.8rem; }
+    .login-box h1 { font-size: 1.1rem; color: #e6edf3; margin-bottom: 0.3rem; font-weight: 600; }
+    .login-box p  { font-size: 0.82rem; color: #8b949e; margin-bottom: 1.8rem; }
 
     /* ── App shell ── */
     #app-view { display: none; height: 100vh; }
@@ -33,117 +33,248 @@
     /* ── Sidebar ── */
     .sidebar {
       width: 220px;
-      background: #141414;
-      border-right: 1px solid #222;
+      background: #13161f;
+      border-right: 1px solid #21262d;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
     }
     .sidebar-brand {
-      padding: 1.4rem 1.2rem 1rem;
-      font-size: 0.9rem;
-      font-weight: 600;
-      color: #fff;
-      letter-spacing: 0.03em;
-      border-bottom: 1px solid #222;
+      padding: 1.2rem 1.2rem 1rem;
+      font-size: 0.88rem;
+      font-weight: 700;
+      color: #e6edf3;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      border-bottom: 1px solid #21262d;
     }
-    .sidebar-nav { flex: 1; padding: 0.8rem 0.5rem; }
+    .sidebar-nav { flex: 1; padding: 0.6rem 0.5rem; }
     .nav-item {
       display: flex;
       align-items: center;
-      gap: 0.7rem;
-      padding: 0.6rem 0.8rem;
+      gap: 0.65rem;
+      padding: 0.55rem 0.8rem;
       border-radius: 6px;
-      font-size: 0.875rem;
-      color: #aaa;
+      font-size: 0.845rem;
+      color: #8b949e;
       cursor: pointer;
-      transition: background 0.15s, color 0.15s;
+      transition: background 0.12s, color 0.12s;
       user-select: none;
     }
-    .nav-item:hover { background: #1f1f1f; color: #fff; }
-    .nav-item.active { background: #1f1f1f; color: #fff; }
-    .nav-icon { font-size: 1rem; width: 1.2rem; text-align: center; }
+    .nav-item:hover { background: #1c2128; color: #c9d1d9; }
+    .nav-item.active { background: #1c2128; color: #e6edf3; }
+    .nav-icon { font-size: 0.9rem; width: 1.1rem; text-align: center; opacity: 0.7; }
 
-    .sidebar-user {
-      padding: 0.8rem;
-      border-top: 1px solid #222;
-    }
+    .sidebar-user { padding: 0.7rem; border-top: 1px solid #21262d; }
     .user-btn {
       display: flex;
       align-items: center;
-      gap: 0.7rem;
-      padding: 0.6rem 0.8rem;
+      gap: 0.65rem;
+      padding: 0.55rem 0.8rem;
       border-radius: 6px;
       cursor: pointer;
-      transition: background 0.15s;
+      transition: background 0.12s;
       width: 100%;
       background: none;
       border: none;
-      color: #aaa;
+      color: #8b949e;
       text-align: left;
     }
-    .user-btn:hover { background: #1f1f1f; color: #fff; }
-    .user-menu {
-      display: none;
-      flex-direction: column;
-      gap: 2px;
-      padding: 0 0.5rem 0.4rem;
-    }
+    .user-btn:hover { background: #1c2128; color: #c9d1d9; }
+    .user-menu { display: none; flex-direction: column; gap: 1px; padding: 0 0.5rem 0.3rem; }
     .user-menu.open { display: flex; }
     .user-menu-item {
       font-size: 0.8rem;
-      padding: 0.45rem 0.8rem;
+      padding: 0.42rem 0.8rem;
       border-radius: 6px;
       cursor: pointer;
-      color: #888;
-      transition: background 0.15s, color 0.15s;
+      color: #8b949e;
+      transition: background 0.12s, color 0.12s;
     }
-    .user-menu-item:hover { background: #1f1f1f; color: #fff; }
+    .user-menu-item:hover { background: #1c2128; color: #e6edf3; }
+    .user-menu-item.danger:hover { background: #3d1a1a; color: #f85149; }
     .user-avatar {
-      width: 28px; height: 28px;
+      width: 26px; height: 26px;
       border-radius: 50%;
-      background: #2563eb;
+      background: #1d3a6e;
+      border: 1px solid #30363d;
       display: flex; align-items: center; justify-content: center;
-      font-size: 0.75rem; font-weight: 600; color: #fff;
+      font-size: 0.72rem; font-weight: 700; color: #79c0ff;
       flex-shrink: 0;
     }
-    .user-name { font-size: 0.85rem; }
+    .user-name { font-size: 0.83rem; }
 
     /* ── Main content ── */
-    .main { flex: 1; overflow-y: auto; padding: 2rem; }
+    .main { flex: 1; overflow-y: auto; padding: 2rem 2.5rem; }
     .page { display: none; }
     .page.active { display: block; }
-    .page-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 1.5rem; }
+    .page-title { font-size: 1rem; font-weight: 600; color: #e6edf3; margin-bottom: 1.5rem; letter-spacing: 0.01em; }
 
-    /* ── Cards / forms ── */
+    /* ── Cards ── */
     .card {
-      background: #1a1a1a;
-      border: 1px solid #2a2a2a;
+      background: #161b22;
+      border: 1px solid #30363d;
       border-radius: 8px;
       padding: 1.5rem;
-      max-width: 480px;
+      max-width: 520px;
     }
-    label { display: block; font-size: 0.8rem; color: #888; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
-    input[type=text], input[type=password] {
-      width: 100%; padding: 0.6rem 0.8rem;
-      background: #111; border: 1px solid #333; border-radius: 6px;
-      color: #fff; font-size: 0.9rem; margin-bottom: 1.2rem;
+
+    /* ── Form elements ── */
+    .form-group { margin-bottom: 1.1rem; }
+    label { display: block; font-size: 0.76rem; color: #8b949e; margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
+    input[type=text], input[type=password], input[type=date] {
+      width: 100%; padding: 0.55rem 0.75rem;
+      background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
+      color: #c9d1d9; font-size: 0.875rem;
     }
-    input:focus { outline: none; border-color: #555; }
+    input:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.1); }
+    input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.5); }
+
+    /* ── Modules checkboxes ── */
+    .modules-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.4rem;
+    }
+    .module-check {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.4rem 0.6rem;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.82rem;
+      color: #8b949e;
+      transition: border-color 0.12s, color 0.12s, background 0.12s;
+      user-select: none;
+    }
+    .module-check:hover { border-color: #58a6ff; color: #c9d1d9; }
+    .module-check input { display: none; }
+    .module-check.checked { border-color: #1d3a6e; background: #0d1f3a; color: #79c0ff; }
+
+    /* ── Buttons ── */
     .btn {
-      padding: 0.6rem 1.2rem;
-      background: #2563eb; border: none; border-radius: 6px;
-      color: #fff; font-size: 0.9rem; cursor: pointer;
+      padding: 0.55rem 1.1rem;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      cursor: pointer;
+      border: none;
+      font-weight: 500;
+      transition: background 0.12s, opacity 0.12s;
     }
-    .btn:hover { background: #1d4ed8; }
-    .btn:disabled { background: #333; cursor: not-allowed; }
-    .btn-ghost {
-      background: none; border: 1px solid #333; color: #aaa;
+    .btn-primary { background: #1d3a6e; color: #79c0ff; border: 1px solid #1d4ed8; }
+    .btn-primary:hover { background: #1e4080; }
+    .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
+    .btn-slate { background: transparent; color: #8b949e; border: 1px solid #30363d; }
+    .btn-slate:hover { background: #1c2128; color: #c9d1d9; border-color: #484f58; }
+    .btn-danger { background: transparent; color: #f85149; border: 1px solid #3d1a1a; }
+    .btn-danger:hover { background: #3d1a1a; border-color: #f85149; }
+    .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
+
+    /* ── Status ── */
+    .status { margin-top: 1rem; font-size: 0.83rem; padding: 0.55rem 0.8rem; border-radius: 6px; display: none; }
+    .status.success { background: #0d2818; color: #3fb950; border: 1px solid #1a4731; display: block; }
+    .status.error   { background: #2d0f0f; color: #f85149; border: 1px solid #4a1a1a; display: block; }
+
+    /* ── Table ── */
+    .table-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 1rem;
     }
-    .btn-ghost:hover { background: #1a1a1a; color: #fff; }
-    .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; }
+    .search-input {
+      background: #0d1117;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      padding: 0.5rem 0.75rem;
+      color: #c9d1d9;
+      font-size: 0.875rem;
+      width: 260px;
+    }
+    .search-input:focus { outline: none; border-color: #58a6ff; }
+    .table-wrap {
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    table { width: 100%; border-collapse: collapse; font-size: 0.845rem; }
+    thead { background: #1c2128; }
+    th {
+      padding: 0.65rem 1rem;
+      text-align: left;
+      font-size: 0.76rem;
+      font-weight: 600;
+      color: #8b949e;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid #30363d;
+      white-space: nowrap;
+      user-select: none;
+    }
+    th.sortable { cursor: pointer; }
+    th.sortable:hover { color: #c9d1d9; }
+    th .sort-icon { margin-left: 4px; opacity: 0.4; font-size: 0.7rem; }
+    th.sort-active { color: #58a6ff; }
+    th.sort-active .sort-icon { opacity: 1; }
+    td {
+      padding: 0.7rem 1rem;
+      border-bottom: 1px solid #21262d;
+      color: #c9d1d9;
+      vertical-align: middle;
+    }
+    tr:last-child td { border-bottom: none; }
+    tr:hover td { background: #1c2128; }
+    .tag {
+      display: inline-block;
+      padding: 0.15rem 0.45rem;
+      border-radius: 4px;
+      font-size: 0.72rem;
+      font-weight: 500;
+      background: #1d3a6e;
+      color: #79c0ff;
+      border: 1px solid #1d4ed8;
+      margin: 1px 2px 1px 0;
+    }
+    .tag-expired { background: #2d1a0a; color: #e3956a; border-color: #5a3010; }
+    .empty-row td { text-align: center; color: #484f58; padding: 2.5rem; }
+
+    /* ── Pagination ── */
+    .pagination {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1rem;
+      border-top: 1px solid #21262d;
+      font-size: 0.8rem;
+      color: #8b949e;
+    }
+    .pagination-btns { display: flex; gap: 0.4rem; align-items: center; }
+    .pagination-info { font-size: 0.78rem; }
+
+    /* ── Confirm overlay ── */
+    .overlay {
+      display: none;
+      position: fixed; inset: 0;
+      background: rgba(0,0,0,0.6);
+      align-items: center;
+      justify-content: center;
+      z-index: 100;
+    }
+    .overlay.open { display: flex; }
+    .dialog {
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 10px;
+      padding: 1.8rem;
+      max-width: 380px;
+      width: 100%;
+    }
+    .dialog h3 { font-size: 0.95rem; color: #e6edf3; margin-bottom: 0.5rem; }
+    .dialog p  { font-size: 0.845rem; color: #8b949e; margin-bottom: 1.4rem; line-height: 1.5; }
+    .dialog-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
   </style>
 </head>
 <body>
@@ -153,11 +284,15 @@
     <div class="login-box">
       <h1>LunarFront Manager</h1>
       <p>Sign in to continue</p>
-      <label for="login-username">Username</label>
-      <input id="login-username" type="text" autocomplete="username" />
-      <label for="login-password">Password</label>
-      <input id="login-password" type="password" autocomplete="current-password" onkeydown="if(event.key==='Enter')login()" />
-      <button class="btn" style="width:100%" onclick="login()">Sign In</button>
+      <div class="form-group">
+        <label for="login-username">Username</label>
+        <input id="login-username" type="text" autocomplete="username" />
+      </div>
+      <div class="form-group">
+        <label for="login-password">Password</label>
+        <input id="login-password" type="password" autocomplete="current-password" onkeydown="if(event.key==='Enter')login()" />
+      </div>
+      <button class="btn btn-primary" style="width:100%;margin-top:0.5rem" onclick="login()">Sign In</button>
       <div id="login-status" class="status"></div>
     </div>
   </div>
@@ -169,7 +304,11 @@
       <aside class="sidebar">
         <div class="sidebar-brand">LunarFront</div>
         <nav class="sidebar-nav">
-          <div class="nav-item active" onclick="showPage('create-env')">
+          <div class="nav-item" id="nav-customers" onclick="showPage('customers')">
+            <span class="nav-icon">◫</span>
+            <span>Customers</span>
+          </div>
+          <div class="nav-item" id="nav-create-env" onclick="showPage('create-env')">
             <span class="nav-icon">＋</span>
             <span>Create Env</span>
           </div>
@@ -181,20 +320,90 @@
           </button>
           <div class="user-menu" id="user-menu">
             <div class="user-menu-item" onclick="showPage('account');toggleUserMenu()">Account</div>
-            <div class="user-menu-item" onclick="logout()">Sign Out</div>
+            <div class="user-menu-item danger" onclick="logout()">Sign Out</div>
           </div>
         </div>
       </aside>
 
       <main class="main">
 
+        <!-- Customers -->
+        <div id="page-customers" class="page">
+          <div class="page-title">Customers</div>
+          <div class="table-toolbar">
+            <input class="search-input" id="customers-search" type="text" placeholder="Search by slug…" oninput="onSearchInput()" />
+            <button class="btn btn-slate" onclick="loadCustomers()">Refresh</button>
+          </div>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th class="sortable sort-active" data-col="slug" onclick="setSort('slug')">Slug <span class="sort-icon" id="sort-icon-slug">↕</span></th>
+                  <th>Modules</th>
+                  <th class="sortable" data-col="start_date" onclick="setSort('start_date')">Start <span class="sort-icon" id="sort-icon-start_date">↕</span></th>
+                  <th class="sortable" data-col="expiration_date" onclick="setSort('expiration_date')">Expires <span class="sort-icon" id="sort-icon-expiration_date">↕</span></th>
+                  <th class="sortable" data-col="created_at" onclick="setSort('created_at')">Created <span class="sort-icon" id="sort-icon-created_at">↕</span></th>
+                  <th class="sortable" data-col="updated_at" onclick="setSort('updated_at')">Updated <span class="sort-icon" id="sort-icon-updated_at">↕</span></th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody id="customers-tbody">
+                <tr class="empty-row"><td colspan="7">Loading…</td></tr>
+              </tbody>
+            </table>
+            <div class="pagination" id="customers-pagination" style="display:none">
+              <span class="pagination-info" id="pagination-info"></span>
+              <div class="pagination-btns">
+                <button class="btn btn-slate btn-sm" id="btn-prev" onclick="changePage(-1)">← Prev</button>
+                <span id="pagination-page" style="font-size:0.8rem;color:#8b949e;min-width:60px;text-align:center"></span>
+                <button class="btn btn-slate btn-sm" id="btn-next" onclick="changePage(1)">Next →</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <!-- Create Env -->
-        <div id="page-create-env" class="page active">
+        <div id="page-create-env" class="page">
           <div class="page-title">Create Environment</div>
           <div class="card">
-            <label for="slug">Customer Slug</label>
-            <input id="slug" type="text" placeholder="acme-shop" pattern="[a-z0-9-]+" />
-            <button class="btn" id="provision-btn" onclick="provision()">Provision</button>
+            <div class="form-group">
+              <label for="slug">Customer Slug</label>
+              <input id="slug" type="text" placeholder="acme-shop" pattern="[a-z0-9-]+" />
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.8rem">
+              <div class="form-group">
+                <label for="start-date">Start Date</label>
+                <input id="start-date" type="date" />
+              </div>
+              <div class="form-group">
+                <label for="expiration-date">Expiration Date</label>
+                <input id="expiration-date" type="date" />
+              </div>
+            </div>
+            <div class="form-group">
+              <label>Modules</label>
+              <div class="modules-grid">
+                <label class="module-check" id="mod-pos">
+                  <input type="checkbox" value="pos" onchange="toggleModule(this)" /> POS
+                </label>
+                <label class="module-check" id="mod-inventory">
+                  <input type="checkbox" value="inventory" onchange="toggleModule(this)" /> Inventory
+                </label>
+                <label class="module-check" id="mod-rentals">
+                  <input type="checkbox" value="rentals" onchange="toggleModule(this)" /> Rentals
+                </label>
+                <label class="module-check" id="mod-scheduling">
+                  <input type="checkbox" value="scheduling" onchange="toggleModule(this)" /> Scheduling
+                </label>
+                <label class="module-check" id="mod-repairs">
+                  <input type="checkbox" value="repairs" onchange="toggleModule(this)" /> Repairs
+                </label>
+                <label class="module-check" id="mod-accounting">
+                  <input type="checkbox" value="accounting" onchange="toggleModule(this)" /> Accounting
+                </label>
+              </div>
+            </div>
+            <button class="btn btn-primary" id="provision-btn" onclick="provision()" style="margin-top:0.4rem">Provision</button>
             <div id="provision-status" class="status"></div>
           </div>
         </div>
@@ -203,13 +412,15 @@
         <div id="page-account" class="page">
           <div class="page-title">Account</div>
           <div class="card">
-            <label for="new-password">New Password</label>
-            <input id="new-password" type="password" autocomplete="new-password" />
-            <label for="confirm-password">Confirm Password</label>
-            <input id="confirm-password" type="password" autocomplete="new-password" />
-            <div style="display:flex;gap:0.8rem;align-items:center">
-              <button class="btn" onclick="changePassword()">Update Password</button>
+            <div class="form-group">
+              <label for="new-password">New Password</label>
+              <input id="new-password" type="password" autocomplete="new-password" />
             </div>
+            <div class="form-group">
+              <label for="confirm-password">Confirm Password</label>
+              <input id="confirm-password" type="password" autocomplete="new-password" />
+            </div>
+            <button class="btn btn-slate" onclick="changePassword()">Update Password</button>
             <div id="account-status" class="status"></div>
           </div>
         </div>
@@ -218,22 +429,45 @@
     </div>
   </div>
 
+  <!-- Delete confirm dialog -->
+  <div class="overlay" id="delete-overlay" onclick="if(event.target===this)closeDeleteDialog()">
+    <div class="dialog">
+      <h3>Delete Customer</h3>
+      <p>This will remove the ArgoCD app, database, and all associated resources for <strong id="delete-slug-label" style="color:#e6edf3"></strong>. This cannot be undone.</p>
+      <div class="dialog-actions">
+        <button class="btn btn-slate" onclick="closeDeleteDialog()">Cancel</button>
+        <button class="btn btn-danger" id="delete-confirm-btn" onclick="confirmDelete()">Delete</button>
+      </div>
+    </div>
+  </div>
+
   <script>
     let currentUser = null;
+    let tableState = { page: 1, limit: 25, q: '', sort: 'created_at', order: 'desc', total: 0, totalPages: 1 };
+    let searchTimer = null;
+    let pendingDeleteSlug = null;
+
+    // ── Auth ──────────────────────────────────────────────────────────────────
 
     async function checkAuth() {
       const res = await fetch('/api/auth/me');
       if (res.ok) {
         const data = await res.json();
-        currentUser = data.username;
-        document.getElementById('user-name-label').textContent = data.username;
-        document.getElementById('user-initials').textContent = data.username[0].toUpperCase();
-        document.getElementById('app-view').style.display = 'block';
+        setUser(data.username);
+        showPage('customers');
+        loadCustomers();
       } else {
         document.getElementById('login-view').style.display = 'flex';
       }
     }
 
+    function setUser(username) {
+      currentUser = username;
+      document.getElementById('user-name-label').textContent = username;
+      document.getElementById('user-initials').textContent = username[0].toUpperCase();
+      document.getElementById('app-view').style.display = 'block';
+    }
+
     async function login() {
       const username = document.getElementById('login-username').value.trim();
       const password = document.getElementById('login-password').value;
@@ -247,11 +481,10 @@
         });
         const data = await res.json();
         if (!res.ok) throw new Error(data.message ?? 'Login failed');
-        currentUser = data.username;
-        document.getElementById('user-name-label').textContent = data.username;
-        document.getElementById('user-initials').textContent = data.username[0].toUpperCase();
+        setUser(data.username);
         document.getElementById('login-view').style.display = 'none';
-        document.getElementById('app-view').style.display = 'block';
+        showPage('customers');
+        loadCustomers();
       } catch (err) {
         status.textContent = err.message;
         status.className = 'status error';
@@ -269,32 +502,170 @@
       document.getElementById('user-menu').classList.toggle('open');
     }
 
+    // ── Navigation ────────────────────────────────────────────────────────────
+
     function showPage(name) {
       document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
       document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
       document.getElementById('page-' + name).classList.add('active');
-      if (name === 'create-env') document.querySelector('.nav-item').classList.add('active');
+      const navEl = document.getElementById('nav-' + name);
+      if (navEl) navEl.classList.add('active');
+      document.getElementById('user-menu').classList.remove('open');
+    }
+
+    // ── Customers table ───────────────────────────────────────────────────────
+
+    async function loadCustomers() {
+      const s = tableState;
+      const params = new URLSearchParams({ page: s.page, limit: s.limit, sort: s.sort, order: s.order });
+      if (s.q) params.set('q', s.q);
+      const res = await fetch('/api/customers?' + params);
+      if (!res.ok) return;
+      const { data, pagination } = await res.json();
+      tableState.total = pagination.total;
+      tableState.totalPages = pagination.totalPages;
+      renderTable(data, pagination);
+    }
+
+    function renderTable(rows, pagination) {
+      const tbody = document.getElementById('customers-tbody');
+      if (rows.length === 0) {
+        tbody.innerHTML = '<tr class="empty-row"><td colspan="7">No customers found</td></tr>';
+      } else {
+        tbody.innerHTML = rows.map(r => {
+          const expired = r.expiration_date && new Date(r.expiration_date) < new Date();
+          const modules = (r.modules || []).map(m => `<span class="tag">${m}</span>`).join('') || '<span style="color:#484f58">—</span>';
+          const expiry = r.expiration_date
+            ? `<span class="${expired ? 'tag tag-expired' : ''}">${fmtDate(r.expiration_date)}</span>`
+            : '<span style="color:#484f58">—</span>';
+          return `<tr>
+            <td style="font-weight:500;color:#e6edf3">${r.slug}</td>
+            <td>${modules}</td>
+            <td>${fmtDate(r.start_date)}</td>
+            <td>${expiry}</td>
+            <td style="color:#8b949e">${fmtDateTime(r.created_at)}</td>
+            <td style="color:#8b949e">${fmtDateTime(r.updated_at)}</td>
+            <td><button class="btn btn-danger btn-sm" onclick="openDeleteDialog('${r.slug}')">Delete</button></td>
+          </tr>`;
+        }).join('');
+      }
+
+      const pagEl = document.getElementById('customers-pagination');
+      pagEl.style.display = 'flex';
+      const start = (pagination.page - 1) * pagination.limit + 1;
+      const end = Math.min(pagination.page * pagination.limit, pagination.total);
+      document.getElementById('pagination-info').textContent =
+        pagination.total === 0 ? '0 results' : `${start}–${end} of ${pagination.total}`;
+      document.getElementById('pagination-page').textContent = `Page ${pagination.page} / ${pagination.totalPages}`;
+      document.getElementById('btn-prev').disabled = pagination.page <= 1;
+      document.getElementById('btn-next').disabled = pagination.page >= pagination.totalPages;
+
+      // Update sort headers
+      document.querySelectorAll('th[data-col]').forEach(th => {
+        const col = th.dataset.col;
+        const icon = document.getElementById('sort-icon-' + col);
+        th.classList.remove('sort-active');
+        if (icon) icon.textContent = '↕';
+        if (col === tableState.sort) {
+          th.classList.add('sort-active');
+          if (icon) icon.textContent = tableState.order === 'asc' ? '↑' : '↓';
+        }
+      });
+    }
+
+    function setSort(col) {
+      if (tableState.sort === col) {
+        tableState.order = tableState.order === 'asc' ? 'desc' : 'asc';
+      } else {
+        tableState.sort = col;
+        tableState.order = 'asc';
+      }
+      tableState.page = 1;
+      loadCustomers();
+    }
+
+    function changePage(delta) {
+      const next = tableState.page + delta;
+      if (next < 1 || next > tableState.totalPages) return;
+      tableState.page = next;
+      loadCustomers();
+    }
+
+    function onSearchInput() {
+      clearTimeout(searchTimer);
+      searchTimer = setTimeout(() => {
+        tableState.q = document.getElementById('customers-search').value.trim();
+        tableState.page = 1;
+        loadCustomers();
+      }, 300);
+    }
+
+    // ── Delete ────────────────────────────────────────────────────────────────
+
+    function openDeleteDialog(slug) {
+      pendingDeleteSlug = slug;
+      document.getElementById('delete-slug-label').textContent = slug;
+      document.getElementById('delete-overlay').classList.add('open');
+    }
+
+    function closeDeleteDialog() {
+      pendingDeleteSlug = null;
+      document.getElementById('delete-overlay').classList.remove('open');
+    }
+
+    async function confirmDelete() {
+      const slug = pendingDeleteSlug;
+      if (!slug) return;
+      const btn = document.getElementById('delete-confirm-btn');
+      btn.disabled = true;
+      btn.textContent = 'Deleting…';
+      try {
+        const res = await fetch(`/api/customers/${slug}`, { method: 'DELETE' });
+        if (!res.ok) {
+          const d = await res.json().catch(() => ({}));
+          throw new Error(d.message ?? 'Delete failed');
+        }
+        closeDeleteDialog();
+        loadCustomers();
+      } catch (err) {
+        alert(err.message);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = 'Delete';
+      }
+    }
+
+    // ── Provision ─────────────────────────────────────────────────────────────
+
+    function toggleModule(checkbox) {
+      const label = checkbox.closest('.module-check');
+      label.classList.toggle('checked', checkbox.checked);
     }
 
     async function provision() {
       const slug = document.getElementById('slug').value.trim();
+      const startDate = document.getElementById('start-date').value;
+      const expirationDate = document.getElementById('expiration-date').value || null;
+      const modules = [...document.querySelectorAll('.module-check input:checked')].map(el => el.value);
       const btn = document.getElementById('provision-btn');
       const status = document.getElementById('provision-status');
       if (!slug) return;
       btn.disabled = true;
-      btn.textContent = 'Provisioning...';
+      btn.textContent = 'Provisioning…';
       status.className = 'status';
       try {
         const res = await fetch('/api/customers', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name: slug }),
+          body: JSON.stringify({ name: slug, modules, startDate, expirationDate }),
         });
         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('slug').value = '';
+        document.getElementById('expiration-date').value = '';
+        document.querySelectorAll('.module-check').forEach(l => { l.classList.remove('checked'); l.querySelector('input').checked = false; });
       } catch (err) {
         status.textContent = `✗ ${err.message}`;
         status.className = 'status error';
@@ -304,6 +675,8 @@
       }
     }
 
+    // ── Account ───────────────────────────────────────────────────────────────
+
     async function changePassword() {
       const pw = document.getElementById('new-password').value;
       const confirm = document.getElementById('confirm-password').value;
@@ -332,6 +705,21 @@
       }
     }
 
+    // ── Helpers ───────────────────────────────────────────────────────────────
+
+    function fmtDate(val) {
+      if (!val) return '—';
+      return new Date(val).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+    }
+
+    function fmtDateTime(val) {
+      if (!val) return '—';
+      return new Date(val).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+    }
+
+    // ── Init ──────────────────────────────────────────────────────────────────
+
+    document.getElementById('start-date').value = new Date().toISOString().slice(0, 10);
     checkAuth();
   </script>
 </body>

src/db/manager.ts

@@ -9,7 +9,28 @@ export async function migrate() {
       id SERIAL PRIMARY KEY,
       username TEXT UNIQUE NOT NULL,
       password_hash TEXT NOT NULL,
-      created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+      created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+      updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
     )
   `;
+  await db`
+    CREATE TABLE IF NOT EXISTS customers (
+      slug TEXT PRIMARY KEY,
+      status TEXT NOT NULL DEFAULT 'provisioned',
+      modules TEXT[] NOT NULL DEFAULT '{}',
+      start_date DATE NOT NULL DEFAULT CURRENT_DATE,
+      expiration_date DATE,
+      created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+      updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+    )
+  `;
+  // idempotent column additions for existing deployments
+  await db`ALTER TABLE users ADD COLUMN IF NOT EXISTS updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()`;
+  await db`
+    ALTER TABLE customers
+      ADD COLUMN IF NOT EXISTS modules TEXT[] NOT NULL DEFAULT '{}',
+      ADD COLUMN IF NOT EXISTS start_date DATE NOT NULL DEFAULT CURRENT_DATE,
+      ADD COLUMN IF NOT EXISTS expiration_date DATE,
+      ADD COLUMN IF NOT EXISTS updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+  `;
 }

src/routes/customers.ts

@@ -4,13 +4,52 @@ import { createDatabase, createDatabaseUser, deleteDatabase, deleteDatabaseUser
 import { addCustomerToPool, removeCustomerFromPool } from "../services/pgbouncer";
 import { addCustomerChart, removeCustomerChart } from "../services/git";
 import { setupCustomerDatabase, teardownCustomerDatabase } from "../services/db";
+import { db } from "../db/manager";
+
+const MODULES = ["pos", "inventory", "rentals", "scheduling", "repairs", "accounting"] as const;
 
 const ProvisionSchema = z.object({
   name: z.string().min(2).max(32).regex(/^[a-z0-9-]+$/, "lowercase letters, numbers, and hyphens only"),
   appVersion: z.string().default("latest"),
+  modules: z.array(z.enum(MODULES)).default([]),
+  startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/).default(() => new Date().toISOString().slice(0, 10)),
+  expirationDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/).nullable().default(null),
+});
+
+const ListQuerySchema = z.object({
+  page: z.coerce.number().int().min(1).default(1),
+  limit: z.coerce.number().int().min(1).max(100).default(25),
+  q: z.string().optional(),
+  sort: z.enum(["slug", "start_date", "expiration_date", "created_at", "updated_at"]).default("created_at"),
+  order: z.enum(["asc", "desc"]).default("desc"),
 });
 
 export async function customerRoutes(app: FastifyInstance) {
+  app.get("/customers", async (req, reply) => {
+    const query = ListQuerySchema.parse(req.query);
+    const offset = (query.page - 1) * query.limit;
+    const search = query.q ? `%${query.q}%` : null;
+
+    const [rows, [{ count }]] = await Promise.all([
+      search
+        ? db`SELECT * FROM customers WHERE slug ILIKE ${search} ORDER BY ${db(query.sort)} ${db.unsafe(query.order)} LIMIT ${query.limit} OFFSET ${offset}`
+        : db`SELECT * FROM customers ORDER BY ${db(query.sort)} ${db.unsafe(query.order)} LIMIT ${query.limit} OFFSET ${offset}`,
+      search
+        ? db`SELECT COUNT(*)::int FROM customers WHERE slug ILIKE ${search}`
+        : db`SELECT COUNT(*)::int FROM customers`,
+    ]);
+
+    return reply.send({
+      data: rows,
+      pagination: {
+        page: query.page,
+        limit: query.limit,
+        total: count,
+        totalPages: Math.ceil(count / query.limit),
+      },
+    });
+  });
+
   app.post("/customers", async (req, reply) => {
     const body = ProvisionSchema.parse(req.body);
     const slug = body.name;
@@ -26,6 +65,16 @@ export async function customerRoutes(app: FastifyInstance) {
     await addCustomerToPool(slug, user.password);
     addCustomerChart(slug, body.appVersion);
 
+    await db`
+      INSERT INTO customers (slug, modules, start_date, expiration_date)
+      VALUES (${slug}, ${body.modules}, ${body.startDate}, ${body.expirationDate})
+      ON CONFLICT (slug) DO UPDATE SET
+        modules = EXCLUDED.modules,
+        start_date = EXCLUDED.start_date,
+        expiration_date = EXCLUDED.expiration_date,
+        updated_at = NOW()
+    `;
+
     app.log.info({ slug }, "customer provisioned");
     return reply.code(201).send({ slug, status: "provisioned" });
   });
@@ -43,6 +92,8 @@ export async function customerRoutes(app: FastifyInstance) {
       deleteDatabaseUser(slug),
     ]);
 
+    await db`DELETE FROM customers WHERE slug = ${slug}`;
+
     app.log.info({ slug }, "customer deprovisioned");
     return reply.code(204).send();
   });

src/services/git.ts

@@ -4,11 +4,12 @@ import { tmpdir } from "os";
 import { join } from "path";
 import { config } from "../lib/config";
 
-function withRepo<T>(fn: (dir: string) => T): T {
+function withRepo<T>(fn: (dir: string, env: NodeJS.ProcessEnv) => T): T {
   const keyPath = join(tmpdir(), `manager-ssh-key-${Date.now()}`);
   const dir = join(tmpdir(), `lunarfront-charts-${Date.now()}`);
 
-  writeFileSync(keyPath, config.gitSshKey, { mode: 0o600 });
+  const keyContent = config.gitSshKey.endsWith("\n") ? config.gitSshKey : config.gitSshKey + "\n";
+  writeFileSync(keyPath, keyContent, { mode: 0o600 });
 
   const env = {
     ...process.env,
@@ -19,7 +20,7 @@ function withRepo<T>(fn: (dir: string) => T): T {
     execSync(`git clone ${config.gitRepoUrl} ${dir}`, { env, stdio: "pipe" });
     execSync(`git -C ${dir} config user.email "manager@lunarfront.tech"`, { env });
     execSync(`git -C ${dir} config user.name "lunarfront-manager"`, { env });
-    const result = fn(dir);
+    const result = fn(dir, env);
     execSync(`git -C ${dir} push origin main`, { env, stdio: "pipe" });
     return result;
   } finally {
@@ -29,19 +30,19 @@ function withRepo<T>(fn: (dir: string) => T): T {
 }
 
 export function addCustomerChart(slug: string, appVersion: string) {
-  withRepo((dir) => {
+  withRepo((dir, env) => {
     const manifest = buildArgoCDApp(slug, appVersion);
     writeFileSync(join(dir, "customers", `${slug}.yaml`), manifest);
-    execSync(`git -C ${dir} add customers/${slug}.yaml`);
-    execSync(`git -C ${dir} commit -m "feat: provision customer ${slug}"`, { env: process.env });
+    execSync(`git -C ${dir} add customers/${slug}.yaml`, { env });
+    execSync(`git -C ${dir} commit -m "feat: provision customer ${slug}"`, { env });
   });
 }
 
 export function removeCustomerChart(slug: string) {
-  withRepo((dir) => {
+  withRepo((dir, env) => {
     rmSync(join(dir, "customers", `${slug}.yaml`), { force: true });
-    execSync(`git -C ${dir} add customers/${slug}.yaml`);
-    execSync(`git -C ${dir} commit -m "chore: deprovision customer ${slug}"`, { env: process.env });
+    execSync(`git -C ${dir} add customers/${slug}.yaml`, { env });
+    execSync(`git -C ${dir} commit -m "chore: deprovision customer ${slug}"`, { env });
   });
 }