From 4a624f490cd4f2814e159d7f047a7ec11425f0dc Mon Sep 17 00:00:00 2001
From: "edgar.mendez" <edgar.mendez@golsystems.com.mx>
Date: Wed, 4 Feb 2026 15:15:45 -0600
Subject: [PATCH] feat: add supplier management module with CRUD operations and
 UI components

---
 components.d.ts                               |   1 +
 src/components/layout/Sidebar.vue             |   3 +-
 .../components/suppliers/SupplierModal.vue    | 104 +++++++
 .../components/suppliers/Suppliers.vue        | 278 ++++++++++++++++++
 .../catalog/services/supplierServices.ts      |  76 +++++
 src/modules/catalog/types/suppliers.d.ts      |  68 +++++
 src/router/index.ts                           |  12 +
 7 files changed, 541 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/catalog/components/suppliers/SupplierModal.vue
 create mode 100644 src/modules/catalog/components/suppliers/Suppliers.vue
 create mode 100644 src/modules/catalog/services/supplierServices.ts
 create mode 100644 src/modules/catalog/types/suppliers.d.ts

diff --git a/components.d.ts b/components.d.ts
index 79833a3..0c0f0b4 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     Checkbox: typeof import('primevue/checkbox')['default']
     Chip: typeof import('primevue/chip')['default']
     Column: typeof import('primevue/column')['default']
+    ConfirmDialog: typeof import('primevue/confirmdialog')['default']
     DataTable: typeof import('primevue/datatable')['default']
     Dialog: typeof import('primevue/dialog')['default']
     Dropdown: typeof import('primevue/dropdown')['default']
