pagination added for establishment dashboard table
This commit is contained in:
Senthamilselvi
parent
22472cac43
commit
dc75fd84f3
@ -22,50 +22,52 @@ const formatDateTime = (value) => {
|
||||
return formatted.replace(/\s?(am|pm)$/i, (match) => match.toUpperCase());
|
||||
};
|
||||
|
||||
const getStatusClass = (status) => {
|
||||
const getStatusBadge = (status) => {
|
||||
const normalized = String(status || '').toLowerCase();
|
||||
|
||||
if (normalized === 'approved') {
|
||||
return 'inline-flex items-center rounded-md bg-[#F5FAF6] px-2 py-1 text-xs font-medium text-[#2F663C]';
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-md text-green-700 bg-green-50 font-medium text-sm whitespace-nowrap">
|
||||
Approved
|
||||
</span>
|
||||
);
|
||||
} else if (['pending', 'under review', 'in-progress'].includes(normalized)) {
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-md text-blue-600 bg-blue-50 font-medium text-sm whitespace-nowrap">
|
||||
Under Review
|
||||
</span>
|
||||
);
|
||||
} else if (['rejected', 'returned'].includes(normalized)) {
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-md text-red-600 bg-red-50 font-medium text-sm whitespace-nowrap">
|
||||
Returned
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-md text-gray-600 bg-gray-50 font-medium text-sm whitespace-nowrap">
|
||||
{status || '—'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (['pending', 'under review', 'in-progress'].includes(normalized)) {
|
||||
return 'inline-flex items-center rounded-md bg-[#FFFDF3] px-2 py-1 text-xs font-medium text-[#7C5E24]';
|
||||
}
|
||||
|
||||
if (['rejected', 'returned'].includes(normalized)) {
|
||||
return 'inline-flex items-center rounded-md bg-[#FEF6F6] px-2 py-1 text-xs font-medium text-[#B52520]';
|
||||
}
|
||||
|
||||
return 'inline-flex items-center rounded-md bg-[#F8FAFC] px-2 py-1 text-xs font-medium text-[#374151]';
|
||||
};
|
||||
|
||||
const downloadCsv = (data) => {
|
||||
if (!data.length) return;
|
||||
|
||||
const headers = ['Survey Name', 'Year', 'Quarter', 'Status', 'Submission On', 'Products'];
|
||||
const csvRows = [headers.join(',')];
|
||||
|
||||
|
||||
data.forEach((item) => {
|
||||
const surveyName = item.survey_name || '—';
|
||||
const year = item.year || '—';
|
||||
const quarter = item.quarter || '—';
|
||||
|
||||
const normalized = String(item.status || '').toLowerCase();
|
||||
let status = '—';
|
||||
if (normalized === 'pending') status = 'Under Review';
|
||||
else if (normalized === 'rejected') status = 'Returned';
|
||||
else if (['submitted', 'approved'].includes(normalized)) status = 'Approved';
|
||||
|
||||
const submissionOn = item.submission_on || '—';
|
||||
|
||||
const productCount = Number(item.products) || 0;
|
||||
const products = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
|
||||
|
||||
const row = [surveyName, year, quarter, status, submissionOn, products];
|
||||
csvRows.push(row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','));
|
||||
const row = [
|
||||
item.survey_name || '—',
|
||||
item.year || '—',
|
||||
item.quarter || '—',
|
||||
item.status || '—',
|
||||
item.submission_on || '—',
|
||||
item.products || '—',
|
||||
];
|
||||
csvRows.push(row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','));
|
||||
});
|
||||
|
||||
|
||||
const blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
@ -80,6 +82,8 @@ const downloadCsv = (data) => {
|
||||
export const SubmissionHistory = ({ history = [], loading = false, error = '' }) => {
|
||||
const [searchTerm, setSearchTerm] = React.useState('');
|
||||
const [selectedSubmission, setSelectedSubmission] = React.useState(null);
|
||||
const [currentPage, setCurrentPage] = React.useState(1);
|
||||
const pageSize = 10;
|
||||
const navigate = useNavigate();
|
||||
|
||||
const normalizedHistory = React.useMemo(() => {
|
||||
@ -95,106 +99,44 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
||||
}));
|
||||
}, [history]);
|
||||
|
||||
const filteredRows = normalizedHistory.filter((entry) => {
|
||||
const filtered = normalizedHistory.filter((entry) => {
|
||||
const term = searchTerm.trim().toLowerCase();
|
||||
return (
|
||||
!term ||
|
||||
entry.survey_name.toLowerCase().includes(term) ||
|
||||
entry.year.toString().includes(term) ||
|
||||
entry.quarter.toLowerCase().includes(term) ||
|
||||
entry.status.toLowerCase().includes(term)
|
||||
);
|
||||
});
|
||||
|
||||
const handleViewDetails = (rowData) => {
|
||||
setSelectedSubmission(rowData);
|
||||
};
|
||||
const tableHeaders = [
|
||||
'Survey Name',
|
||||
'Year',
|
||||
'Quarter',
|
||||
'Status',
|
||||
'Submission On',
|
||||
'Products',
|
||||
'Actions',
|
||||
];
|
||||
|
||||
const rowsData = filteredRows.map((item) => {
|
||||
const productCount = Number(item.products) || 0;
|
||||
const productLabel = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
|
||||
|
||||
const tableRows = filtered.map((item) => {
|
||||
const productsLabel = `${item.products} ${item.products === 1 ? 'product' : 'products'}`;
|
||||
return [
|
||||
item.survey_name,
|
||||
item.year,
|
||||
item.quarter,
|
||||
|
||||
(() => {
|
||||
const normalized = String(item.status || '').toLowerCase();
|
||||
let displayStatus = '—';
|
||||
|
||||
if (normalized === 'pending') displayStatus = 'Under Review';
|
||||
else if (normalized === 'rejected') displayStatus = 'Returned';
|
||||
else if (['submitted', 'approved'].includes(normalized)) displayStatus = 'Approved';
|
||||
|
||||
return (
|
||||
<span className={getStatusClass(displayStatus)}>
|
||||
{displayStatus}
|
||||
</span>
|
||||
);
|
||||
})(),
|
||||
|
||||
getStatusBadge(item.status),
|
||||
<span className="whitespace-nowrap">{item.submission_on}</span>,
|
||||
productLabel,
|
||||
productsLabel,
|
||||
<button
|
||||
onClick={() => handleViewDetails(item)}
|
||||
onClick={() => setSelectedSubmission(item)}
|
||||
className="text-[#9E792B] hover:text-[#7b5f22] font-medium"
|
||||
>
|
||||
View Details
|
||||
</button>,
|
||||
];
|
||||
});
|
||||
|
||||
const toolbar = (
|
||||
<div className="px-6 py-4 flex items-center justify-between border-b border-[#D9D9DC] bg-white">
|
||||
<h3 className="text-[16px] font-medium text-[#232528]">
|
||||
Submission History
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative w-56">
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search Establishment"
|
||||
className="w-full h-10 rounded-md border border-[#E5E7EB] pl-10 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#92722A]"
|
||||
/>
|
||||
<img
|
||||
src={searchIconSrc}
|
||||
alt="Search"
|
||||
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => downloadCsv(filteredRows)}
|
||||
disabled={!rowsData.length}
|
||||
className={`inline-flex h-10 items-center gap-2 rounded-md border px-4 text-sm font-medium ${
|
||||
rowsData.length
|
||||
? 'border-[#92722A] text-[#92722A] hover:bg-[#F2ECCF]'
|
||||
: 'border-gray-200 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4"
|
||||
/>
|
||||
</svg>
|
||||
<span>Export CSV</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
if (selectedSubmission) {
|
||||
return (
|
||||
@ -212,59 +154,84 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="max-w-[1280px] mx-auto px-0">
|
||||
<div className="overflow-x-auto border border-[#D9D9DC] shadow-sm bg-white">
|
||||
{toolbar}
|
||||
<table className="min-w-full border-collapse text-sm text-[#232528]">
|
||||
<thead>
|
||||
<tr className="bg-[#F2ECCF] text-left text-[13px] font-semibold text-[#232528]">
|
||||
{[
|
||||
'Survey Name',
|
||||
'Year',
|
||||
'Quarter',
|
||||
'Status',
|
||||
'Submission on',
|
||||
'Products',
|
||||
'Actions',
|
||||
].map((header, index) => (
|
||||
<th
|
||||
key={index}
|
||||
className="px-4 py-3 border-b border-[#D9D9DC] whitespace-nowrap"
|
||||
>
|
||||
{header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<div className="max-w-[1280px] mx-auto bg-white border border-[#E5E7EB] shadow-[0_16px_32px_rgba(15,23,42,0.06)] rounded-[8px] mt-8 w-full overflow-hidden">
|
||||
<div className="flex items-center justify-between px-6 pt-6 pb-4">
|
||||
<h2 className="text-[18px] leading-[28px] font-medium text-[#232528]">
|
||||
Submission History
|
||||
</h2>
|
||||
|
||||
<tbody className="divide-y divide-[#D9D9DC] text-[13px] leading-[20px]">
|
||||
{rowsData.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="7" className="px-4 py-8 text-center text-gray-500">
|
||||
{loading ? 'Loading...' : error ? error : 'No submissions found'}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
rowsData.map((row, rowIndex) => (
|
||||
<tr
|
||||
key={rowIndex}
|
||||
className="hover:bg-[#FAFAFA] transition-colors duration-150"
|
||||
>
|
||||
{row.map((cell, cellIndex) => (
|
||||
<td
|
||||
key={cellIndex}
|
||||
className="px-4 py-3 align-middle whitespace-nowrap border-b border-[#D9D9DC]"
|
||||
>
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative w-56">
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search Establishment"
|
||||
className="w-full h-10 rounded-md border border-[#E5E7EB] pl-10 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#92722A]"
|
||||
/>
|
||||
<img
|
||||
src={searchIconSrc}
|
||||
alt="Search"
|
||||
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => downloadCsv(filtered)}
|
||||
disabled={!filtered.length}
|
||||
className={`inline-flex h-10 items-center gap-2 rounded-md border px-4 text-sm font-medium ${
|
||||
filtered.length
|
||||
? 'border-[#92722A] text-[#92722A] hover:bg-[#F2ECCF]'
|
||||
: 'border-gray-200 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4"
|
||||
/>
|
||||
</svg>
|
||||
<span>Export CSV</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-[500px] text-gray-500">
|
||||
Loading submissions...
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<div className="min-w-[1200px]">
|
||||
<Table
|
||||
headers={tableHeaders}
|
||||
rows={tableRows}
|
||||
separated
|
||||
rowGapClass="border-spacing-y-1"
|
||||
pagination={{
|
||||
currentPage,
|
||||
onPageChange: setCurrentPage,
|
||||
pageSize,
|
||||
totalItems: filtered.length,
|
||||
}}
|
||||
columnWidths={[250, 100, 100, 160, 180, 150, 120]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user