Upload 9 files

accounting.js

@@ -0,0 +1,244 @@
+// =======================
+// Load members into accounting dropdown
+// =======================
+async function loadMembersForAccounting() {
+  try {
+    const res = await fetch('/api/members');
+    if (!res.ok) throw new Error('Failed to fetch members');
+    
+    const members = await res.json();
+    const select = document.getElementById('memberSelect');
+    select.innerHTML = '<option value="">Select Member</option>';
+    
+    members.forEach(m => {
+      const opt = document.createElement('option');
+      opt.value = m.id;
+      opt.textContent = `${m.name} (#${m.id})`;
+      select.appendChild(opt);
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+// =======================
+// Show/hide payerName input based on payer type
+// =======================
+document.getElementById('payerType').addEventListener('change', (e) => {
+  const isNonMember = e.target.value === 'non-member';
+  document.getElementById('payerName').style.display = isNonMember ? 'inline-block' : 'none';
+});
+
+// =======================
+// Load transactions and apply filters
+// =======================
+async function loadTransactions() {
+  try {
+    const res = await fetch('/api/accounting');
+    if (!res.ok) throw new Error('Failed to fetch transactions');
+    
+    let transactions = await res.json();
+
+    // Apply filters (assumes filters object exists with start/end properties)
+    if (filters?.start || filters?.end) {
+      transactions = transactions.filter(tx => {
+        const txDate = new Date(tx.month + "-01");
+        const start = filters.start ? new Date(filters.start + "-01") : null;
+        const end = filters.end ? new Date(filters.end + "-01") : null;
+        return (!start || txDate >= start) && (!end || txDate <= end);
+      });
+    }
+
+    const tbody = document.getElementById('accountingBody');
+tbody.innerHTML = transactions.map((t, i) => `
+  <tr class="${t.category === 'expense' ? 'expense' : 'income'}">
+    <td>${i + 1}</td>
+    <td>${t.payerType === 'member' ? t.memberId : t.payerName}</td>
+    <td>${t.payerType}</td>
+    <td>${t.month}</td>
+    <td>${t.amount}</td>
+    <td>${t.category}</td>
+    <td>${t.description || ''}</td>
+    <td>
+      <button class="btn btn-sm btn-primary" onclick="openActionModal(${t.id})">Actions</button>
+    </td>
+  </tr>
+`).join('');
+
+    // Update summary and charts with the filtered transactions
+    updateAccountingSummary(transactions);
+    renderMonthlyChart(transactions);
+    renderIncomeExpenseChart(transactions);
+
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+// =======================
+// Update accounting summary table
+// =======================
+async function updateAccountingSummary(transactionsParam = null) {
+  try {
+    const transactions = transactionsParam || await (await fetch('/api/accounting')).json();
+
+    const summary = {
+      contribution: 0,
+      donation: 0,
+      sale: 0,
+      expense: 0,
+      memberIncome: 0,
+      nonMemberIncome: 0
+    };
+
+    transactions.forEach(tx => {
+      if (tx.category === 'contribution') summary.contribution += tx.amount;
+      else if (tx.category === 'donation') summary.donation += tx.amount;
+      else if (tx.category === 'sale') summary.sale += tx.amount;
+      else if (tx.category === 'expense') summary.expense += tx.amount;
+
+      if (tx.payerType === 'member' && tx.category !== 'expense') summary.memberIncome += tx.amount;
+      if (tx.payerType === 'non-member' && tx.category !== 'expense') summary.nonMemberIncome += tx.amount;
+    });
+
+    const tbody = document.getElementById('summaryBody');
+    tbody.innerHTML = `
+      <tr class="income-summary"><td>Contribution (Income)</td><td>${summary.contribution}</td></tr>
+      <tr class="income-summary"><td>Donation (Income)</td><td>${summary.donation}</td></tr>
+      <tr class="income-summary"><td>Sales (Income)</td><td>${summary.sale}</td></tr>
+      <tr class="income-summary"><td>Total Income from Members</td><td>${summary.memberIncome}</td></tr>
+      <tr class="income-summary"><td>Total Income from Non-Members</td><td>${summary.nonMemberIncome}</td></tr>
+      <tr class="expense-summary"><td>Total Expenses</td><td>${summary.expense}</td></tr>
+      <tr class="income-summary"><td>Net Total</td><td>${(summary.contribution + summary.donation + summary.sale) - summary.expense}</td></tr>
+    `;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+// =======================
+// Handle transaction form submission
+// =======================
+document.getElementById('transactionForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+
+  const category = document.getElementById('transactionCategory').value;
+
+  const transaction = {
+    payerType: document.getElementById('payerType').value,
+    memberId: document.getElementById('memberSelect').value || null,
+    payerName: document.getElementById('payerName').value || null,
+    month: document.getElementById('transactionMonth').value,
+    amount: parseFloat(document.getElementById('transactionAmount').value),
+    category,
+    type: category === 'expense' ? 'expense' : 'income', // additional field for convenience
+    description: document.getElementById('transactionDesc').value.trim()
+  };
+
+  try {
+    const res = await fetch('/api/accounting', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(transaction)
+    });
+
+    if (!res.ok) throw new Error('Failed to add transaction');
+
+    document.getElementById('transactionForm').reset();
+    loadTransactions();
+    updateAccountingSummary();
+    renderMonthlyChart();
+
+  } catch (error) {
+    console.error(error);
+    alert('Failed to save transaction');
+  }
+});
+
+// =======================
+// Export accounting data as JSON
+// =======================
+document.getElementById('exportAccounting').addEventListener('click', () => {
+  window.location.href = '/api/accounting/export';
+});
+
+// =======================
+// Initial data load
+// =======================
+loadMembersForAccounting();
+loadTransactions();
+updateAccountingSummary();
+
+
+
+let selectedTransaction = null;
+
+// Open modal and load transaction data
+window.openActionModal = async function (id) {
+  const res = await fetch('/api/accounting');
+  const transactions = await res.json();
+  selectedTransaction = transactions.find(t => t.id === id);
+  if (!selectedTransaction) return alert('Transaction not found');
+
+  // Fill the form
+  document.getElementById('editTransactionId').value = selectedTransaction.id;
+  document.getElementById('editTransactionMonth').value = selectedTransaction.month;
+  document.getElementById('editTransactionAmount').value = selectedTransaction.amount;
+  document.getElementById('editTransactionCategory').value = selectedTransaction.category;
+  document.getElementById('editTransactionDesc').value = selectedTransaction.description || '';
+
+  // Show modal
+  document.getElementById('transactionModal').classList.remove('hidden');
+};
+
+window.closeModal = function () {
+  document.getElementById('transactionModal').classList.add('hidden');
+  selectedTransaction = null;
+};
+
+// Save edited transaction
+document.getElementById('editTransactionForm').addEventListener('submit', async function (e) {
+  e.preventDefault();
+  const id = document.getElementById('editTransactionId').value;
+
+  const updatedTx = {
+    ...selectedTransaction,
+    month: document.getElementById('editTransactionMonth').value,
+    amount: parseFloat(document.getElementById('editTransactionAmount').value),
+    category: document.getElementById('editTransactionCategory').value,
+    description: document.getElementById('editTransactionDesc').value
+  };
+
+  const res = await fetch(`/api/accounting/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(updatedTx)
+  });
+
+  if (!res.ok) {
+    alert('Failed to update transaction');
+    return;
+  }
+
+  closeModal();
+  loadTransactions();
+});
+
+// Delete transaction
+window.deleteTransaction = async function () {
+  const id = document.getElementById('editTransactionId').value;
+
+  if (!confirm('Are you sure you want to delete this transaction?')) return;
+
+  const res = await fetch(`/api/accounting/${id}`, {
+    method: 'DELETE'
+  });
+
+  if (!res.ok) {
+    alert('Failed to delete transaction');
+    return;
+  }
+
+  closeModal();
+  loadTransactions();
+};

admin.css

@@ -0,0 +1,317 @@
+/* === RESET & BASE === */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+  }
+  
+  body {
+    background: #f4f6f8;
+    color: #333;
+    line-height: 1.5;
+  }
+  
+  /* === HEADER === */
+  header {
+    background: #2c3e50;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+  }
+  
+  header h1 {
+    font-size: 1.8rem;
+  }
+  
+  /* === MAIN CONTAINER === */
+  main {
+    max-width: 1000px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+  }
+  
+  /* === NAVIGATION TABS === */
+  .admin-tabs, .tab-nav {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin: 1rem 0;
+  }
+  
+  .admin-tabs button,
+  .tab-nav button {
+    background: #bdc3c7;
+    color: #2c3e50;
+    border: none;
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+  
+  .admin-tabs button:hover,
+  .tab-nav button:hover {
+    background: #95a5a6;
+  }
+  
+  .admin-tabs button.active,
+  .tab-nav button.active {
+    background: #2c3e50;
+    color: #fff;
+  }
+  
+  /* === SECTIONS === */
+  .admin-tab {
+    display: none;
+  }
+  
+  .admin-tab.active {
+    display: block;
+  }
+  
+  /* === CARDS & PANELS === */
+  .card {
+    background: #fff;
+    padding: 1rem 1.5rem;
+    margin-bottom: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+  }
+  
+  .card h2, .card h3 {
+    margin-bottom: 1rem;
+    color: #2c3e50;
+  }
+  
+  /* === FORM STYLING === */
+  form {
+    margin: 1rem 0;
+  }
+  
+  form input, form select {
+    display: block;
+    width: 100%;
+    padding: 0.6rem;
+    margin-bottom: 0.8rem;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+  }
+  
+  form button {
+    background: #3498db;
+    color: white;
+    border: none;
+    padding: 0.6rem 1.2rem;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  
+  form button:hover {
+    background: #2980b9;
+  }
+  
+  /* === TABLES === */
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+    font-size: 14px;
+  }
+  
+  th, td {
+    padding: 0.6rem;
+    border: 1px solid #ddd;
+    text-align: left;
+  }
+  
+  th {
+    background: #ecf0f1;
+    font-weight: bold;
+  }
+  
+  tbody tr:nth-child(even) {
+    background: #f9f9f9;
+  }
+  
+  tbody tr:hover {
+    background: #f0f8ff;
+  }
+  
+  /* === ACCOUNTING HIGHLIGHTING === */
+  #accountingBody tr.income {
+    background-color: #d4f8d4; /* light green */
+  }
+  
+  #accountingBody tr.expense {
+    background-color: #f8d4d4; /* light red */
+  }
+  
+  #accountingBody tr.non-member {
+    border-left: 4px solid red;
+    font-style: italic;
+    opacity: 0.9;
+  }
+  
+  #summaryBody tr.income-summary {
+    background: #d4f8d4;
+    font-weight: bold;
+  }
+  
+  #summaryBody tr.expense-summary {
+    background: #f8d4d4;
+    font-weight: bold;
+  }
+  
+  /* === BUTTONS === */
+  button {
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    border: none;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  
+  #exportMembers {
+    background: #27ae60;
+    color: white;
+  }
+  
+  #exportMembers:hover {
+    background: #1e8449;
+  }
+  
+  #exportAccounting {
+    background: #e67e22;
+    color: white;
+  }
+  
+  #exportAccounting:hover {
+    background: #ca6f1e;
+  }
+  
+  #exportInventory {
+    background: #9b59b6;
+    color: white;
+  }
+  
+  #exportInventory:hover {
+    background: #8e44ad;
+  }
+  
+  button[id^="toggle"] {
+    background: #7f8c8d;
+    color: white;
+  }
+  
+  button[id^="toggle"]:hover {
+    background: #636e72;
+  }
+  
+  /* === CHARTS === */
+  .chart-container {
+    width: 400px;
+    max-width: 100%;
+    margin: 20px auto;
+    padding: 15px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    text-align: center;
+  }
+  
+  .chart-container h3 {
+    margin-bottom: 10px;
+    font-size: 1.2em;
+    color: #333;
+  }
+  
+  .chart-legend {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    font-size: 0.9em;
+  }
+  
+  .chart-legend span {
+    display: flex;
+    align-items: center;
+  }
+  
+  .chart-legend i {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+    border-radius: 3px;
+  }
+  
+  .legend-income i {
+    background-color: rgba(75,192,192,0.7);
+  }
+  
+  .legend-expense i {
+    background-color: rgba(255,99,132,0.7);
+  }
+  
+  #monthlyChart {
+    width: 100%;
+    max-width: 800px;
+    margin: auto;
+  }
+  
+  /* === RESPONSIVE (optional) === */
+  @media (max-width: 768px) {
+    .admin-tabs, .tab-nav {
+      flex-direction: column;
+      align-items: center;
+    }
+  
+    table, thead, tbody, th, td, tr {
+      display: block;
+    }
+  
+    table thead {
+      display: none;
+    }
+  
+    table tr {
+      margin-bottom: 1rem;
+      background: #fff;
+      border: 1px solid #ccc;
+      padding: 1rem;
+      border-radius: 6px;
+    }
+  
+    table td {
+      padding: 0.5rem 0;
+      border: none;
+      position: relative;
+      padding-left: 50%;
+    }
+  
+    table td::before {
+      position: absolute;
+      top: 0.5rem;
+      left: 1rem;
+      font-weight: bold;
+      content: attr(data-label);
+    }
+  }
+  
+  
+  
+  .modal.hidden { display: none; }
+  .modal {
+    position: fixed; top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: rgba(0,0,0,0.5);
+  }
+  .modal-content {
+    background: #fff; padding: 20px;
+    margin: 10% auto; width: 300px;
+  }
+  

admin.html

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Admin Dashboard</title>
+  <link rel="stylesheet" href="admin.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+</head>
+<body>
+  <header>
+    <h1>Admin Dashboard</h1>
+    <nav class="admin-tabs">
+      <button data-tab="members" class="active">Members</button>
+      <button data-tab="accounting">Accounting</button>
+      <button data-tab="inventory">Inventory</button>
+    </nav>
+  </header>
+
+  <main>
+    <!-- === Members Section === -->
+    <section id="members" class="admin-tab active">
+      <h2>Members</h2>
+      <button id="toggleMemberForm">Add Member</button>
+
+      <div id="memberFormContainer" class="form-container hidden">
+        <form id="memberForm">
+          <input type="text" id="memberId" placeholder="Member ID" readonly />
+          <p>Next ID will be: <span id="nextIdPreview"></span></p>
+          <input type="text" id="name" placeholder="Full Name" required />
+          <input type="text" id="address" placeholder="Address (e.g. 12 Apostle Rd)" />
+          <input type="email" id="email" placeholder="Email" required />
+          <input type="text" id="phone" placeholder="Phone" />
+          <button type="submit">Add Member</button>
+        </form>
+      </div>
+
+      <h3>Members List</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th><th>Name</th><th>Address</th><th>Email</th><th>Phone</th>
+          </tr>
+        </thead>
+        <tbody id="membersBody"></tbody>
+      </table>
+      <button id="exportMembers">Export JSON</button>
+    </section>
+
+    <!-- === Accounting Section === -->
+    <section id="accounting" class="admin-tab">
+      <h2>Accounting Dashboard</h2>
+      <button id="toggleTransactionForm">Add Transaction</button>
+
+      <div id="transactionFormContainer" class="form-container hidden">
+        <form id="transactionForm">
+          <select id="payerType">
+            <option value="member">Member</option>
+            <option value="non-member">Non-Member</option>
+          </select>
+
+          <select id="memberSelect">
+            <option value="">Select Member</option>
+          </select>
+
+          <input type="text" id="payerName" placeholder="Non-member Name" class="hidden" />
+          <input type="month" id="transactionMonth" required />
+          <input type="number" id="transactionAmount" placeholder="Amount" required />
+
+          <select id="transactionCategory">
+            <option value="contribution">Contribution (Income)</option>
+            <option value="donation">Donation (Income)</option>
+            <option value="sale">Sale (Income)</option>
+            <option value="expense">Expense</option>
+          </select>
+
+          <input type="text" id="transactionDesc" placeholder="Description" />
+          <button type="submit">Add Transaction</button>
+        </form>
+      </div>
+
+      <!-- Filter Controls -->
+      <div id="filters">
+        <label for="filterStart">Start:</label>
+        <input type="month" id="filterStart" />
+
+        <label for="filterEnd">End:</label>
+        <input type="month" id="filterEnd" />
+
+        <button id="applyFilters">Apply</button>
+        <button id="clearFilters">Clear</button>
+        <button id="exportPdf">Export PDF</button>
+      </div>
+
+      <!-- Tabs -->
+      <nav id="accountingTabs" class="tab-nav">
+        <button data-tab="summary" class="active">Summary</button>
+        <button data-tab="pie">Income vs Expense</button>
+        <button data-tab="monthly">Monthly Breakdown</button>
+        <button data-tab="all">Show All</button>
+      </nav>
+
+      <!-- Summary View -->
+      <div id="view-summary" class="accounting-tab-view active">
+        <div class="card" id="accountingSummary">
+          <h3>Accounting Summary</h3>
+          <table>
+            <thead>
+              <tr><th>Category / Type</th><th>Total Amount</th></tr>
+            </thead>
+            <tbody id="summaryBody"></tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Pie Chart View -->
+      <div id="view-pie" class="accounting-tab-view hidden">
+        <div class="chart-container">
+          <h3>Income vs Expenses</h3>
+          <canvas id="incomeExpenseChart"></canvas>
+          <div class="chart-legend">
+            <span><i class="legend-income"></i> Income</span>
+            <span><i class="legend-expense"></i> Expenses</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Monthly Chart View -->
+      <div id="view-monthly" class="accounting-tab-view hidden">
+        <div class="card">
+          <h3>Monthly Income vs Expenses</h3>
+          <canvas id="monthlyChart" height="150"></canvas>
+        </div>
+      </div>
+
+      <!-- All Transactions -->
+      <h3>All Transactions</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Payer</th>
+            <th>Type</th>
+            <th>Month</th>
+            <th>Amount</th>
+            <th>Category</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody id="accountingBody"></tbody>
+      </table>
+
+      <button id="exportAccounting">Export JSON</button>
+    </section>
+
+    <!-- === Inventory Section === -->
+    <section id="inventory" class="admin-tab">
+      <h2>Inventory Management</h2>
+      <button id="toggleItemForm">Add Item</button>
+
+      <div id="itemFormContainer" class="form-container hidden">
+        <form id="itemForm">
+          <input type="text" id="itemName" placeholder="Item Name" required />
+          <input type="text" id="itemType" placeholder="Type/Category" />
+          <input type="text" id="itemColor" placeholder="Color/Style" />
+          <input type="number" id="itemQty" placeholder="Quantity" required />
+          <input type="number" id="itemPrice" placeholder="Price" step="0.01" />
+          <input type="text" id="itemNote" placeholder="Note" />
+          <button type="submit">Add Item</button>
+        </form>
+      </div>
+
+      <h3>Current Inventory</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th><th>Name</th><th>Type</th><th>Color</th>
+            <th>Qty</th><th>Price</th><th>Note</th><th>Actions</th>
+          </tr>
+        </thead>
+        <tbody id="inventoryBody"></tbody>
+      </table>
+      <button id="exportInventory">Export JSON</button>
+    </section>
+  </main>
+
+
+<!-- Transaction Modal -->
+<div id="transactionModal" class="modal hidden">
+  <div class="modal-content">
+    <h3>Edit or Delete Transaction</h3>
+    <form id="editTransactionForm">
+      <input type="hidden" id="editTransactionId">
+      <label>Month: <input type="month" id="editTransactionMonth"></label><br>
+      <label>Amount: <input type="number" id="editTransactionAmount"></label><br>
+      <label>Category: 
+        <select id="editTransactionCategory">
+          <option value="contribution">Contribution</option>
+          <option value="donation">Donation</option>
+          <option value="sale">Sale</option>
+          <option value="expense">Expense</option>
+        </select>
+      </label><br>
+      <label>Description: <input type="text" id="editTransactionDesc"></label><br>
+      <div class="modal-actions">
+        <button type="submit">Save</button>
+        <button type="button" onclick="deleteTransaction()">Delete</button>
+        <button type="button" onclick="closeModal()">Cancel</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+
+<!-- Member Modal -->
+<div id="memberModal" class="modal hidden">
+  <div class="modal-content">
+    <span id="closeModalBtn" class="close">&times;</span>
+    <h3>Edit Member</h3>
+    <form id="editMemberForm">
+      <input type="hidden" id="editMemberId">
+
+      <label>Name:</label>
+      <input type="text" id="editMemberName">
+
+      <label>Email:</label>
+      <input type="email" id="editMemberEmail">
+
+      <label>Phone:</label>
+      <input type="text" id="editMemberPhone">
+
+      <label>Address:</label>
+      <input type="text" id="editMemberAddress">
+
+      <div class="modal-actions">
+        <button type="submit">Save</button>
+        <button type="button" id="deleteMemberBtn">Delete</button>
+        <button type="button" id="cancelModalBtn">Cancel</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+
+<!-- Inventory Modal -->
+<div id="inventoryModal" style="display:none; position:fixed; top:10%; left:50%; transform:translateX(-50%); background:white; padding:20px; border:1px solid #ccc; z-index:1000;">
+  <h3>Inventory Action</h3>
+  <form id="actionForm">
+    <input type="hidden" name="id" />
+    <label>Name: <input name="name" disabled required /></label><br/>
+    <label>Type: <input name="type" disabled /></label><br/>
+    <label>Color: <input name="color" disabled /></label><br/>
+    <label>Quantity: <input name="quantity" type="number" disabled required /></label><br/>
+    <label>Price: <input name="price" type="number" step="0.01" disabled required /></label><br/>
+    <label>Note: <input name="note" disabled /></label><br/><br/>
+
+    <!-- Modal Buttons -->
+    <div id="modalButtons">
+      <button type="button" id="editBtn">Edit</button>
+      <button type="button" id="sellBtn">Sell</button>
+      <button type="button" id="useBtn">Use</button>
+      <button type="button" id="deleteBtn">Delete</button>
+      <button type="submit" id="saveBtn" style="display:none;">Save</button>
+      <button type="button" id="cancelBtn">Cancel</button>
+    </div>
+  </form>
+</div>
+
+  <!-- Scripts -->
+  <script src="admin.js"></script>
+  <script src="chart.js"></script>
+  <script src="accounting.js"></script>
+  <script src="inventory.js"></script>
+</body>
+
+</html>

admin.js

@@ -0,0 +1,224 @@
+// =======================
+// Load members from API and populate table
+// =======================
+async function loadMembers() {
+  try {
+    const res = await fetch('/api/members');
+    if (!res.ok) throw new Error('Failed to fetch members');
+
+    const members = await res.json();
+    const tbody = document.getElementById('membersBody');
+    tbody.innerHTML = members
+      .map(
+        (m) => `
+      <tr>
+        <td>${m.id || ''}</td>
+        <td>${m.name}</td>
+        <td>${m.address || ''}</td>
+        <td>${m.email}</td>
+        <td>${m.phone || ''}</td>
+                <td><button onclick="openMemberModal(${m.id})">Action</button></td>
+      </tr>`
+      )
+      .join('');
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+// =======================
+// Fetch and show the next available member ID
+// =======================
+async function previewNextId() {
+  try {
+    const res = await fetch('/api/members/next-id');
+    if (!res.ok) throw new Error('Failed to fetch next ID');
+
+    const data = await res.json();
+    const previewEl = document.getElementById('nextIdPreview');
+    if (previewEl) previewEl.textContent = data.nextId;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+// =======================
+// Handle Add Member form submission
+// =======================
+document.getElementById('memberForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+
+  const newMember = {
+    name: document.getElementById('name').value.trim(),
+    address: document.getElementById('address').value.trim(),
+    email: document.getElementById('email').value.trim(),
+    phone: document.getElementById('phone').value.trim()
+  };
+
+  try {
+    const res = await fetch('/api/members', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(newMember)
+    });
+
+    if (!res.ok) throw new Error('Failed to add member');
+
+    document.getElementById('memberForm').reset();
+    await loadMembers();
+    await previewNextId();
+  } catch (err) {
+    console.error(err);
+    alert('Error saving member');
+  }
+});
+
+// =======================
+// Export members as JSON by redirecting to API endpoint
+// =======================
+document.getElementById('exportMembers').addEventListener('click', () => {
+  window.location.href = '/api/members/export';
+});
+
+// =======================
+// Initialize on page load
+// =======================
+window.addEventListener('DOMContentLoaded', () => {
+  loadMembers();
+  previewNextId();
+});
+
+// =======================
+// Tabs (optional)
+// =======================
+// Admin main tab switching
+document.querySelectorAll('.admin-tabs button').forEach(btn => {
+  btn.addEventListener('click', () => {
+    // Remove active class from all buttons and hide all tabs
+    document.querySelectorAll('.admin-tabs button').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.admin-tab').forEach(tab => (tab.style.display = 'none'));
+
+    // Activate clicked button and show corresponding tab
+    btn.classList.add('active');
+    const tabId = btn.dataset.tab;
+    document.getElementById(tabId).style.display = 'block';
+  });
+});
+
+// Toggle visibility helper for forms with button label change
+function setupToggle(buttonId, containerId, defaultLabel = "Add", closeLabel = "Close") {
+  const button = document.getElementById(buttonId);
+  const container = document.getElementById(containerId);
+
+  button.addEventListener('click', () => {
+    const isVisible = container.style.display === 'block';
+    container.style.display = isVisible ? 'none' : 'block';
+    button.textContent = isVisible ? defaultLabel : `${closeLabel} ${defaultLabel}`;
+  });
+}
+
+// Setup toggles for member, transaction, and item forms
+setupToggle("toggleMemberForm", "memberFormContainer", "Add Member");
+setupToggle("toggleTransactionForm", "transactionFormContainer", "Add Transaction");
+setupToggle("toggleItemForm", "itemFormContainer", "Add Item");
+
+// Accounting sub-tabs view toggle
+document.querySelectorAll('#accountingTabs button').forEach(button => {
+  button.addEventListener('click', () => {
+    // Remove active class from all accounting tab buttons
+    document.querySelectorAll('#accountingTabs button').forEach(b => b.classList.remove('active'));
+
+    // Add active class to clicked button
+    button.classList.add('active');
+
+    const selected = button.dataset.tab;
+
+    // Hide all accounting views initially
+    document.querySelectorAll('.accounting-tab-view').forEach(view => {
+      view.style.display = 'none';
+    });
+
+    // Show all or a specific accounting view
+    if (selected === 'all') {
+      document.querySelectorAll('.accounting-tab-view').forEach(view => {
+        view.style.display = 'block';
+      });
+    } else {
+      const view = document.getElementById(`view-${selected}`);
+      if (view) view.style.display = 'block';
+    }
+  });
+});
+
+///////////////////////////////////////
+///////////////////////////////////////////////
+// ================= INVENTORY =================
+
+let selectedMember = null;
+
+window.openMemberModal = async function (id) {
+  const res = await fetch('/api/members');
+  const members = await res.json();
+  selectedMember = members.find(m => m.id === id);
+
+  if (!selectedMember) return alert('Member not found');
+
+  // Populate modal form
+  document.getElementById('editMemberId').value = selectedMember.id;
+  document.getElementById('editMemberName').value = selectedMember.name;
+  document.getElementById('editMemberEmail').value = selectedMember.email;
+  document.getElementById('editMemberPhone').value = selectedMember.phone || '';
+  document.getElementById('editMemberAddress').value = selectedMember.address || '';
+
+  // Show modal
+  document.getElementById('memberModal').classList.remove('hidden');
+};
+
+document.getElementById('closeModalBtn').addEventListener('click', () => {
+  document.getElementById('memberModal').classList.add('hidden');
+});
+
+document.getElementById('cancelModalBtn').addEventListener('click', () => {
+  document.getElementById('memberModal').classList.add('hidden');
+});
+
+// Save edited member
+document.getElementById('editMemberForm').addEventListener('submit', async e => {
+  e.preventDefault();
+
+  const updated = {
+    name: document.getElementById('editMemberName').value,
+    email: document.getElementById('editMemberEmail').value,
+    phone: document.getElementById('editMemberPhone').value,
+    address: document.getElementById('editMemberAddress').value
+  };
+
+  const id = document.getElementById('editMemberId').value;
+
+  const res = await fetch(`/api/members/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(updated)
+  });
+
+  if (!res.ok) return alert('Failed to update member');
+
+  document.getElementById('memberModal').classList.add('hidden');
+  loadMembers();
+});
+
+// Delete member
+document.getElementById('deleteMemberBtn').addEventListener('click', async () => {
+  if (!confirm('Are you sure you want to delete this member?')) return;
+
+  const id = document.getElementById('editMemberId').value;
+
+  const res = await fetch(`/api/members/${id}`, {
+    method: 'DELETE'
+  });
+
+  if (!res.ok) return alert('Failed to delete member');
+
+  document.getElementById('memberModal').classList.add('hidden');
+  loadMembers();
+});

bhr.html

@@ -0,0 +1,1051 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Eritrean New Year & Feasts</title>
+  <style>
+    body {
+      margin: 0; padding: 0;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      color: #222;
+    /*  background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1470&q=80') no-repeat center center fixed;
+      background-size: cover;
+      min-height: 100vh; */
+      display: flex;
+      justify-content: center;
+      padding: 30px 10px;
+    }
+    
+#headcon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(135deg, #f7f0f0, #fff7f7);
+  border: 3px solid #ba1c1c;
+  border-radius: 12px;
+  padding: 1rem 2rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  text-align: center;
+  position: relative;
+}
+
+#headcon h1 {
+  font-size: 2.2rem;
+  font-weight: bold;
+  color: #ba1c1c;
+  margin: 1rem 0;
+  text-shadow: 1px 1px 0 #f8dddd;
+}
+
+.header-img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 3px solid #ba1c1c;
+  background: white;
+  box-shadow: 0 0 10px rgba(186, 28, 28, 0.3);
+  margin: 0.5rem;
+}
+
+@media screen and (min-width: 600px) {
+  #headcon {
+    flex-direction: row;
+    justify-content: center;
+    gap: 1.5rem;
+  }
+
+  #headcon h1 {
+    margin: 0;
+    font-size: 2.5rem;
+  }
+
+  .header-img {
+    width: 90px;
+    height: 90px;
+  }
+}
+
+    h1, h2 {
+      text-align: center;
+      color: #ba1c1c;
+      text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
+      margin-bottom: 0.5rem;
+    }
+    h1 { font-size: 2.8rem; font-weight: 700; }
+    h2 { font-size: 2rem; font-weight: 600; margin-top: 2rem; }
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.controls label {
+  font-weight: 600;
+  font-size: 1.2rem;
+  color: #ba1c1c;
+}
+
+.controls input[type="number"] {
+  width: 100px;
+  padding: 8px 12px;
+  font-size: 1.1rem;
+  border: 2px solid #ba1c1c;
+  border-radius: 10px;
+  outline-offset: 2px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.controls input[type="number"]:focus {
+  border-color: #e03e3e;
+  box-shadow: 0 0 8px #e03e3e;
+}
+
+.controls button {
+  padding: 10px 20px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: white;
+  background: linear-gradient(135deg, #ba1c1c, #e03e3e);
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  box-shadow: 0 4px 8px rgba(186, 28, 28, 0.4);
+  transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.controls button:hover {
+  background: linear-gradient(135deg, #e03e3e, #ba1c1c);
+  transform: scale(1.05);
+}
+
+.controls button:active {
+  transform: scale(0.95);
+}
+
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 2rem;
+      font-size: 1.1rem;
+    }
+    th, td {
+      border: 1px solid #ba1c1c;
+      padding: 10px 15px;
+      text-align: left;
+    }
+    th {
+      background-color: #ba1c1c;
+      color: white;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    tbody tr:nth-child(even) {
+      background-color: #f9f0f0;
+    }
+    caption {
+      caption-side: top;
+      text-align: center;
+      font-size: 1.6rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: #8b0000;
+    }
+
+    /* Calendar styling */
+    .month-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 4px;
+      margin-bottom: 3rem;
+    }
+    .month-name {
+      grid-column: span 7;
+      font-weight: 700;
+      font-size: 1.5rem;
+      text-align: center;
+      margin-bottom: 8px;
+      color: #ba1c1c;
+    }
+    .day-header, .date-cell {
+      text-align: center;
+      font-weight: 600;
+      padding: 6px 4px;
+      font-size: 0.9rem;
+    }
+    .day-header {
+      background-color: #ba1c1c;
+      color: white;
+    }
+    .date-cell {
+      background: #fff;
+      border: 1px solid #ba1c1c;
+      border-radius: 5px;
+      min-height: 60px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-weight: 500;
+      position: relative;
+    }
+    .eth-date {
+      font-size: 1.2rem;
+      font-weight: 700;
+      color: #ba1c1c;
+    }
+    .greg-date {
+      font-size: 0.75rem;
+      color: #555;
+      margin-top: 4px;
+    }
+
+    footer {
+      text-align: center;
+      font-size: 0.9rem;
+      color: #444;
+      margin-top: 10px;
+      font-style: italic;
+    }
+
+    @media (max-width: 720px) {
+      .container {
+        padding: 20px;
+        max-width: 100%;
+      }
+      h1 { font-size: 2rem; }
+      h2 { font-size: 1.5rem; }
+      table {
+        font-size: 0.9rem;
+      }
+      .date-cell {
+        min-height: 50px;
+        font-size: 0.85rem;
+      }
+    }
+    
+    @media print {
+  body {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    background: white !important;
+  }
+
+  .container {
+    background: white !important;
+    color: black !important;
+    box-shadow: none !important;
+    border: none !important;
+  }
+
+  th {
+    background-color: #ba1c1c !important;
+    color: white !important;
+  }
+
+  .day-header {
+    background-color: #ba1c1c !important;
+    color: white !important;
+  }
+
+  .date-cell {
+    border: 1px solid #ba1c1c !important;
+  }
+
+  select, button, footer {
+    display: none !important;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+#customHolidaySection {
+  background-color: #fff7e6;
+  padding: 1.5rem;
+  margin-top: 2rem;
+  border: 2px dashed #ba1c1c;
+  border-radius: 10px;
+}
+
+#customHolidayForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.custom-btn {
+  background-color: #ba1c1c;
+  color: white;
+  padding: 10px 15px;
+  font-size: 1.1rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-top: 1rem;
+}
+
+
+  </style>
+</head>
+<body>
+
+<div class="container">
+  <button><a href="https://www.blacklioncarrents.com/">back home</a></button>
+ <header>
+</header>
+
+    <div id="headcon"> 
+     <img src="https://i.pinimg.com/736x/55/c3/10/55c310adca255f4aaa3c0fe42f2352a3.jpg" alt="Celebration icon" class="header-img">
+  <h1>Happy Eritrean New Year (Kudus Yohannes)</h1>
+    <p id="zemeneText">Welcome!</p>
+      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0DSSxnr990Od7vwChi8zT3NhnsB5rhpyTXQ&s" alt="Celebration icon" class="header-img">
+ </div>
+
+  <section class="controls">
+    <label for="year">E.C. Year:</label>
+    <input type="number" id="year" value="2018" />
+    <button id="calc">Calculate Feasts</button>
+    <button id="printBtn">🖨️ Print</button>
+      <!-- Custom Holiday Toggle Button -->
+<button id="toggleCustomHolidayBtn" class="custom-btn">➕ Add Custom Holiday</button>
+  </section>
+
+
+<!-- Hidden Section -->
+<div id="customHolidaySection" class="hidden">
+  <h2>Add Your Custom Holiday</h2>
+  <form id="customHolidayForm">
+    <label for="customName">Holiday Name:</label>
+    <input type="text" id="customName" required>
+
+    <label for="customMonth">Month (0–12):</label>
+    <input type="number" id="customMonth" min="0" max="12" required>
+
+    <label for="customDay">Day:</label>
+    <input type="number" id="customDay" min="1" max="30" required>
+
+    <button type="submit">Add</button>
+    <button type="button" onclick="window.print()">🖨️ Print Only This</button>
+  </form>
+
+  <div id="customHolidayList"></div>
+</div>
+
+
+ <section class="tables">
+    <h2>Bahre Hasab Core Values</h2>
+    <table>
+      <tbody id="coreBody"></tbody>
+    </table>
+
+    <h2>መጥቅዕ + ለውሳከ ዕለት Metke Weekday Assignment</h2>
+    <table>
+      <thead><tr><th>Weekday</th><th>Assigned</th><th>Mebaja</th></tr></thead>
+      <tbody id="weekdayBody"></tbody>
+    </table>
+
+    <h2>በዓላትን ኣጽዋማትን ዝውዕልሉ መዓልቲ Feasts (Bahre Hasab Sequence)</h2>
+    <table>
+      <thead>
+        <tr><th>#</th><th>Feast</th><th>Offset</th><th>E.C. Date</th><th>G.C. Date</th></tr>
+      </thead>
+      <tbody id="feastBody"></tbody>
+    </table>
+    
+    <section class="fixed-holidays">
+
+    <h2> ዓመታዊ በዓላት Fixed Holidays</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Holiday</th>
+          <th>EC Date</th>
+          <th>Gregorian Date</th>
+          <th>Day of Week</th>
+        </tr>
+      </thead>
+      <tbody id="fixedHolidayBody"></tbody>
+    </table>
+    
+
+  <h2>ዓበይቲ ናይ ጎይታ በዓላት Great Holidays</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Holiday</th>
+        <th>EC Date</th>
+        <th>Gregorian Date</th>
+        <th>Day of Week</th>
+      </tr>
+    </thead>
+    <tbody id="greatHolidayBody"></tbody>
+  </table>
+
+  <h2>ንኣሽቱ ናይ ጎይታ በዓላት mall Holidays</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Holiday</th>
+        <th>EC Date</th>
+        <th>Gregorian Date</th>
+        <th>Day of Week</th>
+      </tr>
+    </thead>
+    <tbody id="smallHolidayBody"></tbody>
+  </table>
+
+  <h2> ናይ ቅድስት ድንግል ማርያም በዓላት St. Mary Holidays</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Holiday</th>
+        <th>EC Date</th>
+        <th>Gregorian Date</th>
+        <th>Day of Week</th>
+      </tr>
+    </thead>
+    <tbody id="stMaryHolidayBody"></tbody>
+  </table>
+  
+  <h2> ናይ ቅድስት ድንግል ማርያም በዓላት St. Mary Holidays</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Holiday</th>
+        <th>EC Date</th>
+        <th>Gregorian Date</th>
+        <th>Day of Week</th>
+      </tr>
+    </thead>
+    <tbody id="StSaints1HolidayBody"></tbody>
+  </table> 
+  
+  <h2>      ናይ ቅድስት ድንግል ማርያም በዓላት St. Mary Holidays</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Holiday</th>
+        <th>EC Date</th>
+        <th>Gregorian Date</th>
+        <th>Day of Week</th>
+      </tr>
+    </thead>
+    <tbody id="stSaints2HolidayBody"></tbody>
+  </table> <h2> ናይ ቅድስት ድንግል ማርያም በዓላት St. Mary Holidays</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Holiday</th>
+        <th>EC Date</th>
+        <th>Gregorian Date</th>
+        <th>Day of Week</th>
+      </tr>
+    </thead>
+    <tbody id="BirthFeastsHolidayBody"></tbody>
+  </table>
+
+</section>
+
+</section>
+
+
+  <footer>
+    <p> <img src="hadshamet.jpg" alt="hadshamet" width="30" />  Made with ❤️ for Eritrean Heritage</p>
+  </footer>
+</div>
+
+<script>
+  (function () {
+    // ===================== CONSTANTS =====================
+    const MONTHS = [
+      "Meskerem", "Tikimt", "Hidar", "Tahsas",
+      "Tir", "Yekatit", "Megabit", "Miyazya",
+      "Genbot", "Sene", "Hamle", "Nehasse", "Pagumien"
+    ];
+
+    const ASSIGNED_BY_JS_DAY = { 6: 8, 0: 7, 1: 6, 2: 5, 3: 4, 4: 3, 5: 2 };
+    const JS_DAY_NAME = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+ const FEAST_GAPS = [
+  { name: " ነነዌ Nenewie",        gap: 0,   category: "" },
+  { name: "ዓብይ ጾም Abiy Tsom",      gap: 14,  category: "" },
+  { name: "ደብረ ዘይት Debre Zeyt",     gap: 27,  category: "small" },
+  { name: "ሆሣዕና Hosaena (Palm Sunday)",        gap: 21,  category: "great" },
+  { name: "ዓርቢ ስቅለት Good Friday",    gap: 5,   category: "great" },
+  { name: "ትንሳኤ Fasika",         gap: 2,   category: "great" },
+  { name: "ርክበ ካህናትPriests’ Meeting", gap: 24, category: "" },
+  { name: "ዕርገት Erget",          gap: 15,  category: "great" },
+  { name: "በዓለ መንፈስ ቅዱስ Pentecost",      gap: 10,  category: "great" },
+  { name: "ጾመ ሰነ Tsome Sene",     gap: 1,   category: "" },
+  { name: "ጾመ ድህነት Mhlela Dihnet",  gap: 2,   category: "" }
+];
+
+    // Fixed holidays example - you can extend this list
+const HOLIDAY_GROUPS = {
+  fixed: [
+    { name: "ቅ, ዮውሃንስ St. John (Eritrean New Year)", month: 0, day: 1 },
+    { name: "መስቀል Meskel", month: 0, day: 17 },
+    { name: " ቅ Mኢካኤል St. Archangel Michael", month: 2, day: 12 }
+
+  ],
+  great: [
+    { name: " ልደት Lideta (Nativity)", month: 3, day: 29 },
+    { name: "ጥምቀት Timket (Epiphany)", month: 4, day: 11 },
+    { name: "ትስብእት Tsbiet (Incarnation)", month:6,day:29},
+    { name: "ሆሳዕና Hosaena (Palm Sunday)", movable: "ሆሣዕና Hosaena (Palm Sunday)" },
+    { name: "ዓርቢ ስቅለት Sklet (Good Friday)", movable: "ዓርቢ ስቅለት Good Friday" },
+    { name: " ትንሳኤ Fasika", movable: "ትንሳኤ Fasika" },
+    { name: "ዕርገት Erget (Ascension)", movable: "ዕርገት Erget" }, 
+    { name: "በዓለ መንፈስ ቅዱስ Pentecost", movable: "በዓለ መንፈስ ቅዱስ Pentecost" },
+    { name: "ደብረ ታቦር", month: 11, day: 13 }  // fixed fallback
+  ],
+  small: [
+    { name: " ግዝረት Gzret", month: 4, day: 6 },
+    { name: "ቃና ዘገሊላ Kana zegelila", month: 4, day: 12 },
+    { name: "ባዓለ ስምኦን ኣረጋዊ Beale Simon", month: 5, day: 8 },
+    { name: "ደብረ ዘይት Debre Zeyt", movable: "ደብረ ዘይት Debre Zeyt"},
+    { name: "መስቀል Meskel", month: 0, day: 17 },
+    { name: "መስቀል Meskel", month: 6, day: 10 }
+  ],
+  stMary: [
+    { name: "ባዓታ Beata", month: 3, day: 3 },
+    { name: "ዐስተርእዮ Astereyo", month: 4, day: 21 },
+    { name: "ለደታ Ldeta", month: 8, day: 1 },
+    { name: "ቅዳሴ ቤታ Kdasie Bieta", month: 9, day: 20 }
+  ],
+  stSaints1: [
+  { name: "ኪዳነ ምሕረት Kidane Mihret", month: 5, day: 16 },
+  { name: "ኪዳነ እግዚአብሔር Kidane Egziabher", month: 2, day: 2 },
+  { name: "እንተአ መርዓዊ Ente’a Merawi", month: 4, day: 4 },
+  { name: "ኪዳነ ጸጋ ማርያም Kidane Tsega Mariam", month: 5, day: 5 },
+  { name: "ኪዳነ እምነት Kidane Emenet", month: 14, day: 14 },
+  { name: "ቅዱስ ኪዳነ ጊዮርጊስ Kidane Giorgis", month: 20, day: 20 },
+  { name: "ኪዳነ ብርሃን Kidane Birhan", month: 25, day: 25 },
+  { name: "ቅዱስ ዮሐንስ Kidane Yohannes", month: 7, day: 23 },
+  { name: "ጊዮርጊስ ኪዳነ ምሕረት Giorgis Kidane Mihret", month: 9, day: 9 },
+  { name: "ቅዱስ ሚካኤል Kidane Mikael", month: 15, day: 15 },
+  { name: "ነገሥት ኪዳነ ምሕረት Negest Kidane Mihret", month: 25, day: 25 },
+  { name: "ኪዳነ ከፍርሂ Kidane Kefrihi", month: 29, day: 6 },
+  { name: "ኪዳነ አቡነ ሕዝቅያስ Kidane Abune Hizqiyas", month: 12, day: 12 },
+  { name: "ቅዱስ እስጢፋኖስ Kidane Estifanos", month: 22, day: 22 },
+  { name: "ኪዳነ ጴጥሮስ Kidane Petros", month: 24, day: 24 },
+  { name: "ኪዳነ በአብ Kidane Be’ab", month: 25, day: 25 },
+  { name: "ቅዱስ ማርቆስ Kidane Markos", month: 3, day: 3 },
+  { name: "ኪዳነ ስምኦን Kidane Simon", month: 6, day: 6 },
+  { name: "ቅዱስ ያሬድ Kidane Yared", month: 15, day: 19 },
+  { name: "ኪዳነ አቡነ አንበሳ Kidane Abune Anbesa", month: 1, day: 1 },
+  { name: "ቅዱስ ጊዮርጊስ Kidane Giorgis", month: 13, day: 13 },
+  { name: "ኪዳነ ማርያም Kidane Mariam", month: 7, day: 7 }
+],
+BirthFeasts: [
+  { name: "ድርሳ ቅዱስ Dirsa Kidus", month: 15, day: 15 },
+  { name: "ድርሳ ማርያም Dirsa Mariam", month: 25, day: 25 },
+  { name: "ጊዮርጊስ Giorgis", month: 9, day: 9 },
+  { name: "ድርሳ ሲኖዶስ Dirsa Sinodos", month: 24, day: 24 },
+  { name: "ድርሳ ቅዱስ Dirsa Kidus", month: 26, day: 26 },
+  { name: "ድርሳ ፍላጤ Dirsa Filate", month: 1, day: 1 },
+  { name: "ድርሳ ማርያም Dirsa Mariam", month: 5, day: 5 }
+],
+
+stSaints2: [
+  { name: "በርትልሜዎስ Bertelmeos", month: 1, day: 1 },
+  { name: "ማቴዎስ Mateos", month: 12, day: 12 },
+  { name: "አቡነ ሕዝቅኤል Abune Hizqiel", month: 17, day: 17 },
+  { name: "ለቲቆ Letiko", month: 22, day: 22 },
+  { name: "ደሚስክስ Demiskis", month: 18, day: 18 },
+  { name: "ቅርማኖስ Kermanos", month: 29, day: 29 },
+  { name: "ዮሐንስ ወልድ ዘቀዳማዊ Yohannes Weld Zeqedamawi", month: 4, day: 4 },
+  { name: "ዮሐንስ ወልድ ኪዳነ ምሕረት Yohannes Weld Kidane Mihret", month: 10, day: 10 },
+  { name: "ማቴዎስ Mateos", month: 8, day: 8 },
+  { name: "ዮሐንስ ወልድ ኪዳነ ብርሃን Yohannes Weld Kidane Birhan", month: 17, day: 17 },
+  { name: "ማርቆስ Markos", month: 26, day: 26 },
+  { name: "ሐና Hanna", month: 2, day: 2 },
+  { name: "ፍላጤ ወልድ አናስዮስ Filate Weld Anasios", month: 5, day: 5 },
+  { name: "ጴጥሮስ Petros", month: 10, day: 10 },
+  { name: "አቡነ አርጎስ እንደር Abune Argos Ender", month: 18, day: 18 },
+  { name: "አንድርያስ Andreas", month: 30, day: 30 },
+  { name: "ኪዳነ ምሕረት Kidane Mihret", month: 4, day: 4 }
+]
+
+
+};
+
+    // ===================== DOM Elements =====================
+    const els = {
+      year: document.getElementById("year"),
+      coreBody: document.getElementById("coreBody"),
+      weekdayBody: document.getElementById("weekdayBody"),
+      feastBody: document.getElementById("feastBody"),
+      calcBtn: document.getElementById("calc"),
+      fixedHolidayBody: document.getElementById("fixedHolidayBody"),
+      printBtn: document.getElementById("printBtn")
+    };
+
+    // ===================== UTILITIES =====================
+    const mod = (n, m) => ((n % m) + m) % m;
+
+    function isGregorianLeap(y) {
+      return (y % 4 === 0) && (y % 100 !== 0 || y % 400 === 0);
+    }
+
+    function meskerem1DateUTC(ecYear) {
+      const gYear = ecYear + 7;
+      const day = isGregorianLeap(gYear + 1) ? 12 : 11;
+      return new Date(Date.UTC(gYear, 8, day));
+    }
+
+    function ecMonthLen(mIdx, ecYear) {
+      if (mIdx === 12) {
+        if (ecYear % 128 === 0) return 7;
+        if (ecYear % 4 === 3) return 6;
+        return 5;
+      }
+      return 30;
+    }
+
+    function ecToGregorianISO(ecYear, monthIdx, day) {
+      const base = meskerem1DateUTC(ecYear);
+      let offset = 0;
+      for (let m = 0; m < monthIdx; m++) offset += ecMonthLen(m, ecYear);
+      offset += day - 1;
+      const d = new Date(base.getTime());
+      d.setUTCDate(d.getUTCDate() + offset);
+      return d.toISOString().slice(0, 10);
+    }
+
+    function addDaysEC(ecYear, monthIdx, day, add) {
+      let y = ecYear, m = monthIdx, d = day;
+      let left = add;
+      while (left > 0) {
+        const len = ecMonthLen(m, y);
+        const remaining = len - d;
+        if (left <= remaining) {
+          d += left;
+          left = 0;
+        } else {
+          left -= (remaining + 1);
+          d = 1;
+          m++;
+          if (m > 12) {
+            m = 0; y++;
+          }
+        }
+      }
+      return { ecYear: y, monthIdx: m, day: d };
+    }
+
+    // ===================== BAHRE HASAB CORE CALCULATION =====================
+    function coreCalc(ecYear) {
+      const amete = 5500 + ecYear;
+      const remainder1 = mod(amete, 532);
+      const menber = mod(remainder1, 19);
+      const abektie = mod((menber - 1) * 11, 30);
+      const metke = 30 - abektie;
+      return { amete, remainder1, menber, abektie, metke };
+    }
+
+    function computeNenewie(ecYear, metke) {
+      const metkeMonthIdx = (metke >= 15) ? 0 : 1;
+      const metkeISO = ecToGregorianISO(ecYear, metkeMonthIdx, metke);
+      const jsDay = new Date(metkeISO + "T00:00:00Z").getUTCDay();
+      const weekdayAssigned = ASSIGNED_BY_JS_DAY[jsDay];
+      const weekdayName = JS_DAY_NAME[jsDay];
+      const mebaja = metke + weekdayAssigned;
+      let nenMonthIdx = (metke >= 15) ? 4 : 5;
+      let nenDay = mebaja;
+      if (nenDay > 30) {
+        nenDay -= 30;
+        nenMonthIdx++;
+      }
+      const nenGregISO = ecToGregorianISO(ecYear, nenMonthIdx, nenDay);
+      return {
+        metkeMonthIdx,
+        metkeISO,
+        weekdayName,
+        weekdayAssigned,
+        mebaja,
+        nenEC: { ecYear, monthIdx: nenMonthIdx, day: nenDay },
+        nenGregISO
+      };
+    }
+
+    function cumulativeOffsetsFromGaps(gaps) {
+      const out = [];
+      let total = 0;
+      for (const [name, gap] of gaps) {
+        total += gap;
+        out.push([name, total]);
+      }
+      return out;
+    }
+
+    // ===================== RENDER FUNCTIONS =====================
+
+   function render() {
+  const ecYear = Number(els.year.value || 0);
+  if (!ecYear) {
+    alert("Please enter a valid Eritrean year.");
+    return;
+  }
+
+  const core = coreCalc(ecYear);
+  const nen = computeNenewie(ecYear, core.metke);
+
+  // Core Table
+  els.coreBody.innerHTML = `
+    <tr><th>ዓመተ ዓለም Amete Alem</th><td>${core.amete}</td></tr>
+    <tr><th>ዓብይ ቀመር Remainder1 (mod 532)</th><td>${core.remainder1}</td></tr>
+    <tr><th>መንበር Menber (mod 19)</th><td>${core.menber}</td></tr>
+    <tr><th>ኣበቅቴ Abektie</th><td>${core.abektie}</td></tr>
+    <tr><th>መጥቅዕMetke (day)</th><td>${core.metke}</td></tr>
+    <tr><th>መጥቅዕ ዝወድቀሉ ወርሒ Metke “virtual month”</th><td>${MONTHS[nen.metkeMonthIdx]}</td></tr>
+    <tr><th>Metke date (E.C.)</th><td>${MONTHS[nen.metkeMonthIdx]} ${core.metke}</td></tr>
+    <tr><th መጥቅዕ + ለውሳከ ዕለት >Metke weekday</th><td>${nen.weekdayName}</td></tr>
+    <tr><th>መባጃ ሓመር Mebaja</th><td>${nen.mebaja}</td></tr>
+    <tr><th>ነነዌ ብግዕዝ Nenewie (E.C.)</th><td>${MONTHS[nen.nenEC.monthIdx]} ${nen.nenEC.day}</td></tr>
+    <tr><th> ነነዌ ብጊርጎርያን  Nenewie (Gregorian)</th><td>${nen.nenGregISO}</td></tr>
+          <tr><th>Pagumien length</th><td>${ecMonthLen(12, ecYear)} days</td></tr>
+
+  `;
+
+  // Metke Weekday Table
+  const jsDay = new Date(nen.metkeISO + "T00:00:00Z").getUTCDay(); // 0=Sun..6=Sat
+  const assigned = ASSIGNED_BY_JS_DAY[jsDay];
+  const mebaja = core.metke + assigned;
+  const weekdayName = JS_DAY_NAME[jsDay];
+  els.weekdayBody.innerHTML = `
+    <tr style="color:red; font-weight:bold;">
+      <td>${weekdayName} ✔ actual</td>
+      <td>${assigned}</td>
+      <td>${mebaja}</td>
+    </tr>
+  `;
+
+  // Feasts Table
+const feastByCategory = {
+  great: [],
+  small: [],
+  stMary: []
+};
+
+let totalOffset = 0;
+els.feastBody.innerHTML = "";
+
+FEAST_GAPS.forEach((feastObj, i) => {
+  totalOffset += feastObj.gap;
+  const feastEC = addDaysEC(ecYear, nen.nenEC.monthIdx, nen.nenEC.day, totalOffset);
+  const feastECStr = `${MONTHS[feastEC.monthIdx]} ${feastEC.day}`;
+  const feastGreg = ecToGregorianISO(feastEC.ecYear, feastEC.monthIdx, feastEC.day);
+  const gDateObj = new Date(feastGreg + "T00:00:00Z");
+  const weekday = JS_DAY_NAME[gDateObj.getUTCDay()];
+
+  // Row for main feast table
+  els.feastBody.innerHTML += `
+    <tr>
+      <td>${i + 1}</td>
+      <td>${feastObj.name}</td>
+      <td>${totalOffset}</td>
+      <td>${feastECStr}</td>
+      <td>${feastGreg}</td>
+    </tr>
+  `;
+
+  // Add to its category table
+  if (feastByCategory[feastObj.category]) {
+    feastByCategory[feastObj.category].push({
+      name: feastObj.name,
+      ecStr: feastECStr,
+      gcStr: feastGreg,
+      weekday
+    });
+  }
+});
+
+
+  // Helper to render each holiday category
+function renderDynamicHolidayTable(holidays, tbodyEl) {
+  tbodyEl.innerHTML = "";
+  holidays.forEach((h, i) => {
+    tbodyEl.innerHTML += `
+      <tr>
+        <td>${i + 1}</td>
+        <td>${h.name}</td>
+        <td>${h.ecStr}</td>
+        <td>${h.gcStr}</td>
+        <td>${h.weekday}</td>
+      </tr>
+    `;
+  });
+}
+
+const evangelists = ["John ዮውሃንስ", "Matthew፡ ማስቴዎስ", "Mark ማርቆስ", "Luke ሉቃስ"];
+const zemeneIndex = ecYear % 4;
+const zemeneName = evangelists[zemeneIndex];
+
+document.getElementById("zemeneText").innerHTML =
+  `Welcome to the Year of <strong> ${zemeneName}</strong>!. እንቃዕ ናብ ዘበነ <strong> ${zemeneName}</strong>ብሰላም አብጸሓና።`;
+
+    
+// Render by category
+renderDynamicHolidayTable(feastByCategory.great,  document.getElementById('greatHolidayBody'));
+renderDynamicHolidayTable(feastByCategory.small,  document.getElementById('smallHolidayBody'));
+renderDynamicHolidayTable(feastByCategory.stMary, document.getElementById('stMaryHolidayBody'));  // if any
+     
+     const movableFeastsByName = {};
+feastByCategory.great.concat(feastByCategory.small || [], feastByCategory.stMary || []).forEach(feast => {
+  movableFeastsByName[feast.name] = {
+    ecStr: feast.ecStr,
+    gcStr: feast.gcStr,
+    weekdayName: feast.weekday
+  };
+});
+
+// Now populate tables using the structured list:
+populateHolidayTables(ecYear, movableFeastsByName);
+
+  }
+
+    // Attach event handlers
+    els.calcBtn.addEventListener("click", render);
+    els.printBtn.addEventListener("click", () => window.print());
+
+
+    // Initial render on page load
+   render();
+    
+    
+ function populateHolidayTables(ecYear, movableFeastsByName) {
+  const categoryToElementId = {
+    fixed: "fixedHolidayBody",
+    great: "greatHolidayBody",
+    small: "smallHolidayBody",
+    stMary: "stMaryHolidayBody",
+    stSaints1: "StSaints1HolidayBody",
+    stSaints2:"stSaints2HolidayBody",
+BirthFeasts: "BirthFeastsHolidayBody"
+  };
+
+  for (const [category, holidays] of Object.entries(HOLIDAY_GROUPS)) {
+    const tbody = document.getElementById(categoryToElementId[category]);
+    tbody.innerHTML = "";
+
+    holidays.forEach(({ name, month, day, movable }, i) => {
+      let ecDateStr = "";
+      let gcDateStr = "";
+      let weekday = "";
+
+      if (movable && movableFeastsByName[movable]) {
+        // Movable feast date
+        const { ecStr, gcStr, weekdayName } = movableFeastsByName[movable];
+        ecDateStr = ecStr;
+        gcDateStr = gcStr;
+        weekday = weekdayName;
+      } else if (typeof month === "number" && typeof day === "number") {
+        // Fixed date
+        const gDate = ecToGregorianISO(ecYear, month, day);
+        const gDateObj = new Date(gDate + "T00:00:00Z");
+        weekday = JS_DAY_NAME[gDateObj.getUTCDay()];
+        ecDateStr = `${MONTHS[month]} ${day}`;
+        gcDateStr = gDate;
+      }
+
+      tbody.innerHTML += `
+        <tr>
+          <td>${i + 1}</td>
+          <td>${name}</td>
+          <td>${ecDateStr}</td>
+          <td>${gcDateStr}</td>
+          <td>${weekday}</td>
+        </tr>
+      `;
+    });
+  }
+
+ }
+
+
+ const customHolidayForm = document.getElementById("customHolidayForm");
+const customName = document.getElementById("customName");
+const customMonth = document.getElementById("customMonth");
+const customDay = document.getElementById("customDay");
+const customHolidayList = document.getElementById("customHolidayList");
+const includeAllCheckbox = document.getElementById("includeAll");
+const printCustomBtn = document.getElementById("printCustomBtn");
+
+const customHolidays = [];
+
+// Populate Month Dropdown
+MONTHS.forEach((month, idx) => {
+  const opt = document.createElement("option");
+  opt.value = idx;
+  opt.textContent = month;
+  customMonth.appendChild(opt);
+});
+
+
+  document.getElementById("toggleCustomHolidayBtn").addEventListener("click", () => {
+  const section = document.getElementById("customHolidaySection");
+  section.classList.toggle("hidden");
+});
+
+document.getElementById("customHolidayForm").addEventListener("submit", function (e) {
+  e.preventDefault();
+
+  const name = document.getElementById("customName").value;
+  const monthIdx = Number(document.getElementById("customMonth").value);
+  const day = Number(document.getElementById("customDay").value);
+
+  const ecStr = `${MONTHS[monthIdx]} ${day}`;
+  const gcStr = ecToGregorianISO(Number(document.getElementById("year").value), monthIdx, day);
+  const weekday = JS_DAY_NAME[new Date(gcStr + "T00:00:00Z").getUTCDay()];
+
+  // Add to visible list
+  document.getElementById("customHolidayList").innerHTML += `
+    <p><strong>${name}</strong>: ${ecStr} (${gcStr}) — ${weekday}</p>
+  `;
+
+  // Optionally, reset form
+  this.reset();
+});
+
+  })();
+
+
+</script>
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "WebPage",
+      "name": "Eritrean Holidays 2025",
+      "url": "https://yourdomain.com/eritrea-holidays",
+      "inLanguage": "en",
+      "description": "List of major Eritrean holidays for 2025"
+    },
+    {
+      "@type": "Event",
+      "name": "Orthodox Christmas",
+      "startDate": "2025-01-07",
+      "endDate": "2025-01-07",
+      "eventStatus": "https://schema.org/EventScheduled",
+      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
+      "location": {
+        "@type": "Place",
+        "name": "Eritrea",
+        "address": {
+          "@type": "PostalAddress",
+          "addressCountry": "ER"
+        }
+      },
+      "description": "Orthodox Christmas celebrated in Eritrea on 2025-01-07"
+    },
+    {
+      "@type": "Event",
+      "name": "Timket (Epiphany)",
+      "startDate": "2025-01-19",
+      "endDate": "2025-01-19",
+      "eventStatus": "https://schema.org/EventScheduled",
+      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
+      "location": {
+        "@type": "Place",
+        "name": "Eritrea",
+        "address": {
+          "@type": "PostalAddress",
+          "addressCountry": "ER"
+        }
+      },
+      "description": "Timket (Epiphany) celebrated in Eritrea on 2025-01-19"
+    },
+    {
+      "@type": "Event",
+      "name": "Independence Day",
+      "startDate": "2025-05-24",
+      "endDate": "2025-05-24",
+      "eventStatus": "https://schema.org/EventScheduled",
+      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
+      "location": {
+        "@type": "Place",
+        "name": "Eritrea",
+        "address": {
+          "@type": "PostalAddress",
+          "addressCountry": "ER"
+        }
+      },
+      "description": "Independence Day celebrated in Eritrea on 2025-05-24"
+    },
+    {
+      "@type": "Event",
+      "name": "Martyrs' Day",
+      "startDate": "2025-06-20",
+      "endDate": "2025-06-20",
+      "eventStatus": "https://schema.org/EventScheduled",
+      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
+      "location": {
+        "@type": "Place",
+        "name": "Eritrea",
+        "address": {
+          "@type": "PostalAddress",
+          "addressCountry": "ER"
+        }
+      },
+      "description": "Martyrs' Day celebrated in Eritrea on 2025-06-20"
+    },
+    {
+      "@type": "Event",
+      "name": "Kudus Yohannes (Eritrean New Year)",
+      "startDate": "2025-09-11",
+      "endDate": "2025-09-11",
+      "eventStatus": "https://schema.org/EventScheduled",
+      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
+      "location": {
+        "@type": "Place",
+        "name": "Eritrea",
+        "address": {
+          "@type": "PostalAddress",
+          "addressCountry": "ER"
+        }
+      },
+      "description": "Eritrean New Year (Kudus Yohannes) celebrated on 2025-09-11"
+    },
+    {
+      "@type": "Event",
+      "name": "Meskel",
+      "startDate": "2025-09-27",
+      "endDate": "2025-09-27",
+      "eventStatus": "https://schema.org/EventScheduled",
+      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
+      "location": {
+        "@type": "Place",
+        "name": "Eritrea",
+        "address": {
+          "@type": "PostalAddress",
+          "addressCountry": "ER"
+        }
+      },
+      "description": "Meskel celebration in Eritrea on 2025-09-27"
+    }
+  ]
+}
+</script>
+
+</body>
+</html>
+

