Hugging Face's logo

Spaces:
Jeremy8776
/
accounting-app
Running

App Files Community
Jeremy8776 commited on
Commit
0e22d49
·
verified ·
1 Parent(s): 3e1a5ea

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +271 -192
index.html CHANGED
@@ -8,14 +8,34 @@
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script>
10
  tailwind.config = {
 
11
  theme: {
12
  extend: {
13
  colors: {
14
- primary: '#4F46E5',
15
- secondary: '#10B981',
16
- danger: '#EF4444',
17
- warning: '#F59E0B',
18
- info: '#3B82F6'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
  }
21
  }
@@ -38,69 +58,105 @@
38
  transform: translateX(0);
39
  }
40
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  </style>
42
  </head>
43
- <body class="bg-gray-50 font-sans">
44
  <div class="flex h-screen overflow-hidden">
45
  <!-- Sidebar -->
46
- <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
47
- <div class="p-4 border-b border-gray-200">
48
- <h1 class="text-xl font-bold text-primary flex items-center">
49
- <i class="fas fa-calculator mr-2"></i> AccountPro
50
  </h1>
51
  </div>
52
  <nav class="flex-1 overflow-y-auto p-4">
53
  <div class="space-y-1">
54
- <a href="#" class="flex items-center space-x-2 px-4 py-3 bg-indigo-50 text-primary rounded-lg font-medium">
55
- <i class="fas fa-tachometer-alt"></i>
56
  <span>Dashboard</span>
57
  </a>
58
- <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
59
- <i class="fas fa-file-invoice-dollar"></i>
60
  <span>Invoices</span>
61
  </a>
62
- <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
63
- <i class="fas fa-receipt"></i>
64
  <span>Expenses</span>
65
  </a>
66
- <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
67
- <i class="fas fa-users"></i>
68
  <span>Clients</span>
69
  </a>
70
- <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
71
- <i class="fas fa-chart-line"></i>
72
  <span>Reports</span>
73
  </a>
74
- <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
75
- <i class="fas fa-cog"></i>
76
  <span>Settings</span>
77
  </a>
78
  </div>
79
  <div class="mt-8">
80
  <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 mb-2">Quick Actions</h3>
81
  <div class="space-y-1">
82
- <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm">
83
- <i class="fas fa-plus-circle text-primary"></i>
84
  <span>Create Invoice</span>
85
  </a>
86
- <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm">
87
- <i class="fas fa-file-import text-secondary"></i>
88
  <span>Import Data</span>
89
  </a>
90
- <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm">
91
- <i class="fas fa-file-export text-warning"></i>
92
  <span>Export Reports</span>
93
  </a>
94
  </div>
95
  </div>
96
  </nav>
97
- <div class="p-4 border-t border-gray-200">
98
  <div class="flex items-center space-x-3">
99
- <div class="w-9 h-9 rounded-full bg-primary flex items-center justify-center text-white">
100
  <span>JD</span>
101
  </div>
102
  <div>
103
- <p class="text-sm font-medium">John Doe</p>
104
  <p class="text-xs text-gray-500">Admin</p>
105
  </div>
106
  </div>
@@ -110,29 +166,32 @@
110
  <!-- Main Content -->
111
  <div class="flex-1 flex flex-col overflow-hidden">
112
  <!-- Top Navigation -->
113
- <header class="bg-white border-b border-gray-200">
114
  <div class="flex items-center justify-between px-6 py-4">
115
  <div class="flex items-center">
116
- <button id="sidebarToggle" class="md:hidden text-gray-500 mr-4">
117
- <i class="fas fa-bars text-xl"></i>
118
  </button>
119
- <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
120
  </div>
121
  <div class="flex items-center space-x-4">
 
 
 
122
  <div class="relative">
123
- <button class="text-gray-500 hover:text-gray-700">
124
- <i class="fas fa-bell text-xl"></i>
125
  <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
126
  </button>
127
  </div>
128
  <div class="relative">
129
- <button class="text-gray-500 hover:text-gray-700">
130
- <i class="fas fa-envelope text-xl"></i>
131
- <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
132
  </button>
133
  </div>
134
  <div class="relative">
135
- <select class="appearance-none bg-gray-100 border-none rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary">
136
  <option>This Month</option>
137
  <option>Last Month</option>
138
  <option>This Quarter</option>
@@ -144,61 +203,61 @@
144
  </header>
145
 
146
  <!-- Dashboard Content -->
147
- <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
148
  <!-- Summary Cards -->
149
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
150
- <div class="bg-white rounded-xl shadow-sm p-6">
151
  <div class="flex items-center justify-between">
152
  <div>
153
- <p class="text-sm font-medium text-gray-500">Total Revenue</p>
154
- <h3 class="text-2xl font-bold mt-1">$24,780</h3>
155
- <p class="text-sm text-green-500 mt-1 flex items-center">
156
  <i class="fas fa-arrow-up mr-1"></i> 12.5% from last month
157
  </p>
158
  </div>
159
- <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
160
  <i class="fas fa-dollar-sign text-xl"></i>
161
  </div>
162
  </div>
163
  </div>
164
- <div class="bg-white rounded-xl shadow-sm p-6">
165
  <div class="flex items-center justify-between">
166
  <div>
167
- <p class="text-sm font-medium text-gray-500">Total Expenses</p>
168
- <h3 class="text-2xl font-bold mt-1">$8,420</h3>
169
- <p class="text-sm text-red-500 mt-1 flex items-center">
170
  <i class="fas fa-arrow-up mr-1"></i> 3.2% from last month
171
  </p>
172
  </div>
173
- <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600">
174
  <i class="fas fa-receipt text-xl"></i>
175
  </div>
176
  </div>
177
  </div>
178
- <div class="bg-white rounded-xl shadow-sm p-6">
179
  <div class="flex items-center justify-between">
180
  <div>
181
- <p class="text-sm font-medium text-gray-500">Profit</p>
182
- <h3 class="text-2xl font-bold mt-1">$16,360</h3>
183
- <p class="text-sm text-green-500 mt-1 flex items-center">
184
  <i class="fas fa-arrow-up mr-1"></i> 18.7% from last month
185
  </p>
186
  </div>
187
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
188
- <i class="fas fa-chart-line text-xl"></i>
189
  </div>
190
  </div>
191
  </div>
192
- <div class="bg-white rounded-xl shadow-sm p-6">
193
  <div class="flex items-center justify-between">
194
  <div>
195
- <p class="text-sm font-medium text-gray-500">Unpaid Invoices</p>
196
- <h3 class="text-2xl font-bold mt-1">$5,430</h3>
197
- <p class="text-sm text-yellow-500 mt-1 flex items-center">
198
  <i class="fas fa-exclamation-circle mr-1"></i> 7 overdue
199
  </p>
200
  </div>
201
- <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
202
  <i class="fas fa-file-invoice text-xl"></i>
203
  </div>
204
  </div>
@@ -208,30 +267,30 @@
208
  <!-- Charts Row -->
209
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
210
  <!-- Revenue Chart -->
211
- <div class="bg-white rounded-xl shadow-sm p-6">
212
  <div class="flex items-center justify-between mb-6">
213
- <h3 class="text-lg font-semibold">Revenue Overview</h3>
214
  <div class="flex space-x-2">
215
- <button class="px-3 py-1 text-xs bg-indigo-50 text-primary rounded-lg">Monthly</button>
216
- <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Quarterly</button>
217
  </div>
218
  </div>
219
  <div class="chart-container">
220
- <canvas id="revenueChart"></canvas>
221
  </div>
222
  </div>
223
 
224
  <!-- Expense Breakdown -->
225
- <div class="bg-white rounded-xl shadow-sm p-6">
226
  <div class="flex items-center justify-between mb-6">
227
- <h3 class="text-lg font-semibold">Expense Breakdown</h3>
228
  <div class="flex space-x-2">
229
- <button class="px-3 py-1 text-xs bg-indigo-50 text-primary rounded-lg">Categories</button>
230
- <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Vendors</button>
231
  </div>
232
  </div>
233
  <div class="chart-container">
234
- <canvas id="expenseChart"></canvas>
235
  </div>
236
  </div>
237
  </div>
@@ -239,122 +298,122 @@
239
  <!-- Recent Transactions and Quick Stats -->
240
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
241
  <!-- Recent Transactions -->
242
- <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
243
  <div class="flex items-center justify-between mb-6">
244
- <h3 class="text-lg font-semibold">Recent Transactions</h3>
245
- <a href="#" class="text-sm text-primary font-medium">View All</a>
246
  </div>
247
  <div class="space-y-4">
248
- <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
249
  <div class="flex items-center space-x-3">
250
- <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
251
  <i class="fas fa-dollar-sign"></i>
252
  </div>
253
  <div>
254
- <p class="font-medium">Invoice Payment</p>
255
- <p class="text-sm text-gray-500">From Acme Corp</p>
256
  </div>
257
  </div>
258
  <div class="text-right">
259
- <p class="font-medium text-green-600">+$2,500.00</p>
260
- <p class="text-sm text-gray-500">2 days ago</p>
261
  </div>
262
  </div>
263
- <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
264
  <div class="flex items-center space-x-3">
265
- <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
266
  <i class="fas fa-shopping-cart"></i>
267
  </div>
268
  <div>
269
- <p class="font-medium">Office Supplies</p>
270
- <p class="text-sm text-gray-500">Staples</p>
271
  </div>
272
  </div>
273
  <div class="text-right">
274
- <p class="font-medium text-red-600">-$189.50</p>
275
- <p class="text-sm text-gray-500">3 days ago</p>
276
  </div>
277
  </div>
278
- <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
279
  <div class="flex items-center space-x-3">
280
- <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
281
- <i class="fas fa-file-invoice"></i>
282
  </div>
283
  <div>
284
- <p class="font-medium">Invoice Sent</p>
285
- <p class="text-sm text-gray-500">To Beta LLC</p>
286
  </div>
287
  </div>
288
  <div class="text-right">
289
- <p class="font-medium text-blue-600">$3,750.00</p>
290
- <p class="text-sm text-gray-500">5 days ago</p>
291
  </div>
292
  </div>
293
- <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
294
  <div class="flex items-center space-x-3">
295
- <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
296
  <i class="fas fa-wifi"></i>
297
  </div>
298
  <div>
299
- <p class="font-medium">Software Subscription</p>
300
- <p class="text-sm text-gray-500">Adobe Creative Cloud</p>
301
  </div>
302
  </div>
303
  <div class="text-right">
304
- <p class="font-medium text-red-600">-$52.99</p>
305
- <p class="text-sm text-gray-500">1 week ago</p>
306
  </div>
307
  </div>
308
  </div>
309
  </div>
310
 
311
  <!-- Quick Stats -->
312
- <div class="bg-white rounded-xl shadow-sm p-6">
313
  <div class="mb-6">
314
- <h3 class="text-lg font-semibold">Quick Stats</h3>
315
  </div>
316
  <div class="space-y-4">
317
- <div class="bg-gray-50 p-4 rounded-lg">
318
  <div class="flex items-center justify-between">
319
  <div>
320
- <p class="text-sm font-medium text-gray-500">Invoices Sent</p>
321
- <h3 class="text-xl font-bold mt-1">24</h3>
322
  </div>
323
- <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-primary">
324
- <i class="fas fa-paper-plane"></i>
325
  </div>
326
  </div>
327
  </div>
328
- <div class="bg-gray-50 p-4 rounded-lg">
329
  <div class="flex items-center justify-between">
330
  <div>
331
- <p class="text-sm font-medium text-gray-500">Bills to Pay</p>
332
- <h3 class="text-xl font-bold mt-1">8</h3>
333
  </div>
334
- <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500">
335
- <i class="fas fa-file-invoice-dollar"></i>
336
  </div>
337
  </div>
338
  </div>
339
- <div class="bg-gray-50 p-4 rounded-lg">
340
  <div class="flex items-center justify-between">
341
  <div>
342
- <p class="text-sm font-medium text-gray-500">Upcoming Payments</p>
343
- <h3 class="text-xl font-bold mt-1">3</h3>
344
  </div>
345
- <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500">
346
- <i class="fas fa-clock"></i>
347
  </div>
348
  </div>
349
  </div>
350
- <div class="bg-gray-50 p-4 rounded-lg">
351
  <div class="flex items-center justify-between">
352
  <div>
353
- <p class="text-sm font-medium text-gray-500">Tax Due</p>
354
- <h3 class="text-xl font-bold mt-1">$2,450</h3>
355
  </div>
356
- <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
357
- <i class="fas fa-percentage"></i>
358
  </div>
359
  </div>
360
  </div>
@@ -372,86 +431,106 @@
372
  document.querySelector('.sidebar').classList.toggle('active');
373
  });
