<!-- Header / Navbar --> <header class="bg-emerald-800 text-white shadow-lg sticky top-0 z-50"> <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center space-x-3 space-x-reverse"> <div class="w-10 h-10 bg-amber-500 text-slate-900 rounded-lg flex items-center justify-center font-bold text-xl shadow"> <i class="fa-solid fa-r"></i> </div> <div> <h1 class="text-lg font-bold leading-none">রেলী অ্যাপ</h1> <p class="text-xs text-amber-300">কো-অপারেটিভ সোসাইটি লিঃ, ময়মনসিংহ</p> </div> </div> <div class="text-right text-xs text-emerald-100 hidden sm:block"> <p><i class="fa-solid fa-phone text-amber-400"></i> ০১৭১৯-৭৪৭৩৩০</p> </div> </div> </header> <!-- Main Layout --> <div class="max-w-7xl mx-auto px-4 py-4 grid grid-cols-1 md:grid-cols-4 gap-4"> <!-- Sidebar Navigation --> <aside class="md:col-span-1 bg-white p-3 rounded-xl shadow-md space-y-2 h-fit"> <h2 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 px-2">রেলী মেনু</h2> <button onclick="showSection('dashboard')" id="btn-dashboard" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between bg-emerald-50 text-emerald-800 border-r-4 border-emerald-700"> <span><i class="fa-solid fa-chart-line ml-2"></i>ড্যাশবোর্ড</span> </button> <button onclick="showSection('committee')" id="btn-committee" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"> <span><i class="fa-solid fa-users-gear ml-2"></i>পরিচালনা কমিটি</span> </button> <button onclick="showSection('members')" id="btn-members" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"> <span><i class="fa-solid fa-user-group ml-2"></i>সদস্যবৃন্দ</span> </button> <button onclick="showSection('savings')" id="btn-savings" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"> <span><i class="fa-solid fa-piggy-bank ml-2"></i>সঞ্চয় কালেক션</span> </button> <button onclick="showSection('loans')" id="btn-loans" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"> <span><i class="fa-solid fa-hand-holding-dollar ml-2"></i>ঋণ ও কিস্তি আদায়</span> </button> </aside> <!-- Main Content --> <main class="md:col-span-3 space-y-4"> <!-- DASHBOARD --> <section id="dashboard" class="space-y-4"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3"> <div class="bg-white p-4 rounded-xl shadow-md border-r-4 border-emerald-600"> <p class="text-xs font-semibold text-slate-500">মোট সদস্য</p> <h3 class="text-xl font-bold text-slate-800 mt-1">১২ জন</h3> </div> <div class="bg-white p-4 rounded-xl shadow-md border-r-4 border-amber-500"> <p class="text-xs font-semibold text-slate-500">মোট সঞ্চয় জমা</p> <h3 class="text-xl font-bold text-slate-800 mt-1">৳ ৪,৫০,০০০</h3> </div> <div class="bg-white p-4 rounded-xl shadow-md border-r-4 border-teal-600"> <p class="text-xs font-semibold text-slate-500">বিতরণকৃত ঋণ</p> <h3 class="text-xl font-bold text-slate-800 mt-1">৳ ২,৮০,০০০</h3> </div> </div> <div class="bg-white p-5 rounded-xl shadow-md"> <h3 class="text-base font-bold text-emerald-800 mb-2 border-b pb-2"><i class="fa-solid fa-bullhorn text-amber-500 ml-2"></i>রেলী নোটিশ বোর্ড</h3> <p class="text-xs sm:text-sm text-slate-600 leading-relaxed"> রেলী কো-অপারেটিভ সোসাইটি লিঃ-এর সকল সদস্য ও কর্মকর্তাদের নিয়মিত সঞ্চয় ও কিস্তি কালেকশন আপডেট রাখার জন্য অনুরোধ করা যাচ্ছে। </p> </div> </section> <!-- COMMITTEE SECTION --> <section id="committee" class="hidden space-y-4"> <div class="bg-white p-5 rounded-xl shadow-md"> <div class="flex justify-between items-center mb-4"> <h3 class="text-base font-bold text-emerald-800"><i class="fa-solid fa-user-tie ml-2"></i>পরিচালনা কমিটি</h3> </div> <div class="overflow-x-auto"> <table class="w-full text-right border-collapse text-xs sm:text-sm"> <thead> <tr class="bg-emerald-50 text-emerald-900 border-b"> <th class="p-2.5">পদবি</th> <th class="p-2.5">নাম</th> <th class="p-2.5">মোবাইল নম্বর</th> </tr> </thead> <tbody class="divide-y divide-slate-100"> <tr> <td class="p-2.5 font-semibold text-emerald-800">সভাপতি</td> <td class="p-2.5 font-bold">মোঃ রফিকুল ইসলাম</td> <td class="p-2.5">০১৭১৯-৭৪৭৩৩০</td> </tr> <tr> <td class="p-2.5 font-semibold text-emerald-800">সহ-সভাপতি</td> <td class="p-2.5 font-bold">আলহাজ্ব মোঃ আমজাদ হোসেন</td> <td class="p-2.5">০১৯৭১-৬২৮২৩২</td> </tr> <tr> <td class="p-2.5 font-semibold text-emerald-800">সাধারণ সম্পাদক</td> <td class="p-2.5 font-bold">মোঃ লিটন মিঞা</td> <td class="p-2.5">০১৯৭১-৬২৮২৩২</td> </tr> <tr> <td class="p-2.5 font-semibold text-emerald-800">কোষাধ্যক্ষ</td> <td class="p-2.5 font-bold">মোঃ মাহমুদুল হাসান</td> <td class="p-2.5">০১৭০০-০০০০০২</td> </tr> </tbody> </table> </div> </div> </section> <!-- MEMBERS SECTION --> <section id="members" class="hidden space-y-4"> <div class="bg-white p-5 rounded-xl shadow-md"> <h3 class="text-base font-bold text-emerald-800 mb-4"><i class="fa-solid fa-users ml-2"></i>সদস্য তালিকা</h3> <div class="overflow-x-auto"> <table class="w-full text-right border-collapse text-xs sm:text-sm"> <thead> <tr class="bg-slate-100 text-slate-700 border-b"> <th class="p-2.5">আইডি</th> <th class="p-2.5">নাম</th> <th class="p-2.5">মোবাইল</th> </tr> </thead> <tbody class="divide-y divide-slate-100"> <tr> <td class="p-2.5 font-mono font-bold text-emerald-700">#RL-101</td> <td class="p-2.5 font-semibold">মোঃ আল-আমিন</td> <td class="p-2.5">০১৮১২-০০০১১১</td> </tr> <tr> <td class="p-2.5 font-mono font-bold text-emerald-700">#RL-102</td> <td class="p-2.5 font-semibold">মোছাঃ ফাতেমা বেগম</td> <td class="p-2.5">০১৮১২-০০০২২২</td> </tr> </tbody> </table> </div> </div> </section> <!-- SAVINGS COLLECTION --> <section id="savings" class="hidden space-y-4"> <div class="bg-white p-5 rounded-xl shadow-md"> <h3 class="text-base font-bold text-emerald-800 mb-4"><i class="fa-solid fa-piggy-bank ml-2"></i>সঞ্চয় কালেকশন এন্ট্রি</h3> <form onsubmit="handleCollection(event, 'সঞ্চয় জমা')" class="space-y-3"> <div> <label class="block text-xs font-semibold mb-1">সদস্য নির্বাচন</label> <select id="sav_member" class="w-full p-2 border rounded-lg text-xs sm:text-sm outline-none"> <option value="#RL-101 - মোঃ আল-আমিন">#RL-101 - মোঃ আল-আমিন</option> <option value="#RL-102 - মোছাঃ ফাতেমা বেগম">#RL-102 - মোছাঃ ফাতেমা বেগম</option> </select> </div> <div> <label class="block text-xs font-semibold mb-1">জমার পরিমাণ (টাকা)</label> <input type="number" id="sav_amount" placeholder="৫০০" class="w-full p-2 border rounded-lg text-xs sm:text-sm outline-none" required> </div> <button type="submit" class="w-full bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2.5 rounded-lg shadow text-xs sm:text-sm"> সঞ্চয় জমা দিন ও রশিদ তৈরি করুন </button> </form> </div> </section> <!-- LOANS SECTION --> <section id="loans" class="hidden space-y-4"> <div class="bg-white p-5 rounded-xl shadow-md border-t-4 border-amber-500"> <h3 class="text-base font-bold text-emerald-800 mb-3"><i class="fa-solid fa-calculator ml-2"></i>কিস্তি ক্যালকুলেটর</h3> <div class="grid grid-cols-3 gap-2 mb-3"> <div> <label class="block text-[10px] font-semibold mb-1">টাকা</label> <input type="number" id="calc_amount" placeholder="৫০০০০" class="w-full p-1.5 border rounded text-xs" oninput="calculateLoan()"> </div> <div> <label class="block text-[10px] font-semibold mb-1">মুনাফা %</label> <input type="number" id="calc_rate" value="10" class="w-full p-1.5 border rounded text-xs" oninput="calculateLoan()"> </div> <div> <label class="block text-[10px] font-semibold mb-1">মাস</label> <input type="number" id="calc_months" value="12" class="w-full p-1.5 border rounded text-xs" oninput="calculateLoan()"> </div> </div> <div id="calc_result" class="bg-emerald-50 p-3 rounded text-xs grid grid-cols-3 gap-1 font-semibold text-emerald-900 hidden"> <div>মাসিক কিস্তি: <span id="res_emi" class="text-amber-600">৳ ০</span></div> <div>মোট লাভ: <span id="res_interest">৳ ০</span></div> <div>সর্বমোট: <span id="res_total">৳ ০</span></div> </div> </div> <div class="bg-white p-5 rounded-xl shadow-md"> <h3 class="text-base font-bold text-emerald-800 mb-4"><i class="fa-solid fa-hand-holding-dollar ml-2"></i>ঋণের কিস্তি আদায়</h3> <form onsubmit="handleCollection(event, 'ঋণের কিস্তি আদায়')" class="space-y-3"> <div> <label class="block text-xs font-semibold mb-1">ঋণগ্রহীতা</label> <select id="loan_member" class="w-full p-2 border rounded-lg text-xs sm:text-sm outline-none"> <option value="#RL-101 - মোঃ আল-আমিন">#RL-101 - মোঃ আল-আমিন</option> <option value="#RL-102 - মোছাঃ ফাতেমা বেগম">#RL-102 - মোছাঃ ফাতেমা বেগম</option> </select> </div> <div> <label class="block text-xs font-semibold mb-1">আদায়কৃত কিস্তি (টাকা)</label> <input type="number" id="loan_amount" placeholder="২৫০০" class="w-full p-2 border rounded-lg text-xs sm:text-sm outline-none" required> </div> <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold py-2.5 rounded-lg shadow text-xs sm:text-sm"> কিস্তি জমা নিন ও প্রিন্ট রসিদ </button> </form> </div> </section> </main> </div> <!-- Receipt Modal --> <div id="receiptModal" class="fixed inset-0 bg-slate-900/60 hidden items-center justify-center z-50 p-4"> <div class="bg-white rounded-xl shadow-xl max-w-sm w-full p-5 space-y-3" id="printable-receipt"> <div class="text-center border-b pb-2"> <h2 class="text-base font-bold text-emerald-800">রেলী কো-অপারেটিভ সোসাইটি লিঃ</h2> <p class="text-[10px] text-slate-500">পুরাতন ত্রিশাল বাসস্ট্যান্ড, ময়মনসিংহ</p> <p class="text-xs text-amber-600 font-semibold mt-1">রেলী মানি রিসিট / রশিদ</p> </div> <div class="text-xs space-y-1.5 text-slate-700"> <div class="flex justify-between"><span>তারিখ:</span> <span id="rec_date" class="font-semibold"></span></div> <div class="flex justify-between"><span>বিবরণ:</span> <span id="rec_type" class="font-bold text-emerald-700"></span></div> <div class="flex justify-between"><span>সদস্য:</span> <span id="rec_member" class="font-semibold"></span></div> <div class="flex justify-between text-sm border-t pt-1 font-bold"><span>পরিমাণ:</span> <span id="rec_amount" class="text-amber-600"></span></div> </div> <div class="flex justify-between pt-4 text-[10px] text-slate-400 border-t"> <span>আদায়কারী</span> <span>কর্তৃপক্ষ</span> </div> <div class="flex justify-end space-x-2 space-x-reverse pt-2 print:hidden"> <button onclick="toggleModal('receiptModal')" class="px-3 py-1 bg-slate-200 rounded text-xs font-semibold">বন্ধ</button> <button onclick="window.print()" class="px-3 py-1 bg-emerald-700 text-white rounded text-xs font-semibold"><i class="fa-solid fa-print ml-1"></i>প্রিন্ট</button> </div> </div> </div> <script> function showSection(sectionId) { ['dashboard', 'committee', 'members', 'savings', 'loans'].forEach(id => { document.getElementById(id).classList.add('hidden'); document.getElementById('btn-' + id).className = "nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"; }); document.getElementById(sectionId).classList.remove('hidden'); document.getElementById('btn-' + sectionId).className = "nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between bg-emerald-50 text-emerald-800 border-r-4 border-emerald-700"; } function toggleModal(modalId) { const modal = document.getElementById(modalId); modal.classList.toggle('hidden'); modal.classList.toggle('flex'); } function calculateLoan() { const P = parseFloat(document.getElementById('calc_amount').value) || 0; const R = parseFloat(document.getElementById('calc_rate').value) || 0; const N = parseFloat(document.getElementById('calc_months').value) || 0; if (P > 0 && N > 0) { const totalInterest = (P * R * (N / 12)) / 100; const totalAmount = P + totalInterest; const emi = totalAmount / N; document.getElementById('res_emi').innerText = '৳ ' + Math.round(emi); document.getElementById('res_interest').innerText = '৳ ' + Math.round(totalInterest); document.getElementById('res_total').innerText = '৳ ' + Math.round(totalAmount); document.getElementById('calc_result').classList.remove('hidden'); } } function handleCollection(e, type) { e.preventDefault(); const memberId = type === 'সঞ্চয় জমা' ? 'sav_member' : 'loan_member'; const amountId = type === 'সঞ্চয় জমা' ? 'sav_amount' : 'loan_amount'; const member = document.getElementById(memberId).value; const amount = document.getElementById(amountId).value; document.getElementById('rec_date').innerText = new Date().toLocaleDateString('bn-BD'); document.getElementById('rec_type').innerText = type; document.getElementById('rec_member').innerText = member; document.getElementById('rec_amount').innerText = '৳ ' + amount; toggleModal('receiptModal'); e.target.reset(); } </script>
