@djb25/digit-ui-module-vendor 1.0.14 → 1.0.15

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useCallback, useState, Fragment as Fragment$1 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, useLocation, Switch, Link, useHistory, 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, HomeIcon, PropertyHouse, EmployeeModuleCard, Stepper, FormComposer, TickMark, FormStep, CardLabel, TextInput, LabelFieldPair, UploadFile, CardSubHeader, CardText, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, AddIcon, Menu, Label, LinkLabel, ToggleSwitch, CardSectionHeader, StatusTable, Row, EditIcon, DeleteIcon, Modal, InfoIcon, CardHeader, LinkButton, Banner } from '@djb25/digit-ui-react-components';
+import { Header, SearchForm, SearchField, Dropdown as Dropdown$2, MobileNumber, CardLabelError, DatePicker as DatePicker$3, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, HomeIcon, PropertyHouse, EmployeeModuleCard, VerticalTimeline, FormComposer, FormStep, CardLabel, TextInput, LabelFieldPair, UploadFile, CardSubHeader, CardText, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, AddIcon, Menu, Label, LinkLabel, ToggleSwitch, CardSectionHeader, Row, EditIcon, DeleteIcon, Modal, InfoIcon, CardHeader, StatusTable, LinkButton, Banner } from '@djb25/digit-ui-react-components';
 import { useForm, Controller } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 
