@jumentix/cli-init 0.0.0

package/templates/frontend/src/components/dashboard/AdminUserRatioWidget.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { CSpinner } from '@coreui/vue';
+
+import { can } from '@/contracts/rbac';
+import { formatApiError } from '@/contracts/errors';
+import { usePermissions } from '@/contracts/usePermissions';
+import { useI18n } from '@/i18n';
+import { useProfileStore } from '@/stores/profile';
+
+import { loadMetrics } from './loadMetrics';
+import type { DashboardWidget } from './types';
+
+const props = defineProps<{ widget: DashboardWidget }>();
+const { t } = useI18n();
+const profile = useProfileStore();
+const permissions = usePermissions();
+
+const loading = ref(true);
+const allowed = ref(false);
+const error = ref('');
+const adminCount = ref(0);
+const userCount = ref(0);
+
+onMounted(async () => {
+  await permissions.ensure();
+  const query = props.widget.query;
+  if (!query) {
+    loading.value = false;
+    return;
+  }
+  allowed.value = can(profile.record?.roles ?? [], query.listOperationId);
+  if (!allowed.value) {
+    loading.value = false;
+    return;
+  }
+  try {
+    const result = await loadMetrics(query);
+    adminCount.value = result.buckets
+      .filter((bucket) => bucket.key === 'admin' || bucket.key === 'superadmin')
+      .reduce((sum, bucket) => sum + bucket.count, 0);
+    userCount.value = result.buckets.find((bucket) => bucket.key === 'user')?.count ?? 0;
+  } catch (caught) {
+    error.value = formatApiError(caught);
+  }
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div data-widget="users:admin-user-ratio">
+    <CSpinner v-if="loading && allowed" size="sm" />
+    <template v-else-if="!allowed">
+      <div class="small text-body-secondary">{{ t('dashboard.noAccess') }}</div>
+    </template>
+    <template v-else-if="error">
+      <div class="small text-danger">{{ error }}</div>
+    </template>
+    <template v-else>
+      <div class="fs-4 fw-semibold" data-ratio>
+        {{ adminCount }} / {{ userCount }}
+      </div>
+      <div class="small text-body-secondary">{{ t('dashboard.adminUserRatioHint') }}</div>
+    </template>
+  </div>
+</template>

package/templates/frontend/src/components/dashboard/ChartCard.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { CChart } from '@coreui/vue-chartjs';
+import { computed, ref } from 'vue';
+
+import type { MetricsBucket } from '@/contracts/metricsSchema';
+import { useI18n } from '@/i18n';
+
+/**
+ * ChartCard (JUM-812): Chart.js via the already-vendored CoreUI wrapper.
+ * Labels on the axis carry the series names so colour is never the only
+ * encoding. Table fallback is always in the DOM for the screen-reader path.
+ */
+const props = defineProps<{
+  title: string;
+  buckets: MetricsBucket[];
+  kind?: 'bar' | 'line';
+}>();
+
+const { t } = useI18n();
+const tableVisible = ref(false);
+
+const PALETTE = ['#4a5cd4', '#39f', '#2eb85c', '#f9b115', '#e55353', '#9da5b1'];
+
+const labels = computed(() => props.buckets.map((bucket) => bucket.label ?? bucket.key));
+const values = computed(() => props.buckets.map((bucket) => bucket.count));
+const colors = computed(() => props.buckets.map((_, index) => PALETTE[index % PALETTE.length]));
+</script>
+
+<template>
+  <div class="chart-card">
+    <div class="d-flex justify-content-between align-items-center mb-2 gap-2">
+      <div class="text-body-secondary small">{{ title }}</div>
+      <button
+        type="button"
+        class="btn btn-sm btn-outline-secondary"
+        :aria-pressed="tableVisible ? 'true' : 'false'"
+        :aria-label="t('dashboard.showTable')"
+        data-chart-table-toggle
+        @click="tableVisible = !tableVisible"
+      >
+        {{ tableVisible ? t('dashboard.showChart') : t('dashboard.showTable') }}
+      </button>
+    </div>
+    <div v-if="buckets.length && !tableVisible" class="chart-card-canvas" aria-hidden="true">
+      <CChart
+        :type="kind === 'line' ? 'line' : 'bar'"
+        :data="{
+          labels,
+          datasets: [{
+            label: title,
+            data: values,
+            backgroundColor: colors,
+            borderColor: colors
+          }]
+        }"
+        :options="{
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: {
+            x: { ticks: { autoSkip: false } },
+            y: { beginAtZero: true, ticks: { precision: 0 } }
+          }
+        }"
+      />
+    </div>
+    <p v-else-if="!buckets.length" class="text-body-secondary small mb-0">{{ t('app.noData') }}</p>
+    <table
+      class="table table-sm mb-0"
+      :class="{ 'visually-hidden': buckets.length > 0 && !tableVisible }"
+      data-chart-table
+    >
+      <caption class="visually-hidden">{{ title }}</caption>
+      <thead>
+        <tr>
+          <th scope="col">{{ t('dashboard.bucket') }}</th>
+          <th scope="col">{{ t('dashboard.count') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="bucket in buckets" :key="bucket.key">
+          <td>{{ bucket.label ?? bucket.key }}</td>
+          <td>{{ bucket.count }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.chart-card-canvas {
+  position: relative;
+  height: 180px;
+  min-height: 180px;
+  width: 100%;
+}
+</style>

package/templates/frontend/src/components/dashboard/DashboardGrid.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/vue';
+import { reactive } from 'vue';
+
+import { useI18n } from '@/i18n';
+
+import type { DashboardWidget, DashboardWidgetSize } from './types';
+
+const props = defineProps<{ widgets: DashboardWidget[] }>();
+const { t, localized } = useI18n();
+const collapsed = reactive<Record<string, boolean>>({});
+
+const colFor = (size: DashboardWidgetSize): { md: number; lg: number } => {
+  if (size === 'lg') return { md: 12, lg: 12 };
+  if (size === 'md') return { md: 12, lg: 6 };
+  return { md: 6, lg: 4 };
+};
+
+const toggle = (id: string): void => {
+  collapsed[id] = !collapsed[id];
+};
+</script>
+
+<template>
+  <div class="dashboard-grid" data-dashboard-grid>
+    <p v-if="props.widgets.length === 0" class="text-body-secondary" data-dashboard-empty>
+      {{ t('dashboard.empty') }}
+    </p>
+    <CRow v-else class="g-3">
+      <CCol
+        v-for="widget in props.widgets"
+        :key="widget.id"
+        :xs="12"
+        :md="colFor(widget.size).md"
+        :lg="colFor(widget.size).lg"
+        :data-widget-size="widget.size"
+      >
+        <CCard class="border-0 shadow-sm h-100" :data-widget-card="widget.id">
+          <CCardHeader class="bg-transparent d-flex justify-content-between align-items-center gap-2">
+            <span class="fw-semibold">{{ localized(widget.title) }}</span>
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-secondary"
+              :aria-expanded="collapsed[widget.id] ? 'false' : 'true'"
+              :aria-controls="`dashboard-widget-${widget.id.replace(/:/g, '-')}`"
+              @click="toggle(widget.id)"
+            >
+              {{ collapsed[widget.id] ? t('dashboard.expand') : t('dashboard.collapse') }}
+            </button>
+          </CCardHeader>
+          <CCardBody v-show="!collapsed[widget.id]" :id="`dashboard-widget-${widget.id.replace(/:/g, '-')}`">
+            <component :is="widget.component" :widget="widget" />
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  </div>
+</template>

package/templates/frontend/src/components/dashboard/MetricWidget.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { CSpinner } from '@coreui/vue';
+import { onMounted, ref } from 'vue';
+
+import { formatApiError } from '@/contracts/errors';
+import type { MetricsResult } from '@/contracts/metricsSchema';
+import { can } from '@/contracts/rbac';
+import { usePermissions } from '@/contracts/usePermissions';
+import { useI18n } from '@/i18n';
+import { useProfileStore } from '@/stores/profile';
+
+import ChartCard from './ChartCard.vue';
+import { countPendingLocal, loadMetrics } from './loadMetrics';
+import type { DashboardWidget } from './types';
+
+const props = defineProps<{ widget: DashboardWidget }>();
+const { t, localized } = useI18n();
+const profile = useProfileStore();
+const permissions = usePermissions();
+
+const loading = ref(true);
+const allowed = ref(false);
+const error = ref('');
+const result = ref<MetricsResult>({ metric: 'count', buckets: [] });
+const pending = ref(0);
+
+const total = (): number => result.value.buckets.find((bucket) => bucket.key === 'total')?.count
+  ?? result.value.buckets.reduce((sum, bucket) => sum + bucket.count, 0);
+
+onMounted(async () => {
+  await permissions.ensure();
+  const query = props.widget.query;
+  if (!query) {
+    loading.value = false;
+    return;
+  }
+  allowed.value = can(profile.record?.roles ?? [], query.listOperationId);
+  if (!allowed.value) {
+    loading.value = false;
+    return;
+  }
+  try {
+    result.value = await loadMetrics(query);
+    if (query.showPending) pending.value = await countPendingLocal(query.schemaName);
+  } catch (caught) {
+    error.value = formatApiError(caught);
+  }
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div
+    class="metric-widget"
+    :data-metric="widget.query?.metricKey"
+    :data-widget="widget.id"
+  >
+    <CSpinner v-if="loading && allowed" size="sm" />
+    <template v-else-if="!allowed">
+      <div class="fs-3 fw-semibold">—</div>
+      <div class="small text-body-secondary">{{ t('dashboard.noAccess') }}</div>
+    </template>
+    <template v-else-if="error">
+      <div class="small text-danger">{{ error }}</div>
+    </template>
+    <template v-else-if="widget.query?.metric === 'count'">
+      <div class="fs-3 fw-semibold">{{ total() }}</div>
+      <div class="small text-body-secondary">{{ localized(widget.title) }}</div>
+      <div v-if="pending > 0" class="small text-warning" data-pending-count>
+        {{ t('dashboard.pendingCount', { count: pending }) }}
+      </div>
+    </template>
+    <ChartCard
+      v-else
+      :title="localized(widget.title)"
+      :buckets="result.buckets"
+      :kind="widget.query?.metric === 'series' ? 'line' : 'bar'"
+    />
+  </div>
+</template>

package/templates/frontend/src/components/dashboard/genericWidgets.ts

@@ -0,0 +1,124 @@
+import { fieldDescriptors } from '@/contracts/formSchema';
+import { fieldLabel } from '@/contracts/labels';
+import { metricsSpecForListOperation } from '@/contracts/metricsSchema';
+import type { ModuleManifest } from '@/modules/manifest';
+import { localized } from '@/i18n';
+
+import MetricWidget from './MetricWidget.vue';
+import type { DashboardWidget } from './types';
+
+const belongsToInverse = (
+  targetEntity: string,
+  ownerEntity: string
+): string | undefined => (
+  fieldDescriptors(targetEntity).find((descriptor) => (
+    descriptor.relation?.kind === 'belongsTo' && descriptor.relation.entity === ownerEntity
+  ))?.name
+);
+
+export const genericWidgetsForModule = (mod: ModuleManifest | undefined): DashboardWidget[] => {
+  if (!mod) return [];
+  const widgets: DashboardWidget[] = [];
+  const seen = new Set<string>();
+  const push = (widget: DashboardWidget): void => {
+    if (seen.has(widget.id)) return;
+    seen.add(widget.id);
+    widgets.push(widget);
+  };
+
+  for (const entity of mod.entities) {
+    const spec = metricsSpecForListOperation(entity.config.operations.list);
+    if (spec) {
+      const entityTitle = localized(entity.title);
+      push({
+        id: `generic:${entity.id}:count`,
+        title: { en: entityTitle, 'pt-BR': entityTitle },
+        size: 'sm',
+        component: MetricWidget,
+        query: {
+          listOperationId: entity.config.operations.list,
+          metricsOperationId: spec.operationId,
+          schemaName: entity.config.entity,
+          metric: 'count',
+          showPending: true,
+          metricKey: entity.id
+        }
+      });
+      for (const field of spec.capabilities.groupable) {
+        const descriptor = fieldDescriptors(entity.config.entity)
+          .find((item) => item.name === field);
+        const label = descriptor ? fieldLabel(descriptor) : field;
+        push({
+          id: `generic:${entity.id}:groupBy:${field}`,
+          title: {
+            en: `${entityTitle} by ${label}`,
+            'pt-BR': `${entityTitle} por ${label}`
+          },
+          size: 'md',
+          component: MetricWidget,
+          query: {
+            listOperationId: entity.config.operations.list,
+            metricsOperationId: spec.operationId,
+            schemaName: entity.config.entity,
+            metric: 'groupBy',
+            field
+          }
+        });
+      }
+      for (const field of spec.capabilities.series) {
+        const descriptor = fieldDescriptors(entity.config.entity)
+          .find((item) => item.name === field);
+        const label = descriptor ? fieldLabel(descriptor) : field;
+        push({
+          id: `generic:${entity.id}:series:${field}`,
+          title: {
+            en: `${entityTitle} ${label} (day)`,
+            'pt-BR': `${entityTitle} ${label} (dia)`
+          },
+          size: 'lg',
+          component: MetricWidget,
+          query: {
+            listOperationId: entity.config.operations.list,
+            metricsOperationId: spec.operationId,
+            schemaName: entity.config.entity,
+            metric: 'series',
+            field,
+            interval: 'day'
+          }
+        });
+      }
+      for (const descriptor of fieldDescriptors(entity.config.entity)) {
+        const { relation } = descriptor;
+        if (relation?.kind === 'hasMany') {
+          const inverse = belongsToInverse(relation.entity, entity.config.entity);
+          const child = inverse
+            ? mod.entities.find((item) => item.config.entity === relation.entity)
+            : undefined;
+          const childSpec = child
+            ? metricsSpecForListOperation(child.config.operations.list)
+            : undefined;
+          if (inverse && child && childSpec?.capabilities.groupable.includes(inverse)) {
+            const relationLabel = fieldLabel(descriptor);
+            push({
+              id: `generic:${entity.id}:fan-out:${descriptor.name}`,
+              title: {
+                en: `${relationLabel} per ${entityTitle}`,
+                'pt-BR': `${relationLabel} por ${entityTitle}`
+              },
+              size: 'md',
+              component: MetricWidget,
+              query: {
+                listOperationId: child.config.operations.list,
+                metricsOperationId: childSpec.operationId,
+                schemaName: child.config.entity,
+                metric: 'groupBy',
+                field: inverse
+              }
+            });
+          }
+        }
+      }
+    }
+  }
+  return widgets;
+};

package/templates/frontend/src/components/dashboard/loadMetrics.ts

@@ -0,0 +1,88 @@
+import { runMetricsQuery, type IMetricsQuery } from '@jumentix/persistence-contracts';
+
+import { getSharedApiClient } from '@/contracts/apiClient';
+import { toQueryParams } from '@/contracts/listSchema';
+import {
+  asMetricsResult,
+  metricsSpecForListOperation,
+  type MetricsResult
+} from '@/contracts/metricsSchema';
+import { loadRelationLabels, relationFor } from '@/contracts/relationLabels';
+import { isCanaOpen } from '@/data/db';
+import { listLocal } from '@/data/localRepository';
+import { useAuthStore } from '@/stores/auth';
+
+import type { DashboardMetricsQuery } from './types';
+
+const sinceFilter = (since: string | undefined): Record<string, unknown> | undefined => {
+  if (!since) return undefined;
+  return { createdAt: { operator: 'gte', value: since } };
+};
+
+const localRecords = async (
+  schemaName: string,
+  since?: string
+): Promise<Array<Record<string, unknown>>> => {
+  const head = await listLocal(schemaName, { page: 1, size: 1 });
+  const page = await listLocal(schemaName, { page: 1, size: Math.max(head.total, 1) });
+  if (!since) return page.result;
+  const start = Date.parse(since);
+  return page.result.filter((row) => Date.parse(String(row.createdAt ?? '')) >= start);
+};
+
+/**
+ * groupBy over a foreign key buckets by the stored id; label each bucket with
+ * the related record's display field so a chart never shows raw ids (JUM-908).
+ */
+const labelRelationBuckets = async (
+  query: DashboardMetricsQuery,
+  result: MetricsResult
+): Promise<MetricsResult> => {
+  const relation = query.metric === 'groupBy' && query.field
+    ? relationFor(query.schemaName, query.field)
+    : undefined;
+  if (!relation) return result;
+  const labels = await loadRelationLabels(relation);
+  return {
+    ...result,
+    buckets: result.buckets.map((bucket) => (
+      labels[bucket.key] ? { ...bucket, label: labels[bucket.key] } : bucket
+    ))
+  };
+};
+
+const loadRawMetrics = async (query: DashboardMetricsQuery): Promise<MetricsResult> => {
+  const spec = metricsSpecForListOperation(query.listOperationId);
+  const capabilities = spec?.capabilities ?? { groupable: [], series: [] };
+  if (isCanaOpen()) {
+    const records = await localRecords(query.schemaName, query.since);
+    const metricsQuery: IMetricsQuery = {
+      metric: query.metric,
+      field: query.field,
+      interval: query.interval,
+      filters: undefined
+    };
+    return runMetricsQuery(records, metricsQuery, capabilities);
+  }
+  const response = await getSharedApiClient().request<unknown>({
+    operationId: query.metricsOperationId,
+    query: {
+      metric: query.metric,
+      ...(query.field ? { field: query.field } : {}),
+      ...(query.interval ? { interval: query.interval } : {}),
+      ...toQueryParams({ filter: sinceFilter(query.since) })
+    },
+    headers: { Authorization: useAuthStore().token }
+  });
+  return asMetricsResult(response);
+};
+
+export const loadMetrics = async (query: DashboardMetricsQuery): Promise<MetricsResult> => (
+  labelRelationBuckets(query, await loadRawMetrics(query))
+);
+
+export const countPendingLocal = async (schemaName: string): Promise<number> => {
+  if (!isCanaOpen()) return 0;
+  const records = await localRecords(schemaName);
+  return records.filter((row) => row._sync === 'pending').length;
+};

package/templates/frontend/src/components/dashboard/types.ts

@@ -0,0 +1,26 @@
+import type { Component } from 'vue';
+
+import type { MetricsInterval, MetricsKind } from '@/contracts/metricsSchema';
+import type { XCrudText } from '@/components/x-crud/xCrudTypes';
+
+export type DashboardWidgetSize = 'sm' | 'md' | 'lg';
+
+export interface DashboardMetricsQuery {
+  listOperationId: string;
+  metricsOperationId: string;
+  schemaName: string;
+  metric: MetricsKind;
+  field?: string;
+  interval?: MetricsInterval;
+  since?: string;
+  showPending?: boolean;
+  metricKey?: string;
+}
+
+export interface DashboardWidget {
+  id: string;
+  title: XCrudText;
+  size: DashboardWidgetSize;
+  component: Component;
+  query?: DashboardMetricsQuery;
+}