From c0ca09492c25e33205f6f2556860804236408fab Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Thu, 13 Mar 2025 13:00:44 +0530
Subject: [PATCH] Replace connected account table with table card (#10838)

before:
<img width="624" alt="Screenshot 2025-03-13 at 12 45 03"
src="https://github.com/user-attachments/assets/be09194a-66bb-4e39-afc1-9dd11c89dcef"
/>
after:
<img width="619" alt="Screenshot 2025-03-13 at 12 44 39"
src="https://github.com/user-attachments/assets/759f87c3-995c-4be4-8523-42f5e805ca83"
/>
---
 ...ngsAdminHealthAccountSyncCountersTable.tsx | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx
index f8831b427..f850feab2 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx
@@ -1,11 +1,11 @@
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { SettingsAdminTableCard } from '@/settings/admin-panel/components/SettingsAdminTableCard';
 import styled from '@emotion/styled';
-import { H2Title } from 'twenty-ui';
+import { H2Title, Section } from 'twenty-ui';
 
-const StyledContainer = styled.div``;
+const StyledSettingsAdminTableCard = styled(SettingsAdminTableCard)`
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
 
 export const SettingsAdminHealthAccountSyncCountersTable = ({
   details,
@@ -18,38 +18,42 @@ export const SettingsAdminHealthAccountSyncCountersTable = ({
     return null;
   }
 
+  const items = [
+    {
+      label: 'Not Synced',
+      value: details.counters.NOT_SYNCED,
+    },
+    {
+      label: 'Active Sync',
+      value: details.counters.ACTIVE,
+    },
+    {
+      label: 'Total Jobs',
+      value: details.totalJobs,
+    },
+    {
+      label: 'Failed Jobs',
+      value: details.failedJobs,
+    },
+    {
+      label: 'Failure Rate',
+      value: `${details.failureRate}%`,
+    },
+  ];
+
   return (
-    <StyledContainer>
+    <Section>
       <H2Title
         title={title}
         description={`How your ${title.toLowerCase()} is doing`}
       />
-      <Table>
-        <TableRow>
-          <TableHeader>Status</TableHeader>
-          <TableHeader align="right">Count</TableHeader>
-        </TableRow>
-        <TableRow>
-          <TableCell>Not Synced</TableCell>
-          <TableCell align="right">{details.counters.NOT_SYNCED}</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Active Sync</TableCell>
-          <TableCell align="right">{details.counters.ACTIVE}</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Total Jobs</TableCell>
-          <TableCell align="right">{details.totalJobs}</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Failed Jobs</TableCell>
-          <TableCell align="right">{details.failedJobs}</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Failure Rate</TableCell>
-          <TableCell align="right">{details.failureRate}%</TableCell>
-        </TableRow>
-      </Table>
-    </StyledContainer>
+      <StyledSettingsAdminTableCard
+        items={items}
+        rounded
+        gridAutoColumns="1fr 1fr"
+        labelAlign="left"
+        valueAlign="right"
+      />
+    </Section>
   );
 };