@bigbinary/neeto-approvals-frontend 0.3.10 → 0.4.0-beta1

package/dist/index.js

@@ -1,27 +1,45 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import * as React from 'react';
+import React__default, { useState, useEffect, useRef, createElement, 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, Callout } from '@bigbinary/neetoui';
-import { isEmpty, keys } from 'ramda';
-import { capitalize, isPresent, findBy, camelToSnakeCase, removeBy, noop } from '@bigbinary/neeto-cist';
+import Button from '@bigbinary/neetoui/Button';
+import { capitalize, isPresent, findBy, camelToSnakeCase, removeBy, noop as noop$1 } from '@bigbinary/neeto-cist';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import Table$1 from '@bigbinary/neetoui/Table';
+import NoData from '@bigbinary/neetoui/NoData';
+import { isEmpty, keys } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
-import { useQuery, useQueryClient } from 'react-query';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
+import Tag from '@bigbinary/neetoui/Tag';
 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 Label from '@bigbinary/neetoui/Label';
+import Pane from '@bigbinary/neetoui/Pane';
+import Textarea from '@bigbinary/neetoui/Textarea';
+import Typography from '@bigbinary/neetoui/Typography';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Input, Textarea as Textarea$1, Form as Form$3 } from '@bigbinary/neetoui/formik';
+import Alert from '@bigbinary/neetoui/Alert';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
+import FormikForm from '@bigbinary/neetoui/formik/Form';
 import { useFormikContext } from 'formik';
 import ToggleFeatureCard from '@bigbinary/neeto-molecules/ToggleFeatureCard';
+import Input from '@bigbinary/neetoui/formik/Input';
+import Textarea$1 from '@bigbinary/neetoui/formik/Textarea';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
+import NeetoUITab from '@bigbinary/neetoui/Tab';
+import Select from '@bigbinary/neetoui/Select';
+import Callout from '@bigbinary/neetoui/Callout';
 
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -138,6 +156,868 @@ var handleEmptyPage = function handleEmptyPage(data, pageProperties, handlePageC
   }
 };
 
