setSelectedApartment(apartment)}
className="hover:bg-white/5 cursor-pointer transition-colors"
>
{apartment.photos && apartment.photos.length > 0 ? (
) : (
)}
{apartment.name}
{apartment.address || '-'}
{getResidentNames(apartment.residents)}
{apartment.status === 'occupied' ? 'Ocupado' : 'Disponible'}
{
e.stopPropagation();
setSelectedApartment(apartment);
}}
className="text-gray-400 hover:text-white p-2 transition-colors"
>
// ============================================
// UI COMPONENTS (Loaders, Skeletons, Search)
// ============================================
const SkeletonLoader = ({ type = 'text', className = '' }) => {
// tipes: text, stat, chart, card, table-row
if (type === 'stat') {
return (
);
}
if (type === 'chart') {
return (
{[40, 70, 45, 90, 65, 30, 80].map((h, i) => (
))}
;
Agregar Departamento
{/* Lista de departamentos */}
{loading ? (
{[1, 2, 3, 4, 5, 6].map(i => (
) : filteredApartments.length === 0 ? (
{searchTerm ? 'No se encontraron departamentos' : 'No hay departamentos'}
{searchTerm ? 'Intenta con otro término de búsqueda' : 'Agrega tu primer departamento para comenzar'}
{!searchTerm && (
setCurrentPage('add-apartment')}
className="btn-main px-6 py-3 hover:bg-blue-600 transition-colors"
>
)}
) : viewMode === 'grid' ? (
// Vista Grid (sin fondo)
{filteredApartments.map(apartment => (
setSelectedApartment(apartment)}
className="rounded-2xl p-4 hover:bg-white/5 transition-colors cursor-pointer group"
>
{/* Imagen o placeholder */}
{apartment.photos && apartment.photos.length > 0 ? (
) : (
)}
{/* Info */}
{apartment.name}
{apartment.status === 'occupied' ? 'Ocupado' : 'Disponible'}
{/* Ubicación (opcional) */}
{apartment.address && (
{apartment.address}
)}
{/* Residentes */}
{getResidentNames(apartment.residents)}
))}
Departamento
Ubicación
Arrendatarios
Estado
Acciones
{filteredApartments.map(apartment => (
setSelectedApartment(apartment)}
className="hover:bg-white/5 cursor-pointer transition-colors"
>
{apartment.photos && apartment.photos.length > 0 ? (
) : (
)}
{apartment.name}
{apartment.address || '-'}
{getResidentNames(apartment.residents)}
{apartment.status === 'occupied' ? 'Ocupado' : 'Disponible'}
{
e.stopPropagation();
setSelectedApartment(apartment);
}}
className="text-gray-400 hover:text-white p-2 transition-colors"
>
// ============================================
// UI COMPONENTS (Loaders, Skeletons, Search)
// ============================================
const SkeletonLoader = ({ type = 'text', className = '' }) => {
// tipes: text, stat, chart, card, table-row
if (type === 'stat') {
return (
);
}
if (type === 'chart') {
return (
{[40, 70, 45, 90, 65, 30, 80].map((h, i) => (
))}
;
};
const GreyLogoLoader = ({ text = 'CARGANDO...' }) => (
);
);
};
// ============================================
// SISTEMA DE CACHÉ OFFLINE - LocalStorage + IndexedDB
// ============================================
const CacheManager = {
// Configuración
CACHE_PREFIX: 'esperiency_cache_',
CACHE_EXPIRY: 24 * 60 * 60 * 1000, // 24 horas por defecto
PENDING_QUEUE_KEY: 'esperiency_pending_queue',
// Estado de conexión
isOnline: navigator.onLine,
// Inicializar listeners de conexión
init() {
window.addEventListener('online', () => {
this.isOnline = true;
console.log('🌐 Conexión restaurada');
this.showConnectionToast('online');
this.processPendingQueue();
});
window.addEventListener('offline', () => {
this.isOnline = false;
console.log('📴 Sin conexión - Modo offline activado');
this.showConnectionToast('offline');
});
// Verificar conexión real (no solo navigator.onLine)
this.checkRealConnection();
},
// Verificar conexión real haciendo un ping
async checkRealConnection() {
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
await fetch('https://www.google.com/favicon.ico', {
mode: 'no-cors',
signal: controller.signal
});
clearTimeout(timeoutId);
this.isOnline = true;
} catch (e) {
this.isOnline = false;
}
return this.isOnline;
},
// Verificar si el API del servidor está funcionando
async checkAPIStatus() {
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
// Intentar el health check del gateway
const response = await fetch('http://localhost:3000/health', {
method: 'GET',
signal: controller.signal
});
clearTimeout(timeoutId);
return response.ok;
} catch (e) {
console.log('API no disponible:', e.message);
return false;
}
},
// Mostrar toast de estado de conexión
showConnectionToast(status) {
if (typeof showToast === 'function') {
if (status === 'online') {
showToast('success', 'Conexión restaurada', 'Sincronizando datos...');
} else {
showToast('warning', 'Sin conexión', 'Trabajando en modo offline');
}
}
},
// Guardar en caché
set(key, data, expiryMs = this.CACHE_EXPIRY) {
try {
const cacheItem = {
data: data,
timestamp: Date.now(),
expiry: Date.now() + expiryMs
};
localStorage.setItem(this.CACHE_PREFIX + key, JSON.stringify(cacheItem));
return true;
} catch (e) {
console.warn('Error guardando en caché:', e);
// Si localStorage está lleno, limpiar caché antigua
this.clearOldCache();
try {
const cacheItem = {
data: data,
timestamp: Date.now(),
expiry: Date.now() + expiryMs
};
localStorage.setItem(this.CACHE_PREFIX + key, JSON.stringify(cacheItem));
return true;
} catch (e2) {
return false;
}
}
},
// Obtener de caché
get(key, ignoreExpiry = false) {
try {
const item = localStorage.getItem(this.CACHE_PREFIX + key);
if (!item) return null;
const cacheItem = JSON.parse(item);
// Verificar expiración (a menos que estemos offline)
if (!ignoreExpiry && !this.isOnline === false && Date.now() > cacheItem.expiry) {
this.remove(key);
return null;
}
return cacheItem.data;
} catch (e) {
return null;
}
},
// Eliminar de caché
remove(key) {
try {
localStorage.removeItem(this.CACHE_PREFIX + key);
} catch (e) {}
},
// Limpiar caché antigua
clearOldCache() {
try {
const now = Date.now();
const keysToRemove = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.startsWith(this.CACHE_PREFIX)) {
try {
const item = JSON.parse(localStorage.getItem(key));
if (item && item.expiry && now > item.expiry) {
keysToRemove.push(key);
}
} catch (e) {}
}
}
keysToRemove.forEach(key => localStorage.removeItem(key));
} catch (e) {}
},
// Generar clave única para request
generateKey(url, options = {}) {
const method = options.method || 'GET';
const body = options.body || '';
return `${method}_${url}_${typeof body === 'string' ? body : JSON.stringify(body)}`.replace(/[^a-zA-Z0-9]/g, '_');
},
// Cola de operaciones pendientes (para cuando vuelva la conexión)
addToPendingQueue(operation) {
try {
const queue = JSON.parse(localStorage.getItem(this.PENDING_QUEUE_KEY) || '[]');
queue.push({
...operation,
timestamp: Date.now(),
id: Date.now() + '_' + Math.random().toString(36).substr(2, 9)
});
localStorage.setItem(this.PENDING_QUEUE_KEY, JSON.stringify(queue));
} catch (e) {}
},
// Procesar cola pendiente cuando vuelva la conexión
async processPendingQueue() {
try {
const queue = JSON.parse(localStorage.getItem(this.PENDING_QUEUE_KEY) || '[]');
if (queue.length === 0) return;
console.log(`📤 Procesando ${queue.length} operaciones pendientes...`);
const newQueue = [];
for (const operation of queue) {
try {
const response = await fetch(operation.url, operation.options);
if (!response.ok) {
// Si falla, mantener en cola solo si no es muy antiguo (max 7 días)
if (Date.now() - operation.timestamp < 7 * 24 * 60 * 60 * 1000) {
newQueue.push(operation);
}
}
} catch (e) {
// Si hay error de red, mantener en cola
if (Date.now() - operation.timestamp < 7 * 24 * 60 * 60 * 1000) {
newQueue.push(operation);
}
}
}
localStorage.setItem(this.PENDING_QUEUE_KEY, JSON.stringify(newQueue));
if (newQueue.length < queue.length) {
console.log(`✅ ${queue.length - newQueue.length} operaciones sincronizadas`);
}
} catch (e) {}
},
// Obtener estadísticas de caché
getStats() {
let count = 0;
let size = 0;
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.startsWith(this.CACHE_PREFIX)) {
count++;
size += (localStorage.getItem(key) || '').length;
}
}
return {
itemCount: count,
sizeBytes: size,
sizeMB: (size / 1024 / 1024).toFixed(2),
isOnline: this.isOnline
};
}
};
// Inicializar CacheManager
CacheManager.init();
// Función fetch con caché automático
const cachedFetch = async (url, options = {}, cacheOptions = {}) => {
const {
useCache = true, // Usar caché
cacheTime = 5 * 60 * 1000, // 5 minutos por defecto
forceRefresh = false, // Forzar actualización
offlineFirst = false, // Priorizar caché en offline
queueIfOffline = false // Encolar si es POST/PUT/DELETE y offline
} = cacheOptions;
const cacheKey = CacheManager.generateKey(url, options);
const method = (options.method || 'GET').toUpperCase();
// Para métodos que modifican datos
if (['POST', 'PUT', 'DELETE', 'PATCH'].includes(method)) {
if (!CacheManager.isOnline && queueIfOffline) {
// Encolar para cuando vuelva la conexión
CacheManager.addToPendingQueue({ url, options });
return {
ok: true,
queued: true,
json: async () => ({ success: true, queued: true, message: 'Operación guardada para sincronizar' })
};
}
}
// Intentar obtener de caché primero si estamos offline o offlineFirst
if (useCache && (offlineFirst || !CacheManager.isOnline) && !forceRefresh) {
const cached = CacheManager.get(cacheKey, !CacheManager.isOnline);
if (cached) {
console.log('📦 Usando datos en caché:', url);
return {
ok: true,
fromCache: true,
json: async () => cached,
text: async () => JSON.stringify(cached)
};
}
}
// Si no hay conexión y no hay caché, retornar error controlado
if (!CacheManager.isOnline) {
const cached = CacheManager.get(cacheKey, true); // Intentar caché expirada
if (cached) {
console.log('📦 Usando caché expirada (offline):', url);
return {
ok: true,
fromCache: true,
stale: true,
json: async () => cached,
text: async () => JSON.stringify(cached)
};
}
return {
ok: false,
offline: true,
status: 0,
json: async () => ({ success: false, error: 'Sin conexión', offline: true }),
text: async () => 'Sin conexión a internet'
};
}
// Hacer la petición real
try {
const response = await fetch(url, options);
// Si es exitoso y es GET, guardar en caché
if (response.ok && method === 'GET' && useCache) {
const clonedResponse = response.clone();
try {
const data = await clonedResponse.json();
CacheManager.set(cacheKey, data, cacheTime);
} catch (e) {}
}
return response;
} catch (error) {
console.warn('Error en fetch, intentando caché:', error);
// Si hay error de red, intentar caché
const cached = CacheManager.get(cacheKey, true);
if (cached) {
return {
ok: true,
fromCache: true,
stale: true,
json: async () => cached,
text: async () => JSON.stringify(cached)
};
}
throw error;
}
};
// Hacer disponible globalmente
window.CacheManager = CacheManager;
window.cachedFetch = cachedFetch;
// ============================================
// FIN SISTEMA DE CACHÉ
// ============================================
const parseJWT = (token) => {
try {
if (!token) {
return null;
}
const base64Url = token.split('.')[1];
if (!base64Url) {
return null;
}
// Decodificar base64url a base64
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
while (base64.length % 4) {
base64 += '=';
}
// Decodificar base64 de forma segura para UTF-8
const jsonPayload = decodeURIComponent(
atob(base64)
.split('')
.map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
.join('')
);
const parsed = JSON.parse(jsonPayload);
return parsed;
} catch (error) {
console.error('❌ Error parsing JWT:', error);
return null;
}
};
const getJWTFromStorage = () => {
const sessionAuthToken = sessionStorage.getItem('authToken');
const authToken = localStorage.getItem('authToken');
const sessionJWT = sessionStorage.getItem('jwt');
const jwt = localStorage.getItem('jwt');
const token = sessionAuthToken || sessionJWT || authToken || jwt;
return token;
};
const fixUTF8String = (str) => {
if (typeof str !== 'string') return str;
try {
const map = {
'ñ': 'ñ', 'á': 'á', 'é': 'é', 'Ã': 'í', 'ó': 'ó', 'ú': 'ú',
'à ': 'à', 'è': 'è', 'ì': 'ì', 'ò': 'ò', 'ù': 'ù',
'â': 'â', 'ê': 'ê', 'î': 'î', 'ô': 'ô', 'û': 'û',
'ä': 'ä', 'ë': 'ë', 'ï': 'ï', 'ö': 'ö', 'ü': 'ü',
'ç': 'ç', 'à 1': 'Ñ'
};
let out = str;
Object.keys(map).forEach(k => {
out = out.split(k).join(map[k]);
});
return out;
} catch (e) {
return str;
}
};
const isValidJWT = (token) => {
if (!token) return false;
try {
const payload = parseJWT(token);
if (!payload) return false;
if (payload.exp) {
const now = Math.floor(Date.now() / 1000);
if (payload.exp < now) return false;
}
return true;
} catch (e) {
return false;
}
};
const clearAuthData = () => {
try {
localStorage.removeItem('authToken');
sessionStorage.removeItem('authToken');
localStorage.removeItem('jwt');
sessionStorage.removeItem('jwt');
localStorage.removeItem('organizationName');
localStorage.removeItem('organizationId');
localStorage.removeItem('organizationUuid');
localStorage.removeItem('organizationCode');
localStorage.removeItem('userData');
sessionStorage.removeItem('userData');
// Limpiar cookies de autenticación con TODAS las combinaciones posibles
const hostname = window.location.hostname;
const isProd = hostname.endsWith('esperiency.com');
const secure = window.location.protocol === 'https:' ? ';Secure' : '';
const exp = 'expires=Thu, 01 Jan 1970 00:00:00 UTC';
const domains = [''];
if (isProd) {
domains.push(';domain=.esperiency.com');
domains.push(`;domain=${hostname}`);
}
const cookieNames = ['authToken', 'isLoggedIn', 'userEmail', 'userData'];
cookieNames.forEach(name => {
domains.forEach(d => {
document.cookie = `${name}=;${exp};path=/${d};SameSite=Lax${secure}`;
document.cookie = `${name}=;${exp};path=/${d};`;
});
});
} catch (e) {
// ignore
}
};
// ============================================
// VALIDACIÓN DE INTEGRIDAD DE SESIÓN
// Detecta datos corruptos o faltantes y solicita nuevo token
// ============================================
const validateSessionIntegrity = () => {
try {
const token = getJWTFromStorage();
// 1. Verificar si hay token
if (!token) {
console.warn('⚠️ No hay token de sesión');
return { valid: false, reason: 'NO_TOKEN' };
}
// 2. Verificar formato del token (debe tener 3 partes separadas por .)
const tokenParts = token.split('.');
if (tokenParts.length !== 3) {
console.error('❌ Token corrupto: formato inválido');
return { valid: false, reason: 'CORRUPT_TOKEN_FORMAT' };
}
// 3. Verificar que el payload sea decodificable
const payload = parseJWT(token);
if (!payload) {
console.error('❌ Token corrupto: no se puede decodificar');
return { valid: false, reason: 'CORRUPT_TOKEN_PAYLOAD' };
}
// 4. Verificar campos obligatorios en el payload
// Normalizar UID de forma flexible para distintos proveedores de tokens (Firebase, OAuth, Custom)
if (!payload.uid && (payload.sub || payload.user_id || payload.firebaseUid || payload.userId)) {
payload.uid = payload.sub || payload.user_id || payload.firebaseUid || payload.userId;
}
const requiredFields = ['uid', 'email'];
const missingFields = requiredFields.filter(field => !payload[field]);
if (missingFields.length > 0) {
console.error('❌ Token incompleto: faltan campos:', missingFields);
return { valid: false, reason: 'MISSING_REQUIRED_FIELDS', missingFields };
}
// 5. Verificar expiración del token
if (payload.exp) {
const now = Math.floor(Date.now() / 1000);
if (payload.exp < now) {
console.warn('⚠️ Token expirado');
return { valid: false, reason: 'TOKEN_EXPIRED' };
}
}
// Helper para reconstruir y curar los datos del usuario a partir del token validado
const rebuildUserDataFromPayload = (pay) => {
try {
const rebuilt = {
uid: pay.uid,
uuid: pay.uuid || null,
email: pay.email,
firstName: pay.firstName || '',
lastName: pay.lastName || '',
fullName: pay.fullName || `${pay.firstName || ''} ${pay.lastName || ''}`.trim() || 'Usuario',
role: pay.role || 'user',
emailVerified: pay.emailVerified || false,
lastLogin: new Date().toISOString()
};
const persistent = !!localStorage.getItem('authToken');
const storage = persistent ? localStorage : sessionStorage;
storage.setItem('userData', JSON.stringify(rebuilt));
// Sincronizar también en cookies para transiciones de subdominio
const hostname = window.location.hostname;
const domainStr = hostname.endsWith('esperiency.com') ? ';domain=.esperiency.com' : '';
const secure = window.location.protocol === 'https:' ? ';Secure' : '';
const days = persistent ? 30 : 1;
const expires = new Date();
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = `userData=${encodeURIComponent(JSON.stringify(rebuilt))};expires=${expires.toUTCString()};path=/${domainStr};SameSite=Lax${secure}`;
} catch (e) {
console.error('Error rebuilding userData from payload:', e);
}
};
// 6. Verificar integridad de userData en storage
const userDataStr = localStorage.getItem('userData') || sessionStorage.getItem('userData');
if (userDataStr) {
try {
const userData = JSON.parse(userDataStr);
// Verificar que userData no esté corrupto
if (typeof userData !== 'object' || userData === null) {
console.warn('⚠️ userData corrupto: no es un objeto. Reparando desde el token...');
rebuildUserDataFromPayload(payload);
} else if (userData.email && payload.email && userData.email.toLowerCase().trim() !== payload.email.toLowerCase().trim()) {
console.warn('⚠️ Datos inconsistentes: email no coincide. Actualizando desde el token...');
rebuildUserDataFromPayload(payload);
}
} catch (parseError) {
console.warn('⚠️ userData corrupto: JSON inválido. Reparando desde el token...');
rebuildUserDataFromPayload(payload);
}
} else {
console.log('🔄 Inicializando userData faltante a partir del token...');
rebuildUserDataFromPayload(payload);
}
// 7. Verificar consistencia de organizationId
const storedOrgId = localStorage.getItem('organizationId');
if (storedOrgId && payload.organizationId && storedOrgId !== payload.organizationId) {
console.warn('⚠️ OrganizationId inconsistente, actualizando...');
localStorage.setItem('organizationId', payload.organizationId);
}
console.log('✅ Integridad de sesión verificada');
return { valid: true, payload };
} catch (error) {
console.error('❌ Error validando integridad de sesión:', error);
return { valid: false, reason: 'VALIDATION_ERROR', error: error.message };
}
};
// Función para manejar sesión inválida/corrupta
const handleInvalidSession = (reason, redirectToLogin = true) => {
console.log(`🔄 Limpiando sesión inválida (${reason})...`);
// Limpiar todos los datos de autenticación
clearAuthData();
// Mostrar notificación al usuario si está disponible
if (typeof showToast === 'function') {
const messages = {
'NO_TOKEN': 'Sesión no encontrada. Por favor, inicia sesión.',
'CORRUPT_TOKEN_FORMAT': 'Datos de sesión corruptos. Iniciando sesión nuevamente...',
'CORRUPT_TOKEN_PAYLOAD': 'Error en datos de sesión. Iniciando sesión nuevamente...',
'MISSING_REQUIRED_FIELDS': 'Información de usuario incompleta. Por favor, inicia sesión.',
'TOKEN_EXPIRED': 'Tu sesión ha expirado. Por favor, inicia sesión nuevamente.',
'CORRUPT_USER_DATA': 'Datos de usuario corruptos. Iniciando sesión nuevamente...',
'CORRUPT_USER_DATA_JSON': 'Error en datos almacenados. Iniciando sesión nuevamente...',
'DATA_MISMATCH': 'Inconsistencia en datos de sesión. Por favor, inicia sesión.',
'VALIDATION_ERROR': 'Error de validación. Por favor, inicia sesión nuevamente.'
};
showToast('warning', 'Sesión inválida', messages[reason] || 'Por favor, inicia sesión nuevamente.');
}
// Redirigir al login después de un breve delay para mostrar el toast
if (redirectToLogin) {
setTimeout(() => {
if (typeof Router !== 'undefined') {
Router.navigate(Router.ROUTES.LOGIN, true);
} else {
window.location.href = './Login/index.html';
}
}, 1500);
}
};
// Verificar sesión al cargar la aplicación
const initSessionValidation = () => {
const validation = validateSessionIntegrity();
if (!validation.valid) {
handleInvalidSession(validation.reason);
return false;
}
return true;
};
const hasValidOrganization = () => {
try {
const jwt = getJWTFromStorage();
if (!jwt || !isValidJWT(jwt)) return false;
const payload = parseJWT(jwt);
if (!payload) return false;
return !!(payload.organizationId || localStorage.getItem('organizationId'));
} catch (e) {
return false;
}
};
const getOrganizationNameById = async (organizationId) => {
try {
if (!organizationId) {
console.log('❌ getOrganizationNameById: No hay organizationId');
return '';
}
// Usar Auth API
const apiUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:3000'
: 'https://api.esperiency.com';
const url = `${apiUrl}/api/org-name/${organizationId}`;
console.log('🔍 Llamando a:', url);
// Obtener token para autenticación
const token = getJWTFromStorage();
if (!token) {
console.log('❌ No hay token de autenticación');
return '';
}
const response = await fetch(url, {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
});
console.log('📡 Respuesta:', response.status, response.statusText);
if (response && response.ok) {
const data = await response.json();
console.log('📦 Datos recibidos:', data);
if (data && data.success && data.data) {
return data.data.displayName || data.data.name || '';
}
}
return '';
} catch (e) {
console.error('Error obteniendo nombre de organización:', e);
return '';
}
};
const getOrganizationInfo = async (orgId, orgCode) => {
try {
if (!orgId || !orgCode) return null;
// Construir la URL de la API
const apiUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:3000'
: 'https://api.esperiency.com';
// Obtener token para autenticación
const token = getJWTFromStorage();
if (!token) {
console.log('❌ No hay token de autenticación para getOrganizationInfo');
return null;
}
let response;
try {
response = await fetch(`${apiUrl}/api/org-info`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ orgId: orgId, orgCode: orgCode })
});
} catch (err) {
console.error('Error en org-info fetch:', err);
throw err;
}
if (response && response.ok) {
const data = await response.json();
if (data && data.success) {
return data.organization;
}
}
return null;
} catch (e) {
console.error('Error obteniendo información de organización:', e);
return null;
}
};
// Nueva función para obtener orgId desde Firestore y actualizar URL
const getOrgIdFromFirestore = async (jwt) => {
try {
const payload = parseJWT(jwt);
if (!payload || !payload.organizationCode) {
console.log('❌ No hay código de organización en el JWT');
return null;
}
console.log('🔍 Obteniendo orgId desde Firestore para código:', payload.organizationCode);
// Construir la URL de la API (Auth API)
const apiUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:3000'
: 'https://api.esperiency.com';
const response = await fetch(`${apiUrl}/api/get-org-id-by-code`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
organizationCode: payload.organizationCode
})
});
if (response && response.ok) {
const data = await response.json();
if (data && data.success && data.orgId) {
console.log('✅ OrgId encontrado en Firestore:', data.orgId);
// Actualizar la URL con el orgId encontrado
const currentUrl = new URL(window.location);
currentUrl.searchParams.set(data.orgId, ''); // Agregar el orgId como parámetro
// Actualizar la URL sin recargar la página
window.history.replaceState({}, '', currentUrl);
console.log('🔄 URL actualizada con orgId:', currentUrl.href);
return data.orgId;
}
}
console.log('❌ No se pudo obtener orgId desde Firestore');
return null;
} catch (error) {
console.error('❌ Error obteniendo orgId desde Firestore:', error);
return null;
}
};
const getOrganizationNameByCode = async (orgCode) => {
try {
if (!orgCode) return { name: '', id: '' };
// Construir la URL de la API
const apiUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:3000'
: 'https://api.esperiency.com';
const response = await fetch(`${apiUrl}/api/org-name-by-code/${orgCode}`);
if (response && response.ok) {
const data = await response.json();
if (data && data.success) {
return {
name: data.organizationName || '',
id: data.organizationId || ''
};
}
}
return { name: '', id: '' };
} catch (e) {
console.error('Error obteniendo nombre de organización por código:', e);
return { name: '', id: '' };
}
};
const getOrgIdFromUrl = () => {
// Extraer orgId de la URL tipo /App/index.html?orgId
const urlParams = new URLSearchParams(window.location.search);
// Primero buscar en query parameters normales
const orgIdParam = urlParams.get('orgId');
if (orgIdParam) {
return decodeURIComponent(orgIdParam);
}
// Si no hay parámetro orgId, usar el primer parámetro sin nombre (query string simple)
const queryString = window.location.search;
if (queryString && queryString.startsWith('?')) {
const rawQuery = queryString.substring(1); // Quitar el ?
// Si no contiene = entonces es solo el orgId
if (!rawQuery.includes('=')) {
return decodeURIComponent(rawQuery);
}
}
return null;
};
const getMenuItems1 = (isCollapsed, setCurrentPage, currentPage) => [
{
title: "Inquilinos",
icon: React.createElement('i', { className: `fas fa-users ${isCollapsed ? 'size-6' : 'size-5'} transition-colors duration-200 ${currentPage === 'inquilinos' ? 'text-[#fae0d1]' : 'text-[#626367]'}` }),
page: 'inquilinos'
},
{
title: "Administrar",
icon: React.createElement('i', { className: `fas fa-cogs ${isCollapsed ? 'size-6' : 'size-5'} transition-colors duration-200 ${currentPage === 'administrar' ? 'text-[#fae0d1]' : 'text-[#626367]'}` }),
page: 'administrar'
},
{
title: "Analitica",
icon: React.createElement('i', { className: `fas fa-chart-line ${isCollapsed ? 'size-6' : 'size-5'} transition-colors duration-200 ${currentPage === 'analitica' ? 'text-[#fae0d1]' : 'text-[#626367]'}` }),
page: 'analitica'
},
{
title: "Tareas",
icon: React.createElement('i', { className: `fas fa-tasks ${isCollapsed ? 'size-6' : 'size-5'} transition-colors duration-200 ${currentPage === 'tareas' ? 'text-[#fae0d1]' : 'text-[#626367]'}` }),
page: 'tareas'
},
{
title: "Departamentos",
icon: React.createElement('i', { className: `fas fa-building ${isCollapsed ? 'size-6' : 'size-5'} transition-colors duration-200 ${currentPage === 'departamentos' ? 'text-[#fae0d1]' : 'text-[#626367]'}` }),
page: 'departamentos'
},
{
title: "Mantenimiento",
icon: React.createElement('i', { className: `fas fa-wrench ${isCollapsed ? 'size-6' : 'size-5'} transition-colors duration-200 ${currentPage === 'mantenimiento' ? 'text-[#fae0d1]' : 'text-[#626367]'}` }),
page: 'mantenimiento'
},
];
const getMenuItems2 = (isCollapsed, setCurrentPage, currentPage) => [
{
title: "Soporte",
icon: React.createElement('i', { className: `fas fa-headset ${isCollapsed ? 'size-6' : 'size-5'} transition-colors duration-200 ${currentPage === 'soporte' ? 'text-[#fae0d1]' : 'text-[#626367]'}` }),
page: 'soporte'
},
{
title: "Mensajes",
icon: React.createElement('i', { className: `fas fa-comments ${isCollapsed ? 'size-6' : 'size-5'} transition-colors duration-200 ${currentPage === 'chat' ? 'text-[#fae0d1]' : 'text-[#626367]'}` }),
page: 'chat'
},
];
const dashboardItems = [];
const rightSidebarItems = [];
const notifications = [];
const statusItems = [];
function SidebarLeft({ isCollapsed, setIsCollapsed, currentPage, setCurrentPage }) {
const [organizationName, setOrganizationName] = React.useState('Cargando...');
const [userInfo, setUserInfo] = React.useState({
fullName: 'Cargando...',
firstName: '',
lastName: '',
role: 'user',
email: '',
organizationRole: 'member'
});
const [userMenuOpen, setUserMenuOpen] = React.useState(false);
const organizationLoaded = React.useRef(false);
// Función para asociar usuario con organización (actualizar JWT)
const updateUserOrganization = async (organizationId, organizationName, organizationCode) => {
try {
console.log('🔄 Asociando usuario con organización:', {
organizationId,
organizationName,
organizationCode
});
const apiUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:3000'
: 'https://api.esperiency.com';
const token = getJWTFromStorage();
if (!token) {
console.error('❌ No hay token JWT para actualizar');
return;
}
// Decode token to get userId
const payload = parseJWT(token);
if (!payload) {
console.error('❌ Error decodificando token');
return;
}
const userId = payload.uid || payload.firebaseUid;
if (!userId) {
console.error('❌ No se encontró userId en el token');
return;
}
const response = await fetch(`${apiUrl}/api/update-user-organization`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
userId,
organizationId,
organizationName,
organizationCode,
token
})
});
if (response.ok) {
const result = await response.json();
if (result.success && result.token) {
// Actualizar el token en localStorage
localStorage.setItem('authToken', result.token);
console.log('✅ Usuario asociado con organización y JWT actualizado');
} else {
console.error('⚠️ Error en respuesta del servidor:', result);
}
} else {
const errorText = await response.text();
console.error('❌ Error asociando usuario con organización:', response.status, errorText);
}
} catch (error) {
console.error('❌ Error en updateUserOrganization:', error);
}
};
const getUserInitials = (firstName, lastName) => {
const first = firstName?.charAt(0)?.toUpperCase() || '';
const last = lastName?.charAt(0)?.toUpperCase() || '';
return first + last || 'U';
};
const getRoleDisplayName = (role, organizationRole) => {
// Primero verificar organizationRole (rol dentro de la organización)
if (organizationRole === 'admin' || organizationRole === 'administrador') return 'Administrador';
if (organizationRole === 'owner' || organizationRole === 'propietario') return 'Propietario';
if (organizationRole === 'manager' || organizationRole === 'gerente') return 'Gerente';
// Luego verificar role (rol global del usuario)
if (role === 'admin' || role === 'administrador') return 'Administrador';
if (role === 'superadmin') return 'Super Admin';
// Roles de usuario normal
if (organizationRole === 'member' || organizationRole === 'miembro') return 'Miembro';
if (organizationRole === 'usuario' || role === 'user' || role === 'usuario') return 'Usuario';
return 'Usuario';
};
const toggleUserMenu = (e) => {
e.stopPropagation();
setUserMenuOpen(!userMenuOpen);
};
const toggleSidebar = () => {
setIsCollapsed(!isCollapsed);
setUserMenuOpen(false);
};
const handleMenuItemClick = (action) => {
setUserMenuOpen(false);
switch (action) {
case 'personalizar':
setCurrentPage('dashboard');
// Small delay to ensure DashboardWidgets is mounted before calling
setTimeout(() => {
if (window.enterCustomizeMode) window.enterCustomizeMode();
}, 150);
break;
case 'configuracion':
setCurrentPage('configuracion');
break;
case 'cerrar-sesion':
clearAuthData();
if (typeof Router !== 'undefined') {
Router.logout();
} else {
window.location.href = './Login/index.html';
}
break;
}
};
React.useEffect(() => {
const handleClickOutside = () => {
if (userMenuOpen) {
setUserMenuOpen(false);
}
};
if (userMenuOpen) {
document.addEventListener('click', handleClickOutside);
}
return () => {
document.removeEventListener('click', handleClickOutside);
};
}, [userMenuOpen]);
React.useEffect(() => {
// ============================================
// VALIDACIÓN DE INTEGRIDAD DE SESIÓN
// ============================================
const sessionValidation = validateSessionIntegrity();
if (!sessionValidation.valid) {
// Si la sesión es inválida/corrupta, limpiar todo y redirigir
handleInvalidSession(sessionValidation.reason);
setOrganizationName('Sesión inválida');
setUserInfo({
fullName: 'Usuario no autenticado',
firstName: '',
lastName: '',
role: 'guest',
email: '',
organizationRole: 'none'
});
return;
}
const jwtToken = getJWTFromStorage();
const payload = sessionValidation.payload || parseJWT(jwtToken);
if (payload) {
const firstName = fixUTF8String(payload?.firstName || '');
const lastName = fixUTF8String(payload?.lastName || '');
const fullName = fixUTF8String(payload?.fullName) || `${firstName} ${lastName}`.trim() || 'Usuario';
console.log('👤 Datos de usuario desde JWT:', {
role: payload?.role,
organizationRole: payload?.organizationRole,
email: payload?.email
});
setUserInfo({
fullName: fullName,
firstName: firstName,
lastName: lastName,
role: payload?.role || 'user',
email: payload?.email || '',
organizationRole: payload?.organizationRole || 'member'
});
const orgName = localStorage.getItem('organizationName') || payload?.organizationName || null;
if (orgName) {
setOrganizationName(orgName);
}
}
if (!hasValidOrganization()) {
setOrganizationName('Sin organización configurada');
}
// ============================================
// CARGAR ORGANIZACIÓN DESDE JWT (SEGURO)
// La información de organización viene encriptada en el token
// ============================================
let organizationId = null;
let organizationCode = null;
// Prioridad 1: Obtener del payload del JWT (más seguro)
if (payload) {
organizationId = payload?.organizationId || null;
organizationCode = payload?.organizationCode || null;
}
// Prioridad 2: Fallback a localStorage (datos previamente guardados)
if (!organizationId) {
organizationId = localStorage.getItem('organizationId');
}
if (!organizationCode) {
organizationCode = localStorage.getItem('organizationCode');
}
console.log('🔐 Datos de organización desde JWT:', {
organizationId,
organizationCode,
source: payload?.organizationId ? 'JWT' : 'localStorage'
});
// Función para procesar la información de organización
const processOrganizationInfo = async (orgId, orgCode) => {
if (!orgId || organizationLoaded.current) return;
organizationLoaded.current = true;
console.log('📡 Obteniendo información completa de organización...');
// Siempre configurar variables globales con datos del JWT como mínimo
window.currentOrganizationId = orgId;
if (orgCode) window.currentOrganizationCode = orgCode;
localStorage.setItem('organizationId', orgId);
try {
// Si tenemos código, usar el método completo
if (orgCode) {
const orgInfo = await getOrganizationInfo(orgId, orgCode);
if (orgInfo && orgInfo.name) {
setOrganizationName(orgInfo.name);
localStorage.setItem('organizationId', orgInfo.id);
localStorage.setItem('organizationName', orgInfo.name);
localStorage.setItem('organizationCode', orgInfo.code);
localStorage.setItem('organizationUuid', orgInfo.uuid);
// Variables globales para otros componentes
window.currentOrganizationId = orgInfo.id;
window.currentOrganizationCode = orgInfo.code;
window.currentOrganizationName = orgInfo.name;
window.currentOrganizationUuid = orgInfo.uuid;
console.log('✅ Información de organización cargada:', orgInfo);
// 🔄 Asociar usuario con la organización (actualizar JWT)
updateUserOrganization(orgInfo.id, orgInfo.name, orgInfo.code);
return; // ✅ Salir después de procesar exitosamente
} else {
// API no encontró la org, pero mantenemos el orgId del JWT
const fallbackName = payload?.organizationName || localStorage.getItem('organizationName') || 'Mi Organización';
setOrganizationName(fallbackName);
console.log('⚠️ org-info no disponible, usando datos del JWT:', { orgId, fallbackName });
return;
}
}
// Fallback: obtener solo por ID
const orgName = await getOrganizationNameById(orgId);
if (orgName) {
setOrganizationName(orgName);
localStorage.setItem('organizationId', orgId);
localStorage.setItem('organizationName', orgName);
// Variables globales para otros componentes
window.currentOrganizationId = orgId;
window.currentOrganizationName = orgName;
console.log('✅ Organización cargada (solo por ID):', { orgId, orgName });
} else {
setOrganizationName('Organización no encontrada');
}
} catch (error) {
console.error('Error obteniendo información de organización:', error);
// Usar datos del JWT como fallback (window.currentOrganizationId ya fue configurado arriba)
const fallbackName = payload?.organizationName || localStorage.getItem('organizationName') || 'Mi Organización';
setOrganizationName(fallbackName);
console.log('⚠️ Usando datos del JWT como fallback:', { orgId, fallbackName });
}
};
// Procesar organización si tenemos datos
if (organizationId) {
processOrganizationInfo(organizationId, organizationCode);
} else {
// Si no hay orgId en JWT ni localStorage, intentar desde Firestore
const loadOrgIdFromFirestore = async () => {
const jwt = getJWTFromStorage();
if (jwt) {
console.log('🔄 No hay orgId en JWT, consultando Firestore...');
const orgIdFromFirestore = await getOrgIdFromFirestore(jwt);
if (orgIdFromFirestore) {
processOrganizationInfo(orgIdFromFirestore, null);
}
}
};
loadOrgIdFromFirestore();
}
}, []);
return (
{!isCollapsed &&
{organizationName}
}
{getUserInitials(userInfo.firstName, userInfo.lastName)}
{!isCollapsed && (
<>
{userInfo.fullName}
{getRoleDisplayName(userInfo.role, userInfo.organizationRole)}
)}
{userMenuOpen && !isCollapsed && (
handleMenuItemClick('personalizar')}
className="w-full flex items-center px-3 py-2 text-sm text-white hover:bg-gray-600 hover:text-white transition-colors"
>
handleMenuItemClick('configuracion')}
className="w-full flex items-center px-3 py-2 text-sm text-white hover:bg-gray-600 hover:text-white transition-colors"
>
handleMenuItemClick('cerrar-sesion')}
className="w-full flex items-center px-3 py-2 text-sm text-white hover:bg-red-500 hover:text-white transition-colors"
>
)}
setCurrentPage('dashboard')}
className={`w-full flex items-center p-1.5 rounded-lg transition-all duration-200 group/item ${
isCollapsed ? 'justify-center px-0 py-2' : ''
} ${
currentPage === 'dashboard'
? 'bg-white/[0.06]'
: 'hover:bg-white/[0.04]'
}`}
style={currentPage === 'dashboard' && !isCollapsed ? { boxShadow: 'inset 2px 0 0 var(--accent)' } : {}}
>
{!isCollapsed && Dashboard
}
{getMenuItems1(isCollapsed, setCurrentPage, currentPage).map(({ title, icon, count, page }, idx) => (
setCurrentPage(page)}
className={`flex items-center p-1.5 rounded-lg transition-all duration-200 group/item ${
isCollapsed ? 'justify-center px-0 py-2' : ''
} ${
currentPage === page
? 'bg-white/[0.06]'
: 'hover:bg-white/[0.04]'
}`}
style={{
...(currentPage === page && !isCollapsed ? { boxShadow: 'inset 2px 0 0 var(--accent)' } : {}),
animationDelay: `${idx * 40}ms`
}}
key={idx}
>
{icon}
{!isCollapsed && (
<>
{title}
{count > 0 && (
{count}
)}
)}
))}
{getMenuItems2(isCollapsed, setCurrentPage, currentPage).map(({ title, icon, page }, idx) => (
setCurrentPage(page)}
className={`flex items-center p-1.5 rounded-lg transition-all duration-200 group/item ${
isCollapsed ? 'justify-center px-0 py-2' : ''
} ${
currentPage === page
? 'bg-white/[0.06]'
: 'hover:bg-white/[0.04]'
}`}
style={currentPage === page && !isCollapsed ? { boxShadow: 'inset 2px 0 0 var(--accent)' } : {}}
key={idx}
>
{icon}
{!isCollapsed && {title}
}
))}
);
}
function Dashboard() {
return (
<>
Dashboard
{dashboardItems.map(({ title, Icon }, idx) => (
))}
{campaigns.map(({ title, redemptions, remaining, color }, idx) => (
))}
);
}
const paymentData = [];
const ingresosData = [];
const recentPayments = [];
// Datos de campañas/deudores (vacío - se llenará con datos reales)
const campaigns = [];
// ============================================
// WIDGETS DEL DASHBOARD - DISEÑO INTUITIVO
// ============================================
function WelcomeWidget() {
const [currentTime, setCurrentTime] = React.useState(new Date());
const [greeting, setGreeting] = React.useState('');
const [userName, setUserName] = React.useState('');
React.useEffect(() => {
const timer = setInterval(() => setCurrentTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);
React.useEffect(() => {
const hour = currentTime.getHours();
if (hour < 12) setGreeting('Buenos días');
else if (hour < 18) setGreeting('Buenas tardes');
else setGreeting('Buenas noches');
}, [currentTime]);
React.useEffect(() => {
// Obtener nombre del usuario desde JWT
const token = getJWTFromStorage();
if (token) {
const payload = parseJWT(token);
if (payload) {
const firstName = fixUTF8String(payload?.firstName || '');
setUserName(firstName);
}
}
}, []);
const formatDate = () => {
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
return currentTime.toLocaleDateString('es-ES', options);
};
return (
{greeting}{userName ? `, ${userName}` : ''} 👋
{formatDate()}
{currentTime.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true })}
Hora local
);
}
function QuickStatsWidget({ setCurrentPage }) {
const [stats, setStats] = React.useState([
{
title: 'Total Inquilinos',
value: '...',
icon: 'fas fa-users',
bgColor: 'bg-blue-500/10',
textColor: 'text-blue-400',
loading: true,
page: 'inquilinos'
},
{
title: 'Pagos al Día',
value: '...',
icon: 'fas fa-check-circle',
bgColor: 'bg-green-500/10',
textColor: 'text-green-400',
loading: true,
page: 'inquilinos'
},
{
title: 'Pendientes',
value: '...',
icon: 'fas fa-clock',
bgColor: 'bg-orange-500/10',
textColor: 'text-orange-400',
loading: true,
page: 'inquilinos'
},
{
title: 'Ingresos Mes',
value: '...',
icon: 'fas fa-dollar-sign',
bgColor: 'bg-purple-500/10',
textColor: 'text-purple-400',
loading: true,
page: 'analitica'
}
]);
React.useEffect(() => {
const fetchStats = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) {
setStats(prev => prev.map(s => ({ ...s, value: '0', loading: false })));
return;
}
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
}, { cacheTime: 5 * 60 * 1000 }); // Caché de 5 minutos
if (response.ok) {
const result = await response.json();
const tenants = result.data || [];
// Calcular estadísticas
const activeTenants = tenants.filter(t => t.status !== 'archived');
const totalTenants = activeTenants.length;
const paidTenants = activeTenants.filter(t => t.paymentStatus === 'current' || t.paymentStatus === 'advanced').length;
const pendingTenants = activeTenants.filter(t => t.paymentStatus === 'overdue').length;
const monthlyIncome = activeTenants.reduce((sum, t) => sum + (parseFloat(t.rentAmount) || 0), 0);
setStats([
{
title: 'Total Inquilinos',
value: totalTenants.toString(),
icon: 'fas fa-users',
bgColor: 'bg-blue-500/10',
textColor: 'text-blue-400',
loading: false,
page: 'inquilinos'
},
{
title: 'Pagos al Día',
value: paidTenants.toString(),
icon: 'fas fa-check-circle',
bgColor: 'bg-green-500/10',
textColor: 'text-green-400',
loading: false,
page: 'inquilinos'
},
{
title: 'Pendientes',
value: pendingTenants.toString(),
icon: 'fas fa-clock',
bgColor: 'bg-orange-500/10',
textColor: 'text-orange-400',
loading: false,
page: 'inquilinos'
},
{
title: 'Ingresos Mes',
value: `$${monthlyIncome.toLocaleString('es-MX')}`,
icon: 'fas fa-dollar-sign',
bgColor: 'bg-purple-500/10',
textColor: 'text-purple-400',
loading: false,
page: 'analitica'
}
]);
}
} catch (error) {
console.error('Error fetching stats:', error);
setStats(prev => prev.map(s => ({ ...s, value: '0', loading: false })));
}
};
fetchStats();
// Actualizar cada 30 segundos
const interval = setInterval(fetchStats, 30000);
return () => clearInterval(interval);
}, []);
return (
{stats.map((stat, idx) => (
stat.page && setCurrentPage && setCurrentPage(stat.page)}
className="bg-[#1b1c20] rounded-2xl p-6 hover:bg-[#252628] transition-all duration-300 cursor-pointer group border border-transparent hover:border-[#35383d]"
>
{stat.value}
{stat.title}
))}
{actions.map((action, idx) => (
setCurrentPage && setCurrentPage(action.page)}
className="bg-[#252628] hover:bg-[#2f3136] border border-[#35383d]/60 hover:border-[#fae0d1]/30 text-gray-300 hover:text-[#fae0d1] rounded-xl p-3 flex flex-col items-center justify-center transition-all duration-300 hover:scale-[1.03]"
>
{action.title}
))}
);
}
function RecentActivityWidget() {
const [activities, setActivities] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
const fetchActivity = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) {
setActivities([{ type: 'info', text: 'Configura tu organización para ver actividad', time: '', icon: 'fas fa-info-circle', color: 'text-blue-400' }]);
setLoading(false);
return;
}
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
}, { cacheTime: 5 * 60 * 1000 });
if (response.ok) {
const result = await response.json();
const tenants = result.data || [];
// Crear actividad basada en los inquilinos
const recentActivities = [];
// Ordenar por fecha de creación (más reciente primero)
const sortedTenants = tenants
.filter(t => t.createdAt)
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
.slice(0, 5);
sortedTenants.forEach(tenant => {
const date = new Date(tenant.createdAt);
const timeAgo = getTimeAgo(date);
recentActivities.push({
type: 'tenant',
text: `Nuevo inquilino: ${tenant.name}`,
time: timeAgo,
icon: 'fas fa-user-plus',
color: 'text-green-400'
});
});
// Agregar inquilinos con pago pendiente
const overdueTenants = tenants.filter(t => t.paymentStatus === 'overdue').slice(0, 3);
overdueTenants.forEach(tenant => {
recentActivities.push({
type: 'warning',
text: `Pago pendiente: ${tenant.name}`,
time: tenant.apartment,
icon: 'fas fa-exclamation-triangle',
color: 'text-orange-400'
});
});
if (recentActivities.length === 0) {
recentActivities.push({
type: 'info',
text: 'Sin actividad reciente',
time: 'Agrega inquilinos para ver actividad',
icon: 'fas fa-info-circle',
color: 'text-gray-400'
});
}
setActivities(recentActivities);
}
} catch (error) {
console.error('Error fetching activity:', error);
setActivities([{ type: 'error', text: 'Error al cargar actividad', time: '', icon: 'fas fa-exclamation-circle', color: 'text-red-400' }]);
}
setLoading(false);
};
fetchActivity();
}, []);
// Función para calcular tiempo transcurrido
const getTimeAgo = (date) => {
const now = new Date();
const diffMs = now - date;
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMs / 3600000);
const diffDays = Math.floor(diffMs / 86400000);
if (diffMins < 1) return 'Ahora mismo';
if (diffMins < 60) return `Hace ${diffMins} min`;
if (diffHours < 24) return `Hace ${diffHours}h`;
if (diffDays < 7) return `Hace ${diffDays}d`;
return date.toLocaleDateString('es-ES');
};
return (
window.setCurrentPage && window.setCurrentPage('inquilinos')}
className="text-[#fae0d1] text-xs hover:underline flex items-center gap-1 transition-colors hover:text-white"
>
Ver todo
{loading ? (
) : (
activities.map((activity, idx) => (
{activity.text}
{activity.time &&
{activity.time}
}
))
)}
);
}
function PaymentProgressWidget() {
const [progress, setProgress] = React.useState(0);
const [paid, setPaid] = React.useState(0);
const [pending, setPending] = React.useState(0);
const [loading, setLoading] = React.useState(true);
const radius = 70;
const circumference = 2 * Math.PI * radius;
const strokeDashoffset = circumference - (progress / 100) * circumference;
// Determinar color según el progreso
const getProgressColor = () => {
if (progress >= 80) return { start: '#22c55e', end: '#16a34a' }; // Verde
if (progress >= 50) return { start: '#d4a574', end: '#c4956a' }; // Oro suave
return { start: '#ef4444', end: '#dc2626' }; // Rojo
};
const progressColor = getProgressColor();
React.useEffect(() => {
const fetchPaymentProgress = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) {
setLoading(false);
return;
}
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
}, { cacheTime: 5 * 60 * 1000 });
if (response.ok) {
const result = await response.json();
const tenants = result.data || [];
const activeTenants = tenants.filter(t => t.status !== 'archived');
const paidCount = activeTenants.filter(t => t.paymentStatus === 'current' || t.paymentStatus === 'advanced').length;
const pendingCount = activeTenants.filter(t => t.paymentStatus === 'overdue').length;
const total = activeTenants.length;
setPaid(paidCount);
setPending(pendingCount);
setProgress(total > 0 ? Math.round((paidCount / total) * 100) : 0);
}
} catch (error) {
console.error('Error fetching payment progress:', error);
}
setLoading(false);
};
fetchPaymentProgress();
}, []);
return (
window.setCurrentPage && window.setCurrentPage('analitica')}
className="text-[#fae0d1] text-xs hover:underline flex items-center gap-1 transition-colors hover:text-white"
>
Ver detalles
{loading ? (
) : (
<>
{progress}%
Completado
)}
);
}
function UpcomingPaymentsWidget() {
const [upcomingPayments, setUpcomingPayments] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
const fetchUpcoming = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) {
setLoading(false);
return;
}
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
}, { cacheTime: 5 * 60 * 1000 });
if (response.ok) {
const result = await response.json();
const tenants = result.data || [];
// Filtrar inquilinos con contratos próximos a vencer (próximos 30 días)
const today = new Date();
const thirtyDaysFromNow = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
const upcoming = tenants
.filter(t => {
const endDate = t.endDate || t.contractEnd;
if (!endDate || t.status === 'archived') return false;
const contractEnd = new Date(endDate);
return contractEnd >= today && contractEnd <= thirtyDaysFromNow;
})
.map(t => {
const endDate = new Date(t.endDate || t.contractEnd);
const daysLeft = Math.ceil((endDate - today) / (1000 * 60 * 60 * 24));
return {
tenant: t.name,
apartment: t.apartment,
amount: `$${(t.rentAmount || 0).toLocaleString('es-MX')}`,
dueDate: `${daysLeft} días`,
daysLeft
};
})
.sort((a, b) => a.daysLeft - b.daysLeft)
.slice(0, 5);
setUpcomingPayments(upcoming);
}
} catch (error) {
console.error('Error fetching upcoming:', error);
}
setLoading(false);
};
fetchUpcoming();
}, []);
return (
{upcomingPayments.length} próximos
window.setCurrentPage && window.setCurrentPage('inquilinos')}
className="text-[#fae0d1] text-xs hover:underline flex items-center gap-1 transition-colors hover:text-white"
>
Ver todo
{loading ? (
) : upcomingPayments.length === 0 ? (
No hay vencimientos próximos
Los contratos próximos a vencer aparecerán aquí
) : (
{upcomingPayments.map((payment, idx) => (
{payment.tenant}
{payment.apartment}
{payment.amount}
{payment.dueDate}
))}
)}
);
}
function MonthlyOverviewWidget() {
const months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
const currentMonth = new Date().getMonth();
const currentYear = new Date().getFullYear();
const [monthlyData, setMonthlyData] = React.useState(months.map(() => 0));
const [loading, setLoading] = React.useState(true);
const [showGrowth, setShowGrowth] = React.useState(true);
React.useEffect(() => {
const fetchMonthlyData = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) {
setLoading(false);
return;
}
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
}, { cacheTime: 10 * 60 * 1000 }); // Caché de 10 minutos para datos históricos
if (response.ok) {
const result = await response.json();
const tenants = result.data || [];
// Calcular ingresos potenciales por mes basado en inquilinos activos
const activeTenants = tenants.filter(t => t.status !== 'archived');
const monthlyIncome = activeTenants.reduce((sum, t) => sum + (parseFloat(t.rentAmount) || 0), 0);
// Simular datos mensuales (en producción esto vendría de pagos reales)
const data = months.map((_, idx) => {
if (idx <= currentMonth) {
// Meses pasados: variación aleatoria del ingreso base
return Math.round(monthlyIncome * (0.7 + Math.random() * 0.3));
}
return 0; // Meses futuros
});
setMonthlyData(data);
}
} catch (error) {
console.error('Error fetching monthly data:', error);
}
setLoading(false);
};
fetchMonthlyData();
}, []);
const maxValue = Math.max(...monthlyData, 1);
// Calcular datos de crecimiento (porcentaje de cambio respecto al mes anterior)
const growthData = monthlyData.map((value, idx) => {
if (idx === 0 || monthlyData[idx - 1] === 0) return 0;
return ((value - monthlyData[idx - 1]) / monthlyData[idx - 1]) * 100;
});
// Calcular totales para mostrar
const totalYear = monthlyData.slice(0, currentMonth + 1).reduce((sum, v) => sum + v, 0);
const avgGrowth = growthData.slice(1, currentMonth + 1).filter(g => g !== 0).length > 0
? growthData.slice(1, currentMonth + 1).reduce((sum, g) => sum + g, 0) / growthData.slice(1, currentMonth + 1).filter(g => g !== 0).length
: 0;
// Ref para el canvas de Chart.js
const chartRef = React.useRef(null);
const chartInstance = React.useRef(null);
// Inicializar/actualizar Chart.js
React.useEffect(() => {
if (loading || !chartRef.current) return;
// Cargar Chart.js si no está disponible
if (!window.Chart) {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
script.onload = () => createChart();
document.head.appendChild(script);
} else {
createChart();
}
function createChart() {
// Destruir gráfico anterior si existe
if (chartInstance.current) {
chartInstance.current.destroy();
}
const ctx = chartRef.current.getContext('2d');
// Colores para las barras
const barColors = months.map((_, idx) => {
if (idx === currentMonth) return '#fae0d1';
if (idx <= currentMonth) return '#35383d';
return '#252628';
});
const barHoverColors = months.map((_, idx) => {
if (idx === currentMonth) return '#c4877e';
if (idx <= currentMonth) return '#45484d';
return '#35383d';
});
// Datos para la línea de tendencia
const trendData = monthlyData.map((val, idx) => idx <= currentMonth ? val : null);
chartInstance.current = new window.Chart(ctx, {
type: 'bar',
data: {
labels: months,
datasets: [
{
label: 'Ingresos',
data: monthlyData,
backgroundColor: barColors,
hoverBackgroundColor: barHoverColors,
borderRadius: 6,
borderSkipped: false,
barThickness: 'flex',
maxBarThickness: 24,
order: 2
},
...(showGrowth ? [{
label: 'Tendencia',
data: trendData,
type: 'line',
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
fill: true,
tension: 0.4,
pointRadius: 4,
pointBackgroundColor: '#10b981',
pointBorderColor: '#1b1c20',
pointBorderWidth: 2,
pointHoverRadius: 6,
order: 1
}] : [])
]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
intersect: false,
mode: 'index'
},
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: '#252628',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: '#444',
borderWidth: 1,
padding: 12,
displayColors: false,
callbacks: {
title: function(context) {
return months[context[0].dataIndex];
},
label: function(context) {
const value = context.parsed.y;
const idx = context.dataIndex;
const growth = idx > 0 ? growthData[idx] : 0;
let label = `$${value.toLocaleString('es-MX')}`;
if (idx > 0 && growth !== 0 && context.dataset.label === 'Ingresos') {
const arrow = growth > 0 ? '↑' : '↓';
label += ` (${arrow} ${Math.abs(growth).toFixed(1)}%)`;
}
return label;
}
}
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: function(context) {
return context.index === currentMonth ? '#fae0d1' : '#666';
},
font: function(context) {
return {
weight: context.index === currentMonth ? 'bold' : 'normal',
size: 11
};
}
}
},
y: {
display: false,
beginAtZero: true
}
}
}
});
}
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
}
};
}, [loading, monthlyData, showGrowth, currentMonth]);
return (
Resumen Anual
Ingresos por mes - {currentYear}
window.setCurrentPage && window.setCurrentPage('analitica')}
className="text-[#fae0d1] text-xs hover:underline flex items-center gap-1 transition-colors hover:text-white"
>
Ver detalles
setShowGrowth(!showGrowth)}
className={`text-xs px-2 py-1 rounded-full transition-colors ${showGrowth ? 'bg-emerald-500/20 text-emerald-400' : 'bg-gray-700 text-gray-400'}`}
>
{loading ? (
) : (
<>
{/* Gráfico con Chart.js */}
{/* Resumen de crecimiento */}
Total acumulado
${totalYear.toLocaleString('es-MX')}
= 0 ? 'bg-emerald-500/10' : 'bg-red-500/10'}`}>
= 0 ? 'arrow-up' : 'arrow-down'} text-xs ${avgGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'} mr-1.5`}>
= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{Math.abs(avgGrowth).toFixed(1)}%
promedio
)}
);
}
function SystemStatusWidget() {
// Estados: 'checking', 'online', 'partial', 'offline', 'api-down'
const [systemStatus, setSystemStatus] = React.useState('checking');
const [cacheStats, setCacheStats] = React.useState(null);
React.useEffect(() => {
const checkSystemStatus = async () => {
const token = getJWTFromStorage();
const hasOrg = window.currentOrganizationId || localStorage.getItem('organizationId');
let authOk = !!token;
let orgOk = !!hasOrg;
// Verificar conexión a internet
const isOnline = await CacheManager.checkRealConnection();
// Verificar si el API está funcionando
const apiWorking = await CacheManager.checkAPIStatus();
// Obtener estadísticas de caché
const stats = CacheManager.getStats();
setCacheStats(stats);
// Determinar estado general
if (!isOnline) {
// Sin conexión a internet
setSystemStatus('offline');
} else if (!apiWorking) {
// Internet funciona pero el API no responde
setSystemStatus('api-down');
} else if (authOk && orgOk) {
// Todo funcionando
setSystemStatus('online');
} else {
// API funciona pero hay problemas de sesión
setSystemStatus('partial');
}
};
checkSystemStatus();
// Verificar cada 30 segundos para detectar cambios más rápido
const interval = setInterval(checkSystemStatus, 30000);
return () => clearInterval(interval);
}, []);
const getStatusContent = () => {
switch (systemStatus) {
case 'checking':
return {
emoji: '🔄',
title: 'Verificando...',
message: 'Estamos comprobando el estado del sistema',
textColor: 'text-gray-400'
};
case 'online':
return {
emoji: '😊',
title: '¡Todo funcionando de maravilla!',
message: 'Todos nuestros sistemas están operativos',
textColor: 'text-green-400'
};
case 'partial':
return {
emoji: '😟',
title: 'Problemas de sesión',
message: 'El servidor funciona pero hay problemas con tu sesión',
textColor: 'text-orange-400'
};
case 'api-down':
return {
emoji: 'sad',
title: 'Parece que tenemos problemas graves de nuestra parte',
message: 'Pero no te preocupes, guardaremos localmente lo que hagas hasta que los arreglemos. ¡Lo sentimos!',
textColor: 'text-red-400'
};
case 'offline':
return {
emoji: '📴',
title: 'Sin conexión a internet',
message: 'Usando datos guardados en caché. Los cambios se sincronizarán cuando vuelvas a conectarte.',
textColor: 'text-orange-400'
};
default:
return {
emoji: '🔄',
title: 'Verificando...',
message: '',
textColor: 'text-gray-400'
};
}
};
const status = getStatusContent();
return (
{systemStatus === 'checking' ? (
) : (
<>
{status.emoji === 'sad' ? (
😓
) : (
{status.emoji}
)}
{status.title}
{status.message}
)}
);
}
function PaymentSummaryWidget() {
const [totalRevenue, setTotalRevenue] = React.useState(0);
const [paymentsCount, setPaymentsCount] = React.useState(0);
const [pendingAmount, setPendingAmount] = React.useState(0);
const [pendingCount, setPendingCount] = React.useState(0);
const [recentTenants, setRecentTenants] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
const fetchPaymentSummary = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) {
setLoading(false);
return;
}
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
}, { cacheTime: 5 * 60 * 1000 });
if (response.ok) {
const result = await response.json();
const tenants = result.data || [];
const activeTenants = tenants.filter(t => t.status !== 'archived');
// Calcular totales
const paidTenants = activeTenants.filter(t => t.paymentStatus === 'current' || t.paymentStatus === 'advanced');
const overdueTenants = activeTenants.filter(t => t.paymentStatus === 'overdue');
const revenue = paidTenants.reduce((sum, t) => sum + (parseFloat(t.rentAmount) || 0), 0);
const pending = overdueTenants.reduce((sum, t) => sum + (parseFloat(t.rentAmount) || 0), 0);
setTotalRevenue(revenue);
setPaymentsCount(paidTenants.length);
setPendingAmount(pending);
setPendingCount(overdueTenants.length);
// Obtener pagos reales del historial de todos los inquilinos
const allPayments = [];
activeTenants.forEach(t => {
if (t.paymentHistory && t.paymentHistory.length > 0) {
t.paymentHistory.forEach(p => {
allPayments.push({
tenant: t.name,
apartment: t.apartment,
amount: parseFloat(p.amount) || 0,
date: new Date(p.date || p.registeredAt).toLocaleDateString('es-ES'),
rawDate: new Date(p.date || p.registeredAt),
method: p.method || 'No especificado',
isPaid: true
});
});
}
});
// También agregar inquilinos overdue como pagos pendientes si no tienen historial reciente
overdueTenants.forEach(t => {
if (!t.paymentHistory || t.paymentHistory.length === 0) {
allPayments.push({
tenant: t.name,
apartment: t.apartment,
amount: parseFloat(t.rentAmount) || 0,
date: 'Pendiente',
rawDate: new Date(0),
method: '',
isPaid: false
});
}
});
// Ordenar por fecha más reciente y tomar los últimos 6
const recent = allPayments
.sort((a, b) => b.rawDate - a.rawDate)
.slice(0, 6);
setRecentTenants(recent);
}
} catch (error) {
console.error('Error fetching payment summary:', error);
}
setLoading(false);
};
fetchPaymentSummary();
}, []);
return (
Resumen de Ingresos
Balance general del mes
window.setCurrentPage && window.setCurrentPage('analitica')}
className="text-[#fae0d1] text-xs hover:underline flex items-center gap-1 transition-colors hover:text-white"
>
Ver detalles
{loading ? (
) : (
<>
${totalRevenue.toLocaleString('es-MX')}
{paymentsCount}
${pendingAmount.toLocaleString('es-MX')}
{recentTenants.length > 0 ? (
Pagos Recientes
{recentTenants.map((payment, idx) => (
{payment.tenant}
{payment.apartment}
${payment.amount.toLocaleString('es-MX')}
{payment.date}
))}
) : (
No hay pagos registrados este mes
Los pagos recientes aparecerán aquí
)}
)}
);
}
// Placeholder page for sections under development
function PlaceholderPage({ title, icon, color, description, setCurrentPage }) {
const colorMap = {
blue: { bg: 'bg-blue-500/10', text: 'text-blue-400', border: 'border-blue-500/20', ring: 'ring-blue-500/30' },
yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', border: 'border-yellow-500/20', ring: 'ring-yellow-500/30' },
purple: { bg: 'bg-purple-500/10', text: 'text-purple-400', border: 'border-purple-500/20', ring: 'ring-purple-500/30' },
green: { bg: 'bg-green-500/10', text: 'text-green-400', border: 'border-green-500/20', ring: 'ring-green-500/30' },
gray: { bg: 'bg-gray-500/10', text: 'text-gray-400', border: 'border-gray-500/20', ring: 'ring-gray-500/30' },
};
const c = colorMap[color] || colorMap.gray;
return (
{title}
{description}
setCurrentPage('dashboard')}
className="bg-[#35383d] hover:bg-[#45484d] text-white px-4 py-2 rounded-xl text-sm transition-colors"
>
);
}
// ============================================
// ANALYTICS WIDGET REGISTRY & LAYOUT
// ============================================
const ANALYTICS_WIDGET_REGISTRY = {
'analytics-income': { label: 'Ingresos del Mes', icon: 'fas fa-dollar-sign', defaultSpan: 4 },
'analytics-occupancy': { label: 'Ocupación Global', icon: 'fas fa-building', defaultSpan: 2 },
'analytics-pending': { label: 'Pagos Pendientes', icon: 'fas fa-exclamation', defaultSpan: 2 },
'analytics-top-props': { label: 'Top Propiedades', icon: 'fas fa-star', defaultSpan: 2 },
'analytics-trend': { label: 'Crecimiento Anual', icon: 'fas fa-chart-line', defaultSpan: 4 },
'analytics-maintenance': { label: 'Tickets Abiertos', icon: 'fas fa-wrench', defaultSpan: 2 },
};
const ANALYTICS_DEFAULT_LAYOUT = [
{ id: 'analytics-income', span: 4 },
{ id: 'analytics-occupancy', span: 2 },
{ id: 'analytics-pending', span: 2 },
{ id: 'analytics-top-props', span: 2 },
{ id: 'analytics-trend', span: 4 },
{ id: 'analytics-maintenance', span: 2 },
];
const ANALYTICS_LAYOUT_STORAGE_KEY = 'esperiency_analytics_layout';
function loadAnalyticsLayout() {
try {
const saved = localStorage.getItem(ANALYTICS_LAYOUT_STORAGE_KEY);
if (saved) {
const parsed = JSON.parse(saved);
if (Array.isArray(parsed) && parsed.length > 0 && parsed.every(item => item.id && ANALYTICS_WIDGET_REGISTRY[item.id])) {
return parsed;
}
}
} catch (e) { console.error('Error loading analytics layout:', e); }
return ANALYTICS_DEFAULT_LAYOUT.map(item => ({ ...item }));
}
function saveAnalyticsLayout(layout) {
try { localStorage.setItem(ANALYTICS_LAYOUT_STORAGE_KEY, JSON.stringify(layout)); }
catch (e) { console.error('Error saving analytics layout:', e); }
}
function renderAnalyticsWidget(widgetId, props) {
switch (widgetId) {
case 'analytics-income': return
renderAnalyticsWidget(id, { setCurrentPage })}
emptyMessage="Clic o arrastra un widget analítico aquí"
/>
);
}
// ============================================
// ANALYTICS SPECIFIC WIDGETS
// ============================================
function AnalyticsIncomeWidget() {
const { tenants, loading } = React.useContext(AnalyticsContext);
if (loading) return
;
const totalIncome = tenants.reduce((acc, t) => {
if (t.paymentHistory && t.paymentHistory.length > 0) {
return acc + (t.paymentHistory[t.paymentHistory.length - 1].amount || 0);
}
return acc;
}, 0) || 124500; // Mock fallback if no history
return (
Ingresos del Mes
${totalIncome.toLocaleString('es-MX')}.00
{[30, 45, 25, 60, 40, 75, 55, 90].map((h, i) => (
))}
);
}
function AnalyticsOccupancyWidget() {
const { apartments, loading } = React.useContext(AnalyticsContext);
if (loading) return
;
const total = apartments.length;
const occupied = apartments.filter(a => a.residents && a.residents.length > 0).length;
const rate = total > 0 ? Math.round((occupied / total) * 100) : 0;
const radius = 16;
const circ = 2 * Math.PI * radius;
const offset = circ - (rate / 100) * circ;
return (
);
}
function AnalyticsPendingWidget() {
const { tenants, loading } = React.useContext(AnalyticsContext);
if (loading) return
;
const pendingCount = tenants.filter(t => t.pendingAmount > 0).length;
return (
{pendingCount}
Pagos Pendientes
);
}
function AnalyticsTopPropsWidget() {
const { apartments, loading } = React.useContext(AnalyticsContext);
if (loading) return
;
const topApts = apartments.slice(0, 4);
return (
Top Propiedades
{topApts.length === 0 ? (
No hay propiedades
) : topApts.map((apt, i) => (
{i + 1}
{apt.number || `Unidad ${i+1}`}
{apt.residents?.length ? 'Ocupado' : 'Vacante'}
))}
);
}
function AnalyticsTrendWidget() {
const { loading } = React.useContext(AnalyticsContext);
if (loading) return
;
return (
{[20, 30, 45, 60, 50, 70, 85].map((h, i) => (
))}
);
}
function AnalyticsMaintenanceWidget() {
const { loading } = React.useContext(AnalyticsContext);
if (loading) return
;
return (
);
}
// ============================================
function OccupancyWidget() {
const [occupied, setOccupied] = React.useState(0);
const [total, setTotal] = React.useState(0);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
const fetchOccupancy = async () => {
try {
const token = getJWTFromStorage();
const response = await cachedFetch('http://localhost:3000/api/apartments', {
headers: { 'Authorization': `Bearer ${token}` }
}, { cacheTime: 5 * 60 * 1000 });
if (response.ok) {
const result = await response.json();
const apts = result.data || [];
setTotal(apts.length);
setOccupied(apts.filter(a => a.residents && a.residents.length > 0).length);
}
} catch (e) { console.error('Occupancy error:', e); }
setLoading(false);
};
fetchOccupancy();
}, []);
const rate = total > 0 ? Math.round((occupied / total) * 100) : 0;
const vacant = total - occupied;
const radius = 54;
const circ = 2 * Math.PI * radius;
const offset = circ - (rate / 100) * circ;
const rateColor = rate >= 80 ? '#22c55e' : rate >= 50 ? '#f59e0b' : '#ef4444';
return (
{loading ? (
) : total === 0 ? (
Agrega departamentos para ver la ocupación
) : (
)}
);
}
function ContractStatusWidget() {
const [contracts, setContracts] = React.useState({ active: 0, expiringSoon: 0, expired: 0 });
const [expiringTenants, setExpiringTenants] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
const fetchContracts = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) { setLoading(false); return; }
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }
}, { cacheTime: 5 * 60 * 1000 });
if (response.ok) {
const result = await response.json();
const tenants = (result.data || []).filter(t => t.status !== 'archived');
const today = new Date();
const thirtyDays = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
let active = 0, expiringSoon = 0, expired = 0;
const expiring = [];
tenants.forEach(t => {
const end = t.endDate || t.contractEnd;
if (!end) { active++; return; }
const endDate = new Date(end);
if (endDate < today) expired++;
else if (endDate <= thirtyDays) { expiringSoon++; expiring.push({ name: t.name, days: Math.ceil((endDate - today) / 86400000) }); }
else active++;
});
setContracts({ active, expiringSoon, expired });
setExpiringTenants(expiring.sort((a, b) => a.days - b.days).slice(0, 4));
}
} catch (e) { console.error('Contract status error:', e); }
setLoading(false);
};
fetchContracts();
}, []);
const totalContracts = contracts.active + contracts.expiringSoon + contracts.expired;
return (
{contracts.expiringSoon > 0 && (
{contracts.expiringSoon} por vencer
)}
{loading ? (
) : (
<>
{contracts.active}
Activos
{contracts.expiringSoon}
Por vencer
{contracts.expired}
Vencidos
{totalContracts > 0 && (
{contracts.active > 0 &&
}
{contracts.expiringSoon > 0 &&
}
{contracts.expired > 0 &&
}
)}
{expiringTenants.length > 0 && (
Próximos a vencer
{expiringTenants.map((t, i) => (
{t.name}
{t.days}d
))}
)}
)}
);
}
function QuickNotesWidget() {
const NOTES_KEY = 'esperiency_quick_notes';
const [notes, setNotes] = React.useState(() => {
try { return JSON.parse(localStorage.getItem(NOTES_KEY)) || []; } catch { return []; }
});
const [newNote, setNewNote] = React.useState('');
const [isAdding, setIsAdding] = React.useState(false);
const saveNotes = (updated) => {
setNotes(updated);
localStorage.setItem(NOTES_KEY, JSON.stringify(updated));
};
const addNote = () => {
if (!newNote.trim()) return;
saveNotes([{ id: Date.now(), text: newNote.trim(), done: false, createdAt: new Date().toISOString() }, ...notes]);
setNewNote('');
setIsAdding(false);
};
const toggleDone = (id) => { saveNotes(notes.map(n => n.id === id ? { ...n, done: !n.done } : n)); };
const removeNote = (id) => { saveNotes(notes.filter(n => n.id !== id)); };
return (
setIsAdding(!isAdding)} className="w-8 h-8 rounded-lg bg-[#252628] hover:bg-[#35383d] flex items-center justify-center transition-colors group">
{isAdding && (
)}
{notes.length === 0 ? (
Agrega notas rápidas
Se guardan localmente en tu navegador
) : (
notes.map(note => (
toggleDone(note.id)} className={`w-5 h-5 rounded-md flex-shrink-0 mt-0.5 flex items-center justify-center border transition-all ${note.done ? 'bg-green-500/20 border-green-500/40' : 'border-gray-600 hover:border-[#fae0d1]/40'}`}>
{note.done &&
{note.text}
removeNote(note.id)} className="text-gray-600 hover:text-red-400 opacity-0 group-hover/note:opacity-100 transition-all">
))
)}
);
}
function CalendarWidget() {
const [currentDate, setCurrentDate] = React.useState(new Date());
const today = new Date();
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
const dayNames = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
const prevMonth = () => setCurrentDate(new Date(year, month - 1, 1));
const nextMonth = () => setCurrentDate(new Date(year, month + 1, 1));
const goToday = () => setCurrentDate(new Date());
const isToday = (day) => day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
const isWeekend = (dayOfWeek) => dayOfWeek === 0 || dayOfWeek === 6;
const cells = [];
for (let i = 0; i < firstDay; i++) cells.push(null);
for (let d = 1; d <= daysInMonth; d++) cells.push(d);
return (
{monthNames[month]} {year}
{dayNames.map(d => (
{d}
))}
{cells.map((day, idx) => {
if (day === null) return
;
const dayOfWeek = (firstDay + day - 1) % 7;
return (
{day}
);
})}
);
}
function NotificationsWidget() {
const [notifications, setNotifications] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
const generateNotifications = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) { setLoading(false); return; }
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }
}, { cacheTime: 5 * 60 * 1000 });
if (response.ok) {
const result = await response.json();
const tenants = (result.data || []).filter(t => t.status !== 'archived');
const notifs = [];
const today = new Date();
tenants.filter(t => t.paymentStatus === 'overdue').slice(0, 3).forEach(t => {
notifs.push({ icon: 'fas fa-exclamation-circle', color: 'text-red-400', bg: 'bg-red-500/10', title: `Pago atrasado: ${t.name}`, sub: t.apartment || 'Sin departamento', time: 'Urgente' });
});
tenants.filter(t => {
const end = t.endDate || t.contractEnd;
if (!end) return false;
const d = new Date(end);
return d >= today && d <= new Date(today.getTime() + 15 * 86400000);
}).slice(0, 2).forEach(t => {
const days = Math.ceil((new Date(t.endDate || t.contractEnd) - today) / 86400000);
notifs.push({ icon: 'fas fa-file-contract', color: 'text-yellow-400', bg: 'bg-yellow-500/10', title: `Contrato vence en ${days}d`, sub: t.name, time: `${days} días` });
});
if (notifs.length === 0) {
notifs.push({ icon: 'fas fa-check-circle', color: 'text-green-400', bg: 'bg-green-500/10', title: 'Todo en orden', sub: 'No hay alertas pendientes', time: 'Ahora' });
}
setNotifications(notifs);
}
} catch (e) { console.error('Notifications error:', e); }
setLoading(false);
};
generateNotifications();
}, []);
return (
{notifications.length > 0 && notifications[0].title !== 'Todo en orden' && (
{notifications.length}
)}
{loading ? (
) : (
{notifications.map((n, i) => (
))}
)}
);
}
function PropertyValueWidget() {
const [totalValue, setTotalValue] = React.useState(0);
const [avgRent, setAvgRent] = React.useState(0);
const [aptCount, setAptCount] = React.useState(0);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
const fetchPropertyValue = async () => {
try {
const organizationId = window.currentOrganizationId || localStorage.getItem('organizationId');
if (!organizationId) { setLoading(false); return; }
const token = getJWTFromStorage();
const response = await cachedFetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }
}, { cacheTime: 5 * 60 * 1000 });
if (response.ok) {
const result = await response.json();
const tenants = (result.data || []).filter(t => t.status !== 'archived');
const rents = tenants.map(t => parseFloat(t.rentAmount) || 0).filter(r => r > 0);
const sum = rents.reduce((a, b) => a + b, 0);
setTotalValue(sum * 12);
setAvgRent(rents.length > 0 ? Math.round(sum / rents.length) : 0);
setAptCount(rents.length);
}
} catch (e) { console.error('Property value error:', e); }
setLoading(false);
};
fetchPropertyValue();
}, []);
return (
{loading ? (
) : (
<>
Ingreso anual proyectado
${totalValue.toLocaleString('es-MX')}
Renta Promedio
${avgRent.toLocaleString('es-MX')}
por unidad/mes
Unidades Activas
{aptCount}
con renta asignada
)}
);
}
// ============================================
// TIPS WIDGET (extraído para registry)
// ============================================
function TipsWidget() {
return (
Automatiza tus recordatorios
Configura notificaciones automáticas para pagos próximos a vencer
Revisa tus analíticas
Mantén un seguimiento constante de tus métricas de cobranza
Actualiza contratos
Verifica que todos los contratos estén al día antes de su vencimiento
);
}
// ============================================
// WIDGET REGISTRY & LAYOUT SYSTEM
// ============================================
const WIDGET_REGISTRY = {
'welcome': { label: 'Bienvenida', icon: 'fas fa-sun', defaultSpan: 6, section: 'general' },
'quick-stats': { label: 'Estadísticas Rápidas', icon: 'fas fa-chart-bar', defaultSpan: 6, section: 'general' },
'quick-actions': { label: 'Acciones Rápidas', icon: 'fas fa-bolt', defaultSpan: 2, section: 'general' },
'recent-activity': { label: 'Actividad Reciente', icon: 'fas fa-history', defaultSpan: 2, section: 'general' },
'tips': { label: 'Tips del Día', icon: 'fas fa-lightbulb', defaultSpan: 3, section: 'general' },
'calendar': { label: 'Calendario', icon: 'fas fa-calendar-day', defaultSpan: 2, section: 'general' },
'notifications': { label: 'Alertas', icon: 'fas fa-bell', defaultSpan: 2, section: 'general' },
'payment-progress': { label: 'Progreso de Pagos', icon: 'fas fa-chart-pie', defaultSpan: 2, section: 'finanzas' },
'monthly-overview': { label: 'Resumen Mensual', icon: 'fas fa-calendar', defaultSpan: 4, section: 'finanzas' },
'upcoming-payments': { label: 'Vencimientos', icon: 'fas fa-calendar-alt', defaultSpan: 3, section: 'finanzas' },
'payment-summary': { label: 'Resumen de Pagos', icon: 'fas fa-file-invoice-dollar', defaultSpan: 6, section: 'finanzas' },
'property-value': { label: 'Valor del Portafolio', icon: 'fas fa-coins', defaultSpan: 6, section: 'finanzas' },
'occupancy': { label: 'Tasa de Ocupación', icon: 'fas fa-building', defaultSpan: 3, section: 'gestion' },
'contract-status': { label: 'Estado de Contratos', icon: 'fas fa-file-contract', defaultSpan: 3, section: 'gestion' },
'system-status': { label: 'Estado del Sistema', icon: 'fas fa-server', defaultSpan: 2, section: 'herramientas' },
'quick-notes': { label: 'Notas Rápidas', icon: 'fas fa-sticky-note', defaultSpan: 2, section: 'herramientas' },
};
const WIDGET_SECTIONS = {
general: { label: 'General', icon: 'fas fa-th-large', color: 'text-blue-400' },
finanzas: { label: 'Finanzas', icon: 'fas fa-dollar-sign', color: 'text-green-400' },
gestion: { label: 'Gestión', icon: 'fas fa-tasks', color: 'text-purple-400' },
herramientas: { label: 'Herramientas', icon: 'fas fa-tools', color: 'text-orange-400' },
};
const DEFAULT_LAYOUT = [
{ id: 'welcome', span: 6 },
{ id: 'quick-stats', span: 6 },
{ id: 'quick-actions', span: 2 },
{ id: 'recent-activity', span: 2 },
{ id: 'payment-progress', span: 2 },
{ id: 'monthly-overview', span: 4 },
{ id: 'system-status', span: 2 },
{ id: 'upcoming-payments', span: 3 },
{ id: 'tips', span: 3 },
{ id: 'payment-summary', span: 6 },
];
const LAYOUT_STORAGE_KEY = 'esperiency_dashboard_layout';
function loadDashboardLayout() {
try {
const saved = localStorage.getItem(LAYOUT_STORAGE_KEY);
if (saved) {
const parsed = JSON.parse(saved);
if (Array.isArray(parsed) && parsed.length > 0 && parsed.every(item => item.id && WIDGET_REGISTRY[item.id])) {
return parsed;
}
}
} catch (e) { console.error('Error loading dashboard layout:', e); }
return DEFAULT_LAYOUT.map(item => ({ ...item }));
}
function saveDashboardLayout(layout) {
try { localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layout)); }
catch (e) { console.error('Error saving dashboard layout:', e); }
}
function renderWidgetContent(widgetId, setCurrentPage) {
switch (widgetId) {
case 'welcome': return React.createElement(WelcomeWidget);
case 'quick-stats': return React.createElement(QuickStatsWidget, { setCurrentPage });
case 'quick-actions': return React.createElement(QuickActionsWidget, { setCurrentPage });
case 'recent-activity': return React.createElement(RecentActivityWidget);
case 'payment-progress': return React.createElement(PaymentProgressWidget);
case 'monthly-overview': return React.createElement(MonthlyOverviewWidget);
case 'system-status': return React.createElement(SystemStatusWidget);
case 'upcoming-payments': return React.createElement(UpcomingPaymentsWidget);
case 'tips': return React.createElement(TipsWidget);
case 'payment-summary': return React.createElement(PaymentSummaryWidget);
case 'occupancy': return React.createElement(OccupancyWidget);
case 'contract-status': return React.createElement(ContractStatusWidget);
case 'quick-notes': return React.createElement(QuickNotesWidget);
case 'calendar': return React.createElement(CalendarWidget);
case 'notifications': return React.createElement(NotificationsWidget);
case 'property-value': return React.createElement(PropertyValueWidget);
default: return null;
}
}
const SPAN_CLASSES = {
1: 'col-span-6 lg:col-span-1',
2: 'col-span-6 lg:col-span-2',
3: 'col-span-6 lg:col-span-3',
4: 'col-span-6 lg:col-span-4',
5: 'col-span-6 lg:col-span-5',
6: 'col-span-6',
};
const SPAN_LABELS = { 1: '1/6', 2: '2/6', 3: '3/6', 4: '4/6', 5: '5/6', 6: '6/6' };
// ============================================
// DASHBOARD WIDGETS - CUSTOMIZABLE LAYOUT
// ============================================
function DraggableWidgetGrid({ setCurrentPage, layout, setLayout, defaultLayout, widgetRegistry, saveLayout, renderWidgetContentFn, emptyMessage = "Clic o arrastra un widget aquí" }) {
const containerRef = React.useRef(null);
const [isCustomizing, setIsCustomizing] = React.useState(false);
const [savedLayout, setSavedLayout] = React.useState(null);
const [draggedIdx, setDraggedIdx] = React.useState(null);
const [dragOverIdx, setDragOverIdx] = React.useState(null);
const [hasChanges, setHasChanges] = React.useState(false);
const [dockOpen, setDockOpen] = React.useState(false);
const [emptySlotPicker, setEmptySlotPicker] = React.useState(null); // { insertAtIdx, slotSpan } — widget picker for empty slot click
// Expose global function to enter customize mode
React.useEffect(() => {
window.enterCustomizeMode = () => {
setSavedLayout(layout.map(item => ({ ...item })));
setIsCustomizing(true);
setHasChanges(false);
setDockOpen(false);
};
return () => { delete window.enterCustomizeMode; };
}, [layout]);
// GSAP entrance animation (only on first render, not during customization)
const hasAnimated = React.useRef(false);
const ensureWidgetsVisible = React.useCallback(() => {
if (!containerRef.current) return;
containerRef.current.querySelectorAll('.gsap-widget').forEach((el) => {
el.style.opacity = '1';
el.style.transform = 'none';
});
}, []);
React.useEffect(() => {
if (!containerRef.current || isCustomizing || hasAnimated.current) return;
hasAnimated.current = true;
const widgets = containerRef.current.querySelectorAll('.gsap-widget');
if (!widgets.length) return;
if (typeof gsap === 'undefined') {
ensureWidgetsVisible();
return;
}
gsap.set(widgets, { opacity: 0, y: 40, scale: 0.95 });
gsap.to(widgets, { opacity: 1, y: 0, scale: 1, duration: 0.7, stagger: 0.1, ease: 'power3.out', clearProps: 'all' });
}, [isCustomizing, ensureWidgetsVisible]);
React.useEffect(() => {
if (!containerRef.current) return;
const t = setTimeout(ensureWidgetsVisible, 600);
return () => clearTimeout(t);
}, [layout, isCustomizing, ensureWidgetsVisible]);
// GSAP animation when entering customize mode
const prevCustomizing = React.useRef(false);
React.useEffect(() => {
if (typeof gsap === 'undefined' || !containerRef.current) return;
// Entering customize mode
if (isCustomizing && !prevCustomizing.current) {
const topBar = containerRef.current.parentElement?.querySelector('.cust-topbar');
if (topBar) {
gsap.fromTo(topBar, { opacity: 0, y: -8 }, { opacity: 1, y: 0, duration: 0.3, ease: 'power2.out' });
}
const widgets = containerRef.current.querySelectorAll('.gsap-widget');
gsap.fromTo(widgets, { opacity: 0.7 }, {
opacity: 1, duration: 0.25, stagger: 0.02, ease: 'power2.out', clearProps: 'opacity'
});
const emptySlots = containerRef.current.querySelectorAll('.cust-empty-slot');
gsap.fromTo(emptySlots, { opacity: 0 }, {
opacity: 1, duration: 0.3, stagger: 0.03, ease: 'power2.out', delay: 0.1
});
const dock = document.querySelector('.cust-dock');
if (dock) {
gsap.fromTo(dock, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.3, ease: 'power2.out', delay: 0.1 });
}
// Auto-expand dock after entrance animation
setTimeout(() => setDockOpen(true), 400);
}
if (!isCustomizing && prevCustomizing.current) {
const widgets = containerRef.current.querySelectorAll('.gsap-widget');
gsap.to(widgets, { opacity: 1, duration: 0.2, ease: 'power2.out', clearProps: 'all' });
}
prevCustomizing.current = isCustomizing;
}, [isCustomizing]);
// Available widgets not currently in layout
const availableWidgets = Object.keys(widgetRegistry).filter(id => !layout.some(item => item.id === id));
// Track what's being dragged from dock
const dockDragId = React.useRef(null);
// ===== Compute grid rows and empty slots =====
// Walks through layout items, tracks column usage per row,
// and emits empty-slot entries wherever there's leftover space.
const computeRenderItems = () => {
const items = [];
let col = 0; // current column position in a 6-col row
layout.forEach((item, idx) => {
const span = Math.min(item.span, 6);
if (col + span > 6) {
// Widget overflows — fill remaining space with empty slot
const gap = 6 - col;
if (gap > 0) {
items.push({ type: 'empty', span: gap, insertAtIdx: idx, rowCol: col });
}
col = 0;
}
items.push({ type: 'widget', id: item.id, span: span, layoutIdx: idx });
col += span;
if (col >= 6) col = 0;
});
// Trailing empty space
if (col > 0 && col < 6) {
items.push({ type: 'empty', span: 6 - col, insertAtIdx: layout.length, rowCol: col });
}
return items;
};
const renderItems = computeRenderItems();
// Compute available columns at a given layout index (for auto-fit)
const getAvailableSpanAt = (insertIdx) => {
// Simulate layout up to insertIdx to know current row position
let col = 0;
for (let i = 0; i < layout.length && i < insertIdx; i++) {
const s = Math.min(layout[i].span, 6);
col += s;
if (col >= 6) col = 0;
}
return col === 0 ? 6 : 6 - col;
};
// Drag handlers (widget reorder)
const handleDragStart = (e, idx) => {
dockDragId.current = null;
setDraggedIdx(idx);
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', idx.toString());
requestAnimationFrame(() => { if (e.target) e.target.style.opacity = '0.5'; });
};
const handleDragEnd = (e) => {
e.target.style.opacity = '1';
setDraggedIdx(null);
setDragOverIdx(null);
dockDragId.current = null;
};
const handleDragOver = (e, idx) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
if (draggedIdx !== null && idx !== draggedIdx) setDragOverIdx(idx);
if (dockDragId.current) setDragOverIdx(idx);
};
const handleDragLeave = () => { setDragOverIdx(null); };
// Unified drop handler — works for widget-on-widget, widget-on-empty, dock-on-widget, dock-on-empty
const handleDrop = (e, dropIdx, isEmptySlot, slotSpan) => {
e.preventDefault();
e.stopPropagation();
const animateDropSuccess = () => {
if (typeof gsap === 'undefined' || !containerRef.current) return;
requestAnimationFrame(() => {
const allWidgets = containerRef.current.querySelectorAll('.gsap-widget');
const target = allWidgets[dropIdx] || allWidgets[allWidgets.length - 1];
if (target) {
gsap.fromTo(target, { opacity: 0.7 }, { opacity: 1, duration: 0.25, ease: 'power2.out', clearProps: 'opacity' });
}
});
};
// --- DOCK WIDGET (new widget from bottom dock) ---
if (dockDragId.current) {
const widgetId = dockDragId.current;
dockDragId.current = null;
if (!widgetRegistry[widgetId]) return;
const reg = widgetRegistry[widgetId];
let span = reg.defaultSpan;
if (isEmptySlot && slotSpan) {
span = Math.min(span, slotSpan); // auto-fit to empty slot
} else {
// Dropping on a widget — auto-fit to available space at that position
const avail = getAvailableSpanAt(dropIdx);
if (avail < span && avail > 0) span = avail;
}
const newLayout = [...layout];
newLayout.splice(dropIdx, 0, { id: widgetId, span });
setLayout(newLayout);
setHasChanges(true);
setDragOverIdx(null);
animateDropSuccess();
return;
}
// --- REORDER (existing widget dragged) ---
if (draggedIdx === null || draggedIdx === dropIdx) return;
const newLayout = [...layout];
const [moved] = newLayout.splice(draggedIdx, 1);
if (isEmptySlot && slotSpan) {
// Auto-fit: shrink widget to slot if it's larger
moved.span = Math.min(moved.span, slotSpan);
} else {
// Auto-fit to remaining columns at drop position
const adjustedIdx = draggedIdx < dropIdx ? dropIdx - 1 : dropIdx;
// Simulate column usage up to adjustedIdx in newLayout (without the moved item)
let col = 0;
for (let i = 0; i < adjustedIdx && i < newLayout.length; i++) {
col += Math.min(newLayout[i].span, 6);
if (col >= 6) col = col % 6;
}
const avail = col === 0 ? 6 : 6 - col;
if (moved.span > avail) moved.span = avail;
}
// Adjust insertIdx since we removed before it
const adjustedIdx = draggedIdx < dropIdx ? dropIdx - 1 : dropIdx;
newLayout.splice(adjustedIdx, 0, moved);
setLayout(newLayout);
setHasChanges(true);
setDraggedIdx(null);
setDragOverIdx(null);
animateDropSuccess();
};
const removeWidget = (idx) => {
if (typeof gsap !== 'undefined' && containerRef.current) {
const widgets = containerRef.current.querySelectorAll('.gsap-widget');
const target = widgets[idx];
if (target) {
gsap.to(target, {
opacity: 0, duration: 0.2, ease: 'power2.in',
onComplete: () => {
setLayout(prev => prev.filter((_, i) => i !== idx));
setHasChanges(true);
}
});
return;
}
}
setLayout(layout.filter((_, i) => i !== idx));
setHasChanges(true);
};
const resizeWidget = (idx, newSpan) => {
const clamped = Math.max(1, Math.min(6, newSpan));
setLayout(layout.map((item, i) => i === idx ? { ...item, span: clamped } : item));
setHasChanges(true);
};
const addWidget = (widgetId) => {
const reg = widgetRegistry[widgetId];
if (!reg) return;
setLayout([...layout, { id: widgetId, span: reg.defaultSpan }]);
setHasChanges(true);
if (typeof gsap !== 'undefined' && containerRef.current) {
requestAnimationFrame(() => {
const widgets = containerRef.current.querySelectorAll('.gsap-widget');
const last = widgets[widgets.length - 1];
if (last) gsap.fromTo(last, { opacity: 0 }, { opacity: 1, duration: 0.3, ease: 'power2.out', clearProps: 'opacity' });
});
}
};
// Add widget at a specific position (for empty slot click picker)
const addWidgetAt = (widgetId, atIdx, fitSpan) => {
const reg = widgetRegistry[widgetId];
if (!reg) return;
const span = fitSpan ? Math.min(reg.defaultSpan, fitSpan) : reg.defaultSpan;
const newLayout = [...layout];
newLayout.splice(atIdx, 0, { id: widgetId, span });
setLayout(newLayout);
setHasChanges(true);
setEmptySlotPicker(null);
if (typeof gsap !== 'undefined' && containerRef.current) {
requestAnimationFrame(() => {
const widgets = containerRef.current.querySelectorAll('.gsap-widget');
const target = widgets[atIdx] || widgets[widgets.length - 1];
if (target) gsap.fromTo(target, { opacity: 0 }, { opacity: 1, duration: 0.3, ease: 'power2.out', clearProps: 'opacity' });
});
}
};
const handleSave = () => {
saveLayout(layout);
setSavedLayout(null);
setIsCustomizing(false);
setHasChanges(false);
};
const handleCancel = () => {
if (savedLayout) setLayout(savedLayout);
setSavedLayout(null);
setIsCustomizing(false);
setHasChanges(false);
};
const handleReset = () => {
setLayout(defaultLayout.map(item => ({ ...item })));
setHasChanges(true);
};
// GSAP: animate dock widgets when dock opens
React.useEffect(() => {
if (!dockOpen || typeof gsap === 'undefined') return;
requestAnimationFrame(() => {
const dockItems = document.querySelectorAll('.cust-dock-item');
if (dockItems.length) {
gsap.fromTo(dockItems, { opacity: 0 }, {
opacity: 1, duration: 0.2, stagger: 0.02, ease: 'power2.out', clearProps: 'opacity'
});
}
});
}, [dockOpen, availableWidgets.length]);
// Close empty slot picker when layout changes
React.useEffect(() => { setEmptySlotPicker(null); }, [layout]);
return (
{/* ===== Customize Mode Top Bar ===== */}
{isCustomizing && (
Modo Personalización
Arrastra para mover · Suelta en espacios vacíos · Redimensiona abajo · ✕ para quitar
{ e.currentTarget.style.color = 'var(--text-primary)'; e.currentTarget.style.background = 'var(--bg-hover)'; }}
onMouseOut={(e) => { e.currentTarget.style.color = 'var(--text-tertiary)'; e.currentTarget.style.background = 'transparent'; }}
>
{ e.currentTarget.style.color = 'var(--text-primary)'; e.currentTarget.style.background = 'var(--bg-hover)'; }}
onMouseOut={(e) => { e.currentTarget.style.color = 'var(--text-tertiary)'; e.currentTarget.style.background = 'transparent'; }}
>
Cancelar
{hasChanges && (
)}
)}
{/* ===== Widget Grid (6-column) ===== */}
{renderItems.map((ri, renderIdx) => {
// ===== Empty slot placeholder =====
if (ri.type === 'empty') {
const spanClass = SPAN_CLASSES[ri.span] || 'col-span-6';
if (!isCustomizing) return null; // Only show in customize mode
const isPickerOpen = emptySlotPicker && emptySlotPicker.insertAtIdx === ri.insertAtIdx;
const pickerWidgets = Object.keys(widgetRegistry).filter(id => !layout.some(item => item.id === id));
return (
{
if (isPickerOpen) { setEmptySlotPicker(null); }
else { setEmptySlotPicker({ insertAtIdx: ri.insertAtIdx, slotSpan: ri.span }); }
}}
onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; e.currentTarget.classList.add('border-[#fae0d1]/50', 'bg-[#fae0d1]/[0.04]', 'scale-[1.02]'); }}
onDragLeave={(e) => { e.currentTarget.classList.remove('border-[#fae0d1]/50', 'bg-[#fae0d1]/[0.04]', 'scale-[1.02]'); }}
onDrop={(e) => { e.currentTarget.classList.remove('border-[#fae0d1]/50', 'bg-[#fae0d1]/[0.04]', 'scale-[1.02]'); handleDrop(e, ri.insertAtIdx, true, ri.span); }}
>
{!isPickerOpen ? (
<>
Espacio libre · {ri.span} col
{emptyMessage}
) : (
e.stopPropagation()}>
Seleccionar widget
setEmptySlotPicker(null)} className="text-gray-500 hover:text-white text-xs transition-colors">
{pickerWidgets.length === 0 ? (
No hay widgets disponibles
) : (
{pickerWidgets.map(wId => {
const reg = widgetRegistry[wId];
return (
addWidgetAt(wId, ri.insertAtIdx, ri.span)}
className="flex items-center gap-2 px-2.5 py-2 rounded-lg bg-white/[0.03] hover:bg-[#fae0d1]/10 border border-transparent hover:border-[#fae0d1]/20 transition-all duration-200 text-left group/pick hover:scale-[1.02]"
>
{reg.label}
);
})}
)}
)}
);
}
// ===== Regular widget =====
const item = { id: ri.id, span: ri.span };
const idx = ri.layoutIdx;
const spanClass = SPAN_CLASSES[item.span] || 'col-span-6';
const isDragTarget = dragOverIdx === idx && draggedIdx !== idx;
const isDockDragTarget = dragOverIdx === idx && dockDragId.current;
return (
handleDragStart(e, idx) : undefined}
onDragEnd={isCustomizing ? handleDragEnd : undefined}
onDragOver={isCustomizing ? (e) => handleDragOver(e, idx) : undefined}
onDragLeave={isCustomizing ? handleDragLeave : undefined}
onDrop={isCustomizing ? (e) => handleDrop(e, idx, false) : undefined}
>
{/* Customize overlay controls */}
{isCustomizing && (
<>
{/* Top label */}
{widgetRegistry[item.id]?.label}
{/* Remove button */}
{ e.stopPropagation(); removeWidget(idx); }}
className="absolute -top-2.5 -right-2.5 z-20 w-7 h-7 rounded-full bg-red-500/90 hover:bg-red-500 text-white flex items-center justify-center opacity-0 group-hover/cust:opacity-100 transition-all duration-200 hover:scale-110 shadow-lg"
>
{/* Resize controls */}
{ e.stopPropagation(); resizeWidget(idx, item.span - 1); }}
disabled={item.span <= 1}
className={`px-2.5 py-1.5 text-xs transition-colors ${item.span <= 1 ? 'text-gray-700 cursor-not-allowed' : 'text-gray-400 hover:text-white hover:bg-white/[0.08]'}`}
>
{[1,2,3,4,5,6].map(s => (
{ e.stopPropagation(); resizeWidget(idx, s); }}
className={`w-5 h-5 rounded text-[9px] font-bold transition-all duration-150 ${item.span === s ? 'bg-[#fae0d1] text-[#1b1c20]' : 'text-gray-500 hover:text-white hover:bg-white/[0.08]'}`}
>{s}
))}
{ e.stopPropagation(); resizeWidget(idx, item.span + 1); }}
disabled={item.span >= 6}
className={`px-2.5 py-1.5 text-xs transition-colors ${item.span >= 6 ? 'text-gray-700 cursor-not-allowed' : 'text-gray-400 hover:text-white hover:bg-white/[0.08]'}`}
>
)}
{renderWidgetContentFn(item.id, setCurrentPage)}
);
})}
{/* ===== Sticky Bottom Dock: Available Widgets by Section ===== */}
{isCustomizing && (
setDockOpen(!dockOpen)}
className="w-full flex items-center justify-between px-6 py-3 hover:bg-white/[0.02] transition-colors"
>
Widgets Disponibles
{availableWidgets.length > 0 && (
{availableWidgets.length}
)}
{/* Themes section */}
{Object.keys(THEMES).map(id => (
{availableWidgets.length === 0 ? (
Todos los widgets están en el dashboard
) : (
<>
{Object.entries(WIDGET_SECTIONS).map(([sectionKey, section]) => {
const sectionWidgets = availableWidgets.filter(id => widgetRegistry[id]?.section === sectionKey);
if (sectionWidgets.length === 0) return null;
return (
{section.label}
{sectionWidgets.length}
{sectionWidgets.map(widgetId => {
const reg = widgetRegistry[widgetId];
return (
{
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', widgetId);
dockDragId.current = widgetId;
setDraggedIdx(null);
}}
onDragEnd={() => { dockDragId.current = null; }}
onClick={() => addWidget(widgetId)}
className="cust-dock-item flex items-center gap-2.5 p-2.5 rounded-xl bg-[#1b1c20] hover:bg-[#252628] border border-white/[0.04] hover:border-[#fae0d1]/30 transition-all duration-200 group/add hover:scale-[1.03] cursor-grab active:cursor-grabbing active:scale-95"
>
{reg.label}
);
})}
);
})}
)}
)}
{!isCollapsed ? (
<>
{rightSidebarItems.map(({ Icon }, idx) => (
{
setSelectedIcon(idx);
}}
className={`mx-2 transition-all duration-200 hover:bg-opacity-90 ${
selectedIcon === idx
? "size-12 grid place-items-center rounded-lg bg-[#fae0d1] text-[#1b1c20] shadow-lg"
: "p-3 text-[#666] hover:text-white"
}`}
key={idx}
>
))}
{selectedIcon === 0 ? "Tareas" : "Notificaciones"}
{currentItems.map((item, idx) => {
if (selectedIcon === 0) {
const { title, time, category } = item;
let borderClass = "";
let timeColorClass = "";
let categoryColorClass = "";
if (time === "Muy alta") {
borderClass = "border-2 border-red-600";
timeColorClass = "text-red-500 font-bold";
categoryColorClass = "text-red-300";
} else if (time === "Alta") {
borderClass = "border-2 border-orange-500";
timeColorClass = "text-orange-400 font-semibold";
categoryColorClass = "text-orange-300";
} else {
borderClass = "";
timeColorClass = "text-[#70718e]";
categoryColorClass = "text-[#5b5b5b]";
}
return (
{
setSelectedTask(item);
setIsModalOpen(true);
}}
>
{time}
{title}
{category}
);
} else {
const { title, time, category, icon } = item;
return (
);
}
})}
{totalPages > 1 && (
setCurrentPage(Math.max(0, currentPage - 1))}
disabled={currentPage === 0}
className="size-8 grid place-items-center rounded-md bg-[#35383d] text-white hover:bg-[#4a4d52] disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{Array.from({ length: totalPages }, (_, i) => (
setCurrentPage(i)}
className={`size-8 grid place-items-center rounded-md text-sm font-medium transition-all duration-200 ${
currentPage === i
? "bg-[#fae0d1] text-[#1b1c20]"
: "bg-[#35383d] text-white hover:bg-[#4a4d52]"
}`}
>
{i + 1}
))}
setCurrentPage(Math.min(totalPages - 1, currentPage + 1))}
disabled={currentPage === totalPages - 1}
className="size-8 grid place-items-center rounded-md bg-[#35383d] text-white hover:bg-[#4a4d52] disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
)}
) : (
{rightSidebarItems.map(({ Icon }, idx) => (
{
setSelectedIcon(idx);
setIsCollapsed(false);
}}
className={`transition-all duration-200 hover:bg-opacity-90 ${
selectedIcon === idx
? "size-10 grid place-items-center rounded-lg bg-[#fae0d1] text-[#1b1c20] shadow-lg"
: "size-10 grid place-items-center text-[#666] hover:text-white hover:bg-[#252628] rounded-lg"
}`}
key={idx}
>
))}
)}
{isModalOpen && selectedTask && (
setIsModalOpen(false)}
/>
{selectedTask.title}
{selectedTask.priority}
setIsModalOpen(false)}
className="text-[#666] hover:text-white transition-colors p-2"
>
Descripción
{selectedTask.description}
Creada por
{selectedTask.assignedTo}
Estado
{selectedTask.status}
Categoría
{selectedTask.category}
)}
);
}
function Graph() {
const drawn = React.useRef(false);
React.useEffect(() => {
if (!drawn.current) {
drawn.current = true;
drawGraph();
}
}, []);
return (
);
}
function drawPaymentGraph() {
const ctx = document.getElementById('payment-graph-container');
if (ctx && typeof Chart !== 'undefined') {
ctx.innerHTML = '';
const canvas = document.createElement('canvas');
canvas.style.width = '100%';
canvas.style.height = '300px';
ctx.appendChild(canvas);
if (paymentData.length === 0) {
new Chart(canvas, {
type: 'line',
data: {
labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
datasets: [
{
label: 'Inquilinos que Pagaron',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
borderColor: '#fae0d1',
backgroundColor: 'rgba(250, 224, 209, 0.1)',
tension: 0.4,
fill: true,
},
{
label: 'Total Apartamentos',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
borderColor: '#666',
backgroundColor: 'rgba(102, 102, 102, 0.05)',
borderDash: [5, 5],
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
labels: {
color: '#fff'
}
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: '#666'
}
},
y: {
grid: {
color: '#333'
},
ticks: {
color: '#666'
},
beginAtZero: true,
max: 10
}
}
}
});
return;
}
const currentMonthIndex = paymentData.findIndex(d => d.current);
const pointColors = paymentData.map((_, index) =>
index === currentMonthIndex ? '#ff6b6b' : '#fae0d1'
);
const pointSizes = paymentData.map((_, index) =>
index === currentMonthIndex ? 8 : 4
);
new Chart(canvas, {
type: 'line',
data: {
labels: paymentData.map(d => d.month),
datasets: [
{
label: 'Inquilinos que Pagaron',
data: paymentData.map(d => d.paid),
borderColor: '#fae0d1',
backgroundColor: 'rgba(250, 224, 209, 0.1)',
tension: 0.4,
fill: true,
pointBackgroundColor: pointColors,
pointBorderColor: pointColors,
pointRadius: pointSizes,
pointHoverRadius: pointSizes.map(size => size + 2),
},
{
label: 'Total Apartamentos',
data: paymentData.map(d => d.total),
borderColor: '#666',
backgroundColor: 'rgba(102, 102, 102, 0.05)',
borderDash: [5, 5],
pointBackgroundColor: '#666',
pointBorderColor: '#666',
pointRadius: 2,
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
labels: {
color: '#fff'
}
},
tooltip: {
callbacks: {
afterLabel: function(context) {
const dataIndex = context.dataIndex;
if (paymentData[dataIndex].current) {
return 'Mes Actual';
}
return '';
}
}
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: function(context) {
const index = context.index;
return paymentData[index] && paymentData[index].current ? '#ff6b6b' : '#666';
},
font: function(context) {
const index = context.index;
return {
weight: paymentData[index] && paymentData[index].current ? 'bold' : 'normal'
};
}
}
},
y: {
grid: {
color: '#333'
},
ticks: {
color: '#666'
},
beginAtZero: true,
max: 55
}
}
}
});
}
}
function drawIngresosGraph() {
const ctx = document.getElementById('ingresos-graph-container');
if (ctx && typeof Chart !== 'undefined') {
ctx.innerHTML = '';
const canvas = document.createElement('canvas');
canvas.style.width = '100%';
canvas.style.height = '300px';
ctx.appendChild(canvas);
if (ingresosData.length === 0) {
new Chart(canvas, {
type: 'bar',
data: {
labels: ['Sin datos'],
datasets: [{
label: 'Ingresos',
data: [0],
backgroundColor: 'rgba(250, 224, 209, 0.3)',
borderColor: '#fae0d1',
borderWidth: 2,
borderRadius: 4,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: '#666'
}
},
y: {
grid: {
color: '#333'
},
ticks: {
color: '#666',
callback: function(value) {
return '$' + value.toLocaleString('es-MX');
}
},
beginAtZero: true,
max: 4000
}
}
}
});
return;
}
new Chart(canvas, {
type: 'bar',
data: {
labels: ingresosData.map(d => d.apartment),
datasets: [{
label: 'Ingresos',
data: ingresosData.map(d => d.amount),
backgroundColor: [
'rgba(250, 224, 209, 0.8)',
'rgba(196, 135, 126, 0.8)',
'rgba(217, 193, 179, 0.8)',
'rgba(172, 154, 198, 0.8)',
'rgba(250, 224, 209, 0.6)',
'rgba(196, 135, 126, 0.6)',
'rgba(217, 193, 179, 0.6)',
'rgba(172, 154, 198, 0.6)',
],
borderColor: [
'#fae0d1',
'#c4877e',
'#d9c1b3',
'#ac9ac6',
'#fae0d1',
'#c4877e',
'#d9c1b3',
'#ac9ac6',
],
borderWidth: 2,
borderRadius: 4,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
return 'Ingresos: $' + context.parsed.y.toLocaleString('es-MX');
}
}
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: '#666'
}
},
y: {
grid: {
color: '#333'
},
ticks: {
color: '#666',
callback: function(value) {
return '$' + value.toLocaleString('es-MX');
}
},
beginAtZero: true
}
}
}
});
}
}
function drawGraph() {
const ctx = document.getElementById('graph-container');
if (ctx && typeof Chart !== 'undefined') {
ctx.innerHTML = '';
const canvas = document.createElement('canvas');
canvas.style.width = '100%';
canvas.style.height = '175px';
ctx.appendChild(canvas);
new Chart(canvas, {
type: 'line',
data: {
labels: ['6AM', '9AM', '12PM', '3PM', '6PM', '9PM'],
datasets: [{
label: 'Reportes',
data: [12, 19, 3, 5, 2, 3],
borderColor: '#fae0d1',
backgroundColor: 'rgba(250, 224, 209, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: '#666'
}
},
y: {
grid: {
color: '#333'
},
ticks: {
color: '#666'
}
}
}
}
});
}
}
function Status() {
return (
{statusItems.map(
({ title, count, percentage, color1, color2, Icon }, idx) => (
{count.toLocaleString('es-MX')}
+{percentage}%
)
)}
);
}
const App = () => {
const [sidebarExpanded, setSidebarExpanded] = React.useState(true);
const [sidebarLeftCollapsed, setSidebarLeftCollapsed] = React.useState(() => {
const saved = localStorage.getItem('esperiency_sidebar_left_collapsed');
return saved === 'true';
});
const [sidebarRightCollapsed, setSidebarRightCollapsed] = React.useState(() => {
const saved = localStorage.getItem('esperiency_sidebar_right_collapsed');
return saved === 'true';
});
const [currentPage, setCurrentPage] = React.useState('dashboard');
const [appLoading, setAppLoading] = React.useState(true);
const [pageTransition, setPageTransition] = React.useState(false);
React.useEffect(() => {
localStorage.setItem('esperiency_sidebar_left_collapsed', sidebarLeftCollapsed);
}, [sidebarLeftCollapsed]);
React.useEffect(() => {
localStorage.setItem('esperiency_sidebar_right_collapsed', sidebarRightCollapsed);
}, [sidebarRightCollapsed]);
const handlePageChange = (newPage) => {
if (newPage === currentPage) return;
setPageTransition(true);
setTimeout(() => {
setCurrentPage(newPage);
setPageTransition(false);
}, 600); // 600ms transition
};
React.useEffect(() => {
window.setCurrentPage = handlePageChange;
}, [currentPage]);
React.useEffect(() => {
const timer = setTimeout(() => {
setAppLoading(false);
}, 2000);
return () => clearTimeout(timer);
}, []);
return (
{appLoading ? (
) : (
{currentPage === 'dashboard' && (
)}
{currentPage === 'inquilinos' && TenantsPage &&
}
{currentPage === 'add-tenant' && AddTenantPage &&
}
{currentPage === 'analitica' && (
)}
{currentPage === 'departamentos' &&
}
{currentPage === 'add-apartment' && window.AddApartmentPage && (
setCurrentPage('departamentos')} />
)}
{currentPage === 'administrar' && window.AdminPage &&
)}
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(ThemeProvider, null, React.createElement(App)));