@jumentix/cli-init 0.0.0

package/templates/frontend/cypress/e2e/shell-responsive.cy.ts

@@ -0,0 +1,36 @@
+/**
+ * JUM-799/800 — shell layout facts at phone, tablet and desktop viewports.
+ */
+describe('responsive shell', () => {
+  const assertNoPageScroll = () => {
+    cy.document().then((doc) => {
+      expect(doc.documentElement.scrollWidth).to.be.at.most(doc.defaultView!.innerWidth);
+    });
+  };
+
+  it('uses a compact taskbar and overflow widgets at 375×812', () => {
+    cy.viewport(375, 812);
+    cy.login('superadmin');
+    cy.get('[data-shell-bp]').should('have.attr', 'data-shell-bp', 'xs');
+    cy.get('[data-taskbar]').should('have.attr', 'data-sheet', 'true');
+    cy.get('[data-widget-overflow]').should('exist');
+    assertNoPageScroll();
+  });
+
+  it('keeps a compact taskbar at 768×1024', () => {
+    cy.viewport(768, 1024);
+    cy.login('superadmin');
+    cy.get('[data-shell-bp]').should('have.attr', 'data-shell-bp', 'md');
+    cy.get('[data-taskbar]').should('have.attr', 'data-compact', 'false');
+    assertNoPageScroll();
+  });
+
+  it('shows labelled task buttons at 1280×800', () => {
+    cy.viewport(1280, 800);
+    cy.login('superadmin');
+    cy.get('[data-shell-bp]').should('have.attr', 'data-shell-bp', 'xl');
+    cy.get('[data-taskbar]').should('have.attr', 'data-compact', 'false');
+    cy.get('.app-taskbar__label').should('contain', 'Users');
+    assertNoPageScroll();
+  });
+});

package/templates/frontend/cypress/e2e/users-crud.cy.ts

@@ -0,0 +1,76 @@
+/**
+ * JUM-776/778/781 — the Users X-CRUD against the real paginated contract:
+ * server-side search, sort, filters, paging, row detail, edit with the
+ * organization label, create with array editors, delete, and Portuguese.
+ */
+describe('users X-CRUD', () => {
+  beforeEach(() => {
+    cy.login('superadmin');
+    cy.visit('/#/users');
+    cy.get('.xcrud-grid tbody tr').should('have.length.at.least', 6);
+  });
+
+  it('searches and sorts locally after sync (no q= / sort= on the wire)', () => {
+    cy.intercept('GET', '/api/1.0.0/users?*', { forceNetworkError: true }).as('list');
+    cy.get('input[aria-label="search"]').type('obama');
+    cy.get('.xcrud-grid tbody tr').should('have.length', 1);
+    cy.get('.xcrud-grid tbody tr').first().should('contain', 'Barack');
+    cy.get('input[aria-label="search"]').clear();
+    cy.get('.xcrud-grid tbody tr').should('have.length.at.least', 6);
+    cy.contains('th', 'First name').click();
+    cy.get('.xcrud-grid tbody tr').first().should('contain', 'Admin');
+    cy.get('.xcrud-footer span').invoke('text').should('match', /1–\d+ of \d+/);
+  });
+
+  it('opens the column filter row from the toolbar and filters by organization with the quick select', () => {
+    cy.contains('button', 'Filters').click();
+    cy.get('.xcrud-filter-row').should('be.visible');
+    cy.get('input[aria-label="filter-firstName"]').type('ed');
+    cy.get('.xcrud-grid tbody tr').should('have.length', 1);
+    cy.get('.xcrud-grid tbody tr').first().should('contain', 'eduardo');
+    cy.get('input[aria-label="filter-firstName"]').clear();
+    cy.get('select[aria-label="organization"]').select('ACME');
+    cy.get('tbody').should('not.contain', 'XpertMinds');
+    cy.get('.xcrud-grid tbody tr').should('have.length.at.least', 1);
+    cy.get('.xcrud-grid tbody tr').each(($row) => expect($row.text()).to.contain('ACME'));
+  });
+
+  it('shows the row detail with array tabs, formatted dates and the org label in the edit form', () => {
+    cy.contains('.xcrud-grid tbody tr', 'Barack').find('button[aria-label^="preview "]').click();
+    cy.get('.xcrud-row-detail .nav-link').should('contain', 'User Data').and('contain', 'Emails');
+    cy.get('.xcrud-row-detail').should('not.contain', 'T00:00:');
+    cy.get('.xcrud-row-detail').contains('.nav-link', 'Edit User').click();
+    cy.get('#xref-organization').should('have.value', 'ACME');
+    cy.get('.xcrud-row-detail .form-text').first().should('contain', 'User\'s first name');
+  });
+
+  it('creates a user with a document row, then deletes it', () => {
+    const username = `e2e-${Date.now()}@x.dev`;
+    cy.contains('.nav-link', 'New User').click();
+    cy.get('#oas-field-firstName').type('E2E');
+    cy.get('#oas-field-lastName').type('Runner');
+    cy.get('#oas-field-username').type(username);
+    cy.get('#oas-field-password').type('e2e@123456');
+    cy.get('#oas-field-primaryEmail').type(username);
+    cy.get('#xref-organization').type('ACME');
+    cy.get('button[aria-label="add documents"]').click();
+    cy.get('.xcrud-array-editor label').should('contain', 'Type').and('contain', 'Number');
+    cy.get('button[aria-label="Remove documents 0"]').click();
+    cy.contains('button', 'Create').click();
+    cy.get('.alert-success').should('contain', 'record created');
+    cy.get('input[aria-label="search"]').type('e2e-');
+    cy.get('.xcrud-grid tbody tr').should('have.length', 1);
+    cy.get('.xcrud-grid tbody tr').first().should('contain', username);
+    cy.get('.xcrud-grid tbody tr').first().find('button[aria-label^="delete "]').click();
+    cy.get('.alert-success').should('contain', 'record removed');
+    cy.get('tbody').should('not.contain', username);
+  });
+
+  it('renders the listing in Portuguese after switching the locale', () => {
+    cy.get('.header [aria-label="Account"]').click();
+    cy.get('.header .dropdown-menu.show').contains('Português (BR)').click();
+    cy.contains('.card-header .nav-link', 'Listagem de Usuário').should('be.visible');
+    cy.contains('th', 'Nome').should('be.visible');
+    cy.contains('button', 'Filtros').should('be.visible');
+  });
+});

