2026-06-29 07:55:47 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
import { useTranslation } from 'react-i18next';
|
2026-06-29 11:01:39 +02:00
|
|
|
import { StatCard } from '@/components/shared/StatCard';
|
|
|
|
|
import { ActivityFeed, ActivityItem } from '@/components/shared/ActivityFeed';
|
2026-07-19 21:30:26 +02:00
|
|
|
import { useUnifiedContacts, useAuditLog } from '@/api/hooks';
|
2026-06-29 07:55:47 +02:00
|
|
|
|
|
|
|
|
export function DashboardPage() {
|
|
|
|
|
const { t } = useTranslation();
|
2026-07-19 21:30:26 +02:00
|
|
|
const { data: companiesData } = useUnifiedContacts(1, 1, undefined, 'company');
|
|
|
|
|
const { data: contactsData } = useUnifiedContacts(1, 1, undefined, 'person');
|
2026-06-29 11:01:39 +02:00
|
|
|
const { data: auditData, isError: auditError } = useAuditLog(1, 5);
|
2026-06-29 07:55:47 +02:00
|
|
|
|
2026-06-29 11:01:39 +02:00
|
|
|
const totalCompanies = companiesData?.total ?? 0;
|
|
|
|
|
const totalContacts = contactsData?.total ?? 0;
|
2026-06-29 07:55:47 +02:00
|
|
|
|
2026-06-29 11:01:39 +02:00
|
|
|
const auditEntries = auditData?.items ?? [];
|
|
|
|
|
const activeThisWeek = auditEntries.filter((e) => {
|
|
|
|
|
if (!e.timestamp) return false;
|
|
|
|
|
const d = new Date(e.timestamp);
|
|
|
|
|
const weekAgo = new Date();
|
|
|
|
|
weekAgo.setDate(weekAgo.getDate() - 7);
|
|
|
|
|
return d >= weekAgo;
|
|
|
|
|
}).length;
|
|
|
|
|
|
|
|
|
|
const newThisMonth = auditEntries.filter((e) => {
|
|
|
|
|
if (!e.timestamp) return false;
|
|
|
|
|
const d = new Date(e.timestamp);
|
|
|
|
|
const monthAgo = new Date();
|
|
|
|
|
monthAgo.setMonth(monthAgo.getMonth() - 1);
|
|
|
|
|
return d >= monthAgo;
|
|
|
|
|
}).length;
|
|
|
|
|
|
|
|
|
|
const activities: ActivityItem[] = auditError
|
|
|
|
|
? []
|
|
|
|
|
: auditEntries.map((entry) => ({
|
|
|
|
|
id: `${entry.timestamp}-${entry.user}-${entry.action}`,
|
|
|
|
|
user: entry.user || 'System',
|
|
|
|
|
action: entry.action || '',
|
|
|
|
|
time: entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : '',
|
|
|
|
|
avatarUrl: null,
|
|
|
|
|
}));
|
2026-06-29 07:55:47 +02:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="p-6 max-w-7xl mx-auto" data-testid="dashboard-page">
|
2026-06-29 11:01:39 +02:00
|
|
|
<h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('dashboard.title')}</h1>
|
|
|
|
|
|
2026-06-29 07:55:47 +02:00
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
2026-06-29 11:01:39 +02:00
|
|
|
<StatCard
|
|
|
|
|
label={t('dashboard.totalCompanies')}
|
|
|
|
|
value={totalCompanies}
|
|
|
|
|
testId="stat-companies"
|
|
|
|
|
/>
|
|
|
|
|
<StatCard
|
|
|
|
|
label={t('dashboard.totalContacts')}
|
|
|
|
|
value={totalContacts}
|
|
|
|
|
testId="stat-contacts"
|
|
|
|
|
/>
|
|
|
|
|
<StatCard
|
|
|
|
|
label={t('dashboard.activeThisWeek')}
|
|
|
|
|
value={activeThisWeek}
|
|
|
|
|
testId="stat-active-week"
|
|
|
|
|
/>
|
|
|
|
|
<StatCard
|
|
|
|
|
label={t('dashboard.newThisMonth')}
|
|
|
|
|
value={newThisMonth}
|
|
|
|
|
testId="stat-new-month"
|
|
|
|
|
/>
|
2026-06-29 07:55:47 +02:00
|
|
|
</div>
|
2026-06-29 11:01:39 +02:00
|
|
|
|
|
|
|
|
{auditError ? (
|
|
|
|
|
<p className="text-sm text-secondary-500" data-testid="activity-unavailable">
|
|
|
|
|
{t('dashboard.activityUnavailable')}
|
|
|
|
|
</p>
|
|
|
|
|
) : (
|
|
|
|
|
<ActivityFeed activities={activities} title={t('dashboard.recentActivity')} />
|
|
|
|
|
)}
|
2026-06-29 07:55:47 +02:00
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|