npm - @intranefr/superbackend - Versions diffs - 1.4.3 - Mend

@intranefr/superbackend 1.4.3

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 (188) hide show

package/.commiat +4 -0
package/.env.example +47 -0
package/README.md +110 -0
package/index.js +94 -0
package/package.json +67 -0
package/public/css/styles.css +139 -0
package/public/js/animations.js +41 -0
package/sdk/error-tracking/browser/package.json +16 -0
package/sdk/error-tracking/browser/src/core.js +270 -0
package/sdk/error-tracking/browser/src/embed.js +18 -0
package/sdk/error-tracking/browser/src/index.js +1 -0
package/server.js +5 -0
package/src/admin/endpointRegistry.js +300 -0
package/src/controllers/admin.controller.js +321 -0
package/src/controllers/adminAssets.controller.js +530 -0
package/src/controllers/adminAssetsStorage.controller.js +260 -0
package/src/controllers/adminEjsVirtual.controller.js +354 -0
package/src/controllers/adminFeatureFlags.controller.js +155 -0
package/src/controllers/adminHeadless.controller.js +1071 -0
package/src/controllers/adminI18n.controller.js +604 -0
package/src/controllers/adminJsonConfigs.controller.js +97 -0
package/src/controllers/adminLlm.controller.js +273 -0
package/src/controllers/adminMigration.controller.js +257 -0
package/src/controllers/adminSeoConfig.controller.js +515 -0
package/src/controllers/adminStats.controller.js +121 -0
package/src/controllers/adminUploadNamespaces.controller.js +208 -0
package/src/controllers/assets.controller.js +248 -0
package/src/controllers/auth.controller.js +93 -0
package/src/controllers/billing.controller.js +223 -0
package/src/controllers/featureFlags.controller.js +35 -0
package/src/controllers/forms.controller.js +217 -0
package/src/controllers/globalSettings.controller.js +252 -0
package/src/controllers/headlessCrud.controller.js +126 -0
package/src/controllers/i18n.controller.js +12 -0
package/src/controllers/invite.controller.js +249 -0
package/src/controllers/jsonConfigs.controller.js +19 -0
package/src/controllers/metrics.controller.js +149 -0
package/src/controllers/notificationAdmin.controller.js +264 -0
package/src/controllers/notifications.controller.js +131 -0
package/src/controllers/org.controller.js +357 -0
package/src/controllers/orgAdmin.controller.js +491 -0
package/src/controllers/stripeAdmin.controller.js +410 -0
package/src/controllers/user.controller.js +361 -0
package/src/controllers/userAdmin.controller.js +277 -0
package/src/controllers/waitingList.controller.js +167 -0
package/src/controllers/webhook.controller.js +200 -0
package/src/middleware/auth.js +66 -0
package/src/middleware/errorCapture.js +170 -0
package/src/middleware/headlessApiTokenAuth.js +57 -0
package/src/middleware/org.js +108 -0
package/src/middleware.js +901 -0
package/src/models/ActionEvent.js +31 -0
package/src/models/ActivityLog.js +41 -0
package/src/models/Asset.js +84 -0
package/src/models/AuditEvent.js +93 -0
package/src/models/EmailLog.js +28 -0
package/src/models/ErrorAggregate.js +72 -0
package/src/models/FormSubmission.js +41 -0
package/src/models/GlobalSetting.js +38 -0
package/src/models/HeadlessApiToken.js +24 -0
package/src/models/HeadlessModelDefinition.js +41 -0
package/src/models/I18nEntry.js +77 -0
package/src/models/I18nLocale.js +33 -0
package/src/models/Invite.js +70 -0
package/src/models/JsonConfig.js +46 -0
package/src/models/Notification.js +60 -0
package/src/models/Organization.js +57 -0
package/src/models/OrganizationMember.js +43 -0
package/src/models/StripeCatalogItem.js +77 -0
package/src/models/StripeWebhookEvent.js +57 -0
package/src/models/User.js +89 -0
package/src/models/VirtualEjsFile.js +60 -0
package/src/models/VirtualEjsFileVersion.js +43 -0
package/src/models/VirtualEjsGroupChange.js +32 -0
package/src/models/WaitingList.js +41 -0
package/src/models/Webhook.js +63 -0
package/src/models/Workflow.js +29 -0
package/src/models/WorkflowExecution.js +12 -0
package/src/routes/admin.routes.js +26 -0
package/src/routes/adminAssets.routes.js +28 -0
package/src/routes/adminAssetsStorage.routes.js +13 -0
package/src/routes/adminAudit.routes.js +196 -0
package/src/routes/adminEjsVirtual.routes.js +17 -0
package/src/routes/adminErrors.routes.js +164 -0
package/src/routes/adminFeatureFlags.routes.js +12 -0
package/src/routes/adminHeadless.routes.js +38 -0
package/src/routes/adminI18n.routes.js +22 -0
package/src/routes/adminJsonConfigs.routes.js +15 -0
package/src/routes/adminLlm.routes.js +12 -0
package/src/routes/adminMigration.routes.js +81 -0
package/src/routes/adminSeoConfig.routes.js +20 -0
package/src/routes/adminUploadNamespaces.routes.js +13 -0
package/src/routes/assets.routes.js +21 -0
package/src/routes/auth.routes.js +12 -0
package/src/routes/billing.routes.js +11 -0
package/src/routes/errorTracking.routes.js +31 -0
package/src/routes/featureFlags.routes.js +9 -0
package/src/routes/forms.routes.js +9 -0
package/src/routes/formsAdmin.routes.js +13 -0
package/src/routes/globalSettings.routes.js +18 -0
package/src/routes/headless.routes.js +15 -0
package/src/routes/i18n.routes.js +8 -0
package/src/routes/invite.routes.js +9 -0
package/src/routes/jsonConfigs.routes.js +8 -0
package/src/routes/log.routes.js +111 -0
package/src/routes/metrics.routes.js +9 -0
package/src/routes/notificationAdmin.routes.js +15 -0
package/src/routes/notifications.routes.js +12 -0
package/src/routes/org.routes.js +31 -0
package/src/routes/orgAdmin.routes.js +20 -0
package/src/routes/publicAssets.routes.js +7 -0
package/src/routes/stripeAdmin.routes.js +20 -0
package/src/routes/user.routes.js +22 -0
package/src/routes/userAdmin.routes.js +15 -0
package/src/routes/waitingList.routes.js +13 -0
package/src/routes/waitingListAdmin.routes.js +9 -0
package/src/routes/webhook.routes.js +32 -0
package/src/routes/workflowWebhook.routes.js +54 -0
package/src/routes/workflows.routes.js +110 -0
package/src/services/assets.service.js +110 -0
package/src/services/audit.service.js +62 -0
package/src/services/auditLogger.js +165 -0
package/src/services/ejsVirtual.service.js +614 -0
package/src/services/email.service.js +351 -0
package/src/services/errorLogger.js +221 -0
package/src/services/featureFlags.service.js +202 -0
package/src/services/forms.service.js +214 -0
package/src/services/globalSettings.service.js +49 -0
package/src/services/headlessApiTokens.service.js +158 -0
package/src/services/headlessCrypto.service.js +31 -0
package/src/services/headlessModels.service.js +356 -0
package/src/services/i18n.service.js +314 -0
package/src/services/i18nInferredKeys.service.js +337 -0
package/src/services/jsonConfigs.service.js +392 -0
package/src/services/llm.service.js +749 -0
package/src/services/migration.service.js +581 -0
package/src/services/migrationAssets/fsLocal.js +58 -0
package/src/services/migrationAssets/index.js +134 -0
package/src/services/migrationAssets/s3.js +75 -0
package/src/services/migrationAssets/sftp.js +92 -0
package/src/services/notification.service.js +212 -0
package/src/services/objectStorage.service.js +514 -0
package/src/services/seoConfig.service.js +402 -0
package/src/services/storage.js +150 -0
package/src/services/stripe.service.js +185 -0
package/src/services/stripeHelper.service.js +264 -0
package/src/services/uploadNamespaces.service.js +326 -0
package/src/services/webhook.service.js +157 -0
package/src/services/workflow.service.js +271 -0
package/src/utils/asyncHandler.js +5 -0
package/src/utils/encryption.js +80 -0
package/src/utils/jwt.js +40 -0
package/src/utils/orgRoles.js +156 -0
package/src/utils/validation.js +26 -0
package/src/utils/webhookRetry.js +93 -0
package/views/admin-assets.ejs +444 -0
package/views/admin-audit.ejs +283 -0
package/views/admin-coolify-deploy.ejs +207 -0
package/views/admin-dashboard-home.ejs +291 -0
package/views/admin-dashboard.ejs +397 -0
package/views/admin-ejs-virtual.ejs +280 -0
package/views/admin-errors.ejs +368 -0
package/views/admin-feature-flags.ejs +390 -0
package/views/admin-forms.ejs +526 -0
package/views/admin-global-settings.ejs +436 -0
package/views/admin-headless.ejs +2020 -0
package/views/admin-i18n-locales.ejs +221 -0
package/views/admin-i18n.ejs +728 -0
package/views/admin-json-configs.ejs +410 -0
package/views/admin-llm.ejs +884 -0
package/views/admin-metrics.ejs +274 -0
package/views/admin-migration.ejs +814 -0
package/views/admin-notifications.ejs +430 -0
package/views/admin-organizations.ejs +984 -0
package/views/admin-seo-config.ejs +673 -0
package/views/admin-stripe-pricing.ejs +558 -0
package/views/admin-test.ejs +342 -0
package/views/admin-users.ejs +452 -0
package/views/admin-waiting-list.ejs +547 -0
package/views/admin-webhooks.ejs +329 -0
package/views/admin-workflows.ejs +310 -0
package/views/partials/admin-assets-script.ejs +2022 -0
package/views/partials/admin-test-sidebar.ejs +14 -0
package/views/partials/dashboard/nav-items.ejs +66 -0
package/views/partials/dashboard/palette.ejs +63 -0
package/views/partials/dashboard/sidebar.ejs +21 -0
package/views/partials/dashboard/tab-bar.ejs +26 -0
package/views/partials/footer.ejs +3 -0

