@jumentix/cli-init 0.0.0

package/templates/frontend/src/layouts/DefaultLayout.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { CContainer } from '@coreui/vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import AppFooter from '@/components/AppFooter.vue';
+import AppHeader from '@/components/AppHeader.vue';
+import AppSidebar from '@/components/AppSidebar.vue';
+import AppTaskbar from '@/components/AppTaskbar.vue';
+import ModuleLayout from '@/components/ModuleLayout.vue';
+import { expireIfStaleSession } from '@/contracts/sessionGuard';
+import { usePermissions } from '@/contracts/usePermissions';
+import { findModule, firstAllowedTab } from '@/modules/manifest';
+import { useAuthStore } from '@/stores/auth';
+import { useTaskStore } from '@/stores/tasks';
+import { useShellViewport } from '@/shell/breakpoints';
+
+const permissions = usePermissions();
+const router = useRouter();
+const route = useRoute();
+const auth = useAuthStore();
+const tasks = useTaskStore();
+const { viewport } = useShellViewport();
+let expiryTimer: ReturnType<typeof setInterval> | undefined;
+
+const isProfile = computed(() => route.name === 'Profile');
+const moduleId = computed(() => (
+  typeof route.params.moduleId === 'string' ? route.params.moduleId : null
+));
+
+watch(moduleId, (id) => {
+  if (id) tasks.openModule(id);
+}, { immediate: true });
+
+watch(() => tasks.active, (id) => {
+  if (!id || isProfile.value || route.path === '/profile') return;
+  const current = moduleId.value;
+  if (current === id) return;
+  const mod = findModule(id);
+  const tab = mod ? firstAllowedTab(mod, permissions.roles.value) : 'dashboard';
+  if (route.path.startsWith(`/m/${id}`)) return;
+  router.push(`/m/${id}/${tab}`);
+});
+
+onMounted(() => {
+  permissions.ensure();
+  tasks.hydrate();
+  expiryTimer = setInterval(() => {
+    if (expireIfStaleSession(auth)) {
+      router.push('/login');
+    }
+  }, 30000);
+});
+
+onUnmounted(() => {
+  if (expiryTimer) clearInterval(expiryTimer);
+});
+</script>
+
+<template>
+  <div class="shell-root" :data-shell-bp="viewport">
+    <AppSidebar />
+    <div class="wrapper d-flex flex-column min-vh-100">
+      <AppHeader />
+      <div class="body flex-grow-1">
+        <CContainer class="px-4" lg>
+          <router-view />
+          <div v-show="!isProfile" class="module-workspace">
+            <ModuleLayout
+              v-for="id in tasks.open"
+              v-show="id === tasks.active"
+              :key="id"
+              :module-id="id"
+            />
+          </div>
+        </CContainer>
+      </div>
+      <AppFooter />
+      <AppTaskbar />
+    </div>
+  </div>
+</template>

package/templates/frontend/src/main.ts

