Hugging Face's logo

Spaces:
marcosyago
/
crm
Running

App Files Community
marcosyago commited on
Commit
29063c6
·
verified ·
1 Parent(s): 034cde2

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +49 -706
  2. prompts.txt +2 -1
index.html CHANGED
@@ -60,6 +60,12 @@
60
  .progress-bar {
61
  transition: width 0.6s ease;
62
  }
 
 
 
 
 
 
63
  </style>
64
  </head>
65
  <body class="bg-gray-50 font-sans">
@@ -75,39 +81,39 @@
75
  </div>
76
  <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
77
  <div class="space-y-1">
78
- <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
79
  <i class="fas fa-home text-gray-500 mr-3 w-5"></i>
80
  <span>Dashboard</span>
81
  </div>
82
- <div class="sidebar-item active flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
83
  <i class="fas fa-users text-gray-500 mr-3 w-5"></i>
84
  <span>Clients</span>
85
  </div>
86
- <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
87
  <i class="fas fa-funnel-dollar text-gray-500 mr-3 w-5"></i>
88
  <span>Sales Pipeline</span>
89
  </div>
90
- <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
91
  <i class="fas fa-project-diagram text-gray-500 mr-3 w-5"></i>
92
  <span>Projects</span>
93
  </div>
94
- <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
95
  <i class="fas fa-tasks text-gray-500 mr-3 w-5"></i>
96
  <span>Tasks</span>
97
  </div>
98
- <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
99
  <i class="fas fa-calendar-alt text-gray-500 mr-3 w-5"></i>
100
  <span>Calendar</span>
101
  </div>
102
- <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
103
  <i class="fas fa-file-invoice-dollar text-gray-500 mr-3 w-5"></i>
104
  <span>Invoices</span>
105
  </div>
106
- <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
107
  <i class="fas fa-chart-line text-gray-500 mr-3 w-5"></i>
108
  <span>Reports</span>
109
  </div>
110
- <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer">
111
  <i class="fas fa-cog text-gray-500 mr-3 w-5"></i>
112
  <span>Settings</span>
113
  </div>
@@ -130,7 +136,7 @@
130
  <!-- Top navigation -->
131
  <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white">
132
  <div class="flex items-center">
133
- <button class="md:hidden text-gray-500 focus:outline-none">
134
  <i class="fas fa-bars"></i>
135
  </button>
136
  <div class="ml-4 md:ml-0">
@@ -139,15 +145,29 @@
139
  </div>
140
  <div class="flex items-center">
141
  <div class="relative">
142
- <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none">
143
  <i class="fas fa-bell"></i>
144
  </button>
145
  <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
 
 
 
 
 
 
 
146
  </div>
147
  <div class="ml-4 relative">
148
- <button id="user-menu-button" class="flex items-center text-sm rounded-full focus:outline-none">
149
  <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
150
  </button>
 
 
 
 
 
 
 
151
  </div>
152
  </div>
153
  </div>
@@ -158,10 +178,10 @@
158
  <div class="mb-6">
159
  <div class="border-b border-gray-200">
160
  <nav class="-mb-px flex space-x-8">
161
- <button id="clients-tab" class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Clients</button>
162
- <button id="leads-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Leads</button>
163
- <button id="pipeline-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Sales Pipeline</button>
164
- <button id="projects-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Projects</button>
165
  </nav>
166
  </div>
167
  </div>
@@ -174,7 +194,7 @@
174
  <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300">
175
  <i class="fas fa-download mr-2"></i> Export
176
  </button>
177
- <button id="add-client-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
178
  <i class="fas fa-plus mr-2"></i> Add Client
179
  </button>
180
  </div>
@@ -256,157 +276,8 @@
256
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
257
  </tr>
258
  </thead>
