@@ -230,428 +57,51 @@ export default function FamilyView() {
);
}
- const getProgressColor = (remaining: number, limit: number) => {
- const percentage = (remaining / limit) * 100;
- if (percentage > 50) return 'bg-green-500';
- if (percentage > 25) return 'bg-yellow-500';
- return 'bg-red-500';
- };
-
- const getProgressPercentage = (remaining: number, limit: number) => {
- return Math.max(0, Math.min(100, (remaining / limit) * 100));
- };
-
- const getTotalLimit = () => {
- return categories.reduce((sum, cat) => sum + parseFloat(cat.limit_amount.toString()), 0);
- };
-
- const getTotalRemaining = () => {
- return Array.from(remainingLimits.values()).reduce((sum, val) => sum + val, 0);
- };
-
- const formatDate = (dateString: string) => {
- let dateStr = dateString;
- if (!dateStr.endsWith('Z') && !dateStr.includes('+')) {
- dateStr = dateStr + 'Z';
- }
- const date = new Date(dateStr);
- return date.toLocaleString('ru-RU', {
- day: '2-digit',
- month: '2-digit',
- year: 'numeric',
- hour: '2-digit',
- minute: '2-digit',
- });
- };
-
return (
-
-
-
-
-
-
-
-
-
-
- {selectedFamily?.name || t('family.defaultName')}
-
-
-
-
-
{t('family.totalLimit')}
-
- {getTotalLimit().toFixed(2)} ₽
-
-
-
-
{t('family.totalRemaining')}
-
- {getTotalRemaining().toFixed(2)} ₽
-
-
-
-
-
-
-
+
setShowInviteModal(true)}
+ onProfile={() => navigate('/profile')}
+ />
- {error && (
-
- )}
+ setShowShoppingList(true)}
+ />
-
- {categories.map((category) => {
- const remaining = remainingLimits.get(category.id) || 0;
- const limit = parseFloat(category.limit_amount.toString());
- const percentage = getProgressPercentage(remaining, limit);
+
- return (
-
-
-
-
-
-
-
- {category.name}
-
-
-
- {showAddExpense !== category.id && (
-
- )}
-
-
-
-
- {t('category.remaining')}
-
- {remaining.toFixed(2)} ₽
-
-
-
- {t('category.limit')}
- {limit.toFixed(2)} ₽
-
-
-
-
- {percentage.toFixed(0)}{t('category.percentRemaining')}
-
-
-
-
-
-
-
-
-
- {showHistory === category.id && (
-
-
-
-
- {t('expense.historyTitle')}
-
-
-
-
- {categoryExpenses.length === 0 ? (
-
{t('expense.noExpenses')}
- ) : (
-
- {categoryExpenses.map((expense) => (
-
-
-
-
-
-
-
- {parseFloat(expense.amount.toString()).toFixed(2)} ₽
-
-
-
-
- {formatDate(expense.created_at)}
-
-
- {expense.description && (
-
-
- {expense.description}
-
- )}
-
- ))}
-
- )}
-
- )}
-
- {showAddExpense === category.id && (
-
-
- {t('expense.addTitle')}
-
-
-
-
- setExpenseAmount(e.target.value)}
- className="w-full px-4 py-3 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all text-center font-semibold text-lg"
- />
-
-
-
- setExpenseDescription(e.target.value)}
- className="w-full px-4 py-3 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all"
- />
-
-
-
-
-
-
-
- )}
-
- );
- })}
-
-
-
-
-
-
- {t('category.management')}
-
-
-
- {showAddCategory ? (
-
-
- {t('category.newCategory')}
-
-
-
setNewCategoryName(e.target.value)}
- className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium"
- />
-
setNewCategoryLimit(e.target.value)}
- className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium text-center"
- />
-
-
-
-
-
-
- ) : (
-
- )}
-
- {showShoppingList && familyId && (
+ {showShoppingList && (
setShowShoppingList(false)}
/>
)}
- {showInviteModal && (
-
-
-
-
-
-
-
-
{t('invite.title')}
-
-
-
+ {showInviteModal &&
setShowInviteModal(false)} />}
- {!inviteLink ? (
-
-
- {t('invite.description')}
-
-
-
-
- {t('invite.sendLink')}
-
-
-
- {inviteLink.invite_url}
-
-
-
-
-
);
}
diff --git a/frontend/src/pages/Profile.old.tsx b/frontend/src/pages/Profile.old.tsx
new file mode 100644
index 0000000..414d76f
--- /dev/null
+++ b/frontend/src/pages/Profile.old.tsx
@@ -0,0 +1,375 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { familyApi, userApi, authApi } from '../api/client';
+import { useStore } from '../store/useStore';
+import type { Theme } from '../types';
+import {
+ User as UserIcon,
+ Users,
+ Settings,
+ AlertTriangle,
+ ArrowLeft,
+ Loader2,
+ Check,
+ Palette,
+ Languages,
+ LogOut,
+ Edit3,
+ Save,
+ X,
+} from 'lucide-react';
+
+const THEMES: { id: Theme; gradient: string }[] = [
+ { id: 'light', gradient: 'bg-gradient-to-r from-gray-100 to-gray-200' },
+ { id: 'dark', gradient: 'bg-gradient-to-r from-black to-gray-900' },
+ { id: 'sunset', gradient: 'bg-gradient-to-r from-orange-400 to-pink-500' },
+ { id: 'ocean', gradient: 'bg-gradient-to-r from-blue-400 to-cyan-500' },
+ { id: 'forest', gradient: 'bg-gradient-to-r from-green-400 to-teal-500' },
+ { id: 'purple', gradient: 'bg-gradient-to-r from-purple-500 to-pink-500' },
+];
+
+export default function Profile() {
+ const { t, i18n } = useTranslation();
+ const navigate = useNavigate();
+ const { user, selectedFamily, setSelectedFamily, setUser, preferences, setPreferences, familyMembers, setFamilyMembers } = useStore();
+
+ const [membersLoading, setMembersLoading] = useState(false);
+ const [leavingFamily, setLeavingFamily] = useState(false);
+ const [editingName, setEditingName] = useState(false);
+ const [newFamilyName, setNewFamilyName] = useState('');
+ const [savingName, setSavingName] = useState(false);
+
+ useEffect(() => {
+ if (user?.family_id) {
+ loadFamily();
+ }
+ }, [user?.family_id]);
+
+ useEffect(() => {
+ if (user?.family_id && selectedFamily) {
+ loadMembers();
+ }
+ }, [user?.family_id, selectedFamily]);
+
+ const loadFamily = async () => {
+ if (!user?.family_id) return;
+ try {
+ const response = await familyApi.getById(user.family_id);
+ setSelectedFamily(response.data);
+ } catch (err) {
+ console.error('Error loading family:', err);
+ }
+ };
+
+ const loadMembers = async () => {
+ if (!user?.family_id) return;
+ try {
+ setMembersLoading(true);
+ const response = await familyApi.getMembers(user.family_id);
+ console.log('Loaded members:', response.data);
+ setFamilyMembers(response.data);
+ } catch (err) {
+ console.error('Error loading members:', err);
+ } finally {
+ setMembersLoading(false);
+ }
+ };
+
+ const handleLeaveFamily = async () => {
+ if (!confirm(t('profile.leaveConfirm'))) return;
+
+ try {
+ setLeavingFamily(true);
+ await userApi.leaveFamily();
+
+ const meResponse = await authApi.me();
+ setUser(meResponse.data);
+ setSelectedFamily(null);
+ setFamilyMembers([]);
+
+ navigate('/');
+ } catch (err) {
+ console.error('Error leaving family:', err);
+ alert(t('profile.leaveError'));
+ } finally {
+ setLeavingFamily(false);
+ }
+ };
+
+ const handleThemeChange = (theme: Theme) => {
+ setPreferences({ theme });
+ document.documentElement.setAttribute('data-theme', theme);
+ };
+
+ const handleLocaleChange = (locale: 'ru' | 'en') => {
+ setPreferences({ locale });
+ i18n.changeLanguage(locale);
+ };
+
+ const handleStartEditName = () => {
+ setNewFamilyName(selectedFamily?.name || '');
+ setEditingName(true);
+ };
+
+ const handleSaveName = async () => {
+ if (!selectedFamily || !newFamilyName.trim()) return;
+
+ try {
+ setSavingName(true);
+ const response = await familyApi.update(selectedFamily.id, { name: newFamilyName.trim() });
+ setSelectedFamily(response.data);
+ setEditingName(false);
+ } catch (err) {
+ console.error('Error updating family name:', err);
+ alert(t('profile.renameError'));
+ } finally {
+ setSavingName(false);
+ }
+ };
+
+ const handleBack = () => {
+ if (user?.family_id) {
+ navigate(`/family/${user.family_id}`);
+ } else {
+ navigate('/');
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
{t('profile.title')}
+
+
+
+
+
+
+
+
+
{t('profile.info')}
+
+
+
+ {t('profile.username')}
+ {user?.username || '-'}
+
+
+ {t('profile.email')}
+ {user?.email || '-'}
+
+
+
+
+ {selectedFamily && (
+
+
+
+
+
+
{t('profile.family')}
+
+
+
+
+
{t('profile.familyName')}
+ {editingName ? (
+
+ setNewFamilyName(e.target.value)}
+ className="px-3 py-1 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-1 focus:ring-purple-200"
+ autoFocus
+ />
+
+
+
+ ) : (
+
+ {selectedFamily.name}
+
+
+ )}
+
+
+
+
+
{t('profile.members')}
+ {membersLoading ? (
+
+
+
+ ) : familyMembers.length === 0 ? (
+
+ {t('profile.noMembers') || 'Нет участников'}
+
+ ) : (
+
+ {familyMembers.map((member) => (
+
+
+
+ {(member.username || member.email || '?')[0].toUpperCase()}
+
+
+ {member.username || member.email || t('profile.unknownUser')}
+
+ {member.id === user?.id && (
+
+ {t('profile.you')}
+
+ )}
+
+ {member.is_admin && (
+
+ Admin
+
+ )}
+
+ ))}
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
{t('profile.settings')}
+
+
+
+
+
+
+
{t('profile.language')}
+
+
+
+
+
+
+
+
+
+
+
{t('profile.theme')}
+
+
+ {THEMES.map((theme) => (
+
+ ))}
+
+
+
+
+
+ {selectedFamily && (
+
+
+
+
{t('profile.dangerZone')}
+
+
+
{t('profile.leaveDescription')}
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 414d76f..f84919b 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,44 +1,28 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
-import { familyApi, userApi, authApi } from '../api/client';
+import { User as UserIcon } from 'lucide-react';
+import { familyApi, authApi } from '../api/client';
import { useStore } from '../store/useStore';
-import type { Theme } from '../types';
-import {
- User as UserIcon,
- Users,
- Settings,
- AlertTriangle,
- ArrowLeft,
- Loader2,
- Check,
- Palette,
- Languages,
- LogOut,
- Edit3,
- Save,
- X,
-} from 'lucide-react';
-
-const THEMES: { id: Theme; gradient: string }[] = [
- { id: 'light', gradient: 'bg-gradient-to-r from-gray-100 to-gray-200' },
- { id: 'dark', gradient: 'bg-gradient-to-r from-black to-gray-900' },
- { id: 'sunset', gradient: 'bg-gradient-to-r from-orange-400 to-pink-500' },
- { id: 'ocean', gradient: 'bg-gradient-to-r from-blue-400 to-cyan-500' },
- { id: 'forest', gradient: 'bg-gradient-to-r from-green-400 to-teal-500' },
- { id: 'purple', gradient: 'bg-gradient-to-r from-purple-500 to-pink-500' },
-];
+import { useFamilyMembers, useConfirm } from '../hooks';
+import { Theme } from '../types';
+import { ProfileHeader } from '../components/profile/ProfileHeader';
+import { UserInfo } from '../components/profile/UserInfo';
+import { FamilySection } from '../components/profile/FamilySection';
+import { MembersSection } from '../components/profile/MembersSection';
+import { SettingsSection } from '../components/profile/SettingsSection';
+import { ConfirmModal, Card } from '../components/ui';
+import { showToast } from '../utils/toast';
+import { showErrorToast } from '../utils/errorHandler';
export default function Profile() {
const { t, i18n } = useTranslation();
const navigate = useNavigate();
- const { user, selectedFamily, setSelectedFamily, setUser, preferences, setPreferences, familyMembers, setFamilyMembers } = useStore();
+ const { user, selectedFamily, setSelectedFamily, setUser, preferences, setPreferences } = useStore();
+ const { members, loading: membersLoading, loadMembers } = useFamilyMembers(user?.family_id || null);
+ const { confirmState, confirm, cancel } = useConfirm();
- const [membersLoading, setMembersLoading] = useState(false);
const [leavingFamily, setLeavingFamily] = useState(false);
- const [editingName, setEditingName] = useState(false);
- const [newFamilyName, setNewFamilyName] = useState('');
- const [savingName, setSavingName] = useState(false);
useEffect(() => {
if (user?.family_id) {
@@ -46,12 +30,6 @@ export default function Profile() {
}
}, [user?.family_id]);
- useEffect(() => {
- if (user?.family_id && selectedFamily) {
- loadMembers();
- }
- }, [user?.family_id, selectedFamily]);
-
const loadFamily = async () => {
if (!user?.family_id) return;
try {
@@ -62,90 +40,53 @@ export default function Profile() {
}
};
- const loadMembers = async () => {
- if (!user?.family_id) return;
- try {
- setMembersLoading(true);
- const response = await familyApi.getMembers(user.family_id);
- console.log('Loaded members:', response.data);
- setFamilyMembers(response.data);
- } catch (err) {
- console.error('Error loading members:', err);
- } finally {
- setMembersLoading(false);
- }
- };
-
const handleLeaveFamily = async () => {
- if (!confirm(t('profile.leaveConfirm'))) return;
+ await confirm(t('profile.leaveConfirm'), t('profile.leaveMessage'));
try {
setLeavingFamily(true);
+ const { userApi } = await import('../api/client');
await userApi.leaveFamily();
const meResponse = await authApi.me();
setUser(meResponse.data);
setSelectedFamily(null);
- setFamilyMembers([]);
+ showToast.success(t('profile.leftFamily'));
navigate('/');
- } catch (err) {
- console.error('Error leaving family:', err);
- alert(t('profile.leaveError'));
+ } catch (error) {
+ showErrorToast(error);
} finally {
setLeavingFamily(false);
}
};
- const handleThemeChange = (theme: Theme) => {
- setPreferences({ theme });
- document.documentElement.setAttribute('data-theme', theme);
- };
-
- const handleLocaleChange = (locale: 'ru' | 'en') => {
- setPreferences({ locale });
- i18n.changeLanguage(locale);
- };
-
- const handleStartEditName = () => {
- setNewFamilyName(selectedFamily?.name || '');
- setEditingName(true);
- };
-
- const handleSaveName = async () => {
- if (!selectedFamily || !newFamilyName.trim()) return;
-
+ const handleLogout = async () => {
try {
- setSavingName(true);
- const response = await familyApi.update(selectedFamily.id, { name: newFamilyName.trim() });
- setSelectedFamily(response.data);
- setEditingName(false);
- } catch (err) {
- console.error('Error updating family name:', err);
- alert(t('profile.renameError'));
- } finally {
- setSavingName(false);
+ await authApi.logout();
+ setUser(null);
+ setSelectedFamily(null);
+ navigate('/login');
+ } catch (error) {
+ showErrorToast(error);
}
};
- const handleBack = () => {
- if (user?.family_id) {
- navigate(`/family/${user.family_id}`);
- } else {
- navigate('/');
- }
+ const handleThemeChange = (theme: Theme) => {
+ setPreferences({ ...preferences, theme });
+ showToast.success(t('profile.themeChanged'));
+ };
+
+ const handleLocaleChange = (locale: string) => {
+ i18n.changeLanguage(locale);
+ setPreferences({ ...preferences, locale: locale as 'ru' | 'en' });
+ showToast.success(t('profile.languageChanged'));
};
return (
-
-
+
+
navigate(user?.family_id ? `/family/${user.family_id}` : '/')} />
@@ -155,221 +96,63 @@ export default function Profile() {
-
+
-
+
-
{t('profile.info')}
+
{t('profile.info')}
-
-
{t('profile.username')}
-
{user?.username || '-'}
+
+ {t('profile.username')}
+
+ {user?.username || '-'}
+
-
-
{t('profile.email')}
-
{user?.email || '-'}
+
+ {t('profile.email')}
+
+ {user?.email || '-'}
+
-
+
{selectedFamily && (
-
-
-
-
-
-
{t('profile.family')}
+
+
+
+
-
-
-
-
{t('profile.familyName')}
- {editingName ? (
-
- setNewFamilyName(e.target.value)}
- className="px-3 py-1 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-1 focus:ring-purple-200"
- autoFocus
- />
-
-
-
- ) : (
-
- {selectedFamily.name}
-
-
- )}
-
-
-
{t('profile.members')}
- {membersLoading ? (
-
-
-
- ) : familyMembers.length === 0 ? (
-
- {t('profile.noMembers') || 'Нет участников'}
-
- ) : (
-
- {familyMembers.map((member) => (
-
-
-
- {(member.username || member.email || '?')[0].toUpperCase()}
-
-
- {member.username || member.email || t('profile.unknownUser')}
-
- {member.id === user?.id && (
-
- {t('profile.you')}
-
- )}
-
- {member.is_admin && (
-
- Admin
-
- )}
-
- ))}
-
- )}
-
+
)}
-
-
-
-
-
-
{t('profile.settings')}
-
-
-
-
-
-
-
{t('profile.language')}
-
-
-
-
-
-
-
-
-
-
-
{t('profile.theme')}
-
-
- {THEMES.map((theme) => (
-
- ))}
-
-
-
-
-
- {selectedFamily && (
-
-
-
-
{t('profile.dangerZone')}
-
-
-
{t('profile.leaveDescription')}
-
-
-
- )}
+
+
+