package/templates/frontend/cypress/support/e2e.ts

@@ -0,0 +1,63 @@
+import 'cypress-axe';
+
+/**
+ * Seeded accounts (apps/backend-template/seed/users.ts). The e2e backend
+ * starts fresh (InMemory) on every run, so these always exist.
+ */
+export const accounts = {
+  superadmin: { username: 'eduardo@xpertminds.dev', password: 'eduardo@123456' },
+  admin: { username: 'admin@xpertminds.dev', password: 'admin@123456' },
+  user: { username: 'user@xpertminds.dev', password: 'user@123456' }
+};
+
+const backendOrigin = `http://127.0.0.1:${Cypress.env('FRONTEND_E2E_BACKEND_PORT') || '3130'}`;
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface Chainable {
+      /** Signs in through the real login form and waits for the dashboard. */
+      login(role: keyof typeof accounts): Chainable<void>;
+      goOffline(): Chainable<void>;
+      goOnline(): Chainable<void>;
+      serverCreate(
+        entity: 'users' | 'organizations',
+        body: Record<string, unknown>
+      ): Chainable<Cypress.Response<unknown>>;
+    }
+  }
+}
+
+Cypress.Commands.add('login', (role) => {
+  const account = accounts[role];
+  cy.visit('/#/login');
+  cy.window().then((win) => {
+    const wipe = (win as Window & { __jumentixWipeCana?: () => Promise<void> }).__jumentixWipeCana;
+    if (wipe) return wipe();
+    return undefined;
+  });
+  cy.get('#oas-field-username').clear().type(account.username);
+  cy.get('#oas-field-password').clear().type(account.password);
+  cy.get('form').submit();
+  cy.location('hash', { timeout: 30000 }).should('eq', '#/m/users/dashboard');
+});
+
+Cypress.Commands.add('goOffline', () => {
+  cy.intercept({ url: '/api/**' }, { forceNetworkError: true }).as('offlineApi');
+});
+
+Cypress.Commands.add('goOnline', () => {
+  cy.intercept({ url: '/api/**' }, (req) => req.continue()).as('onlineApi');
+});
+
+Cypress.Commands.add('serverCreate', (entity, body) => {
+  cy.request('POST', `${backendOrigin}/1.0.0/${entity}`, body);
+});
+
+beforeEach(() => {
+  cy.window().then((win) => {
+    win.localStorage.clear();
+    win.sessionStorage.clear();
+    win.localStorage.setItem('jumentix-frontend-locale', 'en');
+  });
+});

