160 lines
9.5 KiB
TypeScript
160 lines
9.5 KiB
TypeScript
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>
|
|
);
|
|
};
|