table search no submission found solved
This commit is contained in:
Senthamilselvi
parent
6813f23c42
commit
83361a76e0
@ -100,15 +100,13 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
||||
}, [history]);
|
||||
|
||||
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 term = searchTerm.trim().toLowerCase().replace(/\s+/g, '');
|
||||
if (!term) return true;
|
||||
|
||||
return Object.values(entry).some((val) =>
|
||||
String(val).toLowerCase().replace(/\s+/g, '').includes(term)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
const tableHeaders = [
|
||||
'Survey Name',
|
||||
@ -154,7 +152,7 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
||||
|
||||
return (
|
||||
<>
|
||||
<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="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
|
||||
@ -210,22 +208,26 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
||||
<div className="flex items-center justify-center h-[500px] text-gray-500">
|
||||
Loading submissions...
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-20 text-[#7B5C1F] font-semibold text-[15px]">
|
||||
No Submission Found
|
||||
</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 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>
|
||||
)}
|
||||
|
||||
@ -142,19 +142,23 @@ const ManageSubmissions = () => {
|
||||
const statusOptions = React.useMemo(() => ['All', ...new Set(submissions.map((i) => i.status))], [submissions]);
|
||||
|
||||
const filtered = React.useMemo(() => {
|
||||
const term = search.trim().toLowerCase();
|
||||
|
||||
return submissions.filter((item) => {
|
||||
const matchSearch =
|
||||
!search ||
|
||||
item.establishment?.toLowerCase().includes(search.toLowerCase()) ||
|
||||
item.submittedBy?.toLowerCase().includes(search.toLowerCase());
|
||||
const allValues = Object.values(item)
|
||||
.map((v) => String(v ?? '').toLowerCase())
|
||||
.join(' ');
|
||||
|
||||
const matchSearch = !term || allValues.includes(term);
|
||||
const matchYear = !year || year === 'All' || item.year === year;
|
||||
const matchQuarter = !quarter || quarter === 'All' || item.quarter === quarter;
|
||||
const matchEmirate = !emirate || emirate === 'All' || item.emirate === emirate;
|
||||
const matchStatus = !status || status === 'All' || item.status === status;
|
||||
|
||||
return matchSearch && matchYear && matchQuarter && matchEmirate && matchStatus;
|
||||
});
|
||||
}, [submissions, search, year, quarter, emirate, status]);
|
||||
|
||||
|
||||
const summaryCounts = React.useMemo(
|
||||
() => ({
|
||||
total: submissions.length,
|
||||
@ -353,87 +357,95 @@ const ManageSubmissions = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-[#E5E7EB] bg-white shadow overflow-hidden">
|
||||
<Table
|
||||
headers={headers}
|
||||
rows={tableRows}
|
||||
beforeHeader={toolbar}
|
||||
separated
|
||||
columnWidths={columnWidths}
|
||||
pagination={{
|
||||
currentPage,
|
||||
onPageChange: setCurrentPage,
|
||||
pageSize,
|
||||
totalItems: filtered.length,
|
||||
}}
|
||||
renderCell={(value, _, columnIndex) => {
|
||||
if (columnIndex === 7)
|
||||
return (
|
||||
<div className="flex justify-start">
|
||||
<Badge status={String(value)}>{value}</Badge>
|
||||
</div>
|
||||
);
|
||||
<div className="rounded-2xl border border-[#E5E7EB] bg-white shadow overflow-hidden">
|
||||
{toolbar}
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-16 text-[#7B5C1F] font-semibold text-sm border-t border-[#E5E7EB]">
|
||||
No Submission Found
|
||||
</div>
|
||||
) : (
|
||||
<Table
|
||||
headers={headers}
|
||||
rows={tableRows}
|
||||
separated
|
||||
columnWidths={columnWidths}
|
||||
pagination={{
|
||||
currentPage,
|
||||
onPageChange: setCurrentPage,
|
||||
pageSize,
|
||||
totalItems: filtered.length,
|
||||
}}
|
||||
renderCell={(value, _, columnIndex) => {
|
||||
if (columnIndex === 7)
|
||||
return (
|
||||
<div className="flex justify-start">
|
||||
<Badge status={String(value)}>{value}</Badge>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (columnIndex === 10) {
|
||||
const item = value;
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-[10px]">
|
||||
<div className="relative group">
|
||||
<CheckCircle2
|
||||
size={22}
|
||||
className="text-green-600 cursor-pointer hover:scale-110 transition-transform"
|
||||
onClick={() =>
|
||||
navigate(`/admin/validations/${item.id}`, {
|
||||
state: { actionType: 'approve' },
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
|
||||
Approve
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<XCircle
|
||||
size={22}
|
||||
className="text-red-600 cursor-pointer hover:scale-110 transition-transform"
|
||||
onClick={() =>
|
||||
navigate(`/admin/validations/${item.id}`, {
|
||||
state: { actionType: 'reject' },
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
|
||||
Reject
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<Eye
|
||||
size={22}
|
||||
className={`cursor-pointer hover:scale-110 transition-transform ${
|
||||
item.status?.toLowerCase() === 'pending'
|
||||
? 'text-[#9E792B]'
|
||||
: 'text-gray-500'
|
||||
}`}
|
||||
onClick={() =>
|
||||
navigate(`/admin/validations/${item.id}`, {
|
||||
state: { actionType: 'view' },
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
|
||||
View
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return value;
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
if (columnIndex === 10) {
|
||||
const item = value;
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-[10px]">
|
||||
<div className="relative group">
|
||||
<CheckCircle2
|
||||
size={22}
|
||||
className="text-green-600 cursor-pointer hover:scale-110 transition-transform"
|
||||
onClick={() =>
|
||||
navigate(`/admin/validations/${item.id}`, {
|
||||
state: { actionType: 'approve' },
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
|
||||
Approve
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<XCircle
|
||||
size={22}
|
||||
className="text-red-600 cursor-pointer hover:scale-110 transition-transform"
|
||||
onClick={() =>
|
||||
navigate(`/admin/validations/${item.id}`, {
|
||||
state: { actionType: 'reject' },
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
|
||||
Reject
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<Eye
|
||||
size={22}
|
||||
className={`cursor-pointer hover:scale-110 transition-transform ${
|
||||
item.status?.toLowerCase() === 'pending'
|
||||
? 'text-[#9E792B]'
|
||||
: 'text-gray-500'
|
||||
}`}
|
||||
onClick={() =>
|
||||
navigate(`/admin/validations/${item.id}`, {
|
||||
state: { actionType: 'view' },
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
|
||||
View
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return value;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user