@pega/react-sdk-overrides 0.25.7 → 0.25.11

package/lib/designSystemExtension/AlertBanner/AlertBanner.css

@@ -0,0 +1,46 @@
+.alert-banner-title {
+  font-weight: 700;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.alert-banner-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+  font-size: 0.6rem;
+  font-weight: 700;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.alert-banner-badge--urgent {
+  background: var(--app-error-dark-color);
+  color: #fff;
+}
+
+.alert-banner-badge--warning {
+  background: var(--app-warning-color-dark);
+  color: #fff;
+}
+
+.alert-banner-badge--success {
+  background: var(--stepper-completed-bg-color);
+  color: #fff;
+}
+
+.alert-banner-badge--info {
+  background: var(--link-button-color);
+  color: #fff;
+}
+
+.alert-banner-list {
+  margin: 0;
+  padding-left: 1.25rem;
+}

package/lib/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -1,39 +1,56 @@
-import { Alert } from '@mui/material';
+import { Alert, AlertTitle } from '@mui/material';
+import './AlertBanner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
 interface AlertBannerProps {
-  // If any, enter additional props that only exist on Date here
   id: string;
   variant: string;
   messages: string[];
   onDismiss?: any;
 }
 
-const SEVERITY_MAP = {
-  urgent: 'error',
-  warning: 'warning',
-  success: 'success',
-  info: 'info'
+const VARIANT_MAP: Record<string, { severity: string; label: string }> = {
+  urgent: { severity: 'error', label: 'Error' },
+  warning: { severity: 'warning', label: 'Warning' },
+  success: { severity: 'success', label: 'Success' },
+  info: { severity: 'info', label: 'Info' }
 };
 
-export default function AlertBanner(props: AlertBannerProps) {
-  const { id, variant, messages, onDismiss } = props;
-  let additionalProps = {};
+function renderMessage(message: string) {
+  const colonIndex = message.indexOf(':');
+  if (colonIndex === -1) return message;
+  return (
+    <>
+      <strong>{message.slice(0, colonIndex + 1)}</strong>
+      {message.slice(colonIndex + 1)}
+    </>
+  );
+}
 
-  if (onDismiss) {
-    additionalProps = {
-      onClose: onDismiss
-    };
-  }
+export default function AlertBanner({ id, variant, messages, onDismiss }: AlertBannerProps) {
+  const { severity, label } = VARIANT_MAP[variant] ?? VARIANT_MAP.info;
+  const isMultiple = messages.length > 1;
 
   return (
     <div id={id}>
-      {messages.map(message => (
-        <Alert key={message} variant='outlined' severity={SEVERITY_MAP[variant]} {...additionalProps}>
-          {message}
-        </Alert>
-      ))}
+      <Alert variant='outlined' severity={severity as any} {...(onDismiss && { onClose: onDismiss })}>
+        {isMultiple && (
+          <AlertTitle className='alert-banner-title'>
+            {label}
+            <span className={`alert-banner-badge alert-banner-badge--${variant}`}>{messages.length}</span>
+          </AlertTitle>
+        )}
+        {isMultiple ? (
+          <ul className='alert-banner-list'>
+            {messages.map(message => (
+              <li key={message}>{renderMessage(message)}</li>
+            ))}
+          </ul>
+        ) : (
+          renderMessage(messages[0])
+        )}
+      </Alert>
     </div>
   );
 }

package/lib/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -24,7 +24,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
       <Grid2 style={{ width: '100%' }}>
         <Grid2 container spacing={1}>
           {props.items.map(item => (
-            <Grid2 style={{ width: '100%' }}>
+            <Grid2 key={item.name} style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button

package/lib/infra/Assignment/Assignment.tsx

@@ -5,6 +5,8 @@ import CloseIcon from '@mui/icons-material/Close';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { useFocusFirstField, useScrolltoTop } from '@pega/react-sdk-components/lib/hooks';
+import AlertBanner from '@pega/react-sdk-components/lib/components/designSystemExtension/AlertBanner/AlertBanner';
+import { useValidationBanner } from './useValidationBanner';
 
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -23,6 +25,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   const MultiStep = getComponentFromMap('MultiStep');
 
   const { getPConnect, children, itemKey = '', isInModal = false, banners = [] } = props;
+  const validationMessages = useValidationBanner(itemKey);
   const thePConn = getPConnect();
 
   const [bHasNavigation, setHasNavigation] = useState(false);
@@ -33,8 +36,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   const actionsAPI = thePConn.getActionsApi();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'Assignment';
-  const localeReference = getPConnect()?.getCaseLocaleReference();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
@@ -76,7 +79,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   function getStepsInfo(steps, formedSteps: any = []) {
     steps.forEach(step => {
       if (step.name) {
-        step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+        step.name = localizationService.getLocalizedText(step.name);
       }
       if (step.steps) {
         formedSteps = getStepsInfo(step.steps, formedSteps);
@@ -88,8 +91,9 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   }
 
   const scrollId = window.location.href.includes('embedded') ? '#pega-part-of-page' : '#portal';
+  const currentAssignmentViewName = getPConnect().getCaseInfo().getCurrentAssignmentViewName();
   useScrolltoTop(scrollId, children);
-  useFocusFirstField('Assignment', children);
+  useFocusFirstField('Assignment', currentAssignmentViewName);
 
   useEffect(() => {
     if (children) {
@@ -310,6 +314,11 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   return (
     <div id='Assignment'>
+      {validationMessages.length > 0 && (
+        <div style={{ marginBottom: '1rem' }}>
+          <AlertBanner id={`validation-banner-${itemKey}`} variant='urgent' messages={validationMessages} />
+        </div>
+      )}
       {banners}
       {bHasNavigation ? (
         <>

package/lib/infra/Assignment/useValidationBanner.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect, useCallback } from 'react';
+
+function formatError(error: any, localizedVal: Function): string {
+  if (typeof error === 'string') return localizedVal(error, 'Messages');
+  const label = error.label?.endsWith(':') ? error.label : `${error.label}:`;
+  return localizedVal(`${label} ${error.description}`, 'Messages');
+}
+
+/**
+ * Subscribes to the PCore store and returns formatted validation error messages
+ * for the given itemKey. Reacts to any ADD_MESSAGES / CLEAR_MESSAGES dispatch
+ * (blur, tab, submit, etc.) so the banner appears and clears in real time.
+ */
+export function useValidationBanner(itemKey: string): string[] {
+  const [messages, setMessages] = useState<string[]>([]);
+
+  const readMessages = useCallback(() => {
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const errors: any[] = PCore.getMessageManager().getValidationErrorMessages(itemKey) || [];
+    setMessages(errors.map(error => formatError(error, localizedVal)));
+  }, [itemKey]);
+
+  useEffect(() => {
+    readMessages();
+    return PCore.getStore().subscribe(readMessages);
+  }, [readMessages]);
+
+  return messages;
+}

package/lib/infra/Containers/FlowContainer/FlowContainer.tsx

@@ -22,11 +22,10 @@ interface FlowContainerProps extends PConnProps {
   activeContainerItemID: string;
 }
 
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 const useStyles = makeStyles(theme => ({
   root: {

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -13,6 +13,11 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import { getBanners } from '@pega/react-sdk-components/lib/components/helpers/case-utils';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
+
 interface ModalViewContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   loadingInfo?: string;
@@ -310,7 +315,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
 
   return (
     <>
-      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth={false}>
+      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth='sm' fullWidth>
         <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
           {title}
         </DialogTitle>

package/lib/infra/Containers/ViewContainer/ViewContainer.tsx

@@ -17,14 +17,10 @@ interface ViewContainerProps extends PConnProps {
   limit?: number;
 }
 
-// ViewContainer can emit View
-// import View from '../View';
-
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 export default function ViewContainer(props: ViewContainerProps) {
   // const { getPConnect, children, routingInfo, name } = props;

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -13,13 +13,13 @@ interface DeferLoadProps extends PConnProps {
   isTab: boolean;
   deferLoadId: string;
   lastUpdateCaseTime: any;
+  template?: string;
 }
 
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -35,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function DeferLoad(props: DeferLoadProps) {
-  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime } = props;
+  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime, template } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
   const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
@@ -75,7 +75,7 @@ export default function DeferLoad(props: DeferLoadProps) {
     updateData: isContainerPreview
   });
 
-  const onResponse = data => {
+  const onResponse = (data: any, isEditable = false) => {
     setLoading(false);
     if (deferLoadId) {
       PCore.getDeferLoadManager().start(
@@ -92,11 +92,16 @@ export default function DeferLoad(props: DeferLoadProps) {
         meta: data,
         options: {
           context: pConnect.getContextName(),
-          pageReference: pConnect.getPageReference()
+          pageReference: pConnect.getPageReference(),
+          target: pConnect.getTarget(),
+          hasForm: true,
+          viewName: (pConnect as any).viewName
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+      if (!isEditable) {
+        configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+      }
       setContent(createElement(createPConnectComponent(), configObject));
       if (deferLoadId) {
         PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
@@ -132,6 +137,16 @@ export default function DeferLoad(props: DeferLoadProps) {
         .then(data => {
           onResponse(data);
         });
+    } else if (template === 'HierarchicalForm') {
+      const root = {
+        config: {
+          context: pConnect.getPageReference(),
+          name,
+          type: 'view'
+        },
+        type: 'reference'
+      };
+      onResponse(root, true);
     } else {
       getPConnect()
         .getActionsApi()

package/lib/infra/NavBar/NavBar.tsx

@@ -133,19 +133,31 @@ export default function NavBar(props: NavBarProps) {
   const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
   const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
-
+  // @ts-ignore
+  const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || pConn.getValue('.pyLocaleReference');
   useEffect(() => {
-    setNavPages(JSON.parse(JSON.stringify(pages)));
+    const updatedPages = pages.map((page: any) => {
+      const destinationObject: any = {};
+      pConn.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      const name = localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      return { ...page, name };
+    });
+    setNavPages(updatedPages);
   }, [pages]);
 
   function navPanelButtonClick(oPageData: any) {
     const { pyClassName, pyRuleName } = oPageData;
-
     pConn
       .getActionsApi()
       .showPage(pyRuleName, pyClassName)
       .then(() => {
         console.log(`${localizedVal('showPage completed', localeCategory)}`);
+      })
+      .catch(error => {
+        console.error('Failed to navigate to page from NavBar', error);
       });
   }
 
@@ -155,12 +167,14 @@ export default function NavBar(props: NavBarProps) {
       containerName: 'primary',
       flowType: sFlowType || 'pyStartCase'
     };
-
     pConn
       .getActionsApi()
       .createWork(sCaseType, actionInfo)
       .then(() => {
         console.log(`${localizedVal('createWork completed', localeCategory)}`);
+      })
+      .catch(error => {
+        console.error('Failed to create case from NavBar', error);
       });
   }
 
@@ -249,7 +263,7 @@ export default function NavBar(props: NavBarProps) {
         {navPages.map(page => (
           <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeUtils.getCaseLocaleReference(page.pyClassName))} />
+            <ListItemText primary={page.name} />
           </ListItemButton>
         ))}
       </List>

package/lib/infra/Reference/Reference.tsx

@@ -38,6 +38,11 @@ export default function Reference(props: ReferenceProps) {
     pageReference: context && context.startsWith('@CLASS') ? '' : context
   });
 
+  if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
+    const inheritedProps = pConnect.getInheritedProps();
+    referenceConfig.inheritedProps = Object.keys(inheritedProps).map(prop => ({ prop, value: inheritedProps[prop] }));
+  }
+
   viewComponent.props.getPConnect().setInheritedConfig({
     ...referenceConfig,
     readOnly,

package/lib/infra/RootContainer/RootContainer.tsx

@@ -15,11 +15,10 @@ interface RootContainerProps extends PConnProps {
   httpMessages: any[];
 }
 
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 const renderingModes = ['portal', 'view'];
 

package/lib/infra/Stages/Stages.tsx

@@ -57,14 +57,13 @@ export default function Stages(props: StagesProps) {
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
-  const key = getPConnect()?.getCaseLocaleReference();
-
+  const localizationService = pConn.getLocalizationService();
   const filteredStages = getFilteredStages(stages);
   const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
+      name: localizationService.getLocalizedText(stage.name),
       id: theID,
       complete: stage.visited_status === 'completed',
       current: theID === currentStageID,

package/lib/infra/View/View.tsx

@@ -21,13 +21,12 @@ interface ViewProps extends PConnProps {
   type?: any;
 }
 
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
-const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];
+const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide', 'HierarchicalForm'];
 const NO_HEADER_TEMPLATES = [
   'SubTabs',
   'SimpleTable',

package/lib/template/AppShell/AppShell.css

@@ -33,7 +33,3 @@
 .progress-spinner {
   text-align: center;
 }
-
-::ng-deep snack-bar-container.snackbar-newline {
-  white-space: pre-line;
-}

package/lib/template/CaseView/CaseView.tsx

@@ -70,8 +70,9 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const editAction = availableActions.find(action => action.ID === 'pyUpdateCaseDetails');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'CaseView';
-  const localeKey = thePConn?.getCaseLocaleReference();
+
   /**
    *
    * @param inName the metadata <em>name</em> that will cause a region to be returned
@@ -214,7 +215,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
                 className={classes.caseViewHeader}
                 title={
                   <Typography variant='h6' component='div' id='case-name'>
-                    {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                    {localizationService.getLocalizedText(header)}
                   </Typography>
                 }
                 subheader={

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -14,6 +14,7 @@ interface FieldGroupTemplateProps extends PConnProps {
   displayMode?: string;
   fieldHeader?: string;
   allowTableEdit: boolean;
+  allowActions?: any;
 }
 
 export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
@@ -30,6 +31,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     heading = '',
     displayMode,
     fieldHeader,
+    allowActions,
     allowTableEdit: allowAddEdit
   } = props;
   const pConn = getPConnect();
@@ -39,6 +41,11 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
   const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
   const HEADING = heading ?? 'Row';
 
+  const hasAllowActions = Object.keys(allowActions ?? {}).length > 0;
+  const { allowAdd: actionAdd, allowDelete: actionDelete } = allowActions ?? {};
+  const allowAdd = hasAllowActions ? (actionAdd ?? true) : (allowAddEdit ?? true);
+  const allowDelete = hasAllowActions ? (actionDelete ?? true) : (allowAddEdit ?? true);
+
   useLayoutEffect(() => {
     if (!isReadonlyMode) {
       // @ts-expect-error - Expected 3 arguments, but got 1
@@ -72,7 +79,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
         pConn.getListActions().deleteEntry(index);
       }
     };
-    if (referenceList.length === 0 && allowAddEdit !== false) {
+    if (referenceList.length === 0 && allowAdd) {
       addFieldGroupItem();
     }
 
@@ -87,8 +94,8 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     return (
       <FieldGroupList
         items={MemoisedChildren}
-        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}
-        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}
+        onAdd={allowAdd ? addFieldGroupItem : undefined}
+        onDelete={allowDelete ? deleteFieldGroupItem : undefined}
       />
     );
   }

package/lib/template/HierarchicalForm/HierarchicalForm.tsx

@@ -0,0 +1,58 @@
+import { type PropsWithChildren } from 'react';
+import { Tab, Tabs, Box, Badge, Tooltip } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+
+import { useHierarchicalForm, type HierarchicalFormProps } from './hooks';
+
+export default function HierarchicalForm(props: PropsWithChildren<HierarchicalFormProps>) {
+  const { currentTabId, handleTabClick, processedTabs, instructions } = useHierarchicalForm(props);
+
+  if (!currentTabId) {
+    return null;
+  }
+
+  return (
+    <Box display='flex' flexDirection='column'>
+      {instructions && (
+        <Box mb={2}>
+          <div dangerouslySetInnerHTML={{ __html: instructions }} />
+        </Box>
+      )}
+      <Box sx={{ flexGrow: 1 }}>
+        <TabContext value={currentTabId.toString()}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs onChange={handleTabClick} value={currentTabId.toString()} variant='scrollable'>
+              {processedTabs.map((tab: any) => {
+                const tabLabel = tab.name || tab.label;
+                return (
+                  <Tab
+                    key={tab.id}
+                    sx={{ textTransform: 'none' }}
+                    label={
+                      tab.errors ? (
+                        <Tooltip title={`${tabLabel} has errors`} placement='top'>
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <span>{tabLabel}</span>
+                            <Badge badgeContent={tab.errors} color='error' sx={{ '& .MuiBadge-badge': { position: 'static', transform: 'none' } }} />
+                          </Box>
+                        </Tooltip>
+                      ) : (
+                        tabLabel
+                      )
+                    }
+                    value={tab.id?.toString()}
+                  />
+                );
+              })}
+            </Tabs>
+          </Box>
+          {processedTabs.map((tab: any) => (
+            <TabPanel key={tab.id} value={tab.id?.toString()} tabIndex={+tab.id} keepMounted sx={{ px: 0 }}>
+              <div>{tab.content ? tab.content : 'No content exists'}</div>
+            </TabPanel>
+          ))}
+        </TabContext>
+      </Box>
+    </Box>
+  );
+}