Issue #446: Admin JS broken after fresh install

.github/workflows/build-assets.yml

@@ -0,0 +1,33 @@
+name: Build Assets
+
+on: push
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    name: Build assets (Node ${{ matrix.node-version }})
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: ["20", "22", "24", "26"]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build assets
+        run: npm run prod
+
+      - name: Audit dependencies
+        run: npm audit --audit-level=critical

README.md

@@ -37,6 +37,7 @@ Documentation is available at: https://docs.dotkernel.org/admin-documentation/
 [![codecov](https://codecov.io/gh/dotkernel/admin/graph/badge.svg?token=BQS43UWAM4)](https://codecov.io/gh/dotkernel/admin)
 [![Qodana](https://github.com/dotkernel/admin/actions/workflows/qodana_code_quality.yml/badge.svg?branch=7.0)](https://github.com/dotkernel/admin/actions/workflows/qodana_code_quality.yml)
 [![PHPStan](https://github.com/dotkernel/admin/actions/workflows/static-analysis.yml/badge.svg?branch=7.0)](https://github.com/dotkernel/admin/actions/workflows/static-analysis.yml)
+[![Build Assets](https://github.com/dotkernel/admin/actions/workflows/build-assets.yml/badge.svg?branch=7.0)](https://github.com/dotkernel/admin/actions/workflows/build-assets.yml)
 
 ## Getting Started
 

composer.json

@@ -67,7 +67,7 @@
         "phpunit/phpunit": "^12.5.23",
         "roave/security-advisories": "dev-latest",
         "symfony/var-dumper": "^7.4.0",
-        "vincentlanglet/twig-cs-fixer": "^3.11.0"
+        "vincentlanglet/twig-cs-fixer": "^4.0.0"
     },
     "autoload": {
         "psr-4": {

package.json

@@ -4,7 +4,7 @@
   "description": "Web starter package suitable for admin applications.",
   "main": "index.js",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node_modules/.bin/webpack -d --progress --hide-modules",
+    "dev": "cross-env NODE_ENV=development node_modules/.bin/webpack --mode development --progress",
     "watch": "cross-env NODE_ENV=development webpack --watch --mode development --progress",
     "prod": "cross-env NODE_ENV=production node_modules/.bin/webpack --mode=production --progress"
   },
@@ -28,11 +28,11 @@
     "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "jquery": "^4.0.0",
-    "jquery-sparkline": "^2.4.0",
+    "jquery-migrate": "^4.0.2",
     "lodash": "^4.18.1",
     "moment": "^2.30.1",
     "perfect-scrollbar": "^1.5.6",
-    "skycons": "^1.0.0"
+    "jquery-sparkline": "^2.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

src/Admin/templates/admin/login-form.html.twig

@@ -18,7 +18,7 @@
     <div class="peers ai-s fxw-nw h-100vh align-items-center">
         <div class="container">
             <div class="row">
-                <div class="col-md-6 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r">
+                <div class="col-md-6 peer pX-40 pY-80 h-100 bgc-white pos-r">
                     <div class="pos-a centerXY">
                         <div class="bgc-white bdrs-50p w-100">
                             <a href="{{ path('app::index-redirect') }}">

src/App/assets/js/_jquery-setup.js

@@ -0,0 +1,3 @@
+import $ from 'jquery';
+
+$.migrateMute = true;

src/App/assets/js/components/_admin.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 $(document).ready(() => {
     const request = async(url, options = {}) => {
         try {

src/App/assets/js/components/_chart.js

@@ -1,147 +1,147 @@
 import Chart from 'chart.js/auto';
 import { COLORS } from './_colors';
 
-export default (function () {
+(function () {
   // ------------------------------------------------------
   // @Line Charts
   // ------------------------------------------------------
 
-  const lineChartBox = document.getElementById('line-chart');
-
-  if (lineChartBox) {
-    const lineCtx = lineChartBox.getContext('2d');
-    lineChartBox.height = 80;
-
-    new Chart(lineCtx, {
-      type: 'line',
-      data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          label                : 'Series A',
-          backgroundColor      : 'rgba(237, 231, 246, 0.5)',
-          borderColor          : COLORS['deep-purple-500'],
-          pointBackgroundColor : COLORS['deep-purple-700'],
-          borderWidth          : 2,
-          data                 : [60, 50, 70, 60, 50, 70, 60],
-        }, {
-          label                : 'Series B',
-          backgroundColor      : 'rgba(232, 245, 233, 0.5)',
-          borderColor          : COLORS['blue-500'],
-          pointBackgroundColor : COLORS['blue-700'],
-          borderWidth          : 2,
-          data                 : [70, 75, 85, 70, 75, 85, 70],
-        }],
-      },
-
-      options: {
-        legend: {
-          display: false,
-        },
-      },
-
-    });
-  }
+    const lineChartBox = document.getElementById('line-chart');
+
+    if (lineChartBox) {
+        const lineCtx       = lineChartBox.getContext('2d');
+        lineChartBox.height = 80;
+
+        new Chart(lineCtx, {
+            type: 'line',
+            data: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    label                : 'Series A',
+                    backgroundColor      : 'rgba(237, 231, 246, 0.5)',
+                    borderColor          : COLORS['deep-purple-500'],
+                    pointBackgroundColor : COLORS['deep-purple-700'],
+                    borderWidth          : 2,
+                    data                 : [60, 50, 70, 60, 50, 70, 60],
+                }, {
+                    label                : 'Series B',
+                    backgroundColor      : 'rgba(232, 245, 233, 0.5)',
+                    borderColor          : COLORS['blue-500'],
+                    pointBackgroundColor : COLORS['blue-700'],
+                    borderWidth          : 2,
+                    data                 : [70, 75, 85, 70, 75, 85, 70],
+                }],
+            },
+
+            options: {
+                legend: {
+                    display: false,
+                },
+            },
+
+        });
+    }
 
   // ------------------------------------------------------
   // @Bar Charts
   // ------------------------------------------------------
 
-  const barChartBox = document.getElementById('bar-chart');
-
-  if (barChartBox) {
-    const barCtx = barChartBox.getContext('2d');
-
-    new Chart(barCtx, {
-      type: 'bar',
-      data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          label           : 'Dataset 1',
-          backgroundColor : COLORS['deep-purple-500'],
-          borderColor     : COLORS['deep-purple-800'],
-          borderWidth     : 1,
-          data            : [10, 50, 20, 40, 60, 30, 70],
-        }, {
-          label           : 'Dataset 2',
-          backgroundColor : COLORS['light-blue-500'],
-          borderColor     : COLORS['light-blue-800'],
-          borderWidth     : 1,
-          data            : [10, 50, 20, 40, 60, 30, 70],
-        }],
-      },
-
-      options: {
-        responsive: true,
-        legend: {
-          position: 'bottom',
-        },
-      },
-    });
-  }
+    const barChartBox = document.getElementById('bar-chart');
+
+    if (barChartBox) {
+        const barCtx = barChartBox.getContext('2d');
+
+        new Chart(barCtx, {
+            type: 'bar',
+            data: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    label           : 'Dataset 1',
+                    backgroundColor : COLORS['deep-purple-500'],
+                    borderColor     : COLORS['deep-purple-800'],
+                    borderWidth     : 1,
+                    data            : [10, 50, 20, 40, 60, 30, 70],
+                }, {
+                    label           : 'Dataset 2',
+                    backgroundColor : COLORS['light-blue-500'],
+                    borderColor     : COLORS['light-blue-800'],
+                    borderWidth     : 1,
+                    data            : [10, 50, 20, 40, 60, 30, 70],
+                }],
+            },
+
+            options: {
+                responsive: true,
+                legend: {
+                    position: 'bottom',
+                },
+            },
+        });
+    }
 
   // ------------------------------------------------------
   // @Area Charts
   // ------------------------------------------------------
 
-  const areaChartBox = document.getElementById('area-chart');
-
-  if (areaChartBox) {
-    const areaCtx = areaChartBox.getContext('2d');
-
-    new Chart(areaCtx, {
-      type: 'line',
-      data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          backgroundColor : 'rgba(3, 169, 244, 0.5)',
-          borderColor     : COLORS['light-blue-800'],
-          data            : [10, 50, 20, 40, 60, 30, 70],
-          label           : 'Dataset',
-          fill            : 'start',
-        }],
-      },
-    });
-  }
+    const areaChartBox = document.getElementById('area-chart');
+
+    if (areaChartBox) {
+        const areaCtx = areaChartBox.getContext('2d');
+
+        new Chart(areaCtx, {
+            type: 'line',
+            data: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    backgroundColor : 'rgba(3, 169, 244, 0.5)',
+                    borderColor     : COLORS['light-blue-800'],
+                    data            : [10, 50, 20, 40, 60, 30, 70],
+                    label           : 'Dataset',
+                    fill            : 'start',
+                }],
+            },
+        });
+    }
 
   // ------------------------------------------------------
   // @Scatter Charts
   // ------------------------------------------------------
 
