feat: add TypeScript definitions and utility functions for date formatting

- Created a global TypeScript declaration for the txadmin interface on the Window object. - Implemented date formatting utilities using date-fns with Spanish locale support. - Added TypeScript configuration files for app, Electron, and Node environments. - Set up Vite configuration for React application.
2026-08-14 19:13:32 -03:00
parent 9efb1792c7
commit 28295e346c
44 changed files with 10274 additions and 0 deletions
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { X, ShieldAlert, ShieldCheck } from 'lucide-react';
+import { fetchServices, setServiceBanned } from '../../api/sysadmin';
+
+interface CompanyServicesModalProps {
+  company: any;
+  onClose: () => void;
+}
+
+export const CompanyServicesModal: React.FC<CompanyServicesModalProps> = ({ company, onClose }) => {
+  const [services, setServices] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+
+  const loadServices = async () => {
+    setLoading(true);
+    try {
+      const res = await fetchServices({ companyId: company.id || company._id, page, limit: 10 });
+      setServices(res.data);
+      setTotalPages(res.pages);
+    } catch (e) {
+      console.error(e);
+      alert('Error cargando servicios');
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    loadServices();
+  }, [page]);
+
+  const handleToggleBanned = async (service: any) => {
+    if (window.confirm(`¿Deseas ${service.banned ? 'quitar el ban' : 'banear'} el servicio ${service.name}?`)) {
+      try {
+        await setServiceBanned(service.id || service._id, !service.banned);
+        loadServices();
+      } catch (e: any) {
+        alert('Error al actualizar el estado del servicio');
+      }
+    }
+  };
+
+  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: '90%', maxWidth: '800px', padding: '2rem', position: 'relative', display: 'flex', flexDirection: 'column', maxHeight: '80vh' }}
+      >
+        <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: '1.5rem', fontWeight: 'bold' }}>
+          Servicios de {company.name}
+        </h2>
+
+        <div style={{ overflow: 'auto', flex: 1 }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
+            <thead style={{ position: 'sticky', top: 0, background: 'rgba(10, 10, 15, 0.95)', zIndex: 1 }}>
+              <tr>
+                <th style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600' }}>Servicio</th>
+                <th style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600' }}>Precio / Duración</th>
+                <th style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600', textAlign: 'right' }}>Acciones</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr><td colSpan={3} style={{ padding: '2rem', textAlign: 'center' }}>Cargando...</td></tr>
+              ) : services.length === 0 ? (
+                <tr><td colSpan={3} style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>No se encontraron servicios</td></tr>
+              ) : (
+                services.map(s => (
+                  <tr key={s.id || s._id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+                    <td style={{ padding: '1rem' }}>
+                      <div style={{ fontWeight: '600', color: 'var(--text-main)' }}>{s.name}</div>
+                      <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>{s.description || '-'}</div>
+                    </td>
+                    <td style={{ padding: '1rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
+                      ${s.price} / {s.length} min
+                    </td>
+                    <td style={{ padding: '1rem', textAlign: 'right' }}>
+                      <button 
+                        onClick={() => handleToggleBanned(s)}
+                        className="btn-secondary"
+                        style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', color: s.banned ? 'var(--danger)' : 'var(--success)', padding: '6px 12px' }}
+                      >
+                        {s.banned ? <ShieldAlert size={16} /> : <ShieldCheck size={16} />}
+                        {s.banned ? 'Baneado' : 'Activo'}
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        <div style={{ padding: '1rem 0 0 0', borderTop: '1px solid var(--glass-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '1rem' }}>
+          <span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>Página {page} de {totalPages || 1}</span>
+          <div style={{ display: 'flex', gap: '10px' }}>
+            <button className="btn-secondary" disabled={page === 1} onClick={() => setPage(p => p - 1)}>Anterior</button>
+            <button className="btn-secondary" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>Siguiente</button>
+          </div>
+        </div>
+
+      </motion.div>
+    </div>
+  );
+};
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { X, Save } from 'lucide-react';
+import { updateCompany, setCompanyBanned } from '../../api/sysadmin';
+
+interface EditCompanyModalProps {
+  company: any;
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+export const EditCompanyModal: React.FC<EditCompanyModalProps> = ({ company, onClose, onSaved }) => {
+  const [formData, setFormData] = useState({
+    id: company.id || company._id,
+    name: company.name || '',
+    description: company.description || '',
+    categoryId: company.categoryId || '',
+    banned: company.banned || false
+  });
+  const [saving, setSaving] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      await updateCompany({
+        ...formData,
+        categoryId: parseInt(formData.categoryId.toString(), 10)
+      });
+      if (company.banned !== formData.banned) {
+        await setCompanyBanned(formData.id, formData.banned);
+      }
+      alert('Organización actualizada');
+      onSaved();
+      onClose();
+    } catch (err: any) {
+      alert(err.response?.data?.message || err.message || 'Error al actualizar');
+    }
+    setSaving(false);
+  };
+
+  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: '90%', maxWidth: '500px', padding: '2rem', position: 'relative' }}
+      >
+        <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: '1.5rem', fontWeight: 'bold' }}>Editar Organización</h2>
+
+        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Nombre</label>
+            <input 
+              type="text" 
+              className="input-glass" 
+              style={{ width: '100%' }}
+              value={formData.name}
+              onChange={e => setFormData({...formData, name: e.target.value})}
+              required
+            />
+          </div>
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Descripción</label>
+            <textarea 
+              className="input-glass" 
+              style={{ width: '100%', minHeight: '80px', resize: 'vertical' }}
+              value={formData.description}
+              onChange={e => setFormData({...formData, description: e.target.value})}
+            />
+          </div>
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Categoría (ID)</label>
+            <input 
+              type="number" 
+              className="input-glass" 
+              style={{ width: '100%' }}
+              value={formData.categoryId}
+              onChange={e => setFormData({...formData, categoryId: e.target.value})}
+              required
+            />
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            <input 
+              type="checkbox" 
+              id="banned-toggle"
+              checked={formData.banned}
+              onChange={e => setFormData({...formData, banned: e.target.checked})}
+              style={{ width: '18px', height: '18px', cursor: 'pointer' }}
+            />
+            <label htmlFor="banned-toggle" style={{ fontSize: '0.9rem', color: formData.banned ? 'var(--danger)' : 'var(--text-main)', cursor: 'pointer', userSelect: 'none' }}>
+              Organización Baneada
+            </label>
+          </div>
+
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', marginTop: '1rem' }}>
+            <button type="button" onClick={onClose} className="btn-secondary" disabled={saving}>Cancelar</button>
+            <button type="submit" className="btn-primary" style={{ display: 'flex', alignItems: 'center', gap: '8px' }} disabled={saving}>
+              <Save size={18} /> {saving ? 'Guardando...' : 'Guardar Cambios'}
+            </button>
+          </div>
+        </form>
+      </motion.div>
+    </div>
+  );
+};
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { X } from 'lucide-react';
+import { updatePlan } from '../../api/sysadmin';
+import type { Plan } from '../../api/sysadmin';
+
+type EditPlanModalProps = {
+  plan: Plan;
+  onClose: () => void;
+  onSaved: () => void;
+};
+
+const numberFields: { key: keyof Plan; label: string }[] = [
+  { key: 'price', label: 'Precio mensual' },
+  { key: 'annualPrice', label: 'Precio anual' },
+  { key: 'limitOrganizations', label: 'Límite de organizaciones' },
+  { key: 'limitEmployees', label: 'Límite de empleados' },
+  { key: 'limitServices', label: 'Límite de servicios' },
+  { key: 'limitAppointments', label: 'Límite de turnos' },
+  { key: 'limitClients', label: 'Límite de clientes' },
+  { key: 'limitRepeats', label: 'Límite de repeticiones' },
+  { key: 'discount3Months', label: 'Descuento 3 meses (%)' },
+  { key: 'discount6Months', label: 'Descuento 6 meses (%)' },
+  { key: 'discount12Months', label: 'Descuento 12 meses (%)' },
+];
+
+const limitFields = new Set<keyof Plan>([
+  'limitOrganizations',
+  'limitEmployees',
+  'limitServices',
+  'limitAppointments',
+  'limitClients',
+  'limitRepeats',
+]);
+
+const booleanFields: { key: keyof Plan; label: string }[] = [
+  { key: 'active', label: 'Activo para contratación' },
+  { key: 'featured', label: 'Destacado' },
+  { key: 'mailNotifications', label: 'Notificaciones por email' },
+  { key: 'smsNotifications', label: 'Notificaciones SMS' },
+  { key: 'wapNotifications', label: 'Notificaciones WhatsApp' },
+  { key: 'payments', label: 'Pagos habilitados' },
+  { key: 'bot', label: 'Bot habilitado' },
+  { key: 'dateLimit', label: 'Tiene límite de fecha' },
+];
+
+export const EditPlanModal = ({ plan, onClose, onSaved }: EditPlanModalProps) => {
+  const [formData, setFormData] = useState<Plan>({
+    ...plan,
+    features: Array.isArray(plan.features) ? plan.features : [],
+  });
+  const [featuresText, setFeaturesText] = useState(formData.features.join('\n'));
+  const [loading, setLoading] = useState(false);
+
+  const planId = plan._id || plan.id || '';
+
+  const setField = (key: keyof Plan, value: string | number | boolean | string[]) => {
+    setFormData({ ...formData, [key]: value });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await updatePlan({
+        planId,
+        name: formData.name,
+        description: formData.description,
+        code: formData.code,
+        price: Number(formData.price) || 0,
+        annualPrice: Number(formData.annualPrice) || 0,
+        limitOrganizations: Number(formData.limitOrganizations) || 0,
+        limitEmployees: Number(formData.limitEmployees) || 0,
+        limitServices: Number(formData.limitServices) || 0,
+        limitAppointments: Number(formData.limitAppointments) || 0,
+        limitClients: Number(formData.limitClients) || 0,
+        limitRepeats: Number(formData.limitRepeats) || 0,
+        discount3Months: Number(formData.discount3Months) || 0,
+        discount6Months: Number(formData.discount6Months) || 0,
+        discount12Months: Number(formData.discount12Months) || 0,
+        active: Boolean(formData.active),
+        featured: Boolean(formData.featured),
+        mailNotifications: Boolean(formData.mailNotifications),
+        smsNotifications: Boolean(formData.smsNotifications),
+        wapNotifications: Boolean(formData.wapNotifications),
+        payments: Boolean(formData.payments),
+        bot: Boolean(formData.bot),
+        dateLimit: Boolean(formData.dateLimit),
+        features: featuresText.split('\n').map(feature => feature.trim()).filter(Boolean),
+      });
+      onSaved();
+      onClose();
+    } catch (err: any) {
+      alert(err.response?.data?.message || err.message || 'Error guardando el plan');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}>
+      <motion.div initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="glass-panel" style={{ width: '94%', maxWidth: '860px', maxHeight: '90vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}>
+        <button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
+          <X size={24} />
+        </button>
+
+        <h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem' }}>Editar plan: {plan.name}</h2>
+
+        <form onSubmit={handleSubmit} style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '1rem' }}>
+          <div>
+            <label className="modal-label">Nombre</label>
+            <input className="input-glass" value={formData.name} onChange={e => setField('name', e.target.value)} required />
+          </div>
+          <div>
+            <label className="modal-label">Código</label>
+            <input className="input-glass" value={formData.code} onChange={e => setField('code', e.target.value)} required />
+          </div>
+          <div style={{ gridColumn: '1 / -1' }}>
+            <label className="modal-label">Descripción</label>
+            <textarea className="input-glass" rows={3} value={formData.description} onChange={e => setField('description', e.target.value)} required />
+          </div>
+
+          <h3 className="plan-modal-section">Precios, límites y descuentos</h3>
+          {numberFields.map(field => (
+            <div key={field.key}>
+              <label className="modal-label">{field.label}</label>
+              <input className="input-glass" type="number" min={limitFields.has(field.key) ? undefined : '0'} step="0.01" value={Number(formData[field.key] || 0)} onChange={e => setField(field.key, Number(e.target.value))} />
+            </div>
+          ))}
+
+          <h3 className="plan-modal-section">Funciones y estado</h3>
+          {booleanFields.map(field => (
+            <label key={field.key} className="plan-toggle">
+              <input type="checkbox" checked={Boolean(formData[field.key])} onChange={e => setField(field.key, e.target.checked)} />
+              {field.label}
+            </label>
+          ))}
+
+          <div style={{ gridColumn: '1 / -1' }}>
+            <label className="modal-label">Features visibles (una por línea)</label>
+            <textarea className="input-glass" rows={5} value={featuresText} onChange={e => setFeaturesText(e.target.value)} />
+          </div>
+
+          <div style={{ gridColumn: '1 / -1', marginTop: '1rem', display: 'flex', justifyContent: 'flex-end', gap: '1rem' }}>
+            <button type="button" className="btn-secondary" onClick={onClose}>Cancelar</button>
+            <button type="submit" className="btn-primary" disabled={loading || !planId}>{loading ? 'Guardando...' : 'Guardar cambios'}</button>
+          </div>
+        </form>
+
+        <style dangerouslySetInnerHTML={{__html: `
+          .modal-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
+          .plan-modal-section { grid-column: 1 / -1; margin: 1rem 0 0.25rem; color: var(--primary); font-size: 1.05rem; }
+          .plan-toggle { display: flex; align-items: center; gap: 0.6rem; color: var(--text-main); background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 10px; padding: 0.75rem; }
+          .plan-toggle input { width: 16px; height: 16px; }
+          @media (max-width: 768px) { form { grid-template-columns: 1fr !important; } }
+        `}} />
+      </motion.div>
+    </div>
+  );
+};
@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { X } from 'lucide-react';
+import { updateUserProfile, setVerifiedStatus } from '../../api/sysadmin';
+
+export const EditUserModal = ({ user, onClose, onSaved }: { user: any, onClose: () => void, onSaved: () => void }) => {
+  const [formData, setFormData] = useState({
+    firstName: user.firstName || '',
+    lastName: user.lastName || '',
+    street: user.street || '',
+    streetNumber: user.streetNumber || '',
+    city: user.city || '',
+    state: user.state || '',
+    country: user.country || '',
+    phoneCountryCode: user.phoneCountryCode || '',
+    phoneAreaCode: user.phoneAreaCode || '',
+    phoneNumber: user.phoneNumber || '',
+    verificated: user.verificated || false,
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const promises: Promise<any>[] = [
+        updateUserProfile({ userId: user._id, ...formData })
+      ];
+      if (formData.verificated !== user.verificated) {
+        promises.push(setVerifiedStatus(user._id, formData.verificated));
+      }
+      await Promise.all(promises);
+      onSaved();
+      onClose();
+    } catch (err) {
+      alert('Error guardando perfil');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}>
+      <motion.div 
+        initial={{ scale: 0.9, opacity: 0 }} 
+        animate={{ scale: 1, opacity: 1 }} 
+        className="glass-panel" 
+        style={{ width: '90%', maxWidth: '600px', maxHeight: '90vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
+      >
+        <button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
+          <X size={24} />
+        </button>
+        
+        <h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem' }}>Editar Perfil: {user.email}</h2>
+
+        <form onSubmit={handleSubmit} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+          <div>
+            <label className="modal-label">Nombre</label>
+            <input className="input-glass" value={formData.firstName} onChange={e => setFormData({...formData, firstName: e.target.value})} />
+          </div>
+          <div>
+            <label className="modal-label">Apellido</label>
+            <input className="input-glass" value={formData.lastName} onChange={e => setFormData({...formData, lastName: e.target.value})} />
+          </div>
+          
+          <div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <h3 style={{ margin: '1rem 0 0.5rem', color: 'var(--primary)', fontSize: '1.1rem' }}>Contacto</h3>
+            <button 
+              type="button" 
+              onClick={() => setFormData({...formData, verificated: !formData.verificated})}
+              className="btn-secondary" 
+              style={{ display: 'flex', alignItems: 'center', gap: '8px', color: formData.verificated ? 'var(--success)' : 'var(--warning)', padding: '4px 12px' }}
+            >
+              {formData.verificated ? 'Usuario Verificado' : 'Usuario No Verificado'}
+            </button>
+          </div>
+          <div>
+            <label className="modal-label">Cód. País</label>
+            <input className="input-glass" value={formData.phoneCountryCode} onChange={e => setFormData({...formData, phoneCountryCode: e.target.value})} />
+          </div>
+          <div>
+            <label className="modal-label">Cód. Área</label>
+            <input className="input-glass" value={formData.phoneAreaCode} onChange={e => setFormData({...formData, phoneAreaCode: e.target.value})} />
+          </div>
+          <div style={{ gridColumn: '1 / -1' }}>
+            <label className="modal-label">Teléfono</label>
+            <input className="input-glass" value={formData.phoneNumber} onChange={e => setFormData({...formData, phoneNumber: e.target.value})} />
+          </div>
+
+          <div style={{ gridColumn: '1 / -1' }}>
+            <h3 style={{ margin: '1rem 0 0.5rem', color: 'var(--primary)', fontSize: '1.1rem' }}>Dirección</h3>
+          </div>
+          <div>
+            <label className="modal-label">Calle</label>
+            <input className="input-glass" value={formData.street} onChange={e => setFormData({...formData, street: e.target.value})} />
+          </div>
+          <div>
+            <label className="modal-label">Número</label>
+            <input className="input-glass" value={formData.streetNumber} onChange={e => setFormData({...formData, streetNumber: e.target.value})} />
+          </div>
+          <div>
+            <label className="modal-label">Ciudad</label>
+            <input className="input-glass" value={formData.city} onChange={e => setFormData({...formData, city: e.target.value})} />
+          </div>
+          <div>
+            <label className="modal-label">País</label>
+            <input className="input-glass" value={formData.country} onChange={e => setFormData({...formData, country: e.target.value})} />
+          </div>
+
+          <div style={{ gridColumn: '1 / -1', marginTop: '1.5rem', display: 'flex', justifyContent: 'flex-end', gap: '1rem' }}>
+            <button type="button" className="btn-secondary" onClick={onClose}>Cancelar</button>
+            <button type="submit" className="btn-primary" disabled={loading}>{loading ? 'Guardando...' : 'Guardar Cambios'}</button>
+          </div>
+        </form>
+
+        <style dangerouslySetInnerHTML={{__html: `
+          .modal-label {
+            display: block;
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            margin-bottom: 0.5rem;
+          }
+        `}} />
+      </motion.div>
+    </div>
+  );
+};
@@ -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>
+  );
+};
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { X, Building } from 'lucide-react';
+import { getOrganizationsStatus } from '../../api/sysadmin';
+
+export const OrganizationsModal = ({ user, onClose }: { user: any, onClose: () => void }) => {
+  const [data, setData] = useState<{ clientIn: any[], collaboratorIn: any[] } | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getOrganizationsStatus(user._id).then(res => {
+      setData(res);
+      setLoading(false);
+    }).catch(() => {
+      alert('Error cargando organizaciones');
+      setLoading(false);
+    });
+  }, [user]);
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}>
+      <motion.div 
+        initial={{ scale: 0.9, opacity: 0 }} 
+        animate={{ scale: 1, opacity: 1 }} 
+        className="glass-panel" 
+        style={{ width: '90%', maxWidth: '500px', maxHeight: '80vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
+      >
+        <button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
+          <X size={24} />
+        </button>
+        
+        <h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <Building size={24} color="var(--primary)" />
+          Organizaciones Asociadas
+        </h2>
+        <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>Usuario: {user.email}</p>
+
+        {loading ? (
+          <p style={{ textAlign: 'center', padding: '2rem' }}>Cargando datos...</p>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+            <div>
+              <h3 style={{ fontSize: '1.1rem', color: 'var(--text-main)', marginBottom: '1rem', borderBottom: '1px solid var(--glass-border)', paddingBottom: '0.5rem' }}>Cliente en:</h3>
+              {data?.clientIn.length === 0 ? (
+                <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>No es cliente de ninguna organización.</p>
+              ) : (
+                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                  {data?.clientIn.map((org, i) => (
+                    <li key={i} style={{ background: 'rgba(255,255,255,0.03)', padding: '0.75rem', borderRadius: '8px', border: '1px solid var(--glass-border)' }}>
+                      {org.companyName} <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginLeft: '10px' }}>(ID: {org.companyId})</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div>
+              <h3 style={{ fontSize: '1.1rem', color: 'var(--text-main)', marginBottom: '1rem', borderBottom: '1px solid var(--glass-border)', paddingBottom: '0.5rem' }}>Colaborador en:</h3>
+              {data?.collaboratorIn.length === 0 ? (
+                <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>No es colaborador de ninguna organización.</p>
+              ) : (
+                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                  {data?.collaboratorIn.map((org, i) => (
+                    <li key={i} style={{ background: 'rgba(139, 92, 246, 0.1)', padding: '0.75rem', borderRadius: '8px', border: '1px solid rgba(139, 92, 246, 0.2)' }}>
+                      {org.companyName} <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginLeft: '10px' }}>(ID: {org.companyId})</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        )}
+
+      </motion.div>
+    </div>
+  );
+};
@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { RefreshCw, X } from 'lucide-react';
+import { recalculatePlanUsageCycle, type RecalculatePlanUsageCycleResult } from '../../api/sysadmin';
+import { formatDateTime } from '../../utils/formatters';
+
+export const RecalculationToolsModal = ({ initialUserId = '', onClose }: { initialUserId?: string, onClose: () => void }) => {
+  const [usageUserId, setUsageUserId] = useState(initialUserId);
+  const [usageResult, setUsageResult] = useState<RecalculatePlanUsageCycleResult | null>(null);
+  const [usageLoading, setUsageLoading] = useState(false);
+  const [usageError, setUsageError] = useState('');
+
+  const handleRecalculatePlanUsage = async () => {
+    const trimmedUserId = usageUserId.trim();
+    if (!trimmedUserId) {
+      setUsageError('Ingresá un userId para recalcular el uso del plan.');
+      return;
+    }
+
+    setUsageUserId(trimmedUserId);
+    setUsageLoading(true);
+    setUsageError('');
+    setUsageResult(null);
+
+    try {
+      const result = await recalculatePlanUsageCycle(trimmedUserId);
+      setUsageResult(result);
+    } catch (e: any) {
+      setUsageError(e.response?.data?.message || e.message || 'Error al recalcular el uso del plan');
+    } finally {
+      setUsageLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', padding: '1rem' }}>
+      <motion.div
+        initial={{ scale: 0.9, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        className="glass-panel"
+        style={{ width: '90%', maxWidth: '760px', maxHeight: '90vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
+      >
+        <button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
+          <X size={24} />
+        </button>
+
+        <h2 style={{ fontSize: '1.5rem', marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <RefreshCw size={24} color="var(--primary)" />
+          Herramientas de recálculo
+        </h2>
+        <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>Funciones exclusivas de sysadmin para reparar o reconstruir contadores.</p>
+
+        <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1.25rem' }}>
+          <div style={{ marginBottom: '1rem' }}>
+            <h3 style={{ fontSize: '1.1rem', fontWeight: '700', marginBottom: '0.35rem' }}>Recalcular uso del plan</h3>
+            <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>Recuenta las reservas del ciclo actual y los contadores stock del userId seleccionado.</p>
+          </div>
+
+          <form onSubmit={(e) => { e.preventDefault(); handleRecalculatePlanUsage(); }} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
+            <div style={{ flex: '1 1 300px' }}>
+              <label className="modal-label">User ID</label>
+              <input
+                type="text"
+                className="input-glass"
+                placeholder="Pegá o seleccioná un userId"
+                value={usageUserId}
+                onChange={(e) => setUsageUserId(e.target.value)}
+              />
+            </div>
+            <button type="submit" className="btn-primary" disabled={usageLoading} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <RefreshCw size={18} /> {usageLoading ? 'Recalculando...' : 'Recalcular'}
+            </button>
+          </form>
+
+          {usageError && <div style={{ marginTop: '1rem', color: 'var(--danger)', fontSize: '0.9rem' }}>{usageError}</div>}
+
+          {usageResult && (
+            <div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+              <div><strong>User ID</strong><br /><span className="long-id-value">{usageResult.userId}</span></div>
+              <div><strong>Subscription ID</strong><br /><span className="long-id-value">{usageResult.subscriptionId}</span></div>
+              <div><strong>Plan ID</strong><br /><span className="long-id-value">{usageResult.planId}</span></div>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '0.75rem' }}>
+                <div><strong>Cycle Start</strong><br /><span style={{ color: 'var(--text-muted)' }}>{formatDateTime(usageResult.cycleStart)}</span></div>
+                <div><strong>Cycle End</strong><br /><span style={{ color: 'var(--text-muted)' }}>{formatDateTime(usageResult.cycleEnd)}</span></div>
+                <div><strong>Organizations</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.organizationsCount}</span></div>
+                <div><strong>Collaborators</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.employeesCount}</span></div>
+                <div><strong>Services</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.servicesCount}</span></div>
+                <div><strong>Clients</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.clientsCount}</span></div>
+                <div><strong>Repeats</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.repeatsCount}</span></div>
+                <div><strong>Appointments</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.appointmentsCount}</span></div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <style dangerouslySetInnerHTML={{__html: `
+          .modal-label {
+            display: block;
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            margin-bottom: 0.5rem;
+          }
+          .long-id-value {
+            display: block;
+            color: var(--text-muted);
+            overflow-wrap: anywhere;
+            word-break: break-word;
+            line-height: 1.45;
+          }
+        `}} />
+      </motion.div>
+    </div>
+  );
+};
@@ -0,0 +1,297 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { CreditCard, X } from 'lucide-react';
+import { extendUserSubscription, finalizeUserSubscription, getUserSubscriptionDetails, type UserSubscriptionDetails } from '../../api/sysadmin';
+import { formatDateTime } from '../../utils/formatters';
+
+type Props = {
+  user: any;
+  onClose: () => void;
+};
+
+export const SubscriptionDetailsModal = ({ user, onClose }: Props) => {
+  const [details, setDetails] = useState<UserSubscriptionDetails | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [extensionDate, setExtensionDate] = useState('');
+  const [extensionLoading, setExtensionLoading] = useState(false);
+  const [extensionMessage, setExtensionMessage] = useState('');
+  const [extensionError, setExtensionError] = useState('');
+  const [finalizeLoading, setFinalizeLoading] = useState(false);
+
+  const formatAmount = (value?: number) => {
+    if (typeof value !== 'number') return '-';
+    return value.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' });
+  };
+
+  const loadDetails = async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const result = await getUserSubscriptionDetails(user._id);
+        setDetails(result);
+      } catch (e: any) {
+        setError(e.response?.data?.message || e.message || 'Error cargando suscripción');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+  useEffect(() => {
+    loadDetails();
+  }, [user._id]);
+
+  const handleExtend = async (payload: { mode: 'add_months' | 'set_end_date'; months?: 1 | 2; endDate?: string }) => {
+    if (!details?.currentSubscription) return;
+
+    setExtensionLoading(true);
+    setExtensionError('');
+    setExtensionMessage('');
+    try {
+      const result = await extendUserSubscription({
+        userId: user._id,
+        reason: 'Ajuste manual excepcional desde sysadmin-cli',
+        ...payload,
+      });
+      setExtensionMessage(`Vencimiento actualizado hasta ${formatDateTime(result.newEndDate)}. Se registró una bonificación $0.`);
+      await loadDetails();
+    } catch (e: any) {
+      setExtensionError(e.response?.data?.message || e.message || 'Error extendiendo suscripción');
+    } finally {
+      setExtensionLoading(false);
+    }
+  };
+
+  const handleFinalize = async () => {
+    if (!details?.currentSubscription) return;
+
+    const confirmed = window.confirm('Esto establecerá el vencimiento de la suscripción a ayer para forzar el comportamiento de plan vencido. No elimina datos ni cambia el plan directamente. ¿Continuar?');
+    if (!confirmed) return;
+
+    setFinalizeLoading(true);
+    setExtensionError('');
+    setExtensionMessage('');
+    try {
+      const result = await finalizeUserSubscription({
+        userId: user._id,
+        reason: 'Finalización manual desde sysadmin-cli para probar expiración de plan',
+      });
+      setExtensionMessage(`Período finalizado. El vencimiento quedó en ${formatDateTime(result.newEndDate)} para forzar la expiración en la próxima lectura.`);
+      await loadDetails();
+    } catch (e: any) {
+      setExtensionError(e.response?.data?.message || e.message || 'Error finalizando período');
+    } finally {
+      setFinalizeLoading(false);
+    }
+  };
+
+  const subscription = details?.currentSubscription;
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', padding: '1rem' }}>
+      <motion.div
+        initial={{ scale: 0.9, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        className="glass-panel"
+        style={{ width: '90%', maxWidth: '860px', maxHeight: '90vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
+      >
+        <button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
+          <X size={24} />
+        </button>
+
+        <h2 style={{ fontSize: '1.5rem', marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <CreditCard size={24} color="var(--primary)" />
+          Suscripción del usuario
+        </h2>
+        <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>
+          {user.firstName} {user.lastName} · {user.email}
+        </p>
+
+        {loading && <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>Cargando suscripción...</div>}
+        {error && <div style={{ padding: '1rem', color: 'var(--danger)' }}>{error}</div>}
+
+        {!loading && !error && details && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <section className="subscription-card">
+              <h3 className="subscription-section-title">Suscripción actual</h3>
+              {!subscription ? (
+                <p style={{ color: 'var(--text-muted)' }}>No hay suscripción registrada para este usuario.</p>
+              ) : (
+                <div className="subscription-grid">
+                  <Info label="Subscription ID" value={subscription.id} long />
+                  <Info label="User ID" value={details.userId} long />
+                  <Info label="Plan" value={subscription.plan ? `${subscription.plan.name} (${subscription.plan.code})` : 'Plan no encontrado'} />
+                  <Info label="Plan ID" value={subscription.plan?.id || '-'} long />
+                  <Info label="Precio" value={formatAmount(subscription.plan?.price)} />
+                  <Info label="Inicio" value={formatDateTime(subscription.startDate)} />
+                  <Info label="Válida hasta" value={formatDateTime(subscription.endDate)} />
+                  <Info label="Activa" value={subscription.isActive ? 'Sí' : 'No'} />
+                  <Info label="MP status" value={subscription.mpStatus || '-'} />
+                  <Info label="Meses facturados" value={subscription.billingMonths?.toString() || '-'} />
+                  <Info label="Pago pendiente" value={subscription.pendingPaymentType || '-'} />
+                  <Info label="Preference pendiente" value={subscription.pendingPaymentPreferenceId || '-'} long />
+                  <Info label="Último pago" value={subscription.lastPaymentStatus || '-'} />
+                </div>
+              )}
+            </section>
+
+            {subscription && (
+              <section className="subscription-card">
+                <h3 className="subscription-section-title">Ajuste manual excepcional</h3>
+                <p style={{ color: 'var(--text-muted)', marginBottom: '1rem' }}>
+                  Extiende la vigencia sin pago y registra un pago de bonificación por $0 asociado a esta suscripción.
+                </p>
+                <div className="extension-actions">
+                  <button className="btn btn-secondary" disabled={extensionLoading || finalizeLoading} onClick={() => handleExtend({ mode: 'add_months', months: 1 })}>
+                    Extender 1 mes
+                  </button>
+                  <button className="btn btn-secondary" disabled={extensionLoading || finalizeLoading} onClick={() => handleExtend({ mode: 'add_months', months: 2 })}>
+                    Extender 2 meses
+                  </button>
+                  <div className="extension-date-action">
+                    <input
+                      type="date"
+                      value={extensionDate}
+                      onChange={(event) => setExtensionDate(event.target.value)}
+                      disabled={extensionLoading || finalizeLoading}
+                    />
+                    <button
+                      className="btn btn-primary"
+                      disabled={extensionLoading || finalizeLoading || !extensionDate}
+                      onClick={() => handleExtend({ mode: 'set_end_date', endDate: extensionDate })}
+                    >
+                      Establecer vencimiento
+                    </button>
+                  </div>
+                </div>
+                <div className="finalize-action">
+                  <div>
+                    <h4>Finalizar período</h4>
+                    <p>Establece el vencimiento en ayer para forzar el comportamiento de suscripción vencida en la próxima lectura. No elimina datos ni cambia el plan directamente.</p>
+                  </div>
+                  <button className="btn btn-danger" disabled={extensionLoading || finalizeLoading} onClick={handleFinalize}>
+                    Finalizar período
+                  </button>
+                </div>
+                {(extensionLoading || finalizeLoading) && <p style={{ color: 'var(--text-muted)', marginTop: '0.75rem' }}>Aplicando ajuste...</p>}
+                {extensionMessage && <p style={{ color: 'var(--success)', marginTop: '0.75rem' }}>{extensionMessage}</p>}
+                {extensionError && <p style={{ color: 'var(--danger)', marginTop: '0.75rem' }}>{extensionError}</p>}
+              </section>
+            )}
+
+            <section className="subscription-card">
+              <h3 className="subscription-section-title">Pagos</h3>
+              {details.payments.length === 0 ? (
+                <p style={{ color: 'var(--text-muted)' }}>No hay pagos registrados para este usuario.</p>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                  {details.payments.map((payment) => (
+                    <div key={payment.id} className="payment-row">
+                      <Info label="Payment ID" value={payment.id} long />
+                      <Info label="Subscription ID" value={payment.subscriptionId} long />
+                      <Info label="Monto" value={formatAmount(payment.amount)} />
+                      <Info label="Fecha" value={formatDateTime(payment.paymentDate)} />
+                      <Info label="Método" value={payment.paymentMethod || '-'} />
+                      <Info label="Estado" value={payment.status} />
+                      <Info label="Transaction ID" value={payment.transactionId || '-'} long />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+          </div>
+        )}
+
+        <style dangerouslySetInnerHTML={{__html: `
+          .subscription-card {
+            background: rgba(255,255,255,0.03);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            padding: 1.25rem;
+          }
+          .subscription-section-title {
+            font-size: 1.1rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+          }
+          .subscription-grid,
+          .payment-row {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 0.85rem;
+          }
+          .payment-row {
+            border-top: 1px solid var(--glass-border);
+            padding-top: 0.75rem;
+          }
+          .subscription-label {
+            display: block;
+            color: var(--text-muted);
+            font-size: 0.78rem;
+            margin-bottom: 0.25rem;
+          }
+          .subscription-value {
+            display: block;
+            color: var(--text-main);
+            font-weight: 600;
+          }
+          .subscription-value.long {
+            overflow-wrap: anywhere;
+            word-break: break-word;
+            line-height: 1.45;
+          }
+          .extension-actions {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+            align-items: center;
+          }
+          .extension-date-action {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+            align-items: center;
+          }
+          .extension-date-action input {
+            background: rgba(255,255,255,0.06);
+            border: 1px solid var(--glass-border);
+            border-radius: 8px;
+            color: var(--text-main);
+            padding: 0.65rem 0.75rem;
+          }
+          .finalize-action {
+            display: flex;
+            justify-content: space-between;
+            gap: 1rem;
+            align-items: center;
+            margin-top: 1rem;
+            padding-top: 1rem;
+            border-top: 1px solid var(--glass-border);
+          }
+          .finalize-action h4 {
+            color: var(--danger);
+            font-size: 1rem;
+            margin-bottom: 0.35rem;
+          }
+          .finalize-action p {
+            color: var(--text-muted);
+            margin: 0;
+          }
+          @media (max-width: 640px) {
+            .finalize-action {
+              align-items: stretch;
+              flex-direction: column;
+            }
+          }
+        `}} />
+      </motion.div>
+    </div>
+  );
+};
+
+const Info = ({ label, value, long = false }: { label: string; value: string; long?: boolean }) => (
+  <div>
+    <span className="subscription-label">{label}</span>
+    <span className={`subscription-value${long ? ' long' : ''}`}>{value}</span>
+  </div>
+);