refactor + new account sync metrics + isolating health status inside folder admin-panel > health-status (#10314)

closes https://github.com/twentyhq/core-team-issues/issues/444
https://github.com/twentyhq/core-team-issues/issues/443
https://github.com/twentyhq/core-team-issues/issues/442

packages/twenty-front/src/modules/settings/components/SettingsCard.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronRight, Pill, Card, CardContent } from 'twenty-ui';
+import { Card, CardContent, IconChevronRight, Pill } from 'twenty-ui';
 
 import { ReactNode } from 'react';
 

packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ComponentType } from 'react';
-import { IconComponent, IconPlus, Card, CardFooter } from 'twenty-ui';
+import { Card, CardFooter, IconComponent, IconPlus } from 'twenty-ui';
 
 import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
 
@@ -44,6 +44,7 @@ type SettingsListCardProps<ListItem extends { id: string }> = {
   RowRightComponent: ComponentType<{ item: ListItem }>;
   footerButtonLabel?: string;
   onFooterButtonClick?: () => void;
+  to?: (item: ListItem) => string;
 };
 
 export const SettingsListCard = <
@@ -61,6 +62,7 @@ export const SettingsListCard = <
   RowRightComponent,
   onFooterButtonClick,
   footerButtonLabel,
+  to,
 }: SettingsListCardProps<ListItem>) => {
   const theme = useTheme();
 
@@ -76,6 +78,7 @@ export const SettingsListCard = <
           rightComponent={<RowRightComponent item={item} />}
           divider={index < items.length - 1}
           onClick={() => onRowClick?.(item)}
+          to={to?.(item)}
         />
       ))}
       {hasFooter && (

packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx

@@ -1,7 +1,9 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
-import { IconComponent, CardContent } from 'twenty-ui';
+import { Link } from 'react-router-dom';
+import { isDefined } from 'twenty-shared';
+import { CardContent, IconComponent } from 'twenty-ui';
 
 const StyledRow = styled(CardContent)`
   align-items: center;
@@ -19,12 +21,22 @@ const StyledLabel = styled.span`
   flex: 1 0 auto;
 `;
 
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: ${({ theme }) => theme.font.color.secondary};
+
+  &:hover {
+    color: ${({ theme }) => theme.font.color.secondary};
+  }
+`;
+
 type SettingsListItemCardContentProps = {
   label: string;
   divider?: boolean;
   LeftIcon?: IconComponent;
   onClick?: () => void;
   rightComponent: ReactNode;
+  to?: string;
 };
 
 export const SettingsListItemCardContent = ({
@@ -33,14 +45,21 @@ export const SettingsListItemCardContent = ({
   LeftIcon,
   onClick,
   rightComponent,
+  to,
 }: SettingsListItemCardContentProps) => {
   const theme = useTheme();
 
-  return (
+  const content = (
     <StyledRow onClick={onClick} divider={divider}>
       {!!LeftIcon && <LeftIcon size={theme.icon.size.md} />}
       <StyledLabel>{label}</StyledLabel>
       {rightComponent}
     </StyledRow>
   );
+
+  if (isDefined(to)) {
+    return <StyledLink to={to}>{content}</StyledLink>;
+  }
+
+  return content;
 };