Se modifico panel de notificaciones
This commit is contained in:
@@ -1,6 +1,110 @@
|
||||
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);
|
||||
@@ -57,101 +161,261 @@ export default function Notificaciones() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-5xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4 gap-2">
|
||||
<h1 className="text-2xl font-bold">Notificaciones</h1>
|
||||
<div className="flex gap-2 items-center">
|
||||
<select
|
||||
className="border rounded px-2 py-1"
|
||||
value={filtroVisto}
|
||||
onChange={handleFiltroChange}
|
||||
>
|
||||
<option value="todos">Todas</option>
|
||||
<option value="visto">Vistas</option>
|
||||
<option value="novisto">No vistas</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleActualizarTodas}
|
||||
className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded shadow"
|
||||
disabled={loading}
|
||||
>
|
||||
Actualizar todas como leídas
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="text-blue-500 py-8 text-center">Cargando...</div>
|
||||
) : error ? (
|
||||
<div className="text-red-500 py-8 text-center">{error}</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 rounded-lg overflow-hidden">
|
||||
<thead className="bg-gradient-to-r from-gray-50 sticky top-0 z-20">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-center text-xs font-bold text-blue-700 uppercase tracking-wider border-b border-gray-200">ID</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider border-b border-gray-200">Tipo</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider border-b border-gray-200">Mensaje</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider border-b border-gray-200">Fecha</th>
|
||||
<th className="px-6 py-3 text-center text-xs font-bold text-blue-700 uppercase tracking-wider border-b border-gray-200">Visto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-100" style={{ position: 'relative', minHeight: 'calc(8 * 56px)' }}>
|
||||
{Array.from({ length: pageSize }).map((_, idx) => {
|
||||
const n = notificaciones[idx];
|
||||
if (n) {
|
||||
return (
|
||||
<tr key={n.id} className={`transition-all duration-200 hover:bg-blue-100 hover:shadow-lg ${n.visto ? '' : 'bg-blue-50'}`}>
|
||||
<td className="px-6 py-4 text-center align-middle">{n.id}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap align-middle font-medium text-blue-900">{n.tipo?.descripcion || n.tipo?.tipo}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap align-middle text-gray-800">{n.mensaje}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap align-middle text-gray-700">{new Date(n.fecha_envio || n.created_at).toLocaleString()}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-center align-middle">
|
||||
{n.visto ? (
|
||||
<span className="text-green-600 font-semibold">Sí</span>
|
||||
) : (
|
||||
<span className="text-red-600 font-semibold">No</span>
|
||||
)}
|
||||
</td>
|
||||
{/* 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>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<tr key={"empty-" + idx}>
|
||||
<td className="px-6 py-4 text-center text-gray-300">-</td>
|
||||
<td className="px-6 py-4 text-gray-300">-</td>
|
||||
<td className="px-6 py-4 text-gray-300">-</td>
|
||||
<td className="px-6 py-4 text-gray-300">-</td>
|
||||
<td className="px-6 py-4 text-center text-gray-300">-</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
{/* Paginación */}
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<div>
|
||||
Página {page} de {Math.ceil(count / pageSize) || 1}
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 disabled:opacity-50"
|
||||
>
|
||||
Anterior
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPage((p) => (p * pageSize < count ? p + 1 : p))}
|
||||
disabled={page * pageSize >= count}
|
||||
className="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 disabled:opacity-50"
|
||||
>
|
||||
Siguiente
|
||||
</button>
|
||||
<span className="ml-2 text-sm text-gray-500">15 por página</span>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user