@@ -390,12 +390,12 @@ const EmployeeApp = ({
     path: `${path}/registry/new-driver`,
     component: renderWithLayout(props => /*#__PURE__*/React.createElement(AddDriver, Object.assign({}, props, {
       parentRoute: path
-    })), layouts.normal)
+    })), layouts.action)
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/registry/new-vehicle`,
     component: renderWithLayout(props => /*#__PURE__*/React.createElement(AddVehicle, Object.assign({}, props, {
       parentRoute: path
-    })), layouts.normal)
+    })), layouts.action)
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/registry/additionaldetails`,
     component: renderWithLayout(props => /*#__PURE__*/React.createElement(VendorCreate, Object.assign({}, props, {
@@ -732,11 +732,6 @@ const AddVendor = ({
   };
   const vendorStepConfig = Config.filter(config => config.head === "ES_VRNDOR_NEW_VENDOR_DETAILS");
   const addressStepConfig = Config.filter(config => config.head === "ES_FSM_REGISTRY_NEW_ADDRESS_DETAILS");
-  const steps = [{
-    label: "ES_VRNDOR_NEW_VENDOR_DETAILS"
-  }, {
-    label: "ES_FSM_REGISTRY_NEW_ADDRESS_DETAILS"
-  }];
   const onFormValueChange = (setValue, formData) => {
     var _formData$serviceType;
     if (formData !== null && formData !== void 0 && formData.vendorName && formData !== null && formData !== void 0 && formData.phone && formData !== null && formData !== void 0 && (_formData$serviceType = formData.serviceType) !== null && _formData$serviceType !== void 0 && _formData$serviceType.code) {
@@ -843,11 +838,22 @@ const AddVendor = ({
       }
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stepper, {
-    steps: steps,
-    currentStep: currentStep - 1,
-    onStepClick: () => {},
-    t: t
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      route: "vendor-details",
+      timeLine: [{
+        actions: "New Vendor Details",
+        currentStep: 1
+      }]
+    }, {
+      route: "address-details",
+      timeLine: [{
+        actions: "Address Details",
+        currentStep: 2
+      }]
+    }],
+    currentActiveIndex: currentStep - 1,
+    showFinalStep: false
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: "1",
@@ -884,40 +890,6 @@ const AddVendor = ({
   })));
 };
 
-const Timeline = ({
-  steps: _steps = [],
-  currentStep: _currentStep = 1
-}) => {
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "custom-stepper-card"
-  }, _steps.map((label, index) => {
-    const stepNumber = index + 1;
-    const isActive = stepNumber === _currentStep;
-    const isCompleted = stepNumber < _currentStep;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "stepper-row-vendor",
-      key: index
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "stepper-left"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `step-circle 
-                ${isActive ? "active" : ""} 
-                ${isCompleted ? "completed" : ""}`
-    }, isCompleted ? /*#__PURE__*/React.createElement(TickMark, {
-      fillColor: "#fff"
-    }) : stepNumber), index !== _steps.length - 1 && /*#__PURE__*/React.createElement("div", {
-      className: `step-line ${isCompleted ? "completed-line" : ""}`
-    })), /*#__PURE__*/React.createElement("div", {
-      className: `step-label 
-              ${isActive ? "active-text" : ""} 
-              ${isCompleted ? "completed-text" : ""}`
-    }, t(label)));
-  }));
-};
-
 const VendorDetails = ({
   t,
   config,
@@ -926,11 +898,8 @@ const VendorDetails = ({
   formData,
   ownerIndex
 }) => {
-  const location = useLocation();
-  console.log(formData, "oiuyt");
   let index = 0;
   let validation = {};
-  const steps = ["VENDOR_ADDITIONAL_DETAILS", "VENDOR_DOCUMENT_DETAILS", "VENDOR_SUMMARY"];
   const [VendorCompany, setVendorCompany] = useState("");
   const [VendorPhone, setVendorPhone] = useState("");
   const [VendorAddress, setVendorAddress] = useState("");
@@ -1030,7 +999,6 @@ const VendorDetails = ({
     setContactPerson(e.target.value);
   }
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const stateId = Digit.ULBService.getStateId();
   const {
     control
   } = useForm();
@@ -1101,15 +1069,25 @@ const VendorDetails = ({
       goNext();
     }
   }, [VendorCompany, VendorPhone, VendorAddress, VendorCategory, VendorEmail, VendorId, userName, Bank, BankbranchName, IFSC, AccountNo, PanNo, GstNo, GstState, RegistrationNo, EpfNo, EsiNo, VendorType, Status, micrNo, PhoneNo, ContactPerson, Company, goNext, userType]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      width: "100%",
-      gap: "24px"
-    }
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    steps: steps,
-    currentStep: 1
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      timeLine: [{
+        actions: t("VENDOR_ADDITIONAL_DETAILS"),
+        currentStep: 1
+      }]
+    }, {
+      timeLine: [{
+        actions: t("VENDOR_DOCUMENT_DETAILS"),
+        currentStep: 2
+      }]
+    }, {
+      timeLine: [{
+        actions: t("VENDOR_SUMMARY"),
+        currentStep: 3
+      }]
+    }],
+    currentActiveIndex: 0,
+    showFinalStep: false
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: "1",
@@ -1461,7 +1439,7 @@ const VendorDetails = ({
       placeholder: "Select",
       t: t
     })
-  }))))));
+  })))));
 };
 
 const VendorDocuments = ({
@@ -1475,7 +1453,6 @@ const VendorDocuments = ({
   const [uploadedFiles, setUploadedFiles] = useState([null]);
   const [error, setError] = useState(null);
   const [ind, setInd] = useState(1);
-  const steps = ["VENDOR_ADDITIONAL_DETAILS", "VENDOR_DOCUMENT_DETAILS", "VENDOR_SUMMARY"];
   const tenantId = Digit.ULBService.getStateId();
   const stateId = Digit.ULBService.getStateId();
   const [documents, setDocuments] = useState((formData === null || formData === void 0 ? void 0 : (_formData$documents = formData.documents) === null || _formData$documents === void 0 ? void 0 : _formData$documents.documents) || []);
@@ -1532,21 +1509,26 @@ const VendorDocuments = ({
     });
     handleFileUpload(file, index);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      width: "100%",
-      gap: "24px"
-    }
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    steps: steps,
-    currentStep: 2
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: "1",
-      overflowY: "auto"
-    }
-  }, /*#__PURE__*/React.createElement(FormStep, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      timeLine: [{
+        actions: t("VENDOR_ADDITIONAL_DETAILS"),
+        currentStep: 1
+      }]
+    }, {
+      timeLine: [{
+        actions: t("VENDOR_DOCUMENT_DETAILS"),
+        currentStep: 2
+      }]
+    }, {
+      timeLine: [{
+        actions: t("VENDOR_SUMMARY"),
+        currentStep: 3
+      }]
+    }],
+    currentActiveIndex: 1,
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement(FormStep, {
     t: t,
     config: config,
     onSelect: handleSubmit,
@@ -1585,7 +1567,7 @@ const VendorDocuments = ({
     label: error,
     onClose: () => setError(null),
     error: true
-  }))));
+  })));
 };
 
 const ServiceDoc = ({
@@ -8030,10 +8012,7 @@ const SearchApplication = ({
     const mobileViewStyles = mobileView ? {
       margin: 0,
       display: "inline"
-    } : {
-      marginTop: "40px",
-      marginLeft: "16px"
-    };
+    } : {};
     return /*#__PURE__*/React.createElement(LinkLabel, {
       style: {
         ...mobileViewStyles
@@ -8149,21 +8128,24 @@ const SearchApplication = ({
     style: {
       display: "grid",
       width: "100%",
-      gridTemplateColumns: "33.33% 66.66% 0%"
+      gridTemplateColumns: "33.33% 66.66% 0%",
+      gap: "16px"
     }
   }, searchFields === null || searchFields === void 0 ? void 0 : searchFields.map((input, index) => /*#__PURE__*/React.createElement("span", {
     key: index,
     className: index === 0 ? "complaint-input" : "mobile-input"
   }, /*#__PURE__*/React.createElement(Label, null, input.label), getFields(input), " ")), /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex"
+      display: "flex",
+      alignItems: "end",
+      gap: "16px"
     }
   }, type === "desktop" && !mobileView && /*#__PURE__*/React.createElement(SubmitBar, {
     className: "submit-bar-search",
     label: t("ES_COMMON_SEARCH"),
     submit: true
   }), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement("span", {
-    className: "clear-search"
+    className: "clear-search generic-button"
   }, clearAll()))), error ? /*#__PURE__*/React.createElement(CardLabelError, {
     className: "search-error-label"
   }, t("ES_SEARCH_APPLICATION_ERROR")) : null))));
