@bigbinary/neeto-molecules 4.0.92 → 4.0.94

package/dist/cjs/AuditLogs.js

@@ -1,307 +1,59 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var NoData = require('@bigbinary/neetoui/NoData');
-var Table = require('@bigbinary/neetoui/Table');
-var Typography = require('@bigbinary/neetoui/Typography');
 var Spinner = require('@bigbinary/neetoui/Spinner');
+var Pagination = require('@bigbinary/neetoui/Pagination');
 var reactI18next = require('react-i18next');
 var Container = require('./Container.js');
 var Header = require('./Header.js');
-var SubHeader = require('./SubHeader.js');
-var TableWrapper = require('./TableWrapper.js');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var Pane = require('@bigbinary/neetoui/Pane');
-var jsxRuntime = require('react/jsx-runtime');
-var i18next = require('i18next');
+var classnames = require('classnames');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var Button = require('@bigbinary/neetoui/Button');
+var Typography = require('@bigbinary/neetoui/Typography');
+var User = require('@bigbinary/neeto-icons/User');
+var UserAdd = require('@bigbinary/neeto-icons/UserAdd');
+var UserCircle = require('@bigbinary/neeto-icons/UserCircle');
+var UserRemove = require('@bigbinary/neeto-icons/UserRemove');
+var UserSettings = require('@bigbinary/neeto-icons/UserSettings');
+var CustomDomain = require('@bigbinary/neeto-icons/CustomDomain');
+var GoogleCalendar = require('@bigbinary/neeto-icons/misc/GoogleCalendar');
+var Zoom = require('@bigbinary/neeto-icons/misc/Zoom');
+var Stripe = require('@bigbinary/neeto-icons/misc/Stripe');
+var StripeTypeface = require('@bigbinary/neeto-icons/misc/StripeTypeface');
+var ramda = require('ramda');
+var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
+var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
-require('classnames');
+var React = require('react');
 require('./index-JY2zVpnv.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 require('./inject-css-B6qYtOJe.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('./Breadcrumbs.js');
 require('@bigbinary/neeto-commons-frontend/utils/general');
 require('react-router-dom');
 require('./HelpPopover.js');
 require('@bigbinary/neeto-icons/Help');
+require('@bigbinary/neetoui/Button');
 require('@bigbinary/neetoui/Popover');
 require('./MoreDropdown.js');
 require('@bigbinary/neeto-icons/MenuHorizontal');
 require('@bigbinary/neeto-icons/MenuVertical');
 require('@bigbinary/neetoui/Dropdown');
 require('@bigbinary/neetoui/Tooltip');
-require('ramda');
 require('./Search.js');
+require('@babel/runtime/helpers/slicedToArray');
 require('@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce');
 require('@bigbinary/neeto-commons-frontend/react-utils/useQueryParams');
 require('@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect');
 require('@bigbinary/neeto-icons/Search');
 require('@bigbinary/neetoui/Input');
-require('@bigbinary/neeto-icons/Column');
-require('./Columns-DHPNrFgq.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@dnd-kit/core');
-require('@dnd-kit/sortable');
-require('@bigbinary/neetoui/Checkbox');
-require('@bigbinary/neetoui/Label');
-require('@bigbinary/neeto-icons/Reorder');
-require('@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation');
-require('@bigbinary/neeto-icons/Download');
-require('@bigbinary/neeto-filters-frontend/Filters');
-require('@bigbinary/neeto-icons/Filter');
-
-var LabelledDetail = function LabelledDetail(_ref) {
-  var label = _ref.label,
-    value = _ref.value;
-  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
-    className: "mb-4",
-    style: "body2",
-    children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-      components: {
-        strong: /*#__PURE__*/jsxRuntime.jsx("strong", {})
-      },
-      i18nKey: "neetoMolecules.auditLogs.additionalDetails.".concat(label),
-      values: {
-        value: value
-      }
-    })
-  });
-};
-
-var DATE_FORMATS = {
-  "%d/%m/%Y": "DD/MM/YYYY",
-  "%m/%d/%Y": "MM/DD/YYYY",
-  "%Y/%m/%d": "YYYY/MM/DD"
-};
-var DETAILS_KEYS = {
-  AFFECTED_EMAIL: "affectedEmail",
-  ERROR_MESSAGE: "errorMessage",
-  NAME: "name",
-  ORGANIZATION_ROLE: "organizationRole",
-  GENERIC_DETAILS: "details",
-  ADDED_PERMISSIONS: "addedPermissions",
-  REMOVED_PERMISSIONS: "removedPermissions"
-};
-var EMAILS_TABLE_COLUMN_DATA = [{
-  title: i18next.t("neetoMolecules.auditLogs.details.emails.title"),
-  key: "email",
-  dataIndex: "email"
-}];
-var CHANGELOG_COLUMN_DATA = [{
-  title: i18next.t("neetoMolecules.auditLogs.details.changelog.field"),
-  key: "field",
-  dataIndex: "field",
-  ellipsis: false
-}, {
-  title: i18next.t("neetoMolecules.auditLogs.details.changelog.from"),
-  key: "from",
-  dataIndex: "from",
-  width: "38%",
-  ellipsis: false
-}, {
-  title: i18next.t("neetoMolecules.auditLogs.details.changelog.to"),
-  key: "to",
-  dataIndex: "to",
-  width: "38%",
-  ellipsis: false
-}];
-
-var formatToFromValue = function formatToFromValue(value) {
-  if (value === true) {
-    return i18next.t("neetoMolecules.auditLogs.details.changelog.true");
-  }
-  if (value === false) {
-    return i18next.t("neetoMolecules.auditLogs.details.changelog.false");
-  }
-  if (value === null) return "-";
-  return value;
-};
-var transformDateFormat = function transformDateFormat(rawDateFormat) {
-  return DATE_FORMATS[rawDateFormat];
-};
-var getFormattedValue = function getFormattedValue(field, value) {
-  return field === "dateFormat" ? transformDateFormat(value) : formatToFromValue(value);
-};
-var formatEmails = function formatEmails(emails) {
-  return emails.map(function (email) {
-    return {
-      email: email
-    };
-  });
-};
-var formatChangeLog = function formatChangeLog(changes) {
-  return Object.entries(changes).map(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      field = _ref2[0],
-      _ref2$ = _ref2[1],
-      from = _ref2$.from,
-      to = _ref2$.to;
-    var formattedField = neetoCist._humanize(field);
-    return {
-      field: formattedField,
-      from: getFormattedValue(field, from),
-      to: getFormattedValue(field, to)
-    };
-  });
-};
-var getFullName = function getFullName(firstName) {
-  var lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  return "".concat(firstName, " ").concat(lastName).trim();
-};
-var getLabel = function getLabel(_ref3) {
-  var firstName = _ref3.firstName,
-    lastName = _ref3.lastName,
-    organizationRole = _ref3.organizationRole;
-  if (firstName || lastName) {
-    return DETAILS_KEYS.NAME;
-  }
-  if (organizationRole) {
-    return DETAILS_KEYS.ORGANIZATION_ROLE;
-  }
-  return DETAILS_KEYS.GENERIC_DETAILS;
-};
-var formatPermissionsChangeLog = function formatPermissionsChangeLog(_ref4) {
-  var from = _ref4.from,
-    to = _ref4.to;
-  return [{
-    field: i18next.t("neetoMolecules.auditLogs.details.permissions.description"),
-    from: getFormattedValue("description", from),
-    to: getFormattedValue("description", to)
-  }];
-};
-var transformPermissions = function transformPermissions(permissions) {
-  return permissions.map(function (permission) {
-    var humanizedParts = permission.split(".").map(neetoCist._humanize);
-    return humanizedParts.join(" - ");
-  }).join(", ");
-};
-
-var GenericChangelog = function GenericChangelog(_ref) {
-  var details = _ref.details;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _details$email = details.email,
-    email = _details$email === void 0 ? "" : _details$email,
-    _details$changes = details.changes,
-    changes = _details$changes === void 0 ? {} : _details$changes,
-    _details$errorMessage = details.errorMessage,
-    errorMessage = _details$errorMessage === void 0 ? "" : _details$errorMessage,
-    status = details.status;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    children: [/*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-      label: DETAILS_KEYS.AFFECTED_EMAIL,
-      value: email
-    }), neetoCist.isNotEmpty(changes) && status === "success" ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-full min-w-0 max-w-full",
-      children: /*#__PURE__*/jsxRuntime.jsx(Table, {
-        columnData: CHANGELOG_COLUMN_DATA,
-        enableColumnFreeze: false,
-        enableColumnResize: false,
-        rowData: formatChangeLog(changes),
-        scroll: {
-          x: "100%"
-        }
-      })
-    }) : /*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-      label: DETAILS_KEYS.ERROR_MESSAGE,
-      value: errorMessage || t("neetoMolecules.auditLogs.noError")
-    })]
-  });
-};
-
-var PermissionsChangelog = function PermissionsChangelog(_ref) {
-  var details = _ref.details;
-  var _details$description = details.description,
-    description = _details$description === void 0 ? {} : _details$description,
-    _details$organization = details.organizationRole,
-    organizationRole = _details$organization === void 0 ? "" : _details$organization,
-    _details$addedPermiss = details.addedPermissions,
-    addedPermissions = _details$addedPermiss === void 0 ? [] : _details$addedPermiss,
-    _details$removedPermi = details.removedPermissions,
-    removedPermissions = _details$removedPermi === void 0 ? [] : _details$removedPermi;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    children: [/*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-      label: DETAILS_KEYS.ORGANIZATION_ROLE,
-      value: organizationRole
-    }), neetoCist.isNotEmpty(addedPermissions) && /*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-      label: DETAILS_KEYS.ADDED_PERMISSIONS,
-      value: transformPermissions(addedPermissions)
-    }), neetoCist.isNotEmpty(removedPermissions) && /*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-      label: DETAILS_KEYS.REMOVED_PERMISSIONS,
-      value: transformPermissions(removedPermissions)
-    }), neetoCist.isNotEmpty(description) && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-full min-w-0 max-w-full",
-      children: /*#__PURE__*/jsxRuntime.jsx(Table, {
-        columnData: CHANGELOG_COLUMN_DATA,
-        enableColumnFreeze: false,
-        enableColumnResize: false,
-        rowData: formatPermissionsChangeLog(description),
-        scroll: {
-          x: "100%"
-        }
-      })
-    })]
-  });
-};
-
-var Emails = function Emails(_ref) {
-  var details = _ref.details;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _details$emails = details.emails,
-    emails = _details$emails === void 0 ? [] : _details$emails,
-    status = details.status,
-    _details$errorMessage = details.errorMessage,
-    errorMessage = _details$errorMessage === void 0 ? "" : _details$errorMessage;
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: neetoCist.isNotEmpty(emails) && status === "success" ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-full min-w-0 max-w-full",
-      children: /*#__PURE__*/jsxRuntime.jsx(Table, {
-        columns: EMAILS_TABLE_COLUMN_DATA,
-        enableColumnFreeze: false,
-        enableColumnResize: false,
-        loading: false,
-        rowData: formatEmails(emails),
-        scroll: {
-          x: "100%"
-        }
-      })
-    }) : /*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-      label: DETAILS_KEYS.ERROR_MESSAGE,
-      value: errorMessage || t("neetoMolecules.auditLogs.noError")
-    })
-  });
-};
-
-var GenericDetails = function GenericDetails(_ref) {
-  var details = _ref.details;
-  var _details$firstName = details.firstName,
-    firstName = _details$firstName === void 0 ? "" : _details$firstName,
-    _details$lastName = details.lastName,
-    lastName = _details$lastName === void 0 ? "" : _details$lastName,
-    _details$organization = details.organizationRole,
-    organizationRole = _details$organization === void 0 ? "" : _details$organization;
-  var name = getFullName(firstName, lastName);
-  var label = getLabel({
-    firstName: firstName,
-    lastName: lastName,
-    organizationRole: organizationRole
-  });
-  var value = name || organizationRole || JSON.stringify(details);
-  return /*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-    label: label,
-    value: value
-  });
-};
 
+var _AUDIT_ICON_MAP;
 var AUDIT_LOGS_QUERY_KEY = "audit-logs";
 var ACTIONS = {
   INVITED_USERS: "invitedUsers",
@@ -311,131 +63,345 @@ var ACTIONS = {
   UPDATED_USER_PROFILE: "updatedUserProfile",
   CREATED_ROLE: "createdRole",
   UPDATED_ROLE: "updatedRole",
-  DELETED_ROLE: "deletedRole"
+  DELETED_ROLE: "deletedRole",
+  CONNECTED_GOOGLE_CALENDER: "connectedGoogleCalendar",
+  DISCONNECTED_GOOGLE_CALENDER: "disconnectedGoogleCalendar",
+  CONNECTED_STRIPE_ACCOUNT: "connectedStripeAccount",
+  DISCONNECTED_STRIPE_ACCOUNT: "disconnectedStripeAccount",
+  CONNECTED_ZOOM_INTEGRATION: "connectedZoomIntegration",
+  DISCONNECTED_ZOOM_INTEGRATION: "disconnectedZoomIntegration",
+  CONNECTED_CUSTOM_DOMAIN: "connectedCustomDomain"
 };
-var ADDITIONAL_DETAILS_KEYS = {
-  ACTION: "action",
-  PERFORMED_BY: "performedBy",
-  PERFORMED_AT: "performedAt",
-  PRODUCT: "product"
+var AUDIT_ICON_MAP = (_AUDIT_ICON_MAP = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_AUDIT_ICON_MAP, ACTIONS.INVITED_USERS, UserCircle), ACTIONS.USER_SIGNED_UP, UserAdd), ACTIONS.UPDATED_USER, User), ACTIONS.BULK_UPDATE_USERS, User), ACTIONS.UPDATED_USER_PROFILE, UserSettings), ACTIONS.CREATED_ROLE, UserAdd), ACTIONS.UPDATED_ROLE, UserSettings), ACTIONS.DELETED_ROLE, UserRemove), ACTIONS.CONNECTED_GOOGLE_CALENDER, GoogleCalendar), ACTIONS.DISCONNECTED_GOOGLE_CALENDER, GoogleCalendar), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_AUDIT_ICON_MAP, ACTIONS.CONNECTED_STRIPE_ACCOUNT, StripeTypeface), ACTIONS.DISCONNECTED_STRIPE_ACCOUNT, Stripe), ACTIONS.CONNECTED_ZOOM_INTEGRATION, Zoom), ACTIONS.DISCONNECTED_ZOOM_INTEGRATION, Zoom), ACTIONS.CONNECTED_CUSTOM_DOMAIN, CustomDomain));
+var AUDIT_LOGS_PAGE_SIZE = 12;
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).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 Trans = function Trans(_ref) {
+  var i18nKey = _ref.i18nKey,
+    _ref$additionalValues = _ref.additionalValues,
+    additionalValues = _ref$additionalValues === void 0 ? {} : _ref$additionalValues,
+    _ref$additionalCompon = _ref.additionalComponents,
+    additionalComponents = _ref$additionalCompon === void 0 ? {} : _ref$additionalCompon;
+  return /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+    i18nKey: i18nKey,
+    components: _objectSpread$3({
+      Code: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "neeto-ui-rounded-md neeto-ui-bg-gray-100 p-1",
+        component: "code",
+        style: "body3"
+      }),
+      Semibold: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "n inline-block text-sm font-medium",
+        component: "p"
+      })
+    }, additionalComponents),
+    values: _objectSpread$3({
+      productSuffix: initializers.globalProps.appName
+    }, additionalValues)
+  });
 };
-var DETAILS_COMPONENT_MAP = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ACTIONS.INVITED_USERS, Emails), ACTIONS.BULK_UPDATE_USERS, Emails), ACTIONS.USER_SIGNED_UP, GenericDetails), ACTIONS.UPDATED_USER, GenericChangelog), ACTIONS.UPDATED_USER_PROFILE, GenericChangelog), ACTIONS.CREATED_ROLE, GenericDetails), ACTIONS.UPDATED_ROLE, PermissionsChangelog), ACTIONS.DELETED_ROLE, GenericDetails);
 
-var _excluded$1 = ["status"];
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var formatChangedFields = function formatChangedFields(changes) {
+  var fields = Object.keys(changes).map(function (field, index) {
+    var change = changes[field];
+    var element;
+    if (change && neetoCist.isPresent(change.from)) {
+      element = /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          i18nKey: "neetoMolecules.auditLogs.text.updatedFieldsWithPreviousValue",
+          additionalValues: {
+            field: neetoCist.humanize(field),
+            from: change.from,
+            to: change.to
+          }
+        })
+      }, field);
+    } else {
+      element = /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            field: neetoCist.humanize(field),
+            to: change.to
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.updatedFieldsWithNewValue"
+        })
+      }, field);
+    }
+    return index > 0 ? [/*#__PURE__*/jsxRuntime.jsx("span", {
+      children: ", "
+    }, "sep-".concat(field)), element] : element;
+  });
+  return fields.flat();
+};
 var transformAction = function transformAction(action) {
   return neetoCist.snakeToCamelCase(action.replace("audit_logs.organization.", ""));
 };