package/views/admin-forms.ejs ADDED Viewed

@@ -0,0 +1,526 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Forms & Leads Admin</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
+  <style>
+    .toast {
+      animation: slideIn 0.3s ease-out;
+    }
+    @keyframes slideIn {
+      from { transform: translateX(100%); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+    .fade-out {
+      animation: fadeOut 0.3s ease-out forwards;
+    }
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+  </style>
+</head>
+<body class="bg-gray-100">
+  <div id="app" class="min-h-screen">
+    <!-- Header -->
+    <div class="bg-white shadow">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        <div class="flex justify-between items-center">
+          <div>
+            <h1 class="text-2xl font-bold text-gray-900">Forms & Leads</h1>
+            <p class="text-sm text-gray-600 mt-1">Manage form definitions and browse submissions</p>
+          </div>
+          <div class="flex border-b border-gray-200">
+            <button
+              @click="activeTab = 'forms'"
+              :class="['px-4 py-2 font-medium text-sm', activeTab === 'forms' ? 'border-b-2 border-indigo-500 text-indigo-600' : 'text-gray-500 hover:text-gray-700']"
+            >Definitions</button>
+            <button
+              @click="activeTab = 'submissions'; loadSubmissions()"
+              :class="['px-4 py-2 font-medium text-sm', activeTab === 'submissions' ? 'border-b-2 border-indigo-500 text-indigo-600' : 'text-gray-500 hover:text-gray-700']"
+            >Submissions</button>
+            <button
+              @click="activeTab = 'setup'"
+              :class="['px-4 py-2 font-medium text-sm', activeTab === 'setup' ? 'border-b-2 border-indigo-500 text-indigo-600' : 'text-gray-500 hover:text-gray-700']"
+            >Quick Setup</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Main Content -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Definitions Tab -->
+      <div v-if="activeTab === 'forms'">
+        <div class="flex justify-between mb-4">
+          <h2 class="text-lg font-semibold text-gray-900">Form Definitions</h2>
+          <button @click="editForm({})" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
+            <i class="ti ti-plus mr-2"></i>New Form
+          </button>
+        </div>
+        <div class="bg-white shadow rounded-lg overflow-hidden border border-gray-200">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID / Key</th>
+                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="form in forms" :key="form.id">
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">{{ form.name }}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><code>{{ form.id }}</code></td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button @click="editForm(form)" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
+                  <button @click="deleteForm(form.id)" class="text-red-600 hover:text-red-900">Delete</button>
+                </td>
+              </tr>
+              <tr v-if="forms.length === 0">
+                <td colspan="3" class="px-6 py-8 text-center text-sm text-gray-500 italic">No forms defined yet. Create your first form to start capturing leads.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!-- Inline Editor -->
+        <div v-if="editingForm" class="mt-8 bg-white shadow rounded-lg p-6 border border-indigo-200">
+          <h3 class="text-lg font-medium text-gray-900 mb-4">{{ editingForm.id ? 'Edit' : 'Create' }} Form</h3>
+          <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
+            <div class="sm:col-span-3">
+              <label class="block text-sm font-medium text-gray-700">Form Name</label>
+              <input v-model="editingForm.name" type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+            <div class="sm:col-span-3">
+              <label class="block text-sm font-medium text-gray-700">Custom ID (Optional)</label>
+              <input v-model="editingForm.id" type="text" :disabled="!!editingForm._id" placeholder="e.g. contact-form" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+            <div class="sm:col-span-6">
+              <label class="block text-sm font-medium text-gray-700">Organization ID (for Webhooks)</label>
+              <input v-model="editingForm.organizationId" type="text" placeholder="org_..." class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+            <div class="sm:col-span-6">
+              <label class="block text-sm font-medium text-gray-700">Success Redirect URL</label>
+              <input v-model="editingForm.successUrl" type="text" placeholder="https://example.com/thank-you" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+            <div class="sm:col-span-6">
+              <label class="block text-sm font-medium text-gray-700">Webhook URL (Optional)</label>
+              <input v-model="editingForm.webhookUrl" type="text" placeholder="https://hooks.zapier.com/..." class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+            <div class="sm:col-span-6">
+              <label class="block text-sm font-medium text-gray-700">Notification Email (Optional)</label>
+              <input v-model="editingForm.notifyEmail" type="email" placeholder="leads@example.com" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            </div>
+          </div>
+          <div class="mt-6 flex justify-end space-x-3">
+            <button @click="editingForm = null" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
+            <button @click="saveForm" class="bg-indigo-600 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-indigo-700">Save Form</button>
+          </div>
+        </div>
+      </div>
+      <!-- Submissions Tab -->
+      <div v-if="activeTab === 'submissions'">
+        <div class="bg-white rounded-lg shadow p-6 mb-6">
+          <div class="flex flex-col gap-4 sm:flex-row sm:items-end">
+            <div class="flex-1">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Form</label>
+              <select v-model="filter.formId" class="w-full border rounded px-3 py-2">
+                <option :value="null">All Forms</option>
+                <option v-for="f in forms" :value="f.id">{{ f.name }}</option>
+              </select>
+            </div>
+            <div class="flex gap-2">
+              <button @click="loadSubmissions" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Apply Filters</button>
+              <button @click="resetFilters" class="bg-gray-100 text-gray-800 px-4 py-2 rounded hover:bg-gray-200">Reset</button>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white rounded-lg shadow overflow-hidden">
+          <div class="px-6 py-4 border-b flex items-center justify-between">
+            <h2 class="text-lg font-semibold text-gray-900">Captured Leads</h2>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-gray-500">Total: {{ pagination.total }}</span>
+              <button @click="prevPage" :disabled="filter.offset <= 0" class="p-1 disabled:opacity-50"><i class="ti ti-chevron-left"></i></button>
+              <button @click="nextPage" :disabled="filter.offset + filter.limit >= pagination.total" class="p-1 disabled:opacity-50"><i class="ti ti-chevron-right"></i></button>
+            </div>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Form</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP / Origin</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
+                  <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <template v-for="sub in submissions" :key="sub._id">
+                  <tr>
+                    <td class="px-6 py-4 whitespace-nowrap text-xs text-gray-500">{{ formatDate(sub.createdAt) }}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-xs text-indigo-600 font-semibold">{{ getFormName(sub.formKey) }}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-xs text-gray-500">{{ sub.meta?.ip }}</td>
+                    <td class="px-6 py-4 text-xs text-gray-900 max-w-xs truncate">{{ formatFields(sub.fields) }}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button @click="toggleDetails(sub._id)" class="text-indigo-600 hover:text-indigo-900 mr-3">Details</button>
+                      <button @click="deleteSubmission(sub._id)" class="text-red-600 hover:text-red-900"><i class="ti ti-trash"></i></button>
+                    </td>
+                  </tr>
+                  <tr v-if="expandedId === sub._id" class="bg-gray-50">
+                    <td colspan="5" class="px-6 py-4">
+                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                          <h4 class="text-xs font-bold text-gray-700 uppercase mb-2">Form Fields</h4>
+                          <pre class="bg-white border rounded p-3 text-[10px] overflow-auto max-h-40">{{ sub.fields }}</pre>
+                        </div>
+                        <div>
+                          <h4 class="text-xs font-bold text-gray-700 uppercase mb-2">Meta / Context</h4>
+                          <pre class="bg-white border rounded p-3 text-[10px] overflow-auto max-h-40">{{ sub.meta }}</pre>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </template>
+                <tr v-if="submissions.length === 0">
+                  <td colspan="5" class="px-6 py-10 text-center text-sm text-gray-500">No submissions found matching your filters.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <!-- Setup Tab -->
+      <div v-if="activeTab === 'setup'" class="space-y-8">
+        <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
+          <p class="text-sm text-blue-700">Select a form definition below to get the integration code for your external website.</p>
+        </div>
+        <section>
+          <label class="block text-sm font-medium text-gray-700 mb-2">1. Choose a Form</label>
+          <select v-model="setupFormId" class="block w-full border border-gray-300 rounded-md p-2 focus:ring-indigo-500 focus:border-indigo-500">
+            <option :value="null">Select a form...</option>
+            <option v-for="f in forms" :value="f.id">{{ f.name }}</option>
+          </select>
+        </section>
+        <div v-if="setupFormId" class="space-y-8">
+          <section>
+            <h4 class="text-md font-bold text-gray-900 mb-2">2. Styled HTML Form (Tailwind CSS)</h4>
+            <p class="text-sm text-gray-600 mb-2">A modern, production-ready form using Tailwind CSS classes.</p>
+            <div class="relative">
+              <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>&lt;form action="{{ origin }}<%= baseUrl %>/api/forms/submit/{{ setupFormId }}" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg space-y-4 border border-gray-100"&gt;
+  &lt;div&gt;
+    &lt;label class="block text-sm font-semibold text-gray-700 mb-1"&gt;Email Address&lt;/label&gt;
+    &lt;input type="email" name="email" placeholder="alex@example.com" required
+      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label class="block text-sm font-semibold text-gray-700 mb-1"&gt;Message&lt;/label&gt;
+    &lt;textarea name="message" rows="4" placeholder="How can we help?"
+      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+  &lt;button type="submit"
+    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-all active:scale-95"&gt;
+    Send Message
+  &lt;/button&gt;
+&lt;/form&gt;</code></pre>
+              <button @click="copyCode('html')" class="absolute top-2 right-2 p-1 bg-gray-700 hover:bg-gray-600 rounded text-white transition">
+                <i class="ti ti-copy"></i>
+              </button>
+            </div>
+          </section>
+          <section>
+            <h4 class="text-md font-bold text-gray-900 mb-2">3. AJAX / Fetch Integration</h4>
+            <p class="text-sm text-gray-600 mb-2">Use this for a modern, refresh-less experience.</p>
+            <div class="relative">
+              <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>const data = { email: 'user@example.com', message: 'Hello!' };
+fetch('{{ origin }}<%= baseUrl %>/api/forms/submit/{{ setupFormId }}', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify(data)
+})
+.then(res => res.json())
+.then(data => console.log('Success!', data));</code></pre>
+              <button @click="copyCode('js')" class="absolute top-2 right-2 p-1 bg-gray-700 hover:bg-gray-600 rounded text-white transition">
+                <i class="ti ti-copy"></i>
+              </button>
+            </div>
+          </section>
+          <section>
+            <h4 class="text-md font-bold text-gray-900 mb-2">4. Zero-JS Refresh-less Integration (Hidden IFrame)</h4>
+            <p class="text-sm text-gray-600 mb-2">Use this if you want a submission without a page refresh, but don't want to write any JavaScript.</p>
+            <div class="relative">
+              <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>&lt;!-- Hidden iframe to handle the response --&gt;
+&lt;iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(this.contentWindow.name=='submitted'){alert('Form Submitted!');}"&gt;&lt;/iframe&gt;
+&lt;!-- Form targeting the iframe --&gt;
+&lt;form action="{{ origin }}<%= baseUrl %>/api/forms/submit/{{ setupFormId }}" method="POST" target="hidden_iframe" onsubmit="this.nextElementSibling.style.display='block'; this.style.display='none';" class="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg space-y-4 border border-gray-100"&gt;
+  &lt;div&gt;
+    &lt;label class="block text-sm font-semibold text-gray-700 mb-1"&gt;Email Address&lt;/label&gt;
+    &lt;input type="email" name="email" placeholder="alex@example.com" required
+      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label class="block text-sm font-semibold text-gray-700 mb-1"&gt;Message&lt;/label&gt;
+    &lt;textarea name="message" rows="4" placeholder="How can we help?"
+      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+  &lt;button type="submit"
+    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-all active:scale-95"&gt;
+    Send Message
+  &lt;/button&gt;
+&lt;/form&gt;
+&lt;div style="display:none;" class="text-center p-10 bg-white rounded-xl shadow-lg border border-gray-100"&gt;
+  &lt;h3 class="text-xl font-bold text-green-600"&gt;Thank you!&lt;/h3&gt;
+  &lt;p class="text-gray-500 mt-2"&gt;Your message has been received.&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+              <button @click="copyCode('iframe')" class="absolute top-2 right-2 p-1 bg-gray-700 hover:bg-gray-600 rounded text-white transition">
+                <i class="ti ti-copy"></i>
+              </button>
+            </div>
+          </section>
+        </div>
+        <div v-else class="text-center py-20 border-2 border-dashed border-gray-200 rounded-lg">
+          <i class="ti ti-hand-finger text-5xl text-gray-300 mb-4 block"></i>
+          <p class="text-gray-500">Pick a form above to see setup options</p>
+        </div>
+      </div>
+    </div>
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed top-4 right-4 space-y-2 z-50">
+      <div v-for="t in toasts" :key="t.id" :class="['toast px-6 py-4 rounded-lg shadow-lg text-white transition-all duration-300', t.type === 'success' ? 'bg-green-500' : 'bg-red-500']">
+        {{ t.message }}
+      </div>
+    </div>
+  </div>
+  <script>
+    const { createApp, ref, onMounted, computed } = Vue;
+    createApp({
+      setup() {
+        const activeTab = ref('submissions');
+        const forms = ref([]);
+        const submissions = ref([]);
+        const editingForm = ref(null);
+        const expandedId = ref(null);
+        const setupFormId = ref(null);
+        const toasts = ref([]);
+        const filter = ref({
+          formId: null,
+          limit: 50,
+          offset: 0
+        });
+        const pagination = ref({
+          total: 0
+        });
+        const origin = window.location.origin;
+        const showToast = (message, type = 'success') => {
+          const id = Date.now();
+          toasts.value.push({ id, message, type });
+          setTimeout(() => {
+            toasts.value = toasts.value.filter(t => t.id !== id);
+          }, 3000);
+        };
+        const loadForms = async () => {
+          try {
+            const res = await fetch(`${window.location.origin}<%= baseUrl %>/api/admin/forms/definitions`);
+            forms.value = await res.json();
+          } catch (e) {
+            showToast('Failed to load forms', 'error');
+          }
+        };
+        const loadSubmissions = async () => {
+          try {
+            const params = new URLSearchParams();
+            if (filter.value.formId) params.append('formId', filter.value.formId);
+            params.append('limit', filter.value.limit);
+            params.append('offset', filter.value.offset);
+            const res = await fetch(`${window.location.origin}<%= baseUrl %>/api/admin/forms?${params.toString()}`);
+            const data = await res.json();
+            submissions.value = data.submissions || [];
+            pagination.value = data.pagination || { total: 0 };
+          } catch (e) {
+            showToast('Failed to load submissions', 'error');
+          }
+        };
+        const saveForm = async () => {
+          try {
+            const res = await fetch(`${window.location.origin}<%= baseUrl %>/api/admin/forms/definitions`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(editingForm.value)
+            });
+            if (res.ok) {
+              showToast('Form saved successfully');
+              editingForm.value = null;
+              loadForms();
+            }
+          } catch (e) {
+            showToast('Failed to save form', 'error');
+          }
+        };
+        const deleteForm = async (id) => {
+          if (!confirm('Are you sure you want to delete this form definition? Submissions will remain but the integration might break.')) return;
+          try {
+            const res = await fetch(`${window.location.origin}<%= baseUrl %>/api/admin/forms/definitions/${id}`, { method: 'DELETE' });
+            if (res.ok) {
+              showToast('Form deleted');
+              loadForms();
+            }
+          } catch (e) {
+            showToast('Failed to delete form', 'error');
+          }
+        };
+        const deleteSubmission = async (id) => {
+          if (!confirm('Are you sure you want to delete this lead? This action cannot be undone.')) return;
+          try {
+            const res = await fetch(`${window.location.origin}<%= baseUrl %>/api/admin/forms/${id}`, { method: 'DELETE' });
+            if (res.ok) {
+              showToast('Submission deleted');
+              loadSubmissions();
+            }
+          } catch (e) {
+            showToast('Failed to delete submission', 'error');
+          }
+        };
+        const editForm = (form) => {
+          editingForm.value = { ...form };
+        };
+        const toggleDetails = (id) => {
+          expandedId.value = expandedId.value === id ? null : id;
+        };
+        const resetFilters = () => {
+          filter.value = { formId: null, limit: 50, offset: 0 };
+          loadSubmissions();
+        };
+        const formatDate = (iso) => new Date(iso).toLocaleString();
+        const getFormName = (id) => {
+          const f = forms.value.find(f => f.id === id);
+          return f ? f.name : id;
+        };
+        const formatFields = (fields) => {
+          if (!fields) return '';
+          return Object.entries(fields).map(([k, v]) => `${k}: ${v}`).join(', ');
+        };
+        const prevPage = () => {
+          if (filter.value.offset > 0) {
+            filter.value.offset = Math.max(0, filter.value.offset - filter.value.limit);
+            loadSubmissions();
+          }
+        };
+        const nextPage = () => {
+          if (filter.value.offset + filter.value.limit < pagination.value.total) {
+            filter.value.offset += filter.value.limit;
+            loadSubmissions();
+          }
+        };
+        const copyCode = (type) => {
+          const origin = window.location.origin;
+          let code = '';
+          if (type === 'html') {
+            code = `<form action="${origin}<%= baseUrl %>/api/forms/submit/${setupFormId.value}" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg space-y-4 border border-gray-100">
+  <div>
+    <label class="block text-sm font-semibold text-gray-700 mb-1">Email Address</label>
+    <input type="email" name="email" placeholder="alex@example.com" required
+      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
+  </div>
+  <div>
+    <label class="block text-sm font-semibold text-gray-700 mb-1">Message</label>
+    <textarea name="message" rows="4" placeholder="How can we help?"
+      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"></textarea>
+  </div>
+  <button type="submit"
+    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-all active:scale-95">
+    Send Message
+  </button>
+</form>`;
+          } else if (type === 'iframe') {
+            code = `<!-- Hidden iframe to handle the response -->
+<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(this.contentWindow.name=='submitted'){alert('Form Submitted!');}"></iframe>
+<!-- Form targeting the iframe -->
+<form action="${origin}<%= baseUrl %>/api/forms/submit/${setupFormId.value}" method="POST" target="hidden_iframe" onsubmit="this.nextElementSibling.style.display='block'; this.style.display='none';" class="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg space-y-4 border border-gray-100">
+  <div>
+    <label class="block text-sm font-semibold text-gray-700 mb-1">Email Address</label>
+    <input type="email" name="email" placeholder="alex@example.com" required
+      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
+  </div>
+  <div>
+    <label class="block text-sm font-semibold text-gray-700 mb-1">Message</label>
+    <textarea name="message" rows="4" placeholder="How can we help?"
+      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"></textarea>
+  </div>
+  <button type="submit"
+    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-all active:scale-95">
+    Send Message
+  </button>
+</form>
+<div style="display:none;" class="text-center p-10 bg-white rounded-xl shadow-lg border border-gray-100">
+  <h3 class="text-xl font-bold text-green-600">Thank you!</h3>
+  <p class="text-gray-500 mt-2">Your message has been received.</p>
+</div>`;
+          } else {
+            code = `const data = { email: 'user@example.com', message: 'Hello!' };
+fetch('${origin}<%= baseUrl %>/api/forms/submit/${setupFormId.value}', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify(data)
+})
+.then(res => res.json())
+.then(data => console.log('Success!', data));`;
+          }
+          navigator.clipboard.writeText(code).then(() => showToast('Copied to clipboard'));
+        };
+        onMounted(() => {
+          loadForms();
+          loadSubmissions();
+        });
+        return {
+          activeTab, forms, submissions, editingForm, expandedId, setupFormId, filter, pagination, toasts,
+          loadSubmissions, saveForm, deleteForm, deleteSubmission, editForm, toggleDetails, resetFilters,
+          formatDate, getFormName, formatFields, prevPage, nextPage, copyCode,
+          origin
+        };
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>