From 1274e0d36ca7df26d4f429776a88567a288139e9 Mon Sep 17 00:00:00 2001
From: Sami Lafrance <sami.lepays@gmail.com>
Date: Fri, 15 Nov 2024 14:10:52 +0100
Subject: [PATCH 1/2] Create pull request


From cc84d466e417780b3bd5c915ac368c852af5ddb3 Mon Sep 17 00:00:00 2001
From: Sami Lafrance <sami.lepays@gmail.com>
Date: Fri, 15 Nov 2024 17:52:37 +0100
Subject: [PATCH 2/2] feat(financial): budget

---
 .../budget-available-cards.tsx                |   4 +-
 .../budget-available-cards.tsx                |   4 +-
 .../budget-available-cards.tsx                |  98 +++++++++++++++++
 .../budget-available-cards.types.ts           |  17 +++
 .../budget-available.en.json                  |  11 ++
 .../financial-column-chart.en.json            |   1 +
 .../financial-column-chart.tsx                |   3 +
 .../transactions-trigger.tsx                  |  28 +++++
 .../financial-section/financial-section.tsx   | 104 ++++++++++++++----
 .../_translations/my-dashboard.en.json        |  15 ++-
 .../_translations/my-dashboard.translate.ts   |   5 +
 app/my-dashboard/page.tsx                     |   2 +
 .../budget-available-cards.tsx                |   4 +-
 .../financial-detail-sidepanel.en.json        |   9 ++
 .../financial-detail-sidepanel.types.ts       |   8 +-
 15 files changed, 283 insertions(+), 30 deletions(-)
 create mode 100644 app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available-cards.tsx
 create mode 100644 app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available-cards.types.ts
 create mode 100644 app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available.en.json
 create mode 100644 app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.en.json
 create mode 100644 app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.tsx
 create mode 100644 app/my-dashboard/_sections/financial-section/_components/transactions-trigger/transactions-trigger.tsx

diff --git a/app/financials/[sponsorId]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx b/app/financials/[sponsorId]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
index e95c3f22b..bc74b6bc4 100644
--- a/app/financials/[sponsorId]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
+++ b/app/financials/[sponsorId]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
@@ -6,7 +6,7 @@ import { CardFinancialLoading } from "@/design-system/molecules/cards/card-finan
 
 import { FinancialCardItem } from "@/shared/features/financial-card-item/financial-card-item";
 import { useFinancialDetailSidepanel } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.hooks";
