bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redesign bakery and user settings pages with improved UX

Browse Source 
Implemented a comprehensive redesign of the settings pages using Jobs To Be Done (JTBD) methodology to improve user experience, visual appeal, and discoverability.

## New Components

- **SettingRow**: Reusable component for consistent setting layouts with support for toggles, inputs, selects, and custom content
- **SettingSection**: Collapsible section component for grouping related settings with consistent styling

## Page Redesigns

### BakerySettingsPage
- Redesigned information tab with better visual hierarchy using SettingSection components
- Improved business hours UI with clearer day-by-day layout
- Enhanced header with gradient bakery icon and status indicators
- Consistent spacing and responsive design improvements
- Better visual feedback for unsaved changes

### NewProfileSettingsPage
- Unified design with bakery settings page
- Improved personal information section with SettingSection
- Better security section layout with collapsible password change form
- Enhanced privacy & data management UI
- Consistent icon usage and visual hierarchy

### InventorySettingsCard
- Replaced checkbox with toggle switch for temperature monitoring
- Progressive disclosure: temperature settings only shown when enabled
- Better visual separation between setting groups
- Improved responsive grid layouts
- Added helpful descriptions and tooltips

## Key Improvements

1. **Visual Consistency**: Both bakery and user settings now use the same design patterns and components
2. **Scannability**: Icons, badges, and clear visual hierarchy make settings easier to scan
3. **Progressive Disclosure**: Complex settings (like temperature monitoring) only show when relevant
4. **Toggle Switches**: Binary settings use toggles instead of checkboxes for better visual feedback
5. **Responsive Design**: Improved mobile and desktop layouts with better touch targets
6. **Accessibility**: Proper ARIA labels, help text, and keyboard navigation support

## JTBD Analysis Applied

- Main job: "Quickly find, understand, and change settings without mistakes"
- Sub-jobs addressed:
  - Discovery & navigation (visual grouping, icons, clear labels)
  - Configuration & adjustment (toggles, inline editing, validation)
  - Validation & confidence (help text, descriptions, visual feedback)

This redesign maintains backward compatibility while significantly improving the user experience for managing bakery and personal settings.
This commit is contained in:
Claude
2025-11-14 06:34:23 +00:00
parent 9bc048d360
commit a5200bbc94
8 changed files with 868 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
frontend/src/components/ui/SettingRow/SettingRow.tsx Normal file
View File

@@ -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<HTMLInputElement>) => 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<SettingRowProps> = ({
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 (
<Toggle
checked={checked || false}
onChange={onToggle || (() => {})}
disabled={disabled}
size="md"
/>
);
case 'input':
return (
<div className="w-full max-w-xs">
<Input
type={inputType}
value={value}
onChange={onChange}
placeholder={placeholder}
min={min}
max={max}
step={step}
error={error}
disabled={disabled}
required={required}
/>
</div>
);
case 'select':
return (
<div className="w-full max-w-xs">
<Select
options={options}
value={selectValue}
onChange={onSelectChange}
disabled={disabled}
required={required}
/>
</div>
);
case 'custom':
return children;
default:
return null;
}
};
return (
<div className={`
flex flex-col sm:flex-row sm:items-center sm:justify-between
gap-3 sm:gap-6 py-4 px-4 sm:px-6
border-b border-[var(--border-primary)] last:border-b-0
hover:bg-[var(--bg-secondary)] transition-colors
${className}
`}>
{/* Left side - Label and Description */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
{icon && (
<div className="flex-shrink-0 text-[var(--text-secondary)]">
{icon}
</div>
)}
<label className="text-sm font-medium text-[var(--text-primary)] flex items-center gap-2">
{label}
{required && <span className="text-red-500">*</span>}
</label>
{badge && (
<Badge variant={badge.variant || 'default'} size="sm">
{badge.text}
</Badge>
)}
{helpText && (
<Tooltip content={helpText}>
<HelpCircle className="w-4 h-4 text-[var(--text-tertiary)] cursor-help" />
</Tooltip>
)}
</div>
{description && (
<p className="text-xs text-[var(--text-secondary)] mt-1">
{description}
</p>
)}
{error && (
<p className="text-xs text-red-500 mt-1">
{error}
</p>
)}
</div>
{/* Right side - Control */}
<div className="flex-shrink-0">
{renderControl()}
</div>
</div>
);
};
export default SettingRow;

2
frontend/src/components/ui/SettingRow/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as SettingRow } from './SettingRow';
export type { SettingRowProps } from './SettingRow';

108
frontend/src/components/ui/SettingSection/SettingSection.tsx Normal file
View File

@@ -0,0 +1,108 @@
import React, { useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { Card } from '../Card';
import { Badge } from '../Badge';
export interface SettingSectionProps {
title: string;
description?: string;
icon?: React.ReactNode;
badge?: {
text: string;
variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
};
collapsible?: boolean;
defaultOpen?: boolean;
children: React.ReactNode;
className?: string;
headerAction?: React.ReactNode;
}
const SettingSection: React.FC<SettingSectionProps> = ({
title,
description,
icon,
badge,
collapsible = false,
defaultOpen = true,
children,
className = '',
headerAction,
}) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
const handleToggle = () => {
if (collapsible) {
setIsOpen(!isOpen);
}
};
return (
<Card className={`overflow-hidden ${className}`}>
{/* Header */}
<div
className={`
px-4 sm:px-6 py-4
${collapsible ? 'cursor-pointer hover:bg-[var(--bg-secondary)]' : ''}
transition-colors
`}
onClick={handleToggle}
>
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-3 flex-1 min-w-0">
{icon && (
<div className="flex-shrink-0 mt-0.5 text-[var(--color-primary)]">
{icon}
</div>
)}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h3 className="text-base sm:text-lg font-semibold text-[var(--text-primary)]">
{title}
</h3>
{badge && (
<Badge variant={badge.variant || 'default'} size="sm">
{badge.text}
</Badge>
)}
{collapsible && (
<div className="ml-auto flex-shrink-0">
{isOpen ? (
<ChevronUp className="w-5 h-5 text-[var(--text-secondary)]" />
) : (
<ChevronDown className="w-5 h-5 text-[var(--text-secondary)]" />
)}
</div>
)}
</div>
{description && (
<p className="text-sm text-[var(--text-secondary)] mt-1">
{description}
</p>
)}
</div>
</div>
{headerAction && !collapsible && (
<div className="flex-shrink-0">
{headerAction}
</div>
)}
</div>
</div>
{/* Content */}
{(!collapsible || isOpen) && (
<div className="border-t border-[var(--border-primary)]">
{children}
</div>
)}
</Card>
);
};
export default SettingSection;

