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
@@ -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