From 2cbae3c490c1705c0d3a57dc33d5913bd341809e Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 11 Mar 2025 09:31:51 +0800
Subject: [PATCH 1/5] moved granularity to common types folder

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../contributors/config/granularity-tabs.ts   | 10 ++--
 .../components/shared/types/granularity.ts    | 55 ++++++++-----------
 .../uikit/chart/helpers/formatters.ts         | 23 +++++---
 .../types/contributors/responses.types.ts     |  0
 frontend/types/shared/granularity.ts          |  8 +++
 5 files changed, 51 insertions(+), 45 deletions(-)
 create mode 100644 frontend/types/contributors/responses.types.ts
 create mode 100644 frontend/types/shared/granularity.ts

diff --git a/frontend/app/components/modules/project/components/contributors/config/granularity-tabs.ts b/frontend/app/components/modules/project/components/contributors/config/granularity-tabs.ts
index f310fbf5f..fc928ba70 100644
--- a/frontend/app/components/modules/project/components/contributors/config/granularity-tabs.ts
+++ b/frontend/app/components/modules/project/components/contributors/config/granularity-tabs.ts
@@ -1,11 +1,11 @@
 import type { GranularityTabs } from '../types/contributors.types';
 import { dateOptKeys } from '~/components/modules/project/config/date-options';
