@bigbinary/neeto-approvals-frontend 0.2.13 → 0.2.15

package/dist/index.js

@@ -1,33 +1,36 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { useMutationWithInvalidation, useDebounce, withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import { Link, useLocation, useHistory, Switch, Route, Redirect, useParams } from 'react-router-dom';
 import i18next, { t as t$1 } from 'i18next';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
-import { Button, Tag, Pane, Typography, Label, Textarea, Table as Table$1, NoData, Alert, Tab as Tab$1, Select as Select$1, Callout } from '@bigbinary/neetoui';
-import { isPresent, findBy, capitalize, noop, camelToSnakeCase, removeBy, findById } from 'neetocist';
+import { Button, Tag, Pane, Typography, Label, Textarea, Table as Table$1, NoData, Alert, Tab as Tab$1, Select, Callout } from '@bigbinary/neetoui';
 import { isEmpty, keys } from 'ramda';
+import { capitalize, isPresent, findBy, camelToSnakeCase, removeBy, noop, isNotEmpty, findById } from '@bigbinary/neeto-cist';
+import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import { useTranslation, Trans } from 'react-i18next';
 import { useQuery, useQueryClient } from 'react-query';
 import axios from 'axios';
+import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
+import { isEditorEmpty, EditorContent, FormikEditor } from '@bigbinary/neeto-editor';
+import * as yup from 'yup';
 import { dateFormat, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
-import { EditorContent, isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Form as Form$2, Input, Textarea as Textarea$1, Select } from '@bigbinary/neetoui/formik';
-import * as yup from 'yup';
-import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import { Input, Textarea as Textarea$1, Form as Form$3 } from '@bigbinary/neetoui/formik';
+import { useFormikContext } from 'formik';
+import ToggleFeatureCard from '@bigbinary/neeto-molecules/ToggleFeatureCard';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
 function _toPrimitive(input, hint) {
@@ -65,31 +68,31 @@ function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
       try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 
@@ -164,8 +167,8 @@ var QUERY_KEYS = {
   VIEWS: "neeto-approvals-views"
 };
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchRequests = function useFetchRequests(_ref) {
   var requestUrl = _ref.requestUrl,
     _ref$params = _ref.params,
@@ -240,7 +243,7 @@ var STATUS_TAG_STYLE = {
 };
 var APPROVAL_REQUEST_FORM_INITIAL_VALUES = {
   message: "",
-  additionalInfo: ""
+  approver: {}
 };
 var STATUS_UPDATED_BY = {
   rejected: t$1("neetoApprovals.common.rejectedBy"),
@@ -252,6 +255,102 @@ var SORT_ORDER = {
   ascend: "asc",
   descend: "desc"
 };
+var REQUEST_FORM_VALIDATION_SCHEMA = yup.object().shape({
+  message: yup.string().test("message", t$1("neetoApprovals.validations.required", {
+    what: t$1("neetoApprovals.inputs.labels.message")
+  }), function (content) {
+    return !isEditorEmpty(content);
+  }),
+  approver: yup.object().required(t$1("neetoApprovals.validations.approver"))
+});
+
+var HISTORY_TABLE_COLUMNS = [{
+  dataIndex: "approvalLabel",
+  key: "approvalLabel",
+  sorter: true,
+  width: "25%",
+  title: t$1("neetoApprovals.common.id"),
+  render: function render(approvalLabel, _ref) {
+    var requestableUrl = _ref.requestableUrl;
+    var url = new URL(requestableUrl || window.location.origin);
+    return /*#__PURE__*/React.createElement(Button, {
+      label: approvalLabel,
+      style: "link",
+      to: url.pathname
+    });
+  }
+}, {
+  dataIndex: "title",
+  key: "title",
+  sorter: true,
+  width: "25%",
+  title: t$1("neetoApprovals.common.title")
+}, {
+  dataIndex: "status",
+  key: "status",
+  sorter: true,
+  width: "25%",
+  title: t$1("neetoApprovals.common.status"),
+  render: function render(status) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      label: capitalize(status),
+      style: STATUS_TAG_STYLE[status]
+    });
+  }
+}, {
+  dataIndex: "createdAt",
+  key: "createdAt",
+  sorter: true,
+  width: "25%",
+  title: t$1("neetoApprovals.common.created"),
+  render: function render(createdAt) {
+    return /*#__PURE__*/React.createElement(DateFormat.FromNow, {
+      date: createdAt,
+      typographyProps: {
+        style: "body2"
+      }
+    });
+  }
+}];
+
+var Footer = function Footer(_ref) {
+  var isLoading = _ref.isLoading,
+    handleSubmit = _ref.handleSubmit,
+    isCurrentUserApprover = _ref.isCurrentUserApprover,
+    isCurrentUserRequester = _ref.isCurrentUserRequester;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (!isCurrentUserApprover && !isCurrentUserRequester) return null;
+  if (isCurrentUserApprover) {
+    return /*#__PURE__*/React.createElement(Pane.Footer, {
+      className: "flex gap-x-2"
+    }, /*#__PURE__*/React.createElement(Button, {
+      label: t("neetoApprovals.buttons.approve"),
+      loading: isLoading,
+      type: "submit",
+      onClick: function onClick() {
+        return handleSubmit(STATUSES.approved);
+      }
+    }), /*#__PURE__*/React.createElement(Button, {
+      label: t("neetoApprovals.buttons.decline"),
+      loading: isLoading,
+      style: "text",
+      onClick: function onClick() {
+        return handleSubmit(STATUSES.rejected);
+      }
+    }));
+  }
+  return /*#__PURE__*/React.createElement(Pane.Footer, {
+    className: "flex gap-x-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    label: t("neetoApprovals.buttons.cancelRequest"),
+    loading: isLoading,
+    type: "submit",
+    onClick: function onClick() {
+      return handleSubmit(STATUSES.cancelled);
+    }
+  }));
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -264,7 +363,7 @@ var dayjs_min = {exports: {}};
 dayjs_min.exports;
 
 (function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof b},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new b(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var b=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,f=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=O.p(f),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return O.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return O.s(e.$y,4,"0");case"M":return a+1;case"MM":return O.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return O.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return O.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return O.s(u,2,"0");case"s":return String(e.$s);case"ss":return O.s(e.$s,2,"0");case"SSS":return O.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=O.p(d),m=w(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return O.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:O.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),_=b.prototype;return w.prototype=_,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){_[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,b,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w})); 
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
 } (dayjs_min, dayjs_min.exports));
 
 var dayjs_minExports = dayjs_min.exports;
@@ -275,7 +374,7 @@ var timezone$1 = {exports: {}};
 timezone$1.exports;
 
 (function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,v=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",h=+e;return (o.utc(v).valueOf()-(h-=h%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}})); 
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,h=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",v=+e;return (o.utc(h).valueOf()-(v-=v%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}})); 
 } (timezone$1, timezone$1.exports));
 
 var timezoneExports = timezone$1.exports;
