falak-app-duo 1.1.5 → 1.2.0

package/bin/falak-app-duo

@@ -540,6 +540,11 @@ async function main() {
       : "1 (normal demo user)"
     : "none";
 
+  // Data mode: demo apps are wired fully to the bundled demo data (auth +
+  // profile/settings + entity lists) and need no backend; everything else
+  // goes straight to the Laravel API.
+  const dataMode = demoAccounts || (demoEntities && demoEntities.length) ? "demo" : "live";
+
   console.log(
     chalk.gray(`  Languages wired: ${locales.map((l) => LOCALE_LABELS[l]).join(", ")}${hasRtl ? " (RTL default)" : ""}`)
   );
@@ -548,11 +553,13 @@ async function main() {
       `  Roles: ${roles && roles.length ? roles.join(", ") : "none"} | Demo accounts: ${demoAccountsSummary} | Demo data: ${demoEntities && demoEntities.length ? demoEntities.join(", ") : "none"}`
     )
   );
+  console.log(chalk.gray(`  Data mode: ${dataMode}${dataMode === "demo" ? " (no backend needed)" : " (Laravel API)"}`));
 
   // Generate a real .env from .env.example with a fresh encryption key
   const envExamplePath = path.join(targetDir, ".env.example");
   let envContent = await fs.readFile(envExamplePath, "utf-8");
   envContent = envContent
+    .replace("__DATA_MODE__", dataMode)
     .replace("__API_BASE_URL__", answers.apiBaseUrl || "http://localhost:8000/api")
     .replace("__AES_KEY__", randomHex(32)) // 256-bit key, hex-encoded
     .replace("__AES_IV__", randomHex(16)); // 128-bit IV, hex-encoded
@@ -561,9 +568,15 @@ async function main() {
   console.log(chalk.green(`\n  Scaffolded ./${projectName} successfully.\n`));
   console.log(
     chalk.gray(
-      "  Fill in VITE_API_KEY, VITE_ABLY_PUBLIC_KEY, Brevo backend routes, and review .env before shipping.\n"
+      "  Fill in VITE_API_KEY, VITE_ABLY_PUBLIC_KEY, Brevo backend routes, and review .env before shipping."
     )
   );
+  if (dataMode === "demo") {
+    console.log(chalk.gray("  Data mode: demo — the app runs on bundled demo data (no API keys needed)."));
+    console.log(chalk.gray("  Flip VITE_DATA_MODE=live in .env to wire the app to your Laravel backend.\n"));
+  } else {
+    console.log(chalk.gray("\n  Data mode: live — the app calls your Laravel backend.\n"));
+  }
 
   const runChoice = opts.yes || hasFeatureFlags
     ? "install"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "falak-app-duo",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Vue 3 boilerplate scaffolder — Ably (realtime), Brevo, AES-256, Arabic/RTL, and a Laravel API client (API key + user token auth). No Firebase, no Groq/Paymob on the frontend (Groq is backend-only; Paymob dropped).",
   "type": "module",
   "bin": {

package/templates/default/.env.example

@@ -1,5 +1,12 @@
+# --- Data source ---
+# demo: the app runs entirely on bundled demo data (auth, profile, settings and
+#       entity lists) with no backend required.
+# live: every request goes to the Laravel API below.
+# The scaffolder sets this to "demo" when demo accounts/demo data were selected.
+VITE_DATA_MODE=__DATA_MODE__
+
 # --- Laravel API (Falak Bridge or your own backend) ---
-# Base URL of your Laravel API
+# Base URL of your Laravel API (not used in demo mode)
 VITE_API_BASE_URL=__API_BASE_URL__
 # Static API key issued to this client app (sent as X-API-Key on every request)
 VITE_API_KEY=replace-with-your-app-api-key

package/templates/default/src/i18n/locales/ar.json

@@ -73,7 +73,8 @@
       "headline2": "جاهز ومربوط.",
       "tagline": "محادثة فورية ورسائل تلقائية ومصادقة AES-256 ومساعد ذكي — كل ذلك في قالب Vue 3 + Laravel واحد.",
       "footer": "Vue 3 · Laravel · Ably · Brevo · Groq"
-    }
+    },
+    "demoHint": "وضع العرض مفعّل — جرّب حساب العرض هذا:"
   },
   "register": {
     "title": "أنشئ حسابك",
@@ -160,6 +161,11 @@
         "title": "المساعد الذكي",
         "desc": "إعدادات مساعد ذكي مدعوم من Groq جاهزة للتخصيص."
       }
