@djb25/digit-ui-module-vendor 1.0.27 → 1.0.28

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, useLocation, Switch, useHistory, Link, useRouteMatch, Route, Redirect } from 'react-router-dom';
-import { Header, SearchForm, SearchField, Dropdown as Dropdown$2, MobileNumber, CardLabelError, DatePicker as DatePicker$3, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, HomeIcon, PropertyHouse, EmployeeModuleCard, VerticalTimeline, FormComposer, FormStep, LabelFieldPair, CardLabel, Tooltip, TextInput, UploadFile, ActionBar, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ApplyFilterBar, AddIcon, Menu, LinkLabel, ToggleSwitch, CardSectionHeader, Row, EditIcon, DeleteIcon, Modal, CardText, InfoIcon, CardHeader, CardSubHeader, StatusTable, LinkButton, Banner } from '@djb25/digit-ui-react-components';
+import { Header, SearchForm, SearchField, Dropdown as Dropdown$4, MobileNumber, CardLabelError, DatePicker as DatePicker$5, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, HomeIcon, PropertyHouse, EmployeeModuleCard, VerticalTimeline, FormComposer, FormStep, LabelFieldPair, CardLabel, Tooltip, TextInput, UploadFile, ActionBar, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ApplyFilterBar, AddIcon, Menu, LinkLabel, ViewsIcon, ToggleSwitch, Modal, CardSectionHeader, Row, EditIcon, DeleteIcon, CardText, InfoIcon, CardHeader, CardSubHeader, StatusTable, LinkButton, Banner, MultiSelectDropdown } from '@djb25/digit-ui-react-components';
 import { useForm, Controller } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 