259
- <tbody class="bg-white divide-y divide-gray-200">
260
- <tr class="hover:bg-gray-50 cursor-pointer">
261
- <td class="px-6 py-4 whitespace-nowrap">
262
- <div class="flex items-center">
263
- <div class="flex-shrink-0 h-10 w-10">
264
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
265
- </div>
266
- <div class="ml-4">
267
- <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
268
- <div class="text-sm text-gray-500">sarah@example.com</div>
269
- </div>
270
- </div>
271
- </td>
272
- <td class="px-6 py-4 whitespace-nowrap">
273
- <div class="text-sm text-gray-900">Tech Solutions Inc</div>
274
- </td>
275
- <td class="px-6 py-4 whitespace-nowrap">
276
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
277
- </td>
278
- <td class="px-6 py-4 whitespace-nowrap">
279
- <div class="text-sm text-gray-900">3</div>
280
- </td>
281
- <td class="px-6 py-4 whitespace-nowrap">
282
- <div class="text-sm text-gray-500">2 days ago</div>
283
- </td>
284
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
285
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
286
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
287
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
288
- </td>
289
- </tr>
290
- <tr class="hover:bg-gray-50 cursor-pointer">
291
- <td class="px-6 py-4 whitespace-nowrap">
292
- <div class="flex items-center">
293
- <div class="flex-shrink-0 h-10 w-10">
294
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
295
- </div>
296
- <div class="ml-4">
297
- <div class="text-sm font-medium text-gray-900">Michael Chen</div>
298
- <div class="text-sm text-gray-500">michael@example.com</div>
299
- </div>
300
- </div>
301
- </td>
302
- <td class="px-6 py-4 whitespace-nowrap">
303
- <div class="text-sm text-gray-900">Digital Innovations</div>
304
- </td>
305
- <td class="px-6 py-4 whitespace-nowrap">
306
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
307
- </td>
308
- <td class="px-6 py-4 whitespace-nowrap">
309
- <div class="text-sm text-gray-900">1</div>
310
- </td>
311
- <td class="px-6 py-4 whitespace-nowrap">
312
- <div class="text-sm text-gray-500">1 week ago</div>
313
- </td>
314
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
315
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
316
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
317
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
318
- </td>
319
- </tr>
320
- <tr class="hover:bg-gray-50 cursor-pointer">
321
- <td class="px-6 py-4 whitespace-nowrap">
322
- <div class="flex items-center">
323
- <div class="flex-shrink-0 h-10 w-10">
324
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
325
- </div>
326
- <div class="ml-4">
327
- <div class="text-sm font-medium text-gray-900">Emily Rodriguez</div>
328
- <div class="text-sm text-gray-500">emily@example.com</div>
329
- </div>
330
- </div>
331
- </td>
332
- <td class="px-6 py-4 whitespace-nowrap">
333
- <div class="text-sm text-gray-900">Creative Designs</div>
334
- </td>
335
- <td class="px-6 py-4 whitespace-nowrap">
336
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
337
- </td>
338
- <td class="px-6 py-4 whitespace-nowrap">
339
- <div class="text-sm text-gray-900">0</div>
340
- </td>
341
- <td class="px-6 py-4 whitespace-nowrap">
342
- <div class="text-sm text-gray-500">3 months ago</div>
343
- </td>
344
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
345
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
346
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
347
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
348
- </td>
349
- </tr>
350
- <tr class="hover:bg-gray-50 cursor-pointer">
351
- <td class="px-6 py-4 whitespace-nowrap">
352
- <div class="flex items-center">
353
- <div class="flex-shrink-0 h-10 w-10">
354
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/67.jpg" alt="">
355
- </div>
356
- <div class="ml-4">
357
- <div class="text-sm font-medium text-gray-900">David Kim</div>
358
- <div class="text-sm text-gray-500">david@example.com</div>
359
- </div>
360
- </div>
361
- </td>
362
- <td class="px-6 py-4 whitespace-nowrap">
363
- <div class="text-sm text-gray-900">Global Enterprises</div>
364
- </td>
365
- <td class="px-6 py-4 whitespace-nowrap">
366
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
367
- </td>
368
- <td class="px-6 py-4 whitespace-nowrap">
369
- <div class="text-sm text-gray-900">5</div>
370
- </td>
371
- <td class="px-6 py-4 whitespace-nowrap">
372
- <div class="text-sm text-gray-500">Yesterday</div>
373
- </td>
374
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
375
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
376
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
377
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
378
- </td>
379
- </tr>
380
- <tr class="hover:bg-gray-50 cursor-pointer">
381
- <td class="px-6 py-4 whitespace-nowrap">
382
- <div class="flex items-center">
383
- <div class="flex-shrink-0 h-10 w-10">
384
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/23.jpg" alt="">
385
- </div>
386
- <div class="ml-4">
387
- <div class="text-sm font-medium text-gray-900">Lisa Wong</div>
388
- <div class="text-sm text-gray-500">lisa@example.com</div>
389
- </div>
390
- </div>
391
- </td>
392
- <td class="px-6 py-4 whitespace-nowrap">
393
- <div class="text-sm text-gray-900">Marketing Pros</div>
394
- </td>
395
- <td class="px-6 py-4 whitespace-nowrap">
396
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
397
- </td>
398
- <td class="px-6 py-4 whitespace-nowrap">
399
- <div class="text-sm text-gray-900">2</div>
400
- </td>
401
- <td class="px-6 py-4 whitespace-nowrap">
402
- <div class="text-sm text-gray-500">Today</div>
403
- </td>
404
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
405
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
406
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
407
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
408
- </td>
409
- </tr>
410
  </tbody>
411
  </table>
412
  </div>
@@ -438,7 +309,6 @@
438
  </a>
439
  </nav>
440
  </div>
441
- </div>
442
  </div>
443
  </div>
444
  </div>
@@ -452,7 +322,7 @@
452
  <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300">
453
  <i class="fas fa-filter mr-2"></i> Filter
454
  </button>
455
- <button id="add-lead-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
456
  <i class="fas fa-plus mr-2"></i> Add Lead
457
  </button>
458
  </div>
@@ -462,7 +332,7 @@
462
  <div class="bg-white p-4 rounded-lg shadow mb-6">
463
  <h3 class="text-lg font-medium text-gray-800 mb-4">Lead Conversion Funnel</h3>
464
  <div class="grid grid-cols-5 gap-4">
465
- <div class="pipeline-stage bg-blue-50 p-4 rounded-lg text-center cursor-pointer">
466
  <div class="text-blue-600 text-2xl font-bold mb-1">85</div>
467
  <div class="text-blue-800 font-medium">New Leads</div>
468
  <div class="text-xs text-blue-500 mt-1">+12 this week</div>
@@ -470,7 +340,7 @@
470
  <div class="flex items-center justify-center">
471
  <i class="fas fa-arrow-right text-gray-400"></i>
472
  </div>
473
- <div class="pipeline-stage bg-purple-50 p-4 rounded-lg text-center cursor-pointer">
474
  <div class="text-purple-600 text-2xl font-bold mb-1">42</div>
475
  <div class="text-purple-800 font-medium">Contacted</div>
476
  <div class="text-xs text-purple-500 mt-1">35% conversion</div>
@@ -478,7 +348,7 @@
478
  <div class="flex items-center justify-center">
