feat: implement organization insights dashboard with detailed metrics and collaboration data in sysadmin-cli
This commit is contained in:
@@ -314,6 +314,76 @@ export const setCompanyBanned = async (id: string, banned: boolean) => {
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export type OrganizationInsights = {
|
||||
organization: {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
categoryId: number;
|
||||
banned: boolean;
|
||||
published?: string;
|
||||
onboardingStep?: number;
|
||||
onboardingCompleted?: boolean;
|
||||
};
|
||||
owner: {
|
||||
id: string;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
email?: string;
|
||||
verificated?: boolean;
|
||||
phoneCountryCode?: string;
|
||||
phoneAreaCode?: string;
|
||||
phoneNumber?: string;
|
||||
} | null;
|
||||
collaborators: {
|
||||
id: string;
|
||||
userId?: string;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
fullName?: string;
|
||||
email?: string;
|
||||
roles?: string[];
|
||||
removed?: boolean;
|
||||
active: boolean;
|
||||
avatar?: string;
|
||||
}[];
|
||||
subscription: {
|
||||
id: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
isActive: boolean;
|
||||
autoRenew: boolean;
|
||||
mpStatus?: string;
|
||||
pendingPaymentType?: 'extension' | 'upgrade';
|
||||
plan: {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
price: number;
|
||||
limitOrganizations: number;
|
||||
limitEmployees: number;
|
||||
limitServices: number;
|
||||
limitAppointments: number;
|
||||
limitClients: number;
|
||||
} | null;
|
||||
} | null;
|
||||
stats: {
|
||||
employeesCount: number;
|
||||
activeEmployeesCount: number;
|
||||
servicesCount: number;
|
||||
activeServicesCount: number;
|
||||
clientsCount: number;
|
||||
activeClientsCount: number;
|
||||
reservationsLast30Days: number;
|
||||
};
|
||||
};
|
||||
|
||||
export const fetchOrganizationInsights = async (companyId: string): Promise<OrganizationInsights> => {
|
||||
const res = await sysadminApi.post('/companies/insights', { companyId });
|
||||
return res.data;
|
||||
};
|
||||
|
||||
// Services API Calls
|
||||
export const fetchServices = async (filters: any) => {
|
||||
const res = await sysadminApi.post('/services/paginate', filters);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -160,3 +160,36 @@ button {
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user