+// src/subscribable.ts
+var Subscribable = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.subscribe = this.subscribe.bind(this);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    this.onSubscribe();
+    return () => {
+      this.listeners.delete(listener);
+      this.onUnsubscribe();
+    };
+  }
+  hasListeners() {
+    return this.listeners.size > 0;
+  }
+  onSubscribe() {
+  }
+  onUnsubscribe() {
+  }
+};
+
+// src/utils.ts
+var isServer = typeof window === "undefined" || "Deno" in globalThis;
+function noop() {
+  return void 0;
+}
+function isValidTimeout(value) {
+  return typeof value === "number" && value >= 0 && value !== Infinity;
+}
+function timeUntilStale(updatedAt, staleTime) {
+  return Math.max(updatedAt + (staleTime || 0) - Date.now(), 0);
+}
+function replaceEqualDeep(a, b) {
+  if (a === b) {
+    return a;
+  }
+  const array = isPlainArray(a) && isPlainArray(b);
+  if (array || isPlainObject(a) && isPlainObject(b)) {
+    const aItems = array ? a : Object.keys(a);
+    const aSize = aItems.length;
+    const bItems = array ? b : Object.keys(b);
+    const bSize = bItems.length;
+    const copy = array ? [] : {};
+    let equalItems = 0;
+    for (let i = 0; i < bSize; i++) {
+      const key = array ? i : bItems[i];
+      if ((!array && aItems.includes(key) || array) && a[key] === void 0 && b[key] === void 0) {
+        copy[key] = void 0;
+        equalItems++;
+      } else {
+        copy[key] = replaceEqualDeep(a[key], b[key]);
+        if (copy[key] === a[key] && a[key] !== void 0) {
+          equalItems++;
+        }
+      }
+    }
+    return aSize === bSize && equalItems === aSize ? a : copy;
+  }
+  return b;
+}
+function shallowEqualObjects(a, b) {
+  if (!b || Object.keys(a).length !== Object.keys(b).length) {
+    return false;
+  }
+  for (const key in a) {
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+function isPlainArray(value) {
+  return Array.isArray(value) && value.length === Object.keys(value).length;
+}
+function isPlainObject(o) {
+  if (!hasObjectPrototype(o)) {
+    return false;
+  }
+  const ctor = o.constructor;
+  if (ctor === void 0) {
+    return true;
+  }
+  const prot = ctor.prototype;
+  if (!hasObjectPrototype(prot)) {
+    return false;
+  }
+  if (!prot.hasOwnProperty("isPrototypeOf")) {
+    return false;
+  }
+  if (Object.getPrototypeOf(o) !== Object.prototype) {
+    return false;
+  }
+  return true;
+}
+function hasObjectPrototype(o) {
+  return Object.prototype.toString.call(o) === "[object Object]";
+}
+function replaceData(prevData, data, options) {
+  if (typeof options.structuralSharing === "function") {
+    return options.structuralSharing(prevData, data);
+  } else if (options.structuralSharing !== false) {
+    return replaceEqualDeep(prevData, data);
+  }
+  return data;
+}
+function keepPreviousData(previousData) {
+  return previousData;
+}
+
+// src/focusManager.ts
+var FocusManager = class extends Subscribable {
+  #focused;
+  #cleanup;
+  #setup;
+  constructor() {
+    super();
+    this.#setup = (onFocus) => {
+      if (!isServer && window.addEventListener) {
+        const listener = () => onFocus();
+        window.addEventListener("visibilitychange", listener, false);
+        return () => {
+          window.removeEventListener("visibilitychange", listener);
+        };
+      }
+      return;
+    };
+  }
+  onSubscribe() {
+    if (!this.#cleanup) {
+      this.setEventListener(this.#setup);
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.#cleanup?.();
+      this.#cleanup = void 0;
+    }
+  }
+  setEventListener(setup) {
+    this.#setup = setup;
+    this.#cleanup?.();
+    this.#cleanup = setup((focused) => {
+      if (typeof focused === "boolean") {
+        this.setFocused(focused);
+      } else {
+        this.onFocus();
+      }
+    });
+  }
+  setFocused(focused) {
+    const changed = this.#focused !== focused;
+    if (changed) {
+      this.#focused = focused;
+      this.onFocus();
+    }
+  }
+  onFocus() {
+    const isFocused = this.isFocused();
+    this.listeners.forEach((listener) => {
+      listener(isFocused);
+    });
+  }
+  isFocused() {
+    if (typeof this.#focused === "boolean") {
+      return this.#focused;
+    }
+    return globalThis.document?.visibilityState !== "hidden";
+  }
+};
+var focusManager = new FocusManager();
+
+// src/onlineManager.ts
+var OnlineManager = class extends Subscribable {
+  #online = true;
+  #cleanup;
+  #setup;
+  constructor() {
+    super();
+    this.#setup = (onOnline) => {
+      if (!isServer && window.addEventListener) {
+        const onlineListener = () => onOnline(true);
+        const offlineListener = () => onOnline(false);
+        window.addEventListener("online", onlineListener, false);
+        window.addEventListener("offline", offlineListener, false);
+        return () => {
+          window.removeEventListener("online", onlineListener);
+          window.removeEventListener("offline", offlineListener);
+        };
+      }
+      return;
+    };
+  }
+  onSubscribe() {
+    if (!this.#cleanup) {
+      this.setEventListener(this.#setup);
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.#cleanup?.();
+      this.#cleanup = void 0;
+    }
+  }
+  setEventListener(setup) {
+    this.#setup = setup;
+    this.#cleanup?.();
+    this.#cleanup = setup(this.setOnline.bind(this));
+  }
+  setOnline(online) {
+    const changed = this.#online !== online;
+    if (changed) {
+      this.#online = online;
+      this.listeners.forEach((listener) => {
+        listener(online);
+      });
+    }
+  }
+  isOnline() {
+    return this.#online;
+  }
+};
+var onlineManager = new OnlineManager();
+
+// src/retryer.ts
+function canFetch(networkMode) {
+  return (networkMode ?? "online") === "online" ? onlineManager.isOnline() : true;
+}
+
+// src/notifyManager.ts
+function createNotifyManager() {
+  let queue = [];
+  let transactions = 0;
+  let notifyFn = (callback) => {
+    callback();
+  };
+  let batchNotifyFn = (callback) => {
+    callback();
+  };
+  let scheduleFn = (cb) => setTimeout(cb, 0);
+  const setScheduler = (fn) => {
+    scheduleFn = fn;
+  };
+  const batch = (callback) => {
+    let result;
+    transactions++;
+    try {
+      result = callback();
+    } finally {
+      transactions--;
+      if (!transactions) {
+        flush();
+      }
+    }
+    return result;
+  };
+  const schedule = (callback) => {
+    if (transactions) {
+      queue.push(callback);
+    } else {
+      scheduleFn(() => {
+        notifyFn(callback);
+      });
+    }
+  };
+  const batchCalls = (callback) => {
+    return (...args) => {
+      schedule(() => {
+        callback(...args);
+      });
+    };
+  };
+  const flush = () => {
+    const originalQueue = queue;
+    queue = [];
+    if (originalQueue.length) {
+      scheduleFn(() => {
+        batchNotifyFn(() => {
+          originalQueue.forEach((callback) => {
+            notifyFn(callback);
+          });
+        });
+      });
+    }
+  };
+  const setNotifyFunction = (fn) => {
+    notifyFn = fn;
+  };
+  const setBatchNotifyFunction = (fn) => {
+    batchNotifyFn = fn;
+  };
+  return {
+    batch,
+    batchCalls,
+    schedule,
+    setNotifyFunction,
+    setBatchNotifyFunction,
+    setScheduler
+  };
+}
+var notifyManager = createNotifyManager();
+
+// src/query.ts
+function fetchState(data, options) {
+  return {
+    fetchFailureCount: 0,
+    fetchFailureReason: null,
+    fetchStatus: canFetch(options.networkMode) ? "fetching" : "paused",
+    ...data === void 0 && {
+      error: null,
+      status: "pending"
+    }
+  };
+}
+
+// src/queryObserver.ts
+var QueryObserver = class extends Subscribable {
+  constructor(client, options) {
+    super();
+    this.options = options;
+    this.#client = client;
+    this.#selectError = null;
+    this.bindMethods();
+    this.setOptions(options);
+  }
+  #client;
+  #currentQuery = void 0;
+  #currentQueryInitialState = void 0;
+  #currentResult = void 0;
+  #currentResultState;
+  #currentResultOptions;
+  #selectError;
+  #selectFn;
+  #selectResult;
+  // This property keeps track of the last query with defined data.
+  // It will be used to pass the previous data and query to the placeholder function between renders.
+  #lastQueryWithDefinedData;
+  #staleTimeoutId;
+  #refetchIntervalId;
+  #currentRefetchInterval;
+  #trackedProps = /* @__PURE__ */ new Set();
+  bindMethods() {
+    this.refetch = this.refetch.bind(this);
+  }
+  onSubscribe() {
+    if (this.listeners.size === 1) {
+      this.#currentQuery.addObserver(this);
+      if (shouldFetchOnMount(this.#currentQuery, this.options)) {
+        this.#executeFetch();
+      } else {
+        this.updateResult();
+      }
+      this.#updateTimers();
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.destroy();
+    }
+  }
+  shouldFetchOnReconnect() {
+    return shouldFetchOn(
+      this.#currentQuery,
+      this.options,
+      this.options.refetchOnReconnect
+    );
+  }
+  shouldFetchOnWindowFocus() {
+    return shouldFetchOn(
+      this.#currentQuery,
+      this.options,
+      this.options.refetchOnWindowFocus
+    );
+  }
+  destroy() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.#clearStaleTimeout();
+    this.#clearRefetchInterval();
+    this.#currentQuery.removeObserver(this);
+  }
+  setOptions(options, notifyOptions) {
+    const prevOptions = this.options;
+    const prevQuery = this.#currentQuery;
+    this.options = this.#client.defaultQueryOptions(options);
+    if (this.options.enabled !== void 0 && typeof this.options.enabled !== "boolean") {
+      throw new Error("Expected enabled to be a boolean");
+    }
+    this.#updateQuery();
+    this.#currentQuery.setOptions(this.options);
+    if (prevOptions._defaulted && !shallowEqualObjects(this.options, prevOptions)) {
+      this.#client.getQueryCache().notify({
+        type: "observerOptionsUpdated",
+        query: this.#currentQuery,
+        observer: this
+      });
+    }
+    const mounted = this.hasListeners();
+    if (mounted && shouldFetchOptionally(
+      this.#currentQuery,
+      prevQuery,
+      this.options,
+      prevOptions
+    )) {
+      this.#executeFetch();
+    }
+    this.updateResult(notifyOptions);
+    if (mounted && (this.#currentQuery !== prevQuery || this.options.enabled !== prevOptions.enabled || this.options.staleTime !== prevOptions.staleTime)) {
+      this.#updateStaleTimeout();
+    }
+    const nextRefetchInterval = this.#computeRefetchInterval();
+    if (mounted && (this.#currentQuery !== prevQuery || this.options.enabled !== prevOptions.enabled || nextRefetchInterval !== this.#currentRefetchInterval)) {
+      this.#updateRefetchInterval(nextRefetchInterval);
+    }
+  }
+  getOptimisticResult(options) {
+    const query = this.#client.getQueryCache().build(this.#client, options);
+    const result = this.createResult(query, options);
+    if (shouldAssignObserverCurrentProperties(this, result)) {
+      this.#currentResult = result;
+      this.#currentResultOptions = this.options;
+      this.#currentResultState = this.#currentQuery.state;
+    }
+    return result;
+  }
+  getCurrentResult() {
+    return this.#currentResult;
+  }
+  trackResult(result, onPropTracked) {
+    const trackedResult = {};
+    Object.keys(result).forEach((key) => {
+      Object.defineProperty(trackedResult, key, {
+        configurable: false,
+        enumerable: true,
+        get: () => {
+          this.trackProp(key);
+          onPropTracked?.(key);
+          return result[key];
+        }
+      });
+    });
+    return trackedResult;
+  }
+  trackProp(key) {
+    this.#trackedProps.add(key);
+  }
+  getCurrentQuery() {
+    return this.#currentQuery;
+  }
+  refetch({ ...options } = {}) {
+    return this.fetch({
+      ...options
+    });
+  }
+  fetchOptimistic(options) {
+    const defaultedOptions = this.#client.defaultQueryOptions(options);
+    const query = this.#client.getQueryCache().build(this.#client, defaultedOptions);
+    query.isFetchingOptimistic = true;
+    return query.fetch().then(() => this.createResult(query, defaultedOptions));
+  }
+  fetch(fetchOptions) {
+    return this.#executeFetch({
+      ...fetchOptions,
+      cancelRefetch: fetchOptions.cancelRefetch ?? true
+    }).then(() => {
+      this.updateResult();
+      return this.#currentResult;
+    });
+  }
+  #executeFetch(fetchOptions) {
+    this.#updateQuery();
+    let promise = this.#currentQuery.fetch(
+      this.options,
+      fetchOptions
+    );
+    if (!fetchOptions?.throwOnError) {
+      promise = promise.catch(noop);
+    }
+    return promise;
+  }
+  #updateStaleTimeout() {
+    this.#clearStaleTimeout();
+    if (isServer || this.#currentResult.isStale || !isValidTimeout(this.options.staleTime)) {
+      return;
+    }
+    const time = timeUntilStale(
+      this.#currentResult.dataUpdatedAt,
+      this.options.staleTime
+    );
+    const timeout = time + 1;
+    this.#staleTimeoutId = setTimeout(() => {
+      if (!this.#currentResult.isStale) {
+        this.updateResult();
+      }
+    }, timeout);
+  }
+  #computeRefetchInterval() {
+    return (typeof this.options.refetchInterval === "function" ? this.options.refetchInterval(this.#currentQuery) : this.options.refetchInterval) ?? false;
+  }
+  #updateRefetchInterval(nextInterval) {
+    this.#clearRefetchInterval();
+    this.#currentRefetchInterval = nextInterval;
+    if (isServer || this.options.enabled === false || !isValidTimeout(this.#currentRefetchInterval) || this.#currentRefetchInterval === 0) {
+      return;
+    }
+    this.#refetchIntervalId = setInterval(() => {
+      if (this.options.refetchIntervalInBackground || focusManager.isFocused()) {
+        this.#executeFetch();
+      }
+    }, this.#currentRefetchInterval);
+  }
+  #updateTimers() {
+    this.#updateStaleTimeout();
+    this.#updateRefetchInterval(this.#computeRefetchInterval());
+  }
+  #clearStaleTimeout() {
+    if (this.#staleTimeoutId) {
+      clearTimeout(this.#staleTimeoutId);
+      this.#staleTimeoutId = void 0;
+    }
+  }
+  #clearRefetchInterval() {
+    if (this.#refetchIntervalId) {
+      clearInterval(this.#refetchIntervalId);
+      this.#refetchIntervalId = void 0;
+    }
+  }
+  createResult(query, options) {
+    const prevQuery = this.#currentQuery;
+    const prevOptions = this.options;
+    const prevResult = this.#currentResult;
+    const prevResultState = this.#currentResultState;
+    const prevResultOptions = this.#currentResultOptions;
+    const queryChange = query !== prevQuery;
+    const queryInitialState = queryChange ? query.state : this.#currentQueryInitialState;
+    const { state } = query;
+    let newState = { ...state };
+    let isPlaceholderData = false;
+    let data;
+    if (options._optimisticResults) {
+      const mounted = this.hasListeners();
+      const fetchOnMount = !mounted && shouldFetchOnMount(query, options);
+      const fetchOptionally = mounted && shouldFetchOptionally(query, prevQuery, options, prevOptions);
+      if (fetchOnMount || fetchOptionally) {
+        newState = {
+          ...newState,
+          ...fetchState(state.data, query.options)
+        };
+      }
+      if (options._optimisticResults === "isRestoring") {
+        newState.fetchStatus = "idle";
+      }
+    }
+    let { error, errorUpdatedAt, status } = newState;
+    if (options.select && newState.data !== void 0) {
+      if (prevResult && newState.data === prevResultState?.data && options.select === this.#selectFn) {
+        data = this.#selectResult;
+      } else {
+        try {
+          this.#selectFn = options.select;
+          data = options.select(newState.data);
+          data = replaceData(prevResult?.data, data, options);
+          this.#selectResult = data;
+          this.#selectError = null;
+        } catch (selectError) {
+          this.#selectError = selectError;
+        }
+      }
+    } else {
+      data = newState.data;
+    }
+    if (options.placeholderData !== void 0 && data === void 0 && status === "pending") {
+      let placeholderData;
+      if (prevResult?.isPlaceholderData && options.placeholderData === prevResultOptions?.placeholderData) {
+        placeholderData = prevResult.data;
+      } else {
+        placeholderData = typeof options.placeholderData === "function" ? options.placeholderData(
+          this.#lastQueryWithDefinedData?.state.data,
+          this.#lastQueryWithDefinedData
+        ) : options.placeholderData;
+        if (options.select && placeholderData !== void 0) {
+          try {
+            placeholderData = options.select(placeholderData);
+            this.#selectError = null;
+          } catch (selectError) {
+            this.#selectError = selectError;
+          }
+        }
+      }
+      if (placeholderData !== void 0) {
+        status = "success";
+        data = replaceData(
+          prevResult?.data,
+          placeholderData,
+          options
+        );
+        isPlaceholderData = true;
+      }
+    }
+    if (this.#selectError) {
+      error = this.#selectError;
+      data = this.#selectResult;
+      errorUpdatedAt = Date.now();
+      status = "error";
+    }
+    const isFetching = newState.fetchStatus === "fetching";
+    const isPending = status === "pending";
+    const isError = status === "error";
+    const isLoading = isPending && isFetching;
+    const hasData = data !== void 0;
+    const result = {
+      status,
+      fetchStatus: newState.fetchStatus,
+      isPending,
+      isSuccess: status === "success",
+      isError,
+      isInitialLoading: isLoading,
+      isLoading,
+      data,
+      dataUpdatedAt: newState.dataUpdatedAt,
+      error,
+      errorUpdatedAt,
+      failureCount: newState.fetchFailureCount,
+      failureReason: newState.fetchFailureReason,
+      errorUpdateCount: newState.errorUpdateCount,
+      isFetched: newState.dataUpdateCount > 0 || newState.errorUpdateCount > 0,
+      isFetchedAfterMount: newState.dataUpdateCount > queryInitialState.dataUpdateCount || newState.errorUpdateCount > queryInitialState.errorUpdateCount,
+      isFetching,
+      isRefetching: isFetching && !isPending,
+      isLoadingError: isError && !hasData,
+      isPaused: newState.fetchStatus === "paused",
+      isPlaceholderData,
+      isRefetchError: isError && hasData,
+      isStale: isStale(query, options),
+      refetch: this.refetch
+    };
+    return result;
+  }
+  updateResult(notifyOptions) {
+    const prevResult = this.#currentResult;
+    const nextResult = this.createResult(this.#currentQuery, this.options);
+    this.#currentResultState = this.#currentQuery.state;
+    this.#currentResultOptions = this.options;
+    if (this.#currentResultState.data !== void 0) {
+      this.#lastQueryWithDefinedData = this.#currentQuery;
+    }
+    if (shallowEqualObjects(nextResult, prevResult)) {
+      return;
+    }
+    this.#currentResult = nextResult;
+    const defaultNotifyOptions = {};
+    const shouldNotifyListeners = () => {
+      if (!prevResult) {
+        return true;
+      }
+      const { notifyOnChangeProps } = this.options;
+      const notifyOnChangePropsValue = typeof notifyOnChangeProps === "function" ? notifyOnChangeProps() : notifyOnChangeProps;
+      if (notifyOnChangePropsValue === "all" || !notifyOnChangePropsValue && !this.#trackedProps.size) {
+        return true;
+      }
+      const includedProps = new Set(
+        notifyOnChangePropsValue ?? this.#trackedProps
+      );
+      if (this.options.throwOnError) {
+        includedProps.add("error");
+      }
+      return Object.keys(this.#currentResult).some((key) => {
+        const typedKey = key;
+        const changed = this.#currentResult[typedKey] !== prevResult[typedKey];
+        return changed && includedProps.has(typedKey);
+      });
+    };
+    if (notifyOptions?.listeners !== false && shouldNotifyListeners()) {
+      defaultNotifyOptions.listeners = true;
+    }
+    this.#notify({ ...defaultNotifyOptions, ...notifyOptions });
+  }
+  #updateQuery() {
+    const query = this.#client.getQueryCache().build(this.#client, this.options);
+    if (query === this.#currentQuery) {
+      return;
+    }
+    const prevQuery = this.#currentQuery;
+    this.#currentQuery = query;
+    this.#currentQueryInitialState = query.state;
+    if (this.hasListeners()) {
+      prevQuery?.removeObserver(this);
+      query.addObserver(this);
+    }
+  }
+  onQueryUpdate() {
+    this.updateResult();
+    if (this.hasListeners()) {
+      this.#updateTimers();
+    }
+  }
+  #notify(notifyOptions) {
+    notifyManager.batch(() => {
+      if (notifyOptions.listeners) {
+        this.listeners.forEach((listener) => {
+          listener(this.#currentResult);
+        });
+      }
+      this.#client.getQueryCache().notify({
+        query: this.#currentQuery,
+        type: "observerResultsUpdated"
+      });
+    });
+  }
+};
+function shouldLoadOnMount(query, options) {
+  return options.enabled !== false && query.state.data === void 0 && !(query.state.status === "error" && options.retryOnMount === false);
+}
+function shouldFetchOnMount(query, options) {
+  return shouldLoadOnMount(query, options) || query.state.data !== void 0 && shouldFetchOn(query, options, options.refetchOnMount);
+}
+function shouldFetchOn(query, options, field) {
+  if (options.enabled !== false) {
+    const value = typeof field === "function" ? field(query) : field;
+    return value === "always" || value !== false && isStale(query, options);
+  }
+  return false;
+}
+function shouldFetchOptionally(query, prevQuery, options, prevOptions) {
+  return (query !== prevQuery || prevOptions.enabled === false) && (!options.suspense || query.state.status !== "error") && isStale(query, options);
+}
+function isStale(query, options) {
+  return options.enabled !== false && query.isStaleByTime(options.staleTime);
+}
+function shouldAssignObserverCurrentProperties(observer, optimisticResult) {
+  if (!shallowEqualObjects(observer.getCurrentResult(), optimisticResult)) {
+    return true;
+  }
+  return false;
+}
+
+var QueryClientContext = React.createContext(
+  void 0
+);
+var useQueryClient = (queryClient) => {
+  const client = React.useContext(QueryClientContext);
+  if (queryClient) {
+    return queryClient;
+  }
+  if (!client) {
+    throw new Error("No QueryClient set, use QueryClientProvider to set one");
+  }
+  return client;
+};
+
+var IsRestoringContext = React.createContext(false);
+var useIsRestoring = () => React.useContext(IsRestoringContext);
+IsRestoringContext.Provider;
+
+function createValue() {
+  let isReset = false;
+  return {
+    clearReset: () => {
+      isReset = false;
+    },
+    reset: () => {
+      isReset = true;
+    },
+    isReset: () => {
+      return isReset;
+    }
+  };
+}
+var QueryErrorResetBoundaryContext = React.createContext(createValue());
+var useQueryErrorResetBoundary = () => React.useContext(QueryErrorResetBoundaryContext);
+
+// src/utils.ts
+function shouldThrowError(throwError, params) {
+  if (typeof throwError === "function") {
+    return throwError(...params);
+  }
+  return !!throwError;
+}
+
+var ensurePreventErrorBoundaryRetry = (options, errorResetBoundary) => {
+  if (options.suspense || options.throwOnError) {
+    if (!errorResetBoundary.isReset()) {
+      options.retryOnMount = false;
+    }
+  }
+};
+var useClearResetErrorBoundary = (errorResetBoundary) => {
+  React.useEffect(() => {
+    errorResetBoundary.clearReset();
+  }, [errorResetBoundary]);
+};
+var getHasError = ({
+  result,
+  errorResetBoundary,
+  throwOnError,
+  query
+}) => {
+  return result.isError && !errorResetBoundary.isReset() && !result.isFetching && query && shouldThrowError(throwOnError, [result.error, query]);
+};
+
+// src/suspense.ts
+var ensureStaleTime = (defaultedOptions) => {
+  if (defaultedOptions.suspense) {
+    if (typeof defaultedOptions.staleTime !== "number") {
+      defaultedOptions.staleTime = 1e3;
+    }
+  }
+};
+var shouldSuspend = (defaultedOptions, result) => defaultedOptions?.suspense && result.isPending;
+var fetchOptimistic = (defaultedOptions, observer, errorResetBoundary) => observer.fetchOptimistic(defaultedOptions).catch(() => {
+  errorResetBoundary.clearReset();
+});
+
+function useBaseQuery(options, Observer, queryClient) {
+  const client = useQueryClient(queryClient);
+  const isRestoring = useIsRestoring();
+  const errorResetBoundary = useQueryErrorResetBoundary();
+  const defaultedOptions = client.defaultQueryOptions(options);
+  defaultedOptions._optimisticResults = isRestoring ? "isRestoring" : "optimistic";
+  ensureStaleTime(defaultedOptions);
+  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary);
+  useClearResetErrorBoundary(errorResetBoundary);
+  const [observer] = React.useState(
+    () => new Observer(
+      client,
+      defaultedOptions
+    )
+  );
+  const result = observer.getOptimisticResult(defaultedOptions);
+  React.useSyncExternalStore(
+    React.useCallback(
+      (onStoreChange) => {
+        const unsubscribe = isRestoring ? () => void 0 : observer.subscribe(notifyManager.batchCalls(onStoreChange));
+        observer.updateResult();
+        return unsubscribe;
+      },
+      [observer, isRestoring]
+    ),
+    () => observer.getCurrentResult(),
+    () => observer.getCurrentResult()
+  );
+  React.useEffect(() => {
+    observer.setOptions(defaultedOptions, { listeners: false });
+  }, [defaultedOptions, observer]);
+  if (shouldSuspend(defaultedOptions, result)) {
+    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary);
+  }
+  if (getHasError({
+    result,
+    errorResetBoundary,
+    throwOnError: defaultedOptions.throwOnError,
+    query: client.getQueryCache().get(defaultedOptions.queryHash)
+  })) {
+    throw result.error;
+  }
+  return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result;
+}
+
+function useQuery(options, queryClient) {
+  return useBaseQuery(options, QueryObserver, queryClient);
+}
+
 var BASE_URL = "neeto_approvals";
 var TEMPLATE_URL = "".concat(BASE_URL, "/templates");
 
