@jumentix/cli-init 0.0.0

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { drainOutbox } from '@/data/outbox';
+import { useI18n } from '@/i18n';
+
+const { t } = useI18n();
+const online = ref(typeof navigator === 'undefined' ? true : navigator.onLine);
+
+const refresh = (): void => {
+  online.value = navigator.onLine;
+  if (online.value) {
+    drainOutbox().catch(() => undefined);
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('online', refresh);
+  window.addEventListener('offline', refresh);
+});
+onUnmounted(() => {
+  window.removeEventListener('online', refresh);
+  window.removeEventListener('offline', refresh);
+});
+</script>
+
+<template>
+  <span
+    class="d-inline-flex align-items-center gap-1 px-2"
+    :aria-label="online ? t('network.online') : t('network.offline')"
+    :data-online="online ? 'true' : 'false'"
+  >
+    <CIcon :icon="online ? 'cil-check-circle' : 'cil-x-circle'" size="sm" />
+    <span class="d-none d-md-inline">{{ online ? t('network.online') : t('network.offline') }}</span>
+  </span>
+</template>

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

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+defineProps<{ slotId: string }>();
+</script>
+
+<template>
+  <span class="d-none" :data-toolbar-reserved="slotId" aria-hidden="true" />
+</template>

package/templates/frontend/src/shell/breakpoints.ts

@@ -0,0 +1,50 @@
+import {
+  computed, onMounted, onUnmounted, ref
+} from 'vue';
+
+/** CoreUI/Bootstrap breakpoints used by the multitask shell (JUM-799). */
+export const SHELL_BREAKPOINTS = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400
+} as const;
+
+export type ShellViewport = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+export const viewportForWidth = (width: number): ShellViewport => {
+  if (width >= SHELL_BREAKPOINTS.xxl) return 'xxl';
+  if (width >= SHELL_BREAKPOINTS.xl) return 'xl';
+  if (width >= SHELL_BREAKPOINTS.lg) return 'lg';
+  if (width >= SHELL_BREAKPOINTS.md) return 'md';
+  if (width >= SHELL_BREAKPOINTS.sm) return 'sm';
+  return 'xs';
+};
+
+export const useShellViewport = () => {
+  const width = ref(typeof window === 'undefined' ? SHELL_BREAKPOINTS.lg : window.innerWidth);
+  const onResize = () => {
+    width.value = window.innerWidth;
+  };
+  onMounted(() => {
+    width.value = window.innerWidth;
+    window.addEventListener('resize', onResize);
+  });
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
+  const viewport = computed(() => viewportForWidth(width.value));
+  return {
+    width,
+    viewport,
+    isPhone: computed(() => width.value < SHELL_BREAKPOINTS.md),
+    isTablet: computed(() => (
+      width.value >= SHELL_BREAKPOINTS.md && width.value < SHELL_BREAKPOINTS.lg
+    )),
+    isDesktop: computed(() => width.value >= SHELL_BREAKPOINTS.lg),
+    compactTaskbar: computed(() => width.value < SHELL_BREAKPOINTS.md),
+    bottomSheetSwitcher: computed(() => width.value < SHELL_BREAKPOINTS.sm),
+    widgetsOverflow: computed(() => width.value < SHELL_BREAKPOINTS.md)
+  };
+};

package/templates/frontend/src/shell/registerShellWidgets.ts

@@ -0,0 +1,39 @@
+import AppHeaderDropdownAccnt from '@/components/AppHeaderDropdownAccnt.vue';
+import NetworkActivity from '@/components/NetworkActivity.vue';
+import LocaleWidget from '@/shell/LocaleWidget.vue';
+import NotificationCenter from '@/shell/NotificationCenter.vue';
+import OnlineOfflineWidget from '@/shell/OnlineOfflineWidget.vue';
+import { registerToolbarWidget } from '@/shell/toolbarWidgets';
+
+export const registerShellToolbarWidgets = (): void => {
+  registerToolbarWidget({
+    id: 'notifications',
+    component: NotificationCenter,
+    placement: 'right',
+    order: 10
+  });
+  registerToolbarWidget({
+    id: 'online-offline',
+    component: OnlineOfflineWidget,
+    placement: 'right',
+    order: 15
+  });
+  registerToolbarWidget({
+    id: 'locale',
+    component: LocaleWidget,
+    placement: 'right',
+    order: 18
+  });
+  registerToolbarWidget({
+    id: 'network',
+    component: NetworkActivity,
+    placement: 'right',
+    order: 20
+  });
+  registerToolbarWidget({
+    id: 'account',
+    component: AppHeaderDropdownAccnt,
+    placement: 'right',
+    order: 30
+  });
+};

package/templates/frontend/src/shell/toolbarWidgets.ts