chart.js

@@ -0,0 +1,197 @@
+
+//////////////////////////////////////////////////////////
+let monthlyChart;
+
+async function renderMonthlyChart(transactionsParam = null) {
+  const transactions = transactionsParam || await (await fetch('/api/accounting')).json();
+
+  const contribution = Array(12).fill(0);
+  const donation = Array(12).fill(0);
+  const sale = Array(12).fill(0);
+  const expenses = Array(12).fill(0);
+
+  transactions.forEach(tx => {
+    if (!tx.month) return;
+    const parts = tx.month.split('-');
+    if (parts.length !== 2) return;
+    const monthIndex = parseInt(parts[1], 10) - 1;
+    if (monthIndex < 0 || monthIndex > 11) return;
+
+    if (tx.category === 'contribution') contribution[monthIndex] += tx.amount;
+    else if (tx.category === 'donation') donation[monthIndex] += tx.amount;
+    else if (tx.category === 'sale') sale[monthIndex] += tx.amount;
+    else if (tx.category === 'expense') expenses[monthIndex] += tx.amount;
+  });
+
+  const ctx = document.getElementById('monthlyChart').getContext('2d');
+  if (monthlyChart) monthlyChart.destroy();
+
+  monthlyChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+      datasets: [
+        { label: 'Contribution', data: contribution, backgroundColor: 'rgba(75,192,192,0.7)' },
+        { label: 'Donation', data: donation, backgroundColor: 'rgba(54,162,235,0.7)' },
+        { label: 'Sale', data: sale, backgroundColor: 'rgba(255,206,86,0.7)' },
+        { label: 'Expense', data: expenses, backgroundColor: 'rgba(255,99,132,0.7)' }
+      ]
+    },
+    options: { responsive: true, plugins: { legend: { position: 'top' }, title: { display: true, text: 'Monthly Income & Expenses by Category' } }, scales: { y: { beginAtZero: true } } }
+  });
+}
+
+async function loadTransactions() {
+  const res = await fetch('/api/accounting', { cache: 'no-store' });
+  let transactions = await res.json();
+
+  if (filters.start || filters.end) {
+    const startDate = filters.start ? new Date(filters.start + "-01") : null;
+    const endDate = filters.end ? new Date(filters.end + "-01") : null;
+
+    transactions = transactions.filter(tx => {
+      if (!tx.month) return false;
+      const txDate = new Date(tx.month + "-01");
+      return (!startDate || txDate >= startDate) && (!endDate || txDate <= endDate);
+    });
+  }
+
+  const tbody = document.getElementById('accountingBody');
+  tbody.innerHTML = transactions.map((t, i) => `
+    <tr class="${t.category === 'expense' ? 'expense' : 'income'}">
+      <td>${i + 1}</td>
+      <td>${t.payerType === 'member' ? t.memberId : t.payerName}</td>
+      <td>${t.payerType}</td>
+      <td>${t.month}</td>
+      <td>${t.amount.toFixed(2)}</td>
+      <td>${t.category}</td>
+      <td>${t.description || ''}</td>
+    </tr>
+  `).join('');
+
+  updateAccountingSummary(transactions);
+  renderMonthlyChart(transactions);
+  renderIncomeExpenseChart(transactions);
+}
+
+
+
+// Call this on page load and after adding a transaction
+renderMonthlyChart();
+//////////////////////////////////////////
+let filters = { start: null, end: null };
+
+async function loadTransactions() {
+  const res = await fetch('/api/accounting');
+  let transactions = await res.json();
+
+  // Apply filter if set
+  if (filters.start || filters.end) {
+    transactions = transactions.filter(tx => {
+      if (!tx.month) return false;
+      const txDate = new Date(tx.month + "-01");
+      const startDate = filters.start ? new Date(filters.start + "-01") : null;
+      const endDate = filters.end ? new Date(filters.end + "-01") : null;
+
+      return (!startDate || txDate >= startDate) &&
+             (!endDate || txDate <= endDate);
+    });
+  }
+
+  const tbody = document.getElementById('accountingBody');
+  tbody.innerHTML = transactions
+    .map((t, i) => `
+      <tr class="${t.category === 'expense' ? 'expense' : 'income'}">
+        <td>${i + 1}</td>
+        <td>${t.payerType === 'member' ? t.memberId : t.payerName}</td>
+        <td>${t.payerType}</td>
+        <td>${t.month}</td>
+        <td>${t.amount}</td>
+        <td>${t.category}</td>
+        <td>${t.description || ''}</td>
+      </tr>
+    `).join('');
+  
+  // Refresh charts/summary with filtered data
+  updateAccountingSummary(transactions);
+  renderMonthlyChart(transactions);
+  renderIncomeExpenseChart(transactions);
+}
+
+let incomeExpenseChart;
+
+async function renderIncomeExpenseChart(transactionsParam = null) {
+  const transactions = transactionsParam || await (await fetch('/api/accounting')).json();
+
+  let totalIncome = 0, totalExpenses = 0;
+
+  transactions.forEach(tx => {
+    if (tx.category === 'expense') totalExpenses += tx.amount;
+    else totalIncome += tx.amount;
+  });
+
+  const ctx = document.getElementById('incomeExpenseChart').getContext('2d');
+  if (incomeExpenseChart) incomeExpenseChart.destroy();
+
+  incomeExpenseChart = new Chart(ctx, {
+    type: 'pie',
+    data: {
+      labels: ['Income', 'Expenses'],
+      datasets: [{
+        data: [totalIncome, totalExpenses],
+        backgroundColor: ['rgba(75,192,192,0.7)', 'rgba(255,99,132,0.7)']
+      }]
+    },
+    options: { responsive: true, plugins: { legend: { position: 'top' }, title: { display: true, text: 'Income vs Expenses' } } }
+  });
+}
+
+
+document.getElementById('applyFilters').addEventListener('click', () => {
+  filters.start = document.getElementById('filterStart').value || null;
+  filters.end = document.getElementById('filterEnd').value || null;
+  loadTransactions();
+});
+
+document.getElementById('clearFilters').addEventListener('click', () => {
+  filters.start = null;
+  filters.end = null;
+  document.getElementById('filterStart').value = '';
+  document.getElementById('filterEnd').value = '';
+  loadTransactions();
+});
+
+
+document.getElementById("exportPdf").addEventListener("click", async () => {
+  const { jsPDF } = window.jspdf;
+  const pdf = new jsPDF("p", "pt", "a4");
+
+  // Title
+  pdf.setFontSize(18);
+  pdf.text("Church Accounting Report", 40, 40);
+
+  // Capture summary table
+  const summaryElement = document.getElementById("summaryTable"); 
+  const summaryCanvas = await html2canvas(summaryElement);
+  const summaryImg = summaryCanvas.toDataURL("image/png");
+  pdf.addImage(summaryImg, "PNG", 40, 60, 500, 0);
+
+  pdf.addPage();
+
+  // Capture monthly chart
+  const chartCanvas = document.getElementById("monthlyChart");
+  const chartImg = chartCanvas.toDataURL("image/png");
+  pdf.text("Monthly Breakdown", 40, 40);
+  pdf.addImage(chartImg, "PNG", 40, 60, 500, 300);
+
+  pdf.addPage();
+
+  // Capture income vs expense pie
+  const pieCanvas = document.getElementById("incomeExpenseChart");
+  const pieImg = pieCanvas.toDataURL("image/png");
+  pdf.text("Income vs Expense", 40, 40);
+  pdf.addImage(pieImg, "PNG", 40, 60, 400, 300);
+
+  // Save file
+  pdf.save("accounting-report.pdf");
+});

