openmcp-project · Lasserich · Aug 28, 2025 · Aug 28, 2025 · Sep 8, 2025 · Sep 8, 2025
diff --git a/index.html b/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/logo.png" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>MCP</title>
+  <title>ManagedControlPlane UI</title>
 </head>
 
 <body>

diff --git a/public/co-logo-orchestrating-dark.png b/public/co-logo-orchestrating-dark.png
diff --git a/public/co-logo-orchestrating.png b/public/co-logo-orchestrating.png
diff --git a/public/eso_dark.png b/public/eso_dark.png
diff --git a/public/eso_light.png b/public/eso_light.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/kyverno.svg b/public/kyverno.svg
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -15,6 +15,9 @@
   "ComponentList": {
     "tableComponentHeader": "Name",
     "tableVersionHeader": "Version"
+  },
+  "MemberList": {
+
   },
   "FluxList": {
     "tableNameHeader": "Name",
@@ -23,6 +26,7 @@
     "tableVersionHeader": "Revision",
     "noFluxError": "Please install flux to view this component",
     "gitOpsTitle": "GitOps",
+    "repositoriesTitle": "Repositories",
     "kustomizationsTitle": "Kustomizations",
     "undefinedError": "Something went wrong"
   },
@@ -346,6 +350,7 @@
     "btp": "BTP",
     "error": "Error",
     "ready": "Ready",
+    "notReady": "Not Ready",
     "synced": "Synced",
     "healthy": "Healthy",
     "installed": "Installed",
@@ -354,7 +359,14 @@
     "unhealthy": "Unhealthy",
     "progress": "Managed",
     "remaining": "Remaining",
