Satyam
be828b205d
- Added ActionCenterWidget, DetailDrawer, AgentSelectionModal - Implemented global ErrorBoundary and Chatbot resilience - Updated documentation (README, Structure, Status, Overview) - Refined responsive design and modal portals
256 lines
14 KiB
React
256 lines
14 KiB
React
import React, { useState, useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { X, UserPlus, Phone, CheckCircle, Calendar, Clock, MapPin, ArrowRight, Shield } from 'lucide-react';
|
|
import { useMockStore } from '../../data/mockStore';
|
|
import { AgentSelectionModal } from './AgentSelectionModal';
|
|
import { toast } from 'sonner';
|
|
|
|
export const ActionDetailDrawer = ({ isOpen, onClose, viewType, data }) => {
|
|
const { assignAgent, markLeadContacted, sendReminder } = useMockStore();
|
|
const [selectedItem, setSelectedItem] = useState(null);
|
|
const [isAgentModalOpen, setIsAgentModalOpen] = useState(false);
|
|
const [contactPopover, setContactPopover] = useState(null); // ID of item showing contact info
|
|
|
|
// Prevent body scroll when open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
return () => { document.body.style.overflow = 'unset'; };
|
|
}, [isOpen]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const getHeader = () => {
|
|
switch (viewType) {
|
|
case 'UNASSIGNED': return { title: 'Unassigned Leads', icon: UserPlus, color: 'text-blue-600', bg: 'bg-blue-100' };
|
|
case 'HOT': return { title: 'Hot Leads - Action Needed', icon: Phone, color: 'text-orange-600', bg: 'bg-orange-100' };
|
|
case 'RESCHEDULE': return { title: 'Reschedule Required', icon: Calendar, color: 'text-rose-600', bg: 'bg-rose-100' };
|
|
case 'SIGNATURE': return { title: 'Pending Signatures', icon: CheckCircle, color: 'text-purple-600', bg: 'bg-purple-100' };
|
|
default: return { title: 'Details', icon: Shield, color: 'text-gray-600', bg: 'bg-gray-100' };
|
|
}
|
|
};
|
|
|
|
const header = getHeader();
|
|
const Icon = header.icon;
|
|
|
|
// Handlers
|
|
const handleAssignClick = (item) => {
|
|
setSelectedItem(item);
|
|
setIsAgentModalOpen(true);
|
|
};
|
|
|
|
const handleAgentSelected = (agentId) => {
|
|
if (selectedItem) {
|
|
// Check if selectedItem is a wrapper or direct property
|
|
const propId = selectedItem.id || selectedItem.propertyData?.propertyId;
|
|
const success = assignAgent(propId, agentId);
|
|
if (success) {
|
|
setIsAgentModalOpen(false);
|
|
setSelectedItem(null);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleMarkContacted = (e, item) => {
|
|
e.stopPropagation();
|
|
const propId = item.id || item.propertyData?.propertyId;
|
|
markLeadContacted(propId);
|
|
};
|
|
|
|
const handleSendReminder = (item) => {
|
|
const propId = item.id || item.propertyData?.propertyId;
|
|
sendReminder(propId);
|
|
};
|
|
|
|
// Render Lists
|
|
const renderContent = () => {
|
|
if (viewType === 'UNASSIGNED') {
|
|
return data.unassignedLeads.map(item => (
|
|
<div key={item.id} className="p-4 bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 rounded-xl mb-3 flex justify-between items-center group hover:shadow-md transition-all">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="px-2 py-0.5 text-[10px] font-bold bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 rounded uppercase tracking-wider">
|
|
Lead
|
|
</span>
|
|
<span className="text-sm font-semibold text-zinc-900 dark:text-white">
|
|
{item.propertyData.propertyAddress.split(',')[0]}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-xs text-zinc-500">
|
|
<span className="flex items-center gap-1"><MapPin size={10} /> Plano, TX</span>
|
|
<span className="font-medium text-emerald-600 dark:text-emerald-400">Est. ${item.propertyData.currentEstimatedMarketValue.toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => handleAssignClick(item)}
|
|
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded-lg shadow-sm hover:shadow transition-all flex items-center gap-2"
|
|
>
|
|
<UserPlus size={14} /> Assign
|
|
</button>
|
|
</div>
|
|
));
|
|
}
|
|
|
|
if (viewType === 'HOT') {
|
|
return data.hotLeads.map(item => (
|
|
<div key={item.id} className="p-4 bg-white dark:bg-white/5 border border-orange-100 dark:border-orange-500/20 rounded-xl mb-3 relative">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<div>
|
|
<h4 className="text-sm font-bold text-zinc-900 dark:text-white mb-1">
|
|
{item.propertyData.propertyAddress.split(',')[0]}
|
|
</h4>
|
|
<p className="text-xs text-orange-600 dark:text-orange-400 font-medium">
|
|
Last Contact: {item.lastContactDate ? new Date(item.lastContactDate).toLocaleDateString() : 'Never'}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-xs font-bold text-zinc-500 block">Value</span>
|
|
<span className="text-sm font-mono text-zinc-900 dark:text-white">${item.propertyData.currentEstimatedMarketValue.toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 border-t border-zinc-100 dark:border-white/5 pt-3">
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setContactPopover(contactPopover === item.id ? null : item.id)}
|
|
className="px-3 py-1.5 bg-zinc-100 dark:bg-white/10 hover:bg-zinc-200 text-zinc-700 dark:text-white text-xs font-semibold rounded-lg transition-colors flex items-center gap-2"
|
|
>
|
|
<Phone size={12} /> Contact
|
|
</button>
|
|
{/* Simple Popover */}
|
|
{contactPopover === item.id && (
|
|
<div className="absolute top-full left-0 mt-2 w-64 bg-white dark:bg-zinc-800 shadow-xl rounded-xl border border-zinc-200 dark:border-zinc-700 p-4 z-50 animate-in fade-in zoom-in-95 duration-200">
|
|
<h5 className="text-xs font-bold text-zinc-400 uppercase mb-2">Owner Info</h5>
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-zinc-900 dark:text-white">{item.ownerData.fullName}</p>
|
|
<a href={`tel:${item.ownerData.primaryPhoneNumber}`} className="block text-sm text-blue-600 hover:underline flex items-center gap-2">
|
|
<Phone size={12} /> {item.ownerData.primaryPhoneNumber}
|
|
</a>
|
|
<a href={`mailto:${item.ownerData.emailAddress}`} className="block text-sm text-zinc-600 hover:text-zinc-900 truncate">
|
|
{item.ownerData.emailAddress}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={(e) => handleMarkContacted(e, item)}
|
|
className="flex-1 px-3 py-1.5 bg-orange-50 dark:bg-orange-900/20 hover:bg-orange-100 text-orange-700 dark:text-orange-300 text-xs font-semibold rounded-lg transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<CheckCircle size={12} /> Mark Contacted
|
|
</button>
|
|
</div>
|
|
</div>
|
|
));
|
|
}
|
|
|
|
if (viewType === 'RESCHEDULE') {
|
|
return data.rescheduleMeets.map(item => (
|
|
<div key={item.id} className="p-4 bg-white dark:bg-white/5 border border-rose-100 dark:border-rose-500/20 rounded-xl mb-3">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<h4 className="text-sm font-bold text-zinc-900 dark:text-white">{item.customerName}</h4>
|
|
<p className="text-xs text-zinc-500 mt-0.5">Original: {new Date(item.date).toLocaleDateString()} at {item.time}</p>
|
|
</div>
|
|
<span className={`px-2 py-0.5 text-[10px] font-bold rounded uppercase ${item.status === 'Cancelled' ? 'bg-red-100 text-red-600' : 'bg-yellow-100 text-yellow-600'
|
|
}`}>
|
|
{item.status}
|
|
</span>
|
|
</div>
|
|
<div className="mt-3 flex justify-end">
|
|
<button className="px-3 py-1.5 border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 text-zinc-600 dark:text-zinc-300 text-xs font-semibold rounded-lg flex items-center gap-2">
|
|
<Calendar size={12} /> Open Calendar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
));
|
|
}
|
|
|
|
if (viewType === 'SIGNATURE') {
|
|
return data.pendingSignatures.map(item => (
|
|
<div key={item.id} className="p-4 bg-white dark:bg-white/5 border border-purple-100 dark:border-purple-500/20 rounded-xl mb-3">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<h4 className="text-sm font-bold text-zinc-900 dark:text-white">{item.ownerData.fullName}</h4>
|
|
<span className="text-xs font-mono text-purple-600 font-bold">${item.proposalValue?.toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-xs text-zinc-500 mb-4">
|
|
<span className="flex items-center gap-1"><Clock size={10} /> Sent: {item.proposalSentDate ? new Date(item.proposalSentDate).toLocaleDateString() : 'N/A'}</span>
|
|
<span className="flex items-center gap-1"><MapPin size={10} /> {item.propertyData.propertyAddress.split(',')[0]}</span>
|
|
</div>
|
|
<button
|
|
onClick={() => handleSendReminder(item)}
|
|
className="w-full px-3 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white text-xs font-bold rounded-lg shadow-sm flex items-center justify-center gap-2"
|
|
>
|
|
<ArrowRight size={12} /> Send Reminder
|
|
</button>
|
|
</div>
|
|
));
|
|
}
|
|
};
|
|
|
|
return createPortal(
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[40] transition-opacity"
|
|
onClick={onClose}
|
|
></div>
|
|
|
|
{/* Drawer */}
|
|
<div className={`
|
|
fixed inset-y-0 right-0 w-full sm:w-[450px]
|
|
bg-white dark:bg-zinc-900 shadow-2xl z-[50]
|
|
border-l border-zinc-200 dark:border-zinc-800
|
|
transform transition-transform duration-300 ease-in-out
|
|
flex flex-col
|
|
`}>
|
|
|
|
{/* Header */}
|
|
<div className={`p-4 md:p-6 border-b border-zinc-100 dark:border-zinc-800 flex justify-between items-center ${header.bg} dark:bg-opacity-5 flex-shrink-0`}>
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 bg-white rounded-lg shadow-sm ${header.color}`}>
|
|
<Icon size={20} />
|
|
</div>
|
|
<h3 className="text-base md:text-lg font-bold text-zinc-900 dark:text-white truncate max-w-[200px] md:max-w-none">
|
|
{header.title}
|
|
</h3>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 p-2 md:p-1 hover:bg-black/5 rounded-full transition-colors active:scale-95"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-4 md:p-6 bg-zinc-50/50 dark:bg-zinc-950/50 overscroll-contain">
|
|
{renderContent()}
|
|
|
|
{/* Empty State */}
|
|
{((viewType === 'UNASSIGNED' && data.unassignedLeads.length === 0) ||
|
|
(viewType === 'HOT' && data.hotLeads.length === 0) ||
|
|
(viewType === 'RESCHEDULE' && data.rescheduleMeets.length === 0) ||
|
|
(viewType === 'SIGNATURE' && data.pendingSignatures.length === 0)) && (
|
|
<div className="text-center py-12 text-zinc-400">
|
|
<CheckCircle size={48} className="mx-auto mb-4 opacity-50" />
|
|
<p className="text-sm">All caught up! No actions required.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nested Modal */}
|
|
<AgentSelectionModal
|
|
isOpen={isAgentModalOpen}
|
|
onClose={() => setIsAgentModalOpen(false)}
|
|
onSelect={handleAgentSelected}
|
|
/>
|
|
</>,
|
|
document.body
|
|
);
|
|
};
|