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 ( +
+ = ({
- {/* 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/settings/bakery/BakerySettingsPage.tsx b/frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx index 44ff7ba2..671b7c52 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 } 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 || ''; @@ -359,18 +359,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')}
@@ -403,230 +409,222 @@ const BakerySettingsPage: React.FC = () => {
{/* General Information */} - -

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

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