diff --git a/src/components/layout/Sidebar.vue b/src/components/layout/Sidebar.vue
index f59e41c..bb8d4ec 100644
--- a/src/components/layout/Sidebar.vue
+++ b/src/components/layout/Sidebar.vue
@@ -23,7 +23,8 @@ const menuItems = ref<MenuItem[]>([
         icon: 'pi pi-book',
         items: [
             { label: 'Unidades de Medida', icon: 'pi pi-calculator', to: '/catalog/units-of-measure' },
-            { label: 'Clasificaciones Comerciales', icon: 'pi pi-tags', to: '/catalog/classifications-comercial' }
+            { label: 'Clasificaciones Comerciales', icon: 'pi pi-tags', to: '/catalog/classifications-comercial' },
+            { label: 'Proveedores', icon: 'pi pi-briefcase', to: '/catalog/suppliers' },
         ]
     },
     {
diff --git a/src/modules/catalog/components/suppliers/SupplierModal.vue b/src/modules/catalog/components/suppliers/SupplierModal.vue
new file mode 100644
index 0000000..671d2a8
--- /dev/null
+++ b/src/modules/catalog/components/suppliers/SupplierModal.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/dropdown';
+import Textarea from 'primevue/textarea';
+import Button from 'primevue/button';
+import type { Supplier, SupplierFormErrors } from '../../types/suppliers';
+
+const props = defineProps<{
+  visible: boolean;
+  isEditMode: boolean;
+  supplier?: Supplier | null;
+  formErrors: SupplierFormErrors;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'submit', value: any): void;
+  (e: 'cancel'): void;
+}>();
+
+const form = ref({
+  name: '',
+  email: '',
+  phone: '',
+  type: '',
+  address: ''
+});
+
+watch(
+  () => props.supplier,
+  (supplier) => {
+    if (props.isEditMode && supplier) {
+      form.value = {
+        name: supplier.name,
+        email: supplier.contact_email,
+        phone: supplier.phone_number,
+        type: supplier.type,
+        address: supplier.address
+      };
+    } else {
+      form.value = { name: '', email: '', phone: '', type: '', address: '' };
+    }
+  },
+  { immediate: true }
+);
+
+const supplierTypeOptions = [
+  { label: 'General', value: 'general' },
+  { label: 'Compra', value: 'purchases' },
+  { label: 'Venta', value: 'sales' }
+];
+
+const handleSubmit = () => {
+  emit('submit', { ...form.value });
+};
+
+const handleCancel = () => {
+  emit('cancel');
+};
+</script>
+
+<template>
+  <Dialog :visible="visible" modal :style="{ width: '600px' }" :header="isEditMode ? 'Editar Proveedor' : 'Crear Nuevo Proveedor'" :closable="true" @update:visible="val => emit('update:visible', val)">
+    <form class="flex flex-col gap-8" @submit.prevent="handleSubmit">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <label class="flex flex-col gap-2">
+          <p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">
+            Nombre del Proveedor <span class="text-red-500">*</span></p>
+          <InputText v-model="form.name" placeholder="Ej: Suministros Industriales S.A." required class="w-full" />
+          <div v-if="formErrors.name" class="text-red-500 text-xs mt-1" v-for="err in formErrors.name" :key="err">{{ err }}</div>
+        </label>
+        <label class="flex flex-col gap-2">
+          <p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">
+            Correo de Contacto <span class="text-red-500">*</span></p>
+          <InputText v-model="form.email" placeholder="contacto@proveedor.com" required class="w-full" type="email" />
+          <div v-if="formErrors.contact_email" class="text-red-500 text-xs mt-1" v-for="err in formErrors.contact_email" :key="err">{{ err }}</div>
+        </label>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <label class="flex flex-col gap-2">
+          <p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">Teléfono</p>
+          <InputText v-model="form.phone" placeholder="+52 ..." class="w-full" type="tel" />
+          <div v-if="formErrors.phone_number" class="text-red-500 text-xs mt-1" v-for="err in formErrors.phone_number" :key="err">{{ err }}</div>
+        </label>
+        <label class="flex flex-col gap-2">
+          <p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">Tipo de Proveedor <span class="text-red-500">*</span></p>
+          <Dropdown v-model="form.type" :options="supplierTypeOptions" optionLabel="label" optionValue="value" placeholder="Seleccionar tipo" class="w-full" required />
+          <div v-if="formErrors.type" class="text-red-500 text-xs mt-1" v-for="err in formErrors.type" :key="err">{{ err }}</div>
+        </label>
+      </div>
+      <label class="flex flex-col gap-2">
+        <p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">Dirección</p>
+        <Textarea v-model="form.address" placeholder="Calle, Número, Colonia, Ciudad, Estado, CP" class="w-full" autoResize />
+        <div v-if="formErrors.address" class="text-red-500 text-xs mt-1" v-for="err in formErrors.address" :key="err">{{ err }}</div>
+      </label>
+      <div class="mt-4 pt-8 border-t border-[#dbe0e6] dark:border-[#2d3a4a] flex flex-col sm:flex-row items-center justify-end gap-4">
+        <Button label="Cancelar" text class="w-full sm:w-auto" @click="handleCancel" type="button" />
+        <Button :label="isEditMode ? 'Actualizar Proveedor' : 'Guardar Proveedor'" type="submit" class="w-full sm:w-auto" />
+      </div>
+    </form>
+  </Dialog>
+</template>
diff --git a/src/modules/catalog/components/suppliers/Suppliers.vue b/src/modules/catalog/components/suppliers/Suppliers.vue
new file mode 100644
index 0000000..5cfa58d
--- /dev/null
+++ b/src/modules/catalog/components/suppliers/Suppliers.vue
@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { onMounted } from 'vue';
+
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/dropdown';
+import Tag from 'primevue/tag';
+import Paginator from 'primevue/paginator';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+
+
+
+import { supplierServices } from '../../services/supplierServices';
+import type { Supplier, SupplierPaginatedResponse, SupplierFormErrors } from '../../types/suppliers';
+import SupplierModal from './SupplierModal.vue';
+
+
+const suppliers = ref<Supplier[]>([]);
+const pagination = ref({
+    first: 0,
+    rows: 5,
+    total: 0,
+    page: 1,
+    lastPage: 1,
+});
+const loading = ref(false);
+
+// Modal state and form fields
+const showModal = ref(false);
+const isEditMode = ref(false);
+const currentSupplier = ref<Supplier | null>(null);
+const formErrors = ref<SupplierFormErrors>({});
+
+const confirm = useConfirm();
+const toast = useToast();
+const handleDelete = (supplierId: number) => {
+    confirm.require({
+        message: '¿Seguro que deseas eliminar este proveedor?',
+        header: 'Confirmar eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Sí, eliminar',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            try {
+                await supplierServices.deleteSupplier(supplierId);
+                toast.add({ severity: 'success', summary: 'Eliminado', detail: 'Proveedor eliminado correctamente', life: 3000 });
+                fetchSuppliers(pagination.value.page);
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo eliminar el proveedor', life: 3000 });
+            }
+        }
+    });
+};
+
+
+const mapTypeToApi = (type: string) => {
+    switch (type) {
+        case 'General': return 'general';
+        case 'Compra': return 'purchases';
+        case 'Venta': return 'sales';
+        default: return undefined;
+    }
+};
+
+const fetchSuppliers = async (page = 1) => {
+    loading.value = true;
+    try {
+        const name = searchName.value ? searchName.value : undefined;
+        const type = selectedType.value ? mapTypeToApi(selectedType.value) : undefined;
+        console.log('🔎 fetchSuppliers params:', { paginated: true, name, type, page });
+        const response = await supplierServices.getSuppliers(true, name, type);
+        const paginated = response as SupplierPaginatedResponse;
+        suppliers.value = paginated.data.map(s => ({
+            ...s,
+            email: s.contact_email,
+            phone: s.phone_number,
+            typeColor: s.type === 'general' ? 'info' : s.type === 'purchases' ? 'success' : 'warning',
+            date: s.created_at ? new Date(s.created_at).toLocaleDateString() : ''
+        }));
+        pagination.value.total = paginated.total;
+        pagination.value.page = paginated.current_page;
+        pagination.value.lastPage = paginated.last_page;
+        pagination.value.first = (paginated.current_page - 1) * paginated.per_page;
+        pagination.value.rows = paginated.per_page;
+    } catch (e) {
+        // Manejo de error opcional
+    } finally {
+        loading.value = false;
+    }
+};
+
+onMounted(() => {
+    fetchSuppliers();
+});
+
+const supplierTypes = [
+    { label: 'Todos', value: null },
+    { label: 'General', value: 'General' },
+    { label: 'Compras', value: 'Compra' },
+    { label: 'Ventas', value: 'Venta' },
+];
+
+const selectedType = ref(null);
+const searchName = ref('');
+
+
+const clearFilters = () => {
+    searchName.value = '';
+    selectedType.value = null;
+    fetchSuppliers(1);
+};
+
+const onFilter = () => {
+    fetchSuppliers(1);
+};
+
+
+const onPageChange = (event: any) => {
+    const newPage = Math.floor(event.first / event.rows) + 1;
+    fetchSuppliers(newPage);
+};
+
+
+const openCreateModal = () => {
+    isEditMode.value = false;
+    showModal.value = true;
+    currentSupplier.value = null;
+    formErrors.value = {};
+};
+
+const openEditModal = (supplier: Supplier) => {
+    isEditMode.value = true;
+    showModal.value = true;
+    currentSupplier.value = supplier;
+    formErrors.value = {};
+};
+
+const closeModal = () => {
+    showModal.value = false;
+    isEditMode.value = false;
+    currentSupplier.value = null;
+    formErrors.value = {};
+};
+
+const handleModalSubmit = async (form: any) => {
+    formErrors.value = {};
+    try {
+        if (isEditMode.value && currentSupplier.value) {
+            const payload = {
+                name: form.name,
+                contact_email: form.email,
+                phone_number: form.phone,
+                address: form.address,
+                type: form.type,
+            };
+            await supplierServices.updateSupplier(currentSupplier.value.id, payload, 'patch');
+            toast.add({ severity: 'success', summary: 'Proveedor actualizado', detail: 'Proveedor actualizado correctamente', life: 3000 });
+        } else {
+            const payload = {
+                name: form.name,
+                contact_email: form.email,
+                phone_number: form.phone,
+                address: form.address,
+                type: form.type,
+            };
+            await supplierServices.createSupplier(payload);
+            toast.add({ severity: 'success', summary: 'Proveedor creado', detail: 'Proveedor registrado correctamente', life: 3000 });
+        }
+        closeModal();
+        fetchSuppliers(pagination.value.page);
+    } catch (e: any) {
+        if (e?.response?.data?.errors) {
+            formErrors.value = e.response.data.errors;
+        }
+        toast.add({ severity: 'error', summary: 'Error', detail: e?.response?.data?.message || 'No se pudo guardar el proveedor', life: 3000 });
+    }
+};
+
+// Mapeo para mostrar el tipo de proveedor con label legible
+const typeLabel = (type: string) => {
+    switch (type) {
+        case 'general': return 'General';
+        case 'purchases': return 'Compras';
+        case 'sales': return 'Ventas';
+        default: return type;
+    }
+};
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Heading -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+            <div>
+                <h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">Gestión de Proveedores
+                </h2>
+                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Administra la base de datos de proveedores y
+                    sus contactos.</p>
+            </div>
+            <Button label="Nuevo Proveedor" icon="pi pi-plus" @click="openCreateModal" />
+            <SupplierModal :visible="showModal" :isEditMode="isEditMode" :supplier="currentSupplier"
+                :formErrors="formErrors" @update:visible="val => { if (!val) closeModal(); }"
+                @submit="handleModalSubmit" @cancel="closeModal" />
+        </div>
+
+        <!-- Filters Toolbar -->
+        <Card>
+            <template #content>
+                <div class="flex flex-wrap gap-4 items-end">
+                    <div class="flex-1 min-w-[240px]">
+                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Buscar
+                            Nombre</label>
+                        <InputText v-model="searchName" placeholder="Ej. TechLogistics S.A." class="w-full" />
+                    </div>
+                    <div class="w-48">
+                        <label
+                            class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Tipo</label>
+                        <Dropdown v-model="selectedType" :options="supplierTypes" optionLabel="label"
+                            optionValue="value" placeholder="Todos" class="w-full" @change="onFilter" />
+                    </div>
+                    <Button icon="pi pi-search" text rounded @click="onFilter" />
+                    <Button icon="pi pi-times" text rounded severity="secondary" label="Limpiar" @click="clearFilters" />
+                </div>
+            </template>
+        </Card>
+
+        <!-- Table Content -->
+        <Card>
+            <template #content>
+                <DataTable :value="suppliers" :loading="loading" stripedRows responsiveLayout="scroll"
+                    class="p-datatable-sm">
+                    <Column field="id" header="ID" style="min-width: 80px" />
+                    <Column field="name" header="Nombre" style="min-width: 200px">
+                        <template #body="{ data }">
+                            <span class="font-bold text-surface-900 dark:text-white">{{ data.name }}</span>
+                        </template>
+                    </Column>
+                    <Column field="email" header="Correo de Contacto" style="min-width: 200px">
+                        <template #body="{ data }">
+                            <span class="text-primary-600 dark:text-primary-400">{{ data.email }}</span>
+                        </template>
+                    </Column>
+                    <Column field="phone" header="Teléfono" style="min-width: 140px" />
+                    <Column field="address" header="Dirección" style="min-width: 200px" />
+                    <Column field="type" header="Tipo" style="min-width: 100px">
+                        <template #body="{ data }">
+                            <Tag :value="typeLabel(data.type)" :severity="data.typeColor" />
+                        </template>
+                    </Column>
+
+                    <Column field="date" header="Fecha de Registro" style="min-width: 120px" />
+                    <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right"
+                        style="min-width: 120px">
+                        <template #body="{ data }">
+                            <div class="flex items-center justify-end gap-2">
+                                <Button icon="pi pi-pencil" text rounded size="small" @click="openEditModal(data)" />
+                                <Button icon="pi pi-trash" text rounded size="small" severity="danger"
+                                    @click="handleDelete(data.id)" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+                <div class="mt-4">
+                    <Paginator :first="pagination.first" :rows="pagination.rows" :totalRecords="pagination.total"
+                        :rowsPerPageOptions="[5, 10, 20, 50]" @page="onPageChange" />
+                </div>
+            </template>
+        </Card>
+
+    </div>
+    <ConfirmDialog />
+    <Toast />
+</template>
\ No newline at end of file
diff --git a/src/modules/catalog/services/supplierServices.ts b/src/modules/catalog/services/supplierServices.ts
new file mode 100644
index 0000000..909dd11
--- /dev/null
+++ b/src/modules/catalog/services/supplierServices.ts
@@ -0,0 +1,76 @@
+import api from "../../../services/api";
+import type { SupplierCreateRequest, SupplierCreateResponse, SupplierDeleteResponse, SupplierListResponse, SupplierPaginatedResponse, SupplierUpdateRequest, SupplierUpdateResponse } from "../types/suppliers";
+
+
+const supplierServices = {
+
+    /**
+     * Obtiene proveedores, paginados o no según el parámetro.
+     * @param paginated Si es false, retorna SupplierListResponse; si es true o undefined, retorna SupplierPaginatedResponse
+     */
+    async getSuppliers(
+        paginated?: boolean,
+        name?: string,
+        type?: string
+    ): Promise<SupplierPaginatedResponse | SupplierListResponse> {
+        try {
+            const params: any = {};
+            if (paginated === false) params.paginated = false;
+            if (name) params.name = name;
+            if (type) params.type = type;
+            const response = await api.get('/api/suppliers', { params });
+            console.log('📦 Suppliers response:', response);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error fetching suppliers:', error);
+            throw error;
+        }
+    },
+    
+    async createSupplier(data: SupplierCreateRequest): Promise<SupplierCreateResponse> {
+        try {
+            const response = await api.post('/api/suppliers', data);
+            console.log('✅ Supplier created successfully:', response);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error creating supplier:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Actualiza un proveedor existente
+     * @param supplierId ID del proveedor a actualizar
+     * @param data Campos a actualizar (parcial o total)
+     * @param method 'patch' (default) o 'put'
+     */
+    async updateSupplier(
+        supplierId: number,
+        data: SupplierUpdateRequest,
+        method: 'patch' | 'put' = 'patch'
+    ): Promise<SupplierUpdateResponse> {
+        try {
+            const response = await api[method](`/api/suppliers/${supplierId}`, data);
+            console.log(`✏️ Supplier with ID ${supplierId} updated successfully.`, response);
+            return response.data;
+        } catch (error) {
+            console.error(`❌ Error updating supplier with ID ${supplierId}:`, error);
+            throw error;
+        }
+    },
+
+
+    async deleteSupplier(supplierId: number): Promise<SupplierDeleteResponse> {
+        try {
+            const response = await api.delete(`/api/suppliers/${supplierId}`);
+            console.log(`🗑️ Supplier with ID ${supplierId} deleted successfully.`);
+            return response.data;
+        } catch (error) {
+            console.error(`❌ Error deleting supplier with ID ${supplierId}:`, error);
+            throw error;
+        }
+    }
+
+};
+
+export { supplierServices };
\ No newline at end of file
diff --git a/src/modules/catalog/types/suppliers.d.ts b/src/modules/catalog/types/suppliers.d.ts
new file mode 100644
index 0000000..b8b4f36
--- /dev/null
+++ b/src/modules/catalog/types/suppliers.d.ts
@@ -0,0 +1,68 @@
+
+// Errores de validación del formulario de proveedor
+export interface SupplierFormErrors {
+	name?: string[];
+	contact_email?: string[];
+	phone_number?: string[];
+	address?: string[];
+	type?: string[];
+}
+// Respuesta simple de proveedores (sin paginación)
+export interface SupplierListResponse {
+	data: Supplier[];
+}
+
+export interface Supplier {
+	id: number;
+	name: string;
+	contact_email: string;
+	phone_number: string;
+	address: string;
+	type: string;
+	created_at: string;
+	updated_at: string;
+	deleted_at: string | null;
+}
+
+export interface SupplierPaginationLink {
+	url: string | null;
+	label: string;
+	active: boolean;
+}
+
+export interface SupplierPaginatedResponse {
+	current_page: number;
+	data: Supplier[];
+	first_page_url: string;
+	from: number;
+	last_page: number;
+	last_page_url: string;
+	links: SupplierPaginationLink[];
+	next_page_url: string | null;
+	path: string;
+	per_page: number;
+	prev_page_url: string | null;
+	to: number;
+	total: number;
+}
+
+export interface SupplierDeleteResponse {
+    message: string;
+    data: null;
+}
+
+export interface SupplierCreateRequest {
+    name: string;
+    contact_email: string;
+    phone_number: string;
+    address: string;
+    type: string;
+}
+
+export interface SupplierCreateResponse {
+    data: Supplier;
+}
+
+// Para actualización, todos los campos son opcionales
+export type SupplierUpdateRequest = Partial<SupplierCreateRequest>;
+export type SupplierUpdateResponse = SupplierCreateResponse;
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 6d90cdd..868a86f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,6 +23,9 @@ import StoreDetails from '../modules/stores/components/StoreDetails.vue';
 import Positions from '../modules/rh/components/Positions.vue';
 import Departments from '../modules/rh/components/Departments.vue';
 
+import '../modules/catalog/components/suppliers/Suppliers.vue';
+import Suppliers from '../modules/catalog/components/suppliers/Suppliers.vue';
+
 const routes: RouteRecordRaw[] = [
     {
         path: '/login',
@@ -148,6 +151,15 @@ const routes: RouteRecordRaw[] = [
                             requiresAuth: true
                         }
                     },
+                    {
+                        path: 'suppliers',
+                        name: 'Suppliers',
+                        component: Suppliers,
+                        meta: {
+                            title: 'Proveedores',
+                            requiresAuth: true
+                        }
+                    },
                 ]
             },
             {