-var transformLogsForTable = function transformLogsForTable(logs) {
-  return logs.map(function (_ref) {
-    var id = _ref.id,
-      action = _ref.key,
-      _ref$metadata = _ref.metadata,
-      status = _ref$metadata.status,
-      restOfMetadata = _objectWithoutProperties(_ref$metadata, _excluded$1),
-      _ref$performer$name = _ref.performer.name,
-      performedBy = _ref$performer$name === void 0 ? "" : _ref$performer$name,
-      performedAt = _ref.updatedAt;
-    var transformedAction = transformAction(action);
-    var formattedPerformedAt = utils.dateFormat.dateTime(performedAt);
-    return {
-      id: id,
-      action: transformedAction,
-      status: neetoCist.capitalize(status),
-      performedAt: formattedPerformedAt,
-      performedBy: performedBy,
-      additionalDetails: _objectSpread$2(_objectSpread$2({}, restOfMetadata), {}, {
-        action: transformedAction,
-        performedAt: formattedPerformedAt,
-        performedBy: performedBy,
-        status: status
-      })
-    };
-  });
-};
-var getColumnData = function getColumnData(handleClick) {
-  return [{
-    title: i18next.t("neetoMolecules.auditLogs.table.headers.action", constants.SINGULAR),
-    key: "action",
-    dataIndex: "action",
-    render: function render(action, _ref2) {
-      var additionalDetails = _ref2.additionalDetails;
-      return /*#__PURE__*/jsxRuntime.jsx(Button, {
-        "data-testid": "action-link-button",
-        label: i18next.t("neetoMolecules.auditLogs.actions.".concat(action)),
-        style: "link",
-        onClick: function onClick() {
-          return handleClick(additionalDetails);
+var constructAuditLogText = function constructAuditLogText(_ref) {
+  var action = _ref.action,
+    performedBy = _ref.performedBy,
+    _ref$emails = _ref.emails,
+    emails = _ref$emails === void 0 ? [] : _ref$emails,
+    firstName = _ref.firstName,
+    lastName = _ref.lastName,
+    organizationRole = _ref.organizationRole,
+    email = _ref.email,
+    _ref$changes = _ref.changes,
+    changes = _ref$changes === void 0 ? {} : _ref$changes,
+    status = _ref.status,
+    message = _ref.message,
+    errorMessage = _ref.errorMessage,
+    addedPermissions = _ref.addedPermissions;
+  switch (action) {
+    case ACTIONS.INVITED_USERS:
+      {
+        if (status === "success" && neetoCist.isNotEmpty(emails)) {
+          var emailList = emails.join(", ");
+          return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+            additionalValues: {
+              performedBy: performedBy,
+              emailList: emailList
+            },
+            i18nKey: "neetoMolecules.auditLogs.text.invitedUsers"
+          });
         }
-      });
-    },
-    width: 200
-  }, {
-    title: i18next.t("neetoMolecules.auditLogs.table.headers.status"),
-    key: "status",
-    dataIndex: "status",
-    width: 150
-  }, {
-    title: i18next.t("neetoMolecules.auditLogs.table.headers.performedBy"),
-    key: "performedBy",
-    dataIndex: "performedBy",
-    width: 160
-  }, {
-    title: i18next.t("neetoMolecules.auditLogs.table.headers.performedAt"),
-    key: "performedAt",
-    dataIndex: "performedAt",
-    width: 160
-  }];
-};
-var getComponentForDetail = function getComponentForDetail(action) {
-  return DETAILS_COMPONENT_MAP[action] || GenericDetails;
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy,
+            errorMessage: errorMessage
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.invitedUsersFailed"
+        });
+      }
+    case ACTIONS.USER_SIGNED_UP:
+      {
+        var name = [firstName, lastName].filter(Boolean).join(" ");
+        var userIdentifier = name || organizationRole || email || "User";
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            userIdentifier: userIdentifier
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.userSignedUp"
+        });
+      }
+    case ACTIONS.UPDATED_USER:
+      {
+        var changedFields = formatChangedFields(changes);
+        var affectedUser = email || "user";
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalComponents: {
+            ChangedFields: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: changedFields
+            })
+          },
+          additionalValues: {
+            performedBy: performedBy,
+            affectedUser: affectedUser,
+            changedFields: changedFields
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.updatedUser"
+        });
+      }
+    case ACTIONS.BULK_UPDATE_USERS:
+      {
+        if (status === "success" && neetoCist.isNotEmpty(emails)) {
+          var _emailList = emails.join(", ");
+          return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+            additionalValues: {
+              performedBy: performedBy,
+              emailList: _emailList,
+              message: message
+            },
+            i18nKey: "neetoMolecules.auditLogs.text.bulkUpdateUsers"
+          });
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy,
+            errorMessage: errorMessage
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.bulkUpdateUsersFailed"
+        });
+      }
+    case ACTIONS.UPDATED_USER_PROFILE:
+      {
+        var _changedFields = formatChangedFields(changes);
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalComponents: {
+            ChangedFields: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: _changedFields
+            })
+          },
+          additionalValues: {
+            performedBy: performedBy
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.updatedUserProfile"
+        });
+      }
+    case ACTIONS.CREATED_ROLE:
+      {
+        var roleName = organizationRole || "role";
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy,
+            roleName: roleName
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.createdRole"
+        });
+      }
+    case ACTIONS.UPDATED_ROLE:
+      {
+        var _roleName = organizationRole || "role";
+        var permissionsArray = ramda.values(addedPermissions).map(function (permission) {
+          return neetoCist.humanize(permission.split(".")[1]);
+        });
+        var addedPermissionsText = permissionsArray.join(", ");
+        return (
+          /*#__PURE__*/
+          // Disabling as we're using the same key for both singular and plural cases
+          // eslint-disable-next-line @bigbinary/neeto/no-missing-localization
+          jsxRuntime.jsx(Trans, {
+            i18nKey: "neetoMolecules.auditLogs.text.updatedRole",
+            additionalValues: {
+              performedBy: performedBy,
+              roleName: _roleName,
+              addedPermissionsText: addedPermissionsText,
+              count: permissionsArray.length
+            }
+          })
+        );
+      }
+    case ACTIONS.CONNECTED_GOOGLE_CALENDER:
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          i18nKey: "neetoMolecules.auditLogs.text.connectedGoogleCalender",
+          additionalValues: {
+            performedBy: performedBy,
+            emailAddress: changes.emailAddress
+          }
+        });
+      }
+    case ACTIONS.DISCONNECTED_GOOGLE_CALENDER:
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.disconnectedGoogleCalender"
+        });
+      }
+    case ACTIONS.CONNECTED_STRIPE_ACCOUNT:
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          i18nKey: "neetoMolecules.auditLogs.text.connectedStripeAccount",
+          additionalValues: {
+            performedBy: performedBy,
+            stripeAccountId: changes.stripeAccountId
+          }
+        });
+      }
+    case ACTIONS.DISCONNECTED_STRIPE_ACCOUNT:
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.disconnectedStripeAccount"
+        });
+      }
+    case ACTIONS.CONNECTED_ZOOM_INTEGRATION:
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          i18nKey: "neetoMolecules.auditLogs.text.connectedZoomAccount",
+          additionalValues: {
+            performedBy: performedBy,
+            zoomAccountId: changes.zoomAccountId
+          }
+        });
+      }
+    case ACTIONS.DISCONNECTED_ZOOM_INTEGRATION:
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.disconnectedZoomAccount"
+        });
+      }
+    case ACTIONS.CONNECTED_CUSTOM_DOMAIN:
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy,
+            hostname: changes.hostname
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.connectedCustomDomain"
+        });
+      }
+    case ACTIONS.DELETED_ROLE:
+      {
+        var _roleName2 = organizationRole || "role";
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy,
+            roleName: _roleName2
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.deletedRole"
+        });
+      }
+    default:
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(Trans, {
+          additionalValues: {
+            performedBy: performedBy
+          },
+          i18nKey: "neetoMolecules.auditLogs.text.performedAction"
+        });
+      }
+  }
 };
 
