|
|
<!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>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="memberModal" class="modal hidden">
|
|
|
<div class="modal-content">
|
|
|
<span id="closeModalBtn" class="close">×</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>
|
|
|
|
|
|
|
|
|
|
|
|
<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/>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<script src="admin.js"></script>
|
|
|
<script src="chart.js"></script>
|
|
|
<script src="accounting.js"></script>
|
|
|
<script src="inventory.js"></script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
