Update Details and Index component on module Warehouses

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.9.12",
       "dependencies": {
         "@popperjs/core": "^2.11.8",
+        "@primeuix/themes": "^1.2.5",
         "@tailwindcss/postcss": "^4.0.9",
         "@tailwindcss/vite": "^4.0.9",
         "@vitejs/plugin-vue": "^5.2.1",
@@ -20,6 +21,7 @@
         "material-symbols": "^0.36.2",
         "pdf-lib": "^1.17.1",
         "pinia": "^3.0.1",
+        "primevue": "^4.4.1",
         "pusher-js": "^8.4.0",
         "tailwindcss": "^4.0",
         "toastr": "^2.1.4",
@@ -702,6 +704,74 @@
         "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": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.2.5.tgz",
+      "integrity": "sha512-nypFRct/oaaBZqP4jinT0puW8ZIfs4u+l/vqUFmJEPU332fl5ePj6DoOpQgTLzo3OfmvSmz5a5/5b4OJJmmi7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.3"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.2.5.tgz",
+      "integrity": "sha512-n3YkwJrHQaEESc/D/A/iD815sxp8cKnmzscA6a8Tm8YvMtYU32eCahwLLe6h5rywghVwxASWuG36XBgISYOIjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.3"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.1.tgz",
+      "integrity": "sha512-tQL/ZOPgCdD+NTimlUmhyD0ey8J1XmpZE4hDHM+/fnuBicVVmlKOd5HpS748LcOVRUKbWjmEPdHX4hi5XZoC1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.4.1.tgz",
+      "integrity": "sha512-RG56iDKIJT//EtntjQzOiWOHZZJczw/qWWtdL5vFvw8/QDS9DPKn8HLpXK7N5Le6KK1MLXUsxoiGTZK+poUFUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.4.1.tgz",
+      "integrity": "sha512-UfDimrIjVdY6EziwieyV4zPKzW6mnKHKhy4Dgyjv2oI6pNeuim+onbJo1ce22PEGXW78vfblG/3/JIzVHFweqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.4.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -3315,6 +3385,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/primevue": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.4.1.tgz",
+      "integrity": "sha512-JbHBa5k30pZ7mn/z4vYBOnyt5GrR15eM3X0wa3VanonxnFLYkTEx8OMh33aU6ndWeOfi7Ef57dOL3bTH+3f4hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^1.2.5",
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.4.1",
+        "@primevue/icons": "4.4.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
+    "@primeuix/themes": "^1.2.5",
     "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/vite": "^4.0.9",
     "@vitejs/plugin-vue": "^5.2.1",
@@ -22,6 +23,7 @@
     "material-symbols": "^0.36.2",
     "pdf-lib": "^1.17.1",
     "pinia": "^3.0.1",
+    "primevue": "^4.4.1",
     "pusher-js": "^8.4.0",
     "tailwindcss": "^4.0",
     "toastr": "^2.1.4",

src/index.js

@@ -1,3 +1,4 @@
+import Aura from '@primeuix/themes/aura';
 import './css/base.css'
 
 import axios from 'axios';
@@ -13,10 +14,16 @@ import { pagePlugin } from '@Services/Page';
 import { defineApp, reloadApp, view } from '@Services/Page';
 import { apiURL } from '@Services/Api';
 import VueApexCharts from "vue3-apexcharts";
-import VCalendar from 'v-calendar'
+import VCalendar from 'v-calendar';
+import PrimeVue from 'primevue/config';
 import 'v-calendar/style.css';
 
-import App      from '@Components/App.vue'
+import { definePreset } from '@primeuix/themes';
+import Button from 'primevue/button';
+
+
+
+import App from '@Components/App.vue'
 import Error503 from '@Pages/Errors/503.vue'
 import { hasToken } from './services/Api';
 
@@ -24,9 +31,9 @@ import { hasToken } from './services/Api';
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // Elementos globales
-window.axios    = axios;
+window.axios = axios;
-window.Lang     = lang;
+window.Lang = lang;
-window.Notify   = new Notify();
+window.Notify = new Notify();
 window.TwScreen = new TailwindScreen();
 
 async function boot() {
@@ -40,26 +47,44 @@ async function boot() {
         window.Ziggy = routes.data;
         defineApp(appData.data);
         window.route = useRoute();
-        window.view  = view;
+        window.view = view;
-        initRoutes   = true;
+        initRoutes = true;
     } catch (error) {
         window.Notify.error(window.Lang('server.api.noAvailable'));
     }
 
-    if(initRoutes) {
+    if (initRoutes) {
         // Iniciar permisos
-        if(hasToken()) {
+        if (hasToken()) {
             await bootPermissions();
             await bootRoles();
-        
+
             // Iniciar broadcast
-            if(import.meta.env.VITE_REVERB_ACTIVE === 'true') {
+            if (import.meta.env.VITE_REVERB_ACTIVE === 'true') {
                 await import('@Services/Broadcast')
             }
         }
-    
+
         reloadApp();
-    
+
+        const MyPreset = definePreset(Aura, {
+            semantic: {
+                primary: {
+                    50: '{neutral.50}',
+                    100: '{neutral.100}',
+                    200: '{neutral.200}',
+                    300: '{neutral.300}',
+                    400: '{neutral.400}',
+                    500: '{neutral.500}',
+                    600: '{neutral.600}',
+                    700: '{neutral.700}',
+                    800: '{neutral.800}',
+                    900: '{neutral.900}',
+                    950: '{neutral.950}'
+                },
+            }
+        });
+
         createApp(App)
             .use(createPinia())
             .use(i18n)
@@ -68,6 +93,11 @@ async function boot() {
             .use(ZiggyVue)
             .use(VCalendar, {})
             .use(VueApexCharts)
+            .use(PrimeVue, {
+                theme: {
+                    preset: MyPreset
+                }
+            })
             .mount('#app');
     } else {
         createApp(Error503)

src/pages/Warehouses/Details.vue

@@ -77,6 +77,7 @@ async function loadWarehouse() {
         const response = await api.get(apiTo('show', { warehouse: route.params.id }), {
             onSuccess: (r) => {
                 warehouse.value = r.warehouse;
+                console.log('Warehouse data:', r.warehouse);
             },
             onError: (err) => {
                 error.value = 'Error cargando el almacén';

src/pages/Warehouses/Index.vue

@@ -16,7 +16,7 @@ import CardHeader from '@Holos/Card/CardHeader.vue';
 import CardTitle from '@Holos/Card/CardTitle.vue';
 import CardDescription from '@Holos/Card/CardDescription.vue';
 import CardContent from '@Holos/Card/CardContent.vue';
-import Button from '@Holos/Button/Button.vue';
+//import Button from '@Holos/Button/Button.vue';
 
 import GoogleIcon from '@Shared/GoogleIcon.vue';
 
@@ -58,6 +58,8 @@ const debugNavigation = (warehouse) => {
 onMounted(() => {
     searcher.search();
 });
+
+import Button from "primevue/button"
 </script>
 
 <template>
@@ -67,6 +69,7 @@ onMounted(() => {
                 <h1 className="text-3xl font-bold text-foreground">Inventario</h1>
                 <p className="text-muted-foreground">
                     Control de stock y movimientos por almacén
+                    
                 </p>
             </div>
         </div>
@@ -129,21 +132,18 @@ onMounted(() => {
                             <div class="flex justify-end mt-3 pt-2 border-t border-border gap-3">
 
                                 <RouterLink class="h-fit" :to="viewTo({ name: 'details', params: { id: warehouse.id } })">
-                                    <Button size="sm" variant="solid" color="info" asLink>
+                                    <Button severity="info" label="Ver detalles" />
-                                        Ver Detalles
-                                    </Button>
                                 </RouterLink>
 
+                                <Button severity="primary" label="Ver detalles" />
+
                                 <!-- Opción 1: RouterLink + asLink -->
                                 <RouterLink class="h-fit" :to="viewTo({ name: 'edit', params: { id: warehouse.id } })">
-                                    <Button size="sm" variant="solid" color="warning" asLink>
+                                    <Button severity="warn" label="Editar" />
-                                        Editar
-                                    </Button>
                                 </RouterLink>
 
-                                <Button size="sm" variant="solid" @click="deleteItem(warehouse)" color="danger">
+                                <Button severity="danger" label="Eliminar" @click="deleteItem(warehouse)"/>
-                                    Eliminar
+
-                                </Button>
                             </div>
 
                         </CardContent>