feat: UI/UX: Standardize headers, improve KIT features layout and fix visual bugs

ichub-frontend/src/components/common/PageSectionHeader.tsx

@@ -0,0 +1,123 @@
+/********************************************************************************
+ * Eclipse Tractus-X - Industry Core Hub Frontend
+ *
+ * Copyright (c) 2025 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the
+ * License for the specific language govern in permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { ReactNode } from 'react';
+import { Box, Typography } from '@mui/material';
+import { KitTheme } from '@/theme/colors';
+
+interface PageSectionHeaderProps {
+  /** MUI icon (or any ReactNode) rendered inside the themed gradient badge */
+  icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  /** KIT-specific color tokens from kitThemes in @/theme/colors */
+  kitTheme: KitTheme;
+  /**
+   * Free-form right-side slot: buttons, chips, menus — anything.
+   * The component applies no opinion on how actions are laid out internally;
+   * each page is responsible for its own responsive behaviour.
+   */
+  actions?: ReactNode;
+}
+
+/**
+ * Standardised page-section header used across all KIT feature pages.
+ *
+ * Layout (left → right):
+ *   [Gradient icon badge]  [Title + optional subtitle]  [actions slot]
+ *
+ * The component owns no bottom margin — the calling page should wrap it in
+ * a <Box sx={{ mb: ... }}> or similar to control vertical spacing.
+ */
+export default function PageSectionHeader({
+  icon,
+  title,
+  subtitle,
+  kitTheme,
+  actions,
+}: PageSectionHeaderProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+        flexWrap: { xs: 'wrap', sm: 'nowrap' },
+      }}
+    >
+      {/* Themed icon badge */}
+      <Box
+        sx={{
+          flexShrink: 0,
+          width: { xs: 48, sm: 56 },
+          height: { xs: 48, sm: 56 },
+          borderRadius: '12px',
+          background: `linear-gradient(135deg, ${kitTheme.gradientStart} 0%, ${kitTheme.gradientEnd} 100%)`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxShadow: `0 4px 16px ${kitTheme.shadowColor}`,
+          '& .MuiSvgIcon-root': {
+            fontSize: { xs: 28, sm: 32 },
+            color: '#fff',
+          },
+        }}
+      >
+        {icon}
+      </Box>
+
+      {/* Title + subtitle */}
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <Typography
+          variant="h4"
+          sx={{
+            color: '#fff',
+            fontWeight: 700,
+            fontSize: { xs: '1.5rem', sm: '2rem', md: '2.25rem' },
+            lineHeight: 1.2,
+          }}
+        >
+          {title}
+        </Typography>
+        {subtitle && (
+          <Typography
+            variant="body1"
+            sx={{
+              color: 'rgba(255, 255, 255, 0.6)',
+              fontSize: { xs: '0.875rem', sm: '1rem' },
+              mt: 0.25,
+            }}
+          >
+            {subtitle}
+          </Typography>
+        )}
+      </Box>
+
+      {/* Free-form actions slot */}
+      {actions && (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexShrink: 0 }}>
+          {actions}
+        </Box>
+      )}
+    </Box>
+  );
+}

ichub-frontend/src/components/common/VerticalBackStrip.tsx

@@ -0,0 +1,91 @@
+/********************************************************************************
+ * Eclipse Tractus-X - Industry Core Hub Frontend
+ *
+ * Copyright (c) 2025 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the
+ * License for the specific language govern in permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Box, Tooltip } from '@mui/material';
+import { ChevronLeft } from '@mui/icons-material';
+
+interface VerticalBackStripProps {
+  onClick: () => void;
+  tooltip?: string;
+  /** Width of the sidebar in px. Defaults to 72. */
+  sidebarWidth?: number;
+  /** Height of the header in px. Defaults to 68.8. */
+  headerHeight?: number;
+}
+
+const VerticalBackStrip = ({
+  onClick,
+  tooltip = 'Go back',
+  sidebarWidth = 72,
+  headerHeight = 68.8,
+}: VerticalBackStripProps) => {
+  return (
+    <Tooltip title={tooltip} placement="right" arrow>
+      <Box
+        onClick={onClick}
+        role="button"
+        aria-label={tooltip}
+        tabIndex={0}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClick(); }}
+        sx={{
+          position: 'fixed',
+          left: `${sidebarWidth}px`,
+          top: `${headerHeight}px`,
+          bottom: 0,
+          width: '18px',
+          zIndex: 1199,
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: 'rgba(87, 106, 143, 0.85)',
+          borderLeft: '3px solid rgba(255, 255, 255, 0.3)',
+          borderRight: '1px solid rgba(255,255,255,0.1)',
+          transition: 'width 0.2s ease, background 0.2s ease, border-left-color 0.2s ease',
+          '&:hover': {
+            width: '34px',
+            background: 'rgba(87, 106, 143, 1)',
+            borderLeftColor: 'rgba(255, 255, 255, 0.5)',
+          },
+          '&:hover .back-icon': {
+            color: '#ffffff',
+            opacity: 1,
+          },
+          backdropFilter: 'blur(4px)',
+        }}
+      >
+        <ChevronLeft
+          className="back-icon"
+          sx={{
+            fontSize: '1.1rem',
+            color: '#ffffff',
+            opacity: 1,
+            transition: 'color 0.2s ease, opacity 0.2s ease',
+            flexShrink: 0,
+          }}
+        />
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default VerticalBackStrip;