@@ -0,0 +1,57 @@
+import type { Component } from 'vue';
+
+import { effectiveScopes } from '@/contracts/rbac';
+
+export type ToolbarPlacement = 'left' | 'right';
+
+export interface ToolbarWidget {
+  id: string;
+  component: Component;
+  placement: ToolbarPlacement;
+  order: number;
+  requiredScopes?: string[];
+  /** When set, the widget renders only while this module task is active. */
+  moduleId?: string;
+  props?: Record<string, unknown>;
+}
+
+const widgets: ToolbarWidget[] = [];
+
+export const registerToolbarWidget = (widget: ToolbarWidget): void => {
+  const index = widgets.findIndex((item) => item.id === widget.id);
+  if (index >= 0) {
+    widgets[index] = widget;
+    return;
+  }
+  widgets.push(widget);
+};
+
+export const unregisterToolbarWidget = (id: string): void => {
+  const index = widgets.findIndex((item) => item.id === id);
+  if (index >= 0) widgets.splice(index, 1);
+};
+
+export const resetToolbarWidgets = (): void => {
+  widgets.splice(0, widgets.length);
+};
+
+export const toolbarWidgets = (): readonly ToolbarWidget[] => widgets;
+
+export const listToolbarWidgets = (
+  roles: string[] | undefined,
+  activeModuleId: string | null,
+  placement: ToolbarPlacement
+): ToolbarWidget[] => {
+  const granted = effectiveScopes(roles ?? []);
+  const star = granted.includes('*');
+  return widgets
+    .filter((widget) => widget.placement === placement)
+    .filter((widget) => !widget.moduleId || widget.moduleId === activeModuleId)
+    .filter((widget) => {
+      if (!widget.requiredScopes || widget.requiredScopes.length === 0) return true;
+      if (star) return true;
+      return widget.requiredScopes.every((scope) => granted.includes(scope));
+    })
+    .slice()
+    .sort((left, right) => left.order - right.order);
+};

package/templates/frontend/src/stores/auth.ts

@@ -0,0 +1,157 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+import { getSharedApiClient } from '@/contracts/apiClient';
+import { appOperations } from '@/contracts/appOperations';
+
+const STORAGE_KEY = 'jumentix-frontend-auth';
+
+interface AuthorizationHeader {
+  Authorization: string;
+}
+
+interface PersistedAuth {
+  token: string;
+  username: string;
+  userId: string;
+}
+
+/**
+ * The login response carries only the Authorization header, but the JWT
+ * payload holds the user id and username. Decoded client-side as an identity
+ * claim — never verified, never trusted for authorization.
+ */
+const decodeJwtPayload = (token: string): { id?: string; username?: string; exp?: number } => {
+  const payload = token.split('.')[1];
+  if (!payload) {
+    return {};
+  }
+  try {
+    return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/'))) as {
+      id?: string;
+      username?: string;
+      exp?: number;
+    };
+  } catch {
+    return {};
+  }
+};
+
+export const decodeJwtUserId = (token: string): string => decodeJwtPayload(token).id ?? '';
+
+/**
+ * Sessions persisted before JUM-761 carry no userId. Recover it from the
+ * stored JWT when possible; a session whose user id cannot be recovered is
+ * invalid, so it is dropped — and the route guard then redirects to /login
+ * instead of letting a stale session reach protected pages.
+ */
+const readPersisted = (): PersistedAuth | null => {
+  if (typeof localStorage === 'undefined') {
+    return null;
+  }
+  const raw = localStorage.getItem(STORAGE_KEY);
+  if (!raw) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(raw) as Partial<PersistedAuth>;
+    if (!parsed.token || !parsed.username) {
+      return null;
+    }
+    const userId = parsed.userId || decodeJwtUserId(parsed.token);
+    if (!userId) {
+      localStorage.removeItem(STORAGE_KEY);
+      return null;
+    }
+    return { token: parsed.token, username: parsed.username, userId };
+  } catch {
+    return null;
+  }
+};
+
+const persist = (value: PersistedAuth | null) => {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+  if (value) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+  } else {
+    localStorage.removeItem(STORAGE_KEY);
+  }
+};
+
+export const useAuthStore = defineStore('auth', () => {
+  const persisted = readPersisted();
+  const token = ref<string>(persisted?.token ?? '');
+  const username = ref<string>(persisted?.username ?? '');
+  const userId = ref<string>(persisted?.userId ?? '');
+
+  const isAuthenticated = () => token.value.length > 0;
+
+  /**
+   * JWT exp check (JUM-773 follow-up): a session past its exp claim is already
+   * dead even before the server rejects it. exp is in seconds (epoch).
+   */
+  const isSessionExpired = (): boolean => {
+    if (!token.value) return false;
+    const { exp } = decodeJwtPayload(token.value.replace(/^Bearer\s+/i, ''));
+    if (!exp) return false;
+    return Date.now() >= exp * 1000;
+  };
+
+  /**
+   * POST /auth/register. The body is the OAS RequestRegister collected by the
+   * schema-driven form — field names come from the spec, not from this file
+   * (JUM-766).
+   */
+  const register = async (body: Record<string, unknown>): Promise<void> => {
+    await getSharedApiClient().request({ operationId: appOperations().auth.register, body });
+  };
+
+  /**
+   * POST /auth/login. Response: { Authorization: 'Bearer …' } — session
+   * identity (id + username) is read from the JWT payload.
+   */
+  const login = async (body: Record<string, unknown>): Promise<void> => {
+    const response = await getSharedApiClient().request<AuthorizationHeader>({
+      operationId: appOperations().auth.login,
+      body
+    });
+
+    const claims = decodeJwtPayload(response.Authorization);
+    token.value = response.Authorization;
+    username.value = claims.username ?? String(body.username ?? '');
+    userId.value = claims.id ?? '';
+    persist({ token: token.value, username: username.value, userId: userId.value });
+  };
+
+  /** POST /auth/logout — bearer-secured; OAS RequestLogout: username. */
+  const logout = async (): Promise<void> => {
+    if (token.value) {
+      await getSharedApiClient().request({
+        operationId: appOperations().auth.logout,
+        body: { username: username.value },
+        headers: { Authorization: token.value }
+      });
+    }
+    token.value = '';
+    username.value = '';
+    userId.value = '';
+    persist(null);
+  };
+
+  /**
+   * Local-only session clear: the backend already rejected this session (401)
+   * or the persisted shape is invalid, so there is nothing to log out from.
+   */
+  const expire = (): void => {
+    token.value = '';
+    username.value = '';
+    userId.value = '';
+    persist(null);
+  };
+
+  return {
+    token, username, userId, isAuthenticated, isSessionExpired, register, login, logout, expire
+  };
+});

