Satyam
5fef584d7d
- Added visually hidden labels, IDs, and names to form inputs across all key components and pages (modals, directories, chatbots) - Added tabIndex and onKeyDown handlers to clickable table rows in OwnerProjectDetail for keyboard accessibility - Validated existing ARIA roles and Escape key bindings on modal components
550 lines
34 KiB
React
550 lines
34 KiB
React
import React, { useState, useMemo, useEffect, useRef } from 'react';
|
|
import { useMockStore } from '../data/mockStore';
|
|
import { useTheme } from '../context/ThemeContext';
|
|
import { Calendar, User, Clock, MapPin, MoreHorizontal, Filter, X, ChevronDown } from 'lucide-react';
|
|
import { SpotlightCard } from '../components/SpotlightCard';
|
|
|
|
const AdminSchedule = () => {
|
|
const { meetings } = useMockStore();
|
|
const { theme } = useTheme();
|
|
|
|
// Refs for click-outside detection
|
|
const dateDropdownRef = useRef(null);
|
|
const statusDropdownRef = useRef(null);
|
|
|
|
// Filter states
|
|
const [dateFilter, setDateFilter] = useState('all'); // all, today, week, month, quarter, custom
|
|
const [customDateRange, setCustomDateRange] = useState({ start: '', end: '' });
|
|
const [statusFilter, setStatusFilter] = useState([]);
|
|
const [showDateDropdown, setShowDateDropdown] = useState(false);
|
|
const [showStatusDropdown, setShowStatusDropdown] = useState(false);
|
|
const [openDropdownId, setOpenDropdownId] = useState(null);
|
|
|
|
// Click-outside detection for filter dropdowns
|
|
useEffect(() => {
|
|
const handleClickOutside = (event) => {
|
|
if (dateDropdownRef.current && !dateDropdownRef.current.contains(event.target)) {
|
|
setShowDateDropdown(false);
|
|
}
|
|
if (statusDropdownRef.current && !statusDropdownRef.current.contains(event.target)) {
|
|
setShowStatusDropdown(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, []);
|
|
|
|
// Click-outside detection for action dropdowns
|
|
useEffect(() => {
|
|
const handleClickOutside = (event) => {
|
|
if (openDropdownId && !event.target.closest('.action-dropdown-container')) {
|
|
setOpenDropdownId(null);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, [openDropdownId]);
|
|
|
|
// Get unique statuses from meetings
|
|
const availableStatuses = useMemo(() => {
|
|
return [...new Set(meetings.map(m => m.status))];
|
|
}, [meetings]);
|
|
|
|
// Filter meetings based on selected filters
|
|
const filteredMeetings = useMemo(() => {
|
|
let filtered = [...meetings];
|
|
|
|
// Date filtering
|
|
if (dateFilter !== 'all') {
|
|
const now = new Date();
|
|
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
|
|
filtered = filtered.filter(meeting => {
|
|
const meetingDate = new Date(meeting.date);
|
|
|
|
switch (dateFilter) {
|
|
case 'today':
|
|
return meetingDate.toDateString() === today.toDateString();
|
|
case 'week':
|
|
const weekStart = new Date(today);
|
|
weekStart.setDate(today.getDate() - today.getDay());
|
|
const weekEnd = new Date(weekStart);
|
|
weekEnd.setDate(weekStart.getDate() + 6);
|
|
return meetingDate >= weekStart && meetingDate <= weekEnd;
|
|
case 'month':
|
|
return meetingDate.getMonth() === now.getMonth() &&
|
|
meetingDate.getFullYear() === now.getFullYear();
|
|
case 'quarter':
|
|
const quarter = Math.floor(now.getMonth() / 3);
|
|
const meetingQuarter = Math.floor(meetingDate.getMonth() / 3);
|
|
return meetingQuarter === quarter &&
|
|
meetingDate.getFullYear() === now.getFullYear();
|
|
case 'custom':
|
|
if (customDateRange.start && customDateRange.end) {
|
|
const start = new Date(customDateRange.start);
|
|
const end = new Date(customDateRange.end);
|
|
return meetingDate >= start && meetingDate <= end;
|
|
}
|
|
return true;
|
|
default:
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Status filtering
|
|
if (statusFilter.length > 0) {
|
|
filtered = filtered.filter(meeting => statusFilter.includes(meeting.status));
|
|
}
|
|
|
|
return filtered;
|
|
}, [meetings, dateFilter, customDateRange, statusFilter]);
|
|
|
|
const toggleStatusFilter = (status) => {
|
|
setStatusFilter(prev =>
|
|
prev.includes(status)
|
|
? prev.filter(s => s !== status)
|
|
: [...prev, status]
|
|
);
|
|
};
|
|
|
|
const clearFilters = () => {
|
|
setDateFilter('all');
|
|
setCustomDateRange({ start: '', end: '' });
|
|
setStatusFilter([]);
|
|
};
|
|
|
|
const handleActionClick = (meetingId, action) => {
|
|
console.log(`Action ${action} for meeting ${meetingId}`);
|
|
// TODO: Implement actual actions
|
|
setOpenDropdownId(null);
|
|
};
|
|
|
|
const [viewMode, setViewMode] = useState('list'); // 'list' or 'calendar'
|
|
|
|
// Mock color mapping for agents
|
|
const agentColors = {
|
|
'a1': 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800',
|
|
'a2': 'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800',
|
|
'a3': 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800',
|
|
'a4': 'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800',
|
|
'a5': 'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-300 dark:border-pink-800',
|
|
};
|
|
|
|
const getAgentColor = (agentId) => {
|
|
// Simple hash or lookup
|
|
const id = agentId?.toLowerCase() || 'a1';
|
|
return agentColors[id] || agentColors['a1'];
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white selection:bg-blue-500/30 relative pb-20 transition-colors duration-300">
|
|
{/* Ambient Background Glows */}
|
|
<div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
|
|
<div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-purple-500/5 dark:bg-purple-900/10 rounded-full blur-[120px]" />
|
|
<div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-blue-500/5 dark:bg-blue-900/10 rounded-full blur-[120px]" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 p-8 max-w-7xl mx-auto space-y-8">
|
|
<header className="flex justify-between items-end">
|
|
<div>
|
|
<h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60 mb-2 tracking-tight">Team Schedule</h1>
|
|
<p className="text-zinc-600 dark:text-zinc-400">Manage field agent appointments</p>
|
|
</div>
|
|
|
|
{/* View Toggle */}
|
|
<div className="flex bg-zinc-100 dark:bg-zinc-800 p-1 rounded-xl border border-zinc-200 dark:border-zinc-700">
|
|
<button
|
|
onClick={() => setViewMode('list')}
|
|
className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${viewMode === 'list'
|
|
? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
|
|
: 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
List View
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('calendar')}
|
|
className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${viewMode === 'calendar'
|
|
? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
|
|
: 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
Calendar View
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Filters Section (Only show relevant filters for list view potentially, or both) */}
|
|
<div className="flex flex-wrap gap-4 items-center">
|
|
{/* Date Filter */}
|
|
<div className="relative" ref={dateDropdownRef}>
|
|
<button
|
|
onClick={() => setShowDateDropdown(!showDateDropdown)}
|
|
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-white/[0.04] border border-zinc-200 dark:border-white/10 rounded-lg text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-white/[0.07] transition-colors"
|
|
>
|
|
<Calendar size={16} />
|
|
{dateFilter === 'all' ? 'All Dates' :
|
|
dateFilter === 'today' ? 'Today' :
|
|
dateFilter === 'week' ? 'This Week' :
|
|
dateFilter === 'month' ? 'This Month' :
|
|
dateFilter === 'quarter' ? 'This Quarter' :
|
|
'Custom Range'}
|
|
<ChevronDown size={16} />
|
|
</button>
|
|
|
|
{showDateDropdown && (
|
|
<div className="absolute top-full mt-2 left-0 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700/50 rounded-lg backdrop-blur-xl shadow-2xl z-50 min-w-[200px]">
|
|
<button
|
|
onClick={() => { setDateFilter('all'); setShowDateDropdown(false); }}
|
|
className="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
All Dates
|
|
</button>
|
|
<button
|
|
onClick={() => { setDateFilter('today'); setShowDateDropdown(false); }}
|
|
className="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
Today
|
|
</button>
|
|
<button
|
|
onClick={() => { setDateFilter('week'); setShowDateDropdown(false); }}
|
|
className="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
This Week
|
|
</button>
|
|
<button
|
|
onClick={() => { setDateFilter('month'); setShowDateDropdown(false); }}
|
|
className="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
This Month
|
|
</button>
|
|
<button
|
|
onClick={() => { setDateFilter('quarter'); setShowDateDropdown(false); }}
|
|
className="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
This Quarter
|
|
</button>
|
|
<div className="border-t border-zinc-200 dark:border-zinc-700/50 p-3">
|
|
<p className="text-xs font-semibold text-zinc-500 dark:text-zinc-400 mb-2">Custom Range</p>
|
|
<label htmlFor="custom-date-start" className="sr-only">Start Date</label>
|
|
<input
|
|
id="custom-date-start"
|
|
name="custom-date-start"
|
|
type="date"
|
|
value={customDateRange.start}
|
|
onChange={(e) => setCustomDateRange(prev => ({ ...prev, start: e.target.value }))}
|
|
className="w-full px-2 py-1 text-xs bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded mb-2 text-zinc-900 dark:text-white"
|
|
placeholder="Start date"
|
|
/>
|
|
<label htmlFor="custom-date-end" className="sr-only">End Date</label>
|
|
<input
|
|
id="custom-date-end"
|
|
name="custom-date-end"
|
|
type="date"
|
|
value={customDateRange.end}
|
|
onChange={(e) => setCustomDateRange(prev => ({ ...prev, end: e.target.value }))}
|
|
className="w-full px-2 py-1 text-xs bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded mb-2 text-zinc-900 dark:text-white"
|
|
placeholder="End date"
|
|
/>
|
|
<button
|
|
onClick={() => { setDateFilter('custom'); setShowDateDropdown(false); }}
|
|
disabled={!customDateRange.start || !customDateRange.end}
|
|
className="w-full px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Apply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Status Filter */}
|
|
<div className="relative" ref={statusDropdownRef}>
|
|
<button
|
|
onClick={() => setShowStatusDropdown(!showStatusDropdown)}
|
|
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-white/[0.04] border border-zinc-200 dark:border-white/10 rounded-lg text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-white/[0.07] transition-colors"
|
|
>
|
|
<Filter size={16} />
|
|
Status {statusFilter.length > 0 && `(${statusFilter.length})`}
|
|
<ChevronDown size={16} />
|
|
</button>
|
|
|
|
{showStatusDropdown && (
|
|
<div className="absolute top-full mt-2 left-0 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700/50 rounded-lg backdrop-blur-xl shadow-2xl z-50 min-w-[200px]">
|
|
{availableStatuses.map(status => (
|
|
<label
|
|
key={status}
|
|
htmlFor={`status-filter-${status.replace(/\s+/g, '-')}`}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer transition-colors"
|
|
>
|
|
<input
|
|
id={`status-filter-${status.replace(/\s+/g, '-')}`}
|
|
name={`status-filter-${status.replace(/\s+/g, '-')}`}
|
|
type="checkbox"
|
|
checked={statusFilter.includes(status)}
|
|
onChange={() => toggleStatusFilter(status)}
|
|
className="rounded border-zinc-300 dark:border-zinc-600"
|
|
/>
|
|
{status}
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Clear Filters */}
|
|
{(dateFilter !== 'all' || statusFilter.length > 0) && (
|
|
<button
|
|
onClick={clearFilters}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
|
>
|
|
<X size={16} />
|
|
Clear Filters
|
|
</button>
|
|
)}
|
|
|
|
{/* Results Count */}
|
|
<div className="ml-auto text-sm text-zinc-600 dark:text-zinc-400">
|
|
Showing {filteredMeetings.length} of {meetings.length} appointments
|
|
</div>
|
|
</div>
|
|
|
|
<SpotlightCard className="overflow-hidden">
|
|
<div className="p-6 border-b border-zinc-200 dark:border-zinc-800">
|
|
<h2 className="text-xl font-bold text-zinc-900 dark:text-white flex items-center">
|
|
<Calendar size={20} className="text-blue-500 mr-2" />
|
|
{viewMode === 'list' ? 'All Active Appointments' : 'Calendar Overview'}
|
|
</h2>
|
|
</div>
|
|
|
|
{viewMode === 'list' ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm text-zinc-600 dark:text-zinc-400">
|
|
<thead className="bg-zinc-100 dark:bg-zinc-950 text-zinc-700 dark:text-zinc-200 uppercase font-bold text-xs">
|
|
<tr>
|
|
<th className="px-6 py-4 min-w-[150px]">Agent</th>
|
|
<th className="px-6 py-4 min-w-[180px]">Customer</th>
|
|
<th className="px-6 py-4 min-w-[120px]">Property</th>
|
|
<th className="px-6 py-4 min-w-[160px]">Date & Time</th>
|
|
<th className="px-6 py-4 min-w-[120px]">Status</th>
|
|
<th className="px-6 py-4 text-right min-w-[150px]">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
|
|
{filteredMeetings.length === 0 ? (
|
|
<tr>
|
|
<td colSpan="6" className="px-6 py-12 text-center text-zinc-500 dark:text-zinc-400">
|
|
No appointments found matching the selected filters.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filteredMeetings.map((meeting) => (
|
|
<tr key={meeting.id} className="hover:bg-zinc-50 dark:hover:bg-white/[0.03] transition-colors">
|
|
<td className="px-6 py-4">
|
|
<div className="flex items-center space-x-3">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs ${getAgentColor(meeting.agentId)}`}>
|
|
{meeting.agentId}
|
|
</div>
|
|
<span className="font-medium text-zinc-900 dark:text-zinc-200 whitespace-normal">Agent {meeting.agentId}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 text-zinc-900 dark:text-zinc-300 whitespace-normal">{meeting.customerName}</td>
|
|
<td className="px-6 py-4 text-zinc-700 dark:text-zinc-400">{meeting.propertyId}</td>
|
|
<td className="px-6 py-4">
|
|
<div className="flex flex-col">
|
|
<span className="text-zinc-900 dark:text-zinc-200">{meeting.date}</span>
|
|
<span className="text-xs text-zinc-600 dark:text-zinc-400">{meeting.time}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className={`px-2 py-1 text-xs font-semibold rounded whitespace-nowrap ${meeting.status === 'Completed' ? 'bg-green-500/20 text-green-600 dark:text-green-400' :
|
|
meeting.status === 'Scheduled' ? 'bg-blue-500/20 text-blue-600 dark:text-blue-400' :
|
|
meeting.status === 'Converted' ? 'bg-purple-500/20 text-purple-600 dark:text-purple-400' :
|
|
meeting.status === 'Cancelled' ? 'bg-red-500/20 text-red-600 dark:text-red-400' :
|
|
'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400'
|
|
}`}>
|
|
{meeting.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<div className="flex items-center justify-end gap-3">
|
|
<button className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 text-xs font-bold">
|
|
Reschedule
|
|
</button>
|
|
<div className="relative action-dropdown-container">
|
|
<button
|
|
onClick={() => setOpenDropdownId(openDropdownId === meeting.id ? null : meeting.id)}
|
|
className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors"
|
|
>
|
|
<MoreHorizontal size={16} />
|
|
</button>
|
|
|
|
{openDropdownId === meeting.id && (
|
|
<div className="absolute right-0 top-full mt-1 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700/50 rounded-lg backdrop-blur-xl shadow-2xl z-50 min-w-[160px]">
|
|
<button
|
|
onClick={() => handleActionClick(meeting.id, 'view')}
|
|
className="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
View Details
|
|
</button>
|
|
<button
|
|
onClick={() => handleActionClick(meeting.id, 'reschedule')}
|
|
className="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
Reschedule
|
|
</button>
|
|
<button
|
|
onClick={() => handleActionClick(meeting.id, 'complete')}
|
|
className="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
Mark Complete
|
|
</button>
|
|
<button
|
|
onClick={() => handleActionClick(meeting.id, 'cancel')}
|
|
className="w-full text-left px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<CalendarView meetings={filteredMeetings} getAgentColor={getAgentColor} />
|
|
)}
|
|
</SpotlightCard>
|
|
</div>
|
|
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --- Custom Month View Calendar ---
|
|
const CalendarView = ({ meetings, getAgentColor }) => {
|
|
// Current month view state
|
|
const [currentDate, setCurrentDate] = useState(new Date());
|
|
|
|
const getDaysInMonth = (date) => {
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth();
|
|
const days = new Date(year, month + 1, 0).getDate();
|
|
const firstDay = new Date(year, month, 1).getDay();
|
|
return { days, firstDay };
|
|
};
|
|
|
|
const { days, firstDay } = useMemo(() => getDaysInMonth(currentDate), [currentDate]);
|
|
|
|
const changeMonth = (offset) => {
|
|
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + offset, 1));
|
|
};
|
|
|
|
// Group meetings by date (using local date string YYYY-MM-DD)
|
|
const meetingsByDate = useMemo(() => {
|
|
const map = {};
|
|
meetings.forEach(m => {
|
|
// Assuming m.date is YYYY-MM-DD or parseable
|
|
const d = new Date(m.date);
|
|
// We need to compare local dates
|
|
const key = d.getDate(); // 1-31
|
|
const monthMatches = d.getMonth() === currentDate.getMonth() && d.getFullYear() === currentDate.getFullYear();
|
|
|
|
if (monthMatches) {
|
|
if (!map[key]) map[key] = [];
|
|
map[key].push(m);
|
|
}
|
|
});
|
|
return map;
|
|
}, [meetings, currentDate]);
|
|
|
|
const renderCalendarCells = () => {
|
|
const cells = [];
|
|
// Empty cells for padding before the first day
|
|
for (let i = 0; i < firstDay; i++) {
|
|
cells.push(<div key={`empty-${i}`} className="h-32 bg-zinc-50/50 dark:bg-zinc-900/30 border-r border-b border-zinc-200 dark:border-zinc-800"></div>);
|
|
}
|
|
|
|
// Days
|
|
for (let d = 1; d <= days; d++) {
|
|
const dayMeetings = meetingsByDate[d] || [];
|
|
const isToday = new Date().toDateString() === new Date(currentDate.getFullYear(), currentDate.getMonth(), d).toDateString();
|
|
|
|
cells.push(
|
|
<div key={`day-${d}`} className={`group h-32 p-2 border-r border-b border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors relative overflow-y-auto custom-scrollbar ${isToday ? 'bg-blue-50/30 dark:bg-blue-500/5' : ''}`}>
|
|
<div className="flex justify-between items-start mb-1">
|
|
<span className={`text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full ${isToday ? 'bg-blue-500 text-white' : 'text-zinc-500 dark:text-zinc-400'}`}>
|
|
{d}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-1">
|
|
{dayMeetings.map(m => (
|
|
<div
|
|
key={m.id}
|
|
className={`text-[10px] truncate px-1.5 py-1 rounded border shadow-sm cursor-pointer hover:opacity-80 ${getAgentColor(m.agentId)}`}
|
|
title={`${m.time} - ${m.customerName} (${m.status})`}
|
|
>
|
|
<span className="font-bold mr-1">{m.time}</span>
|
|
{m.customerName}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return cells;
|
|
};
|
|
|
|
return (
|
|
<div className="p-4">
|
|
{/* Calendar Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-xl font-bold text-zinc-900 dark:text-white capitalize">
|
|
{currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
|
|
</h3>
|
|
<div className="flex gap-2">
|
|
<button onClick={() => changeMonth(-1)} className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">Before</button>
|
|
<button onClick={() => setCurrentDate(new Date())} className="px-4 py-2 rounded-lg bg-blue-500 text-white text-sm font-bold hover:bg-blue-600 transition-colors">Today</button>
|
|
<button onClick={() => changeMonth(1)} className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Calendar Grid */}
|
|
<div className="border-t border-l border-zinc-200 dark:border-zinc-800 rounded-lg overflow-hidden">
|
|
{/* Weekday Headers */}
|
|
<div className="grid grid-cols-7 bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800">
|
|
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
|
|
<div key={day} className="py-2 text-center text-xs font-bold uppercase text-zinc-500 dark:text-zinc-400 border-r border-zinc-200 dark:border-zinc-800 last:border-r-0">
|
|
{day}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Days Grid */}
|
|
<div className="grid grid-cols-7 bg-white dark:bg-[#09090b]">
|
|
{renderCalendarCells()}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="mt-4 flex flex-wrap gap-4 text-xs text-zinc-500 dark:text-zinc-400">
|
|
<div className="flex items-center gap-2"><div className="w-3 h-3 rounded bg-blue-100 border border-blue-200"></div> Agent A1</div>
|
|
<div className="flex items-center gap-2"><div className="w-3 h-3 rounded bg-emerald-100 border border-emerald-200"></div> Agent A2</div>
|
|
<div className="flex items-center gap-2"><div className="w-3 h-3 rounded bg-purple-100 border border-purple-200"></div> Agent A3</div>
|
|
<div className="flex items-center gap-2"><div className="w-3 h-3 rounded bg-amber-100 border border-amber-200"></div> Agent A4</div>
|
|
<div className="flex items-center gap-2"><div className="w-3 h-3 rounded bg-pink-100 border border-pink-200"></div> Agent A5</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminSchedule;
|