feat: implement organization insights dashboard with detailed metrics and collaboration data in sysadmin-cli

sysadmin-cli/src/pages/CompaniesPage.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { Search, Edit2, ShieldAlert, ShieldCheck, ChevronUp, ChevronDown, RotateCcw, Box } from 'lucide-react';
+import { Search, Edit2, ShieldAlert, ShieldCheck, ChevronUp, ChevronDown, RotateCcw, Box, Eye } from 'lucide-react';
 import { fetchCompanies, setCompanyBanned } from '../api/sysadmin';
 import { EditCompanyModal } from '../components/ui/EditCompanyModal';
 import { CompanyServicesModal } from '../components/ui/CompanyServicesModal';
+import { OrganizationInsightsModal } from '../components/ui/OrganizationInsightsModal';
 
 export const CompaniesPage = () => {
   const [companies, setCompanies] = useState<any[]>([]);
@@ -22,6 +23,7 @@ export const CompaniesPage = () => {
   // Modals state
   const [editingCompany, setEditingCompany] = useState<any>(null);
   const [servicesCompany, setServicesCompany] = useState<any>(null);
+  const [insightsCompany, setInsightsCompany] = useState<any>(null);
 
   const loadCompanies = async () => {
     setLoading(true);
@@ -176,6 +178,7 @@ export const CompaniesPage = () => {
                     </td>
                     <td style={{ padding: '1rem', textAlign: 'right' }}>
                       <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
+                        <button className="icon-btn" title="Ver detalle" onClick={() => setInsightsCompany(c)}><Eye size={18} /></button>
                         <button className="icon-btn" title="Ver Servicios" onClick={() => setServicesCompany(c)}><Box size={18} /></button>
                         <button className="icon-btn" title="Editar Detalles" onClick={() => setEditingCompany(c)}><Edit2 size={18} /></button>
                       </div>
@@ -197,68 +200,10 @@ export const CompaniesPage = () => {
         </div>
       </div>
 
-      <style dangerouslySetInnerHTML={{__html: `
-        .sticky-header {
-          position: sticky;
-          top: 0;
-          z-index: 10;
-          background: rgba(10, 10, 15, 0.95);
-          backdrop-filter: blur(10px);
-          border-bottom: 1px solid var(--glass-border);
-          transition: background 0.2s;
-        }
-        .sortable-header:hover {
-          background: rgba(255, 255, 255, 0.05);
-        }
-        .table-row-hover:hover {
-          background: rgba(255, 255, 255, 0.02);
-        }
-        .icon-btn {
-          background: rgba(255,255,255,0.05);
-          color: var(--text-muted);
-          padding: 8px;
-          border-radius: 8px;
-          transition: all 0.2s;
-        }
-        .icon-btn:hover {
-          background: var(--primary);
-          color: white;
-        }
-        .icon-btn.danger:hover {
-          background: var(--danger);
-        }
-        .btn-secondary {
-          background: rgba(255,255,255,0.05);
-          color: var(--text-main);
-          border: 1px solid var(--glass-border);
-          padding: 0.5rem 1rem;
-          border-radius: 8px;
-          transition: all 0.2s;
-        }
-        .btn-secondary:hover:not(:disabled) {
-          background: rgba(255,255,255,0.1);
-        }
-        .btn-secondary:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-        @media (max-width: 768px) {
-          .companies-page-container {
-            height: auto !important;
-            overflow: visible !important;
-          }
-          .filters-bar form > div {
-            flex: 1 1 100% !important;
-          }
-          .table-scroll-container {
-            overflow-x: auto;
-          }
-        }
-      `}} />
-
       {/* Modals */}
       {editingCompany && <EditCompanyModal company={editingCompany} onClose={() => setEditingCompany(null)} onSaved={loadCompanies} />}
       {servicesCompany && <CompanyServicesModal company={servicesCompany} onClose={() => setServicesCompany(null)} />}
+      {insightsCompany && <OrganizationInsightsModal company={insightsCompany} onClose={() => setInsightsCompany(null)} />}
     </motion.div>
   );
 };