+
{t('search.title')}
+
+
+
+
+
+ {query && (
+
+ {t('search.resultsFor', { query })}:
+
+ )}
+
+ {!query ? (
+
+ ) : isLoading ? (
+
+ {[1, 2, 3].map((i) => (
+
+ ))}
+
+ ) : filteredResults.length === 0 ? (
+
+ ) : (
+
+ {filteredResults.map((result) => (
+
+
+
+ ))}
+
+ )}
+
-
{t('settings.title')}
-
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/frontend/src/pages/SettingsProfile.tsx b/frontend/src/pages/SettingsProfile.tsx
new file mode 100644
index 0000000..906b0e3
--- /dev/null
+++ b/frontend/src/pages/SettingsProfile.tsx
@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '@/store/authStore';
+import { useUpdateUser } from '@/api/hooks';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { Avatar } from '@/components/ui/Avatar';
+import { useToast } from '@/components/ui/Toast';
+
+export function SettingsProfilePage() {
+ const { t } = useTranslation();
+ const toast = useToast();
+ const { user } = useAuthStore();
+ const updateUserMutation = useUpdateUser();
+
+ const [firstName, setFirstName] = useState(user?.first_name || '');
+ const [lastName, setLastName] = useState(user?.last_name || '');
+ const [email, setEmail] = useState(user?.email || '');
+ const [avatarUrl, setAvatarUrl] = useState(user?.avatar_url || '');
+ const [currentPassword, setCurrentPassword] = useState('');
+ const [newPassword, setNewPassword] = useState('');
+ const [confirmPassword, setConfirmPassword] = useState('');
+ const [profileDirty, setProfileDirty] = useState(false);
+ const [passwordDirty, setPasswordDirty] = useState(false);
+
+ const handleProfileSave = async () => {
+ if (!user) return;
+ try {
+ await updateUserMutation.mutateAsync({
+ id: user.id,
+ data: { first_name: firstName, last_name: lastName, email, avatar_url: avatarUrl || null },
+ });
+ toast.success(t('settings.profileSaved'));
+ setProfileDirty(false);
+ } catch (err: any) {
+ toast.error(err.message || t('common.error'));
+ }
+ };
+
+ const handlePasswordChange = async () => {
+ if (!user) return;
+ if (newPassword !== confirmPassword) {
+ toast.error(t('validation.passwordMismatch'));
+ return;
+ }
+ if (newPassword.length < 8) {
+ toast.error(t('auth.passwordTooShort'));
+ return;
+ }
+ try {
+ await updateUserMutation.mutateAsync({
+ id: user.id,
+ data: { current_password: currentPassword, new_password: newPassword },
+ });
+ toast.success(t('settings.passwordChanged'));
+ setCurrentPassword('');
+ setNewPassword('');
+ setConfirmPassword('');
+ setPasswordDirty(false);
+ } catch (err: any) {
+ toast.error(err.message || t('common.error'));
+ }
+ };
+
+ const handleAvatarUpload = (e: React.ChangeEvent
) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ setAvatarUrl(event.target?.result as string);
+ setProfileDirty(true);
+ };
+ reader.readAsDataURL(file);
+ };
+
+ return (
+
+
{t('settings.profile')}
+
+
+
+
+
{t('settings.roles')}
+
+
+
+ {roles.length === 0 ? (
+
setCreateOpen(true)}>{t('settings.createRole')}}
+ />
+ ) : (
+
+ {roles.map((role) => (
+
+
+
{role.name}
+
+
+
+ {role.permissions.length === 0 ? (
+ —
+ ) : (
+ role.permissions.map((perm) => {
+ const label = ALL_PERMISSIONS.find((p) => p.key === perm)?.label || perm;
+ return {label};
+ })
+ )}
+
+
+ ))}
+
+
setNewRoleName(e.target.value)}
+ placeholder="z.B. Vertrieb"
+ data-testid="new-role-name"
+ />
+
+
+
+ {ALL_PERMISSIONS.map((perm) => (
+
+ ))}
+
+
+
+
+
+
+
+
setEditingRole({ ...editingRole, name: e.target.value })}
+ />
+
+
+
+ {ALL_PERMISSIONS.map((perm) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
{t('settings.users')}
+
+
+
+ {users.length === 0 ? (
+
setInviteOpen(true)}>{t('settings.inviteUser')}}
+ />
+ ) : (
+
+ {users.map((user: any) => (
+
+
+
+
+
+
+ {user.first_name} {user.last_name}
+
+
{user.email}
+
+
+ {user.is_active === false ? t('common.inactive') : t('common.active')}
+
+
+
+
+
+ ))}
+
+
setInviteEmail(e.target.value)}
+ placeholder="neu.mitarbeiter@firma.de"
+ data-testid="invite-email"
+ />
+