374
 
375
- // Revenue Chart
376
- const revenueCtx = document.getElementById('revenueChart').getContext('2d');
377
- const revenueChart = new Chart(revenueCtx, {
378
- type: 'line',
379
- data: {
380
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
381
- datasets: [{
382
- label: 'Revenue',
383
- data: [6500, 5900, 8000, 8100, 5600, 8500, 7300],
384
- backgroundColor: 'rgba(79, 70, 229, 0.1)',
385
- borderColor: '#4F46E5',
386
- borderWidth: 2,
387
- tension: 0.3,
388
- fill: true
389
- }]
390
- },
391
- options: {
392
- responsive: true,
393
- maintainAspectRatio: false,
394
- plugins: {
395
- legend: {
396
- display: false
397
- }
398
  },
399
- scales: {
400
- y: {
401
- beginAtZero: true,
402
- grid: {
403
- drawBorder: false
 
404
  }
405
  },
406
- x: {
407
- grid: {
408
- display: false
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
409
  }
410
  }
411
  }
412
- }
413
- });
414
 
415
- // Expense Chart
416
- const expenseCtx = document.getElementById('expenseChart').getContext('2d');
417
- const expenseChart = new Chart(expenseCtx, {
418
- type: 'doughnut',
419
- data: {
420
- labels: ['Office', 'Salaries', 'Marketing', 'Software', 'Utilities'],
421
- datasets: [{
422
- data: [25, 40, 15, 10, 10],
423
- backgroundColor: [
424
- '#4F46E5',
425
- '#10B981',
426
- '#F59E0B',
427
- '#EF4444',
428
- '#3B82F6'
429
- ],
430
- borderWidth: 0
431
- }]
432
- },
433
- options: {
434
- responsive: true,
435
- maintainAspectRatio: false,
436
- cutout: '70%',
437
- plugins: {
438
- legend: {
439
- position: 'right',
 
 
 
 
 
 
 
440
  }
441
  }
442
- }
443
- });
444
 
