Merge branch 'master' of https://bitbucket.org/jubilian/fcsc_ipi_frontend
This commit is contained in:
Malini
commit
023d504371
@ -40,18 +40,32 @@ const getStatusClass = (status) => {
|
||||
return 'inline-flex items-center rounded-md bg-[#F8FAFC] px-2 py-1 text-xs font-medium text-[#374151]';
|
||||
};
|
||||
|
||||
const downloadCsv = (rows) => {
|
||||
if (!rows.length) return;
|
||||
const downloadCsv = (data) => {
|
||||
if (!data.length) return;
|
||||
|
||||
const headers = ['Survey Name', 'Year', 'Quarter', 'Status', 'Submission On', 'Products'];
|
||||
const csvRows = [headers.join(',')];
|
||||
rows.forEach((row) => {
|
||||
csvRows.push(
|
||||
row
|
||||
.slice(0, 6)
|
||||
.map((cell) => `"${String(cell).replace(/"/g, '""')}"`)
|
||||
.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 blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
@ -131,25 +145,19 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
||||
});
|
||||
|
||||
const toolbar = (
|
||||
<div className="px-4 pt-6 pb-2 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-[18px] leading-[28px] ml-2 font-medium text-[#232528]">
|
||||
Submission History
|
||||
</h3>
|
||||
<div className="flex gap-3 text-sm text-gray-500">
|
||||
{loading && <span>Loading…</span>}
|
||||
{error && <span className="text-red-600">{error}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<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 flex-col md:flex-row gap-3 md:items-center">
|
||||
<div className="relative w-full md:w-56">
|
||||
<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"
|
||||
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}
|
||||
@ -159,15 +167,15 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => downloadCsv(rowsData)}
|
||||
disabled={!rowsData.length}
|
||||
className={`inline-flex h-10 items-center gap-2 rounded-md border px-4 mr-2 text-sm font-medium ${
|
||||
rowsData.length
|
||||
? 'border-[#92722A] text-[#92722A] hover:bg-[#F2ECCF]'
|
||||
: 'border-gray-200 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
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"
|
||||
@ -204,50 +212,59 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="max-w-[1280px] mx-auto px-0">
|
||||
<div className="overflow-x-auto rounded-lg border border-[#D9D9DC] shadow-sm bg-white">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<tbody className="divide-y divide-[#D9D9DC] text-[13px] leading-[20px]">
|
||||
{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>
|
||||
</section>
|
||||
<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>
|
||||
</section>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -374,87 +374,158 @@ const ValidationReview = () => {
|
||||
</section>
|
||||
|
||||
{productDetails.length > 0 ? (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
{productDetails.map((product, idx) => (
|
||||
<section key={product.code + idx} className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB] space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between w-full">
|
||||
<div className="text-sm font-semibold text-[#232528]">
|
||||
Product: <span className="font-normal">{product.code} - {product.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex items-center gap-1 border border-[#D0D5DD] rounded-md px-2 py-[2px] text-xs text-[#344054]">
|
||||
<span className="text-[#475467] font-medium">Submitted By:</span>
|
||||
<span className="font-semibold text-[#232528]">{product.submittedBy}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 border border-[#D0D5DD] rounded-md px-2 py-[2px] text-xs text-[#344054]">
|
||||
<span className="text-[#475467] font-medium">Unit:</span>
|
||||
<span className="font-semibold text-[#232528]">{product.unit}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 border border-[#D0D5DD] rounded-md px-2 py-[2px] text-xs text-[#344054]">
|
||||
<span className="text-[#475467] font-medium">Capacity:</span>
|
||||
<span className="font-semibold text-[#232528]">{product.capacity}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-[12px] border border-[#E5E7EB]">
|
||||
<table className="w-full table-fixed text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-[160px] bg-[#F2ECCF] px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[#92722A]">Description</th>
|
||||
{product.quarters.map((quarter) => (
|
||||
<th
|
||||
key={quarter.label}
|
||||
className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-white"
|
||||
style={{ backgroundColor: quarter.color }}
|
||||
>
|
||||
{quarter.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{product.rows.map((row) => (
|
||||
<tr key={row.label} className="border-t border-[#E5E7EB]">
|
||||
<td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">{row.label}</td>
|
||||
{row.values.map((value, index) => (
|
||||
<td
|
||||
key={`${row.label}-${product.quarters[index].label}`}
|
||||
className="px-4 py-3 text-[#232528]"
|
||||
style={{ backgroundColor: product.quarters[index].cellColor }}
|
||||
>
|
||||
{value}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-[#4B5563]">
|
||||
<span className="font-semibold text-[#232528]">Remarks:</span> {product.remarks}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-semibold text-[#232528]">Admin Remarks</span>
|
||||
<textarea
|
||||
rows={3}
|
||||
className="w-full rounded-[10px] border border-[#D1D5DB] bg-[#FFFCF2] px-4 py-2 text-sm text-[#232528] placeholder:text-[#9CA3AF] focus:outline-none focus:ring-2 focus:ring-[#92722A]"
|
||||
placeholder="Add short note..."
|
||||
defaultValue=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
<div
|
||||
className={`grid gap-4 ${
|
||||
productDetails.length === 1
|
||||
? 'grid-cols-1'
|
||||
: 'grid-cols-1 lg:grid-cols-2'
|
||||
}`}
|
||||
>
|
||||
{productDetails.map((product, idx) => (
|
||||
<section
|
||||
key={product.code + idx}
|
||||
className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB] space-y-5"
|
||||
>
|
||||
<div className="flex flex-wrap items-center justify-between">
|
||||
<div className="text-sm font-semibold text-[#232528]">
|
||||
Product: <span className="font-normal">{product.code} - {product.name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg bg-amber-50 border border-amber-200 p-6 text-center">
|
||||
<p className="text-amber-800">No products found for this submission.</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
|
||||
Submitted By: <strong>{product.submittedBy}</strong>
|
||||
</span>
|
||||
<span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
|
||||
Unit: <strong>{product.unit}</strong>
|
||||
</span>
|
||||
<span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
|
||||
Capacity: <strong>{product.capacity}</strong>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto rounded-[12px] border border-[#E5E7EB]">
|
||||
<table className="min-w-full text-sm text-left border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
rowSpan="2"
|
||||
className="bg-[#F2ECCF] text-[#92722A] px-4 py-3 text-xs font-semibold uppercase align-middle border-r border-[#E5E7EB]"
|
||||
>
|
||||
Metric
|
||||
</th>
|
||||
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
|
||||
Q4-2024 (Previous Quarter)
|
||||
</th>
|
||||
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
|
||||
Q1-2025 (Current Quarter)
|
||||
</th>
|
||||
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
|
||||
Q2-2025 (Next Quarter)
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">Oct</th>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">Nov</th>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">Dec</th>
|
||||
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">Jan</th>
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">Feb</th>
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">Mar</th>
|
||||
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">Apr</th>
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">May</th>
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">Jun</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr className="border-t border-[#E5E7EB]">
|
||||
<td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
|
||||
Quantity (liters)
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">1200</td>
|
||||
<td className="px-4 py-3 text-red-600">1180 ▼</td>
|
||||
<td className="px-4 py-3 text-green-600">1250 ▲</td>
|
||||
|
||||
<td className="px-4 py-3 text-[#232528]">1280</td>
|
||||
<td className="px-4 py-3 text-[#232528]">1340</td>
|
||||
<td className="px-4 py-3 text-[#232528]">1375</td>
|
||||
|
||||
<td className="px-4 py-3 text-[#232528]">1400</td>
|
||||
<td className="px-4 py-3 text-[#232528]">1450</td>
|
||||
<td className="px-4 py-3 text-[#232528]">1500</td>
|
||||
</tr>
|
||||
|
||||
<tr className="border-t border-[#E5E7EB]">
|
||||
<td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
|
||||
Cost (AED)
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">39,000</td>
|
||||
<td className="px-4 py-3 text-red-600">37,500 ▼</td>
|
||||
<td className="px-4 py-3 text-green-600">41,000 ▲</td>
|
||||
|
||||
<td className="px-4 py-3 text-[#232528]">40,000</td>
|
||||
<td className="px-4 py-3 text-[#232528]">42,000</td>
|
||||
<td className="px-4 py-3 text-[#232528]">43,500</td>
|
||||
|
||||
<td className="px-4 py-3 text-[#232528]">44,000</td>
|
||||
<td className="px-4 py-3 text-[#232528]">45,000</td>
|
||||
<td className="px-4 py-3 text-[#232528]">46,000</td>
|
||||
</tr>
|
||||
|
||||
<tr className="border-t border-[#E5E7EB]">
|
||||
<td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
|
||||
Reason (Current)
|
||||
</td>
|
||||
<td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
|
||||
<td colSpan="3" className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium rounded-md">
|
||||
Seasonal Increase
|
||||
</td>
|
||||
<td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
|
||||
</tr>
|
||||
|
||||
<tr className="border-t border-[#E5E7EB]">
|
||||
<td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
|
||||
Reason (Forecast)
|
||||
</td>
|
||||
<td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
|
||||
<td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
|
||||
<td colSpan="3" className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium rounded-md">
|
||||
Projected demand
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="text-xs text-[#4B5563] mt-2">
|
||||
<p>
|
||||
<span className="text-[#16A34A] font-semibold">Green ▲</span> indicates upward trend;{' '}
|
||||
<span className="text-[#DC2626] font-semibold">Red ▼</span> indicates downward trend compared to previous month or quarter
|
||||
</p>
|
||||
<p className="mt-3 text-sm text-[#4B5563]">
|
||||
<strong className="font-semibold text-[#232528]">Remarks:</strong> NA
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<label className="block text-sm font-semibold mb-1 text-[#232528]">Admin Remarks</label>
|
||||
<textarea
|
||||
rows="2"
|
||||
className="w-full rounded-[10px] border border-[#D1D5DB] bg-[#FFFCF2] px-4 py-2 text-sm text-[#232528] focus:ring-2 focus:ring-[#92722A] focus:outline-none"
|
||||
placeholder="Add short note..."
|
||||
></textarea>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg bg-amber-50 border border-amber-200 p-6 text-center">
|
||||
<p className="text-amber-800">No products found for this submission.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB]">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user