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

package/src/transactions/components/shared/transactiondetails/actions/SplitAction.tsx

@@ -0,0 +1,234 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Avatar from '@mui/material/Avatar'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+
+import { Icon, IconWeight, Text } from '@kyper/mui'
+
+import {
+  buildDynamicCopy,
+  Dialog,
+  Drawer,
+  useCategoryStore,
+  useGlobalCopyStore,
+  useEvent,
+  useTransactionStore,
+  ANALYTICS_EVENTS,
+} from '../../../../../common'
+
+import type { Transaction } from '../../../../../common'
+
+import { useTransactionsUiStore } from '../../../../context/hooks'
+import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
+
+import { SplitManager } from '../../../splitmanager'
+
+import TransactionAmountHeader from '../TransactionAmountHeader'
+
+interface SplitActionProps {
+  transaction: Transaction
+}
+
+const SplitAction: React.FC<SplitActionProps> = ({ transaction }) => {
+  const { onEvent } = useEvent()
+  const { splitTransaction, unSplitTransaction } = useTransactionStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+  const { setShouldDisableDrawerScroll } = useTransactionsUiStore()
+  const { categories } = useCategoryStore()
+
+  const INITIAL_SPLIT = {
+    ...transaction,
+    amount: transaction.amount - 1,
+    guid: '',
+    has_been_split: false,
+    parent_guid: transaction.guid,
+  }
+
+  const EMPTY_SPLIT = {
+    ...transaction,
+    amount: 1,
+    category_guid: undefined,
+    category: copy.split_transaction_select_category_btn,
+    guid: '',
+    has_been_split: false,
+    parent_guid: transaction.guid,
+    top_level_category_guid: undefined,
+  }
+
+  const [isSplitDrawerOpen, setIsSplitDrawerOpen] = React.useState(false)
+  const [isDeleteSplitOpen, setIsDeleteSplitOpen] = React.useState(false)
+  const [splits, setSplits] = React.useState<Transaction[]>([])
+
+  const handleAddSplit = () => {
+    const updatedSplits = [...splits]
+
+    updatedSplits.push({ ...EMPTY_SPLIT })
+    updatedSplits[0].amount -= 1
+    setSplits(updatedSplits)
+  }
+
+  const handleDeleteSplit = (index: number) => {
+    if (index > 0) {
+      const row = splits[index]
+      const updatedSplits = [...splits]
+
+      updatedSplits.splice(index, 1)
+      updatedSplits[0].amount += row.amount
+      setSplits(updatedSplits)
+    }
+  }
+
+  const handleUpdateAmount = (index: number, amount: number) => {
+    const updatedSplits = [...splits]
+
+    updatedSplits[index].amount = amount
+    updatedSplits[0].amount =
+      transaction.amount -
+      updatedSplits.reduce(
+        (sum: number, split: Transaction, index) => sum + (index !== 0 ? split.amount : 0),
+        0,
+      )
+    setSplits(updatedSplits)
+  }
+
+  const handleCategoryChanged = (index: number, categoryGuid: string) => {
+    const updatedSplits = [...splits]
+    const category = categories.find((item) => item.guid === categoryGuid)
+    if (category) {
+      updatedSplits[index] = {
+        ...updatedSplits[index],
+        category_guid: categoryGuid,
+        category: category.name,
+        top_level_category_guid: category.parent_guid || categoryGuid,
+      }
+      setSplits(updatedSplits)
+    }
+  }
+
+  const handleClick = () => {
+    if (transaction.parent_guid || transaction.has_been_split) {
+      setIsDeleteSplitOpen(true)
+      return
+    }
+
+    setSplits([{ ...INITIAL_SPLIT }, { ...EMPTY_SPLIT }])
+
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_SPLIT, {
+      transaction_guid: transaction.guid,
+    })
+    setIsSplitDrawerOpen(true)
+  }
+
+  const handleSave = async () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_SPLIT_SAVE_CLICK)
+    await splitTransaction({ ...transaction, has_been_split: true }, splits)
+
+    setIsSplitDrawerOpen(false)
+  }
+
+  const handleCancel = async () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_SPLIT_CANCEL_CLICK)
+    setSplits([{ ...INITIAL_SPLIT }, { ...EMPTY_SPLIT }])
+    setIsSplitDrawerOpen(false)
+  }
+
+  const handleUnSplit = async () => {
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_UNSPLIT, {
+      transaction_guid: transaction.guid,
+    })
+    const guid = transaction.parent_guid ?? transaction.guid
+    await unSplitTransaction(guid)
+  }
+
+  const hasError = React.useMemo(() => {
+    const hasCategoryError = splits.some((split) => !split.category_guid)
+    const hasAmountError = splits.some((split) => split.amount <= 0)
+
+    return hasCategoryError || hasAmountError
+  }, [splits])
+
+  return (
+    <React.Fragment>
+      {transaction && (
+        <ListItem disableGutters={true} disablePadding={true}>
+          <ListItemButton onClick={handleClick}>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
+                <Icon name="call_split" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={
+                transaction.has_been_split || transaction.parent_guid
+                  ? copy.split_transaction_unsplit_title
+                  : copy.split_transaction_title
+              }
+              secondary={
+                transaction.has_been_split || transaction.parent_guid
+                  ? copy.split_transaction_unsplit_subtitle
+                  : copy.split_transaction_desc
+              }
+            />
+            <ListItemIcon>
+              {transaction.has_been_split || transaction.parent_guid ? (
+                <Icon name="delete" weight={IconWeight.Dark} />
+              ) : (
+                <Icon name="chevron_right" weight={IconWeight.Dark} />
+              )}
+            </ListItemIcon>
+          </ListItemButton>
+        </ListItem>
+      )}
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={isSplitDrawerOpen}
+        isPrimaryDisabled={hasError}
+        onClose={handleCancel}
+        onPrimaryAction={handleSave}
+        primaryText={commonCopy.save_button}
+        secondaryText={commonCopy.cancel_button}
+        title={copy.split_transaction_title}
+      >
+        <TransactionAmountHeader transaction={transaction} />
+        <SplitManager
+          onAddSplit={handleAddSplit}
+          onCategoryChanged={handleCategoryChanged}
+          onDeleteSplit={handleDeleteSplit}
+          onUpdateAmount={handleUpdateAmount}
+          splits={splits}
+          transaction={transaction}
+        />
+      </Drawer>
+      <Dialog
+        copy={{ title: copy.split_transaction_unsplit_title }}
+        isOpen={isDeleteSplitOpen}
+        onClose={() => {
+          setShouldDisableDrawerScroll(false)
+          setIsDeleteSplitOpen(false)
+        }}
+        onPrimaryAction={handleUnSplit}
+        onSecondaryAction={() => {
+          onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_UNSPLIT_CANCEL)
+        }}
+        primaryText={commonCopy.delete_button}
+        secondaryText={commonCopy.cancel_button}
+      >
+        <Text variant="Paragraph">
+          {
+            buildDynamicCopy(
+              copy.split_transaction_unsplit_description,
+              transaction.description,
+            ) as string
+          }
+        </Text>
+      </Dialog>
+    </React.Fragment>
+  )
+}
+
+export default observer(SplitAction)

