Create financial budget section

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,

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,

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>
+  );
+}

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;
+}

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"
+  }
+}

app/my-dashboard/_sections/financial-section/_components/financial-column-chart/financial-column-chart.en.json

@@ -0,0 +1 @@
+{}

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>;
+}

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 */}
+    </>
+  );
+}

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>
   );
 }

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 }})"
   }
 }

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,
   },
 };

app/my-dashboard/page.tsx

@@ -13,6 +13,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 { RewardDetailSidepanel } from "@/shared/panels/reward-detail-sidepanel/reward-detail-sidepanel";
 import { PosthogCaptureOnMount } from "@/shared/tracking/posthog/posthog-capture-on-mount/posthog-capture-on-mount";
 import { Translate } from "@/shared/translation/components/translate/translate";
@@ -46,6 +47,7 @@ function MyDashboardPage() {
             </ScrollView>
           </AnimatedColumn>
 
+          <FinancialDetailSidepanel />
           <ContributorSidepanel />
           <ContributionsSidepanel />
           <RewardDetailSidepanel />