index.html

@@ -1,375 +1,171 @@
-<html>
-
-<head>
-  <base href="https://websim.ai/">
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>WebSim inside WebSim</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      margin: 0;
-      padding: 0;
-      background-color: #f0f0f0;
-    }
-
-    #header {
-      background-color: #333;
-      color: white;
-      padding: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    #prompt-input {
-      flex-grow: 1;
-      margin-right: 10px;
-      padding: 5px;
-      font-size: 16px;
-    }
-
-    #generate-btn,
-    #settings-btn {
-      background-color: #4CAF50;
-      border: none;
-      color: white;
-      padding: 5px 10px;
-      text-align: center;
-      text-decoration: none;
-      display: inline-block;
-      font-size: 16px;
-      margin: 4px 2px;
-      cursor: pointer;
-    }
-
-    #settings-modal {
-      display: none;
-      position: fixed;
-      z-index: 1;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      background-color: rgba(0, 0, 0, 0.4);
-    }
-
-    .modal-content {
-      background-color: #fefefe;
-      margin: 15% auto;
-      padding: 20px;
-      border: 1px solid #888;
-      width: 80%;
-      max-width: 500px;
-    }
-
-    #result {
-      margin: 20px;
-      padding: 20px;
-      background-color: white;
-      border-radius: 5px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-
-    .close {
-      color: #aaa;
-      float: right;
-      font-size: 28px;
-      font-weight: bold;
-    }
-
-    .close:hover,
-    .close:focus {
-      color: black;
-      text-decoration: none;
-      cursor: pointer;
-    }
-
-    #system-prompt {
-      width: 100%;
-      height: 100px;
-      margin-top: 10px;
-    }
-
-    #loading {
-      display: none;
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    .spinner {
-      width: 50px;
-      height: 50px;
-      border: 5px solid #f3f3f3;
-      border-top: 5px solid #3498db;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    #original-response {
-      margin-top: 20px;
-      padding: 10px;
-      background-color: #f9f9f9;
-      border: 1px solid #ddd;
-      border-radius: 5px;
-    }
-
-    #copy-btn,
-    #reset-settings-btn {
-      margin-top: 10px;
-      padding: 5px 10px;
-      background-color: #008CBA;
-      color: white;
-      border: none;
-      border-radius: 3px;
-      cursor: pointer;
-    }
-
-    #reset-settings-btn {
-      background-color: #f44336;
-    }
-
-    #max-tokens {
-      width: 100px;
-      padding: 5px;
-      font-size: 16px;
-    }
-
-    #model-select {
-      margin-top: 10px;
-      padding: 5px;
-      font-size: 16px;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="header">
-    <input type="text" id="prompt-input" placeholder="Enter website description...">
-    <button id="generate-btn">Generate</button>
-    <button id="settings-btn">Settings</button>
-  </div>
-
-  <div id="settings-modal">
-    <div class="modal-content">
-      <span class="close">&times;</span>
-      <h2>Settings</h2>
-      <label for="huggingface-token">Hugging Face Token:</label>
-      <input type="text" id="huggingface-token">
-      <br><br>
-      <label for="model-select">Select Model:</label>
-      <select id="model-select">
-        <option value="codellama/CodeLlama-34b-Instruct-hf">CodeLlama-34b-Instruct-hf</option>
-        <option value="mistralai/Mistral-Small-Instruct-2409">Mistral-Small-Instruct-2409</option>
-        <option value="microsoft/Phi-3.5-mini-instruct">Phi-3.5-mini-instruct</option>
-        <option value="01-ai/Yi-1.5-34B-Chat">Yi-1.5-34B-Chat</option>
-        <option value="google/gemma-2-27b-it">Gemma-2-27b-it</option>
-        <option value="meta-llama/Meta-Llama-3-8B-Instruct">Meta-Llama-3-8B-Instruct</option>
-        <option value="HuggingFaceH4/zephyr-7b-beta">Zephyr-7b-beta</option>
-      </select>
-      <br><br>
-      <label for="max-tokens">Max Tokens:</label>
-      <input type="number" id="max-tokens" min="1" value="1000">
-      <br><br>
-      <label for="system-prompt">System prompt:</label>
-      <textarea id="system-prompt">Do not write any comments to your code, do not write anything before or after the code itself. Write HTML, CSS, and JavaScript in a single file. Generate only complete, working code without abbreviations or omissions. Do not use markdown code blocks (```) or any similar formatting. You are strictly prohibited from providing any explanations, comments, or any text that is not part of the actual code, including any statements after the code.</textarea>
-      <br><br>
-      <button id="save-settings">Save</button>
-      <button id="reset-settings-btn">Reset to Default</button>
-    </div>
-  </div>
-
-  <div id="result"></div>
-
-  <div id="original-response"></div>
-  <button id="copy-btn" style="display: none;">Copy Original Response</button>
-
-  <div id="loading">
-    <div class="spinner"></div>
-  </div>
-
-  <script>
-    let currentPrompt = '';
-    let currentCode = '';
-    let selectedModel = localStorage.getItem('selectedModel') || "codellama/CodeLlama-34b-Instruct-hf";
-    let huggingFaceToken = localStorage.getItem('huggingFaceToken') || "";
-    const defaultSystemPrompt = "Do not write any comments to your code, do not write anything before or after the code itself. Write HTML, CSS, and JavaScript in a single file. Generate only complete, working code without abbreviations or omissions. Do not use markdown code blocks (```) or any similar formatting. You are strictly prohibited from providing any explanations, comments, or any text that is not part of the actual code, including any statements after the code.";
-    let systemPrompt = localStorage.getItem('systemPrompt') || defaultSystemPrompt;
-    let maxTokens = localStorage.getItem('maxTokens') || 1000;
-
-    document.getElementById('settings-btn')
-      .addEventListener('click', function() {
-        document.getElementById('settings-modal')
-          .style.display = 'block';
-        document.getElementById('huggingface-token')
-          .value = huggingFaceToken;
-        document.getElementById('model-select')
-          .value = selectedModel;
-        document.getElementById('system-prompt')
-          .value = systemPrompt;
-        document.getElementById('max-tokens')
-          .value = maxTokens;
-      });
-
-    document.getElementsByClassName('close')[0].addEventListener('click', function() {
-      document.getElementById('settings-modal')
-        .style.display = 'none';
-    });
-
-    document.getElementById('save-settings')
-      .addEventListener('click', function() {
-        huggingFaceToken = document.getElementById('huggingface-token')
-          .value;
-        selectedModel = document.getElementById('model-select')
-          .value;
-        systemPrompt = document.getElementById('system-prompt')
-          .value;
-        maxTokens = document.getElementById('max-tokens')
-          .value;
-        localStorage.setItem('huggingFaceToken', huggingFaceToken);
-        localStorage.setItem('selectedModel', selectedModel);
-        localStorage.setItem('systemPrompt', systemPrompt);
-        localStorage.setItem('maxTokens', maxTokens);
-        document.getElementById('settings-modal')
-          .style.display = 'none';
-        console.log("Settings saved. Token:", huggingFaceToken, "Model:", selectedModel, "System Prompt:", systemPrompt, "Max Tokens:", maxTokens);
-      });
-
-    document.getElementById('reset-settings-btn')
-      .addEventListener('click', function() {
-        selectedModel = "codellama/CodeLlama-34b-Instruct-hf";
-        systemPrompt = defaultSystemPrompt;
-        maxTokens = 1000;
-        document.getElementById('model-select')
-          .value = selectedModel;
-        document.getElementById('system-prompt')
-          .value = systemPrompt;
-        document.getElementById('max-tokens')
-          .value = maxTokens;
-        localStorage.setItem('selectedModel', selectedModel);
-        localStorage.setItem('systemPrompt', systemPrompt);
-        localStorage.setItem('maxTokens', maxTokens);
-        console.log("Settings reset to default. Model:", selectedModel, "System Prompt:", systemPrompt, "Max Tokens:", maxTokens);
-      });
-
-    document.getElementById('generate-btn')
-      .addEventListener('click', generateWebsite);
-
-    document.getElementById('prompt-input')
-      .addEventListener('keypress', function(event) {
-        if (event.key === 'Enter') {
-          generateWebsite();
-        }
-      });
-
-    document.getElementById('copy-btn')
-      .addEventListener('click', function() {
-        const originalResponse = document.getElementById('original-response')
-          .textContent;
-        navigator.clipboard.writeText(originalResponse)
-          .then(function() {
-            alert('Original response copied to clipboard!');
-          }, function(err) {
-            console.error('Could not copy text: ', err);
-          });
-      });
-
-    function generateWebsite() {
-      currentPrompt = document.getElementById('prompt-input')
-        .value;
-      if (currentPrompt) {
-        generateWebsiteFromAPI(currentPrompt);
-      }
-    }
-
-    async function generateWebsiteFromAPI(prompt) {
-      if (!huggingFaceToken) {
-        alert("Please set your Hugging Face token in the settings.");
-        return;
-      }
-
-      const apiUrl = 'https://api-inference.huggingface.co/models/' + selectedModel + '/v1/chat/completions';
-
-      let messages = [{
-          "role": "system",
-          "content": systemPrompt
-        },
-        {
-          "role": "user",
-          "content": "Generate a website based on this description: " + prompt
-        }
-      ];
-
-      document.getElementById('loading')
-        .style.display = 'block';
-
-      try {
-        const response = await fetch(apiUrl, {
-          method: 'POST',
-          headers: {
-            'Authorization': 'Bearer ' + huggingFaceToken,
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            model: selectedModel,
-            messages: messages,
-            max_tokens: parseInt(maxTokens),
-            stream: false
-          })
-        });
-
-        document.getElementById('loading')
-          .style.display = 'none';
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-        currentCode = data.choices[0].message.content;
-
-        const resultDiv = document.getElementById('result');
-        resultDiv.innerHTML = '';
-
-        const sandbox = document.createElement('iframe');
-        sandbox.style.width = '100%';
-        sandbox.style.height = '500px';
-        sandbox.style.border = 'none';
-        resultDiv.appendChild(sandbox);
-
-        const sandboxContent = sandbox.contentDocument || sandbox.contentWindow.document;
-        sandboxContent.open();
-        sandboxContent.write(currentCode);
-        sandboxContent.close();
-
-        document.getElementById('original-response')
-          .textContent = currentCode;
-        document.getElementById('copy-btn')
-          .style.display = 'block';
-
-      } catch (error) {
-        document.getElementById('loading')
-          .style.display = 'none';
-        console.error('There was a problem with the fetch operation:', error);
-        document.getElementById('result')
-          .innerHTML = `<p>An error occurred while generating the website: ${error.message}</p>`;
-      }
-    }
-  </script>
-
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Saint Michael Eritrean Orthodox Tewahdo Church WA</title>
+<link rel="stylesheet" href="styles.css">
+
+</head>
+<body>
+  <header>
+    <h1>Saint Michael Eritrean Orthodox Tewahdo Church WA</h1>
+    <p>Marangaroo, Western Australia</p>
+  </header>
+
+<nav>
+  <a href="#" onclick="showPage"(bahre-hasab)></a>
+<a href="#" onclick="showPage('home')">Home</a>
+<a href="#" onclick="showPage('about')">About</a>
+<a href="#" onclick="showPage('services')">Services</a>
+<a href="#" onclick="showPage('contact')">Contact</a>
+<a href="bhr.html" onclick="showPage('bahre-hasab')">Calendar</a>
+<a href="#" onclick="showPage('books')">Books</a>
+<a href="admin/admin.html" >admin</a>
+</nav>
+
+  <main>
+    <section id="home" class="active">
+      <h2>Welcome</h2>
+      <p>Welcome to Saint Michael Eritrean Orthodox Tewahdo Church in Western Australia. We are a spiritual home for Eritrean Orthodox believers in Perth and beyond.</p>
+    </section>
+
+    <section id="about">
+      <h2>About Us</h2>
+      <p>Established in 2015, our church serves the Eritrean Orthodox Tewahdo community in WA. We are dedicated to faith, worship, and community support.</p>
+    </section>
+
+    <section id="services">
+      <h2>Services</h2>
+      <ul>
+        <li>Sunday Worship Services</li>
+        <li>Baptisms</li>
+        <li>Sunday School for children</li>
+        <li>Youth & Family Programs</li>
+      </ul>
+    </section>
+
+    <section id="contact">
+      <h2>Contact Us</h2>
+      <p><strong>Address:</strong> 18 Pleasant Mews, Marangaroo, WA 6064</p>
+      <p><strong>Email:</strong> stmichael.eri.orthodox@gmail.com</p>
+      <p><strong>Phone:</strong> 0478 138 494</p>
+      <div style="margin-top:1rem;">
+        <iframe src="https://www.google.com/maps?q=18+Pleasant+Mews,+Marangaroo,+WA+6064&output=embed" width="100%" height="250" style="border:0;"></iframe>
+      </div>
+    </section>
+
+    <section id="bahre-hasab">
+ <div class="wrap">
+    <h1>Eritrean Feast Calculator</h1>
+    <p class="sub">Enter Eritrean year and calculate all movable feast dates automatically. Optional: supply Nenewie Gregorian base date if you want Gregorian mapping.</p>
+
+    <div class="card">
+      <label for="year">Eritrean Year</label>
+      <input id="year" type="number" value="2017" />
+      <button id="calc" style="margin-top:14px">Calculate</button>
+      <button id="printBtn">Print / Export PDF</button>
+
+    </div>
+
+    <div class="card">
+      <h3>Core Results</h3>
+      <table><tbody id="coreBody"></tbody></table>
+      <div class="note">Mebaja Hamer is computed for <b>all weekdays</b> automatically.</div>
+    </div>
+
+    <div class="card">
+      <h3>Mebaja Hamer by Weekday</h3>
+      <table>
+        <thead><tr><th>Weekday</th><th>Assigned Value</th><th>Mebaja</th></tr></thead>
+        <tbody id="weekdayBody"></tbody>
+      </table>
+    </div>
+
+    <div class="card">
+      <h3>Feast Dates (Eritrean Calendar)</h3>
+      <table>
+        <thead><tr><th>#</th><th>Feast</th><th>Offset (days)</th><th>Eritrean Date</th><th>Gregorian (optional)</th></tr></thead>
+        <tbody id="feastBody"></tbody>
+      </table>
+      <div class="note">Months assumed 30 days; Pagumien length is auto-detected (5, 6, or 7 days based on year rule).</div>
+    </div>
+
+    <div class="card">
+      <h3>Step-by-Step Calculation</h3>
+      <ol id="steps"></ol>
+    </div>
+  </div>
+  <h3>Add Fixed Holiday</h3>
+<input type="text" id="holidayName" placeholder="Holiday Name">
+<select id="holidayMonth"></select>
+<input type="number" id="holidayDay" placeholder="Day" min="1" max="30">
+<button id="addHoliday">Add Holiday</button>
+
+<h3>Fixed Holidays</h3>
+<table>
+  <thead>
+    <tr><th>#</th><th>Holiday Name</th><th>Eritrean Date</th><th>Gregorian Date</th></tr>
+  </thead>
+  <tbody id="fixedHolidayBody"></tbody>
+</table>
+
+    </section>
+
+<section id="books">
+  <h2>Church Books</h2>
+  
+  <!-- Container for book categories -->
+  <div id="book-categories"></div>
+  
+  <!-- Container for selected book list (e.g. list of liturgies) -->
+  <div id="book-list" style="margin-top: 1rem;"></div>
+  
+  <!-- Container for the detailed content of one book -->
+  <div id="book-content" style="margin-top: 1rem;"></div>
+</section>
+
+
+<div class="verse">
+  <div class="role"></div>
+  <div class="lang en"></div>
+  <div class="lang geez"></div>
+  <div class="lang ti"></div>
+</div>
+
+  </main>
+
+  <footer>
+    <p>&copy; 2025 Saint Michael Eritrean Orthodox Tewahdo Church WA</p>
+  </footer>
+  <script src="data/books.js"></script>
+<script src="data/liturgy/liturgy.js"></script>
+<script>
+  loadBooksIndex(); // bootstrap
+</script>
+
+<script src="script.js"></script>
+  <script>
+function showPage(pageId) {
+  document.querySelectorAll('section').forEach(section =>
+    section.classList.remove('active')
+  );
+  document.getElementById(pageId).classList.add('active');
+  
+  document.querySelectorAll('nav a').forEach(a =>
+    a.classList.remove('active-link')
+  );
+  document.querySelector(`nav a[onclick*="${pageId}"]`).classList.add('active-link');
+  
+  localStorage.setItem('lastPage', pageId);
+}
+
+window.addEventListener('load', () => {
+  const last = localStorage.getItem('lastPage') || 'home';
+  showPage(last);
+});
+
+  </script>
+</body>
+</html>

