function MainComponent() { const [isLoggedIn, setIsLoggedIn] = useState(false); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [loginError, setLoginError] = useState(""); const [applications, setApplications] = useState([]); const [loading, setLoading] = useState(false); const [selectedApplication, setSelectedApplication] = useState(null); const [showDetailsModal, setShowDetailsModal] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [sortConfig, setSortConfig] = useState({ key: "submission_date", direction: "desc" }); const [scrolled, setScrolled] = useState(false); const [viewingFile, setViewingFile] = useState(null); const [showFileModal, setShowFileModal] = useState(false); // Fetch applications from the API const fetchApplications = async ()=>{ if (!isLoggedIn) return; setLoading(true); try { const response = await fetch("/api/applications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ operation: "list" }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const result = await response.json(); if (result.success) { setApplications(result.applications); } else { console.error("Failed to fetch applications:", result.message); } } catch (error) { console.error("Error fetching applications:", error); } finally{ setLoading(false); } }; // Load applications when logged in useEffect(()=>{ if (isLoggedIn) { fetchApplications(); } }, [ isLoggedIn ]); // Handle login const handleLogin = async (e)=>{ e.preventDefault(); setLoginError(""); try { const response = await fetch("/api/applications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ operation: "login", credentials: { username, password } }) }); const result = await response.json(); if (result.success) { setIsLoggedIn(true); setLoginError(""); } else { setLoginError("Invalid username or password"); } } catch (error) { console.error("Login error:", error); setLoginError("An error occurred during login. Please try again."); } }; // Handle logout const handleLogout = ()=>{ setIsLoggedIn(false); setUsername(""); setPassword(""); setApplications([]); }; // Handle application status change const handleStatusChange = async (id, newStatus)=>{ try { const response = await fetch("/api/applications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ operation: "updateStatus", id, status: newStatus }) }); const result = await response.json(); if (result.success) { // Update the application in the local state setApplications(applications.map((app)=>app.id === id ? { ...app, status: newStatus } : app)); // Update selected application if it's the one being modified if (selectedApplication && selectedApplication.id === id) { setSelectedApplication({ ...selectedApplication, status: newStatus }); } } else { console.error("Failed to update application status:", result.message); } } catch (error) { console.error("Error updating application status:", error); } }; // Handle view application details const handleViewDetails = async (application)=>{ try { const response = await fetch("/api/applications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ operation: "get", id: application.id }) }); const result = await response.json(); if (result.success) { setSelectedApplication(result.application); setShowDetailsModal(true); } else { console.error("Failed to fetch application details:", result.message); } } catch (error) { console.error("Error fetching application details:", error); } }; // Handle export data const handleExportData = ()=>{ const csvContent = "data:text/csv;charset=utf-8," + "ID,Name,Email,Phone,Program,Submission Date,Status\n" + applications.map((app)=>`${app.id},"${app.name}","${app.email}","${app.phone || ""}","${app.program}","${app.submission_date}","${app.status}"`).join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", "applications.csv"); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; // Function to handle document viewing const handleViewDocument = (url, fileType)=>{ if (!url) { console.error("No URL provided for viewing"); return; } setViewingFile({ url, fileType }); setShowFileModal(true); }; // Function to handle document download const handleDownloadDocument = async (url, fileName)=>{ if (!url) { console.error("No URL provided for download"); return; } try { // Fetch the file content const response = await fetch(url); if (!response.ok) { throw new Error(`Failed to download file: ${response.status} ${response.statusText}`); } // Get the blob from the response const blob = await response.blob(); // Create a blob URL const blobUrl = window.URL.createObjectURL(blob); // Create a temporary anchor element const link = document.createElement("a"); link.href = blobUrl; link.setAttribute("download", fileName || "document"); document.body.appendChild(link); // Trigger the download link.click(); // Clean up document.body.removeChild(link); window.URL.revokeObjectURL(blobUrl); } catch (error) { console.error("Error downloading document:", error); } }; // Filter applications based on search term const filteredApplications = applications.filter((app)=>app.name?.toLowerCase().includes(searchTerm.toLowerCase()) || app.email?.toLowerCase().includes(searchTerm.toLowerCase()) || app.program?.toLowerCase().includes(searchTerm.toLowerCase()) || app.status?.toLowerCase().includes(searchTerm.toLowerCase())); // Sort applications const sortedApplications = [ ...filteredApplications ].sort((a, b)=>{ if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === "asc" ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === "asc" ? 1 : -1; } return 0; }); // Request sort const requestSort = (key)=>{ let direction = "asc"; if (sortConfig.key === key && sortConfig.direction === "asc") { direction = "desc"; } setSortConfig({ key, direction }); }; // Add scroll event listener useEffect(()=>{ const handleScroll = ()=>{ if (window.scrollY > 100) { setScrolled(true); } else { setScrolled(false); } }; window.addEventListener("scroll", handleScroll); return ()=>{ window.removeEventListener("scroll", handleScroll); }; }, []); // Determine if a URL is an image const isImageUrl = (url)=>{ if (!url) return false; return url.match(/\.(jpeg|jpg|gif|png)$/i) !== null; }; // Determine if a URL is a PDF const isPdfUrl = (url)=>{ if (!url) return false; return url.toLowerCase().endsWith(".pdf"); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f9f9f9] font-poppins", __source: { fileName: "", lineNumber: 296, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: `fixed w-full z-10 transition-all duration-300 ${scrolled ? "bg-black py-2" : "bg-white py-4 shadow-md"}`, __source: { fileName: "", lineNumber: 298, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 301, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 302, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0a178fb9-5629-40de-a488-612eb17560ab/-/format/auto/", alt: "Gaborone Culinary College of Arts logo", className: `h-16 mr-3 transition-all duration-300 ${scrolled ? "brightness-0 invert" : ""}`, __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-8 items-center", __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: `font-medium transition-colors duration-300 ${scrolled ? "text-white hover:text-[#00a0e4]" : "text-[#333] hover:text-[#00a0e4]"}`, __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this }, "Home"), isLoggedIn && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/admin", className: `font-medium transition-colors duration-300 ${scrolled ? "text-white text-[#00a0e4]" : "text-[#00a0e4]"}`, __source: { fileName: "", lineNumber: 319, columnNumber: 17 }, __self: this }, "Applications"), /*#__PURE__*/ React.createElement("a", { href: "/admin/domains", className: `font-medium transition-colors duration-300 ${scrolled ? "text-white hover:text-[#00a0e4]" : "text-[#333] hover:text-[#00a0e4]"}`, __source: { fileName: "", lineNumber: 325, columnNumber: 17 }, __self: this }, "Domains"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogout, className: "bg-[#00a0e4] text-white px-4 py-2 rounded hover:bg-[#0088c3] transition duration-300", __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, "Logout"))), isLoggedIn && /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center", __source: { fileName: "", lineNumber: 343, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleLogout, className: "bg-[#00a0e4] text-white px-3 py-1 rounded hover:bg-[#0088c3] transition duration-300 text-sm mr-2", __source: { fileName: "", lineNumber: 344, columnNumber: 15 }, __self: this }, "Logout"), /*#__PURE__*/ React.createElement("a", { href: "/admin/domains", className: `font-medium transition-colors duration-300 mr-4 ${scrolled ? "text-white hover:text-[#00a0e4]" : "text-[#333] hover:text-[#00a0e4]"}`, __source: { fileName: "", lineNumber: 350, columnNumber: 15 }, __self: this }, "Domains")))), /*#__PURE__*/ React.createElement("div", { className: "pt-32 pb-16 px-4", __source: { fileName: "", lineNumber: 362, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 363, columnNumber: 9 }, __self: this }, !isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-8", __source: { fileName: "", lineNumber: 365, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-6 text-center", __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this }, "Admin Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, __source: { fileName: "", lineNumber: 369, columnNumber: 15 }, __self: this }, loginError && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this }, loginError), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#666] text-sm font-medium mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 376, columnNumber: 19 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "username", name: "username", value: username, onChange: (e)=>setUsername(e.target.value), className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00a0e4]", required: true, __source: { fileName: "", lineNumber: 382, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 392, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#666] text-sm font-medium mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 393, columnNumber: 19 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00a0e4]", required: true, __source: { fileName: "", lineNumber: 399, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#00a0e4] text-white py-3 px-4 rounded-md hover:bg-[#0088c3] transition duration-300", __source: { fileName: "", lineNumber: 409, columnNumber: 17 }, __self: this }, "Login"))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 418, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-8", __source: { fileName: "", lineNumber: 420, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-4", __source: { fileName: "", lineNumber: 421, columnNumber: 17 }, __self: this }, "Application Management Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4", __source: { fileName: "", lineNumber: 424, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full sm:w-auto", __source: { fileName: "", lineNumber: 425, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search applications...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00a0e4] w-full", __source: { fileName: "", lineNumber: 426, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-3 top-3 text-gray-400", __source: { fileName: "", lineNumber: 433, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleExportData, className: "bg-[#00a0e4] text-white px-4 py-2 rounded hover:bg-[#0088c3] transition duration-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 435, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 439, columnNumber: 21 }, __self: this }), " Export Data"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 444, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 446, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-[#00a0e4]", __source: { fileName: "", lineNumber: 447, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-500", __source: { fileName: "", lineNumber: 448, columnNumber: 21 }, __self: this }, "Loading applications...")) : /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 453, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 454, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 455, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 456, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer", onClick: ()=>requestSort("id"), __source: { fileName: "", lineNumber: 457, columnNumber: 27 }, __self: this }, "ID", sortConfig.key === "id" && /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 464, columnNumber: 31 }, __self: this }, sortConfig.direction === "asc" ? "↑" : "↓")), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer", onClick: ()=>requestSort("name"), __source: { fileName: "", lineNumber: 469, columnNumber: 27 }, __self: this }, "Name", sortConfig.key === "name" && /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 476, columnNumber: 31 }, __self: this }, sortConfig.direction === "asc" ? "↑" : "↓")), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer", onClick: ()=>requestSort("email"), __source: { fileName: "", lineNumber: 481, columnNumber: 27 }, __self: this }, "Email", sortConfig.key === "email" && /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 488, columnNumber: 31 }, __self: this }, sortConfig.direction === "asc" ? "↑" : "↓")), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer", onClick: ()=>requestSort("program"), __source: { fileName: "", lineNumber: 493, columnNumber: 27 }, __self: this }, "Program", sortConfig.key === "program" && /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 500, columnNumber: 31 }, __self: this }, sortConfig.direction === "asc" ? "↑" : "↓")), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer", onClick: ()=>requestSort("submission_date"), __source: { fileName: "", lineNumber: 505, columnNumber: 27 }, __self: this }, "Submission Date", sortConfig.key === "submission_date" && /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 512, columnNumber: 31 }, __self: this }, sortConfig.direction === "asc" ? "↑" : "↓")), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer", onClick: ()=>requestSort("status"), __source: { fileName: "", lineNumber: 517, columnNumber: 27 }, __self: this }, "Status", sortConfig.key === "status" && /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 524, columnNumber: 31 }, __self: this }, sortConfig.direction === "asc" ? "↑" : "↓")), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 529, columnNumber: 27 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 537, columnNumber: 23 }, __self: this }, sortedApplications.map((application)=>/*#__PURE__*/ React.createElement("tr", { key: application.id, className: "hover:bg-gray-50", __source: { fileName: "", lineNumber: 539, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 540, columnNumber: 29 }, __self: this }, application.id), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 543, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 544, columnNumber: 31 }, __self: this }, application.name)), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 548, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 549, columnNumber: 31 }, __self: this }, application.email)), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 553, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 554, columnNumber: 31 }, __self: this }, application.program)), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 558, columnNumber: 29 }, __self: this }, new Date(application.submission_date).toLocaleDateString()), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 563, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${application.status === "approved" ? "bg-green-100 text-green-800" : application.status === "rejected" ? "bg-red-100 text-red-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 564, columnNumber: 31 }, __self: this }, application.status.charAt(0).toUpperCase() + application.status.slice(1))), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm font-medium", __source: { fileName: "", lineNumber: 578, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleViewDetails(application), className: "text-[#00a0e4] hover:text-[#0088c3] mr-3", __source: { fileName: "", lineNumber: 579, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-eye", __source: { fileName: "", lineNumber: 583, columnNumber: 33 }, __self: this }), " View"), application.status === "pending" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleStatusChange(application.id, "approved"), className: "text-green-600 hover:text-green-900 mr-3", __source: { fileName: "", lineNumber: 587, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 596, columnNumber: 37 }, __self: this }), " Approve"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleStatusChange(application.id, "rejected"), className: "text-red-600 hover:text-red-900", __source: { fileName: "", lineNumber: 598, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 607, columnNumber: 37 }, __self: this }), " Reject")))))))), !loading && sortedApplications.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-500", __source: { fileName: "", lineNumber: 619, columnNumber: 19 }, __self: this }, "No applications found matching your search criteria."))))), showDetailsModal && selectedApplication && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 631, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto", __source: { fileName: "", lineNumber: 632, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 633, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 634, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 635, columnNumber: 17 }, __self: this }, "Application Details"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDetailsModal(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 638, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 642, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-6", __source: { fileName: "", lineNumber: 646, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 647, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 648, columnNumber: 19 }, __self: this }, "Personal Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 651, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 652, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 653, columnNumber: 23 }, __self: this }, "Name:"), " ", selectedApplication.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 656, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 657, columnNumber: 23 }, __self: this }, "Email:"), " ", selectedApplication.email), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 660, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 661, columnNumber: 23 }, __self: this }, "Phone:"), " ", selectedApplication.phone || "Not provided"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 667, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 668, columnNumber: 19 }, __self: this }, "Application Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 671, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 672, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 673, columnNumber: 23 }, __self: this }, "Program:"), " ", selectedApplication.program), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 676, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 677, columnNumber: 23 }, __self: this }, "Submission Date:"), " ", new Date(selectedApplication.submission_date).toLocaleDateString()), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 682, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 683, columnNumber: 23 }, __self: this }, "Status:"), /*#__PURE__*/ React.createElement("span", { className: `ml-2 px-2 py-1 text-xs font-semibold rounded-full ${selectedApplication.status === "approved" ? "bg-green-100 text-green-800" : selectedApplication.status === "rejected" ? "bg-red-100 text-red-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 684, columnNumber: 23 }, __self: this }, selectedApplication.status.charAt(0).toUpperCase() + selectedApplication.status.slice(1)))))), selectedApplication.message && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 703, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 704, columnNumber: 19 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("p", { className: "bg-gray-50 p-4 rounded", __source: { fileName: "", lineNumber: 707, columnNumber: 19 }, __self: this }, selectedApplication.message)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-6", __source: { fileName: "", lineNumber: 713, columnNumber: 15 }, __self: this }, selectedApplication.certificate_file_url && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 715, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 716, columnNumber: 21 }, __self: this }, "Certificate"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded flex flex-col space-y-3", __source: { fileName: "", lineNumber: 719, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleViewDocument(selectedApplication.certificate_file_url, "certificate"), className: "text-[#00a0e4] hover:underline flex items-center", __source: { fileName: "", lineNumber: 720, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt mr-2", __source: { fileName: "", lineNumber: 729, columnNumber: 25 }, __self: this }), "View Certificate"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownloadDocument(selectedApplication.certificate_file_url, `certificate_${selectedApplication.name.replace(/\s+/g, "_")}.pdf`), className: "text-[#00a0e4] hover:underline flex items-center", __source: { fileName: "", lineNumber: 732, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 741, columnNumber: 25 }, __self: this }), "Download Certificate"))), selectedApplication.id_copy_file_url && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 749, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 750, columnNumber: 21 }, __self: this }, "ID Copy"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded flex flex-col space-y-3", __source: { fileName: "", lineNumber: 753, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleViewDocument(selectedApplication.id_copy_file_url, "id"), className: "text-[#00a0e4] hover:underline flex items-center", __source: { fileName: "", lineNumber: 754, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-id-card mr-2", __source: { fileName: "", lineNumber: 763, columnNumber: 25 }, __self: this }), "View ID Copy"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownloadDocument(selectedApplication.id_copy_file_url, `id_copy_${selectedApplication.name.replace(/\s+/g, "_")}.pdf`), className: "text-[#00a0e4] hover:underline flex items-center", __source: { fileName: "", lineNumber: 766, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 775, columnNumber: 25 }, __self: this }), "Download ID Copy")))), selectedApplication.status === "pending" && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-4 mt-8", __source: { fileName: "", lineNumber: 784, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ handleStatusChange(selectedApplication.id, "approved"); setShowDetailsModal(false); }, className: "bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition duration-300", __source: { fileName: "", lineNumber: 785, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 792, columnNumber: 21 }, __self: this }), " Approve Application"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ handleStatusChange(selectedApplication.id, "rejected"); setShowDetailsModal(false); }, className: "bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition duration-300", __source: { fileName: "", lineNumber: 794, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times mr-2", __source: { fileName: "", lineNumber: 801, columnNumber: 21 }, __self: this }), " Reject Application"))))), showFileModal && viewingFile && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 812, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col", __source: { fileName: "", lineNumber: 813, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200 flex justify-between items-center", __source: { fileName: "", lineNumber: 814, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-[#333]", __source: { fileName: "", lineNumber: 815, columnNumber: 15 }, __self: this }, viewingFile.fileType === "certificate" ? "Certificate" : "ID Document"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowFileModal(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 820, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 824, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4 bg-gray-100 flex items-center justify-center", __source: { fileName: "", lineNumber: 828, columnNumber: 13 }, __self: this }, isImageUrl(viewingFile.url) ? /*#__PURE__*/ React.createElement("img", { src: viewingFile.url, alt: viewingFile.fileType === "certificate" ? "Certificate" : "ID Document", className: "max-w-full max-h-[70vh] object-contain", __source: { fileName: "", lineNumber: 830, columnNumber: 17 }, __self: this }) : isPdfUrl(viewingFile.url) ? /*#__PURE__*/ React.createElement("iframe", { src: viewingFile.url, title: viewingFile.fileType === "certificate" ? "Certificate" : "ID Document", className: "w-full h-[70vh]", __source: { fileName: "", lineNumber: 840, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "text-center p-8", __source: { fileName: "", lineNumber: 850, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt text-5xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 851, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 852, columnNumber: 19 }, __self: this }, "This file type cannot be previewed directly."), /*#__PURE__*/ React.createElement("a", { href: viewingFile.url, target: "_blank", rel: "noopener noreferrer", className: "mt-4 inline-block bg-[#00a0e4] text-white px-4 py-2 rounded hover:bg-[#0088c3] transition duration-300", __source: { fileName: "", lineNumber: 853, columnNumber: 19 }, __self: this }, "Open in New Tab"))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200 flex justify-end", __source: { fileName: "", lineNumber: 865, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownloadDocument(viewingFile.url, `${viewingFile.fileType === "certificate" ? "certificate" : "id_copy"}_${selectedApplication?.name?.replace(/\s+/g, "_") || "document"}.pdf`), className: "bg-[#00a0e4] text-white px-4 py-2 rounded hover:bg-[#0088c3] transition duration-300 flex items-center", __source: { fileName: "", lineNumber: 866, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 875, columnNumber: 17 }, __self: this }), " Download")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#333] text-white py-8", __source: { fileName: "", lineNumber: 883, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 884, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 885, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0a178fb9-5629-40de-a488-612eb17560ab/-/format/auto/", alt: "GCCA logo", className: "h-12 mx-auto mb-4 brightness-0 invert", __source: { fileName: "", lineNumber: 886, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 891, columnNumber: 13 }, __self: this }, "© 2025 Gaborone College of Culinary Arts. All Rights Reserved."))))); }