-import { PanelType } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types";
+import { PanelMaintainerType } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types";
 
 export function BudgetAvailableCards() {
   const { sponsorId = "" } = useParams<{ sponsorId: string }>();
@@ -37,7 +37,7 @@ export function BudgetAvailableCards() {
     return null;
   }
 
-  function openPanel(panelType: PanelType) {
+  function openPanel(panelType: PanelMaintainerType) {
     if (data) {
       open({
         panelType,
diff --git a/app/manage-projects/[projectSlug]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx b/app/manage-projects/[projectSlug]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
index 7d14e7103..6e04ffac4 100644
--- a/app/manage-projects/[projectSlug]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
+++ b/app/manage-projects/[projectSlug]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
@@ -6,7 +6,7 @@ import { CardFinancialLoading } from "@/design-system/molecules/cards/card-finan
 
 import { FinancialCardItem } from "@/shared/features/financial-card-item/financial-card-item";
 import { useFinancialDetailSidepanel } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.hooks";
-import { PanelType } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types";
+import { PanelMaintainerType } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types";
 
 export function BudgetAvailableCards() {
   const { projectSlug = "" } = useParams<{ projectSlug: string }>();
@@ -33,7 +33,7 @@ export function BudgetAvailableCards() {
     return null;
   }
 
-  function openPanel(panelType: Exclude<PanelType, "totalAllocated">) {
+  function openPanel(panelType: Exclude<PanelMaintainerType, "totalAllocated">) {
     if (data) {
       open({
         panelType,
diff --git a/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available-cards.tsx b/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available-cards.tsx
new file mode 100644
index 000000000..34e6104ec
--- /dev/null
+++ b/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available-cards.tsx
@@ -0,0 +1,98 @@
+import { BiReactQueryAdapter } from "@/core/application/react-query-adapter/bi";
+import { DetailedTotalMoneyTotalPerCurrency } from "@/core/kernel/money/money.types";
+
+import { CardFinancialLoading } from "@/design-system/molecules/cards/card-financial/card-financial.loading";
+
+import { FinancialCardItem } from "@/shared/features/financial-card-item/financial-card-item";
+import { useAuthUser } from "@/shared/hooks/auth/use-auth-user";
+import { useFinancialDetailSidepanel } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.hooks";
+import { PanelContributorType } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types";
+
+export function BudgetAvailableCards() {
+  const { open } = useFinancialDetailSidepanel();
+
+  const { githubUserId } = useAuthUser();
+
+  const { data, isLoading } = BiReactQueryAdapter.client.useGetBiStatsFinancials({
+    queryParams: {
+      recipientId: githubUserId,
+      showEmpty: true,
+    },
+    options: {
+      enabled: Boolean(githubUserId),
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="grid min-h-[150px] grid-cols-1 gap-2 tablet:grid-cols-2 desktop:grid-cols-3">
+        <CardFinancialLoading />
+        <CardFinancialLoading />
+        <CardFinancialLoading />
+      </div>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const rewardPendingAmount = {
+    totalUsdEquivalent: data.stats[0].totalRewarded.totalUsdEquivalent - data.stats[0].totalPaid.totalUsdEquivalent,
+    totalPerCurrency: data.stats[0].totalRewarded.totalPerCurrency
+      ?.map(rewarded => {
+        const paid = data.stats[0].totalPaid.totalPerCurrency?.find(p => p.currency.id === rewarded.currency.id) || {
+          usdEquivalent: 0,
+        };
+
+        const pendingUsdEquivalent = (rewarded.usdEquivalent || 0) - (paid.usdEquivalent || 0);
+
+        if (pendingUsdEquivalent !== 0) {
+          return {
+            ...rewarded,
+            usdEquivalent: pendingUsdEquivalent,
+          };
+        }
+
+        return null;
+      })
+      .filter(item => item !== null),
+  };
+
+  function openPanel(
+    panelType: PanelContributorType,
+    total: { totalUsdEquivalent: number; totalPerCurrency?: DetailedTotalMoneyTotalPerCurrency[] }
+  ) {
+    if (data) {
+      open({
+        panelType,
+        total,
+      });
+    }
+  }
+
+  return (
+    <div className="grid min-h-[150px] grid-cols-1 gap-2 tablet:grid-cols-2 desktop:grid-cols-3">
+      <FinancialCardItem
+        title="myDashboard:budgetAvailable.rewarded.title"
+        total={data.stats[0].totalRewarded}
+        color="gradient"
+        onClick={() => openPanel("rewardedAmount", data.stats[0].totalRewarded)}
+      />
+
+      <FinancialCardItem
+        title="myDashboard:budgetAvailable.pending.title"
+        total={rewardPendingAmount}
+        color="grey"
+        onClick={() => openPanel("rewardPendingAmount", rewardPendingAmount)}
+      />
+
+      <FinancialCardItem
+        title="myDashboard:budgetAvailable.paid.title"
+        total={data.stats[0].totalPaid}
+        color="grey"
+        onClick={() => openPanel("rewardPaid", data.stats[0].totalPaid)}
+      />
+    </div>
+  );
+}
diff --git a/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available-cards.types.ts b/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available-cards.types.ts
new file mode 100644
index 000000000..1b6a0aa72
--- /dev/null
+++ b/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available-cards.types.ts
@@ -0,0 +1,17 @@
+import { ProjectFinancial } from "@/core/domain/project/models/project-financial-model";
+import { AnyType } from "@/core/kernel/types";
+
+import { CardFinancialPort } from "@/design-system/molecules/cards/card-financial/card-financial.types";
+
+import { TranslateProps } from "@/shared/translation/components/translate/translate.types";
+
+export interface CreateAvatarGroupProps {
+  total: ProjectFinancial["totalAvailable" | "totalGranted" | "totalRewarded"];
+}
+
+export interface FinancialCardItemProps {
+  title: TranslateProps["token"];
+  total: ProjectFinancial["totalAvailable" | "totalGranted" | "totalRewarded"];
+  color: CardFinancialPort<AnyType>["color"];
+  onClick?: () => void;
+}
diff --git a/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available.en.json b/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available.en.json
new file mode 100644
index 000000000..b27d23c5f
--- /dev/null
+++ b/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available.en.json
@@ -0,0 +1,11 @@
+{
+  "rewarded": {
+    "title": "Rewarded amount"
+  },
+  "pending": {
+    "title": "Pending amount"
+  },
+  "paid": {
+    "title": "Paid"
+  }
+}
diff --git a/app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.en.json b/app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.en.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.en.json
@@ -0,0 +1 @@
+{}
diff --git a/app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.tsx b/app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.tsx
new file mode 100644
index 000000000..8b4cea851
--- /dev/null
+++ b/app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.tsx
@@ -0,0 +1,3 @@
+export function FinancialColumnChart() {
+  return <p>Charts</p>;
+}
diff --git a/app/my-dashboard/_sections/financial-section/_components/transactions-trigger/transactions-trigger.tsx b/app/my-dashboard/_sections/financial-section/_components/transactions-trigger/transactions-trigger.tsx
new file mode 100644
index 000000000..872d641f0
--- /dev/null
+++ b/app/my-dashboard/_sections/financial-section/_components/transactions-trigger/transactions-trigger.tsx
@@ -0,0 +1,28 @@
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/design-system/atoms/button/variants/button-default";
+
+export function TransactionsTrigger() {
+  function togglePanel() {
+    console.log("togglePanel");
+  }
+
+  return (
+    <>
+      <Button
+        variant="primary"
+        endIcon={{ component: ChevronRight }}
+        isTextButton
+        size="md"
+        translate={{ token: "myDashboard:detail.financial.buttons.seeTransactions" }}
+        onClick={togglePanel}
+        classNames={{
+          base: "max-w-full overflow-hidden",
+          label: "whitespace-nowrap text-ellipsis overflow-hidden",
+        }}
+      />
+
+      {/* TODO: Add panel */}
+    </>
+  );
+}
diff --git a/app/my-dashboard/_sections/financial-section/financial-section.tsx b/app/my-dashboard/_sections/financial-section/financial-section.tsx
index 34bab31fc..3e4a92f58 100644
--- a/app/my-dashboard/_sections/financial-section/financial-section.tsx
+++ b/app/my-dashboard/_sections/financial-section/financial-section.tsx
@@ -1,17 +1,35 @@
-import { ChevronRight } from "lucide-react";
+import { ChartColumn, ChevronRight, CircleDollarSign } from "lucide-react";
+import { useMemo, useState } from "react";
 
 import { RewardReactQueryAdapter } from "@/core/application/react-query-adapter/reward";
 
 import { Button } from "@/design-system/atoms/button/variants/button-default";
+import { Tooltip } from "@/design-system/atoms/tooltip";
+import { Typo } from "@/design-system/atoms/typo";
+import { Tabs } from "@/design-system/molecules/tabs/tabs";
 
+import { useSidePanelsContext } from "@/shared/features/side-panels/side-panels.context";
 import { useAuthUser } from "@/shared/hooks/auth/use-auth-user";
 import { useRequestPaymentFlow } from "@/shared/panels/_flows/request-payment-flow/request-payment-flow.context";
+import { Translate } from "@/shared/translation/components/translate/translate";
+
+import { BudgetAvailableCards } from "./_components/budget-available-cards/budget-available-cards";
+import { FinancialColumnChart } from "./_components/financial-column-chart/financial-column-chart";
+import { TransactionsTrigger } from "./_components/transactions-trigger/transactions-trigger";
+
+const BUDGET_AVAILABLE = "budgetAvailable";
+const REWARD_CHART = "rewardChart";
 
 export function FinancialSection() {
-  const { open: openRequestPaymentFlow } = useRequestPaymentFlow();
+  const [toggleFinancialViews, setToggleFinancialViews] = useState<typeof BUDGET_AVAILABLE | typeof REWARD_CHART>(
+    BUDGET_AVAILABLE
+  );
 
   const { githubUserId } = useAuthUser();
 
+  const { open: openRequestPaymentFlow } = useRequestPaymentFlow();
+  const { close } = useSidePanelsContext();
+
   const { data: rewardsData } = RewardReactQueryAdapter.client.useGetRewards({
     queryParams: {
       recipientIds: githubUserId ? [githubUserId] : undefined,
@@ -22,33 +40,79 @@ export function FinancialSection() {
     },
   });
 
+  const hasRewards = (rewardsData?.pages[0].totalItemNumber || 0) > 0;
+
+  const renderFinancialView = useMemo(() => {
+    if (toggleFinancialViews === BUDGET_AVAILABLE) {
+      return <BudgetAvailableCards />;
+    }
+
+    return <FinancialColumnChart />;
+  }, [toggleFinancialViews]);
+
+  function handleToggleFinancialViews(view: string) {
+    close();
+    setToggleFinancialViews(view as typeof BUDGET_AVAILABLE | typeof REWARD_CHART);
+  }
+
   return (
     <div className="flex flex-col gap-xl">
       <div className="flex flex-col flex-wrap justify-between gap-md tablet:flex-row tablet:items-center">
         <div className="flex flex-col gap-md tablet:flex-row tablet:items-center">
-          <p>Financial</p>
+          <Typo
+            size="xs"
+            weight="medium"
+            variant="heading"
+            translate={{ token: "myDashboard:detail.financial.title" }}
+          />
 
-          <p>Tabs</p>
+          <Tabs
+            onTabClick={handleToggleFinancialViews}
+            variant="solid"
+            tabs={[
+              {
+                id: BUDGET_AVAILABLE,
+                children: <Translate token="myDashboard:detail.financial.buttons.budgetAvailable" />,
+                startIcon: { component: CircleDollarSign },
+              },
+              {
+                id: REWARD_CHART,
+                children: <Translate token="myDashboard:detail.financial.buttons.rewardChart" />,
+                startIcon: { component: ChartColumn },
+              },
+            ]}
+            selectedId={toggleFinancialViews}
+          />
         </div>
 
-        <Button
-          variant="primary"
-          endIcon={{ component: ChevronRight }}
-          isTextButton
-          size="md"
-          translate={{
-            token: "myDashboard:detail.requestPayment.trigger",
-            count: rewardsData?.pages[0].totalItemNumber,
-          }}
-          onClick={() => openRequestPaymentFlow({})}
-          classNames={{
-            base: "max-w-full overflow-hidden",
-            label: "whitespace-nowrap text-ellipsis overflow-hidden",
-          }}
-        />
+        <div className="flex items-center gap-lg">
+          <Tooltip
+            enabled={!hasRewards}
+            content={<Translate token="myDashboard:detail.financial.tooltip.disabledRequestPayment" />}
+          >
+            <Button
+              variant="primary"
+              endIcon={{ component: ChevronRight }}
+              isTextButton
+              size="md"
+              translate={{
+                token: "myDashboard:detail.financial.buttons.requestPayment",
+                count: rewardsData?.pages[0].totalItemNumber,
+              }}
+              classNames={{
+                base: "max-w-full overflow-hidden",
+                label: "whitespace-nowrap text-ellipsis overflow-hidden",
+              }}
+              onClick={() => openRequestPaymentFlow({})}
+              isDisabled={!hasRewards}
+            />
+          </Tooltip>
+
+          <TransactionsTrigger />
+        </div>
       </div>
 
-      <p>Financial view</p>
+      {renderFinancialView}
     </div>
   );
 }
diff --git a/app/my-dashboard/_translations/my-dashboard.en.json b/app/my-dashboard/_translations/my-dashboard.en.json
index a8de03cfb..7c8d401da 100644
--- a/app/my-dashboard/_translations/my-dashboard.en.json
+++ b/app/my-dashboard/_translations/my-dashboard.en.json
@@ -2,6 +2,18 @@
   "header": {
     "title": "My Dashboard"
   },
+  "financial": {
+    "title": "Financial",
+    "buttons": {
+      "budgetAvailable": "Budget available",
+      "rewardChart": "Reward chart",
+      "requestPayment": "Request payment ({{ count }})",
+      "seeTransactions": "See transactions"
+    },
+    "tooltip": {
+      "disabledRequestPayment": "No rewards available"
+    }
+  },
   "activity": {
     "title": "Activity",
     "buttons": {
@@ -47,8 +59,5 @@
       "cancelReward": "Cancel"
     },
     "rewardsCount": "Rewards"
-  },
-  "requestPayment": {
-    "trigger": "Request payment ({{ count }})"
   }
 }
diff --git a/app/my-dashboard/_translations/my-dashboard.translate.ts b/app/my-dashboard/_translations/my-dashboard.translate.ts
index 2407f6a65..bd9056671 100644
--- a/app/my-dashboard/_translations/my-dashboard.translate.ts
+++ b/app/my-dashboard/_translations/my-dashboard.translate.ts
@@ -1,7 +1,12 @@
+import enBudgetAvailable from "@/app/my-dashboard/_sections/financial-section/_components/budget-available-cards/budget-available.en.json";
+import enFinancialColumnChart from "@/app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.en.json";
+
 import enMyDashboard from "../_translations/my-dashboard.en.json";
 
 export const enMyDashboardTranslation = {
   myDashboard: {
     detail: enMyDashboard,
+    budgetAvailable: enBudgetAvailable,
+    financialColumnChart: enFinancialColumnChart,
   },
 };
diff --git a/app/my-dashboard/page.tsx b/app/my-dashboard/page.tsx
index 346632913..3ff56da74 100644
--- a/app/my-dashboard/page.tsx
+++ b/app/my-dashboard/page.tsx
@@ -12,6 +12,7 @@ import { PageWrapper } from "@/shared/features/page-wrapper/page-wrapper";
 import { RequestPaymentFlowProvider } from "@/shared/panels/_flows/request-payment-flow/request-payment-flow.context";
 import { ContributionsSidepanel } from "@/shared/panels/contribution-sidepanel/contributions-sidepanel";
 import { ContributorSidepanel } from "@/shared/panels/contributor-sidepanel/contributor-sidepanel";
+import { FinancialDetailSidepanel } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel";
 import { PosthogCaptureOnMount } from "@/shared/tracking/posthog/posthog-capture-on-mount/posthog-capture-on-mount";
 import { Translate } from "@/shared/translation/components/translate/translate";
 
@@ -43,6 +44,7 @@ function MyDashboardPage() {
           </ScrollView>
         </AnimatedColumn>
 
+        <FinancialDetailSidepanel />
         <ContributorSidepanel />
         <ContributionsSidepanel />
       </RequestPaymentFlowProvider>
diff --git a/app/programs/[programId]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx b/app/programs/[programId]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
index 3a61a62cf..3ae68a8aa 100644
--- a/app/programs/[programId]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
+++ b/app/programs/[programId]/_sections/financial-section/components/budget-available-cards/budget-available-cards.tsx
@@ -6,7 +6,7 @@ import { CardFinancialLoading } from "@/design-system/molecules/cards/card-finan
 
 import { FinancialCardItem } from "@/shared/features/financial-card-item/financial-card-item";
 import { useFinancialDetailSidepanel } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.hooks";
-import { PanelType } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types";
+import { PanelMaintainerType } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types";
 
 export function BudgetAvailableCards() {
   const { programId = "" } = useParams<{ programId: string }>();
@@ -36,7 +36,7 @@ export function BudgetAvailableCards() {
     return null;
   }
 
-  function openPanel(panelType: Exclude<PanelType, "totalAllocated">) {
+  function openPanel(panelType: Exclude<PanelMaintainerType, "totalAllocated">) {
     if (data) {
       open({
         panelType,
diff --git a/shared/panels/financial-detail-sidepanel/_translations/financial-detail-sidepanel.en.json b/shared/panels/financial-detail-sidepanel/_translations/financial-detail-sidepanel.en.json
index 4652c8e7c..6849298f8 100644
--- a/shared/panels/financial-detail-sidepanel/_translations/financial-detail-sidepanel.en.json
+++ b/shared/panels/financial-detail-sidepanel/_translations/financial-detail-sidepanel.en.json
@@ -12,6 +12,15 @@
   "totalRewarded": {
     "title": "Rewarded"
   },
+  "rewardedAmount": {
+    "title": "Rewarded amount"
+  },
+  "rewardPendingAmount": {
+    "title": "Pending amount"
+  },
+  "rewardPaid": {
+    "title": "Paid"
+  },
   "emptyState": {
     "title": "No financial details available",
     "description": "There are no financial details available."
diff --git a/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types.ts b/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types.ts
index 0f64d333f..16a4aecfc 100644
--- a/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types.ts
+++ b/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel.types.ts
@@ -1,6 +1,9 @@
 import { DetailedTotalMoney } from "@/core/kernel/money/money.types";
 
-export type PanelType = "totalAllocated" | "totalAvailable" | "totalGranted" | "totalRewarded";
+export type PanelMaintainerType = "totalAllocated" | "totalAvailable" | "totalGranted" | "totalRewarded";
+export type PanelContributorType = "rewardedAmount" | "rewardPendingAmount" | "rewardPaid";
+
+export type PanelType = PanelMaintainerType | PanelContributorType;
 
 export interface FinancialDetailSidepanelData {
   panelType: PanelType;
@@ -12,4 +15,7 @@ export const colorMapping: Record<PanelType, "gradient" | "grey"> = {
   totalAllocated: "grey",
   totalGranted: "grey",
   totalRewarded: "grey",
+  rewardedAmount: "gradient",
+  rewardPendingAmount: "grey",
+  rewardPaid: "grey",
 };