+    },
+    "demo": {
+      "title": "بيانات تجريبية",
+      "subtitle": "تُعرض من src/data/demo/* — لا حاجة لأي خادم. اضبط VITE_DATA_MODE=live للاتصال بالواجهة البرمجية.",
+      "entities": "الكيانات"
     }
   },
   "profile": {

package/templates/default/src/i18n/locales/de.json

@@ -73,7 +73,8 @@
       "headline2": "schon verbunden.",
       "tagline": "Echtzeit-Chat, transaktionale E-Mails, AES-256 sichere Anmeldung und ein KI-Agent — gebündelt in einem Vue-3- und Laravel-Starter.",
       "footer": "Vue 3 · Laravel · Ably · Brevo · Groq"
-    }
+    },
+    "demoHint": "Demo-Modus ist aktiv — versuche dieses Demo-Konto:"
   },
   "register": {
     "title": "Konto erstellen",
@@ -160,6 +161,11 @@
         "title": "KI-Agent",
         "desc": "Einstellungen für den Groq-KI-Agenten sind bereit zur Konfiguration."
       }
+    },
+    "demo": {
+      "title": "Demodaten",
+      "subtitle": "Wird aus src/data/demo/* gerendert — kein Backend nötig. Setze VITE_DATA_MODE=live, um stattdessen die API zu nutzen.",
+      "entities": "Entitäten"
     }
   },
   "profile": {

package/templates/default/src/i18n/locales/en.json

@@ -73,7 +73,8 @@
       "headline2": "already wired.",
       "tagline": "Realtime chat, transactional email, AES-256 secure auth and an AI agent — bundled in one Vue 3 + Laravel starter.",
       "footer": "Vue 3 · Laravel · Ably · Brevo · Groq"
-    }
+    },
+    "demoHint": "Demo mode is on — try this demo account:"
   },
   "register": {
     "title": "Create your account",
@@ -160,6 +161,11 @@
         "title": "AI Agent",
         "desc": "Groq-powered AI agent settings ready to configure."
       }
+    },
+    "demo": {
+      "title": "Demo data",
+      "subtitle": "Rendered from src/data/demo/* — no backend needed. Set VITE_DATA_MODE=live to hit the API instead.",
+      "entities": "Entities"
     }
   },
   "profile": {

package/templates/default/src/i18n/locales/es.json

@@ -73,7 +73,8 @@
       "headline2": "ya conectado.",
       "tagline": "Chat en tiempo real, correo transaccional, autenticación AES-256 y un agente de IA, todo en un starter de Vue 3 + Laravel.",
       "footer": "Vue 3 · Laravel · Ably · Brevo · Groq"
-    }
+    },
+    "demoHint": "El modo demo está activado — prueba esta cuenta de demostración:"
   },
   "register": {
     "title": "Crea tu cuenta",
@@ -160,6 +161,11 @@
         "title": "Agente IA",
         "desc": "Ajustes del agente de IA con tecnología Groq listos para configurar."
       }
+    },
+    "demo": {
+      "title": "Datos de demostración",
+      "subtitle": "Se renderiza desde src/data/demo/* — no se necesita backend. Cambia VITE_DATA_MODE=live para usar la API en su lugar.",
+      "entities": "Entidades"
     }
   },
   "profile": {

package/templates/default/src/i18n/locales/fr.json

@@ -73,7 +73,8 @@
       "headline2": "déjà branché.",
       "tagline": "Chat temps réel, e-mails transactionnels, authentification AES-256 et agent IA — réunis dans un seul starter Vue 3 + Laravel.",
       "footer": "Vue 3 · Laravel · Ably · Brevo · Groq"
-    }
+    },
+    "demoHint": "Mode démo activé — essayez ce compte de démonstration :"
   },
   "register": {
     "title": "Créez votre compte",
@@ -160,6 +161,11 @@
         "title": "Agent IA",
         "desc": "Paramètres de l'agent IA propulsé par Groq prêts à configurer."
       }
