diff --git a/src/components/dashboard/summary-card.tsx b/src/components/dashboard/summary-card.tsx
new file mode 100644
index 000000000..7a3487c13
--- /dev/null
+++ b/src/components/dashboard/summary-card.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+interface SummaryCardProps {
+ label: string;
+ value: ReactNode;
+ color?: string;
+ dark?: boolean;
+}
+
+export function SummaryCard({ label, value, color, dark }: SummaryCardProps): JSX.Element {
+ const cardBg = dark ? 'bg-dfxBlue-700' : 'bg-white';
+ const labelColor = dark ? '#9AA5B8' : '#6b7280';
+ const defaultValueColor = dark ? '#ffffff' : '#111827';
+ return (
+
+
+ {label}
+
+
+ {value}
+
+
+ );
+}
diff --git a/src/components/dashboard/total-balance-long-chart.tsx b/src/components/dashboard/total-balance-long-chart.tsx
index a46a878a5..cdd1648c3 100644
--- a/src/components/dashboard/total-balance-long-chart.tsx
+++ b/src/components/dashboard/total-balance-long-chart.tsx
@@ -2,14 +2,15 @@ import { ApexOptions } from 'apexcharts';
import { useMemo } from 'react';
import Chart from 'react-apexcharts';
import { FinancialLogEntry } from 'src/dto/dashboard.dto';
-import { TimeRange } from 'src/screens/dashboard-financial-history.screen';
+import { TimeRange } from 'src/util/chart';
interface TotalBalanceLongChartProps {
entries: FinancialLogEntry[];
timeRange?: TimeRange;
+ dark?: boolean;
}
-export function TotalBalanceLongChart({ entries, timeRange }: TotalBalanceLongChartProps) {
+export function TotalBalanceLongChart({ entries, timeRange, dark }: TotalBalanceLongChartProps) {
const chartOptions = useMemo((): ApexOptions => {
return {
chart: {
@@ -18,10 +19,11 @@ export function TotalBalanceLongChart({ entries, timeRange }: TotalBalanceLongCh
zoom: { enabled: true },
background: '0',
},
+ theme: { mode: dark ? 'dark' : 'light' },
stroke: { width: [3, 3], curve: 'smooth' },
colors: ['#22c55e', '#f97316'],
dataLabels: { enabled: false },
- grid: { borderColor: '#e5e7eb' },
+ grid: { borderColor: dark ? '#0A355C' : '#e5e7eb' },
xaxis: {
type: 'datetime',
labels: { datetimeUTC: false, format: 'dd MMM yy' },
@@ -48,7 +50,7 @@ export function TotalBalanceLongChart({ entries, timeRange }: TotalBalanceLongCh
},
legend: { position: 'bottom' },
};
- }, [timeRange]);
+ }, [timeRange, dark]);
const chartSeries = useMemo(() => {
return [
diff --git a/src/components/dashboard/total-balance-short-chart.tsx b/src/components/dashboard/total-balance-short-chart.tsx
index 28d7ed2ab..2e0dfa808 100644
--- a/src/components/dashboard/total-balance-short-chart.tsx
+++ b/src/components/dashboard/total-balance-short-chart.tsx
@@ -2,7 +2,7 @@ import { ApexOptions } from 'apexcharts';
import { useMemo } from 'react';
import Chart from 'react-apexcharts';
import { FinancialLogEntry } from 'src/dto/dashboard.dto';
-import { TimeRange } from 'src/screens/dashboard-financial-history.screen';
+import { TimeRange } from 'src/util/chart';
interface Props {
entries: FinancialLogEntry[];
diff --git a/src/hooks/layout-config.hook.tsx b/src/hooks/layout-config.hook.tsx
index 177bf0c34..4ffaaa3ae 100644
--- a/src/hooks/layout-config.hook.tsx
+++ b/src/hooks/layout-config.hook.tsx
@@ -1,5 +1,5 @@
import { isEqual } from 'lodash';
-import { useEffect, useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
import { LayoutConfig, useLayoutConfigContext } from '../contexts/layout-config.context';
export function useLayoutOptions({
@@ -14,7 +14,7 @@ export function useLayoutOptions({
const { setConfig } = useLayoutConfigContext();
const prevConfig = useRef
();
- useEffect(() => {
+ useLayoutEffect(() => {
const newConfig: LayoutConfig = {
title,
backButton,
@@ -36,7 +36,7 @@ export function useLayoutOptions({
}
}, [title, backButton, textStart, noPadding, smallMenu, onBack, setConfig]);
- useEffect(() => {
+ useLayoutEffect(() => {
return () => setConfig({});
}, [setConfig]);
}
diff --git a/src/screens/dashboard-financial-history.screen.tsx b/src/screens/dashboard-financial-history.screen.tsx
index f4948dc78..1468880b0 100644
--- a/src/screens/dashboard-financial-history.screen.tsx
+++ b/src/screens/dashboard-financial-history.screen.tsx
@@ -10,19 +10,10 @@ import { useDashboard } from 'src/hooks/dashboard.hook';
import { useAdminGuard } from 'src/hooks/guard.hook';
import { useLayoutOptions } from 'src/hooks/layout-config.hook';
import { useNavigation } from 'src/hooks/navigation.hook';
-import { getFromDateByTimeframe, Timeframe } from 'src/util/chart';
-
-export interface TimeRange {
- min: number;
- max: number;
-}
+import { getFromDateByTimeframe, isDailySample, Timeframe, TimeRange } from 'src/util/chart';
const TIMEFRAME_OPTIONS = [Timeframe.DAY, Timeframe.THREE_DAYS, Timeframe.WEEK, Timeframe.MONTH] as const;
-function isDailySample(timeframe: Timeframe): boolean {
- return timeframe === Timeframe.WEEK || timeframe === Timeframe.MONTH;
-}
-
export default function DashboardFinancialLogScreen(): JSX.Element {
useAdminGuard();
useLayoutOptions({ title: 'Financial Log', noMaxWidth: true });
diff --git a/src/screens/dashboard-financial-liquidity.screen.tsx b/src/screens/dashboard-financial-liquidity.screen.tsx
index e47c04acd..f35a0c6fd 100644
--- a/src/screens/dashboard-financial-liquidity.screen.tsx
+++ b/src/screens/dashboard-financial-liquidity.screen.tsx
@@ -1,11 +1,13 @@
import { useSessionContext } from '@dfx.swiss/react';
import { SpinnerSize, StyledLoadingSpinner } from '@dfx.swiss/react-components';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { BalanceBarChart } from 'src/components/dashboard/latest-balance-bar-chart';
+import { SummaryCard } from 'src/components/dashboard/summary-card';
import { LatestBalanceResponse } from 'src/dto/dashboard.dto';
import { useDashboard } from 'src/hooks/dashboard.hook';
import { useAdminGuard } from 'src/hooks/guard.hook';
import { useLayoutOptions } from 'src/hooks/layout-config.hook';
+import { formatChfOrDash } from 'src/util/utils';
export default function DashboardFinancialLiquidityScreen(): JSX.Element {
useAdminGuard();
@@ -22,9 +24,17 @@ export default function DashboardFinancialLiquidityScreen(): JSX.Element {
getLatestBalance()
.then(setLatestBalance)
+ .catch(() => undefined)
.finally(() => setIsLoading(false));
}, [isLoggedIn]);
+ const totalBalance = useMemo(() => {
+ if (!latestBalance) return undefined;
+ let net = 0;
+ for (const t of latestBalance.byType) net += t.plusBalanceChf - t.minusBalanceChf;
+ return net;
+ }, [latestBalance]);
+
if (isLoading) {
return (
@@ -35,6 +45,10 @@ export default function DashboardFinancialLiquidityScreen(): JSX.Element {
return (
+
+
+
+
diff --git a/src/screens/dashboard-financial-live.screen.tsx b/src/screens/dashboard-financial-live.screen.tsx
index c7efa7de1..7d996d14e 100644
--- a/src/screens/dashboard-financial-live.screen.tsx
+++ b/src/screens/dashboard-financial-live.screen.tsx
@@ -1,41 +1,20 @@
import { useSessionContext } from '@dfx.swiss/react';
import { SpinnerSize, StyledLoadingSpinner } from '@dfx.swiss/react-components';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { BalanceBarChart } from 'src/components/dashboard/latest-balance-bar-chart';
+import { SummaryCard } from 'src/components/dashboard/summary-card';
import { LatestBalanceResponse } from 'src/dto/dashboard.dto';
import { useDashboard } from 'src/hooks/dashboard.hook';
import { useAdminGuard } from 'src/hooks/guard.hook';
import { useLayoutOptions } from 'src/hooks/layout-config.hook';
-
-function formatChf(value: number): string {
- return value.toLocaleString('de-CH', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
-}
-
-interface SummaryCardProps {
- label: string;
- value: string;
- color?: string;
-}
-
-function SummaryCard({ label, value, color }: SummaryCardProps) {
- return (
-
-
- {label}
-
-
- {value}
-
-
- );
-}
+import { formatChfOrDash } from 'src/util/utils';
export default function DashboardFinancialLiveScreen(): JSX.Element {
useAdminGuard();
useLayoutOptions({ title: 'Financial Live', noMaxWidth: true });
const { isLoggedIn } = useSessionContext();
- const { getLatestChanges, getLatestBalance } = useDashboard();
+ const { getLatestBalance } = useDashboard();
const [latestBalance, setLatestBalance] = useState
();
const [isLoading, setIsLoading] = useState(true);
@@ -43,13 +22,23 @@ export default function DashboardFinancialLiveScreen(): JSX.Element {
useEffect(() => {
if (!isLoggedIn) return;
- Promise.all([getLatestBalance(), getLatestChanges()])
- .then(([balanceData]) => {
- setLatestBalance(balanceData);
- })
+ getLatestBalance()
+ .then(setLatestBalance)
+ .catch(() => undefined)
.finally(() => setIsLoading(false));
}, [isLoggedIn]);
+ const { totalPlus, totalMinus, totalBalance } = useMemo(() => {
+ if (!latestBalance) return { totalPlus: undefined, totalMinus: undefined, totalBalance: undefined };
+ let plus = 0;
+ let minus = 0;
+ for (const t of latestBalance.byType) {
+ plus += t.plusBalanceChf;
+ minus += t.minusBalanceChf;
+ }
+ return { totalPlus: plus, totalMinus: minus, totalBalance: plus - minus };
+ }, [latestBalance]);
+
if (isLoading) {
return (
@@ -58,16 +47,12 @@ export default function DashboardFinancialLiveScreen(): JSX.Element {
);
}
- const totalPlus = latestBalance?.byType.reduce((s, t) => s + t.plusBalanceChf, 0) ?? 0;
- const totalMinus = latestBalance?.byType.reduce((s, t) => s + t.minusBalanceChf, 0) ?? 0;
-
return (
- {/* Summary Cards */}
-
-
-
+
+
+
(Timeframe.THREE_DAYS);
+ const [latestBalance, setLatestBalance] = useState();
+ const [logEntries, setLogEntries] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ if (!isLoggedIn) return;
+
+ const fromTimestamp = getFromDateByTimeframe(timeframe);
+ const from = fromTimestamp > 0 ? new Date(fromTimestamp).toISOString() : undefined;
+ const dailySample = isDailySample(timeframe);
+
+ function load(initial: boolean) {
+ if (initial) setIsLoading(true);
+ getLatestBalance()
+ .then(setLatestBalance)
+ .catch(() => undefined);
+ getFinancialLog(from, dailySample)
+ .then((logData) => setLogEntries(logData.entries))
+ .catch(() => undefined)
+ .finally(() => {
+ if (initial) setIsLoading(false);
+ });
+ }
+
+ load(true);
+ const interval = setInterval(() => load(false), REFRESH_INTERVAL_MS);
+ return () => clearInterval(interval);
+ }, [isLoggedIn, timeframe]);
+
+ const timeRange = useMemo((): TimeRange | undefined => {
+ if (logEntries.length === 0) return undefined;
+ let min = Infinity;
+ let max = -Infinity;
+ for (const e of logEntries) {
+ const t = new Date(e.timestamp).getTime();
+ if (t < min) min = t;
+ if (t > max) max = t;
+ }
+ return { min, max };
+ }, [logEntries]);
+
+ const { totalPlus, totalMinus, totalBalance } = useMemo(() => {
+ if (!latestBalance) return { totalPlus: undefined, totalMinus: undefined, totalBalance: undefined };
+ let plus = 0;
+ let minus = 0;
+ for (const t of latestBalance.byType) {
+ plus += t.plusBalanceChf;
+ minus += t.minusBalanceChf;
+ }
+ return { totalPlus: plus, totalMinus: minus, totalBalance: plus - minus };
+ }, [latestBalance]);
+
+ return (
+
+
+
+
+
+ } dark />
+
+
+
+ {TIMEFRAME_OPTIONS.map((tf) => (
+
+ ))}
+
+
+ {isLoading ? (
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+ )}
+