@@ -327,69 +426,20 @@ var getApprovalFilter = function getApprovalFilter() {
   };
 };
 
-var HISTORY_TABLE_COLUMNS = [{
-  dataIndex: "approvalLabel",
-  key: "approvalLabel",
-  sorter: true,
-  width: "25%",
-  title: t$1("neetoApprovals.common.id"),
-  render: function render(approvalLabel, _ref) {
-    var requestableUrl = _ref.requestableUrl;
-    var url = new URL(requestableUrl || window.location.origin);
-    return /*#__PURE__*/React.createElement(Button, {
-      label: approvalLabel,
-      style: "link",
-      to: url.pathname
-    });
-  }
-}, {
-  dataIndex: "title",
-  key: "title",
-  sorter: true,
-  width: "25%",
-  title: t$1("neetoApprovals.common.title")
-}, {
-  dataIndex: "status",
-  key: "status",
-  sorter: true,
-  width: "25%",
-  title: t$1("neetoApprovals.common.status"),
-  render: function render(status) {
-    return /*#__PURE__*/React.createElement(Tag, {
-      label: capitalize(status),
-      style: STATUS_TAG_STYLE[status]
-    });
-  }
-}, {
-  dataIndex: "createdAt",
-  key: "createdAt",
-  sorter: true,
-  width: "25%",
-  title: t$1("neetoApprovals.common.created"),
-  render: function render(createdAt) {
-    return dateFormat.fromNow(timeInZone(createdAt));
-  }
-}];
-
 var MemoizedEditorContent$1 = /*#__PURE__*/React.memo(EditorContent);
-var ApprovalsDetails = function ApprovalsDetails(_ref) {
-  var _window$globalProps, _t;
+var RequestDetailsPane = function RequestDetailsPane(_ref) {
+  var _window$globalProps, _window$globalProps2, _t;
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     approvalDetails = _ref.approvalDetails,
     _ref$isPending = _ref.isPending,
-    isPending = _ref$isPending === void 0 ? false : _ref$isPending,
-    _ref$onSubmit = _ref.onSubmit,
-    onSubmit = _ref$onSubmit === void 0 ? noop : _ref$onSubmit,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+    isPending = _ref$isPending === void 0 ? false : _ref$isPending;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var title = approvalDetails.title,
     _approvalDetails$stat = approvalDetails.status,
     status = _approvalDetails$stat === void 0 ? "" : _approvalDetails$stat,
     message = approvalDetails.message,
-    additionalInfo = approvalDetails.additionalInfo,
     createdAt = approvalDetails.createdAt,
     approverName = approvalDetails.approverName,
     approverEmail = approvalDetails.approverEmail,
@@ -401,11 +451,15 @@ var ApprovalsDetails = function ApprovalsDetails(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     note = _useState2[0],
     setNote = _useState2[1];
+  var _useUpdateRequest = useUpdateRequest(),
+    updatePendingRequest = _useUpdateRequest.mutate,
+    isLoading = _useUpdateRequest.isLoading;
   useEffect(function () {
     setNote(initialNote);
   }, [initialNote]);
   var requesterOrApproverDetails = status === STATUSES.cancelled ? "".concat(requesterName, " (").concat(requesterEmail, ")") : "".concat(approverName, " (").concat(approverEmail, ")");
   var isCurrentUserApprover = ((_window$globalProps = window.globalProps) === null || _window$globalProps === void 0 || (_window$globalProps = _window$globalProps.user) === null || _window$globalProps === void 0 ? void 0 : _window$globalProps.email) === approverEmail;
+  var isCurrentUserRequester = ((_window$globalProps2 = window.globalProps) === null || _window$globalProps2 === void 0 || (_window$globalProps2 = _window$globalProps2.user) === null || _window$globalProps2 === void 0 ? void 0 : _window$globalProps2.email) === requesterEmail;
   var getStatusLabel = function getStatusLabel() {
     if (isPending) {
       return t("neetoApprovals.common.waitingFor");
@@ -417,10 +471,14 @@ var ApprovalsDetails = function ApprovalsDetails(_ref) {
     onClose();
   };
   var handleSubmit = function handleSubmit(status) {
-    onSubmit({
-      status: status,
-      note: note,
-      approvedAt: new Date()
+    return updatePendingRequest({
+      id: approvalDetails.id,
+      payload: _defineProperty({
+        status: status,
+        note: note
+      }, "".concat(status, "At"), new Date())
+    }, {
+      onSuccess: handleOnClose
     });
   };
   return /*#__PURE__*/React.createElement(Pane, {
@@ -439,21 +497,24 @@ var ApprovalsDetails = function ApprovalsDetails(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full divide-y border px-3"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-10 p-2"
-  }, /*#__PURE__*/React.createElement(Label, null, getStatusLabel()), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
+    className: "flex space-x-3 p-2"
+  }, /*#__PURE__*/React.createElement(Label, {
+    className: "font-normal"
+  }, getStatusLabel()), /*#__PURE__*/React.createElement(Typography, {
+    style: "body2",
+    weight: "medium"
   }, requesterOrApproverDetails)), /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-10 p-2"
-  }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.common.created")), /*#__PURE__*/React.createElement(Typography, null, dateFormat.extended(timeInZone(createdAt))))), /*#__PURE__*/React.createElement("div", {
+    className: "flex space-x-3 p-2"
+  }, /*#__PURE__*/React.createElement(Label, {
+    className: "font-normal"
+  }, t("neetoApprovals.common.created")), /*#__PURE__*/React.createElement(Typography, {
+    style: "body2",
+    weight: "medium"
+  }, dateFormat.extended(timeInZone(createdAt))))), /*#__PURE__*/React.createElement("div", {
     className: "w-full space-y-2"
   }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React.createElement(MemoizedEditorContent$1, {
     className: "neeto-ui-bg-gray-100 p-4",
     content: message
-  })), additionalInfo && /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-2"
-  }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.inputs.labels.additionalInfo")), /*#__PURE__*/React.createElement(MemoizedEditorContent$1, {
-    className: "neeto-ui-bg-gray-100 p-4",
-    content: additionalInfo
   })), isPending && isCurrentUserApprover && /*#__PURE__*/React.createElement(Textarea, {
     className: "w-full",
     disabled: !isPending,
@@ -467,27 +528,16 @@ var ApprovalsDetails = function ApprovalsDetails(_ref) {
     className: "w-full space-y-2"
   }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.common.note")), /*#__PURE__*/React.createElement("div", {
     className: "neeto-ui-bg-gray-100 p-4"
-  }, note))), isPending && isCurrentUserApprover && /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "flex gap-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoApprovals.buttons.approve"),
-    loading: isLoading,
-    type: "submit",
-    onClick: function onClick() {
-      return handleSubmit(STATUSES.approved);
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoApprovals.buttons.decline"),
-    loading: isLoading,
-    style: "text",
-    onClick: function onClick() {
-      return handleSubmit(STATUSES.rejected);
-    }
-  })));
+  }, note))), isPending && /*#__PURE__*/React.createElement(Footer, {
+    handleSubmit: handleSubmit,
+    isCurrentUserApprover: isCurrentUserApprover,
+    isCurrentUserRequester: isCurrentUserRequester,
+    isLoading: isLoading
+  }));
 };
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var History = function History(_ref) {
   var _t;
   var requestUrl = _ref.requestUrl;
@@ -536,8 +586,9 @@ var History = function History(_ref) {
       orderBy: SORT_ORDER[sorter.order]
     }));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(approvalHistories) ? /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals__table-wrapper"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(approvalHistories) ? /*#__PURE__*/React.createElement(TableWrapper, {
