admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Replace connected account table with table card (#10838)

Browse Source 
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"
/>
This commit is contained in:
nitin
2025-03-13 13:00:44 +05:30
committed by GitHub
parent 8cb5d4aa68
commit c0ca09492c
1 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx
View File

@ -1,11 +1,11 @@
import { Table } from '@/ui/layout/table/components/Table'; import { SettingsAdminTableCard } from '@/settings/admin-panel/components/SettingsAdminTableCard';
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 styled from '@emotion/styled'; 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 = ({ export const SettingsAdminHealthAccountSyncCountersTable = ({
details, details,
@ -18,38 +18,42 @@ export const SettingsAdminHealthAccountSyncCountersTable = ({
return null; 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 ( return (
<StyledContainer> <Section>
<H2Title <H2Title
title={title} title={title}
description={`How your ${title.toLowerCase()} is doing`} description={`How your ${title.toLowerCase()} is doing`}
/> />
<Table> <StyledSettingsAdminTableCard
<TableRow> items={items}
<TableHeader>Status</TableHeader> rounded
<TableHeader align="right">Count</TableHeader> gridAutoColumns="1fr 1fr"
</TableRow> labelAlign="left"
<TableRow> valueAlign="right"
<TableCell>Not Synced</TableCell> />
<TableCell align="right">{details.counters.NOT_SYNCED}</TableCell> </Section>
</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>
); );
}; };