bug fix for survey screen

ipi-survey-platform/public/assets/images/Breadcrumb-vector.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.749811 0.483398L4.94336 4.67695L0.749811 8.87049" stroke="#C3C6CB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

ipi-survey-platform/src/App.jsx

@@ -13,6 +13,7 @@ import History from '@/pages/History/History';
 import ChangePassword from '@/pages/ChangePassword/ChangePassword';
 import ForgotPassword from '@/pages/ForgotPassword/ForgotPassword';
 import PublicContactForm from '@/pages/PublicContactForm';
+import EditCompanyProfile from '@/pages/Admin/configuration/EditCompanyProfile';
 
 const RequireRole = ({ allowedRoles = [], children }) => {
   let role
@@ -160,6 +161,24 @@ function App() {
           </RequireRole>
         )}
       />
+      <Route path="profile">
+        <Route 
+          index 
+          element={
+            <RequireRole allowedRoles={['EstablishmentUser']}>
+              <EditCompanyProfile />
+            </RequireRole>
+          } 
+        />
+        <Route 
+          path="edit/:id" 
+          element={
+            <RequireRole allowedRoles={['EstablishmentUser']}>
+              <EditCompanyProfile />
+            </RequireRole>
+          } 
+        />
+      </Route>
       <Route path="/change-password" element={<ChangePassword />} />
       <Route path="/forgot-password" element={<ForgotPassword />} />
       <Route path="/reset-password" element={<PublicContactForm />} />

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

@@ -10,14 +10,16 @@ import { useNavigate } from 'react-router-dom';
 
 const Field = ({ label, placeholder = '', type = 'text', value = '', onChange = () => {}, disabled = true }) => (
   <div>
-    <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
+    <label className={`block text-sm font-medium ${disabled ? 'text-[#9EA2A9]' : 'text-gray-700'} mb-1`}>
+      {label}
+    </label>
     <input
       type={type}
       placeholder={placeholder}
       value={value}
-      disabled={true}
+      disabled={disabled}
       onChange={onChange}
-      className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 text-sm bg-gray-50 cursor-not-allowed"
+      className={`block w-full h-10 rounded-md border-2 ${disabled ? 'border-[#E6D7A2] bg-gray-50 text-[#9EA2A9] cursor-not-allowed' : 'border-[#E6D7A2] focus:border-[#92722A] bg-white text-gray-900'} focus:ring-0 px-4 text-sm`}
     />
   </div>
 );
