582 lines
22 KiB
TypeScript
582 lines
22 KiB
TypeScript
/**
|
||
* AccessManagementHub
|
||
*
|
||
* Central admin page for feature instance access management.
|
||
* Shows mandate/feature context, overview stats, instance cards, and relationship diagram.
|
||
*/
|
||
|
||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import {
|
||
useFeatureAccess,
|
||
type FeatureInstance,
|
||
type Feature,
|
||
type FeatureAccessUser,
|
||
} from '../../hooks/useFeatureAccess';
|
||
import { useUserMandates, type Mandate } from '../../hooks/useUserMandates';
|
||
import { FaBuilding, FaCube, FaUsers, FaCogs, FaSync, FaChartBar, FaLink, FaList, FaSitemap } from 'react-icons/fa';
|
||
import { useToast } from '../../contexts/ToastContext';
|
||
import api from '../../api';
|
||
import styles from './Admin.module.css';
|
||
import hubStyles from './AccessManagementHub.module.css';
|
||
import { InstanceDetailModal } from './InstanceDetailModal';
|
||
import { FeatureInstanceWizard } from './wizards/FeatureInstanceWizard';
|
||
import { InstanceHierarchyView } from './InstanceHierarchyView';
|
||
|
||
import { useLanguage } from '../../providers/language/LanguageContext';
|
||
import { labelAsI18nKey } from '../../types/mandate';
|
||
|
||
function getMandateName(mandate: Mandate): string {
|
||
if (mandate.label) return mandate.label;
|
||
if (typeof mandate.name === 'object') {
|
||
return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
|
||
}
|
||
return mandate.name || mandate.id;
|
||
}
|
||
|
||
function getFeatureLabel(feature: Feature, t: (k: string) => string): string {
|
||
return t(labelAsI18nKey(feature.label, feature.code));
|
||
}
|
||
|
||
export interface InstanceWithStats extends FeatureInstance {
|
||
userCount?: number;
|
||
roleCount?: number;
|
||
}
|
||
|
||
export const AccessManagementHub: React.FC = () => {
|
||
const { t } = useLanguage();
|
||
|
||
const {
|
||
features,
|
||
instances,
|
||
loading,
|
||
error,
|
||
fetchFeatures,
|
||
fetchInstances,
|
||
syncInstanceRoles,
|
||
} = useFeatureAccess();
|
||
const { fetchMandates } = useUserMandates();
|
||
const { showSuccess, showError } = useToast();
|
||
|
||
const [mandates, setMandates] = useState<Mandate[]>([]);
|
||
const [selectedMandateId, setSelectedMandateId] = useState<string>('');
|
||
const [selectedFeatureCode, setSelectedFeatureCode] = useState<string>('');
|
||
const [instancesWithStats, setInstancesWithStats] = useState<InstanceWithStats[]>([]);
|
||
const [statsLoading, setStatsLoading] = useState(false);
|
||
const [detailInstance, setDetailInstance] = useState<{
|
||
instance: FeatureInstance;
|
||
mandateId: string;
|
||
mandateName: string;
|
||
featureLabel: string;
|
||
} | null>(null);
|
||
const [showWizard, setShowWizard] = useState(false);
|
||
type ViewMode = 'list' | 'hierarchy';
|
||
const [viewMode, setViewMode] = useState<ViewMode>('hierarchy');
|
||
const [instanceUsersMap, setInstanceUsersMap] = useState<Record<string, FeatureAccessUser[]>>({});
|
||
const [hierarchyUsersLoading, setHierarchyUsersLoading] = useState(false);
|
||
const [instancesByMandate, setInstancesByMandate] = useState<Record<string, InstanceWithStats[]>>({});
|
||
|
||
useEffect(() => {
|
||
fetchFeatures();
|
||
fetchMandates().then(data => {
|
||
setMandates(data);
|
||
if (data.length > 0 && !selectedMandateId) {
|
||
setSelectedMandateId(data[0].id);
|
||
}
|
||
});
|
||
}, [fetchFeatures, fetchMandates]);
|
||
|
||
useEffect(() => {
|
||
if (selectedMandateId) {
|
||
fetchInstances(selectedMandateId, selectedFeatureCode || undefined);
|
||
} else {
|
||
setInstancesWithStats([]);
|
||
}
|
||
}, [selectedMandateId, selectedFeatureCode, fetchInstances]);
|
||
|
||
const loadInstanceStats = useCallback(async (mandateId: string, instanceList: FeatureInstance[]) => {
|
||
if (instanceList.length === 0) {
|
||
setInstancesWithStats([]);
|
||
return;
|
||
}
|
||
setStatsLoading(true);
|
||
try {
|
||
const results = await Promise.all(
|
||
instanceList.map(async (inst) => {
|
||
try {
|
||
const [usersRes, rolesRes] = await Promise.all([
|
||
api.get(`/api/features/instances/${inst.id}/users`, {
|
||
headers: { 'X-Mandate-Id': mandateId },
|
||
}),
|
||
api.get(`/api/features/instances/${inst.id}/available-roles`, {
|
||
headers: { 'X-Mandate-Id': mandateId },
|
||
}),
|
||
]);
|
||
const users = Array.isArray(usersRes.data) ? usersRes.data : usersRes.data?.items || [];
|
||
const roles = Array.isArray(rolesRes.data) ? rolesRes.data : [];
|
||
return {
|
||
...inst,
|
||
userCount: users.length,
|
||
roleCount: roles.length,
|
||
};
|
||
} catch {
|
||
return { ...inst, userCount: 0, roleCount: 0 };
|
||
}
|
||
})
|
||
);
|
||
setInstancesWithStats(results);
|
||
} catch {
|
||
setInstancesWithStats(instanceList.map((i) => ({ ...i, userCount: 0, roleCount: 0 })));
|
||
} finally {
|
||
setStatsLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (selectedMandateId && instances.length > 0 && !loading) {
|
||
loadInstanceStats(selectedMandateId, instances);
|
||
} else if (instances.length === 0) {
|
||
setInstancesWithStats([]);
|
||
}
|
||
}, [selectedMandateId, instances, loading, loadInstanceStats]);
|
||
|
||
const handleSyncRoles = async (instance: FeatureInstance) => {
|
||
if (!selectedMandateId) return;
|
||
try {
|
||
const result = await syncInstanceRoles(selectedMandateId, instance.id, true);
|
||
if (result.success && result.data) {
|
||
showSuccess(
|
||
'Rollen synchronisiert',
|
||
`Hinzugefügt: ${result.data.added}, Entfernt: ${result.data.removed}, Unverändert: ${result.data.unchanged}`
|
||
);
|
||
fetchInstances(selectedMandateId, selectedFeatureCode || undefined);
|
||
} else {
|
||
showError('Synchronisierung fehlgeschlagen', result.error || 'Fehler beim Synchronisieren');
|
||
}
|
||
} catch {
|
||
showError('Fehler', 'Rollen konnten nicht synchronisiert werden');
|
||
}
|
||
};
|
||
|
||
const handleOpenDetail = (instance: FeatureInstance, mandateIdOverride?: string) => {
|
||
const mandateId = mandateIdOverride ?? selectedMandateId;
|
||
const mandate = mandates.find((m) => m.id === mandateId);
|
||
const feature = features.find((f) => f.code === instance.featureCode);
|
||
setDetailInstance({
|
||
instance,
|
||
mandateId: mandateId || '',
|
||
mandateName: mandate ? getMandateName(mandate) : mandateId || '',
|
||
featureLabel: feature ? getFeatureLabel(feature, t) : instance.featureCode,
|
||
});
|
||
};
|
||
|
||
const handleCloseDetail = () => {
|
||
setDetailInstance(null);
|
||
};
|
||
|
||
const handleDetailSaved = () => {
|
||
if (selectedMandateId) {
|
||
fetchInstances(selectedMandateId, selectedFeatureCode || undefined);
|
||
}
|
||
setDetailInstance(null);
|
||
};
|
||
|
||
const handleWizardComplete = () => {
|
||
setShowWizard(false);
|
||
if (selectedMandateId) {
|
||
fetchInstances(selectedMandateId, selectedFeatureCode || undefined);
|
||
}
|
||
};
|
||
|
||
const filteredInstances = useMemo(() => {
|
||
if (!selectedFeatureCode) return instancesWithStats;
|
||
return instancesWithStats.filter((i) => i.featureCode === selectedFeatureCode);
|
||
}, [instancesWithStats, selectedFeatureCode]);
|
||
|
||
const loadAllHierarchyData = useCallback(async () => {
|
||
if (mandates.length === 0) {
|
||
setInstancesByMandate({});
|
||
setInstanceUsersMap({});
|
||
return;
|
||
}
|
||
setHierarchyUsersLoading(true);
|
||
try {
|
||
const mandateIds = mandates.map((m) => m.id);
|
||
const instancesResults = await Promise.all(
|
||
mandateIds.map(async (mandateId) => {
|
||
try {
|
||
const res = await api.get('/api/features/instances', {
|
||
headers: { 'X-Mandate-Id': mandateId },
|
||
});
|
||
const list = res.data?.items ?? (Array.isArray(res.data) ? res.data : []);
|
||
return { mandateId, instances: list as FeatureInstance[] };
|
||
} catch {
|
||
return { mandateId, instances: [] as FeatureInstance[] };
|
||
}
|
||
})
|
||
);
|
||
const byMandate: Record<string, InstanceWithStats[]> = {};
|
||
const allInstanceIds: { instanceId: string; mandateId: string }[] = [];
|
||
for (const { mandateId, instances } of instancesResults) {
|
||
const withStats = await Promise.all(
|
||
instances.map(async (inst) => {
|
||
try {
|
||
const [usersRes, rolesRes] = await Promise.all([
|
||
api.get(`/api/features/instances/${inst.id}/users`, {
|
||
headers: { 'X-Mandate-Id': mandateId },
|
||
}),
|
||
api.get(`/api/features/instances/${inst.id}/available-roles`, {
|
||
headers: { 'X-Mandate-Id': mandateId },
|
||
}),
|
||
]);
|
||
const users = Array.isArray(usersRes.data) ? usersRes.data : usersRes.data?.items ?? [];
|
||
const roles = Array.isArray(rolesRes.data) ? rolesRes.data : [];
|
||
allInstanceIds.push({ instanceId: inst.id, mandateId });
|
||
return {
|
||
...inst,
|
||
userCount: users.length,
|
||
roleCount: roles.length,
|
||
} as InstanceWithStats;
|
||
} catch {
|
||
allInstanceIds.push({ instanceId: inst.id, mandateId });
|
||
return { ...inst, userCount: 0, roleCount: 0 } as InstanceWithStats;
|
||
}
|
||
})
|
||
);
|
||
byMandate[mandateId] = withStats;
|
||
}
|
||
setInstancesByMandate(byMandate);
|
||
const usersMap: Record<string, FeatureAccessUser[]> = {};
|
||
await Promise.all(
|
||
allInstanceIds.map(async ({ instanceId, mandateId }) => {
|
||
try {
|
||
const res = await api.get(`/api/features/instances/${instanceId}/users`, {
|
||
headers: { 'X-Mandate-Id': mandateId },
|
||
});
|
||
const users = Array.isArray(res.data) ? res.data : res.data?.items ?? [];
|
||
usersMap[instanceId] = users as FeatureAccessUser[];
|
||
} catch {
|
||
usersMap[instanceId] = [];
|
||
}
|
||
})
|
||
);
|
||
setInstanceUsersMap(usersMap);
|
||
} finally {
|
||
setHierarchyUsersLoading(false);
|
||
}
|
||
}, [mandates]);
|
||
|
||
useEffect(() => {
|
||
if (viewMode === 'hierarchy' && mandates.length > 0) {
|
||
loadAllHierarchyData();
|
||
} else if (viewMode !== 'hierarchy') {
|
||
setInstancesByMandate({});
|
||
setInstanceUsersMap({});
|
||
}
|
||
}, [viewMode, mandates, loadAllHierarchyData]);
|
||
|
||
const overviewStats = useMemo(() => {
|
||
const totalUsers = filteredInstances.reduce((sum, i) => sum + (i.userCount ?? 0), 0);
|
||
const maxRoles = Math.max(0, ...filteredInstances.map((i) => i.roleCount ?? 0));
|
||
return {
|
||
instances: filteredInstances.length,
|
||
users: totalUsers,
|
||
roles: maxRoles,
|
||
};
|
||
}, [filteredInstances]);
|
||
|
||
const relationshipData = useMemo(() => {
|
||
if (!selectedMandateId || filteredInstances.length === 0) return null;
|
||
const mandate = mandates.find((m) => m.id === selectedMandateId);
|
||
return {
|
||
mandateName: mandate ? getMandateName(mandate) : selectedMandateId,
|
||
instances: filteredInstances.map((inst) => {
|
||
const feature = features.find((f) => f.code === inst.featureCode);
|
||
return {
|
||
id: inst.id,
|
||
label: inst.label,
|
||
featureLabel: feature ? getFeatureLabel(feature) : inst.featureCode,
|
||
userCount: inst.userCount ?? 0,
|
||
};
|
||
}),
|
||
};
|
||
}, [selectedMandateId, mandates, filteredInstances, features, t]);
|
||
|
||
if (error && !selectedMandateId) {
|
||
return (
|
||
<div className={styles.adminPage}>
|
||
<div className={styles.errorContainer}>
|
||
<span className={styles.errorIcon}>⚠️</span>
|
||
<p className={styles.errorMessage}>Fehler: {error}</p>
|
||
<button className={styles.secondaryButton} onClick={() => fetchFeatures()}>
|
||
<FaSync /> Erneut versuchen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className={styles.adminPage}>
|
||
<div className={styles.pageHeader}>
|
||
<div>
|
||
<h1 className={styles.pageTitle}>Zugriffsverwaltung</h1>
|
||
<p className={styles.pageSubtitle}>
|
||
Feature-Instanzen, Benutzer und Rollen an einem Ort verwalten
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={hubStyles.filters}>
|
||
{/* Filter dropdowns only shown in list view - hierarchy shows everything */}
|
||
{viewMode === 'list' && (
|
||
<>
|
||
<div className={styles.filterGroup}>
|
||
<label className={styles.filterLabel}>
|
||
<FaBuilding style={{ marginRight: 8 }} />
|
||
Mandant:
|
||
</label>
|
||
<select
|
||
className={styles.filterSelect}
|
||
value={selectedMandateId}
|
||
onChange={(e) => setSelectedMandateId(e.target.value)}
|
||
>
|
||
<option value="">{t('accessManagementHub.mandantWaehlen')}</option>
|
||
{mandates.map((m) => (
|
||
<option key={m.id} value={m.id}>
|
||
{getMandateName(m)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className={styles.filterGroup}>
|
||
<label className={styles.filterLabel}>
|
||
<FaCube style={{ marginRight: 8 }} />
|
||
Feature:
|
||
</label>
|
||
<select
|
||
className={styles.filterSelect}
|
||
value={selectedFeatureCode}
|
||
onChange={(e) => setSelectedFeatureCode(e.target.value)}
|
||
>
|
||
<option value="">{t('accessManagementHub.alle')}</option>
|
||
{features.map((f) => (
|
||
<option key={f.code} value={f.code}>
|
||
{getFeatureLabel(f, t)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
{selectedMandateId && (
|
||
<div className={styles.headerActions}>
|
||
<button
|
||
className={styles.secondaryButton}
|
||
onClick={() =>
|
||
fetchInstances(selectedMandateId, selectedFeatureCode || undefined)
|
||
}
|
||
disabled={loading}
|
||
>
|
||
<FaSync className={loading ? 'spinning' : ''} /> Aktualisieren
|
||
</button>
|
||
<button
|
||
className={styles.primaryButton}
|
||
onClick={() => setShowWizard(true)}
|
||
disabled={features.length === 0}
|
||
>
|
||
+ Neue Instanz erstellen
|
||
</button>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<div className={hubStyles.viewModeSwitch}>
|
||
<div className={hubStyles.viewModeButtons}>
|
||
<button
|
||
type="button"
|
||
className={viewMode === 'list' ? hubStyles.viewModeActive : hubStyles.viewModeButton}
|
||
onClick={() => setViewMode('list')}
|
||
>
|
||
<FaList /> Listenansicht
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={viewMode === 'hierarchy' ? hubStyles.viewModeActive : hubStyles.viewModeButton}
|
||
onClick={() => setViewMode('hierarchy')}
|
||
>
|
||
<FaSitemap /> Hierarchie
|
||
</button>
|
||
</div>
|
||
<Link to="/admin/mandates" className={hubStyles.mandatesLink}>
|
||
<FaBuilding /> Mandanten verwalten
|
||
</Link>
|
||
<Link to="/admin/user-mandates" className={hubStyles.mandatesLink}>
|
||
<FaUsers /> Mandant-Benutzer
|
||
</Link>
|
||
</div>
|
||
|
||
{viewMode === 'hierarchy' ? (
|
||
<InstanceHierarchyView
|
||
mandates={mandates}
|
||
getMandateName={getMandateName}
|
||
instancesByMandate={instancesByMandate}
|
||
instanceUsersMap={instanceUsersMap}
|
||
features={features}
|
||
getFeatureLabel={getFeatureLabel}
|
||
loading={hierarchyUsersLoading}
|
||
onOpenDetail={handleOpenDetail}
|
||
/>
|
||
) : !selectedMandateId ? (
|
||
<div className={styles.emptyState}>
|
||
<FaBuilding className={styles.emptyIcon} />
|
||
<h3 className={styles.emptyTitle}>{t('accessManagementHub.keinMandantAusgewaehlt')}</h3>
|
||
<p className={styles.emptyDescription}>
|
||
Wählen Sie einen Mandanten, um dessen Feature-Instanzen und Zugriffe zu verwalten.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className={hubStyles.overviewRow}>
|
||
<div className={hubStyles.statsCard}>
|
||
<FaChartBar className={hubStyles.statsIcon} />
|
||
<div className={hubStyles.statsContent}>
|
||
<span className={hubStyles.statsValue}>
|
||
{loading || statsLoading ? '…' : overviewStats.instances}
|
||
</span>
|
||
<span className={hubStyles.statsLabel}>Instanzen</span>
|
||
</div>
|
||
</div>
|
||
<div className={hubStyles.statsCard}>
|
||
<FaUsers className={hubStyles.statsIcon} />
|
||
<div className={hubStyles.statsContent}>
|
||
<span className={hubStyles.statsValue}>
|
||
{loading || statsLoading ? '…' : overviewStats.users}
|
||
</span>
|
||
<span className={hubStyles.statsLabel}>{t('accessManagementHub.benutzer')}</span>
|
||
</div>
|
||
</div>
|
||
<div className={hubStyles.statsCard}>
|
||
<FaCogs className={hubStyles.statsIcon} />
|
||
<div className={hubStyles.statsContent}>
|
||
<span className={hubStyles.statsValue}>
|
||
{loading || statsLoading ? '…' : overviewStats.roles}
|
||
</span>
|
||
<span className={hubStyles.statsLabel}>{t('accessManagementHub.rollenMax')}</span>
|
||
</div>
|
||
</div>
|
||
{relationshipData && relationshipData.instances.length > 0 && (
|
||
<div className={hubStyles.diagramCard}>
|
||
<FaLink className={hubStyles.statsIcon} />
|
||
<div className={hubStyles.diagramContent}>
|
||
<span className={hubStyles.diagramTitle}>Beziehungen</span>
|
||
<div className={hubStyles.diagramFlow}>
|
||
<div className={hubStyles.diagramNode}>{relationshipData.mandateName}</div>
|
||
<div className={hubStyles.diagramNodes}>
|
||
{relationshipData.instances.slice(0, 5).map((inst) => (
|
||
<div key={inst.id} className={hubStyles.diagramNodeSmall}>
|
||
{inst.label} ({inst.userCount})
|
||
</div>
|
||
))}
|
||
{relationshipData.instances.length > 5 && (
|
||
<div className={hubStyles.diagramNodeSmall}>
|
||
+{relationshipData.instances.length - 5} weitere
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<section className={hubStyles.section}>
|
||
<h2 className={hubStyles.sectionTitle}>Feature-Instanzen</h2>
|
||
{loading && filteredInstances.length === 0 ? (
|
||
<div className={styles.loadingContainer}>
|
||
<div className={styles.spinner} />
|
||
<span>{t('accessManagementHub.ladeInstanzen')}</span>
|
||
</div>
|
||
) : filteredInstances.length === 0 ? (
|
||
<div className={styles.emptyState}>
|
||
<FaCube className={styles.emptyIcon} />
|
||
<h3 className={styles.emptyTitle}>{t('accessManagementHub.keineFeatureinstanzen')}</h3>
|
||
<p className={styles.emptyDescription}>
|
||
Erstellen Sie eine neue Instanz oder wählen Sie ein anderes Feature.
|
||
</p>
|
||
<button
|
||
className={styles.primaryButton}
|
||
onClick={() => setShowWizard(true)}
|
||
disabled={features.length === 0}
|
||
>
|
||
+ Erste Instanz erstellen
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className={hubStyles.instanceGrid}>
|
||
{filteredInstances.map((inst) => (
|
||
<div key={inst.id} className={hubStyles.instanceCard}>
|
||
<div className={hubStyles.instanceCardHeader}>
|
||
<span className={hubStyles.instanceLabel}>{inst.label}</span>
|
||
<span
|
||
className={`${hubStyles.instanceBadge} ${inst.enabled ? hubStyles.badgeActive : hubStyles.badgeInactive}`}
|
||
>
|
||
{inst.enabled ? t('accessManagementHub.aktiv') : t('accessManagementHub.inaktiv')}
|
||
</span>
|
||
</div>
|
||
<div className={hubStyles.instanceMeta}>
|
||
<span>{getFeatureLabel(features.find((f) => f.code === inst.featureCode) || { code: inst.featureCode, label: inst.featureCode }, t)}</span>
|
||
<span>{inst.userCount ?? '—'} Benutzer</span>
|
||
<span>{inst.roleCount ?? '—'} Rollen</span>
|
||
</div>
|
||
<div className={hubStyles.instanceActions}>
|
||
<button
|
||
type="button"
|
||
className={hubStyles.cardAction}
|
||
onClick={() => handleOpenDetail(inst, selectedMandateId)}
|
||
>
|
||
<FaUsers /> Benutzer verwalten
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={hubStyles.cardAction}
|
||
onClick={() => handleSyncRoles(inst)}
|
||
disabled={!inst.enabled}
|
||
title={t('accessManagementHub.rollenSynchronisieren')}
|
||
>
|
||
<FaCogs /> Rollen sync
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
</>
|
||
)}
|
||
|
||
{detailInstance && (
|
||
<InstanceDetailModal
|
||
instance={detailInstance.instance}
|
||
mandateId={detailInstance.mandateId}
|
||
mandateName={detailInstance.mandateName}
|
||
featureLabel={detailInstance.featureLabel}
|
||
onClose={handleCloseDetail}
|
||
onSaved={handleDetailSaved}
|
||
/>
|
||
)}
|
||
|
||
{showWizard && (
|
||
<FeatureInstanceWizard
|
||
mandateId={selectedMandateId}
|
||
mandates={mandates}
|
||
features={features}
|
||
onClose={() => setShowWizard(false)}
|
||
onComplete={handleWizardComplete}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AccessManagementHub;
|