falak-app-duo 1.3.1 → 1.3.3

package/README.md

@@ -15,6 +15,8 @@ integrations on the frontend side: **Ably** (realtime) and **Brevo**
 | Laravel API auth | `X-API-Key` (app) + `Authorization: Bearer <token>` (user) |
 | AES-256 | Kept — encrypts the cached user token in IndexedDB |
 | Arabic/RTL | Kept — baked in via vue-i18n + postcss-rtlcss (opt-out: `--no-rtl` or the RTL prompt) |
+| Admin dashboard | **New** — role-tiered admin UI at `/dashboard` (users, app entities, overview stats, app settings) |
+| Demo mode | Optional — run the whole app in-browser on bundled demo data (`VITE_DATA_MODE=demo`) against an IndexedDB mimic of the Laravel API, no backend needed |
 
 ## Install & run
 
@@ -23,8 +25,9 @@ No install needed — run it straight with `npx`:
 
 ```bash
 npx falak-app-duo my-project          # interactive prompts
-npx falak-app-duo my-project --yes    # all defaults: Ably + Brevo, localhost API, RTL on
+npx falak-app-duo my-project --yes    # all defaults: Ably + Brevo, localhost API, RTL on, no roles/demo
 npx falak-app-duo my-project --no-rtl # default locale becomes English/LTR
+npx falak-app-duo my-project --roles master,super_admin,admin,user --demo-accounts --demo-data products,orders
 ```
 
 Or install the CLI globally once:
@@ -36,6 +39,38 @@ falak-app-duo my-project
 
 The org-scoped equivalent is `npx @ma7moudsalama/falak-app-duo my-project`.
 
+Feature flags:
+
+- `--roles <list>` — enable UserRole support for the given comma-separated
+  roles (`master,super_admin,admin,user`). Any of `--roles`/`--demo-accounts`/
+  `--demo-data` skips the interactive prompts and uses defaults for the rest.
+- `--demo-accounts` — ship one static demo login per selected role (or a plain
+  demo user when roles are off) that works immediately on the scratch app.
+- `--demo-data <list>` — include static demo rows for the given entities
+  (e.g. `products,orders`); the demo backend then serves full CRUD for them.
+
+Roles gate the admin dashboard by tier — `user:0 < admin:1 < super_admin:2 <
+master:3`:
+
+- Overview + entity CRUD tabs: any admin (tier ≥ 1).
+- Users + app-settings tabs (`/dashboard`): master/super_admin (tier ≥ 2).
+- Deleting accounts: master only (tier ≥ 2 can edit roles/status, never their
+  own account or a higher-tier one).
+
+## Demo mode
+
+When demo features are selected (demo accounts and/or demo data), `.env` sets
+`VITE_DATA_MODE=demo`. The app then stops calling your API
+and runs entirely in-browser against `src/services/demoApi.js`, which mimics
+the Laravel backend in an IndexedDB database (`falak_demo_db`): a full sign-up/
+sign-in flow, profile + settings writes, the Home `/overview` stats, generic
+entity CRUD, and the same `/admin/*` routes the dashboard panel calls — all
+behind the same `Authorization: Bearer` + admin-tier checks. Reuses login info
+stored in the DB until the seed fingerprint changes. Drop the same frontend on
+a real backend by setting `VITE_DATA_MODE=live` (the default without demo
+features). Client code talks to the data layer through one import,
+`@/services/dataClient`, so swapping modes is a single env-var flip.
+
 ## Auth model
 
 Every request from `src/services/api.js` carries two headers:
@@ -84,11 +119,17 @@ nothing to scaffold on the client side for it.
 ## Backend routes this frontend expects
 
 ```
-POST /api/auth/login   -> { token, user }
+POST /api/auth/login       -> { token, user }
+POST /api/auth/register    -> { token, user }  (no role sent — backend assigns default)
 POST /api/auth/logout
-GET  /api/auth/me      -> user
+GET  /api/auth/me          -> user
 POST /api/broadcasting/auth   (Ably/Echo channel authorization)
 POST /api/brevo/email  | /api/brevo/sms | /api/brevo/contacts
+GET  /api/admin/overview      (admin tier ≥ 1)
+GET  /api/admin/users         (tier ≥ 2)
+PUT /api/admin/users/:id      (tier ≥ 2; role/status edits, no self/higher-tier)
+DELETE /api/admin/users/:id   (tier ≥ 3, master only)
+GET /api/admin/settings   |  PUT /api/admin/settings  (tier ≥ 2)
 ```
 plus an `X-API-Key` middleware gating all of the above, and Sanctum (or
 similar) validating the bearer token for user-scoped routes.