package/src/transactions/components/shared/transactiondetails/actions/TagsAction.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Avatar from '@mui/material/Avatar'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+
+import { Icon, IconWeight, Text } from '@kyper/mui'
+
+import { ANALYTICS_EVENTS, Drawer, useGlobalCopyStore } from '../../../../../common'
+
+import type { Transaction } from '../../../../../common'
+
+import { TagManager } from '../../../tagmanager'
+import { useTransactionsUiStore } from '../../../../context/hooks'
+import { useEvent, useTransactionStore } from '../../../../../common'
+import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
+
+interface TagsActionProps {
+  transaction: Transaction
+}
+
+const TagsAction: React.FC<TagsActionProps> = ({ transaction }) => {
+  const { onEvent } = useEvent()
+  const { tags, updateTaggings, updateTransaction } = useTransactionStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+  const { updateManualTransaction } = useTransactionsUiStore()
+
+  const [open, setOpen] = React.useState(false)
+  const [selectedTags, setSelectedTags] = React.useState<string[]>(transaction.tags)
+
+  React.useEffect(() => {
+    setSelectedTags(transaction.tags)
+  }, [open, transaction])
+
+  const handleTagChecked = (guid: string) => {
+    const tags = [...selectedTags]
+
+    const index = selectedTags.indexOf(guid)
+    if (index >= 0) {
+      tags.splice(index, 1)
+    } else {
+      tags.push(guid)
+    }
+    setSelectedTags(tags)
+  }
+
+  const handleSave = async () => {
+    if (transaction.is_manual && !transaction.guid) {
+      updateManualTransaction({ ...transaction, tags: selectedTags })
+      setOpen(false)
+      return
+    }
+
+    await updateTaggings(selectedTags, transaction.guid)
+    await updateTransaction({ ...transaction })
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_TAGS, { transaction_guid: transaction.guid })
+    setOpen(false)
+  }
+
+  const tagNames = React.useMemo(
+    () =>
+      transaction.tags.map(
+        (tagGuid, index, selectedTags) =>
+          `${tags.find((item) => item.guid === tagGuid)?.name}${
+            index < selectedTags.length - 1 ? ' / ' : ''
+          }`,
+      ),
+    [tags, transaction],
+  )
+
+  return (
+    <React.Fragment>
+      <ListItem disableGutters={true} disablePadding={true}>
+        <ListItemButton
+          onClick={() => {
+            onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_CLICK)
+            setOpen(true)
+          }}
+        >
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
+              <Icon name="local_offer" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary={copy.tags_title}
+            primaryTypographyProps={{ variant: 'XSmall' }}
+            secondary={
+              <Text bold={true} variant="Body">
+                {transaction.tags?.length > 0 ? tagNames : copy.tags_desc}
+              </Text>
+            }
+          />
+          <ListItemIcon>
+            <Icon name="chevron_right" weight={IconWeight.Dark} />
+          </ListItemIcon>
+        </ListItemButton>
+      </ListItem>
+
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        onPrimaryAction={handleSave}
+        primaryText={commonCopy.save_button}
+        secondaryText={commonCopy.cancel_button}
+        title={copy.tags_title}
+      >
+        <TagManager onTagChecked={handleTagChecked} selectedTags={selectedTags} />
+      </Drawer>
+    </React.Fragment>
+  )
+}
+
+export default observer(TagsAction)

package/src/transactions/components/shared/transactiondetails/actions/index.ts

@@ -0,0 +1,8 @@
+export { default as CategoryAction } from './CategoryAction'
+export { default as DateAction } from './DateAction'
+export { default as DeleteAction } from './DeleteAction'
+export { default as DeleteLogoAction } from './DeleteLogoAction'
+export { default as HideAction } from './HideAction'
+export { default as MemoAction } from './MemoAction'
+export { default as SplitAction } from './SplitAction'
+export { default as TagsAction } from './TagsAction'

package/src/transactions/components/shared/transactionlist/DateRow.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+
+import Box from '@mui/material/Box'
+
+import { Text, useTokens } from '@kyper/mui'
+
+import { DATE_FORMATS_INTL, formatDate } from '../../../../common'
+
+interface DateRowProps {
+  bgcolor?: string
+  date: number
+}
+
+const DateRow: React.FC<DateRowProps> = ({ bgcolor = 'background.default', date }) => {
+  const tokens = useTokens()
+
+  return (
+    <Box
+      display="inline-block"
+      pb={tokens.Spacing.Tiny}
+      pl={tokens.Spacing.Large}
+      pt={tokens.Spacing.Tiny}
+      sx={{ bgcolor, width: '100%' }}
+    >
+      <Text bold={true} variant="XSmall">
+        {formatDate(fromUnixTime(date), DATE_FORMATS_INTL.DAY_OF_WEEK_MONTH_DAY)}
+      </Text>
+    </Box>
+  )
+}
+
+export default DateRow

package/src/transactions/components/shared/transactionlist/TransactionRow.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+
+import { Icon, MerchantLogo, Text } from '@kyper/mui'
+
+import {
+  formatCurrency,
+  ListItemWrapper,
+  Transaction,
+  TransactionType,
+  useGlobalCopyStore,
+  useTransactionStore,
+} from '../../../../common'
+
+import { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'
+import { useTransactionsUiStore } from '../../../context/hooks'
+
+interface TransactionRowProps {
+  onClick?: (guid: string) => void
+  transaction: Transaction
+}
+
+const TransactionRow: React.FC<TransactionRowProps> = ({ transaction, onClick }) => {
+  const { associatedBeats } = useTransactionStore()
+  const { transactions: copy } = useGlobalCopyStore()
+  const { showInsights } = useTransactionsUiStore()
+
+  const isCredit = transaction.transaction_type === TransactionType.CREDIT
+
+  const beat = React.useMemo(() => {
+    return associatedBeats.find((beat) => beat.associated_transaction_guid === transaction.guid)
+  }, [associatedBeats, transaction])
+
+  return (
+    <ListItemWrapper
+      clickEventName={ON_CLICK_EVENTS.ON_TRANSACTION_LIST_ITEM_CLICK}
+      onClick={onClick ? () => onClick(transaction.guid) : undefined}
+    >
+      <ListItemAvatar>
+        {transaction.parent_guid ? (
+          <React.Fragment />
+        ) : (
+          <MerchantLogo
+            categoryGuid={transaction.top_level_category_guid || ''}
+            merchantGuid={transaction.merchant_guid || ''}
+          />
+        )}
+      </ListItemAvatar>
+      <ListItemText
+        disableTypography={true}
+        secondary={
+          <Stack direction="row" justifyContent="space-between">
+            <Stack alignItems="center" direction="row" gap={4}>
+              {transaction.is_flagged && (
+                <Icon fill={true} name="flag" size={16} sx={{ color: 'warning.dark' }} />
+              )}
+              {transaction.is_hidden && <Icon name="visibility_off" size={16} />}
+              {transaction.has_been_split && <Icon name="call_split" size={16} />}
+              <Text variant="XSmall">
+                {transaction.has_been_split
+                  ? copy.split_transaction_category_label
+                  : transaction.category}
+              </Text>
+            </Stack>
+            {beat && showInsights && (
+              <Text bold={true} color="action.active" variant="XSmall">
+                {beat.short_title}
+              </Text>
+            )}
+          </Stack>
+        }
+      >
+        <Stack direction="row" justifyContent="space-between">
+          <Text bold={true} variant="Body">
+            {transaction.is_hidden && copy.hide_trnx_cancel_hidden_note}
+            {transaction.payee || transaction.description || transaction.feed_description}
+          </Text>
+          <Text bold={true} color={isCredit ? 'success.main' : 'text.primary'} variant="Body">
+            {isCredit ? '+' : ''}
+            {formatCurrency(transaction.amount, '0,0.00')}
+          </Text>
+        </Stack>
+      </ListItemText>
+    </ListItemWrapper>
+  )
+}
+
+export default observer(TransactionRow)

package/src/transactions/components/shared/transactionlist/ZeroState.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import ReceiptOutlinedIcon from '@mui/icons-material/ReceiptOutlined'
+
+import Stack from '@mui/material/Stack'
+
+import { Text, useTokens } from '@kyper/mui'
+
+import { useGlobalCopyStore } from '../../../../common'
+
+interface ZeroStateProps {
+  showIcon?: boolean
+  showSubtitle?: boolean
+}
+
+const ZeroState: React.FC<ZeroStateProps> = ({ showIcon = true, showSubtitle = true }) => {
+  const tokens = useTokens()
+  const { transactions: copy } = useGlobalCopyStore()
+
+  return (
+    <Stack alignItems="center" gap={tokens.Spacing.Small} height="auto" mt={tokens.Spacing.Large}>
+      {showIcon && <ReceiptOutlinedIcon color="secondary" sx={{ fontSize: 32 }} />}
+      <Text bold={true} color="secondary" variant="Small">
+        {copy.zero_state_no_transactions}
+      </Text>
+      {showSubtitle && (
+        <Text color="secondary" variant="XSmall">
+          {copy.zero_state_there_are_no_transactions}
+        </Text>
+      )}
+    </Stack>
+  )
+}
+
+export default observer(ZeroState)

package/src/transactions/components/shared/transactiontable/cells/AccountCell.tsx

@@ -0,0 +1,12 @@
+import { GridCellParams } from '@mui/x-data-grid'
+
+import { Text } from '@kyper/mui'
+
+const AccountCell = (params: GridCellParams) => (
+  <Text tabIndex={params.tabIndex} variant="Small">
+    {`${params.row.account}`}
+    {params.row.number && ` | ${params.row.number}`}
+  </Text>
+)
+
+export default AccountCell

package/src/transactions/components/shared/transactiontable/cells/AmountCell.tsx

@@ -0,0 +1,35 @@
+import Stack from '@mui/material/Stack'
+
+import { GridCellParams } from '@mui/x-data-grid'
+
+import { Text } from '@kyper/mui'
+
+import { formatCurrency, TransactionType, useTransactionStore } from '../../../../../common'
+
+import { useTransactionsUiStore } from '../../../../context/hooks'
+
+const AmountCell = (params: GridCellParams) => {
+  const { associatedBeats } = useTransactionStore()
+  const { showInsights } = useTransactionsUiStore()
+
+  const { amount, transaction_type } = params.row
+  const beat = associatedBeats.find((beat) => beat.associated_transaction_guid === params.row.guid)
+
+  const isCredit = transaction_type === TransactionType.CREDIT
+
+  return (
+    <Stack alignItems="flex-end" tabIndex={params.tabIndex}>
+      <Text color={isCredit ? 'success.main' : 'text.primary'} variant="Small">
+        {isCredit ? '+' : ''}
+        {formatCurrency(amount, '0,0.00')}
+      </Text>
+      {beat && showInsights && (
+        <Text bold={true} color="action.active" variant="XSmall">
+          {beat.short_title}
+        </Text>
+      )}
+    </Stack>
+  )
+}
+
+export default AmountCell

package/src/transactions/components/shared/transactiontable/cells/CategoryCell.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Stack from '@mui/material/Stack'
+
+import { GridCellParams } from '@mui/x-data-grid-pro'
+
+import { Icon, Text } from '@kyper/mui'
+
+import { useGlobalCopyStore } from '../../../../../common'
+
+const CategoryCell = (params: GridCellParams) => {
+  const { transactions: copy } = useGlobalCopyStore()
+  const [isHover, setIsHover] = React.useState(false)
+
+  return (
+    <Stack
+      alignItems="center"
+      direction="row"
+      gap={8}
+      height="100%"
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+      width="100%"
+    >
+      {params.row.has_been_split && <Icon name="call_split" size={16} />}
+      <Text tabIndex={params.tabIndex} variant="Small">
+        {params.row.has_been_split ? copy.split_transaction_category_label : params.row.category}
+      </Text>
+      {!params.row.has_been_split && isHover && (
+        <Icon name="edit" sx={{ color: 'action.active' }} />
+      )}
+    </Stack>
+  )
+}
+
+export default observer(CategoryCell)

package/src/transactions/components/shared/transactiontable/cells/DateCell.tsx

@@ -0,0 +1,17 @@
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+
+import { GridCellParams } from '@mui/x-data-grid'
+
+import { Text } from '@kyper/mui'
+
+import { DATE_FORMATS_INTL, formatDate } from '../../../../../common'
+
+const DateCell = (params: GridCellParams) => {
+  return (
+    <Text tabIndex={params.tabIndex} variant="Small">
+      {formatDate(fromUnixTime(params.row.date), DATE_FORMATS_INTL.MONTH_DAY)}
+    </Text>
+  )
+}
+
+export default DateCell

package/src/transactions/components/shared/transactiontable/cells/FlagCell.tsx

@@ -0,0 +1,43 @@
+import Box from '@mui/material/Box'
+import { observer } from 'mobx-react-lite'
+
+import { useTheme } from '@mui/material/styles'
+import { GridRenderCellParams } from '@mui/x-data-grid-pro'
+import { Icon } from '@kyper/mui'
+
+import { useGlobalCopyStore } from '../../../../../common'
+
+const FlagCell = (params: GridRenderCellParams) => {
+  const theme = useTheme()
+  const { transactions: transactionsCopy } = useGlobalCopyStore()
+  const { is_flagged, is_hidden, has_been_viewed, parent_guid } = params.row
+  const isChildOfSplit = !!parent_guid
+  const hasNotBeenViewed = !has_been_viewed && !isChildOfSplit
+
+  return (
+    <Box
+      aria-label={is_hidden ? transactionsCopy.is_hidden : transactionsCopy.is_flagged}
+      tabIndex={params.tabIndex}
+    >
+      {is_flagged && <Icon fill={true} name="flag" size={16} sx={{ color: 'warning.dark' }} />}
+      {!is_flagged && is_hidden && <Icon name="visibility_off" size={16} />}
+      {hasNotBeenViewed && (
+        <svg
+          data-testid="svg"
+          style={{
+            display: 'inline-block',
+            height: 16,
+            fill: theme.palette.primary.light,
+            verticalAlign: 'middle',
+            width: 16,
+          }}
+          viewBox="0 0 512 512"
+        >
+          <circle cx="256" cy="256" r="60" />
+        </svg>
+      )}
+    </Box>
+  )
+}
+
+export default observer(FlagCell)

package/src/transactions/components/shared/transactiontable/cells/HeaderCell.tsx

@@ -0,0 +1,11 @@
+import { Text } from '@kyper/mui'
+
+import { GridColumnHeaderParams } from '@mui/x-data-grid'
+
+const HeaderCell = (params: GridColumnHeaderParams) => (
+  <Text fontWeight={600} variant="Small">
+    {params.colDef.headerName}
+  </Text>
+)
+
+export default HeaderCell