@micha.bigler/ui-core-micha 2.1.13 → 2.1.15

package/dist/components/BulkInviteCsvTab.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState } from 'react';
+import { Box, Button, Typography, Alert, LinearProgress, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { requestInviteWithCode } from '../auth/authApi';
+function parseEmailsFromCsv(text) {
+    if (!text)
+        return [];
+    const lines = text
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean);
+    if (lines.length === 0)
+        return [];
+    const first = lines[0].toLowerCase();
+    const hasHeader = first.includes('email');
+    const dataLines = hasHeader ? lines.slice(1) : lines;
+    const emails = [];
+    dataLines.forEach((line) => {
+        const cols = line.split(/[;,|\t]/).map((part) => part.trim());
+        const email = cols.find((part) => part.includes('@'));
+        if (email)
+            emails.push(email);
+    });
+    return Array.from(new Set(emails.map((e) => e.toLowerCase())));
+}
+export function BulkInviteCsvTab({ inviteFn = (email) => requestInviteWithCode(email, null), onCompleted, }) {
+    const { t } = useTranslation();
+    const [emails, setEmails] = useState([]);
+    const [results, setResults] = useState({});
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState('');
+    const total = emails.length;
+    const done = Object.keys(results).length;
+    const progress = total > 0 ? Math.round((done / total) * 100) : 0;
+    const successCount = useMemo(() => Object.values(results).filter((r) => r.ok).length, [results]);
+    const handleFile = async (event) => {
+        var _a;
+        setError('');
+        setSuccess('');
+        setResults({});
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        try {
+            const text = await file.text();
+            const parsed = parseEmailsFromCsv(text);
+            if (parsed.length === 0) {
+                setError(t('Account.BULK_INVITE_NO_EMAILS', 'No valid email addresses found in CSV.'));
+                return;
+            }
+            setEmails(parsed);
+        }
+        catch (err) {
+            setError(err.message || t('Account.BULK_INVITE_PARSE_FAILED', 'Could not read CSV file.'));
+        }
+    };
+    const handleInviteAll = async () => {
+        if (emails.length === 0)
+            return;
+        setBusy(true);
+        setError('');
+        setSuccess('');
+        setResults({});
+        const nextResults = {};
+        for (const email of emails) {
+            try {
+                const response = await inviteFn(email);
+                nextResults[email] = {
+                    ok: true,
+                    message: (response === null || response === void 0 ? void 0 : response.detail) || t('Auth.INVITE_SENT_SUCCESS', 'Invitation sent.'),
+                };
+            }
+            catch (err) {
+                nextResults[email] = {
+                    ok: false,
+                    message: t((err === null || err === void 0 ? void 0 : err.code) || 'Auth.INVITE_FAILED'),
+                };
+            }
+            setResults(Object.assign({}, nextResults));
+        }
+        const okCount = Object.values(nextResults).filter((r) => r.ok).length;
+        setSuccess(t('Account.BULK_INVITE_DONE', '{{ok}} / {{total}} invites sent.', {
+            ok: okCount,
+            total: emails.length,
+        }));
+        setBusy(false);
+        if (onCompleted)
+            onCompleted(nextResults);
+    };
+    return (_jsxs(Box, { sx: { mt: 1 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Account.BULK_INVITE_TITLE', 'Bulk Invite via CSV') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.BULK_INVITE_HINT', 'Upload a CSV file containing email addresses. Header "email" is supported.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', mb: 2, flexWrap: 'wrap' }, children: [_jsxs(Button, { variant: "outlined", component: "label", disabled: busy, children: [t('Account.BULK_INVITE_UPLOAD', 'Upload CSV'), _jsx("input", { type: "file", accept: ".csv,text/csv", hidden: true, onChange: handleFile })] }), _jsx(Button, { variant: "contained", onClick: handleInviteAll, disabled: busy || emails.length === 0, children: t('Account.BULK_INVITE_SEND', 'Send Invites') }), _jsx(Typography, { variant: "body2", children: t('Account.BULK_INVITE_COUNT', '{{count}} emails loaded', { count: emails.length }) })] }), busy && (_jsx(Box, { sx: { mb: 2 }, children: _jsx(LinearProgress, { variant: "determinate", value: progress }) })), emails.length > 0 && (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Common.STATUS', 'Status') }), _jsx(TableCell, { children: t('Common.DETAILS', 'Details') })] }) }), _jsx(TableBody, { children: emails.map((email) => {
+                                const row = results[email];
+                                return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: email }), _jsx(TableCell, { children: row ? (row.ok ? t('Common.SUCCESS', 'Success') : t('Common.ERROR', 'Error')) : '-' }), _jsx(TableCell, { children: (row === null || row === void 0 ? void 0 : row.message) || '-' })] }, email));
+                            }) })] }) })), done > 0 && (_jsxs(Typography, { variant: "body2", sx: { mt: 2 }, children: [t('Account.BULK_INVITE_PROGRESS', '{{done}} / {{total}} processed', { done, total }), ' - ', t('Account.BULK_INVITE_SUCCESS_COUNT', '{{count}} successful', { count: successCount })] }))] }));
+}

