Hugging Face's logo

Spaces:
VedetteStore
/
tecnova-crm
Running

App Files Community
VedetteStore commited on
Commit
cb6830f
路
verified 路
1 Parent(s): 2cb6209

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +429 -7
index.html CHANGED
@@ -398,6 +398,38 @@
398
  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
399
  background: #64748b;
400
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
401
  </style>
402
  </head>
403
 
@@ -429,7 +461,7 @@
429
  <div class="p-2">
430
  <p class="text-xs uppercase text-white/50 px-3 py-2">Principal</p>
431
  <a href="#" data-section="dashboard"
432
- class="flex items-center px-3 py-3 text-white/80 hover:bg-white/10 rounded-lg mb-1">
433
  <i class="fas fa-tachometer-alt mr-3"></i>
434
  <span>Dashboard</span>
435
  </a>
@@ -439,7 +471,7 @@
439
  <span>Proyectos</span>
440
  </a>
441
  <a href="#" data-section="clients"
442
- class="flex items-center px-3 py-3 text-white bg-white/20 rounded-lg mb-1 active">
443
  <i class="fas fa-users mr-3"></i>
444
  <span>Clientes</span>
445
  </a>
@@ -497,7 +529,7 @@
497
  <!-- Top Navigation -->
498
  <header class="bg-white shadow-sm dark:bg-slate-800">
499
  <div class="px-6 py-4 flex items-center justify-between">
500
- <h1 id="page-title" class="text-2xl font-bold text-tecnovagray dark:text-white">Clientes</h1>
501
 
502
  <div class="flex items-center space-x-4">
503
  <button id="theme-toggle" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">
@@ -514,7 +546,7 @@
514
  <i class="fas fa-envelope"></i>
515
  <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
516
  </button>
517
- </div>
518
  <div class="relative">
519
  <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-tecnovablue dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:placeholder-gray-400">
520
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
@@ -526,8 +558,312 @@
526
  <!-- Content Sections -->
527
  <main class="flex-1 overflow-y-auto p-6 bg-gray-50 dark:bg-slate-900">
528
  <!-- Dashboard Section -->
529
- <div id="dashboard-section" class="tab-content">
530
- <!-- Dashboard content here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
531
  </div>
532
 
533
  <!-- Projects Section -->
@@ -536,7 +872,7 @@
536
  </div>
537
 
538
  <!-- Clients Section -->
539
- <div id="clients-section" class="tab-content active">
540
  <!-- Bento Box Grid -->
541
  <div class="bento-grid mb-6">
542
  <!-- Card 1: Total Clients -->
@@ -1034,6 +1370,92 @@
1034
 
1035
  // Initialize charts
1036
  document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1037
  // Client Location Chart
1038
  const clientLocationCtx = document.getElementById('clientLocationChart').getContext('2d');