package/templates/frontend/cypress/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["cypress"]
+  },
+  "include": ["**/*.ts"]
+}

package/templates/frontend/cypress.config.js

@@ -0,0 +1,20 @@
+const { defineConfig } = require('cypress');
+
+/**
+ * Frontend e2e (JUM-776). `baseUrl` is injected by `scripts/run-e2e.mjs`, which
+ * also owns the Dockerised backend the specs talk to. Videos are off — the
+ * evidence Requirement 130 asks for is the run summary and screenshots on
+ * failure, both kept.
+ */
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://127.0.0.1:3131',
+    specPattern: 'cypress/e2e/**/*.cy.ts',
+    supportFile: 'cypress/support/e2e.ts',
+    video: false,
+    screenshotOnRunFailure: true,
+    viewportWidth: 1440,
+    viewportHeight: 900,
+    defaultCommandTimeout: 10000
+  }
+});

package/templates/frontend/e2e/Dockerfile.backend

@@ -0,0 +1,44 @@
+# Backend under test for the frontend e2e suite (JUM-776, Requirement 118).
+#
+# Built from the monorepo root so the image runs the *same* Express REST API
+# the frontend seed targets — `apps/backend-template` with the shared
+# `@jumentix/*` packages — on the pinned Bun toolchain. InMemory persistence
+# and in-process mediator/key-value keep the container self-contained; the
+# seeds (`apps/backend-template/seed`) provide the accounts the specs sign in
+# with.
+FROM oven/bun:1.3.13
+
+WORKDIR /app
+
+COPY package.json bun.lock bunfig.toml .bun-version tsconfig.json tsconfig.build.json ./
+COPY patches ./patches
+COPY apps/backend-template/package.json ./apps/backend-template/package.json
+COPY apps/frontend/package.json ./apps/frontend/package.json
+COPY apps/service-management/package.json ./apps/service-management/package.json
+COPY apps/service-management-api/package.json ./apps/service-management-api/package.json
+COPY apps/jumentix-website/package.json ./apps/jumentix-website/package.json
+COPY packages ./packages
+COPY tooling ./tooling
+COPY ci-cd ./ci-cd
+
+RUN bun install --frozen-lockfile --ignore-scripts
+
+COPY spec ./spec
+COPY apps/backend-template ./apps/backend-template
+COPY apps/service-management-api ./apps/service-management-api
+
+ENV JUMENTIX_HTTP_FRAMEWORK=express \
+    JUMENTIX_HTTP_PORT=3000 \
+    JUMENTIX_DATABASE_DRIVER=InMemory \
+    JUMENTIX_KEYVALUESTORAGE_DRIVER=inmemory \
+    JUMENTIX_MESSAGE_MEDIATOR_ADAPTER=inmemory \
+    JUMENTIX_REALTIME_API=no
+
+USER bun
+
+EXPOSE 3000
+
+HEALTHCHECK --interval=5s --timeout=3s --retries=20 \
+  CMD bun -e "fetch('http://127.0.0.1:3000/').then((r) => process.exit(r.ok ? 0 : 1)).catch(() => process.exit(1))"
+
+CMD ["bun", "-r", "tsconfig-paths/register", "--env-file=./apps/backend-template/src/config/.env.dev", "apps/backend-template/src/interface/HTTP/adapters/start-rest-api.ts"]

package/templates/frontend/e2e/docker-compose.yml

@@ -0,0 +1,12 @@
+# Frontend e2e stack (JUM-776, Requirement 118): the real Jumentix REST API
+# in a container, seeded, InMemory. `scripts/run-e2e.mjs` brings it up, runs
+# Cypress against a Vite server that proxies `/api` here, and tears it down.
+services:
+  backend:
+    build:
+      context: ../../..
+      dockerfile: apps/frontend/e2e/Dockerfile.backend
+    environment:
+      JUMENTIX_CORS_ALLOWED_ORIGINS: http://localhost:${FRONTEND_E2E_PORT:-3131},http://127.0.0.1:${FRONTEND_E2E_PORT:-3131}
+    ports:
+      - '${FRONTEND_E2E_BACKEND_PORT:-3130}:3000'

package/templates/frontend/eslint.config.mjs

