feature-comercial-module-ts #10

Merged
edgar.mendez merged 41 commits from feature-comercial-module-ts into qa 2026-02-13 19:52:10 +00:00
3 changed files with 59 additions and 66 deletions
Showing only changes of commit 8941568e08 - Show all commits

1
components.d.ts vendored
View File

@ -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']

View File

@ -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>

View File

@ -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>