445
- // Sample data for recent transactions (would normally come from API)
446
- const transactions = [
447
- { type: 'income', amount: 2500, description: 'Invoice Payment', from: 'Acme Corp', date: '2 days ago' },
448
- { type: 'expense', amount: 189.50, description: 'Office Supplies', from: 'Staples', date: '3 days ago' },
449
- { type: 'invoice', amount: 3750, description: 'Invoice Sent', from: 'Beta LLC', date: '5 days ago' },
450
- { type: 'expense', amount: 52.99, description: 'Software Subscription', from: 'Adobe', date: '1 week ago' }
451
- ];
452
 
453
- // You could use this data to dynamically populate the transactions list
454
- // For now, we're using static HTML for better initial rendering
 
 
 
455
  </script>
456
  <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=Jeremy8776/accounting-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
457
  </html>
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script>
10
  tailwind.config = {
11
+ darkMode: 'class',
12
  theme: {
13
  extend: {
14
  colors: {
15
+ primary: {
16
+ DEFAULT: '#000000',
17
+ dark: '#000000'
18
+ },
19
+ secondary: {
20
+ DEFAULT: '#FFFFFF',
21
+ dark: '#FFFFFF'
22
+ },
23
+ accent: {
24
+ DEFAULT: '#1E1E1E',
25
+ dark: '#1E1E1E'
26
+ },
27
+ danger: {
28
+ DEFAULT: '#EF4444',
29
+ dark: '#F87171'
30
+ },
31
+ warning: {
32
+ DEFAULT: '#F59E0B',
33
+ dark: '#FBBF24'
34
+ },
35
+ info: {
36
+ DEFAULT: '#3B82F6',
37
+ dark: '#60A5FA'
38
+ }
39
  }
40
  }
41
  }
 
58
  transform: translateX(0);
59
  }