@@ -97,12 +138,17 @@ similar) validating the bearer token for user-scoped routes.
 
 1. Prints a gradient **Falak Duo** banner.
 2. In interactive mode asks which services to wire up (**Ably** and/or
-   **Brevo**), the Laravel API base URL, and whether to enable **Arabic/RTL**
-   by default. `--yes` takes all defaults; `--no-rtl` skips the RTL choice and
-   defaults to English/LTR.
-3. Copies `templates/default` into `my-project/`, strips the service files you
-   didn't select, and generates a real `.env` from `.env.example` with a fresh
-   random AES-256 key + IV and your chosen API base URL.
+   **Brevo**), the Laravel API base URL, whether to enable **Arabic/RTL**
+   by default, and which optional extras to include (**UserRole** support,
+   **demo accounts**, **demo data** entities). `--yes` takes all defaults
+   (no roles/demo); `--no-rtl` skips the RTL choice and defaults to
+   English/LTR; any feature flag skips the prompts.
+3. Copies `templates/default` into `my-project/`, strips the service files and
+   demo-data modules you didn't select, slices the app to your chosen
+   languages, rewrites the role set, and generates a real `.env` from
+   `.env.example` with a fresh random AES-256 key + IV, your chosen API base
+   URL, and `VITE_DATA_MODE` (`demo` when demo accounts/data are on, else
+   `live`).
 4. Offers to run `npm install` and start the dev server for you (`--yes` runs
    `npm install` automatically).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "falak-app-duo",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "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/src/App.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter, RouterLink, RouterView } from "vue-router";
 import { setLocale, SUPPORTED_LOCALES } from "@/i18n";
 import { useAuthStore } from "@/stores/auth";
 import { getTheme, toggleTheme } from "@/theme";
+import { isAdmin } from "@/utils/access";
 import AppBackdrop from "@/components/AppBackdrop.vue";
 
 const { t, locale } = useI18n();
@@ -18,10 +19,24 @@ const theme = ref(getTheme());
 const authPageNames = ["login", "register", "forgot-password"];
 const isAuthPage = computed(() => authPageNames.includes(route.name));
 