package/dist/components/UserListComponent.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, FormControl, Select, MenuItem, Button, IconButton, Tooltip, CircularProgress, Alert } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
 import { fetchUsersList, deleteUser, updateUserRole, updateUserSupportStatus } from '../auth/authApi';
 const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
-export function UserListComponent({ roles = DEFAULT_ROLES, currentUser }) {
+export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraColumns = [], extraRowActions = [], extraContext = null, refreshTrigger = 0, canEditUser, }) {
     const { t } = useTranslation();
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [rowActionLoading, setRowActionLoading] = useState({});
     const loadUsers = async () => {
         setLoading(true);
         setError(null);
@@ -29,7 +30,7 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser }) {
     useEffect(() => {
         loadUsers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Dependency on apiUrl removed
+    }, [refreshTrigger]); // Dependency on apiUrl removed
     const handleDelete = async (userId) => {
         if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?')))
             return;
@@ -62,7 +63,7 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser }) {
             alert(t(err.code || 'Auth.USER_UPDATE_FAILED'));
         }
     };
-    const canEdit = (targetUser) => {
+    const defaultCanEdit = (targetUser) => {
         if (!currentUser)
             return false;
         if (currentUser.is_superuser)
@@ -80,5 +81,62 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser }) {
         }
         return false;
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Profile.NAME_LABEL', 'Name') }), _jsx(TableCell, { children: t('UserList.ROLE', 'Role') }), _jsx(TableCell, { children: t('UserList.SUPPORTER', 'Support Agent') }), _jsx(TableCell, { children: t('Common.ACTIONS', 'Actions') })] }) }), _jsxs(TableBody, { children: [users.map((u) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: u.email }), _jsx(TableCell, { children: u.first_name || u.last_name ? `${u.first_name} ${u.last_name}` : u.username }), _jsx(TableCell, { children: _jsx(FormControl, { size: "small", fullWidth: true, disabled: !canEdit(u), children: _jsx(Select, { value: u.role || 'none', onChange: (e) => handleChangeRole(u.id, e.target.value), variant: "standard", disableUnderline: true, children: roles.map(r => _jsx(MenuItem, { value: r, children: r }, r)) }) }) }), _jsx(TableCell, { children: _jsx(Button, { size: "small", variant: u.is_support_agent ? 'contained' : 'outlined', color: u.is_support_agent ? 'primary' : 'inherit', onClick: () => handleToggleSupporter(u.id, !u.is_support_agent), disabled: !canEdit(u), sx: { textTransform: 'none' }, children: u.is_support_agent ? t('Common.YES') : t('Common.NO') }) }), _jsx(TableCell, { children: _jsx(Tooltip, { title: t('Common.DELETE'), children: _jsx("span", { children: _jsx(IconButton, { onClick: () => handleDelete(u.id), color: "error", disabled: !canEdit(u), children: _jsx(DeleteIcon, {}) }) }) }) })] }, u.id))), users.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, align: "center", children: t('UserList.NO_USERS', 'No users found.') }) }))] })] }) }))] }));
+    const canEdit = (targetUser) => {
+        if (typeof canEditUser === 'function') {
+            return Boolean(canEditUser({ targetUser, currentUser, extraContext }));
+        }
+        return defaultCanEdit(targetUser);
+    };
+    const listContext = useMemo(() => ({
+        currentUser,
+        extraContext,
+        t,
+        reloadUsers: loadUsers,
+    }), [currentUser, extraContext, t]);
+    const visibleExtraColumns = useMemo(() => extraColumns.filter((column) => typeof column.visible === 'function' ? column.visible(listContext) : true), [extraColumns, listContext]);
+    const visibleRowActions = useMemo(() => extraRowActions.filter((action) => typeof action.visible === 'function' ? action.visible(listContext) : true), [extraRowActions, listContext]);
+    const runRowAction = async (action, user) => {
+        const actionId = `${action.key}:${user.id}`;
+        setRowActionLoading((prev) => (Object.assign(Object.assign({}, prev), { [actionId]: true })));
+        try {
+            await action.onClick({
+                user,
+                canEdit: canEdit(user),
+                currentUser,
+                extraContext,
+                t,
+                reloadUsers: loadUsers,
+            });
+        }
+        catch (err) {
+            // eslint-disable-next-line no-alert
+            alert((err === null || err === void 0 ? void 0 : err.message) || t('Common.OPERATION_FAILED', 'Operation failed.'));
+        }
+        finally {
+            setRowActionLoading((prev) => (Object.assign(Object.assign({}, prev), { [actionId]: false })));
+        }
+    };
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Profile.NAME_LABEL', 'Name') }), _jsx(TableCell, { children: t('UserList.ROLE', 'Role') }), _jsx(TableCell, { children: t('UserList.SUPPORTER', 'Support Agent') }), visibleExtraColumns.map((column) => (_jsx(TableCell, { align: column.align || 'left', children: typeof column.label === 'function' ? column.label(listContext) : column.label }, column.key))), _jsx(TableCell, { children: t('Common.ACTIONS', 'Actions') })] }) }), _jsxs(TableBody, { children: [users.map((u) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: u.email }), _jsx(TableCell, { children: u.first_name || u.last_name ? `${u.first_name} ${u.last_name}` : u.username }), _jsx(TableCell, { children: _jsx(FormControl, { size: "small", fullWidth: true, disabled: !canEdit(u), children: _jsx(Select, { value: u.role || 'none', onChange: (e) => handleChangeRole(u.id, e.target.value), variant: "standard", disableUnderline: true, children: roles.map(r => _jsx(MenuItem, { value: r, children: r }, r)) }) }) }), _jsx(TableCell, { children: _jsx(Button, { size: "small", variant: u.is_support_agent ? 'contained' : 'outlined', color: u.is_support_agent ? 'primary' : 'inherit', onClick: () => handleToggleSupporter(u.id, !u.is_support_agent), disabled: !canEdit(u), sx: { textTransform: 'none' }, children: u.is_support_agent ? t('Common.YES') : t('Common.NO') }) }), visibleExtraColumns.map((column) => (_jsx(TableCell, { align: column.align || 'left', children: column.renderCell({
+                                                user: u,
+                                                canEdit: canEdit(u),
+                                                currentUser,
+                                                extraContext,
+                                                t,
+                                                reloadUsers: loadUsers,
+                                            }) }, `${column.key}-${u.id}`))), _jsxs(TableCell, { children: [visibleRowActions.map((action) => {
+                                                    const actionId = `${action.key}:${u.id}`;
+                                                    const isBusy = Boolean(rowActionLoading[actionId]);
+                                                    const isDisabled = typeof action.disabled === 'function'
+                                                        ? action.disabled({
+                                                            user: u,
+                                                            canEdit: canEdit(u),
+                                                            currentUser,
+                                                            extraContext,
+                                                            t,
+                                                        })
+                                                        : false;
+                                                    return (_jsx(Button, { size: "small", onClick: () => runRowAction(action, u), disabled: isBusy || isDisabled, sx: { mr: 1, mb: 0.5, textTransform: 'none' }, children: typeof action.label === 'function'
+                                                            ? action.label({ user: u, t, currentUser, canEdit: canEdit(u) })
+                                                            : action.label }, `${action.key}-${u.id}`));
+                                                }), _jsx(Tooltip, { title: t('Common.DELETE'), children: _jsx("span", { children: _jsx(IconButton, { onClick: () => handleDelete(u.id), color: "error", disabled: !canEdit(u), children: _jsx(DeleteIcon, {}) }) }) })] })] }, u.id))), users.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5 + visibleExtraColumns.length, align: "center", children: t('UserList.NO_USERS', 'No users found.') }) }))] })] }) }))] }));
 }

