hunk.code_window: import { SharedModule } from '../shared/shared.module';
   import { ChangesController } from './changes.controller';
   import { USE_CASES } from './usecases';
   @Module({
  
hunk.labels: keep keep add keep keep
hunk.after_edit: import { AuthModule } from '../auth/auth.module';
  
hunk.file_path: apps/api/src/app/change/change.module.ts
hunk.type: add
file: import { useQuery } from 'react-query';
  import styled from '@emotion/styled';
  import { Skeleton, useMantineTheme } from '@mantine/core';
  import { getActivityStats } from '../../../api/activity';
  import { formatNumber } from '../../../utils';
  import { colors } from '../../../design-system';
  
  export function ActivityStatistics() {
    const { data: activityStats } = useQuery<{
      yearlySent: number;
      monthlySent: number;
      weeklySent: number;
    }>('activityStats', getActivityStats);
    const isDark = useMantineTheme().colorScheme === 'dark';
    const weekCount = typeof activityStats?.weeklySent == 'number' ? formatNumber(activityStats.weeklySent, 0) : null;
    const monthCount = typeof activityStats?.monthlySent == 'number' ? formatNumber(activityStats.monthlySent, 0) : null;
    const yearCount = typeof activityStats?.yearlySent == 'number' ? formatNumber(activityStats.yearlySent, 0) : null;
  
    return (
      <>
        <ContentWrapper>
          <StatisticsBox>
            <StyledNumber isColored={false} data-test-id="activity-stats-weekly-sent">
              <StyledNumber isColored={false}>
                {weekCount ? weekCount : <Skeleton height={30} width="40%" />}
              </StyledNumber>
            </StyledNumber>
            <StatsLabel isColored={false} isDark={isDark}>
              This week
            </StatsLabel>
          </StatisticsBox>
          <StatisticsBox>
            <StyledNumber isColored={false}>
              {monthCount ? monthCount : <Skeleton height={30} width="50%" />}
            </StyledNumber>
            <StatsLabel isColored isDark={isDark}>
              This month
            </StatsLabel>
          </StatisticsBox>
          <StatisticsBox>
            <StyledNumber isColored={false}>{yearCount ? yearCount : <Skeleton height={30} width="60%" />}</StyledNumber>
            <StatsLabel isColored={false} isDark={isDark}>
              This year
            </StatsLabel>
          </StatisticsBox>
        </ContentWrapper>
      </>
    );
  }
  
  const StatisticsBox = styled.div`
    padding-right: 30px;
  `;
  
  const ContentWrapper = styled.div`
    display: flex;
    justify-content: flex-start;
    margin-bottom: 30px;
    padding-left: 30px;
  `;
  
  const StyledNumber = styled.div<{ isColored: boolean }>`
    font-size: 26px;
    font-weight: 900;
    line-height: 30px;
    text-align: left;
    margin-bottom: 2px;
    background: ${({ isColored }: { isColored: boolean }) =>
      isColored ? '-webkit-linear-gradient(90deg, #dd2476 0%, #ff512f 100%)' : colors.B60};
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  `;
  
  const StatsLabel = styled.div<{ isColored: boolean; isDark: boolean }>`
    font-size: 14px;
    line-height: 17px;
    font-weight: 700;
    color: ${({ isColored, isDark }) => {
      const notColoredThemeTextColor = isDark ? colors.white : colors.B40;
  
      return !isColored ? colors.B60 : notColoredThemeTextColor;
    }};
  `;
  