Improve the frontend and repository layer
This commit is contained in:
Urtzi Alfaro
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { PageHeader } from '../../components/layout';
|
||||
@@ -6,15 +6,29 @@ import StatsGrid from '../../components/ui/Stats/StatsGrid';
|
||||
import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
|
||||
import PendingPOApprovals from '../../components/domain/dashboard/PendingPOApprovals';
|
||||
import TodayProduction from '../../components/domain/dashboard/TodayProduction';
|
||||
import SustainabilityWidget from '../../components/domain/sustainability/SustainabilityWidget';
|
||||
import { EditViewModal } from '../../components/ui';
|
||||
import { useTenant } from '../../stores/tenant.store';
|
||||
import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
|
||||
import { useDashboardStats } from '../../api/hooks/dashboard';
|
||||
import { usePurchaseOrder, useApprovePurchaseOrder, useRejectPurchaseOrder } from '../../api/hooks/purchase-orders';
|
||||
import { useBatchDetails, useUpdateBatchStatus } from '../../api/hooks/production';
|
||||
import { ProductionStatusEnum } from '../../api';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Euro,
|
||||
Package
|
||||
Package,
|
||||
FileText,
|
||||
Building2,
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
X,
|
||||
ShoppingCart,
|
||||
Factory,
|
||||
Timer
|
||||
} from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const DashboardPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -23,6 +37,13 @@ const DashboardPage: React.FC = () => {
|
||||
const { startTour } = useDemoTour();
|
||||
const isDemoMode = localStorage.getItem('demo_mode') === 'true';
|
||||
|
||||
// Modal state management
|
||||
const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
|
||||
const [selectedBatchId, setSelectedBatchId] = useState<string | null>(null);
|
||||
const [showPOModal, setShowPOModal] = useState(false);
|
||||
const [showBatchModal, setShowBatchModal] = useState(false);
|
||||
const [approvalNotes, setApprovalNotes] = useState('');
|
||||
|
||||
// Fetch real dashboard statistics
|
||||
const { data: dashboardStats, isLoading: isLoadingStats, error: statsError } = useDashboardStats(
|
||||
currentTenant?.id || '',
|
||||
@@ -31,6 +52,29 @@ const DashboardPage: React.FC = () => {
|
||||
}
|
||||
);
|
||||
|
||||
// Fetch PO details when modal is open
|
||||
const { data: poDetails, isLoading: isLoadingPO } = usePurchaseOrder(
|
||||
currentTenant?.id || '',
|
||||
selectedPOId || '',
|
||||
{
|
||||
enabled: !!currentTenant?.id && !!selectedPOId && showPOModal
|
||||
}
|
||||
);
|
||||
|
||||
// Fetch Production batch details when modal is open
|
||||
const { data: batchDetails, isLoading: isLoadingBatch } = useBatchDetails(
|
||||
currentTenant?.id || '',
|
||||
selectedBatchId || '',
|
||||
{
|
||||
enabled: !!currentTenant?.id && !!selectedBatchId && showBatchModal
|
||||
}
|
||||
);
|
||||
|
||||
// Mutations
|
||||
const approvePOMutation = useApprovePurchaseOrder();
|
||||
const rejectPOMutation = useRejectPurchaseOrder();
|
||||
const updateBatchStatusMutation = useUpdateBatchStatus();
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[Dashboard] Demo mode:', isDemoMode);
|
||||
console.log('[Dashboard] Should start tour:', shouldStartTour());
|
||||
@@ -61,29 +105,70 @@ const DashboardPage: React.FC = () => {
|
||||
navigate('/app/operations/procurement');
|
||||
};
|
||||
|
||||
const handleStartBatch = (batchId: string) => {
|
||||
console.log('Starting production batch:', batchId);
|
||||
const handleStartBatch = async (batchId: string) => {
|
||||
try {
|
||||
await updateBatchStatusMutation.mutateAsync({
|
||||
tenantId: currentTenant?.id || '',
|
||||
batchId,
|
||||
statusUpdate: { status: ProductionStatusEnum.IN_PROGRESS }
|
||||
});
|
||||
toast.success('Lote iniciado');
|
||||
} catch (error) {
|
||||
console.error('Error starting batch:', error);
|
||||
toast.error('Error al iniciar lote');
|
||||
}
|
||||
};
|
||||
|
||||
const handlePauseBatch = (batchId: string) => {
|
||||
console.log('Pausing production batch:', batchId);
|
||||
const handlePauseBatch = async (batchId: string) => {
|
||||
try {
|
||||
await updateBatchStatusMutation.mutateAsync({
|
||||
tenantId: currentTenant?.id || '',
|
||||
batchId,
|
||||
statusUpdate: { status: ProductionStatusEnum.ON_HOLD }
|
||||
});
|
||||
toast.success('Lote pausado');
|
||||
} catch (error) {
|
||||
console.error('Error pausing batch:', error);
|
||||
toast.error('Error al pausar lote');
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewDetails = (id: string) => {
|
||||
console.log('Viewing details for:', id);
|
||||
const handleViewDetails = (batchId: string) => {
|
||||
setSelectedBatchId(batchId);
|
||||
setShowBatchModal(true);
|
||||
};
|
||||
|
||||
const handleApprovePO = (poId: string) => {
|
||||
console.log('Approved PO:', poId);
|
||||
const handleApprovePO = async (poId: string) => {
|
||||
try {
|
||||
await approvePOMutation.mutateAsync({
|
||||
tenantId: currentTenant?.id || '',
|
||||
poId,
|
||||
notes: 'Aprobado desde el dashboard'
|
||||
});
|
||||
toast.success('Orden aprobada');
|
||||
} catch (error) {
|
||||
console.error('Error approving PO:', error);
|
||||
toast.error('Error al aprobar orden');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRejectPO = (poId: string) => {
|
||||
console.log('Rejected PO:', poId);
|
||||
const handleRejectPO = async (poId: string) => {
|
||||
try {
|
||||
await rejectPOMutation.mutateAsync({
|
||||
tenantId: currentTenant?.id || '',
|
||||
poId,
|
||||
reason: 'Rechazado desde el dashboard'
|
||||
});
|
||||
toast.success('Orden rechazada');
|
||||
} catch (error) {
|
||||
console.error('Error rejecting PO:', error);
|
||||
toast.error('Error al rechazar orden');
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewPODetails = (poId: string) => {
|
||||
console.log('Viewing PO details:', poId);
|
||||
navigate(`/app/suppliers/purchase-orders/${poId}`);
|
||||
setSelectedPOId(poId);
|
||||
setShowPOModal(true);
|
||||
};
|
||||
|
||||
const handleViewAllPOs = () => {
|
||||
@@ -178,6 +263,114 @@ const DashboardPage: React.FC = () => {
|
||||
];
|
||||
}, [dashboardStats, t]);
|
||||
|
||||
// Helper function to build PO detail sections (reused from ProcurementPage)
|
||||
const buildPODetailsSections = (po: any) => {
|
||||
if (!po) return [];
|
||||
|
||||
const getPOStatusConfig = (status: string) => {
|
||||
const normalizedStatus = status?.toUpperCase().replace(/_/g, '_');
|
||||
const configs: Record<string, any> = {
|
||||
PENDING_APPROVAL: { text: 'Pendiente de Aprobación', color: 'var(--color-warning)' },
|
||||
APPROVED: { text: 'Aprobado', color: 'var(--color-success)' },
|
||||
SENT_TO_SUPPLIER: { text: 'Enviado al Proveedor', color: 'var(--color-info)' },
|
||||
CONFIRMED: { text: 'Confirmado', color: 'var(--color-success)' },
|
||||
RECEIVED: { text: 'Recibido', color: 'var(--color-success)' },
|
||||
COMPLETED: { text: 'Completado', color: 'var(--color-success)' },
|
||||
CANCELLED: { text: 'Cancelado', color: 'var(--color-error)' },
|
||||
};
|
||||
return configs[normalizedStatus] || { text: status, color: 'var(--color-info)' };
|
||||
};
|
||||
|
||||
const statusConfig = getPOStatusConfig(po.status);
|
||||
|
||||
return [
|
||||
{
|
||||
title: 'Información General',
|
||||
icon: FileText,
|
||||
fields: [
|
||||
{ label: 'Número de Orden', value: po.po_number, type: 'text' as const },
|
||||
{ label: 'Estado', value: statusConfig.text, type: 'status' as const },
|
||||
{ label: 'Prioridad', value: po.priority === 'urgent' ? 'Urgente' : po.priority === 'high' ? 'Alta' : po.priority === 'low' ? 'Baja' : 'Normal', type: 'text' as const },
|
||||
{ label: 'Fecha de Creación', value: new Date(po.created_at).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }), type: 'text' as const }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Información del Proveedor',
|
||||
icon: Building2,
|
||||
fields: [
|
||||
{ label: 'Proveedor', value: po.supplier?.name || po.supplier_name || 'N/A', type: 'text' as const },
|
||||
{ label: 'Email', value: po.supplier?.contact_email || 'N/A', type: 'text' as const },
|
||||
{ label: 'Teléfono', value: po.supplier?.contact_phone || 'N/A', type: 'text' as const }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Resumen Financiero',
|
||||
icon: Euro,
|
||||
fields: [
|
||||
{ label: 'Subtotal', value: `€${(typeof po.subtotal === 'string' ? parseFloat(po.subtotal) : po.subtotal || 0).toFixed(2)}`, type: 'text' as const },
|
||||
{ label: 'Impuestos', value: `€${(typeof po.tax_amount === 'string' ? parseFloat(po.tax_amount) : po.tax_amount || 0).toFixed(2)}`, type: 'text' as const },
|
||||
{ label: 'TOTAL', value: `€${(typeof po.total_amount === 'string' ? parseFloat(po.total_amount) : po.total_amount || 0).toFixed(2)}`, type: 'text' as const, highlight: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Entrega',
|
||||
icon: Calendar,
|
||||
fields: [
|
||||
{ label: 'Fecha Requerida', value: po.required_delivery_date ? new Date(po.required_delivery_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'No especificada', type: 'text' as const },
|
||||
{ label: 'Fecha Esperada', value: po.expected_delivery_date ? new Date(po.expected_delivery_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'No especificada', type: 'text' as const }
|
||||
]
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
// Helper function to build Production batch detail sections
|
||||
const buildBatchDetailsSections = (batch: any) => {
|
||||
if (!batch) return [];
|
||||
|
||||
return [
|
||||
{
|
||||
title: 'Información General',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{ label: 'Producto', value: batch.product_name, type: 'text' as const, highlight: true },
|
||||
{ label: 'Número de Lote', value: batch.batch_number, type: 'text' as const },
|
||||
{ label: 'Cantidad Planificada', value: `${batch.planned_quantity} unidades`, type: 'text' as const },
|
||||
{ label: 'Cantidad Real', value: batch.actual_quantity ? `${batch.actual_quantity} unidades` : 'Pendiente', type: 'text' as const },
|
||||
{ label: 'Estado', value: batch.status, type: 'text' as const },
|
||||
{ label: 'Prioridad', value: batch.priority, type: 'text' as const }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Cronograma',
|
||||
icon: Clock,
|
||||
fields: [
|
||||
{ label: 'Inicio Planificado', value: batch.planned_start_time ? new Date(batch.planned_start_time).toLocaleString('es-ES') : 'No especificado', type: 'text' as const },
|
||||
{ label: 'Fin Planificado', value: batch.planned_end_time ? new Date(batch.planned_end_time).toLocaleString('es-ES') : 'No especificado', type: 'text' as const },
|
||||
{ label: 'Inicio Real', value: batch.actual_start_time ? new Date(batch.actual_start_time).toLocaleString('es-ES') : 'Pendiente', type: 'text' as const },
|
||||
{ label: 'Fin Real', value: batch.actual_end_time ? new Date(batch.actual_end_time).toLocaleString('es-ES') : 'Pendiente', type: 'text' as const }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Producción',
|
||||
icon: Factory,
|
||||
fields: [
|
||||
{ label: 'Personal Asignado', value: batch.staff_assigned?.join(', ') || 'No asignado', type: 'text' as const },
|
||||
{ label: 'Estación', value: batch.station_id || 'No asignada', type: 'text' as const },
|
||||
{ label: 'Duración Planificada', value: batch.planned_duration_minutes ? `${batch.planned_duration_minutes} minutos` : 'No especificada', type: 'text' as const }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Calidad y Costos',
|
||||
icon: CheckCircle,
|
||||
fields: [
|
||||
{ label: 'Puntuación de Calidad', value: batch.quality_score ? `${batch.quality_score}/10` : 'Pendiente', type: 'text' as const },
|
||||
{ label: 'Rendimiento', value: batch.yield_percentage ? `${batch.yield_percentage}%` : 'Calculando...', type: 'text' as const },
|
||||
{ label: 'Costo Estimado', value: batch.estimated_cost ? `€${batch.estimated_cost}` : '€0.00', type: 'text' as const },
|
||||
{ label: 'Costo Real', value: batch.actual_cost ? `€${batch.actual_cost}` : '€0.00', type: 'text' as const }
|
||||
]
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-4 sm:p-6">
|
||||
@@ -213,14 +406,26 @@ const DashboardPage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dashboard Content - Four Main Sections */}
|
||||
{/* Dashboard Content - Main Sections */}
|
||||
<div className="space-y-6">
|
||||
{/* 1. Real-time Alerts */}
|
||||
<div data-tour="real-time-alerts">
|
||||
<RealTimeAlerts />
|
||||
</div>
|
||||
|
||||
{/* 2. Pending PO Approvals - What purchase orders need approval? */}
|
||||
{/* 2. Sustainability Impact - NEW! */}
|
||||
<div data-tour="sustainability-widget">
|
||||
<SustainabilityWidget
|
||||
days={30}
|
||||
onViewDetails={() => navigate('/app/analytics/sustainability')}
|
||||
onExportReport={() => {
|
||||
// TODO: Implement export modal
|
||||
console.log('Export sustainability report');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 3. Pending PO Approvals - What purchase orders need approval? */}
|
||||
<div data-tour="pending-po-approvals">
|
||||
<PendingPOApprovals
|
||||
onApprovePO={handleApprovePO}
|
||||
@@ -231,7 +436,7 @@ const DashboardPage: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 3. Today's Production - What needs to be produced today? */}
|
||||
{/* 4. Today's Production - What needs to be produced today? */}
|
||||
<div data-tour="today-production">
|
||||
<TodayProduction
|
||||
onStartBatch={handleStartBatch}
|
||||
@@ -242,6 +447,150 @@ const DashboardPage: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Purchase Order Details Modal */}
|
||||
{showPOModal && poDetails && (
|
||||
<EditViewModal
|
||||
isOpen={showPOModal}
|
||||
onClose={() => {
|
||||
setShowPOModal(false);
|
||||
setSelectedPOId(null);
|
||||
}}
|
||||
title={`Orden de Compra: ${poDetails.po_number}`}
|
||||
subtitle={`Proveedor: ${poDetails.supplier?.name || poDetails.supplier_name || 'N/A'}`}
|
||||
mode="view"
|
||||
sections={buildPODetailsSections(poDetails)}
|
||||
loading={isLoadingPO}
|
||||
statusIndicator={{
|
||||
color: poDetails.status === 'PENDING_APPROVAL' ? 'var(--color-warning)' :
|
||||
poDetails.status === 'APPROVED' ? 'var(--color-success)' :
|
||||
'var(--color-info)',
|
||||
text: poDetails.status === 'PENDING_APPROVAL' ? 'Pendiente de Aprobación' :
|
||||
poDetails.status === 'APPROVED' ? 'Aprobado' :
|
||||
poDetails.status || 'N/A',
|
||||
icon: ShoppingCart
|
||||
}}
|
||||
actions={
|
||||
poDetails.status === 'PENDING_APPROVAL' ? [
|
||||
{
|
||||
label: 'Aprobar',
|
||||
onClick: async () => {
|
||||
try {
|
||||
await approvePOMutation.mutateAsync({
|
||||
tenantId: currentTenant?.id || '',
|
||||
poId: poDetails.id,
|
||||
notes: 'Aprobado desde el dashboard'
|
||||
});
|
||||
toast.success('Orden aprobada');
|
||||
setShowPOModal(false);
|
||||
setSelectedPOId(null);
|
||||
} catch (error) {
|
||||
console.error('Error approving PO:', error);
|
||||
toast.error('Error al aprobar orden');
|
||||
}
|
||||
},
|
||||
variant: 'primary' as const,
|
||||
icon: CheckCircle
|
||||
},
|
||||
{
|
||||
label: 'Rechazar',
|
||||
onClick: async () => {
|
||||
try {
|
||||
await rejectPOMutation.mutateAsync({
|
||||
tenantId: currentTenant?.id || '',
|
||||
poId: poDetails.id,
|
||||
reason: 'Rechazado desde el dashboard'
|
||||
});
|
||||
toast.success('Orden rechazada');
|
||||
setShowPOModal(false);
|
||||
setSelectedPOId(null);
|
||||
} catch (error) {
|
||||
console.error('Error rejecting PO:', error);
|
||||
toast.error('Error al rechazar orden');
|
||||
}
|
||||
},
|
||||
variant: 'outline' as const,
|
||||
icon: X
|
||||
}
|
||||
] : undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Production Batch Details Modal */}
|
||||
{showBatchModal && batchDetails && (
|
||||
<EditViewModal
|
||||
isOpen={showBatchModal}
|
||||
onClose={() => {
|
||||
setShowBatchModal(false);
|
||||
setSelectedBatchId(null);
|
||||
}}
|
||||
title={batchDetails.product_name}
|
||||
subtitle={`Lote #${batchDetails.batch_number}`}
|
||||
mode="view"
|
||||
sections={buildBatchDetailsSections(batchDetails)}
|
||||
loading={isLoadingBatch}
|
||||
statusIndicator={{
|
||||
color: batchDetails.status === 'PENDING' ? 'var(--color-warning)' :
|
||||
batchDetails.status === 'IN_PROGRESS' ? 'var(--color-info)' :
|
||||
batchDetails.status === 'COMPLETED' ? 'var(--color-success)' :
|
||||
batchDetails.status === 'FAILED' ? 'var(--color-error)' :
|
||||
'var(--color-info)',
|
||||
text: batchDetails.status === 'PENDING' ? 'Pendiente' :
|
||||
batchDetails.status === 'IN_PROGRESS' ? 'En Progreso' :
|
||||
batchDetails.status === 'COMPLETED' ? 'Completado' :
|
||||
batchDetails.status === 'FAILED' ? 'Fallido' :
|
||||
batchDetails.status === 'ON_HOLD' ? 'Pausado' :
|
||||
batchDetails.status || 'N/A',
|
||||
icon: Factory
|
||||
}}
|
||||
actions={
|
||||
batchDetails.status === 'PENDING' ? [
|
||||
{
|
||||
label: 'Iniciar Lote',
|
||||
onClick: async () => {
|
||||
try {
|
||||
await updateBatchStatusMutation.mutateAsync({
|
||||
tenantId: currentTenant?.id || '',
|
||||
batchId: batchDetails.id,
|
||||
statusUpdate: { status: ProductionStatusEnum.IN_PROGRESS }
|
||||
});
|
||||
toast.success('Lote iniciado');
|
||||
setShowBatchModal(false);
|
||||
setSelectedBatchId(null);
|
||||
} catch (error) {
|
||||
console.error('Error starting batch:', error);
|
||||
toast.error('Error al iniciar lote');
|
||||
}
|
||||
},
|
||||
variant: 'primary' as const,
|
||||
icon: CheckCircle
|
||||
}
|
||||
] : batchDetails.status === 'IN_PROGRESS' ? [
|
||||
{
|
||||
label: 'Pausar Lote',
|
||||
onClick: async () => {
|
||||
try {
|
||||
await updateBatchStatusMutation.mutateAsync({
|
||||
tenantId: currentTenant?.id || '',
|
||||
batchId: batchDetails.id,
|
||||
statusUpdate: { status: ProductionStatusEnum.ON_HOLD }
|
||||
});
|
||||
toast.success('Lote pausado');
|
||||
setShowBatchModal(false);
|
||||
setSelectedBatchId(null);
|
||||
} catch (error) {
|
||||
console.error('Error pausing batch:', error);
|
||||
toast.error('Error al pausar lote');
|
||||
}
|
||||
},
|
||||
variant: 'outline' as const,
|
||||
icon: X
|
||||
}
|
||||
] : undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -20,7 +20,7 @@ import { useProcurementDashboard } from '../../../api/hooks/orders';
|
||||
import { formatters } from '../../../components/ui/Stats/StatsPresets';
|
||||
|
||||
const ProcurementAnalyticsPage: React.FC = () => {
|
||||
const { canAccessAnalytics } = useSubscription();
|
||||
const { canAccessAnalytics, subscriptionInfo } = useSubscription();
|
||||
const currentTenant = useCurrentTenant();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
|
||||
@@ -31,6 +31,24 @@ const ProcurementAnalyticsPage: React.FC = () => {
|
||||
// Check if user has access to advanced analytics (professional/enterprise)
|
||||
const hasAdvancedAccess = canAccessAnalytics('advanced');
|
||||
|
||||
// Show loading state while subscription data is being fetched
|
||||
if (subscriptionInfo.loading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Analítica de Compras"
|
||||
description="Insights avanzados sobre planificación de compras y gestión de proveedores"
|
||||
/>
|
||||
<Card className="p-8 text-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
|
||||
<p className="text-[var(--text-secondary)]">Cargando información de suscripción...</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// If user doesn't have access to advanced analytics, show upgrade message
|
||||
if (!hasAdvancedAccess) {
|
||||
return (
|
||||
|
||||
@@ -38,7 +38,7 @@ import {
|
||||
|
||||
const ProductionAnalyticsPage: React.FC = () => {
|
||||
const { t } = useTranslation('production');
|
||||
const { canAccessAnalytics } = useSubscription();
|
||||
const { canAccessAnalytics, subscriptionInfo } = useSubscription();
|
||||
const currentTenant = useCurrentTenant();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
|
||||
@@ -49,6 +49,24 @@ const ProductionAnalyticsPage: React.FC = () => {
|
||||
// Check if user has access to advanced analytics (professional/enterprise)
|
||||
const hasAdvancedAccess = canAccessAnalytics('advanced');
|
||||
|
||||
// Show loading state while subscription data is being fetched
|
||||
if (subscriptionInfo.loading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={t('analytics.production_analytics')}
|
||||
description={t('analytics.advanced_insights_professionals_enterprises')}
|
||||
/>
|
||||
<Card className="p-8 text-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
|
||||
<p className="text-[var(--text-secondary)]">{t('common.loading') || 'Cargando información de suscripción...'}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// If user doesn't have access to advanced analytics, show upgrade message
|
||||
if (!hasAdvancedAccess) {
|
||||
return (
|
||||
@@ -177,87 +195,57 @@ const ProductionAnalyticsPage: React.FC = () => {
|
||||
<div className="min-h-screen">
|
||||
{/* Overview Tab - Mixed Dashboard */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
|
||||
<div className="lg:col-span-2 xl:col-span-2">
|
||||
<LiveBatchTrackerWidget />
|
||||
</div>
|
||||
<div>
|
||||
<OnTimeCompletionWidget />
|
||||
</div>
|
||||
<div>
|
||||
<QualityScoreTrendsWidget />
|
||||
</div>
|
||||
<div>
|
||||
<WasteDefectTrackerWidget />
|
||||
</div>
|
||||
<div className="lg:col-span-2 xl:col-span-1">
|
||||
<CapacityUtilizationWidget />
|
||||
</div>
|
||||
<div className="grid gap-6">
|
||||
<LiveBatchTrackerWidget />
|
||||
<OnTimeCompletionWidget />
|
||||
<QualityScoreTrendsWidget />
|
||||
<WasteDefectTrackerWidget />
|
||||
<CapacityUtilizationWidget />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bakery Operations Tab */}
|
||||
{activeTab === 'operations' && (
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<TodaysScheduleSummaryWidget />
|
||||
<OnTimeCompletionWidget />
|
||||
</div>
|
||||
<div>
|
||||
<LiveBatchTrackerWidget />
|
||||
</div>
|
||||
<div>
|
||||
<CapacityUtilizationWidget />
|
||||
</div>
|
||||
<TodaysScheduleSummaryWidget />
|
||||
<OnTimeCompletionWidget />
|
||||
<LiveBatchTrackerWidget />
|
||||
<CapacityUtilizationWidget />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cost & Efficiency Tab */}
|
||||
{activeTab === 'cost-efficiency' && (
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<CostPerUnitWidget />
|
||||
<WasteDefectTrackerWidget />
|
||||
</div>
|
||||
<div>
|
||||
<YieldPerformanceWidget />
|
||||
</div>
|
||||
<CostPerUnitWidget />
|
||||
<WasteDefectTrackerWidget />
|
||||
<YieldPerformanceWidget />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quality Assurance Tab */}
|
||||
{activeTab === 'quality' && (
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<QualityScoreTrendsWidget />
|
||||
<WasteDefectTrackerWidget />
|
||||
</div>
|
||||
<div>
|
||||
<TopDefectTypesWidget />
|
||||
</div>
|
||||
<QualityScoreTrendsWidget />
|
||||
<WasteDefectTrackerWidget />
|
||||
<TopDefectTypesWidget />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Equipment & Maintenance Tab */}
|
||||
{activeTab === 'equipment' && (
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<EquipmentStatusWidget />
|
||||
<MaintenanceScheduleWidget />
|
||||
</div>
|
||||
<div>
|
||||
<EquipmentEfficiencyWidget />
|
||||
</div>
|
||||
<EquipmentStatusWidget />
|
||||
<MaintenanceScheduleWidget />
|
||||
<EquipmentEfficiencyWidget />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI Insights Tab */}
|
||||
{activeTab === 'ai-insights' && (
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<AIInsightsWidget />
|
||||
<PredictiveMaintenanceWidget />
|
||||
</div>
|
||||
<AIInsightsWidget />
|
||||
<PredictiveMaintenanceWidget />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
299
frontend/src/pages/app/database/ajustes/AjustesPage.tsx
Normal file
299
frontend/src/pages/app/database/ajustes/AjustesPage.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Settings, Save, RotateCcw, AlertCircle, Loader } from 'lucide-react';
|
||||
import { Button, Card } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import { useSettings, useUpdateSettings } from '../../../../api/hooks/settings';
|
||||
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||
import type {
|
||||
TenantSettings,
|
||||
ProcurementSettings,
|
||||
InventorySettings,
|
||||
ProductionSettings,
|
||||
SupplierSettings,
|
||||
POSSettings,
|
||||
OrderSettings,
|
||||
} from '../../../../api/types/settings';
|
||||
import ProcurementSettingsCard from './cards/ProcurementSettingsCard';
|
||||
import InventorySettingsCard from './cards/InventorySettingsCard';
|
||||
import ProductionSettingsCard from './cards/ProductionSettingsCard';
|
||||
import SupplierSettingsCard from './cards/SupplierSettingsCard';
|
||||
import POSSettingsCard from './cards/POSSettingsCard';
|
||||
import OrderSettingsCard from './cards/OrderSettingsCard';
|
||||
|
||||
const AjustesPage: React.FC = () => {
|
||||
const { addToast } = useToast();
|
||||
const currentTenant = useCurrentTenant();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
|
||||
const { data: settings, isLoading, error, isFetching } = useSettings(tenantId, {
|
||||
enabled: !!tenantId,
|
||||
retry: 2,
|
||||
staleTime: 5 * 60 * 100,
|
||||
});
|
||||
|
||||
// Debug logging
|
||||
React.useEffect(() => {
|
||||
console.log('🔍 AjustesPage - tenantId:', tenantId);
|
||||
console.log('🔍 AjustesPage - settings:', settings);
|
||||
console.log('🔍 AjustesPage - isLoading:', isLoading);
|
||||
console.log('🔍 AjustesPage - isFetching:', isFetching);
|
||||
console.log('🔍 AjustesPage - error:', error);
|
||||
}, [tenantId, settings, isLoading, isFetching, error]);
|
||||
const updateSettingsMutation = useUpdateSettings();
|
||||
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Local state for each category
|
||||
const [procurementSettings, setProcurementSettings] = useState<ProcurementSettings | null>(null);
|
||||
const [inventorySettings, setInventorySettings] = useState<InventorySettings | null>(null);
|
||||
const [productionSettings, setProductionSettings] = useState<ProductionSettings | null>(null);
|
||||
const [supplierSettings, setSupplierSettings] = useState<SupplierSettings | null>(null);
|
||||
const [posSettings, setPosSettings] = useState<POSSettings | null>(null);
|
||||
const [orderSettings, setOrderSettings] = useState<OrderSettings | null>(null);
|
||||
|
||||
// Load settings into local state when data is fetched
|
||||
React.useEffect(() => {
|
||||
if (settings) {
|
||||
setProcurementSettings(settings.procurement_settings);
|
||||
setInventorySettings(settings.inventory_settings);
|
||||
setProductionSettings(settings.production_settings);
|
||||
setSupplierSettings(settings.supplier_settings);
|
||||
setPosSettings(settings.pos_settings);
|
||||
setOrderSettings(settings.order_settings);
|
||||
setHasUnsavedChanges(false);
|
||||
}
|
||||
}, [settings]);
|
||||
|
||||
const handleSaveAll = async () => {
|
||||
if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
|
||||
!supplierSettings || !posSettings || !orderSettings) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
await updateSettingsMutation.mutateAsync({
|
||||
tenantId,
|
||||
updates: {
|
||||
procurement_settings: procurementSettings,
|
||||
inventory_settings: inventorySettings,
|
||||
production_settings: productionSettings,
|
||||
supplier_settings: supplierSettings,
|
||||
pos_settings: posSettings,
|
||||
order_settings: orderSettings,
|
||||
},
|
||||
});
|
||||
|
||||
setHasUnsavedChanges(false);
|
||||
addToast('Ajustes guardados correctamente', { type: 'success' });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Error desconocido';
|
||||
addToast(`Error al guardar ajustes: ${errorMessage}`, { type: 'error' });
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetAll = () => {
|
||||
if (settings) {
|
||||
setProcurementSettings(settings.procurement_settings);
|
||||
setInventorySettings(settings.inventory_settings);
|
||||
setProductionSettings(settings.production_settings);
|
||||
setSupplierSettings(settings.supplier_settings);
|
||||
setPosSettings(settings.pos_settings);
|
||||
setOrderSettings(settings.order_settings);
|
||||
setHasUnsavedChanges(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCategoryChange = (category: string) => {
|
||||
setHasUnsavedChanges(true);
|
||||
};
|
||||
|
||||
if (isLoading || !currentTenant) {
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
title="Ajustes"
|
||||
description="Configura los parámetros operativos de tu panadería"
|
||||
/>
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
||||
<span className="ml-2 text-[var(--text-secondary)]">Cargando ajustes...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
title="Ajustes"
|
||||
description="Error al cargar los ajustes"
|
||||
/>
|
||||
<Card className="p-6">
|
||||
<div className="text-red-600">
|
||||
Error al cargar los ajustes: {error.message || 'Error desconocido'}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6 pb-32">
|
||||
<PageHeader
|
||||
title="Ajustes"
|
||||
description="Configura los parámetros operativos de tu panadería"
|
||||
/>
|
||||
|
||||
{/* Top Action Bar */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Settings className="w-4 h-4 text-[var(--color-primary)]" />
|
||||
<span className="text-[var(--text-secondary)]">
|
||||
Ajusta los parámetros según las necesidades de tu negocio
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleResetAll}
|
||||
disabled={!hasUnsavedChanges || isSaving}
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
Restablecer Todo
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleSaveAll}
|
||||
isLoading={isSaving}
|
||||
disabled={!hasUnsavedChanges}
|
||||
loadingText="Guardando..."
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
Guardar Cambios
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Settings Categories */}
|
||||
<div className="space-y-6">
|
||||
{/* Procurement Settings */}
|
||||
{procurementSettings && (
|
||||
<ProcurementSettingsCard
|
||||
settings={procurementSettings}
|
||||
onChange={(newSettings) => {
|
||||
setProcurementSettings(newSettings);
|
||||
handleCategoryChange('procurement');
|
||||
}}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Inventory Settings */}
|
||||
{inventorySettings && (
|
||||
<InventorySettingsCard
|
||||
settings={inventorySettings}
|
||||
onChange={(newSettings) => {
|
||||
setInventorySettings(newSettings);
|
||||
handleCategoryChange('inventory');
|
||||
}}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Production Settings */}
|
||||
{productionSettings && (
|
||||
<ProductionSettingsCard
|
||||
settings={productionSettings}
|
||||
onChange={(newSettings) => {
|
||||
setProductionSettings(newSettings);
|
||||
handleCategoryChange('production');
|
||||
}}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Supplier Settings */}
|
||||
{supplierSettings && (
|
||||
<SupplierSettingsCard
|
||||
settings={supplierSettings}
|
||||
onChange={(newSettings) => {
|
||||
setSupplierSettings(newSettings);
|
||||
handleCategoryChange('supplier');
|
||||
}}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* POS Settings */}
|
||||
{posSettings && (
|
||||
<POSSettingsCard
|
||||
settings={posSettings}
|
||||
onChange={(newSettings) => {
|
||||
setPosSettings(newSettings);
|
||||
handleCategoryChange('pos');
|
||||
}}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Order Settings */}
|
||||
{orderSettings && (
|
||||
<OrderSettingsCard
|
||||
settings={orderSettings}
|
||||
onChange={(newSettings) => {
|
||||
setOrderSettings(newSettings);
|
||||
handleCategoryChange('order');
|
||||
}}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Floating Save Banner */}
|
||||
{hasUnsavedChanges && (
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
<Card className="p-4 shadow-lg border-2 border-[var(--color-primary)]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<AlertCircle className="w-4 h-4 text-yellow-500" />
|
||||
Tienes cambios sin guardar
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleResetAll}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
Descartar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleSaveAll}
|
||||
isLoading={isSaving}
|
||||
loadingText="Guardando..."
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
Guardar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AjustesPage;
|
||||
@@ -0,0 +1,280 @@
|
||||
import React from 'react';
|
||||
import { Package, AlertCircle, Thermometer, Clock } from 'lucide-react';
|
||||
import { Card, Input } from '../../../../../components/ui';
|
||||
import type { InventorySettings } from '../../../../../api/types/settings';
|
||||
|
||||
interface InventorySettingsCardProps {
|
||||
settings: InventorySettings;
|
||||
onChange: (settings: InventorySettings) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const InventorySettingsCard: React.FC<InventorySettingsCardProps> = ({
|
||||
settings,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const handleChange = (field: keyof InventorySettings) => (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const value = e.target.type === 'checkbox' ? e.target.checked :
|
||||
e.target.type === 'number' ? parseFloat(e.target.value) :
|
||||
e.target.value;
|
||||
onChange({ ...settings, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
|
||||
<Package className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||||
Gestión de Inventario
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Stock Management */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Package className="w-4 h-4 mr-2" />
|
||||
Control de Stock
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Umbral de Stock Bajo"
|
||||
value={settings.low_stock_threshold}
|
||||
onChange={handleChange('low_stock_threshold')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={1000}
|
||||
step={1}
|
||||
placeholder="10"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Punto de Reorden"
|
||||
value={settings.reorder_point}
|
||||
onChange={handleChange('reorder_point')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={1000}
|
||||
step={1}
|
||||
placeholder="20"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Cantidad de Reorden"
|
||||
value={settings.reorder_quantity}
|
||||
onChange={handleChange('reorder_quantity')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={1000}
|
||||
step={1}
|
||||
placeholder="50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expiration Management */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Gestión de Caducidad
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Días para 'Próximo a Caducar'"
|
||||
value={settings.expiring_soon_days}
|
||||
onChange={handleChange('expiring_soon_days')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
placeholder="7"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Días para Alerta de Caducidad"
|
||||
value={settings.expiration_warning_days}
|
||||
onChange={handleChange('expiration_warning_days')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={14}
|
||||
step={1}
|
||||
placeholder="3"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Umbral de Calidad (0-10)"
|
||||
value={settings.quality_score_threshold}
|
||||
onChange={handleChange('quality_score_threshold')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={10}
|
||||
step={0.1}
|
||||
placeholder="8.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Temperature Monitoring */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Thermometer className="w-4 h-4 mr-2" />
|
||||
Monitorización de Temperatura
|
||||
</h4>
|
||||
<div className="space-y-4 pl-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="temperature_monitoring_enabled"
|
||||
checked={settings.temperature_monitoring_enabled}
|
||||
onChange={handleChange('temperature_monitoring_enabled')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="temperature_monitoring_enabled" className="text-sm text-[var(--text-secondary)]">
|
||||
Habilitar monitorización de temperatura
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{settings.temperature_monitoring_enabled && (
|
||||
<>
|
||||
{/* Refrigeration */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
|
||||
Refrigeración (°C)
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.refrigeration_temp_min}
|
||||
onChange={handleChange('refrigeration_temp_min')}
|
||||
disabled={disabled}
|
||||
min={-5}
|
||||
max={10}
|
||||
step={0.5}
|
||||
placeholder="1.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.refrigeration_temp_max}
|
||||
onChange={handleChange('refrigeration_temp_max')}
|
||||
disabled={disabled}
|
||||
min={-5}
|
||||
max={10}
|
||||
step={0.5}
|
||||
placeholder="4.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Freezer */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
|
||||
Congelador (°C)
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.freezer_temp_min}
|
||||
onChange={handleChange('freezer_temp_min')}
|
||||
disabled={disabled}
|
||||
min={-30}
|
||||
max={0}
|
||||
step={1}
|
||||
placeholder="-20.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.freezer_temp_max}
|
||||
onChange={handleChange('freezer_temp_max')}
|
||||
disabled={disabled}
|
||||
min={-30}
|
||||
max={0}
|
||||
step={1}
|
||||
placeholder="-15.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Room Temperature */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
|
||||
Temperatura Ambiente (°C)
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.room_temp_min}
|
||||
onChange={handleChange('room_temp_min')}
|
||||
disabled={disabled}
|
||||
min={10}
|
||||
max={35}
|
||||
step={1}
|
||||
placeholder="18.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.room_temp_max}
|
||||
onChange={handleChange('room_temp_max')}
|
||||
disabled={disabled}
|
||||
min={10}
|
||||
max={35}
|
||||
step={1}
|
||||
placeholder="25.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alert Timing */}
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-[var(--text-tertiary)] mb-2 flex items-center">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
Alertas de Desviación
|
||||
</h5>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Desviación Normal (minutos)"
|
||||
value={settings.temp_deviation_alert_minutes}
|
||||
onChange={handleChange('temp_deviation_alert_minutes')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={60}
|
||||
step={1}
|
||||
placeholder="15"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Desviación Crítica (minutos)"
|
||||
value={settings.critical_temp_deviation_minutes}
|
||||
onChange={handleChange('critical_temp_deviation_minutes')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
placeholder="5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventorySettingsCard;
|
||||
@@ -0,0 +1,150 @@
|
||||
import React from 'react';
|
||||
import { ShoppingBag, Tag, Clock, TrendingUp, MapPin } from 'lucide-react';
|
||||
import { Card, Input } from '../../../../../components/ui';
|
||||
import type { OrderSettings } from '../../../../../api/types/settings';
|
||||
|
||||
interface OrderSettingsCardProps {
|
||||
settings: OrderSettings;
|
||||
onChange: (settings: OrderSettings) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const OrderSettingsCard: React.FC<OrderSettingsCardProps> = ({
|
||||
settings,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const handleChange = (field: keyof OrderSettings) => (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const value = e.target.type === 'checkbox' ? e.target.checked :
|
||||
e.target.type === 'number' ? parseFloat(e.target.value) :
|
||||
e.target.value;
|
||||
onChange({ ...settings, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
|
||||
<ShoppingBag className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||||
Pedidos y Reglas de Negocio
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Discount & Pricing */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Tag className="w-4 h-4 mr-2" />
|
||||
Descuentos y Precios
|
||||
</h4>
|
||||
<div className="space-y-4 pl-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Descuento Máximo (%)"
|
||||
value={settings.max_discount_percentage}
|
||||
onChange={handleChange('max_discount_percentage')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
placeholder="50.0"
|
||||
helperText="Porcentaje máximo de descuento permitido en pedidos"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="discount_enabled"
|
||||
checked={settings.discount_enabled}
|
||||
onChange={handleChange('discount_enabled')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="discount_enabled" className="text-sm text-[var(--text-secondary)]">
|
||||
Habilitar descuentos en pedidos
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="dynamic_pricing_enabled"
|
||||
checked={settings.dynamic_pricing_enabled}
|
||||
onChange={handleChange('dynamic_pricing_enabled')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="dynamic_pricing_enabled" className="text-sm text-[var(--text-secondary)]">
|
||||
Habilitar precios dinámicos
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delivery Settings */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<MapPin className="w-4 h-4 mr-2" />
|
||||
Configuración de Entrega
|
||||
</h4>
|
||||
<div className="space-y-4 pl-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Ventana de Entrega Predeterminada (horas)"
|
||||
value={settings.default_delivery_window_hours}
|
||||
onChange={handleChange('default_delivery_window_hours')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={168}
|
||||
step={1}
|
||||
placeholder="48"
|
||||
helperText="Tiempo predeterminado para la entrega de pedidos"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="delivery_tracking_enabled"
|
||||
checked={settings.delivery_tracking_enabled}
|
||||
onChange={handleChange('delivery_tracking_enabled')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="delivery_tracking_enabled" className="text-sm text-[var(--text-secondary)]">
|
||||
Habilitar seguimiento de entregas
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<TrendingUp className="w-5 h-5 text-blue-600 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h5 className="text-sm font-semibold text-blue-900 mb-1">
|
||||
Reglas de Negocio
|
||||
</h5>
|
||||
<p className="text-xs text-blue-700 mb-2">
|
||||
Estos ajustes controlan las reglas de negocio que se aplican a los pedidos.
|
||||
</p>
|
||||
<ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
|
||||
<li><strong>Precios dinámicos:</strong> Ajusta automáticamente los precios según demanda, inventario y otros factores</li>
|
||||
<li><strong>Descuentos:</strong> Permite aplicar descuentos a productos y pedidos dentro del límite establecido</li>
|
||||
<li><strong>Seguimiento de entregas:</strong> Permite a los clientes rastrear sus pedidos en tiempo real</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderSettingsCard;
|
||||
@@ -0,0 +1,111 @@
|
||||
import React from 'react';
|
||||
import { Smartphone, RefreshCw, Clock } from 'lucide-react';
|
||||
import { Card, Input } from '../../../../../components/ui';
|
||||
import type { POSSettings } from '../../../../../api/types/settings';
|
||||
|
||||
interface POSSettingsCardProps {
|
||||
settings: POSSettings;
|
||||
onChange: (settings: POSSettings) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const POSSettingsCard: React.FC<POSSettingsCardProps> = ({
|
||||
settings,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const handleChange = (field: keyof POSSettings) => (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const value = e.target.type === 'checkbox' ? e.target.checked :
|
||||
e.target.type === 'number' ? parseInt(e.target.value, 10) :
|
||||
e.target.value;
|
||||
onChange({ ...settings, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
|
||||
<Smartphone className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||||
Punto de Venta (POS)
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Sync Settings */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Sincronización
|
||||
</h4>
|
||||
<div className="space-y-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Intervalo de Sincronización (minutos)"
|
||||
value={settings.sync_interval_minutes}
|
||||
onChange={handleChange('sync_interval_minutes')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={60}
|
||||
step={1}
|
||||
placeholder="5"
|
||||
helperText="Frecuencia con la que se sincroniza el POS con el sistema central"
|
||||
/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="auto_sync_products"
|
||||
checked={settings.auto_sync_products}
|
||||
onChange={handleChange('auto_sync_products')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="auto_sync_products" className="text-sm text-[var(--text-secondary)]">
|
||||
Sincronización automática de productos
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="auto_sync_transactions"
|
||||
checked={settings.auto_sync_transactions}
|
||||
onChange={handleChange('auto_sync_transactions')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="auto_sync_transactions" className="text-sm text-[var(--text-secondary)]">
|
||||
Sincronización automática de transacciones
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Smartphone className="w-5 h-5 text-blue-600 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h5 className="text-sm font-semibold text-blue-900 mb-1">
|
||||
Integración POS
|
||||
</h5>
|
||||
<p className="text-xs text-blue-700 mb-2">
|
||||
Estos ajustes controlan cómo se sincroniza la información entre el sistema central
|
||||
y los terminales de punto de venta.
|
||||
</p>
|
||||
<ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
|
||||
<li>Un intervalo más corto mantiene los datos más actualizados pero consume más recursos</li>
|
||||
<li>La sincronización automática garantiza que los cambios se reflejen inmediatamente</li>
|
||||
<li>Desactivar la sincronización automática requiere sincronización manual</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default POSSettingsCard;
|
||||
@@ -0,0 +1,191 @@
|
||||
import React from 'react';
|
||||
import { ShoppingCart, TrendingUp, Clock, AlertTriangle } from 'lucide-react';
|
||||
import { Card, Input } from '../../../../../components/ui';
|
||||
import type { ProcurementSettings } from '../../../../../api/types/settings';
|
||||
|
||||
interface ProcurementSettingsCardProps {
|
||||
settings: ProcurementSettings;
|
||||
onChange: (settings: ProcurementSettings) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const ProcurementSettingsCard: React.FC<ProcurementSettingsCardProps> = ({
|
||||
settings,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const handleChange = (field: keyof ProcurementSettings) => (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const value = e.target.type === 'checkbox' ? e.target.checked :
|
||||
e.target.type === 'number' ? parseFloat(e.target.value) :
|
||||
e.target.value;
|
||||
onChange({ ...settings, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
|
||||
<ShoppingCart className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||||
Compras y Aprovisionamiento
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Auto-Approval Settings */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
Auto-Aprobación de Órdenes de Compra
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
|
||||
<div className="flex items-center gap-2 md:col-span-2 xl:col-span-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="auto_approve_enabled"
|
||||
checked={settings.auto_approve_enabled}
|
||||
onChange={handleChange('auto_approve_enabled')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="auto_approve_enabled" className="text-sm text-[var(--text-secondary)]">
|
||||
Habilitar auto-aprobación de órdenes de compra
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Umbral de Auto-Aprobación (EUR)"
|
||||
value={settings.auto_approve_threshold_eur}
|
||||
onChange={handleChange('auto_approve_threshold_eur')}
|
||||
disabled={disabled || !settings.auto_approve_enabled}
|
||||
min={0}
|
||||
max={10000}
|
||||
step={50}
|
||||
placeholder="500.0"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Puntuación Mínima de Proveedor"
|
||||
value={settings.auto_approve_min_supplier_score}
|
||||
onChange={handleChange('auto_approve_min_supplier_score')}
|
||||
disabled={disabled || !settings.auto_approve_enabled}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
placeholder="0.80"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="require_approval_new_suppliers"
|
||||
checked={settings.require_approval_new_suppliers}
|
||||
onChange={handleChange('require_approval_new_suppliers')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="require_approval_new_suppliers" className="text-sm text-[var(--text-secondary)]">
|
||||
Requiere aprobación para nuevos proveedores
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="require_approval_critical_items"
|
||||
checked={settings.require_approval_critical_items}
|
||||
onChange={handleChange('require_approval_critical_items')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="require_approval_critical_items" className="text-sm text-[var(--text-secondary)]">
|
||||
Requiere aprobación para artículos críticos
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Planning & Forecasting */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Planificación y Previsión
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Tiempo de Entrega (días)"
|
||||
value={settings.procurement_lead_time_days}
|
||||
onChange={handleChange('procurement_lead_time_days')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
placeholder="3"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Días de Previsión de Demanda"
|
||||
value={settings.demand_forecast_days}
|
||||
onChange={handleChange('demand_forecast_days')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={90}
|
||||
step={1}
|
||||
placeholder="14"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Stock de Seguridad (%)"
|
||||
value={settings.safety_stock_percentage}
|
||||
onChange={handleChange('safety_stock_percentage')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
placeholder="20.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Approval Workflow */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<AlertTriangle className="w-4 h-4 mr-2" />
|
||||
Flujo de Aprobación
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Recordatorio de Aprobación (horas)"
|
||||
value={settings.po_approval_reminder_hours}
|
||||
onChange={handleChange('po_approval_reminder_hours')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={168}
|
||||
step={1}
|
||||
placeholder="24"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Escalación Crítica (horas)"
|
||||
value={settings.po_critical_escalation_hours}
|
||||
onChange={handleChange('po_critical_escalation_hours')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={72}
|
||||
step={1}
|
||||
placeholder="12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProcurementSettingsCard;
|
||||
@@ -0,0 +1,281 @@
|
||||
import React from 'react';
|
||||
import { Factory, Calendar, TrendingUp, Clock, DollarSign } from 'lucide-react';
|
||||
import { Card, Input } from '../../../../../components/ui';
|
||||
import type { ProductionSettings } from '../../../../../api/types/settings';
|
||||
|
||||
interface ProductionSettingsCardProps {
|
||||
settings: ProductionSettings;
|
||||
onChange: (settings: ProductionSettings) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const ProductionSettingsCard: React.FC<ProductionSettingsCardProps> = ({
|
||||
settings,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const handleChange = (field: keyof ProductionSettings) => (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const value = e.target.type === 'checkbox' ? e.target.checked :
|
||||
e.target.type === 'number' ? parseFloat(e.target.value) :
|
||||
e.target.value;
|
||||
onChange({ ...settings, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
|
||||
<Factory className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||||
Producción
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Planning & Batch Size */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Calendar className="w-4 h-4 mr-2" />
|
||||
Planificación y Lotes
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Horizonte de Planificación (días)"
|
||||
value={settings.planning_horizon_days}
|
||||
onChange={handleChange('planning_horizon_days')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
placeholder="7"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Tamaño Mínimo de Lote"
|
||||
value={settings.minimum_batch_size}
|
||||
onChange={handleChange('minimum_batch_size')}
|
||||
disabled={disabled}
|
||||
min={0.1}
|
||||
max={100}
|
||||
step={0.1}
|
||||
placeholder="1.0"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Tamaño Máximo de Lote"
|
||||
value={settings.maximum_batch_size}
|
||||
onChange={handleChange('maximum_batch_size')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={1000}
|
||||
step={1}
|
||||
placeholder="100.0"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Buffer de Producción (%)"
|
||||
value={settings.production_buffer_percentage}
|
||||
onChange={handleChange('production_buffer_percentage')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={50}
|
||||
step={1}
|
||||
placeholder="10.0"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-2 md:col-span-2 xl:col-span-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="schedule_optimization_enabled"
|
||||
checked={settings.schedule_optimization_enabled}
|
||||
onChange={handleChange('schedule_optimization_enabled')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="schedule_optimization_enabled" className="text-sm text-[var(--text-secondary)]">
|
||||
Habilitar optimización de horarios
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Capacity & Working Hours */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Capacidad y Jornada Laboral
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Horas de Trabajo por Día"
|
||||
value={settings.working_hours_per_day}
|
||||
onChange={handleChange('working_hours_per_day')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={24}
|
||||
step={1}
|
||||
placeholder="12"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Máximo Horas Extra"
|
||||
value={settings.max_overtime_hours}
|
||||
onChange={handleChange('max_overtime_hours')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={12}
|
||||
step={1}
|
||||
placeholder="4"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Objetivo Utilización Capacidad"
|
||||
value={settings.capacity_utilization_target}
|
||||
onChange={handleChange('capacity_utilization_target')}
|
||||
disabled={disabled}
|
||||
min={0.5}
|
||||
max={1}
|
||||
step={0.01}
|
||||
placeholder="0.85"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Umbral de Alerta de Capacidad"
|
||||
value={settings.capacity_warning_threshold}
|
||||
onChange={handleChange('capacity_warning_threshold')}
|
||||
disabled={disabled}
|
||||
min={0.7}
|
||||
max={1}
|
||||
step={0.01}
|
||||
placeholder="0.95"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quality Control */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
Control de Calidad
|
||||
</h4>
|
||||
<div className="space-y-4 pl-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="quality_check_enabled"
|
||||
checked={settings.quality_check_enabled}
|
||||
onChange={handleChange('quality_check_enabled')}
|
||||
disabled={disabled}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<label htmlFor="quality_check_enabled" className="text-sm text-[var(--text-secondary)]">
|
||||
Habilitar verificación de calidad
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Rendimiento Mínimo (%)"
|
||||
value={settings.minimum_yield_percentage}
|
||||
onChange={handleChange('minimum_yield_percentage')}
|
||||
disabled={disabled || !settings.quality_check_enabled}
|
||||
min={50}
|
||||
max={100}
|
||||
step={1}
|
||||
placeholder="85.0"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Umbral de Puntuación de Calidad (0-10)"
|
||||
value={settings.quality_score_threshold}
|
||||
onChange={handleChange('quality_score_threshold')}
|
||||
disabled={disabled || !settings.quality_check_enabled}
|
||||
min={0}
|
||||
max={10}
|
||||
step={0.1}
|
||||
placeholder="8.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Time Buffers */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Tiempos de Preparación
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Tiempo de Preparación (minutos)"
|
||||
value={settings.prep_time_buffer_minutes}
|
||||
onChange={handleChange('prep_time_buffer_minutes')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={120}
|
||||
step={5}
|
||||
placeholder="30"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Tiempo de Limpieza (minutos)"
|
||||
value={settings.cleanup_time_buffer_minutes}
|
||||
onChange={handleChange('cleanup_time_buffer_minutes')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={120}
|
||||
step={5}
|
||||
placeholder="15"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cost Settings */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<DollarSign className="w-4 h-4 mr-2" />
|
||||
Costes
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Coste Laboral por Hora (EUR)"
|
||||
value={settings.labor_cost_per_hour_eur}
|
||||
onChange={handleChange('labor_cost_per_hour_eur')}
|
||||
disabled={disabled}
|
||||
min={5}
|
||||
max={100}
|
||||
step={0.5}
|
||||
placeholder="15.0"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Porcentaje de Gastos Generales (%)"
|
||||
value={settings.overhead_cost_percentage}
|
||||
onChange={handleChange('overhead_cost_percentage')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={50}
|
||||
step={1}
|
||||
placeholder="20.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionSettingsCard;
|
||||
@@ -0,0 +1,196 @@
|
||||
import React from 'react';
|
||||
import { Truck, Calendar, TrendingUp, AlertTriangle, DollarSign } from 'lucide-react';
|
||||
import { Card, Input } from '../../../../../components/ui';
|
||||
import type { SupplierSettings } from '../../../../../api/types/settings';
|
||||
|
||||
interface SupplierSettingsCardProps {
|
||||
settings: SupplierSettings;
|
||||
onChange: (settings: SupplierSettings) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
|
||||
settings,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const handleChange = (field: keyof SupplierSettings) => (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const value = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
|
||||
onChange({ ...settings, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
|
||||
<Truck className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||||
Gestión de Proveedores
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Default Terms */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Calendar className="w-4 h-4 mr-2" />
|
||||
Términos Predeterminados
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Plazo de Pago Predeterminado (días)"
|
||||
value={settings.default_payment_terms_days}
|
||||
onChange={handleChange('default_payment_terms_days')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={90}
|
||||
step={1}
|
||||
placeholder="30"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Días de Entrega Predeterminados"
|
||||
value={settings.default_delivery_days}
|
||||
onChange={handleChange('default_delivery_days')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
placeholder="3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Performance Thresholds - Delivery */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
Umbrales de Rendimiento - Entregas
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Tasa de Entrega Excelente (%)"
|
||||
value={settings.excellent_delivery_rate}
|
||||
onChange={handleChange('excellent_delivery_rate')}
|
||||
disabled={disabled}
|
||||
min={90}
|
||||
max={100}
|
||||
step={0.5}
|
||||
placeholder="95.0"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Tasa de Entrega Buena (%)"
|
||||
value={settings.good_delivery_rate}
|
||||
onChange={handleChange('good_delivery_rate')}
|
||||
disabled={disabled}
|
||||
min={80}
|
||||
max={99}
|
||||
step={0.5}
|
||||
placeholder="90.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Performance Thresholds - Quality */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
Umbrales de Rendimiento - Calidad
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Tasa de Calidad Excelente (%)"
|
||||
value={settings.excellent_quality_rate}
|
||||
onChange={handleChange('excellent_quality_rate')}
|
||||
disabled={disabled}
|
||||
min={90}
|
||||
max={100}
|
||||
step={0.5}
|
||||
placeholder="98.0"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Tasa de Calidad Buena (%)"
|
||||
value={settings.good_quality_rate}
|
||||
onChange={handleChange('good_quality_rate')}
|
||||
disabled={disabled}
|
||||
min={80}
|
||||
max={99}
|
||||
step={0.5}
|
||||
placeholder="95.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Critical Alerts */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<AlertTriangle className="w-4 h-4 mr-2" />
|
||||
Alertas Críticas
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
|
||||
<Input
|
||||
type="number"
|
||||
label="Retraso de Entrega Crítico (horas)"
|
||||
value={settings.critical_delivery_delay_hours}
|
||||
onChange={handleChange('critical_delivery_delay_hours')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={168}
|
||||
step={1}
|
||||
placeholder="24"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Tasa de Rechazo de Calidad Crítica (%)"
|
||||
value={settings.critical_quality_rejection_rate}
|
||||
onChange={handleChange('critical_quality_rejection_rate')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={50}
|
||||
step={0.5}
|
||||
placeholder="10.0"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
label="Varianza de Coste Alta (%)"
|
||||
value={settings.high_cost_variance_percentage}
|
||||
onChange={handleChange('high_cost_variance_percentage')}
|
||||
disabled={disabled}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
placeholder="15.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<TrendingUp className="w-5 h-5 text-blue-600 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h5 className="text-sm font-semibold text-blue-900 mb-1">
|
||||
Evaluación de Proveedores
|
||||
</h5>
|
||||
<p className="text-xs text-blue-700">
|
||||
Estos umbrales se utilizan para evaluar automáticamente el rendimiento de los proveedores.
|
||||
Los proveedores con rendimiento por debajo de los umbrales "buenos" recibirán alertas automáticas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierSettingsCard;
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Plus, Minus, ShoppingCart, CreditCard, Banknote, Calculator, User, Receipt, Package, Euro, TrendingUp, Clock, ToggleLeft, ToggleRight, Settings, Zap, Wifi, WifiOff, AlertCircle, CheckCircle, Loader, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { Button, Card, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
|
||||
import { Plus, Minus, ShoppingCart, CreditCard, Banknote, Calculator, User, Receipt, Package, Euro, TrendingUp, Clock, ToggleLeft, ToggleRight, Settings, Zap, Wifi, WifiOff, AlertCircle, CheckCircle, Loader, Trash2, X, ChevronRight, ChevronLeft } from 'lucide-react';
|
||||
import { Button, Card, StatusCard, getStatusColor, Badge } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { LoadingSpinner } from '../../../../components/ui';
|
||||
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
|
||||
@@ -8,7 +8,7 @@ import { useIngredients } from '../../../../api/hooks/inventory';
|
||||
import { useTenantId } from '../../../../hooks/useTenantId';
|
||||
import { ProductType, ProductCategory, IngredientResponse } from '../../../../api/types/inventory';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import { usePOSConfigurationData, usePOSConfigurationManager } from '../../../../api/hooks/pos';
|
||||
import { usePOSConfigurationData, usePOSConfigurationManager, usePOSTransactions, usePOSTransactionsDashboard, usePOSTransaction } from '../../../../api/hooks/pos';
|
||||
import { POSConfiguration } from '../../../../api/types/pos';
|
||||
import { posService } from '../../../../api/services/pos';
|
||||
import { bakeryColors } from '../../../../styles/colors';
|
||||
@@ -28,11 +28,515 @@ interface CartItem {
|
||||
stock: number;
|
||||
}
|
||||
|
||||
// Transactions Section Component
|
||||
const TransactionsSection: React.FC<{ tenantId: string }> = ({ tenantId }) => {
|
||||
const [page, setPage] = useState(0);
|
||||
const [selectedTransactionId, setSelectedTransactionId] = useState<string | null>(null);
|
||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
||||
const limit = 10;
|
||||
|
||||
// Fetch transactions
|
||||
const { data: transactionsData, isLoading: transactionsLoading } = usePOSTransactions({
|
||||
tenant_id: tenantId,
|
||||
limit,
|
||||
offset: page * limit,
|
||||
});
|
||||
|
||||
// Fetch dashboard summary
|
||||
const { data: dashboardData, isLoading: dashboardLoading } = usePOSTransactionsDashboard({
|
||||
tenant_id: tenantId,
|
||||
});
|
||||
|
||||
// Fetch selected transaction details
|
||||
const { data: selectedTransaction, isLoading: detailLoading } = usePOSTransaction(
|
||||
{
|
||||
tenant_id: tenantId,
|
||||
transaction_id: selectedTransactionId || '',
|
||||
},
|
||||
{
|
||||
enabled: !!selectedTransactionId,
|
||||
}
|
||||
);
|
||||
|
||||
const handleViewDetails = (transactionId: string) => {
|
||||
setSelectedTransactionId(transactionId);
|
||||
setShowDetailModal(true);
|
||||
};
|
||||
|
||||
const handleCloseDetail = () => {
|
||||
setShowDetailModal(false);
|
||||
setSelectedTransactionId(null);
|
||||
};
|
||||
|
||||
if (transactionsLoading || dashboardLoading) {
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<LoadingSpinner text="Cargando transacciones..." />
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const transactions = transactionsData?.transactions || [];
|
||||
const summary = transactionsData?.summary;
|
||||
const dashboard = dashboardData;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Dashboard Stats */}
|
||||
{dashboard && (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center">
|
||||
<Receipt className="w-5 h-5 mr-2 text-blue-500" />
|
||||
Resumen de Transacciones
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<div className="text-sm text-[var(--text-secondary)] mb-1">Hoy</div>
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)]">{dashboard.total_transactions_today}</div>
|
||||
<div className="text-sm text-[var(--text-tertiary)] mt-1">
|
||||
{formatters.currency(dashboard.revenue_today)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<div className="text-sm text-[var(--text-secondary)] mb-1">Esta Semana</div>
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)]">{dashboard.total_transactions_this_week}</div>
|
||||
<div className="text-sm text-[var(--text-tertiary)] mt-1">
|
||||
{formatters.currency(dashboard.revenue_this_week)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<div className="text-sm text-[var(--text-secondary)] mb-1">Este Mes</div>
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)]">{dashboard.total_transactions_this_month}</div>
|
||||
<div className="text-sm text-[var(--text-tertiary)] mt-1">
|
||||
{formatters.currency(dashboard.revenue_this_month)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Transactions List */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
|
||||
<Receipt className="w-5 h-5 mr-2 text-green-500" />
|
||||
Transacciones Recientes
|
||||
</h3>
|
||||
{summary && (
|
||||
<div className="flex items-center gap-4 text-sm text-[var(--text-secondary)]">
|
||||
<div className="flex items-center gap-1">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span>{summary.sync_status.synced} sincronizadas</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="w-4 h-4 text-yellow-500" />
|
||||
<span>{summary.sync_status.pending} pendientes</span>
|
||||
</div>
|
||||
{summary.sync_status.failed > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<AlertCircle className="w-4 h-4 text-red-500" />
|
||||
<span>{summary.sync_status.failed} fallidas</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{transactions.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Receipt className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4 opacity-30" />
|
||||
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
|
||||
No hay transacciones
|
||||
</h3>
|
||||
<p className="text-[var(--text-secondary)]">
|
||||
Las transacciones sincronizadas desde tus sistemas POS aparecerán aquí
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Desktop Table View - Hidden on mobile */}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[var(--bg-secondary)]">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">ID Transacción</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Fecha</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Total</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Método Pago</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Estado</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Sync</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[var(--border-primary)]">
|
||||
{transactions.map((transaction) => (
|
||||
<tr key={transaction.id} className="hover:bg-[var(--bg-secondary)] transition-colors">
|
||||
<td className="px-4 py-3 text-sm text-[var(--text-primary)] font-mono">
|
||||
{transaction.external_transaction_id}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--text-secondary)]">
|
||||
{new Date(transaction.transaction_date).toLocaleString('es-ES', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm font-semibold text-[var(--text-primary)]">
|
||||
{formatters.currency(transaction.total_amount)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--text-secondary)] capitalize">
|
||||
{transaction.payment_method || 'N/A'}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<Badge
|
||||
variant={
|
||||
transaction.status === 'completed' ? 'success' :
|
||||
transaction.status === 'pending' ? 'warning' :
|
||||
'error'
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{transaction.status}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{transaction.is_synced_to_sales ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||||
) : (
|
||||
<Clock className="w-5 h-5 text-yellow-500" />
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => handleViewDetails(transaction.id)}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 font-medium"
|
||||
>
|
||||
Ver detalles
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile Card View - Hidden on desktop */}
|
||||
<div className="md:hidden space-y-4">
|
||||
{transactions.map((transaction) => (
|
||||
<div
|
||||
key={transaction.id}
|
||||
className="bg-[var(--bg-secondary)] rounded-lg p-4 border border-[var(--border-primary)] hover:border-[var(--border-secondary)] transition-colors cursor-pointer"
|
||||
onClick={() => handleViewDetails(transaction.id)}
|
||||
>
|
||||
{/* Header Row */}
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1">
|
||||
<div className="text-xs font-mono text-[var(--text-tertiary)] mb-1">
|
||||
{transaction.external_transaction_id}
|
||||
</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
{new Date(transaction.transaction_date).toLocaleString('es-ES', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{transaction.is_synced_to_sales ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||||
) : (
|
||||
<Clock className="w-5 h-5 text-yellow-500" />
|
||||
)}
|
||||
<Badge
|
||||
variant={
|
||||
transaction.status === 'completed' ? 'success' :
|
||||
transaction.status === 'pending' ? 'warning' :
|
||||
'error'
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{transaction.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amount and Payment */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||||
{formatters.currency(transaction.total_amount)}
|
||||
</div>
|
||||
<div className="text-sm text-[var(--text-secondary)] capitalize mt-1">
|
||||
{transaction.payment_method || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-[var(--text-tertiary)]" />
|
||||
</div>
|
||||
|
||||
{/* Items Count */}
|
||||
{transaction.items && transaction.items.length > 0 && (
|
||||
<div className="mt-3 pt-3 border-t border-[var(--border-primary)] text-xs text-[var(--text-secondary)]">
|
||||
{transaction.items.length} {transaction.items.length === 1 ? 'artículo' : 'artículos'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{transactionsData && (transactionsData.has_more || page > 0) && (
|
||||
<div className="mt-6 flex items-center justify-between">
|
||||
<Button
|
||||
onClick={() => setPage(Math.max(0, page - 1))}
|
||||
disabled={page === 0}
|
||||
variant="secondary"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Anterior</span>
|
||||
</Button>
|
||||
<span className="text-sm text-[var(--text-secondary)]">
|
||||
Página {page + 1}
|
||||
</span>
|
||||
<Button
|
||||
onClick={() => setPage(page + 1)}
|
||||
disabled={!transactionsData.has_more}
|
||||
variant="secondary"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<span className="hidden sm:inline">Siguiente</span>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Transaction Detail Modal */}
|
||||
{showDetailModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-[var(--bg-primary)] rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
{/* Modal Header */}
|
||||
<div className="sticky top-0 bg-[var(--bg-primary)] border-b border-[var(--border-primary)] px-6 py-4 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-[var(--text-primary)]">
|
||||
Detalles de Transacción
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleCloseDetail}
|
||||
className="text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Content */}
|
||||
<div className="p-6">
|
||||
{detailLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<LoadingSpinner text="Cargando detalles..." />
|
||||
</div>
|
||||
) : selectedTransaction ? (
|
||||
<div className="space-y-6">
|
||||
{/* Transaction Header */}
|
||||
<div className="bg-[var(--bg-secondary)] rounded-lg p-4">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-secondary)] mb-1">ID Transacción</div>
|
||||
<div className="font-mono text-lg text-[var(--text-primary)]">
|
||||
{selectedTransaction.external_transaction_id}
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant={
|
||||
selectedTransaction.status === 'completed' ? 'success' :
|
||||
selectedTransaction.status === 'pending' ? 'warning' :
|
||||
'error'
|
||||
}
|
||||
size="md"
|
||||
>
|
||||
{selectedTransaction.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-secondary)] mb-1">Fecha</div>
|
||||
<div className="text-sm text-[var(--text-primary)]">
|
||||
{new Date(selectedTransaction.transaction_date).toLocaleString('es-ES', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-secondary)] mb-1">Sistema POS</div>
|
||||
<div className="text-sm text-[var(--text-primary)] capitalize">
|
||||
{selectedTransaction.pos_system}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Information */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">Información de Pago</h3>
|
||||
<div className="bg-[var(--bg-secondary)] rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Método de pago</span>
|
||||
<span className="text-sm font-medium text-[var(--text-primary)] capitalize">
|
||||
{selectedTransaction.payment_method || 'N/A'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Subtotal</span>
|
||||
<span className="text-sm text-[var(--text-primary)]">
|
||||
{formatters.currency(selectedTransaction.subtotal)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Impuestos</span>
|
||||
<span className="text-sm text-[var(--text-primary)]">
|
||||
{formatters.currency(selectedTransaction.tax_amount)}
|
||||
</span>
|
||||
</div>
|
||||
{selectedTransaction.discount_amount && parseFloat(String(selectedTransaction.discount_amount)) > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Descuento</span>
|
||||
<span className="text-sm text-green-600">
|
||||
-{formatters.currency(selectedTransaction.discount_amount)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedTransaction.tip_amount && parseFloat(String(selectedTransaction.tip_amount)) > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Propina</span>
|
||||
<span className="text-sm text-[var(--text-primary)]">
|
||||
{formatters.currency(selectedTransaction.tip_amount)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="pt-3 border-t border-[var(--border-primary)] flex items-center justify-between">
|
||||
<span className="font-semibold text-[var(--text-primary)]">Total</span>
|
||||
<span className="text-xl font-bold text-[var(--text-primary)]">
|
||||
{formatters.currency(selectedTransaction.total_amount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transaction Items */}
|
||||
{selectedTransaction.items && selectedTransaction.items.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">
|
||||
Artículos ({selectedTransaction.items.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{selectedTransaction.items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="bg-[var(--bg-secondary)] rounded-lg p-4 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-[var(--text-primary)]">
|
||||
{item.product_name}
|
||||
</div>
|
||||
{item.sku && (
|
||||
<div className="text-xs text-[var(--text-tertiary)] font-mono mt-1">
|
||||
SKU: {item.sku}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm text-[var(--text-secondary)] mt-1">
|
||||
{item.quantity} × {formatters.currency(item.unit_price)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-[var(--text-primary)]">
|
||||
{formatters.currency(item.total_price)}
|
||||
</div>
|
||||
{item.is_synced_to_sales ? (
|
||||
<div className="text-xs text-green-600 mt-1 flex items-center justify-end gap-1">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
Sincronizado
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-yellow-600 mt-1 flex items-center justify-end gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
Pendiente
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sync Status */}
|
||||
<div className="bg-[var(--bg-secondary)] rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{selectedTransaction.is_synced_to_sales ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||||
) : (
|
||||
<Clock className="w-5 h-5 text-yellow-500" />
|
||||
)}
|
||||
<span className="font-medium text-[var(--text-primary)]">
|
||||
Estado de Sincronización
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
{selectedTransaction.is_synced_to_sales ? (
|
||||
<>
|
||||
Sincronizado exitosamente
|
||||
{selectedTransaction.sync_completed_at && (
|
||||
<span className="block mt-1">
|
||||
{new Date(selectedTransaction.sync_completed_at).toLocaleString('es-ES')}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
'Pendiente de sincronización con sistema de ventas'
|
||||
)}
|
||||
</div>
|
||||
{selectedTransaction.sync_error && (
|
||||
<div className="mt-2 text-sm text-red-600">
|
||||
Error: {selectedTransaction.sync_error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12 text-[var(--text-secondary)]">
|
||||
No se encontraron detalles de la transacción
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="sticky bottom-0 bg-[var(--bg-primary)] border-t border-[var(--border-primary)] px-6 py-4">
|
||||
<Button onClick={handleCloseDetail} variant="secondary" className="w-full sm:w-auto">
|
||||
Cerrar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const POSPage: React.FC = () => {
|
||||
const [cart, setCart] = useState<CartItem[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||||
const [posMode, setPosMode] = useState<'manual' | 'automatic'>('manual');
|
||||
const [showPOSConfig, setShowPOSConfig] = useState(false);
|
||||
const [showStats, setShowStats] = useState(false);
|
||||
|
||||
// POS Configuration State
|
||||
@@ -48,6 +552,19 @@ const POSPage: React.FC = () => {
|
||||
const posData = usePOSConfigurationData(tenantId);
|
||||
const posManager = usePOSConfigurationManager(tenantId);
|
||||
|
||||
// Set initial POS mode based on whether there are configured integrations
|
||||
// Default to 'automatic' if POS configurations exist, otherwise 'manual'
|
||||
const [posMode, setPosMode] = useState<'manual' | 'automatic'>(() => {
|
||||
return posData.configurations.length > 0 ? 'automatic' : 'manual';
|
||||
});
|
||||
|
||||
// Update posMode when configurations change (e.g., when first config is added)
|
||||
React.useEffect(() => {
|
||||
if (!posData.isLoading && posData.configurations.length > 0 && posMode === 'manual') {
|
||||
setPosMode('automatic');
|
||||
}
|
||||
}, [posData.configurations.length, posData.isLoading]);
|
||||
|
||||
// Fetch finished products from API
|
||||
const {
|
||||
data: ingredientsData,
|
||||
@@ -59,7 +576,7 @@ const POSPage: React.FC = () => {
|
||||
});
|
||||
|
||||
// Filter for finished products and convert to POS format
|
||||
const products = useMemo(() => {
|
||||
const products = useMemo(() => {
|
||||
if (!ingredientsData) return [];
|
||||
|
||||
return ingredientsData
|
||||
@@ -68,7 +585,7 @@ const POSPage: React.FC = () => {
|
||||
id: ingredient.id,
|
||||
name: ingredient.name,
|
||||
price: Number(ingredient.average_cost) || 0,
|
||||
category: ingredient.category.toLowerCase(),
|
||||
category: ingredient.category?.toLowerCase() || 'uncategorized',
|
||||
stock: Number(ingredient.current_stock) || 0,
|
||||
ingredient: ingredient
|
||||
}))
|
||||
@@ -248,64 +765,6 @@ const POSPage: React.FC = () => {
|
||||
addToast('Venta procesada exitosamente', { type: 'success' });
|
||||
};
|
||||
|
||||
// Calculate stats for the POS dashboard
|
||||
const posStats = useMemo(() => {
|
||||
const totalProducts = products.length;
|
||||
const totalStock = products.reduce((sum, product) => sum + product.stock, 0);
|
||||
const cartValue = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
|
||||
const cartItems = cart.reduce((sum, item) => sum + item.quantity, 0);
|
||||
const lowStockProducts = products.filter(product => product.stock <= 5).length;
|
||||
const avgProductPrice = totalProducts > 0 ? products.reduce((sum, product) => sum + product.price, 0) / totalProducts : 0;
|
||||
|
||||
return {
|
||||
totalProducts,
|
||||
totalStock,
|
||||
cartValue,
|
||||
cartItems,
|
||||
lowStockProducts,
|
||||
avgProductPrice
|
||||
};
|
||||
}, [products, cart]);
|
||||
|
||||
const stats = [
|
||||
{
|
||||
title: 'Productos Disponibles',
|
||||
value: posStats.totalProducts,
|
||||
variant: 'default' as const,
|
||||
icon: Package,
|
||||
},
|
||||
{
|
||||
title: 'Stock Total',
|
||||
value: posStats.totalStock,
|
||||
variant: 'info' as const,
|
||||
icon: Package,
|
||||
},
|
||||
{
|
||||
title: 'Artículos en Carrito',
|
||||
value: posStats.cartItems,
|
||||
variant: 'success' as const,
|
||||
icon: ShoppingCart,
|
||||
},
|
||||
{
|
||||
title: 'Valor del Carrito',
|
||||
value: formatters.currency(posStats.cartValue),
|
||||
variant: 'success' as const,
|
||||
icon: Euro,
|
||||
},
|
||||
{
|
||||
title: 'Stock Bajo',
|
||||
value: posStats.lowStockProducts,
|
||||
variant: 'warning' as const,
|
||||
icon: Clock,
|
||||
},
|
||||
{
|
||||
title: 'Precio Promedio',
|
||||
value: formatters.currency(posStats.avgProductPrice),
|
||||
variant: 'info' as const,
|
||||
icon: TrendingUp,
|
||||
},
|
||||
];
|
||||
|
||||
// Loading and error states
|
||||
if (productsLoading || !tenantId) {
|
||||
return (
|
||||
@@ -371,47 +830,12 @@ const POSPage: React.FC = () => {
|
||||
Automático
|
||||
</span>
|
||||
</div>
|
||||
{posMode === 'automatic' && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowPOSConfig(!showPOSConfig)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
Configurar POS
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{posMode === 'manual' ? (
|
||||
<>
|
||||
{/* Collapsible Stats Grid */}
|
||||
<Card className="p-4">
|
||||
<button
|
||||
onClick={() => setShowStats(!showStats)}
|
||||
className="w-full flex items-center justify-between text-left"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5 text-[var(--color-primary)]" />
|
||||
<span className="font-semibold text-[var(--text-primary)]">
|
||||
Estadísticas del POS
|
||||
</span>
|
||||
</div>
|
||||
{showStats ? (
|
||||
<ChevronUp className="w-5 h-5 text-[var(--text-tertiary)]" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5 text-[var(--text-tertiary)]" />
|
||||
)}
|
||||
</button>
|
||||
{showStats && (
|
||||
<div className="mt-4 pt-4 border-t border-[var(--border-primary)]">
|
||||
<StatsGrid stats={stats} columns={3} />
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Main 2-Column Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column: Products (2/3 width on desktop) */}
|
||||
@@ -601,6 +1025,11 @@ const POSPage: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Transactions Section - Only show if there are configurations */}
|
||||
{posData.configurations.length > 0 && (
|
||||
<TransactionsSection tenantId={tenantId} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -25,7 +25,14 @@ import {
|
||||
Settings,
|
||||
Brain,
|
||||
Store,
|
||||
Network
|
||||
Network,
|
||||
Leaf,
|
||||
Droplets,
|
||||
TreeDeciduous,
|
||||
Target,
|
||||
CheckCircle2,
|
||||
Sparkles,
|
||||
Recycle
|
||||
} from 'lucide-react';
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
@@ -574,6 +581,187 @@ const LandingPage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Sustainability & SDG Compliance Section */}
|
||||
<section className="py-24 bg-gradient-to-b from-green-50 to-white dark:from-green-950/20 dark:to-[var(--bg-secondary)]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-sm font-semibold mb-6">
|
||||
<Leaf className="w-4 h-4" />
|
||||
{t('landing:sustainability.badge', 'UN SDG 12.3 & EU Green Deal Aligned')}
|
||||
</div>
|
||||
<h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)]">
|
||||
{t('landing:sustainability.title_main', 'Not Just Reduce Waste')}
|
||||
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-emerald-600 mt-2">
|
||||
{t('landing:sustainability.title_accent', 'Prove It to the World')}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-[var(--text-secondary)] max-w-3xl mx-auto">
|
||||
{t('landing:sustainability.subtitle', 'The only AI platform with built-in UN SDG 12.3 compliance tracking. Reduce waste, save money, and qualify for EU sustainability grants—all with verifiable environmental impact metrics.')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Environmental Impact Cards */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
{/* CO2 Savings */}
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-green-200 dark:border-green-900/50 hover:border-green-400 dark:hover:border-green-600 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
|
||||
<TreeDeciduous className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-green-600 dark:text-green-400 mb-2">855 kg</div>
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.co2_avoided', 'CO₂ Avoided Monthly')}</div>
|
||||
<div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.co2_equivalent', 'Equivalent to 43 trees planted')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Water Savings */}
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-blue-200 dark:border-blue-900/50 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
|
||||
<Droplets className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">675k L</div>
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.water_saved', 'Water Saved Monthly')}</div>
|
||||
<div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.water_equivalent', 'Equivalent to 4,500 showers')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grant Eligibility */}
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-amber-200 dark:border-amber-900/50 hover:border-amber-400 dark:hover:border-amber-600 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
|
||||
<Award className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-amber-600 dark:text-amber-400 mb-2">3+</div>
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.grants_eligible', 'Grant Programs Eligible')}</div>
|
||||
<div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.grants_value', 'Up to €50,000 in funding')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SDG Progress Visualization */}
|
||||
<div className="bg-gradient-to-r from-green-500/10 to-emerald-500/10 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-10 border border-green-300 dark:border-green-800">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-green-600 rounded-xl flex items-center justify-center">
|
||||
<Target className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)]">{t('landing:sustainability.sdg.title', 'UN SDG 12.3 Compliance')}</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.subtitle', 'Halve food waste by 2030')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[var(--text-secondary)] mb-6">
|
||||
{t('landing:sustainability.sdg.description', 'Real-time tracking toward the UN Sustainable Development Goal 12.3 target. Our AI helps you achieve 50% waste reduction with verifiable, auditable data for grant applications and certifications.')}
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.tracking', 'Automated waste baseline and progress tracking')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.export', 'One-click grant application report export')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.certification', 'Certification-ready environmental impact data')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 w-full">
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 shadow-lg">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="text-sm font-semibold text-[var(--text-primary)]">{t('landing:sustainability.sdg.progress_label', 'Progress to Target')}</span>
|
||||
<span className="text-2xl font-bold text-green-600">65%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-green-500 to-emerald-500 h-6 rounded-full flex items-center justify-end pr-3" style={{ width: '65%' }}>
|
||||
<TrendingUp className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.baseline', 'Baseline')}</div>
|
||||
<div className="text-lg font-bold text-[var(--text-primary)]">25%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.current', 'Current')}</div>
|
||||
<div className="text-lg font-bold text-green-600">16.25%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.target', 'Target 2030')}</div>
|
||||
<div className="text-lg font-bold text-[var(--text-primary)]">12.5%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grant Programs Grid */}
|
||||
<div className="mt-16 grid md:grid-cols-4 gap-6">
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Award className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.eu_horizon', 'EU Horizon Europe')}</h4>
|
||||
<p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.eu_horizon_req', 'Requires 30% reduction')}</p>
|
||||
<div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
|
||||
<CheckCircle2 className="w-3 h-3" />
|
||||
{t('landing:sustainability.grants.eligible', 'Eligible')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
|
||||
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Leaf className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.farm_to_fork', 'Farm to Fork')}</h4>
|
||||
<p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.farm_to_fork_req', 'Requires 20% reduction')}</p>
|
||||
<div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
|
||||
<CheckCircle2 className="w-3 h-3" />
|
||||
{t('landing:sustainability.grants.eligible', 'Eligible')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
|
||||
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Recycle className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.circular_economy', 'Circular Economy')}</h4>
|
||||
<p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.circular_economy_req', 'Requires 15% reduction')}</p>
|
||||
<div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
|
||||
<CheckCircle2 className="w-3 h-3" />
|
||||
{t('landing:sustainability.grants.eligible', 'Eligible')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-amber-500 transition-all duration-300 text-center">
|
||||
<div className="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Target className="w-6 h-6 text-amber-600" />
|
||||
</div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.un_sdg', 'UN SDG Certified')}</h4>
|
||||
<p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.un_sdg_req', 'Requires 50% reduction')}</p>
|
||||
<div className="inline-flex items-center gap-1 px-3 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-semibold">
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
{t('landing:sustainability.grants.on_track', 'On Track')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Unique Differentiator Callout */}
|
||||
<div className="mt-16 text-center">
|
||||
<div className="inline-flex flex-col items-center gap-4 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-2xl px-12 py-8">
|
||||
<Sparkles className="w-12 h-12" />
|
||||
<h3 className="text-2xl font-bold">{t('landing:sustainability.differentiator.title', 'The Only AI Platform')}</h3>
|
||||
<p className="text-lg max-w-2xl">{t('landing:sustainability.differentiator.description', 'With built-in UN SDG 12.3 tracking, real-time environmental impact calculations, and one-click grant application exports. Not just reduce waste—prove it.')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section - Problem/Solution Focus */}
|
||||
<section id="benefits" className="py-24 bg-[var(--bg-primary)]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
Reference in New Issue
Block a user