package/templates/frontend/src/stores/entityStore.ts

@@ -0,0 +1,109 @@
+import { defineStore } from 'pinia';
+
+import { getSharedApiClient } from '@/contracts/apiClient';
+import {
+  asListPage, listCapabilities, toQueryParams, type ListPage, type ListQuery
+} from '@/contracts/listSchema';
+import { isCanaOpen } from '@/data/db';
+import { listLocal } from '@/data/localRepository';
+import { drainOutbox, enqueueMutation } from '@/data/outbox';
+import { useAuthStore } from '@/stores/auth';
+
+import type { XCrudEntityConfig } from '@/components/x-crud/xCrudTypes';
+
+/**
+ * Generic entity store factory (JUM-772 / JUM-804): OAS operationIds for the
+ * server path; Cana + outbox when the local client is open.
+ */
+export const createEntityStore = (config: XCrudEntityConfig) => defineStore(`xcrud-${config.entity}`, () => {
+  const capabilities = listCapabilities(config.operations.list);
+
+  const headers = () => {
+    const auth = useAuthStore();
+    if (!auth.token) {
+      throw new Error('No authenticated session.');
+    }
+    return { Authorization: auth.token };
+  };
+
+  const list = async <T = Record<string, unknown>>(query: ListQuery = {}): Promise<ListPage<T>> => {
+    const page = query.page ?? 1;
+    const size = query.size ?? capabilities?.defaultSize ?? 30;
+    if (isCanaOpen()) {
+      return listLocal<T & Record<string, unknown>>(config.entity, {
+        ...query,
+        page,
+        size,
+        searchFields: capabilities?.searchable ?? config.searchFields
+      });
+    }
+    const response = await getSharedApiClient().request<unknown>({
+      operationId: config.operations.list,
+      query: capabilities ? toQueryParams({ ...query, page, size }) : undefined,
+      headers: headers()
+    });
+    return asListPage<T>(response, { page, size });
+  };
+
+  const create = async <T = Record<string, unknown>>(body: Record<string, unknown>): Promise<T> => {
+    if (isCanaOpen()) {
+      const record = await enqueueMutation({
+        entity: config.entity,
+        kind: 'create',
+        payload: body,
+        operations: config.operations
+      }) as T;
+      drainOutbox().catch(() => undefined);
+      return record;
+    }
+    return getSharedApiClient().request<T>({
+      operationId: config.operations.create, body, headers: headers()
+    });
+  };
+
+  const update = async <T = Record<string, unknown>>(
+    id: string,
+    body: Record<string, unknown>
+  ): Promise<T> => {
+    if (isCanaOpen()) {
+      const record = await enqueueMutation({
+        entity: config.entity,
+        kind: 'update',
+        key: id,
+        payload: body,
+        operations: config.operations
+      }) as T;
+      drainOutbox().catch(() => undefined);
+      return record;
+    }
+    return getSharedApiClient().request<T>({
+      operationId: config.operations.update,
+      pathParams: { id },
+      body: { ...body, id },
+      headers: headers()
+    });
+  };
+
+  const remove = async (id: string): Promise<void> => {
+    if (isCanaOpen()) {
+      await enqueueMutation({
+        entity: config.entity,
+        kind: 'delete',
+        key: id,
+        payload: { id },
+        operations: config.operations
+      });
+      drainOutbox().catch(() => undefined);
+      return;
+    }
+    await getSharedApiClient().request({
+      operationId: config.operations.delete,
+      pathParams: { id },
+      headers: headers()
+    });
+  };
+
+  return {
+    capabilities, list, create, update, remove
+  };
+});

