datastake-daf 0.6.803 → 0.6.805

package/dist/pages/index.js

@@ -6152,8 +6152,8 @@ const useHeader = ({
       setShowFilters(p => !p);
     }
   }];
-  const actionButtons = onDownload && _actionButtons.length < 3 ? [..._actionButtons, ...(hasFilters ? filterButton : []), downloadButton] : [..._actionButtons, ...(hasFilters ? filterButton : [])];
-  const extraButtons = onDownload && _actionButtons.length >= 3 ? [..._extraButtons, downloadButtonAction] : [..._extraButtons];
+  const actionButtons = onDownload && _actionButtons?.length < 3 ? [...(_actionButtons?.length ? _actionButtons : []), ...(hasFilters ? filterButton : []), downloadButton] : [...(_actionButtons?.length ? _actionButtons : []), ...(hasFilters ? filterButton : [])];
+  const extraButtons = onDownload && _actionButtons?.length >= 3 ? [..._extraButtons, downloadButtonAction] : [..._extraButtons];
   const mainCont = React.useRef();
   const buttonCont = React.useRef();
   const [mainContWidth, setMainContWidth] = React.useState(600);
@@ -12579,7 +12579,7 @@ const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {}) => {
   hardcodedData: PropTypes__default["default"].array
 });
 