60
  }
61
+ .dark .chart-bg {
62
+ background-color: rgba(255, 255, 255, 0.05);
63
+ }
64
+ .icon-white {
65
+ color: white;
66
+ }
67
+ .icon-black {
68
+ color: black;
69
+ }
70
+ .card-hover:hover {
71
+ transform: translateY(-2px);
72
+ box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1);
73
+ }
74
+ .tile {
75
+ border: 1px solid white;
76
+ background-color: black;
77
+ }
78
+ .active-nav-item {
79
+ background-color: rgba(255, 255, 255, 0.1);
80
+ border-left: 3px solid white;
81
+ }
82
+ .btn-white-border {
83
+ border: 1px solid white;
84
+ background-color: transparent;
85
+ color: white;
86
+ }
87
+ .btn-white-border:hover {
88
+ background-color: rgba(255, 255, 255, 0.1);
89
+ }
90
+ .quick-stat-item {
91
+ border: 1px solid white;
92
+ background-color: transparent;
93
+ }
94
+ .quick-stat-item:hover {
95
+ background-color: rgba(255, 255, 255, 0.1);
96
+ }
97
  </style>
98
  </head>
99
+ <body class="bg-black text-white font-sans transition-colors duration-200">
100
  <div class="flex h-screen overflow-hidden">
101
  <!-- Sidebar -->
