Improve aggregate footer cell display

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx

@@ -1,7 +1,6 @@
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import styled from '@emotion/styled';
 import { AppTooltip, Tag, TooltipDelay } from 'twenty-ui';
-import { formatNumber } from '~/utils/format/number';
 
 const StyledButton = styled(StyledHeaderDropdownButton)`
   padding: 0;
@@ -19,10 +18,7 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
   return (
     <div id={dropdownId}>
       <StyledButton>
-        <Tag
-          text={value ? formatNumber(Number(value)) : '-'}
-          color={'transparent'}
-        />
+        <Tag text={value ? value.toString() : '-'} color={'transparent'} />
         <AppTooltip
           anchorSelect={`#${dropdownId}`}
           content={tooltip}

packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAggregateRecordsForRecordBoardColumn.ts

@@ -74,7 +74,7 @@ export const useAggregateRecordsForRecordBoardColumn = () => {
     skip: !isAggregateQueryEnabled,
   });
 
-  const { value, label } = computeAggregateValueAndLabel({
+  const { value, labelWithFieldName } = computeAggregateValueAndLabel({
     data,
     objectMetadataItem,
     fieldMetadataId: recordIndexKanbanAggregateOperation?.fieldMetadataId,
@@ -84,6 +84,6 @@ export const useAggregateRecordsForRecordBoardColumn = () => {
 
   return {
     aggregateValue: isAggregateQueryEnabled ? value : recordCount,
-    aggregateLabel: isDefined(value) ? label : undefined,
+    aggregateLabel: isDefined(value) ? labelWithFieldName : undefined,
   };
 };

packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/__tests__/computeAggregateValueAndLabel.test.ts

@@ -48,7 +48,80 @@ describe('computeAggregateValueAndLabel', () => {
 
     expect(result).toEqual({
       value: 2,
-      label: 'Sum of amount',
+      label: 'Sum',
+      labelWithFieldName: 'Sum of amount',
+    });
+  });
+
+  it('should handle number field as percentage', () => {
+    const mockObjectMetadataWithPercentageField: ObjectMetadataItem = {
+      id: '123',
+      fields: [
+        {
+          id: MOCK_FIELD_ID,
+          name: 'percentage',
+          type: FieldMetadataType.Number,
+          settings: {
+            type: 'percentage',
+          },
+        } as FieldMetadataItem,
+      ],
+    } as ObjectMetadataItem;
+
+    const mockData = {
+      percentage: {
+        [AGGREGATE_OPERATIONS.avg]: 0.3,
+      },
+    };
+
+    const result = computeAggregateValueAndLabel({
+      data: mockData,
+      objectMetadataItem: mockObjectMetadataWithPercentageField,
+      fieldMetadataId: MOCK_FIELD_ID,
+      aggregateOperation: AGGREGATE_OPERATIONS.avg,
+      fallbackFieldName: MOCK_KANBAN_FIELD_NAME,
+    });
+
+    expect(result).toEqual({
+      value: '30%',
+      label: 'Average',
+      labelWithFieldName: 'Average of percentage',
+    });
+  });
+
+  it('should handle number field with decimals', () => {
+    const mockObjectMetadataWithDecimalsField: ObjectMetadataItem = {
+      id: '123',
+      fields: [
+        {
+          id: MOCK_FIELD_ID,
+          name: 'decimals',
+          type: FieldMetadataType.Number,
+          settings: {
+            decimals: 2,
+          },
+        } as FieldMetadataItem,
+      ],
+    } as ObjectMetadataItem;
+
+    const mockData = {
+      decimals: {
+        [AGGREGATE_OPERATIONS.sum]: 0.009,
+      },
+    };
+
+    const result = computeAggregateValueAndLabel({
+      data: mockData,
+      objectMetadataItem: mockObjectMetadataWithDecimalsField,
+      fieldMetadataId: MOCK_FIELD_ID,
+      aggregateOperation: AGGREGATE_OPERATIONS.sum,
+      fallbackFieldName: MOCK_KANBAN_FIELD_NAME,
+    });
+
+    expect(result).toEqual({
+      value: '0.01',
+      label: 'Sum',
+      labelWithFieldName: 'Sum of decimals',
     });
   });
 
@@ -87,7 +160,7 @@ describe('computeAggregateValueAndLabel', () => {
 
     expect(result).toEqual({
       value: undefined,
-      label: 'Sum of amount',
+      label: 'Sum',
     });
   });
 });

packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/computeAggregateValueAndLabel.ts

@@ -4,6 +4,8 @@ import { getAggregateOperationLabel } from '@/object-record/record-board/record-
 import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
 import isEmpty from 'lodash.isempty';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { formatAmount } from '~/utils/format/formatAmount';
+import { formatNumber } from '~/utils/format/number';
 import { isDefined } from '~/utils/isDefined';
 
 export const computeAggregateValueAndLabel = ({
@@ -42,18 +44,40 @@ export const computeAggregateValueAndLabel = ({
 
   const aggregateValue = data[field.name]?.[aggregateOperation];
 
-  const value =
-    isDefined(aggregateValue) && field.type === FieldMetadataType.Currency
-      ? Number(aggregateValue) / 1_000_000
-      : aggregateValue;
+  let value;
 
-  const label =
+  if (aggregateOperation === AGGREGATE_OPERATIONS.count) {
+    value = aggregateValue;
+  } else if (!isDefined(aggregateValue)) {
+    value = '-';
+  } else {
+    value = Number(aggregateValue);
+
+    switch (field.type) {
+      case FieldMetadataType.Currency: {
+        value = formatAmount(value / 1_000_000);
+        break;
+      }
+
+      case FieldMetadataType.Number: {
+        const { decimals, type } = field.settings ?? {};
+        value =
+          type === 'percentage'
+            ? `${formatNumber(value * 100, decimals)}%`
+            : formatNumber(value, decimals);
+        break;
+      }
+    }
+  }
+  const label = getAggregateOperationLabel(aggregateOperation);
+  const labelWithFieldName =
     aggregateOperation === AGGREGATE_OPERATIONS.count
       ? `${getAggregateOperationLabel(AGGREGATE_OPERATIONS.count)}`
       : `${getAggregateOperationLabel(aggregateOperation)} of ${field.name}`;
 
   return {
     value,
     label,
+    labelWithFieldName,
   };
 };

packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts

@@ -1,10 +1,15 @@
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
+import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState';
 import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { recordIndexRecordGroupHideComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentState';
+import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups';
+import { mapRecordGroupDefinitionsToViewGroups } from '@/views/utils/mapRecordGroupDefinitionsToViewGroups';
 import { recordGroupDefinitionToViewGroup } from '@/views/utils/recordGroupDefinitionToViewGroup';
 import { useRecoilCallback } from 'recoil';
+import { isDefined } from '~/utils/isDefined';
 
 type UseRecordGroupVisibilityParams = {
   viewBarId: string;
@@ -13,10 +18,20 @@ type UseRecordGroupVisibilityParams = {
 export const useRecordGroupVisibility = ({
   viewBarId,
 }: UseRecordGroupVisibilityParams) => {
+  const recordIndexRecordGroupIdsState = useRecoilComponentCallbackStateV2(
+    recordGroupIdsComponentState,
+  );
+
+  const recordIndexRecordIdsByGroupFamilyState =
+    useRecoilComponentCallbackStateV2(
+      recordIndexRecordIdsByGroupComponentFamilyState,
+      viewBarId,
+    );
+
   const objectOptionsDropdownRecordGroupHideState =
     useRecoilComponentCallbackStateV2(recordIndexRecordGroupHideComponentState);
 
-  const { saveViewGroup } = useSaveCurrentViewGroups(viewBarId);
+  const { saveViewGroup, saveViewGroups } = useSaveCurrentViewGroups(viewBarId);
 
   const handleVisibilityChange = useRecoilCallback(
     ({ set }) =>
@@ -35,14 +50,66 @@ export const useRecordGroupVisibility = ({
   );
 
   const handleHideEmptyRecordGroupChange = useRecoilCallback(
-    ({ set }) =>
+    ({ snapshot, set }) =>
       async () => {
-        set(
+        const updatedRecordGroupDefinitions: RecordGroupDefinition[] = [];
+        const recordGroupIds = getSnapshotValue(
+          snapshot,
+          recordIndexRecordGroupIdsState,
+        );
+
+        const currentHideState = getSnapshotValue(
+          snapshot,
           objectOptionsDropdownRecordGroupHideState,
-          (currentHideState) => !currentHideState,
+        );
+        const newHideState = !currentHideState;
+
+        set(objectOptionsDropdownRecordGroupHideState, newHideState);
+
+        for (const recordGroupId of recordGroupIds) {
+          const recordGroup = getSnapshotValue(
+            snapshot,
+            recordGroupDefinitionFamilyState(recordGroupId),
+          );
+
+          if (!isDefined(recordGroup)) {
+            throw new Error(
+              `Record group with id ${recordGroupId} not found in snapshot`,
+            );
+          }
+
+          const recordGroupRowIds = getSnapshotValue(
+            snapshot,
+            recordIndexRecordIdsByGroupFamilyState(recordGroupId),
+          );
+
+          if (recordGroupRowIds.length > 0) {
+            continue;
+          }
+
+          const updatedRecordGroup = {
+            ...recordGroup,
+            isVisible: !newHideState,
+          };
+
+          set(
+            recordGroupDefinitionFamilyState(recordGroupId),
+            updatedRecordGroup,
+          );
+
+          updatedRecordGroupDefinitions.push(updatedRecordGroup);
+        }
+
+        saveViewGroups(
+          mapRecordGroupDefinitionsToViewGroups(updatedRecordGroupDefinitions),
         );
       },
-    [objectOptionsDropdownRecordGroupHideState],
+    [
+      recordIndexRecordGroupIdsState,
+      objectOptionsDropdownRecordGroupHideState,
+      saveViewGroups,
+      recordIndexRecordIdsByGroupFamilyState,
+    ],
   );
 
   return {

packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts

@@ -3,9 +3,7 @@ import { recordGroupIdsComponentState } from '@/object-record/record-group/state
 import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { RecordGroupSort } from '@/object-record/record-group/types/RecordGroupSort';
 import { recordGroupSortedInsert } from '@/object-record/record-group/utils/recordGroupSortedInsert';
-import { recordIndexRecordGroupHideComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentState';
 import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState';
-import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 
 import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
@@ -29,11 +27,6 @@ export const visibleRecordGroupIdsComponentSelector = createComponentSelectorV2<
           instanceId,
         }),
       );
-      const hideEmptyRecordGroup = get(
-        recordIndexRecordGroupHideComponentState.atomFamily({
-          instanceId,
-        }),
-      );
 
       const result: RecordGroupDefinition[] = [];
 
@@ -56,24 +49,6 @@ export const visibleRecordGroupIdsComponentSelector = createComponentSelectorV2<
         const recordGroupDefinition = get(
           recordGroupDefinitionFamilyState(recordGroupId),
         );
-        const recordIds = get(
-          recordIndexRecordIdsByGroupComponentFamilyState.atomFamily({
-            instanceId,
-            familyKey: recordGroupId,
-          }),
-        );
-
-        if (!isDefined(recordGroupDefinition)) {
-          continue;
-        }
-
-        if (hideEmptyRecordGroup && recordIds.length === 0) {
-          continue;
-        }
-
-        if (!recordGroupDefinition.isVisible) {
-          continue;
-        }
 
         recordGroupSortedInsert(result, recordGroupDefinition, comparator);
       }

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexRecordGroupHideComponentState.ts

@@ -4,6 +4,6 @@ import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewCompon
 export const recordIndexRecordGroupHideComponentState =
   createComponentStateV2<boolean>({
     key: 'recordIndexRecordGroupHideComponentState',
-    defaultValue: true,
+    defaultValue: false,
     componentInstanceContext: ViewComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx

@@ -88,7 +88,7 @@ export const RecordTable = () => {
         <RecordTableEmptyState />
       ) : (
         <>
-          <StyledTable className="entity-table-cell" ref={tableBodyRef}>
+          <StyledTable ref={tableBodyRef}>
             <RecordTableHeader />
             {!hasRecordGroups ? (
               <RecordTableNoRecordGroupBody />

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider.tsx

@@ -19,7 +19,7 @@ export const RecordTableBodyRecordGroupDragDropContextProvider = ({
 }: {
   children: ReactNode;
 }) => {
-  const { objectNameSingular, recordTableId, objectMetadataItem } =
+  const { objectNameSingular, objectMetadataItem } =
     useRecordTableContextOrThrow();
 
   const { updateOneRecord: updateOneRow } = useUpdateOneRecord({