From 6752c54ed4bcc053cde83b64d509eee266b92356 Mon Sep 17 00:00:00 2001
From: Henry Jonas <jonathan.quispe@processmaker.com>
Date: Tue, 28 Jul 2026 17:08:58 -0400
Subject: [PATCH 1/2] FOUR-32412: VITE /process-browser and /cases migrations

---
 .../components/Breadcrumbs.vue                |   1 -
 .../components/CardProcess.vue                |   4 +-
 .../components/menuCatologue.vue              |   3 +-
 .../loaderProcessesCatalogue.js               |  24 +++
 .../{index.js => processesCatalogue.js}       |  22 ++-
 resources/js/vite/AGENTS.md                   | 168 +++++++++++-------
 .../cases/casesMain/{main.js => casesMain.js} |   2 +
 .../jscomposition/cases/casesMain/loader.js   |   3 -
 .../cases/casesMain/loaderCasesMain.js        |  12 ++
 .../cases/casesMain/variables/index.js        |   2 +-
 resources/views/cases/casesMain.blade.php     |  26 ++-
 .../views/processes-catalogue/index.blade.php |  26 +--
 vite.config.js                                |   4 +
 webpack.mix.js                                |   4 -
 14 files changed, 189 insertions(+), 112 deletions(-)
 create mode 100644 resources/js/processes-catalogue/loaderProcessesCatalogue.js
 rename resources/js/processes-catalogue/{index.js => processesCatalogue.js} (65%)
 rename resources/jscomposition/cases/casesMain/{main.js => casesMain.js} (92%)
 delete mode 100644 resources/jscomposition/cases/casesMain/loader.js
 create mode 100644 resources/jscomposition/cases/casesMain/loaderCasesMain.js