479
  <i class="fas fa-arrow-right text-gray-400"></i>
480
  </div>
481
- <div class="pipeline-stage bg-indigo-50 p-4 rounded-lg text-center cursor-pointer">
482
  <div class="text-indigo-600 text-2xl font-bold mb-1">18</div>
483
  <div class="text-indigo-800 font-medium">Qualified</div>
484
  <div class="text-xs text-indigo-500 mt-1">42% conversion</div>
@@ -486,7 +356,7 @@
486
  <div class="flex items-center justify-center">
487
  <i class="fas fa-arrow-right text-gray-400"></i>
488
  </div>
489
- <div class="pipeline-stage bg-green-50 p-4 rounded-lg text-center cursor-pointer">
490
  <div class="text-green-600 text-2xl font-bold mb-1">7</div>
491
  <div class="text-green-800 font-medium">Proposal Sent</div>
492
  <div class="text-xs text-green-500 mt-1">39% conversion</div>
@@ -494,7 +364,7 @@
494
  <div class="flex items-center justify-center">
495
  <i class="fas fa-arrow-right text-gray-400"></i>
496
  </div>
497
- <div class="pipeline-stage bg-yellow-50 p-4 rounded-lg text-center cursor-pointer">
498
  <div class="text-yellow-600 text-2xl font-bold mb-1">3</div>
499
  <div class="text-yellow-800 font-medium">Closed Won</div>
500
  <div class="text-xs text-yellow-500 mt-1">43% conversion</div>
@@ -530,157 +400,8 @@
530
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
531
  </tr>
532
  </thead>
533
- <tbody class="bg-white divide-y divide-gray-200">
534
- <tr class="hover:bg-gray-50 cursor-pointer">
535
- <td class="px-6 py-4 whitespace-nowrap">
536
- <div class="flex items-center">
537
- <div class="flex-shrink-0 h-10 w-10">
538
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
539
- </div>
540
- <div class="ml-4">
541
- <div class="text-sm font-medium text-gray-900">Robert Johnson</div>
542
- <div class="text-sm text-gray-500">robert@example.com</div>
543
- </div>
544
- </div>
545
- </td>
546
- <td class="px-6 py-4 whitespace-nowrap">
547
- <div class="text-sm text-gray-900">Website Form</div>
548
- </td>
549
- <td class="px-6 py-4 whitespace-nowrap">
550
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">New Lead</span>
551
- </td>
552
- <td class="px-6 py-4 whitespace-nowrap">
553
- <div class="text-sm text-gray-900">$5,000</div>
554
- </td>
555
- <td class="px-6 py-4 whitespace-nowrap">
556
- <div class="text-sm text-gray-500">Initial contact</div>
557
- </td>
558
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
559
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
560
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
561
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
562
- </td>
563
- </tr>
564
- <tr class="hover:bg-gray-50 cursor-pointer">
565
- <td class="px-6 py-4 whitespace-nowrap">
566
- <div class="flex items-center">
567
- <div class="flex-shrink-0 h-10 w-10">
568
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="">
569
- </div>
570
- <div class="ml-4">
571
- <div class="text-sm font-medium text-gray-900">Jennifer Smith</div>
572
- <div class="text-sm text-gray-500">jennifer@example.com</div>
573
- </div>
574
- </div>
575
- </td>
576
- <td class="px-6 py-4 whitespace-nowrap">
577
- <div class="text-sm text-gray-900">Referral</div>
578
- </td>
579
- <td class="px-6 py-4 whitespace-nowrap">
580
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Contacted</span>
581
- </td>
582
- <td class="px-6 py-4 whitespace-nowrap">
583
- <div class="text-sm text-gray-900">$12,000</div>
584
- </td>
585
- <td class="px-6 py-4 whitespace-nowrap">
586
- <div class="text-sm text-gray-500">Schedule demo</div>
587
- </td>
588
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
589
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
590
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
591
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
592
- </td>
593
- </tr>
594
- <tr class="hover:bg-gray-50 cursor-pointer">
595
- <td class="px-6 py-4 whitespace-nowrap">
596
- <div class="flex items-center">
597
- <div class="flex-shrink-0 h-10 w-10">
598
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
599
- </div>
600
- <div class="ml-4">
601
- <div class="text-sm font-medium text-gray-900">Michael Brown</div>
602
- <div class="text-sm text-gray-500">michael@example.com</div>
603
- </div>
604
- </div>
605
- </td>
606
- <td class="px-6 py-4 whitespace-nowrap">
607
- <div class="text-sm text-gray-900">LinkedIn</div>
608
- </td>
609
- <td class="px-6 py-4 whitespace-nowrap">
610
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">Qualified</span>
611
- </td>
612
- <td class="px-6 py-4 whitespace-nowrap">
613
- <div class="text-sm text-gray-900">$8,500</div>
614
- </td>
615
- <td class="px-6 py-4 whitespace-nowrap">
616
- <div class="text-sm text-gray-500">Send proposal</div>
617
- </td>
618
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
619
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
620
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
621
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
622
- </td>
623
- </tr>
624
- <tr class="hover:bg-gray-50 cursor-pointer">
625
- <td class="px-6 py-4 whitespace-nowrap">
626
- <div class="flex items-center">
627
- <div class="flex-shrink-0 h-10 w-10">
628
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/43.jpg" alt="">
629
- </div>
630
- <div class="ml-4">
631
- <div class="text-sm font-medium text-gray-900">Amanda Wilson</div>
632
- <div class="text-sm text-gray-500">amanda@example.com</div>
633
- </div>
634
- </div>
635
- </td>
636
- <td class="px-6 py-4 whitespace-nowrap">
637
- <div class="text-sm text-gray-900">Trade Show</div>
638
- </td>
639
- <td class="px-6 py-4 whitespace-nowrap">
640
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Proposal Sent</span>
641
- </td>
642
- <td class="px-6 py-4 whitespace-nowrap">
643
- <div class="text-sm text-gray-900">$15,000</div>
644
- </td>
645
- <td class="px-6 py-4 whitespace-nowrap">
646
- <div class="text-sm text-gray-500">Follow up</div>
647
- </td>
648
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
649
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
650
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
651
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
652
- </td>
653
- </tr>
654
- <tr class="hover:bg-gray-50 cursor-pointer">
655
- <td class="px-6 py-4 whitespace-nowrap">
656
- <div class="flex items-center">
657
- <div class="flex-shrink-0 h-10 w-10">
658
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/76.jpg" alt="">
659
- </div>
660
- <div class="ml-4">
661
- <div class="text-sm font-medium text-gray-900">David Miller</div>
662
- <div class="text-sm text-gray-500">david@example.com</div>
663
- </div>
664
- </div>
665
- </td>
666
- <td class="px-6 py-4 whitespace-nowrap">
667
- <div class="text-sm text-gray-900">Email Campaign</div>
668
- </td>
669
- <td class="px-6 py-4 whitespace-nowrap">
670
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Closed Won</span>
671
- </td>
672
- <td class="px-6 py-4 whitespace-nowrap">
673
- <div class="text-sm text-gray-900">$10,000</div>
674
- </td>
675
- <td class="px-6 py-4 whitespace-nowrap">
676
- <div class="text-sm text-gray-500">Onboarding</div>
677
- </td>
678
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
679
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
680
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button>
681
- <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
682
- </td>
683
- </tr>
684
  </tbody>