@@ -0,0 +1,157 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+
+import CoreuiVue from '@coreui/vue';
+import CIcon from '@coreui/icons-vue';
+import {
+  cilMenu,
+  cilSpeedometer,
+  cilSun,
+  cilMoon,
+  cilContrast,
+  cilBell,
+  cilList,
+  cilEnvelopeOpen,
+  cilArrowBottom,
+  cilArrowTop,
+  cilOptions,
+  cilCloudDownload,
+  cilPeople,
+  cilUser,
+  cilUserFemale,
+  cilSettings,
+  cilTask,
+  cilCommentSquare,
+  cilDollar,
+  cilFile,
+  cilShieldAlt,
+  cilLockLocked,
+  cilCalendar,
+  cilPlus,
+  cilPencil,
+  cilTrash,
+  cilCheck,
+  cilX,
+  cilSearch,
+  cilReload,
+  cilViewColumn,
+  cilSave,
+  cilCloudUpload,
+  cilInbox,
+  cilSwapVertical,
+  cilCheckCircle,
+  cilXCircle,
+  cilFeaturedPlaylist,
+  cilFilter,
+  cilSquare,
+  cibFacebook,
+  cibTwitter,
+  cibLinkedin,
+  cibGoogle,
+  cibCcMastercard,
+  cibCcVisa,
+  cibCcStripe,
+  cibCcPaypal,
+  cibCcApplePay,
+  cibCcAmex,
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
+} from '@coreui/icons';
+import router from './router';
+import { installSessionGuard } from '@/contracts/sessionGuard';
+import App from './App.vue';
+import { configureAppOperations } from './contracts/appOperations';
+import { bootCana, exposeCanaTestHooks } from '@/data/db';
+import { registerSW } from '@/data/pwa';
+import { bindOnlineReplay } from '@/data/sync';
+import '@/modules/index';
+import { registerShellToolbarWidgets } from '@/shell/registerShellWidgets';
+
+// Fail loudly at boot when the bundled OAS lacks an operation the shell relies on (JUM-780).
+configureAppOperations();
+registerShellToolbarWidgets();
+
+const pinia = createPinia();
+const app = createApp(App);
+
+app.use(pinia);
+app.use(router);
+app.use(CoreuiVue);
+
+// Only the icons the shell + dashboard actually use — the full set stays in the template catalog.
+app.provide('icons', {
+  cilMenu,
+  cilSpeedometer,
+  cilSun,
+  cilMoon,
+  cilContrast,
+  cilBell,
+  cilList,
+  cilEnvelopeOpen,
+  cilArrowBottom,
+  cilArrowTop,
+  cilOptions,
+  cilCloudDownload,
+  cilPeople,
+  cilUser,
+  cilUserFemale,
+  cilSettings,
+  cilTask,
+  cilCommentSquare,
+  cilDollar,
+  cilFile,
+  cilShieldAlt,
+  cilLockLocked,
+  cilCalendar,
+  cilPlus,
+  cilPencil,
+  cilTrash,
+  cilCheck,
+  cilX,
+  cilSearch,
+  cilReload,
+  cilViewColumn,
+  cilSave,
+  cilCloudUpload,
+  cilInbox,
+  cilSwapVertical,
+  cilCheckCircle,
+  cilXCircle,
+  cilFeaturedPlaylist,
+  cilFilter,
+  cilSquare,
+  cibFacebook,
+  cibTwitter,
+  cibLinkedin,
+  cibGoogle,
+  cibCcMastercard,
+  cibCcVisa,
+  cibCcStripe,
+  cibCcPaypal,
+  cibCcApplePay,
+  cibCcAmex,
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
+});
+app.component('CIcon', CIcon);
+
+// Global session guard: any non-auth 401 from the SDK expires the session and
+// lands on /login from any page (not only /profile).
+installSessionGuard(router);
+
+const boot = await bootCana();
+exposeCanaTestHooks();
+if (boot === 'ok') {
+  bindOnlineReplay();
+  registerSW();
+}
+app.provide('canaBoot', boot);
+app.mount('#app');

package/templates/frontend/src/modules/index.ts

@@ -0,0 +1,7 @@
+import { configureModules, findModule, registerModule } from '@/modules/manifest';
+import { usersModule } from '@/modules/users';
+
+if (!findModule(usersModule.id)) {
+  registerModule(usersModule);
+}
+configureModules();

package/templates/frontend/src/modules/manifest.ts

