87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
/**
|
|
* Requests Stats Overview Component
|
|
* Displays statistics cards for requests with click handlers to filter
|
|
*/
|
|
|
|
import { FileText, Clock, CheckCircle, XCircle, Archive } from 'lucide-react';
|
|
import { StatsCard } from '@/components/dashboard/StatsCard';
|
|
import type { RequestStats } from '../types/requests.types';
|
|
|
|
interface RequestsStatsProps {
|
|
stats: RequestStats;
|
|
onStatusFilter?: (status: string) => void;
|
|
}
|
|
|
|
export function RequestsStats({ stats, onStatusFilter }: RequestsStatsProps) {
|
|
const handleCardClick = (status: string) => {
|
|
if (onStatusFilter) {
|
|
onStatusFilter(status);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4" data-testid="requests-stats">
|
|
<StatsCard
|
|
label="Total"
|
|
value={stats.total}
|
|
icon={FileText}
|
|
iconColor="text-blue-600"
|
|
gradient="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200"
|
|
textColor="text-blue-700"
|
|
valueColor="text-blue-900"
|
|
testId="stat-total"
|
|
onClick={onStatusFilter ? () => handleCardClick('all') : undefined}
|
|
/>
|
|
|
|
<StatsCard
|
|
label="Pending"
|
|
value={stats.pending}
|
|
icon={Clock}
|
|
iconColor="text-orange-600"
|
|
gradient="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200"
|
|
textColor="text-orange-700"
|
|
valueColor="text-orange-900"
|
|
testId="stat-pending"
|
|
onClick={onStatusFilter ? () => handleCardClick('pending') : undefined}
|
|
/>
|
|
|
|
<StatsCard
|
|
label="Approved"
|
|
value={stats.approved}
|
|
icon={CheckCircle}
|
|
iconColor="text-green-600"
|
|
gradient="bg-gradient-to-br from-green-50 to-green-100 border-green-200"
|
|
textColor="text-green-700"
|
|
valueColor="text-green-900"
|
|
testId="stat-approved"
|
|
onClick={onStatusFilter ? () => handleCardClick('approved') : undefined}
|
|
/>
|
|
|
|
<StatsCard
|
|
label="Rejected"
|
|
value={stats.rejected}
|
|
icon={XCircle}
|
|
iconColor="text-red-600"
|
|
gradient="bg-gradient-to-br from-red-50 to-red-100 border-red-200"
|
|
textColor="text-red-700"
|
|
valueColor="text-red-900"
|
|
testId="stat-rejected"
|
|
onClick={onStatusFilter ? () => handleCardClick('rejected') : undefined}
|
|
/>
|
|
|
|
<StatsCard
|
|
label="Closed"
|
|
value={stats.closed}
|
|
icon={Archive}
|
|
iconColor="text-purple-600"
|
|
gradient="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200"
|
|
textColor="text-purple-700"
|
|
valueColor="text-purple-900"
|
|
testId="stat-closed"
|
|
onClick={onStatusFilter ? () => handleCardClick('closed') : undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|