package/dist/i18n/authTranslations.js

@@ -1224,4 +1224,58 @@ export const authTranslations = {
         "en": "Invite",
         "sw": "Alika"
     },
+    "Common.DELETE": {
+        "de": "Löschen",
+        "fr": "Supprimer",
+        "en": "Delete",
+        "sw": "Futa"
+    },
+    "Common.CANCEL": {
+        "de": "Abbrechen",
+        "fr": "Annuler",
+        "en": "Cancel",
+        "sw": "Ghairi"
+    },
+    "Common.CONFIRM": {
+        "de": "Bestätigen",
+        "fr": "Confirmer",
+        "en": "Confirm",
+        "sw": "Thibitisha"
+    },
+    "Common.SAVE": {
+        "de": "Speichern",
+        "fr": "Enregistrer",
+        "en": "Save",
+        "sw": "Hifadhi"
+    },
+    "Common.BACK": {
+        "de": "Zurück",
+        "fr": "Retour",
+        "en": "Back",
+        "sw": "Rudi"
+    },
+    "Common.OK": {
+        "de": "OK",
+        "fr": "OK",
+        "en": "OK",
+        "sw": "OK"
+    },
+    "Common.ERROR": {
+        "de": "Fehler",
+        "fr": "Erreur",
+        "en": "Error",
+        "sw": "Hata"
+    },
+    "Common.SUCCESS": {
+        "de": "Erfolgreich",
+        "fr": "Succès",
+        "en": "Success",
+        "sw": "Mafanikio"
+    },
+    "Common.LOADING": {
+        "de": "Wird geladen…",
+        "fr": "Chargement…",
+        "en": "Loading…",
+        "sw": "Inapakia..."
+    }
 };

package/dist/index.js

