'use client'; import React, { useEffect, useRef, useState } from 'react'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { fetchVolunteerShifts, updateVolunteerSlot } from '@/services/volunteerShift.service'; import { fetchVolunteerSlots, exportSlotsToCSV } from '@/services/volunteerSlot.service'; import ClearIcon from '@mui/icons-material/Clear'; import DoneIcon from '@mui/icons-material/Done'; import EditIcon from '@mui/icons-material/Edit'; import FileDownloadIcon from '@mui/icons-material/FileDownload'; import { Avatar, Box, Button, FormControl, FormHelperText, IconButton, InputLabel, OutlinedInput, Paper, Stack, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tabs, Typography, useTheme, } from '@mui/material'; import { AppLoader } from '@/components/core/app-loader'; import { enqueueSnackbar } from 'notistack'; import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; dayjs.extend(utc); import { IShift } from '@/types/shift.type'; import { ISlot } from '@/types/slot.type'; import AddDateSlotModal from './addDateSlotModal'; import AddSlotModal from './addSlotModal'; import EditShiftModal from './EditShiftModal'; const slotData = [ { date: '01/14/2025', day: 'Tuesday', slots: [ { time: '12:00pm-2:00pm', title: 'Volunteer', status: 'Full', filledSlots: 2, maxSlots: 2, participants: [ { name: 'Mark Wane', phone: '125414141', initials: 'MW' }, { name: 'Mark Henry', phone: '1011045585', initials: 'MH' }, ], }, { time: '2:00pm-4:00pm', title: 'Volunteer', status: 'Open', filledSlots: 0, maxSlots: 2, participants: [], }, ], }, ]; function a11yProps(index: number) { return { id: `simple-tab-${index}`, 'aria-controls': `simple-tabpanel-${index}`, }; } // Convert time string from UTC to local time // Input: time string like "5:48PM-5:50PM" and date string like "11/03/2025" // Output: time string in local time like "5:48PM-5:50PM" const convertTimeToLocal = (timeString: string, dateString: string): string => { if (!timeString || !dateString) return timeString; try { // Parse the time string (format: "5:48PM-5:50PM" or "11:43AM-11:45AM") const [startTimeStr, endTimeStr] = timeString.split('-').map(t => t.trim()); if (!startTimeStr || !endTimeStr) return timeString; // Parse date (format: "11/03/2025" - MM/DD/YYYY) const dateParts = dateString.split('/'); if (dateParts.length !== 3) return timeString; const month = parseInt(dateParts[0], 10) - 1; // month is 0-indexed const day = parseInt(dateParts[1], 10); const year = parseInt(dateParts[2], 10); // Helper to parse time string (e.g., "5:48PM" or "11:43AM") const parseTime = (timeStr: string): { hour: number; minute: number } => { const isPM = timeStr.toUpperCase().includes('PM'); const timePart = timeStr.replace(/[AP]M/i, '').trim(); const [hours, minutes] = timePart.split(':').map(Number); let hour24 = hours; if (isPM && hours !== 12) { hour24 = hours + 12; } else if (!isPM && hours === 12) { hour24 = 0; } return { hour: hour24, minute: minutes || 0 }; }; // Parse start and end times const startTime = parseTime(startTimeStr); const endTime = parseTime(endTimeStr); // Create UTC datetime objects using dayjs.utc() with proper UTC date construction const startDateTimeUTC = dayjs.utc(`${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(startTime.hour).padStart(2, '0')}:${String(startTime.minute).padStart(2, '0')}:00`); const endDateTimeUTC = dayjs.utc(`${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(endTime.hour).padStart(2, '0')}:${String(endTime.minute).padStart(2, '0')}:00`); // Convert to local time const startDateTimeLocal = startDateTimeUTC.local(); const endDateTimeLocal = endDateTimeUTC.local(); // Format back to "HH:MMAM/PM-HH:MMAM/PM" format const formatTime = (dt: dayjs.Dayjs): string => { const hour12 = dt.hour() % 12 || 12; const minute = dt.minute(); const ampm = dt.hour() >= 12 ? 'PM' : 'AM'; return `${hour12}:${minute.toString().padStart(2, '0')}${ampm}`; }; return `${formatTime(startDateTimeLocal)}-${formatTime(endDateTimeLocal)}`; } catch (error) { console.error('Error converting time to local:', error); return timeString; // Return original if conversion fails } }; const Slots = () => { const theme = useTheme(); const router = useRouter(); const searchParams = useSearchParams(); const [isModalOpen, setIsModalOpen] = useState(false); const [isSlotModalOpen, setIsSlotModalOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isShiftLoading, setIsShiftLoading] = useState(false); const [shifts, setShifts] = useState([]); const [slots, setSlots] = useState([]); const [value, setValue] = React.useState('shifts'); const [isEdit, setIsEdit] = useState<{ createdAt: string; isDeleted: boolean; numberOfSlots: number; slotName: string; updatedAt: string; _id: string; slotNameError: string | null; numberOfSlotsError: string | null; loading?: boolean; } | null>(null); const [isExporting, setIsExporting] = useState(false); const [editingShift, setEditingShift] = useState(null); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const handleChange = (event: React.SyntheticEvent, newValue: string) => { setValue(newValue); }; const pathname = usePathname(); useEffect(() => { const param = searchParams.get('modal'); if (param) { setIsModalOpen(true); } else { setIsModalOpen(false); } }, [searchParams]); useEffect(() => { const param = searchParams.get('slot_modal'); if (param) { setIsSlotModalOpen(true); } else { fetchSlots(); setIsSlotModalOpen(false); } }, [searchParams]); const openModal = () => { router.replace(`?modal=1`); }; const closeModal = () => { setIsModalOpen(false); const currentParams = new URLSearchParams(searchParams); currentParams.delete('modal'); const newUrl = `${pathname}${currentParams.toString() ? `?${currentParams}` : ''}`; router.replace(newUrl); }; const closeSlotModal = () => { setIsSlotModalOpen(false); const currentParams = new URLSearchParams(searchParams); currentParams.delete('slot_modal'); const newUrl = `${pathname}${currentParams.toString() ? `?${currentParams}` : ''}`; router.replace(newUrl); }; const fetchSlots = async () => { try { setIsLoading(true); const response = await fetchVolunteerSlots(); setSlots(response?.data?.data); setIsLoading(false); } catch (error) { console.error('Error in creating volunteer slot:', error); enqueueSnackbar('Error in creating volunteer slot', { variant: 'error' }); setIsLoading(false); } }; const fetchShifts = async () => { try { setIsShiftLoading(true); const response = await fetchVolunteerShifts(); setShifts(response?.data?.data); setIsShiftLoading(false); } catch (error) { console.error('Error in creating volunteer slot:', error); enqueueSnackbar('Error in fetching volunteer shifts', { variant: 'error' }); setIsShiftLoading(false); } }; useEffect(() => { fetchSlots(); fetchShifts(); }, []); const handleUpdateSlot = async () => { if (isEdit) { setIsEdit((prev) => (prev ? { ...prev, loading: true } : null)); try { const response = await updateVolunteerSlot(isEdit?._id, { numberOfSlots: isEdit.numberOfSlots, slotName: isEdit.slotName, }); enqueueSnackbar('Volunteer slot updated successfully', { variant: 'success' }); setIsEdit(null); fetchSlots(); } catch (error) { console.error('Error in creating volunteer slot:', error); enqueueSnackbar('Error in creating volunteer slot', { variant: 'error' }); setIsEdit((prev) => (prev ? { ...prev, loading: false } : null)); } } }; const handleExportSlots = async () => { try { setIsExporting(true); await exportSlotsToCSV(); enqueueSnackbar('Slots exported successfully', { variant: 'success' }); } catch (error) { console.error('Error exporting slots:', error); enqueueSnackbar('Error exporting slots', { variant: 'error' }); } finally { setIsExporting(false); } }; // Handle editing a specific shift const handleEditShift = (shift: any, dayData: any) => { console.log('Editing shift:', shift, 'from day:', dayData); // Check if this is a new shift or existing shift if (!shift._id && !shift.id) { // This is a new shift - don't generate a fake ID, let the backend handle it enqueueSnackbar('Cannot edit shift without a valid ID. Please create a new shift instead.', { variant: 'warning' }); return; } // Create a proper shift object for editing const shiftData = { ...shift, date: dayData.date, day: dayData.day, _id: shift._id || shift.id, // Use existing ID only slotId: shift.slotId || slots[0]?._id || '', // Default to first slot if no slotId }; console.log('Shift data being set for editing:', shiftData); setEditingShift(shiftData); setIsEditModalOpen(true); }; // Handle editing an entire day's shifts const handleEditDay = (dayData: any) => { console.log('Editing day:', dayData); // For day editing, we'll edit the first shift of the day if (dayData.slots && dayData.slots.length > 0) { handleEditShift(dayData.slots[0], dayData); } else { enqueueSnackbar('No shifts found for this day', { variant: 'warning' }); } }; // Close edit modal const closeEditModal = () => { setIsEditModalOpen(false); setEditingShift(null); }; return ( {/* Modern Header Section */} Volunteer Slots Management Manage volunteer time slots and shift assignments {/* Modern Tabs */} {/* Shifts Tab */} {/* Slots Tab */} fetchShifts()} /> fetchShifts()} /> ); }; export default Slots;