685
  </table>
686
  </div>
@@ -725,7 +446,7 @@
725
  <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300">
726
  <i class="fas fa-cog mr-2"></i> Configure
727
  </button>
728
- <button id="add-deal-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
729
  <i class="fas fa-plus mr-2"></i> Add Deal
730
  </button>
731
  </div>
@@ -764,383 +485,5 @@
764
  <div class="p-3 rounded-full bg-purple-100 text-purple-600">
765
  <i class="fas fa-chart-pie"></i>
766
  </div>
767
- </div>
768
- </div>
769
- </div>
770
-
771
- <!-- Pipeline Visualization -->
772
- <div class="bg-white p-4 rounded-lg shadow mb-6">
773
- <h3 class="text-lg font-medium text-gray-800 mb-4">Deal Stages</h3>
774
- <div class="overflow-x-auto">
775
- <div class="inline-block min-w-full align-middle">
776
- <div class="grid grid-cols-7 gap-4">
777
- <!-- Stage 1 -->
778
- <div class="p-2">
779
- <div class="text-center font-medium text-sm text-gray-500 mb-2">Prospecting</div>
780
- <div class="space-y-3">
781
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
782
- <div class="flex justify-between items-start">
783
- <div>
784
- <h4 class="text-sm font-medium text-gray-800">Acme Corp Website</h4>
785
- <p class="text-xs text-gray-500">$15,000</p>
786
- </div>
787
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">New</span>
788
- </div>
789
- <div class="mt-2 flex items-center justify-between">
790
- <div class="flex items-center">
791
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
792
- <span class="ml-1 text-xs text-gray-500">M. Chen</span>
793
- </div>
794
- <span class="text-xs text-gray-400">2d</span>
795
- </div>
796
- </div>
797
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
798
- <div class="flex justify-between items-start">
799
- <div>
800
- <h4 class="text-sm font-medium text-gray-800">Branding Package</h4>
801
- <p class="text-xs text-gray-500">$8,500</p>
802
- </div>
803
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">New</span>
804
- </div>
805
- <div class="mt-2 flex items-center justify-between">
806
- <div class="flex items-center">
807
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
808
- <span class="ml-1 text-xs text-gray-500">E. Rodriguez</span>
809
- </div>
810
- <span class="text-xs text-gray-400">1d</span>
811
- </div>
812
- </div>
813
- </div>
814
- </div>
815
-
816
- <!-- Stage 2 -->
817
- <div class="p-2">
818
- <div class="text-center font-medium text-sm text-gray-500 mb-2">Qualification</div>
819
- <div class="space-y-3">
820
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
821
- <div class="flex justify-between items-start">
822
- <div>
823
- <h4 class="text-sm font-medium text-gray-800">E-commerce Platform</h4>
824
- <p class="text-xs text-gray-500">$25,000</p>
825
- </div>
826
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800">Hot</span>
827
- </div>
828
- <div class="mt-2 flex items-center justify-between">
829
- <div class="flex items-center">
830
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/men/76.jpg" alt="">
831
- <span class="ml-1 text-xs text-gray-500">D. Miller</span>
832
- </div>
833
- <span class="text-xs text-gray-400">5d</span>
834
- </div>
835
- </div>
836
- </div>
837
- </div>
838
-
839
- <!-- Stage 3 -->
840
- <div class="p-2">
841
- <div class="text-center font-medium text-sm text-gray-500 mb-2">Needs Analysis</div>
842
- <div class="space-y-3">
843
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
844
- <div class="flex justify-between items-start">
845
- <div>
846
- <h4 class="text-sm font-medium text-gray-800">Mobile App Dev</h4>
847
- <p class="text-xs text-gray-500">$32,000</p>
848
- </div>
849
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800">Priority</span>
850
- </div>
851
- <div class="mt-2 flex items-center justify-between">
852
- <div class="flex items-center">
853
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="">
854
- <span class="ml-1 text-xs text-gray-500">J. Smith</span>
855
- </div>
856
- <span class="text-xs text-gray-400">1w</span>
857
- </div>
858
- </div>
859
- </div>
860
- </div>
861
-
862
- <!-- Stage 4 -->
863
- <div class="p-2">
864
- <div class="text-center font-medium text-sm text-gray-500 mb-2">Proposal</div>
865
- <div class="space-y-3">
866
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
867
- <div class="flex justify-between items-start">
868
- <div>
869
- <h4 class="text-sm font-medium text-gray-800">Marketing Strategy</h4>
870
- <p class="text-xs text-gray-500">$18,000</p>
871
- </div>
872
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Ready</span>
873
- </div>
874
- <div class="mt-2 flex items-center justify-between">
875
- <div class="flex items-center">
876
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
877
- <span class="ml-1 text-xs text-gray-500">R. Johnson</span>
878
- </div>
879
- <span class="text-xs text-gray-400">3d</span>
880
- </div>
881
- </div>
882
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
883
- <div class="flex justify-between items-start">
884
- <div>
885
- <h4 class="text-sm font-medium text-gray-800">SEO Optimization</h4>
886
- <p class="text-xs text-gray-500">$12,000</p>
887
- </div>
888
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Ready</span>
889
- </div>
890
- <div class="mt-2 flex items-center justify-between">
891
- <div class="flex items-center">
892
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/women/23.jpg" alt="">
893
- <span class="ml-1 text-xs text-gray-500">L. Wong</span>
894
- </div>
895
- <span class="text-xs text-gray-400">1w</span>
896
- </div>
897
- </div>
898
- </div>
899
- </div>
900
-
901
- <!-- Stage 5 -->
902
- <div class="p-2">
903
- <div class="text-center font-medium text-sm text-gray-500 mb-2">Negotiation</div>
904
- <div class="space-y-3">
905
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
906
- <div class="flex justify-between items-start">
907
- <div>
908
- <h4 class="text-sm font-medium text-gray-800">CRM Implementation</h4>
909
- <p class="text-xs text-gray-500">$28,000</p>
910
- </div>
911
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Pending</span>
912
- </div>
913
- <div class="mt-2 flex items-center justify-between">
914
- <div class="flex items-center">
915
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
916
- <span class="ml-1 text-xs text-gray-500">S. Johnson</span>
917
- </div>
918
- <span class="text-xs text-gray-400">4d</span>
919
- </div>
920
- </div>
921
- </div>
922
- </div>
923
-
924
- <!-- Stage 6 -->
925
- <div class="p-2">
926
- <div class="text-center font-medium text-sm text-gray-500 mb-2">Closed Won</div>
927
- <div class="space-y-3">
928
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
929
- <div class="flex justify-between items-start">
930
- <div>
931
- <h4 class="text-sm font-medium text-gray-800">Website Redesign</h4>
932
- <p class="text-xs text-gray-500">$22,000</p>
933
- </div>
934
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">Won</span>
935
- </div>
936
- <div class="mt-2 flex items-center justify-between">
937
- <div class="flex items-center">
938
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/men/67.jpg" alt="">
939
- <span class="ml-1 text-xs text-gray-500">D. Kim</span>
940
- </div>
941
- <span class="text-xs text-gray-400">2w</span>
942
- </div>
943
- </div>
944
- </div>
945
- </div>
946
-
947
- <!-- Stage 7 -->
948
- <div class="p-2">
949
- <div class="text-center font-medium text-sm text-gray-500 mb-2">Closed Lost</div>
950
- <div class="space-y-3">
951
- <div class="deal-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer transition-all duration-200">
952
- <div class="flex justify-between items-start">
953
- <div>
954
- <h4 class="text-sm font-medium text-gray-800">Content Strategy</h4>
955
- <p class="text-xs text-gray-500">$9,500</p>
956
- </div>
957
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-800">Lost</span>
958
- </div>
959
- <div class="mt-2 flex items-center justify-between">
960
- <div class="flex items-center">
961
- <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/women/43.jpg" alt="">
962
- <span class="ml-1 text-xs text-gray-500">A. Wilson</span>
963
- </div>
964
- <span class="text-xs text-gray-400">3w</span>
965
- </div>
966
- </div>
967
- </div>
968
- </div>
969
- </div>
970
- </div>
971
- </div>
972
- </div>
973
- </div>
974
-
975
- <!-- Projects Section (Hidden by default) -->
976
- <div id="projects-section" class="hidden">
977
- <div class="mb-6 flex justify-between items-center">
978
- <h2 class="text-2xl font-semibold text-gray-800">Project Management</h2>
979
- <div class="flex space-x-3">
980
- <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300">
981
- <i class="fas fa-filter mr-2"></i> Filter
982
- </button>
983
- <button id="add-project-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
984
- <i class="fas fa-plus mr-2"></i> Add Project
985
- </button>
986
- </div>
987
- </div>
988
-
989
- <!-- Project Stats -->
990
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
991
- <div class="bg-white p-4 rounded-lg shadow">
992
- <div class="flex items-center justify-between">
993
- <div>
994
- <p class="text-sm font-medium text-gray-500">Active Projects</p>
995
- <p class="text-2xl font-semibold text-gray-800">18</p>
996
- </div>
997
- <div class="p-3 rounded-full bg-blue-100 text-blue-600">
998
- <i class="fas fa-project-diagram"></i>
999
- </div>
1000
- </div>
1001
- </div>
1002
- <div class="bg-white p-4 rounded-lg shadow">
1003
- <div class="flex items-center justify-between">
1004
- <div>
1005
- <p class="text-sm font-medium text-gray-500">On Track</p>
1006
- <p class="text-2xl font-semibold text-gray-800">12</p>
1007
- </div>
1008
- <div class="p-3 rounded-full bg-green-100 text-green-600">
1009
- <i class="fas fa-check-circle"></i>
1010
- </div>
1011
- </div>
1012
- </div>
1013
- <div class="bg-white p-4 rounded-lg shadow">
1014
- <div class="flex items-center justify-between">
1015
- <div>
1016
- <p class="text-sm font-medium text-gray-500">At Risk</p>
1017
- <p class="text-2xl font-semibold text-gray-800">4</p>
1018
- </div>
1019
- <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
1020
- <i class="fas fa-exclamation-triangle"></i>
1021
- </div>
1022
- </div>
1023
- </div>
1024
- <div class="bg-white p-4 rounded-lg shadow">
1025
- <div class="flex items-center justify-between">
1026
- <div>
1027
- <p class="text-sm font-medium text-gray-500">Overdue</p>
1028
- <p class="text-2xl font-semibold text-gray-800">2</p>
1029
- </div>
1030
- <div class="p-3 rounded-full bg-red-100 text-red-600">
1031
- <i class="fas fa-clock"></i>
1032
- </div>
1033
- </div>
1034
- </div>
1035
- </div>
1036
-
1037
- <!-- Project Views Toggle -->
1038
- <div class="mb-6 bg-white p-4 rounded-lg shadow">
1039
- <div class="flex items-center justify-between">
1040
- <div class="flex space-x-4">
1041
- <button id="project-kanban-view" class="px-4 py-2 border-b-2 border-indigo-500 text-sm font-medium text-indigo-600">Kanban</button>
1042
- <button id="project-list-view" class="px-4 py-2 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">List</button>
1043
- <button id="project-calendar-view" class="px-4 py-2 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Calendar</button>
1044
- </div>
1045
- <div class="flex items-center">
1046
- <button class="p-1 text-gray-400 hover:text-indigo-600 focus:outline-none">
1047
- <i class="fas fa-search"></i>
1048
- </button>
1049
- <button class="p-1 ml-2 text-gray-400 hover:text-indigo-600 focus:outline-none">
1050
- <i class="fas fa-sort"></i>
1051
- </button>
1052
- </div>
1053
- </div>
1054
- </div>
1055
-
1056
- <!-- Kanban Board -->
1057
- <div id="project-kanban-board" class="bg-white p-4 rounded-lg shadow mb-6">
1058
- <div class="overflow-x-auto">
1059
- <div class="inline-block min-w-full align-middle">
1060
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
1061
- <!-- Backlog Column -->
1062
- <div class="kanban-column bg-gray-50 p-3 rounded-lg">
1063
- <div class="flex items-center justify-between mb-3">
1064
- <h3 class="text-sm font-medium text-gray-700">Backlog</h3>
1065
- <span class="bg-gray-200 text-gray-700 text-xs font-medium px-2 py-0.5 rounded-full">3</span>
1066
- </div>
1067
- <div class="space-y-3">
1068
- <div class="kanban-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer">
1069
- <div class="flex justify-between items-start">
1070
- <div>
1071
- <h4 class="text-sm font-medium text-gray-800">Website Redesign</h4>
1072
- <p class="text-xs text-gray-500">Due in 2 weeks</p>
1073
- </div>
1074
- <div class="flex space-x-1">
1075
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">Design</span>
1076
- </div>
1077
- </div>
1078
- <div class="mt-3">
1079
- <div class="flex items-center justify-between mb-1">
1080
- <span class="text-xs font-medium text-gray-500">Progress</span>
1081
- <span class="text-xs font-medium text-gray-500">0%</span>
1082
- </div>
1083
- <div class="w-full bg-gray-200 rounded-full h-1.5">
1084
- <div class="bg-gray-400 h-1.5 rounded-full progress-bar" style="width: 0%"></div>
1085
- </div>
1086
- </div>
1087
- <div class="mt-3 flex items-center justify-between">
1088
- <div class="flex -space-x-2">
1089
- <img class="h-6 w-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
1090
- <img class="h-6 w-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
1091
- </div>
1092
- <div class="flex items-center">
1093
- <i class="fas fa-comment text-gray-400 text-xs mr-1"></i>
1094
- <span class="text-xs text-gray-500">3</span>
1095
- </div>
1096
- </div>
1097
- </div>
1098
- <div class="kanban-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer">
1099
- <div class="flex justify-between items-start">
1100
- <div>
1101
- <h4 class="text-sm font-medium text-gray-800">Mobile App Development</h4>
1102
- <p class="text-xs text-gray-500">Due in 1 month</p>
1103
- </div>
1104
- <div class="flex space-x-1">
1105
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800">Dev</span>
1106
- </div>
1107
- </div>
1108
- <div class="mt-3">
1109
- <div class="flex items-center justify-between mb-1">
1110
- <span class="text-xs font-medium text-gray-500">Progress</span>
1111
- <span class="text-xs font-medium text-gray-500">0%</span>
1112
- </div>
1113
- <div class="w-full bg-gray-200 rounded-full h-1.5">
1114
- <div class="bg-gray-400 h-1.5 rounded-full progress-bar" style="width: 0%"></div>
1115
- </div>
1116
- </div>
1117
- <div class="mt-3 flex items-center justify-between">
1118
- <div class="flex -space-x-2">
1119
- <img class="h-6 w-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
1120
- <img class="h-6 w-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/67.jpg" alt="">
1121
- </div>
1122
- <div class="flex items-center">
1123
- <i class="fas fa-comment text-gray-400 text-xs mr-1"></i>
1124
- <span class="text-xs text-gray-500">5</span>
1125
- </div>
1126
- </div>
1127
- </div>
1128
- <div class="kanban-card bg-white p-3 rounded-lg border border-gray-200 shadow-sm cursor-pointer">
1129
- <div class="flex justify-between items-start">
1130
- <div>
1131
- <h4 class="text-sm font-medium text-gray-800">Content Marketing</h4>
1132
- <p class="text-xs text-gray-500">Due in 3 weeks</p>
1133
- </div>
1134
- <div class="flex space-x-1">
1135
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Content</span>
1136
- </div>
1137
- </div>
1138
- <div class="mt-3">
1139
- <div class="flex items-center justify-between mb-1">
1140
- <span class="text-xs font-medium text-gray-500">Progress</span>
1141
- <span class="text-xs font-medium text-gray-500">0%</span>
1142
- </div>
1143
- <div class="w-full bg-gray-200 rounded-full h-1.5">
1144
- <div class="bg-gray-400 h-1.5 rounded-full progress-bar" style="width: 0%"></div>
1145
- </
1146
  </html>
 