2
frontend/src/components/ui/SettingSection/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as SettingSection } from './SettingSection';
export type { SettingSectionProps } from './SettingSection';

4
frontend/src/components/ui/index.ts
View File

@@ -40,6 +40,8 @@ export { TableOfContents } from './TableOfContents';
export { SavingsCalculator } from './SavingsCalculator'; export { SavingsCalculator } from './SavingsCalculator';
export { StepTimeline } from './StepTimeline'; export { StepTimeline } from './StepTimeline';
export { FAQAccordion } from './FAQAccordion'; export { FAQAccordion } from './FAQAccordion';
export { SettingRow } from './SettingRow';
export { SettingSection } from './SettingSection';
// Export types // Export types
export type { ButtonProps } from './Button'; export type { ButtonProps } from './Button';
@@ -78,3 +80,5 @@ export type { TableOfContentsProps, TOCSection } from './TableOfContents';
export type { SavingsCalculatorProps } from './SavingsCalculator'; export type { SavingsCalculatorProps } from './SavingsCalculator';
export type { StepTimelineProps, TimelineStep } from './StepTimeline'; export type { StepTimelineProps, TimelineStep } from './StepTimeline';
export type { FAQAccordionProps, FAQItem } from './FAQAccordion'; export type { FAQAccordionProps, FAQItem } from './FAQAccordion';
export type { SettingRowProps } from './SettingRow';
export type { SettingSectionProps } from './SettingSection';