-    "active": "Active"
+    "active": "Active",
+    "inactive": "Inactive",
+    "comingSoon": "Coming soon...",
+    "providers": "Provider",
+    "health": "Health",
+    "serviceaccounts": "ServiceAccounts",
+    "loading": "Loading...",
+    "resources": "Status"
   },
   "errors": {
     "installError": "Install error",
@@ -390,44 +402,48 @@
   "Hints": {
     "CrossplaneHint": {
       "title": "Crossplane",
-      "subtitle": "Managed Resources Readiness",
+      "subtitle": "Manage your cloud landscape in code",
       "activeStatus": "Active v",
-      "progressAvailable": "% Available",
+      "progressAvailable": "Available",
       "noResources": "No Resources",
       "inactive": "Inactive",
       "activate": "Activate",
-      "healthy": "Healthy",
-      "hoverContent": {
-        "totalResources": "Total Resources",
-        "healthy": "Healthy",
-        "creating": "Creating", 
-        "failing": "Failing"
-      }
+      "healthy": "Healthy"
     },
     "GitOpsHint": {
       "title": "Flux",
-      "subtitle": "GitOps Progress",
+      "subtitle": "Persist desired state in code repositories",
       "activeStatus": "Active v",
-      "progressAvailable": "% Available",
+      "progressAvailable": "Available",
       "noResources": "No Resources",
       "inactive": "Inactive",
       "activate": "Activate",
-      "managed": "Managed",
-      "hoverContent": {
-        "totalResources": "Total Resources",
-        "managed": "Managed",
-        "unmanaged": "Unmanaged"
-      }
+      "managed": "Persisted"
     },
-    "VaultHint": {
-      "title": "Vault",
-      "subtitle": "Rotating Secrets Progress",
+    "MembersHint": {
+      "title": "Members",
+      "subtitle": "Manage access to your Managed Control Plane",
+      "users": "Users",
+      "serviceAccounts": "Service Accounts"
+    },
+    "ESOHint": {
+      "title": "External Secrets",
+      "subtitle": "Secure secrets with rotation",
       "activeStatus": "Active v",
-      "progressAvailable": "% Available",
+      "progressAvailable": "Available",
       "noResources": "No Resources",
       "inactive": "Coming soon...",
       "activate": "Activate"
     },
+    "KyvernoHint": {
+      "title": "Kyverno",
+      "subtitle": "Enforce policies",
+      "activeStatus": "Active v",
+      "progressAvailable": "Available",
+      "noResources": "No Resources",
+      "inactive": "Inactive",
+      "activate": "Activate"
+    },
     "common": {
       "loading": "Loading...",
       "errorLoadingResources": "Error loading resources",

diff --git a/public/logo.png b/public/logo.png
diff --git a/public/members.svg b/public/members.svg
diff --git a/public/vault.png b/public/vault.png
diff --git a/src/components/BentoGrid/BentoGrid.module.css b/src/components/BentoGrid/BentoGrid.module.css
@@ -0,0 +1,92 @@
+/* Bento Grid Layout - 12 columns x 6 rows */
+.bentoGrid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  gap: 24px;
+  width: 100%;
+  height: 600px; /* Fixed height for the entire grid */
+  position: relative;
+}
+
+/* Base card styling */
+.bentoCard {
+  border-radius: 18px; /* Increased to match or slightly exceed ui5-card */
+  overflow: hidden;
+  background: var(--sapTile_Background);
+  border: 1px solid var(--sapTile_BorderColor);
+  box-shadow: var(--sapContent_Shadow0); /* Reduced shadow intensity */
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.bentoCard:hover {
+  box-shadow: var(--sapContent_Shadow1); /* Reduced hover shadow intensity */
+  transform: translateY(-2px);
+}
+
+/* Card sizes are explicitly positioned via gridColumn/gridRow props */
+/* Layout: 
+   - Left: Extra large graph (8 cols x 4 rows) + Large crossplane (8 cols x 2 rows)
+   - Right: Two medium GitOps (4 cols x 2 rows each) + Two small underneath (2 cols x 2 rows each)
+*/
+
+/* Fallback positioning for cards in case the layout breaks */
+.card-small {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.card-medium {
+  grid-column: span 3;
+  grid-row: span 2;
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .bentoCard {
+    background: var(--sapTile_Background);
+    border-color: var(--sapTile_BorderColor);
+  }
+}
+
+/* Responsive behavior - simplified as requested */
+@media (max-width: 768px) {
+  .bentoGrid {
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(10, 1fr);
+    height: 1000px;
+  }
+
+  .card-extra-large {
+    grid-column: 1 / 7;
+    grid-row: 1 / 5;
+  }
+
+  .card-large {
+    grid-column: 1 / 7;
+    grid-row: 5 / 7;
+  }
+
+  .card-medium:nth-of-type(3) {
+    grid-column: 1 / 7;
+    grid-row: 7 / 9;
+  }
+
+  .card-medium:nth-of-type(4) {
+    grid-column: 1 / 7;
+    grid-row: 9 / 11;
+  }
+
+  .card-small:nth-of-type(5) {
+    grid-column: 1 / 4;
+    grid-row: 11 / 13;
+  }
+
+  .card-small:nth-of-type(6) {
+    grid-column: 4 / 7;
+    grid-row: 11 / 13;
+  }
+}
diff --git a/src/components/BentoGrid/BentoGrid.tsx b/src/components/BentoGrid/BentoGrid.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from './BentoGrid.module.css';
+
+export type CardSize = 'small' | 'medium' | 'large' | 'extra-large';
+
+export interface BentoCardProps {
+  size: CardSize;
+  children: React.ReactNode;
+  className?: string;
+  gridColumn?: string;
+  gridRow?: string;
+}
+
+export interface BentoGridProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const BentoCard: React.FC<BentoCardProps> = ({ size, children, className = '', gridColumn, gridRow }) => {
+  const cardClass = `${styles.bentoCard} ${styles[`card-${size}`]} ${className}`;
+
+  const style: React.CSSProperties = {};
+  if (gridColumn) style.gridColumn = gridColumn;
+  if (gridRow) style.gridRow = gridRow;
+
+  return (
+    <div className={cardClass} style={style}>
+      {children}
+    </div>
+  );
+};
+
+export const BentoGrid: React.FC<BentoGridProps> = ({ children, className = '' }) => {
+  return <div className={`${styles.bentoGrid} ${className}`}>{children}</div>;
+};
diff --git a/src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.module.css b/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;
+}