-var _excluded = ["message", "action", "performedBy", "performedAt", "via"];
-var AdditionalDetails = function AdditionalDetails(_ref) {
-  var additionalDetails = _ref.additionalDetails,
-    isOpen = _ref.isOpen,
-    onClose = _ref.onClose;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var message = additionalDetails.message,
-    defaultAction = additionalDetails.action,
-    performedBy = additionalDetails.performedBy,
-    performedAt = additionalDetails.performedAt,
-    product = additionalDetails.via,
-    details = _objectWithoutProperties(additionalDetails, _excluded);
-  var action = message || t("neetoMolecules.auditLogs.actions.".concat(defaultAction));
-  var DetailComponent = getComponentForDetail(defaultAction);
-  return /*#__PURE__*/jsxRuntime.jsxs(Pane, {
-    isOpen: isOpen,
-    onClose: onClose,
-    "data-testid": "additional-details-pane",
-    size: "large",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        style: "h2",
-        children: t("neetoMolecules.auditLogs.additionalDetails.title")
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
-      hasFooter: false,
-      children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-          label: ADDITIONAL_DETAILS_KEYS.ACTION,
-          value: action
-        }), /*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-          label: ADDITIONAL_DETAILS_KEYS.PERFORMED_BY,
-          value: performedBy
-        }), /*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-          label: ADDITIONAL_DETAILS_KEYS.PERFORMED_AT,
-          value: performedAt
-        }), /*#__PURE__*/jsxRuntime.jsx(LabelledDetail, {
-          label: ADDITIONAL_DETAILS_KEYS.PRODUCT,
-          value: neetoCist._capitalize(product)
-        }), /*#__PURE__*/jsxRuntime.jsx(DetailComponent, {
-          details: details
-        })]
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Card = function Card(_ref) {
+  var auditLog = _ref.auditLog,
+    index = _ref.index,
+    totalCount = _ref.totalCount;
+  var key = auditLog.key,
+    metadata = auditLog.metadata,
+    performer = auditLog.performer,
+    updatedAt = auditLog.updatedAt;
+  var action = transformAction(key);
+  var performedBy = (performer === null || performer === void 0 ? void 0 : performer.name) || "";
+  var performedAt = utils.dateFormat.dateTime(updatedAt);
+  var auditText = constructAuditLogText(_objectSpread$2({
+    action: action,
+    performedBy: performedBy
+  }, metadata));
+  var Icon = AUDIT_ICON_MAP[action];
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classnames("align-items-center neeto-ui-border-gray-200 flex w-full gap-x-4 border-b border-l border-r p-3", {
+      "rounded-t-md border-t": index === 0,
+      "rounded-b-md": index === totalCount - 1
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-rounded-full neeto-ui-bg-gray-100 flex size-10 flex-shrink-0 items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        className: "neeto-ui-text-gray-600 flex-shrink-0",
+        size: 22
       })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-y-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        component: "span",
+        lineHeight: "normal",
+        style: "body2",
+        children: auditText
+      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "neeto-ui-text-gray-500 m-0",
+        style: "body3",
+        children: performedAt
+      })]
     })]
   });
 };
