423 lines
22 KiB
JavaScript
423 lines
22 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { fetchNotificaciones, fetchAllNotifications, marcarNotificacionComoVista } from '../api/notificaciones';
|
|
|
|
// Función para obtener el icono apropiado según el tipo de notificación
|
|
const getNotificationIcon = (tipo) => {
|
|
const iconProps = "w-6 h-6";
|
|
|
|
switch (tipo) {
|
|
case 'success':
|
|
case 'exito':
|
|
return (
|
|
<div className="p-2 bg-green-100 rounded-full">
|
|
<svg className={`${iconProps} text-green-600`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
case 'error':
|
|
case 'danger':
|
|
return (
|
|
<div className="p-2 bg-red-100 rounded-full">
|
|
<svg className={`${iconProps} text-red-600`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
case 'warning':
|
|
case 'advertencia':
|
|
return (
|
|
<div className="p-2 bg-yellow-100 rounded-full">
|
|
<svg className={`${iconProps} text-yellow-600`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.5 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
case 'info':
|
|
case 'informacion':
|
|
return (
|
|
<div className="p-2 bg-blue-100 rounded-full">
|
|
<svg className={`${iconProps} text-blue-600`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
case 'documento':
|
|
case 'document':
|
|
return (
|
|
<div className="p-2 bg-purple-100 rounded-full">
|
|
<svg className={`${iconProps} text-purple-600`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
case 'proceso':
|
|
case 'process':
|
|
return (
|
|
<div className="p-2 bg-indigo-100 rounded-full">
|
|
<svg className={`${iconProps} text-indigo-600`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
default:
|
|
return (
|
|
<div className="p-2 bg-gray-100 rounded-full">
|
|
<svg className={`${iconProps} text-gray-600`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM4 4h5l-5 5v-5z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
// Función para formatear timestamps
|
|
const formatTimestamp = (timestamp) => {
|
|
if (!timestamp) return 'Fecha no disponible';
|
|
|
|
try {
|
|
const date = new Date(timestamp);
|
|
const now = new Date();
|
|
const diffInMinutes = Math.floor((now - date) / (1000 * 60));
|
|
const diffInHours = Math.floor(diffInMinutes / 60);
|
|
const diffInDays = Math.floor(diffInHours / 24);
|
|
|
|
if (diffInMinutes < 1) {
|
|
return 'Ahora mismo';
|
|
} else if (diffInMinutes < 60) {
|
|
return `Hace ${diffInMinutes} min`;
|
|
} else if (diffInHours < 24) {
|
|
return `Hace ${diffInHours} h`;
|
|
} else if (diffInDays < 7) {
|
|
return `Hace ${diffInDays} días`;
|
|
} else {
|
|
return date.toLocaleDateString('es-ES', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
return 'Fecha inválida';
|
|
}
|
|
};
|
|
|
|
export default function Notificaciones() {
|
|
const [notificaciones, setNotificaciones] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
const [page, setPage] = useState(1);
|
|
const pageSize = 15;
|
|
const [count, setCount] = useState(0);
|
|
const [filtroVisto, setFiltroVisto] = useState('todos');
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
let data;
|
|
if (filtroVisto === 'todos') {
|
|
data = await fetchAllNotifications({ page, pageSize });
|
|
} else {
|
|
const params = { page, pageSize };
|
|
if (filtroVisto === 'visto') params.visto = true;
|
|
else if (filtroVisto === 'novisto') params.visto = false;
|
|
data = await fetchNotificaciones(params);
|
|
}
|
|
setNotificaciones(data.results);
|
|
setCount(data.count);
|
|
} catch (e) {
|
|
setError('Error al cargar notificaciones');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
// eslint-disable-next-line
|
|
}, [page, filtroVisto]);
|
|
|
|
const handleActualizarTodas = async () => {
|
|
setLoading(true);
|
|
try {
|
|
await Promise.all(
|
|
notificaciones.filter(n => !n.visto).map(n => marcarNotificacionComoVista(n.id))
|
|
);
|
|
fetchData();
|
|
} catch (e) {
|
|
setError('Error al actualizar notificaciones');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleFiltroChange = (e) => {
|
|
setFiltroVisto(e.target.value);
|
|
setPage(1);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 p-4 lg:p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header moderno */}
|
|
<div className="bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-6 mb-6">
|
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="p-3 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl shadow-lg">
|
|
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM4 4h5l-5 5v-5z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Notificaciones</h1>
|
|
<p className="text-gray-600 mt-1">
|
|
{count > 0 ? `${count} notificaciones encontradas` : 'No hay notificaciones'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
{/* Filtro mejorado */}
|
|
<div className="relative">
|
|
<select
|
|
className="appearance-none bg-white border border-gray-300 rounded-xl px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 shadow-sm hover:shadow-md"
|
|
value={filtroVisto}
|
|
onChange={handleFiltroChange}
|
|
>
|
|
<option value="todos">📋 Todas las notificaciones</option>
|
|
<option value="visto">✅ Solo vistas</option>
|
|
<option value="novisto">🔴 Solo no vistas</option>
|
|
</select>
|
|
<div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
|
|
<svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Botón de acción mejorado */}
|
|
<button
|
|
onClick={handleActualizarTodas}
|
|
disabled={loading || notificaciones.filter(n => !n.visto).length === 0}
|
|
className="flex items-center space-x-2 bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 disabled:from-gray-400 disabled:to-gray-500 text-white px-6 py-3 rounded-xl font-medium transition-all duration-200 shadow-lg hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-60 transform hover:scale-105"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span>Procesando...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span>Marcar como leídas</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Contenido principal */}
|
|
{loading ? (
|
|
<div className="bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-12 text-center">
|
|
<div className="inline-flex items-center space-x-3 text-blue-600">
|
|
<svg className="animate-spin h-8 w-8" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span className="text-xl font-semibold">Cargando notificaciones...</span>
|
|
</div>
|
|
</div>
|
|
) : error ? (
|
|
<div className="bg-red-50/80 backdrop-blur-xl rounded-2xl shadow-xl border border-red-200/50 p-12 text-center">
|
|
<div className="inline-flex items-center space-x-3 text-red-600">
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className="text-xl font-semibold">{error}</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Vista Desktop - Tabla */}
|
|
<div className="hidden lg:block bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gradient-to-r from-blue-500 to-blue-700">
|
|
<tr>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">ID</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">Tipo</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">Mensaje</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">Fecha</th>
|
|
<th className="px-6 py-4 text-center text-xs font-bold text-white uppercase tracking-wider">Estado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white/50 divide-y divide-gray-100">
|
|
{notificaciones.map((n, idx) => (
|
|
<tr key={n.id} className={`transition-all duration-200 hover:bg-blue-50 hover:shadow-md ${!n.visto ? 'bg-blue-50/70 border-l-4 border-blue-500' : ''}`}>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
#{n.id}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center">
|
|
{getNotificationIcon(n.tipo?.tipo)}
|
|
<span className="ml-3 text-sm font-medium text-gray-900">
|
|
{n.tipo?.descripcion || n.tipo?.tipo || 'Notificación'}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-700 max-w-md truncate">
|
|
{n.mensaje}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{formatTimestamp(n.fecha_envio || n.created_at)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-center">
|
|
{n.visto ? (
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
<svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4" />
|
|
</svg>
|
|
Leída
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
|
<svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01" />
|
|
</svg>
|
|
Nueva
|
|
</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{/* Filas vacías para mantener altura consistente */}
|
|
{Array.from({ length: Math.max(0, pageSize - notificaciones.length) }).map((_, idx) => (
|
|
<tr key={`empty-${idx}`} className="h-16">
|
|
<td colSpan="5" className="px-6 py-4 text-center text-gray-300">-</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Vista Mobile - Cards */}
|
|
<div className="lg:hidden space-y-4">
|
|
{notificaciones.length === 0 ? (
|
|
<div className="bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-12 text-center">
|
|
<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM13 3l-4 9h6l-4 9" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-1">No hay notificaciones</h3>
|
|
<p className="text-gray-500">No se encontraron notificaciones con los filtros aplicados.</p>
|
|
</div>
|
|
) : (
|
|
notificaciones.map((n, idx) => (
|
|
<div
|
|
key={n.id}
|
|
className={`bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border transition-all duration-200 hover:shadow-2xl transform hover:scale-[1.02] ${
|
|
!n.visto ? 'border-blue-300 bg-blue-50/80' : 'border-gray-200/50'
|
|
}`}
|
|
style={{ animationDelay: `${idx * 100}ms` }}
|
|
>
|
|
<div className="p-6">
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex-shrink-0">
|
|
{getNotificationIcon(n.tipo?.tipo)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-sm font-semibold text-gray-900 truncate">
|
|
{n.tipo?.descripcion || n.tipo?.tipo || 'Notificación'}
|
|
</p>
|
|
{n.visto ? (
|
|
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 ml-2">
|
|
<svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4" />
|
|
</svg>
|
|
Leída
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 ml-2">
|
|
<svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01" />
|
|
</svg>
|
|
Nueva
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-700 mb-3 leading-relaxed">{n.mensaje}</p>
|
|
<div className="flex items-center justify-between text-xs text-gray-500">
|
|
<span className="flex items-center">
|
|
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
</svg>
|
|
ID: #{n.id}
|
|
</span>
|
|
<span className="flex items-center">
|
|
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{formatTimestamp(n.fecha_envio || n.created_at)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Paginación mejorada */}
|
|
{!loading && !error && count > 0 && (
|
|
<div className="bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-6 mt-6">
|
|
<div className="flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<div className="text-sm text-gray-700">
|
|
<span className="font-medium">Página {page}</span> de <span className="font-medium">{Math.ceil(count / pageSize) || 1}</span>
|
|
<span className="text-gray-500 ml-2">• {count} notificaciones totales</span>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<button
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
disabled={page === 1}
|
|
className="flex items-center space-x-2 px-4 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 text-sm font-medium"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
<span>Anterior</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setPage((p) => (p * pageSize < count ? p + 1 : p))}
|
|
disabled={page * pageSize >= count}
|
|
className="flex items-center space-x-2 px-4 py-2 rounded-xl bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white transition-all duration-200 text-sm font-medium"
|
|
>
|
|
<span>Siguiente</span>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
<span className="text-sm text-gray-500">15 por página</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|