47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { Badge } from '@/components/ui/badge';
|
|
import { cn } from '@/lib/utils';
|
|
import { differenceInDays, format, parseISO } from 'date-fns';
|
|
import { Calendar, CheckCircle, XCircle } from 'lucide-react';
|
|
|
|
interface Props {
|
|
enrollment: ExamEnrollment;
|
|
showDate?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const EnrollmentStatus = ({ enrollment, showDate = true, className }: Props) => {
|
|
const isActive = enrollment.is_active;
|
|
const expiryDate = enrollment.expiry_date ? parseISO(enrollment.expiry_date) : null;
|
|
const daysRemaining = expiryDate ? differenceInDays(expiryDate, new Date()) : null;
|
|
|
|
return (
|
|
<div className={cn('flex items-center gap-2', className)}>
|
|
<Badge variant={isActive ? 'default' : 'destructive'} className="gap-1">
|
|
{isActive ? <CheckCircle className="h-3 w-3" /> : <XCircle className="h-3 w-3" />}
|
|
{isActive ? 'Active' : 'Expired'}
|
|
</Badge>
|
|
|
|
{showDate && enrollment.enrollment_type === 'limited' && expiryDate && (
|
|
<div className="flex items-center gap-1 text-sm text-gray-600">
|
|
<Calendar className="h-3.5 w-3.5" />
|
|
{isActive && daysRemaining !== null && daysRemaining > 0 ? (
|
|
<span>
|
|
{daysRemaining} day{daysRemaining !== 1 ? 's' : ''} left
|
|
</span>
|
|
) : (
|
|
<span>Expired on {format(expiryDate, 'MMM dd, yyyy')}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{enrollment.enrollment_type === 'lifetime' && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
Lifetime Access
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EnrollmentStatus;
|