function MainComponent() { const [currentOnsite, setCurrentOnsite] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(""); const [success, setSuccess] = React.useState(""); // PIN protection state const [showPasswordModal, setShowPasswordModal] = React.useState(true); const [password, setPassword] = React.useState(""); const [hasAccess, setHasAccess] = React.useState(false); // Helper function to get full name const getFullName = (record)=>{ return record.first_name + (record.surname ? " " + record.surname : ""); }; // Helper function to get visitor type sort order const getVisitorTypeSortOrder = (visitorType)=>{ // Cadets first (1), then CFAV (2), then others (3) if (visitorType === "Maryport Cadets" || visitorType === "Visiting Cadets") { return 1; } if (visitorType === "Maryport CFAV" || visitorType === "Visiting CFAV") { return 2; } return 3; // Contractor, Other visitor }; // PIN password check const handlePasswordSubmit = (e)=>{ e.preventDefault(); if (password === "541") { setShowPasswordModal(false); setHasAccess(true); setPassword(""); setError(""); } else { setError("Incorrect PIN"); setPassword(""); } }; // 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) { // Sort by visitor type (cadets, staff, others) then by name const sortedRecords = data.records.sort((a, b)=>{ const aOrder = getVisitorTypeSortOrder(a.visitor_type); const bOrder = getVisitorTypeSortOrder(b.visitor_type); if (aOrder !== bOrder) { return aOrder - bOrder; } // If same type, sort by name const aName = getFullName(a).toLowerCase(); const bName = getFullName(b).toLowerCase(); return aName.localeCompare(bName); }); setCurrentOnsite(sortedRecords); } else { setError(data.error || "Failed to load current onsite"); } } catch (err) { console.error(err); setError("Could not load current onsite people"); } finally{ setLoading(false); } }, []); // Mark person as safe const markSafe = async (id, personRecord)=>{ const name = getFullName(personRecord); // Optimistic update - immediately update the UI setCurrentOnsite((prev)=>prev.map((record)=>record.id === id ? { ...record, marked_safe: true } : record)); try { const response = await fetch("/api/mark-safe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }) }); if (!response.ok) { throw new Error(`Failed to mark safe: ${response.status}`); } const data = await response.json(); if (data.success) { setSuccess(`${name} marked as safe`); // Don't reload - we already updated optimistically } else { // Revert optimistic update on error setCurrentOnsite((prev)=>prev.map((record)=>record.id === id ? { ...record, marked_safe: false } : record)); setError(data.error || "Failed to mark as safe"); } } catch (err) { console.error(err); // Revert optimistic update on error setCurrentOnsite((prev)=>prev.map((record)=>record.id === id ? { ...record, marked_safe: false } : record)); setError("Could not mark person as safe"); } }; // Unmark person as safe const unmarkSafe = async (id, personRecord)=>{ const name = getFullName(personRecord); // Optimistic update - immediately update the UI setCurrentOnsite((prev)=>prev.map((record)=>record.id === id ? { ...record, marked_safe: false } : record)); try { const response = await fetch("/api/unmark-safe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }) }); if (!response.ok) { throw new Error(`Failed to unmark safe: ${response.status}`); } const data = await response.json(); if (data.success) { setSuccess(`${name} marked as unaccounted`); // Don't reload - we already updated optimistically } else { // Revert optimistic update on error setCurrentOnsite((prev)=>prev.map((record)=>record.id === id ? { ...record, marked_safe: true } : record)); setError(data.error || "Failed to unmark as safe"); } } catch (err) { console.error(err); // Revert optimistic update on error setCurrentOnsite((prev)=>prev.map((record)=>record.id === id ? { ...record, marked_safe: true } : record)); setError("Could not unmark person as safe"); } }; // Load current onsite on component mount - only if user has access React.useEffect(()=>{ if (hasAccess) { loadCurrentOnsite(); } }, [ loadCurrentOnsite, hasAccess ]); // Clear messages after 5 seconds React.useEffect(()=>{ if (success) { const timer = setTimeout(()=>setSuccess(""), 5000); return ()=>clearTimeout(timer); } }, [ success ]); React.useEffect(()=>{ if (error) { const timer = setTimeout(()=>setError(""), 5000); return ()=>clearTimeout(timer); } }, [ error ]); const formatDateTime = (dateString)=>{ const date = new Date(dateString); return date.toLocaleString("en-GB", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" }); }; const safeCount = currentOnsite.filter((r)=>r.marked_safe).length; const unaccountedCount = currentOnsite.filter((r)=>!r.marked_safe).length; const progressPercentage = currentOnsite.length > 0 ? Math.round(safeCount / currentOnsite.length * 100) : 0; // Show PIN modal if user doesn't have access if (!hasAccess) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-red-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 216, columnNumber: 7 }, __self: this }, showPasswordModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-96 max-w-md mx-4", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lock text-red-500 mr-2", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }), "Emergency Roll Call Access"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this }, "This page requires staff authorization. Please enter the PIN to continue."), /*#__PURE__*/ React.createElement("form", { onSubmit: handlePasswordSubmit, __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }, "Enter PIN"), /*#__PURE__*/ React.createElement("input", { type: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500", placeholder: "PIN...", autoFocus: true, __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-600 text-sm mt-2", __source: { fileName: "", lineNumber: 243, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-1", __source: { fileName: "", lineNumber: 244, columnNumber: 23 }, __self: this }), error)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-1 bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500", __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, "Access"), /*#__PURE__*/ React.createElement("a", { href: "/", 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 text-center", __source: { fileName: "", lineNumber: 256, columnNumber: 19 }, __self: this }, "Back to Main")))))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-red-50", __source: { fileName: "", lineNumber: 272, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto p-6", __source: { fileName: "", lineNumber: 273, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm mb-6 border-2 border-red-200", __source: { fileName: "", lineNumber: 275, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 276, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 277, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-red-900 mb-3", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle mr-3", __source: { fileName: "", lineNumber: 280, columnNumber: 19 }, __self: this }), "Emergency Roll Call"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-red-700", __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, "Account for all people currently onsite during emergency situations")), /*#__PURE__*/ React.createElement("a", { href: "/", className: "bg-gray-100 text-gray-700 px-6 py-3 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 text-lg font-medium", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }), "Back to Main")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 298, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 299, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-700", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line mr-2", __source: { fileName: "", lineNumber: 301, columnNumber: 19 }, __self: this }), "Roll Call Progress"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-bold text-gray-700", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, progressPercentage, "% Complete (", safeCount, "/", currentOnsite.length, ")")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-6 border border-gray-300", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-full rounded-full transition-all duration-500 flex items-center justify-center text-white font-medium ${progressPercentage === 100 ? "bg-green-600" : progressPercentage >= 50 ? "bg-yellow-500" : "bg-red-500"}`, style: { width: `${Math.max(progressPercentage, 8)}%` }, __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, progressPercentage > 8 && /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 323, columnNumber: 21 }, __self: this }, safeCount, "/", currentOnsite.length))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm text-gray-600 mt-1", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 330, columnNumber: 17 }, __self: this }, "0 accounted"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, currentOnsite.length, " total onsite"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 336, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: loadCurrentOnsite, disabled: loading, className: "bg-red-600 text-white px-8 py-4 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50 text-xl font-medium", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-3", __source: { fileName: "", lineNumber: 344, columnNumber: 21 }, __self: this }), "Refreshing...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt mr-3", __source: { fileName: "", lineNumber: 349, columnNumber: 21 }, __self: this }), "Refresh Roll Call"))))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-300 text-red-800 px-6 py-4 rounded-lg mb-6 text-lg", __source: { fileName: "", lineNumber: 360, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-3", __source: { fileName: "", lineNumber: 361, columnNumber: 13 }, __self: this }), error), success && /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 border border-green-300 text-green-800 px-6 py-4 rounded-lg mb-6 text-lg", __source: { fileName: "", lineNumber: 367, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-3", __source: { fileName: "", lineNumber: 368, columnNumber: 13 }, __self: this }), success), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border-2 border-red-200", __source: { fileName: "", lineNumber: 374, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 375, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-red-900 mb-6", __source: { fileName: "", lineNumber: 376, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clipboard-list mr-3", __source: { fileName: "", lineNumber: 377, columnNumber: 15 }, __self: this }), "Roll Call Status"), currentOnsite.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-16 text-gray-500", __source: { fileName: "", lineNumber: 382, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-6xl mb-6", __source: { fileName: "", lineNumber: 385, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 386, columnNumber: 21 }, __self: this }, "Loading roll call...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-6xl mb-6", __source: { fileName: "", lineNumber: 390, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 391, columnNumber: 21 }, __self: this }, "No one is currently onsite"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mt-2", __source: { fileName: "", lineNumber: 392, columnNumber: 21 }, __self: this }, "All clear - no emergency roll call needed"))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 399, columnNumber: 15 }, __self: this }, currentOnsite.filter((record)=>!record.marked_safe).length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 403, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-yellow-800 mb-3 flex items-center", __source: { fileName: "", lineNumber: 404, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 405, columnNumber: 23 }, __self: this }), "Unaccounted (", currentOnsite.filter((record)=>!record.marked_safe).length, ")"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 413, columnNumber: 21 }, __self: this }, currentOnsite.filter((record)=>!record.marked_safe).sort((a, b)=>{ const aOrder = getVisitorTypeSortOrder(a.visitor_type); const bOrder = getVisitorTypeSortOrder(b.visitor_type); if (aOrder !== bOrder) { return aOrder - bOrder; } // If same type, sort by name const aName = getFullName(a).toLowerCase(); const bName = getFullName(b).toLowerCase(); return aName.localeCompare(bName); }).map((record)=>/*#__PURE__*/ React.createElement("div", { key: record.id, className: "rounded-lg p-4 border-2 bg-yellow-50 border-yellow-200 flex items-center justify-between", __source: { fileName: "", lineNumber: 434, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 438, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 439, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg text-gray-900 mr-3", __source: { fileName: "", lineNumber: 440, columnNumber: 33 }, __self: this }, getFullName(record)), /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800", __source: { fileName: "", lineNumber: 443, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "mr-1 fas fa-exclamation-circle", __source: { fileName: "", lineNumber: 444, columnNumber: 35 }, __self: this }), "UNACCOUNTED")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 text-sm text-gray-600", __source: { fileName: "", lineNumber: 449, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 450, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-tag mr-1 text-blue-500", __source: { fileName: "", lineNumber: 451, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 452, columnNumber: 35 }, __self: this }, record.visitor_type)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 455, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-1 text-green-500", __source: { fileName: "", lineNumber: 456, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 457, columnNumber: 35 }, __self: this }, formatDateTime(record.sign_in_time))), record.home_unit && /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 463, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building mr-1 text-purple-500", __source: { fileName: "", lineNumber: 464, columnNumber: 37 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 465, columnNumber: 37 }, __self: this }, record.home_unit)), record.company && /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 470, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase mr-1 text-orange-500", __source: { fileName: "", lineNumber: 471, columnNumber: 37 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 472, columnNumber: 37 }, __self: this }, record.company)), record.reason_for_visit && /*#__PURE__*/ React.createElement("div", { className: "flex items-center md:col-span-2 lg:col-span-3", __source: { fileName: "", lineNumber: 477, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment mr-1 text-gray-500", __source: { fileName: "", lineNumber: 478, columnNumber: 37 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "truncate", __source: { fileName: "", lineNumber: 479, columnNumber: 37 }, __self: this }, record.reason_for_visit)))), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex-shrink-0", __source: { fileName: "", lineNumber: 487, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>markSafe(record.id, record), disabled: loading, className: "bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50 font-medium", __source: { fileName: "", lineNumber: 488, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 493, columnNumber: 33 }, __self: this }), "Mark Safe")))))), currentOnsite.filter((record)=>record.marked_safe).length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 506, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-green-800 mb-3 flex items-center", __source: { fileName: "", lineNumber: 507, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 508, columnNumber: 23 }, __self: this }), "Accounted For (", currentOnsite.filter((record)=>record.marked_safe).length, ")"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 516, columnNumber: 21 }, __self: this }, currentOnsite.filter((record)=>record.marked_safe).sort((a, b)=>{ const aOrder = getVisitorTypeSortOrder(a.visitor_type); const bOrder = getVisitorTypeSortOrder(b.visitor_type); if (aOrder !== bOrder) { return aOrder - bOrder; } // If same type, sort by name const aName = getFullName(a).toLowerCase(); const bName = getFullName(b).toLowerCase(); return aName.localeCompare(bName); }).map((record)=>/*#__PURE__*/ React.createElement("div", { key: record.id, className: "rounded-lg p-4 border-2 bg-green-50 border-green-200 flex items-center justify-between", __source: { fileName: "", lineNumber: 537, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 541, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 542, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg text-gray-900 mr-3", __source: { fileName: "", lineNumber: 543, columnNumber: 33 }, __self: this }, getFullName(record)), /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800", __source: { fileName: "", lineNumber: 546, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "mr-1 fas fa-check-circle", __source: { fileName: "", lineNumber: 547, columnNumber: 35 }, __self: this }), "SAFE")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 text-sm text-gray-600", __source: { fileName: "", lineNumber: 552, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 553, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-tag mr-1 text-blue-500", __source: { fileName: "", lineNumber: 554, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 555, columnNumber: 35 }, __self: this }, record.visitor_type)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 558, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-1 text-green-500", __source: { fileName: "", lineNumber: 559, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 560, columnNumber: 35 }, __self: this }, formatDateTime(record.sign_in_time))), record.home_unit && /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 566, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building mr-1 text-purple-500", __source: { fileName: "", lineNumber: 567, columnNumber: 37 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 568, columnNumber: 37 }, __self: this }, record.home_unit)), record.company && /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 573, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase mr-1 text-orange-500", __source: { fileName: "", lineNumber: 574, columnNumber: 37 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 575, columnNumber: 37 }, __self: this }, record.company)), record.reason_for_visit && /*#__PURE__*/ React.createElement("div", { className: "flex items-center md:col-span-2 lg:col-span-3", __source: { fileName: "", lineNumber: 580, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment mr-1 text-gray-500", __source: { fileName: "", lineNumber: 581, columnNumber: 37 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "truncate", __source: { fileName: "", lineNumber: 582, columnNumber: 37 }, __self: this }, record.reason_for_visit)))), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex-shrink-0", __source: { fileName: "", lineNumber: 590, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>unmarkSafe(record.id, record), disabled: loading, className: "bg-yellow-600 text-white px-4 py-2 rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 disabled:opacity-50 font-medium", __source: { fileName: "", lineNumber: 591, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 596, columnNumber: 33 }, __self: this }), "Mark Unaccounted"))))))))))); }