@djb25/digit-ui-module-vendor 1.0.18 → 1.0.19

package/dist/index.modern.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo, useCallback, useState, Fragment } from 'react';
+import React, { useEffect, useMemo, useCallback, useState } 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, LayoutWrapper, HomeIcon, PropertyHouse, EmployeeModuleCard, VerticalTimeline, FormComposer, FormStep, CardLabel, Tooltip, 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 { 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, CardSubHeader, CardText, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, AddIcon, Menu, 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';
 
@@ -1095,8 +1095,9 @@ const VendorDetails = ({
   }, /*#__PURE__*/React.createElement(FormStep, {
     config: config,
     onSelect: goNext,
-    t: t
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
+    t: t,
+    className: "formcomposer-grid-container-form"
+  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
     className: "card-label-smaller"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     label: `${t("IFSC_CODE")}`,
@@ -1121,7 +1122,7 @@ const VendorDetails = ({
     pattern: "^[A-Z]{4}0[A-Z0-9]{6}$",
     type: "text",
     title: t("INVALID_IFSC_CODE_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_BANK_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_BANK_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
     className: "check-page-link-button"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     t: t,
@@ -1136,7 +1137,7 @@ const VendorDetails = ({
     value: Bank,
     onChange: setvendorbank,
     disabled: true
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_BANK_BRANCH_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_BANK_BRANCH_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
     className: "check-page-link-button"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     t: t,
@@ -1151,7 +1152,7 @@ const VendorDetails = ({
     placeholder: "Bank Branch Name Auto Select",
     onChange: setBankbranch,
     disabled: false
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_MICR_NO")}`, " ", /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_MICR_NO")}`, " ", /*#__PURE__*/React.createElement("span", {
     className: "check-page-link-button"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     t: t,
@@ -1166,7 +1167,7 @@ const VendorDetails = ({
     placeholder: "MICR No",
     onChange: setmicrNo,
     disabled: false
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("ACCOUNT_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("ACCOUNT_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1183,14 +1184,14 @@ const VendorDetails = ({
     pattern: "[0-9]{9,18}",
     type: "text",
     title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PHONE_NO")}`), /*#__PURE__*/React.createElement(MobileNumber, {
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PHONE_NO")}`), /*#__PURE__*/React.createElement(MobileNumber, {
     value: PhoneNo,
     name: "PhoneNo",
     onChange: setPhoneNo,
     style: {
       width: "100%"
     }
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CONTACT_PERSON")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CONTACT_PERSON")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1207,7 +1208,7 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PAN_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PAN_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1224,7 +1225,7 @@ const VendorDetails = ({
     pattern: "[A-Z]{5}[0-9]{4}[A-Z]{1}",
     type: "text",
     title: t("INVALID_PAN_NO_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("GST_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("GST_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1241,7 +1242,7 @@ const VendorDetails = ({
     pattern: "^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[A-Z0-9]{1}[Z]{1}[A-Z0-9]{1}$",
     type: "text",
     title: t("INVALID_GST_NO_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("GST_REGISTERED_STATE/UT")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("GST_REGISTERED_STATE/UT")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1258,7 +1259,7 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("PT_NAME_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("REGISTRATION_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("REGISTRATION_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1275,7 +1276,7 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("INVALID_REGISTRATION_NO_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("EPF_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("EPF_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1292,7 +1293,7 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,15}$",
     type: "text",
     title: t("INVALID_EPF_NO_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("ESI_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("ESI_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1309,7 +1310,7 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("INVALID_ESI_NO_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, t("VENDOR_TYPE"), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("VENDOR_TYPE"), /*#__PURE__*/React.createElement("div", {
     className: "tooltip",
     style: {
       width: "12px",
@@ -1349,7 +1350,7 @@ const VendorDetails = ({
       placeholder: "Select",
       t: t
     })
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, t("VENOR_CATEGORY"), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("VENOR_CATEGORY"), /*#__PURE__*/React.createElement("div", {
     className: "tooltip",
     style: {
       width: "12px",
@@ -1389,11 +1390,7 @@ const VendorDetails = ({
       placeholder: "Select",
       t: t
     })
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingBottom: "10px"
-    }
-  }, /*#__PURE__*/React.createElement("div", null, t("STATUS"), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("STATUS"), /*#__PURE__*/React.createElement("div", {
     className: "tooltip",
     style: {
       width: "12px",
@@ -8131,27 +8128,27 @@ const SearchApplication = ({
   }))), /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmitInput)
   }, /*#__PURE__*/React.createElement("div", {
-    className: FSTP ? "complaint-input-container for-pt for-search" : "complaint-input-container",
+    className: FSTP ? "for-pt for-search flex-box" : "flex-box",
     style: {
-      display: "grid",
-      width: "100%",
-      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", {
-    className: "finance-mainlayout-col1"
-  }, /*#__PURE__*/React.createElement(Label, null, "\xA0"), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement(SubmitBar, {
+    className: index === 0 ? "finance-mainlayout-col2 complaint-input" : "finance-mainlayout-col2 mobile-input"
+  }, getFields(input))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "end",
+      gap: "16px",
+      alignItems: "center"
+    }
+  }, type === "desktop" && !mobileView && /*#__PURE__*/React.createElement("span", {
+    className: "clear-search generic-button"
+  }, clearAll()), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement(SubmitBar, {
     className: "submit-bar-search",
     label: t("ES_COMMON_SEARCH"),
     submit: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "finance-mainlayout-col1"
-  }, /*#__PURE__*/React.createElement(Label, null, "\xA0"), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement("span", {
-    className: "clear-search generic-button"
-  }, clearAll()))), error ? /*#__PURE__*/React.createElement(CardLabelError, {
+  }))), error ? /*#__PURE__*/React.createElement(CardLabelError, {
     className: "search-error-label"
   }, t("ES_SEARCH_APPLICATION_ERROR")) : null))));
 };
@@ -9323,7 +9320,7 @@ const SelectServiceType = ({
     return /*#__PURE__*/React.createElement(Loader, null);
   }
   if (userType === "employee") {
-    return /*#__PURE__*/React.createElement("div", 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$2, {
       className: "payment-form-text-input-correction",
       isMandatory: config.isMandatory,
       selected: serviceTypes,
@@ -9973,21 +9970,11 @@ const EditVendorDetails = props => {
             className: "additional-value"
           }, safeVal));
         })), /*#__PURE__*/React.createElement("div", {
-          style: {
-            marginTop: "16px",
-            color: "#a82227",
-            cursor: "pointer",
-            textDecoration: "underline"
-          },
+          className: "add-details-link hover-button",
           onClick: () => history.push(`/digit-ui/employee/vendor/registry/additionaldetails/info?vendorId=${dsoId}`)
         }, t("Edit Details"))) : /*#__PURE__*/React.createElement("div", {
-          style: {
-            marginLeft: "16px",
-            color: "#a82227",
-            cursor: "pointer",
-            textDecoration: "underline"
-          },
-          onClick: () => history.push(`/digit-ui/employee/vendor/registry/additionaldetails/vendor-details?vendorId=${dsoId}`)
+          onClick: () => history.push(`/digit-ui/employee/vendor/registry/additionaldetails/vendor-details?vendorId=${dsoId}`),
+          className: "add-details-link hover-button"
         }, t("Add Additional Details")));
       }
       return /*#__PURE__*/React.createElement(Row, {
@@ -10041,11 +10028,7 @@ const EditVendorDetails = props => {
         });
       }));
     }), detail.type && /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: "#a82227",
-        cursor: "pointer",
-        marginLeft: "16px"
-      },
+      className: "add-details-link hover-button",
       onClick: () => onActionSelect(detail.type === "ES_FSM_REGISTRY_DETAILS_TYPE_DRIVER" ? "ADD_DRIVER" : "ADD_VEHICLE")
     }, t(`${detail.type}_ADD`))));
   })), showModal && /*#__PURE__*/React.createElement(Modal, {
@@ -10839,11 +10822,13 @@ const CheckPage = ({
       height: "auto"
     },
     checked: agree
-  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(SubmitBar, {
+  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+    className: "formcomposer-section-button"
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("COMMON_BUTTON_SUBMIT"),
     onSubmit: onSubmit,
     disabled: !agree
-  }))));
+  })))));
 };
 
 const GetActionMessage = props => {
@@ -11058,6 +11043,7 @@ const DriverDetails = props => {
         });
         queryClient.invalidateQueries("DSO_SEARCH");
         setTimeout(() => {
+          closeToast();
           history.push(`/digit-ui/employee/fsm/registry`);
         }, 5000);
       }