diff --git a/resources/js/processes-catalogue/components/Breadcrumbs.vue b/resources/js/processes-catalogue/components/Breadcrumbs.vue
index 6b403d017d..08cc5c4091 100644
--- a/resources/js/processes-catalogue/components/Breadcrumbs.vue
+++ b/resources/js/processes-catalogue/components/Breadcrumbs.vue
@@ -61,7 +61,6 @@ export default {
 
 <style lang="css" scoped>
 .breadcrum-main {
-  margin: -16px -16px 0px -16px;
   background: white;
   border-bottom: 1px solid #DADDDF
 }
diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index 2975c56053..8e824254db 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -65,8 +65,6 @@ import pagination from "./utils/pagination.vue";
 import SearchCards from "./utils/SearchCards.vue";
 import dataLoadingMixin from "../../components/common/mixins/apiDataLoading";
 import Card from "./utils/Card.vue";
-import { EventBus } from '../index.js';
-
 
 export default {
   components: {
@@ -223,7 +221,7 @@ export default {
      */
     openProcessInfo(process) {
       if (this.categoryId === 'all_templates') {
-        EventBus.$emit('templates-selected', { template: process, type: "Process" });
+        ProcessMaker.EventBus.$emit('templates-selected', { template: process, type: "Process" });
         return;
       }
       this.$router.push({ name: "show", params: { process: process, processId: process.id } });
diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue
index e043959878..2f339b0f2b 100644
--- a/resources/js/processes-catalogue/components/menuCatologue.vue
+++ b/resources/js/processes-catalogue/components/menuCatologue.vue
@@ -100,7 +100,6 @@
 
 <script>
 import SelectTemplateModal from "../../components/templates/SelectTemplateModal.vue";
-import { EventBus } from '../index.js';
 
 export default {
   components: {
@@ -143,7 +142,7 @@ export default {
     };
   },
   created() {
-    EventBus.$on('templates-selected', (obj) => {
+    window.ProcessMaker.EventBus.$on('templates-selected', (obj) => {
       this.openTemplate(obj);
     });
 
diff --git a/resources/js/processes-catalogue/loaderProcessesCatalogue.js b/resources/js/processes-catalogue/loaderProcessesCatalogue.js
new file mode 100644
index 0000000000..ad0464a05c
--- /dev/null
+++ b/resources/js/processes-catalogue/loaderProcessesCatalogue.js
@@ -0,0 +1,24 @@
+import { setupMain } from "../../js/next/setupMain.js";
+import screenBuilderNext from "../../js/next/screenBuilder.js";
+import * as ScreenBuilder from "@processmaker/screen-builder";
+import vueFormElements from "../../js/next/libraries/vueFormElements";
+
+window.ScreenBuilder = ScreenBuilder;
+
+setupMain();
+screenBuilderNext();
+
+window.ProcessMaker.isDocumenterInstalled = window.temporal.isDocumenterInstalled;
+window.ProcessMaker.permission = window.temporal.permission;
+window.ProcessMaker.defaultSavedSearch = window.temporal.defaultSavedSearch;
+window.ProcessMaker.isTceCustomization = window.temporal.isTceCustomization;
+window.ProcessMaker.metricsApiEndpoint = window.temporal.metricsApiEndpoint;
+window.ProcessMaker.userConfiguration = window.temporal.userConfiguration;
+window.ProcessMaker.user = window.temporal.user;
+window.ProcessMaker.packages = window.temporal.packages;
+
+// Legacy Mix keys (lowercase "m") used by shared catalogue components
+window.Processmaker = window.Processmaker || {};
+window.Processmaker.user = window.temporal.user;
+window.Processmaker.userConfiguration = window.temporal.userConfiguration;
+window.Processmaker.defaultSavedSearch = window.temporal.defaultSavedSearch;
diff --git a/resources/js/processes-catalogue/index.js b/resources/js/processes-catalogue/processesCatalogue.js
similarity index 65%
rename from resources/js/processes-catalogue/index.js
rename to resources/js/processes-catalogue/processesCatalogue.js
index b548e11f59..299f522044 100644
--- a/resources/js/processes-catalogue/index.js
+++ b/resources/js/processes-catalogue/processesCatalogue.js
@@ -1,14 +1,14 @@
 import Vue from "vue";
-import Process from "./components/Process";
-import ProcessesCatalogue from "./components/ProcessesCatalogue";
-import ProcessListing from "./components/ProcessListing";
+import VueRouter from "vue-router";
+import Process from "./components/Process.vue";
+import ProcessesCatalogue from "./components/ProcessesCatalogue.vue";
+import ProcessListing from "./components/ProcessListing.vue";
 
-export const EventBus = new Vue();
 Vue.use(VueRouter);
+
 const router = new VueRouter({
   mode: "history",
   base: "/process-browser",
-  //See https://v3.router.vuejs.org/guide/
   routes: [
     {
       name: "index",
@@ -16,9 +16,9 @@ const router = new VueRouter({
       component: ProcessListing,
       props(route) {
         return {
-          categoryId: route.query.categoryId || 'recent',
+          categoryId: route.query.categoryId || "recent",
         };
-      }
+      },
     },
     {
       name: "show",
@@ -26,12 +26,12 @@ const router = new VueRouter({
       component: Process,
       props(route) {
         return {
-          processId: parseInt(route.params.processId) || null,
+          processId: parseInt(route.params.processId, 10) || null,
           process: route.params.process || null,
         };
-      }
+      },
     },
-  ]
+  ],
 });
 
 new Vue({
@@ -46,6 +46,4 @@ new Vue({
       mobileSearchVisible: false,
     };
   },
-  methods: {
-  },
 });
diff --git a/resources/js/vite/AGENTS.md b/resources/js/vite/AGENTS.md
index d3b6ffa940..8c30f3709f 100644
--- a/resources/js/vite/AGENTS.md
+++ b/resources/js/vite/AGENTS.md
@@ -1,6 +1,6 @@
 # Vite views (ProcessMaker)
 
-Guide for humans and coding agents working under `resources/js/vite`, Vite Blade layouts, and the parallel Vite asset pipeline.
+Guide for humans and coding agents working under Vite Blade layouts and the parallel Vite asset pipeline.
 
 Vite runs **alongside** Laravel Mix. Do not replace Mix globally. Migrate routes one at a time.
 
@@ -9,7 +9,7 @@ Vite runs **alongside** Laravel Mix. Do not replace Mix globally. Migrate routes
 | Pipeline | Owns | Blade helper | Dev server / output |
 |----------|------|--------------|---------------------|
 | **Mix** | Most of the app (`public/js`, `public/css`) | `mix('js/...')`, `mix('css/...')` | `npm run development` / `watch` → `public/` + `mix-manifest.json` |
-| **Vite** | Entries under `resources/js/vite`, shared Sass entries, Vite-backed pages | `@vite([...])` | `npm run vite:dev` → `:5173` + `storage/vite.hot`; `npm run vite:build` → `public/build` + manifest |
+| **Vite** | Page entries (under `resources/js/vite`, feature folders, or `jscomposition`), shared Sass / translations | `@vite([...])` | `npm run vite:dev` → `:5173` + `storage/vite.hot`; `npm run vite:build` → `public/build` + manifest |
 
 - Mix HMR file (if used): `public/hot` — **reserved for Mix**. Never point Vite hot here.
 - Vite hot file: `storage/vite.hot` (configured in `vite.config.js` and `Vite::useHotFile()` in `ProcessMakerServiceProvider`).
@@ -17,43 +17,78 @@ Vite runs **alongside** Laravel Mix. Do not replace Mix globally. Migrate routes
 
 ## Layouts
 
-| Layout | CSS | Use when |
-|--------|-----|----------|
-| `layouts.layoutnext` | `mix('css/app.css')` etc. | Legacy Mix pages |
-| `layouts.layoutnextvite` | `@vite` of `app.scss`, `sidebar`, `collapseDetails`, `tailwind.css` | Authenticated Vite-backed pages (e.g. tasks) |
-| Standalone Blade | `@vite` for JS + needed CSS in the page itself | Demo / auth experiments without app chrome |
+| Layout | CSS / JS | Use when |
+|--------|----------|----------|
+| `layouts.layout` / `layouts.layoutnext` | Mix CSS/JS chrome | Legacy Mix pages (e.g. catalogue mobile) |
+| `layouts.layoutnextvite` | `@vite` of `app.scss`, `sidebar`, `collapseDetails`, `tailwind.css` | Authenticated Vite pages (Tasks, Processes Catalogue desktop, Cases) |
+| Standalone / `auth.layouts.auth` | Page-level `@vite` | Login and password-reset style pages |
 
 File: `resources/views/layouts/layoutnextvite.blade.php` (must be `.blade.php`).
 
 ## How routes switch to Vite (current pattern)
 
-There is **no** `VITE_VIEW` env map anymore. Migration is done **in place** on the existing Blade (or a dedicated `resources/views/vite/...` page for demos):
+There is **no** `VITE_VIEW` env map. Migration is done **in place** on the existing Blade:
 
-1. Change `@extends(...)` to `layouts.layoutnextvite` (in-app) or keep a standalone layout.
-2. Replace `mix('js/...')` page bootstraps with `@vite(['resources/js/vite/...'])`.
+1. Change `@extends(...)` to `layouts.layoutnextvite` (in-app) or keep standalone/auth layout.
+2. Replace `mix('js/...')` page bootstraps with `@vite([...])`.
 3. Register the JS/CSS entry in `vite.config.js` → `laravel({ input: [...] })`.
-4. Keep Mix-built package scripts as classic `<script src="...">` when packages still ship Mix assets.
+4. Keep Mix-built package scripts as classic `<script src="...">` when packages still ship Mix assets (`$manager->getScripts()`, `GlobalScripts`, etc.).
 
-Login still uses the classic path: `LoginController` → `config('app.login_view')` / `LOGIN_VIEW` (default `auth.newLogin`), else `auth.login`. A Vite login **entry** (`resources/js/vite/auth/login.js`) remains registered in `vite.config.js` for a future auth migration; there is currently **no** `resources/views/vite/auth/` Blade.
+Entries may live under:
+
+- `resources/js/vite/<area>/` (Tasks, auth)
+- Feature folder next to the UI (e.g. `resources/js/processes-catalogue/`)
+- Composition tree (e.g. `resources/jscomposition/cases/casesMain/`)
+
+Prefer co-locating the Vite entry with the feature source when that tree already owns the page.
 
 ## Folder layout
 
 ```
-resources/views/vite/          ← optional Vite-only Blades (demo)
 resources/views/layouts/layoutnextvite.blade.php
-resources/views/tasks/index.blade.php  ← migrated in place to Vite layout + entries
-resources/js/vite/             ← JS entrypoints
-resources/sass/app.scss        ← shared styles also compiled by Vite (same sources as Mix)
-vite.config.js                 ← inputs, aliases, extensions, server, hotFile
+resources/views/tasks/index.blade.php                 ← Vite
+resources/views/processes-catalogue/index.blade.php   ← Vite (desktop)
+resources/views/cases/casesMain.blade.php             ← Vite
+resources/views/auth/newLogin.blade.php               ← Vite
+resources/views/auth/layouts/auth.blade.php           ← Vite scripts (reset/email)
+resources/js/vite/tasks/                              ← Tasks entries
+resources/js/vite/auth/login.js                       ← Login / auth layout entry
+resources/js/processes-catalogue/loaderProcessesCatalogue.js
+resources/js/processes-catalogue/processesCatalogue.js
+resources/jscomposition/cases/casesMain/loaderCasesMain.js
+resources/jscomposition/cases/casesMain/casesMain.js
+resources/js/translations/index.js                    ← shared i18n Vite entry
+resources/sass/*.scss|css                             ← also compiled by Vite for layoutnextvite
+vite.config.js
 ```
 
-Current examples:
+## Current migrations
+
+| Route area | Status | View | JS entry(ies) |
+|------------|--------|------|----------------|
+| Tasks inbox | **Vite** | `tasks.index` + `layoutnextvite` | `vite/tasks/loaderTasks.js` → ScreenBuilder scripts → `vite/tasks/tasks.js` |
+| Processes Catalogue (desktop) | **Vite** | `process.browser.index` (`/process-browser`) + `layoutnextvite` | `processes-catalogue/loaderProcessesCatalogue.js` → ScreenBuilder scripts → `processesCatalogue.js` |
+| Cases | **Vite** | `cases.casesMain` (`/cases`) + `layoutnextvite` | `jscomposition/.../loaderCasesMain.js` → GlobalScripts / ScreenBuilder → `casesMain.js` |
+| Login | **Vite** | `LOGIN_VIEW` / `auth.newLogin` | Head: `app.scss` + `vite/auth/login.js`; footer: GlobalScripts (skip dynamic-ui) + `translations/index.js` |
+| Auth layout (reset / email) | **Vite scripts** | `auth.layouts.auth` | `vite/auth/login.js` → GlobalScripts (skip dynamic-ui) → packages boot → `translations/index.js` |
+| Processes Catalogue (mobile) | Mix | `processes-catalogue/mobile.blade.php` | Mix catalogue / mobile bundle |
 
-| Route area | View | JS entry(ies) |
-|------------|------|-----------------|
-| Tasks inbox | `tasks.index` → `resources/views/tasks/index.blade.php` + `layoutnextvite` | `loaderTasks.js`, then package scripts, then `tasks.js` |
-| Demo | `/vite` → `vite.index` | `resources/js/vite/sample/app.js` |
-| Login (not switched) | `LOGIN_VIEW` / `auth.login` | Mix / legacy; Vite entry `auth/login.js` reserved |
+## Registered Vite inputs (`vite.config.js`)
+
+```
+resources/js/vite/auth/login.js
+resources/js/translations/index.js
+resources/js/vite/tasks/loaderTasks.js
+resources/js/vite/tasks/tasks.js
+resources/js/processes-catalogue/loaderProcessesCatalogue.js
+resources/js/processes-catalogue/processesCatalogue.js
+resources/jscomposition/cases/casesMain/loaderCasesMain.js
+resources/jscomposition/cases/casesMain/casesMain.js
+resources/sass/app.scss
+resources/sass/sidebar/sidebar.scss
+resources/sass/collapseDetails.scss
+resources/sass/tailwind.css
+```
 
 ## npm scripts
 
@@ -82,64 +117,77 @@ Dev tips:
 ## Checklist: transition a route to Vite
 
 1. **Blade**
-   - Prefer editing the existing Mix Blade in place (as with tasks), or add `resources/views/vite/<area>/<page>.blade.php` for greenfield/demo pages.
+   - Edit the existing Mix Blade in place.
    - Prefer `@extends('layouts.layoutnextvite')` for in-app pages.
-   - Load page JS with `@vite(['resources/js/vite/...'])`. Do **not** rely on `mix('css/app.css')` for Vite-only chrome if using `layoutnextvite`.
-   - Keep Mix package scripts that are still Mix-built as classic `<script src="{{ mix(...) }}">` / `$manager->getScripts()` when required.
-   - **Script order matters** when Mix packages depend on boot data / ScreenBuilder:
-     1. Inline boot (`window.temporal = {...}`)
-     2. `@vite` loader entry (e.g. `loaderTasks.js`)
+   - Load page JS with `@vite([...])`.
+   - Keep Mix package scripts as classic tags / `$manager->getScripts()` / `GlobalScripts` when required.
+   - **Script order:**
+     1. Inline boot (`window.temporal = {...}`; set `window.packages` if `setupMain` needs it)
+     2. `@vite` loader (`setupMain` + ScreenBuilder as needed)
      3. Package scripts (`defer`)
-     4. `@vite` page app (e.g. `tasks.js`)
+     4. `@vite` page app
 
 2. **JS entry**
-   - Add `resources/js/vite/<area>/<entry>.js` (Vue 2 Options API; `import Vue from 'vue'` in ESM).
-   - Register the path in `vite.config.js` → `laravel({ input: [...] })`.
-   - `.vue` extension in imports is **optional**: `resolve.extensions` includes `.vue` (see below). Explicit `.vue` is still fine and unambiguous.
-   - Side-effect modules used only for prototypes must `export default` if imported as default (see `resources/js/modules/isPMQL.js`).
-   - Prefer mirroring Mix globals when shared components expect `window.Processmaker` (lowercase `m`) as well as `window.ProcessMaker`.
+   - Vue 2 Options API; `import Vue from 'vue'` / `import VueRouter from 'vue-router'` in ESM.
+   - Register in `vite.config.js` → `laravel({ input: [...] })`.
+   - `.vue` extension optional (`resolve.extensions` includes `.vue`).
+   - Mirror `window.ProcessMaker` **and** `window.Processmaker` when legacy mixins expect the lowercase `m`.
+   - Prefer reading Blade boot data from `window.temporal` / `window.ProcessMaker` (ESM cannot see Blade `const` / `let`).
+   - Avoid circular ESM: do not import feature `EventBus` from a Mix page entry that also imports the feature graph.
 
 3. **Controller**
-   - Usually **no** controller change if the Blade name stays the same (`tasks.index`).
-   - Pass the **same** view data the page already expected. Missing vars cause Blade/Vue errors.
-   - For login later: wire a Vite Blade via `LOGIN_VIEW` or restore a map; do not leave a Vite view that expects `$block` / `addons` without providing them.
+   - Usually no change if the Blade name stays the same.
+   - Pass the same view data the page already expected.
 
 4. **Verify**
-   - With `vite:dev`: Network shows `127.0.0.1:5173` for `@vite` assets; Mix URLs stay on the app host (`/js/...`, `/css/...`).
-   - Without Vite running: `@vite` needs a prior `vite:build` (manifest), or the page errors.
-   - `mix('...')` must **not** point at `:5173` (if it does, delete stale `public/hot` and confirm `Vite::useHotFile(storage_path('vite.hot'))`).
+   - With `vite:dev`: Network shows `127.0.0.1:5173` for `@vite` assets; Mix URLs stay on the app host.
+   - Without Vite running: need a prior `vite:build` (manifest).
+   - `mix('...')` must not point at `:5173` (delete stale `public/hot` if it does).
+   - **PHPUnit:** `Tests\TestCase` calls `withoutVite()` so `@vite` Blades do not need `public/build/manifest.json`. Feature tests only see server HTML (JS-mounted DOM is not executed). Mix helpers still need `mix-manifest.json` if the Blade still calls `mix()`.
 
 5. **Do not**
    - Alias `@vite` in `vite.config.js` (shadows `@vite/client` / `@vite/env`).
-   - Assume absolute `/img/...` or `/css/...` inside Vite-served CSS resolve to Vite (fonts use `APP_URL` during `serve`).
    - Point Vite `hotFile` at `public/hot`.
+   - Include `auth.partials.auth-language-scripts` on Vite auth pages (still references dead Mix `builds/login/js/...` → `MixFileNotFoundException`).
 
 ## Known Vite config notes (`vite.config.js`)
 
-- **`resolve.extensions`**: includes `.vue` so imports may omit the extension (`import X from './Foo'` resolves `Foo.vue`). If both `Foo.js` and `Foo.vue` exist, `.js` wins (listed first).
-- **Styles alias**: `styles` / `~styles` → `resources/sass` (same as Mix) for `@import '~styles/variables'` in SFCs; Sass importer mirrors Webpack `~styles/...`.
+- **`resolve.extensions`**: includes `.vue`. If both `Foo.js` and `Foo.vue` exist, `.js` wins.
+- **Styles alias**: `styles` / `~styles` → `resources/sass`; Sass importer mirrors Webpack `~styles/...`.
 - **Tailwind**: entry `resources/sass/tailwind.css` + root `postcss.config.js`.
-- **Fonts in `serve`**: Sass `$FontPathOpenSans` / `$fa-font-path` prefixed with `APP_URL`; in `build`, root-absolute `/css/precompiled/...`.
+- **Fonts**: Sass `$FontPathOpenSans` / `$fa-font-path` are root-relative (`/css/precompiled/...`). During `vite:dev`, `server.proxy['/css']` forwards to `APP_URL` (avoids CORS).
 - **Vue2 plugin**: `includeAbsolute: false` so `/img/...` stays Laravel public URLs.
-- **`refresh`**: Blades under `resources/views/vite/**`, plus `resources/js/**/*.{js,vue}` and `resources/sass/**` (note: in-place Blades like `tasks/index.blade.php` are outside the vite views glob — hard-refresh or extend `refresh` if full reload on Blade edit is required).
-- **YAML plugin**: `@rollup/plugin-yaml` for YAML imports used by shared modules.
+- **`refresh`**: `resources/views/vite/**` (optional), `resources/js/**/*.{js,vue}`, `resources/sass/**`.
+- **YAML plugin**: `@rollup/plugin-yaml`.
+
+## Quick reference
+
+**Tasks**
+
+- View: `resources/views/tasks/index.blade.php` → `layoutnextvite`
+- Entries: `resources/js/vite/tasks/loaderTasks.js` → `$manager->getScripts()` → `tasks.js`
+- Boot: `window.temporal` before loader
+
+**Processes Catalogue (desktop)**
 
-## Quick reference: existing migrations
+- Route: `/process-browser` (`process.browser.index`)
+- View: `resources/views/processes-catalogue/index.blade.php` → `layoutnextvite`
+- Entries: `resources/js/processes-catalogue/loaderProcessesCatalogue.js` → `$manager->getScripts()` → `processesCatalogue.js`
+- Mobile still Mix
 
-**Tasks (live)**
+**Cases**
 
-- View: `resources/views/tasks/index.blade.php` → `layouts.layoutnextvite`
-- Entries: `resources/js/vite/tasks/loaderTasks.js` then package scripts then `resources/js/vite/tasks/tasks.js`
-- Boot: inline `window.temporal` **before** `@vite` loader (see `@section('js')`)
-- Loader copies `temporal.*` onto `window.ProcessMaker` / `window.Processmaker` for ScreenBuilder and legacy mixins
+- Route: `/cases`
+- View: `resources/views/cases/casesMain.blade.php` → `layoutnextvite`
+- Entries: `resources/jscomposition/cases/casesMain/loaderCasesMain.js` → GlobalScripts + `$manager->getScripts()` → `casesMain.js`
+- App components/routes/store stay in the same `jscomposition/cases/casesMain/` folder
+- Boot: `window.temporal.user` / `packages`; loader copies onto `window.ProcessMaker` (variables read `window.ProcessMaker.user`)
 
-**Demo**
+**Login / auth forms**
 
-- Route: `GET /vite` → `vite.index` (`routes/web.php`)
-- View: `resources/views/vite/index.blade.php`
-- Entry: `resources/js/vite/sample/app.js` (+ `DemoBadge.vue`)
+- Login: `auth.newLogin` — `@vite` login entry + translations
+- Password reset / email: `auth.layouts.auth` — same Vite scripts pattern (not `auth-language-scripts` Mix bundle)
 
-**Login (not migrated)**
+**Still Mix**
 
-- Controller: `LoginController@showLoginForm` → `config('app.login_view')` (`LOGIN_VIEW`, default `auth.newLogin`) or `auth.login`
-- Reserved Vite entry (not wired to a Blade yet): `resources/js/vite/auth/login.js`
+- Processes Catalogue mobile: `resources/views/processes-catalogue/mobile.blade.php`
diff --git a/resources/jscomposition/cases/casesMain/main.js b/resources/jscomposition/cases/casesMain/casesMain.js
similarity index 92%
rename from resources/jscomposition/cases/casesMain/main.js
rename to resources/jscomposition/cases/casesMain/casesMain.js
index 5c0eb608fe..0778d9dfe4 100644
--- a/resources/jscomposition/cases/casesMain/main.js
+++ b/resources/jscomposition/cases/casesMain/casesMain.js
@@ -1,3 +1,5 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
 import App from "./App.vue";
 import { routes } from "./routes";
 import { cases } from "./store";
diff --git a/resources/jscomposition/cases/casesMain/loader.js b/resources/jscomposition/cases/casesMain/loader.js
deleted file mode 100644
index 8f233e5e43..0000000000
--- a/resources/jscomposition/cases/casesMain/loader.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { setupMain } from "../../../js/next/setupMain";
-
-setupMain();
diff --git a/resources/jscomposition/cases/casesMain/loaderCasesMain.js b/resources/jscomposition/cases/casesMain/loaderCasesMain.js
new file mode 100644
index 0000000000..35b3ef543e
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/loaderCasesMain.js
@@ -0,0 +1,12 @@
+import { setupMain } from "../../../js/next/setupMain.js";
+import screenBuilderNext from "../../../js/next/screenBuilder.js";
+import * as ScreenBuilder from "@processmaker/screen-builder";
+import vueFormElements from "../../../js/next/libraries/vueFormElements";
+
+window.ScreenBuilder = ScreenBuilder;
+
+setupMain();
+screenBuilderNext();
+
+window.ProcessMaker.packages = window.temporal.packages;
+window.ProcessMaker.user = window.temporal.user;
diff --git a/resources/jscomposition/cases/casesMain/variables/index.js b/resources/jscomposition/cases/casesMain/variables/index.js
index 8e9b8ba56c..7a667aeb41 100644
--- a/resources/jscomposition/cases/casesMain/variables/index.js
+++ b/resources/jscomposition/cases/casesMain/variables/index.js
@@ -2,6 +2,6 @@ export default {};
 
 export const api = window.ProcessMaker?.apiClient;
 
-export const user = currentUser;
+export const user = window.ProcessMaker.user;
 
 export const useStore = () => Vue.globalStore;
diff --git a/resources/views/cases/casesMain.blade.php b/resources/views/cases/casesMain.blade.php
index 4ae4b57d77..c76bdc9ce7 100644
--- a/resources/views/cases/casesMain.blade.php
+++ b/resources/views/cases/casesMain.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layoutnext',['content_margin' => '', 'overflow-auto' => ''])
+@extends('layouts.layoutnextvite',['content_margin' => '', 'overflow-auto' => ''])
 
 @section('title')
   {{ __('Cases') }}
@@ -13,24 +13,20 @@
 @endsection
 
 @section('js')
-  <script src="{{ mix('js/manifest.js') }}"></script>
-  <script src="{{ mix('js/vue-vendor.js') }}"></script>
-  <script src="{{ mix('js/fortawesome-vendor.js') }}"></script>
-  <script src="{{ mix('js/bootstrap-vendor.js') }}"></script>
-  
+  {{-- temporal must exist before loaderCases (Vite modules run after deferred classic scripts) --}}
   <script>
-    const currentUser = @json($currentUser);
-    const screenBuilderScripts = @json($manager->getScripts());
-    window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.temporal = {};
+    window.temporal.user = @json($currentUser);
+    window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
   </script>
-
-  <script src="{{mix('js/composition/cases/casesMain/loader.js')}}"></script>
-
+  @vite(['resources/jscomposition/cases/casesMain/loaderCasesMain.js'])
   @foreach(GlobalScripts::getScripts() as $script)
-    <script src="{{$script}}"></script>
+    <script defer src="{{$script}}"></script>
   @endforeach
-
-  <script src="{{mix('js/composition/cases/casesMain/main.js')}}"></script>
+  @foreach($manager->getScripts() as $script)
+    <script defer src="{{$script}}"></script>
+  @endforeach
+  @vite(['resources/jscomposition/cases/casesMain/casesMain.js'])
 @endsection
 
 @section('css')
diff --git a/resources/views/processes-catalogue/index.blade.php b/resources/views/processes-catalogue/index.blade.php
index ca34bff986..4f9707ff78 100644
--- a/resources/views/processes-catalogue/index.blade.php
+++ b/resources/views/processes-catalogue/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite', ['content_margin' => '', 'overflow-auto' => ''])
 
 @section('title')
     {{__('Processes Catalogue')}}
@@ -25,22 +25,26 @@
 @endsection
 
 @section('js')
+  {{-- temporal must exist before loader (Vite modules run after deferred classic scripts) --}}
   <script>
-    window.ProcessMaker.isDocumenterInstalled = {{
+    window.temporal = {};
+    window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.temporal.isDocumenterInstalled = {{
       Js::from(\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled())
     }};
-    window.ProcessMaker.permission = {{
+    window.temporal.permission = {{
       Js::from(\Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks', 'projects', 'documentation'))
     }};
-    window.ProcessMaker.defaultSavedSearch = {{{$defaultSavedSearch ?? 'null'}}};
-    window.ProcessMaker.isTceCustomization = {{{config('app.tce_customization_enable') ? 'true' : 'false'}}};
-    window.ProcessMaker.metricsApiEndpoint = `{{{$metricsApiEndpoint}}}`;
+    window.temporal.defaultSavedSearch = {{{$defaultSavedSearch ?? 'null'}}};
+    window.temporal.isTceCustomization = {{{config('app.tce_customization_enable') ? 'true' : 'false'}}};
+    window.temporal.metricsApiEndpoint = `{{{$metricsApiEndpoint}}}`;
+    window.temporal.userConfiguration = @json($userConfiguration ?? []);
+    window.temporal.user = @json($currentUser);
+    window.packages = window.temporal.packages;
   </script>
+  @vite(['resources/js/processes-catalogue/loaderProcessesCatalogue.js'])
   @foreach($manager->getScripts() as $script)
-    <script src="{{$script}}"></script>
+    <script defer src="{{$script}}"></script>
   @endforeach
-  <script src="{{mix('js/processes-catalogue/index.js')}}"></script>
-  <script>
-    window.Processmaker.user = @json($currentUser);
-  </script>
+  @vite(['resources/js/processes-catalogue/processesCatalogue.js'])
 @endsection
diff --git a/vite.config.js b/vite.config.js
index 62c953695e..eb980ba81c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -57,6 +57,10 @@ export default defineConfig(({ mode }) => {
           'resources/js/translations/index.js',
           'resources/js/vite/tasks/loaderTasks.js',
           'resources/js/vite/tasks/tasks.js',
+          'resources/js/processes-catalogue/loaderProcessesCatalogue.js',
+          'resources/js/processes-catalogue/processesCatalogue.js',
+          'resources/jscomposition/cases/casesMain/loaderCasesMain.js',
+          'resources/jscomposition/cases/casesMain/casesMain.js',
           // Same style entrypoints as webpack.mix.js
           'resources/sass/app.scss',
           'resources/sass/sidebar/sidebar.scss',
diff --git a/webpack.mix.js b/webpack.mix.js
index 6457ebf489..ddb3411d5f 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -146,12 +146,9 @@ mix
   .js("resources/js/requests/mobile.js", "public/js/requests/mobile.js")
   .js("resources/js/requests/show.js", "public/js/requests")
   .js("resources/js/requests/preview.js", "public/js/requests")
-  .js("resources/jscomposition/cases/casesMain/main.js", "public/js/composition/cases/casesMain/main.js")
   .js("resources/jscomposition/cases/casesDetail/edit.js", "public/js/composition/cases/casesDetail/edit.js")
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 
-  .js("resources/js/processes-catalogue/index.js", "public/js/processes-catalogue/index.js")
-
   .js("resources/js/tasks/mobile.js", "public/js/tasks/mobile.js")
   .js("resources/js/tasks/show.js", "public/js/tasks/show.js")
   .js("resources/js/tasks/router.js", "public/js/tasks/router.js")
@@ -163,7 +160,6 @@ mix
 
   // Note, that this should go last for the extract to properly put the manifest and vendor in the right location
   // See: https://github.com/JeffreyWay/laravel-mix/issues/1118
-  .js("resources/jscomposition/cases/casesMain/loader.js", "public/js/composition/cases/casesMain")
   .js("resources/jscomposition/cases/casesDetail/loader.js", "public/js/composition/cases/casesDetail")
   .js("resources/js/initialLoad.js", "public/js")
 

From e76ff29d1ac2fc717723836558d54e7e870cb3b1 Mon Sep 17 00:00:00 2001
From: Henry Jonas <jonathan.quispe@processmaker.com>
Date: Wed, 29 Jul 2026 11:35:56 -0400
Subject: [PATCH 2/2] FOUR-32412: VITE /cases/{id} migration

---
 resources/js/initialLoad.js                   |   3 +
 resources/js/vite/AGENTS.md                   |  14 ++
 .../cases/casesDetail/casesDetail.js          | 186 ++++++++++++++++++
 .../cases/casesDetail/loaderCasesDetail.js    |  32 +++
 resources/views/cases/edit.blade.php          |  64 ++----
 vite.config.js                                |  34 ++++
 webpack.mix.js                                |   2 -
 7 files changed, 290 insertions(+), 45 deletions(-)
 create mode 100644 resources/jscomposition/cases/casesDetail/casesDetail.js
 create mode 100644 resources/jscomposition/cases/casesDetail/loaderCasesDetail.js

diff --git a/resources/js/initialLoad.js b/resources/js/initialLoad.js
index 696f23034d..5a40d34ef5 100644
--- a/resources/js/initialLoad.js
+++ b/resources/js/initialLoad.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names */
 // Our initial node types to register with our modeler
+import Vue from "vue";
 import {
   association,
   endEvent,
@@ -51,6 +52,8 @@ import ErrorHandlingRetryAttempts from "./processes/modeler/components/inspector
 import ErrorHandlingRetryWaitTime from "./processes/modeler/components/inspector/ErrorHandlingRetryWaitTime.vue";
 import NotifyProcessManager from "./processes/modeler/components/inspector/NotifyProcessManager.vue";
 
+const ProcessMaker = window.ProcessMaker;
+
 Vue.component("UserSelect", UserSelect);
 Vue.component("UserById", UserById);
 Vue.component("GroupSelect", GroupSelect);
diff --git a/resources/js/vite/AGENTS.md b/resources/js/vite/AGENTS.md
index 8c30f3709f..aad9f2cab2 100644
--- a/resources/js/vite/AGENTS.md
+++ b/resources/js/vite/AGENTS.md
@@ -49,6 +49,7 @@ resources/views/layouts/layoutnextvite.blade.php
 resources/views/tasks/index.blade.php                 ← Vite
 resources/views/processes-catalogue/index.blade.php   ← Vite (desktop)
 resources/views/cases/casesMain.blade.php             ← Vite
+resources/views/cases/edit.blade.php                  ← Vite (case detail)
 resources/views/auth/newLogin.blade.php               ← Vite
 resources/views/auth/layouts/auth.blade.php           ← Vite scripts (reset/email)
 resources/js/vite/tasks/                              ← Tasks entries
@@ -57,6 +58,8 @@ resources/js/processes-catalogue/loaderProcessesCatalogue.js
 resources/js/processes-catalogue/processesCatalogue.js
 resources/jscomposition/cases/casesMain/loaderCasesMain.js
 resources/jscomposition/cases/casesMain/casesMain.js
+resources/jscomposition/cases/casesDetail/loaderCasesDetail.js
+resources/jscomposition/cases/casesDetail/casesDetail.js
 resources/js/translations/index.js                    ← shared i18n Vite entry
 resources/sass/*.scss|css                             ← also compiled by Vite for layoutnextvite
 vite.config.js
@@ -69,6 +72,7 @@ vite.config.js
 | Tasks inbox | **Vite** | `tasks.index` + `layoutnextvite` | `vite/tasks/loaderTasks.js` → ScreenBuilder scripts → `vite/tasks/tasks.js` |
 | Processes Catalogue (desktop) | **Vite** | `process.browser.index` (`/process-browser`) + `layoutnextvite` | `processes-catalogue/loaderProcessesCatalogue.js` → ScreenBuilder scripts → `processesCatalogue.js` |
 | Cases | **Vite** | `cases.casesMain` (`/cases`) + `layoutnextvite` | `jscomposition/.../loaderCasesMain.js` → GlobalScripts / ScreenBuilder → `casesMain.js` |
+| Case Detail | **Vite** | `cases.edit` + `layoutnextvite` | `jscomposition/.../loaderCasesDetail.js` → `initialLoad` (Vite) + GlobalScripts / modeler scripts → `casesDetail.js` |
 | Login | **Vite** | `LOGIN_VIEW` / `auth.newLogin` | Head: `app.scss` + `vite/auth/login.js`; footer: GlobalScripts (skip dynamic-ui) + `translations/index.js` |
 | Auth layout (reset / email) | **Vite scripts** | `auth.layouts.auth` | `vite/auth/login.js` → GlobalScripts (skip dynamic-ui) → packages boot → `translations/index.js` |
 | Processes Catalogue (mobile) | Mix | `processes-catalogue/mobile.blade.php` | Mix catalogue / mobile bundle |
@@ -84,6 +88,8 @@ resources/js/processes-catalogue/loaderProcessesCatalogue.js
 resources/js/processes-catalogue/processesCatalogue.js
 resources/jscomposition/cases/casesMain/loaderCasesMain.js
 resources/jscomposition/cases/casesMain/casesMain.js
+resources/jscomposition/cases/casesDetail/loaderCasesDetail.js
+resources/jscomposition/cases/casesDetail/casesDetail.js
 resources/sass/app.scss
 resources/sass/sidebar/sidebar.scss
 resources/sass/collapseDetails.scss
@@ -183,6 +189,14 @@ Dev tips:
 - App components/routes/store stay in the same `jscomposition/cases/casesMain/` folder
 - Boot: `window.temporal.user` / `packages`; loader copies onto `window.ProcessMaker` (variables read `window.ProcessMaker.user`)
 
+**Case Detail**
+
+- View: `resources/views/cases/edit.blade.php` → `layoutnextvite`
+- Entries: `resources/jscomposition/cases/casesDetail/loaderCasesDetail.js` → `@vite` `resources/js/initialLoad.js` + GlobalScripts + modeler package scripts (+ optional package-files) → `casesDetail.js`
+- Boot: `window.temporal` holds request/modeler payload; loader applies `ProcessMaker.modeler` / EventBus / `PMBlockList`
+- Variables read from `window.temporal` (ESM-safe)
+- Modeler SVG icons: Vite plugin rewrites `@processmaker/modeler` asset URLs to `/js/img/` (same files Mix copies from `node_modules/@processmaker/modeler/dist/img`)
+
 **Login / auth forms**
 
 - Login: `auth.newLogin` — `@vite` login entry + translations
diff --git a/resources/jscomposition/cases/casesDetail/casesDetail.js b/resources/jscomposition/cases/casesDetail/casesDetail.js
new file mode 100644
index 0000000000..f6c945c91f
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/casesDetail.js
@@ -0,0 +1,186 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+import Tabs from "./components/Tabs.vue";
+import Timeline from "../../../js/components/Timeline.vue";
+import StageBar from "./components/StageBar.vue";
+import { CollapsableContainer } from "../../base";
+import { cases } from "./store";
+import {
+  updateUserConfiguration, getUserConfiguration, getCommentsData, updateRequest,
+} from "./api";
+import {
+  useStore, getRequest, getRequestId, getStageName, getProgressStage,
+} from "./variables";
+
+Vue.globalStore.registerModule("core:cases", cases);
+
+window.addEventListener("load", () => {
+  const caseDetail = new Vue({
+    el: "#case-detail",
+    components: {
+      CaseDetail, Tabs, CollapsableContainer, Timeline, StageBar,
+    },
+    data() {
+      const t = window.temporal;
+      return {
+        data: t.data,
+        request: t.request,
+        canCancel: t.canCancel,
+        canViewPrint: t.canViewPrint,
+        status: "ACTIVE",
+        userRequested: [],
+        errorLogs: t.errorLogs,
+        packages: [],
+        processId: t.processId,
+        canViewComments: t.canViewComments,
+        disabled: false,
+        retryDisabled: false,
+        tabDefault: "details",
+        collapseContainer: true,
+        tabs: [
+          {
+            name: "Details",
+            href: "#details",
+            current: "details",
+            show: true,
+            content: null,
+          },
+          {
+            name: "Comments",
+            href: "#comments",
+            current: "comments",
+            show: true,
+            content: null,
+          },
+        ],
+        headerModel: false,
+        progressStage: getProgressStage(),
+        stageName: getStageName(),
+      };
+    },
+    computed: {
+      /**
+       * Get the list of participants in the request.
+       *
+       */
+      participants() {
+        return this.request.participants;
+      },
+      classStatusCard() {
+        const header = {
+          ACTIVE: "active-style",
+          COMPLETED: "active-style",
+          CANCELED: "canceled-style ",
+          ERROR: "canceled-style",
+        };
+        return `tw-rounded-md text-status ${header[this.request.status.toUpperCase()]}`;
+      },
+      labelDate() {
+        const label = {
+          ACTIVE: "In Progress Since",
+          COMPLETED: "Completed On",
+          CANCELED: "Canceled ",
+          ERROR: "Failed On",
+        };
+        return label[this.request.status.toUpperCase()];
+      },
+      statusDate() {
+        const status = {
+          ACTIVE: this.request.created_at,
+          COMPLETED: this.request.completed_at,
+          CANCELED: this.request.updated_at,
+          ERROR: this.request.updated_at,
+        };
+
+        return status[this.request.status.toUpperCase()];
+      },
+      statusLabel() {
+        const status = {
+          ACTIVE: this.$t("In Progress"),
+          COMPLETED: this.$t("Completed"),
+          CANCELED: this.$t("Canceled"),
+          ERROR: this.$t("Error"),
+        };
+
+        return status[this.request.status.toUpperCase()];
+      },
+      requestBy() {
+        return [this.request.user];
+      },
+      panCommentInVueOptionsComponents() {
+        return "pan-comment" in Vue.options.components;
+      },
+
+    },
+    async mounted() {
+      const store = useStore();
+      this.packages = window.ProcessMaker.requestShowPackages;
+
+      const response = await this.getUserConf();
+
+      store.commit("core:cases/updateUserConfiguration", response);
+      this.collapseContainer = store.getters["core:cases/getCollapseContainer"];
+    },
+    methods: {
+      onCancel() {
+        ProcessMaker.confirmModal(
+          this.$t("Caution!"),
+          this.$t("Are you sure you want cancel this request?"),
+          "",
+          () => {
+            this.okCancel();
+          },
+        );
+      },
+      async onToogleContainer(value) {
+        const store = useStore();
+        store.commit("core:cases/updateCollapseContainer", value);
+
+        const userConf = store.getters["core:cases/getUserConfiguration"];
+
+        const response = await updateUserConfiguration({
+          user_id: userConf.user_id,
+          ui_configuration: userConf.ui_configuration,
+        });
+      },
+      getUserConf: async () => {
+        const response = await getUserConfiguration();
+
+        return {
+          user_id: response.user_id,
+          ui_configuration: JSON.parse(response.ui_configuration),
+        };
+      },
+      getCommentsData: async () => {
+        const request = getRequest();
+
+        const response = await getCommentsData({
+          params: {
+            type: "COMMENT,REPLY",
+            order_direction: "desc",
+            case_number: request.case_number,
+          },
+        });
+
+        return response;
+      },
+      async okCancel() {
+        // single click
+        if (this.disabled) {
+          return;
+        }
+        this.disabled = true;
+        try {
+          await updateRequest(getRequestId(), {
+            status: "CANCELED",
+          });
+
+          ProcessMaker.alert(this.$t("The request was canceled."), "success");
+          window.location.reload();
+        } catch (error) {
+          this.disabled = false;
+        }
+      },
+    },
+  });
+});
diff --git a/resources/jscomposition/cases/casesDetail/loaderCasesDetail.js b/resources/jscomposition/cases/casesDetail/loaderCasesDetail.js
new file mode 100644
index 0000000000..61def1b94c
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/loaderCasesDetail.js
@@ -0,0 +1,32 @@
+import { setupMain } from "../../../js/next/setupMain.js";
+import screenBuilderNext from "../../../js/next/screenBuilder.js";
+import modeler from "../../../js/next/modeler.js";
+import "../../../js/next/libraries/vueFormElements.js";
+import "../../../js/next/libraries/modelerInspector.js";
+import * as ScreenBuilder from "@processmaker/screen-builder";
+
+window.ScreenBuilder = ScreenBuilder;
+
+setupMain();
+screenBuilderNext();
+modeler();
+
+window.ProcessMaker.caseNumber = request.case_number;
+window.ProcessMaker.modeler = {
+  xml: temporal.bpmn,
+  configurables: [],
+  requestCompletedNodes: inflightData.requestCompletedNodes,
+  requestInProgressNodes: inflightData.requestInProgressNodes,
+  requestIdleNodes: inflightData.requestIdleNodes,
+  requestId: inflightData.requestId,
+};
+
+window.ProcessMaker.EventBus.$on("modeler-start", ({ loadXML }) => {
+  loadXML(window.ProcessMaker.modeler.xml);
+});
+
+window.PM4ConfigOverrides = {
+  requestFiles: window.temporal.requestFiles,
+};
+
+window.ProcessMaker.PMBlockList = window.temporal.pmBlockList;
diff --git a/resources/views/cases/edit.blade.php b/resources/views/cases/edit.blade.php
index d340a35dd8..e50f16cf6e 100644
--- a/resources/views/cases/edit.blade.php
+++ b/resources/views/cases/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layoutnext',['content_margin' => '', 'overflow-auto' => ''])
+@extends('layouts.layoutnextvite',['content_margin' => '', 'overflow-auto' => ''])
 
 @section('title')
   {{ __('Case Detail') }}
@@ -140,17 +140,12 @@ class="tw-grow tw-overflow-hidden"
 @endsection
 
 @section('js')
-  <script src="{{ mix('js/manifest.js') }}"></script>
-  <script src="{{ mix('js/vue-vendor.js') }}"></script>
-  <script src="{{ mix('js/fortawesome-vendor.js') }}"></script>
-  <script src="{{ mix('js/bootstrap-vendor.js') }}"></script>
-  <script src="{{ mix('js/modeler-vendor.js') }}"></script>
+  {{-- temporal must exist before loader (Vite modules run after deferred classic scripts) --}}
   <script>
-    const data = @json($request->getRequestData());
+    window.temporal = {};
     const requestId = @json($request->getKey());
     const request = @json($request->getRequestAsArray());
-    const canCancel = @json($canCancel);
-    const canViewPrint = @json($canPrintScreens);
+
     const errorLogs = @json(['data' => $request->getErrors()]);
     const processId = @json($request->process->id);
     const canViewComments = @json($canViewComments);
@@ -161,43 +156,27 @@ class="tw-grow tw-overflow-hidden"
     const currentStages = @json($currentStages);
     const progressStage = @json($progressStage);
     const tceCustomizationEnable = @json($isTceCustomization);
-    window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
-  </script>
-  <script src="{{mix('js/composition/cases/casesDetail/loader.js')}}"></script>
-  <script src="{{mix('js/initialLoad.js')}}"></script>
-
-  <script>
-    window.ProcessMaker.caseNumber = request.case_number;
-    window.ProcessMaker.modeler = {
-      xml: @json($bpmn),
-      configurables: [],
-      requestCompletedNodes: inflightData.requestCompletedNodes,
-      requestInProgressNodes: inflightData.requestInProgressNodes,
-      requestIdleNodes: inflightData.requestIdleNodes,
-      requestId: inflightData.requestId,
-    }
 
-    window.ProcessMaker.EventBus.$on('modeler-start', ({
-      loadXML
-    }) => {
-      loadXML(window.ProcessMaker.modeler.xml);
-    });
-
-    window.PM4ConfigOverrides = {
-      requestFiles: @json($request->requestFiles())
-    };
-
-    window.ProcessMaker.PMBlockList = @json($pmBlockList);
+    temporal.requestId = requestId;
+    temporal.request = request;
+    temporal.canCancel = @json($canCancel);
+    temporal.canViewPrint = @json($canPrintScreens);
+    temporal.data = @json($request->getRequestData());
+    temporal.bpmn = @json($bpmn);
+    temporal.requestFiles = @json($request->requestFiles());
+    temporal.pmBlockList = @json($pmBlockList);
+    console.log(temporal);
+    window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
   </script>
+  @vite(['resources/jscomposition/cases/casesDetail/loaderCasesDetail.js'])
+  @vite(['resources/js/initialLoad.js'])
 
-  <!-- Load the screen scripts -->
   @foreach(GlobalScripts::getScripts() as $script)
-    <script src="{{$script}}"></script>
+    <script defer src="{{$script}}"></script>
   @endforeach
-  
-  <!-- Load the modeler scripts -->
+
   @foreach($managerModelerScripts as $params)
-    <script
+    <script defer
     @foreach ($params as $key => $value)
       @if (is_bool($value))
         {{ $key }}
@@ -209,11 +188,10 @@ class="tw-grow tw-overflow-hidden"
   @endforeach
 
   @if (hasPackage('package-files'))
-  <!-- TODO: Replace with script injector like we do for modeler and screen builder -->
-  <script src="{{ mix('js/manager-cases.js', 'vendor/processmaker/packages/package-files') }}"></script>
+  <script defer src="{{ mix('js/manager-cases.js', 'vendor/processmaker/packages/package-files') }}"></script>
   @endif
 
-  <script src="{{mix('js/composition/cases/casesDetail/edit.js')}}"></script>
+  @vite(['resources/jscomposition/cases/casesDetail/casesDetail.js'])
 @endsection
 
 @section('css')
diff --git a/vite.config.js b/vite.config.js
index eb980ba81c..726bb6492b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,6 +7,32 @@ import yaml from '@rollup/plugin-yaml';
 
 const stylesPath = path.resolve(__dirname, 'resources/sass');
 
+/**
+ * @processmaker/modeler (Vue CLI lib) resolves SVG icons as:
+ *   __webpack_require__.p + "img/start-event....svg"
+ * Mix loads modeler-vendor from /js/, so setPublicPath sets p="/js/" and icons
+ * hit public/js/img (copied in webpack.mix.js). Vite ESM has no script URL, so p
+ * stays "" and relative img/... resolves against the page (/cases/img/...).
+ * Rewrite to absolute /js/img/ paths Mix already publishes.
+ */
+const modelerPublicPathPlugin = {
+  name: 'processmaker-modeler-public-path',
+  enforce: 'pre',
+  transform(code, id) {
+    const normalized = id.replace(/\\/g, '/');
+    if (!normalized.includes('/@processmaker/modeler/') || !normalized.includes('modeler.common')) {
+      return null;
+    }
+    if (!code.includes('__webpack_require__.p + "img/')) {
+      return null;
+    }
+    return {
+      code: code.replace(/__webpack_require__\.p \+ "img\//g, '"/js/img/'),
+      map: null,
+    };
+  },
+};
+
 /**
  * Resolve Webpack-style `~styles/...` imports used in Vue SFC <style lang="scss">.
  * Mirrors webpack.mix.js alias: styles -> resources/sass
@@ -47,6 +73,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     plugins: [
+      modelerPublicPathPlugin,
       yaml(),
       laravel({
         // Keep Vite hot file away from public/hot so Laravel Mix's mix() helper
@@ -61,6 +88,9 @@ export default defineConfig(({ mode }) => {
           'resources/js/processes-catalogue/processesCatalogue.js',
           'resources/jscomposition/cases/casesMain/loaderCasesMain.js',
           'resources/jscomposition/cases/casesMain/casesMain.js',
+          'resources/jscomposition/cases/casesDetail/loaderCasesDetail.js',
+          'resources/jscomposition/cases/casesDetail/casesDetail.js',
+          'resources/js/initialLoad.js',
           // Same style entrypoints as webpack.mix.js
           'resources/sass/app.scss',
           'resources/sass/sidebar/sidebar.scss',
@@ -106,6 +136,10 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    // Let Vite transform modeler.common.js (plugin above) instead of esbuild prebundle.
+    optimizeDeps: {
+      exclude: ['@processmaker/modeler'],
+    },
     build: {
       outDir: 'public/build',
       emptyOutDir: true,
diff --git a/webpack.mix.js b/webpack.mix.js
index ddb3411d5f..2745426fe3 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -146,7 +146,6 @@ mix
   .js("resources/js/requests/mobile.js", "public/js/requests/mobile.js")
   .js("resources/js/requests/show.js", "public/js/requests")
   .js("resources/js/requests/preview.js", "public/js/requests")
-  .js("resources/jscomposition/cases/casesDetail/edit.js", "public/js/composition/cases/casesDetail/edit.js")
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 
   .js("resources/js/tasks/mobile.js", "public/js/tasks/mobile.js")
@@ -160,7 +159,6 @@ mix
 
   // Note, that this should go last for the extract to properly put the manifest and vendor in the right location
   // See: https://github.com/JeffreyWay/laravel-mix/issues/1118
-  .js("resources/jscomposition/cases/casesDetail/loader.js", "public/js/composition/cases/casesDetail")
   .js("resources/js/initialLoad.js", "public/js")
 
   .js("resources/js/tasks/loaderMain.js", "public/js/tasks")