E 2487 move financial section in a dedicated financial tabs (#694)

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

@@ -1,9 +1,9 @@
 {
-  "header": {
-    "title": "Financial"
+  "views": {
+    "programs": "Programs",
+    "financial": "Financial"
   },
   "financial": {
-    "title": "Financials",
     "buttons": {
       "budgetAvailable": "Budget",
       "budgetChart": "Chart",
@@ -12,7 +12,6 @@
     }
   },
   "programs": {
-    "title": "Programs",
     "actions": {
       "allocate": {
         "button": "Allocate a Program",

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

@@ -0,0 +1,22 @@
+import { DepositButtonProps } from "@/app/financials/[sponsorId]/_views/financial/deposit-button/deposit-button.types";
+
+import { Button } from "@/design-system/atoms/button/variants/button-default";
+
+import { useCurrencyListSidepanel } from "@/shared/panels/currency-list-sidepanel/currency-list-sidepanel.hooks";
+
+export function DepositButton({ sponsorId }: DepositButtonProps) {
+  const { open: openCurrencyListSidepanel } = useCurrencyListSidepanel();
+
+  return (
+    <Button
+      variant={"primary"}
+      size={"sm"}
+      translate={{ token: "financials:details.financial.buttons.makeDeposit" }}
+      classNames={{
+        base: "max-w-full overflow-hidden",
+        label: "whitespace-nowrap text-ellipsis overflow-hidden",
+      }}
+      onClick={() => openCurrencyListSidepanel({ sponsorId })}
+    />
+  );
+}

app/financials/[sponsorId]/_views/financial/deposit-button/deposit-button.types.ts

@@ -0,0 +1,3 @@
+export interface DepositButtonProps {
+  sponsorId: string;
+}

app/financials/[sponsorId]/_sections/financial-section/components/financial-column-chart/financial-column-chart.tsx → app/financials/[sponsorId]/_views/financial/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]/_sections/financial-section/components/financial-column-chart/financial-column-chart.hooks";
+import { useFinancialColumnChart } from "@/app/financials/[sponsorId]/_views/financial/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/financial.tsx

@@ -0,0 +1,9 @@
+import { BudgetAvailableCards } from "@/app/financials/[sponsorId]/_views/financial/budget-available-cards/budget-available-cards";
+
+export function Financial() {
+  return (
+    <div>
+      <BudgetAvailableCards />
+    </div>
+  );
+}

app/financials/[sponsorId]/_sections/financial-section/components/transactions-sidepanel/context/transactions.context.tsx → app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context.tsx

@@ -1,9 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { useDebounce } from "react-use";
 
-import { BiReactQueryAdapter } from "@/core/application/react-query-adapter/bi";
-import { bootstrap } from "@/core/bootstrap";
-
 import {
   DEFAULT_FILTER,
   TransactionsContextFilter,
@@ -12,7 +9,10 @@ import {
   TransactionsContextProps,
   TransactionsContextQueryParams,
   TransactionsContextReturn,
-} from "./transactions.context.types";
+} from "@/app/financials/[sponsorId]/_views/financial/transactions-sidepanel/context/transactions.context.types";
+
+import { BiReactQueryAdapter } from "@/core/application/react-query-adapter/bi";
+import { bootstrap } from "@/core/bootstrap";
 
 export const TransactionsContext = createContext<TransactionsContextReturn>({
   sponsorId: "",

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

@@ -1,5 +1,5 @@
-import { useTransactionsContext } from "@/app/financials/[sponsorId]/_sections/financial-section/components/transactions-sidepanel/context/transactions.context";
-import { TransactionsContextFilterTypes } from "@/app/financials/[sponsorId]/_sections/financial-section/components/transactions-sidepanel/context/transactions.context.types";
+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 { bootstrap } from "@/core/bootstrap";
 

app/financials/[sponsorId]/_sections/financial-section/components/transactions-sidepanel/transactions-sidepanel.tsx → app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions-sidepanel.tsx

@@ -1,13 +1,13 @@
+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 { Button } from "@/design-system/atoms/button/variants/button-default";
 
 import { SidePanelBody } from "@/shared/features/side-panels/side-panel-body/side-panel-body";
 import { SidePanelHeader } from "@/shared/features/side-panels/side-panel-header/side-panel-header";
 import { useSidePanel } from "@/shared/features/side-panels/side-panel/side-panel";
 
-import { useTransactionsContext } from "./context/transactions.context";
-import { ExportCsv } from "./export-csv/export-csv";
-import { Transactions } from "./transactions/transactions";
-
 export function TransactionsSidepanel() {
   const { Panel, open } = useSidePanel({ name: "sponsor-transaction-export" });
   const {

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

@@ -1,6 +1,9 @@
 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 { Badge } from "@/design-system/atoms/badge";
 import { Button } from "@/design-system/atoms/button/variants/button-default";
 import { DateRangePicker, DateRangePickerValue } from "@/design-system/atoms/date-range-picker";
@@ -12,9 +15,6 @@ import { CheckboxButton } from "@/design-system/molecules/checkbox-button";
 
 import { Translate } from "@/shared/translation/components/translate/translate";
 
-import { useTransactionsContext } from "../../../context/transactions.context";
-import { TransactionsContextFilterTypes } from "../../../context/transactions.context.types";
-
 export function Header() {
   const { t } = useTranslation("financials");
 

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

@@ -1,6 +1,8 @@
 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 { SponsorReactQueryAdapter } from "@/core/application/react-query-adapter/sponsor";
 import { bootstrap } from "@/core/bootstrap";
 import { SponsorTransactionListItemResponse } from "@/core/domain/sponsor/models/sponsor-transaction-list-item-model";
@@ -13,8 +15,6 @@ import {
   CardTransactionPort,
 } from "@/design-system/molecules/cards/card-transaction";
 
-import { useTransactionsContext } from "../../../context/transactions.context";
-
 export function TransactionsWrapper({ date }: { date: Date }) {
   const dateKernelPort = bootstrap.getDateKernelPort();
   const { sponsorId, queryParams } = useTransactionsContext();

app/financials/[sponsorId]/_sections/financial-section/components/transactions-sidepanel/transactions/transactions.tsx → app/financials/[sponsorId]/_views/financial/transactions-sidepanel/transactions/transactions.tsx

@@ -1,15 +1,15 @@
 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 { bootstrap } from "@/core/bootstrap";
 
 import { Accordion, AccordionItemProps } from "@/design-system/molecules/accordion";
 
 import { EmptyStateLite } from "@/shared/components/empty-state-lite/empty-state-lite";
 
-import { useTransactionsContext } from "../context/transactions.context";
-import { Header } from "./components/header/header";
-import { TransactionsWrapper } from "./components/transactions-wrapper/transactions-wrapper";
-
 export function Transactions() {
   const dateKernelPort = bootstrap.getDateKernelPort();
 

app/financials/[sponsorId]/_sections/financial-section/components/transactions-trigger/transactions-trigger.tsx → app/financials/[sponsorId]/_views/financial/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]/_sections/financial-section/components/transactions-sidepanel/context/transactions.context";
-import { TransactionsSidepanel } from "@/app/financials/[sponsorId]/_sections/financial-section/components/transactions-sidepanel/transactions-sidepanel";
+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 { Button } from "@/design-system/atoms/button/variants/button-default";
 

app/financials/[sponsorId]/_features/allocate-button/allocate-button.tsx → app/financials/[sponsorId]/_views/programs/allocate-button/allocate-button.tsx

@@ -1,14 +1,14 @@
-import { ChevronRight } from "lucide-react";
+import { AllocateButtonProps } from "@/app/financials/[sponsorId]/_views/programs/allocate-button/allocate-button.types";
 
 import { SponsorReactQueryAdapter } from "@/core/application/react-query-adapter/sponsor";
 
 import { Button } from "@/design-system/atoms/button/variants/button-default";
 import { Tooltip } from "@/design-system/atoms/tooltip";
 
-import { useProgramListSidepanel } from "@/shared/panels/program-list-sidepanel/program-list-sidepanel.context";
+import { useProgramListSidepanel } from "@/shared/panels/program-list-sidepanel/program-list-sidepanel.hooks";
 import { Translate } from "@/shared/translation/components/translate/translate";
 
-export function AllocateButton({ sponsorId }: { sponsorId: string }) {
+export function AllocateButton({ sponsorId }: AllocateButtonProps) {
   const { open } = useProgramListSidepanel();
 
   const { data, isLoading, isError } = SponsorReactQueryAdapter.client.useGetSponsor({
@@ -29,14 +29,11 @@ export function AllocateButton({ sponsorId }: { sponsorId: string }) {
     >
       <Button
         variant={"primary"}
-        endIcon={{ component: ChevronRight }}
-        isTextButton
-        size={"md"}
-        onClick={() => open()}
+        size={"sm"}
+        onClick={open}
         isDisabled={isDisabled}
-      >
-        <Translate token={"financials:details.programs.actions.allocate.button"} />
-      </Button>
+        translate={{ token: "financials:details.programs.actions.allocate.button" }}
+      />
     </Tooltip>
   );
 }

app/financials/[sponsorId]/_views/programs/allocate-button/allocate-button.types.ts

@@ -0,0 +1,3 @@
+export interface AllocateButtonProps {
+  sponsorId: string;
+}

app/financials/[sponsorId]/_views/programs/create-button/create-button.tsx

@@ -0,0 +1,17 @@
+import { useCreateProgramPanel } from "@/app/financials/[sponsorId]/_features/create-program-panel/create-program-panel.hooks";
+import { CreateButtonProps } from "@/app/financials/[sponsorId]/_views/programs/create-button/create-button.types";
+
+import { Button } from "@/design-system/atoms/button/variants/button-default";
+
+export function CreateButton({ sponsorId }: CreateButtonProps) {
+  const { open: openCreateProgram } = useCreateProgramPanel();
+
+  return (
+    <Button
+      variant={"secondary"}
+      size={"sm"}
+      onClick={() => openCreateProgram({ sponsorId })}
+      translate={{ token: "financials:details.programs.actions.create" }}
+    />
+  );
+}

app/financials/[sponsorId]/_views/programs/create-button/create-button.types.ts

@@ -0,0 +1,3 @@
+export interface CreateButtonProps {
+  sponsorId: string;
+}