diff --git a/assets/css/custom.css b/assets/css/custom.css
index 50e0502..d67c9f5 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,302 +1,146 @@
+:root {
+ --primary: #0f172a;
+ --primary-light: #1e293b;
+ --accent: #2563eb;
+ --accent-hover: #1d4ed8;
+ --bg-main: #f8fafc;
+ --surface: #ffffff;
+ --border: #e2e8f0;
+ --text-main: #0f172a;
+ --text-muted: #64748b;
+ --success: #10b981;
+ --error: #ef4444;
+}
+
body {
- background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
- background-size: 400% 400%;
- animation: gradient 15s ease infinite;
- color: #212529;
+ background-color: var(--bg-main);
+ color: var(--text-main);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
- font-size: 14px;
- margin: 0;
- min-height: 100vh;
-}
-
-.main-wrapper {
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- width: 100%;
- padding: 20px;
- box-sizing: border-box;
- position: relative;
- z-index: 1;
-}
-
-@keyframes gradient {
- 0% {
- background-position: 0% 50%;
- }
- 50% {
- background-position: 100% 50%;
- }
- 100% {
- background-position: 0% 50%;
- }
-}
-
-.chat-container {
- width: 100%;
- max-width: 600px;
- background: rgba(255, 255, 255, 0.85);
- border: 1px solid rgba(255, 255, 255, 0.3);
- border-radius: 20px;
- display: flex;
- flex-direction: column;
- height: 85vh;
- box-shadow: 0 20px 40px rgba(0,0,0,0.2);
- backdrop-filter: blur(15px);
- -webkit-backdrop-filter: blur(15px);
- overflow: hidden;
-}
-
-.chat-header {
- padding: 1.5rem;
- border-bottom: 1px solid rgba(0, 0, 0, 0.05);
- background: rgba(255, 255, 255, 0.5);
- font-weight: 700;
- font-size: 1.1rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.chat-messages {
- flex: 1;
- overflow-y: auto;
- padding: 1.5rem;
- display: flex;
- flex-direction: column;
- gap: 1.25rem;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
- width: 6px;
-}
-
-::-webkit-scrollbar-track {
- background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.3);
- border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: rgba(255, 255, 255, 0.5);
-}
-
-.message {
- max-width: 85%;
- padding: 0.85rem 1.1rem;
- border-radius: 16px;
+ font-size: 0.875rem;
line-height: 1.5;
- font-size: 0.95rem;
- box-shadow: 0 4px 15px rgba(0,0,0,0.05);
- animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ margin: 0;
}
-@keyframes fadeIn {
- from { opacity: 0; transform: translateY(20px) scale(0.95); }
- to { opacity: 1; transform: translateY(0) scale(1); }
+.navbar {
+ background-color: var(--primary);
+ border-bottom: 1px solid var(--border);
+ padding: 0.75rem 1.5rem;
}
-.message.visitor {
- align-self: flex-end;
- background: linear-gradient(135deg, #212529 0%, #343a40 100%);
- color: #fff;
- border-bottom-right-radius: 4px;
+.navbar-brand {
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ color: white !important;
}
-.message.bot {
- align-self: flex-start;
- background: #ffffff;
- color: #212529;
- border-bottom-left-radius: 4px;
+.nav-link {
+ color: #cbd5e1 !important;
+ font-weight: 500;
}
-.chat-input-area {
- padding: 1.25rem;
- background: rgba(255, 255, 255, 0.5);
- border-top: 1px solid rgba(0, 0, 0, 0.05);
+.nav-link.active {
+ color: white !important;
}
-.chat-input-area form {
+.sidebar {
+ background-color: var(--surface);
+ border-right: 1px solid var(--border);
+ height: calc(100vh - 56px);
+ position: sticky;
+ top: 56px;
+ padding: 1.5rem 0;
+}
+
+.sidebar .nav-link {
+ color: var(--text-muted) !important;
+ padding: 0.5rem 1.5rem;
display: flex;
+ align-items: center;
gap: 0.75rem;
}
-.chat-input-area input {
- flex: 1;
- border: 1px solid rgba(0, 0, 0, 0.1);
- border-radius: 12px;
- padding: 0.75rem 1rem;
- outline: none;
- background: rgba(255, 255, 255, 0.9);
- transition: all 0.3s ease;
+.sidebar .nav-link:hover, .sidebar .nav-link.active {
+ background-color: var(--bg-main);
+ color: var(--accent) !important;
}
-.chat-input-area input:focus {
- border-color: #23a6d5;
- box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
+.main-content {
+ padding: 2rem;
}
-.chat-input-area button {
- background: #212529;
- color: #fff;
- border: none;
- padding: 0.75rem 1.5rem;
- border-radius: 12px;
- cursor: pointer;
+.card {
+ background-color: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.card-header {
+ background-color: transparent;
+ border-bottom: 1px solid var(--border);
+ padding: 1rem 1.25rem;
font-weight: 600;
- transition: all 0.3s ease;
}
-.chat-input-area button:hover {
- background: #000;
- transform: translateY(-2px);
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-}
-
-/* Background Animations */
-.bg-animations {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 0;
- overflow: hidden;
- pointer-events: none;
-}
-
-.blob {
- position: absolute;
- width: 500px;
- height: 500px;
- background: rgba(255, 255, 255, 0.2);
- border-radius: 50%;
- filter: blur(80px);
- animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
-}
-
-.blob-1 {
- top: -10%;
- left: -10%;
- background: rgba(238, 119, 82, 0.4);
-}
-
-.blob-2 {
- bottom: -10%;
- right: -10%;
- background: rgba(35, 166, 213, 0.4);
- animation-delay: -7s;
- width: 600px;
- height: 600px;
-}
-
-.blob-3 {
- top: 40%;
- left: 30%;
- background: rgba(231, 60, 126, 0.3);
- animation-delay: -14s;
- width: 450px;
- height: 450px;
-}
-
-@keyframes move {
- 0% { transform: translate(0, 0) rotate(0deg) scale(1); }
- 33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
- 66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
- 100% { transform: translate(0, 0) rotate(360deg) scale(1); }
-}
-
-.admin-link {
- font-size: 14px;
- color: #fff;
- text-decoration: none;
- background: rgba(0, 0, 0, 0.2);
+.btn-primary {
+ background-color: var(--accent);
+ border-color: var(--accent);
+ font-weight: 500;
+ border-radius: 4px;
padding: 0.5rem 1rem;
- border-radius: 8px;
- transition: all 0.3s ease;
}
-.admin-link:hover {
- background: rgba(0, 0, 0, 0.4);
- text-decoration: none;
+.btn-primary:hover {
+ background-color: var(--accent-hover);
+ border-color: var(--accent-hover);
}
-/* Admin Styles */
-.admin-container {
- max-width: 900px;
- margin: 3rem auto;
- padding: 2.5rem;
- background: rgba(255, 255, 255, 0.85);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border-radius: 24px;
- box-shadow: 0 20px 50px rgba(0,0,0,0.15);
- border: 1px solid rgba(255, 255, 255, 0.4);
- position: relative;
- z-index: 1;
-}
-
-.admin-container h1 {
- margin-top: 0;
- color: #212529;
- font-weight: 800;
-}
-
-.table {
- width: 100%;
- border-collapse: separate;
- border-spacing: 0 8px;
- margin-top: 1.5rem;
-}
-
-.table th {
- background: transparent;
- border: none;
- padding: 1rem;
- color: #6c757d;
- font-weight: 600;
+.table thead th {
+ background-color: var(--bg-main);
text-transform: uppercase;
font-size: 0.75rem;
- letter-spacing: 1px;
-}
-
-.table td {
- background: #fff;
- padding: 1rem;
- border: none;
-}
-
-.table tr td:first-child { border-radius: 12px 0 0 12px; }
-.table tr td:last-child { border-radius: 0 12px 12px 0; }
-
-.form-group {
- margin-bottom: 1.25rem;
-}
-
-.form-group label {
- display: block;
- margin-bottom: 0.5rem;
+ letter-spacing: 0.05em;
font-weight: 600;
- font-size: 0.9rem;
+ color: var(--text-muted);
+ border-bottom: 1px solid var(--border);
+ padding: 0.75rem 1rem;
}
-.form-control {
- width: 100%;
+.table tbody td {
padding: 0.75rem 1rem;
- border: 1px solid rgba(0, 0, 0, 0.1);
- border-radius: 12px;
- background: #fff;
- transition: all 0.3s ease;
- box-sizing: border-box;
+ vertical-align: middle;
+ border-bottom: 1px solid var(--border);
+}
+
+.stat-card {
+ padding: 1.25rem;
+}
+
+.stat-value {
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin-bottom: 0.25rem;
+}
+
+.stat-label {
+ color: var(--text-muted);
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ font-weight: 600;
+}
+
+.badge-active {
+ background-color: #dcfce7;
+ color: #166534;
+}
+
+.form-control, .form-select {
+ border-radius: 4px;
+ border: 1px solid var(--border);
+ padding: 0.5rem 0.75rem;
}
.form-control:focus {
- outline: none;
- border-color: #23a6d5;
- box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
-}
\ No newline at end of file
+ border-color: var(--accent);
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index d349598..54e4072 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,39 +1,38 @@
-document.addEventListener('DOMContentLoaded', () => {
- const chatForm = document.getElementById('chat-form');
- const chatInput = document.getElementById('chat-input');
- const chatMessages = document.getElementById('chat-messages');
-
- const appendMessage = (text, sender) => {
- const msgDiv = document.createElement('div');
- msgDiv.classList.add('message', sender);
- msgDiv.textContent = text;
- chatMessages.appendChild(msgDiv);
- chatMessages.scrollTop = chatMessages.scrollHeight;
- };
-
- chatForm.addEventListener('submit', async (e) => {
- e.preventDefault();
- const message = chatInput.value.trim();
- if (!message) return;
-
- appendMessage(message, 'visitor');
- chatInput.value = '';
-
- try {
- const response = await fetch('api/chat.php', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ message })
- });
- const data = await response.json();
-
- // Artificial delay for realism
- setTimeout(() => {
- appendMessage(data.reply, 'bot');
- }, 500);
- } catch (error) {
- console.error('Error:', error);
- appendMessage("Sorry, something went wrong. Please try again.", 'bot');
- }
+document.addEventListener('DOMContentLoaded', function() {
+ // Auto-dismiss alerts after 5 seconds
+ const alerts = document.querySelectorAll('.alert-dismissible');
+ alerts.forEach(alert => {
+ setTimeout(() => {
+ const bsAlert = new bootstrap.Alert(alert);
+ bsAlert.close();
+ }, 5000);
});
-});
+
+ // Simple search filter for members table
+ const searchInput = document.querySelector('input[placeholder="Search members..."]');
+ if (searchInput) {
+ searchInput.addEventListener('input', function() {
+ const query = this.value.toLowerCase();
+ const rows = document.querySelectorAll('tbody tr');
+
+ rows.forEach(row => {
+ const text = row.textContent.toLowerCase();
+ if (text.includes(query)) {
+ row.style.display = '';
+ } else {
+ row.style.display = 'none';
+ }
+ });
+ });
+ }
+
+ // Confirmation for delete actions
+ const deleteButtons = document.querySelectorAll('.bi-trash');
+ deleteButtons.forEach(btn => {
+ btn.closest('button').addEventListener('click', function(e) {
+ if (!confirm('Are you sure you want to delete this record? This action cannot be undone.')) {
+ e.preventDefault();
+ }
+ });
+ });
+});
\ No newline at end of file
diff --git a/index.php b/index.php
index 7205f3d..532dd15 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,135 @@
query('SELECT COUNT(*) FROM members')->fetchColumn();
+$activeLoans = 0; // Placeholder
+$totalDeposits = 0; // Placeholder
+$dailyTransactions = 0; // Placeholder
+
+render_header('Dashboard - MicroFinance Pro');
?>
-
-
-
-
-
- New Style
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Analyzing your requirements and generating your website…
-
- Loading…
-
-
= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.
-
This page will update automatically as the plan is implemented.
-
Runtime: PHP = htmlspecialchars($phpVersion) ?> — UTC = htmlspecialchars($now) ?>
+
+
+
Branch Manager Dashboard - Demo SACCO
+
-
-
-
-
+
+
+
+
+
+
Total Members
+
= number_format($memberCount) ?>
+
12% increase
+
+
+
+
+
Active Loans
+
= number_format($activeLoans) ?>
+
0 this month
+
+
+
+
+
Total Deposits
+
KES = number_format($totalDeposits, 2) ?>
+
5% growth
+
+
+
+
+
Daily Transactions
+
= number_format($dailyTransactions) ?>
+
Updated just now
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | # |
+ Name |
+ Member No. |
+ Joined |
+ Status |
+
+
+
+ query('SELECT * FROM members ORDER BY created_at DESC LIMIT 5')->fetchAll();
+ if (empty($recentMembers)):
+ ?>
+
+ | No members registered yet. |
+
+
+
+ | = htmlspecialchars($m['id']) ?> |
+ = htmlspecialchars($m['first_name'] . ' ' . $m['last_name']) ?> |
+ = htmlspecialchars($m['member_number']) ?> |
+ = date('Y-m-d', strtotime($m['created_at'])) ?> |
+ Active |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Your next monthly SASRA report is due in 12 days. Ensure all reconciliations are complete.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/layout.php b/layout.php
new file mode 100644
index 0000000..20d13fc
--- /dev/null
+++ b/layout.php
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
= htmlspecialchars($title) ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ prepare('INSERT INTO members (tenant_id, member_number, first_name, last_name, email, phone) VALUES (?, ?, ?, ?, ?, ?)');
+ $stmt->execute([$tenant_id, $member_number, $first_name, $last_name, $email, $phone]);
+ $message = 'Member registered successfully!';
+ $action = 'list';
+ } catch (PDOException $e) {
+ if ($e->getCode() == 23000) {
+ $error = 'Member number already exists.';
+ } else {
+ $error = 'An error occurred: ' . $e->getMessage();
+ }
+ }
+ }
+}
+
+render_header('Members - MicroFinance Pro');
+?>
+
+
+
+
+
+ = htmlspecialchars($message) ?>
+
+
+
+
+
+
+ = htmlspecialchars($error) ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | # |
+ Name |
+ Member No. |
+ Phone |
+ Email |
+ Status |
+ Actions |
+
+
+
+ query('SELECT * FROM members WHERE tenant_id = 1 ORDER BY created_at DESC')->fetchAll();
+ if (empty($members)):
+ ?>
+
+ |
+
+ No members found in the database.
+ Add First Member
+ |
+
+
+
+ | = htmlspecialchars($m['id']) ?> |
+ = htmlspecialchars($m['first_name'] . ' ' . $m['last_name']) ?> |
+ = htmlspecialchars($m['member_number']) ?> |
+ = htmlspecialchars($m['phone'] ?: '-') ?> |
+ = htmlspecialchars($m['email'] ?: '-') ?> |
+ Active |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+