102 lines
5.8 KiB
TypeScript
102 lines
5.8 KiB
TypeScript
|
|
import React from 'react';
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
|
|
|
|
const data = [
|
|
{ name: 'Mo', placement: 4, expert: 10 },
|
|
{ name: 'Di', placement: 3, expert: 12 },
|
|
{ name: 'Mi', placement: 6, expert: 15 },
|
|
{ name: 'Do', placement: 8, expert: 10 },
|
|
{ name: 'Fr', placement: 5, expert: 8 },
|
|
];
|
|
|
|
export const Dashboard: React.FC = () => {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[
|
|
{ label: 'Aktive Ausschreibungen', value: '12', trend: '+12%', color: 'blue' },
|
|
{ label: 'Gesamt Experten', value: '1.450', trend: '+5%', color: 'green' },
|
|
{ label: 'Laufende Projekte', value: '34', trend: '+2', color: 'purple' },
|
|
{ label: 'Abschlussrate', value: '78%', trend: '+4%', color: 'orange' },
|
|
].map((stat) => (
|
|
<div key={stat.label} className="bg-white dark:bg-slate-900 p-6 rounded-3xl shadow-card border border-slate-200 dark:border-slate-800 transition-all hover:shadow-lg hover:-translate-y-1">
|
|
<p className="text-slate-500 text-sm font-semibold tracking-wide">{stat.label}</p>
|
|
<div className="flex items-baseline gap-3 mt-2">
|
|
<h3 className="text-3xl font-extrabold text-slate-900 dark:text-white">{stat.value}</h3>
|
|
<span className="text-xs font-bold text-brand-600 px-2 py-1 bg-brand-50 dark:bg-brand-500/10 rounded-full border border-brand-100 dark:border-brand-500/20">{stat.trend}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="bg-white dark:bg-slate-900 p-6 rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-card h-[450px] flex flex-col overflow-hidden">
|
|
<h3 className="text-lg font-bold mb-6 shrink-0 flex items-center gap-2">
|
|
<span className="w-1.5 h-6 bg-brand-500 rounded-full"></span>
|
|
Placements vs. Experten-Anfragen
|
|
</h3>
|
|
<div className="flex-1 w-full overflow-hidden">
|
|
<ResponsiveContainer width="100%" height="100%" minHeight={300}>
|
|
<BarChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
|
|
<XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fill: '#94a3b8', fontSize: 12}} />
|
|
<YAxis axisLine={false} tickLine={false} tick={{fill: '#94a3b8', fontSize: 12}} />
|
|
<Tooltip
|
|
contentStyle={{ backgroundColor: '#0f172a', border: 'none', borderRadius: '12px', color: '#fff', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }}
|
|
itemStyle={{ color: '#fff' }}
|
|
/>
|
|
<Bar dataKey="placement" fill="#22c55e" radius={[6, 6, 0, 0]} barSize={24} />
|
|
<Bar dataKey="expert" fill="#3b82f6" radius={[6, 6, 0, 0]} barSize={24} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-slate-900 p-6 rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-card h-[450px] flex flex-col overflow-hidden">
|
|
<h3 className="text-lg font-bold mb-6 shrink-0 flex items-center gap-2">
|
|
<span className="w-1.5 h-6 bg-blue-500 rounded-full"></span>
|
|
Umsatzprognose
|
|
</h3>
|
|
<div className="flex-1 w-full overflow-hidden">
|
|
<ResponsiveContainer width="100%" height="100%" minHeight={300}>
|
|
<AreaChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#22c55e" stopOpacity={0.2}/>
|
|
<stop offset="95%" stopColor="#22c55e" stopOpacity={0}/>
|
|
</linearGradient>
|
|
</defs>
|
|
<XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fill: '#94a3b8', fontSize: 12}} />
|
|
<YAxis axisLine={false} tickLine={false} hide />
|
|
<Tooltip />
|
|
<Area type="monotone" dataKey="placement" stroke="#22c55e" strokeWidth={3} fillOpacity={1} fill="url(#colorPv)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-slate-900 p-6 rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-card">
|
|
<h3 className="text-lg font-bold mb-6">Letzte Aktivitäten</h3>
|
|
<div className="space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="flex items-center justify-between p-5 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700/50 hover:border-brand-500/30 transition-all">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center border border-brand-500/20">
|
|
<svg className="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
|
</div>
|
|
<div>
|
|
<p className="font-bold text-slate-800 dark:text-slate-100">Neuer Experte registriert</p>
|
|
<p className="text-xs text-slate-500 font-medium">Mila Superstar • Vor 10 Minuten</p>
|
|
</div>
|
|
</div>
|
|
<button className="px-4 py-2 text-xs font-bold text-brand-600 bg-brand-50 dark:bg-brand-500/10 rounded-lg hover:bg-brand-100 transition-all">Ansehen</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|