+    },
+    "demo": {
+      "title": "Données de démonstration",
+      "subtitle": "Rendu depuis src/data/demo/* — aucun backend requis. Passez VITE_DATA_MODE=live pour utiliser l'API à la place.",
+      "entities": "Entités"
     }
   },
   "profile": {

package/templates/default/src/i18n/locales/it.json

@@ -73,7 +73,8 @@
       "headline2": "già collegato.",
       "tagline": "Chat in tempo reale, email transazionali, autenticazione sicura AES-256 e un agente IA — in un unico starter Vue 3 + Laravel.",
       "footer": "Vue 3 · Laravel · Ably · Brevo · Groq"
-    }
+    },
+    "demoHint": "Modalità demo attiva — prova questo account demo:"
   },
   "register": {
     "title": "Crea il tuo account",
@@ -160,6 +161,11 @@
         "title": "Agente IA",
         "desc": "Impostazioni dell'agente IA basato su Groq pronte da configurare."
       }
+    },
+    "demo": {
+      "title": "Dati demo",
+      "subtitle": "Renderizzato da src/data/demo/* — nessun backend richiesto. Imposta VITE_DATA_MODE=live per usare invece l'API.",
+      "entities": "Entità"
     }
   },
   "profile": {

package/templates/default/src/i18n/locales/ru.json

@@ -73,7 +73,8 @@
       "headline2": "уже подключено.",
       "tagline": "Чат в реальном времени, транзакционные письма, безопасная авторизация AES-256 и ИИ-агент — в одном стартере Vue 3 + Laravel.",
       "footer": "Vue 3 · Laravel · Ably · Brevo · Groq"
-    }
+    },
+    "demoHint": "Демо-режим включён — попробуйте эту демо-учётную запись:"
   },
   "register": {
     "title": "Создайте учётную запись",
@@ -160,6 +161,11 @@
         "title": "ИИ-агент",
         "desc": "Настройки ИИ-агента на базе Groq готовы к конфигурации."
       }
