diff --git a/frontend/src/components/ui/SettingRow/SettingRow.tsx b/frontend/src/components/ui/SettingRow/SettingRow.tsx new file mode 100644 index 00000000..21c6889c --- /dev/null +++ b/frontend/src/components/ui/SettingRow/SettingRow.tsx @@ -0,0 +1,180 @@ +import React from 'react'; +import { HelpCircle } from 'lucide-react'; +import { Tooltip } from '../Tooltip'; +import { Toggle } from '../Toggle'; +import { Input } from '../Input'; +import { Select } from '../Select'; +import { Badge } from '../Badge'; + +export interface SettingRowProps { + label: string; + description?: string; + helpText?: string; + icon?: React.ReactNode; + badge?: { + text: string; + variant?: 'default' | 'success' | 'warning' | 'danger' | 'info'; + }; + + // For toggle type + type?: 'toggle' | 'input' | 'select' | 'custom'; + checked?: boolean; + onToggle?: (checked: boolean) => void; + + // For input type + inputType?: 'text' | 'number' | 'email' | 'tel' | 'password'; + value?: string | number; + onChange?: (e: React.ChangeEvent) => void; + placeholder?: string; + min?: number; + max?: number; + step?: number; + error?: string; + + // For select type + options?: Array<{ value: string; label: string }>; + selectValue?: string; + onSelectChange?: (value: string) => void; + + // For custom content + children?: React.ReactNode; + + // Common props + disabled?: boolean; + className?: string; + required?: boolean; +} + +const SettingRow: React.FC = ({ + label, + description, + helpText, + icon, + badge, + type = 'toggle', + checked, + onToggle, + inputType = 'text', + value, + onChange, + placeholder, + min, + max, + step, + error, + options = [], + selectValue, + onSelectChange, + children, + disabled = false, + className = '', + required = false, +}) => { + const renderControl = () => { + switch (type) { + case 'toggle': + return ( + {})} + disabled={disabled} + size="md" + /> + ); + + case 'input': + return ( +
+ +
+ ); + + case 'select': + return ( +
+ setQuery(e.target.value)} + placeholder={placeholder} + className="w-full pl-10 pr-10 py-2.5 border border-[var(--border-primary)] rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] placeholder-[var(--text-tertiary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all" + /> + {query && ( + + )} +
+ + {query && ( +
+

+ Searching for: "{query}" +

+
+ )} + + ); +}; + +export default SettingsSearch; diff --git a/frontend/src/components/ui/SettingsSearch/index.ts b/frontend/src/components/ui/SettingsSearch/index.ts new file mode 100644 index 00000000..f75f1094 --- /dev/null +++ b/frontend/src/components/ui/SettingsSearch/index.ts @@ -0,0 +1,2 @@ +export { default as SettingsSearch } from './SettingsSearch'; +export type { SettingsSearchProps } from './SettingsSearch'; diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts index 90850e5c..f2a885a7 100644 --- a/frontend/src/components/ui/index.ts +++ b/frontend/src/components/ui/index.ts @@ -40,6 +40,9 @@ export { TableOfContents } from './TableOfContents'; export { SavingsCalculator } from './SavingsCalculator'; export { StepTimeline } from './StepTimeline'; export { FAQAccordion } from './FAQAccordion'; +export { SettingRow } from './SettingRow'; +export { SettingSection } from './SettingSection'; +export { SettingsSearch } from './SettingsSearch'; // Export types export type { ButtonProps } from './Button'; @@ -77,4 +80,7 @@ export type { FloatingCTAProps } from './FloatingCTA'; export type { TableOfContentsProps, TOCSection } from './TableOfContents'; export type { SavingsCalculatorProps } from './SavingsCalculator'; export type { StepTimelineProps, TimelineStep } from './StepTimeline'; -export type { FAQAccordionProps, FAQItem } from './FAQAccordion'; \ No newline at end of file +export type { FAQAccordionProps, FAQItem } from './FAQAccordion'; +export type { SettingRowProps } from './SettingRow'; +export type { SettingSectionProps } from './SettingSection'; +export type { SettingsSearchProps } from './SettingsSearch'; \ No newline at end of file diff --git a/frontend/src/pages/app/database/ajustes/cards/InventorySettingsCard.tsx b/frontend/src/pages/app/database/ajustes/cards/InventorySettingsCard.tsx index 4571205d..52cf21f8 100644 --- a/frontend/src/pages/app/database/ajustes/cards/InventorySettingsCard.tsx +++ b/frontend/src/pages/app/database/ajustes/cards/InventorySettingsCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Package, AlertCircle, Thermometer, Clock } from 'lucide-react'; -import { Card, Input } from '../../../../../components/ui'; +import { Card, Input, SettingSection, SettingRow } from '../../../../../components/ui'; import type { InventorySettings } from '../../../../../api/types/settings'; interface InventorySettingsCardProps { @@ -23,21 +23,24 @@ const InventorySettingsCard: React.FC = ({ onChange({ ...settings, [field]: value }); }; - return ( - -