60
  .progress-bar {
61
  transition: width 0.6s ease;
62
  }
63
+ .modal {
64
+ transition: opacity 0.3s ease, transform 0.3s ease;
65
+ }
66
+ .modal-overlay {
67
+ transition: opacity 0.3s ease;
68
+ }
69
  </style>
70
  </head>
71
  <body class="bg-gray-50 font-sans">
 
81
  </div>
82
  <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
83
  <div class="space-y-1">
84
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('dashboard')">
85
  <i class="fas fa-home text-gray-500 mr-3 w-5"></i>
86
  <span>Dashboard</span>
87
  </div>
88
+ <div class="sidebar-item active flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('clients')">
89
  <i class="fas fa-users text-gray-500 mr-3 w-5"></i>
90
  <span>Clients</span>
91
  </div>
92
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('pipeline')">
93
  <i class="fas fa-funnel-dollar text-gray-500 mr-3 w-5"></i>
94
  <span>Sales Pipeline</span>
95
  </div>
96
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('projects')">
97
  <i class="fas fa-project-diagram text-gray-500 mr-3 w-5"></i>
98
  <span>Projects</span>
99
  </div>
100
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('tasks')">
101
  <i class="fas fa-tasks text-gray-500 mr-3 w-5"></i>
102
  <span>Tasks</span>