102
+ <div class="sidebar bg-primary w-64 border-r border-gray-800 flex flex-col">
103
+ <div class="p-4 border-b border-gray-800">
104
+ <h1 class="text-xl font-bold text-secondary flex items-center">
105
+ <i class="fas fa-calculator mr-2 icon-white"></i> AccountPro
106
  </h1>
107
  </div>
108
  <nav class="flex-1 overflow-y-auto p-4">
109
  <div class="space-y-1">
110
+ <a href="#" class="flex items-center space-x-2 px-4 py-3 active-nav-item rounded-lg font-medium">
111
+ <i class="fas fa-tachometer-alt icon-white"></i>
112
  <span>Dashboard</span>
113
  </a>
114
+ <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
115
+ <i class="fas fa-file-invoice-dollar icon-white"></i>
116
  <span>Invoices</span>
117
  </a>
118
+ <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
119
+ <i class="fas fa-receipt icon-white"></i>
120
  <span>Expenses</span>
121
  </a>
122
+ <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
123
+ <i class="fas fa-users icon-white"></i>
124
  <span>Clients</span>
125
  </a>
126
+ <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
127
+ <i class="fas fa-chart-line icon-white"></i>
128
  <span>Reports</span>
129
  </a>
130
+ <a href="#" class="flex items-center space-x-2 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
131
+ <i class="fas fa-cog icon-white"></i>
132
  <span>Settings</span>
133
  </a>
134
  </div>
135
  <div class="mt-8">
136
  <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 mb-2">Quick Actions</h3>
137
  <div class="space-y-1">
138
+ <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-300 hover:bg-gray-800 rounded-lg text-sm">
139
+ <i class="fas fa-plus-circle icon-white"></i>
140
  <span>Create Invoice</span>
141
  </a>
142
+ <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-300 hover:bg-gray-800 rounded-lg text-sm">
143
+ <i class="fas fa-file-import icon-white"></i>
144
  <span>Import Data</span>
145
  </a>
146
+ <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-300 hover:bg-gray-800 rounded-lg text-sm">
147
+ <i class="fas fa-file-export icon-white"></i>
148
  <span>Export Reports</span>
149
  </a>
150
  </div>
151
  </div>
152
  </nav>
153
+ <div class="p-4 border-t border-gray-800">
154
  <div class="flex items-center space-x-3">
155
+ <div class="w-9 h-9 rounded-full bg-secondary flex items-center justify-center text-primary">
156
  <span>JD</span>
157
  </div>
158
  <div>
159
+ <p class="text-sm font-medium text-secondary">John Doe</p>
160
  <p class="text-xs text-gray-500">Admin</p>
161
  </div>
162
  </div>
 
166
  <!-- Main Content -->
167
  <div class="flex-1 flex flex-col overflow-hidden">
168
  <!-- Top Navigation -->
169
+ <header class="bg-primary border-b border-gray-800">
170
  <div class="flex items-center justify-between px-6 py-4">
171
  <div class="flex items-center">
172
+ <button id="sidebarToggle" class="md:hidden text-secondary mr-4">
173
+ <i class="fas fa-bars text-xl icon-white"></i>
174
  </button>
175
+ <h2 class="text-xl font-semibold text-secondary">Dashboard</h2>
176
  </div>
177
  <div class="flex items-center space-x-4">
178
+ <button id="darkModeToggle" class="text-secondary hover:text-gray-300">
179
+ <i id="darkModeIcon" class="fas fa-sun text-xl icon-white"></i>
180
+ </button>
181
  <div class="relative">
182
+ <button class="text-secondary hover:text-gray-300">
183
+ <i class="fas fa-bell text-xl icon-white"></i>
184
  <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
185
  </button>
186
  </div>
187
  <div class="relative">
188
+ <button class="text-secondary hover:text-gray-300">
189
+ <i class="fas fa-envelope text-xl icon-white"></i>
190
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
191
  </button>
192
  </div>
193
  <div class="relative">
194
+ <select class="appearance-none bg-transparent text-secondary border border-white rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-0">
195
  <option>This Month</option>
196
  <option>Last Month</option>
197
  <option>This Quarter</option>
 
203
  </header>
204
 
205
  <!-- Dashboard Content -->
206
+ <main class="flex-1 overflow-y-auto p-6 bg-black">
207
  <!-- Summary Cards -->
208
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
209
+ <div class="rounded-xl shadow-sm p-6 transition-all duration-200 card-hover tile">
210
  <div class="flex items-center justify-between">
211
  <div>
