julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add new dashboard components and enhance UI

Browse Source 
- Introduced new CSS variables for light theme in `globals.css` to improve visual consistency.
- Replaced `Card` component with `StatCard`, `ProgressBar`, and `MetricCard` in `DashboardStats`, `ProductivityAnalytics`, and `RecentTasks` for better modularity and reusability.
- Updated `QuickActions` to use `ActionCard` for a more cohesive design.
- Enhanced `Badge` and `Button` components with new variants for improved styling options.
- Added new UI showcase section in `UIShowcaseClient` to demonstrate the new dashboard components.
This commit is contained in:
Julien Froidefond
2025-09-28 21:22:33 +02:00
parent 0e2eaf1052
commit bdf8ab9fb4
16 changed files with 753 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/dashboard/DashboardStats.tsx
View File

@@ -2,6 +2,7 @@
import { TaskStats } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { StatCard, ProgressBar } from '@/components/ui';
import { getDashboardStatColors } from '@/lib/status-config';
interface DashboardStatsProps {
@@ -18,77 +19,55 @@ export function DashboardStats({ stats }: DashboardStatsProps) {
title: 'Total Tâches',
value: stats.total,
icon: '📋',
type: 'total' as const,
...getDashboardStatColors('total')
color: 'default' as const
},
{
title: 'À Faire',
value: stats.todo,
icon: '⏳',
type: 'todo' as const,
...getDashboardStatColors('todo')
color: 'warning' as const
},
{
title: 'En Cours',
value: stats.inProgress,
icon: '🔄',
type: 'inProgress' as const,
...getDashboardStatColors('inProgress')
color: 'primary' as const
},
{
title: 'Terminées',
value: stats.completed,
icon: '✅',
type: 'completed' as const,
...getDashboardStatColors('completed')
color: 'success' as const
}
];
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
{statCards.map((stat, index) => (
<Card key={index} className="p-6 hover:shadow-lg transition-shadow">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">
{stat.title}
</p>
<p className={`text-3xl font-bold ${stat.textColor}`}>
{stat.value}
</p>
</div>
<div className="text-3xl">
{stat.icon}
</div>
</div>
</Card>
<StatCard
key={index}
title={stat.title}
value={stat.value}
icon={stat.icon}
color={stat.color}
/>
))}
{/* Cartes de pourcentage */}
<Card className="p-6 hover:shadow-lg transition-shadow md:col-span-2 lg:col-span-2">
<h3 className="text-lg font-semibold mb-4">Taux de Completion</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Terminées</span>
<span className={`font-bold ${getDashboardStatColors('completed').textColor}`}>{completionRate}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full transition-all duration-300 ${getDashboardStatColors('completed').progressColor}`}
style={{ width: `${completionRate}%` }}
/>
</div>
<ProgressBar
value={completionRate}
label="Terminées"
color="success"
/>
<div className="flex items-center justify-between">
<span className="text-sm font-medium">En Cours</span>
<span className={`font-bold ${getDashboardStatColors('inProgress').textColor}`}>{inProgressRate}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full transition-all duration-300 ${getDashboardStatColors('inProgress').progressColor}`}
style={{ width: `${inProgressRate}%` }}
/>
</div>
<ProgressBar
value={inProgressRate}
label="En Cours"
color="primary"
/>
</div>
</Card>