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

sysadmin-cli/src/pages/DashboardPage.tsx

@@ -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 }}>
+        <Link to="/wapservers" style={{ display: 'block' }}>
-          <div className="glass-panel" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', height: '100%' }}>
+          <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>
+              <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' }}>[Próximamente] Monitoreo y configuración de servidores de WhatsApp puente.</p>
+              <p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Consulta servidores de WhatsApp puente y su estado operativo.</p>
             </div>
-          </div>
+          </motion.div>
-        </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>
   );
 };