feat: Redesign bakery and user settings pages with improved UX
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
180
frontend/src/components/ui/SettingRow/SettingRow.tsx
Normal file
180
frontend/src/components/ui/SettingRow/SettingRow.tsx
Normal 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
2
frontend/src/components/ui/SettingRow/index.ts
Normal 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
108
frontend/src/components/ui/SettingSection/SettingSection.tsx
Normal 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
2
frontend/src/components/ui/SettingSection/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { default as SettingSection } from './SettingSection';
|
||||
export type { SettingSectionProps } from './SettingSection';
|
||||
@@ -40,6 +40,8 @@ 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 types
|
||||
export type { ButtonProps } from './Button';
|
||||
@@ -77,4 +79,6 @@ 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';
|
||||
export type { FAQAccordionProps, FAQItem } from './FAQAccordion';
|
||||
export type { SettingRowProps } from './SettingRow';
|
||||
export type { SettingSectionProps } from './SettingSection';
|
||||
@@ -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<InventorySettingsCardProps> = ({
|
||||
onChange({ ...settings, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<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>
|
||||
const handleToggleChange = (field: keyof InventorySettings) => (checked: boolean) => {
|
||||
onChange({ ...settings, [field]: checked });
|
||||
};
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Stock Management */}
|
||||
<div>
|
||||
return (
|
||||
<SettingSection
|
||||
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">
|
||||
<Package className="w-4 h-4 mr-2" />
|
||||
Control de Stock
|
||||
</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
|
||||
type="number"
|
||||
label="Umbral de Stock Bajo"
|
||||
@@ -76,13 +79,13 @@ const InventorySettingsCard: React.FC<InventorySettingsCardProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expiration Management */}
|
||||
<div>
|
||||
{/* Expiration Management Section */}
|
||||
<div className="p-4 sm:p-6">
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Gestión de Caducidad
|
||||
</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
|
||||
type="number"
|
||||
label="Días para 'Próximo a Caducar'"
|
||||
@@ -121,159 +124,150 @@ const InventorySettingsCard: React.FC<InventorySettingsCardProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Temperature Monitoring */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<Thermometer className="w-4 h-4 mr-2" />
|
||||
Monitorización de Temperatura
|
||||
</h4>
|
||||
<div className="space-y-4 pl-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="temperature_monitoring_enabled"
|
||||
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>
|
||||
{/* Temperature Monitoring Section */}
|
||||
<div className="divide-y divide-[var(--border-primary)]">
|
||||
<SettingRow
|
||||
label="Monitorización de Temperatura"
|
||||
description="Enable temperature tracking for inventory items"
|
||||
icon={<Thermometer className="w-4 h-4" />}
|
||||
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 */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
|
||||
Refrigeración (°C)
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.refrigeration_temp_min}
|
||||
onChange={handleChange('refrigeration_temp_min')}
|
||||
disabled={disabled}
|
||||
min={-5}
|
||||
max={10}
|
||||
step={0.5}
|
||||
placeholder="1.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.refrigeration_temp_max}
|
||||
onChange={handleChange('refrigeration_temp_max')}
|
||||
disabled={disabled}
|
||||
min={-5}
|
||||
max={10}
|
||||
step={0.5}
|
||||
placeholder="4.0"
|
||||
/>
|
||||
</div>
|
||||
{settings.temperature_monitoring_enabled && (
|
||||
<>
|
||||
{/* Refrigeration Settings */}
|
||||
<div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
|
||||
<h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
|
||||
Refrigeración (°C)
|
||||
</h5>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.refrigeration_temp_min}
|
||||
onChange={handleChange('refrigeration_temp_min')}
|
||||
disabled={disabled}
|
||||
min={-5}
|
||||
max={10}
|
||||
step={0.5}
|
||||
placeholder="1.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.refrigeration_temp_max}
|
||||
onChange={handleChange('refrigeration_temp_max')}
|
||||
disabled={disabled}
|
||||
min={-5}
|
||||
max={10}
|
||||
step={0.5}
|
||||
placeholder="4.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Freezer */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
|
||||
Congelador (°C)
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.freezer_temp_min}
|
||||
onChange={handleChange('freezer_temp_min')}
|
||||
disabled={disabled}
|
||||
min={-30}
|
||||
max={0}
|
||||
step={1}
|
||||
placeholder="-20.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.freezer_temp_max}
|
||||
onChange={handleChange('freezer_temp_max')}
|
||||
disabled={disabled}
|
||||
min={-30}
|
||||
max={0}
|
||||
step={1}
|
||||
placeholder="-15.0"
|
||||
/>
|
||||
</div>
|
||||
{/* Freezer Settings */}
|
||||
<div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
|
||||
<h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
|
||||
Congelador (°C)
|
||||
</h5>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.freezer_temp_min}
|
||||
onChange={handleChange('freezer_temp_min')}
|
||||
disabled={disabled}
|
||||
min={-30}
|
||||
max={0}
|
||||
step={1}
|
||||
placeholder="-20.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.freezer_temp_max}
|
||||
onChange={handleChange('freezer_temp_max')}
|
||||
disabled={disabled}
|
||||
min={-30}
|
||||
max={0}
|
||||
step={1}
|
||||
placeholder="-15.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Room Temperature */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
|
||||
Temperatura Ambiente (°C)
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.room_temp_min}
|
||||
onChange={handleChange('room_temp_min')}
|
||||
disabled={disabled}
|
||||
min={10}
|
||||
max={35}
|
||||
step={1}
|
||||
placeholder="18.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.room_temp_max}
|
||||
onChange={handleChange('room_temp_max')}
|
||||
disabled={disabled}
|
||||
min={10}
|
||||
max={35}
|
||||
step={1}
|
||||
placeholder="25.0"
|
||||
/>
|
||||
</div>
|
||||
{/* Room Temperature Settings */}
|
||||
<div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
|
||||
<h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
|
||||
Temperatura Ambiente (°C)
|
||||
</h5>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Mínima"
|
||||
value={settings.room_temp_min}
|
||||
onChange={handleChange('room_temp_min')}
|
||||
disabled={disabled}
|
||||
min={10}
|
||||
max={35}
|
||||
step={1}
|
||||
placeholder="18.0"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Temperatura Máxima"
|
||||
value={settings.room_temp_max}
|
||||
onChange={handleChange('room_temp_max')}
|
||||
disabled={disabled}
|
||||
min={10}
|
||||
max={35}
|
||||
step={1}
|
||||
placeholder="25.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alert Timing */}
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-[var(--text-tertiary)] mb-2 flex items-center">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
Alertas de Desviación
|
||||
</h5>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Desviación Normal (minutos)"
|
||||
value={settings.temp_deviation_alert_minutes}
|
||||
onChange={handleChange('temp_deviation_alert_minutes')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={60}
|
||||
step={1}
|
||||
placeholder="15"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Desviación Crítica (minutos)"
|
||||
value={settings.critical_temp_deviation_minutes}
|
||||
onChange={handleChange('critical_temp_deviation_minutes')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
placeholder="5"
|
||||
/>
|
||||
</div>
|
||||
{/* Alert Timing */}
|
||||
<div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
|
||||
<h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4 flex items-center">
|
||||
<AlertCircle className="w-4 h-4 mr-2" />
|
||||
Alertas de Desviación
|
||||
</h5>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
label="Desviación Normal (minutos)"
|
||||
value={settings.temp_deviation_alert_minutes}
|
||||
onChange={handleChange('temp_deviation_alert_minutes')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={60}
|
||||
step={1}
|
||||
placeholder="15"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Desviación Crítica (minutos)"
|
||||
value={settings.critical_temp_deviation_minutes}
|
||||
onChange={handleChange('critical_temp_deviation_minutes')}
|
||||
disabled={disabled}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
placeholder="5"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</SettingSection>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 */}
|
||||
<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="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'}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-text-primary mb-1 truncate">
|
||||
{config.name || t('bakery.information.fields.name')}
|
||||
</h1>
|
||||
<p className="text-sm sm:text-base text-text-secondary truncate">{config.email}</p>
|
||||
<p className="text-xs sm:text-sm text-text-tertiary truncate">{config.address}, {config.city}</p>
|
||||
<p className="text-sm sm:text-base text-text-secondary truncate flex items-center gap-2">
|
||||
<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>
|
||||
{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" />
|
||||
<span className="hidden sm:inline">{t('bakery.unsaved_changes')}</span>
|
||||
</div>
|
||||
@@ -403,230 +409,222 @@ const BakerySettingsPage: React.FC = () => {
|
||||
<TabsContent value="information">
|
||||
<div className="space-y-6">
|
||||
{/* General Information */}
|
||||
<Card className="p-4 sm:p-6">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-text-primary mb-4 sm:mb-6 flex items-center">
|
||||
<Store className="w-5 h-5 mr-2" />
|
||||
{t('bakery.information.general_section')}
|
||||
</h3>
|
||||
<SettingSection
|
||||
title={t('bakery.information.general_section')}
|
||||
description="Basic information about your bakery"
|
||||
icon={<Store 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.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
|
||||
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" />}
|
||||
/>
|
||||
<Input
|
||||
type="email"
|
||||
label={t('bakery.information.fields.email')}
|
||||
value={config.email}
|
||||
onChange={handleInputChange('email')}
|
||||
error={errors.email}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.email')}
|
||||
leftIcon={<Mail className="w-4 h-4" />}
|
||||
required
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="email"
|
||||
label={t('bakery.information.fields.email')}
|
||||
value={config.email}
|
||||
onChange={handleInputChange('email')}
|
||||
error={errors.email}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.email')}
|
||||
leftIcon={<MapPin className="w-4 h-4" />}
|
||||
/>
|
||||
<Input
|
||||
type="tel"
|
||||
label={t('bakery.information.fields.phone')}
|
||||
value={config.phone}
|
||||
onChange={handleInputChange('phone')}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.phone')}
|
||||
leftIcon={<Phone className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="tel"
|
||||
label={t('bakery.information.fields.phone')}
|
||||
value={config.phone}
|
||||
onChange={handleInputChange('phone')}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.phone')}
|
||||
leftIcon={<Clock className="w-4 h-4" />}
|
||||
/>
|
||||
<Input
|
||||
label={t('bakery.information.fields.website')}
|
||||
value={config.website}
|
||||
onChange={handleInputChange('website')}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.website')}
|
||||
leftIcon={<Globe className="w-4 h-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label={t('bakery.information.fields.website')}
|
||||
value={config.website}
|
||||
onChange={handleInputChange('website')}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.website')}
|
||||
className="md:col-span-2 xl:col-span-3"
|
||||
/>
|
||||
<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 focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent"
|
||||
placeholder={t('bakery.information.placeholders.description')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</SettingSection>
|
||||
|
||||
{/* Location Information */}
|
||||
<Card className="p-4 sm:p-6">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-text-primary mb-4 sm:mb-6 flex items-center">
|
||||
<MapPin className="w-5 h-5 mr-2" />
|
||||
{t('bakery.information.location_section')}
|
||||
</h3>
|
||||
<SettingSection
|
||||
title={t('bakery.information.location_section')}
|
||||
description="Where your bakery is located"
|
||||
icon={<MapPin 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.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
|
||||
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"
|
||||
/>
|
||||
<Input
|
||||
label={t('bakery.information.fields.city')}
|
||||
value={config.city}
|
||||
onChange={handleInputChange('city')}
|
||||
error={errors.city}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.city')}
|
||||
required
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('bakery.information.fields.city')}
|
||||
value={config.city}
|
||||
onChange={handleInputChange('city')}
|
||||
error={errors.city}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.city')}
|
||||
/>
|
||||
<Input
|
||||
label={t('bakery.information.fields.postal_code')}
|
||||
value={config.postalCode}
|
||||
onChange={handleInputChange('postalCode')}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.postal_code')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('bakery.information.fields.postal_code')}
|
||||
value={config.postalCode}
|
||||
onChange={handleInputChange('postalCode')}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.postal_code')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('bakery.information.fields.country')}
|
||||
value={config.country}
|
||||
onChange={handleInputChange('country')}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.country')}
|
||||
/>
|
||||
<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 */}
|
||||
<Card className="p-4 sm:p-6">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-text-primary mb-4 sm:mb-6">
|
||||
{t('bakery.information.business_section')}
|
||||
</h3>
|
||||
<SettingSection
|
||||
title={t('bakery.information.business_section')}
|
||||
description="Tax and business configuration"
|
||||
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">
|
||||
<Input
|
||||
label={t('bakery.information.fields.tax_id')}
|
||||
value={config.taxId}
|
||||
onChange={handleInputChange('taxId')}
|
||||
disabled={isLoading}
|
||||
placeholder={t('bakery.information.placeholders.tax_id')}
|
||||
/>
|
||||
<Select
|
||||
label={t('bakery.information.fields.currency')}
|
||||
options={currencyOptions}
|
||||
value={config.currency}
|
||||
onChange={(value) => handleSelectChange('currency')(value as string)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label={t('bakery.information.fields.currency')}
|
||||
options={currencyOptions}
|
||||
value={config.currency}
|
||||
onChange={(value) => handleSelectChange('currency')(value as string)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<Select
|
||||
label={t('bakery.information.fields.timezone')}
|
||||
options={timezoneOptions}
|
||||
value={config.timezone}
|
||||
onChange={(value) => handleSelectChange('timezone')(value as string)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label={t('bakery.information.fields.timezone')}
|
||||
options={timezoneOptions}
|
||||
value={config.timezone}
|
||||
onChange={(value) => handleSelectChange('timezone')(value as string)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label={t('bakery.information.fields.language')}
|
||||
options={languageOptions}
|
||||
value={config.language}
|
||||
onChange={(value) => handleSelectChange('language')(value as string)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<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>
|
||||
</TabsContent>
|
||||
|
||||
{/* Tab 2: Business Hours */}
|
||||
<TabsContent value="hours">
|
||||
<Card className="p-4 sm:p-6">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-text-primary mb-4 sm:mb-6 flex items-center">
|
||||
<Clock className="w-5 h-5 mr-2" />
|
||||
{t('bakery.hours.title')}
|
||||
</h3>
|
||||
<SettingSection
|
||||
title={t('bakery.hours.title')}
|
||||
description="Configure your opening hours for each day of the week"
|
||||
icon={<Clock className="w-5 h-5" />}
|
||||
>
|
||||
{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">
|
||||
{daysOfWeek.map((day) => {
|
||||
const hours = businessHours[day.key];
|
||||
return (
|
||||
<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">
|
||||
{/* Day Name */}
|
||||
<div className="sm:col-span-2">
|
||||
<span className="text-sm font-medium text-text-secondary">{day.label}</span>
|
||||
</div>
|
||||
|
||||
{/* Closed Checkbox */}
|
||||
<div className="sm:col-span-2">
|
||||
<label className="flex items-center gap-2">
|
||||
<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>
|
||||
|
||||
{/* 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')}
|
||||
{!hours.closed && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="time"
|
||||
value={hours.open}
|
||||
onChange={(e) => handleHoursChange(day.key, 'open', e.target.value)}
|
||||
disabled={isLoading}
|
||||
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)]"
|
||||
/>
|
||||
<span className="text-sm text-text-tertiary">-</span>
|
||||
<input
|
||||
type="time"
|
||||
value={hours.close}
|
||||
onChange={(e) => handleHoursChange(day.key, 'close', e.target.value)}
|
||||
disabled={isLoading}
|
||||
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)]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
</SettingRow>
|
||||
);
|
||||
})}
|
||||
</SettingSection>
|
||||
</TabsContent>
|
||||
|
||||
{/* Tab 3: Operational Settings */}
|
||||
@@ -720,7 +718,7 @@ const BakerySettingsPage: React.FC = () => {
|
||||
{/* Floating Save Button */}
|
||||
{hasUnsavedChanges && (
|
||||
<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 items-center gap-2 text-sm text-text-secondary">
|
||||
<AlertCircle className="w-4 h-4 text-yellow-500 flex-shrink-0" />
|
||||
|
||||
@@ -17,9 +17,10 @@ import {
|
||||
Trash2,
|
||||
AlertCircle,
|
||||
Cookie,
|
||||
ExternalLink
|
||||
ExternalLink,
|
||||
Check
|
||||
} 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 { PageHeader } from '../../../../components/layout';
|
||||
import { showToast } from '../../../../utils/toast';
|
||||
@@ -49,7 +50,7 @@ interface PasswordData {
|
||||
const NewProfileSettingsPage: React.FC = () => {
|
||||
const { t } = useTranslation('settings');
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
||||
const user = useAuthUser();
|
||||
const { logout } = useAuthActions();
|
||||
const currentTenant = useCurrentTenant();
|
||||
@@ -103,9 +104,6 @@ const NewProfileSettingsPage: React.FC = () => {
|
||||
}
|
||||
}, [profile]);
|
||||
|
||||
// Subscription status is not needed on the profile page
|
||||
// It's already shown in the subscription tab of the main ProfilePage
|
||||
|
||||
const languageOptions = [
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ 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">
|
||||
{profileData.first_name} {profileData.last_name}
|
||||
</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 && (
|
||||
<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}
|
||||
</p>
|
||||
)}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -359,171 +361,187 @@ const NewProfileSettingsPage: React.FC = () => {
|
||||
<TabsContent value="personal">
|
||||
<div className="space-y-6">
|
||||
{/* Profile Form */}
|
||||
<Card className="p-4 sm:p-6">
|
||||
<h2 className="text-base sm:text-lg font-semibold mb-4">{t('profile.personal_info')}</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 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" />}
|
||||
/>
|
||||
|
||||
<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 ? (
|
||||
<SettingSection
|
||||
title={t('profile.personal_info')}
|
||||
description="Your personal information and account details"
|
||||
icon={<User className="w-5 h-5" />}
|
||||
headerAction={
|
||||
!isEditing ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
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')}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(false)}
|
||||
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')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleSaveProfile}
|
||||
isLoading={isLoading}
|
||||
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')}
|
||||
</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
|
||||
variant="outline"
|
||||
size="sm"
|
||||
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')}
|
||||
</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 */}
|
||||
{showPasswordForm && (
|
||||
<Card className="p-4 sm:p-6">
|
||||
<h2 className="text-base sm:text-lg font-semibold mb-4">{t('profile.password.title')}</h2>
|
||||
<Input
|
||||
type="password"
|
||||
label={t('profile.password.new_password')}
|
||||
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
|
||||
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" />}
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
label={t('profile.password.confirm_password')}
|
||||
value={passwordData.confirmPassword}
|
||||
onChange={handlePasswordChange('confirmPassword')}
|
||||
error={errors.confirmPassword}
|
||||
disabled={isLoading}
|
||||
leftIcon={<Lock className="w-4 h-4" />}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
type="password"
|
||||
label={t('profile.password.new_password')}
|
||||
value={passwordData.newPassword}
|
||||
onChange={handlePasswordChange('newPassword')}
|
||||
error={errors.newPassword}
|
||||
disabled={isLoading}
|
||||
leftIcon={<Lock className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="password"
|
||||
label={t('profile.password.confirm_password')}
|
||||
value={passwordData.confirmPassword}
|
||||
onChange={handlePasswordChange('confirmPassword')}
|
||||
error={errors.confirmPassword}
|
||||
disabled={isLoading}
|
||||
leftIcon={<Lock className="w-4 h-4" />}
|
||||
/>
|
||||
<div className="flex gap-3 pt-4 border-t border-[var(--border-primary)] flex-wrap">
|
||||
<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')}
|
||||
>
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
{t('profile.password.change_password')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-6 mt-6 border-t flex-wrap">
|
||||
<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>
|
||||
)}
|
||||
)}
|
||||
</SettingSection>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
@@ -580,84 +598,75 @@ const NewProfileSettingsPage: React.FC = () => {
|
||||
</Card>
|
||||
|
||||
{/* Cookie Preferences */}
|
||||
<Card className="p-4 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 flex-1">
|
||||
<Cookie className="w-5 h-5 text-amber-600 mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<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>
|
||||
<SettingSection
|
||||
title={t('profile.privacy.cookie_preferences')}
|
||||
description="Gestiona tus preferencias de cookies"
|
||||
icon={<Cookie className="w-5 h-5" />}
|
||||
headerAction={
|
||||
<Button
|
||||
onClick={() => navigate('/cookie-preferences')}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
<Cookie className="w-4 h-4 mr-2" />
|
||||
Gestionar
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
}
|
||||
>
|
||||
<div></div>
|
||||
</SettingSection>
|
||||
|
||||
{/* Data Export */}
|
||||
<Card className="p-4 sm:p-6">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<Download className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{t('profile.privacy.export_data')}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
{t('profile.privacy.export_description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleDataExport}
|
||||
variant="primary"
|
||||
size="sm"
|
||||
disabled={isExporting}
|
||||
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>
|
||||
<SettingSection
|
||||
title={t('profile.privacy.export_data')}
|
||||
description={t('profile.privacy.export_description')}
|
||||
icon={<Download className="w-5 h-5" />}
|
||||
headerAction={
|
||||
<Button
|
||||
onClick={handleDataExport}
|
||||
variant="primary"
|
||||
size="sm"
|
||||
disabled={isExporting}
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
{isExporting ? t('common.loading') : t('profile.privacy.export_button')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div></div>
|
||||
</SettingSection>
|
||||
|
||||
{/* Account Deletion */}
|
||||
<Card className="p-4 sm:p-6 border-red-200 dark:border-red-800">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<AlertCircle className="w-5 h-5 text-red-600 mt-1 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{t('profile.privacy.delete_account')}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
{t('profile.privacy.delete_description')}
|
||||
</p>
|
||||
<p className="text-xs text-red-600 font-semibold">
|
||||
{t('profile.privacy.delete_warning')}
|
||||
</p>
|
||||
<SettingSection
|
||||
title={t('profile.privacy.delete_account')}
|
||||
description={t('profile.privacy.delete_description')}
|
||||
icon={<Trash2 className="w-5 h-5" />}
|
||||
className="border-red-200 dark:border-red-800"
|
||||
>
|
||||
<div className="p-4 sm:p-6">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<AlertCircle className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
{t('profile.privacy.delete_description')}
|
||||
</p>
|
||||
<p className="text-xs text-red-600 font-semibold">
|
||||
{t('profile.privacy.delete_warning')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={() => setShowDeleteModal(true)}
|
||||
variant="outline"
|
||||
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"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
{t('profile.privacy.delete_button')}
|
||||
</Button>
|
||||
</Card>
|
||||
<Button
|
||||
onClick={() => setShowDeleteModal(true)}
|
||||
variant="outline"
|
||||
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"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
{t('profile.privacy.delete_button')}
|
||||
</Button>
|
||||
</div>
|
||||
</SettingSection>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
Reference in New Issue
Block a user