@@ -175,23 +1055,20 @@ var useFetchRequests = function useFetchRequests(_ref) {
     params = _ref$params === void 0 ? {} : _ref$params,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? {} : _ref$options;
-  return useQuery([QUERY_KEYS.REQUESTS, params], function () {
-    return requestsApi.fetch(params, requestUrl);
-  }, _objectSpread$b({
+  return useQuery(_objectSpread$b({
+    queryKey: [QUERY_KEYS.REQUESTS, params],
+    queryFn: function queryFn() {
+      return requestsApi.fetch(params, requestUrl);
+    },
     select: function select(response) {
       return response.data || response;
     },
-    keepPreviousData: true,
-    onSuccess: function onSuccess(_ref2) {
-      var _options$onSuccess;
-      var requests = _ref2.requests;
-      return (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, requests);
-    }
+    placeholderData: keepPreviousData
   }, options));
 };
 var useUpdateRequest = function useUpdateRequest(options) {
   return useMutationWithInvalidation(requestsApi.update, _objectSpread$b({
-    keysToInvalidate: [QUERY_KEYS.REQUESTS, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.REQUESTS], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 
@@ -272,7 +1149,7 @@ var HISTORY_TABLE_COLUMNS = [{
   render: function render(approvalLabel, _ref) {
     var requestableUrl = _ref.requestableUrl;
     var url = new URL(requestableUrl || window.location.origin);
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/jsx(Button, {
       label: approvalLabel,
       style: "link",
       to: url.pathname
@@ -291,7 +1168,7 @@ var HISTORY_TABLE_COLUMNS = [{
   width: "25%",
   title: t$1("neetoApprovals.common.status"),
   render: function render(status) {
-    return /*#__PURE__*/React.createElement(Tag, {
+    return /*#__PURE__*/jsx(Tag, {
       label: capitalize(status),
       style: STATUS_TAG_STYLE[status]
     });
@@ -303,7 +1180,7 @@ var HISTORY_TABLE_COLUMNS = [{
   width: "25%",
   title: t$1("neetoApprovals.common.created"),
   render: function render(createdAt) {
-    return /*#__PURE__*/React.createElement(DateFormat.FromNow, {
+    return /*#__PURE__*/jsx(DateFormat.FromNow, {
       date: createdAt,
       typographyProps: {
         style: "body2"
@@ -321,75 +1198,38 @@ var Footer = function Footer(_ref) {
     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"),
+    return /*#__PURE__*/jsxs(Pane.Footer, {
+      className: "flex gap-x-2",
+      children: [/*#__PURE__*/jsx(Button, {
+        label: t("neetoApprovals.buttons.approve"),
+        loading: isLoading,
+        type: "submit",
+        onClick: function onClick() {
+          return handleSubmit(STATUSES.approved);
+        }
+      }), /*#__PURE__*/jsx(Button, {
+        label: t("neetoApprovals.buttons.decline"),
+        loading: isLoading,
+        style: "text",
+        onClick: function onClick() {
+          return handleSubmit(STATUSES.rejected);
+        }
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx(Pane.Footer, {
+    className: "flex gap-x-2",
+    children: /*#__PURE__*/jsx(Button, {
+      label: t("neetoApprovals.buttons.cancelRequest"),
       loading: isLoading,
       type: "submit",
       onClick: function onClick() {
-        return handleSubmit(STATUSES.approved);
+        return handleSubmit(STATUSES.cancelled);
       }
-    }), /*#__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 : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-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="$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;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
-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,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;
-var timezone = /*@__PURE__*/getDefaultExportFromCjs(timezoneExports);
-
-var utc$1 = {exports: {}};
-
-utc$1.exports;
-
-(function (module, exports) {
-	!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}})); 
-} (utc$1, utc$1.exports));
-
-var utcExports = utc$1.exports;
-var utc = /*@__PURE__*/getDefaultExportFromCjs(utcExports);
-
 dayjs.extend(utc);
 dayjs.extend(timezone);
 var updateApprovalDetails = function updateApprovalDetails(_ref) {
@@ -425,7 +1265,7 @@ var getApprovalFilter = function getApprovalFilter() {
   };
 };
 
-var MemoizedEditorContent$1 = /*#__PURE__*/React.memo(EditorContent);
+var MemoizedEditorContent$1 = /*#__PURE__*/React__default.memo(EditorContent);
 var RequestDetailsPane = function RequestDetailsPane(_ref) {
   var _window$globalProps, _window$globalProps2;
   var isOpen = _ref.isOpen,
@@ -452,7 +1292,7 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
     setNote = _useState2[1];
   var _useUpdateRequest = useUpdateRequest(),
     updatePendingRequest = _useUpdateRequest.mutate,
-    isLoading = _useUpdateRequest.isLoading;
+    isUpdateRequestPending = _useUpdateRequest.isPending;
   useEffect(function () {
     setNote(initialNote);
   }, [initialNote]);
@@ -480,65 +1320,82 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
       onSuccess: handleOnClose
     });
   };
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
     size: "large",
-    onClose: handleOnClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, title), /*#__PURE__*/React.createElement(Tag, {
-    label: capitalize(status),
-    style: STATUS_TAG_STYLE[status]
-  })), /*#__PURE__*/React.createElement(Pane.Body, {
-    className: "space-y-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full divide-y border px-3"
-  }, /*#__PURE__*/React.createElement("div", {
-    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-3 p-2"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "font-normal"
-  }, t("neetoApprovals.common.created")), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2",
-    weight: "medium"
-  }, dateFormat.defaultWithTime(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
-  })), isPending && isCurrentUserApprover && /*#__PURE__*/React.createElement(Textarea, {
-    className: "w-full",
-    disabled: !isPending,
-    label: t("neetoApprovals.common.note"),
-    value: note,
-    placeholder: t("neetoApprovals.inputs.placeholders.add_", {
-      what: t("neetoApprovals.common.note")
-    }),
-    onChange: withEventTargetValue(setNote)
-  }), !isPending && note && /*#__PURE__*/React.createElement("div", {
-    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 && /*#__PURE__*/React.createElement(Footer, {
-    handleSubmit: handleSubmit,
-    isCurrentUserApprover: isCurrentUserApprover,
-    isCurrentUserRequester: isCurrentUserRequester,
-    isLoading: isLoading
-  }));
+    onClose: handleOnClose,
+    children: [/*#__PURE__*/jsxs(Pane.Header, {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: title
+      }), /*#__PURE__*/jsx(Tag, {
+        label: capitalize(status),
+        style: STATUS_TAG_STYLE[status]
+      })]
+    }), /*#__PURE__*/jsxs(Pane.Body, {
+      className: "space-y-6",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "w-full divide-y border px-3",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex space-x-3 p-2",
+          children: [/*#__PURE__*/jsx(Label, {
+            className: "font-normal",
+            children: getStatusLabel()
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            weight: "medium",
+            children: requesterOrApproverDetails
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex space-x-3 p-2",
+          children: [/*#__PURE__*/jsx(Label, {
+            className: "font-normal",
+            children: t("neetoApprovals.common.created")
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            weight: "medium",
+            children: dateFormat.defaultWithTime(timeInZone(createdAt))
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "w-full space-y-2",
+        children: [/*#__PURE__*/jsx(Label, {
+          children: t("neetoApprovals.inputs.labels.message")
+        }), /*#__PURE__*/jsx(MemoizedEditorContent$1, {
+          className: "neeto-ui-bg-gray-100 p-4",
+          content: message
+        })]
+      }), isPending && isCurrentUserApprover && /*#__PURE__*/jsx(Textarea, {
+        className: "w-full",
+        disabled: !isPending,
+        label: t("neetoApprovals.common.note"),
+        value: note,
+        placeholder: t("neetoApprovals.inputs.placeholders.add_", {
+          what: t("neetoApprovals.common.note")
+        }),
+        onChange: withEventTargetValue(setNote)
+      }), !isPending && note && /*#__PURE__*/jsxs("div", {
+        className: "w-full space-y-2",
+        children: [/*#__PURE__*/jsx(Label, {
+          children: t("neetoApprovals.common.note")
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-bg-gray-100 p-4",
+          children: note
+        })]
+      })]
+    }), isPending && /*#__PURE__*/jsx(Footer, {
+      handleSubmit: handleSubmit,
+      isCurrentUserApprover: isCurrentUserApprover,
+      isCurrentUserRequester: isCurrentUserRequester,
+      isLoading: isUpdateRequestPending
+    })]
+  });
 };
 
 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;
   var _useState = useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
@@ -559,64 +1416,66 @@ var History = function History(_ref) {
         searchTerm: debouncedSearchTerm.trim(),
         status: [STATUSES.approved, STATUSES.rejected, STATUSES.cancelled]
       }),
-      options: {
-        onSuccess: function onSuccess(_ref2) {
-          var requests = _ref2.requests;
-          handleEmptyPage(requests, pageProperties, handlePageChange);
-          setApprovalDetails(function (approvalDetails) {
-            return updateApprovalDetails({
-              requestsData: requests,
-              approvalDetails: approvalDetails
-            });
-          });
-        }
-      },
       requestUrl: requestUrl
     }),
-    _useFetchRequests$dat = _useFetchRequests.data,
-    _useFetchRequests$dat2 = _useFetchRequests$dat === void 0 ? {} : _useFetchRequests$dat,
-    _useFetchRequests$dat3 = _useFetchRequests$dat2.requests,
-    approvalHistories = _useFetchRequests$dat3 === void 0 ? {} : _useFetchRequests$dat3,
-    _useFetchRequests$dat4 = _useFetchRequests$dat2.totalCount,
-    totalCount = _useFetchRequests$dat4 === void 0 ? 0 : _useFetchRequests$dat4;
+    data = _useFetchRequests.data;
+  var _ref2 = data || {},
+    _ref2$requests = _ref2.requests,
+    approvalHistories = _ref2$requests === void 0 ? {} : _ref2$requests,
+    _ref2$totalCount = _ref2.totalCount,
+    totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
+  useEffect(function () {
+    if (!data) return;
+    handleEmptyPage(data === null || data === void 0 ? void 0 : data.requests, pageProperties, handlePageChange);
+    setApprovalDetails(function (approvalDetails) {
+      return updateApprovalDetails({
+        requestsData: data === null || data === void 0 ? void 0 : data.requests,
+        approvalDetails: approvalDetails
+      });
+    });
+  }, [data]);
   var handleTableChange = function handleTableChange(_, __, sorter) {
     setFilters(_objectSpread$a(_objectSpread$a({}, filters), {}, {
       sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: SORT_ORDER[sorter.order]
     }));
   };
-  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,
-    columnData: HISTORY_TABLE_COLUMNS,
-    currentPageNumber: pageProperties.page,
-    defaultPageSize: pageProperties.pageSize,
-    rowData: approvalHistories,
-    handlePageChange: handlePageChange,
-    totalCount: totalCount,
-    paginationProps: {
-      hideOnSinglePage: (approvalHistories === null || approvalHistories === void 0 ? void 0 : approvalHistories.length) < DEFAULT_PAGE_SIZE + 1
-    },
-    onChange: handleTableChange,
-    onRowClick: function onRowClick(_, approvalDetails) {
-      return setApprovalDetails(approvalDetails);
-    }
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
-    title: t("neetoApprovals.common.notFound_", {
-      what: (_t = t("neetoApprovals.common.record", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    })
-  })), /*#__PURE__*/React.createElement(RequestDetailsPane, {
-    approvalDetails: approvalDetails,
-    isOpen: isPresent(approvalDetails),
-    onClose: function onClose() {
-      return setApprovalDetails({});
-    }
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isEmpty(approvalHistories) ? /*#__PURE__*/jsx(TableWrapper, {
+      className: "mt-6",
+      hasPagination: totalCount > pageProperties.pageSize,
+      children: /*#__PURE__*/jsx(Table$1, {
+        handlePageChange: handlePageChange,
+        totalCount: totalCount,
+        allowRowClick: true,
+        fixedHeight: true,
+        columnData: HISTORY_TABLE_COLUMNS,
+        currentPageNumber: pageProperties.page,
+        defaultPageSize: pageProperties.pageSize,
+        rowData: approvalHistories,
+        paginationProps: {
+          hideOnSinglePage: (approvalHistories === null || approvalHistories === void 0 ? void 0 : approvalHistories.length) < DEFAULT_PAGE_SIZE + 1
+        },
+        onChange: handleTableChange,
+        onRowClick: function onRowClick(_, approvalDetails) {
+          return setApprovalDetails(approvalDetails);
+        }
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        title: t("neetoApprovals.common.notFound_", {
+          what: t("neetoApprovals.common.record", PLURAL)
+        })
+      })
+    }), /*#__PURE__*/jsx(RequestDetailsPane, {
+      approvalDetails: approvalDetails,
+      isOpen: isPresent(approvalDetails),
+      onClose: function onClose() {
+        return setApprovalDetails({});
+      }
+    })]
+  });
 };
 
 var PENDING_TABLE_COLUMNS = removeBy({
@@ -626,7 +1485,6 @@ var PENDING_TABLE_COLUMNS = removeBy({
 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;
   var _useState = useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
@@ -647,75 +1505,62 @@ var PendingRequests = function PendingRequests(_ref) {
         searchTerm: debouncedSearchTerm.trim(),
         status: [STATUSES.pending]
       }),
-      options: {
-        onSuccess: function onSuccess(_ref2) {
-          var requests = _ref2.requests;
-          handleEmptyPage(requests, pageProperties, handlePageChange);
-        }
-      },
       requestUrl: requestUrl
     }),
-    _useFetchRequests$dat = _useFetchRequests.data,
-    _useFetchRequests$dat2 = _useFetchRequests$dat === void 0 ? {} : _useFetchRequests$dat,
-    _useFetchRequests$dat3 = _useFetchRequests$dat2.requests,
-    pendingRequests = _useFetchRequests$dat3 === void 0 ? {} : _useFetchRequests$dat3,
-    _useFetchRequests$dat4 = _useFetchRequests$dat2.totalCount,
-    totalCount = _useFetchRequests$dat4 === void 0 ? 0 : _useFetchRequests$dat4;
+    data = _useFetchRequests.data;
+  var _ref2 = data || {},
+    _ref2$requests = _ref2.requests,
+    pendingRequests = _ref2$requests === void 0 ? {} : _ref2$requests,
+    _ref2$totalCount = _ref2.totalCount,
+    totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
+  useEffect(function () {
+    if (!data) return;
+    handleEmptyPage(data === null || data === void 0 ? void 0 : data.requests, pageProperties, handlePageChange);
+  }, [data]);
   var handleTableChange = function handleTableChange(_, __, sorter) {
     setFilters(_objectSpread$9(_objectSpread$9({}, filters), {}, {
       sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: SORT_ORDER[sorter.order]
     }));
   };
-  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,
-    columnData: PENDING_TABLE_COLUMNS,
-    currentPageNumber: pageProperties.page,
-    defaultPageSize: pageProperties.pageSize,
-    rowData: pendingRequests,
-    handlePageChange: handlePageChange,
-    totalCount: totalCount,
-    paginationProps: {
-      hideOnSinglePage: (pendingRequests === null || pendingRequests === void 0 ? void 0 : pendingRequests.length) < DEFAULT_PAGE_SIZE + 1
-    },
-    onChange: handleTableChange,
-    onRowClick: function onRowClick(_, approvalDetails) {
-      return setApprovalDetails(approvalDetails);
-    }
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
-    title: t("neetoApprovals.common.notFound_", {
-      what: (_t = t("neetoApprovals.common.pendingApproval", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    })
-  })), /*#__PURE__*/React.createElement(RequestDetailsPane, {
-    isPending: true,
-    approvalDetails: approvalDetails,
-    isOpen: isPresent(approvalDetails),
-    onClose: function onClose() {
-      return setApprovalDetails({});
-    }
-  }));
-};
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isEmpty(pendingRequests) ? /*#__PURE__*/jsx(TableWrapper, {
+      className: "mt-6",
+      hasPagination: totalCount > pageProperties.pageSize,
+      children: /*#__PURE__*/jsx(Table$1, {
+        handlePageChange: handlePageChange,
+        totalCount: totalCount,
+        allowRowClick: true,
+        fixedHeight: true,
+        columnData: PENDING_TABLE_COLUMNS,
+        currentPageNumber: pageProperties.page,
+        defaultPageSize: pageProperties.pageSize,
+        rowData: pendingRequests,
+        paginationProps: {
+          hideOnSinglePage: (pendingRequests === null || pendingRequests === void 0 ? void 0 : pendingRequests.length) < DEFAULT_PAGE_SIZE + 1
+        },
+        onChange: handleTableChange,
+        onRowClick: function onRowClick(_, approvalDetails) {
+          return setApprovalDetails(approvalDetails);
         }
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        title: t("neetoApprovals.common.notFound_", {
+          what: t("neetoApprovals.common.pendingApproval", PLURAL)
+        })
+      })
+    }), /*#__PURE__*/jsx(RequestDetailsPane, {
+      approvalDetails: approvalDetails,
+      isPending: true,
+      isOpen: isPresent(approvalDetails),
+      onClose: function onClose() {
+        return setApprovalDetails({});
       }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+    })]
+  });
+};
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -788,48 +1633,47 @@ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t
 var useFetchTemplates = function useFetchTemplates() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.TEMPLATES, params], function () {
-    return templatesApi.fetch(params);
-  }, _objectSpread$8({
+  return useQuery(_objectSpread$8({
+    queryKey: [QUERY_KEYS.TEMPLATES, params],
+    queryFn: function queryFn() {
+      return templatesApi.fetch(params);
+    },
     select: function select(response) {
       return response.data || response;
     },
-    keepPreviousData: true,
-    onSuccess: function onSuccess(_ref) {
-      var _params$onSuccess;
-      var templates = _ref.templates;
-      return params === null || params === void 0 || (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, templates);
-    }
+    placeholderData: keepPreviousData
   }, options));
 };
-var useFetchTemplate = function useFetchTemplate(_ref2) {
-  var id = _ref2.id,
-    params = _ref2.params;
-  return useQuery([QUERY_KEYS.SHOW_TEMPLATE, id, params], function () {
-    return templatesApi.show({
-      id: id,
-      params: params
-    });
-  }, {
+var useFetchTemplate = function useFetchTemplate(_ref) {
+  var id = _ref.id,
+    params = _ref.params;
+  return useQuery({
+    queryKey: [QUERY_KEYS.SHOW_TEMPLATE, id, params],
+    queryFn: function queryFn() {
+      return templatesApi.show({
+        id: id,
+        params: params
+      });
+    },
     enabled: !!id
   });
 };
 var useCreateTemplate = function useCreateTemplate(options) {
   return useMutationWithInvalidation(templatesApi.create, _objectSpread$8({
-    keysToInvalidate: [QUERY_KEYS.TEMPLATES, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.TEMPLATES], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 var useUpdateTemplate = function useUpdateTemplate(options) {
   return useMutationWithInvalidation(templatesApi.update, _objectSpread$8({
-    keysToInvalidate: [QUERY_KEYS.TEMPLATES, function (_, _ref3) {
-      var id = _ref3.id;
+    keysToInvalidate: [[QUERY_KEYS.TEMPLATES], function (_, _ref2) {
+      var id = _ref2.id;
       return [QUERY_KEYS.SHOW_TEMPLATE, id];
     }]
   }, options));
 };
 var useDeleteTemplate = function useDeleteTemplate(options) {
   return useMutationWithInvalidation(templatesApi.destroy, _objectSpread$8({
-    keysToInvalidate: [QUERY_KEYS.TEMPLATES, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.TEMPLATES], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 
@@ -855,7 +1699,7 @@ var MessageEditor = withT(function (_ref) {
     placeholders = _ref$placeholders === void 0 ? [] : _ref$placeholders,
     _ref$initialValue = _ref.initialValue,
     initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue;
-  return /*#__PURE__*/React.createElement(FormikEditor, {
+  return /*#__PURE__*/jsx(FormikEditor, {
     initialValue: initialValue,
     required: true,
     label: t("neetoApprovals.inputs.labels.message"),
@@ -883,32 +1727,34 @@ var TemplateForm = function TemplateForm(_ref) {
       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",
-    title: t("neetoApprovals.inputs.labels.description"),
-    switchProps: {
-      onChange: handleDescriptionToggle,
-      tooltipProps: {
-        enabledSwitchText: t("neetoApprovals.templates.descriptionToggle.enable"),
-        disabledSwitchText: t("neetoApprovals.templates.descriptionToggle.disable")
-      }
-    }
-  }, 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
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex w-full flex-col space-y-6",
+    children: [/*#__PURE__*/jsx(Input, {
+      autoFocus: true,
+      required: true,
+      label: t("neetoApprovals.common.name"),
+      name: "name",
+      placeholder: t("neetoApprovals.inputs.placeholders.name")
+    }), /*#__PURE__*/jsx(ToggleFeatureCard, {
+      switchName: "descriptionEnabled",
+      title: t("neetoApprovals.inputs.labels.description"),
+      switchProps: {
+        onChange: handleDescriptionToggle,
+        tooltipProps: {
+          enabledSwitchText: t("neetoApprovals.templates.descriptionToggle.enable"),
+          disabledSwitchText: t("neetoApprovals.templates.descriptionToggle.disable")
+        }
+      },
+      children: values.descriptionEnabled && /*#__PURE__*/jsx(Textarea$1, {
+        className: "w-full",
+        name: "description",
+        placeholder: t("neetoApprovals.inputs.placeholders.description")
+      })
+    }), /*#__PURE__*/jsx(MessageEditor, {
+      placeholders: placeholders,
+      initialValue: initialData.message
+    })]
+  });
 };
 
 var Form$2 = function Form(_ref) {
@@ -917,7 +1763,7 @@ var Form$2 = function Form(_ref) {
     _ref$initialData = _ref.initialData,
     initialData = _ref$initialData === void 0 ? {} : _ref$initialData,
     _ref$onSubmit = _ref.onSubmit,
-    onSubmit = _ref$onSubmit === void 0 ? noop : _ref$onSubmit,
+    onSubmit = _ref$onSubmit === void 0 ? noop$1 : _ref$onSubmit,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     placeholders = _ref.placeholders;
@@ -929,36 +1775,42 @@ var Form$2 = function Form(_ref) {
   }) : t("neetoApprovals.common.edit_", {
     what: t("neetoApprovals.common.template", SINGULAR)
   });
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
     onClose: onClose,
     initialFocusRef: inputReference,
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, 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(TemplateForm, {
-    initialData: initialData,
-    placeholders: placeholders
-  })), /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "flex gap-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "neeto-approvals-templates-save-template-btn",
-    label: t("neetoApprovals.buttons.saveChanges"),
-    loading: isLoading,
-    type: "submit"
-  }), /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "neeto-approvals-templates-close-template-form-btn",
-    label: t("neetoApprovals.buttons.cancel"),
-    style: "text",
-    onClick: onClose
-  })))));
+    size: "large",
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: header
+      })
+    }), /*#__PURE__*/jsxs(FormikForm, {
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: isPresent(initialData) ? initialData : TEMPLATE_FORM_INITIAL_VALUES,
+        validationSchema: TEMPLATE_FORM_VALIDATION_SCHEMA,
+        onSubmit: onSubmit
+      },
+      children: [/*#__PURE__*/jsx(Pane.Body, {
+        children: /*#__PURE__*/jsx(TemplateForm, {
+          initialData: initialData,
+          placeholders: placeholders
+        })
+      }), /*#__PURE__*/jsx(Pane.Footer, {
+        children: /*#__PURE__*/jsx(ActionBlock, {
+          isSubmitting: isLoading,
+          cancelButtonProps: {
+            "data-cy": "neeto-approvals-templates-close-template-form-btn",
+            onClick: onClose
+          },
+          submitButtonProps: {
+            "data-cy": "neeto-approvals-templates-save-template-btn"
+          }
+        })
+      })]
+    })]
+  });
 };
 
 var Create = function Create(_ref) {
@@ -968,7 +1820,7 @@ var Create = function Create(_ref) {
     templatePlaceholders = _ref.templatePlaceholders;
   var _useCreateTemplate = useCreateTemplate(),
     createTemplate = _useCreateTemplate.mutate,
-    isLoading = _useCreateTemplate.isLoading;
+    isPending = _useCreateTemplate.isPending;
   var onSubmit = function onSubmit(template) {
     var payload = {
       template: template
@@ -980,11 +1832,11 @@ var Create = function Create(_ref) {
       onSuccess: onClose
     });
   };
-  return /*#__PURE__*/React.createElement(Form$2, {
-    isLoading: isLoading,
+  return /*#__PURE__*/jsx(Form$2, {
     isOpen: isOpen,
     onClose: onClose,
     onSubmit: onSubmit,
+    isLoading: isPending,
     placeholders: templatePlaceholders
   });
 };
@@ -1004,7 +1856,7 @@ var Edit = function Edit(_ref) {
       }
     }),
     updateTemplate = _useUpdateTemplate.mutate,
-    isUpdating = _useUpdateTemplate.isLoading;
+    isUpdating = _useUpdateTemplate.isPending;
   var onSubmit = function onSubmit(template) {
     var payload = {
       template: template
@@ -1018,7 +1870,7 @@ var Edit = function Edit(_ref) {
   var initialData = _objectSpread$7(_objectSpread$7({}, template), {}, {
     descriptionEnabled: !!template.description
   });
-  return /*#__PURE__*/React.createElement(Form$2, {
+  return /*#__PURE__*/jsx(Form$2, {
     initialData: initialData,
     isOpen: isOpen,
     onClose: onClose,
@@ -1031,18 +1883,21 @@ var Edit = function Edit(_ref) {
 var Field = function Field(_ref) {
   var label = _ref.label,
     value = _ref.value;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-start justify-center"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "mb-1 font-normal"
-  }, label), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, value));
-};
-var Field$1 = /*#__PURE__*/React.memo(Field);
-
-var MemoizedEditorContent = /*#__PURE__*/React.memo(EditorContent);
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col items-start justify-center",
+    children: [/*#__PURE__*/jsx(Label, {
+      className: "mb-1 font-normal",
+      children: label
+    }), /*#__PURE__*/jsx(Typography, {
+      style: "body1",
+      weight: "medium",
+      children: value
+    })]
+  });
+};
+var Field$1 = /*#__PURE__*/React__default.memo(Field);
+
+var MemoizedEditorContent = /*#__PURE__*/React__default.memo(EditorContent);
 var TemplateDetails = function TemplateDetails(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -1052,41 +1907,47 @@ var TemplateDetails = function TemplateDetails(_ref) {
   var name = template.name,
     description = template.description,
     message = template.message;
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("neetoApprovals.common.templateDetails"))), /*#__PURE__*/React.createElement(Pane.Body, {
-    className: "space-y-6"
-  }, /*#__PURE__*/React.createElement(Field$1, {
-    label: t("neetoApprovals.common.name"),
-    value: name
-  }), /*#__PURE__*/React.createElement(Field$1, {
-    label: t("neetoApprovals.inputs.labels.description"),
-    value: description
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-4"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "mb-1 font-normal"
-  }, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React.createElement(MemoizedEditorContent, {
-    className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
-    content: message
-  }))));
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      className: "space-y-2",
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: t("neetoApprovals.common.templateDetails")
+      })
+    }), /*#__PURE__*/jsxs(Pane.Body, {
+      className: "space-y-6",
+      children: [/*#__PURE__*/jsx(Field$1, {
+        label: t("neetoApprovals.common.name"),
+        value: name
+      }), /*#__PURE__*/jsx(Field$1, {
+        label: t("neetoApprovals.inputs.labels.description"),
+        value: description
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex w-full flex-col space-y-4",
+        children: [/*#__PURE__*/jsx(Label, {
+          className: "mb-1 font-normal",
+          children: t("neetoApprovals.inputs.labels.message")
+        }), /*#__PURE__*/jsx(MemoizedEditorContent, {
+          className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
+          content: message
+        })]
+      })]
+    })]
+  });
 };
 
 var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
   var entity = _ref.entity,
     url = _ref.url;
-  return /*#__PURE__*/React.createElement(Trans, {
+  return /*#__PURE__*/jsx(Trans, {
     i18nKey: "neetoApprovals.common.noDataHelpText",
     values: {
       entity: entity
     },
     components: {
-      a: /*#__PURE__*/React.createElement(Link, {
+      a: /*#__PURE__*/jsx(Link, {
         className: "neeto-ui-text-primary-600 underline",
         target: "_blank",
         to: {
@@ -1141,34 +2002,36 @@ var Table = function Table(_ref) {
     })
   };
   if (isEmpty(rowData)) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full flex-grow items-center justify-center"
-    }, /*#__PURE__*/React.createElement(NoData, _extends({
-      title: t("neetoApprovals.common.notFound_", {
-        what: entity
-      })
-    }, !filters.searchTerm && noDataProps)));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$6({
+        title: t("neetoApprovals.common.notFound_", {
+          what: entity
+        })
+      }, !filters.searchTerm && noDataProps))
+    });
   }
-  return /*#__PURE__*/React.createElement(TableWrapper, {
+  return /*#__PURE__*/jsx(TableWrapper, {
     className: "mt-6",
-    hasPagination: totalCount > pageProperties.pageSize
-  }, /*#__PURE__*/React.createElement(Table$1, _extends({
-    fixedHeight: true,
-    columnData: columns,
-    currentPageNumber: pageProperties.page,
-    defaultPageSize: pageProperties.pageSize,
-    scroll: {
-      x: 0
-    },
-    tableLayout: "fixed",
-    paginationProps: {
-      hideOnSinglePage: (rowData === null || rowData === void 0 ? void 0 : rowData.length) < DEFAULT_PAGE_SIZE + 1
-    },
-    onChange: handleTableChange
-  }, _objectSpread$6({
-    rowData: rowData,
-    totalCount: totalCount
-  }, otherProps))));
+    hasPagination: totalCount > pageProperties.pageSize,
+    children: /*#__PURE__*/jsx(Table$1, _objectSpread$6({
+      fixedHeight: true,
+      columnData: columns,
+      currentPageNumber: pageProperties.page,
+      defaultPageSize: pageProperties.pageSize,
+      scroll: {
+        x: 0
+      },
+      tableLayout: "fixed",
+      paginationProps: {
+        hideOnSinglePage: (rowData === null || rowData === void 0 ? void 0 : rowData.length) < DEFAULT_PAGE_SIZE + 1
+      },
+      onChange: handleTableChange
+    }, _objectSpread$6({
+      rowData: rowData,
+      totalCount: totalCount
+    }, otherProps)))
+  });
 };
 
 var columnData = function columnData(_ref) {
@@ -1181,32 +2044,34 @@ var columnData = function columnData(_ref) {
     title: i18next.t("neetoApprovals.common.name"),
     ellipsis: true,
     render: function render(_, template) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React.createElement(Typography, {
-        className: "truncate",
-        style: "body2"
-      }, template.name), /*#__PURE__*/React.createElement(MoreDropdown, {
-        dropdownProps: {
-          strategy: "fixed",
-          onClick: function onClick(e) {
-            return e.stopPropagation();
-          }
-        },
-        menuItems: [_defineProperty({
-          key: "edit",
-          label: i18next.t("neetoApprovals.common.edit"),
-          onClick: function onClick(event) {
-            return onEditClick(event, template);
-          }
-        }, DATA_CY_KEY, "neeto-approvals-templates-edit-template-btn"), _defineProperty({
-          key: "delete",
-          label: i18next.t("neetoApprovals.common.delete"),
-          onClick: function onClick(event) {
-            return onDeleteClick(event, template);
-          }
-        }, DATA_CY_KEY, "neeto-approvals-templates-delete-template-btn")]
-      }));
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "truncate",
+          style: "body2",
+          children: template.name
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownProps: {
+            strategy: "fixed",
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
+          },
+          menuItems: [_defineProperty({
+            key: "edit",
+            label: i18next.t("neetoApprovals.common.edit"),
+            onClick: function onClick(event) {
+              return onEditClick(event, template);
+            }
+          }, DATA_CY_KEY, "neeto-approvals-templates-edit-template-btn"), _defineProperty({
+            key: "delete",
+            label: i18next.t("neetoApprovals.common.delete"),
+            onClick: function onClick(event) {
+              return onDeleteClick(event, template);
+            }
+          }, DATA_CY_KEY, "neeto-approvals-templates-delete-template-btn")]
+        })]
+      });
     }
   }, {
     dataIndex: "description",
@@ -1219,7 +2084,6 @@ var _excluded = ["searchTerm", "isNewTemplatePaneOpen", "setIsNewTemplatePaneOpe
 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,
     isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen,
@@ -1257,28 +2121,27 @@ var Templates = function Templates(_ref) {
   }, [searchTerm]);
   var _useFetchTemplates = useFetchTemplates(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, pageProperties), filters), {}, {
       searchTerm: debouncedSearchTerm.trim()
-    }), {
-      onSuccess: function onSuccess(_ref2) {
-        var templates = _ref2.templates;
-        handleEmptyPage(templates, pageProperties, handlePageChange);
-      }
-    }),
-    _useFetchTemplates$da = _useFetchTemplates.data,
-    _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
-    _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
-    templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3,
-    _useFetchTemplates$da4 = _useFetchTemplates$da2.totalCount,
-    totalCount = _useFetchTemplates$da4 === void 0 ? 0 : _useFetchTemplates$da4,
+    })),
+    data = _useFetchTemplates.data,
     isTemplateLoading = _useFetchTemplates.isLoading;