- - Gestión de Inventario -

+ const handleToggleChange = (field: keyof InventorySettings) => (checked: boolean) => { + onChange({ ...settings, [field]: checked }); + }; -
- {/* Stock Management */} -
+ return ( + } + > +
+ {/* Stock Management Section */} +

Control de Stock

-
+
= ({
- {/* Expiration Management */} -
+ {/* Expiration Management Section */} +

Gestión de Caducidad

-
+
= ({
- {/* Temperature Monitoring */} -
-

- - Monitorización de Temperatura -

-
-
- - -
+ {/* Temperature Monitoring Section */} +
+ } + type="toggle" + checked={settings.temperature_monitoring_enabled} + onToggle={handleToggleChange('temperature_monitoring_enabled')} + disabled={disabled} + helpText="When enabled, system will monitor and alert on temperature deviations" + /> - {settings.temperature_monitoring_enabled && ( - <> - {/* Refrigeration */} -
- -
- - -
+ {settings.temperature_monitoring_enabled && ( + <> + {/* Refrigeration Settings */} +
+
+ Refrigeración (°C) +
+
+ +
+
- {/* Freezer */} -
- -
- - -
+ {/* Freezer Settings */} +
+
+ Congelador (°C) +
+
+ +
+
- {/* Room Temperature */} -
- -
- - -
+ {/* Room Temperature Settings */} +
+
+ Temperatura Ambiente (°C) +
+
+ +
+
- {/* Alert Timing */} -
-
- - Alertas de Desviación -
-
- - -
+ {/* Alert Timing */} +
+
+ + Alertas de Desviación +
+
+ +
- - )} -
+
+ + )}
- + ); }; diff --git a/frontend/src/pages/app/database/ajustes/cards/NotificationSettingsCard.tsx b/frontend/src/pages/app/database/ajustes/cards/NotificationSettingsCard.tsx index 8bb66211..6b69a2ba 100644 --- a/frontend/src/pages/app/database/ajustes/cards/NotificationSettingsCard.tsx +++ b/frontend/src/pages/app/database/ajustes/cards/NotificationSettingsCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Bell, MessageSquare, Mail, AlertCircle, Globe } from 'lucide-react'; -import { Card, Input } from '../../../../../components/ui'; +import { Bell, MessageSquare, Mail, AlertCircle, Globe, Info } from 'lucide-react'; +import { Input, SettingSection, SettingRow, Select } from '../../../../../components/ui'; import type { NotificationSettings } from '../../../../../api/types/settings'; import { useTranslation } from 'react-i18next'; @@ -25,7 +25,18 @@ const NotificationSettingsCard: React.FC = ({ onChange({ ...settings, [field]: value }); }; - const handleChannelChange = (field: 'po_notification_channels' | 'inventory_alert_channels' | 'production_alert_channels' | 'forecast_alert_channels', channel: string) => { + const handleToggleChange = (field: keyof NotificationSettings) => (checked: boolean) => { + onChange({ ...settings, [field]: checked }); + }; + + const handleSelectChange = (field: keyof NotificationSettings) => (value: string) => { + onChange({ ...settings, [field]: value }); + }; + + const handleChannelChange = ( + field: 'po_notification_channels' | 'inventory_alert_channels' | 'production_alert_channels' | 'forecast_alert_channels', + channel: string + ) => { const currentChannels = settings[field]; const newChannels = currentChannels.includes(channel) ? currentChannels.filter(c => c !== channel) @@ -33,140 +44,128 @@ const NotificationSettingsCard: React.FC = ({ onChange({ ...settings, [field]: newChannels }); }; + const apiVersionOptions = [ + { value: 'v18.0', label: 'v18.0' }, + { value: 'v19.0', label: 'v19.0' }, + { value: 'v20.0', label: 'v20.0' } + ]; + + const languageOptions = [ + { value: 'es', label: 'Español' }, + { value: 'eu', label: 'Euskara' }, + { value: 'en', label: 'English' } + ]; + return ( - -

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

- -
+ } + > +
{/* WhatsApp Configuration */} -
-

- - {t('notification.whatsapp_config')} -

-
-
- - -
+
+ } + type="toggle" + checked={settings.whatsapp_enabled} + onToggle={handleToggleChange('whatsapp_enabled')} + disabled={disabled} + helpText="Configure WhatsApp Business API for notifications" + /> - {settings.whatsapp_enabled && ( -
- + {settings.whatsapp_enabled && ( + <> +
+
+ WhatsApp Business API Configuration +
+
+ - + - + -
- - -
+ /> -
- - + />
-
- )} - {settings.whatsapp_enabled && ( -
-
- -
-

{t('notification.whatsapp_setup_note')}

-
    -
  • {t('notification.whatsapp_setup_step1')}
    • -
  • {t('notification.whatsapp_setup_step2')}
    • -
  • {t('notification.whatsapp_setup_step3')}
    • -
+ {/* WhatsApp Setup Info */} +
+
+ +
+

{t('notification.whatsapp_setup_note')}

+
    +
  • {t('notification.whatsapp_setup_step1')}
    • +
  • {t('notification.whatsapp_setup_step2')}
    • +
  • {t('notification.whatsapp_setup_step3')}
    • +
+
- )} -
+ + )}
{/* Email Configuration */} -
-

- - {t('notification.email_config')} -

-
-
- - -
+
+ } + type="toggle" + checked={settings.email_enabled} + onToggle={handleToggleChange('email_enabled')} + disabled={disabled} + helpText="Configure email sender details for notifications" + /> - {settings.email_enabled && ( -
+ {settings.email_enabled && ( +
+
+ Email Sender Configuration +
+
= ({ placeholder="info@yourbakery.com" />
- )} -
+
+ )}
- {/* Notification Preferences */} -
-

+ {/* Notification Preferences Section Header */} +
+

{t('notification.preferences')}

-
- {/* PO Notifications */} -
-
- - -
- {settings.enable_po_notifications && ( -
- - -
- )} -
+

+ Configure which notifications you want to receive and through which channels +

+
- {/* Inventory Alerts */} -
-
- - -
- {settings.enable_inventory_alerts && ( -
- - -
- )} -
+ {/* PO Notifications */} +
+ - {/* Production Alerts */} -
-
- -
- {/* Forecast Alerts */} -
-
- -
+ + {/* Production Alerts */} +
+ + + {settings.enable_production_alerts && ( +
+
+ Notification Channels +
+
+ + +
+
+ )} +
+ + {/* Forecast Alerts */} +
+ + + {settings.enable_forecast_alerts && ( +
+
+ Notification Channels +
+
+ + +
+
+ )}
- + ); }; 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 = ({
- + ); }; diff --git a/frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx b/frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx index 44ff7ba2..74259b2f 100644 --- a/frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx +++ b/frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Store, MapPin, Clock, Settings as SettingsIcon, Save, X, AlertCircle, Loader, Bell } from 'lucide-react'; -import { Button, Card, Input, Select } from '../../../../components/ui'; +import { Store, MapPin, Clock, Settings as SettingsIcon, Save, X, AlertCircle, Loader, Bell, Globe, Mail, Phone, Building2, CreditCard } from 'lucide-react'; +import { Button, Card, Input, Select, SettingSection, SettingRow, SettingsSearch } from '../../../../components/ui'; import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs'; import { PageHeader } from '../../../../components/layout'; import { showToast } from '../../../../utils/toast'; @@ -51,7 +51,7 @@ interface BusinessHours { const BakerySettingsPage: React.FC = () => { const { t } = useTranslation('settings'); - + const currentTenant = useCurrentTenant(); const { loadUserTenants, setCurrentTenant } = useTenantActions(); const tenantId = currentTenant?.id || ''; @@ -66,6 +66,7 @@ const BakerySettingsPage: React.FC = () => { const [activeTab, setActiveTab] = useState('information'); const [isLoading, setIsLoading] = useState(false); const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); + const [searchQuery, setSearchQuery] = useState(''); const [config, setConfig] = useState({ name: '', @@ -359,18 +360,24 @@ const BakerySettingsPage: React.FC = () => { {/* Bakery Header Card */}
-
+
{config.name.charAt(0) || 'B'}

{config.name || t('bakery.information.fields.name')}

-

{config.email}

-

{config.address}, {config.city}

+

+ + {config.email} +

+

+ + {config.address}, {config.city} +

{hasUnsavedChanges && ( -
+
{t('bakery.unsaved_changes')}
@@ -378,6 +385,13 @@ const BakerySettingsPage: React.FC = () => {
+ {/* Search Bar */} + + {/* Tabs Navigation */} @@ -403,230 +417,222 @@ const BakerySettingsPage: React.FC = () => {
{/* General Information */} - -

- - {t('bakery.information.general_section')} -

+ } + > +
+
+ } + required + /> -
- } - /> + } + required + /> - } - /> + } + /> - } - /> + } + /> +
- +
+ +