🔧 {t('contacts.nextFilterReplacement', 'Next Filter Replacement')}: {
(() => {
const startDate = new Date(contact.rboStartDate);
// Calculate the due date (1 year from installation)
const dueDate = new Date(startDate);
dueDate.setFullYear(dueDate.getFullYear() + 1);
// Subtract 15 days to get the replacement reminder date
const replacementDate = new Date(dueDate);
replacementDate.setDate(replacementDate.getDate() - 15);
return formatAlbanianDate(replacementDate);
})()
}
{/* Meeting History indicator - Show for contacts with archived meetings */}
{contactsWithHistory && contactsWithHistory.has(contact.id) && (
)}
{hasReferralActivity(contact) && (
)}
{isAgent ? (
<>
) : isOperator ? (
<>
) : (
<>
)}
);
}, (prevProps, nextProps) => {
return (
prevProps.contact.id === nextProps.contact.id &&
prevProps.contact.updatedAt === nextProps.contact.updatedAt &&
prevProps.contact._dataMasked === nextProps.contact._dataMasked &&
prevProps.contact.name === nextProps.contact.name &&
prevProps.contact.surname === nextProps.contact.surname &&
prevProps.contact.phone === nextProps.contact.phone &&
prevProps.contact.secondaryPhone === nextProps.contact.secondaryPhone &&
prevProps.contact.address === nextProps.contact.address &&
prevProps.contact.profession === nextProps.contact.profession &&
prevProps.contact.status === nextProps.contact.status &&
prevProps.contact.contacted === nextProps.contact.contacted &&
prevProps.contact.contactAttemptReason === nextProps.contact.contactAttemptReason &&
prevProps.contact.meetingStatus === nextProps.contact.meetingStatus &&
prevProps.contact.meetingDateTime === nextProps.contact.meetingDateTime &&
prevProps.highlightId === nextProps.highlightId &&
prevProps.isAgent === nextProps.isAgent
);
});
ContactMobileCard.displayName = 'ContactMobileCard';
// ========================================
// MAIN CONTACTS COMPONENT
// ========================================
const Contacts = () => {
const { t, i18n } = useTranslation();
const { user } = useAuth();
const { isConnected, addEventListener } = useSocket();
const { isOpen: isConfirmOpen, config: confirmConfig, confirm, closeDialog: closeConfirm } = useConfirmDialog();
const [step, setStep] = useState(1); // 1: client, 2: referrals
const [client, setClient] = useState({
date: getTodayAlbanianDateString(),
name: '',
surname: '',
phone: '',
secondaryPhone: '',
address: '',
addressLat: '',
addressLng: '',
associateIds: [],
isRBO: false,
notes: '',
gifts: '',
signature: null
});
const [referrals, setReferrals] = useState([]);
const [currentReferral, setCurrentReferral] = useState(null);
const [isSaving, setIsSaving] = useState(false);
const [sessionId, setSessionId] = useState(null);
const [showReferralForm, setShowReferralForm] = useState(false);
const navigate = useNavigate();
const isDirty = useRef(false);
const [showMap, setShowMap] = React.useState(false);
const [mapInit, setMapInit] = React.useState([41.3275, 19.8187]); // Default: Tirana
const [allUsers, setAllUsers] = useState([]);
const [contacts, setContacts] = useState([]);
// GPS Location hook for client form
const clientGPS = useGPSLocation();
// GPS Location hook for edit form
const editGPS = useGPSLocation();
const [editingContact, setEditingContact] = useState(null);
const [editForm, setEditForm] = useState({
name: '',
surname: '',
phone: '',
secondaryPhone: '',
address: '',
addressLat: '',
addressLng: '',
profession: '',
personalId: '',
birthday: '',
email: '',
notes: '',
meetingNotes: '',
gifts: '',
signature: null,
isExpress: false
});
const editSignaturePadRef = useRef(null);
const signaturePadRef = useRef(null);
const [signature, setSignature] = useState(null);
const [showEditModal, setShowEditModal] = useState(false);
const [showReferralMap, setShowReferralMap] = useState(false);
const [referralMapInit, setReferralMapInit] = useState([41.3275, 19.8187]); // Default: Tirana
// Multi-product management state
const [contactProducts, setContactProducts] = useState({ purchases: [], reservations: [] });
const [isLoadingProducts, setIsLoadingProducts] = useState(false);
const [showAddProductModal, setShowAddProductModal] = useState(false);
const [editingProduct, setEditingProduct] = useState(null);
const [productModalType, setProductModalType] = useState('purchase'); // 'purchase' or 'reservation'
const [isAddingProduct, setIsAddingProduct] = useState(false);
const [showEditMap, setShowEditMap] = useState(false);
const [editMapInit, setEditMapInit] = useState([41.3275, 19.8187]);
const [filters, setFilters] = useState({
startDate: '',
endDate: '',
agentId: '',
isRBO: '', // Keep for backwards compatibility
status: '', // New 3-way status filter
contacted: '',
response: '',
hasUpcomingMeeting: '',
searchQuery: ''
});
const [showFilters, setShowFilters] = useState(false);
const [activeLegendFilter, setActiveLegendFilter] = useState(null);
const [expiredFilterActive, setExpiredFilterActive] = useState(false); // Client-side filter for expired contacts
const [showAddReferralsModal, setShowAddReferralsModal] = useState(false);
const [selectedContactForReferrals, setSelectedContactForReferrals] = useState(null);
const [showReferralsModal, setShowReferralsModal] = useState(false);
const [selectedContactForReferralsView, setSelectedContactForReferralsView] = useState(null);
const [contactReferrals, setContactReferrals] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [products, setProducts] = useState([]);
const [filterCounts, setFilterCounts] = useState({});
const [loadingFilterCounts, setLoadingFilterCounts] = useState(false);
const location = useLocation();
// Extract region from URL once so it is available to all hooks below
const regionFilter = React.useMemo(() => {
const urlParams = new URLSearchParams(location.search);
return urlParams.get('region');
}, [location.search]);
// Highlighting functionality
const [highlightId, setHighlightId] = useState(null);
const highlightRef = useRef(null);
// Add at the top, after other useState hooks
const [rentals, setRentals] = useState([]);
// Add this state near the top of the Contacts component
const [downloadingPdfPurchaseId, setDownloadingPdfPurchaseId] = useState(null);
const [deletingId, setDeletingId] = useState(null);
const [signatureTouched, setSignatureTouched] = useState(false);
const [signaturePadKeySuffix, setSignaturePadKeySuffix] = useState(0); // New state for forcing remount
// Pagination and filtering state
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [totalContacts, setTotalContacts] = useState(0);
const [pageSize, setPageSize] = useState(50);
const [searchQuery, setSearchQuery] = useState('');
const [serverFilters, setServerFilters] = useState({
search: '',
isRBO: '', // Keep for backwards compatibility
status: '', // New 3-way status filter
contacted: '',
agentId: '',
startDate: '',
endDate: ''
});
const isAdmin = user?.role === 'admin' || user?.role === 'owner';
const isOperator = user?.role === 'operator';
const isAgent = user?.role === 'user'; // "user" role = agent in the UI
const canEditDelete = isAdmin || isOperator;
const canDelete = isAdmin || isOperator; // Operators can now delete contacts
const showAgentColumn = isAdmin || isOperator;
// Role-based field visibility for edit modal
const showExtendedFieldsInEdit = isAdmin; // Only admin/owner see extended fields in edit modal
const canManageProductStatusInEdit = isAdmin; // Only admin/owner can manage NO/RBO/REZ status in edit modal
// Function to check if agent has access to see signature (only for agents)
const hasAgentSignatureAccess = useCallback((contact) => {
if (!isAgent || !contact) return false;
// Agent has access if contact has RBO/REZ status AND agent is involved
const hasRboRezStatus = contact.status === 'RBO' || contact.status === 'REZ';
if (!hasRboRezStatus) return false;
// Check if agent is assigned to a meeting with this contact
const hasAssignedMeeting = contact.assignedAgentId === user.id;
// Check if agent is assigned as seller in RBO process
const isRboSeller = contact.rboSellerId === user.id;
return hasAssignedMeeting || isRboSeller;
}, [isAgent, user?.id]);
// Function to determine if signature section should be shown
const shouldShowSignatureSection = useCallback((contact) => {
if (isAdmin) return true; // Admins always see signature
if (isOperator) return false; // Operators never see signature
if (isAgent) return hasAgentSignatureAccess(contact); // Agents see only if they have access
return false;
}, [isAdmin, isOperator, isAgent, hasAgentSignatureAccess]);
// RBO Part History Modal state
const [showRboHistoryModal, setShowRboHistoryModal] = useState(false);
const [selectedPurchaseForRboHistory, setSelectedPurchaseForRboHistory] = useState(null);
// Meeting History Modal state
const [showMeetingHistoryModal, setShowMeetingHistoryModal] = useState(false);
const [historyContact, setHistoryContact] = useState(null); // Contact for viewing history
// Archive status state
const [archiveStatus, setArchiveStatus] = useState(null);
const [loadingArchiveStatus, setLoadingArchiveStatus] = useState(false);
const [archivingMeeting, setArchivingMeeting] = useState(false);
const [previousMeetingUsers, setPreviousMeetingUsers] = useState({ usedAgentIds: [], usedNotifiedIds: [] });
const [contactsWithHistory, setContactsWithHistory] = useState(new Set());
const [showArchiveConfirm, setShowArchiveConfirm] = useState(false);
// Add REGION_NAMES for code-to-name mapping
const REGION_NAMES = {
'AL-01': 'Berat',
'AL-02': 'Durrës',
'AL-03': 'Elbasan',
'AL-04': 'Fier',
'AL-05': 'Gjirokastër',
'AL-06': 'Korçë',
'AL-07': 'Kukës',
'AL-08': 'Lezhë',
'AL-09': 'Dibër',
'AL-10': 'Shkodër',
'AL-11': 'Tiranë',
'AL-12': 'Vlorë',
};
const legendItems = [
{
id: 'not_contacted',
label: t('contacts.management.notContacted'),
bgColor: 'bg-white',
textColor: 'text-gray-800',
icon: ,
filter: { contacted: 'false' }
},
{
id: 'held',
label: t('contacts.management.meetingStatus.held'),
bgColor: 'bg-green-100',
textColor: 'text-green-800',
icon: ,
filter: { contacted: 'true', response: 'held' }
},
{
id: 'reschedule',
label: t('contacts.management.meetingStatus.reschedule'),
bgColor: 'bg-orange-100',
textColor: 'text-orange-800',
icon: ,
filter: { contacted: 'true', response: 'reschedule' }
},
{
id: 'failed',
label: t('contacts.management.meetingStatus.failed'),
bgColor: 'bg-purple-100',
textColor: 'text-purple-800',
icon: ,
filter: { contacted: 'true', response: 'failed' }
},
{
id: 'do_not_contact',
label: t('contacts.management.meetingStatus.do_not_contact'),
bgColor: 'bg-rose-200',
textColor: 'text-rose-900',
icon: ,
filter: { contacted: 'true', response: 'do_not_contact' }
},
{
id: 'upcoming_meeting',
label: t('contacts.management.meeting.hasUpcoming'),
bgColor: 'bg-blue-100',
textColor: 'text-blue-800',
icon: ,
filter: { hasUpcomingMeeting: 'true' }
},
{
id: 'expired',
label: t('contacts.management.expired', 'Expired'),
bgColor: 'bg-lime-100',
textColor: 'text-lime-800',
icon: ,
filter: { hasExpired: 'true' }
}
];
// Fetch all users for dropdown (including inactive - needed for displaying historical sellers)
useEffect(() => {
const fetchUsers = async () => {
try {
// First get the current user's profile to verify auth is working
const profileResponse = await fetch('/api/users/profile', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json'
}
});
if (!profileResponse.ok) {
throw new Error(`Failed to fetch profile: ${profileResponse.status}`);
}
// Then get all users
const response = await fetch('/api/users', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`Failed to fetch users: ${response.status}`);
}
const data = await response.json();
if (Array.isArray(data)) {
// Keep ALL users (including inactive) for display and historical data
// Sort active users first, then inactive
const sortedUsers = [...data].sort((a, b) => {
if (a.isActive === b.isActive) {
return `${a.firstName} ${a.lastName}`.localeCompare(`${b.firstName} ${b.lastName}`);
}
return a.isActive ? -1 : 1;
});
setAllUsers(sortedUsers);
} else {
setAllUsers([]);
}
} catch (error) {
toast.error(t('common.error.fetchFailed'));
setAllUsers([]);
}
};
fetchUsers();
}, [t]);
// Fetch archive status and previous users when editing a contact
useEffect(() => {
const fetchArchiveData = async () => {
if (!editingContact || !editingContact.id) {
setArchiveStatus(null);
setPreviousMeetingUsers({ usedAgentIds: [], usedNotifiedIds: [] });
return;
}
setLoadingArchiveStatus(true);
try {
// Fetch previous meeting users (for disabling in dropdowns)
const prevUsersResponse = await fetch(`/api/contacts/${editingContact.id}/previous-meeting-users`, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
});
if (prevUsersResponse.ok) {
const prevUsersData = await prevUsersResponse.json();
setPreviousMeetingUsers(prevUsersData.data);
}
// Only fetch archive status if meeting status is 'held'
if (editingContact.meetingStatus === 'held') {
const response = await meetingArchiveApi.getArchiveStatus(editingContact.id);
setArchiveStatus(response.data);
} else {
setArchiveStatus(null);
}
} catch (error) {
logger.error('Failed to fetch archive data:', error);
setArchiveStatus(null);
setPreviousMeetingUsers({ usedAgentIds: [], usedNotifiedIds: [] });
} finally {
setLoadingArchiveStatus(false);
}
};
fetchArchiveData();
}, [editingContact?.id, editingContact?.meetingStatus]);
// Prevent tab close if not saved
useEffect(() => {
const handleBeforeUnload = (e) => {
if (isDirty.current) {
e.preventDefault();
e.returnValue = '';
}
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, []);
// Auto-save client info
// useEffect(() => {
// if (step === 1 && (client.name || client.surname || client.phone)) {
// isDirty.current = true;
// setIsSaving(true);
// fetch('/api/contacts', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// 'Authorization': `Bearer ${localStorage.getItem('token')}`
// },
// body: JSON.stringify(client)
// })
// .then(res => res.json())
// .then(data => {
// if (data.id) setSessionId(data.id);
// setIsSaving(false);
// })
// .catch(() => setIsSaving(false));
// }
// }, [client, step]);
// Auto-save referrals
useEffect(() => {
if (sessionId && referrals.length > 0) {
isDirty.current = true;
setIsSaving(true);
const last = referrals[referrals.length - 1];
fetch(`/api/contacts/${sessionId}/referrals`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(last)
})
.then(res => res.json())
.then(() => setIsSaving(false))
.catch(() => setIsSaving(false));
}
}, [referrals, sessionId]);
// Check which contacts have archived meetings (using batch endpoint for performance)
const checkContactsMeetingHistory = useCallback(async (contactsList) => {
try {
if (!contactsList || !Array.isArray(contactsList) || contactsList.length === 0) {
logger.debug('checkContactsMeetingHistory: No contacts to check');
return;
}
const contactIds = contactsList.map(c => c?.id).filter(Boolean);
if (contactIds.length === 0) {
logger.debug('checkContactsMeetingHistory: No valid contact IDs');
return;
}
logger.info(`📊 Checking archived meetings for ${contactIds.length} contacts...`);
// Use batch endpoint - single API call instead of N calls
const response = await api.post('/api/contacts/batch-archived-meetings-check', {
contactIds
});
logger.debug('📊 Batch archive check response:', response.data);
if (response.data?.success && response.data?.data) {
const archiveMap = response.data.data;
const withArchives = Object.entries(archiveMap).filter(([_, hasArchive]) => hasArchive).length;
logger.info(`📊 Found ${withArchives} contacts with archived meetings out of ${contactIds.length}`);
// Update state with all contacts that have archives
setContactsWithHistory(prev => {
const newSet = new Set(prev);
Object.entries(archiveMap).forEach(([contactId, hasArchive]) => {
if (hasArchive) {
newSet.add(contactId);
} else {
// Remove if no longer has archive (edge case)
newSet.delete(contactId);
}
});
logger.debug(`📊 Updated contactsWithHistory, now has ${newSet.size} contacts`);
return newSet;
});
} else {
logger.warn('📊 Batch archive check returned unexpected response:', response.data);
}
} catch (error) {
logger.error('Failed to check meeting history:', error);
// Don't show error toast - this is non-critical
}
}, []); // No dependencies - stable function
// Combined initial data load - much more efficient than multiple API calls
const fetchInitialPageData = useCallback(async (page = 1) => {
try {
setLoading(true);
const params = {
page,
limit: pageSize,
// Include region filter if present
...(regionFilter ? { region: regionFilter } : {}),
_timestamp: Date.now() // Force cache bypass
};
const response = await offlineApi.getContactsPageData(params);
if (response.data && response.data.success) {
const { contacts, pagination, filterCounts, users, rentals } = response.data.data;
// Set all data from single API call
setContacts(contacts || []);
setTotalContacts(pagination?.total || 0);
setTotalPages(pagination?.totalPages || 1);
setCurrentPage(pagination?.page || 1);
setFilterCounts(filterCounts || {});
setAllUsers(Array.isArray(users) ? users : []);
setRentals(Array.isArray(rentals) ? rentals : []);
// Check which contacts have archived meetings (await to ensure icons render)
if (contacts && contacts.length > 0) {
await checkContactsMeetingHistory(contacts);
}
// Products will be loaded separately when needed (they're not used in table view)
if (products.length === 0) {
loadProducts();
}
}
} catch (error) {
logger.error('Error fetching page data:', error);
toast.error(t('common.error.fetchFailed'));
setContacts([]);
setTotalContacts(0);
setTotalPages(1);
} finally {
setLoading(false);
}
}, [pageSize, regionFilter, offlineApi, t, products.length, checkContactsMeetingHistory]);
// Separate products loading (only when needed)
const loadProducts = useCallback(async () => {
try {
const response = await fetch('/api/products', {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
});
const productsData = await response.json();
setProducts(productsData?.data || []);
} catch (err) {
logger.error('Error loading products:', err);
setProducts([]);
}
}, []);
const handleClientChange = (e) => {
const { name, value, type, checked } = e.target;
if (name === 'address') {
setClient(prev => ({
...prev,
address: value,
addressLat: '',
addressLng: ''
}));
} else if (name === 'phone' || name === 'secondaryPhone') {
// Handle phone number formatting
const phoneValue = value.replace(/\D/g, '').slice(0, 10);
setClient(prev => ({
...prev,
[name]: phoneValue
}));
} else {
// Apply automatic capitalization for name fields
const shouldCapitalize = ['name', 'surname', 'profession'].includes(name);
const processedValue = shouldCapitalize ? capitalizeWords(value) : value;
setClient(prev => ({
...prev,
[name]: type === 'checkbox' ? checked : processedValue
}));
}
};
const handleAssociateChange = (ids) => {
setClient(prev => ({ ...prev, associateIds: ids }));
};
const handleLocation = (lat, lng, address) => {
setClient(prev => ({ ...prev, address, addressLat: lat, addressLng: lng }));
};
const handleReferralChange = (e) => {
const { name, value } = e.target;
setCurrentReferral(prev => ({ ...prev, [name]: value }));
};
const handleReferralLocation = (lat, lng, address) => {
setCurrentReferral(prev => ({ ...prev, address, addressLat: lat, addressLng: lng }));
};
const handleSaveClient = async () => {
// Save signature before submitting
let signatureData = null;
if (signaturePadRef.current) {
signatureData = signaturePadRef.current.saveSignature();
}
const isOnline = navigator.onLine;
// Address is always required, but geocoding validation only happens when online
if (
!client.name ||
!client.surname ||
!client.phone ||
!/^(067|068|069)\d{7}$/.test(client.phone) ||
!client.address
) {
toast.error(t('contacts.errorFillAllFields'));
return;
}
// Validate secondary phone if provided
if (client.secondaryPhone && !/^(067|068|069)\d{7}$/.test(client.secondaryPhone)) {
toast.error(t('contacts.phoneFormatError'));
return;
}
setIsSaving(true);
const submitData = {
...client,
signature: signatureData !== null ? signatureData : client.signature || null,
// Skip geocoding when offline
addressLat: isOnline ? client.addressLat : null,
addressLng: isOnline ? client.addressLng : null
// Let the database set createdAt and updatedAt automatically to current timestamp
};
if (!isOnline) {
// Offline: save locally and queue action
try {
const newContact = await addContactOffline(submitData);
setContacts(prev => [{ ...newContact, referrals: [] }, ...prev]);
setClient({
date: getTodayAlbanianDateString(),
name: '',
surname: '',
phone: '',
secondaryPhone: '',
address: '',
addressLat: '',
addressLng: '',
associateIds: [],
isRBO: false,
notes: '',
gifts: '',
signature: null
});
setIsSaving(false);
toast.success(t('contacts.contactAddedOffline'));
navigate('/contacts');
return;
} catch (error) {
setIsSaving(false);
if (error.message === 'PHONE_DUPLICATE') {
toast.error(t('contacts.errorPhoneAlreadyAdded'));
} else {
toast.error(t('contacts.errorAddingContact'));
}
return;
}
}
// Online mode - try geocoding if coordinates are missing, but don't fail if geocoding fails
if (isOnline && client.address && (!client.addressLat || !client.addressLng)) {
try {
const geo = await geocodeAddress(client.address);
if (geo) {
submitData.addressLat = geo.lat;
submitData.addressLng = geo.lng;
submitData.address = geo.displayName || client.address;
}
// If geocoding fails, continue anyway with manual address
} catch (error) {
// Continue anyway - manual address is acceptable
}
}
// Online: proceed as before
fetch('/api/contacts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify(submitData)
})
.then(async res => {
if (!res.ok) {
const data = await res.json();
if (res.status === 409 && data.error?.toLowerCase().includes('phone')) {
toast.error(t('contacts.errorPhoneAlreadyAdded'));
setIsSaving(false);
return;
}
throw new Error(data.error || 'Failed to add contact');
}
return res.json();
})
.then(data => {
if (!data) return;
// Add the new contact to the list
setContacts(prev => [{
...data,
referrals: []
}, ...prev]);
// Reset the form
setClient({
date: getTodayAlbanianDateString(),
name: '',
surname: '',
phone: '',
secondaryPhone: '',
address: '',
addressLat: '',
addressLng: '',
associateIds: [],
isRBO: false,
notes: '',
gifts: '',
signature: null
});
setIsSaving(false);
toast.success(t('contacts.contactAdded'));
navigate('/contacts');
})
.catch((error) => {
setIsSaving(false);
toast.error(t('contacts.errorAddingContact'));
});
};
const handleUseMyLocation = () => {
clientGPS.startLocationRequest(
(result) => {
setClient(prev => ({
...prev,
address: result.address,
addressLat: result.latitude,
addressLng: result.longitude
}));
},
(error) => {
}
);
};
const handlePickFromMap = () => {
setMapInit([
client.addressLat || 41.3275,
client.addressLng || 19.8187
]);
setShowMap(true);
};
const handleMapPick = (pos, address) => {
setClient(prev => ({ ...prev, address, addressLat: pos[0], addressLng: pos[1] }));
setShowMap(false);
toast.success(t('contacts.locationSet'));
};
// Archive meeting handler
const handleArchiveMeeting = async () => {
if (!editingContact || !editingContact.id) return;
setShowArchiveConfirm(true);
};
const confirmArchiveMeeting = async () => {
if (!editingContact || !editingContact.id) return;
setArchivingMeeting(true);
try {
await meetingArchiveApi.archiveMeeting(editingContact.id);
toast.success(t('meetings.archive.archiveSuccess'));
// Add this contact to contactsWithHistory immediately
setContactsWithHistory(prev => {
const newSet = new Set(prev);
newSet.add(editingContact.id);
return newSet;
});
// Reset archive status
setArchiveStatus(null);
// Refresh contacts list
fetchInitialPageData(currentPage);
// Close modals
setShowArchiveConfirm(false);
setEditingContact(null);
setEditForm({});
} catch (error) {
logger.error('Failed to archive meeting:', error);
toast.error(t('meetings.archive.archiveError'));
setShowArchiveConfirm(false);
} finally {
setArchivingMeeting(false);
}
};
// Edit logic
const startEdit = (contact) => {
// Use a callback to ensure we're reading from the absolute latest state
setContacts(currentContacts => {
const freshContact = currentContacts.find(c => c.id === contact.id) || contact;
setEditingContact(freshContact);
setSignatureTouched(false);
setSignaturePadKeySuffix(prevSuffix => prevSuffix + 1); // Increment key suffix to force remount
// Load contact products for multi-product management
loadContactProducts(freshContact.id);
// Populate edit form with fresh data
setEditForm({
date: freshContact.date ? format(new Date(freshContact.date), "yyyy-MM-dd") : getTodayAlbanianDateString(),
name: freshContact.name,
surname: freshContact.surname,
phone: freshContact.phone || '',
secondaryPhone: freshContact.secondaryPhone || '',
address: freshContact.address || '',
addressLat: freshContact.addressLat,
addressLng: freshContact.addressLng,
profession: freshContact.profession || '',
personalId: freshContact.personalId || '',
birthday: freshContact.birthday || '',
email: freshContact.email || '',
isRBO: freshContact.isRBO || false, // For backwards compatibility
status: freshContact.status || (freshContact.isRBO ? 'RBO' : 'NO'), // New 3-way status field
rboProductId: freshContact.rboProductId || null,
rboSerialNumber: freshContact.rboSerialNumber || '',
rboSellerId: freshContact.rboSellerId || null,
// Initialize new RBO payment fields
rboPaymentType: freshContact.rboPaymentType || 'cash', // Default to cash
rboCurrency: freshContact.rboCurrency || 'EUR', // Default to EUR
rboAmount: freshContact.rboAmount || '',
rboInstallmentMonths: freshContact.rboInstallmentMonths || 1,
rboStartDate: freshContact.rboStartDate || '',
// rboMonthlyPayment is calculated, not stored directly in editForm state for editing
contacted: freshContact.contacted || false,
response: freshContact.meetingStatus || null,
meetingDateTime: freshContact.meetingDateTime ? format(new Date(freshContact.meetingDateTime), "yyyy-MM-dd'T'HH:mm") : '',
notes: freshContact.notes || '',
meetingNotes: freshContact.meetingNotes || '',
gifts: freshContact.gifts || '',
assignedAgentId: freshContact.assignedAgentId || null,
notifiedUserId: freshContact.notifiedUserId || null,
contactAttemptReason: freshContact.contactAttemptReason || '',
contactAttemptOtherReason: freshContact.contactAttemptOtherReason || '',
signature: freshContact.signature || null,
isExpress: freshContact.isExpress || false
});
setShowEditModal(true);
// Return unchanged state
return currentContacts;
});
};
const handleEditFormChange = (e) => {
const { name, value, type, checked } = e.target;
let newEditFormState = { ...editForm };
if (name === 'phone' || name === 'secondaryPhone') {
// Let PhoneInput component handle phone validation internally
newEditFormState[name] = value;
} else if (name === 'isRBO') {
newEditFormState.isRBO = checked;
// Update status field for backwards compatibility
newEditFormState.status = checked ? 'RBO' : 'NO';
if (!checked) { // If unchecking RBO, clear RBO specific fields
newEditFormState.rboProductId = '';
newEditFormState.rboSerialNumber = '';
newEditFormState.rboSellerId = '';
newEditFormState.rboPaymentType = 'cash';
newEditFormState.rboCurrency = 'EUR';
newEditFormState.rboAmount = '';
newEditFormState.rboInstallmentMonths = 1;
newEditFormState.rboStartDate = '';
}
} else if (name === 'status') {
newEditFormState.status = value;
// Update isRBO for backwards compatibility
newEditFormState.isRBO = value === 'RBO';
if (value !== 'RBO') { // If not RBO, clear RBO specific fields
newEditFormState.rboProductId = '';
newEditFormState.rboSerialNumber = '';
newEditFormState.rboSellerId = '';
newEditFormState.rboPaymentType = 'cash';
newEditFormState.rboCurrency = 'EUR';
newEditFormState.rboAmount = '';
newEditFormState.rboInstallmentMonths = 1;
newEditFormState.rboStartDate = '';
}
} else if (name === 'contacted' && type === 'checkbox') {
if (!checked) {
newEditFormState = {
...newEditFormState,
contacted: false,
response: null,
meetingDateTime: '',
assignedAgentId: null,
notifiedUserId: null,
};
} else {
// When enabling meeting status, reset contact outcome fields
// as it doesn't make sense to have an outcome like "not answered" when scheduling a meeting
newEditFormState = {
...newEditFormState,
contacted: true,
contactAttemptReason: null,
contactAttemptOtherReason: '',
};
}
} else if (name === 'rboPaymentType') {
newEditFormState.rboPaymentType = value;
if (value === 'cash') {
newEditFormState.rboInstallmentMonths = 1; // Reset months if cash
}
} else if (name === 'contactAttemptReason') {
// Handle contact attempt reason specifically to allow null values for deselection
newEditFormState.contactAttemptReason = value;
// Clear other reason when deselecting or selecting non-other option
if (!value || value !== 'other') {
newEditFormState.contactAttemptOtherReason = '';
}
} else if (name === 'isExpress' && type === 'checkbox') {
newEditFormState.isExpress = checked;
// If checking express meeting, set it as held with current date/time
if (checked) {
const now = new Date();
const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000)
.toISOString()
.slice(0, 16);
newEditFormState.contacted = true;
newEditFormState.response = 'held';
newEditFormState.meetingDateTime = localDateTime;
newEditFormState.assignedAgentId = newEditFormState.assignedAgentId || user?.id;
// Clear "must reschedule" or other non-held responses
newEditFormState.contactAttemptReason = null;
newEditFormState.contactAttemptOtherReason = '';
}
// If unchecking express meeting, completely reset/cancel the meeting
else {
newEditFormState.contacted = false;
newEditFormState.response = null;
newEditFormState.meetingDateTime = '';
newEditFormState.assignedAgentId = null;
newEditFormState.notifiedUserId = null;
}
} else {
// Apply automatic capitalization for name fields
const shouldCapitalize = ['name', 'surname', 'profession'].includes(name);
const processedValue = shouldCapitalize ? capitalizeWords(value) : value;
newEditFormState[name] = type === 'checkbox' ? checked : processedValue;
}
setEditForm(newEditFormState);
};
const validateEditForm = () => {
// Basic validation for required fields
if (
!editForm.name ||
!editForm.surname ||
!editForm.phone ||
!/^(067|068|069)\d{7}$/.test(editForm.phone) ||
!editForm.address
) {
toast.error(t('contacts.errorFillAllFields'));
return false;
}
// Validate secondary phone if provided
if (editForm.secondaryPhone && !/^(067|068|069)\d{7}$/.test(editForm.secondaryPhone)) {
toast.error(t('contacts.phoneFormatError'));
return false;
}
// Validate personalId if provided
if (editForm.personalId && !/^[A-Z][0-9]{8}[A-Z]$/.test(editForm.personalId)) {
toast.error(t('users.invalidPersonalId'));
return false;
}
// Legacy RBO fields validation (multi-product: only validate if user is filling legacy fields)
if (isAdmin) {
const legacyRequired = ['rboProductId', 'rboSerialNumber', 'rboSellerId'];
const anyLegacyFilled = legacyRequired.some((f) => !!editForm[f]);
const allLegacyFilled = legacyRequired.every((f) => !!editForm[f]);
if (anyLegacyFilled && !allLegacyFilled) {
toast.error(t('contacts.errorFillRBOFields'));
return false;
}
}
// Meeting validation - Skip for agents since they can't see/edit meeting fields
if (!isAgent) {
// Additional validation for contacted status and meeting
if (editForm.contacted && editForm.meetingDateTime && isPast(editForm.meetingDateTime)) {
if (!editForm.response) {
toast.error(t('contacts.management.errorResponseRequired'));
return false;
}
}
// Meeting scheduling validation (future date, agent) only if not do_not_contact
if (editForm.contacted && (!editForm.response || editForm.response !== 'do_not_contact')) {
if (!editForm.meetingDateTime) {
toast.error(t('contacts.management.errorMeetingDateRequired'));
return false;
}
if (!editForm.assignedAgentId) {
toast.error(t('contacts.management.errorAgentRequired'));
return false;
}
const meetingDate = new Date(editForm.meetingDateTime);
// Only block past dates if this is a new meeting or the original meeting was not in the past
const originalMeetingDate = editingContact?.meetingDateTime ? new Date(editingContact.meetingDateTime) : null;
const isEditingPastMeeting = originalMeetingDate && isPast(originalMeetingDate);
if (!isEditingPastMeeting && meetingDate <= getCurrentAlbanianTime()) {
toast.error(t('contacts.management.errorMeetingDateFuture'));
return false;
}
}
}
// Legacy RBO payment validation removed - using multi-product system instead
return true;
};
const saveEdit = async () => {
if (!validateEditForm()) {
return;
}
setIsSaving(true);
let signatureToSave = editForm.signature; // Default to current form state
if (editSignaturePadRef.current) {
// This call MIGHT trigger the onSave prop in Contacts.jsx if pad is not empty internally,
// which would update editForm.signature and set signatureTouched = true.
const padDataFromSaveMethod = editSignaturePadRef.current.saveSignature();
// After saveSignature() call, check signatureTouched status.
// signatureTouched is managed by the onSave prop of the SignaturePad component.
// onSave is called by SignaturePad.saveSignature() if !isEmpty, or by fullscreen exit, or (previously) by inline onEnd.
if (signatureTouched) {
// If signatureTouched is true, it implies an interaction occurred in this session
// (drawing, clearing, or fullscreen sync) that updated editForm.signature via the onSave prop.
// So, editForm.signature should be the most current state.
signatureToSave = editForm.signature;
} else {
// If signatureTouched is false, no interaction (that triggers onSave) happened in this session.
// In this case, padDataFromSaveMethod holds the value from SignaturePad's internal state
// (i.e., the loaded signature if no new drawing occurred and pad was considered empty).
signatureToSave = padDataFromSaveMethod;
}
}
// Ensure signatureToSave is not undefined if it started as such and padData was also undefined.
if (signatureToSave === undefined) {
signatureToSave = null;
}
try {
const meetingDateTime = editForm.contacted && editForm.meetingDateTime && editForm.assignedAgentId
? new Date(editForm.meetingDateTime).toISOString()
: null;
// Don't update timestamp to prevent position changes in the list
const shouldUpdateTimestamp = false;
const updateData = {
name: editForm.name,
surname: editForm.surname,
phone: editForm.phone,
secondaryPhone: editForm.secondaryPhone || null,
address: editForm.address,
addressLat: editForm.addressLat,
addressLng: editForm.addressLng,
profession: editForm.profession || null,
personalId: editForm.personalId || null,
birthday: editForm.birthday || null,
email: editForm.email || null,
signature: signatureToSave, // Use the determined signatureToSave
isRBO: editForm.isRBO || false, // For backwards compatibility
status: editForm.status || 'NO', // New 3-way status field
rboProductId: editForm.status === 'RBO' && editForm.rboProductId ? editForm.rboProductId : null,
rboSerialNumber: editForm.status === 'RBO' ? editForm.rboSerialNumber : null,
rboSellerId: editForm.status === 'RBO' && editForm.rboSellerId ? editForm.rboSellerId : null,
// Add RBO Payment Fields here
rboPaymentType: editForm.status === 'RBO' ? editForm.rboPaymentType : null,
rboCurrency: editForm.status === 'RBO' ? editForm.rboCurrency : null,
rboAmount: editForm.status === 'RBO' && editForm.rboAmount ? parseFloat(editForm.rboAmount) : null,
rboInstallmentMonths: editForm.status === 'RBO' && editForm.rboPaymentType === 'bank' && editForm.rboInstallmentMonths ? parseInt(editForm.rboInstallmentMonths, 10) : null,
rboStartDate: editForm.status === 'RBO' && editForm.rboStartDate ? editForm.rboStartDate : null,
contacted: editForm.contacted || false,
meetingStatus: editForm.contacted ? editForm.response : null,
meetingDateTime: meetingDateTime,
contactAttemptReason: editForm.contactAttemptReason || null,
contactAttemptOtherReason: editForm.contactAttemptReason === 'other' ? editForm.contactAttemptOtherReason || null : null,
notes: editForm.notes || null,
meetingNotes: editForm.meetingNotes || null,
gifts: editForm.gifts || null,
assignedAgentId: editForm.contacted && meetingDateTime ? (editForm.assignedAgentId || null) : null,
notifiedUserId: editForm.contacted && meetingDateTime && editForm.notifiedUserId ? editForm.notifiedUserId : null,
updateTimestamp: shouldUpdateTimestamp,
isExpress: editForm.isExpress || false
};
if (!navigator.onLine) {
// Offline: update locally and queue action
await updateContactOffline(editingContact.id, updateData);
setContacts(prev => prev.map(contact =>
contact.id === editingContact.id ? { ...contact, ...updateData, offline: true } : contact
));
setShowEditModal(false);
setEditingContact(null);
setIsSaving(false);
setSignatureTouched(false);
toast.success(t('contacts.contactUpdated'));
return;
}
const response = await fetch(`/api/contacts/${editingContact.id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify(updateData)
});
if (!response.ok) {
const errorData = await response.json();
if (response.status === 409 && errorData.error?.toLowerCase().includes('phone')) {
toast.error(t('contacts.errorPhoneAlreadyAdded'));
setIsSaving(false);
return;
}
throw new Error(errorData.error || 'Failed to update contact');
}
const updatedContact = await response.json();
setContacts(prev => {
const contactExists = prev.some(c => c.id === editingContact.id);
if (!contactExists) {
return prev; // No change needed
}
const updated = prev.map(contact => {
if (contact.id === editingContact.id) {
// Create a completely new object reference to trigger React re-render
return { ...updatedContact };
}
return contact;
});
return updated;
});
// Re-check for archived meetings for this contact
await checkContactsMeetingHistory([updatedContact]);
// Refresh filter counts since contact status may have changed
fetchFilterCounts();
setShowEditModal(false);
setEditingContact(null);
setIsSaving(false);
setSignatureTouched(false);
toast.success(t('contacts.contactUpdated'));
} catch (error) {
setIsSaving(false);
toast.error(t('contacts.errorUpdatingContact'));
}
};
const handleEditUseMyLocation = () => {
editGPS.startLocationRequest(
(result) => {
setEditForm(prev => ({
...prev,
address: result.address,
addressLat: result.latitude,
addressLng: result.longitude
}));
},
(error) => {
}
);
};
// ================================
// MULTI-PRODUCT MANAGEMENT FUNCTIONS
// ================================
// Load contact products (purchases and reservations)
const loadContactProducts = async (contactId) => {
if (!contactId) return;
setIsLoadingProducts(true);
try {
const response = await fetch(`/api/contacts/${contactId}/products`, {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
});
if (response.ok) {
const products = await response.json();
setContactProducts(products);
} else {
logger.error('Failed to load contact products');
}
} catch (error) {
logger.error('Error loading contact products:', error);
} finally {
setIsLoadingProducts(false);
}
};
// Add a new product (purchase or reservation)
const addProduct = async (productData) => {
if (!editingContact || isAddingProduct) return;
setIsAddingProduct(true);
try {
const endpoint = productModalType === 'purchase'
? `/api/contacts/${editingContact.id}/purchases`
: `/api/contacts/${editingContact.id}/reservations`;
const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify(productData)
});
if (response.ok) {
const newProduct = await response.json();
setContactProducts(prev => ({
...prev,
[productModalType === 'purchase' ? 'purchases' : 'reservations']: [
...prev[productModalType === 'purchase' ? 'purchases' : 'reservations'],
newProduct
]
}));
toast.success(t(`contacts.${productModalType}Added`));
setShowAddProductModal(false);
} else {
const errorData = await response.json();
toast.error(errorData.error || `Failed to add ${productModalType}`);
}
} catch (error) {
logger.error(`Error adding ${productModalType}:`, error);
toast.error(`Failed to add ${productModalType}`);
} finally {
setIsAddingProduct(false);
}
};
// Update an existing product
const updateProduct = async (productId, productData) => {
if (!editingContact || isAddingProduct) return;
setIsAddingProduct(true);
try {
const endpoint = editingProduct.type === 'purchase'
? `/api/contacts/${editingContact.id}/purchases/${productId}`
: `/api/contacts/${editingContact.id}/reservations/${productId}`;
const response = await fetch(endpoint, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify(productData)
});
if (response.ok) {
const updatedProduct = await response.json();
setContactProducts(prev => ({
...prev,
[editingProduct.type === 'purchase' ? 'purchases' : 'reservations']:
prev[editingProduct.type === 'purchase' ? 'purchases' : 'reservations'].map(p =>
p.id === productId ? updatedProduct : p
)
}));
toast.success(t(`contacts.${editingProduct.type}Updated`));
setEditingProduct(null);
setShowAddProductModal(false);
} else {
const errorData = await response.json();
toast.error(errorData.error || `Failed to update ${editingProduct.type}`);
}
} catch (error) {
logger.error(`Error updating ${editingProduct.type}:`, error);
toast.error(`Failed to update ${editingProduct.type}`);
} finally {
setIsAddingProduct(false);
}
};
// Delete a product
const deleteProduct = async (productId, type) => {
if (!editingContact) return;
const confirmed = await confirm({
title: t('common.confirmDelete'),
message: t(`contacts.confirm${type === 'purchase' ? 'Purchase' : 'Reservation'}Delete`),
confirmText: t('common.delete'),
cancelText: t('common.cancel'),
type: 'danger'
});
if (!confirmed) return;
try {
const endpoint = type === 'purchase'
? `/api/contacts/${editingContact.id}/purchases/${productId}`
: `/api/contacts/${editingContact.id}/reservations/${productId}`;
const response = await fetch(endpoint, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
});
if (response.ok) {
setContactProducts(prev => ({
...prev,
[type === 'purchase' ? 'purchases' : 'reservations']:
prev[type === 'purchase' ? 'purchases' : 'reservations'].filter(p => p.id !== productId)
}));
toast.success(t(`contacts.${type}Deleted`));
} else {
const errorData = await response.json();
toast.error(errorData.error || `Failed to delete ${type}`);
}
} catch (error) {
logger.error(`Error deleting ${type}:`, error);
toast.error(`Failed to delete ${type}`);
}
};
// Convert REZ to RBO
const convertReservationToPurchase = async (reservationId) => {
if (!editingContact) return;
const confirmed = await confirm({
title: t('contacts.confirmConversion'),
message: t('contacts.confirmConversionMessage'),
confirmText: t('contacts.convert'),
cancelText: t('common.cancel')
});
if (!confirmed) return;
try {
const response = await fetch(`/api/contacts/${editingContact.id}/reservations/${reservationId}/convert`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify({
// Use default values for conversion - can be enhanced later to ask user for these
serialNumber: '',
purchaseDate: new Date().toISOString(),
paymentType: 'cash',
notes: ''
})
});
if (response.ok) {
const { purchase } = await response.json();
setContactProducts(prev => ({
purchases: [...prev.purchases, purchase],
reservations: prev.reservations.filter(r => r.id !== reservationId)
}));
toast.success(t('contacts.reservationConverted'));
} else {
const errorData = await response.json();
toast.error(errorData.error || 'Failed to convert reservation');
}
} catch (error) {
logger.error('Error converting reservation:', error);
toast.error('Failed to convert reservation');
}
};
const handleEditMapPick = (pos, address) => {
setEditForm(prev => ({ ...prev, address, addressLat: pos[0], addressLng: pos[1] }));
setShowEditMap(false);
toast.success(t('contacts.locationSet'));
};
// Helper to truncate text
const truncate = (str, n) => (str && str.length > n ? str.slice(0, n) + '…' : str);
// Helper to get assigned agent name/email
const getAgent = (contact) => {
if (!contact) return t('common.unknown');
// Attempt 1: Use createdByUserId to find in allUsers (most reliable for consistent data)
if (contact.createdByUserId && allUsers && allUsers.length > 0) {
const userFromList = allUsers.find(u => u.id === contact.createdByUserId);
if (userFromList) {
return userFromList.firstName ? `${userFromList.firstName} ${userFromList.lastName}` : userFromList.email || t('common.unknown');
}
}
// Attempt 2: Use pre-populated createdBy or createdByUser object (might come from API include)
const prePopulatedUser = contact.createdBy || contact.createdByUser;
if (prePopulatedUser) {
return prePopulatedUser.firstName ? `${prePopulatedUser.firstName} ${prePopulatedUser.lastName}` : prePopulatedUser.email || t('common.unknown');
}
return t('common.unknown');
};
const handleFilterChange = (e) => {
try {
const { name, value } = e.target;
// Clear legend filter if using regular filters
if (activeLegendFilter) {
setActiveLegendFilter(null);
}
// Update client filters for UI display
setFilters(prev => ({ ...prev, [name]: value }));
// Map ALL relevant filters to server filters
const newServerFilters = { ...serverFilters };
switch (name) {
case 'isRBO':
case 'contacted':
case 'agentId':
case 'startDate':
case 'endDate':
case 'response':
case 'hasUpcomingMeeting':
case 'status':
newServerFilters[name] = value;
break;
case 'searchQuery':
newServerFilters.search = value;
break;
default:
}
// Update server filters – the dedicated useEffect will perform the fetch
setServerFilters(newServerFilters);
setCurrentPage(1);
} catch (error) {
toast.error(t('common.error.filterFailed') || 'Filter error occurred');
}
};
const clearFilters = () => {
// Reset client-side filter state
setFilters({
startDate: '',
endDate: '',
agentId: '',
isRBO: '',
contacted: '',
response: '',
hasUpcomingMeeting: '',
searchQuery: '',
status: ''
});
// Reset server-side filters – the watcher useEffect will refetch once
const clearedServerFilters = {
search: '',
isRBO: '',
contacted: '',
agentId: '',
startDate: '',
endDate: '',
response: '',
hasUpcomingMeeting: '',
status: ''
};
setServerFilters(clearedServerFilters);
setSearchQuery('');
setActiveLegendFilter(null);
setExpiredFilterActive(false);
setCurrentPage(1);
// Refresh filter counts when clearing filters
fetchFilterCounts();
};
// Helper: search in contact fields
const searchInContact = (contact, query) => {
if (!query) return true;
const searchStr = query.toLowerCase().trim();
const searchWords = searchStr.split(/\s+/);
// If searching with multiple words, try to match full name exactly first
if (searchWords.length > 1) {
const fullName = `${contact.name} ${contact.surname}`.toLowerCase();
const reversedFullName = `${contact.surname} ${contact.name}`.toLowerCase();
// Check for exact full name match first
if (fullName === searchStr || reversedFullName === searchStr) {
return true;
}
// Check if the search words match the beginning of name and surname
const [firstWord, secondWord] = searchWords;
if ((contact.name.toLowerCase().startsWith(firstWord) && contact.surname.toLowerCase().startsWith(secondWord)) ||
(contact.surname.toLowerCase().startsWith(firstWord) && contact.name.toLowerCase().startsWith(secondWord))) {
return true;
}
}
// For single word searches or if full name match failed, check individual fields
const fieldsToSearch = [
contact.name,
contact.surname,
contact.phone,
contact.secondaryPhone,
contact.address,
contact.profession,
contact.notes
].filter(Boolean).map(field => field.toLowerCase().trim());
// For single words, match from the start of each field
if (searchWords.length === 1) {
return fieldsToSearch.some(field => field.startsWith(searchStr));
}
// For multiple words that didn't match the full name, require all words to be present
// and at least one word should be at the start of name or surname
return searchWords.every(word =>
fieldsToSearch.some(field => field.includes(word))
) && (
contact.name.toLowerCase().startsWith(searchWords[0]) ||
contact.surname.toLowerCase().startsWith(searchWords[0]) ||
contact.name.toLowerCase().startsWith(searchWords[1]) ||
contact.surname.toLowerCase().startsWith(searchWords[1])
);
};
// Process contacts for agent display (simplified structure) - MOVED BEFORE useMemo
const processAgentContacts = useCallback((agentContacts) => {
// Sort contacts by meeting date, upcoming first (null dates at the end)
const sortedContacts = [...agentContacts].sort((a, b) => {
// Handle null/undefined meetingDateTime
if (!a.meetingDateTime && !b.meetingDateTime) return 0;
if (!a.meetingDateTime) return 1; // a goes to end
if (!b.meetingDateTime) return -1; // b goes to end
const dateA = new Date(a.meetingDateTime);
const dateB = new Date(b.meetingDateTime);
return dateA - dateB;
});
// Group contacts by date (or "No Meeting" for contacts without meetings)
const groupedByDate = sortedContacts.reduce((acc, contact) => {
let dateKey;
if (contact.meetingDateTime) {
const date = new Date(contact.meetingDateTime);
dateKey = date.toISOString().split('T')[0];
} else {
// Contacts without meetings go to a special group
dateKey = 'no-meeting';
}
if (!acc[dateKey]) {
acc[dateKey] = [];
}
acc[dateKey].push({
...contact,
referrals: [] // Agents don't see referrals structure
});
return acc;
}, {});
return groupedByDate;
}, []); // Empty deps - this logic doesn't depend on external state
// Memoized processContactsForDisplay for paginated data - recalculates only when dependencies change
const processContactsForDisplay = useMemo(() => {
try {
// Enhanced safety checks for iOS devices
if (!Array.isArray(contacts)) {
return {};
}
// For agents, the backend already applies the correct filtering with 12-hour window
// Backend filters by: assignedAgentId/notifiedUserId AND (meetingDateTime is null OR >= now - 12 hours)
// No additional client-side filtering needed - trust the backend!
if (isAgent && user?.id) {
// Just use the contacts as-is from the backend
return processAgentContacts(contacts);
}
// Memory-efficient filtering without creating unnecessary copies
let displayContacts = contacts;
// Region filtering is now handled server-side in the API
// No need for client-side region filtering since backend properly filters by region
// Apply legend filter if active (legend filters override other filters)
if (activeLegendFilter) {
displayContacts = displayContacts.filter(contact => {
try {
if (!contact) return false;
return filterContact(contact, false, activeLegendFilter, filters, user, searchInContact, regionFilter);
} catch (error) {
return false;
}
});
}
// Group by date for display with enhanced error handling
const groupedByDate = {};
for (let i = 0; i < displayContacts.length; i++) {
const contact = displayContacts[i];
try {
if (!contact || !contact.createdAt) {
continue;
}
const date = new Date(contact.createdAt);
// Validate date
if (isNaN(date.getTime())) {
continue;
}
const dateKey = date.toISOString().split('T')[0];
if (!groupedByDate[dateKey]) {
groupedByDate[dateKey] = [];
}
groupedByDate[dateKey].push(contact);
} catch (error) {
continue;
}
}
return groupedByDate;
} catch (error) {
// Return empty object as safe fallback
return {};
}
}, [contacts, isAgent, user, activeLegendFilter, filters, regionFilter, processAgentContacts]); // Added processAgentContacts to deps
// Get filtered contacts
// const filteredContacts = processContactsForDisplay();
// Helper to check if a contact has an expired rental (1 year from start date)
const hasExpiredRental = (contactId) => {
const today = new Date();
today.setHours(0, 0, 0, 0);
return rentals.some(r => {
if (r.contactId !== contactId || !r.startDate) return false;
const startDate = new Date(r.startDate);
// Rental expires 1 year after start date
const expiryDate = new Date(startDate);
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
expiryDate.setHours(0, 0, 0, 0);
return expiryDate < today;
});
};
// Helper to check if a contact has expired RBO
// Uses expirationDate field which is set to purchaseDate + 1 year initially,
// and extended when parts are replaced.
// Only considers products that have hasExpirationTracking enabled (or null, which defaults to true)
const hasExpiredRBO = (contact) => {
if (!contact?.purchases || contact.purchases.length === 0) return false;
const today = new Date();
today.setHours(0, 0, 0, 0);
// Check if any purchase is expired (expirationDate < today)
// Only for products with expiration tracking enabled
return contact.purchases.some(purchase => {
// Check if the product has expiration tracking enabled
// Default to true if not explicitly set to false
const product = purchase.Product || purchase.product;
if (product && product.hasExpirationTracking === false) {
return false; // Skip this purchase - product doesn't have expiration tracking
}
// Use expirationDate if available, otherwise fallback to purchaseDate + 1 year
if (purchase.expirationDate) {
const expirationDate = new Date(purchase.expirationDate);
expirationDate.setHours(0, 0, 0, 0);
return expirationDate < today;
}
// Fallback for purchases without expirationDate (shouldn't happen after migration)
if (!purchase.purchaseDate) return false;
const purchaseDate = new Date(purchase.purchaseDate);
const expiryDate = new Date(purchaseDate);
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
expiryDate.setHours(0, 0, 0, 0);
return expiryDate < today;
});
};
// Helper to check if a contact has reservations past their expiry date
// Skips reservations already marked as expired/cancelled/converted, and products without expiration tracking
const hasExpiredReservation = (contact) => {
if (!contact?.reservations || contact.reservations.length === 0) return false;
const today = new Date();
today.setHours(0, 0, 0, 0);
return contact.reservations.some(reservation => {
if (reservation.status === 'expired' || reservation.status === 'cancelled' || reservation.status === 'converted_to_purchase') return false;
const product = reservation.Product || reservation.product;
if (product && product.hasExpirationTracking === false) return false;
if (!reservation.expiryDate) return false;
const expiryDate = new Date(reservation.expiryDate);
expiryDate.setHours(0, 0, 0, 0);
return expiryDate < today;
});
};
// Helper to check if a contact has any expired status (rental, RBO, or reservation)
const hasAnyExpired = (contact) => {
return hasExpiredRental(contact.id) || hasExpiredRBO(contact) || hasExpiredReservation(contact);
};
// displayContacts - now server-side filtering handles expired filter
// This useMemo is kept for potential future client-side filtering needs
const displayContacts = useMemo(() => {
return contacts;
}, [contacts]);
// Helper to get Google Maps URL
const getGoogleMapsUrl = (contact) => {
if (contact.addressLat && contact.addressLng) {
return `https://www.google.com/maps/search/?api=1&query=${contact.addressLat},${contact.addressLng}`;
}
return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(contact.address)}`;
};
// Render status icons
const renderStatusIcons = (contact) => {
const isExpired = hasAnyExpired(contact);
if (!contact.contacted) {
return (
{isExpired && (
)}
);
}
return (
{/* Only show meetingStatus if meetingDateTime exists and is in the past */}
{contact.meetingDateTime && isPast(contact.meetingDateTime) && contact.meetingStatus && (
{/* Group 2: Original Actions, with ml-4 for separation */}
{/* Meeting History indicator - Show for contacts with archived meetings */}
{contactsWithHistory && contactsWithHistory.has(contact.id) && (
)}
{/* Referrals info button - Show for contacts with referral activity */}
{hasReferralActivity(contact) && (
)}
{/* For agents, show edit and referral buttons */}
{isAgent ? (
<>
) : isOperator ? (
// Operator sees add referral, edit, and delete buttons (no PDF download)
<>
) : (
// Admin/Owner see all buttons in desktop order: Add Referral, PDF Download, Edit, Delete
<>
)}