Hugging Face's logo

Spaces:
brian256
/
mesp
Running

App Files Community
brian256 commited on
Commit
57d8560
·
verified ·
1 Parent(s): acc38b3

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +96 -74
index.html CHANGED
@@ -7,9 +7,9 @@
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- /* Custom CSS for elements that need more specific styling */
11
  .gradient-bg {
12
- background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
13
  }
14
  .dashboard-card:hover {
15
  transform: translateY(-5px);
@@ -20,14 +20,22 @@
20
  border-radius: 4px;
21
  }
22
  .nav-item.active {
23
- border-left: 4px solid #3b82f6;
24
- background-color: rgba(59, 130, 246, 0.1);
25
  }
26
  .transaction-history {
27
  max-height: 400px;
28
  overflow-y: auto;
29
  }
30
- /* Custom scrollbar */
 
 
 
 
 
 
 
 
31
  .transaction-history::-webkit-scrollbar {
32
  width: 6px;
33
  }
@@ -35,23 +43,36 @@
35
  background: #f1f1f1;
36
  }
37
  .transaction-history::-webkit-scrollbar-thumb {
38
- background: #cbd5e1;
39
  border-radius: 3px;
40
  }
41
  .transaction-history::-webkit-scrollbar-thumb:hover {
42
- background: #94a3b8;
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
  </style>
45
  </head>
46
  <body class="bg-gray-50">
47
  <div class="flex h-screen overflow-hidden">
48
- <!-- Sidebar -->
49
  <div class="hidden md:flex md:flex-shrink-0">
50
  <div class="flex flex-col w-64 gradient-bg text-white">
51
- <div class="flex items-center justify-center h-16 px-4 border-b border-blue-800">
52
  <div class="flex items-center">
53
- <i class="fas fa-piggy-bank text-2xl mr-2 text-blue-200"></i>
54
- <span class="text-xl font-bold">MESP</span>
55
  </div>
56
  </div>
57
  <div class="flex flex-col flex-grow px-4 py-4">
@@ -69,7 +90,7 @@
69
  </div>
70
  <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
71
  <i class="fas fa-exchange-alt mr-3"></i>
72
- <span>Transactions</span>
73
  </div>
74
  <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
75
  <i class="fas fa-chart-line mr-3"></i>
@@ -84,12 +105,12 @@
84
  <span>Settings</span>
85
  </div>
86
  </div>
87
- <div class="px-4 py-4 border-t border-blue-800">
88
  <div class="flex items-center">
89
  <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
90
  <div class="ml-3">
91
- <p class="text-sm font-medium">Jane Cooper</p>
92
- <p class="text-xs text-blue-200">Admin</p>
93
  </div>
94
  </div>
95
  </div>
@@ -107,13 +128,14 @@
107
  </div>
108
  <div class="flex items-center">
109
  <div class="relative">
110
- <input type="text" class="w-full md:w-64 px-4 py-2 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Search...">
111
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
112
  </div>
113
  </div>
114
  <div class="flex items-center">
115
  <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none">
116
  <i class="fas fa-bell"></i>
 
117
  </button>
118
  <button class="p-2 ml-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none">
119
  <i class="fas fa-envelope"></i>
@@ -121,7 +143,7 @@
121
  <div class="ml-4 relative">
122
  <button class="flex items-center focus:outline-none">
123
  <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
124
- <span class="ml-2 hidden md:inline">Jane Cooper</span>
125
  <i class="fas fa-chevron-down ml-1 text-gray-500 hidden md:inline"></i>
126
  </button>
127
  </div>
@@ -132,7 +154,7 @@
132
  <div class="flex-1 overflow-auto p-4 bg-gray-50">
133
  <div class="mb-6">
134
  <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
135
- <p class="text-gray-600">Welcome back, Jane! Here's your financial overview.</p>
136
  </div>
137
 
138
  <!-- Stats Cards -->
@@ -141,9 +163,9 @@
141
  <div class="flex items-center justify-between">
142
  <div>
143
  <p class="text-sm font-medium text-gray-500">Total Savings</p>
144
- <h3 class="text-2xl font-bold mt-1">Ksh 245,890</h3>
145
  </div>
146
- <div class="p-3 rounded-full bg-blue-100 text-blue-600">
147
  <i class="fas fa-piggy-bank text-xl"></i>
148
  </div>
149
  </div>
@@ -159,7 +181,7 @@
159
  <div class="flex items-center justify-between">
160
  <div>
161
  <p class="text-sm font-medium text-gray-500">Active Loans</p>
162
- <h3 class="text-2xl font-bold mt-1">Ksh 120,500</h3>
163
  </div>
164
  <div class="p-3 rounded-full bg-green-100 text-green-600">
165
  <i class="fas fa-hand-holding-usd text-xl"></i>
@@ -177,9 +199,9 @@
177
  <div class="flex items-center justify-between">
178
  <div>
179
  <p class="text-sm font-medium text-gray-500">Dividends</p>
180
- <h3 class="text-2xl font-bold mt-1">Ksh 15,200</h3>
181
  </div>
182
- <div class="p-3 rounded-full bg-purple-100 text-purple-600">
183
  <i class="fas fa-chart-pie text-xl"></i>
184
  </div>
185
  </div>
@@ -195,9 +217,9 @@
195
  <div class="flex items-center justify-between">
196
  <div>
197
  <p class="text-sm font-medium text-gray-500">New Members</p>
198
- <h3 class="text-2xl font-bold mt-1">24</h3>
199
  </div>
200
- <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
201
  <i class="fas fa-users text-xl"></i>
202
  </div>
203
  </div>
@@ -210,58 +232,58 @@
210
  </div>
211
  </div>
212
 
213
- <!-- Savings Goals and Recent Transactions -->
214
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
215
  <!-- Savings Goals -->
216
  <div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6">
217
  <div class="flex items-center justify-between mb-4">
218
  <h2 class="text-lg font-semibold text-gray-800">Savings Goals</h2>
219
- <button class="text-sm text-blue-600 hover:text-blue-800">View All</button>
220
  </div>
221
 
222
  <div class="space-y-4">
223
  <div>
224
  <div class="flex items-center justify-between mb-1">
225
  <span class="font-medium">Emergency Fund</span>
226
- <span class="text-sm text-gray-600">Ksh 45,000 / Ksh 100,000</span>
227
  </div>
228
  <div class="w-full bg-gray-200 rounded-full savings-progress">
229
- <div class="bg-blue-600 savings-progress" style="width: 45%"></div>
230
  </div>
231
  </div>
232
 
233
  <div>
234
  <div class="flex items-center justify-between mb-1">
235
  <span class="font-medium">Education Fund</span>
236
- <span class="text-sm text-gray-600">Ksh 12,500 / Ksh 50,000</span>
237
  </div>
238
  <div class="w-full bg-gray-200 rounded-full savings-progress">
239
- <div class="bg-green-500 savings-progress" style="width: 25%"></div>
240
  </div>
241
  </div>
242
 
243
  <div>
244
  <div class="flex items-center justify-between mb-1">
245
  <span class="font-medium">Retirement</span>
246
- <span class="text-sm text-gray-600">Ksh 188,390 / Ksh 500,000</span>
247
  </div>
248
  <div class="w-full bg-gray-200 rounded-full savings-progress">
249
- <div class="bg-purple-500 savings-progress" style="width: 38%"></div>
250
  </div>
251
  </div>
252
  </div>
253
 
254
- <button class="mt-6 w-full py-2 px-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 transition duration-200">
255
  <i class="fas fa-plus mr-2"></i> Add New Goal
256
  </button>
257
  </div>
258
 
259
- <!-- Quick Actions -->
260
  <div class="bg-white rounded-lg shadow-sm p-6">
261
  <h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h2>
262
  <div class="grid grid-cols-2 gap-4">
263
- <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-blue-500 hover:bg-blue-50 transition duration-200">
264
- <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2">
265
  <i class="fas fa-plus text-lg"></i>
266
  </div>
267
  <span class="text-sm font-medium">Deposit</span>
@@ -272,17 +294,17 @@
272
  </div>
273
  <span class="text-sm font-medium">Withdraw</span>
274
  </button>
275
- <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-purple-500 hover:bg-purple-50 transition duration-200">
276
- <div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2">
277
  <i class="fas fa-hand-holding-usd text-lg"></i>
278
  </div>
279
  <span class="text-sm font-medium">Apply Loan</span>
280
  </button>
281
- <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-yellow-500 hover:bg-yellow-50 transition duration-200">
282
- <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2">
283
- <i class="fas fa-exchange-alt text-lg"></i>
284
  </div>
285
- <span class="text-sm font-medium">Transfer</span>
286
  </button>
287
  </div>
288
  </div>
@@ -294,7 +316,7 @@
294
  <div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6">
295
  <div class="flex items-center justify-between mb-4">
296
  <h2 class="text-lg font-semibold text-gray-800">Recent Transactions</h2>
297
- <button class="text-sm text-blue-600 hover:text-blue-800">View All</button>
298
  </div>
299
 
300
  <div class="transaction-history">
@@ -302,17 +324,17 @@
302
  <!-- Transaction Item -->
303
  <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
304
  <div class="flex items-center">
305
- <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
306
  <i class="fas fa-arrow-down"></i>
307
  </div>
308
  <div>
309
- <p class="font-medium">Deposit</p>
310
  <p class="text-sm text-gray-500">12 May 2023, 10:30 AM</p>
311
  </div>
312
  </div>
313
  <div class="text-right">
314
- <p class="font-medium text-green-600">+ Ksh 15,000</p>
315
- <p class="text-sm text-gray-500">Completed</p>
316
  </div>
317
  </div>
318
 
@@ -323,20 +345,20 @@
323
  <i class="fas fa-arrow-up"></i>
324
  </div>
325
  <div>
326
- <p class="font-medium">Withdrawal</p>
327
  <p class="text-sm text-gray-500">10 May 2023, 2:15 PM</p>
328
  </div>
329
  </div>
330
  <div class="text-right">
331
- <p class="font-medium text-red-600">- Ksh 5,000</p>
332
- <p class="text-sm text-gray-500">Completed</p>
333
  </div>
334
  </div>
335
 
336
  <!-- Transaction Item -->
337
  <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
338
  <div class="flex items-center">
339
- <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-3">
340
  <i class="fas fa-hand-holding-usd"></i>
341
  </div>
342
  <div>
@@ -345,42 +367,42 @@
345
  </div>
346
  </div>
347
  <div class="text-right">
348
- <p class="font-medium text-green-600">+ Ksh 3,500</p>
349
- <p class="text-sm text-gray-500">Completed</p>
350
  </div>
351
  </div>
352
 
353
  <!-- Transaction Item -->
354
  <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
355
  <div class="flex items-center">
356
- <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3">
357
  <i class="fas fa-exchange-alt"></i>
358
  </div>
359
  <div>
360
- <p class="font-medium">Transfer</p>
361
  <p class="text-sm text-gray-500">5 May 2023, 4:45 PM</p>
362
  </div>
363
  </div>
364
  <div class="text-right">
365
- <p class="font-medium text-red-600">- Ksh 2,000</p>
366
- <p class="text-sm text-gray-500">Completed</p>
367
  </div>
368
  </div>
369
 
370
  <!-- Transaction Item -->
371
  <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
372
  <div class="flex items-center">
373
- <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
374
  <i class="fas fa-arrow-down"></i>
375
  </div>
376
  <div>
377
- <p class="font-medium">Deposit</p>
378
  <p class="text-sm text-gray-500">1 May 2023, 11:20 AM</p>
379
  </div>
380
  </div>
381
  <div class="text-right">
382
- <p class="font-medium text-green-600">+ Ksh 10,000</p>
383
- <p class="text-sm text-gray-500">Completed</p>
384
  </div>
385
  </div>
386
  </div>
@@ -394,17 +416,17 @@
394
  <div class="space-y-4">
395
  <div class="p-4 border border-gray-200 rounded-lg">
396
  <div class="flex items-center justify-between mb-2">
397
- <span class="font-medium">Personal Loan</span>
398
- <span class="text-sm px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Active</span>
399
  </div>
400
  <div class="text-sm text-gray-600 mb-2">
401
  <div class="flex justify-between mb-1">
402
  <span>Amount:</span>
403
- <span>Ksh 50,000</span>
404
  </div>
405
  <div class="flex justify-between mb-1">
406
  <span>Interest Rate:</span>
407
- <span>12% p.a.</span>
408
  </div>
409
  <div class="flex justify-between mb-1">
410
  <span>Due Date:</span>
@@ -412,7 +434,7 @@
412
  </div>
413
  <div class="flex justify-between">
414
  <span>Balance:</span>
415
- <span class="font-medium">Ksh 32,500</span>
416
  </div>
417
  </div>
418
  <div class="mt-3">
@@ -428,29 +450,29 @@
428
 
429
  <div class="p-4 border border-gray-200 rounded-lg">
430
  <div class="flex items-center justify-between mb-2">
431
- <span class="font-medium">Business Loan</span>
432
- <span class="text-sm px-2 py-1 bg-green-100 text-green-800 rounded-full">Approved</span>
433
  </div>
434
  <div class="text-sm text-gray-600">
435
  <div class="flex justify-between mb-1">
436
  <span>Amount:</span>
437
- <span>Ksh 100,000</span>
438
  </div>
439
  <div class="flex justify-between mb-1">
440
  <span>Interest Rate:</span>
441
- <span>10% p.a.</span>
442
  </div>
443
  <div class="flex justify-between">
444
  <span>Disbursement:</span>
445
- <span class="text-blue-600">Pending</span>
446
  </div>
447
  </div>
448
- <button class="mt-3 w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200 text-sm">
449
  View Details
450
  </button>
451
  </div>
452
 
453
- <button class="w-full py-2 px-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 transition duration-200">
454
  <i class="fas fa-plus mr-2"></i> Apply for New Loan
455
  </button>
456
  </div>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ /* Custom CSS with Ugandan color theme */
11
  .gradient-bg {
12
+ background: linear-gradient(135deg, #FFCC00 0%, #D90000 100%);
13
  }
14
  .dashboard-card:hover {
15
  transform: translateY(-5px);
 
20
  border-radius: 4px;
21
  }
22
  .nav-item.active {
23
+ border-left: 4px solid #D90000;
24
+ background-color: rgba(217, 0, 0, 0.1);
25
  }
26
  .transaction-history {
27
  max-height: 400px;
28
  overflow-y: auto;
29
  }
30
+ /* Crest styling */
31
+ .ug-crest {
32
+ width: 40px;
33
+ height: 40px;
34
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23FFCC00" stroke="%23D90000" stroke-width="2"/><text x="50" y="55" font-family="Arial" font-size="40" text-anchor="middle" fill="%23D90000">U</text></svg>');
35
+ background-size: contain;
36
+ margin-right: 10px;
37
+ }
38
+ /* Custom scrollbar in Ugandan colors */
39
  .transaction-history::-webkit-scrollbar {
40
  width: 6px;
41
  }
 
43
  background: #f1f1f1;
44
  }
45
  .transaction-history::-webkit-scrollbar-thumb {
46
+ background: #D90000;
47
  border-radius: 3px;
48
  }
49
  .transaction-history::-webkit-scrollbar-thumb:hover {
50
+ background: #FFCC00;
51
+ }
52
+ /* Ugandan flag inspired status colors */
53
+ .status-active {
54
+ background-color: rgba(0, 128, 0, 0.1);
55
+ color: #008000;
56
+ }
57
+ .status-pending {
58
+ background-color: rgba(217, 0, 0, 0.1);
59
+ color: #D90000;
60
+ }
61
+ .status-completed {
62
+ background-color: rgba(0, 0, 139, 0.1);
63
+ color: #00008B;
64
  }
65
  </style>
66
  </head>
67
  <body class="bg-gray-50">
68
  <div class="flex h-screen overflow-hidden">
69
+ <!-- Sidebar with Ugandan color theme -->
70
  <div class="hidden md:flex md:flex-shrink-0">
71
  <div class="flex flex-col w-64 gradient-bg text-white">
72
+ <div class="flex items-center justify-center h-16 px-4 border-b border-yellow-300">
73
  <div class="flex items-center">
74
+ <div class="ug-crest"></div>
75
+ <span class="text-xl font-bold">MESP UGANDA</span>
76
  </div>
77
  </div>
78
  <div class="flex flex-col flex-grow px-4 py-4">
 
90
  </div>
91
  <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
92
  <i class="fas fa-exchange-alt mr-3"></i>
93
+ <span>Mobile Money</span>
94
  </div>
95
  <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
96
  <i class="fas fa-chart-line mr-3"></i>
 
105
  <span>Settings</span>
106
  </div>
107
  </div>
108
+ <div class="px-4 py-4 border-t border-yellow-300">
109
  <div class="flex items-center">
110
  <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
111
  <div class="ml-3">
112
+ <p class="text-sm font-medium">Nakato Kintu</p>
113
+ <p class="text-xs text-yellow-200">Branch Manager</p>
114
  </div>
115
  </div>
116
  </div>
 
128
  </div>
129
  <div class="flex items-center">
130
  <div class="relative">
131
+ <input type="text" class="w-full md:w-64 px-4 py-2 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Search...">
132
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
133
  </div>
134
  </div>
135
  <div class="flex items-center">
136
  <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none">
137
  <i class="fas fa-bell"></i>
138
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
139
  </button>
140
  <button class="p-2 ml-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none">
141
  <i class="fas fa-envelope"></i>
 
143
  <div class="ml-4 relative">
144
  <button class="flex items-center focus:outline-none">
145
  <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
146
+ <span class="ml-2 hidden md:inline">Nakato Kintu</span>
147
  <i class="fas fa-chevron-down ml-1 text-gray-500 hidden md:inline"></i>
148
  </button>
149
  </div>
 
154
  <div class="flex-1 overflow-auto p-4 bg-gray-50">
155
  <div class="mb-6">
156
  <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
157
+ <p class="text-gray-600">Welcome back, Nakato! Here's your financial overview.</p>
158
  </div>
159
 
160
  <!-- Stats Cards -->
 
163
  <div class="flex items-center justify-between">
164
  <div>
165
  <p class="text-sm font-medium text-gray-500">Total Savings</p>
166
+ <h3 class="text-2xl font-bold mt-1">UGX 12,450,890</h3>
167
  </div>
168
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
169
  <i class="fas fa-piggy-bank text-xl"></i>
170
  </div>
171
  </div>
 
181
  <div class="flex items-center justify-between">
182
  <div>
183
  <p class="text-sm font-medium text-gray-500">Active Loans</p>
184
+ <h3 class="text-2xl font-bold mt-1">UGX 7,120,500</h3>
185
  </div>
186
  <div class="p-3 rounded-full bg-green-100 text-green-600">
187
  <i class="fas fa-hand-holding-usd text-xl"></i>
 
199
  <div class="flex items-center justify-between">
200
  <div>
201
  <p class="text-sm font-medium text-gray-500">Dividends</p>
202
+ <h3 class="text-2xl font-bold mt-1">UGX 1,520,200</h3>
203
  </div>
204
+ <div class="p-3 rounded-full bg-red-100 text-red-600">
205
  <i class="fas fa-chart-pie text-xl"></i>
206
  </div>
207
  </div>
 
217
  <div class="flex items-center justify-between">
218
  <div>
219
  <p class="text-sm font-medium text-gray-500">New Members</p>
220
+ <h3 class="text-2xl font-bold mt-1">45</h3>
221
  </div>
222
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
223
  <i class="fas fa-users text-xl"></i>
224
  </div>
225
  </div>
 
232
  </div>
233
  </div>
234
 
235
+ <!-- Savings Goals and Quick Actions -->
236
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
237
  <!-- Savings Goals -->
238
  <div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6">
239
  <div class="flex items-center justify-between mb-4">
240
  <h2 class="text-lg font-semibold text-gray-800">Savings Goals</h2>
241
+ <button class="text-sm text-red-600 hover:text-red-800">View All</button>
242
  </div>
243
 
244
  <div class="space-y-4">
245
  <div>
246
  <div class="flex items-center justify-between mb-1">
247
  <span class="font-medium">Emergency Fund</span>
248
+ <span class="text-sm text-gray-600">UGX 450,000 / UGX 1,000,000</span>
249
  </div>
250
  <div class="w-full bg-gray-200 rounded-full savings-progress">
251
+ <div class="bg-yellow-500 savings-progress" style="width: 45%"></div>
252
  </div>
253
  </div>
254
 
255
  <div>
256
  <div class="flex items-center justify-between mb-1">
257
  <span class="font-medium">Education Fund</span>
258
+ <span class="text-sm text-gray-600">UGX 250,000 / UGX 500,000</span>
259
  </div>
260
  <div class="w-full bg-gray-200 rounded-full savings-progress">
261
+ <div class="bg-red-500 savings-progress" style="width: 50%"></div>
262
  </div>
263
  </div>
264
 
265
  <div>
266
  <div class="flex items-center justify-between mb-1">
267
  <span class="font-medium">Retirement</span>
268
+ <span class="text-sm text-gray-600">UGX 3,880,390 / UGX 10,000,000</span>
269
  </div>
270
  <div class="w-full bg-gray-200 rounded-full savings-progress">
271
+ <div class="bg-blue-500 savings-progress" style="width: 39%"></div>
272
  </div>
273
  </div>
274
  </div>
275
 
276
+ <button class="mt-6 w-full py-2 px-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-red-500 hover:text-red-500 transition duration-200">
277
  <i class="fas fa-plus mr-2"></i> Add New Goal
278
  </button>
279
  </div>
280
 
281
+ <!-- Quick Actions with Mobile Money option -->
282
  <div class="bg-white rounded-lg shadow-sm p-6">
283
  <h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h2>
284
  <div class="grid grid-cols-2 gap-4">
285
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-yellow-500 hover:bg-yellow-50 transition duration-200">
286
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2">
287
  <i class="fas fa-plus text-lg"></i>
288
  </div>
289
  <span class="text-sm font-medium">Deposit</span>
 
294
  </div>
295
  <span class="text-sm font-medium">Withdraw</span>
296
  </button>
297
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-red-500 hover:bg-red-50 transition duration-200">
298
+ <div class="p-3 rounded-full bg-red-100 text-red-600 mb-2">
299
  <i class="fas fa-hand-holding-usd text-lg"></i>
300
  </div>
301
  <span class="text-sm font-medium">Apply Loan</span>
302
  </button>
303
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-blue-500 hover:bg-blue-50 transition duration-200">
304
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2">
305
+ <i class="fas fa-mobile-alt text-lg"></i>
306
  </div>
307
+ <span class="text-sm font-medium">Mobile Money</span>
308
  </button>
309
  </div>
310
  </div>
 
316
  <div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6">
317
  <div class="flex items-center justify-between mb-4">
318
  <h2 class="text-lg font-semibold text-gray-800">Recent Transactions</h2>
319
+ <button class="text-sm text-red-600 hover:text-red-800">View All</button>
320
  </div>
321
 
322
  <div class="transaction-history">
 
324
  <!-- Transaction Item -->
325
  <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
326
  <div class="flex items-center">
327
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3">
328
  <i class="fas fa-arrow-down"></i>
329
  </div>
330
  <div>
331
+ <p class="font-medium">MTN Mobile Money</p>
332
  <p class="text-sm text-gray-500">12 May 2023, 10:30 AM</p>
333
  </div>
334
  </div>
335
  <div class="text-right">
336
+ <p class="font-medium text-green-600">+ UGX 500,000</p>
337
+ <p class="text-sm status-completed rounded px-2 py-1">Completed</p>
338
  </div>
339
  </div>
340
 
 
345
  <i class="fas fa-arrow-up"></i>
346
  </div>
347
  <div>
348
+ <p class="font-medium">Airtel Money Withdrawal</p>
349
  <p class="text-sm text-gray-500">10 May 2023, 2:15 PM</p>
350
  </div>
351
  </div>
352
  <div class="text-right">
353
+ <p class="font-medium text-red-600">- UGX 250,000</p>
354
+ <p class="text-sm status-completed rounded px-2 py-1">Completed</p>
355
  </div>
356
  </div>
357
 
358
  <!-- Transaction Item -->
359
  <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
360
  <div class="flex items-center">
361
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-3">
362
  <i class="fas fa-hand-holding-usd"></i>
363
  </div>
364
  <div>
 
367
  </div>
368
  </div>
369
  <div class="text-right">
370
+ <p class="font-medium text-green-600">+ UGX 150,000</p>
371
+ <p class="text-sm status-completed rounded px-2 py-1">Completed</p>
372
  </div>
373
  </div>
374
 
375
  <!-- Transaction Item -->
376
  <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
377
  <div class="flex items-center">
378
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
379
  <i class="fas fa-exchange-alt"></i>
380
  </div>
381
  <div>
382
+ <p class="font-medium">Bank Transfer</p>
383
  <p class="text-sm text-gray-500">5 May 2023, 4:45 PM</p>
384
  </div>
385
  </div>
386
  <div class="text-right">
387
+ <p class="font-medium text-red-600">- UGX 1,000,000</p>
388
+ <p class="text-sm status-completed rounded px-2 py-1">Completed</p>
389
  </div>
390
  </div>
391
 
392
  <!-- Transaction Item -->
393
  <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
394
  <div class="flex items-center">
395
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3">
396
  <i class="fas fa-arrow-down"></i>
397
  </div>
398
  <div>
399
+ <p class="font-medium">Cash Deposit</p>
400
  <p class="text-sm text-gray-500">1 May 2023, 11:20 AM</p>
401
  </div>
402
  </div>
403
  <div class="text-right">
404
+ <p class="font-medium text-green-600">+ UGX 750,000</p>
405
+ <p class="text-sm status-pending rounded px-2 py-1">Pending</p>
406
  </div>
407
  </div>
408
  </div>
 
416
  <div class="space-y-4">
417
  <div class="p-4 border border-gray-200 rounded-lg">
418
  <div class="flex items-center justify-between mb-2">
419
+ <span class="font-medium">Business Expansion</span>
420
+ <span class="text-sm px-2 py-1 status-active rounded-full">Active</span>
421
  </div>
422
  <div class="text-sm text-gray-600 mb-2">
423
  <div class="flex justify-between mb-1">
424
  <span>Amount:</span>
425
+ <span>UGX 5,000,000</span>
426
  </div>
427
  <div class="flex justify-between mb-1">
428
  <span>Interest Rate:</span>
429
+ <span>15% p.a.</span>
430
  </div>
431
  <div class="flex justify-between mb-1">
432
  <span>Due Date:</span>
 
434
  </div>
435
  <div class="flex justify-between">
436
  <span>Balance:</span>
437
+ <span class="font-medium">UGX 3,250,000</span>
438
  </div>
439
  </div>
440
  <div class="mt-3">
 
450
 
451
  <div class="p-4 border border-gray-200 rounded-lg">
452
  <div class="flex items-center justify-between mb-2">
453
+ <span class="font-medium">Agriculture Loan</span>
454
+ <span class="text-sm px-2 py-1 status-pending rounded-full">Approved</span>
455
  </div>
456
  <div class="text-sm text-gray-600">
457
  <div class="flex justify-between mb-1">
458
  <span>Amount:</span>
459
+ <span>UGX 3,000,000</span>
460
  </div>
461
  <div class="flex justify-between mb-1">
462
  <span>Interest Rate:</span>
463
+ <span>12% p.a.</span>
464
  </div>
465
  <div class="flex justify-between">
466
  <span>Disbursement:</span>
467
+ <span class="text-red-600">Pending</span>
468
  </div>
469
  </div>
470
+ <button class="mt-3 w-full py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition duration-200 text-sm">
471
  View Details
472
  </button>
473
  </div>
474
 
475
+ <button class="w-full py-2 px-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-red-500 hover:text-red-500 transition duration-200">
476
  <i class="fas fa-plus mr-2"></i> Apply for New Loan
477
  </button>
478
  </div>