+
);
};
diff --git a/ipi-survey-platform/src/components/admin/SubmissionTable.jsx b/ipi-survey-platform/src/components/admin/SubmissionTable.jsx
index 49e3208..bee0393 100644
--- a/ipi-survey-platform/src/components/admin/SubmissionTable.jsx
+++ b/ipi-survey-platform/src/components/admin/SubmissionTable.jsx
@@ -1,125 +1,68 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
import Table from '@/components/common/Table';
+import apiClient from '../../services/api/apiClient.js';
+import { CheckCircle2, XCircle, Eye } from 'lucide-react';
+import Footer from '../common/Footer.jsx';
+const SubmissionTable = ({ selectedQuarter, selectedYear }) => {
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(true);
+ useEffect(() => {
+ const fetchDashboardData = async () => {
+ try {
+ setLoading(true);
+ const response = await apiClient.get('/admin_dashboard');
+ const result = response?.data;
+ if (result?.status === 'success') {
+ setData(result.recent_submissions || []);
+ } else {
+ console.error('Error: Invalid response', result);
+ }
+ } catch (error) {
+ console.error('Error fetching recent submissions:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchDashboardData();
+ }, []);
-const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
-const checkCircleSrc = '/assets/images/check-circle-fill 1.svg';
-const xCircleSrc = '/assets/images/warning-circle-fill 1.svg';
-const eyeIconSrc = '/assets/images/User-active.svg';
-
-const submissions = [
- {
- establishment: 'CASCADE MARINE FOODS LLC',
- emirate: 'Sharjah',
- productCount: '5',
- year: '2025',
- quarter: 'Q4',
- lastSubmission: '10/12/2024',
- deadline: '20/12/2024',
- },
- {
- establishment: 'Khazan meat factory',
- emirate: 'Sharjah',
- productCount: '8',
- year: '2025',
- quarter: 'Q3',
- lastSubmission: '15/11/2024',
- deadline: '15/12/2024',
- },
- {
- establishment: 'SPINNEYS FRESH FOOD INDUSTRIES L.L.C',
- emirate: 'Dubai',
- productCount: '6',
- year: '2025',
- quarter: 'Q2',
- lastSubmission: '12/12/2024',
- deadline: '10/12/2024',
- },
- {
- establishment: 'FRESHLY FROZEN FOODS FACTORY L.L.C',
- emirate: 'Dubai',
- productCount: '8',
- year: '2025',
- quarter: 'Q1',
- lastSubmission: '08/12/2024',
- deadline: '18/12/2024',
- },
- {
- establishment: 'SAHAR FOOD INDUSTRY (L.L.C)',
- emirate: 'Dubai',
- productCount: '8',
- year: '2025',
- quarter: 'Q4',
- lastSubmission: '08/12/2024',
- deadline: '18/12/2024',
- },
- {
- establishment: 'CONTINENTAL FOOD PROCESSING LLC',
- emirate: 'Ajman',
- productCount: '8',
- year: '2025',
- quarter: 'Q3',
- lastSubmission: '08/12/2024',
- deadline: '18/12/2024',
- },
- {
- establishment: 'AL KHAZNA POULTRY FARM',
- emirate: 'Abu Dhabi',
- productCount: '8',
- year: '2025',
- quarter: 'Q2',
- lastSubmission: '08/12/2024',
- deadline: '18/12/2024',
- },
- {
- establishment: 'DIAMOND MEAT PROCESSING L.L.C',
- emirate: 'Abu Dhabi',
- productCount: '8',
- year: '2025',
- quarter: 'Q2',
- lastSubmission: '08/12/2024',
- deadline: '18/12/2024',
- },
- {
- establishment: 'ALLIANCE FOODS CO L.L.C',
- emirate: 'Abu Dhabi',
- productCount: '8',
- year: '2025',
- quarter: 'Q2',
- lastSubmission: '08/12/2024',
- deadline: '18/12/2024',
- },
- {
- establishment: 'KRUSTASIA FOODS L.L.C',
- emirate: 'Dubai',
- productCount: '4',
- year: '2025',
- quarter: 'Q1',
- lastSubmission: '14/12/2024',
- deadline: '21/12/2024',
- },
-];
-
-const SubmissionTable = () => {
- const [search, setSearch] = useState('');
- const [selectedYear, setSelectedYear] = useState('2025');
- const [selectedQuarter, setSelectedQuarter] = useState('Q4');
- const [loading, setLoading] = useState(false);
-
- // Filter submissions by selected year and quarter
- const filteredByQuarterYear = useMemo(() => {
- return submissions.filter(
- (item) => item.year === selectedYear && item.quarter === selectedQuarter
- );
- }, [selectedYear, selectedQuarter]);
-
- // Apply search filter to the filteredByQuarterYear results
const filtered = useMemo(() => {
- if (!search.trim()) return filteredByQuarterYear;
- const normalized = search.trim().toLowerCase();
- return filteredByQuarterYear.filter((item) =>
- Object.values(item).join(' ').toLowerCase().includes(normalized)
- );
- }, [search, filteredByQuarterYear]);
+ let list = [...data];
+ if (selectedQuarter !== 'None') {
+ list = list.filter((item) => item.quarter === selectedQuarter);
+ }
+ if (selectedYear !== 'None') {
+ list = list.filter((item) => String(item.year) === String(selectedYear));
+ }
+ return list;
+ }, [data, selectedQuarter, selectedYear]);
+
+ const titleText = useMemo(() => {
+ const count = filtered.length;
+ if (selectedQuarter !== 'None' && selectedYear !== 'None') {
+ return `Recent 10 Submissions for Selected Quarter ${selectedQuarter} ${selectedYear} (${count})`;
+ } else if (selectedQuarter !== 'None') {
+ return `Recent 10 Submissions for Selected Quarter ${selectedQuarter} (${count})`;
+ } else if (selectedYear !== 'None') {
+ return `Recent 10 Submissions for Selected Year ${selectedYear} (${count})`;
+ } else {
+ return `Recent 10 Submissions (${count})`;
+ }
+ }, [selectedQuarter, selectedYear, filtered]);
+
+ const formatDate = (dateStr) => {
+ if (!dateStr) return '-';
+ const date = new Date(dateStr);
+ const formatted = date.toLocaleString('en-GB', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: true,
+ });
+ return formatted.replace(/\s?(am|pm)$/i, (match) => match.toUpperCase());
+ };
const headers = [
'Establishment',
@@ -139,25 +82,25 @@ const SubmissionTable = () => {
const normalized = status?.toLowerCase();
if (normalized === 'approved') {
return (
-
+
Approved
);
} else if (normalized === 'rejected') {
return (
-
+
Rejected
);
} else if (normalized === 'pending') {
return (
-
+
Pending
);
} else {
return (
-
+
{status || '-'}
);
@@ -165,69 +108,59 @@ const SubmissionTable = () => {
};
const tableRows = filtered.map((item) => [
- item.establishment,
- item.emirate,
- item.year,
- item.quarter,
- item.productCount,
- item.submittedBy,
- item.submissionDateTime,
- renderStatusBadge(item.status),
- item.reviewer,
- item.reviewedOn,
-
{icon &&
@@ -18,6 +18,13 @@ const StatCard = ({ icon = null, label, value, width = 200.4 }) => {
{value}
+
+ {tooltipText && (
+ {icon}
}
-
+
{label}
+ {tooltipText}
+
+
+ )}
- 
- 
- 
-
,
+ item?.establishment?.factory_name || '-',
+ item?.establishment?.establishment_emirate?.name || '-',
+ item?.year || '-',
+ item?.quarter || '-',
+ item?.product_count || '-',
+ item?.created_by || '-',
+ {formatDate(item?.created_at)},
+ renderStatusBadge(item?.status),
+ item?.updated_by || '-',
+ {formatDate(item?.updated_at)},
+
+
,
]);
const columnWidths = [240, 120, 100, 100, 130, 150, 180, 150, 150, 180, 120];
- const titleText = useMemo(() => {
- const count = filtered.length;
- if (selectedQuarter !== 'None' && selectedYear !== 'None') {
- return `Recent 10 Submissions for Selected Quarter ${selectedQuarter} ${selectedYear} (${count})`;
- } else if (selectedQuarter !== 'None') {
- return `Recent 10 Submissions for Selected Quarter ${selectedQuarter} (${count})`;
- } else if (selectedYear !== 'None') {
- return `Recent 10 Submissions for Selected Year ${selectedYear} (${count})`;
- } else {
- return `Recent 10 Submissions (${count})`;
- }
- }, [selectedQuarter, selectedYear, filtered]);
-
- const toolbar = (
-
+
+
+
+
+ navigate(`/admin/validations/${item.id}`)}
+ />
+
+ View
+
+
+
-
- );
-
return (
+ <>
-
- - {titleText} -
-
- 
- setSearch(event.target.value)}
- placeholder="Search Establishment or Status"
- className="h-10 w-full rounded-md border border-[#C3C6CB] pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#92722A]"
- />
-
-
- {toolbar}
+
- {
- if (ci === 1) {
- return {value};
- }
- if (ci === 4) {
- const disabled = !normalizedHistory[ri];
- return (
-
- );
- }
- return value;
- }}
- />
-
+ <>
+
-
+
+
{loading ? (
+ {titleText} +
+
Loading submissions...
@@ -245,16 +178,18 @@ const SubmissionTable = () => {
)}
-
+
+
+
);
};
-export default SubmissionTable
\ No newline at end of file
+export default SubmissionTable;
\ No newline at end of file
diff --git a/ipi-survey-platform/src/components/common/Footer.jsx b/ipi-survey-platform/src/components/common/Footer.jsx
new file mode 100644
index 0000000..85d0598
--- /dev/null
+++ b/ipi-survey-platform/src/components/common/Footer.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Phone, Smartphone, Headphones, Instagram, Facebook, Linkedin, Youtube } from 'lucide-react';
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx b/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
index f759eb0..9592e4a 100644
--- a/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
+++ b/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
@@ -1,53 +1,50 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import Table from '@/components/common/Table';
+import Footer from '../common/Footer';
const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
-const caretDownSrc = '/assets/images/CaretDown.svg';
+
+const formatDateTime = (value) => {
+ if (!value) return '—';
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return '—';
+ const formatted = date.toLocaleString('en-GB', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: true,
+ });
+ return formatted.replace(/\s?(am|pm)$/i, (match) => match.toUpperCase());
+};
const getStatusClass = (status) => {
const normalized = String(status || '').toLowerCase();
if (normalized === 'approved') {
return 'inline-flex items-center rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-800';
}
- if (normalized === 'pending' || normalized === 'under review' || normalized === 'in-progress') {
+ 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';
}
- if (normalized === 'rejected' || normalized === 'returned') {
+ 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-gray-100 px-2 py-1 text-xs font-medium text-gray-800';
};
-const formatQuarter = (quarter, year) => {
- if (!quarter && !year) return '—';
- return [quarter || '', year || ''].filter(Boolean).join(' ');
-};
-
-const formatDate = (value) => {
- if (!value) return '—';
- const date = new Date(value);
- if (Number.isNaN(date.getTime())) return '—';
- return date.toLocaleDateString('en-GB');
-};
-
-const statusOptions = [
- { label: 'All Status', value: 'all' },
- { label: 'Approved', value: 'approved' },
- { label: 'Under Review', value: 'under review' },
- { label: 'Pending', value: 'pending' },
- { label: 'Returned', value: 'returned' },
- { label: 'Rejected', value: 'rejected' },
-];
-
-const normalizeStatus = (status) => String(status || '').toLowerCase();
-
const downloadCsv = (rows) => {
if (!rows.length) return;
- const headers = ['Quarter', 'Status', 'Submission Date', 'Products'];
+ const headers = ['Survey Name', 'Year', 'Quarter', 'Status', 'Submission On', 'Products'];
const csvRows = [headers.join(',')];
rows.forEach((row) => {
- csvRows.push(row.slice(0, 4).map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','));
+ csvRows.push(
+ row
+ .slice(0, 6)
+ .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);
@@ -62,57 +59,72 @@ const downloadCsv = (rows) => {
export const SubmissionHistory = ({ history = [], loading = false, error = '' }) => {
const [searchTerm, setSearchTerm] = React.useState('');
- const [statusFilter, setStatusFilter] = React.useState('all');
const navigate = useNavigate();
const normalizedHistory = React.useMemo(() => {
if (!Array.isArray(history)) return [];
return history.map((entry, index) => ({
id: entry?.id ?? index,
- quarter: formatQuarter(entry?.quarter, entry?.year),
+ survey_name: '—',
+ year: entry?.year || '—',
+ quarter: entry?.quarter || '—',
status: entry?.status || 'Pending',
- date: formatDate(entry?.created_at || entry?.submitted_on),
- products: entry?.product_count,
+ submission_on: formatDateTime(entry?.created_at || entry?.submitted_on),
+ products: entry?.product_count ?? 0,
}));
}, [history]);
const filteredRows = normalizedHistory.filter((entry) => {
const term = searchTerm.trim().toLowerCase();
- const matchesSearch =
+ return (
!term ||
+ entry.year.toString().includes(term) ||
entry.quarter.toLowerCase().includes(term) ||
- entry.status.toLowerCase().includes(term) ||
- entry.date.toLowerCase().includes(term);
- const matchesStatus =
- statusFilter === 'all' || normalizeStatus(entry.status) === statusFilter;
- return matchesSearch && matchesStatus;
- });
- const rowsData = filteredRows.map((s) => {
- const count = Number.isFinite(Number(s.products)) ? Number(s.products) : null;
- const display = count === null ? '—' : `${count} ${count === 1 ? 'product' : 'products'}`;
- return [s.quarter, s.status, s.date, display, 'View'];
+ entry.status.toLowerCase().includes(term)
+ );
});
- const handleViewSubmission = React.useCallback(() => {
- navigate('/history');
- }, [navigate]);
+ const navigateToView = (id) => navigate(`/history/${id}`);
+
+ const rowsData = filteredRows.map((item) => {
+ const productCount = Number(item.products) || 0;
+ const productLabel = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
+
+ return [
+ item.survey_name,
+ item.year,
+ item.quarter,
+ {item.status},
+ {item.submission_on},
+ productLabel,
+ ,
+ ];
+ });
const toolbar = (
-
+
Submission History
++ Submission History +
{loading && Loading…}
{error && {error}}
setSearchTerm(e.target.value)}
- placeholder="Search submissions"
+ placeholder="Search Establishment"
className="w-full h-10 rounded-md border border-[#E5E7EB] pl-10 pr-3 text-sm focus:outline-none"
/>
![]()
-
-
- 
-
+
@@ -161,32 +165,28 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
);
return (
-
+
+ );
+};
+
+export default SurveyCarousel;
\ No newline at end of file
diff --git a/ipi-survey-platform/src/components/dashboard/SurveyStatus.jsx b/ipi-survey-platform/src/components/dashboard/SurveyStatus.jsx
index 2b79a09..05bc22b 100644
--- a/ipi-survey-platform/src/components/dashboard/SurveyStatus.jsx
+++ b/ipi-survey-platform/src/components/dashboard/SurveyStatus.jsx
@@ -1,5 +1,6 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
+import SurveyCarousel from './SurveyCarousel';
const formatQuarterYear = (quarter, year) => {
if (!quarter || !year) return '—';
@@ -10,7 +11,11 @@ const formatDate = (value) => {
if (!value) return '—';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '—';
- return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+ return date.toLocaleDateString('en-GB', {
+ day: '2-digit',
+ month: 'short',
+ year: 'numeric',
+ });
};
const formatRelativeDays = (value) => {
@@ -21,106 +26,80 @@ const formatRelativeDays = (value) => {
const diffMs = deadline.getTime() - now.getTime();
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
if (!Number.isFinite(diffDays)) return '—';
- if (diffDays < 0) return `${Math.abs(diffDays)} days overdue`;
+ if (diffDays < 0) return `${Math.abs(diffDays)} day${Math.abs(diffDays) === 1 ? '' : 's'} overdue`;
if (diffDays === 0) return 'Due today';
- return `${diffDays} day${diffDays === 1 ? '' : 's'}`;
+ return `Due in ${diffDays} day${diffDays === 1 ? '' : 's'}`;
};
export const SurveyStatus = ({ data = null, loading = false, error = '' }) => {
const navigate = useNavigate();
- const handleStartSurvey = () => {
- navigate('/survey', {
- state: {
- currentQuarter: data?.current_quarter,
- currentYear: data?.current_quarter_year
- }
- });
+
+ const handleStartSurvey = (survey) => {
+ console.log('Starting survey:', survey.title);
};
- const submissionStatus = data?.submission_status || '—';
- const currentQuarter = formatQuarterYear(data?.current_quarter, data?.current_quarter_year);
- const nextDeadlineDate = formatDate(data?.next_deadline);
- const nextDeadlineRelative = formatRelativeDays(data?.next_deadline);
- const lastSubmissionQuarter = formatQuarterYear(data?.last_submission?.quarter, data?.last_submission?.year);
- const lastSubmissionDate = formatDate(data?.last_submission?.submitted_on);
+ const surveyData = data || {};
+ const nextDeadline = surveyData?.next_deadline;
+ const formattedDueDate = formatDate(nextDeadline);
+ const relativeDue = formatRelativeDays(nextDeadline);
+
+ const surveys = [
+ {
+ title: `${formatQuarterYear(surveyData.previous_quarter, surveyData.previous_quarter_year)} Survey Ready`,
+ subtitle: 'Complete your quarterly industrial production data submission',
+ dueDate: formattedDueDate,
+ relativeDue,
+ estTime: '15–20 minutes',
+ status: surveyData?.submission_status || 'Pending',
+ },
+ {
+ title: `${formatQuarterYear(surveyData.current_quarter, surveyData.current_quarter_year)} Survey Ready`,
+ subtitle: 'Complete your quarterly industrial production data submission',
+ dueDate: formattedDueDate,
+ relativeDue,
+ estTime: '15–20 minutes',
+ status: surveyData?.submission_status || 'Pending',
+ },
+ {
+ title: `${formatQuarterYear(surveyData.next_quarter, surveyData.next_quarter_year)} Survey Ready`,
+ subtitle: 'Complete your quarterly industrial production data submission',
+ dueDate: formattedDueDate,
+ relativeDue,
+ estTime: '15–20 minutes',
+ status: surveyData?.submission_status || 'Pending',
+ },
+ ];
const heroTitle = loading
? 'Loading survey status…'
: error
- ? 'Unable to load survey status'
- : currentQuarter !== '—'
- ? `${currentQuarter} Survey`
- : 'Survey status unavailable';
+ ? 'Unable to load survey status'
+ : 'Survey Overview';
const heroSubtitle = loading
? 'Fetching the latest reporting information.'
: error
- ? error
- : 'Complete your quarterly industrial production data submission';
+ ? error
+ : 'Complete your quarterly industrial production data submission';
return (
+
+
+
+
+
+
+ + {current?.title || '—'} +
++ {current?.subtitle || ''} +
+
+ Due Date: {current?.dueDate || '—'}
+ Est. time: {current?.estTime || '—'}
+ Status: {current?.status || '—'}
+
+
+
+
+
+
+
+
+
+
+
+ {surveys.map((_, idx) => (
+ setCurrentIndex(idx)}
+ className={`h-[8px] w-[8px] rounded-full cursor-pointer transition ${
+ idx === currentIndex ? 'bg-[#92722A]' : 'bg-gray-300'
+ }`}
+ />
+ ))}
+
+
-
-
-
-
-
-
-
-
-
- {heroTitle}
-{heroSubtitle}
-
- Due: {nextDeadlineDate}
- {nextDeadlineRelative}
-
-
-
diff --git a/ipi-survey-platform/src/components/layout/HeaderBar.jsx b/ipi-survey-platform/src/components/layout/HeaderBar.jsx
index f7a57f9..defa5e8 100644
--- a/ipi-survey-platform/src/components/layout/HeaderBar.jsx
+++ b/ipi-survey-platform/src/components/layout/HeaderBar.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
-
+import { FileSearch } from 'lucide-react';
const logoSrc = '/assets/images/FCSCLogo.svg';
const surveyIconActiveSrc = '/assets/images/Vector.svg';
const surveyIconInactiveSrc = '/assets/images/Vectorblack.svg';
@@ -90,6 +90,29 @@ const HeaderBar = () => {
)}
+
+
+ `inline-flex items-center gap-2 pb-1 border-b-2 ${
+ isActive
+ ? 'text-[#92722A] font-medium border-[#92722A]'
+ : 'text-[#232528] hover:text-gray-900 border-transparent'
+ }`
+ }
+>
+ {({ isActive }) => (
+ <>
+
+
`inline-flex items-center gap-2 pb-1 border-b-2 ${isActive ? 'text-[#92722A] font-medium border-[#92722A]' : 'text-[#232528] hover:text-gray-900 border-transparent'}`}
diff --git a/ipi-survey-platform/src/pages/Admin/AdminDashboard.jsx b/ipi-survey-platform/src/pages/Admin/AdminDashboard.jsx
index 18a1339..3e8c6df 100644
--- a/ipi-survey-platform/src/pages/Admin/AdminDashboard.jsx
+++ b/ipi-survey-platform/src/pages/Admin/AdminDashboard.jsx
@@ -98,36 +98,42 @@ const AdminDashboard = () => {
value={loading ? '--' : summary.total_establishments}
width={290}
icon={
}
+ tooltipText="Total establishments enrolled in the survey for selected quarter."
/>
diff --git a/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx b/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
index 661f85d..bddb4e3 100644
--- a/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
+++ b/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import AdminHeader from '@/components/admin/AdminHeader';
+import { getSubmissionById } from '@/services/admin/submission';
const caretUpSrc = '/assets/images/caret-up.svg';
const establishmentIconSrc = '/assets/images/Establishment.svg';
@@ -13,21 +14,6 @@ const femaleEmployeesIconSrc = '/assets/images/femaleemployess.svg';
const uaeIconSrc = '/assets/images/uae.svg';
const nonUaeIconSrc = '/assets/images/nonuae.svg';
-const establishmentDetails = [
- { label: 'Establishment Name', value: 'ABC Manufacturing LLC' },
- { label: 'Establishment ID', value: 'MSCensus-23-05-002829' },
- { label: 'Email', value: 'info@abcmg.com' },
- { label: 'Emirate', value: 'Abu Dhabi' },
-];
-
-const employmentDetails = [
- { label: 'Total Employees', value: '120' },
- { label: 'Male Employees', value: '80' },
- { label: 'Female Employees', value: '40' },
- { label: 'UAE Nationals', value: '30' },
- { label: 'Non-UAE Nationals', value: '90' },
-];
-
const employmentIcons = {
'Total Employees': totalEmployeesIconSrc,
'Male Employees': maleEmployeesIconSrc,
@@ -36,75 +22,233 @@ const employmentIcons = {
'Non-UAE Nationals': nonUaeIconSrc,
};
-const quarterLegend = [
- { label: 'Previous Quarter', color: '#1D4ED8' },
- { label: 'Current Quarter', color: '#1E7C34' },
- { label: 'Next Quarter', color: '#D97706' },
-];
-
-const productDetails = [
- {
- code: '04012000',
- name: 'Milk',
- submittedOn: '28/03/2025',
- unit: 'Liters',
- capacity: '20000',
- quarters: [
- { label: 'Q1-2025', color: '#0C64F6', cellColor: '#F4F8FF' },
- { label: 'Q2-2025', color: '#1E7C34', cellColor: '#F3FAF4' },
- { label: 'Q3-2025', color: '#D97706', cellColor: '#FFF6EC' },
- ],
- rows: [
- { label: 'Quantity (liters)', values: ['500', '200', '50'] },
- { label: 'Cost (AED)', values: ['40,000', '20,000', '20,000'] },
- { label: 'Reason', values: ['--', 'Seasonal production surge', 'Higher demand expected'] },
- ],
- remarks: 'NA',
- },
- {
- code: '07028000',
- name: 'Iron',
- submittedOn: '18/08/2025',
- unit: 'Kilogram',
- capacity: '50000',
- quarters: [
- { label: 'Q1-2025', color: '#0C64F6', cellColor: '#F4F8FF' },
- { label: 'Q2-2025', color: '#1E7C34', cellColor: '#F3FAF4' },
- { label: 'Q3-2025', color: '#D97706', cellColor: '#FFF6EC' },
- ],
- rows: [
- { label: 'Quantity (kilograms)', values: ['800', '400', '80'] },
- { label: 'Cost (AED)', values: ['70,000', '40,000', '30,000'] },
- { label: 'Reason', values: ['--', 'Seasonal procurement', 'Higher demand expected'] },
- ],
- remarks: 'NA',
- },
-];
-
-const infoBadgeClass = 'inline-flex items-center rounded-[10px] border border-[#E5D7AA] bg-[#FDF9EB] px-3 py-1 text-sm font-medium text-[#92722A]';
-
const ValidationReview = () => {
const navigate = useNavigate();
const { id } = useParams();
const [toast, setToast] = React.useState(null);
const [isRejectOpen, setIsRejectOpen] = React.useState(false);
const [rejectReason, setRejectReason] = React.useState('');
+ const [loading, setLoading] = React.useState(true);
+ const [error, setError] = React.useState(null);
+ const [submissionData, setSubmissionData] = React.useState(null);
+
+ React.useEffect(() => {
+ const fetchSubmission = async () => {
+ if (!id) {
+ setError('No submission ID provided');
+ setLoading(false);
+ return;
+ }
+
+ try {
+ setLoading(true);
+ setError(null);
+
+ const result = await getSubmissionById(id);
+
+ let data = null;
+ if (result?.status === 'success' && result?.data) {
+ data = result.data;
+ } else if (result?.data) {
+ data = result.data;
+ } else {
+ data = result;
+ }
+
+ if (!data) {
+ throw new Error('No data received from API');
+ }
+
+ setSubmissionData(data);
+ } catch (err) {
+ console.error('Failed to load submission details:', err);
+ setError(err.message || 'Unable to load submission details. Please try again later.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchSubmission();
+ }, [id]);
const showApproveToast = () => {
- setToast({ type: 'success', text: 'ABC Manufacturing LLC has been approved successfully.' });
- window.clearTimeout((showApproveToast._t));
- // Auto-hide after 4 seconds
+ const establishmentName = submissionData?.establishment?.factory_name || 'Establishment';
+ setToast({ type: 'success', text: `${establishmentName} has been approved successfully.` });
+ window.clearTimeout(showApproveToast._t);
showApproveToast._t = window.setTimeout(() => setToast(null), 4000);
};
const handleRejectSubmit = () => {
- setToast({ type: 'info', text: rejectReason ? `Submission rejected. Reason: ${rejectReason}` : 'Submission rejected.' });
- window.clearTimeout((showApproveToast._t));
+ setToast({
+ type: 'info',
+ text: rejectReason ? `Submission rejected. Reason: ${rejectReason}` : 'Submission rejected.'
+ });
+ window.clearTimeout(showApproveToast._t);
showApproveToast._t = window.setTimeout(() => setToast(null), 4000);
setIsRejectOpen(false);
setRejectReason('');
};
+ if (loading) {
+ return (
+
-
-
-
-
-
- Submission Status
-{loading ? 'Loading…' : submissionStatus}
-{currentQuarter !== '—' ? `${currentQuarter} submission required` : 'Awaiting reporting period data.'}
-
-
-
- Next Deadline
-{loading ? 'Loading…' : nextDeadlineRelative}
-{`Due on ${nextDeadlineDate}`}
-
-
- Last Submission
-{loading ? 'Loading…' : lastSubmissionQuarter}
-{`Submitted ${lastSubmissionDate}`}
-
-
+
-
- Submission Status
-{loading ? 'Loading…' : submissionStatus}
-{currentQuarter !== '—' ? `${currentQuarter} submission required` : 'Awaiting reporting period data.'}
-
-
- Next Deadline
-{loading ? 'Loading…' : nextDeadlineRelative}
-{`Due on ${nextDeadlineDate}`}
-
-
- Last Submission
-{loading ? 'Loading…' : lastSubmissionQuarter}
-{`Submitted ${lastSubmissionDate}`}
-
+ {loading ? (
+
);
};
+
+export default SurveyStatus;
\ No newline at end of file
diff --git a/ipi-survey-platform/src/components/dashboard/WelcomeSection.jsx b/ipi-survey-platform/src/components/dashboard/WelcomeSection.jsx
index fc246d9..37fe7ed 100644
--- a/ipi-survey-platform/src/components/dashboard/WelcomeSection.jsx
+++ b/ipi-survey-platform/src/components/dashboard/WelcomeSection.jsx
@@ -29,7 +29,18 @@ export const WelcomeSection = ({ data = null, loading = false, error = '' }) =>
Loading survey status...
+ ) : error ? (
+ {error}
+ ) : (
+
-
Welcome Back
++ Welcome{' '} + {(() => { + try { + const userProfile = JSON.parse(sessionStorage.getItem('user_profile')); + return userProfile?.name ? userProfile.name : ''; + } catch (error) { + console.error('Error reading user_profile from sessionStorage:', error); + return ''; + } + })()} ! +
{description}
+
+ );
+ }
+
+ if (error || !submissionData) {
+ return (
+
+
+ Loading submission details...
+
+
+
+ );
+ }
+
+ const establishment = submissionData?.establishment || {};
+
+ const establishmentDetails = [
+ {
+ label: 'Establishment Name',
+ value: establishment.factory_name || '—'
+ },
+ {
+ label: 'Establishment ID',
+ value: establishment.establishment_code || '—'
+ },
+ {
+ label: 'Email',
+ value: establishment.establishment_contact_email || '—'
+ },
+ {
+ label: 'Emirate',
+ value: establishment.establishment_address || '—'
+ },
+ ];
+
+ const totalEmiratiMale = establishment.emirati_male || 0;
+ const totalEmiratiFemale = establishment.emirati_female || 0;
+ const totalNonEmiratiMale = establishment.non_emirati_male || 0;
+ const totalNonEmiratiFemale = establishment.non_emirati_female || 0;
+ const totalMale = totalEmiratiMale + totalNonEmiratiMale;
+ const totalFemale = totalEmiratiFemale + totalNonEmiratiFemale;
+ const totalEmirati = totalEmiratiMale + totalEmiratiFemale;
+ const totalNonEmirati = totalNonEmiratiMale + totalNonEmiratiFemale;
+
+ const employmentDetails = [
+ {
+ label: 'Total Employees',
+ value: establishment.total_employees?.toString() || (totalMale + totalFemale).toString() || '—'
+ },
+ {
+ label: 'Male Employees',
+ value: totalMale.toString() || '—'
+ },
+ {
+ label: 'Female Employees',
+ value: totalFemale.toString() || '—'
+ },
+ {
+ label: 'UAE Nationals',
+ value: totalEmirati.toString() || '—'
+ },
+ {
+ label: 'Non-UAE Nationals',
+ value: totalNonEmirati.toString() || '—'
+ },
+ ];
+
+ const quarterPeriods = submissionData?.quarter_periods || {};
+ const previousQuarter = quarterPeriods.previous_quarter || 'Q1';
+ const currentQuarter = quarterPeriods.current_quarter || 'Q2';
+ const forecastQuarter = quarterPeriods.forecast_quarter || 'Q3';
+ const year = submissionData?.year || new Date().getFullYear();
+
+ const products = submissionData?.products || [];
+ const productDetails = Array.isArray(products) ? products.map((product) => {
+ const quarters = [
+ { label: `${previousQuarter}-${year}`, color: '#0C64F6', cellColor: '#F4F8FF', type: 'previous' },
+ { label: `${currentQuarter}-${year}`, color: '#1E7C34', cellColor: '#F3FAF4', type: 'current' },
+ { label: `${forecastQuarter}-${year}`, color: '#D97706', cellColor: '#FFF6EC', type: 'forecast' },
+ ];
+
+ const unitValue = product.unit?.uom || 'units';
+ const unit = String(unitValue);
+
+ const previousQuantity = product.previous_quantity || '—';
+ const previousCost = product.previous_cost || '—';
+ const currentQuantity = product.current_quantity || '—';
+ const currentCost = product.current_cost || '—';
+ const forecastQuantity = product.forecast_quantity || '—';
+ const forecastCost = product.forecast_cost || '—';
+
+ const variationReason = product.variation_reason?.reason || product.other_variation_reason || '—';
+ const zeroTargetReason = product.zero_target_reason?.reason || product.other_zero_target_reason || '—';
+
+ return {
+ code: product.product?.hs_code || '—',
+ name: product.product?.product_name || '—',
+ submittedBy: submissionData?.created_by || 'System',
+ submittedOn: submissionData?.created_at ? new Date(submissionData.created_at).toLocaleDateString('en-GB') : '—',
+ unit: unit,
+ capacity: product.annual_installed_capacity?.toString() || '—',
+ quarters,
+ rows: [
+ {
+ label: `Quantity (${unit.toLowerCase()})`,
+ values: [
+ previousQuantity.toString(),
+ currentQuantity.toString(),
+ forecastQuantity.toString()
+ ]
+ },
+ {
+ label: 'Cost (AED)',
+ values: [
+ previousCost !== '—' ? Number(previousCost).toLocaleString() : '—',
+ currentCost !== '—' ? Number(currentCost).toLocaleString() : '—',
+ forecastCost !== '—' ? Number(forecastCost).toLocaleString() : '—'
+ ]
+ },
+ {
+ label: 'Reason',
+ values: [
+ '—',
+ variationReason,
+ zeroTargetReason
+ ]
+ },
+ ],
+ remarks: product.remarks || 'NA',
+ };
+ }) : [];
+
return (
+
+
+
+
+
+
+
+
+ Error Loading Submission
+{error || 'Submission not found'}
+ +
-
*/}
-
-
-
- Submission Details
-Submission #{id || '—'}
-
@@ -210,79 +340,88 @@ const ValidationReview = () => {
-
- {productDetails.map((product) => (
-
-
-
-
- Product: {product.code} - {product.name}
-
- Submitted By: {product.submittedOn}
- Unit: {product.unit}
- Capacity: {product.capacity}
-
-
- {quarterLegend.map((item) => (
-
-
- {item.label}
+ {productDetails.length > 0 ? (
+
+ {productDetails.map((product, idx) => (
+
+
+ ))}
+
+ ) : (
+
+
-
+ Product: {product.code} - {product.name}
- ))}
-
-
-
-
+
- | Description | - {product.quarters.map((quarter) => ( -- {quarter.label} - | - ))} -||
|---|---|---|---|
| {row.label} | - {row.values.map((value, index) => ( -
+
+ Submitted By:
+ {product.submittedBy}
+
+
+ Unit:
+ {product.unit}
+
+
+ Capacity:
+ {product.capacity}
+
+
+
+
+
+
+
+
| ||
| {row.label} | + {row.values.map((value, index) => ( ++ {value} + | + ))} +
-
+
- Remarks: {product.remarks}
+
-
- ))}
-
+
-
+ Remarks: {product.remarks}
+
+
+ Admin Remarks
+
+
- Admin Remarks
-
-
-
+
+ )}
No products found for this submission.
+
@@ -359,4 +498,4 @@ const ValidationReview = () => {
);
};
-export default ValidationReview;
+export default ValidationReview;
\ No newline at end of file
diff --git a/ipi-survey-platform/src/pages/Admin/Validations.jsx b/ipi-survey-platform/src/pages/Admin/Validations.jsx
index b713edd..de0fcb6 100644
--- a/ipi-survey-platform/src/pages/Admin/Validations.jsx
+++ b/ipi-survey-platform/src/pages/Admin/Validations.jsx
@@ -4,9 +4,9 @@ import AdminHeader from '@/components/admin/AdminHeader';
import Table from '@/components/common/Table';
import { SelectField } from '@/components/common/FormControls';
import { getSubmissions } from '@/services/admin/submission';
-
+import { CheckCircle2, XCircle, Eye } from 'lucide-react';
+import Footer from '@/components/common/Footer';
const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
-const downloadIconSrc = '/assets/images/downloadsimple.svg';
const caretUpSrc = '/assets/images/caret-up.svg';
const STATUS_VARIANTS = {
@@ -22,6 +22,21 @@ const SUMMARY_VARIANTS = {
rejected: { background: '#FEF2F2', label: '#B52520', value: '#232528' },
};
+const formatDateTime = (value) => {
+ if (!value) return '—';
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return '—';
+ const formatted = date.toLocaleString('en-GB', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: true,
+ });
+ return formatted.replace(/\s?(am|pm)$/i, (m) => m.toUpperCase());
+};
+
const Badge = ({ children, status }) => {
const variant = STATUS_VARIANTS[status] || { background: '#F2F4F7', text: '#475467', border: '#EAECF0' };
return (
@@ -39,7 +54,6 @@ const ManageSubmissions = () => {
const [submissions, setSubmissions] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);
-
const [search, setSearch] = React.useState('');
const [year, setYear] = React.useState('');
const [quarter, setQuarter] = React.useState('');
@@ -48,31 +62,26 @@ const ManageSubmissions = () => {
const [currentPage, setCurrentPage] = React.useState(1);
const pageSize = 10;
- // 🔹 Fetch data from backend
React.useEffect(() => {
const fetchSubmissions = async () => {
try {
const result = await getSubmissions();
-
- // Handle success or direct data array
const data = result?.status === 'success' ? result.data : result;
-
- // Map API fields to table fields
+
const mapped = (data || []).map((item) => ({
id: item.id,
- establishment: '', // blank
- emirate: '', // blank
- year: String(item.year ?? ''),
- quarter: item.quarter ?? '',
- products: '', // blank
- submittedBy: item.created_by ?? '',
- submittedAt: item.created_at
- ? new Date(item.created_at).toLocaleString()
- : '',
- status: item.status ?? '',
- reviewer: '', // blank
+ establishment: item?.establishment?.factory_name || '-',
+ emirate: item?.establishment?.establishment_emirate?.name || '-',
+ year: String(item.year ?? '-'),
+ quarter: item.quarter ?? '-',
+ products: item?.product_count || '-',
+ submittedBy: item.created_by ?? '-',
+ submittedAt: formatDateTime(item.created_at),
+ status: item.status ?? '-',
+ reviewer: item?.updated_by || '-',
+ reviewerOn: formatDateTime(item?.updated_at),
}));
-
+
setSubmissions(mapped);
} catch (err) {
console.error('Failed to load submissions', err);
@@ -81,9 +90,8 @@ const ManageSubmissions = () => {
setLoading(false);
}
};
-
fetchSubmissions();
- }, []);
+ }, []);
const yearOptions = React.useMemo(() => ['All', ...new Set(submissions.map((i) => i.year))], [submissions]);
const quarterOptions = React.useMemo(() => ['All', ...new Set(submissions.map((i) => i.quarter))], [submissions]);
@@ -92,10 +100,10 @@ const ManageSubmissions = () => {
const filtered = React.useMemo(() => {
return submissions.filter((item) => {
- const matchSearch = search
- ? item.establishment?.toLowerCase().includes(search.toLowerCase()) ||
- item.submittedBy?.toLowerCase().includes(search.toLowerCase())
- : true;
+ const matchSearch =
+ !search ||
+ item.establishment?.toLowerCase().includes(search.toLowerCase()) ||
+ item.submittedBy?.toLowerCase().includes(search.toLowerCase());
const matchYear = !year || year === 'All' || item.year === year;
const matchQuarter = !quarter || quarter === 'All' || item.quarter === quarter;
const matchEmirate = !emirate || emirate === 'All' || item.emirate === emirate;
@@ -104,12 +112,15 @@ const ManageSubmissions = () => {
});
}, [submissions, search, year, quarter, emirate, status]);
- const summaryCounts = React.useMemo(() => ({
- total: submissions.length,
- approved: submissions.filter((i) => i.status === 'Approved').length,
- pending: submissions.filter((i) => i.status === 'Pending').length,
- rejected: submissions.filter((i) => i.status === 'Rejected').length,
- }), [submissions]);
+ const summaryCounts = React.useMemo(
+ () => ({
+ total: submissions.length,
+ approved: submissions.filter((i) => i.status === 'Approved').length,
+ pending: submissions.filter((i) => i.status === 'Pending').length,
+ rejected: submissions.filter((i) => i.status === 'Rejected').length,
+ }),
+ [submissions]
+ );
const headers = [
'Establishment',
@@ -121,6 +132,7 @@ const ManageSubmissions = () => {
'Submission Date & Time',
'Status',
'Reviewer',
+ 'Reviewer On',
'Actions',
];
@@ -134,30 +146,11 @@ const ManageSubmissions = () => {
item.submittedAt,
item.status,
item.reviewer,
- item.id,
+ item.reviewerOn,
+ item,
]);
- const columnWidths = [302, 105, 83, 91, 100, 152, 208, 120, 104, 119];
-
- if (loading) {
- return (
-
-
- Loading submissions...
-
- );
- }
-
- if (error) {
- return (
-
- {error}
-
- );
- }
+ const columnWidths = [302, 105, 83, 91, 100, 152, 208, 120, 104, 140, 130];
const toolbar = (
@@ -184,7 +177,21 @@ const ManageSubmissions = () => {
);
+ if (loading)
+ return (
+
+
+ Loading submissions...
+
+ );
+
+ if (error) return {error}
;
+
return (
+ <>
@@ -192,34 +199,27 @@ const ManageSubmissions = () => {
Dashboard 
- Manage Submissions
+ Manage Submissions
- {/* Summary bar */}
-
- {Object.entries(summaryCounts).map(([key, val]) => {
- const v = SUMMARY_VARIANTS[key];
- return (
-
{
pageSize,
totalItems: filtered.length,
}}
- renderCell={(value, rowIndex, columnIndex) => {
+ renderCell={(value, _, columnIndex) => {
if (columnIndex === 7)
- return
-
- {key.charAt(0).toUpperCase() + key.slice(1)}:
-
-
- {val}
-
-
- );
- })}
-
+
+
- {/* Table */}
+ {Object.entries(summaryCounts).map(([key, val]) => {
+ const v = SUMMARY_VARIANTS[key];
+ return (
+
+
+ {key.charAt(0).toUpperCase() + key.slice(1)}:
+
+
+ {val}
+
+
+ );
+ })}
+