103
  </div>
104
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('calendar')">
105
  <i class="fas fa-calendar-alt text-gray-500 mr-3 w-5"></i>
106
  <span>Calendar</span>
107
  </div>
108
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('invoices')">
109
  <i class="fas fa-file-invoice-dollar text-gray-500 mr-3 w-5"></i>
110
  <span>Invoices</span>
111
  </div>
112
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('reports')">
113
  <i class="fas fa-chart-line text-gray-500 mr-3 w-5"></i>
114
  <span>Reports</span>
115
  </div>
116
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('settings')">
117
  <i class="fas fa-cog text-gray-500 mr-3 w-5"></i>
118
  <span>Settings</span>
119
  </div>
 
136
  <!-- Top navigation -->
137
  <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white">
138
  <div class="flex items-center">
139
+ <button class="md:hidden text-gray-500 focus:outline-none" onclick="toggleSidebar()">
140
  <i class="fas fa-bars"></i>
141
  </button>
142
  <div class="ml-4 md:ml-0">
 
145
  </div>
146
  <div class="flex items-center">
147
  <div class="relative">
148
+ <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none" onclick="toggleNotifications()">
149
  <i class="fas fa-bell"></i>
150
  </button>
151
  <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
152
+ <div id="notifications-dropdown" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-10">
153
+ <div class="py-1">
154
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">New client added</a>
155
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Project deadline approaching</a>
156
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Payment received</a>
157
+ </div>
158
+ </div>
159
  </div>
