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

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

@@ -1,234 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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