@@ -11222,7 +11208,6 @@ const DriverDetails = props => {
       }));
     }
   };
-  const isMobile = window.Digit.Utils.browser.isMobile();
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
@@ -11230,7 +11215,8 @@ const DriverDetails = props => {
     className: "employee-form-content"
   }, /*#__PURE__*/React.createElement(Card, {
     style: {
-      position: "relative"
+      position: "relative",
+      backgroundColor: "#fff"
     }
   }, driverData === null || driverData === void 0 ? void 0 : (_driverData$5 = driverData[0]) === null || _driverData$5 === void 0 ? void 0 : (_driverData$5$employe = _driverData$5.employeeResponse) === null || _driverData$5$employe === void 0 ? void 0 : _driverData$5$employe.map((detail, index) => {
     var _detail$values;
@@ -11251,33 +11237,35 @@ const DriverDetails = props => {
         className: "value",
         style: {
           color: "#a82227",
-          display: "flex"
+          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 hover-button-round",
         onClick: () => onActionSelect("ADD_VENDOR")
       }, /*#__PURE__*/React.createElement(AddIcon, {
         className: "",
         fill: "#a82227",
         styles: {
           cursor: "pointer",
-          marginLeft: "20px",
           height: "24px"
         }
-      })), value.value != "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("span", {
+      })), value.value !== "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button hover-button-round",
         onClick: () => onActionSelect("EDIT_VENDOR")
       }, /*#__PURE__*/React.createElement(EditIcon, {
         style: {
-          cursor: "pointer",
-          marginLeft: "20px"
+          cursor: "pointer"
         }
-      })), value.value != "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("span", {
+      })), value.value !== "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button hover-button-round",
         onClick: () => onActionSelect("DELETE_VENDOR")
       }, /*#__PURE__*/React.createElement(DeleteIcon, {
         className: "delete",
         fill: "#a82227",
         style: {
-          cursor: "pointer",
-          marginLeft: "20px"
+          cursor: "pointer"
         }
       }))))) : /*#__PURE__*/React.createElement(Row, {
         key: t(value.title),
@@ -11347,7 +11335,6 @@ const CloseBtn$2 = props => {
 const VehicleDetails = props => {
   var _vehicleData$6, _vehicleData$6$employ;
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const state = Digit.ULBService.getStateId();
   const {
     t
   } = useTranslation();
@@ -11358,7 +11345,6 @@ const VehicleDetails = props => {
   } = useParams();
   const [displayMenu, setDisplayMenu] = useState(false);
   const [selectedAction, setSelectedAction] = useState(null);
-  const [config, setCurrentConfig] = useState({});
   const [showModal, setShowModal] = useState(false);
   const [showToast, setShowToast] = useState(null);
   const [vendors, setVendors] = useState([]);
@@ -11588,6 +11574,7 @@ const VehicleDetails = props => {
         });
         queryClient.invalidateQueries("FSM_VEICLES_SEARCH");
         setTimeout(() => {
+          closeToast();
           history.push(`/digit-ui/employee/fsm/registry`);
         }, 5000);
       }
@@ -11602,7 +11589,7 @@ const VehicleDetails = props => {
       });
     }
     if (selectedAction === "ADD_VENDOR") {
-      return /*#__PURE__*/React.createElement(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$2, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -11612,7 +11599,7 @@ const VehicleDetails = props => {
       }));
     }
     if (selectedAction === "EDIT_VENDOR") {
-      return /*#__PURE__*/React.createElement(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$2, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -11654,40 +11641,38 @@ const VehicleDetails = props => {
       }
     }, t(detail.title)), /*#__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) => {
       var _detail$values2, _detail$values3;
-      return (value === null || value === void 0 ? void 0 : value.type) === "custom" ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return (value === null || value === void 0 ? void 0 : value.type) === "custom" ? /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("div", {
         className: `${index === (detail === null || detail === void 0 ? void 0 : (_detail$values2 = detail.values) === null || _detail$values2 === void 0 ? void 0 : _detail$values2.length) - 1 ? "row last" : "row"} border-none`
       }, /*#__PURE__*/React.createElement("h2", null, t(value.title)), /*#__PURE__*/React.createElement("div", {
-        className: "value",
+        className: "value add-details-link hover-button",
         style: {
           color: "#a82227",
-          display: "flex"
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        }
+      }, value.value === "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("div", {
+        onClick: () => onActionSelect("ADD_VENDOR"),
+        style: {
+          color: "#a82227",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
         }
-      }, t(value.value) || "N/A", value.value === "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("span", {
-        onClick: () => onActionSelect("ADD_VENDOR")
       }, /*#__PURE__*/React.createElement(AddIcon, {
         className: "",
-        fill: "#a82227",
-        styles: {
-          cursor: "pointer",
-          marginLeft: "20px",
-          height: "24px"
-        }
-      })), value.value != "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("span", {
+        fill: "#a82227"
+      }), " ", t(value.value) || "N/A"), value.value !== "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button",
         onClick: () => onActionSelect("EDIT_VENDOR")
-      }, /*#__PURE__*/React.createElement(EditIcon, {
-        style: {
-          cursor: "pointer",
-          marginLeft: "20px"
-        }
-      })), value.value != "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement(EditIcon, null)), value.value !== "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button",
         onClick: () => onActionSelect("DELETE_VENDOR")
       }, /*#__PURE__*/React.createElement(DeleteIcon, {
         className: "delete",
-        fill: "#a82227",
-        style: {
-          cursor: "pointer",
-          marginLeft: "20px"
-        }
+        fill: "#a82227"
       }))))) : /*#__PURE__*/React.createElement(Row, {
         key: t(value.title),
         label: t(value.title),