feat: refactor code

Author: Lasserich

public/locales/en.json

@@ -357,7 +357,12 @@
     "unhealthy": "Unhealthy",
     "progress": "Managed",
     "remaining": "Remaining",
-    "active": "Active"
+    "active": "Active",
+    "inactive": "Inactive",
+    "providers": "Provider",
+    "health": "Health",
+    "serviceaccounts": "ServiceAccounts",
+    "loading": "Loading..."
   },
   "errors": {
     "installError": "Install error",
@@ -399,13 +404,7 @@
       "noResources": "No Resources",
       "inactive": "Inactive",
       "activate": "Activate",
-      "healthy": "Healthy",
-      "hoverContent": {
-        "totalResources": "Total Resources",
-        "healthy": "Healthy",
-        "creating": "Creating", 
-        "failing": "Failing"
-      }
+      "healthy": "Healthy"
     },
     "GitOpsHint": {
       "title": "Flux",
@@ -415,12 +414,7 @@
       "noResources": "No Resources",
       "inactive": "Inactive",
       "activate": "Activate",
-      "managed": "Managed",
-      "hoverContent": {
-        "totalResources": "Total Resources",
-        "managed": "Managed",
-        "unmanaged": "Unmanaged"
-      }
+      "managed": "Persisted"
     },
     "MembersHint": {
       "title": "Members",

src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.module.css

@@ -0,0 +1,60 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.disabled {
+  opacity: 0.6;
+  user-select: none; 
+  pointer-events: none; 
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.disabledOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: transparent;
+  object-fit: cover;
+}
+
+.expandButton {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  min-width: 32px;
+  height: 32px;
+  z-index: 10;
+}
+
+.expandButtonSmall {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  min-width: 24px;
+  height: 24px;
+  z-index: 10;
+}

src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.tsx

@@ -0,0 +1,83 @@
+import { Card, CardHeader, Button } from '@ui5/webcomponents-react';
+import { useTranslation } from 'react-i18next';
+import cx from 'clsx';
+import { ReactNode } from 'react';
+import styles from './BaseCard.module.css';
+
+interface BaseCardProps {
+  title: string;
+  subtitle?: string;
+  iconSrc: string;
+  iconAlt: string;
+  iconStyle?: React.CSSProperties;
+  version?: string;
+  enabled: boolean;
+  onClick?: () => void;
+  expanded?: boolean;
+  size?: 'small' | 'medium' | 'large' | 'extra-large';
+  children: ReactNode;
+}
+
+export const BaseCard = ({
+  title,
+  subtitle,
+  iconSrc,
+  iconAlt,
+  iconStyle,
+  version,
+  enabled,
+  onClick,
+  expanded = false,
+  size = 'medium',
+  children,
+}: BaseCardProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.container}>
+      <Card
+        header={
+          <CardHeader
+            additionalText={enabled && version ? `v${version}` : undefined}
+            avatar={
+              <img
+                src={iconSrc}
+                alt={iconAlt}
+                className={styles.avatar}
+                style={{
+                  ...iconStyle,
+                }}
+              />
+            }
+            titleText={title}
+            subtitleText={size === 'small' ? undefined : subtitle}
+            interactive={enabled}
+          />
+        }
+        className={cx(styles.card, {
+          [styles.disabled]: !enabled,
+          [styles.clickable]: !!onClick && enabled,
+        })}
+        onClick={enabled ? onClick : undefined}
+      >
+        {!enabled && <div className={styles.disabledOverlay} />}
+
+        {onClick && enabled && (
+          <Button
+            icon={expanded ? 'sap-icon://collapse' : 'sap-icon://expand'}
+            design="Transparent"
+            tooltip={expanded ? t('common.collapse') : t('common.expand')}
+            style={{ zIndex: 1 }}
+            className={size === 'small' ? styles.expandButtonSmall : styles.expandButton}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClick();
+            }}
+          />
+        )}
+
+        {children}
+      </Card>
+    </div>
+  );
+};