Create the Dashboard record show page (#14423)

Closes https://github.com/twentyhq/core-team-issues/issues/1438

- Reorganized PageLayout module
- Created `DashboardRenderer` and `PageLayoutRenderer`
- Created stories for the `PageLayoutRenderer`
- Refactored the Widget components


https://github.com/user-attachments/assets/27e9ac8f-b237-4c21-8494-3fab6d65af3a

packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx

@@ -6,6 +6,7 @@ import { Notes } from '@/activities/notes/components/Notes';
 import { ObjectTasks } from '@/activities/tasks/components/ObjectTasks';
 import { TimelineActivities } from '@/activities/timeline-activities/components/TimelineActivities';
 import { type ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { DashboardRenderer } from '@/dashboards/components/DashboardRenderer';
 import { FieldsCard } from '@/object-record/record-show/components/FieldsCard';
 import { CardType } from '@/object-record/record-show/types/CardType';
 import { ListenRecordUpdatesEffect } from '@/subscription/components/ListenRecordUpdatesEffect';
@@ -212,4 +213,8 @@ export const CardComponents: Record<CardType, CardComponentType> = {
       </WorkflowVisualizerComponentInstanceContext.Provider>
     );
   },
+
+  [CardType.DashboardCard]: ({ targetableObject }) => {
+    return <DashboardRenderer recordId={targetableObject.id} />;
+  },
 };

packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts

@@ -16,6 +16,7 @@ import { isDefined } from 'twenty-shared/utils';
 import {
   IconCalendarEvent,
   IconHome,
+  IconLayoutDashboard,
   IconMail,
   IconNotes,
   IconSettings,
@@ -243,6 +244,30 @@ export const useRecordShowContainerTabs = (
           files: null,
         },
       },
+      [CoreObjectNameSingular.Dashboard]: {
+        hideSummaryAndFields: true,
+        hideFieldsInSidePanel: true,
+        tabs: {
+          dashboard: {
+            title: 'Dashboard',
+            position: 101,
+            Icon: IconLayoutDashboard,
+            cards: [{ type: CardType.DashboardCard }],
+            hide: {
+              ifMobile: false,
+              ifDesktop: false,
+              ifInRightDrawer: false,
+              ifFeaturesDisabled: [],
+              ifRequiredObjectsInactive: [],
+              ifRelationsMissing: [],
+            },
+          },
+          timeline: null,
+          tasks: null,
+          notes: null,
+          files: null,
+        },
+      },
     }),
     [],
   );
@@ -277,7 +302,9 @@ export const useRecordShowContainerTabs = (
             title,
             Icon,
             cards,
-            hide: !(isMobile || isInRightDrawer),
+            hide:
+              !(isMobile || isInRightDrawer) ||
+              recordLayout.hideFieldsInSidePanel,
           };
         }
 
@@ -349,7 +376,10 @@ export const useRecordShowContainerTabs = (
                 id: 'home',
                 title: 'Home',
                 Icon: IconHome,
-                cards: [...tab.cards, ...array[1].cards],
+                cards: [
+                  ...(tab.hide ? [] : tab.cards),
+                  ...(array[1].hide ? [] : array[1].cards),
+                ],
                 hide: false,
               },
             ];

packages/twenty-front/src/modules/object-record/record-show/types/CardType.ts

@@ -10,4 +10,5 @@ export enum CardType {
   WorkflowVersionCard = 'WorkflowVersionCard',
   WorkflowRunCard = 'WorkflowRunCard',
   RichTextCard = 'RichTextCard',
+  DashboardCard = 'DashboardCard',
 }

packages/twenty-front/src/modules/object-record/record-show/types/RecordLayout.ts

@@ -2,5 +2,6 @@ import { type RecordLayoutTab } from '@/ui/layout/tab-list/types/RecordLayoutTab
 
 export type RecordLayout = {
   hideSummaryAndFields?: boolean;
+  hideFieldsInSidePanel?: boolean;
   tabs: Record<string, RecordLayoutTab | null>;
 };