ichub-frontend/src/components/general/Sidebar.tsx

@@ -44,7 +44,7 @@ const Sidebar = ({ items: _items }: { items: SidebarItem[] }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const previousPath = useRef<string>('/catalog');
-  const isKitFeaturesActive = location.pathname === kitFeaturesConfig.navigationPath;
+  const isKitFeaturesActive = location.pathname === kitFeaturesConfig.navigationPath || location.pathname === '/';
   const { enabledFeatures } = useFeatures();
 
   // Get all enabled features dynamically
@@ -162,22 +162,6 @@ const Sidebar = ({ items: _items }: { items: SidebarItem[] }) => {
         </SidebarTooltip>
       </Box>
 
-      {/* Overlay for closing panel */}
-      {showFeaturesPanel && (
-        <Box
-          sx={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 1000000,
-            backgroundColor: 'transparent'
-          }}
-          onClick={handleCloseFeaturesPanel}
-        />
-      )}
-
       {/* Features Panel */}
       <FeaturesPanel
         isOpen={showFeaturesPanel}

ichub-frontend/src/features/business-partner-kit/partner-management/pages/PartnersList.tsx

@@ -25,9 +25,12 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { PartnerInstance } from "@/features/business-partner-kit/partner-management/types/types";
 import TablePagination from '@mui/material/TablePagination';
-import { Typography, Grid2, Button, Alert } from '@mui/material';
+import { Grid2, Button, Alert, Box } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
+import GroupAddIcon from '@mui/icons-material/GroupAdd';
 import ReportProblemIcon from '@mui/icons-material/ReportProblem';
+import PageSectionHeader from '@/components/common/PageSectionHeader';
+import { kitThemes } from '@/theme/colors';
 import { PartnerCard } from "@/features/business-partner-kit/partner-management/components/partners-list/PartnerCard";
 import CreatePartnerDialog from "@/features/business-partner-kit/partner-management/components/general/CreatePartnerDialog";
 import { fetchPartners } from '@/features/business-partner-kit/partner-management/api';
@@ -176,17 +179,37 @@ const PartnersList = () => {
   }
 
   return (
-    <>
-      <Grid2 className="product-catalog" container spacing={1} direction="row">
-        <Grid2 className="title flex flex-content-center">
-          <Typography className="text">
-            {t('page.title')}
-          </Typography>
-        </Grid2>
+    <Box sx={{ p: { xs: 2, sm: 3, md: 4 } }}>
+      <Box sx={{ mb: 4 }}>
+        <PageSectionHeader
+          icon={<GroupAddIcon />}
+          title={t('page.title')}
+          subtitle={t('page.subtitle')}
+          kitTheme={kitThemes.businessPartner}
+          actions={
+            <Button
+              className="add-button"
+              variant="contained"
+              onClick={handleOpenCreatePartnerDialog}
+              startIcon={<AddIcon />}
+              sx={{
+                background: `linear-gradient(135deg, ${kitThemes.businessPartner.gradientStart} 0%, ${kitThemes.businessPartner.gradientEnd} 100%)`,
+                color: '#fff',
+                borderRadius: { xs: '10px', md: '12px' },
+                fontWeight: 600,
+                textTransform: 'none',
+                boxShadow: `0 4px 16px ${kitThemes.businessPartner.shadowColor}`,
+                transition: 'all 0.2s ease',
+                '&:hover': { filter: 'brightness(1.1)', boxShadow: `0 6px 24px ${kitThemes.businessPartner.shadowColor}`, transform: 'translateY(-1px)' }
+              }}
+            >
+              {t('page.createContact')}
+            </Button>
+          }
+        />
+      </Box>
 
-        <Grid2 size={12} container justifyContent="flex-end" marginRight={6} marginBottom={2}>
-          <Button className="add-button" variant="outlined" size="small" onClick={handleOpenCreatePartnerDialog} startIcon={<AddIcon />} >{t('common:actions.new')}</Button>
-        </Grid2>
+      <Grid2 className="product-catalog" container spacing={1} direction="row">
 
         {/* Error State */}
         {error && (
@@ -255,7 +278,7 @@ const PartnersList = () => {
       </Grid2>
 
       <CreatePartnerDialog open={createPartnerDialogOpen} onClose={handleCloseCreatePartnerDialog} onSave={handleCreatePartner} partnerData={editingPartner}/>
-    </>
+    </Box>
   );
 };