function MainComponent() { const currentDate = new Date().toLocaleDateString(); const calculateHours = (arrival, departure)=>{ const arrivalTime = new Date(`1970-01-01T${arrival}`); const departureTime = new Date(`1970-01-01T${departure}`); const diff = departureTime - arrivalTime; const hours = diff / 1000 / 3600; return hours.toFixed(2); }; const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const arrivalTime = formData.get('arrivalTime'); const departureTime = formData.get('departureTime'); const hoursWorked = calculateHours(arrivalTime, departureTime); alert(`Hours Worked: ${hoursWorked}`); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white shadow-lg rounded-md p-6", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Staffing Audit"), /*#__PURE__*/ React.createElement("hr", { className: "mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "date", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "date", name: "date", className: "w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500", defaultValue: currentDate, __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "arrival-time", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Arrival Time"), /*#__PURE__*/ React.createElement("input", { type: "time", id: "arrival-time", name: "arrivalTime", className: "w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500", required: true, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "departure-time", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Departure Time"), /*#__PURE__*/ React.createElement("input", { type: "time", id: "departure-time", name: "departureTime", className: "w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500", required: true, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-end", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-md", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Submit Audit")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, ` body { font-family: 'Inter', sans-serif; } `)); }