86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
/**
|
||
* RealEstateDashboardView
|
||
*
|
||
* Übersicht/Dashboard für eine Real-Estate-Instanz (PEK).
|
||
* Zeigt Kennzahlen und Links zu Projekten und Parzellen.
|
||
*/
|
||
|
||
import React from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
|
||
import { useRealEstateProjects, useRealEstateParcels } from '../../../hooks/useRealEstate';
|
||
import styles from '../trustee/TrusteeViews.module.css';
|
||
|
||
import { useLanguage } from '../../../providers/language/LanguageContext';
|
||
|
||
export const RealEstateDashboardView: React.FC = () => {
|
||
const { t } = useLanguage();
|
||
|
||
const { instance } = useCurrentInstance();
|
||
const { items: projects, loading: projectsLoading } = useRealEstateProjects();
|
||
const { items: parcels, loading: parcelsLoading } = useRealEstateParcels();
|
||
|
||
const isLoading = projectsLoading || parcelsLoading;
|
||
|
||
return (
|
||
<div className={styles.dashboardView}>
|
||
<div className={styles.statsGrid}>
|
||
{/* Projekte – Link-Karte */}
|
||
<Link to="projects" className={styles.statCard} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||
<div className={styles.statIcon}>📋</div>
|
||
<div className={styles.statContent}>
|
||
<div className={styles.statValue}>
|
||
{isLoading ? '...' : projects.length}
|
||
</div>
|
||
<div className={styles.statLabel}>Projekte</div>
|
||
</div>
|
||
</Link>
|
||
|
||
{/* Parzellen – Link-Karte */}
|
||
<Link to="parcels" className={styles.statCard} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||
<div className={styles.statIcon}>🗺️</div>
|
||
<div className={styles.statContent}>
|
||
<div className={styles.statValue}>
|
||
{isLoading ? '...' : parcels.length}
|
||
</div>
|
||
<div className={styles.statLabel}>Parzellen</div>
|
||
</div>
|
||
</Link>
|
||
|
||
{/* Rollen (optional) */}
|
||
{instance?.userRoles?.length ? (
|
||
<div className={styles.statCard}>
|
||
<div className={styles.statIcon}>👤</div>
|
||
<div className={styles.statContent}>
|
||
<div className={styles.statValueSmall}>
|
||
{instance.userRoles.map((role, idx) => (
|
||
<div key={idx}>{role}</div>
|
||
))}
|
||
</div>
|
||
<div className={styles.statLabel}>
|
||
{instance.userRoles.length === 1 ? t('Deine Rolle') : t('Deine Rollen')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
{/* Instanz-Infos */}
|
||
<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}>{t('Mandant')}</span>
|
||
<span className={styles.infoValue}>{instance?.mandateName}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default RealEstateDashboardView;
|