Upgrade PrimeVue from 3 to 4 with Aura theme preset

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "1.0.0",
       "dependencies": {
+        "@primevue/themes": "^4.5.4",
         "axios": "^1.13.6",
         "chart.js": "^4.5.1",
         "chartjs-adapter-moment": "^1.0.1",
@@ -27,8 +28,8 @@
         "moment": "^2.30.1",
         "pinia": "^2.3.1",
         "pinia-plugin-persistedstate": "^3.2.3",
-        "primeicons": "^6.0.1",
+        "primeicons": "^7.0.0",
-        "primevue": "^3.53.0",
+        "primevue": "^4.5.4",
         "tippy.js": "^6.3.7",
         "vue": "^3.5.29",
         "vue-axios": "^3.5.2",
@@ -1325,6 +1326,88 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-2.0.3.tgz",
+      "integrity": "sha512-2ykAB6BaHzR/6TwF8ShpJTsZrid6cVIEBVlookSdvOdmlWuevGu5vWOScgIwqWwlZcvkFYAGR/SUV3OHCTBMdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-2.0.3.tgz",
+      "integrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
+      "integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.5.4.tgz",
+      "integrity": "sha512-lYJJB3wTrDJ8MkLctzHfrPZAqXVxoatjIsswSJzupatf6ZogJHVYADUKcn1JAkLLk8dtV1FA2AxDek663fHO5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.5.4.tgz",
+      "integrity": "sha512-DxgryEc7ZmUqcEhYMcxGBRyFzdtLIoy3jLtlH1zsVSRZaG+iSAcjQ88nvfkZxGUZtZBFL7sRjF6KLq3bJZJwUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/themes": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.5.4.tgz",
+      "integrity": "sha512-rUFZxMHLanTZdvZq4zgZPk+KRBZ3s7fE3bBK32OrZBkHQhEJmkJ7Ftd4w4QFlXyz1B7c+k5invZiOOCjwHXg9Q==",
+      "deprecated": "Deprecated. This package is no longer maintained. Please migrate to @primeuix/themes: https://www.npmjs.com/package/@primeuix/themes",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/themes": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.59.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
@@ -6185,16 +6268,25 @@
       }
     },
     "node_modules/primeicons": {
-      "version": "6.0.1",
+      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
-      "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
     },
     "node_modules/primevue": {
-      "version": "3.53.0",
+      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.53.0.tgz",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.5.4.tgz",
-      "integrity": "sha512-mRqTPGGZX+3AQokaCCjxLVSNEjGEA7LaPdBT4qSpGEdMstK6vhUBCxgLH7IPjHudbaSi4Xo3CIO62pXQxbz8dQ==",
+      "integrity": "sha512-nTyEohZABFJhVIpeUxgP0EJ8vKcJAhD+Z7DYj95e7ie/MNUCjRNcGjqmE1cXtXi4z54qDfTSI9h2uJ51qz2DIw==",
-      "peerDependencies": {
+      "license": "MIT",
-        "vue": "^3.0.0"
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^2.0.2",
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4",
+        "@primevue/icons": "4.5.4"
+      },
+      "engines": {
+        "node": ">=12.11.0"
       }
     },
     "node_modules/process": {
@@ -8877,6 +8969,62 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
       "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
     },
+    "@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "requires": {
+        "@primeuix/utils": "^0.6.1"
+      }
+    },
+    "@primeuix/styles": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-2.0.3.tgz",
+      "integrity": "sha512-2ykAB6BaHzR/6TwF8ShpJTsZrid6cVIEBVlookSdvOdmlWuevGu5vWOScgIwqWwlZcvkFYAGR/SUV3OHCTBMdw==",
+      "requires": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "@primeuix/themes": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-2.0.3.tgz",
+      "integrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
+      "requires": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "@primeuix/utils": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
+      "integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg=="
+    },
+    "@primevue/core": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.5.4.tgz",
+      "integrity": "sha512-lYJJB3wTrDJ8MkLctzHfrPZAqXVxoatjIsswSJzupatf6ZogJHVYADUKcn1JAkLLk8dtV1FA2AxDek663fHO5Q==",
+      "requires": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.2"
+      }
+    },
+    "@primevue/icons": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.5.4.tgz",
+      "integrity": "sha512-DxgryEc7ZmUqcEhYMcxGBRyFzdtLIoy3jLtlH1zsVSRZaG+iSAcjQ88nvfkZxGUZtZBFL7sRjF6KLq3bJZJwUw==",
+      "requires": {
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4"
+      }
+    },
+    "@primevue/themes": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.5.4.tgz",
+      "integrity": "sha512-rUFZxMHLanTZdvZq4zgZPk+KRBZ3s7fE3bBK32OrZBkHQhEJmkJ7Ftd4w4QFlXyz1B7c+k5invZiOOCjwHXg9Q==",
+      "requires": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/themes": "^2.0.2"
+      }
+    },
     "@rollup/rollup-android-arm-eabi": {
       "version": "4.59.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
@@ -12251,15 +12399,21 @@
       "dev": true
     },
     "primeicons": {
-      "version": "6.0.1",
+      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
-      "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
     },
     "primevue": {
-      "version": "3.53.0",
+      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.53.0.tgz",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.5.4.tgz",
-      "integrity": "sha512-mRqTPGGZX+3AQokaCCjxLVSNEjGEA7LaPdBT4qSpGEdMstK6vhUBCxgLH7IPjHudbaSi4Xo3CIO62pXQxbz8dQ==",
+      "integrity": "sha512-nTyEohZABFJhVIpeUxgP0EJ8vKcJAhD+Z7DYj95e7ie/MNUCjRNcGjqmE1cXtXi4z54qDfTSI9h2uJ51qz2DIw==",
-      "requires": {}
+      "requires": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^2.0.2",
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4",
+        "@primevue/icons": "4.5.4"
+      }
     },
     "process": {
       "version": "0.11.10",

package.json

@@ -15,6 +15,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@primevue/themes": "^4.5.4",
     "axios": "^1.13.6",
     "chart.js": "^4.5.1",
     "chartjs-adapter-moment": "^1.0.1",
@@ -34,8 +35,8 @@
     "moment": "^2.30.1",
     "pinia": "^2.3.1",
     "pinia-plugin-persistedstate": "^3.2.3",
-    "primeicons": "^6.0.1",
+    "primeicons": "^7.0.0",
-    "primevue": "^3.53.0",
+    "primevue": "^4.5.4",
     "tippy.js": "^6.3.7",
     "vue": "^3.5.29",
     "vue-axios": "^3.5.2",

src/main.ts

@@ -21,7 +21,7 @@ import 'sweetalert2/dist/sweetalert2.min.css';
 
 // import PrimeVue
 import PrimeVue from 'primevue/config';
-import 'primevue/resources/themes/saga-blue/theme.css'; //theme
+import Aura from '@primevue/themes/aura';
 import 'primeicons/primeicons.css'; //icons
 import Sidebar from 'primevue/sidebar';
 import Dropdown from 'primevue/dropdown';
@@ -78,7 +78,7 @@ app.use(ToastPlugin, { // use `this.$toast` in Vue.js
   position: 'bottom',
   duration: 5000,
 });
-app.use(PrimeVue);
+app.use(PrimeVue, { theme: { preset: Aura } });
 app.component('Sidebar', Sidebar);
 app.component('Dropdown', Dropdown);
 app.component('Tag', Tag);