308
frontend/src/pages/app/database/ajustes/cards/InventorySettingsCard.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Package, AlertCircle, Thermometer, Clock } from 'lucide-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'; import type { InventorySettings } from '../../../../../api/types/settings';
interface InventorySettingsCardProps { interface InventorySettingsCardProps {
@@ -23,21 +23,24 @@ const InventorySettingsCard: React.FC<InventorySettingsCardProps> = ({
onChange({ ...settings, [field]: value }); onChange({ ...settings, [field]: value });
}; };
return ( const handleToggleChange = (field: keyof InventorySettings) => (checked: boolean) => {
<Card className="p-6"> onChange({ ...settings, [field]: checked });
<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"> return (
{/* Stock Management */} <SettingSection
<div> title="Gestión de Inventario"
description="Configure stock management, expiration tracking, and temperature monitoring"
icon={<Package className="w-5 h-5" />}
>
<div className="divide-y divide-[var(--border-primary)]">
{/* Stock Management Section */}
<div className="p-4 sm:p-6">
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center"> <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
<Package className="w-4 h-4 mr-2" /> <Package className="w-4 h-4 mr-2" />
Control de Stock Control de Stock
</h4> </h4>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6"> <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<Input <Input
type="number" type="number"
label="Umbral de Stock Bajo" label="Umbral de Stock Bajo"
@@ -76,13 +79,13 @@ const InventorySettingsCard: React.FC<InventorySettingsCardProps> = ({
</div> </div>
</div> </div>
{/* Expiration Management */} {/* Expiration Management Section */}
<div> <div className="p-4 sm:p-6">
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center"> <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
<Clock className="w-4 h-4 mr-2" /> <Clock className="w-4 h-4 mr-2" />
Gestión de Caducidad Gestión de Caducidad
</h4> </h4>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6"> <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<Input <Input
type="number" type="number"
label="Días para 'Próximo a Caducar'" label="Días para 'Próximo a Caducar'"
@@ -121,159 +124,150 @@ const InventorySettingsCard: React.FC<InventorySettingsCardProps> = ({
</div> </div>
</div> </div>
{/* Temperature Monitoring */} {/* Temperature Monitoring Section */}
<div> <div className="divide-y divide-[var(--border-primary)]">
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center"> <SettingRow
<Thermometer className="w-4 h-4 mr-2" /> label="Monitorización de Temperatura"
Monitorización de Temperatura description="Enable temperature tracking for inventory items"
</h4> icon={<Thermometer className="w-4 h-4" />}
<div className="space-y-4 pl-6"> type="toggle"
<div className="flex items-center gap-2"> checked={settings.temperature_monitoring_enabled}
<input onToggle={handleToggleChange('temperature_monitoring_enabled')}
type="checkbox" disabled={disabled}
id="temperature_monitoring_enabled" helpText="When enabled, system will monitor and alert on temperature deviations"
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 && ( {settings.temperature_monitoring_enabled && (
<> <>
{/* Refrigeration */} {/* Refrigeration Settings */}
<div> <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2"> <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
Refrigeración (°C) Refrigeración (°C)
</label> </h5>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<Input <Input
type="number" type="number"
label="Temperatura Mínima" label="Temperatura Mínima"
value={settings.refrigeration_temp_min} value={settings.refrigeration_temp_min}
onChange={handleChange('refrigeration_temp_min')} onChange={handleChange('refrigeration_temp_min')}
disabled={disabled} disabled={disabled}
min={-5} min={-5}
max={10} max={10}
step={0.5} step={0.5}
placeholder="1.0" placeholder="1.0"
/> />
<Input <Input
type="number" type="number"
label="Temperatura Máxima" label="Temperatura Máxima"
value={settings.refrigeration_temp_max} value={settings.refrigeration_temp_max}
onChange={handleChange('refrigeration_temp_max')} onChange={handleChange('refrigeration_temp_max')}
disabled={disabled} disabled={disabled}
min={-5} min={-5}
max={10} max={10}
step={0.5} step={0.5}
placeholder="4.0" placeholder="4.0"
/> />
</div>
</div> </div>
</div>
{/* Freezer */} {/* Freezer Settings */}
<div> <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2"> <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
Congelador (°C) Congelador (°C)
</label> </h5>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<Input <Input
type="number" type="number"
label="Temperatura Mínima" label="Temperatura Mínima"
value={settings.freezer_temp_min} value={settings.freezer_temp_min}
onChange={handleChange('freezer_temp_min')} onChange={handleChange('freezer_temp_min')}
disabled={disabled} disabled={disabled}
min={-30} min={-30}
max={0} max={0}
step={1} step={1}
placeholder="-20.0" placeholder="-20.0"
/> />
<Input <Input
type="number" type="number"
label="Temperatura Máxima" label="Temperatura Máxima"
value={settings.freezer_temp_max} value={settings.freezer_temp_max}
onChange={handleChange('freezer_temp_max')} onChange={handleChange('freezer_temp_max')}
disabled={disabled} disabled={disabled}
min={-30} min={-30}
max={0} max={0}
step={1} step={1}
placeholder="-15.0" placeholder="-15.0"
/> />
</div>
</div> </div>
</div>
{/* Room Temperature */} {/* Room Temperature Settings */}
<div> <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2"> <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
Temperatura Ambiente (°C) Temperatura Ambiente (°C)
</label> </h5>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<Input <Input
type="number" type="number"
label="Temperatura Mínima" label="Temperatura Mínima"
value={settings.room_temp_min} value={settings.room_temp_min}
onChange={handleChange('room_temp_min')} onChange={handleChange('room_temp_min')}
disabled={disabled} disabled={disabled}
min={10} min={10}
max={35} max={35}
step={1} step={1}
placeholder="18.0" placeholder="18.0"
/> />
<Input <Input
type="number" type="number"
label="Temperatura Máxima" label="Temperatura Máxima"
value={settings.room_temp_max} value={settings.room_temp_max}
onChange={handleChange('room_temp_max')} onChange={handleChange('room_temp_max')}
disabled={disabled} disabled={disabled}
min={10} min={10}
max={35} max={35}
step={1} step={1}
placeholder="25.0" placeholder="25.0"
/> />
</div>
</div> </div>
</div>
{/* Alert Timing */} {/* Alert Timing */}
<div> <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
<h5 className="text-xs font-medium text-[var(--text-tertiary)] mb-2 flex items-center"> <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4 flex items-center">
<AlertCircle className="w-3 h-3 mr-1" /> <AlertCircle className="w-4 h-4 mr-2" />
Alertas de Desviación Alertas de Desviación
</h5> </h5>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<Input <Input
type="number" type="number"
label="Desviación Normal (minutos)" label="Desviación Normal (minutos)"
value={settings.temp_deviation_alert_minutes} value={settings.temp_deviation_alert_minutes}
onChange={handleChange('temp_deviation_alert_minutes')} onChange={handleChange('temp_deviation_alert_minutes')}
disabled={disabled} disabled={disabled}
min={1} min={1}
max={60} max={60}
step={1} step={1}
placeholder="15" placeholder="15"
/> />
<Input <Input
type="number" type="number"
label="Desviación Crítica (minutos)" label="Desviación Crítica (minutos)"
value={settings.critical_temp_deviation_minutes} value={settings.critical_temp_deviation_minutes}
onChange={handleChange('critical_temp_deviation_minutes')} onChange={handleChange('critical_temp_deviation_minutes')}
disabled={disabled} disabled={disabled}
min={1} min={1}
max={30} max={30}
step={1} step={1}
placeholder="5" placeholder="5"
/> />
</div>
</div> </div>
</> </div>
)} </>
</div> )}
</div> </div>
</div> </div>
</Card> </SettingSection>
); );
}; };

410
frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Store, MapPin, Clock, Settings as SettingsIcon, Save, X, AlertCircle, Loader, Bell } from 'lucide-react'; 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 } from '../../../../components/ui'; import { Button, Card, Input, Select, SettingSection, SettingRow } from '../../../../components/ui';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs'; import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs';
import { PageHeader } from '../../../../components/layout'; import { PageHeader } from '../../../../components/layout';
import { showToast } from '../../../../utils/toast'; import { showToast } from '../../../../utils/toast';
@@ -359,18 +359,24 @@ const BakerySettingsPage: React.FC = () => {
{/* Bakery Header Card */} {/* Bakery Header Card */}
<Card className="p-4 sm:p-6"> <Card className="p-4 sm:p-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6"> <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
<div className="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold text-xl flex-shrink-0"> <div className="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold text-2xl flex-shrink-0 shadow-lg">
{config.name.charAt(0) || 'B'} {config.name.charAt(0) || 'B'}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h1 className="text-xl sm:text-2xl font-bold text-text-primary mb-1 truncate"> <h1 className="text-xl sm:text-2xl font-bold text-text-primary mb-1 truncate">
{config.name || t('bakery.information.fields.name')} {config.name || t('bakery.information.fields.name')}
</h1> </h1>
<p className="text-sm sm:text-base text-text-secondary truncate">{config.email}</p> <p className="text-sm sm:text-base text-text-secondary truncate flex items-center gap-2">
<p className="text-xs sm:text-sm text-text-tertiary truncate">{config.address}, {config.city}</p> <Mail className="w-4 h-4" />
{config.email}
</p>
<p className="text-xs sm:text-sm text-text-tertiary truncate flex items-center gap-2 mt-1">
<MapPin className="w-4 h-4" />
{config.address}, {config.city}
</p>
</div> </div>
{hasUnsavedChanges && ( {hasUnsavedChanges && (
<div className="flex items-center gap-2 text-sm text-yellow-600 w-full sm:w-auto"> <div className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 px-3 py-2 rounded-lg w-full sm:w-auto">
<AlertCircle className="w-4 h-4" /> <AlertCircle className="w-4 h-4" />
<span className="hidden sm:inline">{t('bakery.unsaved_changes')}</span> <span className="hidden sm:inline">{t('bakery.unsaved_changes')}</span>
</div> </div>
@@ -403,230 +409,222 @@ const BakerySettingsPage: React.FC = () => {
<TabsContent value="information"> <TabsContent value="information">
<div className="space-y-6"> <div className="space-y-6">
{/* General Information */} {/* General Information */}
<Card className="p-4 sm:p-6"> <SettingSection
<h3 className="text-base sm:text-lg font-semibold text-text-primary mb-4 sm:mb-6 flex items-center"> title={t('bakery.information.general_section')}
<Store className="w-5 h-5 mr-2" /> description="Basic information about your bakery"
{t('bakery.information.general_section')} icon={<Store className="w-5 h-5" />}
</h3> >
<div className="p-4 sm:p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
<Input
label={t('bakery.information.fields.name')}
value={config.name}
onChange={handleInputChange('name')}
error={errors.name}
disabled={isLoading}
placeholder={t('bakery.information.placeholders.name')}
leftIcon={<Store className="w-4 h-4" />}
required
/>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6"> <Input
<Input type="email"
label={t('bakery.information.fields.name')} label={t('bakery.information.fields.email')}
value={config.name} value={config.email}
onChange={handleInputChange('name')} onChange={handleInputChange('email')}
error={errors.name} error={errors.email}
disabled={isLoading} disabled={isLoading}
placeholder={t('bakery.information.placeholders.name')} placeholder={t('bakery.information.placeholders.email')}
leftIcon={<Store className="w-4 h-4" />} leftIcon={<Mail className="w-4 h-4" />}
/> required
/>
<Input <Input
type="email" type="tel"
label={t('bakery.information.fields.email')} label={t('bakery.information.fields.phone')}
value={config.email} value={config.phone}
onChange={handleInputChange('email')} onChange={handleInputChange('phone')}
error={errors.email} disabled={isLoading}
disabled={isLoading} placeholder={t('bakery.information.placeholders.phone')}
placeholder={t('bakery.information.placeholders.email')} leftIcon={<Phone className="w-4 h-4" />}
leftIcon={<MapPin className="w-4 h-4" />} />
/>
<Input <Input
type="tel" label={t('bakery.information.fields.website')}
label={t('bakery.information.fields.phone')} value={config.website}
value={config.phone} onChange={handleInputChange('website')}
onChange={handleInputChange('phone')} disabled={isLoading}
disabled={isLoading} placeholder={t('bakery.information.placeholders.website')}
placeholder={t('bakery.information.placeholders.phone')} leftIcon={<Globe className="w-4 h-4" />}
leftIcon={<Clock className="w-4 h-4" />} />
/> </div>
<Input <div className="mt-4 sm:mt-6">
label={t('bakery.information.fields.website')} <label className="block text-sm font-medium text-text-secondary mb-2">
value={config.website} {t('bakery.information.fields.description')}
onChange={handleInputChange('website')} </label>
disabled={isLoading} <textarea
placeholder={t('bakery.information.placeholders.website')} value={config.description}
className="md:col-span-2 xl:col-span-3" onChange={handleInputChange('description')}
/> disabled={isLoading}
rows={3}
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg resize-none bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)] text-sm sm:text-base focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent"
placeholder={t('bakery.information.placeholders.description')}
/>
</div>
</div> </div>
</SettingSection>
<div className="mt-4 sm:mt-6">
<label className="block text-sm font-medium text-text-secondary mb-2">
{t('bakery.information.fields.description')}
</label>
<textarea
value={config.description}
onChange={handleInputChange('description')}
disabled={isLoading}
rows={3}
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg resize-none bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)] text-sm sm:text-base"
placeholder={t('bakery.information.placeholders.description')}
/>
</div>
</Card>
{/* Location Information */} {/* Location Information */}
<Card className="p-4 sm:p-6"> <SettingSection
<h3 className="text-base sm:text-lg font-semibold text-text-primary mb-4 sm:mb-6 flex items-center"> title={t('bakery.information.location_section')}
<MapPin className="w-5 h-5 mr-2" /> description="Where your bakery is located"
{t('bakery.information.location_section')} icon={<MapPin className="w-5 h-5" />}
</h3> >
<div className="p-4 sm:p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
<Input
label={t('bakery.information.fields.address')}
value={config.address}
onChange={handleInputChange('address')}
error={errors.address}
disabled={isLoading}
placeholder={t('bakery.information.placeholders.address')}
leftIcon={<MapPin className="w-4 h-4" />}
className="md:col-span-2"
required
/>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6"> <Input
<Input label={t('bakery.information.fields.city')}
label={t('bakery.information.fields.address')} value={config.city}
value={config.address} onChange={handleInputChange('city')}
onChange={handleInputChange('address')} error={errors.city}
error={errors.address} disabled={isLoading}
disabled={isLoading} placeholder={t('bakery.information.placeholders.city')}
placeholder={t('bakery.information.placeholders.address')} required
leftIcon={<MapPin className="w-4 h-4" />} />
className="md:col-span-2"
/>
<Input <Input
label={t('bakery.information.fields.city')} label={t('bakery.information.fields.postal_code')}
value={config.city} value={config.postalCode}
onChange={handleInputChange('city')} onChange={handleInputChange('postalCode')}
error={errors.city} disabled={isLoading}
disabled={isLoading} placeholder={t('bakery.information.placeholders.postal_code')}
placeholder={t('bakery.information.placeholders.city')} />
/>
<Input <Input
label={t('bakery.information.fields.postal_code')} label={t('bakery.information.fields.country')}
value={config.postalCode} value={config.country}
onChange={handleInputChange('postalCode')} onChange={handleInputChange('country')}
disabled={isLoading} disabled={isLoading}
placeholder={t('bakery.information.placeholders.postal_code')} placeholder={t('bakery.information.placeholders.country')}
/> />
</div>
<Input
label={t('bakery.information.fields.country')}
value={config.country}
onChange={handleInputChange('country')}
disabled={isLoading}
placeholder={t('bakery.information.placeholders.country')}
/>
</div> </div>
</Card> </SettingSection>
{/* Business Information */} {/* Business Information */}
<Card className="p-4 sm:p-6"> <SettingSection
<h3 className="text-base sm:text-lg font-semibold text-text-primary mb-4 sm:mb-6"> title={t('bakery.information.business_section')}
{t('bakery.information.business_section')} description="Tax and business configuration"
</h3> icon={<Building2 className="w-5 h-5" />}
>
<div className="p-4 sm:p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
<Input
label={t('bakery.information.fields.tax_id')}
value={config.taxId}
onChange={handleInputChange('taxId')}
disabled={isLoading}
placeholder={t('bakery.information.placeholders.tax_id')}
leftIcon={<CreditCard className="w-4 h-4" />}
/>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6"> <Select
<Input label={t('bakery.information.fields.currency')}
label={t('bakery.information.fields.tax_id')} options={currencyOptions}
value={config.taxId} value={config.currency}
onChange={handleInputChange('taxId')} onChange={(value) => handleSelectChange('currency')(value as string)}
disabled={isLoading} disabled={isLoading}
placeholder={t('bakery.information.placeholders.tax_id')} />
/>
<Select <Select
label={t('bakery.information.fields.currency')} label={t('bakery.information.fields.timezone')}
options={currencyOptions} options={timezoneOptions}
value={config.currency} value={config.timezone}
onChange={(value) => handleSelectChange('currency')(value as string)} onChange={(value) => handleSelectChange('timezone')(value as string)}
disabled={isLoading} disabled={isLoading}
/> />
<Select <Select
label={t('bakery.information.fields.timezone')} label={t('bakery.information.fields.language')}
options={timezoneOptions} options={languageOptions}
value={config.timezone} value={config.language}
onChange={(value) => handleSelectChange('timezone')(value as string)} onChange={(value) => handleSelectChange('language')(value as string)}
disabled={isLoading} disabled={isLoading}
/> />
</div>
<Select
label={t('bakery.information.fields.language')}
options={languageOptions}
value={config.language}
onChange={(value) => handleSelectChange('language')(value as string)}
disabled={isLoading}
/>
</div> </div>
</Card> </SettingSection>
</div> </div>
</TabsContent> </TabsContent>
{/* Tab 2: Business Hours */} {/* Tab 2: Business Hours */}
<TabsContent value="hours"> <TabsContent value="hours">
<Card className="p-4 sm:p-6"> <SettingSection
<h3 className="text-base sm:text-lg font-semibold text-text-primary mb-4 sm:mb-6 flex items-center"> title={t('bakery.hours.title')}
<Clock className="w-5 h-5 mr-2" /> description="Configure your opening hours for each day of the week"
{t('bakery.hours.title')} icon={<Clock className="w-5 h-5" />}
</h3> >
{daysOfWeek.map((day) => {
const hours = businessHours[day.key];
return (
<SettingRow
key={day.key}
label={day.label}
description={hours.closed ? t('bakery.hours.closed_all_day') : `${hours.open} - ${hours.close}`}
type="custom"
disabled={isLoading}
>
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full sm:w-auto">
<label className="flex items-center gap-2 whitespace-nowrap">
<input
type="checkbox"
checked={hours.closed}
onChange={(e) => handleHoursChange(day.key, 'closed', e.target.checked)}
disabled={isLoading}
className="rounded border-border-primary"
/>
<span className="text-sm text-text-secondary">{t('bakery.hours.closed')}</span>
</label>
<div className="space-y-3 sm:space-y-4"> {!hours.closed && (
{daysOfWeek.map((day) => { <>
const hours = businessHours[day.key]; <div className="flex items-center gap-2">
return ( <input
<div key={day.key} className="flex flex-col sm:grid sm:grid-cols-12 gap-3 sm:gap-4 p-3 sm:p-4 border border-border-primary rounded-lg"> type="time"
{/* Day Name */} value={hours.open}
<div className="sm:col-span-2"> onChange={(e) => handleHoursChange(day.key, 'open', e.target.value)}
<span className="text-sm font-medium text-text-secondary">{day.label}</span> disabled={isLoading}
</div> className="px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)]"
/>
{/* Closed Checkbox */} <span className="text-sm text-text-tertiary">-</span>
<div className="sm:col-span-2"> <input
<label className="flex items-center gap-2"> type="time"
<input value={hours.close}
type="checkbox" onChange={(e) => handleHoursChange(day.key, 'close', e.target.value)}
checked={hours.closed} disabled={isLoading}
onChange={(e) => handleHoursChange(day.key, 'closed', e.target.checked)} className="px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)]"
disabled={isLoading} />
className="rounded border-border-primary"
/>
<span className="text-sm text-text-secondary">{t('bakery.hours.closed')}</span>
</label>
</div>
{/* Time Inputs */}
<div className="sm:col-span-8 flex items-center gap-4 sm:gap-6">
{!hours.closed ? (
<>
<div className="flex-1">
<label className="block text-xs text-text-tertiary mb-1">
{t('bakery.hours.open_time')}
</label>
<input
type="time"
value={hours.open}
onChange={(e) => handleHoursChange(day.key, 'open', e.target.value)}
disabled={isLoading}
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)]"
/>
</div>
<div className="flex-1">
<label className="block text-xs text-text-tertiary mb-1">
{t('bakery.hours.close_time')}
</label>
<input
type="time"
value={hours.close}
onChange={(e) => handleHoursChange(day.key, 'close', e.target.value)}
disabled={isLoading}
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:bg-[var(--bg-secondary)] disabled:text-[var(--text-secondary)]"
/>
</div>
</>
) : (
<div className="text-sm text-text-tertiary italic">
{t('bakery.hours.closed_all_day')}
</div> </div>
)} </>
</div> )}
</div> </div>
); </SettingRow>
})} );
</div> })}
</Card> </SettingSection>
</TabsContent> </TabsContent>
{/* Tab 3: Operational Settings */} {/* Tab 3: Operational Settings */}
@@ -720,7 +718,7 @@ const BakerySettingsPage: React.FC = () => {
{/* Floating Save Button */} {/* Floating Save Button */}
{hasUnsavedChanges && ( {hasUnsavedChanges && (
<div className="fixed bottom-6 right-4 sm:right-6 left-4 sm:left-auto z-50"> <div className="fixed bottom-6 right-4 sm:right-6 left-4 sm:left-auto z-50">
<Card className="p-3 sm:p-4 shadow-lg border-2 border-[var(--color-primary)]"> <Card className="p-3 sm:p-4 shadow-xl border-2 border-[var(--color-primary)]">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3"> <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
<div className="flex items-center gap-2 text-sm text-text-secondary"> <div className="flex items-center gap-2 text-sm text-text-secondary">
<AlertCircle className="w-4 h-4 text-yellow-500 flex-shrink-0" /> <AlertCircle className="w-4 h-4 text-yellow-500 flex-shrink-0" />

419
frontend/src/pages/app/settings/profile/NewProfileSettingsPage.tsx
View File

@@ -17,9 +17,10 @@ import {
Trash2, Trash2,
AlertCircle, AlertCircle,
Cookie, Cookie,
ExternalLink ExternalLink,
Check
} from 'lucide-react'; } from 'lucide-react';
import { Button, Card, Avatar, Input, Select } from '../../../../components/ui'; import { Button, Card, Avatar, Input, Select, SettingSection, SettingRow } from '../../../../components/ui';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs'; import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs';
import { PageHeader } from '../../../../components/layout'; import { PageHeader } from '../../../../components/layout';
import { showToast } from '../../../../utils/toast'; import { showToast } from '../../../../utils/toast';
@@ -103,9 +104,6 @@ const NewProfileSettingsPage: React.FC = () => {
} }
}, [profile]); }, [profile]);
// Subscription status is not needed on the profile page
// It's already shown in the subscription tab of the main ProfilePage
const languageOptions = [ const languageOptions = [
{ value: 'es', label: 'Español' }, { value: 'es', label: 'Español' },
{ value: 'eu', label: 'Euskara' }, { value: 'eu', label: 'Euskara' },
@@ -324,14 +322,18 @@ const NewProfileSettingsPage: React.FC = () => {
<h1 className="text-xl sm:text-2xl font-bold text-text-primary mb-1 truncate"> <h1 className="text-xl sm:text-2xl font-bold text-text-primary mb-1 truncate">
{profileData.first_name} {profileData.last_name} {profileData.first_name} {profileData.last_name}
</h1> </h1>
<p className="text-sm sm:text-base text-text-secondary truncate">{profileData.email}</p> <p className="text-sm sm:text-base text-text-secondary truncate flex items-center gap-2">
<Mail className="w-4 h-4" />
{profileData.email}
</p>
{user?.role && ( {user?.role && (
<p className="text-xs sm:text-sm text-text-tertiary mt-1"> <p className="text-xs sm:text-sm text-text-tertiary mt-1 flex items-center gap-2">
<User className="w-4 h-4" />
{user.role} {user.role}
</p> </p>
)} )}
<div className="flex items-center gap-2 mt-2"> <div className="flex items-center gap-2 mt-2">
<div className="w-2 h-2 bg-green-500 rounded-full"></div> <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<span className="text-xs sm:text-sm text-text-tertiary">{t('profile.online')}</span> <span className="text-xs sm:text-sm text-text-tertiary">{t('profile.online')}</span>
</div> </div>
</div> </div>
@@ -359,171 +361,187 @@ const NewProfileSettingsPage: React.FC = () => {
<TabsContent value="personal"> <TabsContent value="personal">
<div className="space-y-6"> <div className="space-y-6">
{/* Profile Form */} {/* Profile Form */}
<Card className="p-4 sm:p-6"> <SettingSection
<h2 className="text-base sm:text-lg font-semibold mb-4">{t('profile.personal_info')}</h2> title={t('profile.personal_info')}
description="Your personal information and account details"
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6"> icon={<User className="w-5 h-5" />}
<Input headerAction={
label={t('profile.fields.first_name')} !isEditing ? (
value={profileData.first_name}
onChange={handleInputChange('first_name')}
error={errors.first_name}
disabled={!isEditing || isLoading}
leftIcon={<User className="w-4 h-4" />}
/>
<Input
label={t('profile.fields.last_name')}
value={profileData.last_name}
onChange={handleInputChange('last_name')}
error={errors.last_name}
disabled={!isEditing || isLoading}
/>
<Input
type="email"
label={t('profile.fields.email')}
value={profileData.email}
onChange={handleInputChange('email')}
error={errors.email}
disabled={!isEditing || isLoading}
leftIcon={<Mail className="w-4 h-4" />}
/>
<Input
type="tel"
label={t('profile.fields.phone')}
value={profileData.phone}
onChange={handleInputChange('phone')}
error={errors.phone}
disabled={!isEditing || isLoading}
placeholder="+34 600 000 000"
leftIcon={<Phone className="w-4 h-4" />}
/>
<Select
label={t('profile.fields.language')}
options={languageOptions}
value={profileData.language}
onChange={handleSelectChange('language')}
disabled={!isEditing || isLoading}
leftIcon={<Globe className="w-4 h-4" />}
/>
<Select
label={t('profile.fields.timezone')}
options={timezoneOptions}
value={profileData.timezone}
onChange={handleSelectChange('timezone')}
disabled={!isEditing || isLoading}
leftIcon={<Clock className="w-4 h-4" />}
/>
</div>
<div className="flex gap-3 mt-6 pt-4 border-t flex-wrap">
{!isEditing ? (
<Button <Button
variant="outline" variant="outline"
size="sm"
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
className="flex items-center gap-2"
> >
<User className="w-4 h-4" /> <User className="w-4 h-4 mr-2" />
{t('profile.edit_profile')} {t('profile.edit_profile')}
</Button> </Button>
) : ( ) : (
<> <div className="flex gap-2">
<Button <Button
variant="outline" variant="outline"
size="sm"
onClick={() => setIsEditing(false)} onClick={() => setIsEditing(false)}
disabled={isLoading} disabled={isLoading}
className="flex items-center gap-2"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4 mr-1" />
{t('profile.cancel')} {t('profile.cancel')}
</Button> </Button>
<Button <Button
variant="primary" variant="primary"
size="sm"
onClick={handleSaveProfile} onClick={handleSaveProfile}
isLoading={isLoading} isLoading={isLoading}
loadingText={t('common.saving')} loadingText={t('common.saving')}
className="flex items-center gap-2"
> >
<Save className="w-4 h-4" /> <Save className="w-4 h-4 mr-1" />
{t('profile.save_changes')} {t('profile.save_changes')}
</Button> </Button>
</> </div>
)} )
}
>
<div className="p-4 sm:p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
<Input
label={t('profile.fields.first_name')}
value={profileData.first_name}
onChange={handleInputChange('first_name')}
error={errors.first_name}
disabled={!isEditing || isLoading}
leftIcon={<User className="w-4 h-4" />}
required
/>
<Input
label={t('profile.fields.last_name')}
value={profileData.last_name}
onChange={handleInputChange('last_name')}
error={errors.last_name}
disabled={!isEditing || isLoading}
required
/>
<Input
type="email"
label={t('profile.fields.email')}
value={profileData.email}
onChange={handleInputChange('email')}
error={errors.email}
disabled={!isEditing || isLoading}
leftIcon={<Mail className="w-4 h-4" />}
required
/>
<Input
type="tel"
label={t('profile.fields.phone')}
value={profileData.phone}
onChange={handleInputChange('phone')}
error={errors.phone}
disabled={!isEditing || isLoading}
placeholder="+34 600 000 000"
leftIcon={<Phone className="w-4 h-4" />}
/>
<Select
label={t('profile.fields.language')}
options={languageOptions}
value={profileData.language}
onChange={handleSelectChange('language')}
disabled={!isEditing || isLoading}
leftIcon={<Globe className="w-4 h-4" />}
/>
<Select
label={t('profile.fields.timezone')}
options={timezoneOptions}
value={profileData.timezone}
onChange={handleSelectChange('timezone')}
disabled={!isEditing || isLoading}
leftIcon={<Clock className="w-4 h-4" />}
/>
</div>
</div>
</SettingSection>
{/* Security Section */}
<SettingSection
title="Security"
description="Manage your password and security settings"
icon={<Lock className="w-5 h-5" />}
headerAction={
<Button <Button
variant="outline" variant="outline"
size="sm"
onClick={() => setShowPasswordForm(!showPasswordForm)} onClick={() => setShowPasswordForm(!showPasswordForm)}
className="flex items-center gap-2"
> >
<Lock className="w-4 h-4" /> <Lock className="w-4 h-4 mr-2" />
{t('profile.change_password')} {t('profile.change_password')}
</Button> </Button>
</div> }
</Card> >
{showPasswordForm && (
<div className="p-4 sm:p-6">
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6 mb-6">
<Input
type="password"
label={t('profile.password.current_password')}
value={passwordData.currentPassword}
onChange={handlePasswordChange('currentPassword')}
error={errors.currentPassword}
disabled={isLoading}
leftIcon={<Lock className="w-4 h-4" />}
required
/>
{/* Password Change Form */} <Input
{showPasswordForm && ( type="password"
<Card className="p-4 sm:p-6"> label={t('profile.password.new_password')}
<h2 className="text-base sm:text-lg font-semibold mb-4">{t('profile.password.title')}</h2> value={passwordData.newPassword}
onChange={handlePasswordChange('newPassword')}
error={errors.newPassword}
disabled={isLoading}
leftIcon={<Lock className="w-4 h-4" />}
required
/>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6 max-w-4xl"> <Input
<Input type="password"
type="password" label={t('profile.password.confirm_password')}
label={t('profile.password.current_password')} value={passwordData.confirmPassword}
value={passwordData.currentPassword} onChange={handlePasswordChange('confirmPassword')}
onChange={handlePasswordChange('currentPassword')} error={errors.confirmPassword}
error={errors.currentPassword} disabled={isLoading}
disabled={isLoading} leftIcon={<Lock className="w-4 h-4" />}
leftIcon={<Lock className="w-4 h-4" />} required
/> />
</div>
<Input <div className="flex gap-3 pt-4 border-t border-[var(--border-primary)] flex-wrap">
type="password" <Button
label={t('profile.password.new_password')} variant="outline"
value={passwordData.newPassword} onClick={() => {
onChange={handlePasswordChange('newPassword')} setShowPasswordForm(false);
error={errors.newPassword} setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
disabled={isLoading} setErrors({});
leftIcon={<Lock className="w-4 h-4" />} }}
/> disabled={isLoading}
>
<Input {t('profile.cancel')}
type="password" </Button>
label={t('profile.password.confirm_password')} <Button
value={passwordData.confirmPassword} variant="primary"
onChange={handlePasswordChange('confirmPassword')} onClick={handleChangePasswordSubmit}
error={errors.confirmPassword} isLoading={isLoading}
disabled={isLoading} loadingText={t('common.saving')}
leftIcon={<Lock className="w-4 h-4" />} >
/> <Check className="w-4 h-4 mr-2" />
{t('profile.password.change_password')}
</Button>
</div>
</div> </div>
)}
<div className="flex gap-3 pt-6 mt-6 border-t flex-wrap"> </SettingSection>
<Button
variant="outline"
onClick={() => {
setShowPasswordForm(false);
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
setErrors({});
}}
disabled={isLoading}
>
{t('profile.cancel')}
</Button>
<Button
variant="primary"
onClick={handleChangePasswordSubmit}
isLoading={isLoading}
loadingText={t('common.saving')}
>
{t('profile.password.change_password')}
</Button>
</div>
</Card>
)}
</div> </div>
</TabsContent> </TabsContent>
@@ -580,84 +598,75 @@ const NewProfileSettingsPage: React.FC = () => {
</Card> </Card>
{/* Cookie Preferences */} {/* Cookie Preferences */}
<Card className="p-4 sm:p-6"> <SettingSection
<div className="flex flex-col sm:flex-row items-start justify-between gap-4"> title={t('profile.privacy.cookie_preferences')}
<div className="flex items-start gap-3 flex-1"> description="Gestiona tus preferencias de cookies"
<Cookie className="w-5 h-5 text-amber-600 mt-1 flex-shrink-0" /> icon={<Cookie className="w-5 h-5" />}
<div> headerAction={
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
{t('profile.privacy.cookie_preferences')}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
Gestiona tus preferencias de cookies
</p>
</div>
</div>
<Button <Button
onClick={() => navigate('/cookie-preferences')} onClick={() => navigate('/cookie-preferences')}
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full sm:w-auto"
> >
<Cookie className="w-4 h-4 mr-2" /> <Cookie className="w-4 h-4 mr-2" />
Gestionar Gestionar
</Button> </Button>
</div> }
</Card> >
<div></div>
</SettingSection>
{/* Data Export */} {/* Data Export */}
<Card className="p-4 sm:p-6"> <SettingSection
<div className="flex items-start gap-3 mb-4"> title={t('profile.privacy.export_data')}
<Download className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" /> description={t('profile.privacy.export_description')}
<div className="flex-1"> icon={<Download className="w-5 h-5" />}
<h3 className="font-semibold text-gray-900 dark:text-white mb-1"> headerAction={
{t('profile.privacy.export_data')} <Button
</h3> onClick={handleDataExport}
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2"> variant="primary"
{t('profile.privacy.export_description')} size="sm"
</p> disabled={isExporting}
</div> >
</div> <Download className="w-4 h-4 mr-2" />
{isExporting ? t('common.loading') : t('profile.privacy.export_button')}
<Button </Button>
onClick={handleDataExport} }
variant="primary" >
size="sm" <div></div>
disabled={isExporting} </SettingSection>
className="w-full sm:w-auto"
>
<Download className="w-4 h-4 mr-2" />
{isExporting ? t('common.loading') : t('profile.privacy.export_button')}
</Button>
</Card>
{/* Account Deletion */} {/* Account Deletion */}
<Card className="p-4 sm:p-6 border-red-200 dark:border-red-800"> <SettingSection
<div className="flex items-start gap-3 mb-4"> title={t('profile.privacy.delete_account')}
<AlertCircle className="w-5 h-5 text-red-600 mt-1 flex-shrink-0" /> description={t('profile.privacy.delete_description')}
<div className="flex-1"> icon={<Trash2 className="w-5 h-5" />}
<h3 className="font-semibold text-gray-900 dark:text-white mb-1"> className="border-red-200 dark:border-red-800"
{t('profile.privacy.delete_account')} >
</h3> <div className="p-4 sm:p-6">
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2"> <div className="flex items-start gap-3 mb-4">
{t('profile.privacy.delete_description')} <AlertCircle className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" />
</p> <div className="flex-1">
<p className="text-xs text-red-600 font-semibold"> <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
{t('profile.privacy.delete_warning')} {t('profile.privacy.delete_description')}
</p> </p>
<p className="text-xs text-red-600 font-semibold">
{t('profile.privacy.delete_warning')}
</p>
</div>
</div> </div>
</div>
<Button <Button
onClick={() => setShowDeleteModal(true)} onClick={() => setShowDeleteModal(true)}
variant="outline" variant="outline"
size="sm" size="sm"
className="border-red-300 text-red-600 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/20 w-full sm:w-auto" className="border-red-300 text-red-600 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/20"
> >
<Trash2 className="w-4 h-4 mr-2" /> <Trash2 className="w-4 h-4 mr-2" />
{t('profile.privacy.delete_button')} {t('profile.privacy.delete_button')}
</Button> </Button>
</Card> </div>
</SettingSection>
</div> </div>
</TabsContent> </TabsContent>
</Tabs> </Tabs>