refactor: financial routes

app/financials/[sponsorId]/_translations/financial-detail.en.json

@@ -4,7 +4,7 @@
     "financial": "Financial"
   },
   "financial": {
-    "buttons": {
+    "actions": {
       "budgetAvailable": "Budget",
       "budgetChart": "Chart",
       "seeTransactions": "See transactions",

app/financials/[sponsorId]/_views/financial/deposit-button/deposit-button.tsx → app/financials/[sponsorId]/financial/_features/deposit-button/deposit-button.tsx

@@ -1,4 +1,4 @@
-import { DepositButtonProps } from "@/app/financials/[sponsorId]/_views/financial/deposit-button/deposit-button.types";
+import { DepositButtonProps } from "@/app/financials/[sponsorId]/financial/_features/deposit-button/deposit-button.types";
 
 import { Button } from "@/design-system/atoms/button/variants/button-default";
 
@@ -11,7 +11,7 @@ export function DepositButton({ sponsorId }: DepositButtonProps) {
     <Button
       variant={"primary"}
       size={"sm"}
-      translate={{ token: "financials:details.financial.buttons.makeDeposit" }}
+      translate={{ token: "financials:details.financial.actions.makeDeposit" }}
       classNames={{
         base: "max-w-full overflow-hidden",
         label: "whitespace-nowrap text-ellipsis overflow-hidden",

app/financials/[sponsorId]/_views/financial/financial-column-chart/financial-column-chart.tsx → app/financials/[sponsorId]/financial/_features/financial-column-chart/financial-column-chart.tsx

@@ -3,7 +3,7 @@ import { useParams } from "next/navigation";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useFinancialColumnChart } from "@/app/financials/[sponsorId]/_views/financial/financial-column-chart/financial-column-chart.hooks";
+import { useFinancialColumnChart } from "@/app/financials/[sponsorId]/financial/_features/financial-column-chart/financial-column-chart.hooks";
 
 import { BiReactQueryAdapter } from "@/core/application/react-query-adapter/bi";
 import { bootstrap } from "@/core/bootstrap";

app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context.tsx → app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context.tsx

@@ -9,7 +9,7 @@ import {
   TransactionsContextProps,
   TransactionsContextQueryParams,
   TransactionsContextReturn,
-} from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context.types";
+} from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context.types";
 
 import { BiReactQueryAdapter } from "@/core/application/react-query-adapter/bi";
 import { bootstrap } from "@/core/bootstrap";

app/financials/[sponsorId]/_views/financial/transactions-sidepanel/export-csv/export-csv.tsx → app/financials/[sponsorId]/financial/_features/transactions-sidepanel/export-csv/export-csv.tsx

@@ -1,5 +1,5 @@
-import { useTransactionsContext } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context";
-import { TransactionsContextFilterTypes } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context.types";
+import { useTransactionsContext } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context";
+import { TransactionsContextFilterTypes } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context.types";
 
 import { bootstrap } from "@/core/bootstrap";
 

app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions-sidepanel.tsx → app/financials/[sponsorId]/financial/_features/transactions-sidepanel/transactions-sidepanel.tsx

@@ -1,6 +1,6 @@
-import { useTransactionsContext } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context";
-import { ExportCsv } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/export-csv/export-csv";
-import { Transactions } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions/transactions";
+import { useTransactionsContext } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context";
+import { ExportCsv } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/export-csv/export-csv";
+import { Transactions } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/transactions/transactions";
 
 import { Button } from "@/design-system/atoms/button/variants/button-default";
 

app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions/components/header/header.tsx → app/financials/[sponsorId]/financial/_features/transactions-sidepanel/transactions/components/header/header.tsx

@@ -1,8 +1,8 @@
 import { Filter, Search } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
-import { useTransactionsContext } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context";
-import { TransactionsContextFilterTypes } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context.types";
+import { useTransactionsContext } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context";
+import { TransactionsContextFilterTypes } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context.types";
 
 import { Badge } from "@/design-system/atoms/badge";
 import { Button } from "@/design-system/atoms/button/variants/button-default";

app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions/components/transactions-wrapper/transactions-wrapper.tsx → app/financials/[sponsorId]/financial/_features/transactions-sidepanel/transactions/components/transactions-wrapper/transactions-wrapper.tsx

@@ -1,7 +1,7 @@
 import { Check, LoaderCircle, X } from "lucide-react";
 import { useMemo } from "react";
 
-import { useTransactionsContext } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context";
+import { useTransactionsContext } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context";
 
 import { SponsorReactQueryAdapter } from "@/core/application/react-query-adapter/sponsor";
 import { bootstrap } from "@/core/bootstrap";

app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions/transactions.tsx → app/financials/[sponsorId]/financial/_features/transactions-sidepanel/transactions/transactions.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 
-import { useTransactionsContext } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context";
-import { Header } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions/components/header/header";
-import { TransactionsWrapper } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions/components/transactions-wrapper/transactions-wrapper";
+import { useTransactionsContext } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context";
+import { Header } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/transactions/components/header/header";
+import { TransactionsWrapper } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/transactions/components/transactions-wrapper/transactions-wrapper";
 
 import { bootstrap } from "@/core/bootstrap";
 

app/financials/[sponsorId]/_views/financial/transactions-trigger/transactions-trigger.tsx → app/financials/[sponsorId]/financial/_features/transactions-trigger/transactions-trigger.tsx

@@ -1,8 +1,8 @@
 import { ChevronRight } from "lucide-react";
 import { useParams } from "next/navigation";
 
-import { TransactionsContextProvider } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context";
-import { TransactionsSidepanel } from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions-sidepanel";
+import { TransactionsContextProvider } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/context/transactions.context";
+import { TransactionsSidepanel } from "@/app/financials/[sponsorId]/financial/_features/transactions-sidepanel/transactions-sidepanel";
 
 import { Button } from "@/design-system/atoms/button/variants/button-default";
 
@@ -27,7 +27,7 @@ export function TransactionsTrigger() {
         endIcon={{ component: ChevronRight }}
         isTextButton
         size={"md"}
-        translate={{ token: "financials:details.financial.buttons.seeTransactions" }}
+        translate={{ token: "financials:details.financial.actions.seeTransactions" }}
         onClick={togglePanel}
         classNames={{
           base: "max-w-full overflow-hidden",

app/financials/[sponsorId]/financial/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { BudgetAvailableCards } from "@/app/financials/[sponsorId]/financial/_features/budget-available-cards/budget-available-cards";
+
+import { DepositFlow } from "@/shared/panels/_flows/deposit-flow/deposit-flow";
+import { FinancialDetailSidepanel } from "@/shared/panels/financial-detail-sidepanel/financial-detail-sidepanel";
+
+export default function FinancialsFinancialPage() {
+  return (
+    <>
+      <BudgetAvailableCards />
+
+      <FinancialDetailSidepanel />
+      <DepositFlow />
+    </>
+  );
+}

app/financials/[sponsorId]/layout.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { PropsWithChildren, useCallback, useMemo } from "react";
+
+import { DepositButton } from "@/app/financials/[sponsorId]/financial/_features/deposit-button/deposit-button";
+import { AllocateButton } from "@/app/financials/[sponsorId]/programs/_features/allocate-button/allocate-button";
+import { CreateButton } from "@/app/financials/[sponsorId]/programs/_features/create-button/create-button";
+
+import { SponsorReactQueryAdapter } from "@/core/application/react-query-adapter/sponsor";
+
+import { Tabs } from "@/design-system/molecules/tabs/tabs";
+
+import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
+import { BaseLink } from "@/shared/components/base-link/base-link";
+import { ScrollView } from "@/shared/components/scroll-view/scroll-view";
+import { NEXT_ROUTER } from "@/shared/constants/router";
+import { PageContent } from "@/shared/features/page-content/page-content";
+import { PageWrapper } from "@/shared/features/page-wrapper/page-wrapper";
+import { useMatchPath } from "@/shared/hooks/router/use-match-path";
+import { PosthogCaptureOnMount } from "@/shared/tracking/posthog/posthog-capture-on-mount/posthog-capture-on-mount";
+import { Translate } from "@/shared/translation/components/translate/translate";
+
+enum Views {
+  "PROGRAMS" = "PROGRAMS",
+  "FINANCIAL" = "FINANCIAL",
+}
+
+export default function FinancialDetailLayout({
+  children,
+  params: { sponsorId },
+}: PropsWithChildren<{ params: { sponsorId: string } }>) {
+  const isPrograms = useMatchPath(NEXT_ROUTER.financials.programs.root(sponsorId));
+  const isFinancial = useMatchPath(NEXT_ROUTER.financials.financial.root(sponsorId));
+
+  const selectedId = useMemo(() => {
+    if (isPrograms) {
+      return Views.PROGRAMS;
+    }
+    if (isFinancial) {
+      return Views.FINANCIAL;
+    }
+  }, [isPrograms, isFinancial]);
+
+  const renderActions = useCallback(() => {
+    if (isPrograms) {
+      return (
+        <>
+          <CreateButton sponsorId={sponsorId} />
+          <AllocateButton sponsorId={sponsorId} />
+        </>
+      );
+    }
+
+    if (isFinancial) {
+      return <DepositButton sponsorId={sponsorId} />;
+    }
+
+    return null;
+  }, [isPrograms, isFinancial]);
+
+  const { data } = SponsorReactQueryAdapter.client.useGetSponsor({
+    pathParams: {
+      sponsorId,
+    },
+    options: {
+      enabled: Boolean(sponsorId),
+    },
+  });
+
+  return (
+    <PageWrapper
+      navigation={{
+        breadcrumbs: [
+          {
+            id: "root",
+            label: <Translate token={"financials:list.header.title"} />,
+            href: NEXT_ROUTER.financials.root,
+          },
+          {
+            id: "details",
+            label: data?.name,
+          },
+        ],
+      }}
+    >
+      <PosthogCaptureOnMount
+        eventName={"sponsor_viewed"}
+        params={{
+          sponsor_id: sponsorId,
+        }}
+        paramsReady={Boolean(sponsorId)}
+      />
+
+      <AnimatedColumn className="h-full">
+        <ScrollView className={"flex flex-col"}>
+          <PageContent classNames={{ base: "tablet:overflow-hidden" }}>
+            <div className="flex h-full flex-col gap-lg">
+              <header className="flex flex-col flex-wrap items-start justify-between gap-md tablet:flex-row tablet:items-center">
+                <Tabs
+                  variant={"solid"}
+                  searchParams={"data-view"}
+                  tabs={[
+                    {
+                      id: Views.PROGRAMS,
+                      children: <Translate token={"financials:details.views.programs"} />,
+                      as: BaseLink,
+                      htmlProps: {
+                        href: NEXT_ROUTER.financials.programs.root(sponsorId),
+                      },
+                    },
+                    {
+                      id: Views.FINANCIAL,
+                      children: <Translate token={"financials:details.views.financial"} />,
+                      as: BaseLink,
+                      htmlProps: {
+                        href: NEXT_ROUTER.financials.financial.root(sponsorId),
+                      },
+                    },
+                  ]}
+                  selectedId={selectedId}
+                />
+
+                <div className="flex items-center gap-lg">{renderActions()}</div>
+              </header>
+
+              {children}
+            </div>
+          </PageContent>
+        </ScrollView>
+      </AnimatedColumn>
+    </PageWrapper>
+  );
+}