Initial commit

src/components/krow/ScheduleInterviewModal.jsx

@@ -0,0 +1,94 @@
+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-[#0A39DF] bg-[#EFF6FF] text-[#0A39DF]' : '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-[#0A39DF] focus:outline-none resize-none"
+              />
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={onClose}>Cancel</Button>
+              <Button onClick={handleSchedule} disabled={!date || !time} className="bg-[#0A39DF] hover:bg-[#082EB4]">
+                <Clock className="w-4 h-4 mr-2" /> Schedule
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}