+    },
+    "demo": {
+      "title": "Демо-данные",
+      "subtitle": "Рендерится из src/data/demo/* — бэкенд не нужен. Установите VITE_DATA_MODE=live, чтобы вместо этого использовать API.",
+      "entities": "Сущности"
     }
   },
   "profile": {

package/templates/default/src/services/dataClient.js

@@ -0,0 +1,22 @@
+// Single source of truth for the app's data source.
+//
+//   VITE_DATA_MODE=demo -> api calls are served by the in-browser demo backend
+//                          (services/demoApi.js) from the bundled demo data.
+//   VITE_DATA_MODE=live -> every call goes to the Laravel backend (api.js).
+//
+// Stores and views import `client` (never `api` or `demoApi` directly) so the
+// whole app flips between demo and live with one env var.
+import api from "./api";
+import demoApi from "./demoApi";
+
+export const DATA_MODE = import.meta.env.VITE_DATA_MODE === "demo" ? "demo" : "live";
+export const isDemoMode = DATA_MODE === "demo";
+
+export const client = isDemoMode ? demoApi : api;
+
+// Generic entity access used by pages that render data grids/lists. In live
+// mode this maps to GET /<entity> on your backend; in demo mode it reads the
+// corresponding src/data/demo/<entity>.js collection.
+export function getList(entity, params) {
+  return client.get(`/${entity}`, { params });
+}

package/templates/default/src/services/demoApi.js

@@ -0,0 +1,377 @@
+// Demo-mode in-browser "backend".
+//
+// When VITE_DATA_MODE=demo the whole app runs on the bundled demo data with no
+// Laravel backend or network required. This module mirrors the same routes the
+// real API exposes — auth/me, auth/login, profile/settings writes, entity
+// lists — and serves them from a localStorage-backed database seeded from
+// src/data/demoAccounts.js and src/data/demo/*.js. Flip VITE_DATA_MODE=live and
+// the app talks to the real backend again (see services/api.js).
+//
+// The scaffolder deletes demo modules whose features were switched off, so this
+// file discovers them via import.meta.glob — only files that exist at build
+// time are bundled, and nothing breaks when ones are missing.
+import { decrypt } from "@/utils/crypto";
+
+const DB_KEY = "falak_demo_db";
+const TOKEN_KEY = "falak_user_token";
+const SEED_VERSION = 1;
+
+// Eager glob: resolves every demo module that exists in this scaffold.
+const entityModules = import.meta.glob("../data/demo/*.js", { eager: true });
+const accountModules = import.meta.glob("../data/demoAccounts.js", { eager: true });
+
+function defaultSettings() {
+  return {
+    notification_preferences: {
+      account: { email: true, push: true, sms: false, telegram: false },
+      security: { email: true, push: true, sms: true, telegram: false },
+      marketing: { email: false, push: false, sms: false, telegram: false },
+      updates: { email: true, push: false, sms: false, telegram: false },
+    },
+    two_factor_enabled: false,
+    ai_agent: {
+      enabled: false,
+      model: "llama-3.3-70b-versatile",
+      temperature: 0.7,
+      reasoning: false,
+      system_prompt: "",
+    },
+    telegram: { bot_token: "", chat_id: "", username: "" },
+  };
+}
+
+function buildCollections() {
+  const collections = {};
+  for (const [file, mod] of Object.entries(entityModules)) {
+    const name = file.split("/").pop().replace(/\.js$/, "");
+    const rows = Array.isArray(mod[name]) ? mod[name] : Array.isArray(mod.default) ? mod.default : null;
+    if (rows) collections[name] = rows.map((row) => ({ ...row }));
+  }
+  return collections;
+}
+
+function buildSeedAccounts(collections) {
+  const accounts = [];
+  let nextId = 1;
+  // Full-fidelity demo accounts (role + profile + settings) from demoAccounts.js.
+  const seeded = Object.values(accountModules)[0]?.DEMO_ACCOUNTS;
+  if (Array.isArray(seeded)) {
+    for (const a of seeded) {
+      accounts.push({
+        id: nextId++,
+        email: a.email || a.profile?.email || "",
+        password: a.password || "password",
+        role: a.role || null,
+        name: a.profile?.name || "",
+        phone: a.profile?.phone || "",
+        country_code: a.profile?.country_code || "",
+        city: a.profile?.city || "",
+        channel: a.profile?.channel || "none",
+        channel_handle: a.profile?.channel_handle || "",
+        photo: a.profile?.photo ?? null,
+        ...(a.settings || defaultSettings()),
+      });
+    }
+  }
+  // The demo `users` entity rows are also usable as login accounts.
+  for (const u of collections.users || []) {
+    if (accounts.some((a) => a.email === u.email)) continue;
+    accounts.push({
+      id: nextId++,
+      email: u.email || "",
+      password: "password",
+      role: u.role || null,
+      name: u.name || "",
+      phone: "",
+      country_code: "",
+      city: "",
+      channel: "none",
+      channel_handle: "",
+      photo: null,
+      ...defaultSettings(),
+    });
+  }
+  return accounts;
+}
+
+function fingerprint() {
+  const entities = Object.keys(entityModules)
+    .map((f) => f.split("/").pop())
+    .sort()
+    .join(",");
+  const accounts = Object.keys(accountModules).length ? "accounts" : "";
+  return [SEED_VERSION, accounts, entities].join("|");
+}
+
+let db = null;
+
+function loadDB() {
+  const fp = fingerprint();
+  try {
+    const raw = JSON.parse(localStorage.getItem(DB_KEY) || "null");
+    if (raw && raw.fingerprint === fp) {
+      db = raw;
+      return db;
+    }
+  } catch {
+    // Fall through to a fresh seed.
+  }
+  const collections = buildCollections();
+  db = { fingerprint: fp, accounts: buildSeedAccounts(collections), collections };
+  persist();
+  return db;
+}
+
+function persist() {
+  try {
+    localStorage.setItem(DB_KEY, JSON.stringify(db));
+  } catch {
+    // Quota/storage unavailable — keep running in-memory only.
+  }
+}
+
+loadDB();
+
+function fail(message, status = 400) {
+  const error = new Error(message);
+  error.response = { status, data: { message } };
+  throw error;
+}
+
+function tokenFromStorage() {
+  const raw = localStorage.getItem(TOKEN_KEY);
+  if (!raw) return null;
+  const token = decrypt(raw);
+  const match = /^demo\.(\d+)$/.exec(token || "");
+  return match ? match[1] : null;
+}
+
+function requireAccount() {
+  const id = tokenFromStorage();
+  const account = id && db.accounts.find((a) => String(a.id) === String(id));
+  if (!account) fail("Unauthenticated", 401);
+  return account;
+}
+
+function publicUser(account) {
+  const { password, ...user } = account;
+  return user;
+}
+
+function matchEntity(path) {
+  const match = /^\/([a-z][a-z0-9-]*)(?:\/(\d+))?$/.exec(path);
+  if (!match) return null;
+  return { name: match[1], id: match[2] ? Number(match[2]) : null };
+}
+
+function getEntityRows(name) {
+  if (!db.collections[name]) db.collections[name] = [];
+  return db.collections[name];
+}
+
+function nextId(rows) {
+  return rows.reduce((max, row) => Math.max(max, Number(row.id) || 0), 0) + 1;
+}
+
+function base32Secret() {
+  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
+  let out = "";
+  for (let i = 0; i < 16; i++) out += alphabet[Math.floor(Math.random() * alphabet.length)];
+  return out.match(/.{4}/g).join(" ");
+}
+
+function recoveryCodes() {
+  const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
+  const codes = new Set();
+  while (codes.size < 6) {
+    let code = "";
+    for (let i = 0; i < 4; i++) code += chars[Math.floor(Math.random() * chars.length)];
+    code += "-";
+    for (let i = 0; i < 4; i++) code += chars[Math.floor(Math.random() * chars.length)];
+    codes.add(code);
+  }
+  return [...codes];
+}
+
+function overview() {
+  const stats = {
+    users: db.accounts.length,
+    orders: (db.collections.orders || []).length,
+    products: (db.collections.products || []).length,
+    revenue: (db.collections.orders || []).reduce((sum, o) => sum + (Number(o.total) || 0), 0),
+  };
+  return {
+    mode: "demo",
+    stats,
+    entities: Object.keys(db.collections).map((name) => {
+      const rows = getEntityRows(name);
+      const first = rows[0];
+      let preview = "";
+      if (first) {
+        preview = Object.entries(first)
+          .filter(([key]) => key !== "id")
+          .slice(0, 3)
+          .map(([, value]) => String(value))
+          .join(" · ");
+      }
+      return { name, count: rows.length, preview };
+    }),
+    signInHint: {
+      email: db.accounts[0]?.email || "",
+      password: db.accounts[0]?.password || "password",
+    },
+  };
+}
+
+const demoApi = {
+  async get(url) {
+    const path = (url || "").split("?")[0];
+    if (path === "/auth/me") return { data: publicUser(requireAccount()) };
+    if (path === "/overview") return { data: overview() };
+    const entity = matchEntity(path);
+    if (entity) return { data: [...getEntityRows(entity.name)] };
+    fail(`Demo backend: no GET handler for ${path}`, 404);
+  },
+
+  async post(url, body = {}) {
+    const path = (url || "").split("?")[0];
+    switch (path) {
+      case "/auth/login": {
+        const identifier = String(body.identifier || "").trim().toLowerCase();
+        const password = String(body.password || "");
+        const account = db.accounts.find(
+          (a) =>
+            a.email?.toLowerCase() === identifier || String(a.phone || "").trim() === String(body.identifier || "").trim()
+        );
+        if (!account || account.password !== password) fail("Invalid credentials", 401);
+        return { data: { token: `demo.${account.id}`, user: publicUser(account) } };
+      }
+      case "/auth/register": {
+        const email = String(body.email || "").trim().toLowerCase();
+        if (db.accounts.some((a) => a.email?.toLowerCase() === email)) fail("Email already registered", 422);
+        const account = {
+          id: nextId(db.accounts),
+          email,
+          phone: String(body.phone || "").trim(),
+          name: String(body.name || "").trim(),
+          role: body.role ?? null,
+          password: String(body.password || "password"),
+          channel: "none",
+          channel_handle: "",
+          photo: null,
+          ...defaultSettings(),
+        };
+        db.accounts.push(account);
+        persist();
+        return { data: { token: `demo.${account.id}`, user: publicUser(account) } };
+      }
+      case "/auth/logout":
+        return { data: {} };
+      case "/auth/forgot-password":
+        return { data: {} };
+      case "/auth/reset-password":
+        return { data: {} };
+      case "/auth/change-password": {
+        const account = requireAccount();
+        account.password = String(body.new_password || account.password);
+        persist();
+        return { data: {} };
+      }
+      case "/auth/2fa/enable": {
+        const account = requireAccount();
+        account.two_factor_method = String(body.method || "app");
+        account.two_factor_secret = base32Secret();
+        account.two_factor_challenge = true;
+        persist();
+        return { data: { secret: account.two_factor_secret, challenge: account.two_factor_challenge } };
+      }
+      case "/auth/2fa/verify": {
+        const account = requireAccount();
+        account.two_factor_enabled = true;
+        account.two_factor_challenge = false;
+        account.two_factor_recovery_codes = recoveryCodes();
+        persist();
+        return { data: publicUser(account) };
+      }
+      case "/auth/2fa/disable": {
+        const account = requireAccount();
+        account.two_factor_enabled = false;
+        account.two_factor_secret = "";
+        account.two_factor_challenge = false;
+        persist();
+        return { data: publicUser(account) };
+      }
+      case "/auth/telegram/test":
+        // Demo: always succeeds so the dialog can be exercised to completion.
+        return { data: { ok: true, message: "Sent (demo)" } };
+      default: {
+        const social = /^\/auth\/social\/([a-z]+)$/.exec(path);
+        if (social) return { data: { url: "" } }; // never navigate away in demo mode
+        const entity = matchEntity(path);
+        if (entity) {
+          const rows = getEntityRows(entity.name);
+          const record = { id: nextId(rows), ...body };
+          rows.push(record);
+          persist();
+          return { data: record };
+        }
+        fail(`Demo backend: no POST handler for ${path}`, 404);
+      }
+    }
+  },
+
+  async put(url, body = {}) {
+    const path = (url || "").split("?")[0];
+    if (path === "/auth/me") {
+      const account = requireAccount();
+      for (const key of ["name", "email", "phone", "country_code", "city", "channel", "channel_handle", "photo"]) {
+        if (key in body) account[key] = body[key];
+      }
+      persist();
+      return { data: publicUser(account) };
+    }
+    if (path === "/auth/notifications") {
+      const account = requireAccount();
+      account.notification_preferences = body.preferences || account.notification_preferences;
+      persist();
+      return { data: publicUser(account) };
+    }
+    if (path === "/auth/ai-agent") {
+      const account = requireAccount();
+      account.ai_agent = { ...account.ai_agent, ...body };
+      persist();
+      return { data: publicUser(account) };
+    }
+    if (path === "/auth/telegram") {
+      const account = requireAccount();
+      account.telegram = { ...account.telegram, ...body };
+      persist();
+      return { data: publicUser(account) };
+    }
+    const entity = matchEntity(path);
+    if (entity?.id !== null) {
+      const rows = getEntityRows(entity.name);
+      const index = rows.findIndex((row) => Number(row.id) === entity.id);
+      if (index === -1) fail("Not found", 404);
+      rows[index] = { ...rows[index], ...body, id: entity.id };
+      persist();
+      return { data: rows[index] };
+    }
+    fail(`Demo backend: no PUT handler for ${path}`, 404);
+  },
+
+  async delete(url) {
+    const entity = matchEntity((url || "").split("?")[0]);
+    if (entity?.id !== null) {
+      const rows = getEntityRows(entity.name);
+      const index = rows.findIndex((row) => Number(row.id) === entity.id);
+      if (index === -1) fail("Not found", 404);
+      rows.splice(index, 1);
+      persist();
+      return { data: { ok: true } };
+    }
+    fail(`Demo backend: no DELETE handler for ${url}`, 404);
+  },
+};
+
+export default demoApi;

package/templates/default/src/stores/auth.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { encrypt, decrypt } from "@/utils/crypto";
-import api from "@/services/api";
+import { client } from "@/services/dataClient";
 
 const STORAGE_KEY = "falak_user_token";
 
@@ -39,7 +39,7 @@ export const useAuthStore = defineStore("auth", {
     async login(identifier, password) {
       // `identifier` is either an email or a phone number — send it as "identifier"
       // so the backend can decide, or normalize it here depending on your API.
-      const { data } = await api.post("/auth/login", {
+      const { data } = await client.post("/auth/login", {
         identifier: identifier.trim(),
         password,
       });
@@ -49,20 +49,20 @@ export const useAuthStore = defineStore("auth", {
     },
     async logout() {
       try {
-        await api.post("/auth/logout");
+        await client.post("/auth/logout");
       } finally {
         this.clearToken();
       }
     },
     async fetchProfile() {
-      const { data } = await api.get("/auth/me");
+      const { data } = await client.get("/auth/me");
       this.user = data;
       return data;
     },
 
     // ---- Create account / recover password ----
     async register(payload) {
-      const { data } = await api.post("/auth/register", payload);
+      const { data } = await client.post("/auth/register", payload);
       if (data.token) {
         this.setToken(data.token);
         this.user = data.user;
@@ -70,26 +70,26 @@ export const useAuthStore = defineStore("auth", {
       return data;
     },
     async forgotPassword(identifier) {
-      return api.post("/auth/forgot-password", { identifier });
+      return client.post("/auth/forgot-password", { identifier });
     },
     async resetPassword(payload) {
-      return api.post("/auth/reset-password", payload);
+      return client.post("/auth/reset-password", payload);
     },
     // Social login: opens the provider's OAuth URL returned by the backend.
     async socialLogin(provider) {
-      const { data } = await api.post(`/auth/social/${provider}`);
+      const { data } = await client.post(`/auth/social/${provider}`);
       if (data?.url) window.location.href = data.url;
       return data;
     },
 
     // ---- Profile ----
     async updateProfile(payload) {
-      const { data } = await api.put("/auth/me", payload);
+      const { data } = await client.put("/auth/me", payload);
       this.user = data;
       return data;
     },
     async changePassword(currentPassword, newPassword) {
-      return api.post("/auth/change-password", {
+      return client.post("/auth/change-password", {
         current_password: currentPassword,
         new_password: newPassword,
       });
@@ -97,38 +97,38 @@ export const useAuthStore = defineStore("auth", {
 
     // ---- 2FA ----
     async enable2FA(method) {
-      const { data } = await api.post("/auth/2fa/enable", { method });
+      const { data } = await client.post("/auth/2fa/enable", { method });
       return data;
     },
     async verify2FA(code) {
-      const { data } = await api.post("/auth/2fa/verify", { code });
+      const { data } = await client.post("/auth/2fa/verify", { code });
       this.user = data;
       return data;
     },
     async disable2FA(code) {
-      const { data } = await api.post("/auth/2fa/disable", { code });
+      const { data } = await client.post("/auth/2fa/disable", { code });
       this.user = data;
       return data;
     },
 
     // ---- Settings ----
     async updateNotifications(preferences) {
-      const { data } = await api.put("/auth/notifications", { preferences });
+      const { data } = await client.put("/auth/notifications", { preferences });
       this.user = data;
       return data;
     },
     async updateAIAgent(config) {
-      const { data } = await api.put("/auth/ai-agent", config);
+      const { data } = await client.put("/auth/ai-agent", config);
       this.user = data;
       return data;
     },
     async updateTelegram(config) {
-      const { data } = await api.put("/auth/telegram", config);
+      const { data } = await client.put("/auth/telegram", config);
       this.user = data;
       return data;
     },
     async testTelegram() {
-      return api.post("/auth/telegram/test");
+      return client.post("/auth/telegram/test");
     },
   },
 });

package/templates/default/src/views/Home.vue

@@ -4,6 +4,7 @@ import { useI18n } from "vue-i18n";
 import { RouterLink } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import GlassCard from "@/components/GlassCard.vue";
+import { isDemoMode, client } from "@/services/dataClient";
 
 const { t } = useI18n();
 const auth = useAuthStore();
@@ -24,6 +25,17 @@ const words = computed(() => [
 
 const chips = computed(() => ["Vue 3", "Laravel", "Tailwind", "Ably", "Brevo", "Pinia", "vue-i18n", "Groq"]);
 
+// Demo mode: the hero stats are derived from the bundled demo data and a
+// live "demo data" section shows the entities the scaffold shipped.
+const demoOverview = ref(null);
+
+// 1 = starter users, 2 = uptime, 3 = services wired, 4 = support
+const stats = computed(() => {
+  if (!isDemoMode || !demoOverview.value) return ["12k+", "99.9%", "10", "24/7"];
+  const s = demoOverview.value.stats;
+  return [String(s.users), "99.9%", String(demoOverview.value.entities.length), "24/7"];
+});
+
 // Typewriter
 const typed = ref("");
 const wordIndex = ref(0);
@@ -51,8 +63,15 @@ function tick() {
     timeout = setTimeout(tick, 30);
   }
 }
-onMounted(() => {
+onMounted(async () => {
   timeout = setTimeout(tick, 700);
+  if (isDemoMode) {
+    try {
+      demoOverview.value = (await client.get("/overview")).data;
+    } catch {
+      // The demo backend is always available — nothing to do on failure.
+    }
+  }
 });
 onUnmounted(() => clearTimeout(timeout));
 </script>
@@ -118,7 +137,7 @@ onUnmounted(() => clearTimeout(timeout));
 
     <!-- Stats strip -->
     <div class="mt-14 grid grid-cols-2 gap-4 sm:grid-cols-4">
-      <div v-for="(s, i) in ['12k+', '99.9%', '10', '24/7']" :key="i" class="animate-fade-in-up motion-reduce:animate-none">
+      <div v-for="(s, i) in stats" :key="i" class="animate-fade-in-up motion-reduce:animate-none">
         <GlassCard class="p-5 text-center glass-card-hover">
           <p class="text-2xl font-extrabold text-gradient">{{ s }}</p>
           <p class="mt-1 text-xs text-gray-500">{{ t(`home.stats.${i + 1}`) }}</p>
@@ -126,6 +145,37 @@ onUnmounted(() => clearTimeout(timeout));
       </div>
     </div>
 
+    <!-- Demo data (only when the app runs in demo mode) -->
+    <div v-if="isDemoMode && demoOverview" class="mt-6 animate-fade-in-up motion-reduce:animate-none">
+      <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h2 class="section-head flex items-center gap-2">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-teal-300">
+              <rect x="3" y="4" width="18" height="16" rx="2" />
+              <path d="M3 9h18M8 4v5M16 4v5" />
+            </svg>
+            {{ t("home.demo.title") }}
+          </h2>
+          <p class="mt-1 text-sm text-gray-400">{{ t("home.demo.subtitle") }}</p>
+        </div>
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-300 ring-1 ring-emerald-400/20">
+          {{ demoOverview.entities.length }} {{ t("home.demo.entities") }}
+        </span>
+      </div>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <GlassCard v-for="e in demoOverview.entities" :key="e.name" hover class="p-5">
+          <div class="flex items-center justify-between gap-3">
+            <span class="rounded-lg border border-white/10 bg-white/[0.04] px-2.5 py-1 font-mono text-xs font-semibold text-teal-200">
+              {{ e.name }}
+            </span>
+            <span class="text-lg font-extrabold text-white">{{ e.count }}</span>
+          </div>
+          <p v-if="e.preview" class="mt-3 truncate text-xs text-gray-500" :title="e.preview">{{ e.preview }}</p>
+          <p v-else class="mt-3 text-xs text-gray-600">—</p>
+        </GlassCard>
+      </div>
+    </div>
+
     <!-- Features -->
     <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:mt-10">
       <GlassCard

package/templates/default/src/views/Login.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter, RouterLink } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import AuthLayout from "@/components/AuthLayout.vue";
 import SocialIcon from "@/components/SocialIcon.vue";
 import { useRipple } from "@/composables/useRipple";
+import { isDemoMode, client } from "@/services/dataClient";
 
 const { t } = useI18n();
 const router = useRouter();
@@ -24,6 +25,19 @@ const socialBusy = ref("");
 
 const { ripples, spawnRipple, removeRipple } = useRipple();
 
+// In demo mode, surface a ready-to-use account (from demoAccounts / demo data)
+// so the login flow can be exercised without a backend.
+const demoHint = ref(null);
+onMounted(async () => {
+  if (!isDemoMode) return;
+  try {
+    const { data } = await client.get("/overview");
+    demoHint.value = data.signInHint || null;
+  } catch {
+    demoHint.value = null;
+  }
+});
+
 const savedIdentifier = localStorage.getItem(REMEMBER_KEY) || "";
 if (savedIdentifier) {
   identifier.value = savedIdentifier;
@@ -114,6 +128,17 @@ async function social(provider) {
       <span class="h-px flex-1 bg-gradient-to-r from-transparent via-white/15 to-transparent"></span>
     </div>
 
+    <!-- Demo-mode account hint -->
+    <div
+      v-if="isDemoMode && demoHint"
+      class="mb-5 rounded-xl border border-emerald-300/25 bg-emerald-500/10 px-4 py-3 text-sm"
+    >
+      <p class="font-medium text-emerald-200">{{ t("auth.demoHint") }}</p>
+      <code class="mt-1 block font-mono text-xs text-emerald-300">
+        {{ demoHint.email }} / {{ demoHint.password }}
+      </code>
+    </div>
+
     <form @submit.prevent="submit" class="flex flex-col gap-4">
       <label class="block">
         <span class="field-label">