diff --git a/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx b/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx index cabf24a..454831d 100644 --- a/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx +++ b/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx @@ -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 ( + + Approved + + ); + } else if (['pending', 'under review', 'in-progress'].includes(normalized)) { + return ( + + Under Review + + ); + } else if (['rejected', 'returned'].includes(normalized)) { + return ( + + Returned + + ); + } else { + return ( + + {status || '—'} + + ); } - - 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 ( - - {displayStatus} - - ); - })(), - + getStatusBadge(item.status), {item.submission_on}, - productLabel, + productsLabel, , ]; - }); - - const toolbar = ( -
-

- Submission History -

- -
-
- 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]" - /> - Search -
- - -
-
- ); + }); if (selectedSubmission) { return ( @@ -212,59 +154,84 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' }) return ( <> -
-
- {toolbar} - - - - {[ - 'Survey Name', - 'Year', - 'Quarter', - 'Status', - 'Submission on', - 'Products', - 'Actions', - ].map((header, index) => ( - - ))} - - +
+
+

+ Submission History +

-
- {rowsData.length === 0 ? ( - - - - ) : ( - rowsData.map((row, rowIndex) => ( - - {row.map((cell, cellIndex) => ( - - ))} - - )) - )} - -
- {header} -
- {loading ? 'Loading...' : error ? error : 'No submissions found'} -
- {cell} -
+
+
+ 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]" + /> + Search +
+ + +
-
+ +
+ {loading ? ( +
+ Loading submissions... +
+ ) : ( +
+
+ + + + )} + + +
);