diff --git a/frontend/src/pages/app/database/ajustes/cards/OrderSettingsCard.tsx b/frontend/src/pages/app/database/ajustes/cards/OrderSettingsCard.tsx index b41b868b..83d0da11 100644 --- a/frontend/src/pages/app/database/ajustes/cards/OrderSettingsCard.tsx +++ b/frontend/src/pages/app/database/ajustes/cards/OrderSettingsCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ShoppingBag, Tag, Clock, TrendingUp, MapPin } from 'lucide-react'; -import { Card, Input } from '../../../../../components/ui'; +import { ShoppingBag, Tag, Clock, TrendingUp, MapPin, Info } from 'lucide-react'; +import { Input, SettingSection, SettingRow } from '../../../../../components/ui'; import type { OrderSettings } from '../../../../../api/types/settings'; interface OrderSettingsCardProps { @@ -23,118 +23,106 @@ const OrderSettingsCard: React.FC = ({ onChange({ ...settings, [field]: value }); }; - return ( - -

- - Pedidos y Reglas de Negocio -

+ const handleToggleChange = (field: keyof OrderSettings) => (checked: boolean) => { + onChange({ ...settings, [field]: checked }); + }; -
+ return ( + } + > +
{/* Discount & Pricing */} -
+

Descuentos y Precios

-
-
- -
- -
-
- - -
- -
- - -
-
+
+
+ } + type="toggle" + checked={settings.discount_enabled} + onToggle={handleToggleChange('discount_enabled')} + disabled={disabled} + helpText="When enabled, discounts can be applied within the maximum limit" + /> + + } + type="toggle" + checked={settings.dynamic_pricing_enabled} + onToggle={handleToggleChange('dynamic_pricing_enabled')} + disabled={disabled} + helpText="AI-powered dynamic pricing based on market conditions" + /> + {/* Delivery Settings */} -
+

Configuración de Entrega

-
-
- -
- -
- - -
+
+
+ } + type="toggle" + checked={settings.delivery_tracking_enabled} + onToggle={handleToggleChange('delivery_tracking_enabled')} + disabled={disabled} + helpText="Enables real-time delivery tracking for customers" + /> + {/* Info Box */} -
+
- +
-
+
Reglas de Negocio
-

+

Estos ajustes controlan las reglas de negocio que se aplican a los pedidos.