212
+ <p class="text-sm font-medium text-gray-400">Total Revenue</p>
213
+ <h3 class="text-2xl font-bold mt-1 text-white">$24,780</h3>
214
+ <p class="text-sm text-green-400 mt-1 flex items-center">
215
  <i class="fas fa-arrow-up mr-1"></i> 12.5% from last month
216
  </p>
217
  </div>
218
+ <div class="w-12 h-12 rounded-full bg-green-900/30 flex items-center justify-center text-green-400">
219
  <i class="fas fa-dollar-sign text-xl"></i>
220
  </div>
221
  </div>
222
  </div>
223
+ <div class="rounded-xl shadow-sm p-6 transition-all duration-200 card-hover tile">
224
  <div class="flex items-center justify-between">
225
  <div>
226
+ <p class="text-sm font-medium text-gray-400">Total Expenses</p>
227
+ <h3 class="text-2xl font-bold mt-1 text-white">$8,420</h3>
228
+ <p class="text-sm text-red-400 mt-1 flex items-center">
229
  <i class="fas fa-arrow-up mr-1"></i> 3.2% from last month
230
  </p>
231
  </div>
232
+ <div class="w-12 h-12 rounded-full bg-red-900/30 flex items-center justify-center text-red-400">
233
  <i class="fas fa-receipt text-xl"></i>
234
  </div>
235
  </div>
236
  </div>
237
+ <div class="rounded-xl shadow-sm p-6 transition-all duration-200 card-hover tile">
238
  <div class="flex items-center justify-between">
239
  <div>
240
+ <p class="text-sm font-medium text-gray-400">Profit</p>
241
+ <h3 class="text-2xl font-bold mt-1 text-white">$16,360</h3>
242
+ <p class="text-sm text-green-400 mt-1 flex items-center">
243
  <i class="fas fa-arrow-up mr-1"></i> 18.7% from last month
244
  </p>
245
  </div>
246
+ <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-white">
247
+ <i class="fas fa-chart-line text-xl icon-white"></i>
248
  </div>
249
  </div>
250
  </div>
251
+ <div class="rounded-xl shadow-sm p-6 transition-all duration-200 card-hover tile">
252
  <div class="flex items-center justify-between">
253
  <div>
254
+ <p class="text-sm font-medium text-gray-400">Unpaid Invoices</p>
255
+ <h3 class="text-2xl font-bold mt-1 text-white">$5,430</h3>
256
+ <p class="text-sm text-yellow-400 mt-1 flex items-center">
257
  <i class="fas fa-exclamation-circle mr-1"></i> 7 overdue
258
  </p>
259
  </div>
260
+ <div class="w-12 h-12 rounded-full bg-yellow-900/30 flex items-center justify-center text-yellow-400">
261
  <i class="fas fa-file-invoice text-xl"></i>
262
  </div>
263
  </div>
 
267
  <!-- Charts Row -->
268
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
269
  <!-- Revenue Chart -->
270
+ <div class="rounded-xl shadow-sm p-6 transition-all duration-200 card-hover tile">
271
  <div class="flex items-center justify-between mb-6">
272
+ <h3 class="text-lg font-semibold text-gray-200">Revenue Overview</h3>
273
  <div class="flex space-x-2">
274
+ <button class="px-3 py-1 text-xs btn-white-border rounded-lg">Monthly</button>
275
+ <button class="px-3 py-1 text-xs bg-gray-700 text-gray-300 rounded-lg">Quarterly</button>
276
  </div>
277
  </div>
278
  <div class="chart-container">
279
+ <canvas id="revenueChart" class="chart-bg"></canvas>
280
  </div>
281
  </div>
282
 
283
  <!-- Expense Breakdown -->
284
+ <div class="rounded-xl shadow-sm p-6 transition-all duration-200 card-hover tile">
285
  <div class="flex items-center justify-between mb-6">
286
+ <h3 class="text-lg font-semibold text-gray-200">Expense Breakdown</h3>
287
  <div class="flex space-x-2">
288
+ <button class="px-3 py-1 text-xs btn-white-border rounded-lg">Categories</button>
289
+ <button class="px-3 py-1 text-xs bg-gray-700 text-gray-300 rounded-lg">Vendors</button>
290
  </div>
291
  </div>
292
  <div class="chart-container">
293
+ <canvas id="expenseChart" class="chart-bg"></canvas>
294
  </div>
295
  </div>
296
  </div>
 
298
  <!-- Recent Transactions and Quick Stats -->
299
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
300
  <!-- Recent Transactions -->
