Initial commit

src/components/krow/MessageCandidateModal.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Mail, Phone, Send, CheckCircle2 } from 'lucide-react';
+
+export default function MessageCandidateModal({ open, onClose, application }) {
+  const [channel, setChannel] = useState('message');
+  const [message, setMessage] = useState('');
+  const [sent, setSent] = useState(false);
+
+  const handleSend = () => {
+    setSent(true);
+    setTimeout(() => {
+      setSent(false);
+      setMessage('');
+      onClose();
+    }, 1500);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Message {application?.applicant_name}</DialogTitle>
+        </DialogHeader>
+
+        {sent ? (
+          <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">
+              <CheckCircle2 className="w-6 h-6 text-[#059669]" />
+            </div>
+            <p className="text-[14px] font-medium text-[#111827]">Message sent!</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-2">
+              <button
+                onClick={() => setChannel('message')}
+                className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
+                  channel === 'message' ? 'border-[#0A39DF] bg-[#EFF6FF] text-[#0A39DF]' : 'border-[#E5E7EB] text-[#6B7280]'
+                }`}
+              >
+                <Mail className="w-4 h-4" /> Message
+              </button>
+              <button
+                onClick={() => setChannel('call')}
+                className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
+                  channel === 'call' ? 'border-[#0A39DF] bg-[#EFF6FF] text-[#0A39DF]' : 'border-[#E5E7EB] text-[#6B7280]'
+                }`}
+              >
+                <Phone className="w-4 h-4" /> Call
+              </button>
+            </div>
+
+            {channel === 'call' ? (
+              <div className="py-6 text-center text-[13px] text-[#6B7280]">
+                <Phone className="w-8 h-8 text-[#0A39DF] mx-auto mb-2" />
+                Calling {application?.phone || 'candidate'}...
+              </div>
+            ) : (
+              <textarea
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                placeholder={`Hi ${application?.applicant_name?.split(' ')[0]}, ...`}
+                className="w-full min-h-[100px] p-3 text-[14px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none"
+              />
+            )}
+
+            <DialogFooter>
+              <Button variant="outline" onClick={onClose}>Cancel</Button>
+              <Button onClick={handleSend} disabled={channel === 'message' && !message.trim()} className="bg-[#0A39DF] hover:bg-[#082EB4]">
+                <Send className="w-4 h-4 mr-2" /> Send
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}