93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
/**
|
|
* TrusteeDashboardView
|
|
*
|
|
* Übersicht/Dashboard für eine Trustee-Instanz.
|
|
* Zeigt Statistiken über Positionen, Dokumente und Verknüpfungen.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
|
|
import { useTrusteePositions, useTrusteeDocuments, useTrusteePositionDocuments } from '../../../hooks/useTrustee';
|
|
import styles from './TrusteeViews.module.css';
|
|
|
|
export const TrusteeDashboardView: React.FC = () => {
|
|
const { instance } = useCurrentInstance();
|
|
const { items: positions, loading: posLoading } = useTrusteePositions();
|
|
const { items: documents, loading: docsLoading } = useTrusteeDocuments();
|
|
const { items: links, loading: linksLoading } = useTrusteePositionDocuments();
|
|
|
|
const isLoading = posLoading || docsLoading || linksLoading;
|
|
|
|
return (
|
|
<div className={styles.dashboardView}>
|
|
<div className={styles.statsGrid}>
|
|
{/* Positionen Card */}
|
|
<div className={styles.statCard}>
|
|
<div className={styles.statIcon}>📊</div>
|
|
<div className={styles.statContent}>
|
|
<div className={styles.statValue}>
|
|
{isLoading ? '...' : positions.length}
|
|
</div>
|
|
<div className={styles.statLabel}>Positionen</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dokumente Card */}
|
|
<div className={styles.statCard}>
|
|
<div className={styles.statIcon}>📄</div>
|
|
<div className={styles.statContent}>
|
|
<div className={styles.statValue}>
|
|
{isLoading ? '...' : documents.length}
|
|
</div>
|
|
<div className={styles.statLabel}>Dokumente</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verknüpfungen Card */}
|
|
<div className={styles.statCard}>
|
|
<div className={styles.statIcon}>🔗</div>
|
|
<div className={styles.statContent}>
|
|
<div className={styles.statValue}>
|
|
{isLoading ? '...' : links.length}
|
|
</div>
|
|
<div className={styles.statLabel}>Zuordnungen</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rollen Card */}
|
|
<div className={styles.statCard}>
|
|
<div className={styles.statIcon}>👤</div>
|
|
<div className={styles.statContent}>
|
|
<div className={styles.statValueSmall}>
|
|
{instance?.userRoles?.length ? (
|
|
instance.userRoles.map((role, idx) => (
|
|
<div key={idx}>{role}</div>
|
|
))
|
|
) : '-'}
|
|
</div>
|
|
<div className={styles.statLabel}>
|
|
{(instance?.userRoles?.length || 0) === 1 ? 'Deine Rolle' : 'Deine Rollen'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info-Bereich */}
|
|
<div className={styles.infoSection}>
|
|
<h3>Instanz-Details</h3>
|
|
<div className={styles.infoGrid}>
|
|
<div className={styles.infoItem}>
|
|
<span className={styles.infoLabel}>Instanz:</span>
|
|
<span className={styles.infoValue}>{instance?.instanceLabel}</span>
|
|
</div>
|
|
<div className={styles.infoItem}>
|
|
<span className={styles.infoLabel}>Mandant:</span>
|
|
<span className={styles.infoValue}>{instance?.mandateName}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TrusteeDashboardView;
|