@@ -133,7 +133,7 @@ const VendorSearchApplication = ({
     name: "vendorName",
     render: field => {
       var _vendorData$vendor2;
-      return /*#__PURE__*/React.createElement(Dropdown$2, {
+      return /*#__PURE__*/React.createElement(Dropdown$4, {
         selected: field.value || "",
         select: field.onChange,
         onBlur: field.onBlur,
@@ -167,7 +167,7 @@ const VendorSearchApplication = ({
       className: "employee-card-input employee-card-input--front"
     }, "+91")
   }), /*#__PURE__*/React.createElement(CardLabelError, null, formState === null || formState === void 0 ? void 0 : (_formState$errors = formState.errors) === null || _formState$errors === void 0 ? void 0 : (_formState$errors$mob = _formState$errors["mobileNumber"]) === null || _formState$errors$mob === void 0 ? void 0 : _formState$errors$mob.message)), /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("VENDOR_FROM_DATE")), /*#__PURE__*/React.createElement(Controller, {
-    render: props => /*#__PURE__*/React.createElement(DatePicker$3, {
+    render: props => /*#__PURE__*/React.createElement(DatePicker$5, {
       date: props.value,
       disabled: false,
       onChange: props.onChange
@@ -175,7 +175,7 @@ const VendorSearchApplication = ({
     name: "fromDate",
     control: control
   })), /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("VENDOR_TO_DATE")), /*#__PURE__*/React.createElement(Controller, {
-    render: props => /*#__PURE__*/React.createElement(DatePicker$3, {
+    render: props => /*#__PURE__*/React.createElement(DatePicker$5, {
       date: props.value,
       disabled: false,
       onChange: props.onChange
@@ -329,6 +329,10 @@ const EmployeeApp = ({
   const VendorCreate = Digit.ComponentRegistryService.getComponent("VENDORCreate");
   const DriverDetails = Digit.ComponentRegistryService.getComponent("DriverDetails");
   const VehicleDetails = Digit.ComponentRegistryService.getComponent("VehicleDetails");
+  const AddSupervisor = Digit.ComponentRegistryService.getComponent("AddSupervisor");
+  const SupervisorDetails = Digit.ComponentRegistryService.getComponent("SupervisorDetails");
+  const AddSurveyor = Digit.ComponentRegistryService.getComponent("AddSurveyor");
+  const SurveyorDetails = Digit.ComponentRegistryService.getComponent("SurveyorDetails");
   const getDynamicBreadcrumbs = () => {
     const pathname = location.pathname;
     let crumbs = [{
@@ -370,6 +374,22 @@ const EmployeeApp = ({
       crumbs.push({
         label: t("VENDOR_ADDITIONAL_DETAILS")
       });
+    } else if (pathname.includes("/registry/new-supervisor")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_SUPERVISOR")
+      });
+    } else if (pathname.includes("/registry/supervisor-details") || pathname.includes("/registry/modify-supervisor/")) {
+      crumbs.push({
+        label: t("VENDOR_SUPERVISOR_DETAILS")
+      });
+    } else if (pathname.includes("/registry/new-surveyor")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_SURVEYOR")
+      });
+    } else if (pathname.includes("/registry/surveyor-details") || pathname.includes("/registry/modify-surveyor/")) {
+      crumbs.push({
+        label: t("VENDOR_SURVEYOR_DETAILS")
+      });
     }
     return crumbs;
   };
@@ -447,6 +467,34 @@ const EmployeeApp = ({
     }, /*#__PURE__*/React.createElement(VehicleDetails, Object.assign({}, props, {
       parentRoute: path
     })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/registry/new-supervisor`,
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(AddSupervisor, Object.assign({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/registry/supervisor-details/:id`,
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(SupervisorDetails, Object.assign({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/registry/new-surveyor`,
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(AddSurveyor, Object.assign({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/registry/surveyor-details/:id`,
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(SurveyorDetails, Object.assign({}, props, {
+      parentRoute: path
+    })))
   })))));
 };
 
@@ -1360,7 +1408,7 @@ const VendorDetails = ({
     rules: {
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
-    render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
+    render: props => /*#__PURE__*/React.createElement(Dropdown$4, {
       selected: VendorType,
       select: setVendorType,
       option: [{
@@ -1400,7 +1448,7 @@ const VendorDetails = ({
     rules: {
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
-    render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
+    render: props => /*#__PURE__*/React.createElement(Dropdown$4, {
       selected: VendorCategory,
       select: setVendorCategory,
       option: [{
@@ -1440,7 +1488,7 @@ const VendorDetails = ({
     rules: {
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
-    render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
+    render: props => /*#__PURE__*/React.createElement(Dropdown$4, {
       selected: Status,
       select: setStatus,
       option: [{
@@ -1734,7 +1782,7 @@ const VendorSelectAddress = ({
     });
   }
   if (userType === "employee") {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("MYCITY_CODE_LABEL"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("MYCITY_CODE_LABEL"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$4, {
       className: "",
       isMandatory: true,
       selected: (cities === null || cities === void 0 ? void 0 : cities.length) === 1 ? cities[0] : selectedCity,
@@ -1743,7 +1791,7 @@ const VendorSelectAddress = ({
       select: selectCity,
       optionKey: "code",
       t: t
-    })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_NEW_APPLICATION_LOCATION_MOHALLA"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
+    })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_NEW_APPLICATION_LOCATION_MOHALLA"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$4, {
       className: "",
       isMandatory: true,
       selected: selectedLocality,
@@ -7972,7 +8020,7 @@ const DropdownStatus = ({
   applicationStatuses,
   areApplicationStatus
 }) => {
-  return areApplicationStatus ? /*#__PURE__*/React.createElement(Dropdown$2, {
+  return areApplicationStatus ? /*#__PURE__*/React.createElement(Dropdown$4, {
     option: applicationStatuses,
     optionKey: "name",
     selected: value,
@@ -8058,13 +8106,17 @@ const SearchApplication = ({
         return history.push("/digit-ui/employee/vendor/registry/new-vehicle");
       case "DRIVER":
         return history.push("/digit-ui/employee/vendor/registry/new-driver");
+      case "SUPERVISOR":
+        return history.push("/digit-ui/employee/vendor/registry/new-supervisor");
+      case "SURVEYOR":
+        return history.push("/digit-ui/employee/vendor/registry/new-surveyor");
     }
   }
   const getFields = input => {
     switch (input.type) {
       case "date":
         return /*#__PURE__*/React.createElement(Controller, {
-          render: props => /*#__PURE__*/React.createElement(DatePicker$3, {
+          render: props => /*#__PURE__*/React.createElement(DatePicker$5, {
             date: props.value,
             onChange: props.onChange
           }),
@@ -8086,7 +8138,7 @@ const SearchApplication = ({
         });
       case "dropdown":
         return /*#__PURE__*/React.createElement(Controller, {
-          render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
+          render: props => /*#__PURE__*/React.createElement(Dropdown$4, {
             option: input.options,
             optionKey: input.optionsKey,
             value: props.value,
@@ -8147,7 +8199,19 @@ const SearchApplication = ({
       clearSearch();
       onTabChange("DRIVER");
     }
-  }, t("ES_FSM_REGISTRY_INBOX_TAB_DRIVER"))), /*#__PURE__*/React.createElement("div", {
+  }, t("ES_FSM_REGISTRY_INBOX_TAB_DRIVER")), /*#__PURE__*/React.createElement("button", {
+    className: selectedTab === "SUPERVISOR" ? "search-tab-head-selected" : "search-tab-head",
+    onClick: () => {
+      clearSearch();
+      onTabChange("SUPERVISOR");
+    }
+  }, t("ES_FSM_REGISTRY_INBOX_TAB_SUPERVISOR")), /*#__PURE__*/React.createElement("button", {
+    className: selectedTab === "SURVEYOR" ? "search-tab-head-selected" : "search-tab-head",
+    onClick: () => {
+      clearSearch();
+      onTabChange("SURVEYOR");
+    }
+  }, t("ES_FSM_REGISTRY_INBOX_TAB_SURVEYOR"))), /*#__PURE__*/React.createElement("div", {
     className: "action-bar-wrap-registry"
   }, /*#__PURE__*/React.createElement("div", {
     className: "search-add",
@@ -8158,7 +8222,7 @@ const SearchApplication = ({
     className: ""
   }))), showAddMenu && /*#__PURE__*/React.createElement(Menu, {
     localeKeyPrefix: "ES_FSM_ACTION_CREATE",
-    options: ["VENDOR", "DRIVER", "VEHICLE"],
+    options: ["VENDOR", "DRIVER", "VEHICLE", "SUPERVISOR", "SURVEYOR"],
     t: t,
     onSelect: onActionSelect
   }))), /*#__PURE__*/React.createElement("form", {
@@ -8278,6 +8342,7 @@ const normalizeFillingPointForVehicleUpdate = fillingPoint => {
   };
 };
 const VendorInbox = props => {
+  var _selectedVendorForWor, _selectedVendorForWor2;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const {
     t
@@ -8291,6 +8356,78 @@ const VendorInbox = props => {
   const [showToast, setShowToast] = useState(null);
   const [vendors, setVendors] = useState([]);
   const [drivers, setDrivers] = useState([]);
+  const [showWorkOrderModal, setShowWorkOrderModal] = useState(false);
+  const [selectedVendorForWorkOrder, setSelectedVendorForWorkOrder] = useState(null);
+  const openWorkOrderModal = vendorDetails => {
+    setSelectedVendorForWorkOrder(vendorDetails);
+    setShowWorkOrderModal(true);
+  };
+  const closeWorkOrderModal = () => {
+    setSelectedVendorForWorkOrder(null);
+    setShowWorkOrderModal(false);
+  };
+  const handleViewDocument = async fileStoreId => {
+    if (!fileStoreId) return;
+    try {
+      var _response$data;
+      const response = await Digit.UploadServices.Filefetch([fileStoreId], "dl");
+      if (response !== null && response !== void 0 && (_response$data = response.data) !== null && _response$data !== void 0 && _response$data[fileStoreId]) {
+        const fileUrl = response.data[fileStoreId].split(",")[0];
+        window.open(fileUrl, "_blank");
+      }
+    } catch (e) {
+      console.error(e);
+      setShowToast({
+        key: "error",
+        action: "Failed to fetch document."
+      });
+      setTimeout(closeToast, 5000);
+    }
+  };
+  const workOrderColumns = React.useMemo(() => [{
+    Header: t("WT_NAME"),
+    accessor: "name",
+    Cell: ({
+      row
+    }) => GetCell(row.original.name)
+  }, {
+    Header: t("WT_MOBILE_NUMBER"),
+    accessor: "mobileNumber",
+    Cell: ({
+      row
+    }) => GetCell(row.original.mobileNumber)
+  }, {
+    Header: t("WT_EMAIL_ID"),
+    accessor: "emailId",
+    Cell: ({
+      row
+    }) => GetCell(row.original.emailId)
+  }, {
+    Header: t("WT_VALID_FROM"),
+    accessor: "validFrom",
+    Cell: ({
+      row
+    }) => row.original.validFrom ? Digit.DateUtils.ConvertEpochToDate(row.original.validFrom) : t("CS_NA")
+  }, {
+    Header: t("WT_VALID_TO"),
+    accessor: "validTo",
+    Cell: ({
+      row
+    }) => row.original.validTo ? Digit.DateUtils.ConvertEpochToDate(row.original.validTo) : t("CS_NA")
+  }, {
+    Header: t("WT_DOCUMENT"),
+    accessor: "fileStoreId",
+    Cell: ({
+      row
+    }) => row.original.fileStoreId ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: "#f47738",
+        cursor: "pointer",
+        textDecoration: "underline"
+      },
+      onClick: () => handleViewDocument(row.original.fileStoreId)
+    }, /*#__PURE__*/React.createElement(ViewsIcon, null)) : t("CS_NA")
+  }], [t]);
   const queryClient = useQueryClient();
   const {
     data: vendorData,
@@ -8693,6 +8830,10 @@ const VendorInbox = props => {
         return history.push("/digit-ui/employee/fsm/registry/new-vehicle");
       case "DRIVER":
         return history.push("/digit-ui/employee/fsm/registry/new-driver");
+      case "SUPERVISOR":
+        return history.push("/digit-ui/employee/vendor/registry/new-supervisor");
+      case "SURVEYOR":
+        return history.push("/digit-ui/employee/vendor/registry/new-surveyor");
     }
   };
   const vendorIds = React.useMemo(() => {
@@ -8833,6 +8974,21 @@ const VendorInbox = props => {
               }
             }, hasDetails ? "View Details" : "Add Details"));
           }
+        }, {
+          Header: t("VIEW_WORKORDER_DETAILS"),
+          disableSortBy: true,
+          Cell: ({
+            row
+          }) => {
+            return /*#__PURE__*/React.createElement("button", {
+              className: "submit-bar",
+              style: {
+                backgroundColor: "#417505",
+                color: "white"
+              },
+              onClick: () => openWorkOrderModal(row.original)
+            }, t("VIEW_WORKORDER_DETAILS"));
+          }
         }];
       case "VEHICLE":
         return [{
@@ -8875,7 +9031,7 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            return /*#__PURE__*/React.createElement(Dropdown$2, {
+            return /*#__PURE__*/React.createElement(Dropdown$4, {
               className: "fsm-registry-dropdown",
               selected: getSelectedVendorOption(row.original, vendors),
               option: vendors,
@@ -8930,7 +9086,7 @@ const VendorInbox = props => {
           }) => {
             const selectedVendor = getSelectedVendorOption(row.original, vendors);
             const vendorFillingPoints = getVendorFillingPoints(selectedVendor);
-            return /*#__PURE__*/React.createElement(Dropdown$2, {
+            return /*#__PURE__*/React.createElement(Dropdown$4, {
               className: "fsm-registry-dropdown",
               selected: getSelectedFillingPointOption(row.original, vendorFillingPoints),
               option: vendorFillingPoints,
@@ -8959,7 +9115,7 @@ const VendorInbox = props => {
             const selectedVendor = getSelectedVendorOption(row.original, vendors);
             const selectedFillingPoint = getSelectedFillingPointOption(row.original, getVendorFillingPoints(selectedVendor));
             const availableDrivers = getVendorDriversForFillingPoint(selectedVendor, selectedFillingPoint);
-            return /*#__PURE__*/React.createElement(Dropdown$2, {
+            return /*#__PURE__*/React.createElement(Dropdown$4, {
               className: "fsm-registry-dropdown",
               selected: getSelectedDriverOption(row.original, availableDrivers),
               option: availableDrivers,
@@ -8995,7 +9151,7 @@ const VendorInbox = props => {
         }];
       case "DRIVER":
         return [{
-          Header: t("Driver's Mobile No."),
+          Header: t("ES_FSM_REGISTRY_INBOX_USERNAME"),
           id: "userName",
           accessor: row => {
             var _row$owner;
@@ -9052,7 +9208,7 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            return /*#__PURE__*/React.createElement(Dropdown$2, {
+            return /*#__PURE__*/React.createElement(Dropdown$4, {
               className: "fsm-registry-dropdown",
               selected: (vendors === null || vendors === void 0 ? void 0 : vendors.find(vendor => {
                 var _row$original$vendorD, _row$original$vendor;
@@ -9088,6 +9244,108 @@ const VendorInbox = props => {
             });
           }
         }];
+      case "SUPERVISOR":
+      case "SURVEYOR":
+        return [{
+          Header: props.selectedTab === "SUPERVISOR" ? t("Supervisor's Mobile No.") : t("Surveyor's Mobile No."),
+          id: "userName",
+          accessor: row => {
+            var _row$owner2;
+            return ((_row$owner2 = row.owner) === null || _row$owner2 === void 0 ? void 0 : _row$owner2.userName) || "NA";
+          },
+          Cell: ({
+            row
+          }) => {
+            var _row$original$owner2;
+            const detailsPath = props.selectedTab === "SUPERVISOR" ? "supervisor-details" : "surveyor-details";
+            return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+              className: "link"
+            }, /*#__PURE__*/React.createElement(Link, {
+              to: `/digit-ui/employee/vendor/registry/${detailsPath}/` + row.original["id"]
+            }, /*#__PURE__*/React.createElement("div", null, ((_row$original$owner2 = row.original.owner) === null || _row$original$owner2 === void 0 ? void 0 : _row$original$owner2.userName) || "NA"))));
+          }
+        }, {
+          Header: props.selectedTab === "SUPERVISOR" ? t("ES_FSM_REGISTRY_INBOX_SUPERVISOR_NAME") : t("ES_FSM_REGISTRY_INBOX_SURVEYOR_NAME"),
+          accessor: "name",
+          Cell: ({
+            row
+          }) => {
+            const detailsPath = props.selectedTab === "SUPERVISOR" ? "supervisor-details" : "surveyor-details";
+            return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+              className: "link"
+            }, /*#__PURE__*/React.createElement(Link, {
+              to: `/digit-ui/employee/vendor/registry/${detailsPath}/` + row.original["id"]
+            }, /*#__PURE__*/React.createElement("div", null, `${row.original.name || "N/A"}`))));
+          }
+        }, {
+          Header: t("WT_MOBILE_NUMBER"),
+          accessor: "mobileNumber",
+          Cell: ({
+            row
+          }) => {
+            var _row$original15, _row$original15$owner;
+            return /*#__PURE__*/React.createElement("div", null, ((_row$original15 = row.original) === null || _row$original15 === void 0 ? void 0 : (_row$original15$owner = _row$original15.owner) === null || _row$original15$owner === void 0 ? void 0 : _row$original15$owner.mobileNumber) || "N/A");
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_DATE_CREATION"),
+          accessor: "createdTime",
+          Cell: ({
+            row
+          }) => {
+            var _row$original16, _row$original16$audit, _row$original17, _row$original17$audit;
+            return GetCell((_row$original16 = row.original) !== null && _row$original16 !== void 0 && (_row$original16$audit = _row$original16.auditDetails) !== null && _row$original16$audit !== void 0 && _row$original16$audit.createdTime ? Digit.DateUtils.ConvertEpochToDate((_row$original17 = row.original) === null || _row$original17 === void 0 ? void 0 : (_row$original17$audit = _row$original17.auditDetails) === null || _row$original17$audit === void 0 ? void 0 : _row$original17$audit.createdTime) : "");
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_VENDOR_NAME"),
+          id: "vendorName",
+          accessor: row => {
+            var _row$vendorData4, _row$vendor4;
+            return ((_row$vendorData4 = row.vendorData) === null || _row$vendorData4 === void 0 ? void 0 : _row$vendorData4.name) || ((_row$vendor4 = row.vendor) === null || _row$vendor4 === void 0 ? void 0 : _row$vendor4.name) || "NA";
+          },
+          minWidth: 250,
+          Cell: ({
+            row
+          }) => {
+            return /*#__PURE__*/React.createElement(Dropdown$4, {
+              className: "fsm-registry-dropdown",
+              selected: (vendors === null || vendors === void 0 ? void 0 : vendors.find(vendor => {
+                var _row$original$vendorD2, _row$original$vendor2;
+                return (((_row$original$vendorD2 = row.original.vendorData) === null || _row$original$vendorD2 === void 0 ? void 0 : _row$original$vendorD2.id) || ((_row$original$vendor2 = row.original.vendor) === null || _row$original$vendor2 === void 0 ? void 0 : _row$original$vendor2.id)) === vendor.id;
+              })) || row.original.vendorData || row.original.vendor,
+              option: vendors,
+              select: value => {
+                console.log("Updating vendor for", props.selectedTab, value);
+              },
+              style: {
+                textAlign: "left",
+                width: "100%",
+                minWidth: "250px"
+              },
+              optionKey: "displayName",
+              t: t
+            });
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_ENABLED"),
+          id: "status",
+          accessor: row => row.status || "",
+          Cell: ({
+            row
+          }) => {
+            var _row$original18;
+            return /*#__PURE__*/React.createElement(ToggleSwitch, {
+              style: {
+                display: "flex",
+                justifyContent: "left"
+              },
+              value: ((_row$original18 = row.original) === null || _row$original18 === void 0 ? void 0 : _row$original18.status) === "DISABLED" ? false : true,
+              onChange: () => {
+                console.log("Updating status for", props.selectedTab, row.original.id);
+              },
+              name: `switch-${row.id}`
+            });
+          }
+        }];
       default:
         return [];
     }
@@ -9098,8 +9356,8 @@ const VendorInbox = props => {
         return [{
           Header: t("ES_VENDOR_INBOX_VENDOR_NAME"),
           exportAccessor: row => {
-            var _row$dsoDetails0, _row$owner2, _row$dsoDetails1, _row$dsoDetails10, _row$dsoDetails10$own;
-            return `${(row === null || row === void 0 ? void 0 : row.name) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails0 = row.dsoDetails) === null || _row$dsoDetails0 === void 0 ? void 0 : _row$dsoDetails0.name) || "NA"} (${(row === null || row === void 0 ? void 0 : row.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$owner2 = row.owner) === null || _row$owner2 === void 0 ? void 0 : _row$owner2.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails1 = row.dsoDetails) === null || _row$dsoDetails1 === void 0 ? void 0 : _row$dsoDetails1.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails10 = row.dsoDetails) === null || _row$dsoDetails10 === void 0 ? void 0 : (_row$dsoDetails10$own = _row$dsoDetails10.owner) === null || _row$dsoDetails10$own === void 0 ? void 0 : _row$dsoDetails10$own.mobileNumber) || "NA"})`;
+            var _row$dsoDetails0, _row$owner3, _row$dsoDetails1, _row$dsoDetails10, _row$dsoDetails10$own;
+            return `${(row === null || row === void 0 ? void 0 : row.name) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails0 = row.dsoDetails) === null || _row$dsoDetails0 === void 0 ? void 0 : _row$dsoDetails0.name) || "NA"} (${(row === null || row === void 0 ? void 0 : row.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$owner3 = row.owner) === null || _row$owner3 === void 0 ? void 0 : _row$owner3.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails1 = row.dsoDetails) === null || _row$dsoDetails1 === void 0 ? void 0 : _row$dsoDetails1.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails10 = row.dsoDetails) === null || _row$dsoDetails10 === void 0 ? void 0 : (_row$dsoDetails10$own = _row$dsoDetails10.owner) === null || _row$dsoDetails10$own === void 0 ? void 0 : _row$dsoDetails10$own.mobileNumber) || "NA"})`;
           }
         }, {
           Header: t("ES_VENDOR_INBOX_DATE_VENDOR_CREATION"),
@@ -9136,8 +9394,8 @@ const VendorInbox = props => {
         }, {
           Header: "Map Vendor",
           exportAccessor: row => {
-            var _row$vendor4, _row$vendorData4, _row$vendor5, _row$vendor6, _row$vendor6$owner, _row$vendorData5, _row$vendorData6, _row$vendorData6$owne;
-            return `${(row === null || row === void 0 ? void 0 : (_row$vendor4 = row.vendor) === null || _row$vendor4 === void 0 ? void 0 : _row$vendor4.name) || (row === null || row === void 0 ? void 0 : (_row$vendorData4 = row.vendorData) === null || _row$vendorData4 === void 0 ? void 0 : _row$vendorData4.name) || "NA"} (${(row === null || row === void 0 ? void 0 : (_row$vendor5 = row.vendor) === null || _row$vendor5 === void 0 ? void 0 : _row$vendor5.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor6 = row.vendor) === null || _row$vendor6 === void 0 ? void 0 : (_row$vendor6$owner = _row$vendor6.owner) === null || _row$vendor6$owner === void 0 ? void 0 : _row$vendor6$owner.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendorData5 = row.vendorData) === null || _row$vendorData5 === void 0 ? void 0 : _row$vendorData5.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendorData6 = row.vendorData) === null || _row$vendorData6 === void 0 ? void 0 : (_row$vendorData6$owne = _row$vendorData6.owner) === null || _row$vendorData6$owne === void 0 ? void 0 : _row$vendorData6$owne.mobileNumber) || "NA"})`;
+            var _row$vendor5, _row$vendorData5, _row$vendor6, _row$vendor7, _row$vendor7$owner, _row$vendorData6, _row$vendorData7, _row$vendorData7$owne;
+            return `${(row === null || row === void 0 ? void 0 : (_row$vendor5 = row.vendor) === null || _row$vendor5 === void 0 ? void 0 : _row$vendor5.name) || (row === null || row === void 0 ? void 0 : (_row$vendorData5 = row.vendorData) === null || _row$vendorData5 === void 0 ? void 0 : _row$vendorData5.name) || "NA"} (${(row === null || row === void 0 ? void 0 : (_row$vendor6 = row.vendor) === null || _row$vendor6 === void 0 ? void 0 : _row$vendor6.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor7 = row.vendor) === null || _row$vendor7 === void 0 ? void 0 : (_row$vendor7$owner = _row$vendor7.owner) === null || _row$vendor7$owner === void 0 ? void 0 : _row$vendor7$owner.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendorData6 = row.vendorData) === null || _row$vendorData6 === void 0 ? void 0 : _row$vendorData6.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendorData7 = row.vendorData) === null || _row$vendorData7 === void 0 ? void 0 : (_row$vendorData7$owne = _row$vendorData7.owner) === null || _row$vendorData7$owne === void 0 ? void 0 : _row$vendorData7$owne.mobileNumber) || "NA"})`;
           }
         }, {
           Header: t("ES_VENDOR_INBOX_SERVICE_TYPE"),
@@ -9162,14 +9420,14 @@ const VendorInbox = props => {
         return [{
           Header: t("ES_FSM_REGISTRY_INBOX_USERNAME"),
           exportAccessor: row => {
-            var _row$owner3;
-            return (row === null || row === void 0 ? void 0 : (_row$owner3 = row.owner) === null || _row$owner3 === void 0 ? void 0 : _row$owner3.userName) || "NA";
+            var _row$owner4;
+            return (row === null || row === void 0 ? void 0 : (_row$owner4 = row.owner) === null || _row$owner4 === void 0 ? void 0 : _row$owner4.userName) || "NA";
           }
         }, {
           Header: t("ES_FSM_REGISTRY_INBOX_DRIVER_NAME"),
           exportAccessor: row => {
-            var _row$owner4;
-            return `${(row === null || row === void 0 ? void 0 : row.name) || "NA"} (${(row === null || row === void 0 ? void 0 : (_row$owner4 = row.owner) === null || _row$owner4 === void 0 ? void 0 : _row$owner4.mobileNumber) || "NA"})`;
+            var _row$owner5;
+            return `${(row === null || row === void 0 ? void 0 : row.name) || "NA"} (${(row === null || row === void 0 ? void 0 : (_row$owner5 = row.owner) === null || _row$owner5 === void 0 ? void 0 : _row$owner5.mobileNumber) || "NA"})`;
           }
         }, {
           Header: t("ES_FSM_REGISTRY_INBOX_DATE_DRIVER_CREATION"),
@@ -9180,8 +9438,66 @@ const VendorInbox = props => {
         }, {
           Header: t("ES_FSM_REGISTRY_INBOX_VENDOR_NAME"),
           exportAccessor: row => {
-            var _row$vendorData7, _row$vendor7, _row$vendorData8, _row$vendorData9, _row$vendorData9$owne, _row$vendor8, _row$vendor9, _row$vendor9$owner;
-            return `${(row === null || row === void 0 ? void 0 : (_row$vendorData7 = row.vendorData) === null || _row$vendorData7 === void 0 ? void 0 : _row$vendorData7.name) || (row === null || row === void 0 ? void 0 : (_row$vendor7 = row.vendor) === null || _row$vendor7 === void 0 ? void 0 : _row$vendor7.name) || "NA"} (${(row === null || row === void 0 ? void 0 : (_row$vendorData8 = row.vendorData) === null || _row$vendorData8 === void 0 ? void 0 : _row$vendorData8.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendorData9 = row.vendorData) === null || _row$vendorData9 === void 0 ? void 0 : (_row$vendorData9$owne = _row$vendorData9.owner) === null || _row$vendorData9$owne === void 0 ? void 0 : _row$vendorData9$owne.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor8 = row.vendor) === null || _row$vendor8 === void 0 ? void 0 : _row$vendor8.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor9 = row.vendor) === null || _row$vendor9 === void 0 ? void 0 : (_row$vendor9$owner = _row$vendor9.owner) === null || _row$vendor9$owner === void 0 ? void 0 : _row$vendor9$owner.mobileNumber) || "NA"})`;
+            var _row$vendorData8, _row$vendor8, _row$vendorData9, _row$vendorData0, _row$vendorData0$owne, _row$vendor9, _row$vendor0, _row$vendor0$owner;
+            return `${(row === null || row === void 0 ? void 0 : (_row$vendorData8 = row.vendorData) === null || _row$vendorData8 === void 0 ? void 0 : _row$vendorData8.name) || (row === null || row === void 0 ? void 0 : (_row$vendor8 = row.vendor) === null || _row$vendor8 === void 0 ? void 0 : _row$vendor8.name) || "NA"} (${(row === null || row === void 0 ? void 0 : (_row$vendorData9 = row.vendorData) === null || _row$vendorData9 === void 0 ? void 0 : _row$vendorData9.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendorData0 = row.vendorData) === null || _row$vendorData0 === void 0 ? void 0 : (_row$vendorData0$owne = _row$vendorData0.owner) === null || _row$vendorData0$owne === void 0 ? void 0 : _row$vendorData0$owne.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor9 = row.vendor) === null || _row$vendor9 === void 0 ? void 0 : _row$vendor9.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor0 = row.vendor) === null || _row$vendor0 === void 0 ? void 0 : (_row$vendor0$owner = _row$vendor0.owner) === null || _row$vendor0$owner === void 0 ? void 0 : _row$vendor0$owner.mobileNumber) || "NA"})`;
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_ENABLED"),
+          exportAccessor: row => (row === null || row === void 0 ? void 0 : row.status) || "NA"
+        }];
+      case "SURVEYOR":
+        return [{
+          Header: t("ES_FSM_REGISTRY_INBOX_USERNAME"),
+          exportAccessor: row => {
+            var _row$owner6;
+            return (row === null || row === void 0 ? void 0 : (_row$owner6 = row.owner) === null || _row$owner6 === void 0 ? void 0 : _row$owner6.userName) || "NA";
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_DRIVER_NAME"),
+          exportAccessor: row => {
+            var _row$owner7;
+            return `${(row === null || row === void 0 ? void 0 : row.name) || "NA"} (${(row === null || row === void 0 ? void 0 : (_row$owner7 = row.owner) === null || _row$owner7 === void 0 ? void 0 : _row$owner7.mobileNumber) || "NA"})`;
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_DATE_DRIVER_CREATION"),
+          exportAccessor: row => {
+            var _row$auditDetails7, _row$auditDetails8;
+            return row !== null && row !== void 0 && (_row$auditDetails7 = row.auditDetails) !== null && _row$auditDetails7 !== void 0 && _row$auditDetails7.createdTime ? Digit.DateUtils.ConvertEpochToDate(row === null || row === void 0 ? void 0 : (_row$auditDetails8 = row.auditDetails) === null || _row$auditDetails8 === void 0 ? void 0 : _row$auditDetails8.createdTime) : "";
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_VENDOR_NAME"),
+          exportAccessor: row => {
+            var _row$vendorData1, _row$vendor1, _row$vendorData10, _row$vendorData11, _row$vendorData11$own, _row$vendor10, _row$vendor11, _row$vendor11$owner;
+            return `${(row === null || row === void 0 ? void 0 : (_row$vendorData1 = row.vendorData) === null || _row$vendorData1 === void 0 ? void 0 : _row$vendorData1.name) || (row === null || row === void 0 ? void 0 : (_row$vendor1 = row.vendor) === null || _row$vendor1 === void 0 ? void 0 : _row$vendor1.name) || "NA"} ${(row === null || row === void 0 ? void 0 : (_row$vendorData10 = row.vendorData) === null || _row$vendorData10 === void 0 ? void 0 : _row$vendorData10.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendorData11 = row.vendorData) === null || _row$vendorData11 === void 0 ? void 0 : (_row$vendorData11$own = _row$vendorData11.owner) === null || _row$vendorData11$own === void 0 ? void 0 : _row$vendorData11$own.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor10 = row.vendor) === null || _row$vendor10 === void 0 ? void 0 : _row$vendor10.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor11 = row.vendor) === null || _row$vendor11 === void 0 ? void 0 : (_row$vendor11$owner = _row$vendor11.owner) === null || _row$vendor11$owner === void 0 ? void 0 : _row$vendor11$owner.mobileNumber) || "NA"}`;
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_ENABLED"),
+          exportAccessor: row => (row === null || row === void 0 ? void 0 : row.status) || "NA"
+        }];
+      case "SUPERVISOR":
+        return [{
+          Header: t("ES_FSM_REGISTRY_INBOX_USERNAME"),
+          exportAccessor: row => {
+            var _row$owner8;
+            return (row === null || row === void 0 ? void 0 : (_row$owner8 = row.owner) === null || _row$owner8 === void 0 ? void 0 : _row$owner8.userName) || "NA";
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_DRIVER_NAME"),
+          exportAccessor: row => {
+            var _row$owner9;
+            return `${(row === null || row === void 0 ? void 0 : row.name) || "NA"} (${(row === null || row === void 0 ? void 0 : (_row$owner9 = row.owner) === null || _row$owner9 === void 0 ? void 0 : _row$owner9.mobileNumber) || "NA"})`;
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_DATE_DRIVER_CREATION"),
+          exportAccessor: row => {
+            var _row$auditDetails9, _row$auditDetails0;
+            return row !== null && row !== void 0 && (_row$auditDetails9 = row.auditDetails) !== null && _row$auditDetails9 !== void 0 && _row$auditDetails9.createdTime ? Digit.DateUtils.ConvertEpochToDate(row === null || row === void 0 ? void 0 : (_row$auditDetails0 = row.auditDetails) === null || _row$auditDetails0 === void 0 ? void 0 : _row$auditDetails0.createdTime) : "";
+          }
+        }, {
+          Header: t("ES_FSM_REGISTRY_INBOX_VENDOR_NAME"),
+          exportAccessor: row => {
+            var _row$vendorData12, _row$vendor12, _row$vendorData13, _row$vendorData14, _row$vendorData14$own, _row$vendor13, _row$vendor14, _row$vendor14$owner;
+            return `${(row === null || row === void 0 ? void 0 : (_row$vendorData12 = row.vendorData) === null || _row$vendorData12 === void 0 ? void 0 : _row$vendorData12.name) || (row === null || row === void 0 ? void 0 : (_row$vendor12 = row.vendor) === null || _row$vendor12 === void 0 ? void 0 : _row$vendor12.name) || "NA"} ${(row === null || row === void 0 ? void 0 : (_row$vendorData13 = row.vendorData) === null || _row$vendorData13 === void 0 ? void 0 : _row$vendorData13.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendorData14 = row.vendorData) === null || _row$vendorData14 === void 0 ? void 0 : (_row$vendorData14$own = _row$vendorData14.owner) === null || _row$vendorData14$own === void 0 ? void 0 : _row$vendorData14$own.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor13 = row.vendor) === null || _row$vendor13 === void 0 ? void 0 : _row$vendor13.mobileNumber) || (row === null || row === void 0 ? void 0 : (_row$vendor14 = row.vendor) === null || _row$vendor14 === void 0 ? void 0 : (_row$vendor14$owner = _row$vendor14.owner) === null || _row$vendor14$owner === void 0 ? void 0 : _row$vendor14$owner.mobileNumber) || "NA"}`;
           }
         }, {
           Header: t("ES_FSM_REGISTRY_INBOX_ENABLED"),
@@ -9218,6 +9534,12 @@ const VendorInbox = props => {
     } else if (props.selectedTab === "VEHICLE") {
       emptyCardText = "ES_FSM_REGISTRY_EMPTY_CARD_VEHICLE";
       emptyButtonText = "ES_FSM_REGISTRY_EMPTY_BUTTON_VEHICLE";
+    } else if (props.selectedTab === "SUPERVISOR") {
+      emptyCardText = "ES_FSM_REGISTRY_EMPTY_CARD_SUPERVISOR";
+      emptyButtonText = "ES_FSM_REGISTRY_EMPTY_BUTTON_SUPERVISOR";
+    } else if (props.selectedTab === "SURVEYOR") {
+      emptyCardText = "ES_FSM_REGISTRY_EMPTY_CARD_SURVEYOR";
+      emptyButtonText = "ES_FSM_REGISTRY_EMPTY_BUTTON_SURVEYOR";
     } else {
       emptyCardText = "ES_FSM_REGISTRY_EMPTY_CARD_DRIVER";
       emptyButtonText = "ES_FSM_REGISTRY_EMPTY_BUTTON_DRIVER";
@@ -9313,7 +9635,58 @@ const VendorInbox = props => {
     error: showToast.key === "error" ? true : false,
     label: showToast.label ? t(showToast.label) : t(showToast.key === "success" ? `ES_FSM_REGISTRY_${showToast.action}_DISABLE_SUCCESS` : showToast.action),
     onClose: closeToast
-  }));
+  }), showWorkOrderModal && /*#__PURE__*/React.createElement(Modal, {
+    headerBarMain: /*#__PURE__*/React.createElement("h1", {
+      className: "heading-m",
+      style: {
+        margin: 0
+      }
+    }, t("ES_VENDOR_WORKORDER_DETAILS_MODAL")),
+    headerBarEnd: /*#__PURE__*/React.createElement("div", {
+      className: "icon-bg-secondary",
+      onClick: closeWorkOrderModal,
+      style: {
+        cursor: "pointer"
+      }
+    }, /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "#FFFFFF",
+      width: "24",
+      height: "24"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M0 0h24v24H0V0z",
+      fill: "none"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+    }))),
+    actionCancelLabel: t("CS_COMMON_CLOSE"),
+    actionCancelOnSubmit: closeWorkOrderModal,
+    hideSubmit: true,
+    formId: "modal-action"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "16px"
+    }
+  }, (selectedVendorForWorkOrder === null || selectedVendorForWorkOrder === void 0 ? void 0 : (_selectedVendorForWor = selectedVendorForWorkOrder.dsoDetails) === null || _selectedVendorForWor === void 0 ? void 0 : (_selectedVendorForWor2 = _selectedVendorForWor.vendorWorkOrder) === null || _selectedVendorForWor2 === void 0 ? void 0 : _selectedVendorForWor2.length) > 0 ? /*#__PURE__*/React.createElement(Table, {
+    t: t,
+    data: selectedVendorForWorkOrder.dsoDetails.vendorWorkOrder,
+    columns: workOrderColumns,
+    getCellProps: cellInfo => {
+      return {
+        style: {
+          minWidth: "150px",
+          padding: "8px 12px",
+          fontSize: "13.5px"
+        }
+      };
+    }
+  }) : /*#__PURE__*/React.createElement("p", {
+    style: {
+      textAlign: "center",
+      marginTop: "20px"
+    }
+  }, t("ES_VENDOR_NO_WORKORDERS")))));
 };
 
 const SearchVendor = () => {
@@ -9388,6 +9761,16 @@ const SearchVendor = () => {
     config: {
       enabled: false
     }
+  }) : tab === "SUPERVISOR" ? Digit.Hooks.fsm.useSupervisorDetails(tenantId, {
+    ...paginationParms,
+    status: "ACTIVE,DISABLED"
+  }, {
+    enabled: false
+  }) : tab === "SURVEYOR" ? Digit.Hooks.fsm.useSurveyorDetails(tenantId, {
+    ...paginationParms,
+    status: "ACTIVE,DISABLED"
+  }, {
+    enabled: false
   }) : Digit.Hooks.fsm.useVendorSearch({
     tenantId,
     filters: {
@@ -9433,14 +9816,12 @@ const SearchVendor = () => {
   }, [searchParams, sortParams, pageOffset, pageSize]);
   useEffect(() => {
     if (dsoData !== null && dsoData !== void 0 && dsoData.vehicle && tab === "VEHICLE") {
-      let vehicleIds = "";
-      dsoData.vehicle.map(data => vehicleIds += `${data.id},`);
+      const vehicleIds = dsoData.vehicle.map(data => data.id).filter(Boolean).join(",");
       setVehicleIds(vehicleIds);
       setTableData(dsoData.vehicle);
     }
     if (dsoData !== null && dsoData !== void 0 && dsoData.driver && tab === "DRIVER") {
-      let driverIds = "";
-      dsoData.driver.map(data => driverIds += `${data.id},`);
+      const driverIds = dsoData.driver.map(data => data.id).filter(Boolean).join(",");
       setDriverIds(driverIds);
       setTableData(dsoData === null || dsoData === void 0 ? void 0 : dsoData.driver);
     }
@@ -9471,7 +9852,75 @@ const SearchVendor = () => {
       });
       setTableData(tableData);
     }
-  }, [dsoData]);
+    if (tab === "SUPERVISOR") {
+      const staticSupervisors = [{
+        id: "SUP1",
+        name: "Amit Kumar",
+        employeeId: "EMP001",
+        status: "ACTIVE",
+        owner: {
+          mobileNumber: "9876543210",
+          userName: "9876543210"
+        },
+        auditDetails: {
+          createdTime: new Date().getTime()
+        },
+        vendorData: {
+          name: "Clean City Agency"
+        }
+      }, {
+        id: "SUP2",
+        name: "Rajesh Singh",
+        employeeId: "EMP002",
+        status: "ACTIVE",
+        owner: {
+          mobileNumber: "9876543211",
+          userName: "9876543211"
+        },
+        auditDetails: {
+          createdTime: new Date().getTime()
+        },
+        vendorData: {
+          name: "Green Environment"
+        }
+      }];
+      setTableData((dsoData === null || dsoData === void 0 ? void 0 : dsoData.supervisor) || staticSupervisors);
+    }
+    if (tab === "SURVEYOR") {
+      const staticSurveyors = [{
+        id: "SUR1",
+        name: "Suresh Raina",
+        employeeId: "EMP101",
+        status: "ACTIVE",
+        owner: {
+          mobileNumber: "9123456780",
+          userName: "9123456780"
+        },
+        auditDetails: {
+          createdTime: new Date().getTime()
+        },
+        vendorData: {
+          name: "Clean City Agency"
+        }
+      }, {
+        id: "SUR2",
+        name: "Mahesh Babu",
+        employeeId: "EMP102",
+        status: "ACTIVE",
+        owner: {
+          mobileNumber: "9123456781",
+          userName: "9123456781"
+        },
+        auditDetails: {
+          createdTime: new Date().getTime()
+        },
+        vendorData: {
+          name: "Green Environment"
+        }
+      }];
+      setTableData((dsoData === null || dsoData === void 0 ? void 0 : dsoData.surveyor) || staticSurveyors);
+    }
+  }, [dsoData, tab]);
   useEffect(() => {
     if (vehicleIds !== "" || driverIds !== "") refetchVendor();
   }, [vehicleIds, driverIds]);
@@ -9485,11 +9934,15 @@ const SearchVendor = () => {
           });
           if (vendor) {
             var _vendor$dsoDetails, _vendor$dsoDetails$ve;
-            data.vendor = vendor.dsoDetails;
+            let updatedData = {
+              ...data,
+              vendor: vendor.dsoDetails
+            };
             const vehicleInVendor = (_vendor$dsoDetails = vendor.dsoDetails) === null || _vendor$dsoDetails === void 0 ? void 0 : (_vendor$dsoDetails$ve = _vendor$dsoDetails.vehicles) === null || _vendor$dsoDetails$ve === void 0 ? void 0 : _vendor$dsoDetails$ve.find(vehicle => vehicle.id === data.id);
             if (vehicleInVendor) {
-              data.driverData = vehicleInVendor.driverData || vehicleInVendor.driver || data.driverData;
+              updatedData.driverData = vehicleInVendor.driverData || vehicleInVendor.driver || updatedData.driverData;
             }
+            return updatedData;
           }
           return data;
         });
@@ -9503,7 +9956,10 @@ const SearchVendor = () => {
             return (_ele$dsoDetails2 = ele.dsoDetails) === null || _ele$dsoDetails2 === void 0 ? void 0 : (_ele$dsoDetails2$driv = _ele$dsoDetails2.drivers) === null || _ele$dsoDetails2$driv === void 0 ? void 0 : _ele$dsoDetails2$driv.find(driver => driver.id === data.id);
           });
           if (vendor) {
-            data.vendor = vendor.dsoDetails;
+            return {
+              ...data,
+              vendor: vendor.dsoDetails
+            };
           }
           return data;
         });
@@ -9568,6 +10024,21 @@ const SearchVendor = () => {
   }, {
     label: t("ES_DRIVER_SEARCH_DRIVER_NAME"),
     name: "name"
+  }] : tab === "SUPERVISOR" || tab === "SURVEYOR" ? [{
+    label: t("ES_VENDOR_SEARCH_VENDOR_NAME"),
+    name: "vendor",
+    type: "dropdown",
+    options: allVendors === null || allVendors === void 0 ? void 0 : allVendors.map(data => {
+      var _data$dsoDetails$owne3;
+      return {
+        ...data.dsoDetails,
+        displayName: `${data.dsoDetails.name} (${data.dsoDetails.mobileNumber || ((_data$dsoDetails$owne3 = data.dsoDetails.owner) === null || _data$dsoDetails$owne3 === void 0 ? void 0 : _data$dsoDetails$owne3.mobileNumber) || "N/A"})`
+      };
+    }),
+    optionsKey: "displayName"
+  }, {
+    label: tab === "SUPERVISOR" ? t("ES_SUPERVISOR_SEARCH_NAME") : t("ES_SURVEYOR_SEARCH_NAME"),
+    name: "name"
   }] : [{
     label: t("ES_VENDOR_SEARCH_VENDOR_NAME"),
     name: "name"
@@ -9663,7 +10134,7 @@ const SelectServiceType = ({
     return /*#__PURE__*/React.createElement(Loader, null);
   }
   if (userType === "employee") {
-    return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label)), /*#__PURE__*/React.createElement(Dropdown$2, {
+    return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label)), /*#__PURE__*/React.createElement(Dropdown$4, {
       className: "payment-form-text-input-correction",
       isMandatory: config.isMandatory,
       selected: serviceTypes,
@@ -10259,7 +10730,7 @@ const EditVendorDetails = props => {
       });
     }
     if (selectedAction === "ADD_VEHICLE") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VEHICLE`)), /*#__PURE__*/React.createElement(Dropdown$2, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VEHICLE`)), /*#__PURE__*/React.createElement(Dropdown$4, {
         t: t,
         option: vehicles,
         value: selectedOption,
@@ -10269,7 +10740,7 @@ const EditVendorDetails = props => {
       }));
     }
     if (selectedAction === "ADD_DRIVER") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_DRIVER`)), /*#__PURE__*/React.createElement(Dropdown$2, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_DRIVER`)), /*#__PURE__*/React.createElement(Dropdown$4, {
         t: t,
         option: drivers,
         value: selectedOption,
@@ -11554,7 +12025,7 @@ const DriverDetails = props => {
       });
     }
     if (selectedAction === "ADD_VENDOR") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$4, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -11564,7 +12035,7 @@ const DriverDetails = props => {
       }));
     }
     if (selectedAction === "EDIT_VENDOR") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$4, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -11959,7 +12430,7 @@ const VehicleDetails = props => {
       });
     }
     if (selectedAction === "ADD_VENDOR") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$4, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -11969,7 +12440,7 @@ const VehicleDetails = props => {
       }));
     }
     if (selectedAction === "EDIT_VENDOR") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$4, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -12194,14 +12665,14 @@ const SelectVehicleType = ({
   if (!vehicleData || !serviceTypeData) {
     return /*#__PURE__*/React.createElement("div", null, t("ERROR_FETCHING_DATA"));
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_VEHICLE_MODEL")), /*#__PURE__*/React.createElement(Dropdown$2, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_VEHICLE_MODEL")), /*#__PURE__*/React.createElement(Dropdown$4, {
     className: "form-field",
     selected: selectedModal,
     option: modals,
     select: selectModal,
     optionKey: "name",
     t: t
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_VEHICLE_TYPE")), /*#__PURE__*/React.createElement(Dropdown$2, {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_VEHICLE_TYPE")), /*#__PURE__*/React.createElement(Dropdown$4, {
     className: "form-field",
     selected: selectedType,
     option: types,
@@ -12325,6 +12796,1477 @@ const BankDetailsComponent = ({
   }));
 };
 
+const SupervisorAreaAssignment = ({
+  config,
+  onSelect,
+  t,
+  userType,
+  formData
+}) => {
+  var _formData$areaAssignm, _formData$areaAssignm2, _formData$areaAssignm3, _formData$areaAssignm4;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const [selectedZone, setSelectedZone] = useState((formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm = formData.areaAssignment) === null || _formData$areaAssignm === void 0 ? void 0 : _formData$areaAssignm.zone) || null);
+  const [selectedCluster, setSelectedCluster] = useState((formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm2 = formData.areaAssignment) === null || _formData$areaAssignm2 === void 0 ? void 0 : _formData$areaAssignm2.cluster) || null);
+  const [selectedWard, setSelectedWard] = useState((formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm3 = formData.areaAssignment) === null || _formData$areaAssignm3 === void 0 ? void 0 : _formData$areaAssignm3.ward) || null);
+  const [selectedAreas, setSelectedAreas] = useState((formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm4 = formData.areaAssignment) === null || _formData$areaAssignm4 === void 0 ? void 0 : _formData$areaAssignm4.areas) || []);
+  const [zones, setZones] = useState([]);
+  const [clusters, setClusters] = useState([]);
+  const [wards, setWards] = useState([]);
+  const [areas, setAreas] = useState([]);
+  const {
+    data: boundaryData,
+    isLoading
+  } = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]);
+  useEffect(() => {
+    if (boundaryData) {
+      var _boundaryData$MdmsRes, _boundaryData$MdmsRes2, _boundaryData$MdmsRes3, _boundaryData$MdmsRes4;
+      const tenantBoundary = boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$MdmsRes = boundaryData.MdmsRes) === null || _boundaryData$MdmsRes === void 0 ? void 0 : (_boundaryData$MdmsRes2 = _boundaryData$MdmsRes["egov-location"]) === null || _boundaryData$MdmsRes2 === void 0 ? void 0 : (_boundaryData$MdmsRes3 = _boundaryData$MdmsRes2.TenantBoundary) === null || _boundaryData$MdmsRes3 === void 0 ? void 0 : (_boundaryData$MdmsRes4 = _boundaryData$MdmsRes3[0]) === null || _boundaryData$MdmsRes4 === void 0 ? void 0 : _boundaryData$MdmsRes4.boundary;
+      if (tenantBoundary && tenantBoundary.children) {
+        setZones(tenantBoundary.children);
+      }
+    }
+  }, [boundaryData]);
+  useEffect(() => {
+    if (selectedZone) {
+      var _formData$areaAssignm5, _formData$areaAssignm6;
+      setClusters(selectedZone.children || []);
+      if (selectedZone.code !== (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm5 = formData.areaAssignment) === null || _formData$areaAssignm5 === void 0 ? void 0 : (_formData$areaAssignm6 = _formData$areaAssignm5.zone) === null || _formData$areaAssignm6 === void 0 ? void 0 : _formData$areaAssignm6.code)) {
+        setSelectedCluster(null);
+        setSelectedWard(null);
+        setSelectedAreas([]);
+      }
+    } else {
+      setClusters([]);
+    }
+  }, [selectedZone]);
+  useEffect(() => {
+    if (selectedCluster) {
+      var _formData$areaAssignm7, _formData$areaAssignm8;
+      setWards(selectedCluster.children || []);
+      if (selectedCluster.code !== (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm7 = formData.areaAssignment) === null || _formData$areaAssignm7 === void 0 ? void 0 : (_formData$areaAssignm8 = _formData$areaAssignm7.cluster) === null || _formData$areaAssignm8 === void 0 ? void 0 : _formData$areaAssignm8.code)) {
+        setSelectedWard(null);
+        setSelectedAreas([]);
+      }
+    } else {
+      setWards([]);
+    }
+  }, [selectedCluster]);
+  useEffect(() => {
+    if (selectedWard) {
+      var _formData$areaAssignm9, _formData$areaAssignm0;
+      setAreas(selectedWard.children || []);
+      if (selectedWard.code !== (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm9 = formData.areaAssignment) === null || _formData$areaAssignm9 === void 0 ? void 0 : (_formData$areaAssignm0 = _formData$areaAssignm9.ward) === null || _formData$areaAssignm0 === void 0 ? void 0 : _formData$areaAssignm0.code)) {
+        setSelectedAreas([]);
+      }
+    } else {
+      setAreas([]);
+    }
+  }, [selectedWard]);
+  const handleSelect = (key, value) => {
+    const updatedData = {
+      ...(formData === null || formData === void 0 ? void 0 : formData.areaAssignment),
+      [key]: value
+    };
+    if (key === "zone") {
+      updatedData.cluster = null;
+      updatedData.ward = null;
+      updatedData.areas = [];
+    } else if (key === "cluster") {
+      updatedData.ward = null;
+      updatedData.areas = [];
+    } else if (key === "ward") {
+      updatedData.areas = [];
+    }
+    onSelect(config.key, updatedData);
+  };
+  if (isLoading) return /*#__PURE__*/React.createElement(Loader, null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_ZONE") + " *"), /*#__PURE__*/React.createElement(Dropdown$4, {
+    selected: selectedZone,
+    option: zones,
+    select: val => {
+      setSelectedZone(val);
+      handleSelect("zone", val);
+    },
+    optionKey: "name",
+    t: t
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_CLUSTER") + " *"), /*#__PURE__*/React.createElement(Dropdown$4, {
+    selected: selectedCluster,
+    option: clusters,
+    select: val => {
+      setSelectedCluster(val);
+      handleSelect("cluster", val);
+    },
+    optionKey: "name",
+    t: t,
+    disable: !selectedZone
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_WARD") + " *"), /*#__PURE__*/React.createElement(Dropdown$4, {
+    selected: selectedWard,
+    option: wards,
+    select: val => {
+      setSelectedWard(val);
+      handleSelect("ward", val);
+    },
+    optionKey: "name",
+    t: t,
+    disable: !selectedCluster
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_AREA") + " *"), /*#__PURE__*/React.createElement(MultiSelectDropdown, {
+    options: areas,
+    selected: selectedAreas,
+    onSelect: val => {
+      setSelectedAreas(val);
+      handleSelect("areas", val);
+    },
+    optionsKey: "name",
+    t: t,
+    disable: !selectedWard
+  })));
+};
+
+const {
+  DatePicker: DatePicker$3,
+  Dropdown: Dropdown$2
+} = require("@djb25/digit-ui-react-components");
+const SupervisorConfig = (t, agencies = [], reportingManagers = [], disabled = false) => {
+  return [{
+    head: "ES_VENDOR_SUPERVISOR_BASIC_DETAILS",
+    body: [{
+      label: "ES_VENDOR_SUPERVISOR_FULL_NAME",
+      isMandatory: true,
+      type: "text",
+      disable: disabled,
+      populators: {
+        name: "fullName",
+        validation: {
+          required: true,
+          pattern: {
+            value: /^[A-Za-z\s]+$/,
+            message: t("ES_VENDOR_INVALID_NAME")
+          }
+        },
+        error: t("ES_VENDOR_INVALID_NAME"),
+        defaultValue: "",
+        className: "payment-form-text-input-correction"
+      }
+    }, {
+      label: "ES_VENDOR_SUPERVISOR_MOBILE_NUMBER",
+      isMandatory: true,
+      type: "mobileNumber",
+      disable: disabled,
+      populators: {
+        name: "mobileNumber",
+        validation: {
+          required: true,
+          pattern: /^[6-9]\d{9}$/
+        },
+        error: t("ES_VENDOR_INVALID_MOBILE"),
+        defaultValue: "",
+        className: "payment-form-text-input-correction"
+      }
+    }, {
+      label: "ES_VENDOR_SUPERVISOR_EMAIL_ID",
+      isMandatory: true,
+      type: "text",
+      populators: {
+        name: "emailId",
+        validation: {
+          required: true,
+          pattern: /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9.-]+$/
+        },
+        error: t("ES_VENDOR_INVALID_EMAIL"),
+        defaultValue: "",
+        className: "payment-form-text-input-correction"
+      }
+    }, {
+      label: "ES_VENDOR_SUPERVISOR_EMPLOYEE_ID",
+      isMandatory: true,
+      type: "text",
+      populators: {
+        name: "employeeId",
+        validation: {
+          required: true
+        },
+        defaultValue: "",
+        className: "payment-form-text-input-correction"
+      }
+    }, {
+      label: "ES_VENDOR_SUPERVISOR_GENDER",
+      isMandatory: false,
+      type: "component",
+      key: "gender",
+      component: "SelectGender",
+      texts: {
+        headerCaption: "",
+        header: "CS_COMMON_CHOOSE_GENDER",
+        cardText: "CS_COMMON_SELECT_GENDER",
+        submitBarLabel: "CS_COMMON_NEXT",
+        skipText: "CORE_COMMON_SKIP_CONTINUE"
+      }
+    }]
+  }, {
+    head: "ES_VENDOR_SUPERVISOR_ROLE_ACCESS",
+    body: [{
+      label: "ES_VENDOR_SUPERVISOR_ROLE",
+      isMandatory: true,
+      type: "custom",
+      populators: {
+        name: "role",
+        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown$2, {
+          option: [{
+            code: "SUPERVISOR",
+            name: "Supervisor"
+          }],
+          optionKey: "name",
+          select: props.onChange,
+          selected: props.value,
+          t: t,
+          disable: true
+        }),
+        defaultValue: {
+          code: "SUPERVISOR",
+          name: "Supervisor"
+        }
+      }
+    }, {
+      label: "ES_VENDOR_SUPERVISOR_AGENCY_NAME",
+      isMandatory: true,
+      type: "custom",
+      populators: {
+        name: "agencyName",
+        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown$2, {
+          option: agencies,
+          optionKey: "name",
+          select: props.onChange,
+          selected: props.value,
+          t: t
+        })
+      }
+    }, {
+      label: "ES_VENDOR_SUPERVISOR_REPORTING_MANAGER",
+      isMandatory: false,
+      type: "custom",
+      populators: {
+        name: "reportingManager",
+        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown$2, {
+          option: reportingManagers,
+          optionKey: "name",
+          select: props.onChange,
+          selected: props.value,
+          t: t
+        })
+      }
+    }]
+  }, {
+    head: "ES_VENDOR_SUPERVISOR_AREA_ASSIGNMENT",
+    body: [{
+      type: "component",
+      component: "SupervisorAreaAssignment",
+      key: "areaAssignment",
+      withoutLabel: true
+    }]
+  }];
+};
+
+const AddSupervisor = ({
+  parentUrl,
+  heading
+}) => {
+  var _vendorsData$vendor;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    t
+  } = useTranslation();
+  const [showToast, setShowToast] = useState(null);
+  const [currentStep, setCurrentStep] = useState(1);
+  const queryClient = useQueryClient();
+  const [canSubmit, setCanSubmit] = useState(false);
+  const {
+    isLoading: isMutationLoading,
+    mutate
+  } = Digit.Hooks.fsm.useSupervisorCreate(tenantId);
+  const {
+    data: vendorsData,
+    isLoading: isVendorsLoading
+  } = Digit.Hooks.fsm.useVendorSearch(tenantId, {
+    status: "ACTIVE"
+  });
+  const agencies = (vendorsData === null || vendorsData === void 0 ? void 0 : (_vendorsData$vendor = vendorsData.vendor) === null || _vendorsData$vendor === void 0 ? void 0 : _vendorsData$vendor.map(v => ({
+    code: v.id,
+    name: v.name,
+    ...v
+  }))) || [];
+  const reportingManagers = [{
+    code: "MGR1",
+    name: "John Doe (Agency Admin)"
+  }, {
+    code: "MGR2",
+    name: "Jane Smith (Agency Admin)"
+  }];
+  const Config = SupervisorConfig(t, agencies, reportingManagers);
+  const defaultValues = {
+    role: {
+      code: "SUPERVISOR",
+      name: "Supervisor"
+    }
+  };
+  const onFormValueChange = (setValue, formData) => {
+    var _formData$areaAssignm, _formData$areaAssignm2, _formData$areaAssignm3, _formData$areaAssignm4, _formData$areaAssignm5;
+    const isBasicDetailsFilled = (formData === null || formData === void 0 ? void 0 : formData.fullName) && (formData === null || formData === void 0 ? void 0 : formData.mobileNumber) && (formData === null || formData === void 0 ? void 0 : formData.emailId) && (formData === null || formData === void 0 ? void 0 : formData.employeeId);
+    const isRoleAccessFilled = formData === null || formData === void 0 ? void 0 : formData.agencyName;
+    const isAreaAssignmentFilled = (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm = formData.areaAssignment) === null || _formData$areaAssignm === void 0 ? void 0 : _formData$areaAssignm.zone) && (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm2 = formData.areaAssignment) === null || _formData$areaAssignm2 === void 0 ? void 0 : _formData$areaAssignm2.cluster) && (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm3 = formData.areaAssignment) === null || _formData$areaAssignm3 === void 0 ? void 0 : _formData$areaAssignm3.ward) && (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm4 = formData.areaAssignment) === null || _formData$areaAssignm4 === void 0 ? void 0 : (_formData$areaAssignm5 = _formData$areaAssignm4.areas) === null || _formData$areaAssignm5 === void 0 ? void 0 : _formData$areaAssignm5.length) > 0;
+    if (isBasicDetailsFilled && isRoleAccessFilled && isAreaAssignmentFilled) {
+      setCanSubmit(true);
+    } else {
+      setCanSubmit(false);
+    }
+  };
+  const closeToast = () => {
+    setShowToast(null);
+  };
+  const onSubmit = data => {
+    var _data$gender, _data$agencyName, _data$reportingManage;
+    const formData = {
+      supervisor: {
+        tenantId: tenantId,
+        name: data === null || data === void 0 ? void 0 : data.fullName,
+        employeeId: data === null || data === void 0 ? void 0 : data.employeeId,
+        status: "ACTIVE",
+        owner: {
+          tenantId: tenantId,
+          name: data === null || data === void 0 ? void 0 : data.fullName,
+          gender: (data === null || data === void 0 ? void 0 : (_data$gender = data.gender) === null || _data$gender === void 0 ? void 0 : _data$gender.code) || "OTHERS",
+          emailId: data === null || data === void 0 ? void 0 : data.emailId,
+          mobileNumber: data === null || data === void 0 ? void 0 : data.mobileNumber
+        },
+        vendorSupervisorStatus: "ACTIVE",
+        additionalDetails: {
+          agencyId: data === null || data === void 0 ? void 0 : (_data$agencyName = data.agencyName) === null || _data$agencyName === void 0 ? void 0 : _data$agencyName.code,
+          reportingManager: data === null || data === void 0 ? void 0 : (_data$reportingManage = data.reportingManager) === null || _data$reportingManage === void 0 ? void 0 : _data$reportingManage.code,
+          areaAssignment: data === null || data === void 0 ? void 0 : data.areaAssignment
+        }
+      }
+    };
+    mutate(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "ADD_SUPERVISOR"
+        });
+        queryClient.invalidateQueries("SUPERVISOR_SEARCH");
+        setTimeout(closeToast, 5000);
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      route: "supervisor-details",
+      timeLine: [{
+        actions: t("ES_VENDOR_SUPERVISOR_DETAILS"),
+        currentStep: 1
+      }]
+    }],
+    currentActiveIndex: currentStep - 1,
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement(FormComposer, {
+    isDisabled: !canSubmit,
+    label: t("ES_COMMON_APPLICATION_SUBMIT"),
+    config: Config.map(config => ({
+      ...config,
+      isCollapsible: true,
+      isDefaultOpen: true
+    })),
+    fieldStyle: {
+      marginRight: 0
+    },
+    onSubmit: onSubmit,
+    defaultValues: defaultValues,
+    onFormValueChange: onFormValueChange,
+    noBreakLine: true,
+    mode: "onChange",
+    noCard: true
+  }), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error",
+    label: t(showToast.key === "success" ? `ES_VENDOR_${showToast.action}_SUCCESS` : showToast.action),
+    onClose: closeToast
+  })));
+};
+
+const Heading$3 = props => {
+  return /*#__PURE__*/React.createElement("h1", {
+    className: "heading-m"
+  }, props.label);
+};
+const Close$3 = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "#FFFFFF"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+}));
+const CloseBtn$3 = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "icon-bg-secondary",
+    onClick: props.onClick
+  }, /*#__PURE__*/React.createElement(Close$3, null));
+};
+const SupervisorDetails = props => {
+  var _supervisorData$5, _supervisorData$5$emp;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    t
+  } = useTranslation();
+  const history = useHistory();
+  const queryClient = useQueryClient();
+  const {
+    id: supervisorId
+  } = useParams();
+  const [displayMenu, setDisplayMenu] = useState(false);
+  const [selectedAction, setSelectedAction] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+  const [showToast, setShowToast] = useState(null);
+  const [vendors, setVendors] = useState([]);
+  const [selectedOption, setSelectedOption] = useState({});
+  const {
+    data: supervisorData,
+    isLoading: isLoading,
+    refetch
+  } = Digit.Hooks.fsm.useSupervisorDetails(tenantId, {
+    ids: supervisorId
+  }, {
+    staleTime: Infinity
+  });
+  const {
+    data: vendorData
+  } = Digit.Hooks.fsm.useDsoSearch(tenantId, {
+    sortBy: "name",
+    sortOrder: "ASC",
+    status: "ACTIVE"
+  }, {});
+  const {
+    mutate: mutateSupervisor
+  } = Digit.Hooks.fsm.useSupervisorUpdate(tenantId);
+  const {
+    mutate: mutateVendor
+  } = Digit.Hooks.fsm.useVendorUpdate(tenantId);
+  useEffect(() => {
+    if (vendorData) {
+      let vendors = vendorData.map(data => data.dsoDetails);
+      setVendors(vendors);
+    }
+  }, [vendorData]);
+  useEffect(() => {
+    refetch();
+  }, []);
+  useEffect(() => {
+    switch (selectedAction) {
+      case "DELETE":
+      case "ADD_VENDOR":
+      case "EDIT_VENDOR":
+      case "DELETE_VENDOR":
+        return setShowModal(true);
+      case "EDIT":
+        return history.push("/digit-ui/employee/vendor/modify-supervisor/" + supervisorId);
+      case "HOME":
+        return history.push("/digit-ui/employee/vendor/search-vendor?selectedTabs=SUPERVISOR");
+    }
+  }, [selectedAction]);
+  const closeToast = () => {
+    setShowToast(null);
+  };
+  const handleModalAction = () => {
+    switch (selectedAction) {
+      case "DELETE":
+        return handleDeleteSupervisor();
+      case "DELETE_VENDOR":
+        return handleDeleteVendor();
+      case "ADD_VENDOR":
+        return handleAddVendor();
+      case "EDIT_VENDOR":
+        return handleEditVendor();
+    }
+  };
+  const handleDeleteSupervisor = () => {
+    var _supervisorData$;
+    let details = supervisorData === null || supervisorData === void 0 ? void 0 : (_supervisorData$ = supervisorData[0]) === null || _supervisorData$ === void 0 ? void 0 : _supervisorData$.supervisorData;
+    const formData = {
+      supervisor: {
+        ...details,
+        status: "INACTIVE"
+      }
+    };
+    mutateSupervisor(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "DELETE_SUPERVISOR"
+        });
+        queryClient.invalidateQueries("SUPERVISOR_SEARCH");
+        setTimeout(() => {
+          closeToast();
+          history.push(`/digit-ui/employee/vendor/search-vendor`);
+        }, 5000);
+      }
+    });
+    setShowModal(false);
+  };
+  const handleDeleteVendor = () => {
+    var _supervisorData$2, _supervisorData$2$ven, _supervisorData$2$ven2;
+    let dsoDetails = supervisorData === null || supervisorData === void 0 ? void 0 : (_supervisorData$2 = supervisorData[0]) === null || _supervisorData$2 === void 0 ? void 0 : (_supervisorData$2$ven = _supervisorData$2.vendorDetails) === null || _supervisorData$2$ven === void 0 ? void 0 : (_supervisorData$2$ven2 = _supervisorData$2$ven.vendor) === null || _supervisorData$2$ven2 === void 0 ? void 0 : _supervisorData$2$ven2[0];
+    let getSupervisorVendorDetails = (dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.supervisors) || [];
+    getSupervisorVendorDetails = getSupervisorVendorDetails.map(data => {
+      if (data.id === supervisorId) {
+        data.vendorSupervisorStatus = "INACTIVE";
+      }
+      return data;
+    });
+    const formData = {
+      vendor: {
+        ...dsoDetails,
+        supervisors: getSupervisorVendorDetails
+      }
+    };
+    mutateVendor(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "DELETE_VENDOR"
+        });
+        queryClient.invalidateQueries("FSM_VENDOR_SEARCH");
+        refetch();
+        setTimeout(closeToast, 5000);
+      }
+    });
+    setShowModal(false);
+  };
+  const handleAddVendor = () => {
+    var _supervisorData$3;
+    let dsoDetails = selectedOption;
+    let details = supervisorData === null || supervisorData === void 0 ? void 0 : (_supervisorData$3 = supervisorData[0]) === null || _supervisorData$3 === void 0 ? void 0 : _supervisorData$3.supervisorData;
+    details.vendorSupervisorStatus = "ACTIVE";
+    const formData = {
+      vendor: {
+        ...dsoDetails,
+        supervisors: dsoDetails.supervisors ? [...dsoDetails.supervisors, details] : [details]
+      }
+    };
+    mutateVendor(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        refetch();
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "ADD_VENDOR"
+        });
+        queryClient.invalidateQueries("SUPERVISOR_SEARCH");
+        refetch();
+        setTimeout(closeToast, 5000);
+      }
+    });
+    setShowModal(false);
+    setSelectedAction(null);
+  };
+  const handleEditVendor = () => {
+    var _supervisorData$4;
+    let dsoDetails = selectedOption;
+    let details = supervisorData === null || supervisorData === void 0 ? void 0 : (_supervisorData$4 = supervisorData[0]) === null || _supervisorData$4 === void 0 ? void 0 : _supervisorData$4.supervisorData;
+    details.vendorSupervisorStatus = "ACTIVE";
+    const formData = {
+      vendor: {
+        ...dsoDetails,
+        supervisors: dsoDetails.supervisors ? [...dsoDetails.supervisors, details] : [details]
+      }
+    };
+    mutateVendor(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "EDIT_VENDOR"
+        });
+        refetch();
+        queryClient.invalidateQueries("SUPERVISOR_SEARCH");
+        setTimeout(closeToast, 5000);
+      }
+    });
+    setShowModal(false);
+    setSelectedAction(null);
+  };
+  const closeModal = () => {
+    setSelectedAction(null);
+    setSelectedOption({});
+    setShowModal(false);
+  };
+  const modalHeading = () => {
+    switch (selectedAction) {
+      case "DELETE":
+      case "DELETE_VENDOR":
+        return "ES_VENDOR_SUPERVISOR_DELETE_POPUP_HEADER";
+      case "ADD_VENDOR":
+      case "EDIT_VENDOR":
+        return "ES_VENDOR_SUPERVISOR_ADD_VENDOR_POPUP_HEADER";
+    }
+  };
+  const renderModalContent = () => {
+    if (selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR") {
+      return /*#__PURE__*/React.createElement(ConfirmationBox, {
+        t: t,
+        title: "ES_VENDOR_SUPERVISOR_DELETE_TEXT"
+      });
+    }
+    if (selectedAction === "ADD_VENDOR" || selectedAction === "EDIT_VENDOR") {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$4, {
+        t: t,
+        option: vendors,
+        value: selectedOption,
+        selected: selectedOption,
+        select: setSelectedOption,
+        optionKey: "name"
+      }));
+    }
+  };
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Loader, null);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-content"
+  }, /*#__PURE__*/React.createElement(Card, {
+    style: {
+      position: "relative",
+      backgroundColor: "#fff"
+    }
+  }, supervisorData === null || supervisorData === void 0 ? void 0 : (_supervisorData$5 = supervisorData[0]) === null || _supervisorData$5 === void 0 ? void 0 : (_supervisorData$5$emp = _supervisorData$5.employeeResponse) === null || _supervisorData$5$emp === void 0 ? void 0 : _supervisorData$5$emp.map((detail, index) => {
+    var _detail$values, _detail$child;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, index > 0 && /*#__PURE__*/React.createElement(CardSectionHeader, {
+      style: {
+        marginBottom: "16px",
+        marginTop: "32px"
+      }
+    }, t(detail.title)), /*#__PURE__*/React.createElement(Card, {
+      className: "card-with-background",
+      style: {
+        margin: "10px 16px",
+        padding: "20px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "additional-grid"
+    }, detail === null || detail === void 0 ? void 0 : (_detail$values = detail.values) === null || _detail$values === void 0 ? void 0 : _detail$values.map((value, index) => {
+      return (value === null || value === void 0 ? void 0 : value.type) === "custom" ? /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "additional-label"
+      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
+        className: "additional-value",
+        style: {
+          color: "#a82227",
+          display: "flex",
+          gap: "20px",
+          alignItems: "center"
+        }
+      }, t(value.value) || "N/A", value.value === "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("span", {
+        className: "add-details-link hover-button",
+        onClick: () => setSelectedAction("ADD_VENDOR"),
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(AddIcon, {
+        fill: "#a82227"
+      })), value.value !== "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button",
+        onClick: () => setSelectedAction("EDIT_VENDOR"),
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(EditIcon, null)), /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button",
+        onClick: () => setSelectedAction("DELETE_VENDOR"),
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(DeleteIcon, {
+        fill: "#a82227"
+      }))))) : /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "additional-label"
+      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
+        className: "additional-value"
+      }, t(value.value) || "N/A"));
+    }))), detail === null || detail === void 0 ? void 0 : (_detail$child = detail.child) === null || _detail$child === void 0 ? void 0 : _detail$child.map((data, index) => {
+      var _data$values;
+      return /*#__PURE__*/React.createElement(Card, {
+        className: "card-with-background",
+        key: data.id || index,
+        style: {
+          margin: "10px 16px",
+          padding: "20px"
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "card-head",
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "10px"
+        }
+      }, /*#__PURE__*/React.createElement("h2", {
+        style: {
+          fontSize: "18px",
+          fontWeight: "bold"
+        }
+      }, t(detail.type), " ", index + 1), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "flex",
+          gap: "15px"
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        onClick: () => history.push(`/digit-ui/employee/vendor/registry/modify-surveyor/${data.id}`)
+      }, /*#__PURE__*/React.createElement(EditIcon, {
+        fill: "#a82227",
+        style: {
+          cursor: "pointer"
+        }
+      })))), /*#__PURE__*/React.createElement("div", {
+        className: "additional-grid"
+      }, data === null || data === void 0 ? void 0 : (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values.map((value, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
+        key: idx
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "additional-label"
+      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
+        className: "additional-value"
+      }, t(value.value) || "N/A")))));
+    }), detail.type && /*#__PURE__*/React.createElement("div", {
+      className: "add-details-link hover-button",
+      style: {
+        margin: "10px 16px",
+        color: "#a82227",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: "5px",
+        fontWeight: "bold"
+      },
+      onClick: () => history.push(`/digit-ui/employee/vendor/registry/new-surveyor?supervisorId=${supervisorId}`)
+    }, /*#__PURE__*/React.createElement(AddIcon, {
+      fill: "#a82227"
+    }), t(`${detail.type}_ADD`)));
+  }))), showModal && /*#__PURE__*/React.createElement(Modal, {
+    headerBarMain: /*#__PURE__*/React.createElement(Heading$3, {
+      label: t(modalHeading())
+    }),
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$3, {
+      onClick: closeModal
+    }),
+    actionCancelLabel: t("CS_COMMON_CANCEL"),
+    actionCancelOnSubmit: closeModal,
+    actionSaveLabel: t(selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR" ? "ES_EVENT_DELETE" : "CS_COMMON_SUBMIT"),
+    actionSaveOnSubmit: handleModalAction
+  }, /*#__PURE__*/React.createElement(Card, {
+    style: {
+      boxShadow: "none"
+    }
+  }, renderModalContent())), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error",
+    label: t(showToast.key === "success" ? `ES_VENDOR_${showToast.action}_SUCCESS` : showToast.action),
+    onClose: closeToast
+  }), /*#__PURE__*/React.createElement(ActionBar, {
+    style: {
+      zIndex: "19"
+    }
+  }, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
+    localeKeyPrefix: "ES_VENDOR_SUPERVISOR_ACTION",
+    options: ["EDIT", "DELETE"],
+    t: t,
+    onSelect: a => {
+      setDisplayMenu(false);
+      setSelectedAction(a);
+    }
+  }) : null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("ES_COMMON_TAKE_ACTION"),
+    onSubmit: () => setDisplayMenu(!displayMenu)
+  })));
+};
+
+const {
+  DatePicker: DatePicker$4,
+  Dropdown: Dropdown$3
+} = require("@djb25/digit-ui-react-components");
+const SurveyorConfig = (t, agencies = [], reportingManagers = [], disabled = false) => {
+  return [{
+    head: "ES_VENDOR_SURVEYOR_BASIC_DETAILS",
+    body: [{
+      label: "ES_VENDOR_SURVEYOR_FULL_NAME",
+      isMandatory: true,
+      type: "text",
+      populators: {
+        name: "fullName",
+        validation: {
+          required: true,
+          pattern: /^[A-Za-z\s]+$/
+        },
+        error: t("ES_VENDOR_INVALID_NAME")
+      }
+    }, {
+      label: "ES_VENDOR_SURVEYOR_MOBILE_NUMBER",
+      isMandatory: true,
+      type: "mobileNumber",
+      populators: {
+        name: "mobileNumber",
+        validation: {
+          required: true,
+          pattern: /^[6-9]\d{9}$/
+        },
+        error: t("ES_VENDOR_INVALID_MOBILE")
+      }
+    }, {
+      label: "ES_VENDOR_SURVEYOR_EMAIL_ID",
+      isMandatory: true,
+      type: "text",
+      populators: {
+        name: "emailId",
+        validation: {
+          required: true,
+          pattern: /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9.-]+$/
+        },
+        error: t("ES_VENDOR_INVALID_EMAIL")
+      }
+    }, {
+      label: "ES_VENDOR_SURVEYOR_STAFF_CODE",
+      isMandatory: true,
+      type: "text",
+      populators: {
+        name: "employeeId",
+        validation: {
+          required: true
+        }
+      }
+    }, {
+      label: "ES_VENDOR_SURVEYOR_GENDER",
+      isMandatory: false,
+      type: "component",
+      key: "selectGender",
+      component: "SelectGender",
+      texts: {
+        header: "CS_COMMON_CHOOSE_GENDER",
+        cardText: "CS_COMMON_SELECT_GENDER",
+        submitBarLabel: "CS_COMMON_NEXT"
+      }
+    }]
+  }, {
+    head: "ES_VENDOR_SURVEYOR_ROLE_ACCESS",
+    body: [{
+      label: "ES_VENDOR_SURVEYOR_ROLE",
+      isMandatory: true,
+      type: "custom",
+      populators: {
+        name: "role",
+        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown$3, {
+          option: [{
+            code: "SURVEYOR",
+            name: "Surveyor"
+          }],
+          optionKey: "name",
+          select: props.onChange,
+          selected: props.value,
+          t: t,
+          disable: true
+        }),
+        defaultValue: {
+          code: "SURVEYOR",
+          name: "Surveyor"
+        }
+      }
+    }, {
+      label: "ES_VENDOR_SURVEYOR_AGENCY_NAME",
+      isMandatory: true,
+      type: "custom",
+      populators: {
+        name: "agencyName",
+        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown$3, {
+          option: agencies,
+          optionKey: "name",
+          select: props.onChange,
+          selected: props.value,
+          t: t
+        })
+      }
+    }, {
+      label: "ES_VENDOR_SURVEYOR_REPORTING_MANAGER",
+      isMandatory: false,
+      type: "custom",
+      populators: {
+        name: "reportingManager",
+        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown$3, {
+          option: reportingManagers,
+          optionKey: "name",
+          select: props.onChange,
+          selected: props.value,
+          t: t
+        })
+      }
+    }]
+  }, {
+    head: "ES_VENDOR_SURVEYOR_AREA_ASSIGNMENT",
+    body: [{
+      isMandatory: true,
+      type: "component",
+      key: "areaAssignment",
+      component: "SupervisorAreaAssignment",
+      withoutLabel: true
+    }]
+  }];
+};
+
+const AddSurveyor = ({
+  parentUrl,
+  heading
+}) => {
+  var _vendorsData$vendor;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    t
+  } = useTranslation();
+  const [showToast, setShowToast] = useState(null);
+  const [currentStep, setCurrentStep] = useState(1);
+  const queryClient = useQueryClient();
+  const [canSubmit, setCanSubmit] = useState(false);
+  const {
+    isLoading: isMutationLoading,
+    mutate
+  } = Digit.Hooks.fsm.useSurveyorCreate(tenantId);
+  const {
+    data: vendorsData,
+    isLoading: isVendorsLoading
+  } = Digit.Hooks.fsm.useVendorSearch(tenantId, {
+    status: "ACTIVE"
+  });
+  const agencies = (vendorsData === null || vendorsData === void 0 ? void 0 : (_vendorsData$vendor = vendorsData.vendor) === null || _vendorsData$vendor === void 0 ? void 0 : _vendorsData$vendor.map(v => ({
+    code: v.id,
+    name: v.name,
+    ...v
+  }))) || [];
+  const reportingManagers = [{
+    code: "MGR1",
+    name: "John Doe (Agency Admin)"
+  }, {
+    code: "SUP1",
+    name: "Jane Smith (Supervisor)"
+  }];
+  const Config = SurveyorConfig(t, agencies, reportingManagers);
+  const {
+    supervisorId
+  } = Digit.Hooks.useQueryParams();
+  const defaultValues = {
+    role: {
+      code: "SURVEYOR",
+      name: "Surveyor"
+    },
+    reportingManager: reportingManagers.find(m => m.code === supervisorId) || null
+  };
+  const onFormValueChange = (setValue, formData) => {
+    var _formData$areaAssignm, _formData$areaAssignm2, _formData$areaAssignm3, _formData$areaAssignm4;
+    const isBasicDetailsFilled = (formData === null || formData === void 0 ? void 0 : formData.fullName) && (formData === null || formData === void 0 ? void 0 : formData.mobileNumber) && (formData === null || formData === void 0 ? void 0 : formData.emailId) && (formData === null || formData === void 0 ? void 0 : formData.employeeId);
+    const isRoleAccessFilled = formData === null || formData === void 0 ? void 0 : formData.agencyName;
+    const isAreaAssignmentFilled = (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm = formData.areaAssignment) === null || _formData$areaAssignm === void 0 ? void 0 : _formData$areaAssignm.zone) && (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm2 = formData.areaAssignment) === null || _formData$areaAssignm2 === void 0 ? void 0 : _formData$areaAssignm2.ward) && (formData === null || formData === void 0 ? void 0 : (_formData$areaAssignm3 = formData.areaAssignment) === null || _formData$areaAssignm3 === void 0 ? void 0 : (_formData$areaAssignm4 = _formData$areaAssignm3.areas) === null || _formData$areaAssignm4 === void 0 ? void 0 : _formData$areaAssignm4.length) > 0;
+    if (isBasicDetailsFilled && isRoleAccessFilled && isAreaAssignmentFilled) {
+      setCanSubmit(true);
+    } else {
+      setCanSubmit(false);
+    }
+  };
+  const closeToast = () => {
+    setShowToast(null);
+  };
+  const onSubmit = data => {
+    var _data$gender, _data$agencyName, _data$reportingManage;
+    const formData = {
+      surveyor: {
+        tenantId: tenantId,
+        name: data === null || data === void 0 ? void 0 : data.fullName,
+        employeeId: data === null || data === void 0 ? void 0 : data.employeeId,
+        status: "ACTIVE",
+        owner: {
+          tenantId: tenantId,
+          name: data === null || data === void 0 ? void 0 : data.fullName,
+          gender: (data === null || data === void 0 ? void 0 : (_data$gender = data.gender) === null || _data$gender === void 0 ? void 0 : _data$gender.code) || "OTHERS",
+          emailId: data === null || data === void 0 ? void 0 : data.emailId,
+          mobileNumber: data === null || data === void 0 ? void 0 : data.mobileNumber
+        },
+        vendorSurveyorStatus: "ACTIVE",
+        additionalDetails: {
+          agencyId: data === null || data === void 0 ? void 0 : (_data$agencyName = data.agencyName) === null || _data$agencyName === void 0 ? void 0 : _data$agencyName.code,
+          reportingManager: data === null || data === void 0 ? void 0 : (_data$reportingManage = data.reportingManager) === null || _data$reportingManage === void 0 ? void 0 : _data$reportingManage.code,
+          areaAssignment: data === null || data === void 0 ? void 0 : data.areaAssignment
+        }
+      }
+    };
+    mutate(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "ADD_SURVEYOR"
+        });
+        queryClient.invalidateQueries("SURVEYOR_SEARCH");
+        setTimeout(closeToast, 5000);
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      route: "surveyor-details",
+      timeLine: [{
+        actions: t("ES_VENDOR_SURVEYOR_DETAILS"),
+        currentStep: 1
+      }]
+    }],
+    currentActiveIndex: currentStep - 1,
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement(FormComposer, {
+    isDisabled: !canSubmit,
+    label: t("ES_COMMON_APPLICATION_SUBMIT"),
+    config: Config.map(config => ({
+      ...config,
+      isCollapsible: true,
+      isDefaultOpen: true
+    })),
+    fieldStyle: {
+      marginRight: 0
+    },
+    onSubmit: onSubmit,
+    defaultValues: defaultValues,
+    onFormValueChange: onFormValueChange,
+    noBreakLine: true,
+    mode: "onChange",
+    noCard: true
+  }), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error",
+    label: t(showToast.key === "success" ? `ES_VENDOR_${showToast.action}_SUCCESS` : showToast.action),
+    onClose: closeToast
+  })));
+};
+
+const Heading$4 = props => {
+  return /*#__PURE__*/React.createElement("h1", {
+    className: "heading-m"
+  }, props.label);
+};
+const Close$4 = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "#FFFFFF"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+}));
+const CloseBtn$4 = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "icon-bg-secondary",
+    onClick: props.onClick
+  }, /*#__PURE__*/React.createElement(Close$4, null));
+};
+const SurveyorDetails = props => {
+  var _surveyorData$5, _surveyorData$5$emplo;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    t
+  } = useTranslation();
+  const history = useHistory();
+  const queryClient = useQueryClient();
+  const {
+    id: surveyorId
+  } = useParams();
+  const [displayMenu, setDisplayMenu] = useState(false);
+  const [selectedAction, setSelectedAction] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+  const [showToast, setShowToast] = useState(null);
+  const [vendors, setVendors] = useState([]);
+  const [selectedOption, setSelectedOption] = useState({});
+  const {
+    data: surveyorData,
+    isLoading: isLoading,
+    refetch
+  } = Digit.Hooks.fsm.useSurveyorDetails(tenantId, {
+    ids: surveyorId
+  }, {
+    staleTime: Infinity
+  });
+  const {
+    data: vendorData
+  } = Digit.Hooks.fsm.useDsoSearch(tenantId, {
+    sortBy: "name",
+    sortOrder: "ASC",
+    status: "ACTIVE"
+  }, {});
+  const {
+    mutate: mutateSurveyor
+  } = Digit.Hooks.fsm.useSurveyorUpdate(tenantId);
+  const {
+    mutate: mutateVendor
+  } = Digit.Hooks.fsm.useVendorUpdate(tenantId);
+  useEffect(() => {
+    if (vendorData) {
+      let vendors = vendorData.map(data => data.dsoDetails);
+      setVendors(vendors);
+    }
+  }, [vendorData]);
+  useEffect(() => {
+    refetch();
+  }, []);
+  useEffect(() => {
+    switch (selectedAction) {
+      case "DELETE":
+      case "ADD_VENDOR":
+      case "EDIT_VENDOR":
+      case "DELETE_VENDOR":
+        return setShowModal(true);
+      case "EDIT":
+        return history.push("/digit-ui/employee/vendor/modify-surveyor/" + surveyorId);
+      case "HOME":
+        return history.push("/digit-ui/employee/vendor/search-vendor?selectedTabs=SURVEYOR");
+    }
+  }, [selectedAction]);
+  const closeToast = () => {
+    setShowToast(null);
+  };
+  const handleModalAction = () => {
+    switch (selectedAction) {
+      case "DELETE":
+        return handleDeleteSurveyor();
+      case "DELETE_VENDOR":
+        return handleDeleteVendor();
+      case "ADD_VENDOR":
+        return handleAddVendor();
+      case "EDIT_VENDOR":
+        return handleEditVendor();
+    }
+  };
+  const handleDeleteSurveyor = () => {
+    var _surveyorData$;
+    let details = surveyorData === null || surveyorData === void 0 ? void 0 : (_surveyorData$ = surveyorData[0]) === null || _surveyorData$ === void 0 ? void 0 : _surveyorData$.surveyorData;
+    const formData = {
+      surveyor: {
+        ...details,
+        status: "INACTIVE"
+      }
+    };
+    mutateSurveyor(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "DELETE_SURVEYOR"
+        });
+        queryClient.invalidateQueries("SURVEYOR_SEARCH");
+        setTimeout(() => {
+          closeToast();
+          history.push(`/digit-ui/employee/vendor/search-vendor`);
+        }, 5000);
+      }
+    });
+    setShowModal(false);
+  };
+  const handleDeleteVendor = () => {
+    var _surveyorData$2, _surveyorData$2$vendo, _surveyorData$2$vendo2;
+    let dsoDetails = surveyorData === null || surveyorData === void 0 ? void 0 : (_surveyorData$2 = surveyorData[0]) === null || _surveyorData$2 === void 0 ? void 0 : (_surveyorData$2$vendo = _surveyorData$2.vendorDetails) === null || _surveyorData$2$vendo === void 0 ? void 0 : (_surveyorData$2$vendo2 = _surveyorData$2$vendo.vendor) === null || _surveyorData$2$vendo2 === void 0 ? void 0 : _surveyorData$2$vendo2[0];
+    let getSurveyorVendorDetails = (dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.surveyors) || [];
+    getSurveyorVendorDetails = getSurveyorVendorDetails.map(data => {
+      if (data.id === surveyorId) {
+        data.vendorSurveyorStatus = "INACTIVE";
+      }
+      return data;
+    });
+    const formData = {
+      vendor: {
+        ...dsoDetails,
+        surveyors: getSurveyorVendorDetails
+      }
+    };
+    mutateVendor(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "DELETE_VENDOR"
+        });
+        queryClient.invalidateQueries("FSM_VENDOR_SEARCH");
+        refetch();
+        setTimeout(closeToast, 5000);
+      }
+    });
+    setShowModal(false);
+  };
+  const handleAddVendor = () => {
+    var _surveyorData$3;
+    let dsoDetails = selectedOption;
+    let details = surveyorData === null || surveyorData === void 0 ? void 0 : (_surveyorData$3 = surveyorData[0]) === null || _surveyorData$3 === void 0 ? void 0 : _surveyorData$3.surveyorData;
+    details.vendorSurveyorStatus = "ACTIVE";
+    const formData = {
+      vendor: {
+        ...dsoDetails,
+        surveyors: dsoDetails.surveyors ? [...dsoDetails.surveyors, details] : [details]
+      }
+    };
+    mutateVendor(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        refetch();
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "ADD_VENDOR"
+        });
+        queryClient.invalidateQueries("SURVEYOR_SEARCH");
+        refetch();
+        setTimeout(closeToast, 5000);
+      }
+    });
+    setShowModal(false);
+    setSelectedAction(null);
+  };
+  const handleEditVendor = () => {
+    var _surveyorData$4;
+    let dsoDetails = selectedOption;
+    let details = surveyorData === null || surveyorData === void 0 ? void 0 : (_surveyorData$4 = surveyorData[0]) === null || _surveyorData$4 === void 0 ? void 0 : _surveyorData$4.surveyorData;
+    details.vendorSurveyorStatus = "ACTIVE";
+    const formData = {
+      vendor: {
+        ...dsoDetails,
+        surveyors: dsoDetails.surveyors ? [...dsoDetails.surveyors, details] : [details]
+      }
+    };
+    mutateVendor(formData, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: () => {
+        setShowToast({
+          key: "success",
+          action: "EDIT_VENDOR"
+        });
+        refetch();
+        queryClient.invalidateQueries("SURVEYOR_SEARCH");
+        setTimeout(closeToast, 5000);
+      }
+    });
+    setShowModal(false);
+    setSelectedAction(null);
+  };
+  const closeModal = () => {
+    setSelectedAction(null);
+    setSelectedOption({});
+    setShowModal(false);
+  };
+  const modalHeading = () => {
+    switch (selectedAction) {
+      case "DELETE":
+      case "DELETE_VENDOR":
+        return "ES_VENDOR_SURVEYOR_DELETE_POPUP_HEADER";
+      case "ADD_VENDOR":
+      case "EDIT_VENDOR":
+        return "ES_VENDOR_SURVEYOR_ADD_VENDOR_POPUP_HEADER";
+    }
+  };
+  const renderModalContent = () => {
+    if (selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR") {
+      return /*#__PURE__*/React.createElement(ConfirmationBox, {
+        t: t,
+        title: "ES_VENDOR_SURVEYOR_DELETE_TEXT"
+      });
+    }
+    if (selectedAction === "ADD_VENDOR" || selectedAction === "EDIT_VENDOR") {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$4, {
+        t: t,
+        option: vendors,
+        value: selectedOption,
+        selected: selectedOption,
+        select: setSelectedOption,
+        optionKey: "name"
+      }));
+    }
+  };
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Loader, null);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-content"
+  }, /*#__PURE__*/React.createElement(Card, {
+    style: {
+      position: "relative",
+      backgroundColor: "#fff"
+    }
+  }, surveyorData === null || surveyorData === void 0 ? void 0 : (_surveyorData$5 = surveyorData[0]) === null || _surveyorData$5 === void 0 ? void 0 : (_surveyorData$5$emplo = _surveyorData$5.employeeResponse) === null || _surveyorData$5$emplo === void 0 ? void 0 : _surveyorData$5$emplo.map((detail, index) => {
+    var _detail$values;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, index > 0 && /*#__PURE__*/React.createElement(CardSectionHeader, {
+      style: {
+        marginBottom: "16px",
+        marginTop: "32px"
+      }
+    }, t(detail.title)), /*#__PURE__*/React.createElement(Card, {
+      className: "card-with-background",
+      style: {
+        margin: "10px 16px",
+        padding: "20px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "additional-grid"
+    }, detail === null || detail === void 0 ? void 0 : (_detail$values = detail.values) === null || _detail$values === void 0 ? void 0 : _detail$values.map((value, index) => {
+      return (value === null || value === void 0 ? void 0 : value.type) === "custom" ? /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "additional-label"
+      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
+        className: "additional-value",
+        style: {
+          color: "#a82227",
+          display: "flex",
+          gap: "20px",
+          alignItems: "center"
+        }
+      }, t(value.value) || "N/A", value.value === "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("span", {
+        className: "add-details-link hover-button",
+        onClick: () => setSelectedAction("ADD_VENDOR"),
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(AddIcon, {
+        fill: "#a82227"
+      })), value.value !== "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button",
+        onClick: () => setSelectedAction("EDIT_VENDOR"),
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(EditIcon, null)), /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button",
+        onClick: () => setSelectedAction("DELETE_VENDOR"),
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(DeleteIcon, {
+        fill: "#a82227"
+      }))))) : /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "additional-label"
+      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
+        className: "additional-value"
+      }, t(value.value) || "N/A"));
+    }))));
+  }))), showModal && /*#__PURE__*/React.createElement(Modal, {
+    headerBarMain: /*#__PURE__*/React.createElement(Heading$4, {
+      label: t(modalHeading())
+    }),
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$4, {
+      onClick: closeModal
+    }),
+    actionCancelLabel: t("CS_COMMON_CANCEL"),
+    actionCancelOnSubmit: closeModal,
+    actionSaveLabel: t(selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR" ? "ES_EVENT_DELETE" : "CS_COMMON_SUBMIT"),
+    actionSaveOnSubmit: handleModalAction
+  }, /*#__PURE__*/React.createElement(Card, {
+    style: {
+      boxShadow: "none"
+    }
+  }, renderModalContent())), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error",
+    label: t(showToast.key === "success" ? `ES_VENDOR_${showToast.action}_SUCCESS` : showToast.action),
+    onClose: closeToast
+  }), /*#__PURE__*/React.createElement(ActionBar, {
+    style: {
+      zIndex: "19"
+    }
+  }, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
+    localeKeyPrefix: "ES_VENDOR_SURVEYOR_ACTION",
+    options: ["EDIT", "DELETE"],
+    t: t,
+    onSelect: a => {
+      setDisplayMenu(false);
+      setSelectedAction(a);
+    }
+  }) : null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("ES_COMMON_TAKE_ACTION"),
+    onSubmit: () => setDisplayMenu(!displayMenu)
+  })));
+};
+
 const componentsToRegister = {
   VendorDetails,
   VendorDocuments,
@@ -12343,7 +14285,12 @@ const componentsToRegister = {
   VENDORCheckPage: CheckPage,
   NewResponse,
   DriverDetails,
-  VehicleDetails
+  VehicleDetails,
+  AddSupervisor,
+  SupervisorDetails,
+  SupervisorAreaAssignment,
+  AddSurveyor,
+  SurveyorDetails
 };
 const addComponentsToRegistry = () => {
   Object.entries(componentsToRegister).forEach(([key, value]) => {