code merged

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

@@ -401,16 +401,18 @@ const EstablishmentInfo = ({
             </a>
             . Changes saved there will appear here.
           </p> */}
-            <p className="text-sm text-[#043DFF] bg-[#E7F5FF]">
+          <p className="text-sm text-[#043DFF] bg-[#E7F5FF]">
             <span className="font-medium">Need to update details?</span> Go to Profile →{' '}
            <a
-                href={`/admin/configuration/edit-profile/${sessionStorage.getItem('establishment_id') || ''}`}
+              href={`/admin/configuration/edit-profile/${sessionStorage.getItem('establishment_id') || ''}`}
-                className="underline font-medium text-[#043DFF] hover:text-[#063B82]"
+              className="underline font-medium text-[#043DFF] hover:text-[#063B82]"
-                onClick={handleEditProfile}
+              onClick={handleEditProfile}
-              >
+            >
-                Edit Profile
+              Edit Profile
-              </a>
+            </a>
-            </p>
+            
+                        . Changes saved there will appear here.
+          </p>
         </div>
       <div className="flex items-center gap-2 mb-2">
         <h2 className="text-lg font-semibold text-[#232528]">Step 1: Review Establishment Information</h2>

ipi-survey-platform/src/pages/Admin/configuration/EditCompanyProfile.jsx

@@ -98,6 +98,8 @@ const EditCompanyProfile = () => {
   const [selectedProducts, setSelectedProducts] = useState([]);
   const [productSearchTerm, setProductSearchTerm] = useState('');
   const [isLoadingProducts, setIsLoadingProducts] = useState(false);
+  const [productError, setProductError] = useState("");
+  const [isLoadingCities, setIsLoadingCities] = useState(false);
   const initialSnapshotRef = useRef(null);
  
   const formSteps = React.useMemo(
@@ -126,15 +128,12 @@ const EditCompanyProfile = () => {
       2: [
         { field: 'contactName', label: 'Name' },
         { field: 'contactAddress', label: 'Address' },
-        { field: 'contactCityTown', label: 'City/Town' },
+        { field: 'contactEmirateId', label: 'Emirate' },
-        { field: 'contactEmirate', label: 'Emirate' },
+        { field: 'contactCityTownId', label: 'City/Town' },
-        { field: 'contactMakaniNumber', label: 'Makani Number' },
-        { field: 'contactPersonName', label: 'Contact Person Name' },
-        { field: 'contactMobileNumber', label: 'Mobile Number' },
         { field: 'contactEmail', label: 'Email' },
       ],
       3: [
-        // Products are optional, no required fields
+        // Products validation handled separately
       ],
       4: [
         { field: 'employmentEmiratiMale', label: 'Number of Emirati Male' },
@@ -148,6 +147,18 @@ const EditCompanyProfile = () => {
  
   const validateStepFields = useCallback((stepIndex) => {
     setPasswordReuseError("");
+   
+    // Special validation for Products step
+    if (stepIndex === 3) {
+      if (selectedProducts.length === 0) {
+        setProductError("At least one product is required.");
+        return false;
+      } else {
+        setProductError("");
+        return true;
+      }
+    }
+   
     const requiredFields = requiredFieldsByStep[stepIndex] || [];
     if (!requiredFields.length) return true;
    
@@ -163,15 +174,15 @@ const EditCompanyProfile = () => {
       return nextErrors;
     });
     return valid;
-  }, [form, requiredFieldsByStep]);
+  }, [form, requiredFieldsByStep, selectedProducts]);
  
   const handleFormChange = useCallback((field, value) => {
-    if (field === 'contactCityTown') {
+    if (field === 'contactCityTownId') {
-      const foundCity = contactCityOptions.find(option => option.value === value || option.label === value);
+      const foundCity = contactCityOptions.find(option => option.value === value);
       setForm(prev => ({
         ...prev,
-        contactCityTown: foundCity?.name || '',
+        contactCityTown: foundCity?.label || '',
-        contactCityTownId: foundCity?.id || ''
+        contactCityTownId: value
       }));
       return;
     }
@@ -200,63 +211,47 @@ const EditCompanyProfile = () => {
     if (activeStep > 0) setActiveStep(activeStep - 1);
   }, [activeStep]);
  
-  // Load cities based on selected emirate
+  // Load cities based on selected emirate using your service function
-  const loadCities = useCallback(async (emirateId, setCityOptions) => {
+  const loadCities = useCallback(async (emirateId) => {
     if (!emirateId) {
-      setCityOptions([]);
+      setContactCityOptions([]);
       return [];
     }
    
     try {
-      const response = await fetchCityTowns({ emirateId: Number(emirateId) });
+      setIsLoadingCities(true);
-      const options = Array.isArray(response) ? response : (response.data || []);
+      const cities = await fetchCityTowns({ emirateId });
      
-      const formatted = options.map((option) => ({
+      console.log('Loaded cities for emirate', emirateId, ':', cities);
-        label: option.name || option.label,
-        value: String(option.id || option.value),
-        name: option.name || option.label,
-        id: String(option.id || option.value)
-      }));
      
-      setCityOptions(formatted);
+      setContactCityOptions(cities);
-      return formatted;
+      return cities;
     } catch (error) {
       console.error('Failed to load cities:', error);
-      setCityOptions([]);
+      setContactCityOptions([]);
       return [];
+    } finally {
+      setIsLoadingCities(false);
     }
   }, []);
  
-  // Load products
+  // Load products using your service function
   const loadProducts = useCallback(async () => {
     try {
       setIsLoadingProducts(true);
-      const response = await fetchProducts();
+      const products = await fetchProducts();
      
-      let productsData = [];
+      console.log('Processed products data:', products);
      
-      if (Array.isArray(response)) {
+      setAvailableProducts(prevProducts => {
-        productsData = response;
+        // Only update if products have actually changed to prevent unnecessary re-renders
-      } else if (response?.data) {
+        if (JSON.stringify(prevProducts) !== JSON.stringify(products)) {
-        productsData = Array.isArray(response.data) ? response.data : response.data.products || [];
+          return products;
-      }
+        }
- 
+        return prevProducts;
-      console.log('Processed products data:', productsData);
+      });
-     
+      
-      // Format products data
+      return products;
-      const formattedProducts = productsData.map(p => ({
-        id: p.id || p.value,
-        product_id: p.id || p.value,
-        hs_code: p.hs_code || p.hsCode || '',
-        hsCode: p.hs_code || p.hsCode || '',
-        product_name: p.product_name || p.productName || p.label || '',
-        productName: p.product_name || p.productName || p.label || '',
-        label: p.product_name || p.productName || p.label || '',
-        value: p.id || p.value
-      }));
-     
-      setAvailableProducts(formattedProducts);
-      return formattedProducts;
     } catch (error) {
       console.error('Error loading products:', error);
       return [];
@@ -272,7 +267,7 @@ const EditCompanyProfile = () => {
    
     if (!searchTerm) {
       setAvailableProducts(prev => prev.filter(p =>
-        !selectedProducts.some(sp => sp.id === p.id)
+        !selectedProducts.some(sp => sp.value === p.value)
       ));
       return;
     }
@@ -280,7 +275,7 @@ const EditCompanyProfile = () => {
     const filtered = availableProducts.filter(product =>
       (product.label?.toLowerCase().includes(searchTerm) ||
        product.hs_code?.toLowerCase().includes(searchTerm)) &&
-      !selectedProducts.some(sp => sp.id === product.id)
+      !selectedProducts.some(sp => sp.value === product.value)
     );
    
     setAvailableProducts(filtered);
@@ -294,19 +289,22 @@ const EditCompanyProfile = () => {
     });
    
     // Remove from available products
-    setAvailableProducts(prev => prev.filter(p => p.id !== product.id));
+    setAvailableProducts(prev => prev.filter(p => p.value !== product.value));
+   
+    // Clear product error when a product is added
+    setProductError("");
   };
  
   // Remove product handler
   const handleRemoveProduct = (product) => {
-    setSelectedProducts(prev => prev.filter(p => p.id !== product.id));
+    setSelectedProducts(prev => prev.filter(p => p.value !== product.value));
    
     // Add back to available products if not already there and matches search
     if (!productSearchTerm ||
         (product.hs_code && product.hs_code.toLowerCase().includes(productSearchTerm)) ||
-        (product.product_name && product.product_name.toLowerCase().includes(productSearchTerm))) {
+        (product.label && product.label.toLowerCase().includes(productSearchTerm))) {
       setAvailableProducts(prev => {
-        if (!prev.some(p => p.id === product.id)) {
+        if (!prev.some(p => p.value === product.value)) {
           return [...prev, product];
         }
         return prev;
@@ -314,9 +312,44 @@ const EditCompanyProfile = () => {
     }
   };
  
+  // Load emirates on component mount using your service function
+  useEffect(() => {
+    let cancelled = false;
+    const controller = new AbortController();
+   
+    const loadEmirates = async () => {
+      try {
+        const emirates = await fetchEmirates({ signal: controller.signal });
+        if (cancelled) return;
+       
+        console.log('Loaded emirates:', emirates);
+       
+        const lookup = {};
+        emirates.forEach((emirate) => {
+          lookup[emirate.value] = emirate.label;
+        });
+       
+        setEmirateOptions(emirates);
+        setEmirateLookup(lookup);
+      } catch (error) {
+        if (cancelled) return;
+        console.error('Failed to load emirates:', error);
+      }
+    };
+   
+    loadEmirates();
+   
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, []);
+ 
+  // Load establishment data and set form with API data
   useEffect(() => {
     console.log('useEffect triggered, establishmentId:', establishmentId);
- 
+    
+    // Create an async function inside the effect
     const fetchData = async () => {
       if (!establishmentId) {
         console.log('No establishmentId found, skipping fetch');
@@ -349,98 +382,85 @@ const EditCompanyProfile = () => {
        
         console.log('Final Form Data:', formData);
        
+        // First set the form data
         setForm(formData);
         initialSnapshotRef.current = formData;
        
-        // Load products and set selected products
+        // Then load cities and products in parallel
-        const allProducts = await loadProducts();
+        const [cities, allProducts] = await Promise.all([
+          formData.contactEmirateId ? loadCities(formData.contactEmirateId) : Promise.resolve([]),
+          loadProducts()
+        ]);
+        
+        console.log('Loaded cities:', cities);
+        console.log('All products loaded:', allProducts);
        
         // Set selected products from API response
         const establishmentProducts = response.data?.establishment_products || response.establishment_products || [];
         if (Array.isArray(establishmentProducts) && establishmentProducts.length > 0) {
           const formattedSelectedProducts = establishmentProducts.map(ep => {
             const productData = ep.product || {};
-            return {
+            const productId = productData.id || ep.product_id;
-              id: ep.id || 0,
+           
-              product_id: ep.product_id || 0,
+            // Find the product in the loaded products to get the proper format
-              hs_code: productData.hs_code || ep.hs_code || '',
+            const foundProduct = allProducts.find(p => p.value === String(productId));
-              hsCode: productData.hs_code || ep.hs_code || '',
+           
-              product_name: productData.product_name || ep.product_name || 'Unnamed Product',
+            return foundProduct || {
-              productName: productData.product_name || ep.product_name || 'Unnamed Product',
+              value: String(productId),
-              label: `${productData.product_name || ep.product_name || 'Unnamed Product'}${productData.hs_code ? ` (${productData.hs_code})` : ''}`,
+              label: productData.product_name || productData.name || 'Unnamed Product',
-              value: ep.product_id ? String(ep.product_id) : '',
+              hs_code: productData.hs_code || '',
-              ...productData
+              product_name: productData.product_name || productData.name || 'Unnamed Product'
             };
           });
-          setSelectedProducts(formattedSelectedProducts);
          
-          // Remove selected products from available products
+          setSelectedProducts(formattedSelectedProducts);
-          setAvailableProducts(prev =>
-            prev.filter(p => !formattedSelectedProducts.some(sp => sp.id === p.id))
-          );
         }
        
       } catch (error) {
-        console.error('Failed to load establishment details:', error);
+        console.error('Error loading establishment:', error);
-        alert('Failed to load company details. Please try again.');
       } finally {
         setLoading(false);
       }
     };
    
     fetchData();
-  }, [establishmentId, loadProducts]);
+    
- 
+    // Cleanup function to prevent state updates after unmount
-  // Load emirates on component mount
-  useEffect(() => {
-    let cancelled = false;
-    const controller = new AbortController();
-   
-    const loadEmirates = async () => {
-      try {
-        const options = await fetchEmirates({ signal: controller.signal });
-        if (cancelled) return;
-       
-        const formatted = options.map((option) => ({
-          label: option.name || option.label,
-          value: String(option.id || option.value),
-          name: option.name || option.label,
-          id: String(option.id || option.value)
-        }));
-       
-        const lookup = {};
-        formatted.forEach((option) => {
-          lookup[option.value] = option.label;
-        });
-       
-        setEmirateOptions(formatted);
-        setEmirateLookup(lookup);
-      } catch (error) {
-        if (cancelled) return;
-        console.error('Failed to load emirates:', error);
-      }
-    };
-   
-    loadEmirates();
-   
     return () => {
-      cancelled = true;
+      // Any cleanup if needed
-      controller.abort();
     };
-  }, []);
+  }, [establishmentId]); // Remove loadCities and loadProducts from dependencies
  
   // Load contact cities when emirate ID changes
   useEffect(() => {
-    const loadContactCities = async () => {
+    let isMounted = true;
+    
+    const loadCitiesForEmirate = async () => {
       if (form.contactEmirateId) {
-        await loadCities(form.contactEmirateId, setContactCityOptions);
+        try {
-      } else {
+          const cities = await fetchCityTowns({ emirateId: form.contactEmirateId });
+          if (isMounted) {
+            setContactCityOptions(cities);
+          }
+        } catch (error) {
+          console.error('Failed to load cities:', error);
+          if (isMounted) {
+            setContactCityOptions([]);
+          }
+        }
+      } else if (isMounted) {
         setContactCityOptions([]);
+        // Clear city selection when emirate is cleared
+        handleFormChange('contactCityTownId', '');
       }
     };
    
-    loadContactCities();
+    loadCitiesForEmirate();
-  }, [form.contactEmirateId, loadCities]);
+    
+    return () => {
+      isMounted = false;
+    };
+  }, [form.contactEmirateId]);
  
   // Calculate totals when employment numbers change
   useEffect(() => {
@@ -497,7 +517,7 @@ const EditCompanyProfile = () => {
         updated_by: 1,
         establishment_products: Array.isArray(selectedProducts) && selectedProducts.length > 0
           ? selectedProducts.map(p => ({
-              product_id: p.product_id || p.id || 0
+              product_id: Number(p.value) || 0
             }))
           : [],
       };
@@ -650,23 +670,16 @@ const EditCompanyProfile = () => {
               />
               <SelectField
                 label="Emirate"
-                name="contactEmirate"
+                name="contactEmirateId"
                 value={form.contactEmirateId || ''}
-                onChange={async (e) => {
+                onChange={(e) => {
                   const selectedValue = e.target.value;
                   const selectedEmirate = emirateOptions.find(opt => opt.value === selectedValue);
                  
-                  handleFormChange("contactEmirate", selectedEmirate?.name || '');
+                  handleFormChange("contactEmirate", selectedEmirate?.label || '');
-                  handleFormChange("contactEmirateId", selectedEmirate?.id || '');
+                  handleFormChange("contactEmirateId", selectedValue);
                   handleFormChange("contactCityTown", '');
                   handleFormChange("contactCityTownId", '');
-                 
-                  if (selectedEmirate?.id) {
-                    const cities = await loadCities(selectedEmirate.id, setContactCityOptions);
-                    setContactCityOptions(cities);
-                  } else {
-                    setContactCityOptions([]);
-                  }
                 }}
                 options={emirateOptions.map(opt => ({
                   value: opt.value,
@@ -675,28 +688,25 @@ const EditCompanyProfile = () => {
                 placeholder="Select Emirate"
                 width="100%"
                 required
-                error={fieldErrors.contactEmirate}
+                error={fieldErrors.contactEmirateId}
               />
               <SelectField
                 label="City/Town"
-                name="contactCityTown"
+                name="contactCityTownId"
                 value={form.contactCityTownId || ''}
                 onChange={(e) => {
                   const selectedValue = e.target.value;
-                  const selectedCity = contactCityOptions.find(opt => opt.value === selectedValue);
+                  handleFormChange("contactCityTownId", selectedValue);
-                  if (selectedCity) {
-                    handleFormChange("contactCityTown", selectedCity.value);
-                  }
                 }}
                 options={contactCityOptions.map(opt => ({
                   value: opt.value,
                   label: opt.label
                 }))}
-                placeholder={form.contactEmirate ? "Select City/Town" : "Select emirate first"}
+                placeholder={form.contactEmirateId ? (isLoadingCities ? "Loading cities..." : "Select City/Town") : "Select emirate first"}
                 width="100%"
                 required
-                disabled={!form.contactEmirate}
+                disabled={!form.contactEmirateId || isLoadingCities}
-                error={fieldErrors.contactCityTown}
+                error={fieldErrors.contactCityTownId}
               />
               <TextField
                 label="Postal Code"
@@ -718,8 +728,6 @@ const EditCompanyProfile = () => {
                 onChange={(e) => handleFormChange("contactMakaniNumber", e.target.value)}
                 placeholder="Enter Makani Number"
                 width="100%"
-                required
-                error={fieldErrors.contactMakaniNumber}
               />
               <TextField
                 label="Contact Person Name"
@@ -727,8 +735,6 @@ const EditCompanyProfile = () => {
                 onChange={(e) => handleFormChange("contactPersonName", e.target.value)}
                 placeholder="Enter Contact Person Name"
                 width="100%"
-                required
-                error={fieldErrors.contactPersonName}
               />
               <TextField
                 label="Contact Person Designation"
@@ -743,8 +749,6 @@ const EditCompanyProfile = () => {
                 onChange={(value) => handleFormChange("contactMobileNumber", value)}
                 placeholder="Enter Mobile Number"
                 width="100%"
-                required
-                error={fieldErrors.contactMobileNumber}
               />
               <TextField
                 label="Email"
@@ -769,7 +773,12 @@ const EditCompanyProfile = () => {
       case 3:
         return (
           <div className="space-y-6">
-            <h4 className="text-[16px] font-semibold text-[#232528]">Products</h4>
+            <div>
+              <h4 className="text-[16px] font-semibold text-[#232528]">Products</h4>
+              {productError && (
+                <p className="text-xs text-[#B91C1C] mt-1">{productError}</p>
+              )}
+            </div>
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
               {/* Available Products Panel */}
               <div className="bg-white rounded-lg border border-[#E5E7EB] overflow-hidden">
@@ -802,12 +811,10 @@ const EditCompanyProfile = () => {
                     ) : availableProducts.length > 0 ? (
                       <ul className="divide-y divide-[#E5E7EB] max-h-96 overflow-y-auto">
                         {availableProducts.map((product) => (
-                          <li key={product.id} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center">
+                          <li key={product.value} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center">
                             <div>
                               <div className="text-sm font-medium text-[#111827]">
-                                {product.hsCode || ''}
+                                {product.label}
-                                {product.hsCode && (product.productName || product.label || product.product_name) ? ' - ' : ''}
-                                {product.productName || product.label || product.product_name || ''}
                               </div>
                             </div>
                             <button
@@ -843,12 +850,10 @@ const EditCompanyProfile = () => {
                   {selectedProducts.length > 0 ? (
                     <ul className="divide-y divide-[#E5E7EB] max-h-96 overflow-y-auto">
                       {selectedProducts.map((product) => (
-                        <li key={product.id} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center">
+                        <li key={product.value} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center">
                           <div>
                             <div className="text-sm font-medium text-[#111827]">
-                              {product.hs_code || product.hsCode || ''}
+                              {product.label}
-                              {product.hs_code || product.hsCode ? ' - ' : ''}
-                              {product.product_name || product.productName || product.label || 'Unnamed Product'}
                             </div>
                           </div>
                           <button
@@ -943,17 +948,17 @@ const EditCompanyProfile = () => {
   };
  
   return (
-    <div className="min-h-screen bg-[#F8FAFC]">
+    <div className="min-h-screen">
       <HeaderBar />
      
-      <div className="container mx-auto px-4 py-8">
+      <div className="p-10 mx-auto ">
-        <div className="bg-white rounded-xl shadow-lg overflow-hidden">
+        <div className="bg-white overflow-hidden">
           {loading && <Loader />}
  
           {/* Header */}
-          <div className="flex justify-between items-center border-b border-[#F1F2F4] px-8 py-5 bg-white">
+          <div className="flex justify-between items-center border-b border-[#F1F2F4] ">
             <div>
-              <h2 className="text-xl font-bold text-gray-900">Edit Company Profile</h2>
+              <h2 className="text-xl font-bold pb-6 text-gray-900">Edit Company Profile</h2>
             </div>
           </div>
  
@@ -1072,5 +1077,4 @@ const EditCompanyProfile = () => {
   );
 };
  
-export default EditCompanyProfile;
+export default EditCompanyProfile;
-