160
  <div class="ml-4 relative">
161
+ <button id="user-menu-button" class="flex items-center text-sm rounded-full focus:outline-none" onclick="toggleUserMenu()">
162
  <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
163
  </button>
164
+ <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
165
+ <div class="py-1">
166
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
167
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
168
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
169
+ </div>
170
+ </div>
171
  </div>
172
  </div>
173
  </div>
 
178
  <div class="mb-6">
179
  <div class="border-b border-gray-200">
180
  <nav class="-mb-px flex space-x-8">
181
+ <button id="clients-tab" class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" onclick="showSection('clients-section')">Clients</button>
182
+ <button id="leads-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" onclick="showSection('leads-section')">Leads</button>
183
+ <button id="pipeline-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" onclick="showSection('pipeline-section')">Sales Pipeline</button>
184
+ <button id="projects-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" onclick="showSection('projects-section')">Projects</button>
185
  </nav>
186
  </div>
187
  </div>
 
194
  <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300">
195
  <i class="fas fa-download mr-2"></i> Export
196
  </button>
197
+ <button id="add-client-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center" onclick="openModal('client-modal')">
198
  <i class="fas fa-plus mr-2"></i> Add Client
199
  </button>
200
  </div>
 
276
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
277
  </tr>
278
  </thead>
