94 lines
3.9 KiB
JavaScript
94 lines
3.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Calendar, Clock, Video, Phone, User } from 'lucide-react';
|
|
|
|
export default function ScheduleInterviewModal({ open, onClose, application }) {
|
|
const [type, setType] = useState('video');
|
|
const [date, setDate] = useState('');
|
|
const [time, setTime] = useState('');
|
|
const [notes, setNotes] = useState('');
|
|
const [scheduled, setScheduled] = useState(false);
|
|
|
|
const handleSchedule = () => {
|
|
setScheduled(true);
|
|
setTimeout(() => {
|
|
setScheduled(false);
|
|
onClose();
|
|
}, 1500);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Schedule Interview</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{scheduled ? (
|
|
<div className="py-8 text-center">
|
|
<div className="w-12 h-12 rounded-full bg-[#D1FAE5] flex items-center justify-center mx-auto mb-3">
|
|
<Calendar className="w-6 h-6 text-[#059669]" />
|
|
</div>
|
|
<p className="text-[14px] font-medium text-[#111827]">Interview scheduled!</p>
|
|
<p className="text-[12px] text-[#6B7280]">{application?.applicant_name} will be notified.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label className="text-[13px] text-[#374151]">Interview Type</Label>
|
|
<div className="grid grid-cols-3 gap-2 mt-1.5">
|
|
{[
|
|
{ value: 'video', label: 'Video', icon: Video },
|
|
{ value: 'phone', label: 'Phone', icon: Phone },
|
|
{ value: 'inperson', label: 'In Person', icon: User },
|
|
].map((opt) => (
|
|
<button
|
|
key={opt.value}
|
|
onClick={() => setType(opt.value)}
|
|
className={`flex flex-col items-center gap-1 py-2.5 rounded-lg border text-[12px] font-medium transition-all ${
|
|
type === opt.value ? 'border-[#0838E0] bg-[#EEF3FE] text-[#0838E0]' : 'border-[#E5E7EB] text-[#6B7280] hover:bg-[#F9FAFB]'
|
|
}`}
|
|
>
|
|
<opt.icon className="w-4 h-4" />
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label className="text-[13px] text-[#374151]">Date</Label>
|
|
<Input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="mt-1.5" />
|
|
</div>
|
|
<div>
|
|
<Label className="text-[13px] text-[#374151]">Time</Label>
|
|
<Input type="time" value={time} onChange={(e) => setTime(e.target.value)} className="mt-1.5" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[13px] text-[#374151]">Notes (optional)</Label>
|
|
<textarea
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
placeholder="Add any prep notes..."
|
|
className="w-full mt-1.5 min-h-[60px] p-2.5 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0838E0] focus:outline-none resize-none"
|
|
/>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}>Cancel</Button>
|
|
<Button onClick={handleSchedule} disabled={!date || !time} className="bg-[#0838E0] hover:bg-[#062BAF]">
|
|
<Clock className="w-4 h-4 mr-2" /> Schedule
|
|
</Button>
|
|
</DialogFooter>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |