@mx-cartographer/experiences 4.0.13 → 4.0.14-alpha.JB1

package/src/recurringactivity/util/RecurringActivityUtils.ts

@@ -0,0 +1,40 @@
+import { addDays } from 'date-fns/addDays'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { isWithinInterval } from 'date-fns/isWithinInterval'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+
+import { type Activity, ActivityType } from '../../common'
+
+// This adds up the total amount in a list of activities
+export const totalReducer = (acc: number, curr: Activity) => acc + curr.amount
+
+// This filters activity to income during the current month
+// This is used by the Income activity bar
+export const incomeFilter = (i: Activity) =>
+  i.activityType === ActivityType.Income &&
+  isWithinInterval(i.expectedDate, {
+    start: startOfMonth(startOfToday()),
+    end: endOfMonth(startOfToday()),
+  })
+
+// This filters activity to expenses during the current month
+// This is used by the Expense activity bar
+export const expenseFilter = (i: Activity) =>
+  i.activityType === ActivityType.Expense &&
+  isWithinInterval(i.expectedDate, {
+    start: startOfMonth(startOfToday()),
+    end: endOfMonth(startOfToday()),
+  })
+
+// This filters all activity to the current month plus the next 30 days
+export const dateFilter = (a: Activity) =>
+  (a.occurredOnDate &&
+    isWithinInterval(a.occurredOnDate, {
+      start: startOfMonth(new Date()),
+      end: addDays(startOfToday(), 30),
+    })) ||
+  isWithinInterval(a.expectedDate, {
+    start: startOfMonth(new Date()),
+    end: addDays(startOfToday(), 30),
+  })

package/src/recurringactivity/util/buildActivities.ts

@@ -0,0 +1,334 @@
+import { addDays } from 'date-fns/addDays'
+import { addMonths } from 'date-fns/addMonths'
+import { addQuarters } from 'date-fns/addQuarters'
+import { addWeeks } from 'date-fns/addWeeks'
+import { addYears } from 'date-fns/addYears'
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+import { getUnixTime } from 'date-fns/getUnixTime'
+import { isAfter } from 'date-fns/isAfter'
+import { isBefore } from 'date-fns/isBefore'
+import { isWithinInterval } from 'date-fns/isWithinInterval'
+import { nextDay } from 'date-fns/nextDay'
+import { parseISO } from 'date-fns/parseISO'
+import { setDate } from 'date-fns/setDate'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+import { subDays } from 'date-fns/subDays'
+import { subWeeks } from 'date-fns/subWeeks'
+import { Day } from 'date-fns/types'
+
+import {
+  type Account,
+  type Activity,
+  ActivityStatus,
+  ActivityType,
+  type CashflowEvent,
+  type CashflowSequence,
+  RecurrenceTypes,
+  type ScheduledPayment,
+  type Transaction,
+} from '../../common'
+
+import { fromUnixUTC } from '../../common/utils/DateUtil'
+
+const buildInstitutionName = (account: Account) => {
+  let name = account.user_name || account.feed_name || ''
+  if (account.account_number) {
+    name = `${name} *${account.account_number}`
+  }
+  return name
+}
+
+export const getRecurrenceType = (sequence?: CashflowSequence) => {
+  if (!sequence) return RecurrenceTypes.Unknown
+
+  if (sequence.repeat_interval === '1') return RecurrenceTypes.EveryWeek
+  if (sequence.repeat_interval === '2') return RecurrenceTypes.EveryOtherWeek
+  if (sequence.repeat_day && !sequence.repeat_month && !sequence.repeat_interval)
+    return RecurrenceTypes.EveryMonth
+  if (sequence.repeat_day && sequence.repeat_interval === '3') return RecurrenceTypes.EveryQuarter
+  if (sequence.repeat_day && sequence.repeat_month) return RecurrenceTypes.EveryYear
+
+  return RecurrenceTypes.Unknown
+}
+
+export const buildActivities = (
+  accounts: Account[],
+  events: CashflowEvent[],
+  payments: ScheduledPayment[],
+  projected: CashflowEvent[],
+  sequences: CashflowSequence[],
+  transactions: Transaction[],
+): Activity[] => {
+  // Add paid income
+  const paidIncome = events
+    .filter((e) => {
+      const sequence = sequences.find((s) => s.guid === e.cashflow_sequence_guid)
+      const transaction = transactions.find((t) => t.guid === e.transaction_guid)
+
+      return sequence?.end_date === null && transaction
+    })
+    .map((e) => {
+      const sequence = sequences.find((s) => s.guid === e.cashflow_sequence_guid)
+      const transaction = transactions.find((t) => t.guid === e.transaction_guid)
+      const account = accounts.find((a) => a.guid === transaction?.account_guid)
+
+      return {
+        accountGuid: sequence?.account_guid || account?.guid,
+        activityStatus: ActivityStatus.Paid,
+        activityType: ActivityType.Income,
+        amount: e.amount,
+        categoryGuid: e.category_guid,
+        expectedDate: fromUnixUTC(e.expected_date),
+        occurredOnDate: e.occurred_on ? fromUnixUTC(e.occurred_on) : undefined,
+        name: e.name,
+        institution: account ? buildInstitutionName(account) : undefined,
+        institutionGuid: account?.institution_guid,
+        merchantGuid: transaction?.merchant_guid || undefined,
+        recurrenceType: getRecurrenceType(sequence),
+        recurrenceDay: sequence?.repeat_day ? Number(sequence?.repeat_day) : undefined,
+        sequenceGuid: sequence?.guid,
+        transactionGuid: e.transaction_guid,
+      }
+    })
+
+  // Add expected income for the next 30 days
+  const upcomingIncome = projected
+    .filter((e) =>
+      isWithinInterval(fromUnixTime(e.expected_date), {
+        start: startOfMonth(startOfToday()),
+        end: addDays(startOfToday(), 30),
+      }),
+    )
+    .filter((e) => {
+      const sequence = sequences.find((s) => s.guid === e.cashflow_sequence_guid)
+      const actual = events.find(
+        (a) => a.cashflow_sequence_guid === sequence?.guid && a.expected_date === e.expected_date,
+      )
+      return sequence?.end_date === null && !actual
+    })
+    .map((e) => {
+      const sequence = sequences.find((s) => s.guid === e.cashflow_sequence_guid)
+      // Find a past event to fill in account and merchant information
+      const pastEvent = events.find(
+        (p) => p.cashflow_sequence_guid === e.cashflow_sequence_guid && Boolean(p.transaction_guid),
+      )
+      const transaction = transactions.find((t) => t.guid === pastEvent?.transaction_guid)
+      const account = accounts.find((a) => a.guid === transaction?.account_guid)
+
+      return {
+        accountGuid: sequence?.account_guid || account?.guid,
+        activityStatus: ActivityStatus.Upcoming,
+        activityType: ActivityType.Income,
+        amount: e.amount,
+        categoryGuid: e.category_guid,
+        expectedDate: fromUnixUTC(e.expected_date),
+        name: e.name,
+        institution: account ? buildInstitutionName(account) : undefined,
+        institutionGuid: account?.institution_guid,
+        merchantGuid: transaction?.merchant_guid || undefined,
+        recurrenceType: getRecurrenceType(sequence),
+        recurrenceDay: sequence?.repeat_day ? Number(sequence?.repeat_day) : undefined,
+        sequenceGuid: sequence?.guid,
+        transactionGuid: undefined,
+      }
+    })
+
+  // Add scheduled payments for the next 30 days
+  const expenses = [] as Activity[]
+
+  if (payments) {
+    payments.forEach((payment) => expenses.push(...buildExpenses(accounts, payment, transactions)))
+  }
+
+  const activities = [...paidIncome, ...upcomingIncome, ...expenses] as Activity[]
+
+  return activities.sort(
+    (a, b) =>
+      getUnixTime(a.occurredOnDate || a.expectedDate) -
+      getUnixTime(b.occurredOnDate || b.expectedDate),
+  )
+}
+
+const buildExpenses = (
+  accounts: Account[],
+  payment: ScheduledPayment,
+  transactions: Transaction[],
+): Activity[] => {
+  const expenses = [] as Activity[]
+
+  const pastTransaction = transactions.find((t) => t.scheduled_payment_guid === payment.guid)
+  if (!pastTransaction) return []
+
+  const account = accounts.find((a) => a.guid === pastTransaction?.account_guid)
+  const occursOn = parseISO(payment.occurs_on)
+  const baseExpense = {
+    accountGuid: account?.guid,
+    activityStatus: ActivityStatus.Upcoming,
+    activityType: ActivityType.Expense,
+    amount: payment.amount,
+    categoryGuid: pastTransaction?.category_guid,
+    expectedDate: occursOn,
+    name: payment.description,
+    institution: account ? buildInstitutionName(account) : undefined,
+    institutionGuid: account?.institution_guid,
+    merchantGuid: payment.merchant_guid,
+    recurrenceType: payment.recurrence_type,
+    recurrenceDay: payment.recurrence_day,
+    scheduledPaymentGuid: payment.guid,
+    transactionGuid: '',
+  }
+
+  const day = payment.recurrence_day
+  const today = startOfToday()
+  const startDate = startOfMonth(startOfToday())
+  const endDate = addDays(startOfToday(), 30)
+
+  let nextDate = startDate
+  switch (payment.recurrence_type) {
+    case RecurrenceTypes.EveryWeek:
+      // Add upcoming expenses for each week in the current month + next month
+      nextDate = nextDay(nextDate, day as Day)
+      while (isBefore(nextDate, endDate)) {
+        expenses.push({
+          ...baseExpense,
+          expectedDate: nextDate,
+        })
+        nextDate = nextDay(nextDate, day as Day)
+      }
+      break
+    case RecurrenceTypes.EveryOtherWeek:
+      // Add upcoming expense for every other week in current month + next month
+      if (isBefore(occursOn, startDate)) {
+        nextDate = addWeeks(occursOn, 2)
+        while (isBefore(nextDate, endDate)) {
+          if (isAfter(nextDate, startDate)) {
+            expenses.push({
+              ...baseExpense,
+              expectedDate: nextDate,
+            })
+          }
+          nextDate = addWeeks(nextDate, 2)
+        }
+      } else {
+        // Add for occurs_on
+        expenses.push({
+          ...baseExpense,
+          expectedDate: occursOn,
+        })
+        // Add past starting at occurs_on
+        nextDate = subWeeks(occursOn, 2)
+        while (isAfter(nextDate, startDate)) {
+          expenses.push({
+            ...baseExpense,
+            expectedDate: nextDate,
+          })
+          nextDate = subWeeks(nextDate, 2)
+        }
+
+        // Add future starting at occurs_on
+        nextDate = addWeeks(occursOn, 2)
+        while (isBefore(nextDate, endDate)) {
+          expenses.push({
+            ...baseExpense,
+            expectedDate: nextDate,
+          })
+          nextDate = addWeeks(nextDate, 2)
+        }
+      }
+      break
+    case RecurrenceTypes.EveryMonth:
+      // Add expense for current month and next month
+      expenses.push({
+        ...baseExpense,
+        expectedDate: setDate(nextDate, day),
+      })
+      expenses.push({
+        ...baseExpense,
+        expectedDate: addMonths(setDate(nextDate, day), 1),
+      })
+      break
+    case RecurrenceTypes.EveryOtherMonth:
+      // Use occurs_on to calculate next expense
+      if (isBefore(occursOn, startDate)) {
+        if (isBefore(addMonths(occursOn, 2), endDate)) {
+          expenses.push({
+            ...baseExpense,
+            expectedDate: addMonths(occursOn, 2),
+          })
+        }
+      } else if (isBefore(occursOn, endDate)) {
+        expenses.push({
+          ...baseExpense,
+          expectedDate: occursOn,
+        })
+      }
+      break
+    case RecurrenceTypes.EveryQuarter:
+      // Use occurs_on to calculate next expense
+      if (isBefore(occursOn, startDate)) {
+        if (isBefore(addQuarters(occursOn, 1), endDate)) {
+          expenses.push({
+            ...baseExpense,
+            expectedDate: addQuarters(occursOn, 1),
+          })
+        }
+      } else if (isBefore(occursOn, endDate)) {
+        expenses.push({
+          ...baseExpense,
+          expectedDate: occursOn,
+        })
+      }
+      break
+    case RecurrenceTypes.EveryOtherQuarter:
+      // Use occurs_on to calculate next expense
+      if (isBefore(occursOn, startDate)) {
+        if (isBefore(addQuarters(occursOn, 2), endDate)) {
+          expenses.push({
+            ...baseExpense,
+            expectedDate: addQuarters(occursOn, 2),
+          })
+        }
+      } else if (isBefore(occursOn, endDate)) {
+        expenses.push({
+          ...baseExpense,
+          expectedDate: occursOn,
+        })
+      }
+      break
+    case RecurrenceTypes.EveryYear:
+      // Use occurs_on to calculate next expense
+      if (isBefore(occursOn, startDate)) {
+        if (isBefore(addYears(occursOn, 1), endDate)) {
+          expenses.push({
+            ...baseExpense,
+            expectedDate: addYears(occursOn, 1),
+          })
+        }
+      } else if (isBefore(occursOn, endDate)) {
+        expenses.push({
+          ...baseExpense,
+          expectedDate: occursOn,
+        })
+      }
+      break
+  }
+
+  expenses.forEach((exp) => {
+    const transaction = transactions.find(
+      (t) =>
+        t.scheduled_payment_guid === exp.scheduledPaymentGuid &&
+        t.date > getUnixTime(subDays(exp.expectedDate, 3)) &&
+        t.date < getUnixTime(addDays(exp.expectedDate, 3)),
+    )
+    if (transaction) {
+      exp.transactionGuid = transaction.guid
+      exp.occurredOnDate = fromUnixTime(transaction.date)
+      exp.activityStatus = ActivityStatus.Paid
+    } else if (isBefore(exp.expectedDate, subDays(today, 3))) {
+      exp.activityStatus = ActivityStatus.Missed
+    }
+  })
+
+  return expenses
+}

package/src/recurringactivity/util/buildNewActivity.ts

@@ -0,0 +1,111 @@
+import { formatISO } from 'date-fns/formatISO'
+import { getDay } from 'date-fns/getDay'
+import { getDate } from 'date-fns/getDate'
+import { getMonth } from 'date-fns/getMonth'
+import { getUnixTime } from 'date-fns/getUnixTime'
+
+import {
+  type CashflowEvent,
+  type CashflowSequence,
+  type RepeatDay,
+  type RepeatMonth,
+  type ScheduledPayment,
+  type Transaction,
+  RecurrenceTypes,
+  RepeatWeekday,
+} from '../../common'
+
+export const buildNewCashflowSequence = (
+  transaction: Transaction,
+  recurrenceType: RecurrenceTypes,
+  nextDate: Date,
+): CashflowSequence => {
+  const cashflowSequence = {
+    account_guid: transaction.account_guid,
+    amount: transaction.amount,
+    category_guid: transaction.category_guid,
+    description: transaction.feed_description || transaction.description,
+    name: transaction.description,
+    repeat_day: null,
+    repeat_interval: null,
+    repeat_month: null,
+    repeat_week: null,
+    repeat_weekday: null,
+    repeat_year: null,
+    start_date: getUnixTime(nextDate),
+    transaction_type: transaction.transaction_type,
+  } as CashflowSequence
+
+  switch (recurrenceType) {
+    case RecurrenceTypes.EveryWeek:
+      cashflowSequence.repeat_interval = '1'
+      cashflowSequence.repeat_weekday = `${getDay(nextDate)}` as RepeatWeekday
+      break
+    case RecurrenceTypes.EveryOtherWeek:
+      cashflowSequence.repeat_interval = '2'
+      cashflowSequence.repeat_weekday = `${getDay(nextDate)}` as RepeatWeekday
+      break
+    case RecurrenceTypes.EveryMonth:
+      cashflowSequence.repeat_day = `${getDate(nextDate)}` as RepeatDay
+      break
+    case RecurrenceTypes.EveryQuarter:
+      cashflowSequence.repeat_interval = '3'
+      cashflowSequence.repeat_day = `${getDate(nextDate)}` as RepeatDay
+      break
+    case RecurrenceTypes.EveryYear:
+      cashflowSequence.repeat_day = `${getDate(nextDate)}` as RepeatDay
+      cashflowSequence.repeat_month = `${getMonth(nextDate)}` as RepeatMonth
+      break
+  }
+
+  return cashflowSequence
+}
+
+export const buildNewCashflowEvent = (
+  cashflowSequence: CashflowSequence,
+  transaction: Transaction,
+) => {
+  return {
+    amount: transaction.amount,
+    cashflow_sequence_guid: cashflowSequence.guid,
+    category_guid: transaction.category_guid,
+    description: transaction.feed_description || transaction.description,
+    expected_date: transaction.date,
+    name: transaction.description,
+    occurred_on: transaction.date,
+    transaction_guid: transaction.guid,
+    transaction_type: transaction.transaction_type,
+  } as CashflowEvent
+}
+
+export const buildNewScheduledPayment = (
+  transaction: Transaction,
+  recurrenceType: RecurrenceTypes,
+  nextDate: Date,
+) => {
+  const payment = {
+    amount: transaction.amount,
+    description: transaction.feed_description || transaction.description,
+    is_tracked_by_user: true,
+    merchant_guid: transaction.merchant_guid,
+    occurs_on: formatISO(nextDate, { representation: 'date' }),
+    recurrence_day: 0,
+    recurrence_type: RecurrenceTypes.EveryMonth,
+  } as ScheduledPayment
+
+  switch (recurrenceType) {
+    case RecurrenceTypes.EveryWeek:
+    case RecurrenceTypes.EveryOtherWeek:
+      payment.recurrence_day = getDay(nextDate)
+      break
+    case RecurrenceTypes.EveryMonth:
+    case RecurrenceTypes.EveryOtherMonth:
+    case RecurrenceTypes.EveryQuarter:
+    case RecurrenceTypes.EveryOtherQuarter:
+    case RecurrenceTypes.EveryYear:
+      payment.recurrence_day = getDate(nextDate)
+      break
+  }
+
+  return payment
+}

package/src/recurringactivity/util/getRecurrence.ts

@@ -0,0 +1,50 @@
+import { format } from 'date-fns/format'
+import { isValid } from 'date-fns/isValid'
+import { buildDynamicCopy, RecurrenceTypes, type RecurringCopy } from '../../common'
+
+interface GetRecurrenceArgs {
+  copy: RecurringCopy
+  date: Date | null
+  type: RecurrenceTypes
+}
+
+export const getRecurrence = ({ copy, date, type }: GetRecurrenceArgs) => {
+  let recurrenceType =
+    date && isValid(date)
+      ? buildDynamicCopy(copy.monthly_ordinal, format(date, 'do'))
+      : copy.monthly
+  switch (type) {
+    case RecurrenceTypes.EveryQuarter:
+      recurrenceType = date
+        ? buildDynamicCopy(copy.quarterly_ordinal, format(date, 'do'))
+        : copy.quarterly
+      break
+    case RecurrenceTypes.EveryWeek:
+      recurrenceType = date
+        ? buildDynamicCopy(copy.weekly_ordinal, format(date, 'do'))
+        : copy.weekly
+      break
+    case RecurrenceTypes.EveryYear:
+      recurrenceType = date
+        ? buildDynamicCopy(copy.anually_ordinal, format(date, 'do'))
+        : copy.anually
+      break
+    case RecurrenceTypes.EveryOtherWeek:
+      recurrenceType = date
+        ? buildDynamicCopy(copy.every_other_week_ordinal, format(date, 'do'))
+        : copy.every_other_week
+      break
+    case RecurrenceTypes.EveryOtherMonth:
+      recurrenceType = date
+        ? buildDynamicCopy(copy.every_other_month_ordinal, format(date, 'do'))
+        : copy.every_other_month
+      break
+    case RecurrenceTypes.EveryOtherQuarter:
+      recurrenceType = date
+        ? buildDynamicCopy(copy.every_other_quarter_ordinal, format(date, 'do'))
+        : copy.every_other_quarter
+      break
+  }
+
+  return recurrenceType as string
+}

package/src/recurringactivity/util/getStatus.ts

@@ -0,0 +1,32 @@
+import {
+  type Activity,
+  ActivityStatus,
+  buildDynamicCopy,
+  DATE_FORMATS_INTL,
+  formatDate,
+  type RecurringCopy,
+} from '../../common'
+
+export const getStatus = (activity: Activity, copy: RecurringCopy): string => {
+  switch (activity.activityStatus) {
+    case ActivityStatus.Paid:
+      return activity.occurredOnDate
+        ? (buildDynamicCopy(
+            copy.paid_on,
+            formatDate(activity.occurredOnDate, DATE_FORMATS_INTL.MONTH_DAY),
+          ) as string)
+        : copy.paid
+    case ActivityStatus.Missed:
+      return buildDynamicCopy(
+        copy.missed_on,
+        formatDate(activity.expectedDate, DATE_FORMATS_INTL.MONTH_DAY),
+      ) as string
+    case ActivityStatus.Upcoming:
+      return buildDynamicCopy(
+        copy.upcoming_on,
+        formatDate(activity.expectedDate, DATE_FORMATS_INTL.MONTH_DAY),
+      ) as string
+    default:
+      return copy.unknown
+  }
+}

package/src/recurringactivity/util/updateActivity.ts

@@ -0,0 +1,66 @@
+import { formatISO } from 'date-fns/formatISO'
+import { getDate } from 'date-fns/getDate'
+import { getDay } from 'date-fns/getDay'
+import { getUnixTime } from 'date-fns/getUnixTime'
+import { getMonth } from 'date-fns/getMonth'
+
+import { RecurrenceTypes } from '../../common'
+
+import type {
+  Activity,
+  CashflowSequence,
+  RepeatDay,
+  RepeatMonth,
+  RepeatWeekday,
+  ScheduledPayment,
+} from '../../common'
+
+export const updateIncome = (activity: Activity, sequence: CashflowSequence): CashflowSequence => {
+  const updatedSequence = {
+    ...sequence,
+    repeat_day: null,
+    repeat_interval: null,
+    repeat_month: null,
+    repeat_weekday: null,
+    start_date: getUnixTime(activity.expectedDate),
+  } as CashflowSequence
+
+  const repeatDay = `${getDate(activity.expectedDate)}` as RepeatDay
+  const repeatMonth = `${getMonth(activity.expectedDate)}` as RepeatMonth
+  const repeatWeekday = `${getDay(activity.expectedDate)}` as RepeatWeekday
+
+  switch (activity.recurrenceType) {
+    case RecurrenceTypes.EveryWeek:
+      updatedSequence.repeat_interval = '1'
+      updatedSequence.repeat_weekday = repeatWeekday
+      break
+    case RecurrenceTypes.EveryOtherWeek:
+      updatedSequence.repeat_interval = '2'
+      updatedSequence.repeat_weekday = repeatWeekday
+      break
+    case RecurrenceTypes.EveryMonth:
+      updatedSequence.repeat_day = repeatDay
+      break
+    case RecurrenceTypes.EveryQuarter:
+      updatedSequence.repeat_day = repeatDay
+      updatedSequence.repeat_interval = '3'
+      break
+    case RecurrenceTypes.EveryYear:
+      updatedSequence.repeat_day = repeatDay
+      updatedSequence.repeat_month = repeatMonth
+      break
+  }
+
+  return updatedSequence
+}
+
+export const updateExpense = (
+  activity: Activity,
+  scheduledPayment: ScheduledPayment,
+): ScheduledPayment => {
+  return {
+    ...scheduledPayment,
+    occurs_on: formatISO(activity.expectedDate, { representation: 'date' }),
+    recurrence_type: activity.recurrenceType,
+  }
+}

package/src/spending/SpendingMiniWidget.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MiniWidgetContainer, MiniWidgetProps, useGlobalCopyStore } from '../common'
+import MiniSpendingChart from './components/MiniSpendingChart'
+
+const SpendingMiniWidget: React.FC<MiniWidgetProps> = ({ onPrimaryCtaClick, sx = {} }) => {
+  const { spending: spendingCopy } = useGlobalCopyStore()
+
+  return (
+    <MiniWidgetContainer
+      className="mx-exp-spending-miniwidget"
+      onPrimaryCtaClick={onPrimaryCtaClick}
+      primaryCtaLabel={spendingCopy.primary_cta}
+      sx={sx}
+      title={spendingCopy.mini_title}
+    >
+      <MiniSpendingChart />
+    </MiniWidgetContainer>
+  )
+}
+
+export default observer(SpendingMiniWidget)