-  const scatterChartBox = document.getElementById('scatter-chart');
-
-  if (scatterChartBox) {
-    const scatterCtx = scatterChartBox.getContext('2d');
-
-    Chart.Scatter(scatterCtx, {
-      data: {
-        datasets: [{
-          label           : 'My First dataset',
-          borderColor     : COLORS['red-500'],
-          backgroundColor : COLORS['red-500'],
-          data: [
-            { x: 10, y: 20 },
-            { x: 30, y: 40 },
-            { x: 50, y: 60 },
-            { x: 70, y: 80 },
-            { x: 90, y: 100 },
-            { x: 110, y: 120 },
-            { x: 130, y: 140 },
-          ],
-        }, {
-          label           : 'My Second dataset',
-          borderColor     : COLORS['green-500'],
-          backgroundColor : COLORS['green-500'],
-          data: [
-            { x: 150, y: 160 },
-            { x: 170, y: 180 },
-            { x: 190, y: 200 },
-            { x: 210, y: 220 },
-            { x: 230, y: 240 },
-            { x: 250, y: 260 },
-            { x: 270, y: 280 },
-          ],
-        }],
-      },
-    });
-  }
-}())
+    const scatterChartBox = document.getElementById('scatter-chart');
+
+    if (scatterChartBox) {
+        const scatterCtx = scatterChartBox.getContext('2d');
+
+        Chart.Scatter(scatterCtx, {
+            data: {
+                datasets: [{
+                    label           : 'My First dataset',
+                    borderColor     : COLORS['red-500'],
+                    backgroundColor : COLORS['red-500'],
+                    data: [
+                    { x: 10, y: 20 },
+                    { x: 30, y: 40 },
+                    { x: 50, y: 60 },
+                    { x: 70, y: 80 },
+                    { x: 90, y: 100 },
+                    { x: 110, y: 120 },
+                    { x: 130, y: 140 },
+                    ],
+                }, {
+                    label           : 'My Second dataset',
+                    borderColor     : COLORS['green-500'],
+                    backgroundColor : COLORS['green-500'],
+                    data: [
+                    { x: 150, y: 160 },
+                    { x: 170, y: 180 },
+                    { x: 190, y: 200 },
+                    { x: 210, y: 220 },
+                    { x: 230, y: 240 },
+                    { x: 250, y: 260 },
+                    { x: 270, y: 280 },
+                    ],
+                }],
+            },
+        });
+    }
+}());