htmlboard 0.4.0 → 0.5.0

package/src/designs.js

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { COMPONENTS_FOLDER, PREVIEW_WIDTH, isPage, isTagName } from './components.js';
 
 // Which designs a folder holds, and how the canvas shows them.
 //
@@ -16,6 +17,9 @@ import path from 'node:path';
 // A designs.json beside them is optional and only curates: sections with their titles, the order,
 // overrides for a design's values. Designs it doesn't list come after the ones it does (unless it
 // says "unlisted": "hide").
+//
+// The components in components/ (pieces of pages, see components.js) aren't designs. A designs.json
+// can show them anyway, each in a frame of its own: "components": "show", or listing them.
 
 /** Folders discovery leaves alone (hidden ones too) */
 const IGNORED_DIRS = new Set(['node_modules', 'dist', 'build']);
@@ -93,7 +97,8 @@ function decode(text) {
   });
 }
 
-function attributes(tag) {
+/** The attributes of an HTML tag (`<meta name="x" content="y">`), names in lowercase, values decoded */
+export function attributes(tag) {
   const attrs = {};
   for (const m of tag.matchAll(/([^\s"'<>/=]+)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g)) {
     attrs[m[1].toLowerCase()] = decode(m[2] ?? m[3] ?? m[4] ?? '');
@@ -127,7 +132,7 @@ function parseVariant(content) {
 export function parseDesignMeta(html) {
   const end = html.search(/<\/head\s*>|<body[\s>]/i);
   const head = end >= 0 ? html.slice(0, end) : html.slice(0, 65536);
-  const meta = { variants: [] };
+  const meta = { variants: [], page: isPage(html) };
   const title = head.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
   if (title) {
     const text = decode(title[1]).replace(/\s+/g, ' ').trim();
@@ -203,7 +208,8 @@ function variantDesign(base, { query, label }) {
 
 /**
  * Every design in the folder, in order: the files of a folder by name (number prefixes order
- * them), each followed by its variants, then its subfolders by name.
+ * them), each followed by its variants, then its subfolders by name. The components in
+ * components/ are left out (a whole page there is still a design).
  */
 export function scanDesigns(baseDir) {
   const designs = [];
@@ -219,7 +225,7 @@ export function scanDesigns(baseDir) {
       if (!entry.isFile() || !/\.html?$/i.test(entry.name)) continue;
       const file = folder ? `${folder}/${entry.name}` : entry.name;
       const meta = readDesignMeta(path.join(dir, entry.name));
-      if (!meta || meta.skip) continue;
+      if (!meta || meta.skip || (folder === COMPONENTS_FOLDER && !meta.page)) continue;
       const base = fileDesign(file, folder, meta);
       designs.push(base);
       for (const variant of meta.variants) designs.push(variantDesign(base, variant));
@@ -232,6 +238,43 @@ export function scanDesigns(baseDir) {
   return designs;
 }
 
+/**
+ * The components in the folder's components/, by name, as designs that show each one alone (its
+ * file's example, at components/<tag>.html?preview). For designs.json, which can show them.
+ * A component's file can give its preview's size with the same tag as a design.
+ */
+export function scanComponents(baseDir) {
+  const dir = path.join(baseDir, COMPONENTS_FOLDER);
+  let entries;
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  return entries
+    .filter((entry) => entry.isFile() && entry.name.endsWith('.html') && isTagName(entry.name.slice(0, -5)))
+    .sort((a, b) => byName(a.name, b.name))
+    .flatMap((entry) => {
+      const meta = readDesignMeta(path.join(dir, entry.name));
+      if (!meta || meta.skip || meta.page) return [];
+      const tag = entry.name.slice(0, -5);
+      const file = `${COMPONENTS_FOLDER}/${entry.name}`;
+      return [compact({
+        key: file,
+        file: `${file}?preview`,
+        folder: COMPONENTS_FOLDER,
+        id: designId(file),
+        title: `<${tag}>`,
+        description: meta.description,
+        width: meta.width || PREVIEW_WIDTH,
+        height: meta.height,
+        fit: !meta.height || undefined, // the frame is as tall as what it shows, however short
+        category: 'components',
+        component: true
+      })];
+    });
+}
+
 /** Designs grouped into one section per folder, in order (`rootName` for the files at the top) */
 function groupByFolder(designs, rootName = '') {
   const groups = new Map();
@@ -274,8 +317,13 @@ function resolveEntry(entry, byKey) {
   return design;
 }
 
-/** designs.json's sections filled from the files, then the designs it doesn't list */
-function curate(config, found) {
+/**
+ * designs.json's sections filled from the files, then the designs it doesn't list. Components
+ * (see scanComponents) show where it lists them, and all of them with "components": "show".
+ */
+function curate(config, designs, components = []) {
+  const showComponents = config.components === 'show' || config.components === true;
+  const found = [...designs, ...components];
   const byKey = new Map(found.map((d) => [d.key, d]));
   const sources = (Array.isArray(config.sections) ? config.sections : []).map((section) => ({
     section,
@@ -313,14 +361,16 @@ function curate(config, found) {
     owners.set(folders[0], owners.has(folders[0]) && owners.get(folders[0]) !== i ? -1 : i);
   });
 
-  const unlisted = found.filter((d) => !used.has(d.key));
+  const unlisted = found.filter((d) => !used.has(d.key) && (!d.component || showComponents));
   const rest = [];
   for (const design of unlisted) {
     const owner = owners.get(design.folder ?? '');
     if (owner !== undefined && owner >= 0) sections[owner].artboards.push(design);
-    else rest.push(design);
+    else if (design.component || config.unlisted !== 'hide') rest.push(design);
   }
-  if (config.unlisted !== 'hide') sections.push(...groupByFolder(rest, 'Unlisted'));
+  // Without sections of its own, designs.json only sets things: the files at the top keep a first
+  // row without a title, as without designs.json.
+  sections.push(...groupByFolder(rest, sources.length ? 'Unlisted' : ''));
 
   const { sections: _sections, ...top } = config;
   return { ...top, sections };
@@ -343,7 +393,7 @@ function finalize(manifest, prefix = '') {
       id: section.id ?? (slugify(name) || (folder ? slugify(folder.split('/').map(stripPrefix).join('-')) : `section-${i + 1}`)),
       name,
       artboards: artboards.map((design) => {
-        const { key, folder: _folder, baseTitle, variantOf, ...board } = design;
+        const { key, folder: _folder, baseTitle, variantOf, component, ...board } = design;
         const category = board.category ?? inferCategory(design.file.split('?')[0], board.width, board.height);
         return compact({
           ...board,
@@ -381,18 +431,16 @@ export function normalizeManifest(manifest, prefix = '') {
  */
 export function loadDesignsManifest(baseDir, rootDir = baseDir) {
   const prefix = path.relative(rootDir, baseDir).split(path.sep).join('/');
+  const title = path.basename(path.resolve(baseDir)) || 'Designs';
   const found = scanDesigns(baseDir);
   const configPath = path.join(baseDir, 'designs.json');
   if (fs.existsSync(configPath)) {
     try {
       const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
-      return { ...finalize(curate(config, found), prefix), autoDiscovered: false };
+      return { ...finalize(curate({ title, ...config }, found, scanComponents(baseDir)), prefix), autoDiscovered: false };
     } catch (err) {
       console.warn(`[htmlboard] Failed parsing designs.json: ${err.message}. Showing the files without it.`);
     }
   }
-  return {
-    ...finalize({ title: path.basename(path.resolve(baseDir)) || 'Designs', sections: groupByFolder(found) }, prefix),
-    autoDiscovered: true
-  };
+  return { ...finalize({ title, sections: groupByFolder(found) }, prefix), autoDiscovered: true };
 }

package/src/index.js

@@ -15,9 +15,27 @@ export {
   normalizeManifest,
   inferCategory,
   parseDesignMeta,
+  scanComponents,
   scanDesigns
 } from './designs.js';
 
+export {
+  installComponents,
+  componentPreview,
+  COMPONENTS_FOLDER,
+  COMPONENTS_SCRIPT
+} from './components.js';
+
+export {
+  buildCatalog,
+  formatCatalog
+} from './catalog.js';
+
+export {
+  runCheck,
+  formatReport
+} from './check.js';
+
 export {
   installSkills,
   uninstallSkills,

package/src/server.js

@@ -2,8 +2,10 @@ import http from 'node:http';
 import net from 'node:net';
 import fs from 'node:fs';
 import path from 'node:path';
+import { randomUUID } from 'node:crypto';
 import { fileURLToPath } from 'node:url';
 import { loadDesignsManifest } from './designs.js';
+import { componentPreview } from './components.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -32,6 +34,50 @@ const MIME_TYPES = {
   '.mp4': 'video/mp4'
 };
 
+// The probe (client/probe.js) notes what goes wrong while a page builds, for `htmlboard check`. It
+// goes first in the pages the canvas shows in frames, before anything that could go wrong.
+const PROBE = Buffer.from('<script src="/__explorer/probe.js"></script>');
+
+/** A page with the probe first in it: in its <head>, else after <html> or <!DOCTYPE>, else first */
+export function withProbe(page) {
+  const text = page.toString('latin1'); // a byte per character: positions in it are positions in page
+  for (const tag of [/<head\b[^>]*>/i, /<html\b[^>]*>/i, /<!doctype\b[^>]*>/i]) {
+    const match = tag.exec(text);
+    if (match) {
+      const at = match.index + match[0].length;
+      return Buffer.concat([page.subarray(0, at), PROBE, page.subarray(at)]);
+    }
+  }
+  return Buffer.concat([PROBE, page]);
+}
+
+function json(res, status, body) {
+  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
+  res.end(JSON.stringify(body));
+}
+
+function readBody(req, limit = 16 * 1024 * 1024) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    let size = 0;
+    req.on('data', (chunk) => {
+      size += chunk.length;
+      if (size > limit) {
+        reject(new Error('Too large'));
+        req.destroy();
+      } else {
+        chunks.push(chunk);
+      }
+    });
+    req.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
+    req.on('error', reject);
+  });
+}
+
+/** How long a canvas has to take a check (htmlboard check), then to do it */
+const CLAIM_MS = 15000;
+const CHECK_MS = 180000;
+
 /** True when target is base itself or inside it */
 function isInside(base, target) {
   const rel = path.relative(base, target);
@@ -152,13 +198,106 @@ export function createServer(options = {}) {
   if (!isInside(rootDir, targetDir)) {
     throw new Error(`The designs folder (${targetDir}) must be inside the root (${rootDir})`);
   }
-  const manifestFile = path.posix.join(path.relative(rootDir, targetDir).split(path.sep).join('/'), 'designs.json');
+  const designsPath = path.relative(rootDir, targetDir).split(path.sep).join('/'); // '' when they're the same
+  const manifestFile = path.posix.join(designsPath, 'designs.json');
   const clients = new Set();
 
+  const send = (event, data) => {
+    for (const client of clients) client.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
+  };
+
+  // Checks (htmlboard check). GET /api/check asks the canvases open in a browser (over the live
+  // reload events) to check the designs; the first to claim the check does it, and what it posts
+  // back answers the request.
+  const checks = new Map(); // id → { res, claimed, timer }
+
+  function endCheck(id, status, body) {
+    const check = checks.get(id);
+    if (!check) return;
+    clearTimeout(check.timer);
+    checks.delete(id);
+    json(check.res, status, body);
+  }
+
+  // only: files or folders (from the designs folder) to check; all the designs when there's none
+  function startCheck(res, only) {
+    const wanted = only.map((item) => item.replace(/\\/g, '/').replace(/^\.?\/+|\/+$/g, ''));
+    const designs = loadDesignsManifest(targetDir, rootDir).sections
+      .flatMap((section) => section.artboards)
+      .map(({ file, title, width, height, fit }) => ({ file, title, width, height, fit }))
+      .filter(({ file }) => {
+        const own = (designsPath ? file.slice(designsPath.length + 1) : file).split('?')[0];
+        return !wanted.length || wanted.some((item) => !item || own === item || own.startsWith(`${item}/`));
+      });
+    if (!designs.length) {
+      json(res, 404, { error: wanted.some(Boolean) ? `No design on the canvas is in ${only.join(', ')}` : 'There are no designs to check' });
+      return;
+    }
+    if (!clients.size) {
+      json(res, 409, { error: "The canvas isn't open in a browser" });
+      return;
+    }
+    const id = randomUUID();
+    const check = {
+      res,
+      claimed: false,
+      timer: setTimeout(() => endCheck(id, 504, { error: "The canvas didn't take the check (reload it in the browser)" }), CLAIM_MS)
+    };
+    checks.set(id, check);
+    res.on('close', () => {
+      if (checks.get(id) !== check) return; // answered
+      clearTimeout(check.timer);
+      checks.delete(id);
+    });
+    send('check', { id, designs });
+  }
+
+  function claimCheck(id, res) {
+    const check = checks.get(id);
+    if (!check || check.claimed) {
+      json(res, 409, { error: 'Taken' });
+      return;
+    }
+    check.claimed = true;
+    clearTimeout(check.timer);
+    check.timer = setTimeout(() => endCheck(id, 504, { error: `The canvas didn't finish the check in ${CHECK_MS / 1000} s` }), CHECK_MS);
+    json(res, 200, { ok: true });
+  }
+
+  async function finishCheck(id, req, res) {
+    let report;
+    try {
+      report = JSON.parse(await readBody(req));
+    } catch {
+      json(res, 400, { error: 'Not a report' });
+      return;
+    }
+    if (!checks.get(id)?.claimed) {
+      json(res, 404, { error: 'No such check' });
+      return;
+    }
+    if (report.error) endCheck(id, 500, { error: `The canvas couldn't check the designs: ${report.error}` });
+    else endCheck(id, 200, { dir: targetDir, root: rootDir, designs: Array.isArray(report.designs) ? report.designs : [] });
+    res.writeHead(204).end();
+  }
+
   const server = http.createServer((req, res) => {
     const parsedUrl = new URL(req.url, 'http://localhost');
     let pathname = decodeURIComponent(parsedUrl.pathname);
 
+    // API: checking the designs (htmlboard check), which the canvas does
+    if (pathname === '/api/check' && req.method === 'GET') {
+      startCheck(res, parsedUrl.searchParams.getAll('only'));
+      return;
+    }
+    if (pathname.startsWith('/api/check/') && req.method === 'POST') {
+      const [id, action, ...rest] = pathname.slice('/api/check/'.length).split('/');
+      if (action === 'claim' && !rest.length) claimCheck(id, res);
+      else if (action === undefined) finishCheck(id, req, res);
+      else json(res, 404, { error: 'Not found' });
+      return;
+    }
+
     // API: Designs Manifest
     if (pathname === '/api/designs') {
       const manifest = loadDesignsManifest(targetDir, rootDir);
@@ -202,7 +341,7 @@ export function createServer(options = {}) {
 
     // Serve HtmlBoard Explorer client files
     if (pathname === '/' || pathname === '/index.html') {
-      serveStaticFile(path.join(CLIENT_DIR, 'index.html'), res);
+      serveStaticFile(path.join(CLIENT_DIR, 'index.html'), req, res);
       return;
     }
 
@@ -214,7 +353,7 @@ export function createServer(options = {}) {
         res.writeHead(403).end('Forbidden');
         return;
       }
-      serveStaticFile(clientFilePath, res);
+      serveStaticFile(clientFilePath, req, res);
       return;
     }
 
@@ -232,24 +371,43 @@ export function createServer(options = {}) {
       return;
     }
 
+    // The pages the canvas shows in frames get the probe (htmlboard check); a page opened on its own doesn't
+    const framed = req.headers['sec-fetch-dest'] === 'iframe';
+
+    // A component alone, as the canvas shows it (components/<tag>.html?preview): its example in a page
+    if (parsedUrl.searchParams.has('preview')) {
+      const preview = componentPreview(targetDir, filePath);
+      if (preview !== null) {
+        res.writeHead(200, {
+          'Content-Type': MIME_TYPES['.html'],
+          'Cache-Control': 'no-cache, no-store, must-revalidate'
+        });
+        res.end(framed ? withProbe(Buffer.from(preview)) : preview);
+        return;
+      }
+    }
+
     if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
-      serveStaticFile(filePath, res);
+      serveStaticFile(filePath, req, res, { probe: framed });
     } else {
       res.writeHead(404, { 'Content-Type': 'text/plain' });
       res.end(`File not found: ${pathname}`);
     }
   });
 
-  function serveStaticFile(filePath, res) {
+  function serveStaticFile(filePath, req, res, { probe = false } = {}) {
     try {
       const ext = path.extname(filePath).toLowerCase();
       const contentType = MIME_TYPES[ext] || 'application/octet-stream';
-      const content = fs.readFileSync(filePath);
+      // HEAD (htmlboard check asks which files are there) needs no reading
+      let content = req.method === 'HEAD' ? null : fs.readFileSync(filePath);
+      if (content && probe && (ext === '.html' || ext === '.htm')) content = withProbe(content);
       res.writeHead(200, {
         'Content-Type': contentType,
         'Cache-Control': 'no-cache, no-store, must-revalidate'
       });
-      res.end(content);
+      if (content) res.end(content);
+      else res.end();
     } catch {
       res.writeHead(500, { 'Content-Type': 'text/plain' });
       res.end('Error reading file');
@@ -271,15 +429,12 @@ export function createServer(options = {}) {
         const files = [...changed];
         changed.clear();
         for (const [file, isFolder] of files) {
-          const eventData = JSON.stringify({
+          send('change', {
             type: file === manifestFile ? 'manifest' : isFolder ? 'folder' : 'file',
             file,
             isHtml: !isFolder && /\.html?$/i.test(file),
             timestamp: Date.now()
           });
-          for (const client of clients) {
-            client.write(`event: change\ndata: ${eventData}\n\n`);
-          }
         }
       }, 100);
     });
@@ -294,6 +449,7 @@ export function createServer(options = {}) {
     close: () => {
       clearTimeout(watchDebounceTimer);
       if (stopWatching) stopWatching();
+      for (const id of [...checks.keys()]) endCheck(id, 503, { error: 'htmlboard stopped' });
       for (const client of clients) {
         client.end();
       }

package/src/templates/01-screens/01-dashboard.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dashboard</title>
+  <meta name="description" content="Analytics dashboard with sidebar, metric cards, and charts">
+  <meta name="htmlboard" content="width=1280, height=820">
+  <link rel="stylesheet" href="../styles.css">
+  <script type="module" src="../components.js"></script>
+  <style>
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 20px;
+    }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 20px;
+    }
+    .grid-2 .card { padding: 22px; }
+    .panel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      font-size: 12px;
+    }
+    .panel-title { font-size: 16px; font-weight: 600; }
+    .chart-container { width: 100%; height: 180px; }
+  </style>
+</head>
+<body class="app">
+  <app-sidebar active="Dashboard"></app-sidebar>
+
+  <main class="app-main">
+    <app-topbar search="Search resources, clients, reports...">
+      <span class="muted">Last sync: Just now</span>
+      <button class="btn btn-primary">+ New Deployment</button>
+    </app-topbar>
+
+    <div class="app-content">
+      <div>
+        <h1 class="page-title">Executive Overview</h1>
+        <p class="page-sub">Performance metrics and active client deployments</p>
+      </div>
+
+      <div class="stats-row">
+        <stat-card label="Monthly Recurring Revenue" value="$184,290" trend="▲ +12.4% vs last mo"></stat-card>
+        <stat-card label="Active Organizations" value="1,428" trend="▲ +48 new"></stat-card>
+        <stat-card label="API Requests (24h)" value="42.8M" trend="▲ 99.98% uptime"></stat-card>
+        <stat-card label="Average Latency" value="34ms" trend="▼ -2ms target" warn></stat-card>
+      </div>
+
+      <div class="grid-2">
+        <div class="card">
+          <div class="panel-header">
+            <h2 class="panel-title">Throughput & Workload Trends</h2>
+            <span class="muted">Trailing 7 Days</span>
+          </div>
+          <div class="chart-container">
+            <svg viewBox="0 0 500 150" width="100%" height="100%" preserveAspectRatio="none">
+              <defs>
+                <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#6366f1" stop-opacity="0.5"/>
+                  <stop offset="100%" stop-color="#6366f1" stop-opacity="0.0"/>
+                </linearGradient>
+              </defs>
+              <path d="M 0 130 Q 80 70, 150 90 T 300 40 T 420 50 T 500 20 L 500 150 L 0 150 Z" fill="url(#chartGrad)"/>
+              <path d="M 0 130 Q 80 70, 150 90 T 300 40 T 420 50 T 500 20" fill="none" stroke="#6366f1" stroke-width="3"/>
+              <circle cx="500" cy="20" r="4" fill="#a855f7" stroke="#fff" stroke-width="2"/>
+            </svg>
+          </div>
+        </div>
+
+        <div class="card">
+          <div class="panel-header">
+            <h2 class="panel-title">Recent Audits</h2>
+          </div>
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Service</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>us-east-cluster-01</td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
+              </tr>
+              <tr>
+                <td>auth-gateway-proxy</td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
+              </tr>
+              <tr>
+                <td>edge-cache-frankfurt</td>
+                <td><span class="badge badge-amber">Rebalancing</span></td>
+              </tr>
+              <tr>
+                <td>db-replica-primary</td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/src/templates/01-screens/02-customers.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Customers</title>
+  <meta name="description" content="Customer list with plans and status, in the same sidebar and top bar as the dashboard">
+  <meta name="htmlboard" content="width=1280, height=820">
+  <link rel="stylesheet" href="../styles.css">
+  <script type="module" src="../components.js"></script>
+  <style>
+    .header { display: flex; justify-content: space-between; align-items: flex-end; }
+    .filters { display: flex; gap: 8px; }
+    .table .row { gap: 10px; }
+    .table .avatar { width: 30px; height: 30px; font-size: 11px; }
+    .org { font-weight: 600; }
+    .table td:last-child, .table th:last-child { text-align: right; padding-right: 0; }
+  </style>
+</head>
+<body class="app">
+  <app-sidebar active="Customers"></app-sidebar>
+
+  <main class="app-main">
+    <app-topbar search="Search customers...">
+      <button class="btn btn-secondary">Export CSV</button>
+      <button class="btn btn-primary">+ Add Customer</button>
+    </app-topbar>
+
+    <div class="app-content">
+      <div class="header">
+        <div>
+          <h1 class="page-title">Customers</h1>
+          <p class="page-sub">1,428 organizations on 3 plans</p>
+        </div>
+        <div class="filters">
+          <span class="badge">All plans</span>
+          <span class="badge badge-emerald">Active</span>
+        </div>
+      </div>
+
+      <div class="card">
+        <table class="table">
+          <thead>
+            <tr><th>Organization</th><th>Plan</th><th>Seats</th><th>MRR</th><th>Status</th></tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><div class="row"><div class="avatar">AC</div><div><div class="org">Acme Cloud</div><div class="muted">acme.cloud</div></div></div></td>
+              <td>Enterprise</td><td>240</td><td>$12,400</td><td><span class="badge badge-emerald">Active</span></td>
+            </tr>
+            <tr>
+              <td><div class="row"><div class="avatar">LX</div><div><div class="org">Lumen Labs</div><div class="muted">lumenlabs.io</div></div></div></td>
+              <td>Growth</td><td>58</td><td>$2,320</td><td><span class="badge badge-emerald">Active</span></td>
+            </tr>
+            <tr>
+              <td><div class="row"><div class="avatar">NB</div><div><div class="org">Northbeam</div><div class="muted">northbeam.co</div></div></div></td>
+              <td>Growth</td><td>34</td><td>$1,360</td><td><span class="badge badge-amber">Trial ends in 3 days</span></td>
+            </tr>
+            <tr>
+              <td><div class="row"><div class="avatar">QS</div><div><div class="org">Quarry Studio</div><div class="muted">quarry.studio</div></div></div></td>
+              <td>Starter</td><td>6</td><td>$90</td><td><span class="badge badge-emerald">Active</span></td>
+            </tr>
+            <tr>
+              <td><div class="row"><div class="avatar">FW</div><div><div class="org">Fieldwise</div><div class="muted">fieldwise.app</div></div></div></td>
+              <td>Enterprise</td><td>410</td><td>$19,850</td><td><span class="badge badge-rose">Payment failed</span></td>
+            </tr>
+            <tr>
+              <td><div class="row"><div class="avatar">OT</div><div><div class="org">Orbit Travel</div><div class="muted">orbit.travel</div></div></div></td>
+              <td>Growth</td><td>72</td><td>$2,880</td><td><span class="badge badge-emerald">Active</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+</body>
+</html>