703 lines
31 KiB
TypeScript
703 lines
31 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
historicalConsultasApi,
|
|
HistoricalConsulta,
|
|
HistoricalConsultaFilters,
|
|
HistoricalConsultasStats
|
|
} from '../services/api';
|
|
import logger from '../utils/logger';
|
|
import jsPDF from 'jspdf';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const HistoricalConsultas: React.FC = () => {
|
|
const { t, i18n } = useTranslation();
|
|
const [consultas, setConsultas] = useState<HistoricalConsulta[]>([]);
|
|
const [stats, setStats] = useState<HistoricalConsultasStats | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isLoadingStats, setIsLoadingStats] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
const [isExportingAll, setIsExportingAll] = useState(false);
|
|
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
|
const toggleExpand = (id: string) => {
|
|
setExpandedIds(prev => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id); else next.add(id);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
// Filters
|
|
const [filters, setFilters] = useState<HistoricalConsultaFilters>({
|
|
page: 1,
|
|
limit: 20,
|
|
});
|
|
|
|
// Filter form state
|
|
const [consultaType, setConsultaType] = useState<'individual' | 'massive' | ''>('');
|
|
const [rutFilter, setRutFilter] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('');
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
|
|
const fetchConsultas = async (newFilters: HistoricalConsultaFilters = filters) => {
|
|
try {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const response = await historicalConsultasApi.getHistoricalConsultas(newFilters);
|
|
const filtered = Array.isArray(response.data)
|
|
? response.data.filter((c: any) => {
|
|
const md = c?.metadata || {};
|
|
const rd = c?.requestData || md?.requestData || {};
|
|
const pepFlag = md?.isPep === true || rd?.isPep === true;
|
|
const tag = md?.tag || md?.evaluationType;
|
|
const tagIsPep = typeof tag === 'string' && tag.toLowerCase() === 'pep';
|
|
return !(pepFlag || tagIsPep);
|
|
})
|
|
: [];
|
|
setConsultas(filtered);
|
|
setCurrentPage(response.pagination.page);
|
|
setTotalPages(response.pagination.totalPages);
|
|
setTotal(filtered.length);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Error al cargar las consultas históricas');
|
|
logger.error('Error fetching historical consultas:', err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchStats = async () => {
|
|
try {
|
|
setIsLoadingStats(true);
|
|
const statsData = await historicalConsultasApi.getHistoricalConsultasStats(
|
|
startDate || undefined,
|
|
endDate || undefined
|
|
);
|
|
setStats(statsData);
|
|
} catch (err) {
|
|
logger.error('Error fetching historical consultas stats:', err);
|
|
} finally {
|
|
setIsLoadingStats(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchConsultas();
|
|
fetchStats();
|
|
}, []);
|
|
|
|
const applyQuickTypeFilter = (type: 'individual' | 'massive' | '') => {
|
|
setConsultaType(type);
|
|
|
|
const newFilters: HistoricalConsultaFilters = {
|
|
page: 1,
|
|
limit: 20,
|
|
...(type && { consultaType: type as 'individual' | 'massive' }),
|
|
...(rutFilter && { rut: rutFilter }),
|
|
...(statusFilter && { responseStatus: parseInt(statusFilter) }),
|
|
...(startDate && { startDate }),
|
|
...(endDate && { endDate }),
|
|
};
|
|
|
|
setFilters(newFilters);
|
|
setCurrentPage(1);
|
|
fetchConsultas(newFilters);
|
|
fetchStats();
|
|
};
|
|
|
|
const handleApplyFilters = () => {
|
|
const newFilters: HistoricalConsultaFilters = {
|
|
page: 1,
|
|
limit: 20,
|
|
...(consultaType && { consultaType: consultaType as 'individual' | 'massive' }),
|
|
...(rutFilter && { rut: rutFilter }),
|
|
...(statusFilter && { responseStatus: parseInt(statusFilter) }),
|
|
...(startDate && { startDate }),
|
|
...(endDate && { endDate }),
|
|
};
|
|
|
|
setFilters(newFilters);
|
|
setCurrentPage(1);
|
|
fetchConsultas(newFilters);
|
|
fetchStats();
|
|
};
|
|
|
|
const handleClearFilters = () => {
|
|
setConsultaType('');
|
|
setRutFilter('');
|
|
setStatusFilter('');
|
|
setStartDate('');
|
|
setEndDate('');
|
|
|
|
const newFilters: HistoricalConsultaFilters = {
|
|
page: 1,
|
|
limit: 20,
|
|
};
|
|
|
|
setFilters(newFilters);
|
|
setCurrentPage(1);
|
|
fetchConsultas(newFilters);
|
|
fetchStats();
|
|
};
|
|
|
|
const handlePageChange = (page: number) => {
|
|
const newFilters = { ...filters, page };
|
|
setFilters(newFilters);
|
|
fetchConsultas(newFilters);
|
|
};
|
|
|
|
const formatDate = (dateString: string) => {
|
|
const locale = i18n.language === 'es' ? 'es-CL' : undefined;
|
|
return new Date(dateString).toLocaleString(locale);
|
|
};
|
|
|
|
const formatProcessingTime = (time: unknown) => {
|
|
const num = typeof time === 'number' ? time : typeof time === 'string' ? Number(time) : NaN;
|
|
if (!Number.isFinite(num)) return 'N/A';
|
|
return `${num.toFixed(0)}ms`;
|
|
};
|
|
|
|
const getStatusBadge = (status: number) => {
|
|
if (status >= 200 && status < 300) {
|
|
return <span className="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">{t('consultationHistory.status.success')}</span>;
|
|
} else if (status >= 400 && status < 500) {
|
|
return <span className="px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full">{t('consultationHistory.status.clientError')}</span>;
|
|
} else if (status >= 500) {
|
|
return <span className="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">{t('consultationHistory.status.serverError')}</span>;
|
|
}
|
|
return <span className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 rounded-full">{status}</span>;
|
|
};
|
|
|
|
const getConsultaTypeBadge = (type: string) => {
|
|
if (type === 'individual') {
|
|
return <span className="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full">{t('consultationHistory.type.individual')}</span>;
|
|
} else if (type === 'massive') {
|
|
return <span className="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">{t('consultationHistory.type.massive')}</span>;
|
|
}
|
|
return <span className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 rounded-full">{type}</span>;
|
|
};
|
|
|
|
const fetchAllConsultas = async (): Promise<HistoricalConsulta[]> => {
|
|
const allData: HistoricalConsulta[] = [];
|
|
let page = 1;
|
|
let totalPagesAll = 1;
|
|
|
|
do {
|
|
const response = await historicalConsultasApi.getHistoricalConsultas({
|
|
...filters,
|
|
page,
|
|
limit: 100,
|
|
});
|
|
|
|
const filtered = Array.isArray(response.data)
|
|
? response.data.filter((c: any) => {
|
|
const md = c?.metadata || {};
|
|
const rd = c?.requestData || md?.requestData || {};
|
|
const pepFlag = md?.isPep === true || rd?.isPep === true;
|
|
const tag = md?.tag || md?.evaluationType;
|
|
const tagIsPep = typeof tag === 'string' && tag.toLowerCase() === 'pep';
|
|
return !(pepFlag || tagIsPep);
|
|
})
|
|
: [];
|
|
|
|
allData.push(...filtered);
|
|
totalPagesAll = response.pagination.totalPages;
|
|
page++;
|
|
} while (page <= totalPagesAll);
|
|
|
|
return allData;
|
|
};
|
|
|
|
const buildPDF = (data: HistoricalConsulta[], totalCount: number): jsPDF => {
|
|
const doc = new jsPDF('landscape');
|
|
|
|
doc.setFontSize(20);
|
|
doc.text(t('consultationHistory.title'), 10, 20);
|
|
|
|
doc.setFontSize(12);
|
|
doc.text(`${t('consultationHistory.pdf.generatedAt')}: ${new Date().toLocaleString(i18n.language === 'es' ? 'es-CL' : undefined)}`, 10, 35);
|
|
doc.text(`${t('consultationHistory.pdf.total')}: ${totalCount}`, 10, 45);
|
|
|
|
let filterInfo = '';
|
|
if (consultaType) filterInfo += `${t('consultationHistory.filters.type')}: ${consultaType} `;
|
|
if (rutFilter) filterInfo += `${t('consultationHistory.filters.rut')}: ${rutFilter} `;
|
|
if (statusFilter) filterInfo += `${t('consultationHistory.filters.status')}: ${statusFilter} `;
|
|
if (startDate || endDate)
|
|
filterInfo += `${t('consultationHistory.filters.period')}: ${startDate || t('consultationHistory.filters.start')} - ${endDate || t('consultationHistory.filters.end')} `;
|
|
|
|
if (filterInfo) {
|
|
doc.setFontSize(10);
|
|
doc.text(`${t('consultationHistory.pdf.appliedFilters')}: ${filterInfo}`, 10, 55);
|
|
}
|
|
|
|
const COL = {
|
|
fecha: 10,
|
|
usuario: 48,
|
|
email: 90,
|
|
tipo: 148,
|
|
tag: 170,
|
|
ruts: 198,
|
|
estado: 228,
|
|
tiempo: 252,
|
|
creditos: 278,
|
|
};
|
|
|
|
const drawHeaders = (y: number) => {
|
|
doc.setFontSize(8);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text(t('consultationHistory.table.date'), COL.fecha, y);
|
|
doc.text(t('consultationHistory.table.user'), COL.usuario, y);
|
|
doc.text('Email', COL.email, y);
|
|
doc.text(t('consultationHistory.table.type'), COL.tipo, y);
|
|
doc.text(t('consultationHistory.table.tag'), COL.tag, y);
|
|
doc.text(t('consultationHistory.table.ruts'), COL.ruts, y);
|
|
doc.text(t('consultationHistory.table.status'), COL.estado, y);
|
|
doc.text(t('consultationHistory.table.time'), COL.tiempo, y);
|
|
doc.text(t('consultationHistory.table.credits'), COL.creditos, y);
|
|
doc.line(10, y + 3, 287, y + 3);
|
|
};
|
|
|
|
let yPosition = filterInfo ? 75 : 65;
|
|
drawHeaders(yPosition);
|
|
yPosition += 12;
|
|
|
|
doc.setFont('helvetica', 'normal');
|
|
doc.setFontSize(7);
|
|
|
|
data.forEach((consulta) => {
|
|
if (yPosition > 190) {
|
|
doc.addPage();
|
|
yPosition = 20;
|
|
drawHeaders(yPosition);
|
|
yPosition += 12;
|
|
doc.setFont('helvetica', 'normal');
|
|
doc.setFontSize(7);
|
|
}
|
|
|
|
const fecha = formatDate(consulta.createdAt).split(',')[0];
|
|
const usuario = (consulta.userId?.name || 'N/A').substring(0, 18);
|
|
const email = (consulta.userId?.email || 'N/A').substring(0, 28);
|
|
const tipo = consulta.consultaType === 'individual'
|
|
? t('consultationHistory.type.individual')
|
|
: t('consultationHistory.type.massive');
|
|
const ruts = consulta.consultaType === 'individual'
|
|
? (consulta.rut || 'N/A')
|
|
: (() => {
|
|
const arr = Array.isArray((consulta as any).ruts) ? (consulta as any).ruts as string[] : [];
|
|
const shown = arr.slice(0, 3).join(', ');
|
|
const extra = arr.length > 3 ? ` (+${arr.length - 3})` : '';
|
|
return shown ? `${shown}${extra}` : `0 ${t('consultationHistory.table.rutsShort')}`;
|
|
})();
|
|
const estado = consulta.responseStatus >= 200 && consulta.responseStatus < 300 ? 'Éxito' : 'Error';
|
|
const tiempoMsRaw = (consulta as { processingTime?: unknown }).processingTime;
|
|
const tiempoMs = typeof tiempoMsRaw === 'number' ? tiempoMsRaw : typeof tiempoMsRaw === 'string' ? Number(tiempoMsRaw) : NaN;
|
|
const tiempo = tiempoMs > 31_500_000 ? 'N/A' : formatProcessingTime(tiempoMs);
|
|
const creditosRaw = (consulta as { creditsUsed?: unknown }).creditsUsed;
|
|
const creditos = typeof creditosRaw === 'number' || typeof creditosRaw === 'string' ? String(creditosRaw) : '0';
|
|
const tag = consulta.metadata
|
|
? String(consulta.metadata.tag || consulta.metadata.evaluationType || '-')
|
|
: '-';
|
|
|
|
doc.text(fecha, COL.fecha, yPosition);
|
|
doc.text(usuario, COL.usuario, yPosition);
|
|
doc.text(email, COL.email, yPosition);
|
|
doc.text(tipo, COL.tipo, yPosition);
|
|
doc.text(tag.substring(0, 15), COL.tag, yPosition);
|
|
doc.text(ruts.substring(0, 12), COL.ruts, yPosition);
|
|
doc.text(estado, COL.estado, yPosition);
|
|
doc.text(tiempo, COL.tiempo, yPosition);
|
|
doc.text(creditos, COL.creditos, yPosition);
|
|
|
|
yPosition += 7;
|
|
});
|
|
|
|
if (stats) {
|
|
yPosition += 10;
|
|
doc.line(10, yPosition, 287, yPosition);
|
|
yPosition += 10;
|
|
|
|
doc.setFontSize(10);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text('Estadísticas del Período:', 10, yPosition);
|
|
|
|
yPosition += 10;
|
|
doc.setFont('helvetica', 'normal');
|
|
doc.setFontSize(9);
|
|
doc.text(`Total de consultas: ${stats.totalConsultas.toLocaleString()}`, 10, yPosition);
|
|
doc.text(`Créditos utilizados: ${stats.totalCreditsUsed.toLocaleString()}`, 110, yPosition);
|
|
yPosition += 8;
|
|
doc.text(`Tiempo promedio: ${formatProcessingTime(stats.averageProcessingTime)}`, 10, yPosition);
|
|
doc.text(`Consultas individuales: ${(stats.consultasByType.individual || 0).toLocaleString()}`, 110, yPosition);
|
|
}
|
|
|
|
return doc;
|
|
};
|
|
|
|
const exportToPDF = () => {
|
|
const doc = buildPDF(consultas, total);
|
|
doc.save(`historial-consultas-${new Date().toISOString().split('T')[0]}.pdf`);
|
|
};
|
|
|
|
const exportAllToPDF = async () => {
|
|
try {
|
|
setIsExportingAll(true);
|
|
const allConsultas = await fetchAllConsultas();
|
|
const doc = buildPDF(allConsultas, allConsultas.length);
|
|
doc.save(`historial-completo-${new Date().toISOString().split('T')[0]}.pdf`);
|
|
} catch (err) {
|
|
logger.error('Error exportando historial completo:', err);
|
|
} finally {
|
|
setIsExportingAll(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">{t('consultationHistory.title')}</h1>
|
|
<p className="text-gray-600">{t('consultationHistory.subtitle')}</p>
|
|
</div>
|
|
|
|
{/* Statistics Cards */}
|
|
{stats && !isLoadingStats && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div className="bg-white p-6 rounded-lg shadow-md">
|
|
<h3 className="text-sm font-medium text-gray-500 mb-2">{t('consultationHistory.cards.totalConsultas')}</h3>
|
|
<p className="text-3xl font-bold text-gray-900">{stats.totalConsultas.toLocaleString()}</p>
|
|
</div>
|
|
<div className="bg-white p-6 rounded-lg shadow-md">
|
|
<h3 className="text-sm font-medium text-gray-500 mb-2">{t('consultationHistory.cards.creditsUsed')}</h3>
|
|
<p className="text-3xl font-bold text-gray-900">{stats.totalCreditsUsed.toLocaleString()}</p>
|
|
</div>
|
|
<div className="bg-white p-6 rounded-lg shadow-md">
|
|
<h3 className="text-sm font-medium text-gray-500 mb-2">{t('consultationHistory.cards.averageTime')}</h3>
|
|
<p className="text-3xl font-bold text-gray-900">{formatProcessingTime(stats.averageProcessingTime)}</p>
|
|
</div>
|
|
<div className="bg-white p-6 rounded-lg shadow-md">
|
|
<h3 className="text-sm font-medium text-gray-500 mb-2">{t('consultationHistory.cards.individualConsultas')}</h3>
|
|
<p className="text-3xl font-bold text-gray-900">{(stats.consultasByType.individual || 0).toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filters */}
|
|
<div className="bg-white p-6 rounded-lg shadow-md mb-8">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">{t('consultationHistory.filters.title')}</h2>
|
|
<div className="inline-flex rounded-md border border-gray-300 overflow-hidden w-fit">
|
|
<button
|
|
type="button"
|
|
onClick={() => applyQuickTypeFilter('')}
|
|
className={`px-3 py-2 text-sm ${
|
|
consultaType === '' ? 'bg-blue-600 text-white' : 'bg-white text-gray-800 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{t('consultationHistory.filters.all')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => applyQuickTypeFilter('massive')}
|
|
className={`px-3 py-2 text-sm border-l border-gray-300 ${
|
|
consultaType === 'massive' ? 'bg-blue-600 text-white' : 'bg-white text-gray-800 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{t('consultationHistory.type.massive')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => applyQuickTypeFilter('individual')}
|
|
className={`px-3 py-2 text-sm border-l border-gray-300 ${
|
|
consultaType === 'individual' ? 'bg-blue-600 text-white' : 'bg-white text-gray-800 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{t('consultationHistory.type.individual')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('consultationHistory.filters.type')}</label>
|
|
<select
|
|
value={consultaType}
|
|
onChange={(e) => setConsultaType(e.target.value as 'individual' | 'massive' | '')}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">{t('consultationHistory.filters.all')}</option>
|
|
<option value="individual">{t('consultationHistory.type.individual')}</option>
|
|
<option value="massive">{t('consultationHistory.type.massive')}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('consultationHistory.filters.rut')}</label>
|
|
<input
|
|
type="text"
|
|
value={rutFilter}
|
|
onChange={(e) => setRutFilter(e.target.value)}
|
|
placeholder={t('consultationHistory.filters.rutPlaceholder')}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('consultationHistory.filters.status')}</label>
|
|
<select
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">{t('consultationHistory.filters.all')}</option>
|
|
<option value="200">200 - {t('consultationHistory.status.success')}</option>
|
|
<option value="400">400 - {t('consultationHistory.status.clientError')}</option>
|
|
<option value="401">401 - {t('consultationHistory.status.unauthorized')}</option>
|
|
<option value="500">500 - {t('consultationHistory.status.serverError')}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('consultationHistory.filters.startDate')}</label>
|
|
<input
|
|
type="date"
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('consultationHistory.filters.endDate')}</label>
|
|
<input
|
|
type="date"
|
|
value={endDate}
|
|
onChange={(e) => setEndDate(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4 mt-4">
|
|
<button
|
|
onClick={handleApplyFilters}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
{t('consultationHistory.filters.apply')}
|
|
</button>
|
|
<button
|
|
onClick={handleClearFilters}
|
|
className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
|
|
>
|
|
{t('consultationHistory.filters.clear')}
|
|
</button>
|
|
<button
|
|
onClick={exportToPDF}
|
|
disabled={consultas.length === 0}
|
|
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
|
|
{t('consultationHistory.exportPdf')}
|
|
</button>
|
|
<button
|
|
onClick={exportAllToPDF}
|
|
disabled={isExportingAll}
|
|
className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
|
|
>
|
|
{isExportingAll ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
|
|
Exportando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
Exportar todo PDF
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Results Table */}
|
|
<div className="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-gray-200">
|
|
<h2 className="text-lg font-semibold text-gray-900">
|
|
{t('consultationHistory.resultsTitle', { total: total.toLocaleString() })}
|
|
</h2>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex justify-center items-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
<span className="ml-2 text-gray-600">{t('consultationHistory.loading')}</span>
|
|
</div>
|
|
) : error ? (
|
|
<div className="p-6 text-center">
|
|
<div className="text-red-600 mb-2">{t('consultationHistory.errorTitle')}</div>
|
|
<div className="text-gray-600">{error}</div>
|
|
</div>
|
|
) : consultas.length === 0 ? (
|
|
<div className="p-6 text-center text-gray-600">
|
|
{t('consultationHistory.noResults')}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{t('consultationHistory.table.date')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{t('consultationHistory.table.user')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{t('consultationHistory.table.type')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{t('consultationHistory.table.tag')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{t('consultationHistory.table.ruts')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{t('consultationHistory.table.status')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{t('consultationHistory.table.time')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{t('consultationHistory.table.credits')}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{consultas.map((consulta) => {
|
|
const isMassive = consulta.consultaType === 'massive';
|
|
const rutsArr = Array.isArray((consulta as any).ruts) ? (consulta as any).ruts as string[] : [];
|
|
const isOpen = expandedIds.has(consulta._id);
|
|
return (
|
|
<React.Fragment key={consulta._id}>
|
|
<tr className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{formatDate(consulta.createdAt)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{consulta.userId ? (
|
|
<div>
|
|
<div className="font-medium">{consulta.userId.name}</div>
|
|
<div className="text-gray-500 text-xs">{consulta.userId.email}</div>
|
|
</div>
|
|
) : (
|
|
<span className="text-gray-400 italic">Usuario no disponible</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{getConsultaTypeBadge(consulta.consultaType)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{consulta.metadata && (consulta.metadata.tag || consulta.metadata.evaluationType) ? (consulta.metadata.tag || consulta.metadata.evaluationType) : '-'}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{isMassive ? (
|
|
<button
|
|
onClick={() => toggleExpand(consulta._id)}
|
|
className="text-primary-600 hover:underline inline-flex items-center"
|
|
>
|
|
<span className="mr-1">{isOpen ? '▾' : '▸'}</span>
|
|
<span>{rutsArr.length} {t('consultationHistory.table.rutsShort')}</span>
|
|
</button>
|
|
) : (
|
|
consulta.rut || ''
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{getStatusBadge(consulta.responseStatus)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{formatProcessingTime(consulta.processingTime)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{consulta.creditsUsed}
|
|
</td>
|
|
</tr>
|
|
{isMassive && isOpen && (
|
|
<tr className="bg-gray-50">
|
|
<td className="px-6 py-4" colSpan={8}>
|
|
<div className="max-h-48 overflow-auto border border-gray-200 rounded">
|
|
<table className="min-w-full text-sm">
|
|
<thead className="bg-gray-100">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left text-gray-700">RUT</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{rutsArr.map((rut, idx) => (
|
|
<tr key={idx}>
|
|
<td className="px-4 py-2 text-gray-900">{rut}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
|
|
<div className="text-sm text-gray-700">
|
|
{t('consultationHistory.pagination.info', { currentPage, totalPages, total: total.toLocaleString() })}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => handlePageChange(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
className="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Anterior
|
|
</button>
|
|
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
|
|
const page = Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i;
|
|
return (
|
|
<button
|
|
key={page}
|
|
onClick={() => handlePageChange(page)}
|
|
className={`px-3 py-1 text-sm border rounded-md ${
|
|
page === currentPage
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'border-gray-300 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{page}
|
|
</button>
|
|
);
|
|
})}
|
|
<button
|
|
onClick={() => handlePageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
className="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Siguiente
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HistoricalConsultas;
|