99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
/**
|
||
* AdminUserMandatesPage
|
||
*
|
||
* Admin page for managing user-mandate memberships.
|
||
* Allows assigning users to mandates and managing their roles within mandates.
|
||
*/
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import { useUserMandates, type Mandate } from '../../hooks/useUserMandates';
|
||
import { FaSync, FaBuilding } from 'react-icons/fa';
|
||
import { MandateUsersPanel } from '../../components/admin/MandateUsersPanel';
|
||
import styles from './Admin.module.css';
|
||
|
||
import { useLanguage } from '../../providers/language/LanguageContext';
|
||
import { mandateDisplayLabel } from '../../utils/mandateDisplayUtils';
|
||
|
||
export const AdminUserMandatesPage: React.FC = () => {
|
||
const { t } = useLanguage();
|
||
|
||
const { error, fetchMandates } = useUserMandates();
|
||
|
||
const [mandates, setMandates] = useState<Mandate[]>([]);
|
||
const [selectedMandateId, setSelectedMandateId] = useState<string>('');
|
||
|
||
useEffect(() => {
|
||
const loadMandates = async () => {
|
||
const data = await fetchMandates();
|
||
setMandates(data);
|
||
if (data.length > 0) {
|
||
setSelectedMandateId((prev) => prev || data[0].id);
|
||
}
|
||
};
|
||
loadMandates();
|
||
}, [fetchMandates]);
|
||
|
||
if (error && !selectedMandateId) {
|
||
return (
|
||
<div className={`${styles.adminPage} ${styles.adminPageFill}`}>
|
||
<div className={styles.errorContainer}>
|
||
<span className={styles.errorIcon}>⚠️</span>
|
||
<p className={styles.errorMessage}>
|
||
{t('Fehler')}: {error}
|
||
</p>
|
||
<button type="button" className={styles.secondaryButton} onClick={() => fetchMandates()}>
|
||
<FaSync /> {t('Erneut versuchen')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className={`${styles.adminPage} ${styles.adminPageFill}`}>
|
||
<div className={styles.pageHeader}>
|
||
<div>
|
||
<h1 className={styles.pageTitle}>{t('Mandanten-Mitglieder')}</h1>
|
||
<p className={styles.pageSubtitle}>{t('Verwalten Sie, welche Benutzer Zugriff')}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={styles.filterSection}>
|
||
<div className={styles.filterGroup}>
|
||
<label className={styles.filterLabel}>
|
||
<FaBuilding style={{ marginRight: 8 }} />
|
||
{t('Mandant auswählen')}:
|
||
</label>
|
||
<select
|
||
className={styles.filterSelect}
|
||
value={selectedMandateId}
|
||
onChange={(e) => setSelectedMandateId(e.target.value)}
|
||
>
|
||
<option value="">{t('Mandant wählen')}</option>
|
||
{mandates.map((m) => (
|
||
<option key={m.id} value={m.id}>
|
||
{mandateDisplayLabel(m)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{!selectedMandateId ? (
|
||
<div className={styles.emptyState}>
|
||
<FaBuilding className={styles.emptyIcon} />
|
||
<h3 className={styles.emptyTitle}>{t('Kein Mandant ausgewählt')}</h3>
|
||
<p className={styles.emptyDescription}>
|
||
{t('Wählen Sie einen Mandanten aus, um dessen Mitglieder zu verwalten.')}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className={styles.tableContainer}>
|
||
<MandateUsersPanel mandateId={selectedMandateId} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AdminUserMandatesPage;
|