@@ -19,5 +19,8 @@ export { AccountPage } from './pages/AccountPage';
 // --- 5. Components (Wiederverwendbare UI-Teile) ---
 export { ProfileComponent } from './components/ProfileComponent';
 export { AccessCodeManager } from './components/AccessCodeManager';
+export { UserListComponent } from './components/UserListComponent';
+export { UserInviteComponent } from './components/UserInviteComponent';
+export { BulkInviteCsvTab } from './components/BulkInviteCsvTab';
 // --- 6. Translations ---
 export { authTranslations } from './i18n/authTranslations';

package/dist/layout/PageLayout.js

@@ -3,6 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Container, Box, Typography } from '@mui/material';
 // Layout for content pages with larger width (e.g. Profile, Welcome, Input)
-export const WidePage = ({ title, children }) => (_jsxs(Container, { maxWidth: "md", sx: { mt: 4 }, children: [title && (_jsx(Typography, { variant: "h4", gutterBottom: true, children: title })), children] }));
+export const WidePage = ({ title, children, maxWidth = 'lg' }) => (_jsxs(Container, { maxWidth: maxWidth, sx: { mt: 4 }, children: [title && (_jsx(Typography, { variant: "h4", gutterBottom: true, children: title })), children] }));
 // Layout for forms or narrow pages (e.g. Login, Reset, Invite)
 export const NarrowPage = ({ title, subtitle, children }) => (_jsx(Container, { maxWidth: "md", sx: { mt: 4 }, children: _jsxs(Box, { sx: { maxWidth: 480, mx: 'auto' }, children: [title && (_jsx(Typography, { variant: "h4", gutterBottom: true, children: title })), subtitle && (_jsx(Typography, { paragraph: true, children: subtitle })), children] }) }));

package/dist/pages/AccountPage.js

@@ -19,8 +19,10 @@ import { UserListComponent } from '../components/UserListComponent';
 import { UserInviteComponent } from '../components/UserInviteComponent';
 import { AccessCodeManager } from '../components/AccessCodeManager';
 import { SupportRecoveryRequestsTab } from '../components/SupportRecoveryRequestsTab';
+import { BulkInviteCsvTab } from '../components/BulkInviteCsvTab';
 import { updateUserProfile } from '../auth/authApi'; // Ggf. Pfad anpassen