1039
  const clientLocationChart = new Chart(clientLocationCtx, {
 
398
  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
399
  background: #64748b;
400
  }
401
+
402
+ /* Dashboard specific styles */
403
+ .metric-card {
404
+ transition: all 0.3s ease;
405
+ }
406
+
407
+ .metric-card:hover {
408
+ transform: translateY(-5px);
409
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
410
+ }
411
+
412
+ .activity-item {
413
+ transition: all 0.2s ease;
414
+ }
415
+
416
+ .activity-item:hover {
417
+ background-color: rgba(26, 75, 140, 0.05);
418
+ }
419
+
420
+ .dark .activity-item:hover {
421
+ background-color: rgba(255, 255, 255, 0.05);
422
+ }
423
+
424
+ .project-progress {
425
+ height: 6px;
426
+ border-radius: 3px;
427
+ }
428
+
429
+ .project-card:hover {
430
+ transform: translateY(-3px);
431
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
432
+ }
433
  </style>
434
  </head>
435
 
 
461
  <div class="p-2">
462
  <p class="text-xs uppercase text-white/50 px-3 py-2">Principal</p>
463
  <a href="#" data-section="dashboard"
464
+ class="flex items-center px-3 py-3 text-white bg-white/20 rounded-lg mb-1 active">
465
  <i class="fas fa-tachometer-alt mr-3"></i>
466
  <span>Dashboard</span>
467
  </a>
 
471
  <span>Proyectos</span>
472
  </a>
473
  <a href="#" data-section="clients"
474
+ class="flex items-center px-3 py-3 text-white/80 hover:bg-white/10 rounded-lg mb-1">
475
  <i class="fas fa-users mr-3"></i>
476
  <span>Clientes</span>
477
  </a>
 
529
  <!-- Top Navigation -->
530
  <header class="bg-white shadow-sm dark:bg-slate-800">
531
  <div class="px-6 py-4 flex items-center justify-between">
532
+ <h1 id="page-title" class="text-2xl font-bold text-tecnovagray dark:text-white">Dashboard</h1>
533
 
534
  <div class="flex items-center space-x-4">
535
  <button id="theme-toggle" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">
 
546
  <i class="fas fa-envelope"></i>
547
  <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
548
  </button>
549
+ </div>
550
  <div class="relative">
551
  <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-tecnovablue dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:placeholder-gray-400">
552
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 
558
  <!-- Content Sections -->
559
  <main class="flex-1 overflow-y-auto p-6 bg-gray-50 dark:bg-slate-900">
560
  <!-- Dashboard Section -->
561
+ <div id="dashboard-section" class="tab-content active">
562
+ <!-- Welcome Banner -->
563
+ <div class="bg-gradient-to-r from-tecnovablue to-tecnovagreen text-white rounded-xl p-6 mb-6">
564
+ <div class="flex items-center justify-between">
565
+ <div>
566
+ <h2 class="text-2xl font-bold mb-2">Bienvenido de nuevo, Admin</h2>
567
+ <p class="opacity-90">Aqu铆 tienes un resumen de las actividades recientes y m茅tricas clave.</p>
568
+ </div>
569
+ <div class="hidden md:block">
570
+ <i class="fas fa-chart-line text-5xl opacity-30"></i>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Metrics Grid -->
576
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
577
+ <!-- Total Revenue -->
578
+ <div class="metric-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm">
579
+ <div class="flex items-center justify-between">
580
+ <div>
581
+ <p class="text-gray-500 dark:text-gray-400">Ingresos Totales</p>
582
+ <h3 class="text-2xl font-bold text-tecnovablue dark:text-blue-400">$245.8M</h3>
583
+ </div>
584
+ <div class="p-3 rounded-full bg-blue-100 text-tecnovablue dark:bg-blue-900 dark:text-blue-400">
585
+ <i class="fas fa-dollar-sign text-xl"></i>
586
+ </div>
587
+ </div>
588
+ <div class="mt-4">
589
+ <div class="flex items-center justify-between text-sm">
590
+ <span class="text-gray-500 dark:text-gray-400">vs mes anterior</span>
591
+ <span class="font-medium text-green-500">+12.5%</span>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <!-- Active Projects -->
597
+ <div class="metric-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm">
598
+ <div class="flex items-center justify-between">
599
+ <div>
600
+ <p class="text-gray-500 dark:text-gray-400">Proyectos Activos</p>
601
+ <h3 class="text-2xl font-bold text-tecnovagreen dark:text-green-400">18</h3>
602
+ </div>
603
+ <div class="p-3 rounded-full bg-green-100 text-tecnovagreen dark:bg-green-900 dark:text-green-400">
604
+ <i class="fas fa-project-diagram text-xl"></i>
605
+ </div>
606
+ </div>
607
+ <div class="mt-4">
608
+ <div class="flex items-center justify-between text-sm">
609
+ <span class="text-gray-500 dark:text-gray-400">Completados: 5</span>
610
+ <span class="font-medium text-blue-500">72% en plazo</span>
611
+ </div>
612
+ </div>
613
+ </div>
614
+
615
+ <!-- Total Clients -->
616
+ <div class="metric-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm">
617
+ <div class="flex items-center justify-between">
618
+ <div>
619
+ <p class="text-gray-500 dark:text-gray-400">Clientes</p>
620
+ <h3 class="text-2xl font-bold text-purple-600 dark:text-purple-400">24</h3>
621
+ </div>
622
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-400">
623
+ <i class="fas fa-users text-xl"></i>
624
+ </div>
625
+ </div>
626
+ <div class="mt-4">
627
+ <div class="flex items-center justify-between text-sm">
628
+ <span class="text-gray-500 dark:text-gray-400">Nuevos este mes: 3</span>
629
+ <span class="font-medium text-green-500">+8%</span>
630
+ </div>
631
+ </div>
632
+ </div>
633
+
634
+ <!-- Tasks Completed -->
635
+ <div class="metric-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm">
636
+ <div class="flex items-center justify-between">
637
+ <div>
638
+ <p class="text-gray-500 dark:text-gray-400">Tareas Completadas</p>
639
+ <h3 class="text-2xl font-bold text-orange-500 dark:text-orange-400">142</h3>
640
+ </div>
641
+ <div class="p-3 rounded-full bg-orange-100 text-orange-500 dark:bg-orange-900 dark:text-orange-400">
642
+ <i class="fas fa-check-circle text-xl"></i>
643
+ </div>
644
+ </div>
645
+ <div class="mt-4">
646
+ <div class="flex items-center justify-between text-sm">
647
+ <span class="text-gray-500 dark:text-gray-400">Pendientes: 28</span>
648
+ <span class="font-medium text-red-500">-5%</span>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ </div>
653
+
654
+ <!-- Charts Row -->
655
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
656
+ <!-- Revenue Chart -->
657
+ <div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm">
658
+ <div class="flex items-center justify-between mb-4">
659
+ <h2 class="text-lg font-semibold text-tecnovagray dark:text-white">Ingresos Mensuales</h2>
660
+ <select class="text-sm border rounded-lg px-3 py-1 bg-white dark:bg-slate-700 dark:border-slate-600">
661
+ <option>2023</option>
662
+ <option>2022</option>
663
+ <option>2021</option>
664
+ </select>
665
+ </div>
666
+ <div class="chart-container">
667
+ <canvas id="revenueChart"></canvas>
668
+ </div>
669
+ </div>
670
+
671
+ <!-- Project Status Chart -->
672
+ <div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm">
673
+ <div class="flex items-center justify-between mb-4">
674
+ <h2 class="text-lg font-semibold text-tecnovagray dark:text-white">Estado de Proyectos</h2>
675
+ <div class="flex space-x-2">
676
+ <button class="px-3 py-1 text-xs bg-tecnovablue text-white rounded dark:bg-blue-600">Todos</button>
677
+ <button class="px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded dark:bg-gray-700 dark:text-gray-300">Activos</button>
678
+ </div>
679
+ </div>
680
+ <div class="chart-container">
681
+ <canvas id="projectStatusChart"></canvas>
682
+ </div>
683
+ </div>
684
+ </div>
685
+
686
+ <!-- Projects and Activity Row -->
687
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
688
+ <!-- Active Projects -->
689
+ <div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm">
690
+ <div class="flex items-center justify-between mb-4">
691
+ <h2 class="text-lg font-semibold text-tecnovagray dark:text-white">Proyectos Activos</h2>
692
+ <a href="#" class="text-sm text-tecnovablue hover:underline dark:text-blue-400">Ver todos</a>
693
+ </div>
694
+
695
+ <div class="space-y-4">
696
+ <!-- Project 1 -->
697
+ <div class="project-card bg-gray-50 dark:bg-slate-700 rounded-lg p-4 transition-all">
698
+ <div class="flex items-start justify-between">
699
+ <div>
700
+ <h3 class="font-medium dark:text-white">Modernizaci贸n Planta Energ茅tica</h3>
701
+ <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Energ铆a Renovable SAS</p>
702
+ <div class="flex items-center text-sm">
703
+ <span class="text-gray-500 dark:text-gray-400 mr-3">Progreso: 65%</span>
704
+ <span class="text-blue-500">En plazo</span>
705
+ </div>
706
+ </div>
707
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs dark:bg-blue-900 dark:text-blue-400">Alta</span>
708
+ </div>
709
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-3 dark:bg-gray-600">
710
+ <div class="project-progress bg-tecnovablue h-2 rounded-full" style="width: 65%"></div>
711
+ </div>
712
+ <div class="flex items-center justify-between mt-3 text-sm text-gray-500 dark:text-gray-400">
713
+ <span>Inicio: 15/03/2023</span>
714
+ <span>Fin: 30/11/2023</span>
715
+ </div>
716
+ </div>
717
+
718
+ <!-- Project 2 -->
719
+ <div class="project-card bg-gray-50 dark:bg-slate-700 rounded-lg p-4 transition-all">
720
+ <div class="flex items-start justify-between">
721
+ <div>
722
+ <h3 class="font-medium dark:text-white">Automatizaci贸n Proceso Agroindustrial</h3>
723
+ <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Agropecuaria La Esperanza</p>
724
+ <div class="flex items-center text-sm">
725
+ <span class="text-gray-500 dark:text-gray-400 mr-3">Progreso: 42%</span>
726
+ <span class="text-yellow-500">En riesgo</span>
727
+ </div>
728
+ </div>
729
+ <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs dark:bg-green-900 dark:text-green-400">Media</span>
730
+ </div>
731
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-3 dark:bg-gray-600">
732
+ <div class="project-progress bg-tecnovagreen h-2 rounded-full" style="width: 42%"></div>
733
+ </div>
734
+ <div class="flex items-center justify-between mt-3 text-sm text-gray-500 dark:text-gray-400">
735
+ <span>Inicio: 01/05/2023</span>
736
+ <span>Fin: 15/12/2023</span>
737
+ </div>
738
+ </div>
739
+
740
+ <!-- Project 3 -->
741
+ <div class="project-card bg-gray-50 dark:bg-slate-700 rounded-lg p-4 transition-all">
742
+ <div class="flex items-start justify-between">
743
+ <div>
744
+ <h3 class="font-medium dark:text-white">Dise帽o Sistema HVAC</h3>
745
+ <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Constructora Edificar SAS</p>
746
+ <div class="flex items-center text-sm">
747
+ <span class="text-gray-500 dark:text-gray-400 mr-3">Progreso: 78%</span>
748
+ <span class="text-blue-500">En plazo</span>
749
+ </div>
750
+ </div>
751
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs dark:bg-purple-900 dark:text-purple-400">Baja</span>
752
+ </div>
753
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-3 dark:bg-gray-600">
754
+ <div class="project-progress bg-purple-600 h-2 rounded-full" style="width: 78%"></div>
755
+ </div>
756
+ <div class="flex items-center justify-between mt-3 text-sm text-gray-500 dark:text-gray-400">
757
+ <span>Inicio: 10/02/2023</span>
758
+ <span>Fin: 30/09/2023</span>
759
+ </div>
760
+ </div>
761
+ </div>
762
+ </div>
763
+
764
+ <!-- Recent Activity -->
765
+ <div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm">
766
+ <div class="flex items-center justify-between mb-4">
767
+ <h2 class="text-lg font-semibold text-tecnovagray dark:text-white">Actividad Reciente</h2>
768
+ <a href="#" class="text-sm text-tecnovablue hover:underline dark:text-blue-400">Ver todo</a>
769
+ </div>
770
+
771
+ <div class="space-y-4">
772
+ <!-- Activity 1 -->
773
+ <div class="activity-item p-3 rounded-lg">
774
+ <div class="flex items-start">
775
+ <div class="p-2 bg-blue-100 text-tecnovablue rounded-full mr-3 dark:bg-blue-900 dark:text-blue-400">
776
+ <i class="fas fa-file-invoice-dollar"></i>
777
+ </div>
778
+ <div>
779
+ <p class="font-medium dark:text-white">Factura #INV-2023-056 generada</p>
780
+ <p class="text-sm text-gray-500 dark:text-gray-400">Energ铆a Renovable SAS - $12,450,000</p>
781
+ <p class="text-xs text-gray-400 dark:text-gray-500">Hace 2 horas</p>
782
+ </div>
783
+ </div>
784
+ </div>
785
+
786
+ <!-- Activity 2 -->
787
+ <div class="activity-item p-3 rounded-lg">
788
+ <div class="flex items-start">
789
+ <div class="p-2 bg-green-100 text-tecnovagreen rounded-full mr-3 dark:bg-green-900 dark:text-green-400">
790
+ <i class="fas fa-check-circle"></i>
791
+ </div>
792
+ <div>
793
+ <p class="font-medium dark:text-white">Tarea completada: Revisi贸n dise帽o</p>
794
+ <p class="text-sm text-gray-500 dark:text-gray-400">Proyecto: Automatizaci贸n Proceso Agroindustrial</p>
795
+ <p class="text-xs text-gray-400 dark:text-gray-500">Hace 5 horas</p>
796
+ </div>
797
+ </div>
798
+ </div>
799
+
800
+ <!-- Activity 3 -->
801
+ <div class="activity-item p-3 rounded-lg">
802
+ <div class="flex items-start">
803
+ <div class="p-2 bg-purple-100 text-purple-600 rounded-full mr-3 dark:bg-purple-900 dark:text-purple-400">
804
+ <i class="fas fa-user-plus"></i>
805
+ </div>
806
+ <div>
807
+ <p class="font-medium dark:text-white">Nuevo cliente agregado</p>
808
+ <p class="text-sm text-gray-500 dark:text-gray-400">Minera del Sur - Barranquilla</p>
809
+ <p class="text-xs text-gray-400 dark:text-gray-500">Ayer, 15:30</p>
810
+ </div>
811
+ </div>
812
+ </div>
813
+
814
+ <!-- Activity 4 -->
815
+ <div class="activity-item p-3 rounded-lg">
816
+ <div class="flex items-start">
817
+ <div class="p-2 bg-orange-100 text-orange-500 rounded-full mr-3 dark:bg-orange-900 dark:text-orange-400">
818
+ <i class="fas fa-exclamation-triangle"></i>
819
+ </div>
820
+ <div>
821
+ <p class="font-medium dark:text-white">Retraso en entrega detectado</p>
822
+ <p class="text-sm text-gray-500 dark:text-gray-400">Proyecto: Dise帽o Sistema HVAC</p>
823
+ <p class="text-xs text-gray-400 dark:text-gray-500">Ayer, 10:15</p>
824
+ </div>
825
+ </div>
826
+ </div>
827
+
828
+ <!-- Activity 5 -->
829
+ <div class="activity-item p-3 rounded-lg">
830
+ <div class="flex items-start">
831
+ <div class="p-2 bg-yellow-100 text-yellow-500 rounded-full mr-3 dark:bg-yellow-900 dark:text-yellow-400">
832
+ <i class="fas fa-comment-alt"></i>
833
+ </div>
834
+ <div>
835
+ <p class="font-medium dark:text-white">Nuevo comentario en proyecto</p>
836
+ <p class="text-sm text-gray-500 dark:text-gray-400">Modernizaci贸n Planta Energ茅tica</p>
837
+ <p class="text-xs text-gray-400 dark:text-gray-500">20/07/2023</p>
838
+ </div>
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ </div>
844
+
845
+ <!-- Client Locations -->
846
+ <div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm mb-6">
847
+ <div class="flex items-center justify-between mb-4">
848
+ <h2 class="text-lg font-semibold text-tecnovagray dark:text-white">Ubicaci贸n de Clientes</h2>
849
+ <div class="flex space-x-2">
850
+ <button class="px-3 py-1 text-xs bg-tecnovablue text-white rounded dark:bg-blue-600">Colombia</button>
851
+ <button class="px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded dark:bg-gray-700 dark:text-gray-300">Internacional</button>
852
+ </div>
853
+ </div>
854
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
855
+ <div class="chart-container">
856
+ <canvas id="clientLocationChart"></canvas>
857
+ </div>
858
+ <div class="flex items-center justify-center">
859
+ <div class="text-center">
860
+ <i class="fas fa-map-marked-alt text-5xl text-gray-400 mb-3"></i>
861
+ <p class="text-gray-500 dark:text-gray-400">Mapa de ubicaci贸n de clientes</p>
862
+ <p class="text-sm text-gray-400 dark:text-gray-500">Integraci贸n con Google Maps</p>
863
+ </div>
864
+ </div>
865
+ </div>
866
+ </div>
867
  </div>
868
 
869
  <!-- Projects Section -->
 
872
  </div>
873
 
874
  <!-- Clients Section -->
875
+ <div id="clients-section" class="tab-content">
876
  <!-- Bento Box Grid -->
877
  <div class="bento-grid mb-6">
878
  <!-- Card 1: Total Clients -->
 
1370
 
1371
  // Initialize charts
1372
  document.addEventListener('DOMContentLoaded', function() {
1373
+ // Revenue Chart
1374
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
1375
+ const revenueChart = new Chart(revenueCtx, {
1376
+ type: 'line',
1377
+ data: {
1378
+ labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
1379
+ datasets: [{
1380
+ label: 'Ingresos (millones)',
1381
+ data: [12, 15, 18, 14, 20, 22, 25, 28, 24, 30, 32, 35],
1382
+ backgroundColor: 'rgba(26, 75, 140, 0.1)',
1383
+ borderColor: 'rgba(26, 75, 140, 1)',
1384
+ borderWidth: 2,
1385
+ tension: 0.3,
1386
+ fill: true
1387
+ }]
1388
+ },
1389
+ options: {
1390
+ responsive: true,
1391
+ maintainAspectRatio: false,
1392
+ plugins: {
1393
+ legend: {
1394
+ display: false
1395
+ }
1396
+ },
1397
+ scales: {
1398
+ y: {
1399
+ beginAtZero: true,
1400
+ grid: {
1401
+ color: 'rgba(0, 0, 0, 0.05)'
1402
+ }
1403
+ },
1404
+ x: {
1405
+ grid: {
1406
+ display: false
1407
+ }
1408
+ }
1409
+ }
1410
+ }
1411
+ });
1412
+
1413
+ // Project Status Chart
1414
+ const projectStatusCtx = document.getElementById('projectStatusChart').getContext('2d');
1415
+ const projectStatusChart = new Chart(projectStatusCtx, {
1416
+ type: 'doughnut',
1417
+ data: {
1418
+ labels: ['Completados', 'En progreso', 'En riesgo', 'Atrasados'],
1419
+ datasets: [{
1420
+ data: [5, 12, 3, 2],
1421
+ backgroundColor: [
1422
+ 'rgba(46, 133, 110, 0.7)',
1423
+ 'rgba(26, 75, 140, 0.7)',
1424
+ 'rgba(245, 158, 11, 0.7)',
1425
+ 'rgba(239, 68, 68, 0.7)'
1426
+ ],
1427
+ borderColor: [
1428
+ 'rgba(46, 133, 110, 1)',
1429
+ 'rgba(26, 75, 140, 1)',
1430
+ 'rgba(245, 158, 11, 1)',
1431
+ 'rgba(239, 68, 68, 1)'
1432
+ ],
1433
+ borderWidth: 1
1434
+ }]
1435
+ },
1436
+ options: {
1437
+ responsive: true,
1438
+ maintainAspectRatio: false,
1439
+ plugins: {
1440
+ legend: {
1441
+ position: 'right',
1442
+ },
1443
+ tooltip: {
1444
+ callbacks: {
1445
+ label: function(context) {
1446
+ const label = context.label || '';
1447
+ const value = context.raw || 0;
1448
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
1449
+ const percentage = Math.round((value / total) * 100);
1450
+ return `${label}: ${value} (${percentage}%)`;
1451
+ }
1452
+ }
1453
+ }
1454
+ },
1455
+ cutout: '70%'
1456
+ }
1457
+ });
1458
+
1459
  // Client Location Chart
1460
  const clientLocationCtx = document.getElementById('clientLocationChart').getContext('2d');
1461
  const clientLocationChart = new Chart(clientLocationCtx, {