datastake-daf 0.6.803 → 0.6.805

package/src/@daf/core/components/EditForm/form.jsx

@@ -57,6 +57,7 @@ export const EditForm = ({
 	staticWidth = "614px",
 	fullWidth = false,
 	noConvert = false,
+	maxWidth = "75%",
 }) => {
 	const [isSubmitting] = useState(false);
 	const formData = JSON.parse(JSON.stringify(convertUndefinedToNull(data) || {}));
@@ -345,7 +346,7 @@ export const EditForm = ({
 						key={id}
 						name={id}
 						layout="vertical"
-						style={{ maxWidth: fullWidth ? "unset" : 700 }}
+						style={{ maxWidth: maxWidth || (fullWidth ? "unset" : 700) || 700 }}
 						className={`main-form${formClass ? ` ${formClass}` : ""} `}
 						onValuesChange={(_changedValue, _allValues) => {
 							const changedValue = { ..._changedValue };
@@ -565,6 +566,9 @@ export const EditForm = ({
 
 	return (
 		<EditProvider
+			maxWidth={maxWidth}
+			staticWidth={staticWidth}
+			fullWidth={fullWidth}
 			t={t}
 			isReview={isReview}
 			user={user}

package/src/@daf/core/components/EditForm/helper.js

@@ -904,6 +904,9 @@ export const inputTypeComponent = {
 			inputName,
 			name,
 			tags,
+			maxWidth,
+			staticWidth,
+			fullWidth,
 		},
 		{ forms, form, inputMeta = {}, t, isHighlighted },
 	) => {
@@ -982,6 +985,8 @@ export const inputTypeComponent = {
 			opts = groupOptions;
 		}
 
+		console.log({maxWidth, staticWidth, fullWidth});
+
 		return (
 			<Select
 				size="medium"
@@ -999,6 +1004,11 @@ export const inputTypeComponent = {
 					getInputProp(props.placeholder, formsValue) ||
 					t("Select all relevant options")
 				}
+				styles={{
+					selector: {
+					  width: "100%" ,
+					}
+				  }}
 			>
 				{(opts || []).map((option, i) => {
 					const otherProps = {};
@@ -2669,6 +2679,9 @@ export const GetFormItem = ({
 		changeAjaxForms,
 		app,
 		isReview,
+		maxWidth,
+		staticWidth,
+		fullWidth,
 	} = useEditContext();
 	const lastReview = (inputMeta?.reviews || [])[(inputMeta?.reviews?.length || 0) - 1];
 	const [isShown, setIsShown] = useState(!!inputData.commentValue);
@@ -3165,7 +3178,7 @@ export const GetFormItem = ({
 										valueOnlyString
 									/>
 								) : inputTypeComponent[input.type] ? (
-									inputTypeComponent[input.type](inputData, {
+									inputTypeComponent[input.type]({ ...inputData, maxWidth, staticWidth, fullWidth }, {
 										form: MainForm,
 										forms: options,
 										allForms: plainForms,
@@ -3182,6 +3195,9 @@ export const GetFormItem = ({
 										getApiBaseUrl,
 										getAppHeader,
 										isHighlighted,
+										maxWidth,
+										staticWidth,
+										fullWidth,
 									})
 								) : (
 									console.log(input)
@@ -3250,7 +3266,7 @@ export const GetFormItem = ({
 										</div>
 									}
 								>
-									{inputTypeComponent.comment(inputData, {
+									{inputTypeComponent.comment({ ...inputData, maxWidth, staticWidth, fullWidth }, {
 										form: MainForm,
 										forms: options,
 										setFormValues: setValues,
@@ -3265,6 +3281,9 @@ export const GetFormItem = ({
 										t,
 										getApiBaseUrl,
 										getAppHeader,
+										maxWidth,
+										staticWidth,
+										fullWidth,
 									})}
 								</Form.Item>
 								<span className="max-char-span">
@@ -3290,7 +3309,7 @@ export const GetFormItem = ({
 												</div>
 											}
 										>
-											{inputTypeComponent.comment(inputData, {
+											{inputTypeComponent.comment({ ...inputData, maxWidth, staticWidth, fullWidth }, {
 												form: MainForm,
 												forms: options,
 												value: lastReview?.comment || "",
@@ -3321,6 +3340,9 @@ export const GetFormItem = ({
 												t,
 												getApiBaseUrl,
 												getAppHeader,
+												maxWidth,
+												staticWidth,
+												fullWidth,
 											})}
 										</Form.Item>
 										<span className="max-char-span">

package/src/@daf/core/components/Header/hook.js

@@ -91,12 +91,12 @@ export const useHeader = ({
 	];
 
 	const actionButtons =
-		onDownload && _actionButtons.length < 3
-			? [..._actionButtons, ...(hasFilters ? filterButton : []), downloadButton]
-			: [..._actionButtons, ...(hasFilters ? filterButton : [])];
+		onDownload && _actionButtons?.length < 3
+			? [...(_actionButtons?.length ? _actionButtons : []), ...(hasFilters ? filterButton : []), downloadButton]
+			: [...(_actionButtons?.length ? _actionButtons : []), ...(hasFilters ? filterButton : [])];
 
 	const extraButtons =
-		onDownload && _actionButtons.length >= 3
+		onDownload && _actionButtons?.length >= 3
 			? [..._extraButtons, downloadButtonAction]
 			: [..._extraButtons];
 

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineLocation/columns.js

@@ -1,6 +1,6 @@
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
 import { Tooltip } from "antd";
-import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 
 export const getColumns = ({ t, selectOptions, module, entity }) => {
 	return [
@@ -53,7 +53,7 @@ export const getColumns = ({ t, selectOptions, module, entity }) => {
 				if(all?.administrativeLevel1 && value === all?.administrativeLevel1) {
 					label = all?.linking?.SCL?.[value]?.name
 				} else {
-					label = getNameByLevel(all?.linking?.SCL, "level_1")?.name
+					label = getAdminLevelName(all?.linking?.SCL, "level_1")
 				}
 
 				return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
@@ -69,7 +69,7 @@ export const getColumns = ({ t, selectOptions, module, entity }) => {
 				if(all?.administrativeLevel2 && value === all?.administrativeLevel2) {
 					label = all?.linking?.SCL?.[value]?.name
 				} else {
-					label = getNameByLevel(all?.linking?.SCL, "level_2")?.name
+					label = getAdminLevelName(all?.linking?.SCL, "level_2")
 				}
 
 				return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineLocation/helper.js

@@ -1,6 +1,6 @@
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
 import { Tooltip } from "antd";
-import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 
 export const getColumns = ({ t, selectOptions, module, entity }) => {
 	return [
@@ -53,7 +53,7 @@ export const getColumns = ({ t, selectOptions, module, entity }) => {
 				if(all?.administrativeLevel1 && value === all?.administrativeLevel1) {
 					label = all?.linking?.SCL?.[value]?.name
 				} else {
-					label = getNameByLevel(all?.linking?.SCL, "level_1")?.name
+					label = getAdminLevelName(all?.linking?.SCL, "level_1")
 				}
 
 				return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
@@ -69,7 +69,7 @@ export const getColumns = ({ t, selectOptions, module, entity }) => {
 				if(all?.administrativeLevel2 && value === all?.administrativeLevel2) {
 					label = all?.linking?.SCL?.[value]?.name
 				} else {
-					label = getNameByLevel(all?.linking?.SCL, "level_2")?.name
+					label = getAdminLevelName(all?.linking?.SCL, "level_2")
 				}
 
 				return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineLocation/index.jsx

@@ -3,7 +3,7 @@ import { Form, Input, Select, theme } from "antd";
 import { Container } from "../CombineModalStyle.js";
 import DAFTable from "../../../../Table/index.jsx";
 import { useMemo, useState } from "react";
-import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 import { getColumns } from "./helper.js";
 
 const { useToken } = theme;
@@ -186,7 +186,7 @@ export default function CombineLocationModal({
 							placeholder={t("Province")}
 							options={selectedLocations
 								.map((location) => {
-								const _data = getNameByLevel(location?.linking?.SCL, "level_1");
+								const _data = getAdminLevelName(location?.linking?.SCL, "level_1");
 								return {
 									label: _data?.name || "-",
 									value: _data?.id || "-",
@@ -204,7 +204,7 @@ export default function CombineLocationModal({
 							placeholder={t("Territory")}
 							options={selectedLocations
 								.map((location) => {
-								const _data = getNameByLevel(location?.linking?.SCL, "level_2");
+								const _data = getAdminLevelName(location?.linking?.SCL, "level_2");
 								return {
 									label: _data?.name || "-",
 									value: _data?.id || "-",

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineSubjects/columns.js

@@ -1,6 +1,6 @@
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
 import { Tooltip } from "antd";
-import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 
 export const getColumns = ({ t, selectOptions, module, entity }) => {
 	return [
@@ -53,7 +53,7 @@ export const getColumns = ({ t, selectOptions, module, entity }) => {
 				if(all?.administrativeLevel1 && value === all?.administrativeLevel1) {
 					label = all?.linking?.SCL?.[value]?.name
 				} else {
-					label = getNameByLevel(all?.linking?.SCL, "level_1")?.name
+					label = getAdminLevelName(all?.linking?.SCL, "level_1")
 				}
 
 				return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
@@ -69,7 +69,7 @@ export const getColumns = ({ t, selectOptions, module, entity }) => {
 				if(all?.administrativeLevel2 && value === all?.administrativeLevel2) {
 					label = all?.linking?.SCL?.[value]?.name
 				} else {
-					label = getNameByLevel(all?.linking?.SCL, "level_2")?.name
+					label = getAdminLevelName(all?.linking?.SCL, "level_2")
 				}
 
 				return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineSubjects/index.jsx

@@ -6,7 +6,7 @@ import DAFTable from "../../../../Table/index.jsx";
 import { useMemo, useState } from "react";
 import { mapToSelectOptions } from "./helper.js";
 import { getColumns } from "./columns.js";
-import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 
 const { useToken } = theme;
 
@@ -141,7 +141,7 @@ export default function CombineSubjectsModal({
 							<Select
 							placeholder={t("Province")}
 							options={mapToSelectOptions(selectedSubjects, null, selectOptions, null, (subject) => {
-								const _data = getNameByLevel(subject?.linking?.SCL, "level_1");
+								const _data = getAdminLevelName(subject?.linking?.SCL, "level_1");
 								return {
 									label: _data?.name || "-",
 									value: _data?.id || "-",
@@ -154,7 +154,7 @@ export default function CombineSubjectsModal({
 							<Select
 							placeholder={t("Territory")}
 							options={mapToSelectOptions(selectedSubjects, null, selectOptions, null, (subject) => {
-								const _data = getNameByLevel(subject?.linking?.SCL, "level_2");
+								const _data = getAdminLevelName(subject?.linking?.SCL, "level_2");
 								return {
 									label: _data?.name || "-",
 									value: _data?.id || "-",

package/src/@daf/core/components/Screens/Admin/AdminTables/LocationTable/column.js

@@ -1,7 +1,7 @@
 import { Checkbox, Tooltip, Avatar } from "antd";
 import CustomIcon from "../../../../Icon/CustomIcon.jsx";
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
-import { getNameByLevel } from "../../AdminViews/ViewLocation/helpers.js";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 
 export const getColumns = ({
 	t,
@@ -121,7 +121,7 @@ export const getColumns = ({
 			if(all?.administrativeLevel1 && value === all?.administrativeLevel1) {
 				label = all?.linking?.SCL?.[value]?.name
 			} else {
-				label = getNameByLevel(all?.linking?.SCL, "level_1")?.name
+				label = getAdminLevelName(all?.linking?.SCL, "level_1")
 			}
 
 			return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
@@ -142,7 +142,7 @@ export const getColumns = ({
 			if(all?.administrativeLevel2 && value === all?.administrativeLevel2) {
 				label = all?.linking?.SCL?.[value]?.name
 			} else {
-				label = getNameByLevel(all?.linking?.SCL, "level_2")?.name
+				label = getAdminLevelName(all?.linking?.SCL, "level_2")
 			}
 
 			return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;

package/src/@daf/core/components/Screens/Admin/AdminTables/LocationTable/helper.js

@@ -55,11 +55,4 @@ export const defaultUrlParams = { activeTab: "active" };
 export const checkboxConfig = {
 	name: "Name",
 	datastakeId: "ID",
-};
-
-export const getNameByLevel = (data, level) => {
-	const entry = Object.values(data || {}).find(item => item.level === level);
-	return entry;
-  }
-
-
+};

package/src/@daf/core/components/Screens/Admin/AdminTables/SubjectsTable/columns.js

@@ -1,7 +1,7 @@
 import { Checkbox, Tooltip, Avatar } from "antd";
 import CustomIcon from "../../../../Icon/CustomIcon.jsx";
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
-import { getNameByLevel } from "./helper.js";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 
 export const getColumns = ({
 	t,
@@ -121,7 +121,7 @@ export const getColumns = ({
 			if(all?.administrativeLevel1 && value === all?.administrativeLevel1) {
 				label = all?.linking?.SCL?.[value]?.name
 			} else {
-				label = getNameByLevel(all?.linking?.SCL, "level_1")?.name
+				label = getAdminLevelName(all?.linking?.SCL, "level_1")
 			}
 
 			return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
@@ -142,7 +142,7 @@ export const getColumns = ({
 			if(all?.administrativeLevel2 && value === all?.administrativeLevel2) {
 				label = all?.linking?.SCL?.[value]?.name
 			} else {
-				label = getNameByLevel(all?.linking?.SCL, "level_2")?.name
+				label = getAdminLevelName(all?.linking?.SCL, "level_2")
 			}
 
 			return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;

package/src/@daf/core/components/Screens/Admin/AdminTables/SubjectsTable/helper.js

@@ -55,11 +55,4 @@ export const defaultUrlParams = { activeTab: "active" };
 export const checkboxConfig = {
 	name: "Name",
 	datastakeId: "ID",
-};
-
-export const getNameByLevel = (data, level) => {
-	const entry = Object.values(data || {}).find(item => item.level === level);
-	return entry;
-  }
-
-
+};

package/src/@daf/core/components/Screens/Admin/AdminViews/ViewLocation/helpers.js

@@ -1,13 +1,10 @@
-export const getNameByLevel = (data, level) => {
-	const entry = Object.values(data || {}).find(item => item.level === level);
-	return entry?.name || "-";
-};
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 
 export const getAdministrativeLevel1 = (location) => {
-	return getNameByLevel(location?.linking?.SCL.name, "level_1");
+	return getAdminLevelName(location?.linking?.SCL, "level_1");
 };
 
 export const getAdministrativeLevel2 = (location) => {
-	return getNameByLevel(location?.linking?.SCL.name, "level_2");
+	return getAdminLevelName(location?.linking?.SCL, "level_2");
 };
 

package/src/@daf/core/components/Screens/Admin/AdminViews/ViewLocation/index.jsx

@@ -1,5 +1,5 @@
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
-import { getNameByLevel } from "./helpers.js";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 import LocationTable from "../../AdminTables/LocationTable/index.jsx";
 
 const isView = true;
@@ -43,7 +43,7 @@ export default function View({
 			}
 
 			if (item.type === "administrative") {
-				return getNameByLevel(data?.linking?.SCL, item.level) || "-";
+				return getAdminLevelName(data?.linking?.SCL, item.level) || "-";
 			}
 
 			return val ?? "-";

package/src/@daf/core/components/Screens/Admin/AdminViews/ViewStakeholder/index.jsx

@@ -1,5 +1,6 @@
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
 import StakeholderTable from "../../AdminTables/SubjectsTable/index.jsx";
+import { getAdminLevelName } from "../../../../../../../helpers/adminLevels.js";
 const isView = true;
 
 export default function View({
@@ -41,7 +42,7 @@ export default function View({
 			}
 
 			if (item.type === "administrative") {
-				return getNameByLevel(data?.linking?.SCL, item.level) || "-";
+				return getAdminLevelName(data?.linking?.SCL, item.level) || "-";
 			}
 
 			return val ?? "-";

package/src/@daf/core/components/ViewForm/components/DataLink/flat.js

@@ -9,6 +9,7 @@ import { getLabelFromScopeForDataLink, tooltipInputs } from "../../../../../../h
 import ModalHeader from "../../../Header/ModalHeader/index.jsx";
 import { formatClassname } from "../../../../../../helpers/ClassesHelper";
 import { getInputLabel } from "../../config.js";
+import { useViewContext } from "../../context";
 
 export default function DataLinkFlat({
   form = {},
@@ -25,6 +26,11 @@ export default function DataLinkFlat({
   getToken,
   app,
 }) {
+  const {
+    maxWidth,
+    staticWidth,
+    fullWidth,
+  } = useViewContext();
   const isSingle = useMemo(() => form?.meta?.maxRepeat === 1, [form]);
   const [modalRow, setModalRow] = useState(null)
   const [linkingData, setLinkingData] = useState({});
@@ -418,7 +424,11 @@ export default function DataLinkFlat({
   ], [mapKey, inputs, tableKeys, ajaxModalValues]);
 
   return (
-    <div className={formatClassname(['data-link-cont mt-2', noBody && 'no-body'])} style={form?.meta?.style}>
+    <div className={formatClassname(['data-link-cont mt-2', noBody && 'no-body'])} style={{
+      ...form?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : maxWidth,
+    }}>
       <div className="daf-table-wrapper no-padding repeatable-form-table no-pagination">
         <ConfigProvider renderEmpty={() => notApplicable ? t('Not applicable') : t('No information available')}>
           <Table

package/src/@daf/core/components/ViewForm/components/DataLink/index.js

@@ -9,6 +9,7 @@ import { getLabelFromScopeForDataLink, tooltipInputs } from "../../../../../../h
 import ModalHeader from "../../../Header/ModalHeader/index.jsx";
 import { formatClassname } from "../../../../../../helpers/ClassesHelper";
 import { getInputLabel } from "../../config.js";
+import { useViewContext } from "../../context";
 
 export default function DataLink({
   form = {},
@@ -25,6 +26,11 @@ export default function DataLink({
   getToken,
   app,
 }) {
+  const {
+    maxWidth,
+    staticWidth,
+    fullWidth,
+  } = useViewContext();
   const isSingle = useMemo(() => form?.meta?.maxRepeat === 1, [form]);
   const [modalRow, setModalRow] = useState(null)
   const [linkingData, setLinkingData] = useState({});
@@ -372,7 +378,11 @@ export default function DataLink({
   ], [mapKey, inputs, tableKeys, ajaxModalValues]);
 
   return (
-    <div className={formatClassname(['data-link-cont mt-2', noBody && 'no-body'])} style={form?.meta?.style}>
+    <div className={formatClassname(['data-link-cont mt-2', noBody && 'no-body'])} style={{
+      ...form?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : maxWidth,
+    }}>
       <div className="daf-table-wrapper no-padding repeatable-form-table no-pagination">
         <ConfigProvider renderEmpty={() => notApplicable ? t('Not applicable') : t('No information available')}>
           <Table

package/src/@daf/core/components/ViewForm/components/DataLinkGroup/index.js

@@ -9,6 +9,7 @@ import { tooltipInputs, getLabelFromScopeForDataLink } from "../../../../../../h
 import ModalHeader from "../../../Header/ModalHeader/index.jsx";
 import { formatClassname } from "../../../../../../helpers/ClassesHelper.js";
 import { getInputLabel } from "../../config.js";
+import { useViewContext } from "../../context";
 
 export default function DataLinkGroup({
   form = {},
@@ -25,6 +26,11 @@ export default function DataLinkGroup({
   getToken,
   app,
 }) {
+  const {
+    maxWidth,
+    staticWidth,
+    fullWidth,
+  } = useViewContext();
   const dataLinkKey = useMemo(() =>
     Object.keys(form?.inputs || {}).find((k) => form?.inputs[k]?.type === "dataLink"), [form]);
 
@@ -371,7 +377,11 @@ export default function DataLinkGroup({
   ], [mapKey, inputs, tableKeys, ajaxModalValues]);
 
   return (
-    <div className={formatClassname(['data-link-cont mt-2', noBody && 'no-body'])} style={dataLinkInput?.meta?.style}>
+    <div className={formatClassname(['data-link-cont mt-2', noBody && 'no-body'])} style={{
+      ...dataLinkInput?.meta?.style,
+      maxWidth: fullWidth ? "unset" : maxWidth,
+      width: fullWidth ? "100%" : maxWidth,
+    }}>
       <div className="daf-table-wrapper no-padding repeatable-form-table no-pagination">
         <ConfigProvider renderEmpty={() => notApplicable ? t('Not applicable') : t('No information available')}>
           <Table

package/src/@daf/core/components/ViewForm/content.jsx

@@ -9,6 +9,7 @@ import RepeatableGroup from "./components/repeatableGroup";
 import RepeatableModals from "./components/repeatableModals";
 import { repeatObjects, isGroupInput, groupSubsections, getLastRow, showHideInput } from "./helper";
 import GetIcon from "../Icon/index.jsx";
+import { ViewProvider } from "./context";
 
 const Content = ({
 	style = {},
@@ -30,6 +31,8 @@ const Content = ({
 	user,
 	evaluationConfig = [],
 	fullWidth = false,
+	maxWidth = "75%",
+	staticWidth = "614px",
 }) => {
 	const groupSingle = (grps) => {
 		const form = Object.keys(grps).reduce((f, gKey) => {
@@ -222,6 +225,9 @@ const Content = ({
 												data={data}
 												allData={data}
 												linkingData={linkingData}
+												maxWidth={maxWidth}
+												staticWidth={staticWidth}
+												fullWidth={fullWidth}
 												className={
 													isEven
 														? ind === _length - 1 || ind === _length - 2
@@ -283,6 +289,9 @@ const Content = ({
 									ajaxOptions={ajaxOptions}
 									evaluationConfig={evaluationConfig}
 									cols={2}
+									maxWidth={maxWidth}
+									staticWidth={staticWidth}
+									fullWidth={fullWidth}
 								></Input>
 							</div>
 						) : null;
@@ -352,7 +361,7 @@ const Content = ({
 
 			return (
 				<>
-					<div className="wrapper" key={Date.now()} style={{ width: fullWidth ? "100%" : 700 }}>
+					<div className="wrapper" key={Date.now()} style={{ width: "75%", display: "flex", justifyContent: "center" }}>
 						{f.alertConf ? (
 							<Alert
 								className="w-100"
@@ -377,34 +386,48 @@ const Content = ({
 	}
 
 	return (
-		<div className="content" style={style}>
-			{!hasSubSections ? (
-				renderContent(form)
-			) : (
-				<React.Fragment>
-					<h1 className="title">{form ? getInputLabel(form, data) : ""}</h1>
-					<Tabs
-						className="section-tabs"
-						items={repeatObjects(groupSections, (key) => {
-							const section = groupSections[key];
+		<ViewProvider
+			t={t}
+			app={app}
+			ajaxForms={ajaxForms}
+			changeAjaxForms={changeAjaxForms}
+			getApiBaseUrl={getApiBaseUrl}
+			getAppHeader={getAppHeader}
+			user={user}
+			evaluationConfig={evaluationConfig}
+			fullWidth={fullWidth}
+			maxWidth={maxWidth}
+			staticWidth={staticWidth}
+		>
+			<div className="content" style={style}>
+				{!hasSubSections ? (
+					renderContent(form)
+				) : (
+					<React.Fragment>
+						<h1 className="title">{form ? getInputLabel(form, data) : ""}</h1>
+						<Tabs
+							className="section-tabs"
+							items={repeatObjects(groupSections, (key) => {
+								const section = groupSections[key];
 
-							return {
-								style: { maxHeight: "calc(100vh - 100px)", overflowY: "auto" },
-								label: (
-									<span>
-										{section.icon ? <GetIcon icon={section.icon} /> : null}{" "}
-										{getInputLabel(section, data)}
-									</span>
-								),
-								key: key,
-								tabKey: key,
-								children: renderContent(groupSections[key], false),
-							};
-						})}
-					/>
-				</React.Fragment>
-			)}
-		</div>
+								return {
+									style: { maxHeight: "calc(100vh - 100px)", overflowY: "auto" },
+									label: (
+										<span>
+											{section.icon ? <GetIcon icon={section.icon} /> : null}{" "}
+											{getInputLabel(section, data)}
+										</span>
+									),
+									key: key,
+									tabKey: key,
+									children: renderContent(groupSections[key], false),
+								};
+							})}
+						/>
+					</React.Fragment>
+				)}
+			</div>
+		</ViewProvider>
 	);
 };