97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
/**
|
|
* My Requests Stats Section Component
|
|
*/
|
|
|
|
import { FileText, Clock, Pause, CheckCircle, XCircle, Edit } from 'lucide-react';
|
|
import { StatsCard } from '@/components/dashboard/StatsCard';
|
|
import { MyRequestsStats } from '../types/myRequests.types';
|
|
|
|
interface MyRequestsStatsProps {
|
|
stats: MyRequestsStats;
|
|
onStatusFilter?: (status: string) => void;
|
|
}
|
|
|
|
export function MyRequestsStatsSection({ stats, onStatusFilter }: MyRequestsStatsProps) {
|
|
const handleCardClick = (status: string) => {
|
|
if (onStatusFilter) {
|
|
onStatusFilter(status);
|
|
}
|
|
};
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4" data-testid="my-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="Paused"
|
|
value={stats.paused}
|
|
icon={Pause}
|
|
iconColor="text-amber-600"
|
|
gradient="bg-gradient-to-br from-amber-50 to-amber-100 border-amber-200"
|
|
textColor="text-amber-700"
|
|
valueColor="text-amber-900"
|
|
testId="stat-paused"
|
|
onClick={onStatusFilter ? () => handleCardClick('paused') : 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="Draft"
|
|
value={stats.draft}
|
|
icon={Edit}
|
|
iconColor="text-gray-600"
|
|
gradient="bg-gradient-to-br from-gray-50 to-gray-100 border-gray-200"
|
|
textColor="text-gray-700"
|
|
valueColor="text-gray-900"
|
|
testId="stat-draft"
|
|
onClick={onStatusFilter ? () => handleCardClick('draft') : undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|