279
+ <tbody class="bg-white divide-y divide-gray-200" id="client-table-body">
280
+ <!-- Client rows will be populated here by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
  </tbody>
282
  </table>
283
  </div>
 
309
  </a>
310
  </nav>
311
  </div>
 
312
  </div>
313
  </div>
314
  </div>
 
322
  <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300">
323
  <i class="fas fa-filter mr-2"></i> Filter
324
  </button>
325
+ <button id="add-lead-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center" onclick="openModal('lead-modal')">
326
  <i class="fas fa-plus mr-2"></i> Add Lead
327
  </button>
328
  </div>
 
332
  <div class="bg-white p-4 rounded-lg shadow mb-6">
333
  <h3 class="text-lg font-medium text-gray-800 mb-4">Lead Conversion Funnel</h3>
334
  <div class="grid grid-cols-5 gap-4">
335
+ <div class="pipeline-stage bg-blue-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('New Lead')">
336
  <div class="text-blue-600 text-2xl font-bold mb-1">85</div>
337
  <div class="text-blue-800 font-medium">New Leads</div>
338
  <div class="text-xs text-blue-500 mt-1">+12 this week</div>
 
340
  <div class="flex items-center justify-center">
341
  <i class="fas fa-arrow-right text-gray-400"></i>
342
  </div>
343
+ <div class="pipeline-stage bg-purple-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('Contacted')">
344
  <div class="text-purple-600 text-2xl font-bold mb-1">42</div>
345
  <div class="text-purple-800 font-medium">Contacted</div>
346
  <div class="text-xs text-purple-500 mt-1">35% conversion</div>
 
348
  <div class="flex items-center justify-center">
349
  <i class="fas fa-arrow-right text-gray-400"></i>
350
  </div>
351
+ <div class="pipeline-stage bg-indigo-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('Qualified')">
352
  <div class="text-indigo-600 text-2xl font-bold mb-1">18</div>
353
  <div class="text-indigo-800 font-medium">Qualified</div>
354
  <div class="text-xs text-indigo-500 mt-1">42% conversion</div>
 
356
  <div class="flex items-center justify-center">
357
  <i class="fas fa-arrow-right text-gray-400"></i>
358
  </div>
359
+ <div class="pipeline-stage bg-green-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('Proposal Sent')">
360
  <div class="text-green-600 text-2xl font-bold mb-1">7</div>
361
  <div class="text-green-800 font-medium">Proposal Sent</div>
362
  <div class="text-xs text-green-500 mt-1">39% conversion</div>
 
364
  <div class="flex items-center justify-center">
365
  <i class="fas fa-arrow-right text-gray-400"></i>
366
  </div>
367
+ <div class="pipeline-stage bg-yellow-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('Closed Won')">
368
  <div class="text-yellow-600 text-2xl font-bold mb-1">3</div>
369
  <div class="text-yellow-800 font-medium">Closed Won</div>
370
  <div class="text-xs text-yellow-500 mt-1">43% conversion</div>
 
400
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
401
  </tr>
402
  </thead>
403
+ <tbody class="bg-white divide-y divide-gray-200" id="lead-table-body">
404
+ <!-- Lead rows will be populated here by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
405
  </tbody>
406
  </table>
407
  </div>
 
446
  <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300">
447
  <i class="fas fa-cog mr-2"></i> Configure
448
  </button>
449
+ <button id="add-deal-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center" onclick="openModal('deal-modal')">
450
  <i class="fas fa-plus mr-2"></i> Add Deal
451
  </button>
452
  </div>
 
485
  <div class="p-3 rounded-full bg-purple-100 text-purple-600">
486
  <i class="fas fa-chart-pie"></i>
487
  </div>
488
+ </
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
489
  </html>
prompts.txt CHANGED
@@ -1,4 +1,5 @@
1
  thanks! can you please now code the entire backend functionalities?
2
  Amazing! Can you please also add a space on each client for me to upload the client's face or logo (JPEG, PNG, TIFF formats, etc.)? Everything else is working perfectly in the dashboard, please keep it!
3
  The "+ Add Client" button is not working now, can you please fix it?
4
- great, that's awesome, thanks! Now that the Dashboard basic version is coded and functioning, let's move to the "Clients" part. I'd like you to code an incredible CRM and Project Management system for me, from the moment a new lead is generated, to tracking the lead, closing the deal, tracking the project status and development until it's final delivery, deadline per stage, etc. Please perform a deep scan in https://bloom.io/ and similar top-notch competitors to develop this system.
 
 
1
  thanks! can you please now code the entire backend functionalities?
2
  Amazing! Can you please also add a space on each client for me to upload the client's face or logo (JPEG, PNG, TIFF formats, etc.)? Everything else is working perfectly in the dashboard, please keep it!
3
  The "+ Add Client" button is not working now, can you please fix it?
4
+ great, that's awesome, thanks! Now that the Dashboard basic version is coded and functioning, let's move to the "Clients" part. I'd like you to code an incredible CRM and Project Management system for me, from the moment a new lead is generated, to tracking the lead, closing the deal, tracking the project status and development until it's final delivery, deadline per stage, etc. Please perform a deep scan in https://bloom.io/ and similar top-notch competitors to develop this system.
5
+ amazing, thanks! now please make sure this entire system is fully functional and operating, all buttons are working properly, all fully connected on the backend, etc.