@micha.bigler/ui-core-micha 2.1.16 → 2.1.17

package/src/components/UserListComponent.jsx

@@ -2,7 +2,8 @@ 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
+  MenuItem, Button, Tooltip, CircularProgress, Alert,
+  TableSortLabel, TextField
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +25,11 @@ export function UserListComponent({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [rowActionLoading, setRowActionLoading] = useState({});
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortConfig, setSortConfig] = useState({ key: 'id', direction: 'asc' });
+  const cellSx = { verticalAlign: 'middle' };
+  const controlSx = { minWidth: 140 };
+  const actionButtonSx = { textTransform: 'none', minWidth: 90 };
 
   const loadUsers = async () => {
     setLoading(true);
@@ -32,7 +38,14 @@ export function UserListComponent({
       // FIX: Removed apiUrl parameter. 
       // fetchUsersList uses USERS_BASE from authConfig internally.
       const data = await fetchUsersList();
-      setUsers(data);
+      const list = Array.isArray(data) ? data : (Array.isArray(data?.results) ? data.results : []);
+      // Keep row identity stable even if backend returns unordered results.
+      list.sort((a, b) => {
+        const aId = Number(a?.id ?? 0);
+        const bId = Number(b?.id ?? 0);
+        return aId - bId;
+      });
+      setUsers(list);
     } catch (err) {
       setError(err.code || 'Auth.USER_LIST_FAILED');
     } finally {
@@ -60,7 +73,7 @@ export function UserListComponent({
     try {
       // FIX: Removed apiUrl parameter.
       await updateUserRole(userId, newRole);
-      loadUsers(); 
+      await loadUsers();
     } catch (err) {
       alert(t(err.code || 'Auth.USER_ROLE_UPDATE_FAILED'));
     }
@@ -70,7 +83,7 @@ export function UserListComponent({
     try {
       // FIX: Removed apiUrl parameter.
       await updateUserSupportStatus(userId, newValue);
-      loadUsers();
+      await loadUsers();
     } catch (err) {
       alert(t(err.code || 'Auth.USER_UPDATE_FAILED'));
     }
@@ -122,6 +135,141 @@ export function UserListComponent({
     [extraRowActions, listContext],
   );
 
+  const getUserDisplayName = (user) => {
+    if (user?.first_name || user?.last_name) {
+      return `${user.first_name || ''} ${user.last_name || ''}`.trim();
+    }
+    return user?.username || '';
+  };
+
+  const getExtraColumnSortValue = (column, user) => {
+    const valueContext = { user, currentUser, extraContext, t };
+
+    if (typeof column.getSortValue === 'function') {
+      return column.getSortValue(valueContext);
+    }
+
+    if (typeof column.sortValue === 'function') {
+      return column.sortValue(valueContext);
+    }
+
+    if (typeof column.getSearchValue === 'function') {
+      return column.getSearchValue(valueContext);
+    }
+
+    if (user?.[column.key] !== undefined) return user[column.key];
+    if (user?.profile?.[column.key] !== undefined) return user.profile[column.key];
+    return '';
+  };
+
+  const getExtraColumnSearchValue = (column, user) => {
+    const valueContext = { user, currentUser, extraContext, t };
+
+    if (typeof column.getSearchValue === 'function') {
+      return column.getSearchValue(valueContext);
+    }
+
+    return getExtraColumnSortValue(column, user);
+  };
+
+  const normalizeSortValue = (value) => {
+    if (value === null || value === undefined) return '';
+    if (typeof value === 'boolean') return value ? 1 : 0;
+    if (typeof value === 'number') return value;
+    if (value instanceof Date) return value.getTime();
+    return String(value).toLocaleLowerCase();
+  };
+
+  const compareSortValues = (a, b) => {
+    const av = normalizeSortValue(a);
+    const bv = normalizeSortValue(b);
+
+    if (typeof av === 'number' && typeof bv === 'number') {
+      return av - bv;
+    }
+
+    return String(av).localeCompare(String(bv), undefined, {
+      numeric: true,
+      sensitivity: 'base',
+    });
+  };
+
+  const getSortValueByKey = (user, sortKey) => {
+    if (sortKey === 'id') return Number(user?.id ?? 0);
+    if (sortKey === 'email') return user?.email || '';
+    if (sortKey === 'name') return getUserDisplayName(user);
+    if (sortKey === 'role') return user?.role || '';
+    if (sortKey === 'is_support_agent') return Boolean(user?.is_support_agent);
+
+    if (sortKey.startsWith('extra:')) {
+      const extraKey = sortKey.slice('extra:'.length);
+      const column = visibleExtraColumns.find((col) => String(col.key) === extraKey);
+      if (!column) return '';
+      return getExtraColumnSortValue(column, user);
+    }
+
+    return user?.[sortKey] ?? '';
+  };
+
+  const toSearchText = (value) => {
+    if (value === null || value === undefined) return '';
+    if (Array.isArray(value)) return value.map((item) => toSearchText(item)).join(' ');
+    if (typeof value === 'object') return Object.values(value).map((item) => toSearchText(item)).join(' ');
+    return String(value).toLocaleLowerCase();
+  };
+
+  const getSearchBucketForUser = (user) => {
+    const baseValues = [
+      user?.id,
+      user?.email,
+      user?.username,
+      user?.first_name,
+      user?.last_name,
+      getUserDisplayName(user),
+      user?.role,
+      user?.language,
+      user?.is_support_agent ? t('Common.YES', 'Yes') : t('Common.NO', 'No'),
+    ];
+
+    const extraValues = visibleExtraColumns.map((column) => getExtraColumnSearchValue(column, user));
+
+    return [...baseValues, ...extraValues].map((value) => toSearchText(value)).filter(Boolean);
+  };
+
+  const normalizedSearch = searchQuery.trim().toLocaleLowerCase();
+
+  const filteredAndSortedUsers = useMemo(() => {
+    const filtered = users.filter((user) => {
+      if (!normalizedSearch) return true;
+      const bucket = getSearchBucketForUser(user);
+      return bucket.some((entry) => entry.includes(normalizedSearch));
+    });
+
+    const sorted = [...filtered].sort((a, b) => {
+      const aValue = getSortValueByKey(a, sortConfig.key);
+      const bValue = getSortValueByKey(b, sortConfig.key);
+      const cmp = compareSortValues(aValue, bValue);
+      if (cmp !== 0) return sortConfig.direction === 'asc' ? cmp : -cmp;
+
+      // Stable fallback
+      return Number(a?.id ?? 0) - Number(b?.id ?? 0);
+    });
+
+    return sorted;
+  }, [users, normalizedSearch, sortConfig, visibleExtraColumns, currentUser, extraContext, t]);
+
+  const handleSort = (columnKey) => {
+    setSortConfig((prev) => {
+      if (prev.key === columnKey) {
+        return {
+          key: columnKey,
+          direction: prev.direction === 'asc' ? 'desc' : 'asc',
+        };
+      }
+      return { key: columnKey, direction: 'asc' };
+    });
+  };
+
   const runRowAction = async (action, user) => {
     const actionId = `${action.key}:${user.id}`;
     setRowActionLoading((prev) => ({ ...prev, [actionId]: true }));
@@ -145,6 +293,17 @@ export function UserListComponent({
   return (
     <Box>
       <Typography variant="h6" gutterBottom>{t('UserList.TITLE', 'All Users')}</Typography>
+
+      <Box sx={{ mb: 2, maxWidth: 420 }}>
+        <TextField
+          fullWidth
+          size="small"
+          label={t('Common.SEARCH', 'Search')}
+          placeholder={t('UserList.SEARCH_PLACEHOLDER', 'Search users...')}
+          value={searchQuery}
+          onChange={(event) => setSearchQuery(event.target.value)}
+        />
+      </Box>
       
       {error && <Alert severity="error" sx={{ mb: 2 }}>{t(error)}</Alert>}
 
@@ -157,51 +316,93 @@ export function UserListComponent({
           <Table size="small">
             <TableHead>
               <TableRow>
-                <TableCell>{t('Auth.EMAIL_LABEL', 'Email')}</TableCell>
-                <TableCell>{t('Profile.NAME_LABEL', 'Name')}</TableCell>
-                <TableCell>{t('UserList.ROLE', 'Role')}</TableCell>
-                <TableCell>{t('UserList.SUPPORTER', 'Support Agent')}</TableCell>
+                <TableCell sx={cellSx} sortDirection={sortConfig.key === 'email' ? sortConfig.direction : false}>
+                  <TableSortLabel
+                    active={sortConfig.key === 'email'}
+                    direction={sortConfig.key === 'email' ? sortConfig.direction : 'asc'}
+                    onClick={() => handleSort('email')}
+                  >
+                    {t('Auth.EMAIL_LABEL', 'Email')}
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell sx={cellSx} sortDirection={sortConfig.key === 'name' ? sortConfig.direction : false}>
+                  <TableSortLabel
+                    active={sortConfig.key === 'name'}
+                    direction={sortConfig.key === 'name' ? sortConfig.direction : 'asc'}
+                    onClick={() => handleSort('name')}
+                  >
+                    {t('Profile.NAME_LABEL', 'Name')}
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell sx={cellSx} sortDirection={sortConfig.key === 'role' ? sortConfig.direction : false}>
+                  <TableSortLabel
+                    active={sortConfig.key === 'role'}
+                    direction={sortConfig.key === 'role' ? sortConfig.direction : 'asc'}
+                    onClick={() => handleSort('role')}
+                  >
+                    {t('UserList.ROLE', 'Role')}
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell sx={cellSx} sortDirection={sortConfig.key === 'is_support_agent' ? sortConfig.direction : false}>
+                  <TableSortLabel
+                    active={sortConfig.key === 'is_support_agent'}
+                    direction={sortConfig.key === 'is_support_agent' ? sortConfig.direction : 'asc'}
+                    onClick={() => handleSort('is_support_agent')}
+                  >
+                    {t('UserList.SUPPORTER', 'Support Agent')}
+                  </TableSortLabel>
+                </TableCell>
                 {visibleExtraColumns.map((column) => (
-                  <TableCell key={column.key} align={column.align || 'left'}>
-                    {typeof column.label === 'function' ? column.label(listContext) : column.label}
+                  <TableCell
+                    key={column.key}
+                    sx={cellSx}
+                    align={column.align || 'left'}
+                    sortDirection={sortConfig.key === `extra:${column.key}` ? sortConfig.direction : false}
+                  >
+                    <TableSortLabel
+                      active={sortConfig.key === `extra:${column.key}`}
+                      direction={sortConfig.key === `extra:${column.key}` ? sortConfig.direction : 'asc'}
+                      onClick={() => handleSort(`extra:${column.key}`)}
+                    >
+                      {typeof column.label === 'function' ? column.label(listContext) : column.label}
+                    </TableSortLabel>
                   </TableCell>
                 ))}
-                <TableCell>{t('Common.ACTIONS', 'Actions')}</TableCell>
+                <TableCell sx={cellSx}>{t('Common.ACTIONS', 'Actions')}</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
-              {users.map((u) => (
+              {filteredAndSortedUsers.map((u) => (
                 <TableRow key={u.id}>
-                  <TableCell>{u.email}</TableCell>
-                  <TableCell>
-                      {u.first_name || u.last_name ? `${u.first_name} ${u.last_name}` : u.username}
+                  <TableCell sx={cellSx}>{u.email}</TableCell>
+                  <TableCell sx={cellSx}>
+                      {getUserDisplayName(u)}
                   </TableCell>
-                  <TableCell>
-                    <FormControl size="small" fullWidth disabled={!canEdit(u)}>
+                  <TableCell sx={cellSx}>
+                    <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(u)}>
                         <Select 
                             value={u.role || 'none'} 
                             onChange={(e) => handleChangeRole(u.id, e.target.value)}
-                            variant="standard"
-                            disableUnderline
+                            variant="outlined"
                         >
                             {roles.map(r => <MenuItem key={r} value={r}>{r}</MenuItem>)}
                         </Select>
                     </FormControl>
                   </TableCell>
-                  <TableCell>
-                      <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' }}
+                  <TableCell sx={cellSx}>
+                    <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(u)}>
+                      <Select
+                        value={u.is_support_agent ? 'yes' : 'no'}
+                        onChange={(e) => handleToggleSupporter(u.id, e.target.value === 'yes')}
+                        variant="outlined"
                       >
-                          {u.is_support_agent ? t('Common.YES') : t('Common.NO')}
-                      </Button>
+                        <MenuItem value="yes">{t('Common.YES', 'Yes')}</MenuItem>
+                        <MenuItem value="no">{t('Common.NO', 'No')}</MenuItem>
+                      </Select>
+                    </FormControl>
                   </TableCell>
                   {visibleExtraColumns.map((column) => (
-                    <TableCell key={`${column.key}-${u.id}`} align={column.align || 'left'}>
+                    <TableCell key={`${column.key}-${u.id}`} sx={cellSx} align={column.align || 'left'}>
                       {column.renderCell({
                         user: u,
                         canEdit: canEdit(u),
@@ -212,7 +413,8 @@ export function UserListComponent({
                       })}
                     </TableCell>
                   ))}
-                  <TableCell>
+                  <TableCell sx={cellSx}>
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center' }}>
                       {visibleRowActions.map((action) => {
                         const actionId = `${action.key}:${u.id}`;
                         const isBusy = Boolean(rowActionLoading[actionId]);
@@ -230,9 +432,10 @@ export function UserListComponent({
                           <Button
                             key={`${action.key}-${u.id}`}
                             size="small"
+                            variant="outlined"
                             onClick={() => runRowAction(action, u)}
                             disabled={isBusy || isDisabled}
-                            sx={{ mr: 1, mb: 0.5, textTransform: 'none' }}
+                            sx={actionButtonSx}
                           >
                             {typeof action.label === 'function'
                               ? action.label({ user: u, t, currentUser, canEdit: canEdit(u) })
@@ -240,17 +443,26 @@ export function UserListComponent({
                           </Button>
                         );
                       })}
-                      <Tooltip title={t('Common.DELETE')}>
-                        <span>
-                            <IconButton onClick={() => handleDelete(u.id)} color="error" disabled={!canEdit(u)}>
-                                <DeleteIcon />
-                            </IconButton>
-                        </span>
-                      </Tooltip>
+                        <Tooltip title={t('Common.DELETE')}>
+                          <span>
+                            <Button
+                              size="small"
+                              variant="outlined"
+                              color="error"
+                              startIcon={<DeleteIcon />}
+                              onClick={() => handleDelete(u.id)}
+                              disabled={!canEdit(u)}
+                              sx={actionButtonSx}
+                            >
+                              {t('Common.DELETE', 'Delete')}
+                            </Button>
+                          </span>
+                        </Tooltip>
+                      </Box>
                   </TableCell>
                 </TableRow>
               ))}
-              {users.length === 0 && (
+              {filteredAndSortedUsers.length === 0 && (
                   <TableRow>
                       <TableCell colSpan={5 + visibleExtraColumns.length} align="center">
                           {t('UserList.NO_USERS', 'No users found.')}

package/src/i18n/authTranslations.ts

@@ -855,6 +855,36 @@ export const authTranslations = {
     "en": "I allow convenience cookies.",
     "sw": "Ninaruhusu vidakuzi vya urahisi."
   },
+  "Profile.PRIVACY_STATEMENT_TITLE": {
+    "de": "Datenschutzerklärung",
+    "fr": "Déclaration de confidentialité",
+    "en": "Privacy statement",
+    "sw": "Taarifa ya faragha"
+  },
+  "Profile.COOKIES_STATEMENT_TITLE": {
+    "de": "Cookie-Richtlinie",
+    "fr": "Politique relative aux cookies",
+    "en": "Cookie statement",
+    "sw": "Taarifa ya vidakuzi"
+  },
+  "Profile.STATEMENT_LOADING": {
+    "de": "Statement wird geladen...",
+    "fr": "Chargement du document...",
+    "en": "Loading statement...",
+    "sw": "Inapakia taarifa..."
+  },
+  "Profile.PRIVACY_STATEMENT_EMPTY": {
+    "de": "Die Datenschutzerklärung ist derzeit nicht verfügbar.",
+    "fr": "La déclaration de confidentialité n'est actuellement pas disponible.",
+    "en": "Privacy statement is currently unavailable.",
+    "sw": "Taarifa ya faragha haipatikani kwa sasa."
+  },
+  "Profile.COOKIES_STATEMENT_EMPTY": {
+    "de": "Die Cookie-Richtlinie ist derzeit nicht verfügbar.",
+    "fr": "La politique relative aux cookies n'est actuellement pas disponible.",
+    "en": "Cookie statement is currently unavailable.",
+    "sw": "Taarifa ya vidakuzi haipatikani kwa sasa."
+  },
   "Profile.SAVE_BUTTON": {
     "de": "Speichern",
     "fr": "Enregistrer",
@@ -1326,4 +1356,4 @@ export const authTranslations = {
     "en": "Loading…",
     "sw": "Inapakia..."
   }
-};
+};

package/src/pages/AccountPage.jsx

@@ -7,7 +7,9 @@ import {
   Box, 
   Typography, 
   Alert, 
-  CircularProgress 
+  CircularProgress,
+  Paper,
+  Stack,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
@@ -46,7 +48,10 @@ export function AccountPage({
   const [searchParams, setSearchParams] = useSearchParams();
 
   // 1. URL State Management
-  const currentTab = searchParams.get('tab') || 'profile';
+  const currentTabRaw = searchParams.get('tab') || 'profile';
+  const currentTab = ['invite', 'bulk-invite-csv', 'access'].includes(currentTabRaw)
+    ? 'invite'
+    : currentTabRaw;
   const fromRecovery = searchParams.get('from') === 'recovery';
   const fromWeakLogin = searchParams.get('from') === 'weak_login';
 
@@ -82,18 +87,8 @@ export function AccountPage({
       list.push({ value: 'users', label: t('Account.TAB_USERS', 'Users') });
     }
     
-    if (isSuperUser || perms.can_invite) {
+    if (isSuperUser || perms.can_invite || perms.can_manage_access_codes) {
       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') });
     }
     
     if (isSuperUser || perms.can_view_support) {
@@ -112,7 +107,7 @@ export function AccountPage({
     });
 
     return list;
-  }, [user, perms, t, isSuperUser, showBulkInviteCsvTab, extraTabs]);
+  }, [user, perms, t, isSuperUser, extraTabs]);
 
   // 4. Loading & Auth Checks
   if (loading) {
@@ -137,7 +132,7 @@ 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 builtInTabValues = new Set(['profile', 'security', 'users', 'invite', 'support']);
   const activeExtraTab = builtInTabValues.has(safeTab)
     ? null
     : extraTabs.find((tab) => tab.value === safeTab);
@@ -198,22 +193,28 @@ export function AccountPage({
 
       {safeTab === 'invite' && (
         <Box sx={{ mt: 2 }}>
-          <UserInviteComponent />
-        </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' }}>
-            {t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.')}
-          </Typography>
-          <AccessCodeManager />
+          <Stack spacing={2.5}>
+            {(isSuperUser || perms.can_invite) && (
+              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+                <UserInviteComponent />
+              </Paper>
+            )}
+
+            {(isSuperUser || perms.can_invite) && showBulkInviteCsvTab && (
+              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+                <BulkInviteCsvTab {...bulkInviteCsvProps} />
+              </Paper>
+            )}
+
+            {(isSuperUser || perms.can_manage_access_codes) && (
+              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+                <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+                  {t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.')}
+                </Typography>
+                <AccessCodeManager />
+              </Paper>
+            )}
+          </Stack>
         </Box>
       )}