establishment user bugs fixed
This commit is contained in:
parent
737dc47d60
commit
a7b0747abc
@ -24,16 +24,20 @@ const formatDateTime = (value) => {
|
|||||||
|
|
||||||
const getStatusClass = (status) => {
|
const getStatusClass = (status) => {
|
||||||
const normalized = String(status || '').toLowerCase();
|
const normalized = String(status || '').toLowerCase();
|
||||||
|
|
||||||
if (normalized === 'approved') {
|
if (normalized === 'approved') {
|
||||||
return 'inline-flex items-center rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-800';
|
return 'inline-flex items-center rounded-md bg-[#F5FAF6] px-2 py-1 text-xs font-medium text-[#2F663C]';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (['pending', 'under review', 'in-progress'].includes(normalized)) {
|
if (['pending', 'under review', 'in-progress'].includes(normalized)) {
|
||||||
return 'inline-flex items-center rounded-md bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-800';
|
return 'inline-flex items-center rounded-md bg-[#FFFDF3] px-2 py-1 text-xs font-medium text-[#7C5E24]';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (['rejected', 'returned'].includes(normalized)) {
|
if (['rejected', 'returned'].includes(normalized)) {
|
||||||
return 'inline-flex items-center rounded-md bg-red-100 px-2 py-1 text-xs font-medium text-red-800';
|
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-gray-100 px-2 py-1 text-xs font-medium text-gray-800';
|
|
||||||
|
return 'inline-flex items-center rounded-md bg-[#F8FAFC] px-2 py-1 text-xs font-medium text-[#374151]';
|
||||||
};
|
};
|
||||||
|
|
||||||
const downloadCsv = (rows) => {
|
const downloadCsv = (rows) => {
|
||||||
@ -94,12 +98,27 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
|||||||
const rowsData = filteredRows.map((item) => {
|
const rowsData = filteredRows.map((item) => {
|
||||||
const productCount = Number(item.products) || 0;
|
const productCount = Number(item.products) || 0;
|
||||||
const productLabel = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
|
const productLabel = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
|
||||||
|
|
||||||
return [
|
return [
|
||||||
item.survey_name,
|
item.survey_name,
|
||||||
item.year,
|
item.year,
|
||||||
item.quarter,
|
item.quarter,
|
||||||
<span className={getStatusClass(item.status)}>{item.status}</span>,
|
|
||||||
|
(() => {
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
})(),
|
||||||
|
|
||||||
<span className="whitespace-nowrap">{item.submission_on}</span>,
|
<span className="whitespace-nowrap">{item.submission_on}</span>,
|
||||||
productLabel,
|
productLabel,
|
||||||
<button
|
<button
|
||||||
@ -109,7 +128,7 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
|||||||
View Details
|
View Details
|
||||||
</button>,
|
</button>,
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
const toolbar = (
|
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="px-4 pt-6 pb-2 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||||
@ -185,25 +204,50 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className="max-w-[1280px] mx-auto px-0">
|
<section className="max-w-[1280px] mx-auto px-0">
|
||||||
<Table
|
<div className="overflow-x-auto rounded-lg border border-[#D9D9DC] shadow-sm bg-white">
|
||||||
headers={[
|
<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',
|
'Survey Name',
|
||||||
'Year',
|
'Year',
|
||||||
'Quarter',
|
'Quarter',
|
||||||
'Status',
|
'Status',
|
||||||
'Submission On',
|
'Submission on',
|
||||||
'Products',
|
'Products',
|
||||||
'Actions',
|
'Actions',
|
||||||
]}
|
].map((header, index) => (
|
||||||
rows={rowsData}
|
<th
|
||||||
beforeHeader={toolbar}
|
key={index}
|
||||||
separated
|
className="px-4 py-3 border-b border-[#D9D9DC] whitespace-nowrap"
|
||||||
rowGapClass="border-spacing-y-2"
|
>
|
||||||
columnWidths={[300, 100, 100, 120, 180, 120, 120]}
|
{header}
|
||||||
/>
|
</th>
|
||||||
</section>
|
))}
|
||||||
|
</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>
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { ChevronLeft, ChevronRight, Pause } from 'lucide-react';
|
import { ChevronLeft, ChevronRight, Pause } from 'lucide-react';
|
||||||
|
import { CalendarDays, Clock3 } from 'lucide-react';
|
||||||
const SurveyCarousel = ({
|
const SurveyCarousel = ({
|
||||||
surveys = [],
|
surveys = [],
|
||||||
autoRotate = true,
|
autoRotate = true,
|
||||||
@ -39,11 +39,25 @@ const SurveyCarousel = ({
|
|||||||
<p className="mt-1 text-[16px] leading-[24px] font-medium text-[#232528]">
|
<p className="mt-1 text-[16px] leading-[24px] font-medium text-[#232528]">
|
||||||
{current?.subtitle || ''}
|
{current?.subtitle || ''}
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-2 flex items-center gap-6 text-[12px] leading-[16px] font-medium text-[#232528]">
|
|
||||||
<span>Due Date: {current?.dueDate || '—'}</span>
|
<div className="mt-2 flex items-center gap-6 text-[12px] leading-[16px] font-medium text-[#232528]">
|
||||||
<span>Est. time: {current?.estTime || '—'}</span>
|
<span className="flex items-center gap-1">
|
||||||
<span>Status: {current?.status || '—'}</span>
|
<CalendarDays size={14} className="text-[#92722A]" />
|
||||||
</div>
|
<span className="font-semibold">Due Date:</span>
|
||||||
|
{current?.dueDate || '—'}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Clock3 size={14} className="text-[#92722A]" />
|
||||||
|
<span className="font-semibold">Est. time:</span>
|
||||||
|
{current?.estTime || '—'}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
<span className="font-semibold">Status:</span>
|
||||||
|
{current?.status || '—'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
|||||||
@ -46,7 +46,7 @@ export const SurveyStatus = ({ data = null, loading = false, error = '' }) => {
|
|||||||
const surveys = [
|
const surveys = [
|
||||||
{
|
{
|
||||||
title: `${formatQuarterYear(surveyData.previous_quarter, surveyData.previous_quarter_year)} Survey Ready`,
|
title: `${formatQuarterYear(surveyData.previous_quarter, surveyData.previous_quarter_year)} Survey Ready`,
|
||||||
subtitle: 'Complete your quarterly industrial production data submission',
|
subtitle: 'Complete your quarterly Industrial Production Index (IPI) data submission',
|
||||||
dueDate: formattedDueDate,
|
dueDate: formattedDueDate,
|
||||||
relativeDue,
|
relativeDue,
|
||||||
estTime: '15–20 minutes',
|
estTime: '15–20 minutes',
|
||||||
|
|||||||
@ -11,7 +11,6 @@ const formatDate = (value) => {
|
|||||||
export const WelcomeSection = ({ data = null, loading = false, error = '' }) => {
|
export const WelcomeSection = ({ data = null, loading = false, error = '' }) => {
|
||||||
const currentQuarter = data?.current_quarter;
|
const currentQuarter = data?.current_quarter;
|
||||||
const currentYear = data?.current_quarter_year;
|
const currentYear = data?.current_quarter_year;
|
||||||
const deadline = data?.next_deadline;
|
|
||||||
|
|
||||||
let description = 'Current reporting information unavailable.';
|
let description = 'Current reporting information unavailable.';
|
||||||
if (loading) {
|
if (loading) {
|
||||||
@ -19,31 +18,35 @@ export const WelcomeSection = ({ data = null, loading = false, error = '' }) =>
|
|||||||
} else if (error) {
|
} else if (error) {
|
||||||
description = error;
|
description = error;
|
||||||
} else if (currentQuarter && currentYear) {
|
} else if (currentQuarter && currentYear) {
|
||||||
const formattedDeadline = formatDate(deadline);
|
description = `Current reporting period: ${currentQuarter} ${currentYear}`;
|
||||||
description = `Current reporting period: ${currentQuarter} ${currentYear}${formattedDeadline !== '—' ? ` (Due: ${formattedDeadline})` : ''}`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-[4rem] bg-gray-50">
|
<div className="min-h-[4rem] bg-gray-50">
|
||||||
<HeaderBar />
|
<HeaderBar />
|
||||||
|
|
||||||
<div className="max-w-[1280px] mx-auto px-4 pt-4 pb-2">
|
<div className="max-w-[1280px] mx-auto px-4 pt-4 pb-2">
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<h2 className="w-[360px] text-[18px] leading-[28px] font-medium text-[#232528]">
|
<h2 className="w-[360px] text-[18px] leading-[28px] font-medium text-[#232528]">
|
||||||
Welcome{' '}
|
Welcome{' '}
|
||||||
{(() => {
|
{(() => {
|
||||||
try {
|
try {
|
||||||
const userProfile = JSON.parse(sessionStorage.getItem('user_profile'));
|
const userProfile = JSON.parse(sessionStorage.getItem('user_profile'));
|
||||||
return userProfile?.name ? userProfile.name : '';
|
return userProfile?.name ? userProfile.name : '';
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error reading user_profile from sessionStorage:', error);
|
console.error('Error reading user_profile from sessionStorage:', error);
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
})()} !
|
})()}!
|
||||||
</h2>
|
</h2>
|
||||||
<p className={`w-[360px] text-[14px] leading-[24px] font-normal ${error ? 'text-red-600' : 'text-[#5F646D]'}`}>{description}</p>
|
<p
|
||||||
|
className={`w-[360px] text-[14px] leading-[24px] font-normal ${
|
||||||
|
error ? 'text-red-600' : 'text-[#5F646D]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
Loading…
Reference in New Issue
Block a user