@@ -0,0 +1,46 @@
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import eslintPluginVue from 'eslint-plugin-vue'
+import vueParser from 'vue-eslint-parser'
+import globals from 'globals'
+
+export default [
+  {
+    ignores: [
+      'dist/**',
+      'template/**',
+      '.claude/**',
+      '.openclaude/**',
+      '.wwebjs_auth/**',
+      '.wwebjs_cache/**',
+      'exports/**',
+      'node_modules/**',
+      'eslint.config.mjs',
+    ],
+  },
+  ...eslintPluginVue.configs['flat/essential'],
+  {
+    files: ['src/**/*.{ts,vue}', 'vite.config.mjs'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        extraFileExtensions: ['.vue'],
+        parser: tsParser,
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+    },
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+]

package/templates/frontend/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
+    <meta name="description" content="Jumentix Frontend — offline-first, hybrid and online apps over Jumentix backend contracts">
+    <title>Jumentix Frontend</title>
+    <!-- favicons for all devices -->
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    <script>
+      const userMode = localStorage.getItem('coreui-free-vue-admin-template-theme');
+	    const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
+				document.documentElement.dataset.coreuiTheme = 'dark';
+			}
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/templates/frontend/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@jumentix/frontend",
+  "version": "0.3.0",
+  "private": true,
+  "description": "Jumentix frontend workspace app — offline-first, hybrid and online frontends over Jumentix backend contracts",
+  "scripts": {
+    "predev": "bun ./scripts/sync-contracts.mjs",
+    "dev": "vite --force",
+    "prebuild": "bun ./scripts/sync-contracts.mjs",
+    "build": "vite build",
+    "test": "bun test test/unit test/component",
+    "test:unit": "bun test test/unit",
+    "test:component": "bun test test/component",
+    "test:coverage": "bun test test/unit test/component --coverage --coverage-reporter=lcov --coverage-reporter=text --coverage-dir=../../coverage/frontend",
+    "test:e2e": "bun ./scripts/run-e2e.mjs",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@coreui/chartjs": "^4.2.0",
+    "@coreui/coreui": "^5.6.1",
+    "@coreui/icons": "^3.0.1",
+    "@coreui/icons-vue": "2.2.0",
+    "@coreui/utils": "^2.0.2",
+    "@coreui/vue": "^5.8.0",
+    "@coreui/vue-chartjs": "^3.0.0",
+    "@jumentix/cana": "workspace:*",
+    "@jumentix/cana-vue": "workspace:*",
+    "@jumentix/persistence-contracts": "workspace:*",
+    "@jumentix/sdk-rest-client": "workspace:*",
+    "@popperjs/core": "^2.11.8",
+    "chart.js": "^4.5.1",
+    "pinia": "^3.0.4",
+    "simplebar-vue": "^2.4.2",
+    "vue": "^3.5.31",
+    "vue-router": "^5.0.4"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "20.14.5",
+    "@types/node": "^24.10.1",
+    "@typescript-eslint/eslint-plugin": "^8.68.0",
+    "@typescript-eslint/parser": "^8.68.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/compiler-sfc": "3.5.41",
+    "@vue/test-utils": "2.5.1",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^10.10.0",
+    "eslint-plugin-vue": "^10.11.0",
+    "fake-indexeddb": "6.2.5",
+    "globals": "^17.12.0",
+    "happy-dom": "20.14.5",
+    "postcss": "^8.5.8",
+    "sass": "^1.98.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.16",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "^3.2.2",
+    "yaml": "^2.9.0"
+  }
+}

package/templates/frontend/public/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

package/templates/frontend/public/manifest.json

@@ -0,0 +1,52 @@
+{
+  "name": "Jumentix API",
+  "short_name": "Jumentix",
+  "start_url": "./",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#321fdb",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/templates/frontend/public/sw.js

@@ -0,0 +1,34 @@
+const CACHE = 'jumentix-frontend-v1';
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE).then((cache) => cache.addAll(['./', './index.html', './manifest.json']))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) => Promise.all(
+      keys.filter((key) => key !== CACHE).map((key) => caches.delete(key))
+    ))
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const request = event.request;
+  if (request.method !== 'GET') return;
+  const url = new URL(request.url);
+  if (url.pathname.includes('/api')) return;
+  event.respondWith(
+    caches.match(request).then((cached) => {
+      if (cached) return cached;
+      return fetch(request).then((response) => {
+        const copy = response.clone();
+        caches.open(CACHE).then((cache) => cache.put(request, copy));
+        return response;
+      }).catch(() => caches.match('./index.html'));
+    })
+  );
+});