Admin panel fixes (#10792)

<img width="573" alt="Screenshot 2025-03-12 at 17 36 44"
src="https://github.com/user-attachments/assets/be6c20b0-626d-4a2c-810c-78a49e9f65ee"
/>
<img width="579" alt="Screenshot 2025-03-12 at 17 37 03"
src="https://github.com/user-attachments/assets/23692ff8-ac88-4104-823e-1a06b3074551"
/>
<img width="590" alt="Screenshot 2025-03-12 at 17 37 14"
src="https://github.com/user-attachments/assets/b46de1d3-a312-44cc-a54d-72208224453d"
/>
<img width="556" alt="Screenshot 2025-03-12 at 17 37 37"
src="https://github.com/user-attachments/assets/12176d49-d76d-4fb1-abe6-1f7dc5349d94"
/>
<img width="607" alt="Screenshot 2025-03-12 at 17 37 50"
src="https://github.com/user-attachments/assets/00e2edff-09db-45c5-a4df-6fd9ead830b6"
/>

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTableCard.tsx

@@ -0,0 +1,93 @@
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Card, IconComponent } from 'twenty-ui';
+
+const StyledCard = styled(Card)`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  height: ${({ theme }) => theme.spacing(6)};
+`;
+
+const StyledTableCellLabel = styled(TableCell)<{
+  align?: 'left' | 'center' | 'right';
+}>`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  height: ${({ theme }) => theme.spacing(6)};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: ${({ align }) =>
+    align === 'right'
+      ? 'flex-end'
+      : align === 'center'
+        ? 'center'
+        : 'flex-start'};
+`;
+
+const StyledTableCellValue = styled(TableCell)<{
+  align?: 'left' | 'center' | 'right';
+}>`
+  color: ${({ theme }) => theme.font.color.primary};
+  height: ${({ theme }) => theme.spacing(6)};
+  justify-content: ${({ align }) =>
+    align === 'left'
+      ? 'flex-start'
+      : align === 'center'
+        ? 'center'
+        : 'flex-end'};
+`;
+
+type TableItem = {
+  Icon?: IconComponent;
+  label: string;
+  value: string | number | React.ReactNode;
+};
+
+type SettingsAdminTableCardProps = {
+  items: TableItem[];
+  rounded?: boolean;
+  gridAutoColumns?: string;
+  labelAlign?: 'left' | 'center' | 'right';
+  valueAlign?: 'left' | 'center' | 'right';
+  className?: string;
+};
+
+export const SettingsAdminTableCard = ({
+  items,
+  rounded = false,
+  gridAutoColumns,
+  labelAlign = 'left',
+  valueAlign = 'left',
+  className,
+}: SettingsAdminTableCardProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledCard rounded={rounded} className={className}>
+      <Table>
+        <TableBody>
+          {items.map((item, index) => (
+            <StyledTableRow
+              key={index + item.label}
+              gridAutoColumns={gridAutoColumns}
+            >
+              <StyledTableCellLabel align={labelAlign}>
+                {item.Icon && <item.Icon size={theme.icon.size.md} />}
+                <span>{item.label}</span>
+              </StyledTableCellLabel>
+              <StyledTableCellValue align={valueAlign}>
+                {item.value}
+              </StyledTableCellValue>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledCard>
+  );
+};