301
+ <div class="lg:col-span-2 rounded-xl shadow-sm p-6 transition-all duration-200 card-hover tile">
302
  <div class="flex items-center justify-between mb-6">
303
+ <h3 class="text-lg font-semibold text-gray-200">Recent Transactions</h3>
304
+ <a href="#" class="text-sm text-white font-medium hover:underline">View All</a>
305
  </div>
306
  <div class="space-y-4">
307
+ <div class="flex items-center justify-between p-3 hover:bg-gray-800 rounded-lg transition-colors duration-200">
308
  <div class="flex items-center space-x-3">
309
+ <div class="w-10 h-10 rounded-full bg-green-900/30 flex items-center justify-center text-green-400">
310
  <i class="fas fa-dollar-sign"></i>
311
  </div>
312
  <div>
313
+ <p class="font-medium text-white">Invoice Payment</p>
314
+ <p class="text-sm text-gray-400">From Acme Corp</p>
315
  </div>
316
  </div>
317
  <div class="text-right">
318
+ <p class="font-medium text-green-400">+$2,500.00</p>
319
+ <p class="text-sm text-gray-400">2 days ago</p>
320
  </div>
321
  </div>
322
+ <div class="flex items-center justify-between p-3 hover:bg-gray-800 rounded-lg transition-colors duration-200">
323
  <div class="flex items-center space-x-3">
324
+ <div class="w-10 h-10 rounded-full bg-red-900/30 flex items-center justify-center text-red-400">
325
  <i class="fas fa-shopping-cart"></i>
326
  </div>
327
  <div>
328
+ <p class="font-medium text-white">Office Supplies</p>
329
+ <p class="text-sm text-gray-400">Staples</p>
330
  </div>
331
  </div>
332
  <div class="text-right">
333
+ <p class="font-medium text-red-400">-$189.50</p>
334
+ <p class="text-sm text-gray-400">3 days ago</p>
335
  </div>
336
  </div>
337
+ <div class="flex items-center justify-between p-3 hover:bg-gray-800 rounded-lg transition-colors duration-200">
338
  <div class="flex items-center space-x-3">
339
+ <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white">
340
+ <i class="fas fa-file-invoice icon-white"></i>
341
  </div>
342
  <div>
343
+ <p class="font-medium text-white">Invoice Sent</p>
344
+ <p class="text-sm text-gray-400">To Beta LLC</p>
345
  </div>
346
  </div>
347
  <div class="text-right">
348
+ <p class="font-medium text-white">$3,750.00</p>
349
+ <p class="text-sm text-gray-400">5 days ago</p>
350
  </div>
351
  </div>
352
+ <div class="flex items-center justify-between p-3 hover:bg-gray-800 rounded-lg transition-colors duration-200">
353
  <div class="flex items-center space-x-3">
354
+ <div class="w-10 h-10 rounded-full bg-purple-900/30 flex items-center justify-center text-purple-400">
355
  <i class="fas fa-wifi"></i>
356
  </div>
357
  <div>
358
+ <p class="font-medium text-white">Software Subscription</p>
359
+ <p class="text-sm text-gray-400">Adobe Creative Cloud</p>
360
  </div>
361
  </div>
362
  <div class="text-right">
363
+ <p class="font-medium text-red-400">-$52.99</p>
364
+ <p class="text-sm text-gray-400">1 week ago</p>
365
  </div>
366
  </div>
367
  </div>
368
  </div>
369
 
370
  <!-- Quick Stats -->
371
+ <div class="rounded-xl shadow-sm p-6 transition-all duration-200 card-hover tile">
372
  <div class="mb-6">
373
+ <h3 class="text-lg font-semibold text-gray-200">Quick Stats</h3>
374
  </div>
375
  <div class="space-y-4">
376
+ <div class="quick-stat-item p-4 rounded-lg transition-colors duration-200">
377
  <div class="flex items-center justify-between">
378
  <div>
379
+ <p class="text-sm font-medium text-gray-400">Invoices Sent</p>
380
+ <h3 class="text-xl font-bold mt-1 text-white">24</h3>
381
  </div>
382
+ <div class="w-10 h-10 rounded-full border border-white flex items-center justify-center text-white">
383
+ <i class="fas fa-paper-plane icon-white"></i>
384
  </div>
385
  </div>
386
  </div>
387
+ <div class="quick-stat-item p-4 rounded-lg transition-colors duration-200">
388
  <div class="flex items-center justify-between">
389
  <div>