-import { Granularity } from '~/components/shared/types/granularity';
+import { Granularity } from '~~/types/shared/granularity';
 
 export const granularityTabs: GranularityTabs[] = [
   {
     label: 'Weekly',
-    value: Granularity.Weekly,
+    value: Granularity.WEEKLY,
     format: 'MMM d',
     showForKeys: [
       dateOptKeys.past90days,
@@ -17,7 +17,7 @@ export const granularityTabs: GranularityTabs[] = [
   },
   {
     label: 'Monthly',
-    value: Granularity.Monthly,
+    value: Granularity.MONTHLY,
     format: 'MMM, yyyy',
     showForKeys: [
       dateOptKeys.past90days,
@@ -32,7 +32,7 @@ export const granularityTabs: GranularityTabs[] = [
   },
   {
     label: 'Quarterly',
-    value: Granularity.Quarterly,
+    value: Granularity.QUARTERLY,
     format: 'MMM d',
     showForKeys: [
       dateOptKeys.past180days,
@@ -45,7 +45,7 @@ export const granularityTabs: GranularityTabs[] = [
   },
   {
     label: 'Yearly',
-    value: Granularity.Yearly,
+    value: Granularity.YEARLY,
     format: 'yyyy',
     showForKeys: [
       dateOptKeys.previous5Year,
diff --git a/frontend/app/components/shared/types/granularity.ts b/frontend/app/components/shared/types/granularity.ts
index f847cdb23..b3c394780 100644
--- a/frontend/app/components/shared/types/granularity.ts
+++ b/frontend/app/components/shared/types/granularity.ts
@@ -1,41 +1,34 @@
 import { dateOptKeys } from '~/components/modules/project/config/date-options';
-
-export enum Granularity {
-  Daily = 'daily',
-  Weekly = 'weekly',
-  Monthly = 'monthly',
-  Quarterly = 'quarterly',
-  Yearly = 'yearly'
-}
+import { Granularity } from '~~/types/shared/granularity';
 
 export const formatByGranularity = {
-  [Granularity.Daily]: 'MMM d',
-  [Granularity.Weekly]: 'MMM d',
-  [Granularity.Monthly]: 'MMM, yyyy',
-  [Granularity.Quarterly]: 'MMM d',
-  [Granularity.Yearly]: 'yyyy'
+  [Granularity.DAILY]: 'MMM d',
+  [Granularity.WEEKLY]: 'MMM d',
+  [Granularity.MONTHLY]: 'MMM, yyyy',
+  [Granularity.QUARTERLY]: 'MMM d',
+  [Granularity.YEARLY]: 'yyyy'
 };
 
 export const lineGranularities = {
-  [dateOptKeys.past90days]: Granularity.Daily,
-  [dateOptKeys.past180days]: Granularity.Weekly,
-  [dateOptKeys.past365days]: Granularity.Weekly,
-  [dateOptKeys.previousQuarter]: Granularity.Daily,
-  [dateOptKeys.previousYear]: Granularity.Weekly,
-  [dateOptKeys.previous5Year]: Granularity.Monthly,
-  [dateOptKeys.previous10Year]: Granularity.Yearly,
-  [dateOptKeys.alltime]: Granularity.Yearly,
-  [dateOptKeys.custom]: Granularity.Yearly // TODO: this should be handled differently
+  [dateOptKeys.past90days]: Granularity.DAILY,
+  [dateOptKeys.past180days]: Granularity.WEEKLY,
+  [dateOptKeys.past365days]: Granularity.WEEKLY,
+  [dateOptKeys.previousQuarter]: Granularity.DAILY,
+  [dateOptKeys.previousYear]: Granularity.WEEKLY,
+  [dateOptKeys.previous5Year]: Granularity.MONTHLY,
+  [dateOptKeys.previous10Year]: Granularity.YEARLY,
+  [dateOptKeys.alltime]: Granularity.YEARLY,
+  [dateOptKeys.custom]: Granularity.YEARLY // TODO: this should be handled differently
 };
 
 export const barGranularities = {
-  [dateOptKeys.past90days]: Granularity.Weekly,
-  [dateOptKeys.past180days]: Granularity.Weekly,
-  [dateOptKeys.past365days]: Granularity.Weekly,
-  [dateOptKeys.previousQuarter]: Granularity.Weekly,
-  [dateOptKeys.previousYear]: Granularity.Weekly,
-  [dateOptKeys.previous5Year]: Granularity.Monthly,
-  [dateOptKeys.previous10Year]: Granularity.Yearly,
-  [dateOptKeys.alltime]: Granularity.Yearly,
-  [dateOptKeys.custom]: Granularity.Yearly // TODO: this should be handled differently
+  [dateOptKeys.past90days]: Granularity.WEEKLY,
+  [dateOptKeys.past180days]: Granularity.WEEKLY,
+  [dateOptKeys.past365days]: Granularity.WEEKLY,
+  [dateOptKeys.previousQuarter]: Granularity.DAILY,
+  [dateOptKeys.previousYear]: Granularity.WEEKLY,
+  [dateOptKeys.previous5Year]: Granularity.MONTHLY,
+  [dateOptKeys.previous10Year]: Granularity.YEARLY,
+  [dateOptKeys.alltime]: Granularity.YEARLY,
+  [dateOptKeys.custom]: Granularity.YEARLY // TODO: this should be handled differently
 };
diff --git a/frontend/app/components/uikit/chart/helpers/formatters.ts b/frontend/app/components/uikit/chart/helpers/formatters.ts
index 6a876c633..9de48ab99 100644
--- a/frontend/app/components/uikit/chart/helpers/formatters.ts
+++ b/frontend/app/components/uikit/chart/helpers/formatters.ts
@@ -8,7 +8,7 @@ import type {
   SingleTooltipFormatterParams
 } from '../types/EChartTypes';
 import type { ChartData } from '../types/ChartTypes';
-import { Granularity } from '~/components/shared/types/granularity';
+import { Granularity } from '~~/types/shared/granularity';
 import { formatNumber } from '~/components/shared/utils/formatter';
 
 declare type LabelFormatterParams = {
@@ -34,7 +34,8 @@ const formatIsoDate = (value: string, format: string) => {
 
   return dt.toFormat(luxonFormat);
 };
-export const axisLabelFormatter = (format: string) => (value: string) => formatDate(value, format);
+export const axisLabelFormatter = (format: string) => (value: string) =>
+  formatDate(value, format);
 
 export const tooltipLabelFormatter = (params: LabelFormatterParams) => {
   if (params.axisDimension === 'x') {
@@ -59,7 +60,8 @@ const tooltipSingleValue = (params: SingleTooltipFormatterParams) => `
 export const tooltipFormatter = (
   paramsRaw: TopLevelFormatterParams // Tooltip hover box
 ): string | HTMLElement | HTMLElement[] => {
-  const params: MultipleTooltipFormatterParams = paramsRaw as MultipleTooltipFormatterParams;
+  const params: MultipleTooltipFormatterParams =
+    paramsRaw as MultipleTooltipFormatterParams;
   return `${formatDate(params[0]?.name || '', '{MMM} {yyyy}')}<br>${params
     .map(tooltipSingleValue)
     .join('')}`;
@@ -71,25 +73,28 @@ const formatDateRange = (
   granularity: string
 ) => {
   switch (granularity) {
-    case Granularity.Weekly:
-    case Granularity.Quarterly:
+    case Granularity.WEEKLY:
+    case Granularity.QUARTERLY:
       return `${formatDate(startDateMillis, 'MMM d')} - ${formatIsoDate(
         endDateIso,
         'MMM d'
       )}`;
-    case Granularity.Monthly:
+    case Granularity.MONTHLY:
       return `${formatDate(startDateMillis, 'MMM yyyy')}`;
-    case Granularity.Yearly:
+    case Granularity.YEARLY:
       return `${formatDate(startDateMillis, 'yyyy')}`;
     default:
       return `${formatDate(startDateMillis, 'MMM d, yyyy')}`;
   }
 };
 
-export const tooltipFormatterWithData = (data: ChartData[], granularity: string) => (
+export const tooltipFormatterWithData =
+  (data: ChartData[], granularity: string) =>
+  (
     paramsRaw: TopLevelFormatterParams // Tooltip hover box
   ): string | HTMLElement | HTMLElement[] => {
-    const params: MultipleTooltipFormatterParams = paramsRaw as MultipleTooltipFormatterParams;
+    const params: MultipleTooltipFormatterParams =
+      paramsRaw as MultipleTooltipFormatterParams;
     const index = params[0]?.dataIndex || 0;
 
     const dateStr = formatDateRange(
diff --git a/frontend/types/contributors/responses.types.ts b/frontend/types/contributors/responses.types.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/types/shared/granularity.ts b/frontend/types/shared/granularity.ts
new file mode 100644
index 000000000..a840e9e33
--- /dev/null
+++ b/frontend/types/shared/granularity.ts
@@ -0,0 +1,8 @@
+export enum Granularity {
+  HOURLY = 'hourly',
+  DAILY = 'daily',
+  WEEKLY = 'weekly',
+  MONTHLY = 'monthly',
+  QUARTERLY = 'quarterly',
+  YEARLY = 'yearly'
+}

From ddcac04cbd5f3ea9bf1604bd0f8adf0ea9289f05 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 11 Mar 2025 09:37:27 +0800
Subject: [PATCH 2/5] moved summary types to common

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../contributors/active-contributors.vue      | 29 ++-------
 .../contributors/active-organizations.vue     | 29 ++-------
 .../contributors/types/contributors.types.ts  |  2 +-
 .../components/development/active-days.vue    | 35 +++--------
 .../development/average-time-to-merge.vue     | 25 ++------
 .../development/code-review-engagement.vue    | 36 +++--------
 .../contributions-outside-work-hours.vue      | 49 ++++-----------
 .../fragments/pull-request-legend-item.vue    | 17 ++----
 .../development/merge-lead-time.vue           | 58 ++++--------------
 .../components/development/pull-requests.vue  | 59 ++++---------------
 .../development/types/active-days.types.ts    |  2 +-
 .../types/average-time-merge.types.ts         |  2 +-
 .../types/code-review-engagement.types.ts     |  2 +-
 .../types/contribution-outside-hours.types.ts |  2 +-
 .../types/issues-resolution.types.ts          |  2 +-
 .../types/merge-lead-time.types.ts            |  2 +-
 .../development/types/pull-requests.types.ts  |  2 +-
 .../types/wait-time-1st-review.types.ts       |  2 +-
 .../development/wait-time-first-review.vue    | 25 ++------
 .../project/components/popularity/forks.vue   | 35 +++--------
 .../components/popularity/github-mentions.vue | 24 ++------
 .../components/popularity/press-mentions.vue  | 18 ++----
 .../components/popularity/social-mentions.vue | 24 ++------
 .../project/components/popularity/stars.vue   | 35 +++--------
 .../popularity/types/mentions.types.ts        |  2 +-
 .../popularity/types/popularity.types.ts      |  2 +-
 .../types/delta-display.types.ts              |  2 +-
 .../types => types/shared}/summary.types.ts   |  0
 28 files changed, 116 insertions(+), 406 deletions(-)
 rename frontend/{app/components/shared/types => types/shared}/summary.types.ts (100%)

diff --git a/frontend/app/components/modules/project/components/contributors/active-contributors.vue b/frontend/app/components/modules/project/components/contributors/active-contributors.vue
index f92a7028e..c8b402576 100644
--- a/frontend/app/components/modules/project/components/contributors/active-contributors.vue
+++ b/frontend/app/components/modules/project/components/contributors/active-contributors.vue
@@ -8,34 +8,17 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state
-          :status="status"
-          height="2rem"
-          width="7.5rem"
-        >
+        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-            <lfx-delta-display
-              :summary="summary"
-              icon="circle-arrow-up-right"
-              icon-type="solid"
-            />
+            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-tabs
-        v-if="!isEmpty"
-        :tabs="tabs"
-        :model-value="activeTab"
-        @update:model-value="activeTab = $event"
-      />
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching active contributors"
-        :is-empty="isEmpty"
-      >
+      <lfx-tabs v-if="!isEmpty" :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching active contributors"
+        :is-empty="isEmpty">
         <lfx-chart :config="barChartConfig" />
       </lfx-project-load-state>
     </section>
@@ -50,7 +33,7 @@ import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { ActiveContributors } from './types/contributors.types';
 import { granularityTabs } from './config/granularity-tabs';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
diff --git a/frontend/app/components/modules/project/components/contributors/active-organizations.vue b/frontend/app/components/modules/project/components/contributors/active-organizations.vue
index e21c4bb9e..03c985072 100644
--- a/frontend/app/components/modules/project/components/contributors/active-organizations.vue
+++ b/frontend/app/components/modules/project/components/contributors/active-organizations.vue
@@ -8,34 +8,17 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state
-          :status="status"
-          height="2rem"
-          width="7.5rem"
-        >
+        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-            <lfx-delta-display
-              :summary="summary"
-              icon="circle-arrow-up-right"
-              icon-type="solid"
-            />
+            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-tabs
-        v-if="!isEmpty"
-        :tabs="tabs"
-        :model-value="activeTab"
-        @update:model-value="activeTab = $event"
-      />
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching active organizations"
-        :is-empty="isEmpty"
-      >
+      <lfx-tabs v-if="!isEmpty" :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching active organizations"
+        :is-empty="isEmpty">
         <lfx-chart :config="barChartConfig" />
       </lfx-project-load-state>
     </section>
@@ -50,7 +33,7 @@ import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { ActiveOrganizations } from './types/contributors.types';
 import { granularityTabs } from './config/granularity-tabs';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
diff --git a/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts b/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
index 849eaac40..d429c7d0f 100644
--- a/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
+++ b/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface ActiveContributors {
   summary: Summary;
diff --git a/frontend/app/components/modules/project/components/development/active-days.vue b/frontend/app/components/modules/project/components/development/active-days.vue
index 72f4f6148..350be4298 100644
--- a/frontend/app/components/modules/project/components/development/active-days.vue
+++ b/frontend/app/components/modules/project/components/development/active-days.vue
@@ -11,33 +11,18 @@
     <section class="mt-5">
       <div class="mb-6">
         <div class="flex flex-row justify-between items-center">
-          <lfx-skeleton-state
-            :status="status"
-            height="2rem"
-            width="7.5rem"
-          >
+          <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
             <div class="flex flex-row gap-4 items-center">
               <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-              <lfx-delta-display
-                :summary="summary"
-                icon="circle-arrow-up-right"
-                icon-type="solid"
-              />
+              <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
             </div>
           </lfx-skeleton-state>
 
-          <div
-            v-if="!isEmpty"
-            class="flex flex-col items-end justify-center"
-          >
+          <div v-if="!isEmpty" class="flex flex-col items-end justify-center">
             <span class="text-neutral-400 text-xs flex flex-row gap-2 items-center">
               Avg. contributions per day
             </span>
-            <lfx-skeleton-state
-              :status="status"
-              height="1.25rem"
-              width="4rem"
-            >
+            <lfx-skeleton-state :status="status" height="1.25rem" width="4rem">
               <span class="text-xl">
                 {{ formatNumber(activeDays.avgContributions) }}
               </span>
@@ -47,14 +32,8 @@
       </div>
 
       <div class="mt-8 mb-6 text-neutral-900 font-medium">Contributions per day</div>
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching forks"
-        :is-empty="isEmpty"
-        use-min-height
-        :height="100"
-      >
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
+        use-min-height :height="100">
         <div class="w-full h-[100px] mb-5">
           <lfx-chart :config="getHeatMapChartConfig(chartData, chartSeries, categoryData)" />
         </div>
@@ -70,7 +49,7 @@ import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { ActiveDays } from './types/active-days.types';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import { convertToChartData, convertToCategoryData } from '~/components/uikit/chart/helpers/chart-helpers';
diff --git a/frontend/app/components/modules/project/components/development/average-time-to-merge.vue b/frontend/app/components/modules/project/components/development/average-time-to-merge.vue
index c766a2ebf..ddefab080 100644
--- a/frontend/app/components/modules/project/components/development/average-time-to-merge.vue
+++ b/frontend/app/components/modules/project/components/development/average-time-to-merge.vue
@@ -10,31 +10,16 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state
-          :status="status"
-          height="2rem"
-          width="7.5rem"
-        >
+        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumberToDuration(summary.current) }}</div>
-            <lfx-delta-display
-              :summary="summary"
-              icon="circle-arrow-up-right"
-              icon-type="solid"
-              is-duration
-            />
+            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" is-duration />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching forks"
-        :is-empty="isEmpty"
-        use-min-height
-        :height="330"
-      >
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
+        use-min-height :height="330">
         <div class="w-full h-[330px]">
           <lfx-chart :config="barChartConfig" />
         </div>
@@ -50,7 +35,7 @@ import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { AverageTimeMerge } from './types/average-time-merge.types';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import { convertToChartData } from '~/components/uikit/chart/helpers/chart-helpers';
diff --git a/frontend/app/components/modules/project/components/development/code-review-engagement.vue b/frontend/app/components/modules/project/components/development/code-review-engagement.vue
index 5d0b5ebaf..22ce3f630 100644
--- a/frontend/app/components/modules/project/components/development/code-review-engagement.vue
+++ b/frontend/app/components/modules/project/components/development/code-review-engagement.vue
@@ -9,45 +9,23 @@
     </p>
     <hr>
     <section class="mt-5">
-      <lfx-tabs
-        :tabs="tabs"
-        :model-value="activeTab"
-        @update:model-value="activeTab = $event"
-      />
+      <lfx-tabs :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
       <div class="mt-7 mb-8">
-        <lfx-skeleton-state
-          :status="status"
-          height="2rem"
-          width="7.5rem"
-        >
+        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }} contributors</div>
-            <lfx-delta-display
-              :summary="summary"
-              icon="circle-arrow-up-right"
-              icon-type="solid"
-            />
+            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
           </div>
         </lfx-skeleton-state>
       </div>
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching forks"
-        :is-empty="isEmpty"
-        use-min-height
-        :height="330"
-      >
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
+        use-min-height :height="330">
         <div class="w-full h-[330px]">
           <div class="font-semibold mb-5 mt-8">
             <span class="text-black">Top contributors </span>
           </div>
 
-          <lfx-code-review-table
-            show-percentage
-            :metric="activeTab"
-            :code-review-item="codeReviewEngagement.data"
-          />
+          <lfx-code-review-table show-percentage :metric="activeTab" :code-review-item="codeReviewEngagement.data" />
         </div>
       </lfx-project-load-state>
     </section>
@@ -62,7 +40,7 @@ import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { CodeReviewEngagement } from './types/code-review-engagement.types';
 import LfxCodeReviewTable from './fragments/code-review-table.vue';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
diff --git a/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue b/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue
index 3b0a67147..fc5ee1feb 100644
--- a/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue
+++ b/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue
@@ -10,20 +10,11 @@
     <hr>
     <section class="mt-5">
       <div class="flex flex-row justify-between items-center mb-6 gap-8">
-        <lfx-skeleton-state
-          :status="status"
-          height="2rem"
-          width="7.5rem"
-        >
+        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
           <div class="flex flex-row gap-4 items-center grow">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}%</div>
-            <lfx-delta-display
-              :summary="summary"
-              icon="circle-arrow-up-right"
-              icon-type="solid"
-              percentage-only
-              unit="%"
-            />
+            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" percentage-only
+              unit="%" />
           </div>
         </lfx-skeleton-state>
 
@@ -31,15 +22,8 @@
           <span class="text-neutral-400 text-xs flex flex-row gap-2 items-center">
             Mon-Fri (after 18:00)
           </span>
-          <lfx-skeleton-state
-            :status="status"
-            height="1.25rem"
-            width="4rem"
-          >
-            <span
-              v-if="status === 'success'"
-              class="text-xl"
-            >
+          <lfx-skeleton-state :status="status" height="1.25rem" width="4rem">
+            <span v-if="status === 'success'" class="text-xl">
               {{ formatNumber(weekdayPercentage, 1) }}%
             </span>
           </lfx-skeleton-state>
@@ -48,29 +32,16 @@
           <span class="text-neutral-400 text-xs flex flex-row gap-2 items-center">
             Weekends
           </span>
-          <lfx-skeleton-state
-            :status="status"
-            height="1.25rem"
-            width="4rem"
-          >
-            <span
-              v-if="status === 'success'"
-              class="text-xl"
-            >
+          <lfx-skeleton-state :status="status" height="1.25rem" width="4rem">
+            <span v-if="status === 'success'" class="text-xl">
               {{ formatNumber(weekendPercentage, 1) }}%
             </span>
           </lfx-skeleton-state>
         </div>
       </div>
 
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching forks"
-        :is-empty="isEmpty"
-        use-min-height
-        :height="430"
-      >
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
+        use-min-height :height="430">
         <div class="w-full h-[430px] my-5">
           <lfx-chart :config="getScatterChartConfig(chartData, chartSeries)" />
         </div>
@@ -86,7 +57,7 @@ import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { ContributionOutsideHours } from './types/contribution-outside-hours.types';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import { convertToChartData } from '~/components/uikit/chart/helpers/chart-helpers';
diff --git a/frontend/app/components/modules/project/components/development/fragments/pull-request-legend-item.vue b/frontend/app/components/modules/project/components/development/fragments/pull-request-legend-item.vue
index 61f24c8a0..694cd875a 100644
--- a/frontend/app/components/modules/project/components/development/fragments/pull-request-legend-item.vue
+++ b/frontend/app/components/modules/project/components/development/fragments/pull-request-legend-item.vue
@@ -1,29 +1,20 @@
 <template>
   <div class="flex flex-row justify-between w-full items-center">
     <span class="text-neutral-900 text-sm grow">
-      <span
-        class="inline-block rounded-xs h-3 w-3 mr-3"
-        :style="{ backgroundColor: props.color }"
-      />{{ props.title }}
+      <span class="inline-block rounded-xs h-3 w-3 mr-3" :style="{ backgroundColor: props.color }" />{{ props.title }}
     </span>
     <div class="text-xs flex flex-col basis-1/5 items-end">
       <span class="text-neutral-400">Total</span>
       {{ formatNumber(delta.current) }}
     </div>
-    <lfx-delta-display
-      :flip-display="true"
-      :hide-previous-value="true"
-      :summary="delta"
-      icon="circle-arrow-up-right"
-      icon-type="solid"
-      class="items-end basis-2/5"
-    />
+    <lfx-delta-display :flip-display="true" :hide-previous-value="true" :summary="delta" icon="circle-arrow-up-right"
+      icon-type="solid" class="items-end basis-2/5" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { formatNumber } from '~/components/shared/utils/formatter';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 
 const props = defineProps<{
diff --git a/frontend/app/components/modules/project/components/development/merge-lead-time.vue b/frontend/app/components/modules/project/components/development/merge-lead-time.vue
index 09e2969f3..5ed068c25 100644
--- a/frontend/app/components/modules/project/components/development/merge-lead-time.vue
+++ b/frontend/app/components/modules/project/components/development/merge-lead-time.vue
@@ -9,57 +9,25 @@
     </p>
     <hr>
     <section class="mt-5">
-      <lfx-skeleton-state
-        :status="status"
-        height="2rem"
-        width="7.5rem"
-      >
+      <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
         <div class="flex flex-row gap-4 items-center">
           <div class="text-data-display-1">{{ formatNumber(summary.current) }} days</div>
-          <lfx-delta-display
-            :summary="summary"
-            icon="circle-arrow-up-right"
-            icon-type="solid"
-            unit="d"
-          />
+          <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" unit="d" />
         </div>
       </lfx-skeleton-state>
 
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching forks"
-        :is-empty="isEmpty"
-        use-min-height
-        :height="250"
-      >
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
+        use-min-height :height="250">
         <div class="w-full min-h-[250px] mt-5">
           <div class="flex flex-col gap-10 pt-6">
-            <lfx-merge-lead-item
-              title="Pickup"
-              description="Pull request raised"
-              icon="code-pull-request"
-              :item-value="mergeLeadTime.data.pickup"
-            />
-            <lfx-merge-lead-item
-              title="Review"
-              description="Review started"
-              icon="eye"
-              :item-value="mergeLeadTime.data.review"
-            />
-            <lfx-merge-lead-item
-              title="Accepted"
-              description="Pull request accepted"
-              icon="check-circle"
-              :item-value="mergeLeadTime.data.accepted"
-            />
-            <lfx-merge-lead-item
-              title="Merged"
-              description=""
-              icon="thumbs-up"
-              :item-value="mergeLeadTime.data.pickup"
-              is-last
-            />
+            <lfx-merge-lead-item title="Pickup" description="Pull request raised" icon="code-pull-request"
+              :item-value="mergeLeadTime.data.pickup" />
+            <lfx-merge-lead-item title="Review" description="Review started" icon="eye"
+              :item-value="mergeLeadTime.data.review" />
+            <lfx-merge-lead-item title="Accepted" description="Pull request accepted" icon="check-circle"
+              :item-value="mergeLeadTime.data.accepted" />
+            <lfx-merge-lead-item title="Merged" description="" icon="thumbs-up" :item-value="mergeLeadTime.data.pickup"
+              is-last />
           </div>
         </div>
       </lfx-project-load-state>
@@ -79,7 +47,7 @@ import LfxMergeLeadItem from './fragments/merge-lead-item.vue';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import { formatNumber } from '~/components/shared/utils/formatter';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import { useProjectStore } from "~/components/modules/project/store/project.store";
 import { isEmptyData } from '~/components/shared/utils/helper';
 
diff --git a/frontend/app/components/modules/project/components/development/pull-requests.vue b/frontend/app/components/modules/project/components/development/pull-requests.vue
index 622935d4e..1e822b896 100644
--- a/frontend/app/components/modules/project/components/development/pull-requests.vue
+++ b/frontend/app/components/modules/project/components/development/pull-requests.vue
@@ -11,70 +11,37 @@
     <section class="mt-5">
       <div class="mb-6">
         <div class="flex flex-row justify-between items-center">
-          <lfx-skeleton-state
-            :status="status"
-            height="2rem"
-            width="7.5rem"
-          >
+          <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
             <div class="flex flex-row gap-4 items-center">
               <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-              <lfx-delta-display
-                :summary="summary"
-                icon="circle-arrow-up-right"
-                icon-type="solid"
-              />
+              <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
             </div>
           </lfx-skeleton-state>
 
-          <div
-            v-if="!isEmpty"
-            class="flex flex-col items-end justify-center"
-          >
+          <div v-if="!isEmpty" class="flex flex-col items-end justify-center">
             <span class="text-neutral-400 text-xs flex flex-row gap-2 items-center">
-              <lfx-icon
-                name="gauge-high"
-                :size="16"
-              />
+              <lfx-icon name="gauge-high" :size="16" />
               Avg. velocity
             </span>
-            <lfx-skeleton-state
-              :status="status"
-              height="1.25rem"
-              width="4rem"
-            >
+            <lfx-skeleton-state :status="status" height="1.25rem" width="4rem">
               <span class="text-xl">{{ formatNumber(pullRequests.avgVelocityInDays) }} days</span>
             </lfx-skeleton-state>
           </div>
         </div>
       </div>
 
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching forks"
-        :is-empty="isEmpty"
-        use-min-height
-      >
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
+        use-min-height>
         <div class="w-full h-[330px] my-5">
           <lfx-chart :config="barChartConfig" />
         </div>
 
         <div class="flex flex-col gap-5">
-          <lfx-project-pull-request-legend-item
-            title="Open"
-            :delta="openSummary!"
-            :color="chartSeries[0]!.color!"
-          />
-          <lfx-project-pull-request-legend-item
-            title="Merged"
-            :delta="mergedSummary!"
-            :color="chartSeries[1]!.color!"
-          />
-          <lfx-project-pull-request-legend-item
-            title="Closed"
-            :delta="closedSummary!"
-            :color="chartSeries[2]!.color!"
-          />
+          <lfx-project-pull-request-legend-item title="Open" :delta="openSummary!" :color="chartSeries[0]!.color!" />
+          <lfx-project-pull-request-legend-item title="Merged" :delta="mergedSummary!"
+            :color="chartSeries[1]!.color!" />
+          <lfx-project-pull-request-legend-item title="Closed" :delta="closedSummary!"
+            :color="chartSeries[2]!.color!" />
         </div>
       </lfx-project-load-state>
     </section>
@@ -89,7 +56,7 @@ import LfxSkeletonState from '../shared/skeleton-state.vue';
 import LfxProjectLoadState from '../shared/load-state.vue';
 import type { PullRequests } from './types/pull-requests.types';
 import LfxProjectPullRequestLegendItem from './fragments/pull-request-legend-item.vue';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import { convertToChartData } from '~/components/uikit/chart/helpers/chart-helpers';
diff --git a/frontend/app/components/modules/project/components/development/types/active-days.types.ts b/frontend/app/components/modules/project/components/development/types/active-days.types.ts
index 09a980139..a3b361cf1 100644
--- a/frontend/app/components/modules/project/components/development/types/active-days.types.ts
+++ b/frontend/app/components/modules/project/components/development/types/active-days.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface ActiveDays {
   summary: Summary;
diff --git a/frontend/app/components/modules/project/components/development/types/average-time-merge.types.ts b/frontend/app/components/modules/project/components/development/types/average-time-merge.types.ts
index 1eca624c8..e15dd37d5 100644
--- a/frontend/app/components/modules/project/components/development/types/average-time-merge.types.ts
+++ b/frontend/app/components/modules/project/components/development/types/average-time-merge.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface AverageTimeMerge {
   summary: Summary;
diff --git a/frontend/app/components/modules/project/components/development/types/code-review-engagement.types.ts b/frontend/app/components/modules/project/components/development/types/code-review-engagement.types.ts
index e2286dea3..2cacf307d 100644
--- a/frontend/app/components/modules/project/components/development/types/code-review-engagement.types.ts
+++ b/frontend/app/components/modules/project/components/development/types/code-review-engagement.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface CodeReviewItem {
   avatar: string;
diff --git a/frontend/app/components/modules/project/components/development/types/contribution-outside-hours.types.ts b/frontend/app/components/modules/project/components/development/types/contribution-outside-hours.types.ts
index 69009b798..cfe2cea7b 100644
--- a/frontend/app/components/modules/project/components/development/types/contribution-outside-hours.types.ts
+++ b/frontend/app/components/modules/project/components/development/types/contribution-outside-hours.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface ContributionOutsideHours {
   summary: Summary;
diff --git a/frontend/app/components/modules/project/components/development/types/issues-resolution.types.ts b/frontend/app/components/modules/project/components/development/types/issues-resolution.types.ts
index 333f8f3a1..fc04e032e 100644
--- a/frontend/app/components/modules/project/components/development/types/issues-resolution.types.ts
+++ b/frontend/app/components/modules/project/components/development/types/issues-resolution.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface ResolutionSummary extends Summary {
   avgVelocityInDays: number;
diff --git a/frontend/app/components/modules/project/components/development/types/merge-lead-time.types.ts b/frontend/app/components/modules/project/components/development/types/merge-lead-time.types.ts
index f36ea8e53..e1b6c65ac 100644
--- a/frontend/app/components/modules/project/components/development/types/merge-lead-time.types.ts
+++ b/frontend/app/components/modules/project/components/development/types/merge-lead-time.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface MergeLeadTimeItem {
   value: number;
diff --git a/frontend/app/components/modules/project/components/development/types/pull-requests.types.ts b/frontend/app/components/modules/project/components/development/types/pull-requests.types.ts
index 98a331081..ec9e9086a 100644
--- a/frontend/app/components/modules/project/components/development/types/pull-requests.types.ts
+++ b/frontend/app/components/modules/project/components/development/types/pull-requests.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface PullRequests {
   summary: Summary;
diff --git a/frontend/app/components/modules/project/components/development/types/wait-time-1st-review.types.ts b/frontend/app/components/modules/project/components/development/types/wait-time-1st-review.types.ts
index d067cf9b8..2bf243e0a 100644
--- a/frontend/app/components/modules/project/components/development/types/wait-time-1st-review.types.ts
+++ b/frontend/app/components/modules/project/components/development/types/wait-time-1st-review.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface WaitTime1stReview {
   summary: Summary;
diff --git a/frontend/app/components/modules/project/components/development/wait-time-first-review.vue b/frontend/app/components/modules/project/components/development/wait-time-first-review.vue
index 202e17071..480444d63 100644
--- a/frontend/app/components/modules/project/components/development/wait-time-first-review.vue
+++ b/frontend/app/components/modules/project/components/development/wait-time-first-review.vue
@@ -10,31 +10,16 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state
-          :status="status"
-          height="2rem"
-          width="7.5rem"
-        >
+        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumberToDuration(summary.current) }}</div>
-            <lfx-delta-display
-              :summary="summary"
-              icon="circle-arrow-up-right"
-              icon-type="solid"
-              is-duration
-            />
+            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" is-duration />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching forks"
-        :is-empty="isEmpty"
-        use-min-height
-        :height="330"
-      >
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
+        use-min-height :height="330">
         <div class="w-full h-[330px]">
           <lfx-chart :config="barChartConfig" />
         </div>
@@ -50,7 +35,7 @@ import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { WaitTime1stReview } from './types/wait-time-1st-review.types';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import { convertToChartData } from '~/components/uikit/chart/helpers/chart-helpers';
diff --git a/frontend/app/components/modules/project/components/popularity/forks.vue b/frontend/app/components/modules/project/components/popularity/forks.vue
index 8e9938163..c6654e533 100644
--- a/frontend/app/components/modules/project/components/popularity/forks.vue
+++ b/frontend/app/components/modules/project/components/popularity/forks.vue
@@ -10,38 +10,17 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state
-          :status="status"
-          height="2rem"
-          width="7.5rem"
-        >
-          <div
-            v-if="summary"
-            class="flex flex-row gap-4 items-center"
-          >
+        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+          <div v-if="summary" class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-            <lfx-delta-display
-              :summary="summary"
-              icon="circle-arrow-up-right"
-              icon-type="solid"
-            />
+            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-tabs
-        v-if="!isEmpty"
-        :tabs="tabs"
-        :model-value="activeTab"
-        @update:model-value="activeTab = $event"
-      />
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching forks"
-        :is-empty="isEmpty"
-        use-min-height
-      >
+      <lfx-tabs v-if="!isEmpty" :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
+        use-min-height>
         <div class="w-full h-[330px] mt-4">
           <lfx-chart :config="activeTab === 'cumulative' ? lineChartConfig : barChartConfig" />
         </div>
@@ -58,7 +37,7 @@ import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { ForksData } from './types/popularity.types';
 import { lineGranularities, barGranularities } from '~/components/shared/types/granularity';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/github-mentions.vue b/frontend/app/components/modules/project/components/popularity/github-mentions.vue
index 44037a283..40f750260 100644
--- a/frontend/app/components/modules/project/components/popularity/github-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/github-mentions.vue
@@ -9,28 +9,14 @@
     </p>
     <hr>
     <section class="mt-5">
-      <div
-        v-if="status === 'success'"
-        class="flex flex-row gap-4 items-center mb-6"
-      >
+      <div v-if="status === 'success'" class="flex flex-row gap-4 items-center mb-6">
         <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-        <lfx-delta-display
-          :summary="summary"
-          icon="circle-arrow-up-right"
-          icon-type="solid"
-        />
+        <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
       </div>
 
-      <lfx-tabs
-        :tabs="tabs"
-        :model-value="activeTab"
-        @update:model-value="activeTab = $event"
-      />
+      <lfx-tabs :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
       <div class="w-full h-[330px] mt-5">
-        <lfx-chart
-          v-if="status !== 'pending'"
-          :config="lineAreaChartConfig"
-        />
+        <lfx-chart v-if="status !== 'pending'" :config="lineAreaChartConfig" />
         <lfx-spinner v-else />
       </div>
     </section>
@@ -42,7 +28,7 @@ import { useFetch, useRoute } from 'nuxt/app';
 import { ref, computed, watch } from 'vue';
 import { storeToRefs } from "pinia";
 import type { GithubMentions } from './types/mentions.types';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/press-mentions.vue b/frontend/app/components/modules/project/components/popularity/press-mentions.vue
index 48ba0ee73..7bd312ebd 100644
--- a/frontend/app/components/modules/project/components/popularity/press-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/press-mentions.vue
@@ -9,23 +9,13 @@
     </p>
     <hr>
     <section class="mt-5">
-      <div
-        v-if="status === 'success'"
-        class="flex flex-row gap-4 items-center mb-6"
-      >
+      <div v-if="status === 'success'" class="flex flex-row gap-4 items-center mb-6">
         <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-        <lfx-delta-display
-          :summary="summary"
-          icon="circle-arrow-up-right"
-          icon-type="solid"
-        />
+        <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
       </div>
 
       <div class="w-full h-[330px] my-5">
-        <lfx-chart
-          v-if="status !== 'pending'"
-          :config="lineAreaChartConfig"
-        />
+        <lfx-chart v-if="status !== 'pending'" :config="lineAreaChartConfig" />
         <lfx-spinner v-else />
       </div>
 
@@ -40,7 +30,7 @@ import { ref, computed, watch } from 'vue';
 import { storeToRefs } from "pinia";
 import type { PressMentions, PressMention } from './types/mentions.types';
 import LfxProjectPressMentionLists from './fragments/press-mention-lists.vue';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import { convertToChartData } from '~/components/uikit/chart/helpers/chart-helpers';
diff --git a/frontend/app/components/modules/project/components/popularity/social-mentions.vue b/frontend/app/components/modules/project/components/popularity/social-mentions.vue
index 57031f742..9c4f7fec0 100644
--- a/frontend/app/components/modules/project/components/popularity/social-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/social-mentions.vue
@@ -9,28 +9,14 @@
     </p>
     <hr>
     <section class="mt-5">
-      <div
-        v-if="status === 'success'"
-        class="flex flex-row gap-4 items-center mb-6"
-      >
+      <div v-if="status === 'success'" class="flex flex-row gap-4 items-center mb-6">
         <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-        <lfx-delta-display
-          :summary="summary"
-          icon="circle-arrow-up-right"
-          icon-type="solid"
-        />
+        <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
       </div>
 
-      <lfx-tabs
-        :tabs="tabs"
-        :model-value="activeTab"
-        @update:model-value="activeTab = $event"
-      />
+      <lfx-tabs :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
       <div class="w-full h-[330px] mt-5">
-        <lfx-chart
-          v-if="status !== 'pending'"
-          :config="barChartConfig"
-        />
+        <lfx-chart v-if="status !== 'pending'" :config="barChartConfig" />
         <lfx-spinner v-else />
       </div>
     </section>
@@ -42,7 +28,7 @@ import { useFetch, useRoute } from 'nuxt/app';
 import { ref, computed, watch } from 'vue';
 import { storeToRefs } from "pinia";
 import type { SocialMentions } from './types/mentions.types';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/stars.vue b/frontend/app/components/modules/project/components/popularity/stars.vue
index 7f4b6dd1f..1541afca5 100644
--- a/frontend/app/components/modules/project/components/popularity/stars.vue
+++ b/frontend/app/components/modules/project/components/popularity/stars.vue
@@ -10,38 +10,17 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state
-          :status="status"
-          height="2rem"
-          width="7.5rem"
-        >
-          <div
-            v-if="summary"
-            class="flex flex-row gap-4 items-center"
-          >
+        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+          <div v-if="summary" class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-            <lfx-delta-display
-              :summary="summary"
-              icon="circle-arrow-up-right"
-              icon-type="solid"
-            />
+            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-tabs
-        v-if="!isEmpty"
-        :tabs="tabs"
-        :model-value="activeTab"
-        @update:model-value="activeTab = $event"
-      />
-      <lfx-project-load-state
-        :status="status"
-        :error="error"
-        error-message="Error fetching stars"
-        :is-empty="isEmpty"
-        use-min-height
-      >
+      <lfx-tabs v-if="!isEmpty" :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching stars" :is-empty="isEmpty"
+        use-min-height>
         <div class="w-full h-[330px] mt-4">
           <lfx-chart :config="activeTab === 'cumulative' ? lineChartConfig : barChartConfig" />
         </div>
@@ -58,7 +37,7 @@ import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
 import type { StarsData } from './types/popularity.types';
 import { lineGranularities, barGranularities } from '~/components/shared/types/granularity';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/types/mentions.types.ts b/frontend/app/components/modules/project/components/popularity/types/mentions.types.ts
index e0d683fe3..1a9b4438e 100644
--- a/frontend/app/components/modules/project/components/popularity/types/mentions.types.ts
+++ b/frontend/app/components/modules/project/components/popularity/types/mentions.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface SocialMentions {
   summary: Summary;
diff --git a/frontend/app/components/modules/project/components/popularity/types/popularity.types.ts b/frontend/app/components/modules/project/components/popularity/types/popularity.types.ts
index 96e2b7046..5ebc0183d 100644
--- a/frontend/app/components/modules/project/components/popularity/types/popularity.types.ts
+++ b/frontend/app/components/modules/project/components/popularity/types/popularity.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export interface StarsData {
   summary: Summary;
diff --git a/frontend/app/components/uikit/delta-display/types/delta-display.types.ts b/frontend/app/components/uikit/delta-display/types/delta-display.types.ts
index 4ff6652b6..4659ebb08 100644
--- a/frontend/app/components/uikit/delta-display/types/delta-display.types.ts
+++ b/frontend/app/components/uikit/delta-display/types/delta-display.types.ts
@@ -1,5 +1,5 @@
 import type { IconType } from '../../icon/types/icon.types';
-import type { Summary } from '~/components/shared/types/summary.types';
+import type { Summary } from '~~/types/shared/summary.types';
 
 export type DeltaDisplayProps = {
   summary: Summary;
diff --git a/frontend/app/components/shared/types/summary.types.ts b/frontend/types/shared/summary.types.ts
similarity index 100%
rename from frontend/app/components/shared/types/summary.types.ts
rename to frontend/types/shared/summary.types.ts

From 01260ac3dd92d99be532161d68c13853e3d24000 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 11 Mar 2025 09:59:52 +0800
Subject: [PATCH 3/5] moved meta to shared common types

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../contributors/active-contributors.vue      | 27 +++++++--
 .../contributors/active-organizations.vue     | 27 +++++++--
 .../contributors/types/contributors.types.ts  |  8 +--
 .../components/development/active-days.vue    | 33 +++++++++--
 .../development/average-time-to-merge.vue     | 23 ++++++--
 .../development/code-review-engagement.vue    | 34 +++++++++--
 .../contributions-outside-work-hours.vue      | 47 ++++++++++++---
 .../fragments/pull-request-legend-item.vue    | 15 ++++-
 .../development/merge-lead-time.vue           | 56 ++++++++++++++----
 .../components/development/pull-requests.vue  | 57 +++++++++++++++----
 .../development/wait-time-first-review.vue    | 23 ++++++--
 .../project/components/popularity/forks.vue   | 33 +++++++++--
 .../components/popularity/github-mentions.vue | 22 +++++--
 .../components/popularity/press-mentions.vue  | 16 +++++-
 .../components/popularity/social-mentions.vue | 22 +++++--
 .../project/components/popularity/stars.vue   | 33 +++++++++--
 .../uikit/chart/helpers/formatters.ts         | 13 ++---
 frontend/types/shared/summary.types.ts        |  6 ++
 18 files changed, 390 insertions(+), 105 deletions(-)

diff --git a/frontend/app/components/modules/project/components/contributors/active-contributors.vue b/frontend/app/components/modules/project/components/contributors/active-contributors.vue
index c8b402576..3e4b8058d 100644
--- a/frontend/app/components/modules/project/components/contributors/active-contributors.vue
+++ b/frontend/app/components/modules/project/components/contributors/active-contributors.vue
@@ -8,17 +8,34 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+        <lfx-skeleton-state
+          :status="status"
+          height="2rem"
+          width="7.5rem"
+        >
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+            <lfx-delta-display
+              :summary="summary"
+              icon="circle-arrow-up-right"
+              icon-type="solid"
+            />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-tabs v-if="!isEmpty" :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching active contributors"
-        :is-empty="isEmpty">
+      <lfx-tabs
+        v-if="!isEmpty"
+        :tabs="tabs"
+        :model-value="activeTab"
+        @update:model-value="activeTab = $event"
+      />
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching active contributors"
+        :is-empty="isEmpty"
+      >
         <lfx-chart :config="barChartConfig" />
       </lfx-project-load-state>
     </section>
diff --git a/frontend/app/components/modules/project/components/contributors/active-organizations.vue b/frontend/app/components/modules/project/components/contributors/active-organizations.vue
index 03c985072..9ae1efd38 100644
--- a/frontend/app/components/modules/project/components/contributors/active-organizations.vue
+++ b/frontend/app/components/modules/project/components/contributors/active-organizations.vue
@@ -8,17 +8,34 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+        <lfx-skeleton-state
+          :status="status"
+          height="2rem"
+          width="7.5rem"
+        >
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+            <lfx-delta-display
+              :summary="summary"
+              icon="circle-arrow-up-right"
+              icon-type="solid"
+            />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-tabs v-if="!isEmpty" :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching active organizations"
-        :is-empty="isEmpty">
+      <lfx-tabs
+        v-if="!isEmpty"
+        :tabs="tabs"
+        :model-value="activeTab"
+        @update:model-value="activeTab = $event"
+      />
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching active organizations"
+        :is-empty="isEmpty"
+      >
         <lfx-chart :config="barChartConfig" />
       </lfx-project-load-state>
     </section>
diff --git a/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts b/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
index d429c7d0f..a08a387e6 100644
--- a/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
+++ b/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
@@ -1,4 +1,4 @@
-import type { Summary } from '~~/types/shared/summary.types';
+import type { Summary, Meta } from '~~/types/shared/summary.types';
 
 export interface ActiveContributors {
   summary: Summary;
@@ -18,12 +18,6 @@ export interface ActiveOrganizations {
   }[];
 }
 
-export interface Meta {
-  offset: number;
-  limit: number;
-  total: number;
-}
-
 export interface Contributor {
   avatar: string;
   name: string;
diff --git a/frontend/app/components/modules/project/components/development/active-days.vue b/frontend/app/components/modules/project/components/development/active-days.vue
index 350be4298..eb6362bf6 100644
--- a/frontend/app/components/modules/project/components/development/active-days.vue
+++ b/frontend/app/components/modules/project/components/development/active-days.vue
@@ -11,18 +11,33 @@
     <section class="mt-5">
       <div class="mb-6">
         <div class="flex flex-row justify-between items-center">
-          <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+          <lfx-skeleton-state
+            :status="status"
+            height="2rem"
+            width="7.5rem"
+          >
             <div class="flex flex-row gap-4 items-center">
               <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-              <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+              <lfx-delta-display
+                :summary="summary"
+                icon="circle-arrow-up-right"
+                icon-type="solid"
+              />
             </div>
           </lfx-skeleton-state>
 
-          <div v-if="!isEmpty" class="flex flex-col items-end justify-center">
+          <div
+            v-if="!isEmpty"
+            class="flex flex-col items-end justify-center"
+          >
             <span class="text-neutral-400 text-xs flex flex-row gap-2 items-center">
               Avg. contributions per day
             </span>
-            <lfx-skeleton-state :status="status" height="1.25rem" width="4rem">
+            <lfx-skeleton-state
+              :status="status"
+              height="1.25rem"
+              width="4rem"
+            >
               <span class="text-xl">
                 {{ formatNumber(activeDays.avgContributions) }}
               </span>
@@ -32,8 +47,14 @@
       </div>
 
       <div class="mt-8 mb-6 text-neutral-900 font-medium">Contributions per day</div>
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
-        use-min-height :height="100">
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching forks"
+        :is-empty="isEmpty"
+        use-min-height
+        :height="100"
+      >
         <div class="w-full h-[100px] mb-5">
           <lfx-chart :config="getHeatMapChartConfig(chartData, chartSeries, categoryData)" />
         </div>
diff --git a/frontend/app/components/modules/project/components/development/average-time-to-merge.vue b/frontend/app/components/modules/project/components/development/average-time-to-merge.vue
index ddefab080..7ca32e164 100644
--- a/frontend/app/components/modules/project/components/development/average-time-to-merge.vue
+++ b/frontend/app/components/modules/project/components/development/average-time-to-merge.vue
@@ -10,16 +10,31 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+        <lfx-skeleton-state
+          :status="status"
+          height="2rem"
+          width="7.5rem"
+        >
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumberToDuration(summary.current) }}</div>
-            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" is-duration />
+            <lfx-delta-display
+              :summary="summary"
+              icon="circle-arrow-up-right"
+              icon-type="solid"
+              is-duration
+            />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
-        use-min-height :height="330">
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching forks"
+        :is-empty="isEmpty"
+        use-min-height
+        :height="330"
+      >
         <div class="w-full h-[330px]">
           <lfx-chart :config="barChartConfig" />
         </div>
diff --git a/frontend/app/components/modules/project/components/development/code-review-engagement.vue b/frontend/app/components/modules/project/components/development/code-review-engagement.vue
index 22ce3f630..6bc8bf705 100644
--- a/frontend/app/components/modules/project/components/development/code-review-engagement.vue
+++ b/frontend/app/components/modules/project/components/development/code-review-engagement.vue
@@ -9,23 +9,45 @@
     </p>
     <hr>
     <section class="mt-5">
-      <lfx-tabs :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <lfx-tabs
+        :tabs="tabs"
+        :model-value="activeTab"
+        @update:model-value="activeTab = $event"
+      />
       <div class="mt-7 mb-8">
-        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+        <lfx-skeleton-state
+          :status="status"
+          height="2rem"
+          width="7.5rem"
+        >
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }} contributors</div>
-            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+            <lfx-delta-display
+              :summary="summary"
+              icon="circle-arrow-up-right"
+              icon-type="solid"
+            />
           </div>
         </lfx-skeleton-state>
       </div>
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
-        use-min-height :height="330">
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching forks"
+        :is-empty="isEmpty"
+        use-min-height
+        :height="330"
+      >
         <div class="w-full h-[330px]">
           <div class="font-semibold mb-5 mt-8">
             <span class="text-black">Top contributors </span>
           </div>
 
-          <lfx-code-review-table show-percentage :metric="activeTab" :code-review-item="codeReviewEngagement.data" />
+          <lfx-code-review-table
+            show-percentage
+            :metric="activeTab"
+            :code-review-item="codeReviewEngagement.data"
+          />
         </div>
       </lfx-project-load-state>
     </section>
diff --git a/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue b/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue
index fc5ee1feb..42c878f33 100644
--- a/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue
+++ b/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue
@@ -10,11 +10,20 @@
     <hr>
     <section class="mt-5">
       <div class="flex flex-row justify-between items-center mb-6 gap-8">
-        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+        <lfx-skeleton-state
+          :status="status"
+          height="2rem"
+          width="7.5rem"
+        >
           <div class="flex flex-row gap-4 items-center grow">
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}%</div>
-            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" percentage-only
-              unit="%" />
+            <lfx-delta-display
+              :summary="summary"
+              icon="circle-arrow-up-right"
+              icon-type="solid"
+              percentage-only
+              unit="%"
+            />
           </div>
         </lfx-skeleton-state>
 
@@ -22,8 +31,15 @@
           <span class="text-neutral-400 text-xs flex flex-row gap-2 items-center">
             Mon-Fri (after 18:00)
           </span>
-          <lfx-skeleton-state :status="status" height="1.25rem" width="4rem">
-            <span v-if="status === 'success'" class="text-xl">
+          <lfx-skeleton-state
+            :status="status"
+            height="1.25rem"
+            width="4rem"
+          >
+            <span
+              v-if="status === 'success'"
+              class="text-xl"
+            >
               {{ formatNumber(weekdayPercentage, 1) }}%
             </span>
           </lfx-skeleton-state>
@@ -32,16 +48,29 @@
           <span class="text-neutral-400 text-xs flex flex-row gap-2 items-center">
             Weekends
           </span>
-          <lfx-skeleton-state :status="status" height="1.25rem" width="4rem">
-            <span v-if="status === 'success'" class="text-xl">
+          <lfx-skeleton-state
+            :status="status"
+            height="1.25rem"
+            width="4rem"
+          >
+            <span
+              v-if="status === 'success'"
+              class="text-xl"
+            >
               {{ formatNumber(weekendPercentage, 1) }}%
             </span>
           </lfx-skeleton-state>
         </div>
       </div>
 
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
-        use-min-height :height="430">
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching forks"
+        :is-empty="isEmpty"
+        use-min-height
+        :height="430"
+      >
         <div class="w-full h-[430px] my-5">
           <lfx-chart :config="getScatterChartConfig(chartData, chartSeries)" />
         </div>
diff --git a/frontend/app/components/modules/project/components/development/fragments/pull-request-legend-item.vue b/frontend/app/components/modules/project/components/development/fragments/pull-request-legend-item.vue
index 694cd875a..8cbca45cb 100644
--- a/frontend/app/components/modules/project/components/development/fragments/pull-request-legend-item.vue
+++ b/frontend/app/components/modules/project/components/development/fragments/pull-request-legend-item.vue
@@ -1,14 +1,23 @@
 <template>
   <div class="flex flex-row justify-between w-full items-center">
     <span class="text-neutral-900 text-sm grow">
-      <span class="inline-block rounded-xs h-3 w-3 mr-3" :style="{ backgroundColor: props.color }" />{{ props.title }}
+      <span
+        class="inline-block rounded-xs h-3 w-3 mr-3"
+        :style="{ backgroundColor: props.color }"
+      />{{ props.title }}
     </span>
     <div class="text-xs flex flex-col basis-1/5 items-end">
       <span class="text-neutral-400">Total</span>
       {{ formatNumber(delta.current) }}
     </div>
-    <lfx-delta-display :flip-display="true" :hide-previous-value="true" :summary="delta" icon="circle-arrow-up-right"
-      icon-type="solid" class="items-end basis-2/5" />
+    <lfx-delta-display
+      :flip-display="true"
+      :hide-previous-value="true"
+      :summary="delta"
+      icon="circle-arrow-up-right"
+      icon-type="solid"
+      class="items-end basis-2/5"
+    />
   </div>
 </template>
 
diff --git a/frontend/app/components/modules/project/components/development/merge-lead-time.vue b/frontend/app/components/modules/project/components/development/merge-lead-time.vue
index 5ed068c25..62ca81949 100644
--- a/frontend/app/components/modules/project/components/development/merge-lead-time.vue
+++ b/frontend/app/components/modules/project/components/development/merge-lead-time.vue
@@ -9,25 +9,57 @@
     </p>
     <hr>
     <section class="mt-5">
-      <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+      <lfx-skeleton-state
+        :status="status"
+        height="2rem"
+        width="7.5rem"
+      >
         <div class="flex flex-row gap-4 items-center">
           <div class="text-data-display-1">{{ formatNumber(summary.current) }} days</div>
-          <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" unit="d" />
+          <lfx-delta-display
+            :summary="summary"
+            icon="circle-arrow-up-right"
+            icon-type="solid"
+            unit="d"
+          />
         </div>
       </lfx-skeleton-state>
 
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
-        use-min-height :height="250">
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching forks"
+        :is-empty="isEmpty"
+        use-min-height
+        :height="250"
+      >
         <div class="w-full min-h-[250px] mt-5">
           <div class="flex flex-col gap-10 pt-6">
-            <lfx-merge-lead-item title="Pickup" description="Pull request raised" icon="code-pull-request"
-              :item-value="mergeLeadTime.data.pickup" />
-            <lfx-merge-lead-item title="Review" description="Review started" icon="eye"
-              :item-value="mergeLeadTime.data.review" />
-            <lfx-merge-lead-item title="Accepted" description="Pull request accepted" icon="check-circle"
-              :item-value="mergeLeadTime.data.accepted" />
-            <lfx-merge-lead-item title="Merged" description="" icon="thumbs-up" :item-value="mergeLeadTime.data.pickup"
-              is-last />
+            <lfx-merge-lead-item
+              title="Pickup"
+              description="Pull request raised"
+              icon="code-pull-request"
+              :item-value="mergeLeadTime.data.pickup"
+            />
+            <lfx-merge-lead-item
+              title="Review"
+              description="Review started"
+              icon="eye"
+              :item-value="mergeLeadTime.data.review"
+            />
+            <lfx-merge-lead-item
+              title="Accepted"
+              description="Pull request accepted"
+              icon="check-circle"
+              :item-value="mergeLeadTime.data.accepted"
+            />
+            <lfx-merge-lead-item
+              title="Merged"
+              description=""
+              icon="thumbs-up"
+              :item-value="mergeLeadTime.data.pickup"
+              is-last
+            />
           </div>
         </div>
       </lfx-project-load-state>
diff --git a/frontend/app/components/modules/project/components/development/pull-requests.vue b/frontend/app/components/modules/project/components/development/pull-requests.vue
index 1e822b896..5ebafe549 100644
--- a/frontend/app/components/modules/project/components/development/pull-requests.vue
+++ b/frontend/app/components/modules/project/components/development/pull-requests.vue
@@ -11,37 +11,70 @@
     <section class="mt-5">
       <div class="mb-6">
         <div class="flex flex-row justify-between items-center">
-          <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+          <lfx-skeleton-state
+            :status="status"
+            height="2rem"
+            width="7.5rem"
+          >
             <div class="flex flex-row gap-4 items-center">
               <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-              <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+              <lfx-delta-display
+                :summary="summary"
+                icon="circle-arrow-up-right"
+                icon-type="solid"
+              />
             </div>
           </lfx-skeleton-state>
 
-          <div v-if="!isEmpty" class="flex flex-col items-end justify-center">
+          <div
+            v-if="!isEmpty"
+            class="flex flex-col items-end justify-center"
+          >
             <span class="text-neutral-400 text-xs flex flex-row gap-2 items-center">
-              <lfx-icon name="gauge-high" :size="16" />
+              <lfx-icon
+                name="gauge-high"
+                :size="16"
+              />
               Avg. velocity
             </span>
-            <lfx-skeleton-state :status="status" height="1.25rem" width="4rem">
+            <lfx-skeleton-state
+              :status="status"
+              height="1.25rem"
+              width="4rem"
+            >
               <span class="text-xl">{{ formatNumber(pullRequests.avgVelocityInDays) }} days</span>
             </lfx-skeleton-state>
           </div>
         </div>
       </div>
 
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
-        use-min-height>
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching forks"
+        :is-empty="isEmpty"
+        use-min-height
+      >
         <div class="w-full h-[330px] my-5">
           <lfx-chart :config="barChartConfig" />
         </div>
 
         <div class="flex flex-col gap-5">
-          <lfx-project-pull-request-legend-item title="Open" :delta="openSummary!" :color="chartSeries[0]!.color!" />
-          <lfx-project-pull-request-legend-item title="Merged" :delta="mergedSummary!"
-            :color="chartSeries[1]!.color!" />
-          <lfx-project-pull-request-legend-item title="Closed" :delta="closedSummary!"
-            :color="chartSeries[2]!.color!" />
+          <lfx-project-pull-request-legend-item
+            title="Open"
+            :delta="openSummary!"
+            :color="chartSeries[0]!.color!"
+          />
+          <lfx-project-pull-request-legend-item
+            title="Merged"
+            :delta="mergedSummary!"
+            :color="chartSeries[1]!.color!"
+          />
+          <lfx-project-pull-request-legend-item
+            title="Closed"
+            :delta="closedSummary!"
+            :color="chartSeries[2]!.color!"
+          />
         </div>
       </lfx-project-load-state>
     </section>
diff --git a/frontend/app/components/modules/project/components/development/wait-time-first-review.vue b/frontend/app/components/modules/project/components/development/wait-time-first-review.vue
index 480444d63..bbcb0ae6c 100644
--- a/frontend/app/components/modules/project/components/development/wait-time-first-review.vue
+++ b/frontend/app/components/modules/project/components/development/wait-time-first-review.vue
@@ -10,16 +10,31 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
+        <lfx-skeleton-state
+          :status="status"
+          height="2rem"
+          width="7.5rem"
+        >
           <div class="flex flex-row gap-4 items-center">
             <div class="text-data-display-1">{{ formatNumberToDuration(summary.current) }}</div>
-            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" is-duration />
+            <lfx-delta-display
+              :summary="summary"
+              icon="circle-arrow-up-right"
+              icon-type="solid"
+              is-duration
+            />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
-        use-min-height :height="330">
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching forks"
+        :is-empty="isEmpty"
+        use-min-height
+        :height="330"
+      >
         <div class="w-full h-[330px]">
           <lfx-chart :config="barChartConfig" />
         </div>
diff --git a/frontend/app/components/modules/project/components/popularity/forks.vue b/frontend/app/components/modules/project/components/popularity/forks.vue
index c6654e533..a2cbe70dd 100644
--- a/frontend/app/components/modules/project/components/popularity/forks.vue
+++ b/frontend/app/components/modules/project/components/popularity/forks.vue
@@ -10,17 +10,38 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
-          <div v-if="summary" class="flex flex-row gap-4 items-center">
+        <lfx-skeleton-state
+          :status="status"
+          height="2rem"
+          width="7.5rem"
+        >
+          <div
+            v-if="summary"
+            class="flex flex-row gap-4 items-center"
+          >
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+            <lfx-delta-display
+              :summary="summary"
+              icon="circle-arrow-up-right"
+              icon-type="solid"
+            />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-tabs v-if="!isEmpty" :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching forks" :is-empty="isEmpty"
-        use-min-height>
+      <lfx-tabs
+        v-if="!isEmpty"
+        :tabs="tabs"
+        :model-value="activeTab"
+        @update:model-value="activeTab = $event"
+      />
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching forks"
+        :is-empty="isEmpty"
+        use-min-height
+      >
         <div class="w-full h-[330px] mt-4">
           <lfx-chart :config="activeTab === 'cumulative' ? lineChartConfig : barChartConfig" />
         </div>
diff --git a/frontend/app/components/modules/project/components/popularity/github-mentions.vue b/frontend/app/components/modules/project/components/popularity/github-mentions.vue
index 40f750260..0e9ce5ec2 100644
--- a/frontend/app/components/modules/project/components/popularity/github-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/github-mentions.vue
@@ -9,14 +9,28 @@
     </p>
     <hr>
     <section class="mt-5">
-      <div v-if="status === 'success'" class="flex flex-row gap-4 items-center mb-6">
+      <div
+        v-if="status === 'success'"
+        class="flex flex-row gap-4 items-center mb-6"
+      >
         <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-        <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+        <lfx-delta-display
+          :summary="summary"
+          icon="circle-arrow-up-right"
+          icon-type="solid"
+        />
       </div>
 
-      <lfx-tabs :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <lfx-tabs
+        :tabs="tabs"
+        :model-value="activeTab"
+        @update:model-value="activeTab = $event"
+      />
       <div class="w-full h-[330px] mt-5">
-        <lfx-chart v-if="status !== 'pending'" :config="lineAreaChartConfig" />
+        <lfx-chart
+          v-if="status !== 'pending'"
+          :config="lineAreaChartConfig"
+        />
         <lfx-spinner v-else />
       </div>
     </section>
diff --git a/frontend/app/components/modules/project/components/popularity/press-mentions.vue b/frontend/app/components/modules/project/components/popularity/press-mentions.vue
index 7bd312ebd..ca7948272 100644
--- a/frontend/app/components/modules/project/components/popularity/press-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/press-mentions.vue
@@ -9,13 +9,23 @@
     </p>
     <hr>
     <section class="mt-5">
-      <div v-if="status === 'success'" class="flex flex-row gap-4 items-center mb-6">
+      <div
+        v-if="status === 'success'"
+        class="flex flex-row gap-4 items-center mb-6"
+      >
         <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-        <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+        <lfx-delta-display
+          :summary="summary"
+          icon="circle-arrow-up-right"
+          icon-type="solid"
+        />
       </div>
 
       <div class="w-full h-[330px] my-5">
-        <lfx-chart v-if="status !== 'pending'" :config="lineAreaChartConfig" />
+        <lfx-chart
+          v-if="status !== 'pending'"
+          :config="lineAreaChartConfig"
+        />
         <lfx-spinner v-else />
       </div>
 
diff --git a/frontend/app/components/modules/project/components/popularity/social-mentions.vue b/frontend/app/components/modules/project/components/popularity/social-mentions.vue
index 9c4f7fec0..d3d2b2cea 100644
--- a/frontend/app/components/modules/project/components/popularity/social-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/social-mentions.vue
@@ -9,14 +9,28 @@
     </p>
     <hr>
     <section class="mt-5">
-      <div v-if="status === 'success'" class="flex flex-row gap-4 items-center mb-6">
+      <div
+        v-if="status === 'success'"
+        class="flex flex-row gap-4 items-center mb-6"
+      >
         <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-        <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+        <lfx-delta-display
+          :summary="summary"
+          icon="circle-arrow-up-right"
+          icon-type="solid"
+        />
       </div>
 
-      <lfx-tabs :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <lfx-tabs
+        :tabs="tabs"
+        :model-value="activeTab"
+        @update:model-value="activeTab = $event"
+      />
       <div class="w-full h-[330px] mt-5">
-        <lfx-chart v-if="status !== 'pending'" :config="barChartConfig" />
+        <lfx-chart
+          v-if="status !== 'pending'"
+          :config="barChartConfig"
+        />
         <lfx-spinner v-else />
       </div>
     </section>
diff --git a/frontend/app/components/modules/project/components/popularity/stars.vue b/frontend/app/components/modules/project/components/popularity/stars.vue
index 1541afca5..9dd3f92f7 100644
--- a/frontend/app/components/modules/project/components/popularity/stars.vue
+++ b/frontend/app/components/modules/project/components/popularity/stars.vue
@@ -10,17 +10,38 @@
     <hr>
     <section class="mt-5">
       <div class="mb-6">
-        <lfx-skeleton-state :status="status" height="2rem" width="7.5rem">
-          <div v-if="summary" class="flex flex-row gap-4 items-center">
+        <lfx-skeleton-state
+          :status="status"
+          height="2rem"
+          width="7.5rem"
+        >
+          <div
+            v-if="summary"
+            class="flex flex-row gap-4 items-center"
+          >
             <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
-            <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+            <lfx-delta-display
+              :summary="summary"
+              icon="circle-arrow-up-right"
+              icon-type="solid"
+            />
           </div>
         </lfx-skeleton-state>
       </div>
 
-      <lfx-tabs v-if="!isEmpty" :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
-      <lfx-project-load-state :status="status" :error="error" error-message="Error fetching stars" :is-empty="isEmpty"
-        use-min-height>
+      <lfx-tabs
+        v-if="!isEmpty"
+        :tabs="tabs"
+        :model-value="activeTab"
+        @update:model-value="activeTab = $event"
+      />
+      <lfx-project-load-state
+        :status="status"
+        :error="error"
+        error-message="Error fetching stars"
+        :is-empty="isEmpty"
+        use-min-height
+      >
         <div class="w-full h-[330px] mt-4">
           <lfx-chart :config="activeTab === 'cumulative' ? lineChartConfig : barChartConfig" />
         </div>
diff --git a/frontend/app/components/uikit/chart/helpers/formatters.ts b/frontend/app/components/uikit/chart/helpers/formatters.ts
index 9de48ab99..4fd78469b 100644
--- a/frontend/app/components/uikit/chart/helpers/formatters.ts
+++ b/frontend/app/components/uikit/chart/helpers/formatters.ts
@@ -34,8 +34,7 @@ const formatIsoDate = (value: string, format: string) => {
 
   return dt.toFormat(luxonFormat);
 };
-export const axisLabelFormatter = (format: string) => (value: string) =>
-  formatDate(value, format);
+export const axisLabelFormatter = (format: string) => (value: string) => formatDate(value, format);
 
 export const tooltipLabelFormatter = (params: LabelFormatterParams) => {
   if (params.axisDimension === 'x') {
@@ -60,8 +59,7 @@ const tooltipSingleValue = (params: SingleTooltipFormatterParams) => `
 export const tooltipFormatter = (
   paramsRaw: TopLevelFormatterParams // Tooltip hover box
 ): string | HTMLElement | HTMLElement[] => {
-  const params: MultipleTooltipFormatterParams =
-    paramsRaw as MultipleTooltipFormatterParams;
+  const params: MultipleTooltipFormatterParams = paramsRaw as MultipleTooltipFormatterParams;
   return `${formatDate(params[0]?.name || '', '{MMM} {yyyy}')}<br>${params
     .map(tooltipSingleValue)
     .join('')}`;
@@ -88,13 +86,10 @@ const formatDateRange = (
   }
 };
 
-export const tooltipFormatterWithData =
-  (data: ChartData[], granularity: string) =>
-  (
+export const tooltipFormatterWithData = (data: ChartData[], granularity: string) => (
     paramsRaw: TopLevelFormatterParams // Tooltip hover box
   ): string | HTMLElement | HTMLElement[] => {
-    const params: MultipleTooltipFormatterParams =
-      paramsRaw as MultipleTooltipFormatterParams;
+    const params: MultipleTooltipFormatterParams = paramsRaw as MultipleTooltipFormatterParams;
     const index = params[0]?.dataIndex || 0;
 
     const dateStr = formatDateRange(
diff --git a/frontend/types/shared/summary.types.ts b/frontend/types/shared/summary.types.ts
index f10430e3e..df95a3975 100644
--- a/frontend/types/shared/summary.types.ts
+++ b/frontend/types/shared/summary.types.ts
@@ -6,3 +6,9 @@ export interface Summary {
   periodFrom: string;
   periodTo: string;
 }
+
+export interface Meta {
+  offset: number;
+  limit: number;
+  total: number;
+}

From ed33cd9323e6df6a61704682287db9335a41cc8b Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 11 Mar 2025 10:11:56 +0800
Subject: [PATCH 4/5] moved all contributors page types to common folder

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../contributors/active-contributors.vue      |  2 +-
 .../contributors/active-organizations.vue     |  2 +-
 .../contributors/contributor-dependency.vue   | 10 ++-
 .../contributors/contributors-leaderboard.vue |  2 +-
 .../contributors/organization-dependency.vue  | 11 ++-
 .../organizations-leaderboard.vue             |  2 +-
 .../components/contributors/retention.vue     | 46 ++++++-----
 .../contributors/types/contributors.types.ts  | 63 ---------------
 .../[slug]/contributors/retention.get.ts      |  9 ++-
 frontend/server/mocks/retention.mock.ts       | 80 +++++++++----------
 .../types/contributors/responses.types.ts     | 68 ++++++++++++++++
 11 files changed, 155 insertions(+), 140 deletions(-)

diff --git a/frontend/app/components/modules/project/components/contributors/active-contributors.vue b/frontend/app/components/modules/project/components/contributors/active-contributors.vue
index 3e4b8058d..bd475a945 100644
--- a/frontend/app/components/modules/project/components/contributors/active-contributors.vue
+++ b/frontend/app/components/modules/project/components/contributors/active-contributors.vue
@@ -48,8 +48,8 @@ import { ref, computed, watch } from 'vue';
 import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
-import type { ActiveContributors } from './types/contributors.types';
 import { granularityTabs } from './config/granularity-tabs';
+import type { ActiveContributors } from '~~/types/contributors/responses.types';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
diff --git a/frontend/app/components/modules/project/components/contributors/active-organizations.vue b/frontend/app/components/modules/project/components/contributors/active-organizations.vue
index 9ae1efd38..a4ddb061f 100644
--- a/frontend/app/components/modules/project/components/contributors/active-organizations.vue
+++ b/frontend/app/components/modules/project/components/contributors/active-organizations.vue
@@ -48,8 +48,8 @@ import { ref, computed, watch } from 'vue';
 import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
-import type { ActiveOrganizations } from './types/contributors.types';
 import { granularityTabs } from './config/granularity-tabs';
+import type { ActiveOrganizations } from '~~/types/contributors/responses.types';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
diff --git a/frontend/app/components/modules/project/components/contributors/contributor-dependency.vue b/frontend/app/components/modules/project/components/contributors/contributor-dependency.vue
index 882d870bb..67e116100 100644
--- a/frontend/app/components/modules/project/components/contributors/contributor-dependency.vue
+++ b/frontend/app/components/modules/project/components/contributors/contributor-dependency.vue
@@ -57,7 +57,7 @@ import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxDependencyDisplay from './fragments/dependency-display.vue';
 import LfxContributorsTable from './fragments/contributors-table.vue';
-import type { ContributorDependency } from './types/contributors.types';
+import type { ContributorDependency } from '~~/types/contributors/responses.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxMetricDropdown from '~/components/modules/project/components/contributors/fragments/metric-dropdown.vue';
 import LfxAvatarGroup from '~/components/uikit/avatar-group/avatar-group.vue';
@@ -81,9 +81,11 @@ const { data, status, error } = useFetch(
   }
 );
 
-const topContributors = computed(() => (data.value as ContributorDependency)?.topContributors);
-const otherContributors = computed(() => (data.value as ContributorDependency)?.otherContributors);
-const contributors = computed(() => (data.value as ContributorDependency)?.list);
+const contributorDependency = computed<ContributorDependency>(() => data.value as ContributorDependency);
+
+const topContributors = computed(() => contributorDependency.value.topContributors);
+const otherContributors = computed(() => contributorDependency.value.otherContributors);
+const contributors = computed(() => contributorDependency.value.list);
 
 const contributorsAvatars = computed(() => (contributors.value?.length
   ? contributors.value.slice(0, Math.min(5, topContributors.value.count))
diff --git a/frontend/app/components/modules/project/components/contributors/contributors-leaderboard.vue b/frontend/app/components/modules/project/components/contributors/contributors-leaderboard.vue
index 3f1a78b33..c9c7d1056 100644
--- a/frontend/app/components/modules/project/components/contributors/contributors-leaderboard.vue
+++ b/frontend/app/components/modules/project/components/contributors/contributors-leaderboard.vue
@@ -34,7 +34,7 @@ import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxMetricDropdown from './fragments/metric-dropdown.vue';
 import LfxContributorsTable from './fragments/contributors-table.vue';
-import type { ContributorLeaderboard } from './types/contributors.types';
+import type { ContributorLeaderboard } from '~~/types/contributors/responses.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import { useProjectStore } from "~/components/modules/project/store/project.store";
 import { isEmptyData } from '~/components/shared/utils/helper';
diff --git a/frontend/app/components/modules/project/components/contributors/organization-dependency.vue b/frontend/app/components/modules/project/components/contributors/organization-dependency.vue
index dc60fddb3..1483e81bd 100644
--- a/frontend/app/components/modules/project/components/contributors/organization-dependency.vue
+++ b/frontend/app/components/modules/project/components/contributors/organization-dependency.vue
@@ -57,7 +57,7 @@ import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxDependencyDisplay from './fragments/dependency-display.vue';
 import LfxOrganizationsTable from './fragments/organizations-table.vue';
-import type { OrganizationDependency } from './types/contributors.types';
+import type { OrganizationDependency } from '~~/types/contributors/responses.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxMetricDropdown from '~/components/modules/project/components/contributors/fragments/metric-dropdown.vue';
 import LfxAvatarGroup from '~/components/uikit/avatar-group/avatar-group.vue';
@@ -81,11 +81,10 @@ const { data, status, error } = useFetch(
   }
 );
 
-const topOrganizations = computed(() => (data.value as OrganizationDependency)?.topOrganizations);
-const otherOrganizations = computed(
-  () => (data.value as OrganizationDependency)?.otherOrganizations
-);
-const organizations = computed(() => (data.value as OrganizationDependency)?.list);
+const organizationDependency = computed<OrganizationDependency>(() => data.value as OrganizationDependency);
+const topOrganizations = computed(() => organizationDependency.value?.topOrganizations);
+const otherOrganizations = computed(() => organizationDependency.value?.otherOrganizations);
+const organizations = computed(() => organizationDependency.value?.list);
 
 const topOrganizationsAvatars = computed(() => (organizations.value?.length
   ? organizations.value.slice(0, Math.min(3, organizations.value.length))
diff --git a/frontend/app/components/modules/project/components/contributors/organizations-leaderboard.vue b/frontend/app/components/modules/project/components/contributors/organizations-leaderboard.vue
index a62c4d4e3..63963a772 100644
--- a/frontend/app/components/modules/project/components/contributors/organizations-leaderboard.vue
+++ b/frontend/app/components/modules/project/components/contributors/organizations-leaderboard.vue
@@ -34,7 +34,7 @@ import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxMetricDropdown from './fragments/metric-dropdown.vue';
 import LfxOrganizationsTable from './fragments/organizations-table.vue';
-import type { OrganizationLeaderboard } from './types/contributors.types';
+import type { OrganizationLeaderboard } from '~~/types/contributors/responses.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import { useProjectStore } from "~/components/modules/project/store/project.store";
 import { isEmptyData } from '~/components/shared/utils/helper';
diff --git a/frontend/app/components/modules/project/components/contributors/retention.vue b/frontend/app/components/modules/project/components/contributors/retention.vue
index f71dcab13..e5580e521 100644
--- a/frontend/app/components/modules/project/components/contributors/retention.vue
+++ b/frontend/app/components/modules/project/components/contributors/retention.vue
@@ -16,12 +16,9 @@
           />
         </div>
         <div class="basis-1/2 flex justify-end">
-          <lfx-tabs
-            :tabs="chartTypes"
-            :model-value="chartType"
-            width-type="inline"
-            @update:model-value="chartType = $event"
-          />
+          <!-- TODO: Hiding for now since the final design is not decided yet -->
+          <!-- <lfx-tabs :tabs="chartTypes" :model-value="chartType" width-type="inline"
+            @update:model-value="chartType = $event" /> -->
         </div>
       </div>
       <lfx-project-load-state
@@ -60,6 +57,7 @@ import { getLineAreaChartConfig } from '~/components/uikit/chart/configs/line.ar
 import { useProjectStore } from "~/components/modules/project/store/project.store";
 import { isEmptyData } from '~/components/shared/utils/helper';
 import { lineGranularities } from '~/components/shared/types/granularity';
+import type { Retention } from '~~/types/contributors/responses.types';
 
 const {
   startDate, endDate, selectedRepository, selectedTimeRangeKey
@@ -68,7 +66,7 @@ const {
 const route = useRoute();
 
 const activeTab = ref('contributors');
-const chartType = ref('line');
+// const chartType = ref('line');
 
 const granularity = computed(() => lineGranularities[selectedTimeRangeKey.value as keyof typeof lineGranularities]);
 const { data, status, error } = useFetch(
@@ -84,9 +82,17 @@ const { data, status, error } = useFetch(
   }
 );
 
+const retention = computed<Retention[]>(() => data.value as Retention[]);
+
 const chartData = computed<ChartData[]>(
   // convert the data to chart data
-  () => convertToChartData(data.value as RawChartData[], 'dateFrom', ['percentage'], undefined, 'dateTo')
+  () => convertToChartData(
+    retention.value as unknown as RawChartData[],
+    'startDate',
+    ['percentage'],
+    undefined,
+    'endDate'
+  )
 );
 const isEmpty = computed(() => isEmptyData(chartData.value as unknown as Record<string, unknown>[]));
 
@@ -101,18 +107,18 @@ const tabs = [
   }
 ];
 
-const chartTypes = [
-  {
-    icon: 'fa-light fa-chart-line-down',
-    label: 'Line',
-    value: 'line'
-  },
-  {
-    icon: 'fa-light fa-bars-sort',
-    label: 'Bar',
-    value: 'bar'
-  }
-];
+// const chartTypes = [
+//   {
+//     icon: 'fa-light fa-chart-line-down',
+//     label: 'Line',
+//     value: 'line'
+//   },
+//   {
+//     icon: 'fa-light fa-bars-sort',
+//     label: 'Bar',
+//     value: 'bar'
+//   }
+// ];
 
 const chartSeries = ref<ChartSeries[]>([
   {
diff --git a/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts b/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
index a08a387e6..16545c476 100644
--- a/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
+++ b/frontend/app/components/modules/project/components/contributors/types/contributors.types.ts
@@ -1,66 +1,3 @@
-import type { Summary, Meta } from '~~/types/shared/summary.types';
-
-export interface ActiveContributors {
-  summary: Summary;
-  data: {
-    startDate: string;
-    endDate: string;
-    contributors: number;
-  }[];
-}
-
-export interface ActiveOrganizations {
-  summary: Summary;
-  data: {
-    startDate: string;
-    endDate: string;
-    organizations: number;
-  }[];
-}
-
-export interface Contributor {
-  avatar: string;
-  name: string;
-  contributions: number;
-  percentage?: number;
-  email: string;
-}
-
-export interface Organization {
-  logo: string;
-  name: string;
-  contributions: number;
-  percentage?: number;
-  website: string;
-}
-
-export interface ContributorLeaderboard {
-  meta: Meta;
-  data: Contributor[];
-}
-
-export interface OrganizationLeaderboard {
-  meta: Meta;
-  data: Organization[];
-}
-
-export interface Dependency {
-  count: number;
-  percentage: number;
-}
-
-export interface ContributorDependency {
-  topContributors: Dependency;
-  otherContributors: Dependency;
-  list: Contributor[];
-}
-
-export interface OrganizationDependency {
-  topOrganizations: Dependency;
-  otherOrganizations: Dependency;
-  list: Organization[];
-}
-
 export interface GranularityTabs {
   label: string;
   value: string;
diff --git a/frontend/server/api/project/[slug]/contributors/retention.get.ts b/frontend/server/api/project/[slug]/contributors/retention.get.ts
index 70dd9a69b..796044e08 100644
--- a/frontend/server/api/project/[slug]/contributors/retention.get.ts
+++ b/frontend/server/api/project/[slug]/contributors/retention.get.ts
@@ -1,10 +1,13 @@
-import { contributorRetention, organizationRetention } from '~~/server/mocks/retention.mock';
+import {
+  contributorRetention,
+  organizationRetention
+} from '~~/server/mocks/retention.mock';
 
 /**
  * Frontend expects the data to be in the following format:
  * {
- *   dateFrom: string; // ISO 8601 date string - start of the bucket. Based on the interval
- *   dateTo: string; // ISO 8601 date string - end of the bucket. Based on the interval
+ *   startDate: string; // ISO 8601 date string - start of the bucket. Based on the interval
+ *   endDate: string; // ISO 8601 date string - end of the bucket. Based on the interval
  *   percentage: number; // percentage retention
  * }[]
  */
diff --git a/frontend/server/mocks/retention.mock.ts b/frontend/server/mocks/retention.mock.ts
index 145e10953..69d983d74 100644
--- a/frontend/server/mocks/retention.mock.ts
+++ b/frontend/server/mocks/retention.mock.ts
@@ -1,105 +1,105 @@
 export const contributorRetention = [
   {
-    dateFrom: '2024-11-11T00:00:00Z',
-    dateTo: '2024-11-18T00:00:00Z',
+    startDate: '2024-11-11T00:00:00Z',
+    endDate: '2024-11-18T00:00:00Z',
     percentage: 82
   },
   {
-    dateFrom: '2024-11-18T00:00:00Z',
-    dateTo: '2024-11-25T00:00:00Z',
+    startDate: '2024-11-18T00:00:00Z',
+    endDate: '2024-11-25T00:00:00Z',
     percentage: 68
   },
   {
-    dateFrom: '2024-11-25T00:00:00Z',
-    dateTo: '2024-12-02T00:00:00Z',
+    startDate: '2024-11-25T00:00:00Z',
+    endDate: '2024-12-02T00:00:00Z',
     percentage: 55
   },
   {
-    dateFrom: '2024-12-02T00:00:00Z',
-    dateTo: '2024-12-09T00:00:00Z',
+    startDate: '2024-12-02T00:00:00Z',
+    endDate: '2024-12-09T00:00:00Z',
     percentage: 42
   },
   {
-    dateFrom: '2024-12-09T00:00:00Z',
-    dateTo: '2024-12-16T00:00:00Z',
+    startDate: '2024-12-09T00:00:00Z',
+    endDate: '2024-12-16T00:00:00Z',
     percentage: 30
   },
   {
-    dateFrom: '2024-12-16T00:00:00Z',
-    dateTo: '2024-12-23T00:00:00Z',
+    startDate: '2024-12-16T00:00:00Z',
+    endDate: '2024-12-23T00:00:00Z',
     percentage: 20
   },
   {
-    dateFrom: '2024-12-23T00:00:00Z',
-    dateTo: '2024-12-30T00:00:00Z',
+    startDate: '2024-12-23T00:00:00Z',
+    endDate: '2024-12-30T00:00:00Z',
     percentage: 10
   },
   {
-    dateFrom: '2024-12-30T00:00:00Z',
-    dateTo: '2025-01-06T00:00:00Z',
+    startDate: '2024-12-30T00:00:00Z',
+    endDate: '2025-01-06T00:00:00Z',
     percentage: 5
   },
   {
-    dateFrom: '2025-01-06T00:00:00Z',
-    dateTo: '2025-01-13T00:00:00Z',
+    startDate: '2025-01-06T00:00:00Z',
+    endDate: '2025-01-13T00:00:00Z',
     percentage: 2
   },
   {
-    dateFrom: '2025-01-13T00:00:00Z',
-    dateTo: '2025-01-20T00:00:00Z',
+    startDate: '2025-01-13T00:00:00Z',
+    endDate: '2025-01-20T00:00:00Z',
     percentage: 1
   }
 ];
 
 export const organizationRetention = [
   {
-    dateFrom: '2024-11-11T00:00:00Z',
-    dateTo: '2024-11-18T00:00:00Z',
+    startDate: '2024-11-11T00:00:00Z',
+    endDate: '2024-11-18T00:00:00Z',
     percentage: 99
   },
   {
-    dateFrom: '2024-11-18T00:00:00Z',
-    dateTo: '2024-11-25T00:00:00Z',
+    startDate: '2024-11-18T00:00:00Z',
+    endDate: '2024-11-25T00:00:00Z',
     percentage: 98
   },
   {
-    dateFrom: '2024-11-25T00:00:00Z',
-    dateTo: '2024-12-02T00:00:00Z',
+    startDate: '2024-11-25T00:00:00Z',
+    endDate: '2024-12-02T00:00:00Z',
     percentage: 89
   },
   {
-    dateFrom: '2024-12-02T00:00:00Z',
-    dateTo: '2024-12-09T00:00:00Z',
+    startDate: '2024-12-02T00:00:00Z',
+    endDate: '2024-12-09T00:00:00Z',
     percentage: 80
   },
   {
-    dateFrom: '2024-12-09T00:00:00Z',
-    dateTo: '2024-12-16T00:00:00Z',
+    startDate: '2024-12-09T00:00:00Z',
+    endDate: '2024-12-16T00:00:00Z',
     percentage: 70
   },
   {
-    dateFrom: '2024-12-16T00:00:00Z',
-    dateTo: '2024-12-23T00:00:00Z',
+    startDate: '2024-12-16T00:00:00Z',
+    endDate: '2024-12-23T00:00:00Z',
     percentage: 60
   },
   {
-    dateFrom: '2024-12-23T00:00:00Z',
-    dateTo: '2024-12-30T00:00:00Z',
+    startDate: '2024-12-23T00:00:00Z',
+    endDate: '2024-12-30T00:00:00Z',
     percentage: 20
   },
   {
-    dateFrom: '2024-12-30T00:00:00Z',
-    dateTo: '2025-01-06T00:00:00Z',
+    startDate: '2024-12-30T00:00:00Z',
+    endDate: '2025-01-06T00:00:00Z',
     percentage: 10
   },
   {
-    dateFrom: '2025-01-06T00:00:00Z',
-    dateTo: '2025-01-13T00:00:00Z',
+    startDate: '2025-01-06T00:00:00Z',
+    endDate: '2025-01-13T00:00:00Z',
     percentage: 5
   },
   {
-    dateFrom: '2025-01-13T00:00:00Z',
-    dateTo: '2025-01-20T00:00:00Z',
+    startDate: '2025-01-13T00:00:00Z',
+    endDate: '2025-01-20T00:00:00Z',
     percentage: 1
   }
 ];
diff --git a/frontend/types/contributors/responses.types.ts b/frontend/types/contributors/responses.types.ts
index e69de29bb..451e47dbb 100644
--- a/frontend/types/contributors/responses.types.ts
+++ b/frontend/types/contributors/responses.types.ts
@@ -0,0 +1,68 @@
+import type { Summary, Meta } from '../shared/summary.types';
+
+export interface ActiveContributors {
+  summary: Summary;
+  data: {
+    startDate: string;
+    endDate: string;
+    contributors: number;
+  }[];
+}
+
+export interface ActiveOrganizations {
+  summary: Summary;
+  data: {
+    startDate: string;
+    endDate: string;
+    organizations: number;
+  }[];
+}
+
+export interface Contributor {
+  avatar: string;
+  name: string;
+  contributions: number;
+  percentage?: number;
+  email: string;
+}
+
+export interface Organization {
+  logo: string;
+  name: string;
+  contributions: number;
+  percentage?: number;
+  website: string;
+}
+
+export interface ContributorLeaderboard {
+  meta: Meta;
+  data: Contributor[];
+}
+
+export interface OrganizationLeaderboard {
+  meta: Meta;
+  data: Organization[];
+}
+
+export interface Dependency {
+  count: number;
+  percentage: number;
+}
+
+export interface ContributorDependency {
+  topContributors: Dependency;
+  otherContributors: Dependency;
+  list: Contributor[];
+}
+
+export interface OrganizationDependency {
+  topOrganizations: Dependency;
+  otherOrganizations: Dependency;
+  list: Organization[];
+}
+
+export interface Retention {
+  startDate: string;
+  endDate: string;
+  percentage: number;
+}

From c7bd102113a697ab2a815faa7ef93cfeb62e676e Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 11 Mar 2025 10:21:35 +0800
Subject: [PATCH 5/5] moved popularity chart widget types to common

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../project/components/popularity/forks.vue   |  2 +-
 .../components/popularity/github-mentions.vue |  2 +-
 .../components/popularity/press-mentions.vue  |  2 +-
 .../components/popularity/social-mentions.vue |  2 +-
 .../project/components/popularity/stars.vue   |  2 +-
 .../popularity/types/popularity.types.ts      | 19 ------------------
 .../popularity/responses.types.ts}            | 20 ++++++++++++++++++-
 7 files changed, 24 insertions(+), 25 deletions(-)
 delete mode 100644 frontend/app/components/modules/project/components/popularity/types/popularity.types.ts
 rename frontend/{app/components/modules/project/components/popularity/types/mentions.types.ts => types/popularity/responses.types.ts} (67%)

diff --git a/frontend/app/components/modules/project/components/popularity/forks.vue b/frontend/app/components/modules/project/components/popularity/forks.vue
index a2cbe70dd..95d2b2128 100644
--- a/frontend/app/components/modules/project/components/popularity/forks.vue
+++ b/frontend/app/components/modules/project/components/popularity/forks.vue
@@ -56,7 +56,7 @@ import { ref, computed } from 'vue';
 import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
-import type { ForksData } from './types/popularity.types';
+import type { ForksData } from '~~/types/popularity/responses.types';
 import { lineGranularities, barGranularities } from '~/components/shared/types/granularity';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/github-mentions.vue b/frontend/app/components/modules/project/components/popularity/github-mentions.vue
index 0e9ce5ec2..39ac97d95 100644
--- a/frontend/app/components/modules/project/components/popularity/github-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/github-mentions.vue
@@ -41,7 +41,7 @@
 import { useFetch, useRoute } from 'nuxt/app';
 import { ref, computed, watch } from 'vue';
 import { storeToRefs } from "pinia";
-import type { GithubMentions } from './types/mentions.types';
+import type { GithubMentions } from '~~/types/popularity/responses.types';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/press-mentions.vue b/frontend/app/components/modules/project/components/popularity/press-mentions.vue
index ca7948272..f266337d1 100644
--- a/frontend/app/components/modules/project/components/popularity/press-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/press-mentions.vue
@@ -38,8 +38,8 @@
 import { useFetch, useRoute } from 'nuxt/app';
 import { ref, computed, watch } from 'vue';
 import { storeToRefs } from "pinia";
-import type { PressMentions, PressMention } from './types/mentions.types';
 import LfxProjectPressMentionLists from './fragments/press-mention-lists.vue';
+import type { PressMentions, PressMention } from '~~/types/popularity/responses.types';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/social-mentions.vue b/frontend/app/components/modules/project/components/popularity/social-mentions.vue
index d3d2b2cea..21bba2576 100644
--- a/frontend/app/components/modules/project/components/popularity/social-mentions.vue
+++ b/frontend/app/components/modules/project/components/popularity/social-mentions.vue
@@ -41,7 +41,7 @@
 import { useFetch, useRoute } from 'nuxt/app';
 import { ref, computed, watch } from 'vue';
 import { storeToRefs } from "pinia";
-import type { SocialMentions } from './types/mentions.types';
+import type { SocialMentions } from '~~/types/popularity/responses.types';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/stars.vue b/frontend/app/components/modules/project/components/popularity/stars.vue
index 9dd3f92f7..f290be287 100644
--- a/frontend/app/components/modules/project/components/popularity/stars.vue
+++ b/frontend/app/components/modules/project/components/popularity/stars.vue
@@ -56,7 +56,7 @@ import { ref, computed } from 'vue';
 import { storeToRefs } from "pinia";
 import LfxProjectLoadState from '../shared/load-state.vue';
 import LfxSkeletonState from '../shared/skeleton-state.vue';
-import type { StarsData } from './types/popularity.types';
+import type { StarsData } from '~~/types/popularity/responses.types';
 import { lineGranularities, barGranularities } from '~/components/shared/types/granularity';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxCard from '~/components/uikit/card/card.vue';
diff --git a/frontend/app/components/modules/project/components/popularity/types/popularity.types.ts b/frontend/app/components/modules/project/components/popularity/types/popularity.types.ts
deleted file mode 100644
index 5ebc0183d..000000000
--- a/frontend/app/components/modules/project/components/popularity/types/popularity.types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Summary } from '~~/types/shared/summary.types';
-
-export interface StarsData {
-  summary: Summary;
-  data: {
-    dateFrom: string;
-    dateTo: string;
-    stars: number;
-  }[];
-}
-
-export interface ForksData {
-  summary: Summary;
-  data: {
-    dateFrom: string;
-    dateTo: string;
-    forks: number;
-  }[];
-}
diff --git a/frontend/app/components/modules/project/components/popularity/types/mentions.types.ts b/frontend/types/popularity/responses.types.ts
similarity index 67%
rename from frontend/app/components/modules/project/components/popularity/types/mentions.types.ts
rename to frontend/types/popularity/responses.types.ts
index 1a9b4438e..be2c7f74b 100644
--- a/frontend/app/components/modules/project/components/popularity/types/mentions.types.ts
+++ b/frontend/types/popularity/responses.types.ts
@@ -1,4 +1,22 @@
-import type { Summary } from '~~/types/shared/summary.types';
+import type { Summary } from '../shared/summary.types';
+
+export interface StarsData {
+  summary: Summary;
+  data: {
+    dateFrom: string;
+    dateTo: string;
+    stars: number;
+  }[];
+}
+
+export interface ForksData {
+  summary: Summary;
+  data: {
+    dateFrom: string;
+    dateTo: string;
+    forks: number;
+  }[];
+}
 
 export interface SocialMentions {
   summary: Summary;