refactor(settings): one card per section

The name field takes its value from the page's own load, not from the user context: the context can still be empty when the form mounts.

src/components/AccountInfoCard.jsx

@@ -0,0 +1,43 @@
+import {useTranslation} from 'react-i18next';
+import {UserRound} from 'lucide-react';
+
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
+
+const formatDate = (value, locale) => {
+    if (!value) return '—';
+    try {
+        return new Date(value).toLocaleString(locale);
+    } catch {
+        return value;
+    }
+};
+
+export default function AccountInfoCard() {
+    const {t, i18n} = useTranslation();
+    const {user: profile} = useCurrentUserContext();
+    const accountRows = [
+        [t('SETTINGS.EMAIL'), profile?.email],
+        [t('SETTINGS.ROLE'), profile?.role],
+        [t('SETTINGS.CREATED_DATE'), formatDate(profile?.createdDate, i18n.language)],
+        [t('SETTINGS.LAST_LOGIN'), formatDate(profile?.lastLogin, i18n.language)],
+    ];
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2"><UserRound className="size-4 text-primary"/>{t('SETTINGS.ACCOUNT')}</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <dl className="divide-y">
+                    {accountRows.map(([label, value]) => (
+                        <div key={label} className="flex flex-col gap-1 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between">
+                            <dt className="text-sm text-muted-foreground">{label}</dt>
+                            <dd className="text-sm font-medium break-all">{value || '—'}</dd>
+                        </div>
+                    ))}
+                </dl>
+            </CardContent>
+        </Card>
+    );
+}