390
+ <p class="text-sm font-medium text-gray-400">Bills to Pay</p>
391
+ <h3 class="text-xl font-bold mt-1 text-white">8</h3>
392
  </div>
393
+ <div class="w-10 h-10 rounded-full border border-white flex items-center justify-center text-white">
394
+ <i class="fas fa-file-invoice-dollar icon-white"></i>
395
  </div>
396
  </div>
397
  </div>
398
+ <div class="quick-stat-item p-4 rounded-lg transition-colors duration-200">
399
  <div class="flex items-center justify-between">
400
  <div>
401
+ <p class="text-sm font-medium text-gray-400">Upcoming Payments</p>
402
+ <h3 class="text-xl font-bold mt-1 text-white">3</h3>
403
  </div>
404
+ <div class="w-10 h-10 rounded-full border border-white flex items-center justify-center text-white">
405
+ <i class="fas fa-clock icon-white"></i>
406
  </div>
407
  </div>
408
  </div>
409
+ <div class="quick-stat-item p-4 rounded-lg transition-colors duration-200">
410
  <div class="flex items-center justify-between">
411
  <div>
412
+ <p class="text-sm font-medium text-gray-400">Tax Due</p>
413
+ <h3 class="text-xl font-bold mt-1 text-white">$2,450</h3>
414
  </div>
415
+ <div class="w-10 h-10 rounded-full border border-white flex items-center justify-center text-white">
416
+ <i class="fas fa-percentage icon-white"></i>
417
  </div>
418
  </div>
419
  </div>
 
431
  document.querySelector('.sidebar').classList.toggle('active');
432
  });
433
 
434
+ // Initialize charts with dark mode support
435
+ let revenueChart, expenseChart;
436
+
437
+ function initCharts() {
438
+ const textColor = '#E5E7EB';
439
+ const gridColor = 'rgba(255, 255, 255, 0.1)';
440
+
441
+ // Revenue Chart
442
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
443
+ revenueChart = new Chart(revenueCtx, {
444
+ type: 'line',
445
+ data: {
446
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
447
+ datasets: [{
448
+ label: 'Revenue',
449
+ data: [6500, 5900, 8000, 8100, 5600, 8500, 7300],
450
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
451
+ borderColor: '#FFFFFF',
452
+ borderWidth: 2,
453
+ tension: 0.3,
454
+ fill: true
455
+ }]
 
456
  },
457
+ options: {
458
+ responsive: true,
459
+ maintainAspectRatio: false,
460
+ plugins: {
461
+ legend: {
462
+ display: false
463
  }
464
  },
465
+ scales: {
466
+ y: {
467
+ beginAtZero: true,
468
+ grid: {
469
+ color: gridColor,
470
+ drawBorder: false
471
+ },
472
+ ticks: {
473
+ color: textColor
474
+ }
475
+ },
476
+ x: {
477
+ grid: {
478
+ color: gridColor,
479
+ display: false
480
+ },
481
+ ticks: {
482
+ color: textColor
483
+ }
484
  }
485
  }
486
  }
487
+ });
 
488
 
489
+ // Expense Chart
490
+ const expenseCtx = document.getElementById('expenseChart').getContext('2d');
491
+ expenseChart = new Chart(expenseCtx, {
492
+ type: 'doughnut',
493
+ data: {
494
+ labels: ['Office', 'Salaries', 'Marketing', 'Software', 'Utilities'],
495
+ datasets: [{
496
+ data: [25, 40, 15, 10, 10],
497
+ backgroundColor: [
498
+ '#FFFFFF',
499
+ '#A1A1AA',
500
+ '#71717A',
501
+ '#52525B',
502
+ '#3F3F46'
503
+ ],
504
+ borderWidth: 0
505
+ }]
506
+ },
507
+ options: {
508
+ responsive: true,
509
+ maintainAspectRatio: false,
510
+ cutout: '70%',
511
+ plugins: {
512
+ legend: {
513
+ position: 'right',
514
+ labels: {
515
+ color: textColor,
516
+ font: {
517
+ size: 12
518
+ }
519
+ }
520
+ }
521
  }
522
  }
523
+ });
524
+ }
525
 
526
+ // Initialize charts when DOM is loaded
527
+ document.addEventListener('DOMContentLoaded', initCharts);
 
 
 
 
 
528
 
529
+ // Update charts when window is resized
530
+ window.addEventListener('resize', function() {
531
+ if (revenueChart) revenueChart.resize();
532
+ if (expenseChart) expenseChart.resize();
533
+ });
534
  </script>
535
  <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=Jeremy8776/accounting-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
536
  </html>