+  var _ref2 = data || {},
+    _ref2$templates = _ref2.templates,
+    templates = _ref2$templates === void 0 ? [] : _ref2$templates,
+    _ref2$totalCount = _ref2.totalCount,
+    totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
+  useEffect(function () {
+    if (data) {
+      handleEmptyPage(data === null || data === void 0 ? void 0 : data.templates, pageProperties, handlePageChange);
+    }
+  }, [data]);
   var _useDeleteTemplate = useDeleteTemplate(),
     deleteTemplate = _useDeleteTemplate.mutate,
-    isDeleting = _useDeleteTemplate.isLoading;
+    isDeleting = _useDeleteTemplate.isPending;
   useEffect(function () {
-    if (isEmpty(selectedTemplate)) {
-      setIsDeleteAlertOpen(false);
-      setIsEditPaneOpen(false);
-      setIsShowPaneOpen(false);
-    }
+    if (!isEmpty(selectedTemplate)) return;
+    setIsDeleteAlertOpen(false);
+    setIsEditPaneOpen(false);
+    setIsShowPaneOpen(false);
   }, [selectedTemplate]);
   var onEditClick = function onEditClick(event, template) {
     event.stopPropagation();
@@ -1300,62 +2163,64 @@ var Templates = function Templates(_ref) {
     });
     setSelectedTemplate({});
   };
