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

2026-07-30 17:33:57 -03:00
parent 781310e36c
commit 146770a55d
14 changed files with 595 additions and 62 deletions
@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { AlertCircle, CalendarDays, CheckCircle2, Users, X } from 'lucide-react';
+import { fetchOrganizationInsights } from '../../api/sysadmin';
+import type { OrganizationInsights } from '../../api/sysadmin';
+
+interface OrganizationInsightsModalProps {
+  company: any;
+  onClose: () => void;
+}
+
+const formatDate = (value?: string) => {
+  if (!value) return '-';
+  return new Intl.DateTimeFormat('es-AR', { dateStyle: 'medium' }).format(new Date(value));
+};
+
+const fullName = (owner: OrganizationInsights['owner']) => {
+  if (!owner) return '-';
+  return [owner.firstName, owner.lastName].filter(Boolean).join(' ') || owner.email || '-';
+};
+
+const phone = (owner: OrganizationInsights['owner']) => {
+  if (!owner) return '-';
+  return [owner.phoneCountryCode, owner.phoneAreaCode, owner.phoneNumber].filter(Boolean).join(' ') || '-';
+};
+
+const collaboratorName = (collaborator: OrganizationInsights['collaborators'][number]) => {
+  return collaborator.fullName || [collaborator.firstName, collaborator.lastName].filter(Boolean).join(' ') || collaborator.email || collaborator.userId || '-';
+};
+
+const StatCard = ({ label, value }: { label: string; value: number }) => (
+  <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
+    <div style={{ color: 'var(--text-muted)', fontSize: '0.82rem', marginBottom: '0.35rem' }}>{label}</div>
+    <div style={{ color: 'var(--text-main)', fontSize: '1.6rem', fontWeight: 700 }}>{value}</div>
+  </div>
+);
+
+export const OrganizationInsightsModal: React.FC<OrganizationInsightsModalProps> = ({ company, onClose }) => {
+  const [insights, setInsights] = useState<OrganizationInsights | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const loadInsights = async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const result = await fetchOrganizationInsights(company.id || company._id);
+        setInsights(result);
+      } catch (e) {
+        console.error(e);
+        setError('No se pudo cargar el detalle de la organización.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadInsights();
+  }, [company]);
+
+  return (
+    <div className="modal-overlay" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 }}>
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        className="glass-panel"
+        style={{ width: '92%', maxWidth: '900px', padding: '2rem', position: 'relative', display: 'flex', flexDirection: 'column', maxHeight: '85vh', overflow: 'auto' }}
+      >
+        <button onClick={onClose} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'transparent', color: 'var(--text-muted)' }}>
+          <X size={24} />
+        </button>
+
+        <h2 style={{ fontSize: '1.5rem', marginBottom: '0.35rem', fontWeight: 'bold' }}>Detalle de {company.name}</h2>
+        <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>Vista de solo lectura para SysAdmin.</p>
+
+        {loading ? (
+          <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>Cargando detalle...</div>
+        ) : error ? (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', color: 'var(--danger)', padding: '1rem', border: '1px solid rgba(255,0,0,0.25)', borderRadius: '12px' }}>
+            <AlertCircle size={18} /> {error}
+          </div>
+        ) : !insights ? (
+          <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>No hay información disponible.</div>
+        ) : (
+          <div style={{ display: 'grid', gap: '1rem' }}>
+            <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '1rem' }}>
+              <StatCard label="Colaboradores" value={insights.stats.employeesCount} />
+              <StatCard label="Colaboradores activos" value={insights.stats.activeEmployeesCount} />
+              <StatCard label="Servicios" value={insights.stats.servicesCount} />
+              <StatCard label="Servicios activos" value={insights.stats.activeServicesCount} />
+              <StatCard label="Clientes" value={insights.stats.clientsCount} />
+              <StatCard label="Clientes activos" value={insights.stats.activeClientsCount} />
+              <StatCard label="Reservas últimos 30 días" value={insights.stats.reservationsLast30Days} />
+            </section>
+
+            <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '1rem' }}>
+              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
+                <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><CheckCircle2 size={18} /> Organización</h3>
+                <p><strong>Nombre:</strong> {insights.organization.name}</p>
+                <p><strong>Slug:</strong> {insights.organization.slug || '-'}</p>
+                <p><strong>Estado:</strong> {insights.organization.banned ? 'Baneada' : 'Activa'}</p>
+                <p><strong>Publicación:</strong> {insights.organization.published || '-'}</p>
+                <p><strong>Onboarding:</strong> {insights.organization.onboardingCompleted ? 'Completo' : `Paso ${insights.organization.onboardingStep || 0}`}</p>
+              </div>
+
+              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
+                <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><Users size={18} /> Dueño</h3>
+                <p><strong>Nombre:</strong> {fullName(insights.owner)}</p>
+                <p><strong>Email:</strong> {insights.owner?.email || '-'}</p>
+                <p><strong>Teléfono:</strong> {phone(insights.owner)}</p>
+                <p><strong>Verificado:</strong> {insights.owner?.verificated ? 'Sí' : 'No'}</p>
+              </div>
+
+              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
+                <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><CalendarDays size={18} /> Plan</h3>
+                {insights.subscription ? (
+                  <>
+                    <p><strong>Plan:</strong> {insights.subscription.plan?.name || 'Sin plan asociado'}</p>
+                    <p><strong>Código:</strong> {insights.subscription.plan?.code || '-'}</p>
+                    <p><strong>Estado:</strong> {insights.subscription.mpStatus || (insights.subscription.isActive ? 'active' : 'inactive')}</p>
+                    <p><strong>Inicio:</strong> {formatDate(insights.subscription.startDate)}</p>
+                    <p><strong>Fin:</strong> {formatDate(insights.subscription.endDate)}</p>
+                  </>
+                ) : (
+                  <p style={{ color: 'var(--text-muted)' }}>No se encontró suscripción.</p>
+                )}
+              </div>
+            </section>
+
+            <section style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
+              <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><Users size={18} /> Colaboradores</h3>
+              {insights.collaborators.length === 0 ? (
+                <p style={{ color: 'var(--text-muted)' }}>No hay colaboradores asociados.</p>
+              ) : (
+                <div style={{ display: 'grid', gap: '0.75rem' }}>
+                  {insights.collaborators.map((collaborator) => (
+                    <div key={collaborator.id} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: '0.75rem', alignItems: 'center', padding: '0.75rem', border: '1px solid var(--glass-border)', borderRadius: '10px' }}>
+                      <div style={{ width: '36px', height: '36px', borderRadius: '999px', overflow: 'hidden', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)', fontWeight: 700 }}>
+                        {collaborator.avatar ? <img src={collaborator.avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : collaboratorName(collaborator).charAt(0).toUpperCase()}
+                      </div>
+                      <div>
+                        <div style={{ color: 'var(--text-main)', fontWeight: 600 }}>{collaboratorName(collaborator)}</div>
+                        <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{collaborator.email || 'Sin email disponible'}</div>
+                        <div style={{ color: 'var(--text-muted)', fontSize: '0.78rem' }}>Roles: {collaborator.roles?.join(', ') || '-'}</div>
+                      </div>
+                      <span style={{ color: collaborator.active ? 'var(--success)' : 'var(--text-muted)', fontSize: '0.82rem', fontWeight: 700 }}>
+                        {collaborator.active ? 'Activo' : 'Removido'}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+          </div>
+        )}
+      </motion.div>
+    </div>
+  );
+};