feat: add blank module component with customizable card layout

components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     AppTopbar: typeof import('./src/components/Holos/AppTopbar.vue')['default']
     Badge: typeof import('primevue/badge')['default']
     Button: typeof import('primevue/button')['default']
+    Card: typeof import('primevue/card')['default']
     Column: typeof import('primevue/column')['default']
     DataTable: typeof import('primevue/datatable')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']

src/modules/blank/Blank.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="space-y-6">
+
+        <div>
+            <h1 className="text-3xl font-bold tracking-tight text-foreground">
+                Módulo Personalizado
+            </h1>
+            <p className="text-muted-foreground">
+                Este es un módulo en blanco listo para personalizar
+            </p>
+        </div>
+
+        <Card>
+            <template #title>Módulo en Blanco</template>
+            <template #subtitle>Personaliza este módulo según tus necesidades</template>
+            <template #content>
+                <div
+                    className="flex min-h-[400px] items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/20">
+                    <div className="text-center">
+                        <FileStack className="mx-auto h-12 w-12 text-muted-foreground" />
+                        <h3 className="mt-4 text-lg font-semibold">Espacio para tu contenido</h3>
+                        <p className="mt-2 text-sm text-muted-foreground">
+                            Agrega componentes, tablas, formularios o cualquier funcionalidad aquí
+                        </p>
+                    </div>
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>

src/modules/warehouse/components/WarehouseDashboard.vue

@@ -1,74 +1,33 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { useWarehouse } from '../composables/useWarehouse';
-import KpiCard from '../../../components/shared/KpiCard.vue';
-import InventoryTable from './InventoryTable.vue';
-
-const { stats, loadStats, loadProducts } = useWarehouse();
-
-onMounted(async () => {
-    await loadStats();
-    await loadProducts();
-});
-
-const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat('es-MX', {
-        style: 'currency',
-        currency: 'MXN'
-    }).format(value);
-};
 </script>
 
 <template>
-    <div class="p-6">
-        <div class="max-w-7xl mx-auto">
-            <!-- Header -->
-            <div class="mb-6">
-                <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-0 mb-2">
-                    Dashboard de Almacén
-                </h1>
-                <p class="text-surface-600 dark:text-surface-400">
-                    Visión general del inventario y movimientos
-                </p>
-            </div>
+    <div class="space-y-6">
 
-            <!-- KPIs -->
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-                <KpiCard
-                    title="Total de Productos"
-                    :value="stats?.totalProducts ?? 0"
-                    icon="pi pi-box"
-                    color="primary"
-                />
-                <KpiCard
-                    title="Valor del Inventario"
-                    :value="stats ? formatCurrency(stats.totalValue) : '$0'"
-                    icon="pi pi-dollar"
-                    color="success"
-                />
-                <KpiCard
-                    title="Productos con Stock Bajo"
-                    :value="stats?.lowStockItems ?? 0"
-                    icon="pi pi-exclamation-triangle"
-                    color="warning"
-                />
-                <KpiCard
-                    title="Movimientos Recientes"
-                    :value="stats?.recentMovements ?? 0"
-                    icon="pi pi-arrow-right-arrow-left"
-                    color="info"
-                />
-            </div>
-
-            <!-- Inventory Table -->
-            <div class="bg-surface-0 dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700">
-                <div class="p-6 border-b border-surface-200 dark:border-surface-700">
-                    <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0">
-                        Inventario
-                    </h2>
-                </div>
-                <InventoryTable />
-            </div>
+        <div>
+            <h1 className="text-3xl font-bold tracking-tight text-foreground">
+                Módulo Personalizado
+            </h1>
+            <p className="text-muted-foreground">
+                Este es un módulo en blanco listo para personalizar
+            </p>
         </div>
+
+        <Card>
+            <template #title>Módulo en Blanco</template>
+            <template #subtitle>Personaliza este módulo según tus necesidades</template>
+            <template #content>
+                <div
+                    className="flex min-h-[400px] items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/20">
+                    <div className="text-center">
+                        <FileStack className="mx-auto h-12 w-12 text-muted-foreground" />
+                        <h3 className="mt-4 text-lg font-semibold">Espacio para tu contenido</h3>
+                        <p className="mt-2 text-sm text-muted-foreground">
+                            Agrega componentes, tablas, formularios o cualquier funcionalidad aquí
+                        </p>
+                    </div>
+                </div>
+            </template>
+        </Card>
     </div>
 </template>