From b0a353124affa640b825ceea3fd05d8f8d172959 Mon Sep 17 00:00:00 2001
From: Remi Bonnet <bonnet.rem@gmail.com>
Date: Thu, 19 Dec 2024 18:16:35 +0100
Subject: [PATCH] fic(page-members): add column count

---
 .../list-pre-check-logs.tsx                   |  7 ++-
 .../page-organization-members.tsx             | 63 ++++++++++---------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
index 468cfb9c5f2..910f6c7ee4f 100644
--- a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
+++ b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
@@ -7,7 +7,7 @@ import {
 import { memo, useEffect, useMemo, useRef } from 'react'
 import { useParams } from 'react-router-dom'
 import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
-import { Icon, Indicator, Link, LoaderSpinner, TablePrimitives } from '@qovery/shared/ui'
+import { Icon, Indicator, Link, LoaderDots, TablePrimitives } from '@qovery/shared/ui'
 import { HeaderPreCheckLogs } from '../header-pre-check-logs/header-pre-check-logs'
 import { type EnvironmentPreCheckLogId, usePreCheckLogs } from '../hooks/use-pre-check-logs/use-pre-check-logs'
 import { RowPreCheckLogs } from './row-pre-check-logs/row-pre-check-logs'
@@ -61,8 +61,9 @@ export function ListPreCheckLogs({ environment, environmentStatus, preCheckStage
     return (
       <div className="h-full p-1">
         <HeaderPreCheckLogs preCheckStage={preCheckStage} />
-        <div className="flex h-[calc(100%-44px)] w-full justify-center border border-t-0 border-neutral-500 bg-neutral-600 pt-11">
-          <LoaderSpinner className="h-6 w-6" theme="dark" />
+        <div className="flex h-[calc(100%-44px)] w-full flex-col items-center justify-center gap-5 border border-t-0 border-neutral-500 bg-neutral-600 pt-11">
+          <LoaderDots />
+          <p className="text-neutral-300">Pre-check logs are loading…</p>
         </div>
       </div>
     )
diff --git a/libs/pages/settings/src/lib/ui/page-organization-members/page-organization-members.tsx b/libs/pages/settings/src/lib/ui/page-organization-members/page-organization-members.tsx
index aa722b66486..40173c5ef68 100644
--- a/libs/pages/settings/src/lib/ui/page-organization-members/page-organization-members.tsx
+++ b/libs/pages/settings/src/lib/ui/page-organization-members/page-organization-members.tsx
@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react'
 import { NeedHelp } from '@qovery/shared/assistant/feature'
 import { MemberRoleEnum } from '@qovery/shared/enums'
 import { Button, Heading, Icon, Section, Table, type TableFilterProps } from '@qovery/shared/ui'
+import { pluralize } from '@qovery/shared/util-js'
 import RowMember from './row-member/row-member'
 
 export interface PageOrganizationMembersProps {
@@ -25,37 +26,6 @@ export interface PageOrganizationMembersProps {
   onAddMember?: () => void
 }
 
-const membersHead = [
-  {
-    title: 'Member',
-    className: 'px-4 py-2 border-r border-neutral-200 h-full',
-  },
-  {
-    title: 'Roles',
-    filter: [
-      {
-        search: true,
-        title: 'Filter by role',
-        key: 'role_name',
-      },
-    ],
-  },
-  {
-    title: 'Last activity',
-    className: 'px-4',
-    sort: {
-      key: 'last_activity_at',
-    },
-  },
-  {
-    title: 'Member since',
-    className: 'px-4',
-    sort: {
-      key: 'created_at',
-    },
-  },
-]
-
 const inviteMembersHead = [
   {
     title: 'Pending members',
@@ -93,6 +63,37 @@ export function PageOrganizationMembers(props: PageOrganizationMembersProps) {
     resendInvite,
   } = props
 
+  const membersHead = [
+    {
+      title: `${pluralize(members.length, 'Member', 'Members')} (${members.length})`,
+      className: 'px-4 py-2 border-r border-neutral-200 h-full',
+    },
+    {
+      title: 'Roles',
+      filter: [
+        {
+          search: true,
+          title: 'Filter by role',
+          key: 'role_name',
+        },
+      ],
+    },
+    {
+      title: 'Last activity',
+      className: 'px-4',
+      sort: {
+        key: 'last_activity_at',
+      },
+    },
+    {
+      title: 'Member since',
+      className: 'px-4',
+      sort: {
+        key: 'created_at',
+      },
+    },
+  ]
+
   const columnsWidth = '35% 22% 21% 21%'
 
   const [filterMembers, setFilterMembers] = useState<TableFilterProps[]>([])