-const Container$2 = styled__default["default"].div`
+const Container$1 = styled__default["default"].div`
 	height: ${props => props.height || '300px'};
 	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'}; 
 `;
@@ -12853,7 +12853,7 @@ function LineChart({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -14767,7 +14767,7 @@ function BarChart({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -15913,10 +15913,10 @@ const getColumns$f = ({
         className: "daf-default-cell"
       });
     }
-    const published = false;
+    const published = all?.published || false;
     return /*#__PURE__*/jsxRuntime.jsx(ProgressBarWithIcon, {
       published: published,
-      data: v,
+      data: all,
       t: t
     });
   }
@@ -15982,9 +15982,11 @@ function OrganisationInformation({
   user = {},
   goTo = () => {},
   getRedirectLink = () => {},
-  theme = {}
+  theme = {},
+  data,
+  loading
 }) {
-  const organistionInfo = [{
+  const organisationInfo = [{
     key: 'kyc',
     label: t("My KYC")
   }, {
@@ -15992,15 +15994,16 @@ function OrganisationInformation({
     label: t("Management Systems")
   }];
   const tableData = React.useMemo(() => {
-    return organistionInfo.map(item => {
+    return organisationInfo.map(item => {
       return {
         key: item.key,
         name: item.label,
-        completion: 0,
-        lastUpdate: ""
+        completion: data?.data?.[`${item.key}Data`]?.meta?.completion?.percentage || 0,
+        lastUpdate: data?.data?.[`${item.key}Data`]?.updatedAt || "",
+        ...data?.data?.[`${item.key}Data`]
       };
     });
-  }, [organistionInfo]);
+  }, [organisationInfo, data]);
   const columns = React.useMemo(() => {
     return getColumns$f({
       t,
@@ -16014,6 +16017,7 @@ function OrganisationInformation({
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Organisation Information"),
     className: "with-border-header daf-table-wrapper no-pagination no-px-body",
+    loading: loading,
     children: /*#__PURE__*/jsxRuntime.jsx(DAFTable, {
       columns: columns,
       data: tableData
@@ -16518,6 +16522,11 @@ SearchFilters.propTypes = {
   t: PropTypes__default["default"].func
 };
 
+const getAdminLevelName = (data, level) => {
+  const entry = Object.values(data || {}).find(item => item.level === level);
+  return entry?.name || "-";
+};
+
 const getColumns$d = ({
   t,
   activeTab,
@@ -16585,7 +16594,8 @@ const getColumns$d = ({
         className: "daf-default-cell"
       });
     }
-    const label = findOptions(v, options?.categoriesOptions) || "-";
+    const categoriesOptions = [...(options?.categoriesOptions || []), ...(options?.locationCategories || [])];
+    const label = findOptions(v, categoriesOptions) || "-";
     return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: label,
       children: label || "-"
@@ -16602,7 +16612,7 @@ const getColumns$d = ({
         className: "daf-default-cell"
       });
     }
-    const label = findOptions(v, options?.subCategoriesOptionsSbgi) || "-";
+    const label = findOptions(v, options?.subCategoriesOptions) || "-";
     return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: label,
       children: label || "-"
@@ -16636,7 +16646,7 @@ const getColumns$d = ({
         className: "daf-default-cell"
       });
     }
-    const region = getLinkValue(all?.administrativeLevel1, all?.linking?.SCL);
+    const region = getAdminLevelName(all?.linking?.SCL, "level_1");
     return region ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: region,
       children: region
@@ -16653,7 +16663,7 @@ const getColumns$d = ({
         className: "daf-default-cell"
       });
     }
-    const district = getLinkValue(all?.administrativeLevel2, all?.linking?.SCL);
+    const district = getAdminLevelName(all?.linking?.SCL, "level_2");
     return district ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: district,
       children: district
@@ -16695,7 +16705,7 @@ const getColumns$d = ({
     });
   }
 }, {
-  dataIndex: "lastUpdated",
+  dataIndex: "lastUpdate",
   title: t("Last Update"),
   ellipsis: true,
   show: true,
@@ -16781,7 +16791,8 @@ function AssociatedInformation$1({
   user = {},
   goTo = () => {},
   getRedirectLink = () => {},
-  options = {}
+  options = {},
+  theme = {}
 }) {
   const tabs = [{
     value: "stakeholders",
@@ -16797,19 +16808,34 @@ function AssociatedInformation$1({
     label: t("Events")
   }];
   const [activeTab, setActiveTab] = React.useState("stakeholders");
-  const data = [];
+  const defaultConfig = React.useMemo(() => ({
+    basepath: "stakeholder",
+    url: "/kyc/associatedInformation"
+  }), []);
+  const {
+    data,
+    loading
+  } = useWidgetFetch({
+    config: defaultConfig
+  });
+  console.log({
+    data
+  });
   const columns = React.useMemo(() => getColumns$d({
     t,
     isMonitoring: false,
     activeTab,
     options,
     getRedirectLink,
-    user
-  }), [t, activeTab, options, getRedirectLink, user]);
+    user,
+    theme,
+    goTo
+  }), [t, activeTab, options, getRedirectLink, user, theme, goTo]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Associated Information"),
     expandable: true,
     className: "with-border-header no-px-body overflow-hidden",
+    loading: loading,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
         display: "flex",
@@ -16892,7 +16918,9 @@ function SelfAssesment({
         goTo: goTo,
         getRedirectLink: getRedirectLink,
         data: data,
-        loading: loading
+        loading: loading,
+        theme: theme,
+        options: options
       })
     })]
   });
@@ -18519,7 +18547,10 @@ const EditContext = /*#__PURE__*/React.createContext({
   app: null,
   ajaxForms: {},
   query: null,
-  goTo: () => {}
+  goTo: () => {},
+  maxWidth: "75%",
+  staticWidth: "614px",
+  fullWidth: false
 });
 const EditProvider = ({
   t,
@@ -18539,7 +18570,10 @@ const EditProvider = ({
   errors,
   changeErrors,
   changeAjaxForms,
-  evaluationConfig
+  evaluationConfig,
+  maxWidth,
+  staticWidth,
+  fullWidth
 }) => {
   const values = {
     t,
@@ -18558,7 +18592,10 @@ const EditProvider = ({
     getApiBaseUrl,
     query,
     evaluationConfig,
-    goTo
+    goTo,
+    maxWidth,
+    staticWidth,
+    fullWidth
   };
   return /*#__PURE__*/jsxRuntime.jsx(EditContext.Provider, {
     value: values,
@@ -22690,6 +22727,81 @@ function useAjaxModal$1({
   };
 }
 
+const ViewContext = /*#__PURE__*/React.createContext({
+  user: null,
+  isReview: false,
+  t: s => s,
+  errors: {},
+  changeErrors: () => {},
+  ajaxOptions: {},
+  getAppHeader: () => {},
+  getApiBaseUrl: () => {},
+  changeAjaxOptions: () => {},
+  changeAjaxForms: () => {},
+  getMainApiUrl: () => {},
+  app: null,
+  ajaxForms: {},
+  query: null,
+  goTo: () => {},
+  maxWidth: "75%",
+  staticWidth: "614px",
+  fullWidth: false
+});
+const ViewProvider = ({
+  t,
+  user,
+  ajaxForms,
+  isReview,
+  children,
+  ajaxOptions,
+  highlightMandatory,
+  getAppHeader,
+  getApiBaseUrl,
+  changeAjaxOptions,
+  getMainApiUrl,
+  app,
+  query,
+  goTo,
+  errors,
+  changeErrors,
+  changeAjaxForms,
+  evaluationConfig,
+  maxWidth,
+  staticWidth,
+  fullWidth
+}) => {
+  const values = {
+    t,
+    errors,
+    changeErrors,
+    user,
+    ajaxForms,
+    isReview,
+    changeAjaxOptions,
+    getMainApiUrl,
+    ajaxOptions,
+    highlightMandatory,
+    app,
+    changeAjaxForms,
+    getAppHeader,
+    getApiBaseUrl,
+    query,
+    evaluationConfig,
+    goTo,
+    maxWidth,
+    staticWidth,
+    fullWidth
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(ViewContext.Provider, {
+    value: values,
+    children: children
+  });
+};
+const useViewContext = () => {
+  const values = React.useContext(ViewContext);
+  return values;
+};
+
 function DataLink$1({
   form = {},
   values,
@@ -22705,6 +22817,11 @@ function DataLink$1({
   getToken,
   app
 }) {
+  const {
+    maxWidth,
+    staticWidth,
+    fullWidth
+  } = useViewContext();
   const isSingle = React.useMemo(() => form?.meta?.maxRepeat === 1, [form]);
   const [modalRow, setModalRow] = React.useState(null);
   const [linkingData, setLinkingData] = React.useState({});
@@ -23025,7 +23142,11 @@ function DataLink$1({
   }], [mapKey, inputs, tableKeys, ajaxModalValues]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: formatClassname(['data-link-cont mt-2', noBody && 'no-body']),
-    style: form?.meta?.style,
+    style: {
+      ...form?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : maxWidth
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "daf-table-wrapper no-padding repeatable-form-table no-pagination",
       children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
@@ -24630,6 +24751,11 @@ function DataLinkGroup$1({
   getToken,
   app
 }) {
+  const {
+    maxWidth,
+    staticWidth,
+    fullWidth
+  } = useViewContext();
   const dataLinkKey = React.useMemo(() => Object.keys(form?.inputs || {}).find(k => form?.inputs[k]?.type === "dataLink"), [form]);
   const dataLinkInput = React.useMemo(() => (form?.inputs || {})[dataLinkKey], [form, dataLinkKey]);
   const otherInputs = React.useMemo(() => Object.keys(form?.inputs || {}).filter(k => k !== dataLinkKey).reduce((all, key) => {
@@ -24946,7 +25072,11 @@ function DataLinkGroup$1({
   }], [mapKey, inputs, tableKeys, ajaxModalValues]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: formatClassname(['data-link-cont mt-2', noBody && 'no-body']),
-    style: dataLinkInput?.meta?.style,
+    style: {
+      ...dataLinkInput?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : maxWidth
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "daf-table-wrapper no-padding repeatable-form-table no-pagination",
       children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
@@ -25037,6 +25167,11 @@ function DataLinkFlat$1({
   getToken,
   app
 }) {
+  const {
+    maxWidth,
+    staticWidth,
+    fullWidth
+  } = useViewContext();
   const isSingle = React.useMemo(() => form?.meta?.maxRepeat === 1, [form]);
   const [modalRow, setModalRow] = React.useState(null);
   const [linkingData, setLinkingData] = React.useState({});
@@ -25390,7 +25525,11 @@ function DataLinkFlat$1({
   }], [mapKey, inputs, tableKeys, ajaxModalValues]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: formatClassname(['data-link-cont mt-2', noBody && 'no-body']),
-    style: form?.meta?.style,
+    style: {
+      ...form?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : maxWidth
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "daf-table-wrapper no-padding repeatable-form-table no-pagination",
       children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
@@ -27281,6 +27420,9 @@ function Repeatable({
     getAppHeader,
     app,
     highlightMandatory,
+    maxWidth,
+    staticWidth,
+    fullWidth,
     ...rest
   } = useEditContext();
   const inputId = form?.dataId;
@@ -27546,7 +27688,11 @@ function Repeatable({
   };
   const preSelected = data.map(d => d.id).filter(d => !!d);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    style: form?.meta?.style,
+    style: {
+      ...form?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : staticWidth
+    },
     className: formatClassname([form.repeatable ? "repeatable-section data-link-cont mb-6 pb-3" : '', noBody && 'no-body', isHighlighted && !noBody && 'highlighted']),
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "mb-4",
@@ -27747,6 +27893,9 @@ function Repeatable({
             // form: MainForm,
             // forms: options,
             // setFormValues: setValues,
+            maxWidth,
+            staticWidth,
+            fullWidth,
             value: inputMeta.comment || '',
             onChange: val => {
               changeInputMeta({
@@ -28287,7 +28436,10 @@ const GroupContentFormItem = ({
     app,
     getApiBaseUrl,
     getAppHeader,
-    isReview
+    isReview,
+    maxWidth,
+    staticWidth,
+    fullWidth
   } = useEditContext();
   const [isShown, setIsShown] = React.useState(!!inputMeta?.comment);
   let maxRule = rules.find(rule => rule.max)?.max;
@@ -28797,7 +28949,10 @@ const GroupContentFormItem = ({
           valueOnlyString: true
         }) : inputTypeComponent$1[input.type] ? inputTypeComponent$1[input.type]({
           ...inputData,
-          name: inputId
+          name: inputId,
+          maxWidth,
+          staticWidth,
+          fullWidth
         }, {
           form: MainForm,
           forms: options,
@@ -28811,7 +28966,10 @@ const GroupContentFormItem = ({
           t,
           getApiBaseUrl,
           getAppHeader,
-          isHighlighted
+          isHighlighted,
+          maxWidth,
+          staticWidth,
+          fullWidth
         }) : console.log(input)
       }), input.meta?.code ? /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "code",
@@ -28921,6 +29079,9 @@ const GroupContentFormItem = ({
           form: MainForm,
           forms: options,
           value: inputMeta?.comment || '',
+          maxWidth,
+          staticWidth,
+          fullWidth,
           onChange: val => {
             if (notPartOfTheForm) {
               const _defaultMeta = (values?.meta?.inputs || {})[formId] || {};
@@ -28996,6 +29157,9 @@ const GroupContentFormItem = ({
             form: MainForm,
             forms: options,
             value: lastReview?.comment || '',
+            maxWidth,
+            staticWidth,
+            fullWidth,
             onChange: val => {
               if (notPartOfTheForm) {
                 const _defaultMeta = (values?.meta?.inputs || {})[formId] || {};
@@ -29375,7 +29539,8 @@ const EditForm = ({
   evaluationConfig = [],
   staticWidth = "614px",
   fullWidth = false,
-  noConvert = false
+  noConvert = false,
+  maxWidth = "75%"
 }) => {
   const [isSubmitting] = React.useState(false);
   const formData = JSON.parse(JSON.stringify(convertUndefinedToNull(data) || {}));
@@ -29594,7 +29759,7 @@ const EditForm = ({
           name: id,
           layout: "vertical",
           style: {
-            maxWidth: fullWidth ? "unset" : 700
+            maxWidth: maxWidth || (fullWidth ? "unset" : 700) || 700
           },
           className: `main-form${formClass ? ` ${formClass}` : ""} `,
           onValuesChange: (_changedValue, _allValues) => {
@@ -29735,6 +29900,9 @@ const EditForm = ({
     }
   };
   return /*#__PURE__*/jsxRuntime.jsxs(EditProvider, {
+    maxWidth: maxWidth,
+    staticWidth: staticWidth,
+    fullWidth: fullWidth,
     t: t,
     isReview: isReview,
     user: user,
@@ -30245,6 +30413,9 @@ function DataLink({
     getApiBaseUrl,
     getAppHeader,
     app,
+    maxWidth,
+    staticWidth,
+    fullWidth,
     ...rest
   } = useEditContext();
   const [rowToEdit, setRowToEdit] = React.useState();
@@ -30687,7 +30858,11 @@ function DataLink({
   }, {});
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: formatClassname(['data-link-cont mt-2', noBody && 'no-body', isHighlighted && 'highlighted']),
-    style: form?.meta?.style,
+    style: {
+      ...form?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : maxWidth
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "daf-table-wrapper no-padding repeatable-form-table no-pagination",
       children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
@@ -31291,6 +31466,9 @@ function DataLinkGroup({
     getApiBaseUrl,
     getAppHeader,
     app,
+    maxWidth,
+    staticWidth,
+    fullWidth,
     ...rest
   } = useEditContext();
   const [rowToEdit, setRowToEdit] = React.useState();
@@ -31731,7 +31909,11 @@ function DataLinkGroup({
   }, {});
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: formatClassname(['data-link-cont mt-2', noBody && 'no-body', isHighlighted && 'highlighted']),
-    style: form?.meta?.style,
+    style: {
+      ...form?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : staticWidth
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "daf-table-wrapper no-padding repeatable-form-table no-pagination",
       children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
@@ -31838,6 +32020,9 @@ function DataLinkFlat({
     getApiBaseUrl,
     getAppHeader,
     app,
+    maxWidth,
+    staticWidth,
+    fullWidth,
     ...rest
   } = useEditContext();
   const [rowToEdit, setRowToEdit] = React.useState();
@@ -32283,7 +32468,11 @@ function DataLinkFlat({
   const disabledInputs = rowToEdit ? [...(form?.meta?.disabledKeysEdit || []), ...(form?.meta?.disabledKeys || [])] : [...(form?.meta?.disabledKeysCreate || []), ...(form?.meta?.disabledKeys || [])];
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: formatClassname(['data-link-cont mt-2', noBody && 'no-body', isHighlighted && 'highlighted']),
-    style: form?.meta?.style,
+    style: {
+      ...form?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : staticWidth
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "daf-table-wrapper no-padding repeatable-form-table no-pagination",
       children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
@@ -32295,9 +32484,7 @@ function DataLinkFlat({
           columns: columns,
           dataSource: dataSource,
           rowKey: "key",
-          scroll: noBody ? undefined : {
-            y: 170
-          }
+          scroll: noBody
         })
       })
     }), /*#__PURE__*/jsxRuntime.jsx(antd.Modal, {
@@ -33774,7 +33961,10 @@ const inputTypeComponent$1 = {
     repeatIndex,
     inputName,
     name,
-    tags
+    tags,
+    maxWidth,
+    staticWidth,
+    fullWidth
   }, {
     forms,
     form,
@@ -33838,6 +34028,11 @@ const inputTypeComponent$1 = {
       }
       opts = groupOptions;
     }
+    console.log({
+      maxWidth,
+      staticWidth,
+      fullWidth
+    });
     return /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
       size: "medium",
       allowClear: true,
@@ -33852,6 +34047,11 @@ const inputTypeComponent$1 = {
       className: formatClassname([isHighlighted && "highlighted-select"]),
       disabled: props.disabled || inputMeta.notApplicable || inputMeta.notAvailable,
       placeholder: getMetaPlaceholer(inputMeta, t) || getInputProp(props.placeholder, formsValue) || t("Select all relevant options"),
+      styles: {
+        selector: {
+          width: "100%"
+        }
+      },
       children: (opts || []).map((option, i) => {
         const otherProps = {};
 
@@ -35565,7 +35765,10 @@ const GetFormItem$1 = ({
     ajaxOptions,
     changeAjaxForms,
     app,
-    isReview
+    isReview,
+    maxWidth,
+    staticWidth,
+    fullWidth
   } = useEditContext();
   const lastReview = (inputMeta?.reviews || [])[(inputMeta?.reviews?.length || 0) - 1];
   const [isShown, setIsShown] = React.useState(!!inputData.commentValue);
@@ -35930,7 +36133,12 @@ const GetFormItem$1 = ({
                 getToken: getToken,
                 app: app,
                 valueOnlyString: true
-              }) : inputTypeComponent$1[input.type] ? inputTypeComponent$1[input.type](inputData, {
+              }) : inputTypeComponent$1[input.type] ? inputTypeComponent$1[input.type]({
+                ...inputData,
+                maxWidth,
+                staticWidth,
+                fullWidth
+              }, {
                 form: MainForm,
                 forms: options,
                 allForms: plainForms,
@@ -35946,7 +36154,10 @@ const GetFormItem$1 = ({
                 t,
                 getApiBaseUrl,
                 getAppHeader,
-                isHighlighted
+                isHighlighted,
+                maxWidth,
+                staticWidth,
+                fullWidth
               }) : console.log(input)
             }), input.meta?.code ? /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "code",
@@ -36009,7 +36220,12 @@ const GetFormItem$1 = ({
                   })
                 })]
               }),
-              children: inputTypeComponent$1.comment(inputData, {
+              children: inputTypeComponent$1.comment({
+                ...inputData,
+                maxWidth,
+                staticWidth,
+                fullWidth
+              }, {
                 form: MainForm,
                 forms: options,
                 setFormValues: setValues,
@@ -36025,7 +36241,10 @@ const GetFormItem$1 = ({
                 },
                 t,
                 getApiBaseUrl,
-                getAppHeader
+                getAppHeader,
+                maxWidth,
+                staticWidth,
+                fullWidth
               })
             }), /*#__PURE__*/jsxRuntime.jsx("span", {
               className: "max-char-span",
@@ -36048,7 +36267,12 @@ const GetFormItem$1 = ({
                     children: t("Review note")
                   })
                 }),
-                children: inputTypeComponent$1.comment(inputData, {
+                children: inputTypeComponent$1.comment({
+                  ...inputData,
+                  maxWidth,
+                  staticWidth,
+                  fullWidth
+                }, {
                   form: MainForm,
                   forms: options,
                   value: lastReview?.comment || "",
@@ -36072,7 +36296,10 @@ const GetFormItem$1 = ({
                   },
                   t,
                   getApiBaseUrl,
-                  getAppHeader
+                  getAppHeader,
+                  maxWidth,
+                  staticWidth,
+                  fullWidth
                 })
               }), /*#__PURE__*/jsxRuntime.jsx("span", {
                 className: "max-char-span",
@@ -41230,10 +41457,6 @@ const getColumns$a = ({
       goTo(getRedirectLink(link));
     };
     const moreMenuItems = [{
-      label: t("Details"),
-      value: "details",
-      onClick: onClick
-    }, {
       label: t("Summary"),
       value: "Summary",
       onClick: () => {
@@ -41244,11 +41467,13 @@ const getColumns$a = ({
         goTo(getRedirectLink(link));
       }
       // disabled: true,
+    }, {
+      label: t("Details"),
+      value: "details",
+      onClick: onClick
     }];
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: /*#__PURE__*/jsxRuntime.jsx(MoreMenu, {
-        items: moreMenuItems
-      })
+    return /*#__PURE__*/jsxRuntime.jsx(MoreMenu, {
+      items: moreMenuItems
     });
   }
 }].filter(column => column.show !== false);
@@ -43664,10 +43889,6 @@ const getColumns$4 = ({
       goTo(getRedirectLink(link));
     };
     const moreMenuItems = [{
-      label: t("Details"),
-      value: "details",
-      onClick: onClick
-    }, {
       label: t("Summary"),
       value: "Summary",
       onClick: () => {
@@ -43678,6 +43899,10 @@ const getColumns$4 = ({
         goTo(getRedirectLink(link));
       }
       // disabled: true,
+    }, {
+      label: t("Details"),
+      value: "details",
+      onClick: onClick
     }];
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       children: /*#__PURE__*/jsxRuntime.jsx(MoreMenu, {
@@ -44748,7 +44973,7 @@ function RadialBarChart({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         isPdf: isPdf
       })
@@ -48526,6 +48751,218 @@ const VegetationContainer = styled__default["default"].div`
 	}
 `;
 
+const getFaunaConfig = () => {
+  return [{
+    img: "/Biodiversity/birds.svg",
+    key: "birds",
+    disabled: "/Biodiversity/birds-default.svg"
+  }, {
+    img: "/Biodiversity/crabs.svg",
+    key: "crabs",
+    disabled: "/Biodiversity/crabs-default.svg"
+  }, {
+    img: "/Biodiversity/cymbium.svg",
+    key: "cymbium",
+    disabled: "/Biodiversity/cymbium-default.svg"
+  }, {
+    img: "/Biodiversity/fish.svg",
+    key: "fish",
+    disabled: "/Biodiversity/fish-default.svg"
+  }, {
+    img: "/Biodiversity/juveniles.svg",
+    key: "juveniles",
+    disabled: "/Biodiversity/juveniles-default.svg"
+  }, {
+    img: "/Biodiversity/mollusks.svg",
+    key: "mollusks",
+    disabled: "/Biodiversity/mollusks-default.svg"
+  }, {
+    img: "/Biodiversity/mongooses.svg",
+    key: "mongooses",
+    disabled: "/Biodiversity/mongooses-default.svg"
+  }, {
+    img: "/Biodiversity/monkeys.svg",
+    key: "monkeys",
+    disabled: "/Biodiversity/monkeys-default.svg"
+  }, {
+    img: "/Biodiversity/oysters.svg",
+    key: "oysters",
+    disabled: "/Biodiversity/oysters-default.svg"
+  }, {
+    img: "/Biodiversity/snails.svg",
+    key: "snails",
+    disabled: "/Biodiversity/snails-default.svg"
+  }];
+};
+
+function FaunaWidget({
+  title = "Observed Fauna",
+  faunaPresent = [],
+  filterKeys = null,
+  columnsPerRow = 5,
+  itemWidth = 100,
+  itemHeight = 100,
+  t = key => key,
+  ...props
+}) {
+  let faunaConfig = getFaunaConfig();
+
+  // Filter to show only specific keys if filterKeys is provided
+  if (filterKeys && Array.isArray(filterKeys)) {
+    faunaConfig = faunaConfig.filter(item => filterKeys.includes(item.key));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: title,
+    className: `with-border-header no-p-body`,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(FaunaWrapper, {
+      $columnsPerRow: columnsPerRow,
+      children: /*#__PURE__*/jsxRuntime.jsx(FaunaContainer, {
+        $columnsPerRow: columnsPerRow,
+        $itemWidth: itemWidth,
+        $itemHeight: itemHeight,
+        children: faunaConfig.map(item => {
+          // Use colored SVG if the item's key exists in faunaPresent array
+          // Otherwise use default SVG
+          const isPresent = Array.isArray(faunaPresent) && faunaPresent.includes(item.key);
+          const shouldUseColored = isPresent;
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: t(`straatos::${item.key}`),
+            children: /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: shouldUseColored ? item.img : item.disabled,
+              className: `fauna-item`,
+              alt: item.key
+            }, item.key)
+          }, item.key);
+        })
+      })
+    })
+  });
+}
+const FaunaWrapper = styled__default["default"].div`
+	padding: 24px;
+	width: 100%;
+	${props => props.$columnsPerRow ? `
+		overflow-x: auto;
+	` : ''}
+`;
+const FaunaContainer = styled__default["default"].div`
+	display: grid;
+	grid-template-columns: ${props => props.$columnsPerRow ? `repeat(${props.$columnsPerRow}, 1fr)` : `repeat(auto-fit, minmax(${props.$itemWidth}px, 1fr))`};
+	gap: 24px;
+	width: 100%;
+
+	.fauna-item {
+		width: 100%;
+		aspect-ratio: ${props => props.$itemWidth / props.$itemHeight};
+		border-radius: 7px;
+		flex-shrink: 0;
+		display: block;
+		margin: 0;
+		padding: 0;
+		object-fit: contain;
+	}
+`;
+
+const getInvasiveSpeciesConfig = () => {
+  return [{
+    img: "/Biodiversity/spiders.svg",
+    key: "spiders",
+    disabled: "/Biodiversity/spiders-default.svg"
+  }, {
+    img: "/Biodiversity/scale-insects.svg",
+    key: "scaleInsects",
+    disabled: "/Biodiversity/scale-insects-default.svg"
+  }, {
+    img: "/Biodiversity/caterpillars.svg",
+    key: "caterpillars",
+    disabled: "/Biodiversity/caterpillars-default.svg"
+  }, {
+    img: "/Biodiversity/ants.svg",
+    key: "ants",
+    disabled: "/Biodiversity/ants-default.svg"
+  }, {
+    img: "/Biodiversity/unidentified-pests.svg",
+    key: "unidentifiedPests",
+    disabled: "/Biodiversity/unidentified-pests-default.svg"
+  }, {
+    img: "/Biodiversity/others.svg",
+    key: "other",
+    disabled: "/Biodiversity/others-default.svg"
+  }];
+};
+
+function InvasiveSpeciesWidget({
+  title = "Invasive Species",
+  invasiveSpecies = [],
+  hasInvasiveSpecies,
+  filterKeys = null,
+  columnsPerRow = 3,
+  itemWidth = 100,
+  itemHeight = 100,
+  t = key => key,
+  ...props
+}) {
+  let invasiveSpeciesConfig = getInvasiveSpeciesConfig();
+
+  // Filter to show only specific keys if filterKeys is provided
+  if (filterKeys && Array.isArray(filterKeys)) {
+    invasiveSpeciesConfig = invasiveSpeciesConfig.filter(item => filterKeys.includes(item.key));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: title,
+    className: `with-border-header no-p-body`,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesWrapper, {
+      $columnsPerRow: columnsPerRow,
+      children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesContainer, {
+        $columnsPerRow: columnsPerRow,
+        $itemWidth: itemWidth,
+        $itemHeight: itemHeight,
+        children: invasiveSpeciesConfig.map(item => {
+          // If hasInvasiveSpecies is 'no', show all as inactive
+          // If hasInvasiveSpecies is 'yes', show present ones as active
+          const shouldShowAllAsNotPresent = hasInvasiveSpecies === 'no';
+          const isPresent = !shouldShowAllAsNotPresent && Array.isArray(invasiveSpecies) && invasiveSpecies.includes(item.key);
+          const shouldUseColored = isPresent;
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: t(`straatos::${item.key}`),
+            children: /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: shouldUseColored ? item.img : item.disabled,
+              className: `invasive-species-item`,
+              alt: item.key
+            }, item.key)
+          }, item.key);
+        })
+      })
+    })
+  });
+}
+const InvasiveSpeciesWrapper = styled__default["default"].div`
+	padding: 24px;
+	width: 100%;
+	${props => props.$columnsPerRow ? `
+		overflow-x: auto;
+	` : ''}
+`;
+const InvasiveSpeciesContainer = styled__default["default"].div`
+	display: grid;
+	grid-template-columns: ${props => props.$columnsPerRow ? `repeat(${props.$columnsPerRow}, 1fr)` : `repeat(auto-fit, minmax(${props.$itemWidth}px, 1fr))`};
+	gap: 24px;
+	width: 100%;
+
+	.invasive-species-item {
+		width: 100%;
+		aspect-ratio: ${props => props.$itemWidth / props.$itemHeight};
+		border-radius: 7px;
+		flex-shrink: 0;
+		display: block;
+		margin: 0;
+		padding: 0;
+		object-fit: contain;
+	}
+`;
+
 const RepeatableGroup = ({
   name = null,
   config = {},
@@ -48871,7 +49308,9 @@ const Content = ({
   getAppHeader,
   user,
   evaluationConfig = [],
-  fullWidth = false
+  fullWidth = false,
+  maxWidth = "75%",
+  staticWidth = "614px"
 }) => {
   const groupSingle = grps => {
     const form = Object.keys(grps).reduce((f, gKey) => {
@@ -49042,6 +49481,9 @@ const Content = ({
                   data: data,
                   allData: data,
                   linkingData: linkingData,
+                  maxWidth: maxWidth,
+                  staticWidth: staticWidth,
+                  fullWidth: fullWidth,
                   className: isEven ? ind === _length - 1 || ind === _length - 2 ? "last" : undefined : ind === _length - 1 ? "last" : undefined,
                   linkingForms: linkingForms,
                   ajaxOptions: ajaxOptions,
@@ -49089,7 +49531,10 @@ const Content = ({
               linkingForms: linkingForms,
               ajaxOptions: ajaxOptions,
               evaluationConfig: evaluationConfig,
-              cols: 2
+              cols: 2,
+              maxWidth: maxWidth,
+              staticWidth: staticWidth,
+              fullWidth: fullWidth
             }, key)]
           }, key) : null;
         })
@@ -49156,7 +49601,9 @@ const Content = ({
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "wrapper",
           style: {
-            width: fullWidth ? "100%" : 700
+            width: "75%",
+            display: "flex",
+            justifyContent: "center"
           },
           children: [f.alertConf ? /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
             className: "w-100",
@@ -49171,10 +49618,23 @@ const Content = ({
       });
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "content",
-    style: style,
-    children: renderContent(form) 
+  return /*#__PURE__*/jsxRuntime.jsx(ViewProvider, {
+    t: t,
+    app: app,
+    ajaxForms: ajaxForms,
+    changeAjaxForms: changeAjaxForms,
+    getApiBaseUrl: getApiBaseUrl,
+    getAppHeader: getAppHeader,
+    user: user,
+    evaluationConfig: evaluationConfig,
+    fullWidth: fullWidth,
+    maxWidth: maxWidth,
+    staticWidth: staticWidth,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "content",
+      style: style,
+      children: renderContent(form) 
+    })
   });
 };
 
@@ -50283,7 +50743,7 @@ function ColumnChart({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -50441,7 +50901,7 @@ function DonutPie({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         style: {
           height
@@ -57349,7 +57809,7 @@ const SeedlingsHeight = ({
   });
 };
 
-const Container$1 = styled__default["default"].div`
+const Container = styled__default["default"].div`
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
@@ -57386,7 +57846,7 @@ const MangroveGrowthAndSurvival = ({
     title: t("Mangrove Growth and Survival"),
     className: "with-border-header h-w-btn-header",
     children: /*#__PURE__*/jsxRuntime.jsxs("section", {
-      children: [/*#__PURE__*/jsxRuntime.jsxs(Container$1, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(Container, {
         children: [/*#__PURE__*/jsxRuntime.jsx(PlantedSpecies, {
           plantedSpecies: activityData?.plantedSpecies,
           mangroveSpecies: options?.mangroveSpecies,
@@ -57432,57 +57892,22 @@ const MangroveGrowthAndSurvival = ({
   });
 };
 
-const FAUNA_KEYS = ['birds', 'juveniles', 'crabs', 'cymbium', 'fish', 'mongooses', 'mollusks', 'monkeys', 'oysters', 'snails', 'caterpillars', 'animal_tracks', 'other'];
-const INVASIVE_SPECIES_KEYS = ['spiders', 'scaleInsects', 'caterpillars', 'unidentifiedPests', 'other'];
-const formatFaunaLabel = key => {
-  return key.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-};
-const formatInvasiveSpeciesLabel = key => {
-  return key.replace(/([A-Z])/g, ' $1').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
-};
-const createFaunaIndicatorConfig = (key, faunaPresent, t) => {
-  const isPresent = Array.isArray(faunaPresent) && faunaPresent.includes(key);
-  const label = formatFaunaLabel(key);
-  return {
-    label: t(label),
-    type: isPresent ? 'compliant' : 'notCompliant',
-    statusIcon: isPresent ? 'Check' : 'Close',
-    statusIconColor: isPresent ? '#12B76A' : '#6C737F',
-    statusBadgeBackgroundColor: isPresent ? undefined : '#F9FAFB',
-    statusBadgeBorderColor: isPresent ? undefined : '#E5E7EB'
-  };
-};
-const createInvasiveSpeciesIndicatorConfig = (key, invasiveSpecies, hasInvasiveSpecies, t) => {
-  const shouldShowAllAsNotPresent = hasInvasiveSpecies === 'no';
-  const shouldShowRedForPresent = hasInvasiveSpecies === 'yes';
-  const isPresent = !shouldShowAllAsNotPresent && Array.isArray(invasiveSpecies) && invasiveSpecies.includes(key);
-  const isRedBadge = isPresent && shouldShowRedForPresent;
-  const label = formatInvasiveSpeciesLabel(key);
-  return {
-    label: t(label),
-    type: isPresent ? 'compliant' : 'notCompliant',
-    statusIcon: isPresent ? 'Check' : 'Close',
-    statusIconColor: isRedBadge ? '#D92D20' : isPresent ? '#12B76A' : '#6C737F',
-    statusBadgeBackgroundColor: isRedBadge ? '#FEE4E2' : isPresent ? undefined : '#F9FAFB',
-    statusBadgeBorderColor: isRedBadge ? '#FDA29B' : isPresent ? undefined : '#E5E7EB'
-  };
-};
-const generateFaunaConfig = (faunaPresent, t) => {
-  return FAUNA_KEYS.map(key => createFaunaIndicatorConfig(key, faunaPresent, t));
-};
-const generateInvasiveSpeciesConfig = (invasiveSpecies, hasInvasiveSpecies, t) => {
-  return INVASIVE_SPECIES_KEYS.map(key => createInvasiveSpeciesIndicatorConfig(key, invasiveSpecies, hasInvasiveSpecies, t));
-};
-
-const Container = styled__default["default"].div`
-    display: grid;
-    grid-template-columns: 70% 28.5%;
+const BiodiversityContainer = styled__default["default"].div`
+    display: flex;
     gap: 24px;
     width: 100%;
+    
     @media (max-width: 768px) {
-        grid-template-columns: 1fr;
+        flex-direction: column;
     }
 `;
