@bigbinary/neeto-fields-frontend 1.0.2 → 1.0.3

package/dist/index.js

@@ -13,6 +13,7 @@ import Container from '@bigbinary/neeto-molecules/Container';
 import Header from '@bigbinary/neeto-molecules/Header';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import classnames from 'classnames';
 
@@ -4904,7 +4905,8 @@ var common = {
 	no: "No"
 };
 var titles = {
-	fields: "Fields",
+	field_one: "Field",
+	field_other: "Fields",
 	addField: "Add new field",
 	editField: "Edit field",
 	deleteField: "Delete field ?",
@@ -4912,7 +4914,8 @@ var titles = {
 	kind: "Kind",
 	required: "Required",
 	dropdownOptions: "Dropdown options",
-	regexOptions: "Regex options"
+	regexOptions: "Regex options",
+	filters: "Filters"
 };
 var labels = {
 	addField: "Add new field",
@@ -4925,7 +4928,7 @@ var labels = {
 	addMoreOption: "Add more option",
 	regex: "Regex",
 	regexCondition: "Condition",
-	errorMessage: "Error message",
+	helpMessage: "Help message",
 	isRequired: "Is required",
 	submit: "Submit"
 };
@@ -5051,6 +5054,14 @@ var DISPLAY_KINDS = {
   decimal: t("fields.kinds.decimal"),
   datetime: t("fields.kinds.datetime")
 };
+var FIELD_STATES = {
+  active: "active",
+  inactive: "inactive"
+};
+var DEFAULT_FIELD_STATE_TAXONOMY = {
+  active: "Active",
+  inactive: "Inactive"
+};
 var ALL_KINDS = values(KINDS);
 
 function _extends() {
@@ -5074,6 +5085,12 @@ var FIELD_VALUES_URL = "".concat(NEETO_FIELDS_URL, "/field_values");
 var FIELD_VALUE_URL = "".concat(NEETO_FIELDS_URL, "/field_values/:fieldValueId");
 var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
 var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
+var SINGULAR = {
+  count: 1
+};
+var PLURAL = {
+  count: 2
+};
 
 var fieldUrl = function fieldUrl(fieldId) {
   return buildUrl(FIELD_URL, {
@@ -5084,13 +5101,15 @@ var fetch$1 = function fetch(_ref) {
   var pageSize = _ref.pageSize,
     pageIndex = _ref.pageIndex,
     resourceType = _ref.resourceType,
-    ownerId = _ref.ownerId;
+    ownerId = _ref.ownerId,
+    state = _ref.state;
   return axios.get(FIELDS_URL, {
     params: {
       pageSize: pageSize,
       pageIndex: pageIndex,
       resourceType: resourceType,
-      ownerId: ownerId
+      ownerId: ownerId,
+      state: state
     }
   });
 };
@@ -5131,13 +5150,15 @@ var useFetchFields = function useFetchFields(_ref, options) {
   var pageSize = _ref.pageSize,
     pageIndex = _ref.pageIndex,
     resourceType = _ref.resourceType,
-    ownerId = _ref.ownerId;
-  return useQuery([FIELDS, pageSize, pageIndex, resourceType, ownerId], function () {
+    ownerId = _ref.ownerId,
+    state = _ref.state;
+  return useQuery([FIELDS, pageSize, pageIndex, resourceType, ownerId, state], function () {
     return fieldsApi.fetch({
       pageSize: pageSize,
       pageIndex: pageIndex,
       resourceType: resourceType,
-      ownerId: ownerId
+      ownerId: ownerId,
+      state: state
     });
   }, options);
 };
@@ -5174,6 +5195,13 @@ var useDestroyField = function useDestroyField() {
 
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
+  return options.map(function (option, index) {
+    return _objectSpread$4(_objectSpread$4({}, option), {}, {
+      displayOrder: index
+    });
+  });
+};
 var buildPayload = function buildPayload(_ref) {
   var formValues = _ref.formValues,
     _ref$resourceType = _ref.resourceType,
@@ -5181,10 +5209,11 @@ var buildPayload = function buildPayload(_ref) {
     _ref$ownerId = _ref.ownerId,
     ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
   var kind = formValues.kind.value;
-  return _objectSpread$4(_objectSpread$4({}, pick(["name", "isRequired", "data"], formValues)), {}, {
+  return _objectSpread$4(_objectSpread$4({}, pick(["name", "isRequired"], formValues)), {}, {
     kind: kind,
     resourceType: isEmpty(resourceType) ? undefined : resourceType,
-    ownerId: isEmpty(ownerId) ? undefined : ownerId
+    ownerId: isEmpty(ownerId) ? undefined : ownerId,
+    data: isDropdown(kind) ? arrangeOptionsDisplayOrder(formValues.data) : formValues.data
   });
 };
 var isDropdown = function isDropdown(kind) {
@@ -5213,7 +5242,10 @@ var regexValidationSchema = yup.object().shape({
   condition: yup.string().required(t("validations.regexConditionIsRequired")),
   helpMessage: yup.string().required(t("validations.regexHelpMessageIsRequired"))
 });
-var dropDownOptionsValidationSchema = yup.array().of(yup.string().trim().required(t("validations.fieldOptionIsRequired"))).min(1, t("validations.atLeastFieldOptionIsRequired"));
+var dropDownOptionsValidationSchema = yup.array().of(yup.object().shape({
+  label: yup.string().trim().required(t("validations.fieldOptionIsRequired")),
+  displayOrder: yup.number()
+})).min(1, t("validations.atLeastFieldOptionIsRequired"));
 var FIELD_KINDS = {
   text: {
     value: "text",
@@ -5302,7 +5334,11 @@ var INITIAL_FIELDS = {
   kind: toLabelAndValue("text"),
   isRequired: false
 };
-var DEFAULT_OPTIONS_DATA = [""];
+var DEFAULT_OPTION = {
+  label: "",
+  displayOrder: 0
+};
+var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
 var DEFAULT_REGEX_DATA = {
   regex: "",
   helpMessage: ""
@@ -5332,12 +5368,13 @@ var AdditionalInputs = function AdditionalInputs() {
   var _useFormikContext = useFormikContext(),
     _useFormikContext$val = _useFormikContext.values,
     kind = _useFormikContext$val.kind,
-    options = _useFormikContext$val.data;
+    options = _useFormikContext$val.data,
+    isSystem = _useFormikContext$val.isSystem;
   var removeOption = function removeOption(arrayHelpers, index) {
     return arrayHelpers.remove(index);
   };
   var addOption = function addOption(arrayHelpers) {
-    return arrayHelpers.push("");
+    return arrayHelpers.push(DEFAULT_OPTION);
   };
   if (isDropdown(kind.value)) {
     return /*#__PURE__*/React.createElement(FieldArray, {
@@ -5354,7 +5391,8 @@ var AdditionalInputs = function AdditionalInputs() {
         }, /*#__PURE__*/React.createElement("div", {
           className: "w-full"
         }, /*#__PURE__*/React.createElement(Input, {
-          name: "data.".concat(index),
+          disabled: isSystem,
+          name: "data.".concat(index, ".label"),
           placeholder: t("placeholders.enterAnOption"),
           suffix: options.length > 1 && /*#__PURE__*/React.createElement(Button, {
             icon: Delete,
@@ -5380,11 +5418,13 @@ var AdditionalInputs = function AdditionalInputs() {
     }, /*#__PURE__*/React.createElement(Label, {
       required: true
     }, t("titles.regexOptions")), /*#__PURE__*/React.createElement(Input, {
+      disabled: isSystem,
       label: t("labels.regexCondition"),
       name: "data.condition",
       placeholder: t("placeholders.regexExample")
     }), /*#__PURE__*/React.createElement(Input, {
-      label: t("labels.errorMessage"),
+      disabled: isSystem,
+      label: t("labels.helpMessage"),
       name: "data.helpMessage",
       placeholder: t("placeholders.enterErrorMessage")
     }));
@@ -5398,6 +5438,8 @@ var FieldForm = function FieldForm(_ref) {
   var chosenKind = _ref.chosenKind,
     _ref$kindSelectOption = _ref.kindSelectOptions,
     kindSelectOptions = _ref$kindSelectOption === void 0 ? [] : _ref$kindSelectOption,
+    _ref$isSystem = _ref.isSystem,
+    isSystem = _ref$isSystem === void 0 ? false : _ref$isSystem,
     children = _ref.children;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -5416,11 +5458,13 @@ var FieldForm = function FieldForm(_ref) {
     className: "w-full space-y-4"
   }, /*#__PURE__*/React.createElement(Input, {
     required: true,
+    disabled: isSystem,
     label: t("labels.fieldName"),
     name: "name",
     placeholder: t("placeholders.enterFieldName")
   }), /*#__PURE__*/React.createElement(Select, {
     isSearchable: true,
+    isDisabled: isSystem,
     label: t("labels.fieldKind"),
     name: "kind",
     options: kindSelectOptions,
@@ -5541,6 +5585,7 @@ var Edit = function Edit(_ref) {
     });
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldForm, _extends({
       chosenKind: kind === null || kind === void 0 ? void 0 : kind.value,
+      isSystem: field.isSystem,
       kindSelectOptions: permittedKinds
     }, props)), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
       cancelButtonProps: {
@@ -6066,16 +6111,27 @@ var cleanedRegex = function cleanedRegex(expression) {
   }
   return expression;
 };
+var buildOptionsToLabelAndValue = function buildOptionsToLabelAndValue() {
+  var optionObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return optionObjects.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return {
+      label: label,
+      value: value || label
+    };
+  });
+};
 var buildArrayToLabelAndValues = function buildArrayToLabelAndValues(value) {
   return map(toLabelAndValue, value || []);
 };
 var validateField = /*#__PURE__*/function () {
-  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
     var fieldValue, fieldName, isRequired, kind, fieldData;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          fieldValue = _ref2.fieldValue, fieldName = _ref2.fieldName, isRequired = _ref2.isRequired, kind = _ref2.kind, fieldData = _ref2.fieldData;
+          fieldValue = _ref3.fieldValue, fieldName = _ref3.fieldName, isRequired = _ref3.isRequired, kind = _ref3.kind, fieldData = _ref3.fieldData;
           _context.prev = 1;
           _context.next = 4;
           return yup.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
@@ -6096,7 +6152,7 @@ var validateField = /*#__PURE__*/function () {
     }, _callee, null, [[1, 7]]);
   }));
   return function validateField(_x) {
-    return _ref3.apply(this, arguments);
+    return _ref4.apply(this, arguments);
   };
 }();
 var dateTimeToString = function dateTimeToString(dateTime) {
@@ -6146,12 +6202,13 @@ var useFormikFields = function useFormikFields(_ref) {
     }
     return value;
   };
+  var isDropdown = ["single_option", "multi_option"].includes(kind);
   return {
     handleSubmit: handleSubmit,
     fieldProps: _objectSpread$3(_objectSpread$3({}, formikFieldProps), {}, {
       required: isRequired,
       error: meta.error,
-      options: fieldData && buildArrayToLabelAndValues(fieldData),
+      options: isDropdown && buildOptionsToLabelAndValue(fieldData),
       value: getValueForField(formikFieldProps.value),
       dirty: dirty,
       label: !individualSubmit && name
@@ -6210,7 +6267,7 @@ var MultiOption = function MultiOption(props) {
     isSearchable: true
   }, fieldProps, {
     onChange: function onChange(selectedOptions) {
-      handleSubmit(pluck("value", selectedOptions));
+      return handleSubmit(pluck("value", selectedOptions));
     }
   }));
 };
@@ -6377,7 +6434,7 @@ var getInitialFieldValue = function getInitialFieldValue(field) {
 };
 var getAllInitialFieldValues = function getAllInitialFieldValues(fields) {
   var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return fields.map(function (field) {
+  return getNonSystemFields(fields).map(function (field) {
     return getInitialFieldValue(field, fieldValues);
   });
 };
@@ -6387,6 +6444,11 @@ var mergeInitialValues = function mergeInitialValues(_ref5) {
   var initialValue = mergeAll([initialValues].concat(_toConsumableArray(getAllInitialFieldValues(fields, initialValues === null || initialValues === void 0 ? void 0 : initialValues.fieldValues))));
   return omit(["fieldValues"], initialValue);
 };
+var getNonSystemFields = function getNonSystemFields(fields) {
+  return filterBy({
+    isSystem: false
+  }, fields);
+};
 var neetoFieldsUtils = {
   mergeInitialValues: mergeInitialValues,
   transformValues: transformValues
@@ -6396,7 +6458,7 @@ var FieldInputs = function FieldInputs(_ref) {
   var _ref$customComponents = _ref.customComponents,
     customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
     fields = _ref.fields;
-  return fields.map(function (field) {
+  return getNonSystemFields(fields).map(function (field) {
     return renderFieldInput({
       field: field,
       customComponents: customComponents
@@ -6460,11 +6522,9 @@ var FieldsTable = function FieldsTable(_ref) {
 
 var Menu = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
-var buildColumns = function buildColumns(_ref) {
+var buildDefaultColumns = function buildDefaultColumns(_ref) {
   var onDeleteClick = _ref.onDeleteClick,
-    onEditClick = _ref.onEditClick,
-    _ref$additionalColumn = _ref.additionalColumnData,
-    additionalColumnData = _ref$additionalColumn === void 0 ? [] : _ref$additionalColumn;
+    onEditClick = _ref.onEditClick;
   return [{
     key: "name",
     dataIndex: "name",
@@ -6485,7 +6545,7 @@ var buildColumns = function buildColumns(_ref) {
         onClick: function onClick() {
           return onEditClick(field);
         }
-      }, t("labels.edit")), /*#__PURE__*/React.createElement(MenuItem.Button, {
+      }, t("labels.edit")), !field.isSystem && /*#__PURE__*/React.createElement(MenuItem.Button, {
         onClick: function onClick() {
           return onDeleteClick(field);
         }
@@ -6505,7 +6565,7 @@ var buildColumns = function buildColumns(_ref) {
     render: function render(boolVal) {
       return boolVal ? t("common.yes") : t("common.no");
     }
-  }].concat(_toConsumableArray(additionalColumnData));
+  }];
 };
 var renderMenuBarItems = function renderMenuBarItems(_ref2) {
   var items = _ref2.items,
@@ -6541,11 +6601,37 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
     });
   });
 };
-var getDashBoardTitle = function getDashBoardTitle(_ref3) {
+var renderMenuBarFilters = function renderMenuBarFilters(_ref3) {
+  var selectedState = _ref3.selectedState,
+    setSelectedState = _ref3.setSelectedState,
+    fieldStatesTaxonomy = _ref3.fieldStatesTaxonomy,
+    activeFieldsCount = _ref3.activeFieldsCount,
+    inactiveFieldsCount = _ref3.inactiveFieldsCount;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar.SubTitle, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h5",
+    textTransform: "uppercase",
+    weight: "bold"
+  }, t("titles.filters"))), /*#__PURE__*/React.createElement(MenuBar.Block, {
+    active: selectedState === FIELD_STATES.active,
+    count: activeFieldsCount,
+    label: fieldStatesTaxonomy.active,
+    onClick: function onClick() {
+      return setSelectedState(FIELD_STATES.active);
+    }
+  }), /*#__PURE__*/React.createElement(MenuBar.Block, {
+    active: selectedState === FIELD_STATES.inactive,
+    count: inactiveFieldsCount,
+    label: fieldStatesTaxonomy.inactive,
+    onClick: function onClick() {
+      return setSelectedState(FIELD_STATES.inactive);
+    }
+  }));
+};
+var getDashBoardTitle = function getDashBoardTitle(_ref4) {
   var _findBy;
-  var isOwnerBased = _ref3.isOwnerBased,
-    owners = _ref3.owners,
-    selectedVal = _ref3.selectedVal;
+  var isOwnerBased = _ref4.isOwnerBased,
+    owners = _ref4.owners,
+    selectedVal = _ref4.selectedVal;
   return t("messages.manageFieldFor", {
     resource: isOwnerBased ? (_findBy = findBy({
       id: selectedVal
@@ -6561,15 +6647,25 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
 var FieldsDashboard = function FieldsDashboard(_ref) {
   var _ref$rowData = _ref.rowData,
     rowData = _ref$rowData === void 0 ? [] : _ref$rowData,
-    _ref$additionalColumn = _ref.additionalColumnData,
-    additionalColumnData = _ref$additionalColumn === void 0 ? [] : _ref$additionalColumn,
     _ref$showOwnersInMenu = _ref.showOwnersInMenu,
     showOwnersInMenu = _ref$showOwnersInMenu === void 0 ? false : _ref$showOwnersInMenu,
     _ref$resourceType = _ref.resourceType,
     resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
     _ref$allowedKinds = _ref.allowedKinds,
     allowedKinds = _ref$allowedKinds === void 0 ? ALL_KINDS : _ref$allowedKinds,
-    paneProps = _ref.paneProps;
+    paneProps = _ref.paneProps,
+    _ref$buildColumnData = _ref.buildColumnData,
+    buildColumnData = _ref$buildColumnData === void 0 ? function (_ref2) {
+      var _ref2$defaultColumns = _ref2.defaultColumns,
+        defaultColumns = _ref2$defaultColumns === void 0 ? [] : _ref2$defaultColumns;
+      return defaultColumns;
+    } : _ref$buildColumnData,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$showStateFilter = _ref.showStateFilter,
+    showStateFilter = _ref$showStateFilter === void 0 ? true : _ref$showStateFilter,
+    _ref$fieldStatesTaxon = _ref.fieldStatesTaxonomy,
+    fieldStatesTaxonomy = _ref$fieldStatesTaxon === void 0 ? DEFAULT_FIELD_STATE_TAXONOMY : _ref$fieldStatesTaxon;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPaneOpen = _useState2[0],
@@ -6590,13 +6686,17 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     selectedField = _useState10[0],
     setSelectedField = _useState10[1];
-  var _useState11 = useState({
+  var _useState11 = useState(FIELD_STATES.active),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedState = _useState12[0],
+    setSelectedState = _useState12[1];
+  var _useState13 = useState({
       pageIndex: DEFAULT_PAGE_INDEX,
       pageSize: DEFAULT_PAGE_SIZE
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    pageProps = _useState12[0],
-    setPageProps = _useState12[1];
+    _useState14 = _slicedToArray(_useState13, 2),
+    pageProps = _useState14[0],
+    setPageProps = _useState14[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFetchConfigs = useFetchConfigs(),
@@ -6609,7 +6709,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     isConfigsLoading = _useFetchConfigs.isLoading;
   var _useFetchFields = useFetchFields(_objectSpread$1({
       resourceType: !showOwnersInMenu ? selectedMenu : undefined,
-      ownerId: showOwnersInMenu ? selectedMenu : undefined
+      ownerId: showOwnersInMenu ? selectedMenu : undefined,
+      state: selectedState
     }, pageProps), {
       enabled: !!selectedMenu
     }),
@@ -6618,6 +6719,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     _useFetchFields$data3 = _useFetchFields$data2.fields,
     fields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3,
     count = _useFetchFields$data2.count,
+    activeFieldsCount = _useFetchFields$data2.activeFieldsCount,
+    inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
     isFieldsLoading = _useFetchFields.isLoading,
     isFieldsFetching = _useFetchFields.isFetching;
   var _useDestroyField = useDestroyField(),
@@ -6647,15 +6750,27 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     setIsDeleteAlertOpen(false);
     setSelectedField({});
   };
+  var defaultColumns = buildDefaultColumns({
+    onDeleteClick: handleDeleteButtonClick,
+    onEditClick: handleEditButtonClick
+  });
+  var columnData = buildColumnData({
+    onEditClick: handleEditButtonClick,
+    onDeleteClick: handleDeleteButtonClick,
+    defaultColumns: defaultColumns
+  });
   var menuItems = showOwnersInMenu ? owners : resourceTypes;
   var isScreenLoading = isFieldsLoading || isConfigsLoading;
+  var showCountSubheader = count > 0;
   useEffect(function () {
     var _owners$;
     showOwnersInMenu ? setSelectedMenu((_owners$ = owners[0]) === null || _owners$ === void 0 ? void 0 : _owners$.id) : setSelectedMenu(resourceTypes[0]);
   }, [isConfigsLoading]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-grow"
+  }, /*#__PURE__*/React.createElement(MenuBar, {
     showMenu: isMenuBarOpen,
-    title: t("titles.fields")
+    title: t("titles.field", SINGULAR)
   }, isConfigsLoading ? /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center"
   }, /*#__PURE__*/React.createElement(Spinner, null)) : renderMenuBarItems({
@@ -6663,9 +6778,16 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     items: menuItems,
     selectedMenu: selectedMenu,
     setSelectedMenu: setSelectedMenu
+  }), showStateFilter && renderMenuBarFilters({
+    selectedState: selectedState,
+    setSelectedState: setSelectedState,
+    fieldStatesTaxonomy: fieldStatesTaxonomy,
+    activeFieldsCount: activeFieldsCount,
+    inactiveFieldsCount: inactiveFieldsCount
   })), isScreenLoading ? /*#__PURE__*/React.createElement("div", {
     className: "flex w-full flex-grow items-center justify-center"
   }, /*#__PURE__*/React.createElement(PageLoader, null)) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
+    breadcrumbs: breadcrumbs,
     menuBarToggle: function menuBarToggle() {
       return setIsMenuBarOpen(not);
     },
@@ -6687,18 +6809,19 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
       owners: owners,
       selectedVal: selectedMenu
     })
+  }), showCountSubheader && /*#__PURE__*/React.createElement(SubHeader, {
+    leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
+      className: "mr-4 font-semibold",
+      style: "h4"
+    }, count, t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
   }), /*#__PURE__*/React.createElement(FieldsTable, {
+    columnData: columnData,
     isLoading: isFieldsFetching || isFieldsLoading,
     pageProps: pageProps,
     rowData: isEmpty(rowData) ? fields : rowData,
     setIsPaneOpen: setIsPaneOpen,
     setPageProps: setPageProps,
-    totalCount: count,
-    columnData: buildColumns({
-      onDeleteClick: handleDeleteButtonClick,
-      onEditClick: handleEditButtonClick,
-      additionalColumnData: additionalColumnData
-    })
+    totalCount: count
   })), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isDeleteAlertOpen,
     isSubmitting: isDeleting,
@@ -6829,7 +6952,7 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     isFieldsLoading = _useFetchFields.isLoading;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(className, "neeto-ui-border-gray-300 m-3 space-y-3 rounded-lg border bg-white px-4 py-2")
-  }, isFieldsLoading ? /*#__PURE__*/React.createElement(Spinner, null) : fields.map(function (field) {
+  }, isFieldsLoading ? /*#__PURE__*/React.createElement(Spinner, null) : getNonSystemFields(fields).map(function (field) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: field.id
     }, /*#__PURE__*/React.createElement(Typography, {