-const links = computed(() => [
-  { to: "/profile", label: t("nav.profile") },
-  { to: "/settings", label: t("nav.settings") },
-]);
+const links = computed(() => {
+  const items = [
+    { to: "/profile", label: t("nav.profile") },
+    { to: "/settings", label: t("nav.settings") },
+  ];
+  if (auth.user && isAdmin(auth.user.role)) {
+    items.unshift({ to: "/dashboard", label: t("nav.dashboard") });
+  }
+  return items;
+});
+
+// A logged-in user may land straight on a protected route (refresh): hydrate
+// the account so the nav shows role-gated links (like Dashboard).
+onMounted(() => {
+  if (auth.userToken && !auth.user) {
+    auth.fetchProfile().catch(() => {});
+  }
+});
 
 async function logout() {
   await auth.logout();

package/templates/default/src/components/dashboard/EntitiesPanel.vue

@@ -0,0 +1,288 @@
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { client } from "@/services/dataClient";
+import GlassCard from "@/components/GlassCard.vue";
+
+const { t } = useI18n();
+
+const entities = ref([]);
+const entity = ref("");
+const rows = ref([]);
+const loading = ref(true);
+const error = ref("");
+const message = ref("");
+const editorOpen = ref(false);
+const editing = ref(null); // null = new row, otherwise the record being edited
+const draft = ref({});
+const draftKeys = ref([]);
+
+watch(entity, async (name) => {
+  if (!name) {
+    rows.value = [];
+    return;
+  }
+  await loadRows(name);
+});
+
+async function loadEntityList() {
+  try {
+    const { data } = await client.get("/admin/overview");
+    entities.value = data.entities || [];
+    // Prefer a non-auxiliary entity; fall back to the first one.
+    entity.value = entities.value.find((e) => e.name !== "users")?.name || entities.value[0]?.name || "";
+  } catch (e) {
+    error.value = t("dashboard.entities.error");
+  }
+}
+
+async function loadRows(name) {
+  loading.value = true;
+  error.value = "";
+  message.value = "";
+  try {
+    const { data } = await client.get(`/${name}`);
+    rows.value = data;
+    if (editing.value || draft.value) resetEditor();
+  } catch (e) {
+    error.value = t("dashboard.entities.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Enumerate editable columns from the first record; exclude `id` (managed by
+// the backend) and long free-text blobs are fine to keep — the editor falls
+// back to a textarea for anything that looks like a description.
+function columnsOf(records) {
+  if (!records?.length) return [];
+  return Object.keys(records[0]).filter((k) => k !== "id");
+}
+
+function openNew() {
+  const cols = columnsOf(rows.value);
+  editing.value = null;
+  draft.value = Object.fromEntries(cols.map((c) => [c, ""]));
+  draftKeys.value = cols;
+  editorOpen.value = true;
+}
+
+function openEdit(record) {
+  editing.value = record;
+  const cols = columnsOf(rows.value);
+  draft.value = { ...record };
+  draftKeys.value = cols;
+  editorOpen.value = true;
+}
+
+function resetEditor() {
+  editing.value = null;
+  draft.value = {};
+  draftKeys.value = [];
+}
+
+async function saveDraft() {
+  error.value = "";
+  message.value = "";
+  try {
+    const url = `/${entity.value}${editing.value ? `/${editing.value.id}` : ""}`;
+    const res = editing.value ? await client.put(url, draft.value) : await client.post(url, draft.value);
+    message.value = editing.value ? t("dashboard.entities.saved") : t("dashboard.entities.created");
+    editorOpen.value = false;
+    resetEditor();
+    await loadRows(entity.value);
+  } catch (e) {
+    error.value = e?.response?.data?.message || t("dashboard.entities.error");
+  }
+}
+
+async function removeEntity(row) {
+  error.value = "";
+  message.value = "";
+  try {
+    await client.delete(`/${entity.value}/${row.id}`);
+    rows.value = rows.value.filter((r) => r.id !== row.id);
+    message.value = t("dashboard.entities.deleted");
+  } catch (e) {
+    error.value = e?.response?.data?.message || t("dashboard.entities.error");
+  }
+}
+
+function displayValue(record, key) {
+  const v = record[key];
+  if (v === null || v === undefined) return "—";
+  if (typeof v === "object") return JSON.stringify(v);
+  return String(v);
+}
+
+onMounted(loadEntityList);
+</script>
+
+<template>
+  <div>
+    <p v-if="message" class="mb-4 rounded-xl border border-emerald-400/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-300">
+      {{ message }}
+    </p>
+    <p v-if="error" class="mb-4 rounded-xl border border-rose-400/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-300">
+      {{ error }}
+    </p>
+
+    <GlassCard class="p-5">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <h2 class="text-base font-bold text-ink">{{ t("dashboard.entities.title") }}</h2>
+        <div class="flex items-center gap-2">
+          <select
+            v-model="entity"
+            class="rounded-xl border border-edge2 bg-glass px-3.5 py-2 text-sm font-medium text-ink outline-none transition focus:ring-1 focus:ring-emerald-300/40"
+          >
+            <option v-for="e in entities" :key="e.name" :value="e.name">{{ e.name }}</option>
+          </select>
+          <button
+            type="button"
+            class="btn-primary !px-4 !py-2"
+            :disabled="!entity"
+            @click="openNew"
+          >
+            {{ t("dashboard.entities.add") }}
+          </button>
+        </div>
+      </div>
+
+      <p class="mt-1.5 text-xs text-mute">{{ t("dashboard.entities.subtitle") }}</p>
+
+      <div class="mt-4 overflow-x-auto">
+        <table class="w-full min-w-[560px] border-collapse text-left text-sm rtl:text-right">
+          <thead>
+            <tr class="border-b border-edge text-xs uppercase tracking-wide text-mute">
+              <th class="pb-2 pe-3 font-semibold">#</th>
+              <th v-for="key in columnsOf(rows)" :key="key" class="pb-2 pe-3 font-semibold">{{ key }}</th>
+              <th class="pb-2 font-semibold">{{ t("dashboard.entities.actions") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="loading">
+              <td :colspan="columnsOf(rows).length + 2" class="py-8 text-center text-mute">{{ t("common.loading") }}</td>
+            </tr>
+            <tr v-else-if="rows.length === 0">
+              <td :colspan="columnsOf(rows).length + 2" class="py-8 text-center text-mute">{{ t("dashboard.entities.empty") }}</td>
+            </tr>
+            <tr v-for="(row, i) in rows" :key="row.id" class="border-b border-edge/60 last:border-0">
+              <td class="py-3 pe-3 font-mono text-xs text-mute">{{ i + 1 }}</td>
+              <td v-for="key in columnsOf(rows)" :key="key" class="max-w-[200px] truncate py-3 pe-3 text-mute" :title="displayValue(row, key)">
+                {{ displayValue(row, key) }}
+              </td>
+              <td class="py-3">
+                <div class="flex items-center gap-2">
+                  <button
+                    type="button"
+                    class="rounded-lg px-3 py-1.5 text-xs font-semibold text-cyan-300 ring-1 ring-cyan-400/30 transition hover:bg-cyan-500/10"
+                    @click="openEdit(row)"
+                  >
+                    {{ t("dashboard.entities.edit") }}
+                  </button>
+                  <button
+                    type="button"
+                    class="rounded-lg px-3 py-1.5 text-xs font-semibold text-rose-300 ring-1 ring-rose-400/30 transition hover:bg-rose-500/10"
+                    @click="removeEntity(row)"
+                  >
+                    {{ t("dashboard.entities.delete") }}
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </GlassCard>
+
+    <!-- Row editor modal -->
+    <Teleport to="body">
+      <Transition name="sd" appear>
+        <div v-if="editorOpen" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center sm:p-6">
+          <div class="sd-backdrop absolute inset-0 bg-[#05070d]/80 backdrop-blur-md" @click="editorOpen = false"></div>
+
+          <div class="sd-panel relative z-10 flex max-h-[92vh] w-full max-w-xl flex-col overflow-hidden rounded-t-3xl border border-edge bg-page/95 shadow-2xl shadow-black/60 backdrop-blur-2xl sm:rounded-3xl">
+            <div class="flex items-start justify-between gap-4 border-b border-edge px-5 py-4 sm:px-6">
+              <div>
+                <h2 class="text-lg font-bold text-ink">
+                  {{ editing ? t("dashboard.entities.edit") : t("dashboard.entities.add") }}
+                  <span class="font-mono text-sm text-teal-300">/{{ entity }}/{{ editing ? editing.id : "new" }}</span>
+                </h2>
+              </div>
+              <button
+                type="button"
+                class="grid h-9 w-9 shrink-0 place-items-center rounded-xl border border-edge bg-glass text-mute transition hover:bg-glass3 hover:text-ink"
+                :aria-label="t('common.cancel')"
+                @click="editorOpen = false"
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
+                  <path d="M18 6 6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="overflow-y-auto overscroll-contain px-5 py-5 sm:px-6 sm:py-6">
+              <div v-if="draftKeys.length === 0" class="text-sm text-mute">{{ t("dashboard.entities.empty") }}</div>
+              <div v-else class="space-y-4">
+                <label v-for="key in draftKeys" :key="key" class="block">
+                  <span class="mb-1 block font-mono text-xs font-semibold uppercase tracking-wide text-mute">{{ key }}</span>
+                  <textarea
+                    v-if="String(draft[key]).length > 60 || typeof draft[key] === 'object'"
+                    v-model="draft[key]"
+                    rows="2"
+                    class="w-full rounded-xl border border-edge2 bg-glass px-3.5 py-2 text-sm text-ink outline-none transition placeholder:text-mute focus:ring-1 focus:ring-emerald-300/40"
+                  ></textarea>
+                  <input
+                    v-else
+                    v-model="draft[key]"
+                    type="text"
+                    class="w-full rounded-xl border border-edge2 bg-glass px-3.5 py-2 text-sm text-ink outline-none transition placeholder:text-mute focus:ring-1 focus:ring-emerald-300/40"
+                  />
+                </label>
+
+                <div class="flex justify-end gap-2 pt-2">
+                  <button type="button" class="btn-ghost" @click="editorOpen = false">{{ t("common.cancel") }}</button>
+                  <button type="button" class="btn-primary" @click="saveDraft">{{ t("common.save") }}</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.sd-enter-active,
+.sd-leave-active {
+  transition: opacity 0.25s ease;
+}
+.sd-enter-from,
+.sd-leave-to {
+  opacity: 0;
+}
+.sd-backdrop {
+  transition: opacity 0.25s ease;
+}
+.sd-enter-from .sd-backdrop,
+.sd-leave-to .sd-backdrop {
+  opacity: 0;
+}
+.sd-panel {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.sd-enter-from .sd-panel,
+.sd-leave-to .sd-panel {
+  opacity: 0;
+  transform: translateY(24px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sd-enter-active,
+  .sd-leave-active,
+  .sd-backdrop,
+  .sd-panel {
+    transition: none;
+  }
+}
+</style>

package/templates/default/src/components/dashboard/OverviewPanel.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useAuthStore } from "@/stores/auth";
+import { useAdminStore } from "@/stores/admin";
+import GlassCard from "@/components/GlassCard.vue";
+import { ROLES } from "@/data/roles";
+
+const { t } = useI18n();
+const auth = useAuthStore();
+const admin = useAdminStore();
+
+const overview = ref(null);
+const loading = ref(true);
+const error = ref("");
+
+const stats = computed(() => [
+  { label: t("dashboard.overview.stats.users"), value: overview.value?.stats?.users ?? "—" },
+  { label: t("dashboard.overview.stats.orders"), value: overview.value?.stats?.orders ?? "—" },
+  { label: t("dashboard.overview.stats.products"), value: overview.value?.stats?.products ?? "—" },
+  { label: t("dashboard.overview.stats.revenue"), value: fmtMoney(overview.value?.stats?.revenue) },
+]);
+
+// The role legend mirrors src/data/roles.js so labels always match the bundle.
+const roleBreakers = computed(() => {
+  const counts = overview.value?.roles || {};
+  return ROLES.map((role) => ({
+    ...role,
+    count: counts[role.key] || 0,
+  })).filter((role) => counts[role.key] != null || role.count > 0);
+});
+
+const recentUsers = computed(() => overview.value?.recentUsers || []);
+const entities = computed(() => overview.value?.entities || []);
+const settings = computed(() => overview.value?.settings || {});
+const settingsBadge = computed(() => {
+  if (settings.value.maintenance_mode) return t("dashboard.overview.maintenance");
+  if (settings.value.registration_open) return t("dashboard.overview.open");
+  return t("dashboard.overview.closed");
+});
+const settingsBadgeTint = computed(() =>
+  settings.value.maintenance_mode
+    ? "bg-amber-500/15 text-amber-300 ring-amber-400/20"
+    : settings.value.registration_open
+      ? "bg-emerald-500/15 text-emerald-300 ring-emerald-400/20"
+      : "bg-rose-500/15 text-rose-300 ring-rose-400/20"
+);
+
+function fmtMoney(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return "—";
+  return new Intl.NumberFormat(undefined, { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(n);
+}
+
+onMounted(async () => {
+  loading.value = true;
+  error.value = "";
+  try {
+    overview.value = await admin.overview();
+  } catch (e) {
+    error.value = t("dashboard.error");
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <p v-if="error" class="rounded-xl border border-rose-400/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-300">
+      {{ error }}
+    </p>
+
+    <div v-if="loading" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <GlassCard v-for="i in 4" :key="i" class="h-24 p-5">
+        <div class="h-3 w-1/2 animate-pulse rounded bg-glass3"></div>
+        <div class="mt-4 h-8 w-3/4 animate-pulse rounded bg-glass3"></div>
+      </GlassCard>
+    </div>
+
+    <template v-else-if="overview">
+      <!-- KPI cards -->
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <GlassCard v-for="s in stats" :key="s.label" hover class="p-5">
+          <p class="text-xs font-medium uppercase tracking-wide text-mute">{{ s.label }}</p>
+          <p class="mt-2 text-2xl font-extrabold text-gradient">{{ s.value }}</p>
+        </GlassCard>
+      </div>
+
+      <div class="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <!-- Roles -->
+        <GlassCard class="p-5">
+          <h2 class="flex items-center gap-2 text-sm font-bold text-ink">
+            <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">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+            </svg>
+            {{ t("dashboard.overview.roles") }}
+          </h2>
+          <div class="mt-4 space-y-3">
+            <div v-for="role in roleBreakers" :key="role.key" class="flex items-center justify-between gap-3">
+              <span class="inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold ring-1" :class="role.badge">
+                {{ t(role.label) }}
+              </span>
+              <span class="text-sm font-bold text-ink">{{ role.count }}</span>
+            </div>
+          </div>
+        </GlassCard>
+
+        <!-- Recent users -->
+        <GlassCard class="p-5">
+          <h2 class="flex items-center gap-2 text-sm font-bold text-ink">
+            <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-sky-300">
+              <circle cx="12" cy="8" r="4" />
+              <path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" />
+            </svg>
+            {{ t("dashboard.overview.recentUsers") }}
+          </h2>
+          <ul class="mt-4 space-y-2.5">
+            <li v-for="u in recentUsers" :key="u.id" class="flex items-center justify-between gap-3">
+              <div class="flex min-w-0 items-center gap-3">
+                <span
+                  class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-gradient-to-br from-emerald-400/20 to-teal-500/20 text-xs font-bold text-emerald-200 ring-1 ring-edge"
+                >
+                  {{ (u.name || u.email || "?").charAt(0).toUpperCase() }}
+                </span>
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-medium text-ink">{{ u.name || "—" }}</p>
+                  <p class="truncate text-xs text-mute">{{ u.email }}</p>
+                </div>
+              </div>
+              <span
+                v-if="u.role"
+                class="shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1"
+                :class="ROLES.find((r) => r.key === u.role)?.badge || 'bg-glass text-mute ring-edge2'"
+              >
+                {{ t(`roles.${u.role}.title`) }}
+              </span>
+            </li>
+          </ul>
+        </GlassCard>
+      </div>
+
+      <div class="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <!-- Entities -->
+        <GlassCard class="p-5">
+          <h2 class="flex items-center gap-2 text-sm font-bold text-ink">
+            <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-cyan-300">
+              <rect x="3" y="4" width="18" height="16" rx="2" />
+              <path d="M3 9h18M8 4v5M16 4v5" />
+            </svg>
+            {{ t("dashboard.overview.entities") }}
+          </h2>
+          <ul class="mt-4 space-y-2.5">
+            <li v-for="e in entities" :key="e.name" class="flex items-center justify-between gap-3">
+              <span class="rounded-lg border border-edge bg-glass px-2.5 py-1 font-mono text-xs font-semibold text-teal-200">
+                {{ e.name }}
+              </span>
+              <span class="text-sm font-bold text-ink">{{ e.count }}</span>
+            </li>
+          </ul>
+        </GlassCard>
+
+        <!-- App settings summary -->
+        <GlassCard class="p-5">
+          <h2 class="flex items-center gap-2 text-sm font-bold text-ink">
+            <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-amber-300">
+              <circle cx="12" cy="12" r="3" />
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" />
+            </svg>
+            {{ t("dashboard.overview.settings") }}
+          </h2>
+          <div class="mt-4 flex flex-wrap items-center gap-3">
+            <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ring-1" :class="settingsBadgeTint">
+              {{ settingsBadge }}
+            </span>
+            <span v-if="settings.app_name" class="rounded-lg border border-edge bg-glass px-2.5 py-1 font-mono text-xs font-semibold text-mute">
+              {{ settings.app_name }}
+            </span>
+          </div>
+        </GlassCard>
+      </div>
+    </template>
+  </div>
+</template>