@@ -0,0 +1,115 @@
+import type { Component } from 'vue';
+
+import type { DashboardWidget } from '@/components/dashboard/types';
+import type { XCrudEntityConfig, XCrudText } from '@/components/x-crud/xCrudTypes';
+import openApi from '@/contracts/openapi.json';
+import { can, requiredScopes } from '@/contracts/rbac';
+
+export interface ModuleEntity {
+  id: string;
+  title: XCrudText;
+  config: XCrudEntityConfig;
+  load: () => Promise<{ default: Component }>;
+}
+
+export interface ModuleDashboard {
+  load: () => Promise<{ default: Component }>;
+  widgets?: DashboardWidget[];
+}
+
+export interface ModuleManifest {
+  id: string;
+  title: XCrudText;
+  icon: string;
+  entities: ModuleEntity[];
+  dashboard?: ModuleDashboard;
+  toolbarWidgets?: string[];
+}
+
+const modules: ModuleManifest[] = [];
+
+type Paths = Record<string, Record<string, { operationId?: string }>>;
+
+export const declaredOperationIds = (
+  spec: { paths?: Paths } = openApi as { paths?: Paths }
+): Set<string> => {
+  const ids = new Set<string>();
+  for (const pathItem of Object.values(spec.paths ?? {})) {
+    for (const operation of Object.values(pathItem)) {
+      if (operation && typeof operation === 'object' && operation.operationId) {
+        ids.add(operation.operationId);
+      }
+    }
+  }
+  return ids;
+};
+
+export const moduleOperationIds = (mod: ModuleManifest): string[] => (
+  mod.entities.flatMap((entity) => Object.values(entity.config.operations))
+);
+
+export const moduleRequiredScopes = (mod: ModuleManifest): string[] => {
+  const scopes = new Set<string>();
+  for (const entity of mod.entities) {
+    requiredScopes(entity.config.operations.list).forEach((scope) => scopes.add(scope));
+  }
+  return [...scopes];
+};
+
+export const canOpenModule = (mod: ModuleManifest, roles: string[] | undefined): boolean => (
+  mod.entities.some((entity) => can(roles, entity.config.operations.list))
+);
+
+export const firstAllowedTab = (mod: ModuleManifest, roles: string[] | undefined): string => {
+  const entity = mod.entities.find((item) => can(roles, item.config.operations.list));
+  if (entity) return entity.id;
+  return 'dashboard';
+};
+
+export const visibleEntityTabs = (
+  mod: ModuleManifest,
+  roles: string[] | undefined
+): ModuleEntity[] => (
+  mod.entities.filter((entity) => can(roles, entity.config.operations.list))
+);
+
+export const validateModules = (
+  list: ModuleManifest[] = modules,
+  declared: Set<string> = declaredOperationIds()
+): string[] => {
+  const missing: string[] = [];
+  for (const mod of list) {
+    for (const id of moduleOperationIds(mod)) {
+      if (!declared.has(id)) missing.push(`${mod.id} → "${id}"`);
+    }
+  }
+  return missing;
+};
+
+export const registerModule = (mod: ModuleManifest): void => {
+  if (modules.some((item) => item.id === mod.id)) {
+    throw new Error(`module "${mod.id}" is already registered`);
+  }
+  modules.push(mod);
+};
+
+export const registeredModules = (): readonly ModuleManifest[] => modules;
+
+export const findModule = (id: string): ModuleManifest | undefined => (
+  modules.find((mod) => mod.id === id)
+);
+
+/** Test hook: drop every registered module. */
+export const resetModules = (): void => {
+  modules.length = 0;
+};
+
+export const configureModules = (): void => {
+  const missing = validateModules();
+  if (missing.length > 0) {
+    throw new Error(
+      `modules: the bundled OAS declares no operation for ${missing.join(', ')}. `
+        + 'Regenerate src/contracts/openapi.json or fix the module manifest.'
+    );
+  }
+};

package/templates/frontend/src/modules/nav.ts

@@ -0,0 +1,13 @@
+import type { NavItem } from '@/modules/navTypes';
+import { canOpenModule, registeredModules } from '@/modules/manifest';
+
+export const navFromModules = (roles: string[] | undefined): NavItem[] => (
+  registeredModules()
+    .filter((mod) => canOpenModule(mod, roles))
+    .map((mod) => ({
+      component: 'CNavItem' as const,
+      name: `module.${mod.id}`,
+      to: `/m/${mod.id}`,
+      icon: mod.icon
+    }))
+);

package/templates/frontend/src/modules/navTypes.ts

@@ -0,0 +1,19 @@
+export type NavComponent = 'CNavItem' | 'CNavGroup' | 'CNavTitle';
+
+export interface NavBadge {
+  color: string;
+  text: string;
+  shape?: string;
+}
+
+export interface NavItem {
+  component: NavComponent;
+  name: string;
+  to?: string;
+  href?: string;
+  external?: boolean;
+  icon?: string;
+  badge?: NavBadge;
+  items?: NavItem[];
+  operationId?: string;
+}

package/templates/frontend/src/modules/users.ts

@@ -0,0 +1,28 @@
+import { usersDomainWidgets } from '@/features/dashboard/usersDomainWidgets';
+import { organizationsCrudConfig } from '@/features/organizations/organizationsCrudConfig';
+import { usersCrudConfig } from '@/features/users/usersCrudConfig';
+import type { ModuleManifest } from '@/modules/manifest';
+
+export const usersModule: ModuleManifest = {
+  id: 'users',
+  title: { en: 'Users', 'pt-BR': 'Usuários' },
+  icon: 'cil-people',
+  entities: [
+    {
+      id: 'users',
+      title: { en: 'Users', 'pt-BR': 'Usuários' },
+      config: usersCrudConfig,
+      load: () => import('@/features/users/UsersView.vue')
+    },
+    {
+      id: 'organizations',
+      title: { en: 'Organizations', 'pt-BR': 'Organizações' },
+      config: organizationsCrudConfig,
+      load: () => import('@/features/organizations/OrganizationsView.vue')
+    }
+  ],
+  dashboard: {
+    load: () => import('@/features/dashboard/DashboardView.vue'),
+    widgets: usersDomainWidgets()
+  }
+};

