function MainComponent() { const [currentOnsite, setCurrentOnsite] = React.useState([]); const [filteredOnsite, setFilteredOnsite] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(""); const [success, setSuccess] = React.useState(""); const [searchTerm, setSearchTerm] = React.useState(""); const [inactivityTimer, setInactivityTimer] = React.useState(15); const [inactivityTimeout, setInactivityTimeout] = React.useState(15); // Add state for timeout setting const [signingOutIds, setSigningOutIds] = React.useState(new Set()); const [showChecklistModal, setShowChecklistModal] = React.useState(false); const [checklistData, setChecklistData] = React.useState(null); const [checklistItems, setChecklistItems] = React.useState([]); const [pendingSignOut, setPendingSignOut] = React.useState(null); // Reset inactivity timer on any user activity const resetInactivityTimer = React.useCallback(()=>{ setInactivityTimer(inactivityTimeout); // Use the setting value instead of hardcoded 15 }, [ inactivityTimeout ]); // Load inactivity timeout from settings React.useEffect(()=>{ const loadSettings = async ()=>{ try { const response = await fetch("/api/get-settings", { method: "POST" }); if (response.ok) { const data = await response.json(); if (data.success && data.settings.system_config?.inactivity_timeout_seconds) { const timeoutSeconds = data.settings.system_config.inactivity_timeout_seconds; setInactivityTimeout(timeoutSeconds); setInactivityTimer(timeoutSeconds); // Initialize timer with the setting } } } catch (err) { console.error("Failed to load settings:", err); } }; loadSettings(); }, []); // Helper function to get full name const getFullName = (record)=>{ return record.first_name + (record.surname ? " " + record.surname : ""); }; // Load current onsite people const loadCurrentOnsite = React.useCallback(async ()=>{ setLoading(true); try { const response = await fetch("/api/current-onsite", { method: "POST" }); if (!response.ok) { throw new Error(`Failed to load current onsite: ${response.status}`); } const data = await response.json(); if (data.success) { setCurrentOnsite(data.records); setFilteredOnsite(data.records); } else { setError(data.error || "Failed to load current onsite"); } } catch (err) { console.error(err); setError("Could not load current onsite people"); } finally{ setLoading(false); } }, []); // Filter onsite people based on search term React.useEffect(()=>{ let filtered = currentOnsite; if (searchTerm) { filtered = filtered.filter((person)=>{ const fullName = getFullName(person); return fullName.toLowerCase().includes(searchTerm.toLowerCase()) || person.first_name.toLowerCase().includes(searchTerm.toLowerCase()) || person.surname && person.surname.toLowerCase().includes(searchTerm.toLowerCase()); }); } // Sort by visitor type priority, then alphabetically by surname filtered = filtered.sort((a, b)=>{ // Define priority order: Cadets first, then CFAV, then others const getTypePriority = (visitorType)=>{ if (visitorType.includes("Cadets")) return 1; if (visitorType.includes("CFAV")) return 2; return 3; }; const aPriority = getTypePriority(a.visitor_type); const bPriority = getTypePriority(b.visitor_type); // First sort by type priority if (aPriority !== bPriority) { return aPriority - bPriority; } // Then sort alphabetically by surname within the same type const aSurname = (a.surname || "").toLowerCase(); const bSurname = (b.surname || "").toLowerCase(); return aSurname.localeCompare(bSurname); }); setFilteredOnsite(filtered); }, [ currentOnsite, searchTerm ]); // Handle sign out with immediate visual feedback const handleSignOut = async (recordId, personRecord)=>{ resetInactivityTimer(); setError(""); const personName = getFullName(personRecord); // Add this ID to the signing out set for immediate visual feedback setSigningOutIds((prev)=>new Set([ ...prev, recordId ])); try { const response = await fetch("/api/sign-out", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: recordId }) }); if (!response.ok) { throw new Error(`Sign out failed: ${response.status}`); } const data = await response.json(); if (data.success) { setSuccess(`${personName} signed out successfully!`); // Remove from current onsite immediately for quick feedback setCurrentOnsite((prev)=>prev.filter((record)=>record.id !== recordId)); setFilteredOnsite((prev)=>prev.filter((record)=>record.id !== recordId)); } else { setError(data.error || "Failed to sign out"); } } catch (err) { console.error(err); setError("Could not complete sign out"); } finally{ // Remove from signing out set setSigningOutIds((prev)=>{ const newSet = new Set(prev); newSet.delete(recordId); return newSet; }); } }; // Load current onsite on component mount React.useEffect(()=>{ loadCurrentOnsite(); }, [ loadCurrentOnsite ]); // Inactivity timer - counts down and redirects after 15 seconds of no activity React.useEffect(()=>{ const timer = setInterval(()=>{ setInactivityTimer((prev)=>{ if (prev <= 1) { window.location.href = "/"; return 0; } return prev - 1; }); }, 1000); return ()=>clearInterval(timer); }, []); // Add event listeners for user activity to reset timer React.useEffect(()=>{ const handleActivity = ()=>{ resetInactivityTimer(); }; // Listen for clicks and key presses anywhere on the page document.addEventListener("click", handleActivity); document.addEventListener("keydown", handleActivity); document.addEventListener("input", handleActivity); return ()=>{ document.removeEventListener("click", handleActivity); document.removeEventListener("keydown", handleActivity); document.removeEventListener("input", handleActivity); }; }, [ resetInactivityTimer ]); // Clear messages after 5 seconds React.useEffect(()=>{ if (error) { const timer = setTimeout(()=>setError(""), 5000); return ()=>clearTimeout(timer); } }, [ error ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 207, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-4", __source: { fileName: "", lineNumber: 208, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6 mb-6", __source: { fileName: "", lineNumber: 210, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-6", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/a42a6436-10f9-4e1b-9526-98f54b880292/-/format/auto/", alt: "Sea Cadets Logo", className: "w-32 h-32 object-contain", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, "Sign Out"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-1", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, "Auto-return to home in ", inactivityTimer, " seconds"))), /*#__PURE__*/ React.createElement("a", { href: "/", className: "bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }), "Back")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), placeholder: "Search by name...", className: "w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-3 text-gray-400", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }), error), success && /*#__PURE__*/ React.createElement("div", { className: "bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-4", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }), success), loading && currentOnsite.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 267, columnNumber: 15 }, __self: this }, "Loading...")) : filteredOnsite.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-500", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, currentOnsite.length === 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-4xl mb-4", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 274, columnNumber: 19 }, __self: this }, "No one is currently signed in")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-4xl mb-4", __source: { fileName: "", lineNumber: 278, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, 'No people found matching "', searchTerm, '"'))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 284, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-4", __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }, filteredOnsite.length, " people currently onsite"), filteredOnsite.map((record)=>{ const isSigningOut = signingOutIds.has(record.id); return /*#__PURE__*/ React.createElement("div", { key: record.id, className: `rounded-lg p-4 flex items-center justify-between transition-all duration-300 ${isSigningOut ? "bg-green-50 border-2 border-green-200" : "bg-gray-50"}`, __source: { fileName: "", lineNumber: 291, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 299, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `font-medium transition-colors duration-300 ${isSigningOut ? "text-green-800" : "text-gray-900"}`, __source: { fileName: "", lineNumber: 300, columnNumber: 23 }, __self: this }, getFullName(record)), /*#__PURE__*/ React.createElement("p", { className: `text-sm transition-colors duration-300 ${isSigningOut ? "text-green-600" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 307, columnNumber: 23 }, __self: this }, record.visitor_type)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSignOut(record.id, record), disabled: isSigningOut, className: `px-4 py-2 rounded-md focus:outline-none focus:ring-2 transition-all duration-300 ${isSigningOut ? "bg-green-600 text-white focus:ring-green-500" : "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500"} disabled:opacity-50`, __source: { fileName: "", lineNumber: 315, columnNumber: 21 }, __self: this }, isSigningOut ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 326, columnNumber: 27 }, __self: this }), "Signed Out!") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 331, columnNumber: 27 }, __self: this }), "Sign Out"))); }))), showChecklistModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 345, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-96 max-w-md mx-4 max-h-[90vh] overflow-y-auto", __source: { fileName: "", lineNumber: 346, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clipboard-check text-blue-500 mr-2", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }), "CFAV Checkout Checklist"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 351, columnNumber: 15 }, __self: this }, "As the last CFAV signing out, please complete this checklist:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3 mb-6", __source: { fileName: "", lineNumber: 355, columnNumber: 15 }, __self: this }, checklistItems.map((item, index)=>/*#__PURE__*/ React.createElement("label", { key: item.id, className: "flex items-center p-3 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer", __source: { fileName: "", lineNumber: 357, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: item.checked, onChange: (e)=>updateChecklistItem(index, e.target.checked), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-3", __source: { fileName: "", lineNumber: 361, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 369, columnNumber: 21 }, __self: this }, item.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 374, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleChecklistComplete, className: "flex-1 bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500", __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 379, columnNumber: 19 }, __self: this }), "Complete & Sign Out"), /*#__PURE__*/ React.createElement("button", { onClick: handleChecklistCancel, className: "flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500", __source: { fileName: "", lineNumber: 382, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times mr-2", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this }), "Cancel")))))); }