+    className: "mt-6",
+    hasPagination: totalCount > pageProperties.pageSize
   }, /*#__PURE__*/React.createElement(Table$1, {
     allowRowClick: true,
     fixedHeight: true,
@@ -560,7 +611,7 @@ var History = function History(_ref) {
     title: t("neetoApprovals.common.notFound_", {
       what: (_t = t("neetoApprovals.common.record", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     })
-  })), /*#__PURE__*/React.createElement(ApprovalsDetails, {
+  })), /*#__PURE__*/React.createElement(RequestDetailsPane, {
     approvalDetails: approvalDetails,
     isOpen: isPresent(approvalDetails),
     onClose: function onClose() {
@@ -573,8 +624,8 @@ var PENDING_TABLE_COLUMNS = removeBy({
   key: "status"
 }, HISTORY_TABLE_COLUMNS);
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PendingRequests = function PendingRequests(_ref) {
   var _t;
   var requestUrl = _ref.requestUrl;
@@ -611,27 +662,15 @@ var PendingRequests = function PendingRequests(_ref) {
     pendingRequests = _useFetchRequests$dat3 === void 0 ? {} : _useFetchRequests$dat3,
     _useFetchRequests$dat4 = _useFetchRequests$dat2.totalCount,
     totalCount = _useFetchRequests$dat4 === void 0 ? 0 : _useFetchRequests$dat4;
-  var _useUpdateRequest = useUpdateRequest(),
-    updatePendingRequest = _useUpdateRequest.mutate,
-    isLoading = _useUpdateRequest.isLoading;
   var handleTableChange = function handleTableChange(_, __, sorter) {
     setFilters(_objectSpread$9(_objectSpread$9({}, filters), {}, {
       sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: SORT_ORDER[sorter.order]
     }));
   };
-  var onSubmit = function onSubmit(payload) {
-    return updatePendingRequest({
-      id: approvalDetails.id,
-      payload: payload
-    }, {
-      onSuccess: function onSuccess() {
-        return setApprovalDetails({});
-      }
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(pendingRequests) ? /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals__table-wrapper"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(pendingRequests) ? /*#__PURE__*/React.createElement(TableWrapper, {
+    className: "mt-6",
+    hasPagination: totalCount > pageProperties.pageSize
   }, /*#__PURE__*/React.createElement(Table$1, {
     allowRowClick: true,
     fixedHeight: true,
@@ -654,11 +693,9 @@ var PendingRequests = function PendingRequests(_ref) {
     title: t("neetoApprovals.common.notFound_", {
       what: (_t = t("neetoApprovals.common.pendingApproval", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     })
-  })), /*#__PURE__*/React.createElement(ApprovalsDetails, {
+  })), /*#__PURE__*/React.createElement(RequestDetailsPane, {
     isPending: true,
     approvalDetails: approvalDetails,
-    isLoading: isLoading,
-    onSubmit: onSubmit,
     isOpen: isPresent(approvalDetails),
     onClose: function onClose() {
       return setApprovalDetails({});
@@ -743,8 +780,8 @@ var templatesApi = {
   show: show$1
 };
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchTemplates = function useFetchTemplates() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -781,46 +818,15 @@ var useDeleteTemplate = function useDeleteTemplate(options) {
   }, options));
 };
 
-var fetch$1 = function fetch(params) {
-  return axios.get("".concat(BASE_URL, "/approvers"), {
-    params: params
-  });
-};
-var approversApi = {
-  fetch: fetch$1
-};
-
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useFetchApprovers = function useFetchApprovers() {
-  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.APPROVERS, params], function () {
-    return approversApi.fetch(params);
-  }, _objectSpread$7({
-    select: function select(response) {
-      return response.data || response;
-    },
-    keepPreviousData: true,
-    onSuccess: function onSuccess(_ref) {
-      var _params$onSuccess;
-      var approvers = _ref.approvers;
-      return params === null || params === void 0 || (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, approvers);
-    }
-  }, options));
-};
-
 var TEMPLATE_FORM_INITIAL_VALUES = {
   name: "",
   description: "",
-  approver: "",
   message: ""
 };
 var TEMPLATE_FORM_VALIDATION_SCHEMA = yup.object().shape({
   name: yup.string().trim().required(t$1("neetoApprovals.validations.required", {
     what: t$1("neetoApprovals.common.name")
   })),
-  approver: yup.object().required(t$1("neetoApprovals.validations.approver")),
   message: yup.string().test("message", t$1("neetoApprovals.validations.required", {
     what: t$1("neetoApprovals.inputs.labels.message")
   }), function (content) {
@@ -831,9 +837,12 @@ var TEMPLATE_FORM_VALIDATION_SCHEMA = yup.object().shape({
 var MessageEditor = withT(function (_ref) {
   var t = _ref.t,
     _ref$placeholders = _ref.placeholders,
-    placeholders = _ref$placeholders === void 0 ? [] : _ref$placeholders;
+    placeholders = _ref$placeholders === void 0 ? [] : _ref$placeholders,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue;
   return /*#__PURE__*/React.createElement(FormikEditor, {
     required: true,
+    initialValue: initialValue,
     label: t("neetoApprovals.inputs.labels.message"),
     name: "message",
     rows: 3,
@@ -844,8 +853,46 @@ var MessageEditor = withT(function (_ref) {
   });
 });
 
-var Form$1 = function Form(_ref) {
-  var _t;
+var TemplateForm = function TemplateForm(_ref) {
+  var placeholders = _ref.placeholders,
+    initialData = _ref.initialData;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var handleDescriptionToggle = function handleDescriptionToggle(_ref2) {
+    var checked = _ref2.target.checked;
+    setFieldValue("descriptionEnabled", checked);
+    if (!checked) {
+      setFieldValue("description", "");
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full flex-col space-y-6"
+  }, /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
+    required: true,
+    label: t("neetoApprovals.common.name"),
+    name: "name",
+    placeholder: t("neetoApprovals.inputs.placeholders.name")
+  }), /*#__PURE__*/React.createElement(ToggleFeatureCard, {
+    switchName: "descriptionEnabled",
+    switchProps: {
+      onChange: handleDescriptionToggle
+    },
+    title: t("neetoApprovals.inputs.labels.description")
+  }, values.descriptionEnabled && /*#__PURE__*/React.createElement(Textarea$1, {
+    className: "w-full",
+    name: "description",
+    placeholder: t("neetoApprovals.inputs.placeholders.description")
+  })), /*#__PURE__*/React.createElement(MessageEditor, {
+    placeholders: placeholders,
+    initialValue: initialData.message
+  }));
+};
+
+var Form$2 = function Form(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     _ref$initialData = _ref.initialData,
@@ -858,15 +905,10 @@ var Form$1 = function Form(_ref) {
   var inputReference = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFetchApprovers = useFetchApprovers(),
-    _useFetchApprovers$da = _useFetchApprovers.data,
-    _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
-    _useFetchApprovers$da3 = _useFetchApprovers$da2.approvers,
-    approvers = _useFetchApprovers$da3 === void 0 ? [] : _useFetchApprovers$da3;
   var header = isEmpty(initialData) ? t("neetoApprovals.common.addNew_", {
-    what: t("neetoApprovals.common.template", SINGULAR).toLocaleLowerCase()
+    what: t("neetoApprovals.common.template", SINGULAR)
   }) : t("neetoApprovals.common.edit_", {
-    what: t("neetoApprovals.common.template", SINGULAR).toLocaleLowerCase()
+    what: t("neetoApprovals.common.template", SINGULAR)
   });
   return /*#__PURE__*/React.createElement(Pane, {
     initialFocusRef: inputReference,
@@ -875,44 +917,17 @@ var Form$1 = function Form(_ref) {
     onClose: onClose
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2"
-  }, header)), /*#__PURE__*/React.createElement(Form$2, {
+  }, header)), /*#__PURE__*/React.createElement(Form$3, {
     formikProps: {
       enableReinitialize: true,
       initialValues: isPresent(initialData) ? initialData : TEMPLATE_FORM_INITIAL_VALUES,
       validationSchema: TEMPLATE_FORM_VALIDATION_SCHEMA,
       onSubmit: onSubmit
     }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-6"
-  }, /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    required: true,
-    label: t("neetoApprovals.common.name"),
-    name: "name",
-    placeholder: t("neetoApprovals.inputs.placeholders.name")
-  }), /*#__PURE__*/React.createElement(Textarea$1, {
-    className: "w-full",
-    label: t("neetoApprovals.inputs.labels.description"),
-    name: "description",
-    placeholder: t("neetoApprovals.inputs.placeholders.description")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-6"
-  }, /*#__PURE__*/React.createElement(Select, {
-    required: true,
-    label: t("neetoApprovals.inputs.labels.approver"),
-    name: "approver",
-    options: approvers.map(function (approver) {
-      return {
-        label: approver.name,
-        value: approver.id
-      };
-    }),
-    placeholder: t("neetoApprovals.inputs.placeholders.select_", {
-      what: (_t = t("neetoApprovals.common.approver", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    })
-  })), /*#__PURE__*/React.createElement(MessageEditor, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(TemplateForm, {
+    initialData: initialData,
     placeholders: placeholders
-  }))), /*#__PURE__*/React.createElement(Pane.Footer, {
+  })), /*#__PURE__*/React.createElement(Pane.Footer, {
     className: "flex gap-x-2"
   }, /*#__PURE__*/React.createElement(Button, {
     "data-cy": "neeto-approvals-templates-save-template-btn",
@@ -927,26 +942,6 @@ var Form$1 = function Form(_ref) {
   })))));
 };
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var buildTemplatePayload = function buildTemplatePayload(template) {
-  var approver = template.approver;
-  var payload = {
-    template: _objectSpread$6(_objectSpread$6({}, template), {}, {
-      approverId: approver.value
-    })
-  };
-  return payload;
-};
-var generateInitialData = function generateInitialData(template) {
-  return _objectSpread$6(_objectSpread$6({}, template), {}, {
-    approver: {
-      label: template.approverName,
-      value: template.approverId
-    }
-  });
-};
-
 var Create = function Create(_ref) {
   var templateUrl = _ref.templateUrl,
     isOpen = _ref.isOpen,
@@ -956,7 +951,9 @@ var Create = function Create(_ref) {
     createTemplate = _useCreateTemplate.mutate,
     isLoading = _useCreateTemplate.isLoading;
   var onSubmit = function onSubmit(template) {
-    var payload = buildTemplatePayload(template);
+    var payload = {
+      template: template
+    };
     createTemplate({
       url: templateUrl,
       payload: payload
@@ -964,7 +961,7 @@ var Create = function Create(_ref) {
       onSuccess: onClose
     });
   };
-  return /*#__PURE__*/React.createElement(Form$1, {
+  return /*#__PURE__*/React.createElement(Form$2, {
     placeholders: templatePlaceholders,
     isLoading: isLoading,
     isOpen: isOpen,
@@ -973,6 +970,8 @@ var Create = function Create(_ref) {
   });
 };
 
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Edit = function Edit(_ref) {
   var templateUrl = _ref.templateUrl,
     template = _ref.template,
@@ -988,20 +987,25 @@ var Edit = function Edit(_ref) {
     updateTemplate = _useUpdateTemplate.mutate,
     isUpdating = _useUpdateTemplate.isLoading;
   var onSubmit = function onSubmit(template) {
-    var payload = buildTemplatePayload(template);
+    var payload = {
+      template: template
+    };
     updateTemplate({
       id: template.id,
       payload: payload,
       url: templateUrl
     });
   };
-  return /*#__PURE__*/React.createElement(Form$1, {
-    initialData: generateInitialData(template),
+  var initialData = _objectSpread$7(_objectSpread$7({}, template), {}, {
+    descriptionEnabled: !!template.description
+  });
+  return /*#__PURE__*/React.createElement(Form$2, {
     isLoading: isUpdating,
     placeholders: templatePlaceholders,
     isOpen: isOpen,
     onClose: onClose,
-    onSubmit: onSubmit
+    onSubmit: onSubmit,
+    initialData: initialData
   });
 };
 
@@ -1012,8 +1016,9 @@ var Field = function Field(_ref) {
     className: "flex flex-col items-start justify-center"
   }, /*#__PURE__*/React.createElement(Label, {
     className: "mb-1 font-normal"
-  }, label), /*#__PURE__*/React.createElement("p", {
-    className: "neeto-ui-text-gray-800 break-words text-base font-medium"
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    style: "body1",
+    weight: "medium"
   }, value));
 };
 var Field$1 = /*#__PURE__*/React.memo(Field);
@@ -1027,7 +1032,6 @@ var TemplateDetails = function TemplateDetails(_ref) {
     t = _useTranslation.t;
   var name = template.name,
     description = template.description,
-    approverName = template.approverName,
     message = template.message;
   return /*#__PURE__*/React.createElement(Pane, {
     isOpen: isOpen,
@@ -1044,9 +1048,6 @@ var TemplateDetails = function TemplateDetails(_ref) {
   }), /*#__PURE__*/React.createElement(Field$1, {
     label: t("neetoApprovals.inputs.labels.description"),
     value: description
-  }), /*#__PURE__*/React.createElement(Field$1, {
-    label: t("neetoApprovals.common.approver", SINGULAR),
-    value: approverName
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex w-full flex-col space-y-4"
   }, /*#__PURE__*/React.createElement(Label, {
@@ -1078,8 +1079,8 @@ var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
 };
 
 var _excluded$1 = ["entity", "columnData", "rowData", "totalCount", "filters", "setFilters", "setIsPaneOpen", "helpDocUrl", "onEditClick", "onDeleteClick", "pageProperties"];
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
   var _t;
   var entity = _ref.entity,
@@ -1101,7 +1102,7 @@ var Table = function Table(_ref) {
     onDeleteClick: onDeleteClick
   });
   var handleTableChange = function handleTableChange(_, __, sorter) {
-    setFilters(_objectSpread$5(_objectSpread$5({}, filters), {}, {
+    setFilters(_objectSpread$6(_objectSpread$6({}, filters), {}, {
       sortBy: sorter.field,
       orderBy: SORT_ORDER[sorter.order]
     }));
@@ -1130,7 +1131,7 @@ var Table = function Table(_ref) {
     }, !filters.searchTerm && noDataProps)));
   }
   return /*#__PURE__*/React.createElement(TableWrapper, {
-    className: "mt-12",
+    className: "mt-6",
     hasPagination: totalCount > pageProperties.pageSize
   }, /*#__PURE__*/React.createElement(Table$1, _extends({
     fixedHeight: true,
@@ -1145,7 +1146,7 @@ var Table = function Table(_ref) {
       hideOnSinglePage: (rowData === null || rowData === void 0 ? void 0 : rowData.length) < DEFAULT_PAGE_SIZE + 1
     },
     onChange: handleTableChange
-  }, _objectSpread$5({
+  }, _objectSpread$6({
     rowData: rowData,
     totalCount: totalCount
   }, otherProps))));
@@ -1189,16 +1190,15 @@ var columnData = function columnData(_ref) {
       }));
     }
   }, {
-    dataIndex: "approverName",
-    key: "approverName",
-    sorter: true,
-    title: i18next.t("neetoApprovals.common.approver", SINGULAR)
+    dataIndex: "description",
+    key: "description",
+    title: i18next.t("neetoApprovals.inputs.labels.description")
   }];
 };
 
 var _excluded = ["searchTerm", "isNewTemplatePaneOpen", "setIsNewTemplatePaneOpen", "helpDocUrl"];
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Templates = function Templates(_ref) {
   var _t, _t2, _t3;
   var searchTerm = _ref.searchTerm,
@@ -1236,7 +1236,7 @@ var Templates = function Templates(_ref) {
   useEffect(function () {
     resetPageProperties();
   }, [searchTerm]);
-  var _useFetchTemplates = useFetchTemplates(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, pageProperties), filters), {}, {
+  var _useFetchTemplates = useFetchTemplates(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, pageProperties), filters), {}, {
       searchTerm: debouncedSearchTerm.trim()
     }), {
       onSuccess: function onSuccess(_ref2) {
@@ -1339,8 +1339,8 @@ var Templates = function Templates(_ref) {
   }));
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createRoutes = function createRoutes(_ref) {
   var config = _ref.config,
     isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
@@ -1348,7 +1348,7 @@ var createRoutes = function createRoutes(_ref) {
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen;
   return [{
     component: function component() {
-      return /*#__PURE__*/React.createElement(Templates, _objectSpread$3({
+      return /*#__PURE__*/React.createElement(Templates, _objectSpread$4({
         isNewTemplatePaneOpen: isNewTemplatePaneOpen,
         searchTerm: searchTerm,
         setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
@@ -1404,20 +1404,20 @@ var Header = function Header(_ref) {
   });
 };
 
-var fetch = function fetch() {
+var fetch$1 = function fetch() {
   return axios.get("".concat(BASE_URL, "/views"));
 };
 var viewsApi = {
-  fetch: fetch
+  fetch: fetch$1
 };
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchViews = function useFetchViews() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return useQuery([QUERY_KEYS.VIEWS], function () {
     return viewsApi.fetch();
-  }, _objectSpread$2({
+  }, _objectSpread$3({
     select: function select(response) {
       return response.data || response;
     }
@@ -1457,12 +1457,12 @@ var Tab = function Tab(_ref) {
   }));
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Approvals = function Approvals(_ref) {
   var config = _ref.config;
   var _useQueryParams = useQueryParams(),
-    _useQueryParams$searc = _useQueryParams.search_ter,
+    _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -1475,8 +1475,8 @@ var Approvals = function Approvals(_ref) {
     setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals"
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _objectSpread$1({
+    className: "w-full overflow-y-auto"
+  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _objectSpread$2({
     appRoutes: appRoutes
   }, config)), /*#__PURE__*/React.createElement(Tab, {
     approvalsPath: config.approvalsPath
@@ -1498,45 +1498,156 @@ var Approvals = function Approvals(_ref) {
   }))));
 };
 
-var Form = function Form(_ref) {
-  var _t;
-  var isOpen = _ref.isOpen,
-    setIsPaneOpen = _ref.setIsPaneOpen,
-    onSubmit = _ref.onSubmit,
-    isLoading = _ref.isLoading,
-    _ref$requestableId = _ref.requestableId,
-    requestableId = _ref$requestableId === void 0 ? "" : _ref$requestableId;
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedTemplateData = _useState2[0],
-    setSelectedTemplateData = _useState2[1];
+var fetch = function fetch(params) {
+  return axios.get("".concat(BASE_URL, "/approvers"), {
+    params: params
+  });
+};
+var approversApi = {
+  fetch: fetch
+};
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFetchApprovers = function useFetchApprovers() {
+  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useQuery([QUERY_KEYS.APPROVERS, params], function () {
+    return approversApi.fetch(params);
+  }, _objectSpread$1({
+    select: function select(response) {
+      return response.data || response;
+    },
+    keepPreviousData: true,
+    onSuccess: function onSuccess(_ref) {
+      var _params$onSuccess;
+      var approvers = _ref.approvers;
+      return params === null || params === void 0 || (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, approvers);
+    }
+  }, options));
+};
+
+var Form$1 = function Form(_ref) {
+  var _globalProps$user;
+  var _ref$requestableId = _ref.requestableId,
+    requestableId = _ref$requestableId === void 0 ? "" : _ref$requestableId,
+    selectedTemplateData = _ref.selectedTemplateData,
+    setSelectedTemplateData = _ref.setSelectedTemplateData;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFetchTemplates = useFetchTemplates({
-      requestableId: requestableId
-    }),
+  var _useFormikContext = useFormikContext(),
+    resetForm = _useFormikContext.resetForm,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var inputRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    approverId = _useState2[0],
+    setApproverId = _useState2[1];
+  var templateParams = {
+    requestableId: requestableId,
+    approverId: approverId,
+    approvalRequestorId: (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.id
+  };
+  var _useFetchTemplates = useFetchTemplates(templateParams),
     _useFetchTemplates$da = _useFetchTemplates.data,
     _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
+  var _useFetchApprovers = useFetchApprovers(),
+    _useFetchApprovers$da = _useFetchApprovers.data,
+    _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
+    _useFetchApprovers$da3 = _useFetchApprovers$da2.approvers,
+    approvers = _useFetchApprovers$da3 === void 0 ? [] : _useFetchApprovers$da3;
+  var approverOptions = useMemo(function () {
+    return approvers.map(function (approver) {
+      return {
+        label: approver.name,
+        value: approver.id
+      };
+    });
+  }, [approvers]);
   var templateOptions = templates.map(function (template) {
     return {
       label: template.name,
       value: template.id
     };
   });
-  var handleTemplateChange = function handleTemplateChange(selectedTemplate, setFieldValue, resetForm) {
+  var updateMessage = function updateMessage(template) {
+    var _inputRef$current;
+    var message = template.parsedMessage || template.message;
+    setFieldValue("message", message);
+    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.editor) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.commands) === null || _inputRef$current === void 0 || _inputRef$current.setContent(message);
+  };
+  var handleTemplateChange = function handleTemplateChange(selectedTemplate) {
     resetForm();
     var template = findById(selectedTemplate.value, templates);
     setSelectedTemplateData(template);
-    setFieldValue("message", template.parsedMessage || template.message);
+    updateMessage(template);
+  };
+  var handleApproverChange = function handleApproverChange(approver) {
+    setApproverId(approver.value);
+    setFieldValue("approver", approver);
   };
+  useEffect(function () {
+    if (!(isNotEmpty(templates) && isNotEmpty(selectedTemplateData))) return;
+    var template = findById(selectedTemplateData.id, templates);
+    updateMessage(template);
+  }, [templates]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-6"
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: t("neetoApprovals.select.approval"),
+    options: templateOptions,
+    onChange: function onChange(selectedTemplate) {
+      return handleTemplateChange(selectedTemplate);
+    }
+  }), (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "flex space-x-6"
+  }, /*#__PURE__*/React.createElement(Select, {
+    required: true,
+    label: t("neetoApprovals.inputs.labels.approver"),
+    name: "approver",
+    options: approverOptions,
+    placeholder: t("neetoApprovals.inputs.placeholders.select_", {
+      what: t("neetoApprovals.common.approver", SINGULAR)
+    }),
+    onChange: handleApproverChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-2"
+  }, /*#__PURE__*/React.createElement(FormikEditor, {
+    required: true,
+    label: t("neetoApprovals.inputs.labels.message"),
+    name: "message",
+    ref: inputRef,
+    rows: 3,
+    placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
+      what: t("neetoApprovals.inputs.labels.message")
+    })
+  }))));
+};
+
+var Form = function Form(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    onSubmit = _ref.onSubmit,
+    isLoading = _ref.isLoading,
+    _ref$requestableId = _ref.requestableId,
+    requestableId = _ref$requestableId === void 0 ? "" : _ref$requestableId;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedTemplateData = _useState2[0],
+    setSelectedTemplateData = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var onClose = function onClose() {
     setIsPaneOpen(false);
     setSelectedTemplateData({});
   };
   var handleSubmit = function handleSubmit(values) {
-    return onSubmit(values, selectedTemplateData, onClose);
+    onSubmit({
+      message: values.message,
+      approverId: values.approver.value
+    }, selectedTemplateData, onClose);
   };
   return /*#__PURE__*/React.createElement(Pane, {
     isOpen: isOpen,
@@ -1544,39 +1655,20 @@ var Form = function Form(_ref) {
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2"
   }, t("neetoApprovals.common.add_", {
-    what: (_t = t("neetoApprovals.common.approval", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-  }))), /*#__PURE__*/React.createElement(Form$2, {
+    what: t("neetoApprovals.common.approval", SINGULAR)
+  }))), /*#__PURE__*/React.createElement(Form$3, {
     formikProps: {
       onSubmit: handleSubmit,
-      initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES
+      initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES,
+      validationSchema: REQUEST_FORM_VALIDATION_SCHEMA
     }
   }, function (_ref2) {
-    var _t2;
-    var setFieldValue = _ref2.setFieldValue,
-      resetForm = _ref2.resetForm,
-      dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-      className: "w-full space-y-6"
-    }, /*#__PURE__*/React.createElement(Select$1, {
-      label: t("neetoApprovals.select.approval"),
-      options: templateOptions,
-      onChange: function onChange(selectedTemplate) {
-        return handleTemplateChange(selectedTemplate, setFieldValue, resetForm);
-      }
-    }), (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message) && /*#__PURE__*/React.createElement("div", {
-      className: "space-y-2"
-    }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React.createElement(EditorContent, {
-      className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
-      name: "message",
-      content: (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.parsedMessage) || (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message)
-    })), /*#__PURE__*/React.createElement(FormikEditor, {
-      label: t("neetoApprovals.inputs.labels.additionalInfo"),
-      name: "additionalInfo",
-      rows: 3,
-      placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
-        what: (_t2 = t("neetoApprovals.inputs.labels.additionalInfo")) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase()
-      })
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, {
+    var dirty = _ref2.dirty;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form$1, {
+      requestableId: requestableId,
+      selectedTemplateData: selectedTemplateData,
+      setSelectedTemplateData: setSelectedTemplateData
+    })), /*#__PURE__*/React.createElement(Pane.Footer, {
       className: "flex gap-x-2"
     }, /*#__PURE__*/React.createElement(Button, {
       disabled: !dirty,
@@ -1614,8 +1706,8 @@ var publicRequestsApi = {
   decline: decline
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchPublicRequest = function useFetchPublicRequest(_ref, options) {
   var requestId = _ref.requestId;
   return useQuery([QUERY_KEYS.SHOW_PUBLIC_REQUEST, requestId], function () {
@@ -1729,8 +1821,8 @@ var Public = function Public() {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-approvals-dropdown__button{border-radius:0!important;font-weight:var(--neeto-ui-font-normal);min-height:34px;min-width:150px;text-align:left;width:100%}.neeto-approvals-scrollbar__inner{height:200px;width:100%}.neeto-approvals-scrollbar__outer{height:150px;left:0;overflow:\"hidden\";position:\"absolute\";top:0;visibility:\"hidden\";width:200px}.neeto-approvals-empty-state{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.neeto-approvals-empty-state__image{align-items:center;display:flex;justify-content:center;margin-bottom:2rem}.neeto-approvals-empty-state__title--with-action-block{margin-bottom:1rem}.neeto-approvals-empty-state__action-block{display:flex;justify-content:center}.neeto-approvals{overflow:auto;width:100%}.neeto-approvals__table-wrapper{height:calc(100vh - 205px);margin-top:3rem;width:100%}.neeto-approvals-table__column{align-items:center;display:flex;gap:.5rem}.neeto-approvals-form__header{margin-bottom:.5rem}.neeto-approvals-form__body{padding-bottom:1rem;width:100%}.neeto-approvals-form__body>*+*{margin-top:1rem}.neeto-approvals-form__footer{display:flex;gap:.5rem}.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left{max-width:none}td.ant-table-column-sort{background:transparent}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9iYXNlL19iYXNlLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19lbXB0eS1zdGF0ZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL3BhZ2VzL19hcHByb3ZhbHMuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9fb3ZlcnJpZGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsa0NBQ0UseUJBQUEsQ0FDQSx1Q0FBQSxDQUNBLGVBQUEsQ0FDQSxlQUFBLENBQ0EsZUFBQSxDQUNBLFVDQ0YsQ0RHRSxrQ0FFRSxZQUFBLENBREEsVUNDSixDREdFLGtDQUtFLFlBQUEsQ0FGQSxNQUFBLENBR0EsaUJBQUEsQ0FMQSxtQkFBQSxDQUNBLEtBQUEsQ0FLQSxtQkFBQSxDQUhBLFdDRUosQ0NyQkEsNkJBQ0Usa0JBQUEsQ0FDQSxZQUFBLENBQ0EsV0FBQSxDQUNBLHNCQUFBLENBQ0EsVUR3QkYsQ0N0QkUsb0NBR0Usa0JBQUEsQ0FGQSxZQUFBLENBQ0Esc0JBQUEsQ0FFQSxrQkR3QkosQ0NwQkksdURBQ0Usa0JEc0JOLENDbEJFLDJDQUNFLFlBQUEsQ0FDQSxzQkRvQkosQ0UxQ0EsaUJBQ0UsYUFBQSxDQUNBLFVGNkNGLENFM0NFLGdDQUNFLDBCQUFBLENBRUEsZUFBQSxDQURBLFVGOENKLENFekNJLCtCQUVFLGtCQUFBLENBREEsWUFBQSxDQUVBLFNGMkNOLENFdENJLDhCQUNFLG1CRndDTixDRXJDSSw0QkFFRSxtQkFBQSxDQURBLFVGd0NOLENFdENNLGdDQUNFLGVGd0NSLENFcENJLDhCQUNFLFlBQUEsQ0FDQSxTRnNDTixDR3JFSSxnRkFDRSxjSHdFTixDQTFEQSx5QkFDRSxzQkE2REYiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tYXBwcm92YWxzLWRyb3Bkb3duX19idXR0b24ge1xuICBib3JkZXItcmFkaXVzOiAwICFpbXBvcnRhbnQ7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1uZWV0by11aS1mb250LW5vcm1hbCk7XG4gIG1pbi1oZWlnaHQ6IDM0cHg7XG4gIG1pbi13aWR0aDogMTUwcHg7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4ubmVldG8tYXBwcm92YWxzLXNjcm9sbGJhciB7XG4gICZfX2lubmVyIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDIwMHB4O1xuICB9XG5cbiAgJl9fb3V0ZXIge1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCI7XG4gICAgdG9wOiAwcHg7XG4gICAgbGVmdDogMHB4O1xuICAgIHdpZHRoOiAyMDBweDtcbiAgICBoZWlnaHQ6IDE1MHB4O1xuICAgIG92ZXJmbG93OiBcImhpZGRlblwiO1xuICAgIHZpc2liaWxpdHk6IFwiaGlkZGVuXCI7XG4gIH1cbn1cbiIsIi8vIFZhcmlhYmxlc1xuQGltcG9ydCBcIi4vYWJzdHJhY3RzL3Jvb3RcIjtcbkBpbXBvcnQgXCIuL2Fic3RyYWN0cy92YXJpYWJsZXNcIjtcbkBpbXBvcnQgXCIuL2Fic3RyYWN0cy9taXhpbnNcIjtcblxuLy8gQmFzZVxuQGltcG9ydCBcIi4vYmFzZS9iYXNlXCI7XG5cbi8vIENvbXBvbmVudHNcbkBpbXBvcnQgXCIuL2NvbXBvbmVudHMvZW1wdHktc3RhdGVcIjtcblxuLy9QYWdlc1xuQGltcG9ydCBcIi4vcGFnZXMvYXBwcm92YWxzXCI7XG5cbkBpbXBvcnQgXCIuL292ZXJyaWRlc1wiO1xuXG4vLyBBbnQgRGVzaWduIE92ZXJyaWRlc1xudGQuYW50LXRhYmxlLWNvbHVtbi1zb3J0IHtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG59XG4iLCIubmVldG8tYXBwcm92YWxzLWVtcHR5LXN0YXRlIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZGlzcGxheTogZmxleDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG5cbiAgJl9faW1hZ2Uge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBtYXJnaW4tYm90dG9tOiAycmVtO1xuICB9XG5cbiAgJl9fdGl0bGUge1xuICAgICYtLXdpdGgtYWN0aW9uLWJsb2NrIHtcbiAgICAgIG1hcmdpbi1ib3R0b206IDFyZW07XG4gICAgfVxuICB9XG5cbiAgJl9fYWN0aW9uLWJsb2NrIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB9XG59XG4iLCIubmVldG8tYXBwcm92YWxzIHtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHdpZHRoOiAxMDAlO1xuXG4gICZfX3RhYmxlLXdyYXBwZXIge1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDIwNXB4KTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXJnaW4tdG9wOiAzcmVtO1xuICB9XG5cbiAgJi10YWJsZSB7XG4gICAgJl9fY29sdW1uIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgZ2FwOiAwLjVyZW07XG4gICAgfVxuICB9XG5cbiAgJi1mb3JtIHtcbiAgICAmX19oZWFkZXIge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMC41cmVtO1xuICAgIH1cblxuICAgICZfX2JvZHkge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBwYWRkaW5nLWJvdHRvbTogMXJlbTtcbiAgICAgICYgPiAqICsgKiB7XG4gICAgICAgIG1hcmdpbi10b3A6IDFyZW07XG4gICAgICB9XG4gICAgfVxuXG4gICAgJl9fZm9vdGVyIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBnYXA6IDAuNXJlbTtcbiAgICB9XG4gIH1cbn1cbiIsIi5uZWV0by11aS1zdWJoZWFkZXIge1xuICAubmVldG8tdWktc3ViaGVhZGVyX19sZWZ0LXdyYXBwZXIge1xuICAgIC5uZWV0by11aS1zdWJoZWFkZXJfX2xlZnQge1xuICAgICAgbWF4LXdpZHRoOiBub25lO1xuICAgIH1cbiAgfVxufVxuIl19 */";
+var css = ".neeto-approvals-dropdown__button{border-radius:0!important;font-weight:var(--neeto-ui-font-normal);min-height:34px;min-width:150px;text-align:left;width:100%}.neeto-approvals-scrollbar__inner{height:200px;width:100%}.neeto-approvals-scrollbar__outer{height:150px;left:0;overflow:\"hidden\";position:\"absolute\";top:0;visibility:\"hidden\";width:200px}.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left{max-width:none}td.ant-table-column-sort{background:transparent}.neeto-approvals-empty-state{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.neeto-approvals-empty-state__image{align-items:center;display:flex;justify-content:center;margin-bottom:2rem}.neeto-approvals-empty-state__title--with-action-block{margin-bottom:1rem}.neeto-approvals-empty-state__action-block{display:flex;justify-content:center}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9iYXNlL19iYXNlLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9iYXNlL19vdmVycmlkZXMuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19lbXB0eS1zdGF0ZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtDQUNFLHlCQUFBLENBQ0EsdUNBQUEsQ0FDQSxlQUFBLENBQ0EsZUFBQSxDQUNBLGVBQUEsQ0FDQSxVQ0NGLENER0Usa0NBRUUsWUFBQSxDQURBLFVDQ0osQ0RHRSxrQ0FLRSxZQUFBLENBRkEsTUFBQSxDQUdBLGlCQUFBLENBTEEsbUJBQUEsQ0FDQSxLQUFBLENBS0EsbUJBQUEsQ0FIQSxXQ0VKLENDbkJJLGdGQUNFLGNEc0JOLENDaEJBLHlCQUNFLHNCRG1CRixDRTdCQSw2QkFDRSxrQkFBQSxDQUNBLFlBQUEsQ0FDQSxXQUFBLENBQ0Esc0JBQUEsQ0FDQSxVRmdDRixDRTlCRSxvQ0FHRSxrQkFBQSxDQUZBLFlBQUEsQ0FDQSxzQkFBQSxDQUVBLGtCRmdDSixDRTVCSSx1REFDRSxrQkY4Qk4sQ0UxQkUsMkNBQ0UsWUFBQSxDQUNBLHNCRjRCSiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1hcHByb3ZhbHMtZHJvcGRvd25fX2J1dHRvbiB7XG4gIGJvcmRlci1yYWRpdXM6IDAgIWltcG9ydGFudDtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLW5lZXRvLXVpLWZvbnQtbm9ybWFsKTtcbiAgbWluLWhlaWdodDogMzRweDtcbiAgbWluLXdpZHRoOiAxNTBweDtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5uZWV0by1hcHByb3ZhbHMtc2Nyb2xsYmFyIHtcbiAgJl9faW5uZXIge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMjAwcHg7XG4gIH1cblxuICAmX19vdXRlciB7XG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIjtcbiAgICB0b3A6IDBweDtcbiAgICBsZWZ0OiAwcHg7XG4gICAgd2lkdGg6IDIwMHB4O1xuICAgIGhlaWdodDogMTUwcHg7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCI7XG4gICAgdmlzaWJpbGl0eTogXCJoaWRkZW5cIjtcbiAgfVxufVxuIiwiLm5lZXRvLWFwcHJvdmFscy1kcm9wZG93bl9fYnV0dG9uIHtcbiAgYm9yZGVyLXJhZGl1czogMCAhaW1wb3J0YW50O1xuICBmb250LXdlaWdodDogdmFyKC0tbmVldG8tdWktZm9udC1ub3JtYWwpO1xuICBtaW4taGVpZ2h0OiAzNHB4O1xuICBtaW4td2lkdGg6IDE1MHB4O1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLm5lZXRvLWFwcHJvdmFscy1zY3JvbGxiYXJfX2lubmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMjAwcHg7XG59XG4ubmVldG8tYXBwcm92YWxzLXNjcm9sbGJhcl9fb3V0ZXIge1xuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiO1xuICB0b3A6IDBweDtcbiAgbGVmdDogMHB4O1xuICB3aWR0aDogMjAwcHg7XG4gIGhlaWdodDogMTUwcHg7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiO1xuICB2aXNpYmlsaXR5OiBcImhpZGRlblwiO1xufVxuXG4ubmVldG8tdWktc3ViaGVhZGVyIC5uZWV0by11aS1zdWJoZWFkZXJfX2xlZnQtd3JhcHBlciAubmVldG8tdWktc3ViaGVhZGVyX19sZWZ0IHtcbiAgbWF4LXdpZHRoOiBub25lO1xufVxuXG50ZC5hbnQtdGFibGUtY29sdW1uLXNvcnQge1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbn1cblxuLm5lZXRvLWFwcHJvdmFscy1lbXB0eS1zdGF0ZSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGhlaWdodDogMTAwJTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHdpZHRoOiAxMDAlO1xufVxuLm5lZXRvLWFwcHJvdmFscy1lbXB0eS1zdGF0ZV9faW1hZ2Uge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgbWFyZ2luLWJvdHRvbTogMnJlbTtcbn1cbi5uZWV0by1hcHByb3ZhbHMtZW1wdHktc3RhdGVfX3RpdGxlLS13aXRoLWFjdGlvbi1ibG9jayB7XG4gIG1hcmdpbi1ib3R0b206IDFyZW07XG59XG4ubmVldG8tYXBwcm92YWxzLWVtcHR5LXN0YXRlX19hY3Rpb24tYmxvY2sge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn0iLCIubmVldG8tdWktc3ViaGVhZGVyIHtcbiAgLm5lZXRvLXVpLXN1YmhlYWRlcl9fbGVmdC13cmFwcGVyIHtcbiAgICAubmVldG8tdWktc3ViaGVhZGVyX19sZWZ0IHtcbiAgICAgIG1heC13aWR0aDogbm9uZTtcbiAgICB9XG4gIH1cbn1cblxuLy8gQW50IERlc2lnbiBPdmVycmlkZXNcbnRkLmFudC10YWJsZS1jb2x1bW4tc29ydCB7XG4gIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xufVxuIiwiLm5lZXRvLWFwcHJvdmFscy1lbXB0eS1zdGF0ZSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGhlaWdodDogMTAwJTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHdpZHRoOiAxMDAlO1xuXG4gICZfX2ltYWdlIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgbWFyZ2luLWJvdHRvbTogMnJlbTtcbiAgfVxuXG4gICZfX3RpdGxlIHtcbiAgICAmLS13aXRoLWFjdGlvbi1ibG9jayB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAxcmVtO1xuICAgIH1cbiAgfVxuXG4gICZfX2FjdGlvbi1ibG9jayB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxufVxuIl19 */";
 n(css,{});
 
-export { Approvals, Form, Public };
+export { Approvals, Form, Public, RequestDetailsPane };
 //# sourceMappingURL=index.js.map