@@ -469,14 +435,6 @@ var AuditLogs = function AuditLogs(_ref) {
   var headerProps = _ref.headerProps,
     noDataHelpText = _ref.noDataHelpText,
     noDataTitle = _ref.noDataTitle;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isAdditionalDetailsPaneOpen = _useState2[0],
-    setIsAdditionalDetailsPaneOpen = _useState2[1];
-  var _useState3 = React.useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    additionalDetails = _useState4[0],
-    setAdditionalDetails = _useState4[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useQueryParams = reactUtils.useQueryParams(),
@@ -484,7 +442,8 @@ var AuditLogs = function AuditLogs(_ref) {
     page = _useQueryParams$page === void 0 ? constants.DEFAULT_PAGE_INDEX : _useQueryParams$page;
   var _useFetchAuditLogs = useFetchAuditLogs({
       params: {
-        page: page
+        page: page,
+        pageSize: AUDIT_LOGS_PAGE_SIZE
       }
     }),
     _useFetchAuditLogs$da = _useFetchAuditLogs.data,
@@ -495,54 +454,37 @@ var AuditLogs = function AuditLogs(_ref) {
     totalCount = _useFetchAuditLogs$da4 === void 0 ? 0 : _useFetchAuditLogs$da4,
     isLoading = _useFetchAuditLogs.isLoading,
     isFetching = _useFetchAuditLogs.isFetching;
-  var handleClick = function handleClick(additionalDetails) {
-    setIsAdditionalDetailsPaneOpen(true);
-    setAdditionalDetails(additionalDetails);
-  };
-  var handleClose = function handleClose() {
-    setIsAdditionalDetailsPaneOpen(false);
-    setAdditionalDetails({});
-  };
-  if (isLoading) {
+  if (isLoading || isFetching) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full items-center justify-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
     });
   }
   return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    className: "relative",
     children: [/*#__PURE__*/jsxRuntime.jsx(Header, _objectSpread({
       title: t("neetoMolecules.auditLogs.title")
-    }, headerProps)), /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
-      leftActionBlock: neetoCist.isPresent(auditLogs) && /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        weight: "semibold",
-        children: t("neetoMolecules.auditLogs.logsCount", {
-          count: totalCount
-        })
+    }, headerProps)), neetoCist.isPresent(auditLogs) ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-full",
+      children: auditLogs.map(function (auditLog, index) {
+        return /*#__PURE__*/React.createElement(Card, {
+          auditLog: auditLog,
+          index: index,
+          key: auditLog.id,
+          totalCount: auditLogs.length
+        });
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
-      className: "mt-5",
-      hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE,
-      children: neetoCist.isPresent(auditLogs) ? /*#__PURE__*/jsxRuntime.jsx(Table, {
-        totalCount: totalCount,
-        fixedHeight: true,
-        columnData: getColumnData(handleClick),
-        currentPageNumber: parseInt(page),
-        "data-testid": "audit-logs-table",
-        defaultPageSize: constants.DEFAULT_PAGE_SIZE,
-        enableColumnFreeze: false,
-        loading: isFetching,
-        rowData: transformLogsForTable(auditLogs)
-      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex h-full w-full items-center justify-center",
-        children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
-          helpText: noDataHelpText,
-          title: noDataTitle || t("neetoMolecules.auditLogs.noData")
-        })
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
+        helpText: noDataHelpText,
+        title: noDataTitle || t("neetoMolecules.auditLogs.noData")
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(AdditionalDetails, {
-      additionalDetails: additionalDetails,
-      isOpen: isAdditionalDetailsPaneOpen,
-      onClose: handleClose
+    }), /*#__PURE__*/jsxRuntime.jsx(Pagination, {
+      className: "neeto-ui-bg-white fixed bottom-5 right-6",
+      count: totalCount,
+      pageNo: parseInt(page),
+      pageSize: AUDIT_LOGS_PAGE_SIZE
     })]
   });
 };