-  var entity = (_t = t("neetoApprovals.common.template", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isTemplateLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Table, {
-    rowData: templates,
-    setIsPaneOpen: setIsNewTemplatePaneOpen,
-    columnData: columnData,
-    entity: entity,
-    filters: filters,
-    handlePageChange: handlePageChange,
-    helpDocUrl: helpDocUrl,
-    onDeleteClick: onDeleteClick,
-    onEditClick: onEditClick,
-    onRowClick: onRowClick,
-    pageProperties: pageProperties,
-    searchTerm: searchTerm,
-    setFilters: setFilters,
-    totalCount: totalCount
-  }), /*#__PURE__*/React.createElement(Create, _extends({
-    isOpen: isNewTemplatePaneOpen,
-    onClose: function onClose() {
-      return setIsNewTemplatePaneOpen(false);
-    }
-  }, otherProps)), /*#__PURE__*/React.createElement(Edit, _extends({
-    isOpen: isEditPaneOpen,
-    setTemplate: setSelectedTemplate,
-    template: selectedTemplate
-  }, otherProps, {
-    onClose: function onClose() {
-      return setIsEditPaneOpen(false);
-    }
-  })), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: isDeleteAlertOpen,
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("neetoApprovals.buttons.delete"),
-    message: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoApprovals.alerts.deleting_",
-      values: {
-        what: (_t2 = t("neetoApprovals.common.template", SINGULAR)) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase(),
-        name: selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name
+  var entity = t("neetoApprovals.common.template", PLURAL);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [isTemplateLoading ? /*#__PURE__*/jsx(PageLoader, {}) : /*#__PURE__*/jsx(Table, {
+      columnData: columnData,
+      entity: entity,
+      filters: filters,
+      handlePageChange: handlePageChange,
+      helpDocUrl: helpDocUrl,
+      onDeleteClick: onDeleteClick,
+      onEditClick: onEditClick,
+      onRowClick: onRowClick,
+      pageProperties: pageProperties,
+      searchTerm: searchTerm,
+      setFilters: setFilters,
+      totalCount: totalCount,
+      rowData: templates,
+      setIsPaneOpen: setIsNewTemplatePaneOpen
+    }), /*#__PURE__*/jsx(Create, _objectSpread$5({
+      isOpen: isNewTemplatePaneOpen,
+      onClose: function onClose() {
+        return setIsNewTemplatePaneOpen(false);
       }
-    }),
-    title: t("neetoApprovals.common.delete_", {
-      what: (_t3 = t("neetoApprovals.common.template", SINGULAR)) === null || _t3 === void 0 ? void 0 : _t3.toLocaleLowerCase()
-    }),
-    onClose: function onClose() {
-      return setSelectedTemplate({});
-    },
-    onSubmit: function onSubmit() {
-      return handleDelete(selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id);
-    }
-  }), /*#__PURE__*/React.createElement(TemplateDetails, {
-    isOpen: isShowPaneOpen,
-    template: selectedTemplate,
-    onClose: function onClose() {
-      return setSelectedTemplate({});
-    }
-  }));
+    }, otherProps)), /*#__PURE__*/jsx(Edit, _objectSpread$5(_objectSpread$5({
+      isOpen: isEditPaneOpen,
+      setTemplate: setSelectedTemplate,
+      template: selectedTemplate
+    }, otherProps), {}, {
+      onClose: function onClose() {
+        return setIsEditPaneOpen(false);
+      }
+    })), /*#__PURE__*/jsx(Alert, {
+      isOpen: isDeleteAlertOpen,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoApprovals.buttons.delete"),
+      message: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoApprovals.alerts.deleting_",
+        values: {
+          what: t("neetoApprovals.common.template", SINGULAR),
+          name: selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name
+        }
+      }),
+      title: t("neetoApprovals.common.delete_", {
+        what: t("neetoApprovals.common.template", SINGULAR)
+      }),
+      onClose: function onClose() {
+        return setSelectedTemplate({});
+      },
+      onSubmit: function onSubmit() {
+        return handleDelete(selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id);
+      }
+    }), /*#__PURE__*/jsx(TemplateDetails, {
+      isOpen: isShowPaneOpen,
+      template: selectedTemplate,
+      onClose: function onClose() {
+        return setSelectedTemplate({});
+      }
+    })]
+  });
 };
 
 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; }
