resolve merge conflicts

2025-11-05 10:20:54 +05:30 · 2025-11-05 10:20:54 +05:30 · 0e56ed7a78
commit 0e56ed7a78
parent 004fd73cea 1148ce8fc5
2 changed files with 61 additions and 35 deletions
--- a/ipi-survey-platform/src/components/common/Table.jsx
+++ b/ipi-survey-platform/src/components/common/Table.jsx
@ -135,16 +135,16 @@ const Table = ({
    'h-9 px-2 text-sm text-[#232528] disabled:text-[#C3C6CB] disabled:cursor-not-allowed transition-colors flex items-center gap-2 hover:text-[#92722A]';

  return (
-    <div className={`overflow-hidden rounded-lg bg-white ${className}`}>
+    <div className={`rounded-lg bg-white ${className}`}>
      {beforeHeader}
-      <div
-        className={`${disableHorizontalScroll ? 'overflow-x-hidden' : 'overflow-x-auto'} px-6 pt-2 pb-6`}
-        style={disableHorizontalScroll ? undefined : { scrollbarWidth: 'thin' }}
+      <div 
+        className="w-full overflow-x-auto px-6 pt-2 pb-6"
+        style={{ scrollbarWidth: 'thin' }}
      >
        <table
-          className={`min-w-[720px] w-full table-fixed rounded-2xl px-4 py-4${
-            separated ? `border-separate ${rowGapClass}` : 'divide-y'
-          } border border-[#C3C6CB]  rounded-2xl divide-[#C3C6CB]`}
+          className={`min-w-full w-auto table-fixed${
+            separated ? ` border-separate ${rowGapClass}` : ' divide-y divide-[#C3C6CB]'
+          } border border-[#C3C6CB] rounded-2xl`}
        >
          <thead className={headerClassName || 'bg-[#F2ECCF] rounded-2xl'}>
            <tr>
--- a/ipi-survey-platform/src/pages/History/History.jsx
+++ b/ipi-survey-platform/src/pages/History/History.jsx
@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Table from '@/components/common/Table';
 import HeaderBar from '@/components/layout/HeaderBar';
 import { fetchSubmissionHistory } from '@/services/submissions/submissionService.js';
+import { fetchProducts } from '@/services/masters/masterService';

 const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
 const BreadcrumbVector = '/assets/images/Breadcrumb-vector.svg';
@ -31,6 +32,9 @@ const History = () => {
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [yearFilter, setYearFilter] = React.useState('');
  const [quarterFilter, setQuarterFilter] = React.useState('');
+  const [hscodeFilter, setHscodeFilter] = React.useState('');
+  const [hscodeOptions, setHscodeOptions] = React.useState([]);
+  const [isLoadingHscodes, setIsLoadingHscodes] = React.useState(false);
  const [pagination, setPagination] = React.useState({
    currentPage: 1,
    pageSize: 10,
@ -38,6 +42,23 @@ const History = () => {
  });
  const navigate = useNavigate();

+  // Fetch HS Code options on component mount
+  React.useEffect(() => {
+    const loadHscodeOptions = async () => {
+      setIsLoadingHscodes(true);
+      try {
+        const products = await fetchProducts();
+        setHscodeOptions(products);
+      } catch (error) {
+        console.error('Failed to load HS Codes:', error);
+      } finally {
+        setIsLoadingHscodes(false);
+      }
+    };
+
+    loadHscodeOptions();
+  }, []);
+
  const toVariant = React.useCallback((status) => {
    const text = String(status || '').toLowerCase();
    if (text === 'approved') return 'approved';
@ -108,14 +129,14 @@ const History = () => {
  }, []);

  const headers = [
-    { name: 'Submission Date & Time', className: 'text-left whitespace-nowrap w-[140px]' },
+    { name: 'Submission Date & Time', className: 'text-left whitespace-nowrap w-[200px]' },
    { name: 'Year', className: 'text-left w-[60px]' },
    { name: 'Quarter', className: 'text-left w-[70px]' },
-    { name: 'HS Code', className: 'text-left w-[80px]' },
+    { name: 'HS Code', className: 'text-left w-[110px]' },
    { name: 'Product', className: 'text-left w-[120px]' },
    { name: 'Status', className: 'text-center w-[100px]' },
    { name: 'Actors', className: 'text-left w-[150px]' },
-    { name: 'Details', className: 'text-left flex-1 min-w-[200px]' }
+    { name: 'Details', className: 'text-left flex-1 min-w-[260px]' }
  ];

  const statusOptions = React.useMemo(
@ -134,11 +155,17 @@ const History = () => {
    navigate('/survey', { state: { submission, initialStep: 3 } });
  }, [navigate]);

-  // Get unique years from the data
+  // Years from 2015 to 2030 in descending order
  const yearOptions = React.useMemo(() => {
-    const years = [...new Set(rows.map(entry => entry.year).filter(Boolean))].sort((a, b) => b - a);
+    const currentYear = new Date().getFullYear();
+    const startYear = 2015;
+    const endYear = 2030;
+    const years = [];
+    for (let year = endYear; year >= startYear; year--) {
+      years.push(year);
+    }
    return years;
-  }, [rows]);
+  }, []);

  const quarterOptions = [
    { label: 'Quarter', value: '' },
@ -399,7 +426,7 @@ const History = () => {
                  onChange={(e) => setYearFilter(e.target.value)}
                  className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
                >
-                  <option value="">Select Year</option>
+                  <option value="">Year</option>
                  {yearOptions.map(year => (
                    <option key={year} value={year}>{year}</option>
                  ))}
@ -426,33 +453,32 @@ const History = () => {
              </div>
              <div className="relative">
                <select 
-                  className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
+                  value={hscodeFilter}
+                  onChange={(e) => setHscodeFilter(e.target.value)}
+                  disabled={isLoadingHscodes}
+                  className={`h-[40px] w-[170px] rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none ${isLoadingHscodes ? 'opacity-70' : ''}`}
                >
-                  <option value="">Select HS Code</option>
-                  <option value="code1">HS Code 1</option>
-                  <option value="code2">HS Code 2</option>
+                  <option value="">HS Code/Product</option>
+                  {hscodeOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
                </select>
-                <svg className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#6B7280]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                {isLoadingHscodes ? (
+                  <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 border-2 border-t-[#6B7280] border-r-transparent border-b-transparent border-l-transparent rounded-full animate-spin"></div>
+                ) : (
+                  <svg className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#6B7280]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                )}
              </div>
              <div className="relative">
                <select 
                  className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
                  disabled
                >
-                  <option value="">Select Product</option>
-                </select>
-                <svg className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#6B7280]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
-              </div>
-              <div className="relative">
-                <select 
-                  className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
-                  disabled
-                >
-                  <option value="">Select Actor</option>
+                  <option value="">Actor</option>
                </select>
                <svg className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#6B7280]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="6 9 12 15 18 9" />
@ -462,7 +488,7 @@ const History = () => {
                <select 
                  className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
                >
-                  <option value="">Select Status</option>
+                  <option value="">Status</option>
                  <option value="approved">Approved</option>
                  <option value="pending">Pending</option>
                  <option value="rejected">Rejected</option>