+const FaunaSection = styled__default["default"].section`
+    width: 60%;
+    min-width: 0;
+`;
+const InvasiveSpeciesSection = styled__default["default"].section`
+width: 38.5%;
+`;
 const BiodiversityAndHabitat = ({
   faunaPresent = [],
   invasiveSpecies = [],
@@ -57490,28 +57915,32 @@ const BiodiversityAndHabitat = ({
   loading = false,
   t = s => s
 }) => {
-  const observedFaunaConfig = React.useMemo(() => generateFaunaConfig(faunaPresent, t), [faunaPresent, t]);
-  const invasiveSpeciesConfig = React.useMemo(() => generateInvasiveSpeciesConfig(invasiveSpecies, hasInvasiveSpecies, t), [invasiveSpecies, hasInvasiveSpecies, t]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Biodiversity & Habitat"),
     className: "with-border-header h-w-btn-header",
-    children: /*#__PURE__*/jsxRuntime.jsx("section", {
-      children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(ActivityIndicatorsWidget, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(BiodiversityContainer, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(FaunaSection, {
+        children: /*#__PURE__*/jsxRuntime.jsx(FaunaWidget, {
           title: t("Observed Fauna"),
-          config: observedFaunaConfig,
+          faunaPresent: faunaPresent,
+          columnsPerRow: 5,
+          itemWidth: 120,
+          itemHeight: 120,
           loading: loading,
-          widgetClassName: "h-w-btn-header",
           t: t
-        }), /*#__PURE__*/jsxRuntime.jsx(ActivityIndicatorsWidget, {
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesSection, {
+        children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesWidget, {
           title: t("Invasive Species"),
-          config: invasiveSpeciesConfig,
+          invasiveSpecies: invasiveSpecies,
+          hasInvasiveSpecies: hasInvasiveSpecies,
+          columnsPerRow: 3,
+          itemWidth: 100,
+          itemHeight: 100,
           loading: loading,
-          className: "single-column",
-          widgetClassName: "h-w-btn-header",
           t: t
-        })]
-      })
+        })
+      })]
     })
   });
 };
@@ -58681,7 +59110,8 @@ const View = ({
           changeAjaxForms: changeAjaxForms,
           getApiBaseUrl: getApiBaseUrl,
           getAppHeader: getAppHeader,
-          user: user
+          user: user,
+          fullWidth: true
         })]
       })]
     }), openRecordsModal && /*#__PURE__*/jsxRuntime.jsx(Records, {
@@ -59194,6 +59624,7 @@ const Edit = ({
             linkingForms: linkingForms,
             form: selectedForm,
             data: data,
+            fullWidth: true,
             t,
             user,
             ajaxForms,