-
    +
    • Precios dinámicos: Ajusta automáticamente los precios según demanda, inventario y otros factores
    • Descuentos: Permite aplicar descuentos a productos y pedidos dentro del límite establecido
    • Seguimiento de entregas: Permite a los clientes rastrear sus pedidos en tiempo real
      • @@ -143,7 +131,7 @@ const OrderSettingsCard: React.FC = ({
- + ); }; diff --git a/frontend/src/pages/app/database/ajustes/cards/POSSettingsCard.tsx b/frontend/src/pages/app/database/ajustes/cards/POSSettingsCard.tsx index ac38056e..58f2e881 100644 --- a/frontend/src/pages/app/database/ajustes/cards/POSSettingsCard.tsx +++ b/frontend/src/pages/app/database/ajustes/cards/POSSettingsCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Smartphone, RefreshCw, Clock } from 'lucide-react'; -import { Card, Input } from '../../../../../components/ui'; +import { Smartphone, RefreshCw, Clock, Info } from 'lucide-react'; +import { Input, SettingSection, SettingRow } from '../../../../../components/ui'; import type { POSSettings } from '../../../../../api/types/settings'; interface POSSettingsCardProps { @@ -23,21 +23,24 @@ const POSSettingsCard: React.FC = ({ onChange({ ...settings, [field]: value }); }; - return ( - -

- - Punto de Venta (POS) -

+ const handleToggleChange = (field: keyof POSSettings) => (checked: boolean) => { + onChange({ ...settings, [field]: checked }); + }; -
+ return ( + } + > +
{/* Sync Settings */} -
+

Sincronización

-
+
= ({ max={60} step={1} placeholder="5" - helperText="Frecuencia con la que se sincroniza el POS con el sistema central" + helperText="Frecuencia con la que se sincroniza el POS" /> - -
-
- - -
- -
- - -
-
+ {/* Auto-sync Options */} + } + type="toggle" + checked={settings.auto_sync_products} + onToggle={handleToggleChange('auto_sync_products')} + disabled={disabled} + helpText="When enabled, product updates are immediately pushed to POS" + /> + + } + type="toggle" + checked={settings.auto_sync_transactions} + onToggle={handleToggleChange('auto_sync_transactions')} + disabled={disabled} + helpText="When enabled, sales are automatically synced from POS" + /> + {/* Info Box */} -
+
- +
-
+
Integración POS
-

+

Estos ajustes controlan cómo se sincroniza la información entre el sistema central y los terminales de punto de venta.

-
    +
    • Un intervalo más corto mantiene los datos más actualizados pero consume más recursos
    • La sincronización automática garantiza que los cambios se reflejen inmediatamente
    • Desactivar la sincronización automática requiere sincronización manual
      • @@ -104,7 +100,7 @@ const POSSettingsCard: React.FC = ({
- + ); }; diff --git a/frontend/src/pages/app/database/ajustes/cards/ProcurementSettingsCard.tsx b/frontend/src/pages/app/database/ajustes/cards/ProcurementSettingsCard.tsx index 51925e9d..b9cd9a05 100644 --- a/frontend/src/pages/app/database/ajustes/cards/ProcurementSettingsCard.tsx +++ b/frontend/src/pages/app/database/ajustes/cards/ProcurementSettingsCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ShoppingCart, TrendingUp, Clock, AlertTriangle, Brain } from 'lucide-react'; -import { Card, Input } from '../../../../../components/ui'; +import { Input, SettingSection, SettingRow } from '../../../../../components/ui'; import type { ProcurementSettings } from '../../../../../api/types/settings'; import { useTranslation } from 'react-i18next'; @@ -26,96 +26,91 @@ const ProcurementSettingsCard: React.FC = ({ onChange({ ...settings, [field]: value }); }; + const handleToggleChange = (field: keyof ProcurementSettings) => (checked: boolean) => { + onChange({ ...settings, [field]: checked }); + }; + return ( - -

- - {t('procurement.title')} -

- -
+ } + > +
{/* Auto-Approval Settings */} -
-

- - {t('procurement.auto_approval')} -

-
-
- - -
+
+ } + type="toggle" + checked={settings.auto_approve_enabled} + onToggle={handleToggleChange('auto_approve_enabled')} + disabled={disabled} + helpText="When enabled, POs below threshold with good suppliers are auto-approved" + /> - + {settings.auto_approve_enabled && ( + <> +
+
+ Auto-Approval Thresholds +
+
+ - + +
+
-
- - -
-
- - -
-
+ + )}
{/* Planning & Forecasting */} -
+

{t('procurement.planning')}

-
+
= ({
{/* Approval Workflow */} -
+

{t('procurement.workflow')}

-
+
= ({
- {/* Smart Procurement Calculation */} -
-

- - {t('procurement.smart_procurement')} -

-
-
- -
- - - {t('procurement.use_reorder_rules_desc')} - -
-
- -
- -
- - - {t('procurement.economic_rounding_desc')} - -
-
- -
- -
- - - {t('procurement.respect_storage_limits_desc')} - -
-
- -
- -
- - - {t('procurement.use_supplier_minimums_desc')} - -
-
- -
- -
- - - {t('procurement.optimize_price_tiers_desc')} - -
-
+ {/* Smart Procurement Options */} +
+
+

+ + {t('procurement.smart_procurement')} +

+

+ Intelligent rules for optimizing procurement decisions +

+ + + + + + + + + +
- + ); }; diff --git a/frontend/src/pages/app/database/ajustes/cards/ProductionSettingsCard.tsx b/frontend/src/pages/app/database/ajustes/cards/ProductionSettingsCard.tsx index 471f3d10..57429f84 100644 --- a/frontend/src/pages/app/database/ajustes/cards/ProductionSettingsCard.tsx +++ b/frontend/src/pages/app/database/ajustes/cards/ProductionSettingsCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Factory, Calendar, TrendingUp, Clock, DollarSign } from 'lucide-react'; -import { Card, Input } from '../../../../../components/ui'; +import { Input, SettingSection, SettingRow } from '../../../../../components/ui'; import type { ProductionSettings } from '../../../../../api/types/settings'; interface ProductionSettingsCardProps { @@ -23,21 +23,24 @@ const ProductionSettingsCard: React.FC = ({ onChange({ ...settings, [field]: value }); }; - return ( - -

- - Producción -

+ const handleToggleChange = (field: keyof ProductionSettings) => (checked: boolean) => { + onChange({ ...settings, [field]: checked }); + }; -
+ return ( + } + > +
{/* Planning & Batch Size */} -
+

Planificación y Lotes

-
+
= ({ step={1} placeholder="10.0" /> - -
- - -
+ {/* Schedule Optimization */} +
+ +
+ {/* Capacity & Working Hours */} -
+

Capacidad y Jornada Laboral

-
+
= ({
{/* Quality Control */} -
-

- - Control de Calidad -

-
-
- - -
+
+ } + type="toggle" + checked={settings.quality_check_enabled} + onToggle={handleToggleChange('quality_check_enabled')} + disabled={disabled} + helpText="When enabled, production batches require quality verification" + /> -
- + {settings.quality_check_enabled && ( +
+
+ Parámetros de Calidad +
+
+ - + +
-
+ )}
{/* Time Buffers */} -
+

Tiempos de Preparación

-
+
= ({
{/* Cost Settings */} -
+

Costes

-
+
= ({
- + ); }; diff --git a/frontend/src/pages/app/database/ajustes/cards/SupplierSettingsCard.tsx b/frontend/src/pages/app/database/ajustes/cards/SupplierSettingsCard.tsx index 8dd14de0..d80ec9fd 100644 --- a/frontend/src/pages/app/database/ajustes/cards/SupplierSettingsCard.tsx +++ b/frontend/src/pages/app/database/ajustes/cards/SupplierSettingsCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Truck, Calendar, TrendingUp, AlertTriangle, DollarSign } from 'lucide-react'; -import { Card, Input } from '../../../../../components/ui'; +import { Truck, Calendar, TrendingUp, AlertTriangle, Info } from 'lucide-react'; +import { Input, SettingSection } from '../../../../../components/ui'; import type { SupplierSettings } from '../../../../../api/types/settings'; interface SupplierSettingsCardProps { @@ -22,20 +22,19 @@ const SupplierSettingsCard: React.FC = ({ }; return ( - -

- - Gestión de Proveedores -

- -
+ } + > +
{/* Default Terms */} -
+

Términos Predeterminados

-
+
= ({
{/* Performance Thresholds - Delivery */} -
+

Umbrales de Rendimiento - Entregas

-
+
= ({
{/* Performance Thresholds - Quality */} -
+

Umbrales de Rendimiento - Calidad

-
+
= ({
{/* Critical Alerts */} -
+

Alertas Críticas

-
+
= ({
{/* Info Box */} -
+
- +
-
+
Evaluación de Proveedores
-

+

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.

@@ -189,7 +188,7 @@ const SupplierSettingsCard: React.FC = ({
- + ); };