All files / libs/reporting/dashboards/components/src/lib/home-legacy/earnings-card EarningsCard.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';

import { Group, Trend, Typography } from '@allshares/studio-design-system';
import { FormattedAmount } from '@amalia/kernel/intl/components';
import { type CurrencyValue } from '@amalia/kernel/monetary/types';
import { CustomReportsPresetsEnum } from '@amalia/reporting/custom-reports/shared';
import { type UserContract } from '@amalia/tenants/users/types';

import { DashboardWidget } from '../dashboard-widget/DashboardWidget';
import { WidgetTitle } from '../widget-title/WidgetTitle';

import { EarningsCardCurrency } from './EarningsCardCurrency';

type EarningsCardProps = {
  readonly period?: string;
  readonly currentPeriodEarning: CurrencyValue | null;
  readonly previousPeriodEarning: CurrencyValue | null;
  readonly user: UserContract;
};

export const EarningsCards = memo(function EarningsCards({
  period,
  currentPeriodEarning,
  previousPeriodEarning,
  user,
}: EarningsCardProps) {
  return (
    <DashboardWidget>
      <WidgetTitle
        customReportId={CustomReportsPresetsEnum.PRESET_EARNED_OVER_TIME}
        title={<EarningsCardCurrency symbol={currentPeriodEarning?.symbol || user.currency} />}
      />

      <div>
        <Typography
          id="earnings-widget-period"
          variant="bodyBaseRegular"
          css={(theme) => css`
            color: ${theme.ds.colors.gray[600]};
            padding-top: 4px;

            [data-color-scheme='dark'] & {
              color: ${theme.ds.colors.gray[500]};
            }
          `}
        >
          <FormattedMessage
            defaultMessage="Earned in {period}"
            values={{ period }}
          />
        </Typography>
        {!!currentPeriodEarning && (
          <Group
            align="center"
            gap={8}
            id="earnings-widget-value"
          >
            <Typography variant="heading3Bold">
              <FormattedAmount
                currencySymbol={currentPeriodEarning.symbol}
                value={currentPeriodEarning.value ?? 0}
              />
            </Typography>

            <Trend
              currentValue={currentPeriodEarning.value ?? 0}
              previousValue={previousPeriodEarning?.value ?? 0}
            />
          </Group>
        )}
      </div>
    </DashboardWidget>
  );
});