inventory.js

@@ -0,0 +1,158 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const tbody = document.getElementById('inventoryBody');
+  const modal = document.getElementById('inventoryModal');
+  const form = document.getElementById('actionForm');
+
+  // Buttons
+  const editBtn = document.getElementById('editBtn');
+  const saveBtn = document.getElementById('saveBtn');
+  const cancelBtn = document.getElementById('cancelBtn');
+  const deleteBtn = document.getElementById('deleteBtn');
+  const sellBtn = document.getElementById('sellBtn');
+  const useBtn = document.getElementById('useBtn');
+
+  let currentId = null;
+
+  async function loadInventory() {
+    const res = await fetch('/api/inventory');
+    const items = await res.json();
+    tbody.innerHTML = items.map(item => `
+      <tr data-id="${item.id}">
+        <td>${item.id}</td>
+        <td>${item.name}</td>
+        <td>${item.type}</td>
+        <td>${item.color}</td>
+        <td>${item.quantity}</td>
+        <td>${item.price}</td>
+        <td>${item.note || ''}</td>
+        <td><button class="action-btn">Action</button></td>
+      </tr>
+    `).join('');
+
+    document.querySelectorAll('.action-btn').forEach(btn => {
+      btn.onclick = openModal;
+    });
+  }
+
+  function openModal(e) {
+    const row = e.target.closest('tr');
+    currentId = row.dataset.id;
+
+    // Fill form values
+    form.id.value = currentId;
+    form.name.value = row.children[1].textContent;
+    form.type.value = row.children[2].textContent;
+    form.color.value = row.children[3].textContent;
+    form.quantity.value = row.children[4].textContent;
+    form.price.value = row.children[5].textContent;
+    form.note.value = row.children[6].textContent;
+
+    setFormDisabled(true);
+    saveBtn.style.display = 'none';
+    modal.style.display = 'block';
+  }
+
+  function setFormDisabled(disabled) {
+    form.name.disabled = disabled;
+    form.type.disabled = disabled;
+    form.color.disabled = disabled;
+    form.quantity.disabled = disabled;
+    form.price.disabled = disabled;
+    form.note.disabled = disabled;
+  }
+
+  // Cancel closes modal
+  cancelBtn.onclick = () => {
+    modal.style.display = 'none';
+    setFormDisabled(true);
+    saveBtn.style.display = 'none';
+  };
+
+  // Edit button - enables fields
+  editBtn.onclick = () => {
+    setFormDisabled(false);
+    saveBtn.style.display = 'inline-block';
+  };
+
+  // Save edited item
+  form.onsubmit = async (e) => {
+    e.preventDefault();
+
+    const updated = {
+      name: form.name.value,
+      type: form.type.value,
+      color: form.color.value,
+      quantity: parseInt(form.quantity.value),
+      price: parseFloat(form.price.value),
+      note: form.note.value
+    };
+
+    const res = await fetch(`/api/inventory/${currentId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updated)
+    });
+
+    if (res.ok) {
+      modal.style.display = 'none';
+      await loadInventory();
+    } else {
+      alert('Failed to update.');
+    }
+  };
+
+  // Delete
+  deleteBtn.onclick = async () => {
+    if (!confirm('Delete this item?')) return;
+    const res = await fetch(`/api/inventory/${currentId}`, { method: 'DELETE' });
+    if (res.ok) {
+      modal.style.display = 'none';
+      await loadInventory();
+    } else {
+      alert('Delete failed.');
+    }
+  };
+
+  // Sell
+  sellBtn.onclick = async () => {
+    const qty = prompt("Quantity to sell:", 1);
+    const quantity = parseInt(qty, 10);
+    if (!qty || isNaN(quantity) || quantity <= 0) return alert('Invalid quantity');
+
+    const res = await fetch(`/api/inventory/${currentId}/sell`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ quantity, payerType: "non-member" })
+    });
+
+    if (res.ok) {
+      modal.style.display = 'none';
+      await loadInventory();
+    } else {
+      alert('Sell failed.');
+    }
+  };
+
+  // Use
+  useBtn.onclick = async () => {
+    const qty = prompt("Quantity to use:", 1);
+    const quantity = parseInt(qty, 10);
+    if (!qty || isNaN(quantity) || quantity <= 0) return alert('Invalid quantity');
+
+    const res = await fetch(`/api/inventory/${currentId}/use`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ quantity })
+    });
+
+    if (res.ok) {
+      modal.style.display = 'none';
+      await loadInventory();
+    } else {
+      alert('Use failed.');
+    }
+  };
+
+  // Initial load
+  loadInventory();
+});

styles.css

@@ -0,0 +1,129 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background: #fdfdfd;
+    color: #333;
+  }
+  header {
+    background: #800000;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+  }
+  nav {
+    display: flex;
+    justify-content: center;
+    background: #333;
+  }
+  nav a {
+    color: white;
+    padding: 1rem;
+    text-decoration: none;
+  }
+  nav a:hover {
+    background: #555;
+  }
+  section {
+    padding: 2rem;
+    display: none;
+  }
+  section.active {
+    display: block;
+  }
+  footer {
+    text-align: center;
+    padding: 1rem;
+    background: #800000;
+    color: white;
+  }
+
+
+
+
+*{box-sizing:border-box}
+body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; background:var(--bg); color:var(--text)}
+.wrap{max-width:1100px;margin:32px auto;padding:0 16px}
+h1{font-size:clamp(24px,2.5vw,34px);margin:0 0 8px}
+p.sub{opacity:.8;margin:.25rem 0 1.25rem}
+.card{background:var(--card);border-radius:16px;padding:16px;margin-bottom:20px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
+label{display:block;font-size:14px;margin-bottom:6px}
+input,button{width:100%;padding:10px;border-radius:12px;border:1px solid #374151;background:#eceef0;color:var(--text)}
+button{cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1220;font-weight:700;border:none;box-shadow:0 8px 18px rgba(99,102,241,.25)}
+button:hover{filter:brightness(1.05)}
+table{width:100%;border-collapse:collapse;margin-top:10px}
+th,td{padding:8px;border:1px solid #2a3343;text-align:left}
+.note{font-size:12px;opacity:.7}
+ol{padding-left:18px}
+li{margin-bottom:6px}
+
+
+.books-table {
+width: 100%;
+border-collapse: collapse;
+margin: 1rem auto;
+}
+
+.books-table th, .books-table td {
+border: 1px solid #ccc;
+padding: 0.75rem;
+text-align: center;
+}
+
+.books-table th {
+background: #800000;
+color: white;
+}
+#booksList {
+text-align: center;
+}
+
+.book-category,
+.book-child,
+.chapter-btn {
+display: inline-block;
+margin: 0.25rem;
+padding: 0.5rem 1rem;
+background: #800000;
+color: white;
+border: none;
+border-radius: 6px;
+cursor: pointer;
+}
+
+.book-category:hover,
+.book-child:hover,
+.chapter-btn:hover {
+background: #a00000;
+}
+
+
+
+/* Liturgy Verse Layout */
+.verse {
+display: grid;
+grid-template-columns: repeat(3, 1fr); /* just 3 equal columns */
+gap: 8px;
+padding: 4px 0;
+border-bottom: 1px solid #ddd; /* optional subtle divider */
+}
+
+.verse:last-child {
+border-bottom: none;
+}
+
+.lang {
+font-size: 1rem;
+line-height: 1.4;
+}
+
+.lang.en,
+.lang.geez,
+.lang.ti {
+white-space: pre-wrap; /* keep line breaks if any */
+}
+
+/* Role label inside text */
+.role-label {
+font-weight: bold;
+margin-right: 4px;
+}