Hugging Face's logo

Spaces:
MorleyMujansi
/
advisormatch-connect-pro
Running

App Files Community
MorleyMujansi commited on
Commit
0dadafa
·
verified ·
1 Parent(s): 5fa2ff4

So there is this part were external users interact with the tool which the prototype has clearly demonstrated. There is also an admin part that should be added. The admin and registered member portal should be added to track how many members the system has, the matching process, and all other services being offered including summary information on a dashboard for easy decision making. plus the member portal where members can track the services they are receiving and the likes

Browse files
Files changed (6) hide show
  1. admin-login.html +74 -0
  2. components/footer.js +1 -1
  3. components/navbar.js +1 -1
  4. index.html +9 -9
  5. member-dashboard.html +157 -0
  6. script.js +87 -0
admin-login.html ADDED
@@ -0,0 +1,74 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Admin Login | Lumikiza</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="py-12">
16
+ <section class="container mx-auto px-4 max-w-md">
17
+ <div class="bg-white rounded-xl shadow-sm p-8 md:p-10">
18
+ <div class="text-center mb-8">
19
+ <img src="https://huggingface.co/spaces/MorleyMujansi/advisormatch-connect-pro/resolve/main/images/WhatsApp Image 2025-11-03 at 17.01.21.jpeg" alt="Lumikiza Logo" style="height: 40px; margin-bottom: 1rem;">
20
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">Admin Login</h1>
21
+ <p class="text-gray-600">Access the administration dashboard</p>
22
+ </div>
23
+
24
+ <form id="adminLoginForm" class="space-y-6">
25
+ <div>
26
+ <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
27
+ <input type="text" id="username" name="username" required
28
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
29
+ </div>
30
+ <div>
31
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
32
+ <input type="password" id="password" name="password" required
33
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
34
+ </div>
35
+
36
+ <button type="submit" class="w-full bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition">
37
+ Login to Admin Dashboard
38
+ </button>
39
+ </form>
40
+ </div>
41
+ </section>
42
+ </main>
43
+
44
+ <custom-footer></custom-footer>
45
+ <script src="components/navbar.js"></script>
46
+ <script src="components/footer.js"></script>
47
+ <script src="components/notification-bell.js"></script>
48
+ <script src="script.js"></script>
49
+ <script>
50
+ feather.replace();
51
+
52
+ document.getElementById('adminLoginForm').addEventListener('submit', function(e) {
53
+ e.preventDefault();
54
+
55
+ const username = document.getElementById('username').value;
56
+ const password = document.getElementById('password').value;
57
+
58
+ if (authenticateAdmin(username, password)) {
59
+ // Show loading state
60
+ const submitBtn = e.target.querySelector('button[type="submit"]');
61
+ submitBtn.disabled = true;
62
+ submitBtn.innerHTML = `<span class="animate-spin inline-block mr-2"><i data-feather="loader"></i></span> Authenticating...`;
63
+ feather.replace();
64
+
65
+ setTimeout(() => {
66
+ window.location.href = '/admin-dashboard.html';
67
+ }, 1000);
68
+ } else {
69
+ alert('Invalid admin credentials. Please try again.');
70
+ }
71
+ });
72
+ </script>
73
+ </body>
74
+ </html>
components/footer.js CHANGED
@@ -117,7 +117,7 @@ class CustomFooter extends HTMLElement {
117
  <li><a href="/contact.html">Contact</a></li>
118
  <li><a href="/privacy.html">Privacy Policy</a></li>
119
  <li><a href="/terms.html">Terms of Service</a></li>
120
- <li><a href="/admin-dashboard.html">Admin Portal</a></li>
121
  </ul>
122
  </div>
123
  </div>
 
117
  <li><a href="/contact.html">Contact</a></li>
118
  <li><a href="/privacy.html">Privacy Policy</a></li>
119
  <li><a href="/terms.html">Terms of Service</a></li>
120
+ <li><a href="/admin-login.html">Admin Portal</a></li>
121
  </ul>
122
  </div>
123
  </div>
components/navbar.js CHANGED
@@ -98,7 +98,7 @@ class CustomNavbar extends HTMLElement {
98
  </li>
99
  <li><a href="/matches.html"><i data-feather="users"></i> Matches</a></li>
100
  <li>
101
- <a href="/admin-dashboard.html" class="bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition"><i data-feather="shield"></i> Admin</a>
102
  <a href="/register-founder.html" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition"><i data-feather="user-plus"></i> Register</a>
103
  </li>
104
  </ul>
 
98
  </li>
99
  <li><a href="/matches.html"><i data-feather="users"></i> Matches</a></li>
100
  <li>
101
+ <a href="/admin-login.html" class="bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition"><i data-feather="shield"></i> Admin</a>
102
  <a href="/register-founder.html" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition"><i data-feather="user-plus"></i> Register</a>
103
  </li>
104
  </ul>
index.html CHANGED
@@ -22,15 +22,15 @@
22
  <h1 class="text-5xl font-bold text-white mb-6">Connecting Zambian Entrepreneurs with Expert Advisors</h1>
23
  <p class="text-xl text-white opacity-90 mb-8">Intelligent matching for meaningful business growth</p>
24
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
25
- <a href="/register-founder.html" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition">
26
- I'm a Founder
27
- </a>
28
- <a href="/register-advisor.html" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition">
29
- I'm an Advisor
30
- </a>
31
- <a href="/admin-dashboard.html" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition">
32
- Admin Access
33
- </a>
34
  </div>
35
  </div>
36
  </div>
 
22
  <h1 class="text-5xl font-bold text-white mb-6">Connecting Zambian Entrepreneurs with Expert Advisors</h1>
23
  <p class="text-xl text-white opacity-90 mb-8">Intelligent matching for meaningful business growth</p>
24
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
25
+ <a href="/register-founder.html" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition">
26
+ I'm a Founder
27
+ </a>
28
+ <a href="/register-advisor.html" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition">
29
+ I'm an Advisor
30
+ </a>
31
+ <a href="/admin-login.html" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition">
32
+ Admin Access
33
+ </a>
34
  </div>
35
  </div>
36
  </div>
member-dashboard.html ADDED
@@ -0,0 +1,157 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Member Dashboard | Lumikiza</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="py-12">
16
+ <div class="container mx-auto px-4">
17
+ <div class="flex flex-col md:flex-row gap-8">
18
+ <!-- Sidebar -->
19
+ <aside class="w-full md:w-64 flex-shrink-0">
20
+ <div class="bg-white rounded-xl shadow-sm p-6 sticky top-6">
21
+ <div class="flex items-center space-x-4 mb-6">
22
+ <img src="http://static.photos/people/200x200/3" alt="User" class="w-12 h-12 rounded-full">
23
+ <div>
24
+ <h2 class="font-bold" id="memberUsername">Member</h2>
25
+ <p class="text-sm text-gray-500" id="memberRole">Role</p>
26
+ </div>
27
+ </div>
28
+ <nav class="space-y-2">
29
+ <a href="/member-dashboard.html" class="flex items-center space-x-2 text-blue-600 font-medium">
30
+ <i data-feather="home"></i>
31
+ <span>Dashboard</span>
32
+ </a>
33
+ <a href="/member-matches.html" class="flex items-center space-x-2 text-gray-600 hover:text-blue-600">
34
+ <i data-feather="users"></i>
35
+ <span>My Matches</span>
36
+ </a>
37
+ <a href="/member-messages.html" class="flex items-center space-x-2 text-gray-600 hover:text-blue-600">
38
+ <i data-feather="message-square"></i>
39
+ <span>Messages</span>
40
+ </a>
41
+ <a href="/member-services.html" class="flex items-center space-x-2 text-gray-600 hover:text-blue-600">
42
+ <i data-feather="activity"></i>
43
+ <span>Services</span>
44
+ </a>
45
+ <a href="/member-profile.html" class="flex items-center space-x-2 text-gray-600 hover:text-blue-600">
46
+ <i data-feather="user"></i>
47
+ <span>Profile</span>
48
+ </a>
49
+ <a href="/member-payments.html" class="flex items-center space-x-2 text-gray-600 hover:text-blue-600">
50
+ <i data-feather="credit-card"></i>
51
+ <span>Payments</span>
52
+ </a>
53
+ </nav>
54
+ </div>
55
+ </aside>
56
+
57
+ <!-- Main Content -->
58
+ <div class="flex-1">
59
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
60
+ <h1 class="text-2xl font-bold mb-6">Welcome to Your Member Dashboard</h1>
61
+
62
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
63
+ <div class="bg-blue-50 p-6 rounded-lg">
64
+ <div class="flex items-center justify-between">
65
+ <div>
66
+ <h3 class="text-sm font-medium text-blue-800">Active Matches</h3>
67
+ <p class="text-2xl font-bold mt-1">3</p>
68
+ </div>
69
+ <i data-feather="users" class="text-blue-600"></i>
70
+ </div>
71
+ </div>
72
+ <div class="bg-purple-50 p-6 rounded-lg">
73
+ <div class="flex items-center justify-between">
74
+ <div>
75
+ <h3 class="text-sm font-medium text-purple-800">Pending Requests</h3>
76
+ <p class="text-2xl font-bold mt-1">2</p>
77
+ </div>
78
+ <i data-feather="clock" class="text-purple-600"></i>
79
+ </div>
80
+ </div>
81
+ <div class="bg-green-50 p-6 rounded-lg">
82
+ <div class="flex items-center justify-between">
83
+ <div>
84
+ <h3 class="text-sm font-medium text-green-800">Unread Messages</h3>
85
+ <p class="text-2xl font-bold mt-1">5</p>
86
+ </div>
87
+ <i data-feather="message-square" class="text-green-600"></i>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Services Overview -->
93
+ <div class="mb-8">
94
+ <h2 class="text-xl font-semibold mb-4">My Services</h2>
95
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
96
+ <div class="bg-white border border-gray-200 rounded-lg p-6">
97
+ <h3 class="font-semibold text-lg mb-3">Current Services</h3>
98
+ <div class="space-y-4">
99
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
100
+ <div>
101
+ <p class="font-medium">Business Strategy Session</p>
102
+ <p class="text-sm text-gray-600">With Dr. James Mwansa</p>
103
+ </div>
104
+ <div class="text-sm text-gray-500">Next session: 2025-01-25</p>
105
+ </div>
106
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Active</span>
107
+ </div>
108
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
109
+ <div>
110
+ <p class="font-medium">Financial Advisory</p>
111
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">In Progress</span>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Recent Activity -->
116
+ <div>
117
+ <h2 class="text-xl font-semibold mb-4">Recent Activity</h2>
118
+ <div class="space-y-4">
119
+ <div class="flex items-start space-x-4 p-4 border border-gray-100 rounded-lg">
120
+ <div class="bg-blue-100 p-2 rounded-full">
121
+ <i data-feather="user-check" class="text-blue-600"></i>
122
+ </div>
123
+ <div>
124
+ <p class="font-medium">New match suggestion</p>
125
+ <p class="text-sm text-gray-600">Marketing expert matched with your business</p>
126
+ <p class="text-xs text-gray-500 mt-1">2 hours ago</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </main>
135
+
136
+ <custom-footer></custom-footer>
137
+ <script src="components/navbar.js"></script>
138
+ <script src="components/footer.js"></script>
139
+ <script src="components/notification-bell.js"></script>
140
+ <script src="script.js"></script>
141
+ <script>
142
+ feather.replace();
143
+
144
+ // Load member data from localStorage
145
+ document.addEventListener('DOMContentLoaded', function() {
146
+ const userData = JSON.parse(localStorage.getItem('currentUser'));
147
+ if (userData) {
148
+ document.getElementById('memberUsername').textContent = userData.fullName || 'Member';
149
+ const role = userData.businessName ? 'Founder' : 'Advisor';
150
+ document.getElementById('memberRole').textContent = role;
151
+ } else {
152
+ window.location.href = '/';
153
+ }
154
+ });
155
+ </script>
156
+ </body>
157
+ </html>
script.js CHANGED
@@ -164,6 +164,19 @@ document.addEventListener('DOMContentLoaded', function() {
164
  // Initialize notifications
165
  initNotifications();
166
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  // Animate elements on scroll
168
  const animateOnScroll = () => {
169
  const elements = document.querySelectorAll('.animate-on-scroll');
@@ -231,6 +244,17 @@ function handleFormSuccess(formType) {
231
  // Store registration data in localStorage
232
  const formData = new FormData(document.getElementById(formType === 'founder' ? 'founderForm' : 'advisorForm'));
233
  const userData = Object.fromEntries(formData.entries());
 
 
 
 
 
 
 
 
 
 
 
234
  localStorage.setItem('currentUser', JSON.stringify(userData));
235
 
236
  // Simulate payment processing
@@ -238,3 +262,66 @@ function handleFormSuccess(formType) {
238
  window.location.href = '/dashboard.html';
239
  }, 1500);
240
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  // Initialize notifications
165
  initNotifications();
166
 
167
+ // Initialize dashboard data if on dashboard pages
168
+ if (window.location.pathname === '/admin-dashboard.html') {
169
+ const stats = getDashboardStats();
170
+ // Update admin dashboard stats
171
+ const statElements = document.querySelectorAll('.stat-value');
172
+ if (statElements.length >= 4) {
173
+ statElements[0].textContent = stats.totalUsers;
174
+ statElements[1].textContent = stats.founders;
175
+ statElements[2].textContent = stats.advisors;
176
+ statElements[3].textContent = `${Math.round((stats.activeMatches / (stats.activeMatches + stats.pendingMatches)) * 100)}%`;
177
+ }
178
+ }
179
+
180
  // Animate elements on scroll
181
  const animateOnScroll = () => {
182
  const elements = document.querySelectorAll('.animate-on-scroll');
 
244
  // Store registration data in localStorage
245
  const formData = new FormData(document.getElementById(formType === 'founder' ? 'founderForm' : 'advisorForm'));
246
  const userData = Object.fromEntries(formData.entries());
247
+
248
+ // Generate unique ID and add role
249
+ userData.id = Date.now();
250
+ userData.role = formType;
251
+ userData.registrationDate = new Date().toISOString();
252
+ userData.status = 'active';
253
+
254
+ // Store in users array
255
+ const users = JSON.parse(localStorage.getItem('users')) || [];
256
+ users.push(userData);
257
+ localStorage.setItem('users', JSON.stringify(users));
258
  localStorage.setItem('currentUser', JSON.stringify(userData));
259
 
260
  // Simulate payment processing
 
262
  window.location.href = '/dashboard.html';
263
  }, 1500);
264
  }
265
+
266
+ // Admin authentication
267
+ function authenticateAdmin(username, password) {
268
+ // Simple admin authentication (in production, use secure backend)
269
+ const adminCredentials = [
270
+ { username: 'admin', password: 'admin123' },
271
+ { username: 'supervisor', password: 'super123' }
272
+ ];
273
+
274
+ const validAdmin = adminCredentials.find(admin =>
275
+ admin.username === username && admin.password === password
276
+ );
277
+
278
+ if (validAdmin) {
279
+ const adminData = {
280
+ id: Date.now(),
281
+ fullName: 'System Administrator',
282
+ username: username,
283
+ role: 'admin',
284
+ status: 'active',
285
+ loginTime: new Date().toISOString()
286
+ };
287
+ localStorage.setItem('currentUser', JSON.stringify(adminData));
288
+ return true;
289
+ }
290
+ return false;
291
+ }
292
+
293
+ // Dashboard data functions
294
+ function getDashboardStats() {
295
+ const users = JSON.parse(localStorage.getItem('users')) || [];
296
+ const matches = JSON.parse(localStorage.getItem('matches')) || [];
297
+
298
+ const totalUsers = users.length;
299
+ const founders = users.filter(u => u.role === 'founder').length;
300
+ const advisors = users.filter(u => u.role === 'advisor').length;
301
+ const activeMatches = matches.filter(m => m.status === 'active').length;
302
+ const pendingMatches = matches.filter(m => m.status === 'pending').length;
303
+
304
+ return {
305
+ totalUsers,
306
+ founders,
307
+ advisors,
308
+ activeMatches,
309
+ pendingMatches
310
+ };
311
+ }
312
+
313
+ // Get user activity data
314
+ function getUserActivity() {
315
+ const users = JSON.parse(localStorage.getItem('users')) || [];
316
+
317
+ // Sort by registration date
318
+ return users.sort((a, b) => new Date(b.registrationDate) - new Date(a.registrationDate)).slice(0, 5);
319
+ }
320
+
321
+ // Get recent matches
322
+ function getRecentMatches() {
323
+ const matches = JSON.parse(localStorage.getItem('matches')) || [];
324
+
325
+ // Sort by creation date
326
+ return matches.sort((a, b) => new Date(b.created) - new Date(a.created))).slice(0, 5);
327
+ }