Spaces:
Sleeping
Sleeping
File size: 2,290 Bytes
d97b8f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import React from 'react';
import { AlertCircle, Clock } from 'lucide-react';
import { Button } from '@/components/ui/button';
interface CheckInBlockerDialogProps {
isOpen: boolean;
onCheckIn: () => void;
isLoading?: boolean;
userName?: string;
}
const CheckInBlockerDialog: React.FC<CheckInBlockerDialogProps> = ({
isOpen,
onCheckIn,
isLoading = false,
userName = 'User',
}) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-[999] flex items-center justify-center overflow-y-auto p-4">
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm" />
<div className="relative z-[1000] w-full max-w-md rounded-lg border bg-background p-6 shadow-lg">
<div className="flex gap-4 items-start mb-4">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-orange-100 text-orange-600">
<Clock className="h-6 w-6" />
</div>
<div className="flex-1">
<h2 className="text-lg font-semibold">Check-In Required</h2>
<p className="text-sm text-muted-foreground mt-2">
Welcome back, <span className="font-medium">{userName}</span>!
</p>
<p className="text-sm text-muted-foreground mt-1">
You haven't checked in yet today. Please check in to continue using the application.
</p>
</div>
</div>
<div className="mt-6 p-4 bg-orange-50 border border-orange-200 rounded-md">
<div className="flex items-start gap-2">
<AlertCircle className="h-4 w-4 text-orange-600 mt-0.5 flex-shrink-0" />
<p className="text-xs text-orange-800">
Checking in helps track your attendance and working hours. This is required before accessing the system.
</p>
</div>
</div>
<div className="flex justify-end mt-6">
<Button
onClick={onCheckIn}
disabled={isLoading}
className="w-full sm:w-auto"
>
{isLoading ? 'Checking In...' : 'Check In Now'}
</Button>
</div>
</div>
</div>
);
};
export default CheckInBlockerDialog;
|