Refactor components and modals

This commit is contained in:
Urtzi Alfaro
2025-09-26 07:46:25 +02:00
parent cf4405b771
commit d573c38621
80 changed files with 3421 additions and 4617 deletions

View File

@@ -1,13 +1,13 @@
import React, { useState } from 'react';
import { Plus, Building2, Phone, Mail, Eye, Edit, CheckCircle, AlertCircle, Timer, Users, Euro, Loader } from 'lucide-react';
import { Button, Input, Card, Badge, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
import { Button, Input, Card, Badge, StatsGrid, StatusCard, getStatusColor, EditViewModal } from '../../../../components/ui';
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
import { PageHeader } from '../../../../components/layout';
import { SupplierStatus, SupplierType, PaymentTerms } from '../../../../api/types/suppliers';
import { useSuppliers, useSupplierStatistics } from '../../../../api/hooks/suppliers';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useAuthUser } from '../../../../stores/auth.store';
import { useSupplierEnums } from '../../../../utils/enumHelpers';
import { useTranslation } from 'react-i18next';
const SuppliersPage: React.FC = () => {
const [activeTab] = useState('all');
@@ -40,15 +40,15 @@ const SuppliersPage: React.FC = () => {
} = useSupplierStatistics(tenantId);
const suppliers = suppliersData || [];
const supplierEnums = useSupplierEnums();
const { t } = useTranslation(['suppliers', 'common']);
const getSupplierStatusConfig = (status: SupplierStatus) => {
const statusConfig = {
[SupplierStatus.ACTIVE]: { text: supplierEnums.getSupplierStatusLabel(status), icon: CheckCircle },
[SupplierStatus.INACTIVE]: { text: supplierEnums.getSupplierStatusLabel(status), icon: Timer },
[SupplierStatus.PENDING_APPROVAL]: { text: supplierEnums.getSupplierStatusLabel(status), icon: AlertCircle },
[SupplierStatus.SUSPENDED]: { text: supplierEnums.getSupplierStatusLabel(status), icon: AlertCircle },
[SupplierStatus.BLACKLISTED]: { text: supplierEnums.getSupplierStatusLabel(status), icon: AlertCircle },
[SupplierStatus.ACTIVE]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: CheckCircle },
[SupplierStatus.INACTIVE]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: Timer },
[SupplierStatus.PENDING_APPROVAL]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: AlertCircle },
[SupplierStatus.SUSPENDED]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: AlertCircle },
[SupplierStatus.BLACKLISTED]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: AlertCircle },
};
const config = statusConfig[status];
@@ -65,11 +65,11 @@ const SuppliersPage: React.FC = () => {
};
const getSupplierTypeText = (type: SupplierType): string => {
return supplierEnums.getSupplierTypeLabel(type);
return t(`suppliers:types.${type.toLowerCase()}`);
};
const getPaymentTermsText = (terms: PaymentTerms): string => {
return supplierEnums.getPaymentTermsLabel(terms);
return t(`suppliers:payment_terms.${terms.toLowerCase()}`);
};
// Filtering is now handled by the API query parameters
@@ -348,14 +348,20 @@ const SuppliersPage: React.FC = () => {
value: selectedSupplier.supplier_type || SupplierType.INGREDIENTS,
type: 'select',
editable: true,
options: supplierEnums.getSupplierTypeOptions()
options: Object.values(SupplierType).map(value => ({
value,
label: t(`suppliers:types.${value.toLowerCase()}`)
}))
},
{
label: 'Condiciones de Pago',
value: selectedSupplier.payment_terms || PaymentTerms.NET_30,
type: 'select',
editable: true,
options: supplierEnums.getPaymentTermsOptions()
options: Object.values(PaymentTerms).map(value => ({
value,
label: t(`suppliers:payment_terms.${value.toLowerCase()}`)
}))
},
{
label: 'Tiempo de Entrega (días)',
@@ -420,7 +426,7 @@ const SuppliersPage: React.FC = () => {
];
return (
<StatusModal
<EditViewModal
isOpen={showForm}
onClose={() => {
setShowForm(false);