@@ -1367,16 +2232,16 @@ var createRoutes = function createRoutes(_ref) {
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen;
   return [{
     component: function component() {
-      return /*#__PURE__*/React.createElement(Templates, _objectSpread$4({
+      return /*#__PURE__*/jsx(Templates, _objectSpread$4({}, _objectSpread$4({
         isNewTemplatePaneOpen: isNewTemplatePaneOpen,
         searchTerm: searchTerm,
         setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
-      }, config));
+      }, config)));
     },
     path: "".concat(config.approvalsPath).concat(routes.templates.index),
     actionBlock: function actionBlock() {
       var _t;
-      return /*#__PURE__*/React.createElement(Button, {
+      return /*#__PURE__*/jsx(Button, {
         "data-cy": "neeto-approvals-templates-add-new-button",
         label: t$1("neetoApprovals.common.addNew_", {
           what: (_t = t$1("neetoApprovals.common.template", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
@@ -1391,12 +2256,12 @@ var createRoutes = function createRoutes(_ref) {
     })
   }, {
     component: function component() {
-      return /*#__PURE__*/React.createElement(PendingRequests, config);
+      return /*#__PURE__*/jsx(PendingRequests, _objectSpread$4({}, config));
     },
     path: "".concat(config.approvalsPath).concat(routes.pending)
   }, {
     component: function component() {
-      return /*#__PURE__*/React.createElement(History, config);
+      return /*#__PURE__*/jsx(History, _objectSpread$4({}, config));
     },
     path: "".concat(config.approvalsPath).concat(routes.history)
   }];
@@ -1413,7 +2278,7 @@ var Header = function Header(_ref) {
   var currentTab = findBy({
     path: pathname
   }, appRoutes);
-  return /*#__PURE__*/React.createElement(NeetoHeader, {
+  return /*#__PURE__*/jsx(NeetoHeader, {
     actionBlock: currentTab === null || currentTab === void 0 || (_currentTab$actionBlo = currentTab.actionBlock) === null || _currentTab$actionBlo === void 0 ? void 0 : _currentTab$actionBlo.call(currentTab),
     title: t("neetoApprovals.common.approval", PLURAL),
     searchProps: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder) && {
@@ -1434,9 +2299,9 @@ function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 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$3({
+  return useQuery(_objectSpread$3({
+    queryKey: [QUERY_KEYS.VIEWS],
+    queryFn: viewsApi.fetch,
     select: function select(response) {
       return response.data || response;
     }
@@ -1463,17 +2328,19 @@ var Tab = function Tab(_ref) {
     _useFetchViews$data2 = _useFetchViews$data === void 0 ? {} : _useFetchViews$data,
     _useFetchViews$data2$ = _useFetchViews$data2.views,
     views = _useFetchViews$data2$ === void 0 ? {} : _useFetchViews$data2$;
-  return /*#__PURE__*/React.createElement(Tab$1, null, approvalFilterKeys.map(function (filter) {
-    return /*#__PURE__*/React.createElement(Tab$1.Item, {
-      active: isActive(filter),
-      count: views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()],
-      key: filter,
-      label: approvalFilter[filter].label,
-      onClick: function onClick() {
-        return history.push(getRoute(filter));
-      }
-    }, approvalFilter[filter].label, " (", views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()] || 0, ")");
-  }));
+  return /*#__PURE__*/jsx(NeetoUITab, {
+    children: approvalFilterKeys.map(function (filter) {
+      return /*#__PURE__*/jsxs(NeetoUITab.Item, {
+        active: isActive(filter),
+        count: views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()],
+        label: approvalFilter[filter].label,
+        onClick: function onClick() {
+          return history.push(getRoute(filter));
+        },
+        children: [approvalFilter[filter].label, " (", views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()] || 0, ")"]
+      }, filter);
+    })
+  });
 };
 
 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; }
@@ -1493,28 +2360,33 @@ var Approvals = function Approvals(_ref) {
     isNewTemplatePaneOpen: isNewTemplatePaneOpen,
     setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
   });
-  return /*#__PURE__*/React.createElement("div", {
-    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
-  }), /*#__PURE__*/React.createElement(Switch, null, appRoutes.map(function (_ref2) {
-    var path = _ref2.path,
-      component = _ref2.component;
-    return /*#__PURE__*/React.createElement(Route, {
-      exact: true,
-      component: component,
-      path: path,
-      key: path
-    });
-  }), /*#__PURE__*/React.createElement(Redirect, {
-    exact: true,
-    from: config.approvalsPath
-    // eslint-disable-next-line @bigbinary/neeto/use-common-routes
-    ,
-    to: "".concat(config.approvalsPath).concat(routes.pending)
-  }))));
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full overflow-y-auto",
+    children: /*#__PURE__*/jsxs(Container, {
+      children: [/*#__PURE__*/jsx(Header, _objectSpread$2({}, _objectSpread$2({
+        appRoutes: appRoutes
+      }, config))), /*#__PURE__*/jsx(Tab, {
+        approvalsPath: config.approvalsPath
+      }), /*#__PURE__*/jsxs(Switch, {
+        children: [appRoutes.map(function (_ref2) {
+          var path = _ref2.path,
+            component = _ref2.component;
+          return /*#__PURE__*/createElement(Route, {
+            exact: true,
+            component: component,
+            path: path,
+            key: path
+          });
+        }), /*#__PURE__*/jsx(Redirect, {
+          exact: true,
+          from: config.approvalsPath
+          // eslint-disable-next-line @bigbinary/neeto/use-common-routes
+          ,
+          to: "".concat(config.approvalsPath).concat(routes.pending)
+        })]
+      })]
+    })
+  });
 };
 
 var fetch = function fetch(params) {
@@ -1531,17 +2403,13 @@ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t
 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({
+  return useQuery(_objectSpread$1({
+    queryKey: [QUERY_KEYS.APPROVERS, params],
+    queryFn: function queryFn() {
+      return approversApi.fetch(params);
+    },
     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));
 };
@@ -1620,37 +2488,42 @@ var Form$1 = function Form(_ref) {
     setSelectedTemplateData(template);
     updateMessage();
   }, [template]);
-  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")
-    })
-  }))));
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full space-y-6",
+    children: [/*#__PURE__*/jsx(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__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: "flex space-x-6",
+        children: /*#__PURE__*/jsx(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__*/jsx("div", {
+        className: "space-y-2",
+        children: /*#__PURE__*/jsx(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) {
@@ -1676,38 +2549,38 @@ var Form = function Form(_ref) {
       approverId: values.approver.value
     }, selectedTemplateData, onClose);
   };
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("neetoApprovals.common.add_", {
-    what: t("neetoApprovals.common.approval", SINGULAR)
-  }))), /*#__PURE__*/React.createElement(Form$3, {
-    formikProps: {
-      onSubmit: handleSubmit,
-      initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES,
-      validationSchema: REQUEST_FORM_VALIDATION_SCHEMA
-    }
-  }, function (_ref2) {
-    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,
-      label: t("neetoApprovals.buttons.saveChanges"),
-      loading: isLoading,
-      type: "submit"
-    }), /*#__PURE__*/React.createElement(Button, {
-      label: t("neetoApprovals.buttons.cancel"),
-      style: "text",
-      onClick: onClose
-    })));
-  }));
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: t("neetoApprovals.common.add_", {
+          what: t("neetoApprovals.common.approval", SINGULAR)
+        })
+      })
+    }), /*#__PURE__*/jsxs(FormikForm, {
+      formikProps: {
+        onSubmit: handleSubmit,
+        initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES,
+        validationSchema: REQUEST_FORM_VALIDATION_SCHEMA
+      },
+      children: [/*#__PURE__*/jsx(Pane.Body, {
+        children: /*#__PURE__*/jsx(Form$1, {
+          requestableId: requestableId,
+          selectedTemplateData: selectedTemplateData,
+          setSelectedTemplateData: setSelectedTemplateData
+        })
+      }), /*#__PURE__*/jsx(Pane.Footer, {
+        children: /*#__PURE__*/jsx(ActionBlock, {
+          cancelButtonProps: {
+            onClick: onClose
+          },
+          isSubmitting: isLoading
+        })
+      })]
+    })]
+  });
 };
 
 var show = function show(id) {
@@ -1737,20 +2610,21 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 () {
-    return publicRequestsApi.show(requestId);
-  }, _objectSpread({}, options));
+  return useQuery(_objectSpread({
+    queryKey: [QUERY_KEYS.SHOW_PUBLIC_REQUEST, requestId],
+    queryFn: function queryFn() {
+      return publicRequestsApi.show(requestId);
+    }
+  }, options));
 };
 var useAcceptPendingRequest = function useAcceptPendingRequest(options) {
-  useQueryClient();
   return useMutationWithInvalidation(publicRequestsApi.accept, _objectSpread({
-    keysToInvalidate: [QUERY_KEYS.SHOW_PUBLIC_REQUEST, QUERY_KEYS.REQUESTS, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.SHOW_PUBLIC_REQUEST], [QUERY_KEYS.REQUESTS], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 var useDeclinePendingRequest = function useDeclinePendingRequest(options) {
-  useQueryClient();
   return useMutationWithInvalidation(publicRequestsApi.decline, _objectSpread({
-    keysToInvalidate: [QUERY_KEYS.SHOW_PUBLIC_REQUEST, QUERY_KEYS.REQUESTS, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.SHOW_PUBLIC_REQUEST], [QUERY_KEYS.REQUESTS], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 
@@ -1766,84 +2640,96 @@ var Public = function Public() {
     t = _useTranslation.t;
   var _useFetchPublicReques = useFetchPublicRequest({
       requestId: id
-    }, {
-      onSuccess: function onSuccess(_ref) {
-        var note = _ref.approvalRequest.note;
-        note && setNote(note);
-      }
     }),
-    _useFetchPublicReques2 = _useFetchPublicReques.data,
-    _useFetchPublicReques3 = _useFetchPublicReques2 === void 0 ? {} : _useFetchPublicReques2,
-    _useFetchPublicReques4 = _useFetchPublicReques3.approvalRequest,
-    approvalRequest = _useFetchPublicReques4 === void 0 ? {} : _useFetchPublicReques4,
+    data = _useFetchPublicReques.data,
     isLoading = _useFetchPublicReques.isLoading;
+  var _ref = data || {},
+    _ref$approvalRequest = _ref.approvalRequest,
+    approvalRequest = _ref$approvalRequest === void 0 ? {} : _ref$approvalRequest;
+  useEffect(function () {
+    var _data$approvalRequest;
+    if (data !== null && data !== void 0 && (_data$approvalRequest = data.approvalRequest) !== null && _data$approvalRequest !== void 0 && _data$approvalRequest.note) {
+      setNote(data.approvalRequest.note);
+    }
+  }, [data]);
   var _useAcceptPendingRequ = useAcceptPendingRequest(),
     acceptPendingRequest = _useAcceptPendingRequ.mutate,
-    isAccepting = _useAcceptPendingRequ.isLoading;
+    isAccepting = _useAcceptPendingRequ.isPending;
   var _useDeclinePendingReq = useDeclinePendingRequest(),
     declinePendingRequest = _useDeclinePendingReq.mutate,
-    isDeclining = _useDeclinePendingReq.isLoading;
+    isDeclining = _useDeclinePendingReq.isPending;
   var calloutStyle = approvalRequest.status === STATUSES.approved ? "success" : "danger";
   var hideTextArea = approvalRequest.status !== STATUSES.pending && isEmpty(note);
   if (isLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "h-screen items-center justify-center"
-    }, /*#__PURE__*/React.createElement(PageLoader, null));
-  }
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(NeetoHeader, {
-    title: t("neetoApprovals.common.approval", PLURAL)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex h-screen w-full flex-col items-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-shadow-s w-2/5 rounded border p-6"
-  }, approvalRequest ? /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-6"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, approvalRequest.title), /*#__PURE__*/React.createElement(EditorContent, {
-    content: approvalRequest.message
-  }), !hideTextArea && /*#__PURE__*/React.createElement(Textarea, {
-    label: t("neetoApprovals.common.note"),
-    placeholder: t("neetoApprovals.inputs.placeholders.add_", {
-      what: (_t = t("neetoApprovals.common.note")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    }),
-    value: note,
-    disabled: approvalRequest.status !== STATUSES.pending,
-    onChange: withEventTargetValue(setNote)
-  }), approvalRequest.status === STATUSES.pending ? /*#__PURE__*/React.createElement("div", {
-    className: "mx-auto mt-8 flex space-x-6"
-  }, /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoApprovals.buttons.approve"),
-    onClick: function onClick() {
-      return acceptPendingRequest({
-        id: approvalRequest.id,
-        note: note
-      });
-    },
-    loading: isAccepting
-  }), /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoApprovals.buttons.decline"),
-    onClick: function onClick() {
-      return declinePendingRequest({
-        id: approvalRequest.id,
-        note: note
-      });
-    },
-    style: "secondary",
-    loading: isDeclining
-  })) : /*#__PURE__*/React.createElement(Callout, {
-    style: calloutStyle
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body1"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoApprovals.typography.approvalRequest",
-    values: {
-      status: approvalRequest.status
-    }
-  })))) : /*#__PURE__*/React.createElement(Typography, {
-    style: "h4",
-    className: "text-center"
-  }, t("neetoApprovals.common.notFound")))));
+    return /*#__PURE__*/jsx("div", {
+      className: "h-screen items-center justify-center",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
+  }
+  return /*#__PURE__*/jsxs(Container, {
+    children: [/*#__PURE__*/jsx(NeetoHeader, {
+      title: t("neetoApprovals.common.approval", PLURAL)
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex h-screen w-full flex-col items-center",
+      children: /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-shadow-s w-2/5 rounded border p-6",
+        children: approvalRequest ? /*#__PURE__*/jsxs("div", {
+          className: "flex w-full flex-col space-y-6",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h2",
+            children: approvalRequest.title
+          }), /*#__PURE__*/jsx(EditorContent, {
+            content: approvalRequest.message
+          }), !hideTextArea && /*#__PURE__*/jsx(Textarea, {
+            label: t("neetoApprovals.common.note"),
+            placeholder: t("neetoApprovals.inputs.placeholders.add_", {
+              what: (_t = t("neetoApprovals.common.note")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
+            }),
+            value: note,
+            disabled: approvalRequest.status !== STATUSES.pending,
+            onChange: withEventTargetValue(setNote)
+          }), approvalRequest.status === STATUSES.pending ? /*#__PURE__*/jsxs("div", {
+            className: "mx-auto mt-8 flex space-x-6",
+            children: [/*#__PURE__*/jsx(Button, {
+              label: t("neetoApprovals.buttons.approve"),
+              onClick: function onClick() {
+                return acceptPendingRequest({
+                  id: approvalRequest.id,
+                  note: note
+                });
+              },
+              loading: isAccepting
+            }), /*#__PURE__*/jsx(Button, {
+              label: t("neetoApprovals.buttons.decline"),
+              onClick: function onClick() {
+                return declinePendingRequest({
+                  id: approvalRequest.id,
+                  note: note
+                });
+              },
+              style: "secondary",
+              loading: isDeclining
+            })]
+          }) : /*#__PURE__*/jsx(Callout, {
+            style: calloutStyle,
+            children: /*#__PURE__*/jsx(Typography, {
+              style: "body1",
+              children: /*#__PURE__*/jsx(Trans, {
+                i18nKey: "neetoApprovals.typography.approvalRequest",
+                values: {
+                  status: approvalRequest.status
+                }
+              })
+            })
+          })]
+        }) : /*#__PURE__*/jsx(Typography, {
+          style: "h4",
+          className: "text-center",
+          children: t("neetoApprovals.common.notFound")
+        })
+      })
+    })]
+  });
 };
 
 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}}