-export function AccountPage() {
+export function AccountPage({ userListExtraColumns = [], userListExtraRowActions = [], userListExtraContext = null, userListRefreshTrigger = 0, userListCanEditUser = null, showBulkInviteCsvTab = false, bulkInviteCsvProps = {}, extraTabs = [], }) {
+    var _a;
     const { t } = useTranslation();
     const { user, login, loading } = useContext(AuthContext);
     const [searchParams, setSearchParams] = useSearchParams();
@@ -44,6 +46,7 @@ export function AccountPage() {
     const tabs = useMemo(() => {
         if (!user)
             return [];
+        const extensionContext = { user, perms, isSuperUser, t };
         const list = [
             { value: 'profile', label: t('Account.TAB_PROFILE', 'Profile') },
             { value: 'security', label: t('Account.TAB_SECURITY', 'Security') },
@@ -54,6 +57,12 @@ export function AccountPage() {
         }
         if (isSuperUser || perms.can_invite) {
             list.push({ value: 'invite', label: t('Account.TAB_INVITE', 'Invite') });
+            if (showBulkInviteCsvTab) {
+                list.push({
+                    value: 'bulk-invite-csv',
+                    label: t('Account.TAB_BULK_INVITE_CSV', 'Bulk Invite CSV'),
+                });
+            }
         }
         if (isSuperUser || perms.can_manage_access_codes) {
             list.push({ value: 'access', label: t('Account.TAB_ACCESS_CODES', 'Access Codes') });
@@ -61,8 +70,19 @@ export function AccountPage() {
         if (isSuperUser || perms.can_view_support) {
             list.push({ value: 'support', label: t('Account.TAB_SUPPORT', 'Support') });
         }
+        extraTabs.forEach((tab) => {
+            if (!(tab === null || tab === void 0 ? void 0 : tab.value) || !(tab === null || tab === void 0 ? void 0 : tab.label))
+                return;
+            const isVisible = typeof tab.visible === 'function' ? tab.visible(extensionContext) : true;
+            if (isVisible && !list.some((entry) => entry.value === tab.value)) {
+                list.push({
+                    value: tab.value,
+                    label: typeof tab.label === 'function' ? tab.label(extensionContext) : tab.label,
+                });
+            }
+        });
         return list;
-    }, [user, perms, t, isSuperUser]);
+    }, [user, perms, t, isSuperUser, showBulkInviteCsvTab, extraTabs]);
     // 4. Loading & Auth Checks
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 10 }, children: _jsx(CircularProgress, {}) }));
@@ -74,5 +94,9 @@ export function AccountPage() {
     const activeTabExists = tabs.some(t => t.value === currentTab);
     // Falls der Tab nicht erlaubt ist (z.B. manuell in URL eingegeben), Fallback auf 'profile'
     const safeTab = activeTabExists ? currentTab : 'profile';
-    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserInviteComponent, {}) })), safeTab === 'access' && (_jsxs(Box, { sx: { mt: 2 }, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) }))] }));
+    const builtInTabValues = new Set(['profile', 'security', 'users', 'invite', 'bulk-invite-csv', 'access', 'support']);
+    const activeExtraTab = builtInTabValues.has(safeTab)
+        ? null
+        : extraTabs.find((tab) => tab.value === safeTab);
+    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserInviteComponent, {}) })), safeTab === 'bulk-invite-csv' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), safeTab === 'access' && (_jsxs(Box, { sx: { mt: 2 }, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.1.13",
+  "version": "2.1.15",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/components/BulkInviteCsvTab.jsx

@@ -0,0 +1,190 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Box,
+  Button,
+  Typography,
+  Alert,
+  LinearProgress,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { requestInviteWithCode } from '../auth/authApi';
+
+function parseEmailsFromCsv(text) {
+  if (!text) return [];
+
+  const lines = text
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  if (lines.length === 0) return [];
+
+  const first = lines[0].toLowerCase();
+  const hasHeader = first.includes('email');
+  const dataLines = hasHeader ? lines.slice(1) : lines;
+  const emails = [];
+
+  dataLines.forEach((line) => {
+    const cols = line.split(/[;,|\t]/).map((part) => part.trim());
+    const email = cols.find((part) => part.includes('@'));
+    if (email) emails.push(email);
+  });
+
+  return Array.from(new Set(emails.map((e) => e.toLowerCase())));
+}
+
+export function BulkInviteCsvTab({
+  inviteFn = (email) => requestInviteWithCode(email, null),
+  onCompleted,
+}) {
+  const { t } = useTranslation();
+  const [emails, setEmails] = useState([]);
+  const [results, setResults] = useState({});
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  const total = emails.length;
+  const done = Object.keys(results).length;
+  const progress = total > 0 ? Math.round((done / total) * 100) : 0;
+
+  const successCount = useMemo(
+    () => Object.values(results).filter((r) => r.ok).length,
+    [results],
+  );
+
+  const handleFile = async (event) => {
+    setError('');
+    setSuccess('');
+    setResults({});
+
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const text = await file.text();
+      const parsed = parseEmailsFromCsv(text);
+      if (parsed.length === 0) {
+        setError(t('Account.BULK_INVITE_NO_EMAILS', 'No valid email addresses found in CSV.'));
+        return;
+      }
+      setEmails(parsed);
+    } catch (err) {
+      setError(err.message || t('Account.BULK_INVITE_PARSE_FAILED', 'Could not read CSV file.'));
+    }
+  };
+
+  const handleInviteAll = async () => {
+    if (emails.length === 0) return;
+    setBusy(true);
+    setError('');
+    setSuccess('');
+    setResults({});
+
+    const nextResults = {};
+    for (const email of emails) {
+      try {
+        const response = await inviteFn(email);
+        nextResults[email] = {
+          ok: true,
+          message: response?.detail || t('Auth.INVITE_SENT_SUCCESS', 'Invitation sent.'),
+        };
+      } catch (err) {
+        nextResults[email] = {
+          ok: false,
+          message: t(err?.code || 'Auth.INVITE_FAILED'),
+        };
+      }
+      setResults({ ...nextResults });
+    }
+
+    const okCount = Object.values(nextResults).filter((r) => r.ok).length;
+    setSuccess(
+      t('Account.BULK_INVITE_DONE', '{{ok}} / {{total}} invites sent.', {
+        ok: okCount,
+        total: emails.length,
+      }),
+    );
+    setBusy(false);
+    if (onCompleted) onCompleted(nextResults);
+  };
+
+  return (
+    <Box sx={{ mt: 1 }}>
+      <Typography variant="h6" gutterBottom>
+        {t('Account.BULK_INVITE_TITLE', 'Bulk Invite via CSV')}
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+        {t(
+          'Account.BULK_INVITE_HINT',
+          'Upload a CSV file containing email addresses. Header "email" is supported.',
+        )}
+      </Typography>
+
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+
+      <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 2, flexWrap: 'wrap' }}>
+        <Button variant="outlined" component="label" disabled={busy}>
+          {t('Account.BULK_INVITE_UPLOAD', 'Upload CSV')}
+          <input type="file" accept=".csv,text/csv" hidden onChange={handleFile} />
+        </Button>
+        <Button variant="contained" onClick={handleInviteAll} disabled={busy || emails.length === 0}>
+          {t('Account.BULK_INVITE_SEND', 'Send Invites')}
+        </Button>
+        <Typography variant="body2">
+          {t('Account.BULK_INVITE_COUNT', '{{count}} emails loaded', { count: emails.length })}
+        </Typography>
+      </Box>
+
+      {busy && (
+        <Box sx={{ mb: 2 }}>
+          <LinearProgress variant="determinate" value={progress} />
+        </Box>
+      )}
+
+      {emails.length > 0 && (
+        <TableContainer component={Paper}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>{t('Auth.EMAIL_LABEL', 'Email')}</TableCell>
+                <TableCell>{t('Common.STATUS', 'Status')}</TableCell>
+                <TableCell>{t('Common.DETAILS', 'Details')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {emails.map((email) => {
+                const row = results[email];
+                return (
+                  <TableRow key={email}>
+                    <TableCell>{email}</TableCell>
+                    <TableCell>
+                      {row ? (row.ok ? t('Common.SUCCESS', 'Success') : t('Common.ERROR', 'Error')) : '-'}
+                    </TableCell>
+                    <TableCell>{row?.message || '-'}</TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+
+      {done > 0 && (
+        <Typography variant="body2" sx={{ mt: 2 }}>
+          {t('Account.BULK_INVITE_PROGRESS', '{{done}} / {{total}} processed', { done, total })}
+          {' - '}
+          {t('Account.BULK_INVITE_SUCCESS_COUNT', '{{count}} successful', { count: successCount })}
+        </Typography>
+      )}
+    </Box>
+  );
+}

package/src/components/UserListComponent.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import {
   Box, Typography, Table, TableBody, TableCell, TableContainer,
   TableHead, TableRow, Paper, FormControl, Select,
@@ -11,13 +11,19 @@ import { fetchUsersList, deleteUser, updateUserRole, updateUserSupportStatus } f
 const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
 
 export function UserListComponent({ 
-    roles = DEFAULT_ROLES, 
-    currentUser 
+    roles = DEFAULT_ROLES,
+    currentUser,
+    extraColumns = [],
+    extraRowActions = [],
+    extraContext = null,
+    refreshTrigger = 0,
+    canEditUser,
 }) {
   const { t } = useTranslation();
   const [users, setUsers] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [rowActionLoading, setRowActionLoading] = useState({});
 
   const loadUsers = async () => {
     setLoading(true);
@@ -37,7 +43,7 @@ export function UserListComponent({
   useEffect(() => {
     loadUsers();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Dependency on apiUrl removed
+  }, [refreshTrigger]); // Dependency on apiUrl removed
 
   const handleDelete = async (userId) => {
     if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?'))) return;
@@ -70,7 +76,7 @@ export function UserListComponent({
     }
   };
 
-  const canEdit = (targetUser) => {
+  const defaultCanEdit = (targetUser) => {
       if (!currentUser) return false;
       if (currentUser.is_superuser) return true;
       
@@ -86,6 +92,55 @@ export function UserListComponent({
       }
       return false;
   };
+  const canEdit = (targetUser) => {
+    if (typeof canEditUser === 'function') {
+      return Boolean(canEditUser({ targetUser, currentUser, extraContext }));
+    }
+    return defaultCanEdit(targetUser);
+  };
+
+  const listContext = useMemo(() => ({
+    currentUser,
+    extraContext,
+    t,
+    reloadUsers: loadUsers,
+  }), [currentUser, extraContext, t]);
+
+  const visibleExtraColumns = useMemo(
+    () =>
+      extraColumns.filter((column) =>
+        typeof column.visible === 'function' ? column.visible(listContext) : true,
+      ),
+    [extraColumns, listContext],
+  );
+
+  const visibleRowActions = useMemo(
+    () =>
+      extraRowActions.filter((action) =>
+        typeof action.visible === 'function' ? action.visible(listContext) : true,
+      ),
+    [extraRowActions, listContext],
+  );
+
+  const runRowAction = async (action, user) => {
+    const actionId = `${action.key}:${user.id}`;
+    setRowActionLoading((prev) => ({ ...prev, [actionId]: true }));
+    try {
+      await action.onClick({
+        user,
+        canEdit: canEdit(user),
+        currentUser,
+        extraContext,
+        t,
+        reloadUsers: loadUsers,
+      });
+    } catch (err) {
+      // eslint-disable-next-line no-alert
+      alert(err?.message || t('Common.OPERATION_FAILED', 'Operation failed.'));
+    } finally {
+      setRowActionLoading((prev) => ({ ...prev, [actionId]: false }));
+    }
+  };
 
   return (
     <Box>
@@ -106,6 +161,11 @@ export function UserListComponent({
                 <TableCell>{t('Profile.NAME_LABEL', 'Name')}</TableCell>
                 <TableCell>{t('UserList.ROLE', 'Role')}</TableCell>
                 <TableCell>{t('UserList.SUPPORTER', 'Support Agent')}</TableCell>
+                {visibleExtraColumns.map((column) => (
+                  <TableCell key={column.key} align={column.align || 'left'}>
+                    {typeof column.label === 'function' ? column.label(listContext) : column.label}
+                  </TableCell>
+                ))}
                 <TableCell>{t('Common.ACTIONS', 'Actions')}</TableCell>
               </TableRow>
             </TableHead>
@@ -140,7 +200,46 @@ export function UserListComponent({
                           {u.is_support_agent ? t('Common.YES') : t('Common.NO')}
                       </Button>
                   </TableCell>
+                  {visibleExtraColumns.map((column) => (
+                    <TableCell key={`${column.key}-${u.id}`} align={column.align || 'left'}>
+                      {column.renderCell({
+                        user: u,
+                        canEdit: canEdit(u),
+                        currentUser,
+                        extraContext,
+                        t,
+                        reloadUsers: loadUsers,
+                      })}
+                    </TableCell>
+                  ))}
                   <TableCell>
+                      {visibleRowActions.map((action) => {
+                        const actionId = `${action.key}:${u.id}`;
+                        const isBusy = Boolean(rowActionLoading[actionId]);
+                        const isDisabled = typeof action.disabled === 'function'
+                          ? action.disabled({
+                              user: u,
+                              canEdit: canEdit(u),
+                              currentUser,
+                              extraContext,
+                              t,
+                            })
+                          : false;
+
+                        return (
+                          <Button
+                            key={`${action.key}-${u.id}`}
+                            size="small"
+                            onClick={() => runRowAction(action, u)}
+                            disabled={isBusy || isDisabled}
+                            sx={{ mr: 1, mb: 0.5, textTransform: 'none' }}
+                          >
+                            {typeof action.label === 'function'
+                              ? action.label({ user: u, t, currentUser, canEdit: canEdit(u) })
+                              : action.label}
+                          </Button>
+                        );
+                      })}
                       <Tooltip title={t('Common.DELETE')}>
                         <span>
                             <IconButton onClick={() => handleDelete(u.id)} color="error" disabled={!canEdit(u)}>
@@ -153,7 +252,7 @@ export function UserListComponent({
               ))}
               {users.length === 0 && (
                   <TableRow>
-                      <TableCell colSpan={5} align="center">
+                      <TableCell colSpan={5 + visibleExtraColumns.length} align="center">
                           {t('UserList.NO_USERS', 'No users found.')}
                       </TableCell>
                   </TableRow>
@@ -164,4 +263,4 @@ export function UserListComponent({
       )}
     </Box>
   );
-}
+}

package/src/i18n/authTranslations.ts

@@ -1272,4 +1272,58 @@ export const authTranslations = {
     "en": "Invite",
     "sw": "Alika"
   },
+  "Common.DELETE": {
+    "de": "Löschen",
+    "fr": "Supprimer",
+    "en": "Delete",
+    "sw": "Futa"
+  },
+  "Common.CANCEL": {
+    "de": "Abbrechen",
+    "fr": "Annuler",
+    "en": "Cancel",
+    "sw": "Ghairi"
+  },
+  "Common.CONFIRM": {
+    "de": "Bestätigen",
+    "fr": "Confirmer",
+    "en": "Confirm",
+    "sw": "Thibitisha"
+  },
+  "Common.SAVE": {
+    "de": "Speichern",
+    "fr": "Enregistrer",
+    "en": "Save",
+    "sw": "Hifadhi"
+  },
+  "Common.BACK": {
+    "de": "Zurück",
+    "fr": "Retour",
+    "en": "Back",
+    "sw": "Rudi"
+  },
+  "Common.OK": {
+    "de": "OK",
+    "fr": "OK",
+    "en": "OK",
+    "sw": "OK"
+  },
+  "Common.ERROR": {
+    "de": "Fehler",
+    "fr": "Erreur",
+    "en": "Error",
+    "sw": "Hata"
+  },
+  "Common.SUCCESS": {
+    "de": "Erfolgreich",
+    "fr": "Succès",
+    "en": "Success",
+    "sw": "Mafanikio"
+  },
+  "Common.LOADING": {
+    "de": "Wird geladen…",
+    "fr": "Chargement…",
+    "en": "Loading…",
+    "sw": "Inapakia..."
+  }
 };

package/src/index.js

@@ -25,6 +25,9 @@ export { AccountPage } from './pages/AccountPage';
 // --- 5. Components (Wiederverwendbare UI-Teile) ---
 export { ProfileComponent } from './components/ProfileComponent';
 export { AccessCodeManager } from './components/AccessCodeManager';
+export { UserListComponent } from './components/UserListComponent';
+export { UserInviteComponent } from './components/UserInviteComponent';
+export { BulkInviteCsvTab } from './components/BulkInviteCsvTab';
 
 // --- 6. Translations ---
-export { authTranslations } from './i18n/authTranslations';
+export { authTranslations } from './i18n/authTranslations';

package/src/layout/PageLayout.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { Container, Box, Typography } from '@mui/material';
 
 // Layout for content pages with larger width (e.g. Profile, Welcome, Input)
-export const WidePage = ({ title, children }) => (
-  <Container maxWidth="md" sx={{ mt: 4 }}>
+export const WidePage = ({ title, children, maxWidth = 'lg' }) => (
+  <Container maxWidth={maxWidth} sx={{ mt: 4 }}>
     {title && (
       <Typography variant="h4" gutterBottom>
         {title}

package/src/pages/AccountPage.jsx

@@ -28,9 +28,19 @@ import { UserListComponent } from '../components/UserListComponent';
 import { UserInviteComponent } from '../components/UserInviteComponent';
 import { AccessCodeManager } from '../components/AccessCodeManager';
 import { SupportRecoveryRequestsTab } from '../components/SupportRecoveryRequestsTab';
+import { BulkInviteCsvTab } from '../components/BulkInviteCsvTab';
 import { updateUserProfile } from '../auth/authApi'; // Ggf. Pfad anpassen
 
-export function AccountPage() {
+export function AccountPage({
+  userListExtraColumns = [],
+  userListExtraRowActions = [],
+  userListExtraContext = null,
+  userListRefreshTrigger = 0,
+  userListCanEditUser = null,
+  showBulkInviteCsvTab = false,
+  bulkInviteCsvProps = {},
+  extraTabs = [],
+}) {
   const { t } = useTranslation();
   const { user, login, loading } = useContext(AuthContext);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -60,6 +70,7 @@ export function AccountPage() {
   const tabs = useMemo(() => {
     if (!user) return [];
 
+    const extensionContext = { user, perms, isSuperUser, t };
     const list = [
       { value: 'profile', label: t('Account.TAB_PROFILE', 'Profile') },
       { value: 'security', label: t('Account.TAB_SECURITY', 'Security') },
@@ -73,6 +84,12 @@ export function AccountPage() {
     
     if (isSuperUser || perms.can_invite) {
       list.push({ value: 'invite', label: t('Account.TAB_INVITE', 'Invite') });
+      if (showBulkInviteCsvTab) {
+        list.push({
+          value: 'bulk-invite-csv',
+          label: t('Account.TAB_BULK_INVITE_CSV', 'Bulk Invite CSV'),
+        });
+      }
     }
     
     if (isSuperUser || perms.can_manage_access_codes) {
@@ -83,8 +100,19 @@ export function AccountPage() {
       list.push({ value: 'support', label: t('Account.TAB_SUPPORT', 'Support') });
     }
 
+    extraTabs.forEach((tab) => {
+      if (!tab?.value || !tab?.label) return;
+      const isVisible = typeof tab.visible === 'function' ? tab.visible(extensionContext) : true;
+      if (isVisible && !list.some((entry) => entry.value === tab.value)) {
+        list.push({
+          value: tab.value,
+          label: typeof tab.label === 'function' ? tab.label(extensionContext) : tab.label,
+        });
+      }
+    });
+
     return list;
-  }, [user, perms, t, isSuperUser]);
+  }, [user, perms, t, isSuperUser, showBulkInviteCsvTab, extraTabs]);
 
   // 4. Loading & Auth Checks
   if (loading) {
@@ -109,6 +137,10 @@ export function AccountPage() {
   const activeTabExists = tabs.some(t => t.value === currentTab);
   // Falls der Tab nicht erlaubt ist (z.B. manuell in URL eingegeben), Fallback auf 'profile'
   const safeTab = activeTabExists ? currentTab : 'profile';
+  const builtInTabValues = new Set(['profile', 'security', 'users', 'invite', 'bulk-invite-csv', 'access', 'support']);
+  const activeExtraTab = builtInTabValues.has(safeTab)
+    ? null
+    : extraTabs.find((tab) => tab.value === safeTab);
 
   return (
     <WidePage title={t('Account.TITLE', 'Account & Administration')}>
@@ -155,6 +187,11 @@ export function AccountPage() {
           <UserListComponent
             roles={activeRoles} 
             currentUser={user}
+            extraColumns={userListExtraColumns}
+            extraRowActions={userListExtraRowActions}
+            extraContext={userListExtraContext}
+            refreshTrigger={userListRefreshTrigger}
+            canEditUser={userListCanEditUser}
           />
         </Box>
       )}
@@ -165,6 +202,12 @@ export function AccountPage() {
         </Box>
       )}
 
+      {safeTab === 'bulk-invite-csv' && (
+        <Box sx={{ mt: 2 }}>
+          <BulkInviteCsvTab {...bulkInviteCsvProps} />
+        </Box>
+      )}
+
       {safeTab === 'access' && (
         <Box sx={{ mt: 2 }}>
           <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
@@ -179,6 +222,12 @@ export function AccountPage() {
           <SupportRecoveryRequestsTab />
         </Box>
       )}
+
+      {activeExtraTab && (
+        <Box sx={{ mt: 2 }}>
+          {activeExtraTab.render?.({ user, perms, isSuperUser, t })}
+        </Box>
+      )}
     </WidePage>
   );
-}
+}