package/templates/frontend/src/router/guards.ts

@@ -0,0 +1,68 @@
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { expireIfStaleSession } from '@/contracts/sessionGuard';
+import { can } from '@/contracts/rbac';
+import { isCanaOpen } from '@/data/db';
+import { findModule } from '@/modules/manifest';
+import { useAuthStore } from '@/stores/auth';
+import { useProfileStore } from '@/stores/profile';
+
+/** Returns the redirect target for a route, or null when it is allowed. */
+export const requireAuthRedirect = (to: RouteLocationNormalized): string | null => {
+  if (to.meta.public === true) {
+    return null;
+  }
+  const auth = useAuthStore();
+  if (expireIfStaleSession(auth)) {
+    return '/login';
+  }
+  return auth.isAuthenticated() ? null : '/login';
+};
+
+/** Shell stays unreachable until the first full load (or delta) finishes. */
+export const requireSyncRedirect = async (
+  to: RouteLocationNormalized
+): Promise<string | null> => {
+  if (to.meta.public === true) return null;
+  const auth = useAuthStore();
+  if (!auth.isAuthenticated()) return null;
+  if (!isCanaOpen()) return null;
+  const { isSynced } = await import('@/data/sync');
+  const synced = await isSynced();
+  if (to.name === 'Sync') {
+    return synced ? '/dashboard' : null;
+  }
+  return synced ? null : '/sync';
+};
+
+const operationIdFor = (to: RouteLocationNormalized): string | undefined => {
+  const fromMeta = to.meta.operationId as string | undefined;
+  if (fromMeta) return fromMeta;
+  if (to.name !== 'Module') return undefined;
+  const moduleId = typeof to.params.moduleId === 'string' ? to.params.moduleId : '';
+  const tab = typeof to.params.tab === 'string' ? to.params.tab : '';
+  return findModule(moduleId)?.entities.find((item) => item.id === tab)?.config.operations.list;
+};
+
+/**
+ * Scope guard (JUM-772): routes declaring `meta.operationId` require the
+ * operation's OAS security scopes. Roles come from the profile record (loaded
+ * once). The backend enforces the same scopes — this is UX, not security.
+ */
+export const requireScopeRedirect = async (
+  to: RouteLocationNormalized
+): Promise<string | null> => {
+  const operationId = operationIdFor(to);
+  if (!operationId) return null;
+  const profile = useProfileStore();
+  // Always go through load(): concurrent callers share the in-flight request,
+  // so a guard firing while the shell is still loading waits for it (JUM-772).
+  if (!profile.record) {
+    try {
+      await profile.load();
+    } catch {
+      return '/dashboard';
+    }
+  }
+  return can(profile.record?.roles ?? [], operationId) ? null : '/dashboard';
+};

package/templates/frontend/src/router/index.ts