@@ -8452,7 +8434,8 @@ const VendorInbox = props => {
     enabled: (vendorIds === null || vendorIds === void 0 ? void 0 : vendorIds.length) > 0
   });
   const {
-    data: allFillingPointsData
+    data: allFillingPointsData,
+    isLoading: isAllFillingPointsLoading
   } = Digit.Hooks.wt.useFillPointSearch({
     tenantId,
     filters: {
@@ -8478,6 +8461,8 @@ const VendorInbox = props => {
         setToast({
           label: t("WT_FIXED_FILLING_MAPPING_SUCCESS")
         });
+        props.refetchData();
+        props.refetchVendor && props.refetchVendor();
         setTimeout(closeToast, 5000);
       },
       onError: err => {
@@ -8517,8 +8502,8 @@ const VendorInbox = props => {
         }, {
           Header: t("WT_FILLING_POINT"),
           accessor: row => {
-            var _row$fillingpointmeta;
-            return (row === null || row === void 0 ? void 0 : row.fillingPointId) || (row === null || row === void 0 ? void 0 : (_row$fillingpointmeta = row.fillingpointmetadata) === null || _row$fillingpointmeta === void 0 ? void 0 : _row$fillingpointmeta.fillingPointId) || (row === null || row === void 0 ? void 0 : row.filling_pt_name) || (row === null || row === void 0 ? void 0 : row.fillingPoint) || "NA";
+            var _row$dsoDetails, _row$dsoDetails2, _row$dsoDetails$filli, _row$dsoDetails3, _row$fillingpointmeta;
+            return (row === null || row === void 0 ? void 0 : row.fillingPointId) || ((_row$dsoDetails = row.dsoDetails) === null || _row$dsoDetails === void 0 ? void 0 : _row$dsoDetails.fillingPointId) || ((_row$dsoDetails2 = row.dsoDetails) !== null && _row$dsoDetails2 !== void 0 && _row$dsoDetails2.fillingPoint && typeof row.dsoDetails.fillingPoint === "object" ? (_row$dsoDetails$filli = row.dsoDetails.fillingPoint) === null || _row$dsoDetails$filli === void 0 ? void 0 : _row$dsoDetails$filli.fillingPointName : (_row$dsoDetails3 = row.dsoDetails) === null || _row$dsoDetails3 === void 0 ? void 0 : _row$dsoDetails3.fillingPoint) || (row === null || row === void 0 ? void 0 : (_row$fillingpointmeta = row.fillingpointmetadata) === null || _row$fillingpointmeta === void 0 ? void 0 : _row$fillingpointmeta.fillingPointId) || (row === null || row === void 0 ? void 0 : row.filling_pt_name) || (row === null || row === void 0 ? void 0 : row.fillingPoint) || "NA";
           },
           id: "fillingPoint",
           Cell: ({
@@ -8527,10 +8512,10 @@ const VendorInbox = props => {
             return /*#__PURE__*/React.createElement(Dropdown$2, {
               className: "fsm-registry-dropdown",
               selected: allFillingPoints === null || allFillingPoints === void 0 ? void 0 : allFillingPoints.find(fp => {
-                var _fp$fillingpointmetad, _row$original$filling, _row$original$filling2, _row$original$filling3;
+                var _fp$fillingpointmetad, _row$original$dsoDeta, _row$original$dsoDeta2, _row$original$dsoDeta3, _row$original$filling, _row$original$filling2, _row$original$filling3, _row$original$filling4;
                 const fpId = String(fp.id || fp.bookingId || fp.fillingPointId || fp.uuid || ((_fp$fillingpointmetad = fp.fillingpointmetadata) === null || _fp$fillingpointmetad === void 0 ? void 0 : _fp$fillingpointmetad.fillingPointId));
-                const rowFpId = String(row.original.fillingPointId || ((_row$original$filling = row.original.fillingpointmetadata) === null || _row$original$filling === void 0 ? void 0 : _row$original$filling.fillingPointId) || row.original.filling_pt_name || row.original.fillingPoint || ((_row$original$filling2 = row.original.fillingPointDetail) === null || _row$original$filling2 === void 0 ? void 0 : _row$original$filling2.id) || ((_row$original$filling3 = row.original.fillingPointDetail) === null || _row$original$filling3 === void 0 ? void 0 : _row$original$filling3.bookingId));
-                return fpId === rowFpId && rowFpId !== "undefined" && rowFpId !== "null";
+                const rowFpId = String(row.original.fillingPointId || ((_row$original$dsoDeta = row.original.dsoDetails) === null || _row$original$dsoDeta === void 0 ? void 0 : _row$original$dsoDeta.fillingPointId) || ((_row$original$dsoDeta2 = row.original.dsoDetails) === null || _row$original$dsoDeta2 === void 0 ? void 0 : (_row$original$dsoDeta3 = _row$original$dsoDeta2.fillingPoint) === null || _row$original$dsoDeta3 === void 0 ? void 0 : _row$original$dsoDeta3.id) || ((_row$original$filling = row.original.fillingpointmetadata) === null || _row$original$filling === void 0 ? void 0 : _row$original$filling.fillingPointId) || row.original.filling_pt_name || (row.original.fillingPoint && typeof row.original.fillingPoint === "object" ? (_row$original$filling2 = row.original.fillingPoint) === null || _row$original$filling2 === void 0 ? void 0 : _row$original$filling2.id : row.original.fillingPoint) || ((_row$original$filling3 = row.original.fillingPointDetail) === null || _row$original$filling3 === void 0 ? void 0 : _row$original$filling3.id) || ((_row$original$filling4 = row.original.fillingPointDetail) === null || _row$original$filling4 === void 0 ? void 0 : _row$original$filling4.bookingId) || "");
+                return fpId === rowFpId && rowFpId !== "undefined" && rowFpId !== "null" && rowFpId !== "";
               }),
               option: allFillingPoints,
               select: value => onFillingPointSelect(row, value),
@@ -8545,8 +8530,8 @@ const VendorInbox = props => {
           Header: t("ES_VENDOR_INBOX_SERVICE_TYPE"),
           id: "serviceType",
           accessor: row => {
-            var _row$dsoDetails, _additionalDetails;
-            let additionalDetails = (_row$dsoDetails = row.dsoDetails) === null || _row$dsoDetails === void 0 ? void 0 : _row$dsoDetails.additionalDetails;
+            var _row$dsoDetails4, _additionalDetails;
+            let additionalDetails = (_row$dsoDetails4 = row.dsoDetails) === null || _row$dsoDetails4 === void 0 ? void 0 : _row$dsoDetails4.additionalDetails;
             if (typeof additionalDetails === "string") {
               try {
                 additionalDetails = JSON.parse(additionalDetails);
@@ -8559,8 +8544,8 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            var _row$original$dsoDeta, _additionalDetails2;
-            let additionalDetails = (_row$original$dsoDeta = row.original.dsoDetails) === null || _row$original$dsoDeta === void 0 ? void 0 : _row$original$dsoDeta.additionalDetails;
+            var _row$original$dsoDeta4, _additionalDetails2;
+            let additionalDetails = (_row$original$dsoDeta4 = row.original.dsoDetails) === null || _row$original$dsoDeta4 === void 0 ? void 0 : _row$original$dsoDeta4.additionalDetails;
             if (typeof additionalDetails === "string") {
               try {
                 additionalDetails = JSON.parse(additionalDetails);
@@ -8576,8 +8561,8 @@ const VendorInbox = props => {
           Header: t("ES_VENDOR_REGISTRY_INBOX_ENABLED"),
           id: "status",
           accessor: row => {
-            var _row$dsoDetails2;
-            return ((_row$dsoDetails2 = row.dsoDetails) === null || _row$dsoDetails2 === void 0 ? void 0 : _row$dsoDetails2.status) || "";
+            var _row$dsoDetails5;
+            return ((_row$dsoDetails5 = row.dsoDetails) === null || _row$dsoDetails5 === void 0 ? void 0 : _row$dsoDetails5.status) || "";
           },
           Cell: ({
             row
@@ -8815,9 +8800,9 @@ const VendorInbox = props => {
       default:
         return [];
     }
-  }, [props.selectedTab, vendors, drivers, tableData, additionalVendorData, t]);
+  }, [props.selectedTab, vendors, drivers, tableData, additionalVendorData, allFillingPoints, t]);
   let result;
-  if (props.isLoading) {
+  if (props.isLoading || isAllFillingPointsLoading) {
     result = /*#__PURE__*/React.createElement(Loader, null);
   } else if (tableData.length === 0) {
     let emptyCardText = "";
@@ -8898,6 +8883,7 @@ const VendorInbox = props => {
   }))), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
+      width: "100%",
       marginLeft: props.userRole === "FSM_ADMIN" ? "" : "24px"
     }
   }, /*#__PURE__*/React.createElement(SearchApplication, {
@@ -9368,7 +9354,6 @@ const AddDriver = ({
   } = useTranslation();
   const stateId = Digit.ULBService.getStateId();
   const [showToast, setShowToast] = useState(null);
-  const history = useHistory();
   const [currentStep, setCurrentStep] = useState(1);
   const queryClient = useQueryClient();
   const steps = [t("ES_FSM_REGISTRY_TITLE_NEW_DRIVER")];
@@ -9455,16 +9440,16 @@ const AddDriver = ({
       }
     });
   };
-  const isMobile = window.Digit.Utils.browser.isMobile();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      width: "100%",
-      gap: "24px"
-    }
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    steps: steps,
-    currentStep: currentStep
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      route: "vendor-details",
+      timeLine: [{
+        actions: t("ES_FSM_REGISTRY_TITLE_NEW_DRIVER"),
+        currentStep: 1
+      }]
+    }],
+    currentActiveIndex: currentStep - 1,
+    showFinalStep: false
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: "1",
@@ -9490,7 +9475,7 @@ const AddDriver = ({
     error: showToast.key === "error" ? true : false,
     label: t(showToast.key === "success" ? `ES_FSM_${showToast.action}_SUCCESS` : showToast.action),
     onClose: closeToast
-  }))));
+  })));
 };
 
 const ConfirmationBox = ({
@@ -9802,12 +9787,7 @@ const EditVendorDetails = props => {
   const excludedKeys = ["vendorAdditionalDetailsId", "vendorId", "tenantId", "code", "lastModifiedTime", "createdTime", "lastModifiedBy", "createdBy", "active", "status", "vendorType", "vendorGroup", "narration", "documents"];
   return /*#__PURE__*/React.createElement("div", {
     className: "employee-form-content"
-  }, !isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, {
-    style: {
-      position: "relative",
-      paddingLeft: "30px"
-    }
-  }, dsoData === null || dsoData === void 0 ? void 0 : (_dsoData$4 = dsoData[0]) === null || _dsoData$4 === void 0 ? void 0 : (_dsoData$4$employeeRe = _dsoData$4.employeeResponse) === null || _dsoData$4$employeeRe === void 0 ? void 0 : _dsoData$4$employeeRe.map((detail, index) => {
+  }, !isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, null, dsoData === null || dsoData === void 0 ? void 0 : (_dsoData$4 = dsoData[0]) === null || _dsoData$4 === void 0 ? void 0 : (_dsoData$4$employeeRe = _dsoData$4.employeeResponse) === null || _dsoData$4$employeeRe === void 0 ? void 0 : _dsoData$4$employeeRe.map((detail, index) => {
     var _detail$values, _detail$child;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
@@ -9816,11 +9796,9 @@ const EditVendorDetails = props => {
         marginBottom: "16px",
         marginTop: "32px"
       }
-    }, t(detail.title)), /*#__PURE__*/React.createElement("div", {
-      style: !isMobile ? {
-        marginLeft: "-15px"
-      } : {}
-    }, /*#__PURE__*/React.createElement(StatusTable, null, detail === null || detail === void 0 ? void 0 : (_detail$values = detail.values) === null || _detail$values === void 0 ? void 0 : _detail$values.map((value, index) => {
+    }, t(detail.title)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "formcomposer-section-grid"
+    }, detail === null || detail === void 0 ? void 0 : (_detail$values = detail.values) === null || _detail$values === void 0 ? void 0 : _detail$values.map((value, index) => {
       var _detail$values2;
       if (value.title === "ES_FSM_REGISTRY_DETAILS_ADDITIONAL_DETAILS") {
         var _vendorAdditionalData, _vendorAdditionalData2;
@@ -9831,7 +9809,7 @@ const EditVendorDetails = props => {
         }, /*#__PURE__*/React.createElement(Row, {
           label: t(value.title),
           text: "",
-          className: "border-none"
+          className: "border-none flex-box"
         }), isVendorAdditionalLoading ? /*#__PURE__*/React.createElement(Loader, null) : additionalDetails ? /*#__PURE__*/React.createElement(Card, {
           className: "card-with-background",
           style: {
@@ -9879,7 +9857,7 @@ const EditVendorDetails = props => {
         text: value.value ? t(String(value.value)) : "N/A",
         last: index === (detail === null || detail === void 0 ? void 0 : (_detail$values2 = detail.values) === null || _detail$values2 === void 0 ? void 0 : _detail$values2.length) - 1,
         caption: value.caption,
-        className: `border-none ${!isMobile ? "vendor-details-row" : ""}`
+        className: `border-none flex-box ${!isMobile ? "vendor-details-row" : ""}`
       });
     }), 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;
@@ -10293,16 +10271,16 @@ const AddVehicle = ({
       }
     });
   };
-  const isMobile = window.Digit.Utils.browser.isMobile();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      width: "100%",
-      gap: "24px"
-    }
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    steps: steps,
-    currentStep: currentStep
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      route: "vendor-details",
+      timeLine: [{
+        actions: t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE"),
+        currentStep: 1
+      }]
+    }],
+    currentActiveIndex: currentStep - 1,
+    showFinalStep: false
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: "1",
@@ -10328,7 +10306,7 @@ const AddVehicle = ({
     error: showToast.key === "error" ? true : false,
     label: t(showToast.key === "success" ? `ES_FSM_REGISTRY_${showToast.action}_SUCCESS` : showToast.action),
     onClose: closeToast
-  }))));
+  })));
 };
 
 const createConfig = [{
@@ -10476,18 +10454,7 @@ const VENDORCreate = ({
   config.indexRoute = "info";
   const CheckPage = (_Digit = Digit) === null || _Digit === void 0 ? void 0 : (_Digit$ComponentRegis = _Digit.ComponentRegistryService) === null || _Digit$ComponentRegis === void 0 ? void 0 : _Digit$ComponentRegis.getComponent("VENDORCheckPage");
   const NewResponse = (_Digit2 = Digit) === null || _Digit2 === void 0 ? void 0 : (_Digit2$ComponentRegi = _Digit2.ComponentRegistryService) === null || _Digit2$ComponentRegi === void 0 ? void 0 : _Digit2$ComponentRegi.getComponent("NewResponse");
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      width: "100%",
-      gap: "24px"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: "1",
-      overflowY: "auto"
-    }
-  }, /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
     const {
       component,
       texts,
@@ -10522,7 +10489,7 @@ const VENDORCreate = ({
     onSuccess: onSuccess
   })), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(Redirect, {
     to: `${match.path}/${config.indexRoute}`
-  }))))));
+  }))));
 };
 
 const ActionButton = ({
@@ -10551,7 +10518,6 @@ const CheckPage = ({
   } = useTranslation();
   const history = useHistory();
   const [categoriesWiseData, setCategoriesWiseData] = useState();
-  const steps = ["VENDOR_ADDITIONAL_DETAILS", "VENDOR_DOCUMENT_DETAILS", "VENDOR_SUMMARY"];
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const stateTenantId = Digit.ULBService.getStateId();
   const {
@@ -10589,19 +10555,30 @@ const CheckPage = ({
       }
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      width: "100%",
-      gap: "24px"
-    }
-  }, window.location.href.includes("/employee") ? /*#__PURE__*/React.createElement(Timeline, {
-    steps: steps,
-    currentStep: 5
+  return /*#__PURE__*/React.createElement(React.Fragment, null, window.location.href.includes("/employee") ? /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      timeLine: [{
+        actions: t("VENDOR_ADDITIONAL_DETAILS"),
+        currentStep: 1
+      }]
+    }, {
+      timeLine: [{
+        actions: t("VENDOR_DOCUMENT_DETAILS"),
+        currentStep: 2
+      }]
+    }, {
+      timeLine: [{
+        actions: t("VENDOR_SUMMARY"),
+        currentStep: 3
+      }]
+    }],
+    currentActiveIndex: 2,
+    showFinalStep: false
   }) : null, /*#__PURE__*/React.createElement("div", {
     style: {
       flex: "1",
-      overflowY: "auto"
+      overflowY: "auto",
+      marginBottom: "20px"
     }
   }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeader, null, t("VENDOR_CHECK_DETAILS")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(CardSubHeader, null, t("VENDOR_ADDITIONAL_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
     label: t("VENDOR_ID"),
@@ -10716,7 +10693,7 @@ const CheckPage = ({
     label: t("COMMON_BUTTON_SUBMIT"),
     onSubmit: onSubmit,
     disabled: !agree
-  })))));
+  }))));
 };
 
 const GetActionMessage = props => {
@@ -10772,7 +10749,9 @@ const NewResponse = ({
       console.log("mutation in acknowejkfdlgi ::: ", mutation);
     } catch (err) {}
   }, []);
-  return mutation.isLoading || mutation.isIdle ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(BannerPicker, {
+  return mutation.isLoading || mutation.isIdle ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Card, {
+    className: "vehicle-details-card"
+  }, /*#__PURE__*/React.createElement(BannerPicker, {
     t: t,
     data: mutation.data,
     isSuccess: mutation.isSuccess,
@@ -11507,7 +11486,9 @@ const VehicleDetails = props => {
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-content"
+  }, /*#__PURE__*/React.createElement(Card, {
     className: "vehicle-details-card",
     style: {
       position: "relative"