feat: enhance NoProfilerBanner with improved layout and styling; add SummaryCardV1 component and update translations

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/NoProfilerBanner/NoProfilerBanner.component.tsx

@@ -10,33 +10,81 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Chip } from '@mui/material';
+import { Button, Chip, Grid, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as RightArrowIcon } from '../../../../../assets/svg/right-arrow.svg';
 import { ReactComponent as NoDataIcon } from '../../../../../assets/svg/ticket-with-check.svg';
 import documentationLinksClassBase from '../../../../../utils/DocumentationLinksClassBase';
+import './no-profiler-banner.less';
 
 const NoProfilerBanner = () => {
+  const theme = useTheme();
   const { t } = useTranslation();
   const profilerDocsLink =
     documentationLinksClassBase.getDocsURLS()
       .DATA_QUALITY_PROFILER_WORKFLOW_DOCS;
 
   return (
-    <div data-testid="no-profiler-placeholder">
-      <Chip color="secondary" icon={<NoDataIcon />} variant="outlined" />
+    <Grid
+      container
+      className="no-profiler-banner-container"
+      data-testid="no-profiler-placeholder"
+      spacing={4}>
+      <Grid size="auto">
+        <Chip
+          color="secondary"
+          icon={<NoDataIcon />}
+          sx={{
+            backgroundColor: theme.palette.allShades.white,
+            height: '40px',
+            width: '40px',
+            borderRadius: '8px',
+            '.MuiChip-icon': {
+              m: 0,
+            },
+          }}
+          variant="outlined"
+        />
+      </Grid>
 
-      <p className="m-l-xs" data-testid="error-msg">
-        {t('message.no-profiler-message')}
+      <Grid size={9}>
+        <p className="profiler-title">{t('message.no-profiler-title')}</p>
+        <p className="profiler-description">
+          {t('message.no-profiler-message')}
+        </p>
+      </Grid>
+
+      <Grid
+        size="grow"
+        sx={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center',
+        }}>
         <a
           data-testid="documentation-link"
           href={profilerDocsLink}
           rel="noreferrer"
           target="_blank"
           title="data quality observability profiler workflow">
-          {`${t('label.here-lowercase')}.`}
+          <Button
+            endIcon={<RightArrowIcon />}
+            sx={(theme) => ({
+              color: theme.palette.primary.main,
+              fontWeight: 600,
+              '.MuiButton-endIcon>svg': {
+                width: '12px',
+                height: '12px',
+              },
+              '&:hover': {
+                color: theme.palette.primary.main,
+              },
+            })}>
+            {t('label.learn-more')}
+          </Button>
         </a>
-      </p>
-    </div>
+      </Grid>
+    </Grid>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/NoProfilerBanner/no-profiler-banner.less

@@ -0,0 +1,20 @@
+.no-profiler-banner-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border-radius: 10px;
+  background: #fafafc;
+  padding: 16px;
+
+  .profiler-description {
+    color: #364254;
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .profiler-title {
+    color: #21263c;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx

@@ -11,9 +11,9 @@
  *  limitations under the License.
  */
 
+import { Grid } from '@mui/material';
 import { Col, Row } from 'antd';
 import { AxiosError } from 'axios';
-import classNames from 'classnames';
 import { pick } from 'lodash';
 import { DateRangeObject } from 'Models';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -39,7 +39,7 @@ import {
 } from '../../../../../utils/TableProfilerUtils';
 import { showErrorToast } from '../../../../../utils/ToastUtils';
 import ErrorPlaceHolder from '../../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
-import { SummaryCard } from '../../../../common/SummaryCard/SummaryCard.component';
+import SummaryCardV1 from '../../../../common/SummaryCard/SummaryCardV1';
 import CustomBarChart from '../../../../Visualisations/Chart/CustomBarChart';
 import OperationDateBarChart from '../../../../Visualisations/Chart/OperationDateBarChart';
 import { MetricChartType } from '../../ProfilerDashboard/profilerDashboard.interface';
@@ -225,23 +225,21 @@ const TableProfilerChart = ({
             </Col>
           )}
           <Col span={24}>
-            <NoProfilerBanner />
-          </Col>
-          <Col span={24}>
-            <Row wrap className="justify-between" gutter={[16, 16]}>
+            <Grid container spacing={5}>
               {overallSummary?.map((summary) => (
-                <Col key={summary.title}>
-                  <SummaryCard
+                <Grid key={summary.title} size="grow">
+                  {/* <SummaryCard
                     className={classNames(summary.className, 'h-full')}
                     isLoading={isSummaryLoading}
                     showProgressBar={false}
                     title={summary.title}
                     total={0}
                     value={summary.value}
-                  />
-                </Col>
+                  /> */}
+                  <SummaryCardV1 />
+                </Grid>
               ))}
-            </Row>
+            </Grid>
           </Col>
         </>
       )}

openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx

@@ -0,0 +1,64 @@
+import { Box, Card, Chip, Typography } from '@mui/material';
+import { ReactComponent as NoDataIcon } from '../../../assets/svg/ticket-with-check.svg';
+
+const SummaryCardV1 = () => {
+  return (
+    <Box>
+      <Card
+        sx={{
+          borderRadius: '12px',
+          border: '1px solid #E9E9F5',
+          boxShadow: '0 4px 3px 0 rgba(235, 239, 250, 0.25)',
+          minWidth: '210px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 3,
+          p: '20px',
+          width: '100%',
+        }}
+        variant="outlined">
+        <Chip
+          color="secondary"
+          icon={<NoDataIcon />}
+          sx={{
+            backgroundColor: 'white',
+            height: '40px',
+            width: '40px',
+            borderRadius: '8px',
+            '.MuiChip-icon': {
+              m: 0,
+            },
+          }}
+          variant="outlined"
+        />
+        <Box>
+          <Typography sx={{ fontSize: '18px', fontWeight: 600 }} variant="h6">
+            1245
+          </Typography>
+          <Typography
+            color="text.secondary"
+            sx={{ fontSize: '14px', fontWeight: 500 }}>
+            Row Count
+          </Typography>
+        </Box>
+      </Card>
+      <Box
+        sx={{
+          mt: 0,
+          mx: 2,
+          px: 2,
+          py: 1,
+          background: '#F8F9FC',
+          borderRadius: '0 0 12px 12px',
+          boxShadow: '0 4px 3px 0 rgba(235, 239, 250, 0.10)',
+          border: 'none',
+        }}>
+        <Typography sx={{ fontSize: 10, fontWeight: 500 }}>
+          Last updated: Sep 17, 2025 12:34 PM
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default SummaryCardV1;

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -2241,6 +2241,7 @@
     "no-persona-assigned": "No persona assigned",
     "no-persona-message": "Personas are necessary to customize the landing page. Please create a persona from <0>{{link}}</0>",
     "no-profiler-card-message-with-link": "Enable the profiler to discover valuable insights about your table. Visit our documentation for setup steps <0>here</0>",
+    "no-profiler-title": "Run Profiler to Unlock Table Insights",
     "no-profiler-message": "Explore your table's metrics by running the profiler workflow. You'll see Row Count, Table Updates, Volume Changes, and more. Visit our documentation for setup steps ",
     "no-recently-viewed-date": "You haven't viewed any data assets recently. Explore to find something interesting!",
     "no-reference-available": "No references available.",

openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx

@@ -129,7 +129,6 @@ import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface';
 import { GenericTab } from '../components/Customization/GenericTab/GenericTab';
 import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets';
 import DataObservabilityTab from '../components/Database/Profiler/DataObservability/DataObservabilityTab';
-import TableProfiler from '../components/Database/Profiler/TableProfiler/TableProfiler';
 import SampleDataTableComponent from '../components/Database/SampleDataTable/SampleDataTable.component';
 import SchemaTable from '../components/Database/SchemaTable/SchemaTable.component';
 import TableQueries from '../components/Database/TableQueries/TableQueries';
@@ -868,22 +867,6 @@ export const getTableDetailPageBaseTabs = ({
         />
       ),
     },
-    {
-      label: (
-        <TabsLabel
-          id={EntityTabs.PROFILER + 'old'}
-          name={get(
-            labelMap,
-            EntityTabs.PROFILER,
-            t('label.data-observability')
-          )}
-        />
-      ),
-      key: EntityTabs.PROFILER + 'old',
-      children: (
-        <TableProfiler permissions={tablePermissions} table={tableDetails} />
-      ),
-    },
     {
       label: (
         <TabsLabel