horacio/turnosxpress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand dashboard with navigation cards for companies, plans, and active WAP server management

Browse Source
This commit is contained in:
Horacio Daniel Ros
2026-07-18 21:36:39 -03:00
parent 4f3b56784e
commit 0f76ef3118
1 changed files with 60 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sysadmin-cli/src/pages/DashboardPage.tsx
+60 -8
View File
@@ -1,5 +1,5 @@
import { motion } from 'framer-motion';
import { Users, Server, Shield } from 'lucide-react';
import { Building2, CreditCard, RefreshCw, Server, Shield, Tags, Users } from 'lucide-react';
import { Link } from 'react-router-dom';
export const DashboardPage = () => {
@@ -32,23 +32,61 @@ export const DashboardPage = () => {
</div>
<div>
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem', color: 'var(--text-main)' }}>Gestión de Usuarios</h3>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Administra perfiles, verifica cuentas, consulta organizaciones y realiza limpiezas seguras en la base de datos.</p>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Administra perfiles, verifica cuentas, consulta organizaciones, suscripciones, pagos y herramientas de recálculo.</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '1rem' }}>
<span className="dashboard-tag"><CreditCard size={14} /> Suscripciones</span>
<span className="dashboard-tag"><RefreshCw size={14} /> Recálculos</span>
</div>
</div>
</motion.div>
</Link>
{/* Card Companies */}
<Link to="/companies" style={{ display: 'block' }}>
<motion.div
whileHover={{ y: -5, scale: 1.02 }}
className="glass-panel"
style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', cursor: 'pointer', height: '100%' }}
>
<div style={{ width: '60px', height: '60px', borderRadius: '16px', background: 'rgba(16, 185, 129, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--success)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
<Building2 size={30} />
</div>
<div>
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem', color: 'var(--text-main)' }}>Gestión de Organizaciones</h3>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Consulta organizaciones, revisa estado operativo y administra bloqueos desde el panel central.</p>
</div>
</motion.div>
</Link>
{/* Card Plans */}
<Link to="/plans" style={{ display: 'block' }}>
<motion.div
whileHover={{ y: -5, scale: 1.02 }}
className="glass-panel"
style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', cursor: 'pointer', height: '100%' }}
>
<div style={{ width: '60px', height: '60px', borderRadius: '16px', background: 'rgba(245, 158, 11, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--warning)', border: '1px solid rgba(245, 158, 11, 0.2)' }}>
<Tags size={30} />
</div>
<div>
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem', color: 'var(--text-main)' }}>Gestión de Planes</h3>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Visualiza y edita precios, límites, descuentos, funciones y disponibilidad de los planes contratables.</p>
</div>
</motion.div>
</Link>
{/* Card Wap Servers */}
<div style={{ opacity: 0.6 }}>
<div className="glass-panel" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', height: '100%' }}>
<Link to="/wapservers" style={{ display: 'block' }}>
<motion.div whileHover={{ y: -5, scale: 1.02 }} className="glass-panel" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', cursor: 'pointer', height: '100%' }}>
<div style={{ width: '60px', height: '60px', borderRadius: '16px', background: 'rgba(139, 92, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)', border: '1px solid rgba(139, 92, 246, 0.2)' }}>
<Server size={30} />
</div>
<div>
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem' }}>Servidores WAP</h3>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>[Próximamente] Monitoreo y configuración de servidores de WhatsApp puente.</p>
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem', color: 'var(--text-main)' }}>Servidores WAP</h3>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Consulta servidores de WhatsApp puente y su estado operativo.</p>
</div>
</div>
</div>
</motion.div>
</Link>
{/* Card Config */}
<div style={{ opacity: 0.6 }}>
@@ -64,6 +102,20 @@ export const DashboardPage = () => {
</div>
</div>
<style dangerouslySetInnerHTML={{__html: `
.dashboard-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: var(--text-muted);
font-size: 0.78rem;
font-weight: 700;
border: 1px solid rgba(255, 255, 255, 0.08);
}
`}} />
</motion.div>
);
};