@@ -84,6 +86,12 @@ const EstablishmentInfo = ({
   const handleCloseInfo = () => {
     setShowInfoCard(false);
   };
+  // Debug log to see what data is being received
+  React.useEffect(() => {
+    console.log('EstablishmentInfo data:', data);
+    console.log('Establishment contact email from data:', data?.establishment_contact_email);
+  }, [data]);
+
   const info = React.useMemo(
     () => ({
       quarter: '',
@@ -94,6 +102,7 @@ const EstablishmentInfo = ({
       licenseNumber: '',
       isicCode: '',
       emirate: '',
+      establishment_contact_email: data?.establishment_contact_email || '',
       employeeInfo: {
         ...defaultEmployeeInfo,
         ...(data.employeeInfo || {}),
@@ -129,7 +138,7 @@ const handleEditProfile = (e) => {
     sessionStorage.setItem('edit_profile_from', 'EstablishmentUser');
 
     // Navigate to profile edit page
-    navigate(`/admin/configuration/profile?edit=${establishmentId}`);
+    navigate(`/profile/edit/${establishmentId}`);
 };
 
   const handleEmployeeChange = (field) => (event) => {
@@ -274,14 +283,14 @@ const handleEditProfile = (e) => {
           <h3 className="text-sm font-semibold text-gray-900 mb-4">Reporting Period</h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Quarter</label>
+              <label className="block text-sm font-medium text-[#9EA2A9] mb-1">Quarter</label>
               <div className="relative">
                 <select
                   value={info.quarter}
                   onChange={handleFieldChange('quarter')}
                   disabled={true}
                   required
-                  className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 pr-10 text-sm bg-gray-50 appearance-none cursor-not-allowed"
+                  className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 pr-10 text-sm bg-white text-[#9EA2A9] appearance-none cursor-not-allowed"
                 >
                   <option value="" disabled>Select quarter</option>
                   {["Q1", "Q2", "Q3", "Q4"].map(quarter => (
@@ -296,13 +305,14 @@ const handleEditProfile = (e) => {
               </div>
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Year</label>
+              <label className="block text-sm font-medium text-[#9EA2A9] mb-1">Year</label>
               <div className="relative">
                 <select
                   value={info.year}
                   onChange={handleFieldChange('year')}
                   disabled={true}
-                  className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 pr-10 text-sm bg-gray-50 appearance-none cursor-not-allowed"
+
+                  className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 pr-10 text-sm bg-white text-[#9EA2A9] appearance-none cursor-not-allowed"
                 >
                   <option value="" disabled>Select year</option>
                   {["2022", "2023", "2024", "2025"].map(year => (
@@ -329,42 +339,49 @@ const handleEditProfile = (e) => {
             placeholder="Enter Establishment Name"
             value={info.establishmentName}
             onChange={handleFieldChange('establishmentName')}
-            disabled={loading}
+            disabled={true}
+
           />
           <Field
             label="Permanent Factory Code"
             placeholder="Enter Permanent Factory Code"
             value={info.permanentFactoryCode}
             onChange={handleFieldChange('permanentFactoryCode')}
-            disabled={loading}
+            disabled={true}
+
           />
           <Field
-            label="Industry Code (Business Register)"
+            label="Business Register Industry Code"
             placeholder="Enter Industry Code"
             value={info.industryCode}
             onChange={handleFieldChange('industryCode')}
-            disabled={loading}
+            disabled={true}
+
           />
           <Field
             label="License Number"
             placeholder="Enter License Number"
             value={info.licenseNumber}
             onChange={handleFieldChange('licenseNumber')}
-            disabled={loading}
+            disabled={true}
+
           />
+          {/* Email field is hidden but data remains in form state */}
           <Field
             label="ISIC Code"
             placeholder="Enter ISIC Code"
             value={info.isicCode}
             onChange={handleFieldChange('isicCode')}
-            disabled={loading}
+            disabled={true}
+
           />
           <Field
             label="Emirate"
             placeholder="Enter Emirate"
             value={info.emirate}
             onChange={handleFieldChange('emirate')}
-            disabled={loading}
+            disabled={true}
+
           />
         </div>
         </Card>
@@ -372,7 +389,7 @@ const handleEditProfile = (e) => {
         <div className="mt-6">
           {/* Employee Information */}
         <Card>
-        <h3 className="text-sm font-semibold text-gray-900 mb-4">Employee Information</h3>
+        <h3 className="text-sm font-semibold text-gray-900 mb-4">Employees (Headcount)</h3>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <Field
             label="Emirati Male"
@@ -380,7 +397,7 @@ const handleEditProfile = (e) => {
             type="number"
             value={info.employeeInfo.emiratiMale}
             onChange={handleEmployeeChange('emiratiMale')}
-            disabled={loading}
+            disabled={true}
           />
           <Field
             label="Non-Emirati Male"
@@ -388,7 +405,7 @@ const handleEditProfile = (e) => {
             type="number"
             value={info.employeeInfo.nonEmiratiMale}
             onChange={handleEmployeeChange('nonEmiratiMale')}
-            disabled={loading}
+            disabled={true}
           />
           <Field
             label="Emirati Female"
@@ -396,7 +413,7 @@ const handleEditProfile = (e) => {
             type="number"
             value={info.employeeInfo.emiratiFemale}
             onChange={handleEmployeeChange('emiratiFemale')}
-            disabled={loading}
+            disabled={true}
           />
           <Field
             label="Non-Emirati Female"
@@ -404,7 +421,7 @@ const handleEditProfile = (e) => {
             type="number"
             value={info.employeeInfo.nonEmiratiFemale}
             onChange={handleEmployeeChange('nonEmiratiFemale')}
-            disabled={loading}
+            disabled={true}
           />
           <Field
             label="Total Employees"
@@ -412,7 +429,7 @@ const handleEditProfile = (e) => {
             type="number"
             value={info.employeeInfo.totalEmployees}
             onChange={handleEmployeeChange('totalEmployees')}
-            disabled={loading}
+            disabled={true}
           />
           <Field
             label="Total Emirati"
@@ -420,7 +437,7 @@ const handleEditProfile = (e) => {
             type="number"
             value={info.employeeInfo.totalEmirati}
             onChange={handleEmployeeChange('totalEmirati')}
-            disabled={loading}
+            disabled={true}
           />
         </div>
         </Card>

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

@@ -10,6 +10,7 @@ const caretDownSrc = '/assets/images/CaretDown-black.svg';
 const clockIcon = '/assets/images/mingcute_time-line.svg';
 const calendarIcon = '/assets/images/Duedate.svg';
 const nextIcon = '/assets/images/mdi_page-next-outline.svg';
+const trashActiveSrc = '/assets/images/Trash - active.svg';
 
 const Input = ({ placeholder = '', type = 'text', value = '', onChange = () => {}, required = false }) => {
   const [isFocused, setIsFocused] = React.useState(false);
@@ -454,7 +455,7 @@ const ProductData = ({
 
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <h2 className="text-lg font-semibold text-gray-900">Product Data</h2>
+          <h2 className="text-lg font-semibold text-gray-900">Products</h2>
         </div>
         <div className="flex items-center gap-3">
             <button
@@ -483,9 +484,10 @@ const ProductData = ({
                 <button
                   type="button"
                   onClick={() => removeProduct(p.id)}
-                  className="text-[#92722A] text-sm px-3 py-1 rounded hover:bg-[#92722A]/10 cursor-pointer"
+                  className="p-1.5 rounded-md hover:bg-[#92722A]/10"
+                  title="Remove product"
                 >
-                  Remove
+                  <img src={trashActiveSrc} alt="Delete" className="h-5 w-5" />
                 </button>
               )}
             </div>
@@ -722,9 +724,9 @@ const ProductData = ({
                       />
                     </div>
                   </div>
-                  <div className="flex items-end space-x-4">
+                  <div className="flex items-end space-x-3">
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-1">Apr Cost (AED)<span className="text-red-600">*</span></label>
+                      <label className="block text-sm font-medium text-gray-700 w-26 mb-1">Apr Cost (AED)<span className="text-red-600">*</span></label>
                       <Input
                         className="w-24"
                         type="number"
@@ -735,7 +737,7 @@ const ProductData = ({
                       />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-1">May Cost (AED)<span className="text-red-600">*</span></label>
+                      <label className="block text-sm font-medium text-gray-700 w-27 mb-1">May Cost (AED)<span className="text-red-600">*</span></label>
                       <Input
                         className="w-24"
                         type="number"
@@ -746,7 +748,7 @@ const ProductData = ({
                       />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-1">Jun Cost (AED)<span className="text-red-600">*</span></label>
+                      <label className="block text-sm font-medium text-gray-700 w-27 mb-1">Jun Cost (AED)<span className="text-red-600">*</span></label>
                       <Input
                         className="w-24"
                         type="number"

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

@@ -60,7 +60,7 @@ const buildEstablishmentDetails = (establishment) => {
   return [
     { icon: establishmentIconSrc, label: 'Establishment Name', value: establishment.establishmentName },
     { icon: establishmentIdIconSrc, label: 'Establishment ID', value: establishment.licenseNumber },
-    { icon: emailIconSrc, label: 'Email', value: establishment.email },
+    { icon: emailIconSrc, label: 'Email', value: establishment.establishment_contact_email },
     { icon: emiratesIconSrc, label: 'Emirate', value: establishment.emirate },
   ];
 };

ipi-survey-platform/src/pages/Survey/Survey.jsx

@@ -6,6 +6,7 @@ import EstablishmentInfo from '@/components/survey/EstablishmentInfo/Establishme
 import HeaderBar from '@/components/layout/HeaderBar';
 import ProductData from '@/components/survey/ProductData/ProductData';
 import ReviewSubmit from '@/components/survey/ReviewSubmit/ReviewSubmit';
+import BreadcrumbVector from '/assets/images/Breadcrumb-vector.svg';
 
 const checkCircleActiveSrc = '/assets/images/CircleFrame.svg';
 
@@ -154,6 +155,7 @@ const Survey = () => {
           licenseNumber: ensureString(detail?.license_number) || prev.licenseNumber,
           isicCode: ensureString(detail?.isic_code) || prev.isicCode,
           emirate: ensureString(detail?.establishment_emirate?.name) || ensureString(detail?.emirate) || prev.emirate,
+          establishment_contact_email: ensureString(detail?.establishment_contact_email) || prev.establishment_contact_email || '',
           employeeInfo: {
             ...prev.employeeInfo,
             emiratiMale: ensureString(detail?.emirati_male) || prev.employeeInfo.emiratiMale,
@@ -470,12 +472,57 @@ const Survey = () => {
   <div className="min-h-screen flex flex-col">
   <HeaderBar />
 
+  {/* Breadcrumb Navigation */}
+  <div className="bg-white">
+    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-2">
+      <nav className="flex items-center text-sm text-gray-500 space-x-2">
+        <a href="/" className="hover:text-[#92722A] transition-colors flex items-center gap-1">
+          Dashboard
+          <img src={BreadcrumbVector} alt="" className="h-3 w-3 ml-3" />
+        </a>
+        <a href="/survey" className="hover:text-[#92722A] transition-colors flex items-center ml-2">
+          Survey
+          <img src={BreadcrumbVector} alt="" className="h-3 w-3 ml-3" />
+        </a>
+        {step > 1 && (
+          <>
+            <a 
+              href="#" 
+              onClick={(e) => { e.preventDefault(); setStep(1); }} 
+              className="hover:text-[#92722A] transition-colors flex items-center ml-2"
+            >
+              Establishment Information
+              <img src={BreadcrumbVector} alt="" className="h-3 w-3 ml-3" />
+            </a>
+          </>
+        )}
+        {step > 2 && (
+          <>
+            <a 
+              href="#" 
+              onClick={(e) => { e.preventDefault(); setStep(2); }}
+              className="hover:text-[#92722A] transition-colors flex items-center ml-2"
+            >
+              Product Data
+              {step > 2 && <img src={BreadcrumbVector} alt="" className="h-3 w-3 ml-3" />}
+            </a>
+          </>
+        )}
+        <span className="text-[#92722A] font-medium">
+          {step === 1 && 'Establishment Information'}
+          {step === 2 && 'Product Data'}
+          {step === 3 && 'Review & Submit'}
+        </span>
+      </nav>
+    </div>
+  </div>
+
   {/* Step Header Bar */}
-  <div className="bg-white border-b border-gray-200 sticky top-0 z-10">
+  <div className="bg-white sticky top-0 z-10">
     <div className="mx-auto max-w-7xl px-3 sm:px-6 lg:px-8">
       <div className="h-12 flex items-center justify-start">
         {/* Stepper container */}
-        <div className="flex items-center gap-6 sm:gap-10">
+        <div className="flex items-center gap-2 sm:gap-4">
           
           {/* Step 1 */}
           <div
@@ -493,6 +540,9 @@ const Survey = () => {
               Establishment Information
             </span>
           </div>
+          
+          {/* Divider line */}
+          <div className={`w-[150px] h-[3px] ${step >= 2 ? 'bg-[#B68A35]' : 'bg-[#C3C6CB]'}`}></div>
 
           {/* Step 2 */}
           <div
@@ -510,6 +560,9 @@ const Survey = () => {
               Product Data
             </span>
           </div>
+          
+          {/* Divider line after Step 2 */}
+          <div className={`w-[150px] h-[3px] ${step >= 3 ? 'bg-[#B68A35]' : 'bg-[#C3C6CB]'}`}></div>
 
           {/* Step 3 */}
           <div