diff --git a/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.en.json b/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.en.json index b606cf9bb..f05c09894 100644 --- a/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.en.json +++ b/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.en.json @@ -1,8 +1,8 @@ { "title": "Rewards Charts", "legends": { - "rewarded": "Rewarded", - "paid": "Paid" + "available": "Available", + "rewarded": "Rewarded" }, "emptyState": { "title": "No data available", diff --git a/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.hooks.tsx b/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.hooks.tsx index 4df002ff5..2a1edd67a 100644 --- a/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.hooks.tsx +++ b/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.hooks.tsx @@ -12,12 +12,11 @@ export function useFinancialColumnChart(stats?: GetBiStatsFinancialsModel["stats }; const rewardedSeries = calculateSeries("totalRewarded"); - // TODO @Mehdi update with totalPaid once backend ready - const paidSeries = calculateSeries("totalGranted"); + const allocatedSeries = calculateSeries("totalAllocated"); return { categories, rewardedSeries, - paidSeries, + allocatedSeries, }; } diff --git a/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.tsx b/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.tsx index 5b323dc3c..c9d6f49ae 100644 --- a/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.tsx +++ b/app/manage-projects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.tsx @@ -44,13 +44,13 @@ export function FinancialColumnChart() { const { stats } = data ?? {}; - const { categories, rewardedSeries, paidSeries } = useFinancialColumnChart(stats); + const { categories, rewardedSeries, allocatedSeries } = useFinancialColumnChart(stats); const { options } = useColumnChartOptions({ categories, series: [ + { name: t("manageProjects:financialColumnChart.legends.available"), data: allocatedSeries }, { name: t("manageProjects:financialColumnChart.legends.rewarded"), data: rewardedSeries }, - { name: t("manageProjects:financialColumnChart.legends.paid"), data: paidSeries }, ], legend: { enabled: false }, tooltip: { @@ -67,7 +67,7 @@ export function FinancialColumnChart() { `; }, }, - height: 120, + height: 100, }); if (isLoading) { @@ -80,7 +80,7 @@ export function FinancialColumnChart() { ); } - if (!paidSeries.length && !rewardedSeries.length) { + if (!allocatedSeries.length && !rewardedSeries.length) { return ( { - if (!data) { - return { - totalUsdEquivalent: 0, - totalPerCurrency: [], - }; - } - - return { - totalUsdEquivalent: data.totalRewarded.totalUsdEquivalent - data.totalPaid.totalUsdEquivalent, - totalPerCurrency: data.totalRewarded.totalPerCurrency - ?.map(rewarded => { - const paid = data.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), - }; - }, [data]); - if (isLoading) { return (
@@ -91,19 +60,13 @@ export function BudgetAvailableCards() { onClick={() => openPanel("rewardedAmount", data.totalRewarded)} /> - openPanel("rewardPendingAmount", rewardPendingAmount)} - /> - openPanel("rewardPaid", data.totalPaid)} /> +
); } diff --git a/app/my-dashboard/_features/financial/budget-available-cards/budget-available.en.json b/app/my-dashboard/_features/financial/budget-available-cards/budget-available.en.json index b27d23c5f..f35be4b38 100644 --- a/app/my-dashboard/_features/financial/budget-available-cards/budget-available.en.json +++ b/app/my-dashboard/_features/financial/budget-available-cards/budget-available.en.json @@ -2,9 +2,6 @@ "rewarded": { "title": "Rewarded amount" }, - "pending": { - "title": "Pending amount" - }, "paid": { "title": "Paid" } diff --git a/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart.tsx b/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart.tsx index 1d15f3743..7760895a4 100644 --- a/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart.tsx +++ b/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart.tsx @@ -1,5 +1,4 @@ -import { Calendar } from "lucide-react"; -import { useMemo, useState } from "react"; +import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { useFinancialColumnChart } from "@/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart.hooks"; @@ -8,38 +7,31 @@ import { BiReactQueryAdapter } from "@/core/application/react-query-adapter/bi"; import { bootstrap } from "@/core/bootstrap"; import { DateRangeType } from "@/core/kernel/date/date-facade-port"; -import { Button } from "@/design-system/atoms/button/variants/button-default"; -import { ChartLegend } from "@/design-system/atoms/chart-legend"; import { Paper } from "@/design-system/atoms/paper"; import { Skeleton } from "@/design-system/atoms/skeleton"; -import { Menu } from "@/design-system/molecules/menu"; +import { Typo } from "@/design-system/atoms/typo"; import { useColumnChartOptions } from "@/shared/components/charts/highcharts/column-chart/column-chart.hooks"; import { HighchartsDefault } from "@/shared/components/charts/highcharts/highcharts-default"; import { EmptyState } from "@/shared/components/empty-state/empty-state"; import { useAuthUser } from "@/shared/hooks/auth/use-auth-user"; -import { useRangeSelectOptions } from "@/shared/hooks/select/use-range-select-options"; -import { Translate } from "@/shared/translation/components/translate/translate"; export function FinancialColumnChart() { const { t } = useTranslation(); - const [rangeType, setRangeType] = useState(DateRangeType.LAST_YEAR); - - const rangeMenu = useRangeSelectOptions(); const { githubUserId } = useAuthUser(); const dateKernelPort = bootstrap.getDateKernelPort(); const moneyKernelPort = bootstrap.getMoneyKernelPort(); const { fromDate, toDate } = useMemo(() => { - const { from, to } = dateKernelPort.getRangeOfDates(rangeType); + const { from, to } = dateKernelPort.getRangeOfDates(DateRangeType.LAST_YEAR); return { fromDate: from ? dateKernelPort.format(from, "yyyy-MM-dd") : undefined, toDate: to ? dateKernelPort.format(to, "yyyy-MM-dd") : undefined, }; - }, [rangeType, dateKernelPort]); + }, [dateKernelPort]); const { data, isLoading } = BiReactQueryAdapter.client.useGetBiStatsFinancials({ queryParams: { @@ -71,20 +63,21 @@ export function FinancialColumnChart() { currency: moneyKernelPort.getCurrency("USD"), }); - return `
${this.series.name} ${amount} ${code}`; + return `
+
+
${this.series.name}
+
${amount} ${code}
+
`; }, }, + height: 100, }); - function onChangeRangeType(value: string) { - setRangeType(value as DateRangeType); - } - if (isLoading) { return ( ); @@ -100,28 +93,9 @@ export function FinancialColumnChart() { } return ( -
+ + -
- - - - - - - - - - - - -
-
+ ); }