@@ -0,0 +1,91 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import { defineComponent } from 'vue';
+
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import { requireAuthRedirect, requireScopeRedirect, requireSyncRedirect } from '@/router/guards';
+import { organizationsCrudConfig } from '@/features/organizations/organizationsCrudConfig';
+import { usersCrudConfig } from '@/features/users/usersCrudConfig';
+import '@/modules/index';
+
+/** Keep-alive panes live in DefaultLayout; this route only binds URL params. */
+const ModuleOutlet = defineComponent({
+  name: 'ModuleOutlet',
+  setup: () => () => null
+});
+
+const routes = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/features/auth/LoginView.vue'),
+    meta: { public: true }
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: () => import('@/features/auth/RegisterView.vue'),
+    meta: { public: true }
+  },
+  {
+    path: '/sync',
+    name: 'Sync',
+    component: () => import('@/views/SyncProgressView.vue')
+  },
+  {
+    path: '/',
+    name: 'Home',
+    component: DefaultLayout,
+    redirect: '/m/users/dashboard',
+    meta: { titleKey: 'nav.home' },
+    children: [
+      {
+        path: '/m/:moduleId/:tab?',
+        name: 'Module',
+        component: ModuleOutlet,
+        meta: { titleKey: 'nav.home' }
+      },
+      {
+        path: '/profile',
+        name: 'Profile',
+        component: () => import('@/features/profile/ProfileView.vue'),
+        meta: { titleKey: 'nav.profile' }
+      },
+      {
+        path: '/dashboard',
+        redirect: '/m/users/dashboard'
+      },
+      {
+        path: '/users',
+        name: 'UsersRedirect',
+        redirect: '/m/users/users',
+        meta: { operationId: usersCrudConfig.operations.list }
+      },
+      {
+        path: '/organizations',
+        name: 'OrganizationsRedirect',
+        redirect: '/m/users/organizations',
+        meta: { operationId: organizationsCrudConfig.operations.list }
+      }
+    ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('@/features/dashboard/NotFoundView.vue')
+  }
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+  scrollBehavior: () => ({ top: 0 })
+});
+
+router.beforeEach(async (to) => (
+  requireAuthRedirect(to)
+  ?? (await requireSyncRedirect(to))
+  ?? (await requireScopeRedirect(to))
+  ?? true
+));
+
+export default router;

package/templates/frontend/src/shell/LocaleWidget.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/vue';
+
+import { useI18n } from '@/i18n';
+
+const { t, locale, setLocale, locales } = useI18n();
+</script>
+
+<template>
+  <CDropdown variant="nav-item" placement="bottom-end" data-widget="locale" :aria-label="t('app.language')">
+    <CDropdownToggle :caret="false">
+      <CIcon icon="cil-list" size="lg" />
+    </CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem
+        v-for="item in locales"
+        :key="item"
+        :active="locale === item"
+        component="button"
+        type="button"
+        @click="setLocale(item)"
+      >
+        {{ item === 'en' ? 'English' : 'Português (BR)' }}
+      </CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</template>

package/templates/frontend/src/shell/NotificationCenter.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { CBadge, CDropdown, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/vue';
+import { computed } from 'vue';
+
+import { useNotificationStore } from '@/stores/notifications';
+import { useI18n } from '@/i18n';
+
+const { t } = useI18n();
+const notifications = useNotificationStore();
+const label = computed(() => (
+  notifications.unread > 0
+    ? t('notifications.unread', { count: notifications.unread })
+    : t('notifications.title')
+));
+</script>
+
+<template>
+  <CDropdown variant="nav-item" placement="bottom-end">
+    <CDropdownToggle :caret="false" class="py-0 pe-0" :aria-label="label">
+      <span class="position-relative d-inline-flex align-items-center">
+        <CIcon icon="cil-bell" size="lg" />
+        <CBadge
+          v-if="notifications.unread > 0"
+          color="danger"
+          position="top-end"
+          shape="rounded-pill"
+        >
+          {{ notifications.unread }}
+        </CBadge>
+      </span>
+    </CDropdownToggle>
+    <CDropdownMenu class="pt-0" style="min-width: 18rem; max-height: 20rem; overflow: auto">
+      <CDropdownHeader class="bg-body-secondary fw-semibold mb-2">
+        {{ t('notifications.title') }}
+      </CDropdownHeader>
+      <CDropdownItem
+        v-if="notifications.items.length === 0"
+        component="span"
+        class="text-body-secondary"
+      >
+        {{ t('notifications.empty') }}
+      </CDropdownItem>
+      <CDropdownItem
+        v-for="item in notifications.items"
+        :key="item.id"
+        component="button"
+        type="button"
+        :class="{ 'fw-semibold': !item.read }"
+        @click="item.reopen ? notifications.takeReopen(item.id) : notifications.markRead(item.id)"
+      >
+        <div>{{ item.title }}</div>
+        <small class="text-body-secondary">{{ item.message }}</small>
+        <div v-if="item.reopen" class="small text-primary">{{ t('notifications.reopen') }}</div>
+      </CDropdownItem>
+      <CDropdownItem
+        v-if="notifications.items.length > 0"
+        component="button"
+        type="button"
+        @click="notifications.markAllRead()"
+      >
+        {{ t('notifications.markAll') }}
+      </CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</template>