function MainComponent() { const [recipients, setRecipients] = React.useState([]); const [newRecipient, setNewRecipient] = React.useState({ accountNumber: '', bankName: '' }); const [transferDate, setTransferDate] = React.useState(''); const [isProcessing, setIsProcessing] = React.useState(false); const handleAddRecipient = ()=>{ if (newRecipient.accountNumber && newRecipient.bankName) { setRecipients([ ...recipients, newRecipient ]); setNewRecipient({ accountNumber: '', bankName: '' }); } }; const handleRemoveRecipient = (index)=>{ const updatedRecipients = recipients.filter((_, i)=>i !== index); setRecipients(updatedRecipients); }; const handleTransfer = (e)=>{ e.preventDefault(); setIsProcessing(true); setTimeout(()=>{ setIsProcessing(false); alert('Transfer of $30,000,000 scheduled successfully to all specified accounts.'); }, 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] min-h-screen p-8 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#1a365d] mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "AI-Powered Financial Transfer System"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#2a4365] mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Monthly Transfer Details"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#4a5568]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Amount: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 35, columnNumber: 57 }, __self: this }, "$30,000,000"))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleTransfer, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "accountNumber", className: "block text-[#2a4365] font-semibold mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Recipient Bank Account Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "accountNumber", name: "accountNumber", value: newRecipient.accountNumber, onChange: (e)=>setNewRecipient({ ...newRecipient, accountNumber: e.target.value }), className: "w-full px-4 py-2 border border-[#a0aec0] rounded-md focus:outline-none focus:ring-2 focus:ring-[#4299e1]", placeholder: "Enter account number", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "bankName", className: "block text-[#2a4365] font-semibold mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Recipient Bank Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "bankName", name: "bankName", value: newRecipient.bankName, onChange: (e)=>setNewRecipient({ ...newRecipient, bankName: e.target.value }), className: "w-full px-4 py-2 border border-[#a0aec0] rounded-md focus:outline-none focus:ring-2 focus:ring-[#4299e1]", placeholder: "Enter bank name", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleAddRecipient, className: "bg-[#4299e1] text-white font-bold py-2 px-4 rounded-md hover:bg-[#3182ce] transition duration-300 mr-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Add Recipient"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 mb-6", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#2a4365] mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Recipients List:"), recipients.map((recipient, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between bg-[#edf2f7] p-2 rounded-md mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, recipient.accountNumber, " - ", recipient.bankName), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>handleRemoveRecipient(index), className: "text-[#e53e3e] hover:text-[#c53030]", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "transferDate", className: "block text-[#2a4365] font-semibold mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Transfer Date"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "transferDate", name: "transferDate", value: transferDate, onChange: (e)=>setTransferDate(e.target.value), className: "w-full px-4 py-2 border border-[#a0aec0] rounded-md focus:outline-none focus:ring-2 focus:ring-[#4299e1]", required: true, __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#2b6cb0] text-white font-bold py-3 px-6 rounded-md hover:bg-[#2c5282] transition duration-300 disabled:opacity-50", disabled: isProcessing || recipients.length === 0 || !transferDate, __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, isProcessing ? 'Processing...' : 'Schedule Transfer')), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-[#2a4365] mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "AI-Powered Features"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside text-[#4a5568]", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Intelligent fraud detection and prevention"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "Automated compliance checks"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "Real-time currency conversion optimization"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "Predictive analysis for transfer timing"))))); }