Hugging Face's logo

Spaces:
Khatvathiren
/
fin-track
Running

App Files Community
Khatvathiren commited on
Commit
830ab8a
·
verified ·
1 Parent(s): 65a11d3

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1206 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fin Track
3
- emoji: 💻
4
- colorFrom: indigo
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: fin-track
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1206 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>FinTrack - Personal Finance Tracker</title>
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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #FBFEF9;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #0E79B2 0%, #BF1363 50%, #F39237 100%);
19
+ }
20
+
21
+ .calendar-day {
22
+ transition: all 0.2s ease;
23
+ }
24
+
25
+ .calendar-day:hover {
26
+ transform: scale(1.05);
27
+ background-color: #0E79B2;
28
+ color: white;
29
+ }
30
+
31
+ .progress-bar {
32
+ height: 10px;
33
+ border-radius: 5px;
34
+ background-color: #e0e0e0;
35
+ }
36
+
37
+ .progress-fill {
38
+ height: 100%;
39
+ border-radius: 5px;
40
+ background-color: #F39237;
41
+ transition: width 0.5s ease;
42
+ }
43
+
44
+ .savings-card:hover {
45
+ transform: translateY(-5px);
46
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
47
+ }
48
+
49
+ .chart-container {
50
+ height: 300px;
51
+ }
52
+
53
+ @media (max-width: 768px) {
54
+ .sidebar {
55
+ transform: translateX(-100%);
56
+ position: fixed;
57
+ top: 0;
58
+ left: 0;
59
+ z-index: 50;
60
+ height: 100vh;
61
+ transition: transform 0.3s ease;
62
+ }
63
+
64
+ .sidebar.active {
65
+ transform: translateX(0);
66
+ }
67
+
68
+ .overlay {
69
+ display: none;
70
+ position: fixed;
71
+ top: 0;
72
+ left: 0;
73
+ right: 0;
74
+ bottom: 0;
75
+ background-color: rgba(0,0,0,0.5);
76
+ z-index: 40;
77
+ }
78
+
79
+ .overlay.active {
80
+ display: block;
81
+ }
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="text-gray-800">
86
+ <!-- Mobile Menu Button -->
87
+ <div class="md:hidden fixed top-4 left-4 z-50">
88
+ <button id="menuBtn" class="p-2 rounded-full bg-white shadow-lg">
89
+ <i class="fas fa-bars text-[#191923]"></i>
90
+ </button>
91
+ </div>
92
+
93
+ <!-- Overlay for mobile menu -->
94
+ <div id="overlay" class="overlay"></div>
95
+
96
+ <!-- Sidebar -->
97
+ <div id="sidebar" class="sidebar w-64 bg-[#191923] text-white fixed h-full overflow-y-auto">
98
+ <div class="p-4 flex items-center justify-between border-b border-gray-700">
99
+ <h1 class="text-2xl font-bold text-[#F39237]">FinTrack</h1>
100
+ <button id="closeMenuBtn" class="md:hidden p-1 rounded-full hover:bg-gray-700">
101
+ <i class="fas fa-times"></i>
102
+ </button>
103
+ </div>
104
+
105
+ <div class="p-4">
106
+ <div class="mb-8">
107
+ <div class="text-sm uppercase text-gray-400 mb-2">Navigation</div>
108
+ <ul>
109
+ <li class="mb-2">
110
+ <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition" onclick="showSection('dashboard')">
111
+ <i class="fas fa-home mr-3 text-[#0E79B2]"></i>
112
+ <span>Dashboard</span>
113
+ </a>
114
+ </li>
115
+ <li class="mb-2">
116
+ <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition" onclick="showSection('expenses')">
117
+ <i class="fas fa-money-bill-wave mr-3 text-[#BF1363]"></i>
118
+ <span>Expenses</span>
119
+ </a>
120
+ </li>
121
+ <li class="mb-2">
122
+ <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition" onclick="showSection('income')">
123
+ <i class="fas fa-hand-holding-usd mr-3 text-[#F39237]"></i>
124
+ <span>Income</span>
125
+ </a>
126
+ </li>
127
+ <li class="mb-2">
128
+ <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition" onclick="showSection('savings')">
129
+ <i class="fas fa-piggy-bank mr-3 text-[#0E79B2]"></i>
130
+ <span>Savings</span>
131
+ </a>
132
+ </li>
133
+ <li class="mb-2">
134
+ <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition" onclick="showSection('calendar')">
135
+ <i class="fas fa-calendar-alt mr-3 text-[#BF1363]"></i>
136
+ <span>Calendar</span>
137
+ </a>
138
+ </li>
139
+ <li class="mb-2">
140
+ <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition" onclick="showSection('reports')">
141
+ <i class="fas fa-chart-bar mr-3 text-[#F39237]"></i>
142
+ <span>Reports</span>
143
+ </a>
144
+ </li>
145
+ <li class="mb-2">
146
+ <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition" onclick="showSection('todo')">
147
+ <i class="fas fa-tasks mr-3 text-[#0E79B2]"></i>
148
+ <span>To-Do List</span>
149
+ </a>
150
+ </li>
151
+ </ul>
152
+ </div>
153
+
154
+ <div class="mb-8">
155
+ <div class="text-sm uppercase text-gray-400 mb-2">Quick Stats</div>
156
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
157
+ <div class="text-xs text-gray-400">Total Balance</div>
158
+ <div class="text-xl font-bold" id="totalBalance">$4,250.00</div>
159
+ </div>
160
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
161
+ <div class="text-xs text-gray-400">Monthly Income</div>
162
+ <div class="text-xl font-bold text-green-400" id="monthlyIncome">$3,500.00</div>
163
+ </div>
164
+ <div class="bg-gray-800 rounded-lg p-3">
165
+ <div class="text-xs text-gray-400">Monthly Expenses</div>
166
+ <div class="text-xl font-bold text-red-400" id="monthlyExpenses">$1,250.00</div>
167
+ </div>
168
+ </div>
169
+
170
+ <div>
171
+ <div class="text-sm uppercase text-gray-400 mb-2">Savings Progress</div>
172
+ <div class="mb-3">
173
+ <div class="flex justify-between text-xs mb-1">
174
+ <span>Emergency Fund</span>
175
+ <span>65%</span>
176
+ </div>
177
+ <div class="progress-bar">
178
+ <div class="progress-fill" style="width: 65%;"></div>
179
+ </div>
180
+ </div>
181
+ <div class="mb-3">
182
+ <div class="flex justify-between text-xs mb-1">
183
+ <span>Business Capital</span>
184
+ <span>30%</span>
185
+ </div>
186
+ <div class="progress-bar">
187
+ <div class="progress-fill" style="width: 30%;"></div>
188
+ </div>
189
+ </div>
190
+ <div>
191
+ <div class="flex justify-between text-xs mb-1">
192
+ <span>Household</span>
193
+ <span>45%</span>
194
+ </div>
195
+ <div class="progress-bar">
196
+ <div class="progress-fill" style="width: 45%;"></div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Main Content -->
204
+ <div class="md:ml-64 min-h-screen">
205
+ <!-- Header -->
206
+ <header class="gradient-bg text-white p-4 shadow-md">
207
+ <div class="container mx-auto flex justify-between items-center">
208
+ <div>
209
+ <h2 class="text-xl font-bold" id="currentSection">Dashboard</h2>
210
+ <p class="text-sm opacity-80">Welcome back! Today is June 24, 2025</p>
211
+ </div>
212
+ <div class="flex items-center space-x-4">
213
+ <div class="relative">
214
+ <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20">
215
+ <i class="fas fa-bell"></i>
216
+ </button>
217
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
218
+ </div>
219
+ <div class="flex items-center">
220
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full mr-2">
221
+ <span class="hidden md:inline">Sarah Johnson</span>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </header>
226
+
227
+ <!-- Dashboard Content -->
228
+ <main class="container mx-auto p-4">
229
+ <!-- Dashboard Section -->
230
+ <section id="dashboard" class="section-content">
231
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
232
+ <div class="bg-white rounded-lg shadow p-6">
233
+ <h3 class="text-lg font-semibold mb-4 text-[#0E79B2]">Financial Overview</h3>
234
+ <div class="space-y-4">
235
+ <div>
236
+ <div class="flex justify-between mb-1">
237
+ <span class="text-sm text-gray-600">Income</span>
238
+ <span class="text-sm font-medium text-green-500">$3,500.00</span>
239
+ </div>
240
+ <div class="w-full bg-gray-200 rounded-full h-2">
241
+ <div class="bg-green-500 h-2 rounded-full" style="width: 70%"></div>
242
+ </div>
243
+ </div>
244
+ <div>
245
+ <div class="flex justify-between mb-1">
246
+ <span class="text-sm text-gray-600">Expenses</span>
247
+ <span class="text-sm font-medium text-red-500">$1,250.00</span>
248
+ </div>
249
+ <div class="w-full bg-gray-200 rounded-full h-2">
250
+ <div class="bg-red-500 h-2 rounded-full" style="width: 25%"></div>
251
+ </div>
252
+ </div>
253
+ <div>
254
+ <div class="flex justify-between mb-1">
255
+ <span class="text-sm text-gray-600">Savings</span>
256
+ <span class="text-sm font-medium text-[#F39237]">$750.00</span>
257
+ </div>
258
+ <div class="w-full bg-gray-200 rounded-full h-2">
259
+ <div class="bg-[#F39237] h-2 rounded-full" style="width: 15%"></div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="bg-white rounded-lg shadow p-6">
266
+ <h3 class="text-lg font-semibold mb-4 text-[#BF1363]">Recent Transactions</h3>
267
+ <div class="space-y-3">
268
+ <div class="flex justify-between items-center pb-2 border-b border-gray-100">
269
+ <div class="flex items-center">
270
+ <div class="p-2 rounded-full bg-[#BF1363] bg-opacity-10 mr-3">
271
+ <i class="fas fa-utensils text-[#BF1363]"></i>
272
+ </div>
273
+ <div>
274
+ <p class="font-medium">Dinner Out</p>
275
+ <p class="text-xs text-gray-500">June 23, 2025</p>
276
+ </div>
277
+ </div>
278
+ <span class="text-red-500 font-medium">-$45.00</span>
279
+ </div>
280
+ <div class="flex justify-between items-center pb-2 border-b border-gray-100">
281
+ <div class="flex items-center">
282
+ <div class="p-2 rounded-full bg-[#0E79B2] bg-opacity-10 mr-3">
283
+ <i class="fas fa-money-bill-wave text-[#0E79B2]"></i>
284
+ </div>
285
+ <div>
286
+ <p class="font-medium">Salary</p>
287
+ <p class="text-xs text-gray-500">June 20, 2025</p>
288
+ </div>
289
+ </div>
290
+ <span class="text-green-500 font-medium">+$2,500.00</span>
291
+ </div>
292
+ <div class="flex justify-between items-center">
293
+ <div class="flex items-center">
294
+ <div class="p-2 rounded-full bg-[#F39237] bg-opacity-10 mr-3">
295
+ <i class="fas fa-gas-pump text-[#F39237]"></i>
296
+ </div>
297
+ <div>
298
+ <p class="font-medium">Gas Station</p>
299
+ <p class="text-xs text-gray-500">June 19, 2025</p>
300
+ </div>
301
+ </div>
302
+ <span class="text-red-500 font-medium">-$35.00</span>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="bg-white rounded-lg shadow p-6">
308
+ <h3 class="text-lg font-semibold mb-4 text-[#F39237]">Quick Actions</h3>
309
+ <div class="grid grid-cols-2 gap-3">
310
+ <button onclick="showSection('expenses')" class="p-3 rounded-lg bg-[#F39237] bg-opacity-10 hover:bg-opacity-20 transition flex flex-col items-center">
311
+ <i class="fas fa-plus-circle text-[#F39237] text-xl mb-1"></i>
312
+ <span class="text-sm">Add Expense</span>
313
+ </button>
314
+ <button onclick="showSection('income')" class="p-3 rounded-lg bg-[#0E79B2] bg-opacity-10 hover:bg-opacity-20 transition flex flex-col items-center">
315
+ <i class="fas fa-plus-circle text-[#0E79B2] text-xl mb-1"></i>
316
+ <span class="text-sm">Add Income</span>
317
+ </button>
318
+ <button onclick="showSection('savings')" class="p-3 rounded-lg bg-[#BF1363] bg-opacity-10 hover:bg-opacity-20 transition flex flex-col items-center">
319
+ <i class="fas fa-piggy-bank text-[#BF1363] text-xl mb-1"></i>
320
+ <span class="text-sm">Add Savings</span>
321
+ </button>
322
+ <button onclick="showSection('todo')" class="p-3 rounded-lg bg-[#191923] bg-opacity-10 hover:bg-opacity-20 transition flex flex-col items-center">
323
+ <i class="fas fa-tasks text-[#191923] text-xl mb-1"></i>
324
+ <span class="text-sm">Add Task</span>
325
+ </button>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
331
+ <div class="bg-white rounded-lg shadow p-6">
332
+ <h3 class="text-lg font-semibold mb-4 text-[#0E79B2]">Expense Breakdown</h3>
333
+ <div class="chart-container">
334
+ <canvas id="expenseChart"></canvas>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="bg-white rounded-lg shadow p-6">
339
+ <h3 class="text-lg font-semibold mb-4 text-[#BF1363]">Income Breakdown</h3>
340
+ <div class="chart-container">
341
+ <canvas id="incomeChart"></canvas>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="bg-white rounded-lg shadow p-6">
347
+ <h3 class="text-lg font-semibold mb-4 text-[#191923]">Income vs Expenses Analysis</h3>
348
+ <p class="text-gray-700 mb-4">
349
+ Your financial health is in good shape this month. With a total income of $3,500.00 and expenses totaling $1,250.00,
350
+ you've managed to save approximately 35% of your income. This is an excellent savings rate that puts you on track
351
+ to meet your financial goals.
352
+ </p>
353
+ <p class="text-gray-700">
354
+ Your largest expense category is Food at $450.00 (36% of total expenses), followed by Transport at $300.00 (24%).
355
+ On the income side, your Salary accounts for $2,500.00 (71% of total income), with Commission making up the remaining $1,000.00 (29%).
356
+ Consider reviewing your food expenses if you're looking to increase your savings rate further.
357
+ </p>
358
+ </div>
359
+ </section>
360
+
361
+ <!-- Expenses Section -->
362
+ <section id="expenses" class="section-content hidden">
363
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
364
+ <h2 class="text-xl font-bold mb-6 text-[#BF1363]">Track Your Expenses</h2>
365
+
366
+ <form id="expenseForm" class="mb-8">
367
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
368
+ <div>
369
+ <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
370
+ <div class="relative">
371
+ <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">$</span>
372
+ <input type="number" step="0.01" class="pl-8 w-full rounded-md border-gray-300 shadow-sm focus:border-[#BF1363] focus:ring focus:ring-[#BF1363] focus:ring-opacity-50" placeholder="0.00" required>
373
+ </div>
374
+ </div>
375
+ <div>
376
+ <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
377
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#BF1363] focus:ring focus:ring-[#BF1363] focus:ring-opacity-50" required>
378
+ <option value="">Select Category</option>
379
+ <option value="food">Food</option>
380
+ <option value="transport">Transport</option>
381
+ <option value="clothing">Clothing</option>
382
+ <option value="housing">Housing</option>
383
+ <option value="entertainment">Entertainment</option>
384
+ <option value="utilities">Utilities</option>
385
+ <option value="health">Health</option>
386
+ <option value="other">Other</option>
387
+ </select>
388
+ </div>
389
+ <div>
390
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
391
+ <input type="date" class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#BF1363] focus:ring focus:ring-[#BF1363] focus:ring-opacity-50" value="2025-06-24" required>
392
+ </div>
393
+ </div>
394
+ <div class="mb-4">
395
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
396
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#BF1363] focus:ring focus:ring-[#BF1363] focus:ring-opacity-50" placeholder="What was this expense for?">
397
+ </div>
398
+ <button type="submit" class="bg-[#BF1363] text-white px-4 py-2 rounded-md hover:bg-[#9a0e4f] transition">Add Expense</button>
399
+ </form>
400
+
401
+ <div>
402
+ <h3 class="text-lg font-semibold mb-4 text-[#BF1363]">Recent Expenses</h3>
403
+ <div class="overflow-x-auto">
404
+ <table class="min-w-full divide-y divide-gray-200">
405
+ <thead class="bg-gray-50">
406
+ <tr>
407
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
408
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
409
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
410
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
411
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
412
+ </tr>
413
+ </thead>
414
+ <tbody class="bg-white divide-y divide-gray-200">
415
+ <tr>
416
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 23, 2025</td>
417
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Dinner at Italian Restaurant</td>
418
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Food</td>
419
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-$45.00</td>
420
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
421
+ <button class="text-[#BF1363] hover:text-[#9a0e4f] mr-2"><i class="fas fa-edit"></i></button>
422
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
423
+ </td>
424
+ </tr>
425
+ <tr>
426
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 19, 2025</td>
427
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Gas for car</td>
428
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Transport</td>
429
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-$35.00</td>
430
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
431
+ <button class="text-[#BF1363] hover:text-[#9a0e4f] mr-2"><i class="fas fa-edit"></i></button>
432
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
433
+ </td>
434
+ </tr>
435
+ <tr>
436
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 15, 2025</td>
437
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">New jeans</td>
438
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Clothing</td>
439
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-$65.00</td>
440
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
441
+ <button class="text-[#BF1363] hover:text-[#9a0e4f] mr-2"><i class="fas fa-edit"></i></button>
442
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
443
+ </td>
444
+ </tr>
445
+ </tbody>
446
+ </table>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </section>
451
+
452
+ <!-- Income Section -->
453
+ <section id="income" class="section-content hidden">
454
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
455
+ <h2 class="text-xl font-bold mb-6 text-[#0E79B2]">Track Your Income</h2>
456
+
457
+ <form id="incomeForm" class="mb-8">
458
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
459
+ <div>
460
+ <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
461
+ <div class="relative">
462
+ <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">$</span>
463
+ <input type="number" step="0.01" class="pl-8 w-full rounded-md border-gray-300 shadow-sm focus:border-[#0E79B2] focus:ring focus:ring-[#0E79B2] focus:ring-opacity-50" placeholder="0.00" required>
464
+ </div>
465
+ </div>
466
+ <div>
467
+ <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
468
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#0E79B2] focus:ring focus:ring-[#0E79B2] focus:ring-opacity-50" required>
469
+ <option value="">Select Category</option>
470
+ <option value="salary">Salary</option>
471
+ <option value="commission">Commission</option>
472
+ <option value="tips">Tips</option>
473
+ <option value="bonus">Bonus</option>
474
+ <option value="investment">Investment</option>
475
+ <option value="other">Other</option>
476
+ </select>
477
+ </div>
478
+ <div>
479
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
480
+ <input type="date" class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#0E79B2] focus:ring focus:ring-[#0E79B2] focus:ring-opacity-50" value="2025-06-24" required>
481
+ </div>
482
+ </div>
483
+ <div class="mb-4">
484
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
485
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#0E79B2] focus:ring focus:ring-[#0E79B2] focus:ring-opacity-50" placeholder="Source of income">
486
+ </div>
487
+ <button type="submit" class="bg-[#0E79B2] text-white px-4 py-2 rounded-md hover:bg-[#0b5d8a] transition">Add Income</button>
488
+ </form>
489
+
490
+ <div>
491
+ <h3 class="text-lg font-semibold mb-4 text-[#0E79B2]">Recent Income</h3>
492
+ <div class="overflow-x-auto">
493
+ <table class="min-w-full divide-y divide-gray-200">
494
+ <thead class="bg-gray-50">
495
+ <tr>
496
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
497
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
498
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
499
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
500
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
501
+ </tr>
502
+ </thead>
503
+ <tbody class="bg-white divide-y divide-gray-200">
504
+ <tr>
505
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 20, 2025</td>
506
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Monthly Salary</td>
507
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Salary</td>
508
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+$2,500.00</td>
509
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
510
+ <button class="text-[#0E79B2] hover:text-[#0b5d8a] mr-2"><i class="fas fa-edit"></i></button>
511
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
512
+ </td>
513
+ </tr>
514
+ <tr>
515
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 15, 2025</td>
516
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Sales Commission</td>
517
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Commission</td>
518
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+$1,000.00</td>
519
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
520
+ <button class="text-[#0E79B2] hover:text-[#0b5d8a] mr-2"><i class="fas fa-edit"></i></button>
521
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
522
+ </td>
523
+ </tr>
524
+ <tr>
525
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 10, 2025</td>
526
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Freelance Work</td>
527
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Other</td>
528
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+$250.00</td>
529
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
530
+ <button class="text-[#0E79B2] hover:text-[#0b5d8a] mr-2"><i class="fas fa-edit"></i></button>
531
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
532
+ </td>
533
+ </tr>
534
+ </tbody>
535
+ </table>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </section>
540
+
541
+ <!-- Savings Section -->
542
+ <section id="savings" class="section-content hidden">
543
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
544
+ <h2 class="text-xl font-bold mb-6 text-[#F39237]">Savings Plans</h2>
545
+
546
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
547
+ <div class="savings-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm transition">
548
+ <div class="flex items-center mb-4">
549
+ <div class="p-3 rounded-full bg-[#F39237] bg-opacity-10 mr-3">
550
+ <i class="fas fa-home text-[#F39237]"></i>
551
+ </div>
552
+ <h3 class="text-lg font-semibold">Household Products</h3>
553
+ </div>
554
+ <div class="mb-3">
555
+ <div class="flex justify-between text-sm mb-1">
556
+ <span>Saved: $450.00</span>
557
+ <span>Target: $1,000.00</span>
558
+ </div>
559
+ <div class="progress-bar">
560
+ <div class="progress-fill" style="width: 45%;"></div>
561
+ </div>
562
+ </div>
563
+ <div class="flex justify-between text-xs text-gray-500 mb-4">
564
+ <span>Started: May 1, 2025</span>
565
+ <span>Target Date: Aug 1, 2025</span>
566
+ </div>
567
+ <button class="w-full bg-[#F39237] bg-opacity-10 text-[#F39237] px-4 py-2 rounded-md hover:bg-opacity-20 transition">Add to Savings</button>
568
+ </div>
569
+
570
+ <div class="savings-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm transition">
571
+ <div class="flex items-center mb-4">
572
+ <div class="p-3 rounded-full bg-[#0E79B2] bg-opacity-10 mr-3">
573
+ <i class="fas fa-briefcase text-[#0E79B2]"></i>
574
+ </div>
575
+ <h3 class="text-lg font-semibold">Business Capital</h3>
576
+ </div>
577
+ <div class="mb-3">
578
+ <div class="flex justify-between text-sm mb-1">
579
+ <span>Saved: $1,500.00</span>
580
+ <span>Target: $5,000.00</span>
581
+ </div>
582
+ <div class="progress-bar">
583
+ <div class="progress-fill" style="width: 30%;"></div>
584
+ </div>
585
+ </div>
586
+ <div class="flex justify-between text-xs text-gray-500 mb-4">
587
+ <span>Started: Jan 1, 2025</span>
588
+ <span>Target Date: Dec 31, 2025</span>
589
+ </div>
590
+ <button class="w-full bg-[#0E79B2] bg-opacity-10 text-[#0E79B2] px-4 py-2 rounded-md hover:bg-opacity-20 transition">Add to Savings</button>
591
+ </div>
592
+
593
+ <div class="savings-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm transition">
594
+ <div class="flex items-center mb-4">
595
+ <div class="p-3 rounded-full bg-[#BF1363] bg-opacity-10 mr-3">
596
+ <i class="fas fa-first-aid text-[#BF1363]"></i>
597
+ </div>
598
+ <h3 class="text-lg font-semibold">Emergency Fund</h3>
599
+ </div>
600
+ <div class="mb-3">
601
+ <div class="flex justify-between text-sm mb-1">
602
+ <span>Saved: $3,250.00</span>
603
+ <span>Target: $5,000.00</span>
604
+ </div>
605
+ <div class="progress-bar">
606
+ <div class="progress-fill" style="width: 65%;"></div>
607
+ </div>
608
+ </div>
609
+ <div class="flex justify-between text-xs text-gray-500 mb-4">
610
+ <span>Started: Jan 1, 2025</span>
611
+ <span>Target Date: Oct 1, 2025</span>
612
+ </div>
613
+ <button class="w-full bg-[#BF1363] bg-opacity-10 text-[#BF1363] px-4 py-2 rounded-md hover:bg-opacity-20 transition">Add to Savings</button>
614
+ </div>
615
+ </div>
616
+
617
+ <div class="bg-gray-50 rounded-lg p-6">
618
+ <h3 class="text-lg font-semibold mb-4 text-[#191923]">Create New Savings Plan</h3>
619
+ <form id="savingsForm">
620
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
621
+ <div>
622
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal Name</label>
623
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#191923] focus:ring focus:ring-[#191923] focus:ring-opacity-50" placeholder="e.g. Vacation Fund" required>
624
+ </div>
625
+ <div>
626
+ <label class="block text-sm font-medium text-gray-700 mb-1">Target Amount</label>
627
+ <div class="relative">
628
+ <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">$</span>
629
+ <input type="number" step="0.01" class="pl-8 w-full rounded-md border-gray-300 shadow-sm focus:border-[#191923] focus:ring focus:ring-[#191923] focus:ring-opacity-50" placeholder="0.00" required>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
634
+ <div>
635
+ <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
636
+ <input type="date" class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#191923] focus:ring focus:ring-[#191923] focus:ring-opacity-50" value="2025-06-24" required>
637
+ </div>
638
+ <div>
639
+ <label class="block text-sm font-medium text-gray-700 mb-1">Target Date</label>
640
+ <input type="date" class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#191923] focus:ring focus:ring-[#191923] focus:ring-opacity-50" required>
641
+ </div>
642
+ </div>
643
+ <div class="mb-4">
644
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
645
+ <textarea class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#191923] focus:ring focus:ring-[#191923] focus:ring-opacity-50" rows="2" placeholder="What are you saving for?"></textarea>
646
+ </div>
647
+ <button type="submit" class="bg-[#191923] text-white px-4 py-2 rounded-md hover:bg-gray-800 transition">Create Savings Plan</button>
648
+ </form>
649
+ </div>
650
+ </div>
651
+ </section>
652
+
653
+ <!-- Calendar Section -->
654
+ <section id="calendar" class="section-content hidden">
655
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
656
+ <h2 class="text-xl font-bold mb-6 text-[#0E79B2]">Calendar</h2>
657
+
658
+ <div class="flex justify-between items-center mb-6">
659
+ <h3 class="text-lg font-semibold">June 2025</h3>
660
+ <div class="flex space-x-2">
661
+ <button class="p-2 rounded-full hover:bg-gray-100">
662
+ <i class="fas fa-chevron-left"></i>
663
+ </button>
664
+ <button class="p-2 rounded-full hover:bg-gray-100">
665
+ <i class="fas fa-chevron-right"></i>
666
+ </button>
667
+ </div>
668
+ </div>
669
+
670
+ <div class="grid grid-cols-7 gap-1 mb-2">
671
+ <div class="text-center font-medium text-sm py-2">Sun</div>
672
+ <div class="text-center font-medium text-sm py-2">Mon</div>
673
+ <div class="text-center font-medium text-sm py-2">Tue</div>
674
+ <div class="text-center font-medium text-sm py-2">Wed</div>
675
+ <div class="text-center font-medium text-sm py-2">Thu</div>
676
+ <div class="text-center font-medium text-sm py-2">Fri</div>
677
+ <div class="text-center font-medium text-sm py-2">Sat</div>
678
+ </div>
679
+
680
+ <div class="grid grid-cols-7 gap-1">
681
+ <!-- Previous month days -->
682
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm"></div>
683
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm"></div>
684
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm"></div>
685
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm"></div>
686
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm"></div>
687
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm">1</div>
688
+
689
+ <!-- Current month days -->
690
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">2</div>
691
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">3</div>
692
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">4</div>
693
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">5</div>
694
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">6</div>
695
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">7</div>
696
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">8</div>
697
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">9</div>
698
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">10</div>
699
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">11</div>
700
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">12</div>
701
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">13</div>
702
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">14</div>
703
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">15</div>
704
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">16</div>
705
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">17</div>
706
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">18</div>
707
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">19</div>
708
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">20</div>
709
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded bg-[#0E79B2] bg-opacity-10 text-sm">
710
+ <span class="font-semibold">21</span>
711
+ <div class="text-xs truncate">Salary Due</div>
712
+ </div>
713
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">22</div>
714
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded bg-[#BF1363] bg-opacity-10 text-sm">
715
+ <span class="font-semibold">23</span>
716
+ <div class="text-xs truncate">Dinner Out</div>
717
+ </div>
718
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded bg-[#F39237] text-white text-sm">
719
+ <span class="font-semibold">24</span>
720
+ <div class="text-xs truncate">Today</div>
721
+ </div>
722
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">25</div>
723
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">26</div>
724
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">27</div>
725
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">28</div>
726
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">29</div>
727
+ <div class="calendar-day h-16 p-1 border border-gray-200 rounded text-sm">30</div>
728
+
729
+ <!-- Next month days -->
730
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm">1</div>
731
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm">2</div>
732
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm">3</div>
733
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm">4</div>
734
+ <div class="calendar-day h-16 p-1 text-gray-400 text-sm">5</div>
735
+ </div>
736
+ </div>
737
+
738
+ <div class="bg-white rounded-lg shadow p-6">
739
+ <h3 class="text-lg font-semibold mb-4 text-[#191923]">Upcoming Events</h3>
740
+ <div class="space-y-4">
741
+ <div class="flex items-start p-3 rounded-lg border border-gray-200">
742
+ <div class="p-2 rounded-full bg-[#0E79B2] bg-opacity-10 mr-3">
743
+ <i class="fas fa-money-bill-wave text-[#0E79B2]"></i>
744
+ </div>
745
+ <div>
746
+ <h4 class="font-medium">Salary Payment</h4>
747
+ <p class="text-sm text-gray-600">June 21, 2025</p>
748
+ <p class="text-sm mt-1">Expected amount: $2,500.00</p>
749
+ </div>
750
+ </div>
751
+ <div class="flex items-start p-3 rounded-lg border border-gray-200">
752
+ <div class="p-2 rounded-full bg-[#BF1363] bg-opacity-10 mr-3">
753
+ <i class="fas fa-utensils text-[#BF1363]"></i>
754
+ </div>
755
+ <div>
756
+ <h4 class="font-medium">Dinner Reservation</h4>
757
+ <p class="text-sm text-gray-600">June 23, 2025</p>
758
+ <p class="text-sm mt-1">Italian Restaurant - 7:30 PM</p>
759
+ </div>
760
+ </div>
761
+ <div class="flex items-start p-3 rounded-lg border border-gray-200">
762
+ <div class="p-2 rounded-full bg-[#F39237] bg-opacity-10 mr-3">
763
+ <i class="fas fa-piggy-bank text-[#F39237]"></i>
764
+ </div>
765
+ <div>
766
+ <h4 class="font-medium">Savings Deposit</h4>
767
+ <p class="text-sm text-gray-600">June 30, 2025</p>
768
+ <p class="text-sm mt-1">Plan to deposit $500 to Emergency Fund</p>
769
+ </div>
770
+ </div>
771
+ </div>
772
+ </div>
773
+ </section>
774
+
775
+ <!-- Reports Section -->
776
+ <section id="reports" class="section-content hidden">
777
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
778
+ <h2 class="text-xl font-bold mb-6 text-[#191923]">Monthly Reports</h2>
779
+
780
+ <div class="mb-8">
781
+ <div class="flex justify-between items-center mb-4">
782
+ <h3 class="text-lg font-semibold text-[#0E79B2]">June 2025 Financial Report</h3>
783
+ <button class="bg-[#0E79B2] text-white px-4 py-2 rounded-md hover:bg-[#0b5d8a] transition flex items-center">
784
+ <i class="fas fa-download mr-2"></i> Download PDF
785
+ </button>
786
+ </div>
787
+
788
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
789
+ <div class="bg-gray-50 rounded-lg p-4">
790
+ <h4 class="font-medium mb-2 text-[#BF1363]">Income Summary</h4>
791
+ <p class="text-sm text-gray-700 mb-3">
792
+ Total income for June 2025 was <span class="font-semibold text-green-500">$3,500.00</span>,
793
+ which is consistent with your average monthly income. Your primary income source was Salary
794
+ ($2,500.00), accounting for 71% of your total income.
795
+ </p>
796
+ <div class="text-xs text-gray-500">
797
+ <div class="flex justify-between mb-1">
798
+ <span>Salary</span>
799
+ <span>$2,500.00</span>
800
+ </div>
801
+ <div class="flex justify-between">
802
+ <span>Commission</span>
803
+ <span>$1,000.00</span>
804
+ </div>
805
+ </div>
806
+ </div>
807
+
808
+ <div class="bg-gray-50 rounded-lg p-4">
809
+ <h4 class="font-medium mb-2 text-[#BF1363]">Expense Summary</h4>
810
+ <p class="text-sm text-gray-700 mb-3">
811
+ Your total expenses for June were <span class="font-semibold text-red-500">$1,250.00</span>,
812
+ representing 36% of your income. The largest expense category was Food at $450.00 (36% of expenses),
813
+ followed by Transport at $300.00 (24%).
814
+ </p>
815
+ <div class="text-xs text-gray-500">
816
+ <div class="flex justify-between mb-1">
817
+ <span>Food</span>
818
+ <span>$450.00</span>
819
+ </div>
820
+ <div class="flex justify-between mb-1">
821
+ <span>Transport</span>
822
+ <span>$300.00</span>
823
+ </div>
824
+ <div class="flex justify-between">
825
+ <span>Other</span>
826
+ <span>$500.00</span>
827
+ </div>
828
+ </div>
829
+ </div>
830
+
831
+ <div class="bg-gray-50 rounded-lg p-4">
832
+ <h4 class="font-medium mb-2 text-[#BF1363]">Savings Summary</h4>
833
+ <p class="text-sm text-gray-700 mb-3">
834
+ You saved <span class="font-semibold text-[#F39237]">$750.00</span> this month, which is 21% of
835
+ your income. Your Emergency Fund is now at 65% of its $5,000 target, while your Household Products
836
+ fund is at 45% of its $1,000 goal.
837
+ </p>
838
+ <div class="text-xs text-gray-500">
839
+ <div class="flex justify-between mb-1">
840
+ <span>Emergency Fund</span>
841
+ <span>$3,250.00/$5,000</span>
842
+ </div>
843
+ <div class="flex justify-between">
844
+ <span>Household</span>
845
+ <span>$450.00/$1,000</span>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ </div>
850
+
851
+ <div class="bg-white border border-gray-200 rounded-lg p-6">
852
+ <h4 class="font-medium mb-4 text-[#191923]">Financial Health Analysis</h4>
853
+ <p class="text-gray-700 mb-4">
854
+ Your financial health remains strong this month. With expenses accounting for only 36% of your income
855
+ and savings at 21%, you're maintaining a healthy balance between spending and saving. Your savings
856
+ rate is above the recommended 20%, which puts you in a good position to meet your financial goals.
857
+ </p>
858
+ <p class="text-gray-700">
859
+ If you're looking to improve further, consider reviewing your food expenses, which are your largest
860
+ spending category. Small reductions here could significantly boost your savings rate without
861
+ dramatically impacting your lifestyle. Your Emergency Fund is progressing well at 65% completion -
862
+ maintaining this savings rate will have it fully funded by October as planned.
863
+ </p>
864
+ </div>
865
+ </div>
866
+
867
+ <div>
868
+ <h3 class="text-lg font-semibold mb-4 text-[#191923]">Historical Reports</h3>
869
+ <div class="overflow-x-auto">
870
+ <table class="min-w-full divide-y divide-gray-200">
871
+ <thead class="bg-gray-50">
872
+ <tr>
873
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Month</th>
874
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Income</th>
875
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expenses</th>
876
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Savings</th>
877
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Savings Rate</th>
878
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
879
+ </tr>
880
+ </thead>
881
+ <tbody class="bg-white divide-y divide-gray-200">
882
+ <tr>
883
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">June 2025</td>
884
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">$3,500.00</td>
885
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">$1,250.00</td>
886
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-[#F39237]">$750.00</td>
887
+ <td class="px-6 py-4 whitespace-nowrap text-sm">21%</td>
888
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
889
+ <button class="text-[#0E79B2] hover:text-[#0b5d8a] mr-2"><i class="fas fa-eye"></i></button>
890
+ <button class="text-[#BF1363] hover:text-[#9a0e4f]"><i class="fas fa-download"></i></button>
891
+ </td>
892
+ </tr>
893
+ <tr>
894
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">May 2025</td>
895
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">$3,750.00</td>
896
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">$1,500.00</td>
897
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-[#F39237]">$500.00</td>
898
+ <td class="px-6 py-4 whitespace-nowrap text-sm">13%</td>
899
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
900
+ <button class="text-[#0E79B2] hover:text-[#0b5d8a] mr-2"><i class="fas fa-eye"></i></button>
901
+ <button class="text-[#BF1363] hover:text-[#9a0e4f]"><i class="fas fa-download"></i></button>
902
+ </td>
903
+ </tr>
904
+ <tr>
905
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">April 2025</td>
906
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">$3,200.00</td>
907
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">$1,200.00</td>
908
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-[#F39237]">$800.00</td>
909
+ <td class="px-6 py-4 whitespace-nowrap text-sm">25%</td>
910
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
911
+ <button class="text-[#0E79B2] hover:text-[#0b5d8a] mr-2"><i class="fas fa-eye"></i></button>
912
+ <button class="text-[#BF1363] hover:text-[#9a0e4f]"><i class="fas fa-download"></i></button>
913
+ </td>
914
+ </tr>
915
+ </tbody>
916
+ </table>
917
+ </div>
918
+ </div>
919
+ </div>
920
+ </section>
921
+
922
+ <!-- To-Do List Section -->
923
+ <section id="todo" class="section-content hidden">
924
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
925
+ <h2 class="text-xl font-bold mb-6 text-[#191923]">To-Do List</h2>
926
+
927
+ <form id="todoForm" class="mb-8">
928
+ <div class="flex mb-4">
929
+ <input type="text" class="flex-grow rounded-l-md border-gray-300 shadow-sm focus:border-[#191923] focus:ring focus:ring-[#191923] focus:ring-opacity-50" placeholder="What needs to be done?" required>
930
+ <button type="submit" class="bg-[#191923] text-white px-4 py-2 rounded-r-md hover:bg-gray-800 transition">Add Task</button>
931
+ </div>
932
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
933
+ <div>
934
+ <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
935
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#191923] focus:ring focus:ring-[#191923] focus:ring-opacity-50">
936
+ <option value="personal">Personal</option>
937
+ <option value="work">Work</option>
938
+ <option value="finance">Finance</option>
939
+ <option value="health">Health</option>
940
+ </select>
941
+ </div>
942
+ <div>
943
+ <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
944
+ <input type="date" class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#191923] focus:ring focus:ring-[#191923] focus:ring-opacity-50">
945
+ </div>
946
+ </div>
947
+ </form>
948
+
949
+ <div class="mb-6">
950
+ <div class="flex justify-between items-center mb-4">
951
+ <h3 class="text-lg font-semibold">Tasks</h3>
952
+ <div class="flex space-x-2">
953
+ <button class="px-3 py-1 text-sm rounded-md border border-gray-300 hover:bg-gray-50">All</button>
954
+ <button class="px-3 py-1 text-sm rounded-md border border-gray-300 hover:bg-gray-50">Active</button>
955
+ <button class="px-3 py-1 text-sm rounded-md border border-gray-300 hover:bg-gray-50">Completed</button>
956
+ </div>
957
+ </div>
958
+
959
+ <div class="space-y-3">
960
+ <div class="flex items-center p-3 rounded-lg border border-gray-200">
961
+ <input type="checkbox" class="rounded text-[#0E79B2] focus:ring-[#0E79B2] mr-3">
962
+ <div class="flex-grow">
963
+ <p class="font-medium">Review monthly expenses</p>
964
+ <div class="flex items-center text-xs text-gray-500 mt-1">
965
+ <i class="fas fa-calendar-day mr-1"></i>
966
+ <span class="mr-3">Due: June 25, 2025</span>
967
+ <i class="fas fa-tag mr-1"></i>
968
+ <span>Finance</span>
969
+ </div>
970
+ </div>
971
+ <button class="text-red-500 hover:text-red-700 ml-2">
972
+ <i class="fas fa-trash"></i>
973
+ </button>
974
+ </div>
975
+
976
+ <div class="flex items-center p-3 rounded-lg border border-gray-200 bg-gray-50">
977
+ <input type="checkbox" class="rounded text-[#0E79B2] focus:ring-[#0E79B2] mr-3" checked>
978
+ <div class="flex-grow">
979
+ <p class="font-medium text-gray-400 line-through">Deposit $500 to Emergency Fund</p>
980
+ <div class="flex items-center text-xs text-gray-400 mt-1">
981
+ <i class="fas fa-calendar-day mr-1"></i>
982
+ <span class="mr-3">Completed: June 20, 2025</span>
983
+ <i class="fas fa-tag mr-1"></i>
984
+ <span>Finance</span>
985
+ </div>
986
+ </div>
987
+ <button class="text-red-500 hover:text-red-700 ml-2">
988
+ <i class="fas fa-trash"></i>
989
+ </button>
990
+ </div>
991
+
992
+ <div class="flex items-center p-3 rounded-lg border border-gray-200">
993
+ <input type="checkbox" class="rounded text-[#0E79B2] focus:ring-[#0E79B2] mr-3">
994
+ <div class="flex-grow">
995
+ <p class="font-medium">Schedule dentist appointment</p>
996
+ <div class="flex items-center text-xs text-gray-500 mt-1">
997
+ <i class="fas fa-calendar-day mr-1"></i>
998
+ <span class="mr-3">Due: June 30, 2025</span>
999
+ <i class="fas fa-tag mr-1"></i>
1000
+ <span>Health</span>
1001
+ </div>
1002
+ </div>
1003
+ <button class="text-red-500 hover:text-red-700 ml-2">
1004
+ <i class="fas fa-trash"></i>
1005
+ </button>
1006
+ </div>
1007
+
1008
+ <div class="flex items-center p-3 rounded-lg border border-gray-200">
1009
+ <input type="checkbox" class="rounded text-[#0E79B2] focus:ring-[#0E79B2] mr-3">
1010
+ <div class="flex-grow">
1011
+ <p class="font-medium">Research business investment options</p>
1012
+ <div class="flex items-center text-xs text-gray-500 mt-1">
1013
+ <i class="fas fa-calendar-day mr-1"></i>
1014
+ <span class="mr-3">Due: July 5, 2025</span>
1015
+ <i class="fas fa-tag mr-1"></i>
1016
+ <span>Work</span>
1017
+ </div>
1018
+ </div>
1019
+ <button class="text-red-500 hover:text-red-700 ml-2">
1020
+ <i class="fas fa-trash"></i>
1021
+ </button>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+
1026
+ <div class="bg-gray-50 rounded-lg p-4">
1027
+ <h3 class="text-lg font-semibold mb-3 text-[#191923]">Task Statistics</h3>
1028
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
1029
+ <div class="bg-white rounded-lg p-3 shadow-sm text-center">
1030
+ <div class="text-2xl font-bold text-[#0E79B2]">4</div>
1031
+ <div class="text-xs text-gray-500">Total Tasks</div>
1032
+ </div>
1033
+ <div class="bg-white rounded-lg p-3 shadow-sm text-center">
1034
+ <div class="text-2xl font-bold text-green-500">1</div>
1035
+ <div class="text-xs text-gray-500">Completed</div>
1036
+ </div>
1037
+ <div class="bg-white rounded-lg p-3 shadow-sm text-center">
1038
+ <div class="text-2xl font-bold text-[#BF1363]">3</div>
1039
+ <div class="text-xs text-gray-500">Pending</div>
1040
+ </div>
1041
+ <div class="bg-white rounded-lg p-3 shadow-sm text-center">
1042
+ <div class="text-2xl font-bold text-[#F39237]">1</div>
1043
+ <div class="text-xs text-gray-500">Overdue</div>
1044
+ </div>
1045
+ </div>
1046
+ </div>
1047
+ </div>
1048
+ </section>
1049
+ </main>
1050
+ </div>
1051
+
1052
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1053
+ <script>
1054
+ // Mobile menu toggle
1055
+ const menuBtn = document.getElementById('menuBtn');
1056
+ const closeMenuBtn = document.getElementById('closeMenuBtn');
1057
+ const sidebar = document.getElementById('sidebar');
1058
+ const overlay = document.getElementById('overlay');
1059
+
1060
+ menuBtn.addEventListener('click', () => {
1061
+ sidebar.classList.add('active');
1062
+ overlay.classList.add('active');
1063
+ });
1064
+
1065
+ closeMenuBtn.addEventListener('click', () => {
1066
+ sidebar.classList.remove('active');
1067
+ overlay.classList.remove('active');
1068
+ });
1069
+
1070
+ overlay.addEventListener('click', () => {
1071
+ sidebar.classList.remove('active');
1072
+ overlay.classList.remove('active');
1073
+ });
1074
+
1075
+ // Show/hide sections
1076
+ function showSection(sectionId) {
1077
+ // Hide all sections
1078
+ document.querySelectorAll('.section-content').forEach(section => {
1079
+ section.classList.add('hidden');
1080
+ });
1081
+
1082
+ // Show selected section
1083
+ document.getElementById(sectionId).classList.remove('hidden');
1084
+
1085
+ // Update current section title
1086
+ const sectionTitles = {
1087
+ 'dashboard': 'Dashboard',
1088
+ 'expenses': 'Expenses',
1089
+ 'income': 'Income',
1090
+ 'savings': 'Savings',
1091
+ 'calendar': 'Calendar',
1092
+ 'reports': 'Reports',
1093
+ 'todo': 'To-Do List'
1094
+ };
1095
+ document.getElementById('currentSection').textContent = sectionTitles[sectionId];
1096
+
1097
+ // Close mobile menu if open
1098
+ sidebar.classList.remove('active');
1099
+ overlay.classList.remove('active');
1100
+ }
1101
+
1102
+ // Initialize charts
1103
+ function initCharts() {
1104
+ // Expense Chart
1105
+ const expenseCtx = document.getElementById('expenseChart').getContext('2d');
1106
+ const expenseChart = new Chart(expenseCtx, {
1107
+ type: 'doughnut',
1108
+ data: {
1109
+ labels: ['Food', 'Transport', 'Clothing', 'Housing', 'Entertainment', 'Utilities', 'Health', 'Other'],
1110
+ datasets: [{
1111
+ data: [450, 300, 65, 200, 50, 75, 30, 80],
1112
+ backgroundColor: [
1113
+ '#BF1363',
1114
+ '#F39237',
1115
+ '#0E79B2',
1116
+ '#191923',
1117
+ '#FBFEF9',
1118
+ '#BF1363',
1119
+ '#F39237',
1120
+ '#0E79B2'
1121
+ ],
1122
+ borderWidth: 1
1123
+ }]
1124
+ },
1125
+ options: {
1126
+ responsive: true,
1127
+ maintainAspectRatio: false,
1128
+ plugins: {
1129
+ legend: {
1130
+ position: 'right',
1131
+ }
1132
+ }
1133
+ }
1134
+ });
1135
+
1136
+ // Income Chart
1137
+ const incomeCtx = document.getElementById('incomeChart').getContext('2d');
1138
+ const incomeChart = new Chart(incomeCtx, {
1139
+ type: 'bar',
1140
+ data: {
1141
+ labels: ['Salary', 'Commission', 'Tips', 'Bonus', 'Investment', 'Other'],
1142
+ datasets: [{
1143
+ label: 'Income by Source',
1144
+ data: [2500, 1000, 0, 0, 0, 0],
1145
+ backgroundColor: [
1146
+ '#0E79B2',
1147
+ '#BF1363',
1148
+ '#F39237',
1149
+ '#191923',
1150
+ '#FBFEF9',
1151
+ '#0E79B2'
1152
+ ],
1153
+ borderWidth: 1
1154
+ }]
1155
+ },
1156
+ options: {
1157
+ responsive: true,
1158
+ maintainAspectRatio: false,
1159
+ scales: {
1160
+ y: {
1161
+ beginAtZero: true
1162
+ }
1163
+ }
1164
+ }
1165
+ });
1166
+ }
1167
+
1168
+ // Initialize form submissions
1169
+ function initForms() {
1170
+ // Expense form
1171
+ document.getElementById('expenseForm').addEventListener('submit', function(e) {
1172
+ e.preventDefault();
1173
+ alert('Expense added successfully!');
1174
+ this.reset();
1175
+ });
1176
+
1177
+ // Income form
1178
+ document.getElementById('incomeForm').addEventListener('submit', function(e) {
1179
+ e.preventDefault();
1180
+ alert('Income added successfully!');
1181
+ this.reset();
1182
+ });
1183
+
1184
+ // Savings form
1185
+ document.getElementById('savingsForm').addEventListener('submit', function(e) {
1186
+ e.preventDefault();
1187
+ alert('Savings plan created successfully!');
1188
+ this.reset();
1189
+ });
1190
+
1191
+ // Todo form
1192
+ document.getElementById('todoForm').addEventListener('submit', function(e) {
1193
+ e.preventDefault();
1194
+ alert('Task added successfully!');
1195
+ this.reset();
1196
+ });
1197
+ }
1198
+
1199
+ // Initialize the app
1200
+ document.addEventListener('DOMContentLoaded', function() {
1201
+ initCharts();
1202
+ initForms();
1203
+ });
1204
+ </script>
1205
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Khatvathiren/fin-track" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1206
+ </html>