ec0173483a
All checks were successful
Dev CI / Backend — Lint (push) Successful in 10m23s
Dev CI / Backend — Unit Tests (push) Successful in 10m17s
Dev CI / Frontend — Lint & Type-check (push) Successful in 11m3s
Dev CI / Frontend — Unit Tests (push) Successful in 10m33s
Dev CI / Notify Failure (push) Has been skipped
791 lines
38 KiB
TypeScript
791 lines
38 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
|
import { useTranslations, useLocale } from 'next-intl';
|
|
import { listCsvBookings, CsvBookingResponse } from '@/lib/api/bookings';
|
|
import { FileText, Image as ImageIcon, FileEdit, FileSpreadsheet, Paperclip } from 'lucide-react';
|
|
import type { ReactNode } from 'react';
|
|
import ExportButton from '@/components/ExportButton';
|
|
import { PageHeader } from '@/components/ui/PageHeader';
|
|
|
|
interface Document {
|
|
id: string;
|
|
fileName: string;
|
|
filePath: string;
|
|
type: string;
|
|
mimeType: string;
|
|
size: number;
|
|
uploadedAt?: Date;
|
|
name?: string;
|
|
url?: string;
|
|
}
|
|
|
|
interface DocumentWithBooking extends Document {
|
|
bookingId: string;
|
|
quoteNumber: string;
|
|
route: string;
|
|
status: string;
|
|
carrierName: string;
|
|
fileType?: string;
|
|
}
|
|
|
|
export default function UserDocumentsPage() {
|
|
const t = useTranslations('dashboard.userDocuments');
|
|
const locale = useLocale();
|
|
const [bookings, setBookings] = useState<CsvBookingResponse[]>([]);
|
|
const [documents, setDocuments] = useState<DocumentWithBooking[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState('all');
|
|
const [filterQuoteNumber, setFilterQuoteNumber] = useState('');
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|
|
|
const [showAddModal, setShowAddModal] = useState(false);
|
|
const [selectedBookingId, setSelectedBookingId] = useState<string | null>(null);
|
|
const [uploadingFiles, setUploadingFiles] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const [showReplaceModal, setShowReplaceModal] = useState(false);
|
|
const [documentToReplace, setDocumentToReplace] = useState<DocumentWithBooking | null>(null);
|
|
const [replacingFile, setReplacingFile] = useState(false);
|
|
const replaceFileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
|
|
|
|
const getQuoteNumber = (booking: CsvBookingResponse): string => {
|
|
return `#${booking.bookingId || booking.id.slice(0, 8).toUpperCase()}`;
|
|
};
|
|
|
|
const getFileType = (fileName: string): string => {
|
|
const ext = fileName.split('.').pop()?.toLowerCase() || '';
|
|
const typeMap: Record<string, string> = {
|
|
pdf: 'PDF', doc: 'Word', docx: 'Word', xls: 'Excel', xlsx: 'Excel',
|
|
jpg: 'Image', jpeg: 'Image', png: 'Image', gif: 'Image', txt: 'Text', csv: 'CSV',
|
|
};
|
|
return typeMap[ext] || ext.toUpperCase();
|
|
};
|
|
|
|
const fetchBookingsAndDocuments = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await listCsvBookings({ page: 1, limit: 1000 });
|
|
const allBookings = response.bookings || [];
|
|
setBookings(allBookings);
|
|
|
|
const allDocuments: DocumentWithBooking[] = [];
|
|
|
|
allBookings.forEach((booking: CsvBookingResponse) => {
|
|
if (booking.documents && booking.documents.length > 0) {
|
|
booking.documents.forEach((doc: any, index: number) => {
|
|
const actualFileName = doc.fileName || doc.name || 'document';
|
|
const actualFilePath = doc.filePath || doc.url || '';
|
|
const actualMimeType = doc.mimeType || doc.type || '';
|
|
|
|
let fileType = '';
|
|
if (actualMimeType.includes('/')) {
|
|
const parts = actualMimeType.split('/');
|
|
fileType = getFileType(parts[1]);
|
|
} else {
|
|
fileType = getFileType(actualFileName);
|
|
}
|
|
|
|
allDocuments.push({
|
|
id: doc.id || `${booking.id}-doc-${index}`,
|
|
fileName: actualFileName,
|
|
filePath: actualFilePath,
|
|
type: doc.type || '',
|
|
mimeType: actualMimeType,
|
|
size: doc.size || 0,
|
|
uploadedAt: doc.uploadedAt,
|
|
bookingId: booking.id,
|
|
quoteNumber: getQuoteNumber(booking),
|
|
route: `${booking.origin || 'N/A'} → ${booking.destination || 'N/A'}`,
|
|
status: booking.status,
|
|
carrierName: booking.carrierName || 'N/A',
|
|
fileType: fileType,
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
setDocuments(allDocuments);
|
|
setError(null);
|
|
} catch (err: any) {
|
|
setError(err.message || t('error'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
fetchBookingsAndDocuments();
|
|
}, [fetchBookingsAndDocuments]);
|
|
|
|
const filteredDocuments = documents.filter(doc => {
|
|
const matchesSearch =
|
|
searchTerm === '' ||
|
|
(doc.fileName && doc.fileName.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
(doc.type && doc.type.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
doc.route.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
doc.carrierName.toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
const matchesStatus = filterStatus === 'all' || doc.status === filterStatus;
|
|
|
|
const matchesQuote =
|
|
filterQuoteNumber === '' ||
|
|
doc.quoteNumber.toLowerCase().includes(filterQuoteNumber.toLowerCase());
|
|
|
|
return matchesSearch && matchesStatus && matchesQuote;
|
|
});
|
|
|
|
const totalPages = Math.ceil(filteredDocuments.length / itemsPerPage);
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
const paginatedDocuments = filteredDocuments.slice(startIndex, endIndex);
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [searchTerm, filterStatus, filterQuoteNumber]);
|
|
|
|
const getDocumentIcon = (type: string): ReactNode => {
|
|
const typeLower = type.toLowerCase();
|
|
const cls = "h-6 w-6";
|
|
const iconMap: Record<string, ReactNode> = {
|
|
'application/pdf': <FileText className={`${cls} text-red-500`} />,
|
|
'image/jpeg': <ImageIcon className={`${cls} text-green-500`} />,
|
|
'image/png': <ImageIcon className={`${cls} text-green-500`} />,
|
|
'image/jpg': <ImageIcon className={`${cls} text-green-500`} />,
|
|
pdf: <FileText className={`${cls} text-red-500`} />,
|
|
jpeg: <ImageIcon className={`${cls} text-green-500`} />,
|
|
jpg: <ImageIcon className={`${cls} text-green-500`} />,
|
|
png: <ImageIcon className={`${cls} text-green-500`} />,
|
|
gif: <ImageIcon className={`${cls} text-green-500`} />,
|
|
image: <ImageIcon className={`${cls} text-green-500`} />,
|
|
word: <FileEdit className={`${cls} text-blue-500`} />,
|
|
doc: <FileEdit className={`${cls} text-blue-500`} />,
|
|
docx: <FileEdit className={`${cls} text-blue-500`} />,
|
|
excel: <FileSpreadsheet className={`${cls} text-green-600`} />,
|
|
xls: <FileSpreadsheet className={`${cls} text-green-600`} />,
|
|
xlsx: <FileSpreadsheet className={`${cls} text-green-600`} />,
|
|
csv: <FileSpreadsheet className={`${cls} text-green-600`} />,
|
|
text: <FileText className={`${cls} text-gray-500`} />,
|
|
txt: <FileText className={`${cls} text-gray-500`} />,
|
|
};
|
|
return iconMap[typeLower] || <Paperclip className={`${cls} text-gray-400`} />;
|
|
};
|
|
|
|
const getStatusColor = (status: string) => {
|
|
const colors: Record<string, string> = {
|
|
PENDING: 'bg-yellow-100 text-yellow-800',
|
|
ACCEPTED: 'bg-green-100 text-green-800',
|
|
REJECTED: 'bg-red-100 text-red-800',
|
|
CANCELLED: 'bg-gray-100 text-gray-800',
|
|
};
|
|
return colors[status] || 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
const getStatusLabel = (status: string) => {
|
|
const key = status as 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED';
|
|
return t(`statuses.${key}` as any) || status;
|
|
};
|
|
|
|
const handleDownload = async (url: string, fileName: string) => {
|
|
try {
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = fileName;
|
|
link.target = '_blank';
|
|
link.setAttribute('download', fileName);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
|
|
setTimeout(async () => {
|
|
try {
|
|
const response = await fetch(url, { mode: 'cors', credentials: 'include' });
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
|
const blob = await response.blob();
|
|
const blobUrl = window.URL.createObjectURL(blob);
|
|
const link2 = document.createElement('a');
|
|
link2.href = blobUrl;
|
|
link2.download = fileName;
|
|
document.body.appendChild(link2);
|
|
link2.click();
|
|
document.body.removeChild(link2);
|
|
window.URL.revokeObjectURL(blobUrl);
|
|
} catch (fetchError) {
|
|
console.error('Fetch download failed:', fetchError);
|
|
}
|
|
}, 100);
|
|
} catch (err) {
|
|
console.error('Error downloading file:', err);
|
|
alert(`${t('downloadError')}: ${err instanceof Error ? err.message : ''}`);
|
|
}
|
|
};
|
|
|
|
const bookingsAvailableForDocuments = bookings.filter(
|
|
b => b.status === 'PENDING' || b.status === 'ACCEPTED'
|
|
);
|
|
|
|
const handleAddDocumentClick = () => {
|
|
setShowAddModal(true);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setShowAddModal(false);
|
|
setSelectedBookingId(null);
|
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
|
};
|
|
|
|
const handleFileUpload = async () => {
|
|
if (!selectedBookingId || !fileInputRef.current?.files?.length) {
|
|
alert(t('addDocument.noBookingError'));
|
|
return;
|
|
}
|
|
|
|
setUploadingFiles(true);
|
|
try {
|
|
const formData = new FormData();
|
|
const files = fileInputRef.current.files;
|
|
for (let i = 0; i < files.length; i++) {
|
|
formData.append('documents', files[i]);
|
|
}
|
|
|
|
const token = localStorage.getItem('access_token');
|
|
const response = await fetch(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${selectedBookingId}/documents`,
|
|
{ method: 'POST', headers: { Authorization: `Bearer ${token}` }, body: formData }
|
|
);
|
|
|
|
if (!response.ok) throw new Error(t('addDocument.errorMessage'));
|
|
|
|
alert(t('addDocument.successMessage'));
|
|
handleCloseModal();
|
|
fetchBookingsAndDocuments();
|
|
} catch (err) {
|
|
console.error('Error uploading documents:', err);
|
|
alert(`${t('addDocument.errorMessage')}: ${err instanceof Error ? err.message : ''}`);
|
|
} finally {
|
|
setUploadingFiles(false);
|
|
}
|
|
};
|
|
|
|
const toggleDropdown = (docId: string) => {
|
|
setOpenDropdownId(openDropdownId === docId ? null : docId);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = () => setOpenDropdownId(null);
|
|
if (openDropdownId) {
|
|
document.addEventListener('click', handleClickOutside);
|
|
return () => document.removeEventListener('click', handleClickOutside);
|
|
}
|
|
}, [openDropdownId]);
|
|
|
|
const handleReplaceClick = (doc: DocumentWithBooking) => {
|
|
setOpenDropdownId(null);
|
|
setDocumentToReplace(doc);
|
|
setShowReplaceModal(true);
|
|
};
|
|
|
|
const handleCloseReplaceModal = () => {
|
|
setShowReplaceModal(false);
|
|
setDocumentToReplace(null);
|
|
if (replaceFileInputRef.current) replaceFileInputRef.current.value = '';
|
|
};
|
|
|
|
const handleReplaceDocument = async () => {
|
|
if (!documentToReplace || !replaceFileInputRef.current?.files?.length) {
|
|
alert(t('replaceDocument.noFileError'));
|
|
return;
|
|
}
|
|
|
|
setReplacingFile(true);
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('document', replaceFileInputRef.current.files[0]);
|
|
|
|
const token = localStorage.getItem('access_token');
|
|
const response = await fetch(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${documentToReplace.bookingId}/documents/${documentToReplace.id}`,
|
|
{ method: 'PATCH', headers: { Authorization: `Bearer ${token}` }, body: formData }
|
|
);
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({}));
|
|
throw new Error(errorData.message || t('replaceDocument.errorMessage'));
|
|
}
|
|
|
|
alert(t('replaceDocument.successMessage'));
|
|
handleCloseReplaceModal();
|
|
fetchBookingsAndDocuments();
|
|
} catch (err) {
|
|
console.error('Error replacing document:', err);
|
|
alert(`${t('replaceDocument.errorMessage')}: ${err instanceof Error ? err.message : ''}`);
|
|
} finally {
|
|
setReplacingFile(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-96">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
|
<p className="mt-4 text-gray-600">{t('loading')}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title={t('title')}
|
|
description={t('description')}
|
|
actions={
|
|
<>
|
|
<ExportButton
|
|
data={filteredDocuments}
|
|
filename="documents"
|
|
columns={[
|
|
{ key: 'fileName', label: t('export.fileName') },
|
|
{ key: 'fileType', label: t('export.type') },
|
|
{ key: 'quoteNumber', label: t('export.quoteNumber') },
|
|
{ key: 'route', label: t('export.route') },
|
|
{ key: 'carrierName', label: t('export.carrier') },
|
|
{ key: 'status', label: t('export.status'), format: (v) => getStatusLabel(v) },
|
|
{ key: 'uploadedAt', label: t('export.uploadedAt'), format: (v) => v ? new Date(v).toLocaleDateString(locale) : '' },
|
|
]}
|
|
/>
|
|
<button
|
|
onClick={handleAddDocumentClick}
|
|
disabled={bookingsAvailableForDocuments.length === 0}
|
|
className="inline-flex items-center px-3 sm:px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<svg className="w-4 h-4 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
<span className="hidden sm:inline">{t('addDocument.buttonLabel')}</span>
|
|
</button>
|
|
</>
|
|
}
|
|
/>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="text-sm text-gray-500">{t('stats.total')}</div>
|
|
<div className="text-2xl font-bold text-gray-900">{documents.length}</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="text-sm text-gray-500">{t('stats.withDocuments')}</div>
|
|
<div className="text-2xl font-bold text-blue-600">
|
|
{bookings.filter(b => b.documents && b.documents.length > 0).length}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="text-sm text-gray-500">{t('stats.filtered')}</div>
|
|
<div className="text-2xl font-bold text-green-600">{filteredDocuments.length}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">{t('filters.search')}</label>
|
|
<input
|
|
type="text"
|
|
placeholder={t('filters.searchPlaceholder')}
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">{t('filters.quoteNumber')}</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Ex: #F2CAD5E1"
|
|
value={filterQuoteNumber}
|
|
onChange={e => setFilterQuoteNumber(e.target.value)}
|
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">{t('filters.status')}</label>
|
|
<select
|
|
value={filterStatus}
|
|
onChange={e => setFilterStatus(e.target.value)}
|
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
|
>
|
|
<option value="all">{t('filters.allStatuses')}</option>
|
|
<option value="PENDING">{t('statuses.PENDING')}</option>
|
|
<option value="ACCEPTED">{t('statuses.ACCEPTED')}</option>
|
|
<option value="REJECTED">{t('statuses.REJECTED')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Documents Table */}
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
<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('table.documentName')}</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.type')}</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.quoteNumber')}</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.route')}</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.carrier')}</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.status')}</th>
|
|
<th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.actions')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{paginatedDocuments.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={7} className="px-6 py-12 text-center text-gray-500">
|
|
{documents.length === 0 ? t('empty.noDocuments') : t('empty.noMatch')}
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
paginatedDocuments.map((doc, index) => (
|
|
<tr key={`${doc.bookingId}-${doc.id}-${index}`} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4">
|
|
<div className="text-sm font-medium text-gray-900">{doc.fileName}</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center">
|
|
<span className="mr-2">{getDocumentIcon(doc.fileType || doc.type)}</span>
|
|
<div className="text-xs text-gray-500">{doc.fileType || doc.type}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-gray-900">{doc.quoteNumber}</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">{doc.route}</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">{doc.carrierName}</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(doc.status)}`}>
|
|
{getStatusLabel(doc.status)}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-center">
|
|
<div className="relative inline-block text-left">
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
toggleDropdown(`${doc.bookingId}-${doc.id}`);
|
|
}}
|
|
className="inline-flex items-center justify-center w-8 h-8 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
|
|
title={t('table.actions')}
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="5" r="2" />
|
|
<circle cx="12" cy="12" r="2" />
|
|
<circle cx="12" cy="19" r="2" />
|
|
</svg>
|
|
</button>
|
|
|
|
{openDropdownId === `${doc.bookingId}-${doc.id}` && (
|
|
<div
|
|
className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="py-1">
|
|
<button
|
|
onClick={() => {
|
|
setOpenDropdownId(null);
|
|
handleDownload(doc.filePath || doc.url || '', doc.fileName);
|
|
}}
|
|
className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
>
|
|
<svg className="w-4 h-4 mr-3 text-green-600" 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>
|
|
{t('actions.download')}
|
|
</button>
|
|
<button
|
|
onClick={() => handleReplaceClick(doc)}
|
|
className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
>
|
|
<svg className="w-4 h-4 mr-3 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
{t('actions.replace')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* Pagination Controls */}
|
|
{filteredDocuments.length > 0 && (
|
|
<div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
|
<div className="flex-1 flex justify-between sm:hidden">
|
|
<button
|
|
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
|
disabled={currentPage === 1}
|
|
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{t('pagination.previous')}
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
|
disabled={currentPage === totalPages}
|
|
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{t('pagination.next')}
|
|
</button>
|
|
</div>
|
|
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-700">
|
|
{t('pagination.showing', {
|
|
from: startIndex + 1,
|
|
to: Math.min(endIndex, filteredDocuments.length),
|
|
total: filteredDocuments.length,
|
|
})}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm text-gray-700">{t('pagination.perPage')}</label>
|
|
<select
|
|
value={itemsPerPage}
|
|
onChange={e => {
|
|
setItemsPerPage(Number(e.target.value));
|
|
setCurrentPage(1);
|
|
}}
|
|
className="border border-gray-300 rounded-md px-2 py-1 text-sm"
|
|
>
|
|
<option value={5}>5</option>
|
|
<option value={10}>10</option>
|
|
<option value={25}>25</option>
|
|
<option value={50}>50</option>
|
|
<option value={100}>100</option>
|
|
</select>
|
|
</div>
|
|
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<button
|
|
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
|
disabled={currentPage === 1}
|
|
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span className="sr-only">{t('pagination.previous')}</span>
|
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
|
|
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
|
|
let pageNum;
|
|
if (totalPages <= 5) {
|
|
pageNum = i + 1;
|
|
} else if (currentPage <= 3) {
|
|
pageNum = i + 1;
|
|
} else if (currentPage >= totalPages - 2) {
|
|
pageNum = totalPages - 4 + i;
|
|
} else {
|
|
pageNum = currentPage - 2 + i;
|
|
}
|
|
|
|
return (
|
|
<button
|
|
key={pageNum}
|
|
onClick={() => setCurrentPage(pageNum)}
|
|
className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
|
|
currentPage === pageNum
|
|
? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
|
|
: 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{pageNum}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
<button
|
|
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
|
disabled={currentPage === totalPages}
|
|
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span className="sr-only">{t('pagination.next')}</span>
|
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Add Document Modal */}
|
|
{showAddModal && (
|
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={handleCloseModal} />
|
|
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
|
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
|
<div className="sm:flex sm:items-start">
|
|
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
<svg className="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
</div>
|
|
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
|
|
<h3 className="text-lg leading-6 font-medium text-gray-900">{t('addDocument.modalTitle')}</h3>
|
|
<div className="mt-4 space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">{t('addDocument.selectBooking')}</label>
|
|
<select
|
|
value={selectedBookingId || ''}
|
|
onChange={e => setSelectedBookingId(e.target.value)}
|
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
|
>
|
|
<option value="">{t('addDocument.selectBookingPlaceholder')}</option>
|
|
{bookingsAvailableForDocuments.map(booking => (
|
|
<option key={booking.id} value={booking.id}>
|
|
{getQuoteNumber(booking)} - {booking.origin} → {booking.destination} ({booking.status === 'PENDING' ? t('statuses.PENDING') : t('statuses.ACCEPTED')})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">{t('addDocument.filesToAdd')}</label>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
multiple
|
|
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
|
|
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-500">{t('addDocument.acceptedFormats')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
|
<button
|
|
type="button"
|
|
onClick={handleFileUpload}
|
|
disabled={uploadingFiles || !selectedBookingId}
|
|
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{uploadingFiles ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<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" />
|
|
</svg>
|
|
{t('addDocument.uploading')}
|
|
</>
|
|
) : t('addDocument.add')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseModal}
|
|
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
|
>
|
|
{t('addDocument.cancel')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Replace Document Modal */}
|
|
{showReplaceModal && documentToReplace && (
|
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={handleCloseReplaceModal} />
|
|
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
|
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
|
<div className="sm:flex sm:items-start">
|
|
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
<svg className="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
</div>
|
|
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
|
|
<h3 className="text-lg leading-6 font-medium text-gray-900">{t('replaceDocument.modalTitle')}</h3>
|
|
<div className="mt-4 space-y-4">
|
|
<div className="bg-gray-50 rounded-lg p-3">
|
|
<p className="text-sm text-gray-500">{t('replaceDocument.currentDocument')}</p>
|
|
<p className="text-sm font-medium text-gray-900 mt-1">{documentToReplace.fileName}</p>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
{t('replaceDocument.booking')}: {documentToReplace.quoteNumber} - {documentToReplace.route}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">{t('replaceDocument.newFile')}</label>
|
|
<input
|
|
ref={replaceFileInputRef}
|
|
type="file"
|
|
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
|
|
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-500">{t('replaceDocument.acceptedFormats')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
|
<button
|
|
type="button"
|
|
onClick={handleReplaceDocument}
|
|
disabled={replacingFile}
|
|
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{replacingFile ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<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" />
|
|
</svg>
|
|
{t('replaceDocument.replacing')}
|
|
</>
|
|
) : t('replaceDocument.replace')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseReplaceModal}
|
|
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
|
>
|
|
{t('replaceDocument.cancel')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|