package/templates/frontend/src/stores/network.ts

@@ -0,0 +1,61 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import type { RestApiRequestEvent } from '@jumentix/sdk-rest-client';
+
+import { getSharedApiClient } from '@/contracts/apiClient';
+
+export interface NetworkRequestRecord {
+  operationId: string;
+  method: string;
+  url: string;
+  status?: number;
+  durationMs?: number;
+  ok: boolean;
+}
+
+const MAX_RECENT = 10;
+
+/**
+ * Feeds the NetworkActivity widget from the SDK's request lifecycle events
+ * (JUM-765): the SDK is the intermediary of every UI↔server call, so this
+ * store simply aggregates what it emits.
+ */
+export const useNetworkStore = defineStore('network', () => {
+  const inFlight = ref(0);
+  const recent = ref<NetworkRequestRecord[]>([]);
+  let unsubscribe: (() => void) | undefined;
+
+  const onEvent = (event: RestApiRequestEvent) => {
+    if (event.type === 'request:start') {
+      inFlight.value += 1;
+      return;
+    }
+    inFlight.value = Math.max(0, inFlight.value - 1);
+    recent.value = [
+      {
+        operationId: event.operationId,
+        method: event.method.toUpperCase(),
+        url: event.url,
+        status: event.status,
+        durationMs: event.durationMs,
+        ok: event.type === 'request:success'
+      },
+      ...recent.value
+    ].slice(0, MAX_RECENT);
+  };
+
+  const start = (): void => {
+    if (!unsubscribe) {
+      unsubscribe = getSharedApiClient().subscribe(onEvent);
+    }
+  };
+
+  const stop = (): void => {
+    unsubscribe?.();
+    unsubscribe = undefined;
+  };
+
+  return {
+    inFlight, recent, start, stop
+  };
+});

package/templates/frontend/src/stores/notifications.ts

@@ -0,0 +1,75 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export interface AppNotification {
+  id: string;
+  createdAt: string;
+  kind: 'reject' | 'info' | 'update';
+  title: string;
+  message: string;
+  entity?: string;
+  key?: string;
+  reopen?: Record<string, unknown>;
+  read: boolean;
+}
+
+export const useNotificationStore = defineStore('notifications', () => {
+  const items = ref<AppNotification[]>([]);
+  const reopenTarget = ref<AppNotification | null>(null);
+
+  const unread = computed(() => items.value.filter((item) => !item.read).length);
+
+  const push = (input: Omit<AppNotification, 'id' | 'createdAt' | 'read'>): AppNotification => {
+    const notification: AppNotification = {
+      ...input,
+      id: typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : `n-${Date.now()}`,
+      createdAt: new Date().toISOString(),
+      read: false
+    };
+    items.value = [notification, ...items.value].slice(0, 50);
+    return notification;
+  };
+
+  const reject = (input: {
+    entity: string;
+    key: string;
+    kind: string;
+    message: string;
+    reopen?: Record<string, unknown>;
+  }): AppNotification => push({
+    kind: 'reject',
+    title: input.entity,
+    message: input.message,
+    entity: input.entity,
+    key: input.key,
+    reopen: input.reopen
+  });
+
+  const markRead = (id: string): void => {
+    items.value = items.value.map((item) => (
+      item.id === id ? { ...item, read: true } : item
+    ));
+  };
+
+  const markAllRead = (): void => {
+    items.value = items.value.map((item) => ({ ...item, read: true }));
+  };
+
+  const takeReopen = (id: string): Record<string, unknown> | undefined => {
+    const found = items.value.find((item) => item.id === id);
+    if (!found?.reopen) return undefined;
+    reopenTarget.value = found;
+    markRead(id);
+    return found.reopen;
+  };
+
+  const clearReopen = (): void => {
+    reopenTarget.value = null;
+  };
+
+  return {
+    items, unread, reopenTarget, push, reject, markRead, markAllRead, takeReopen, clearReopen
+  };
+});