added popup for draft

ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx

@@ -112,6 +112,24 @@ const SearchableSelect = ({
     };
   }, []);
 
+  // Set up effect for initial data loading
+  React.useEffect(() => {
+    // Get quarter and year from localStorage if available
+    const currentSubmissionStr = localStorage.getItem('currentSubmission');
+    if (currentSubmissionStr) {
+      try {
+        const currentSubmission = JSON.parse(currentSubmissionStr);
+        if (currentSubmission.quarter) setSavedQuarter(currentSubmission.quarter);
+        if (currentSubmission.year) setSavedYear(currentSubmission.year);
+      } catch (error) {
+        console.error('Error parsing current submission:', error);
+      }
+    }
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
   // Focus input when dropdown opens
   React.useEffect(() => {
     if (isOpen && inputRef.current) {
@@ -388,6 +406,8 @@ const ProductData = ({
   const [productOptions, setProductOptions] = React.useState([]);
   const [isLoadingProducts, setIsLoadingProducts] = React.useState(false);
   const [productsError, setProductsError] = React.useState('');
+  const [showDraftSaved, setShowDraftSaved] = React.useState(false);
+  // Remove the unused state variables since we'll use the props directly
   const [unitOptions, setUnitOptions] = React.useState([]);
   const [isLoadingUnits, setIsLoadingUnits] = React.useState(false);
   const [unitsError, setUnitsError] = React.useState(null);
@@ -396,6 +416,7 @@ const ProductData = ({
 
   const location = useLocation();  // Add this line
 
+
   // Debug: Log products data when it changes
   useEffect(() => {
   }, [products]);
@@ -624,7 +645,7 @@ console.log('Existing product match:', {
     if (submissionId) {
       // Update existing submission
       response = await resubmitSurvey(submissionId, payload);
-      alert('Draft updated successfully')
+      setShowDraftSaved(true);
     } else {
       // Create new submission
       response = await submitSurvey(payload);
@@ -634,7 +655,7 @@ console.log('Existing product match:', {
         localStorage.setItem('currentSubmission', JSON.stringify(response.submission_data));
       }
       
-      alert('Draft saved successfully')
+      setShowDraftSaved(true);
     }
     
   } catch (error) {
@@ -930,11 +951,32 @@ useEffect(() => {
       .filter(p => p.id !== currentProductId && p.product)
       .map(p => p.product);
     
-    // Filter out selected products, but include the current product's selection
+    // Get already submitted product IDs from current submission
-    return productOptions.filter(option => 
+    let submittedProductIds = [];
-      !otherSelectedProductIds.includes(option.value) || 
+    try {
-      option.value === currentProductValue
+      const currentSubmissionStr = localStorage.getItem('currentSubmission');
-    );
+      if (currentSubmissionStr) {
+        const currentSubmission = JSON.parse(currentSubmissionStr);
+        if (currentSubmission.products && Array.isArray(currentSubmission.products)) {
+          submittedProductIds = currentSubmission.products
+            .filter(p => p.product_id) // Only include products with product_id
+            .map(p => p.product_id.toString()); // Convert to string for consistent comparison
+        }
+      }
+    } catch (error) {
+      console.error('Error parsing current submission:', error);
+    }
+    
+    // Filter out selected products and already submitted products, but include the current product's selection
+    return productOptions.filter(option => {
+      // Keep the option if:
+      // 1. It's the currently selected product for this row, OR
+      // 2. It's not selected in any other row AND not in the submitted products list
+      return option.value === currentProductValue || 
+             (!otherSelectedProductIds.includes(option.value) && 
+              !submittedProductIds.includes(option.value) &&
+              !submittedProductIds.includes(option.originalData?.product_id?.toString()));
+    });
   };
 
   // Simple validation function
@@ -1397,7 +1439,42 @@ useEffect(() => {
     }
   };
 
-  const canAddMoreProducts = products.length < MAX_PRODUCTS;
+  // Check if there are any products available to add
+  const getAvailableProductsCount = () => {
+    try {
+      const currentSubmissionStr = localStorage.getItem('currentSubmission');
+      let submittedProductIds = [];
+      
+      if (currentSubmissionStr) {
+        const currentSubmission = JSON.parse(currentSubmissionStr);
+        if (currentSubmission.products && Array.isArray(currentSubmission.products)) {
+          submittedProductIds = currentSubmission.products
+            .filter(p => p.product_id)
+            .map(p => p.product_id.toString());
+        }
+      }
+      
+      // Get all product IDs that are already selected in the current form
+      const selectedProductIds = products
+        .filter(p => p.product)
+        .map(p => p.product.toString());
+      
+      // Count how many products are available to add
+      const availableProducts = productOptions.filter(option => 
+        !submittedProductIds.includes(option.value) && 
+        !selectedProductIds.includes(option.value) &&
+        !submittedProductIds.includes(option.originalData?.product_id?.toString())
+      );
+      
+      return availableProducts.length;
+    } catch (error) {
+      console.error('Error checking available products:', error);
+      return 0;
+    }
+  };
+
+  const availableProductsCount = getAvailableProductsCount();
+  const canAddMoreProducts = products.length < MAX_PRODUCTS && availableProductsCount > 0;
 
   const isLoading = loading || isLoadingReasons || isLoadingZeroReasons || isLoadingProducts || isLoadingUnits;
   const hasError = error || reasonsError || zeroReasonsError || productsError || unitsError;
@@ -1594,7 +1671,11 @@ useEffect(() => {
             <span>+ Add Product</span>
           </button>
           {!canAddMoreProducts && (
-            <span className="text-xs text-gray-600">Maximum of {MAX_PRODUCTS} products reached.</span>
+            <span className="text-xs text-gray-600">
+              {products.length >= MAX_PRODUCTS 
+                ? `Maximum of ${MAX_PRODUCTS} products reached.` 
+                : 'No more products available to add.'}
+            </span>
           )}
         </div>
       </div>
@@ -2245,6 +2326,84 @@ useEffect(() => {
           )}
         </div>
       )}
+      {/* Draft Saved Success Popup */}
+      {showDraftSaved && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 p-4">
+          <div className="bg-white w-full max-w-md rounded-lg shadow-2xl border border-gray-200">
+            <div className="p-6 text-center flex flex-col gap-6">
+              {/* Success Icon */}
+              <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
+                <svg className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+              </div>
+        
+              {/* Message */}
+<div className="space-y-3">
+  <h3 className="text-xl font-semibold text-gray-900">Draft Saved</h3>
+  <p className="text-gray-600">
+    Your IP Quarterly Survey for <span className="font-semibold">{
+      (() => {
+        // Try to get survey period from localStorage first
+        const savedSurveyPeriod = localStorage.getItem('currentSurveyPeriod');
+        let displayQuarter = quarter;
+        let displayYear = year;
+
+        if (savedSurveyPeriod) {
+          try {
+            const { quarter: savedQuarter, year: savedYear } = JSON.parse(savedSurveyPeriod);
+            displayQuarter = savedQuarter || quarter;
+            displayYear = savedYear || year;
+          } catch (e) {
+            console.error('Error parsing saved survey period:', e);
+          }
+        }
+
+        // For resubmission, use the submission's quarter/year
+        if (location.state?.fromResubmit && quarter && year) {
+          return `${quarter}-${year}`;
+        }
+        
+        // For new survey, use the quarter/year from location state if available
+        if (location.state?.survey) {
+          const { quarter: surveyQuarter, year: surveyYear } = location.state.survey;
+          if (surveyQuarter && surveyYear) {
+            return `${surveyQuarter}-${surveyYear}`;
+          }
+        }
+        
+        // Fallback to the values from props or local storage
+        return (displayQuarter || displayYear) ? `${displayQuarter}-${displayYear}` : '';
+      })()
+    }</span> has been saved as a draft.
+    <br />
+  </p>
+</div>
+
+              {/* Buttons */}
+              <div className="flex flex-col sm:flex-row gap-3 w-full">
+                <button
+                  type="button"
+                  className="flex-1 px-4 py-2.5 border border-[#92722A] text-[#92722A] font-medium rounded-md hover:bg-[#F5F0E1] transition-colors"
+                  onClick={() => setShowDraftSaved(false)}
+                >
+                  Resume
+                </button>
+                <button
+                  type="button"
+                  className="flex-1 px-4 py-2.5 bg-[#92722A] text-white font-medium rounded-md hover:bg-[#7b5c1f] transition-colors"
+                  onClick={() => {
+                    // Navigate to My Surveys page
+                    window.location.href = '/overview';
+                  }}
+                >
+                  Go to My Surveys
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };