56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { Card } from '@/components/ui/Card';
|
||
|
|
import { Badge } from '@/components/ui/Badge';
|
||
|
|
|
||
|
|
export function DashboardPage() {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
const stats = [
|
||
|
|
{ label: 'Firmen', value: '24', change: '+3', variant: 'success' as const },
|
||
|
|
{ label: 'Kontakte', value: '156', change: '+12', variant: 'success' as const },
|
||
|
|
{ label: 'Offene Aufgaben', value: '8', change: '-2', variant: 'warning' as const },
|
||
|
|
{ label: 'E-Mails heute', value: '34', change: '+5', variant: 'info' as const },
|
||
|
|
];
|
||
|
|
|
||
|
|
const activities = [
|
||
|
|
{ user: 'Anna Schmidt', action: 'hat Firma TechCorp GmbH erstellt', time: 'vor 5 Minuten' },
|
||
|
|
{ user: 'Max Müller', action: 'hat Kontakt Lisa Weber aktualisiert', time: 'vor 12 Minuten' },
|
||
|
|
{ user: 'Anna Schmidt', action: 'hat 3 Kontakte importiert', time: 'vor 1 Stunde' },
|
||
|
|
{ user: 'System', action: 'Backup erfolgreich erstellt', time: 'vor 2 Stunden' },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6 max-w-7xl mx-auto" data-testid="dashboard-page">
|
||
|
|
<h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('nav.dashboard')}</h1>
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||
|
|
{stats.map((stat) => (
|
||
|
|
<Card key={stat.label}>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-secondary-500">{stat.label}</p>
|
||
|
|
<p className="text-2xl font-bold text-secondary-900 mt-1">{stat.value}</p>
|
||
|
|
</div>
|
||
|
|
<Badge variant={stat.variant} dot>{stat.change}</Badge>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<Card title="Letzte Aktivitäten">
|
||
|
|
<ul className="space-y-3" role="list">
|
||
|
|
{activities.map((activity, idx) => (
|
||
|
|
<li key={idx} className="flex items-start gap-3 text-sm">
|
||
|
|
<span className="w-2 h-2 rounded-full bg-primary-500 mt-1.5 flex-shrink-0" aria-hidden="true" />
|
||
|
|
<div>
|
||
|
|
<span className="font-medium text-secondary-900">{activity.user}</span>
|
||
|
|
<span className="text-secondary-600"> {activity.action}</span>
|
||
|
|
<span className="text-secondary-400 block mt-0.5">{activity.time}</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|