feat: Update remaining settings cards with new UX design patterns
Applied consistent design patterns to operational settings cards using SettingSection, SettingRow, and Toggle components for improved user experience. ## Updated Cards ### ProcurementSettingsCard - Replaced checkboxes with toggle switches for all boolean settings - Added progressive disclosure for auto-approval threshold settings - Grouped smart procurement options with consistent toggle rows - Added helpful descriptions and tooltips - Better visual hierarchy with icons and sections ### ProductionSettingsCard - Converted quality check and schedule optimization to toggles - Progressive disclosure for quality parameters (only shown when enabled) - Improved section organization with clearer headings - Better responsive grid layouts ### POSSettingsCard - Replaced sync checkboxes with toggle switches - Cleaner layout with SettingRow components - Enhanced info box with dark mode support - Better visual feedback for sync settings ### SupplierSettingsCard - Wrapped in SettingSection for consistency - Better organized performance thresholds - Enhanced info box styling with dark mode - Clearer visual hierarchy ### OrderSettingsCard - Converted discount and delivery toggles - Progressive disclosure not needed but consistent layout applied - Better organized sections with icons - Enhanced info box with business rules explanation ## Key Improvements - ✅ Toggle switches instead of checkboxes for binary settings - ✅ Progressive disclosure hides complexity until needed - ✅ Consistent SettingSection wrapping for all cards - ✅ Dark mode support for info boxes - ✅ Help text and tooltips for better guidance - ✅ Responsive layouts optimized for mobile and desktop - ✅ Icons for visual recognition - ✅ Unified design language across all operational settings All cards now follow the same design patterns established in the bakery and user settings redesign.
This commit is contained in:
Claude
@@ -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<OrderSettingsCardProps> = ({
|
||||
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>
|
||||
const handleToggleChange = (field: keyof OrderSettings) => (checked: boolean) => {
|
||||
onChange({ ...settings, [field]: checked });
|
||||
};
|
||||
|
||||
<div className="space-y-6">
|
||||
return (
|
||||
<SettingSection
|
||||
title="Pedidos y Reglas de Negocio"
|
||||
description="Configure order discounts, pricing rules, and delivery settings"
|
||||
icon={<ShoppingBag className="w-5 h-5" />}
|
||||
>
|
||||
<div className="divide-y divide-[var(--border-primary)]">
|
||||
{/* Discount & Pricing */}
|
||||
<div>
|
||||
<div className="p-4 sm:p-6">
|
||||
<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 className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SettingRow
|
||||
label="Habilitar descuentos en pedidos"
|
||||
description="Allow discounts to be applied to orders"
|
||||
icon={<Tag className="w-4 h-4" />}
|
||||
type="toggle"
|
||||
checked={settings.discount_enabled}
|
||||
onToggle={handleToggleChange('discount_enabled')}
|
||||
disabled={disabled}
|
||||
helpText="When enabled, discounts can be applied within the maximum limit"
|
||||
/>
|
||||
|
||||
<SettingRow
|
||||
label="Habilitar precios dinámicos"
|
||||
description="Automatically adjust prices based on demand and inventory"
|
||||
icon={<TrendingUp className="w-4 h-4" />}
|
||||
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 */}
|
||||
<div>
|
||||
<div className="p-4 sm:p-6">
|
||||
<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 className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-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 entrega"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SettingRow
|
||||
label="Habilitar seguimiento de entregas"
|
||||
description="Allow customers to track their deliveries in real-time"
|
||||
icon={<MapPin className="w-4 h-4" />}
|
||||
type="toggle"
|
||||
checked={settings.delivery_tracking_enabled}
|
||||
onToggle={handleToggleChange('delivery_tracking_enabled')}
|
||||
disabled={disabled}
|
||||
helpText="Enables real-time delivery tracking for customers"
|
||||
/>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="p-4 sm:p-6 bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="flex items-start gap-3">
|
||||
<TrendingUp className="w-5 h-5 text-blue-600 mt-0.5" />
|
||||
<Info className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<h5 className="text-sm font-semibold text-blue-900 mb-1">
|
||||
<h5 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-1">
|
||||
Reglas de Negocio
|
||||
</h5>
|
||||
<p className="text-xs text-blue-700 mb-2">
|
||||
<p className="text-xs text-blue-700 dark:text-blue-300 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">
|
||||
<ul className="text-xs text-blue-700 dark:text-blue-300 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>
|
||||
@@ -143,7 +131,7 @@ const OrderSettingsCard: React.FC<OrderSettingsCardProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</SettingSection>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user