Spaces:
Sleeping
Sleeping
File size: 2,765 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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import React from 'react';
import { createPortal } from 'react-dom';
import { Clock, AlertCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
interface CheckOutReminderDialogProps {
isOpen: boolean;
onClose: () => void;
onCheckOut: () => void;
isLoading?: boolean;
userName?: string;
workDuration?: string;
}
const CheckOutReminderDialog: React.FC<CheckOutReminderDialogProps> = ({
isOpen,
onClose,
onCheckOut,
isLoading = false,
userName = 'User',
workDuration = '00:00:00',
}) => {
if (!isOpen) return null;
const dialogContent = (
<div className="fixed inset-0 z-[9999] flex items-center justify-center overflow-y-auto p-4">
<div
className="fixed inset-0 bg-black/60 backdrop-blur-sm"
onClick={!isLoading ? onClose : undefined}
/>
<div className="relative z-[10000] 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-amber-100 text-amber-600">
<Clock className="h-6 w-6" />
</div>
<div className="flex-1">
<h2 className="text-lg font-semibold">Time to Check Out!</h2>
<p className="text-sm text-muted-foreground mt-2">
Hi <span className="font-medium">{userName}</span>, it's past 6:30 PM.
</p>
<p className="text-sm text-muted-foreground mt-1">
You've worked for <span className="font-semibold text-foreground">{workDuration}</span> today. Don't forget to check out!
</p>
</div>
</div>
<div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-md">
<div className="flex items-start gap-2">
<AlertCircle className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
<p className="text-xs text-amber-800">
Checking out helps maintain accurate attendance records and ensures your working hours are properly tracked.
</p>
</div>
</div>
<div className="flex justify-end gap-2 mt-6">
<Button
variant="outline"
onClick={onClose}
disabled={isLoading}
>
Remind Me Later
</Button>
<Button
onClick={onCheckOut}
disabled={isLoading}
>
{isLoading ? 'Checking Out...' : 'Check Out Now'}
</Button>
</div>
</div>
</div>
);
return createPortal(dialogContent, document.body);
};
export default CheckOutReminderDialog;
|