npm - @rashidee/co2 - Versions diffs - 1.2.5 - Mend

@rashidee/co2 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/plugin/skills/mockgen-tailwind/references/admin-layout-template.md ADDED Viewed

@@ -0,0 +1,720 @@
+# Admin Layout Architecture — Alpine.js + HTMX Assets (served by the Mockup Hub)
+The application's mockup folder contains **assets only**. The shared **Mockup Hub**
+(`<root>/mockup/server.js` — see [mockup-hub-template.md](mockup-hub-template.md))
+assembles pages from partials server-side at `/{app_slug}/{role}/{page}`. **HTMX**
+performs partial content swapping during navigation, and **Alpine.js** powers
+interactive UI components (dropdowns, dark mode toggle).
+`{{APP_SLUG}}` below is replaced **at generation time** with the application slug
+(app folder name minus the leading `<number>_` prefix). It is constant for the whole
+mockup folder.
+---
+## File Structure
+```
+mockup/
+  mockup-manifest.json             # Hub discovery manifest (see mockup-hub-template.md)
+  MOCKUP.html                      # Per-app screen index (served by hub at /{app_slug})
+  partials/
+    shell.html                     # Page shell (assembled by server)
+    header.html                    # Top header (Alpine.js powered)
+    footer.html                    # Bottom footer
+    sidebar-{role_snake_case}.html # One sidebar per role
+  {role_snake_case}/
+    content/
+      home.html                    # Content fragment (no layout)
+      profile.html
+      account.html
+      notifications.html
+      {module_snake_case}.html
+      {module_snake_case}_detail.html
+      {module_snake_case}_create.html
+      {module_snake_case}_edit.html
+      ...
+```
+---
+## Placeholders Reference
+| Placeholder | Description |
+|-------------|-------------|
+| `{{APP_NAME}}` | Application name (e.g., "Hub Middleware") |
+| `{{APP_SLUG}}` | App slug used as URL prefix (e.g., "hub_middleware") — replaced at generation time |
+| `{{PAGE_TITLE}}` | Screen title (e.g., "Location Information") |
+| `{{ROLE}}` | Role in snake_case (e.g., "hub_administrator") — in `header.html` it is re-injected by the hub at request time |
+| `{{SIDEBAR_MENU}}` | Navigation menu items HTML |
+| `{{BREADCRUMB}}` | Breadcrumb trail HTML |
+| `{{MAIN_CONTENT}}` | Screen-specific content |
+| `{{COPYRIGHT_YEAR}}` | Current year |
+| `{{VERSION}}` | Latest version from PRD.md |
+| `{{DESIGN_PRIMARY}}` | Primary color hex from design system |
+| `{{DESIGN_SECONDARY}}` | Secondary color hex from design system |
+| `{{DESIGN_ACCENT}}` | Accent/CTA color hex |
+| `{{DESIGN_BG}}` | Background color hex |
+| `{{DESIGN_TEXT}}` | Text color hex |
+| `{{HEADING_FONT}}` | Heading font |
+| `{{BODY_FONT}}` | Body font |
+| `{{GOOGLE_FONTS_URL}}` | Google Fonts import URL |
+---
+## Server
+There is **no per-app server**. The shared Mockup Hub (`<root>/mockup/server.js`, created
+per the Ensure-Hub rules in [mockup-hub-template.md](mockup-hub-template.md)) provides:
+- `GET /{app_slug}` → this app's `MOCKUP.html`
+- `GET /{app_slug}/{role}` → redirect to `/{app_slug}/{role}/home`
+- `GET /{app_slug}/{role}/{page}` → shell + header + sidebar + content + footer assembly
+- `GET /api/content/{app_slug}/{role}/{page}` → content fragment (HTMX swaps)
+- `GET /{app_slug}/static/*`, `GET /{app_slug}/reports/*` → static assets
+- The hub re-injects `{{ROLE}}` into `header.html` at request time
+---
+## partials/shell.html Template
+The shell is the outer HTML document. It is assembled server-side and NOT a partial
+served to the browser — the hub substitutes `{{HEADER}}`, `{{SIDEBAR}}`,
+`{{CONTENT}}`, and `{{FOOTER}}` before responding.
+```html
+<!DOCTYPE html>
+<html lang="en" x-data="appShell()" :class="{ 'dark': darkMode }">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{APP_NAME}}</title>
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- HTMX -->
+  <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+  <!-- Alpine.js -->
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="{{GOOGLE_FONTS_URL}}" rel="stylesheet">
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            primary: '{{DESIGN_PRIMARY}}',
+            secondary: '{{DESIGN_SECONDARY}}',
+            accent: '{{DESIGN_ACCENT}}',
+          },
+          fontFamily: {
+            heading: ['{{HEADING_FONT}}', 'sans-serif'],
+            body: ['{{BODY_FONT}}', 'sans-serif'],
+          }
+        }
+      }
+    }
+    function appShell() {
+      return {
+        darkMode: localStorage.getItem('darkMode') === 'true',
+        toggleDark() {
+          this.darkMode = !this.darkMode;
+          localStorage.setItem('darkMode', this.darkMode);
+        }
+      }
+    }
+  </script>
+  <style>
+    body { font-family: '{{BODY_FONT}}', sans-serif; }
+    h1, h2, h3, h4, h5, h6 { font-family: '{{HEADING_FONT}}', sans-serif; }
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: #f1f5f9; }
+    ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: #64748b; }
+    /* HTMX loading indicator */
+    .htmx-request #content-spinner { display: flex; }
+    .htmx-request.htmx-request #content-area { opacity: 0.4; }
+  </style>
+</head>
+<body class="bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 min-h-screen flex flex-col">
+  <!-- ── Header (injected by server) ─────────────────────────────────── -->
+  {{HEADER}}
+  <!-- ── Body: Sidebar + Main ─────────────────────────────────────────── -->
+  <div class="flex pt-16 min-h-[calc(100vh-4rem)]">
+    <!-- ── Sidebar (injected by server) ──────────────────────────────── -->
+    {{SIDEBAR}}
+    <!-- ── Main ──────────────────────────────────────────────────────── -->
+    <main class="flex-1 ml-64 flex flex-col min-w-0">
+      <!-- Loading spinner (shown while HTMX is fetching) -->
+      <div id="content-spinner" class="hidden fixed inset-0 bg-white/50 z-50 items-center justify-center">
+        <div class="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+      </div>
+      <!-- ── Content area (HTMX target) ─────────────────────────────── -->
+      <div id="content-area" class="flex-1 flex flex-col transition-opacity duration-200">
+        {{CONTENT}}
+      </div>
+      <!-- ── Footer (injected by server) ──────────────────────────────── -->
+      {{FOOTER}}
+    </main>
+  </div>
+</body>
+</html>
+```
+---
+## partials/header.html Template
+Alpine.js `x-data` scopes are per-component, declared on each dropdown wrapper.
+The dark mode toggle dispatches to the parent `appShell()` context via `$dispatch`.
+```html
+<header class="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 h-16 flex items-center justify-between px-6 fixed top-0 left-0 right-0 z-30 shadow-sm">
+    <!-- Left: Logo + App Name -->
+    <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background-color: {{DESIGN_PRIMARY}}">
+            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+            </svg>
+        </div>
+        <span class="font-semibold text-lg text-slate-900 dark:text-slate-100">{{APP_NAME}}</span>
+    </div>
+    <!-- Right: Controls -->
+    <div class="flex items-center gap-2">
+        <!-- Notification Bell -->
+        <div class="relative" x-data="{ open: false }">
+            <button @click="open = !open" @keydown.escape.window="open = false"
+                    class="relative p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors duration-200">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+                </svg>
+                <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
+            </button>
+            <!-- Notification Dropdown -->
+            <div x-show="open" @click.outside="open = false"
+                 x-transition:enter="transition ease-out duration-150"
+                 x-transition:enter-start="opacity-0 translate-y-1"
+                 x-transition:enter-end="opacity-100 translate-y-0"
+                 x-transition:leave="transition ease-in duration-100"
+                 x-transition:leave-start="opacity-100 translate-y-0"
+                 x-transition:leave-end="opacity-0 translate-y-1"
+                 class="absolute right-0 top-full mt-2 w-80 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl z-50"
+                 style="display: none;">
+                <div class="px-4 py-3 border-b border-slate-100 dark:border-slate-700 flex items-center justify-between">
+                    <span class="font-medium text-sm text-slate-800 dark:text-slate-200">Notifications</span>
+                    <button class="text-xs text-primary cursor-pointer hover:underline">Mark all read</button>
+                </div>
+                <div class="max-h-72 overflow-y-auto divide-y divide-slate-50 dark:divide-slate-700">
+                    <div class="px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 flex gap-3">
+                        <div class="w-2 h-2 rounded-full mt-2 shrink-0"
+                             style="background-color: {{DESIGN_PRIMARY}}"></div>
+                        <div>
+                            <p class="text-sm text-slate-800 dark:text-slate-200 font-medium">New document uploaded</p>
+                            <p class="text-xs text-slate-500 mt-0.5">A new employment contract has been uploaded for
+                                review.</p>
+                            <p class="text-xs text-slate-400 mt-1">2 minutes ago</p>
+                        </div>
+                    </div>
+                    <div class="px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 flex gap-3">
+                        <div class="w-2 h-2 rounded-full mt-2 shrink-0"
+                             style="background-color: {{DESIGN_PRIMARY}}"></div>
+                        <div>
+                            <p class="text-sm text-slate-800 dark:text-slate-200 font-medium">Corridor status
+                                changed</p>
+                            <p class="text-xs text-slate-500 mt-0.5">MYS-BGD corridor has been activated.</p>
+                            <p class="text-xs text-slate-400 mt-1">15 minutes ago</p>
+                        </div>
+                    </div>
+                    <div class="px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 flex gap-3">
+                        <div class="w-2 h-2 bg-transparent rounded-full mt-2 shrink-0 border border-slate-300"></div>
+                        <div>
+                            <p class="text-sm text-slate-600 dark:text-slate-400">Employer registration pending</p>
+                            <p class="text-xs text-slate-500 mt-0.5">ABC Manufacturing Sdn Bhd requires approval.</p>
+                            <p class="text-xs text-slate-400 mt-1">1 hour ago</p>
+                        </div>
+                    </div>
+                    <div class="px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 flex gap-3">
+                        <div class="w-2 h-2 bg-transparent rounded-full mt-2 shrink-0 border border-slate-300"></div>
+                        <div>
+                            <p class="text-sm text-slate-600 dark:text-slate-400">System maintenance scheduled</p>
+                            <p class="text-xs text-slate-500 mt-0.5">Scheduled downtime on Sunday 2:00 AM – 4:00 AM.</p>
+                            <p class="text-xs text-slate-400 mt-1">3 hours ago</p>
+                        </div>
+                    </div>
+                </div>
+                <a href="/{{APP_SLUG}}/{{ROLE}}/notifications"
+                   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/notifications"
+                   hx-target="#content-area"
+                   hx-swap="innerHTML"
+                   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/notifications"
+                   @click="open = false"
+                   class="block px-4 py-3 border-t border-slate-100 dark:border-slate-700 text-center text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-700 rounded-b-xl"
+                   style="color: {{DESIGN_PRIMARY}}">
+                    View all notifications
+                </a>
+            </div>
+        </div>
+        <!-- Locale / Globe -->
+        <div class="relative" x-data="{ open: false }">
+            <button @click="open = !open" @keydown.escape.window="open = false"
+                    class="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors duration-200">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
+                </svg>
+            </button>
+            <div x-show="open" @click.outside="open = false"
+                 x-transition:enter="transition ease-out duration-150"
+                 x-transition:enter-start="opacity-0 translate-y-1"
+                 x-transition:enter-end="opacity-100 translate-y-0"
+                 class="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl py-1 z-50"
+                 style="display: none;">
+                <div class="px-4 py-2 border-b border-slate-100 dark:border-slate-700">
+                    <span class="text-xs font-medium text-slate-400 uppercase tracking-wider">Language</span>
+                </div>
+                <a href="javascript:void(0)" class="flex items-center gap-3 px-4 py-2 text-sm font-medium"
+                   style="color: {{DESIGN_PRIMARY}}">
+                    <span>🇬🇧</span> English (EN)
+                </a>
+                <a href="javascript:void(0)"
+                   class="flex items-center gap-3 px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">
+                    <span>🇲🇾</span> Bahasa Melayu (BM)
+                </a>
+                <a href="javascript:void(0)"
+                   class="flex items-center gap-3 px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">
+                    <span>🇧🇩</span> বাংলা (BN)
+                </a>
+                <a href="javascript:void(0)"
+                   class="flex items-center gap-3 px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">
+                    <span>🇮🇩</span> Bahasa Indonesia (ID)
+                </a>
+            </div>
+        </div>
+        <!-- Dark Mode Toggle -->
+        <button @click="toggleDark()"
+                class="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors duration-200"
+                :title="darkMode ? 'Switch to light mode' : 'Switch to dark mode'">
+            <!-- Moon icon (shown in light mode) -->
+            <svg x-show="!darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+            </svg>
+            <!-- Sun icon (shown in dark mode) -->
+            <svg x-show="darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                 style="display:none">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+            </svg>
+        </button>
+        <!-- Divider -->
+        <div class="w-px h-8 bg-slate-200 dark:bg-slate-600 mx-1"></div>
+        <!-- User Avatar + Dropdown -->
+        <div class="relative" x-data="{ open: false }">
+            <button @click="open = !open" @keydown.escape.window="open = false"
+                    class="flex items-center gap-2 cursor-pointer p-1 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
+                <div class="w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm text-white"
+                     style="background-color: {{DESIGN_PRIMARY}}">
+                    U
+                </div>
+                <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                </svg>
+            </button>
+            <div x-show="open" @click.outside="open = false"
+                 x-transition:enter="transition ease-out duration-150"
+                 x-transition:enter-start="opacity-0 translate-y-1"
+                 x-transition:enter-end="opacity-100 translate-y-0"
+                 class="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl py-1 z-50"
+                 style="display: none;">
+                <a href="/{{APP_SLUG}}/{{ROLE}}/profile"
+                   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/profile"
+                   hx-target="#content-area"
+                   hx-swap="innerHTML"
+                   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/profile"
+                   @click="open = false"
+                   class="flex items-center gap-2 px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                    </svg>
+                    Profile
+                </a>
+                <a href="/{{APP_SLUG}}/{{ROLE}}/account"
+                   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/account"
+                   hx-target="#content-area"
+                   hx-swap="innerHTML"
+                   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/account"
+                   @click="open = false"
+                   class="flex items-center gap-2 px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                    </svg>
+                    Account
+                </a>
+                <div class="border-t border-slate-100 dark:border-slate-700 my-1"></div>
+                <a href="/"
+                   class="flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
+                    </svg>
+                    Logout
+                </a>
+            </div>
+        </div>
+    </div>
+</header>
+```
+> **Note:** In `header.html`, replace `{{APP_SLUG}}` at generation time but leave
+> `{{ROLE}}` as-is — the Mockup Hub injects the actual role slug into the header partial
+> at request time (`.replace(/\{\{ROLE\}\}/g, role)`), so one shared header works for
+> every role.
+---
+## partials/footer.html Template
+```html
+<footer class="border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-6 py-3 flex items-center justify-between text-xs text-slate-400">
+  <span>&copy; {{COPYRIGHT_YEAR}} {{APP_NAME}}. All rights reserved.</span>
+  <span>{{VERSION}}</span>
+</footer>
+```
+---
+## partials/sidebar-{role}.html Template
+Replace `{{ROLE}}` with the role's snake_case name. The `hx-get` attribute fetches only
+the content fragment; `hx-push-url` updates the browser URL so the page is bookmarkable.
+```html
+<aside class="w-64 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 fixed top-16 bottom-0 left-0 overflow-y-auto z-20">
+  <nav class="py-4" x-data="{ active: window.location.pathname }">
+    <!-- Home -->
+    <a href="/{{APP_SLUG}}/{{ROLE}}/home"
+       hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/home"
+       hx-target="#content-area"
+       hx-swap="innerHTML"
+       hx-push-url="/{{APP_SLUG}}/{{ROLE}}/home"
+       @click="active = '/{{APP_SLUG}}/{{ROLE}}/home'"
+       :class="active.startsWith('/{{APP_SLUG}}/{{ROLE}}/home') ? 'bg-primary/5 text-primary border-r-2 border-primary font-medium' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-900'"
+       class="flex items-center gap-3 px-4 py-2.5 text-sm transition-colors duration-200 cursor-pointer">
+      <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+      </svg>
+      <span>Home</span>
+    </a>
+    <!-- Module separator -->
+    <div class="px-4 pt-4 pb-1">
+      <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Menu</span>
+    </div>
+    <!-- Module menu items: repeat for each module assigned to this role -->
+    {{SIDEBAR_MENU}}
+  </nav>
+</aside>
+```
+### Sidebar Active Menu Item Template
+```html
+<!-- Active state -->
+<a href="/{{APP_SLUG}}/{{ROLE}}/{{SCREEN_FILE_NO_EXT}}"
+   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{SCREEN_FILE_NO_EXT}}"
+   hx-target="#content-area"
+   hx-swap="innerHTML"
+   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{SCREEN_FILE_NO_EXT}}"
+   @click="active = '/{{APP_SLUG}}/{{ROLE}}/{{SCREEN_FILE_NO_EXT}}'"
+   :class="active.startsWith('/{{APP_SLUG}}/{{ROLE}}/{{SCREEN_FILE_NO_EXT}}') ? 'bg-primary/5 text-primary border-r-2 border-primary font-medium' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-900'"
+   class="flex items-center gap-3 px-4 py-2.5 text-sm transition-colors duration-200 cursor-pointer">
+  <svg class="w-5 h-5 shrink-0"><!-- module-appropriate icon --></svg>
+  <span>{{MODULE_NAME}}</span>
+</a>
+```
+### Suggested SVG Icons by Module Type
+| Module Pattern | Icon |
+|---------------|------|
+| Document / File | paper with lines (`DocumentTextIcon`) |
+| Location / Geography | map pin (`MapPinIcon`) |
+| Corridor / Route | bidirectional arrows (`ArrowsRightLeftIcon`) |
+| Recruitment / Steps | ordered list (`QueueListIcon`) |
+| Employer / Company | office building (`BuildingOfficeIcon`) |
+| Classification / Category | tag (`TagIcon`) |
+| Quota / Allocation | pie chart (`ChartPieIcon`) |
+| Job / Demand | briefcase (`BriefcaseIcon`) |
+| Employee / Person | group of people (`UserGroupIcon`) |
+| Settings / Config | gear (`CogIcon`) |
+---
+## Content Fragment Template
+Content files contain **only the page content area** — no `<html>`, `<head>`, `<body>`,
+layout, or Tailwind config. They are loaded via HTMX and injected into `#content-area`.
+```html
+<!-- {{PAGE_TITLE}} — {{ROLE}} -->
+<!-- User story traceability: {{US_TAG}} [{{US_VERSION}}] -->
+<!-- Breadcrumb -->
+<div class="px-6 py-3 border-b border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-800">
+  <nav class="flex items-center gap-2 text-sm text-slate-500">
+    <a href="/{{APP_SLUG}}/{{ROLE}}/home"
+       hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/home"
+       hx-target="#content-area"
+       hx-swap="innerHTML"
+       hx-push-url="/{{APP_SLUG}}/{{ROLE}}/home"
+       class="hover:text-slate-700 dark:hover:text-slate-300 cursor-pointer">Home</a>
+    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+    <span class="text-slate-800 dark:text-slate-200 font-medium">{{PAGE_TITLE}}</span>
+  </nav>
+</div>
+<!-- Page Content -->
+<div class="flex-1 p-6">
+  {{MAIN_CONTENT}}
+</div>
+```
+### Breadcrumb for Sub-screens (detail / edit / create)
+```html
+<a href="/{{APP_SLUG}}/{{ROLE}}/home" hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/home" hx-target="#content-area" hx-swap="innerHTML" hx-push-url="/{{APP_SLUG}}/{{ROLE}}/home" class="hover:text-slate-700 cursor-pointer">Home</a>
+<svg ...><path .../></svg>
+<a href="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}" hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}" hx-target="#content-area" hx-swap="innerHTML" hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}" class="hover:text-slate-700 cursor-pointer">{{MODULE_NAME}}</a>
+<svg ...><path .../></svg>
+<span class="text-slate-800 dark:text-slate-200 font-medium">{{PAGE_TITLE}}</span>
+```
+---
+## Link Rules Inside Content Fragments
+### Navigation links (within the app)
+Use HTMX attributes for in-app navigation — never full page reloads for screen transitions:
+```html
+<a href="/{{APP_SLUG}}/{{ROLE}}/{{TARGET_PAGE}}"
+   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{TARGET_PAGE}}"
+   hx-target="#content-area"
+   hx-swap="innerHTML"
+   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{TARGET_PAGE}}"
+   class="...">
+  View Details
+</a>
+```
+### Image links — MUST open in new tab
+```html
+<a href="/{{APP_SLUG}}/static/images/sample.jpg" target="_blank" rel="noopener noreferrer" class="...">
+  View Image
+</a>
+```
+### PDF / document links — MUST open in new tab
+```html
+<a href="/{{APP_SLUG}}/static/docs/sample.pdf" target="_blank" rel="noopener noreferrer" class="...">
+  <svg ...><!-- pdf icon --></svg>
+  View PDF
+</a>
+```
+### Action buttons in tables
+```html
+<!-- View / Details → HTMX navigation -->
+<a href="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_detail"
+   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_detail"
+   hx-target="#content-area"
+   hx-swap="innerHTML"
+   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_detail"
+   class="text-xs px-2 py-1 rounded border border-primary text-primary hover:bg-primary/5">
+  View
+</a>
+<!-- Edit → HTMX navigation -->
+<a href="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_edit"
+   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_edit"
+   hx-target="#content-area"
+   hx-swap="innerHTML"
+   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_edit"
+   class="text-xs px-2 py-1 rounded border border-slate-300 text-slate-600 hover:bg-slate-50">
+  Edit
+</a>
+<!-- Delete → Alpine.js confirm dialog (no href navigation) -->
+<button x-data="{ confirm: false }"
+  @click="confirm = true"
+  x-show="!confirm"
+  class="text-xs px-2 py-1 rounded border border-red-300 text-red-600 hover:bg-red-50">
+  Delete
+</button>
+<div x-data="{ confirm: false }" x-show="confirm" class="flex items-center gap-2" style="display:none">
+  <span class="text-xs text-red-600">Sure?</span>
+  <button class="text-xs px-2 py-1 bg-red-600 text-white rounded">Yes, Delete</button>
+  <button @click="confirm = false" class="text-xs px-2 py-1 border border-slate-300 rounded">Cancel</button>
+</div>
+<!-- Add New → HTMX navigation -->
+<a href="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_create"
+   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_create"
+   hx-target="#content-area"
+   hx-swap="innerHTML"
+   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_create"
+   class="px-4 py-2 rounded-lg text-sm text-white"
+   style="background-color: {{DESIGN_PRIMARY}}">
+  + Add New
+</a>
+```
+### Tab navigation in detail screens
+Each tab links to its own content page via HTMX:
+```html
+<div class="flex border-b border-slate-200 mb-6">
+  <!-- Active tab -->
+  <a href="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_tab_overview"
+     hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_tab_overview"
+     hx-target="#content-area"
+     hx-swap="innerHTML"
+     hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_tab_overview"
+     class="px-4 py-2 text-sm font-medium border-b-2 -mb-px"
+     style="color: {{DESIGN_PRIMARY}}; border-color: {{DESIGN_PRIMARY}}">
+    Overview
+  </a>
+  <!-- Inactive tab -->
+  <a href="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_tab_documents"
+     hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_tab_documents"
+     hx-target="#content-area"
+     hx-swap="innerHTML"
+     hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}_tab_documents"
+     class="px-4 py-2 text-sm font-medium border-b-2 border-transparent text-slate-500 hover:text-slate-700 -mb-px">
+    Documents
+  </a>
+</div>
+```
+### Back / Cancel buttons
+```html
+<a href="/{{APP_SLUG}}/{{ROLE}}/{{PARENT_MODULE}}"
+   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{PARENT_MODULE}}"
+   hx-target="#content-area"
+   hx-swap="innerHTML"
+   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{PARENT_MODULE}}"
+   class="px-4 py-2 border border-slate-300 rounded-lg text-sm text-slate-600 hover:bg-slate-50">
+  ← Back to List
+</a>
+```
+### Pagination links
+```html
+<a href="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}"
+   hx-get="/api/content/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}"
+   hx-target="#content-area"
+   hx-swap="innerHTML"
+   hx-push-url="/{{APP_SLUG}}/{{ROLE}}/{{MODULE}}"
+   class="px-3 py-1.5 text-sm border border-slate-300 rounded hover:bg-slate-50">
+  2
+</a>
+```
+---
+## Common Screens Content
+### home.html content fragment
+```html
+<!-- Dashboard Home -->
+<div class="px-6 py-3 border-b border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-800">
+  <nav class="flex items-center gap-2 text-sm text-slate-500">
+    <span class="text-slate-800 dark:text-slate-200 font-medium">Home</span>
+  </nav>
+</div>
+<div class="flex-1 p-6">
+  <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">Welcome back</h1>
+  <p class="text-slate-500 mb-6">{{APP_NAME}} — {{ROLE_DISPLAY}}</p>
+  <!-- Summary stat cards -->
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+    <!-- Repeat: one card per module -->
+  </div>
+  <!-- Recent activity table -->
+</div>
+```
+### profile.html content fragment
+User profile: avatar, full name, email, role badge, personal info form (read-only), Edit button.
+### account.html content fragment
+Account settings: Change Password form, Notification Preferences toggles (Alpine.js),
+Language/Locale selector, Session Management table.
+### notifications.html content fragment
+Notifications list: Filter tabs (All / Unread / Read with Alpine.js tab state),
+notification cards with icon / title / message / timestamp / unread dot,
+Mark all as read button.
+---
+## Quick-Start Instructions (append to output summary)
+```
+Quick Start
+===========
+1. cd <root>/mockup
+2. npm start          (zero dependencies — no npm install required)
+3. Open http://localhost:3000 in your browser
+   - Landing page lists ALL applications and roles
+   - This app's screen index: http://localhost:3000/{app_slug}
+4. Change port: PORT=4000 npm start, or edit <root>/mockup/mockup.config.json
+```