From f231275add5d6fa5ea96b80d93b9a4146c3e548f Mon Sep 17 00:00:00 2001 From: Senthamilselvi Date: Wed, 29 Oct 2025 16:13:33 +0530 Subject: [PATCH 1/2] API integration done for admin dashboard submission listing --- ipi-survey-platform/package-lock.json | 10 + ipi-survey-platform/package.json | 1 + .../src/components/admin/SubmissionTable.jsx | 244 ++++++++---------- 3 files changed, 116 insertions(+), 139 deletions(-) diff --git a/ipi-survey-platform/package-lock.json b/ipi-survey-platform/package-lock.json index 48d243e..57f0983 100644 --- a/ipi-survey-platform/package-lock.json +++ b/ipi-survey-platform/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "axios": "^1.12.2", + "lucide-react": "^0.548.0", "react": "^19.1.1", "react-dom": "^19.1.1", "react-google-recaptcha": "^3.1.0", @@ -3190,6 +3191,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.548.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.548.0.tgz", + "integrity": "sha512-63b16z63jM9yc1MwxajHeuu0FRZFsDtljtDjYm26Kd86UQ5HQzu9ksEtoUUw4RBuewodw/tGFmvipePvRsKeDA==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.19", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz", diff --git a/ipi-survey-platform/package.json b/ipi-survey-platform/package.json index e03f330..60e9044 100644 --- a/ipi-survey-platform/package.json +++ b/ipi-survey-platform/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "axios": "^1.12.2", + "lucide-react": "^0.548.0", "react": "^19.1.1", "react-dom": "^19.1.1", "react-google-recaptcha": "^3.1.0", diff --git a/ipi-survey-platform/src/components/admin/SubmissionTable.jsx b/ipi-survey-platform/src/components/admin/SubmissionTable.jsx index 2acc4b2..a7c3361 100644 --- a/ipi-survey-platform/src/components/admin/SubmissionTable.jsx +++ b/ipi-survey-platform/src/components/admin/SubmissionTable.jsx @@ -1,159 +1,115 @@ -import React from 'react'; +import React, { useEffect, useState, useMemo } from 'react'; import Table from '../common/Table'; import SearchIcon from '../../assets/images/material-symbols_search-rounded.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', - }, -]; +import { CheckCircle, XCircle, Eye } from 'lucide-react'; // ✅ Icons +import apiClient from '../../services/api/apiClient.js'; const SubmissionTable = () => { - const [search, setSearch] = React.useState(''); + const [search, setSearch] = useState(''); + const [submissions, setSubmissions] = useState([]); + const [loading, setLoading] = useState(true); - const filtered = React.useMemo(() => { + useEffect(() => { + const fetchData = async () => { + try { + setLoading(true); + const response = await apiClient.get('/admin_dashboard'); + const recent = response?.data?.recent_submissions || []; + + const mappedData = recent.map((item) => ({ + establishment: item.establishment || '-', + emirate: item.emirate || '-', + year: item.year || '-', + quarter: item.quarter || '-', + productCount: item.product_count ?? '-', + submittedBy: item.created_by || '-', + submissionDateTime: formatDate(item.created_at), + status: item.status || '-', + reviewer: item.updated_by || '-', + reviewedOn: formatDate(item.updated_at), + })); + + setSubmissions(mappedData); + } catch (error) { + console.error('Error loading submissions:', error); + } finally { + setLoading(false); + } + }; + + fetchData(); + }, []); + + const formatDate = (dateStr) => { + if (!dateStr) return '-'; + const date = new Date(dateStr); + return `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit', + })}`; + }; + + const filtered = useMemo(() => { if (!search.trim()) return submissions; const normalized = search.trim().toLowerCase(); return submissions.filter((item) => - [ - item.establishment, - item.emirate, - item.productCount, - item.year, - item.quarter, - item.lastSubmission, - item.deadline, - ] - .join(' ') - .toLowerCase() - .includes(normalized) + Object.values(item).join(' ').toLowerCase().includes(normalized) ); - }, [search]); + }, [search, submissions]); + + const headers = [ + 'Establishment', + 'Emirates', + 'Year', + 'Quarter', + 'Product Count', + 'Submitted By', + 'Submission Date & Time', + 'Status', + 'Reviewer', + 'Reviewer On', + 'Actions', + ]; - const headers = ['Establishment', 'Emirates', 'Product Count', 'Year', 'Quarter', 'Last Submission', 'Deadline']; const tableRows = filtered.map((item) => [ item.establishment, item.emirate, - item.productCount, item.year, item.quarter, - item.lastSubmission, - item.deadline, + item.productCount, + item.submittedBy, + item.submissionDateTime, + item.status, + item.reviewer, + item.reviewedOn, + // 🧩 Actions column +
+ + + +
, ]); - const columnWidths = React.useMemo( - () => [ - 317, - 161, - 140, - 119, - 98, - 158, - 150, - ], - [] - ); + const columnWidths = [240, 120, 100, 100, 130, 150, 180, 120, 150, 180, 120]; const toolbar = (

- Recent Submissions ({submissions.length}) + Recent Submissions{' '} + ({submissions.length})

- Search + Search setSearch(event.target.value)} - placeholder="Search Establishment" + 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]" />
@@ -162,17 +118,27 @@ const SubmissionTable = () => { ); return ( -
-
+
+
{/* ✅ Horizontal scroll */} {toolbar} - + {loading ? ( +
+ Loading submissions... +
+ ) : ( +
{/* Keeps layout inside scroll area */} +
+ + )}
{ )} +