feat: adjust usage of uncategorized in profit and loss

src/components/Badge/Badge.tsx

@@ -14,6 +14,12 @@ export enum BadgeVariant {
   SUCCESS = 'success',
   WARNING = 'warning',
   ERROR = 'error',
+  LIGHT = 'light',
+}
+
+export enum BadgeRoundings {
+  SMALL = 'small',
+  MEDIUM = 'medium',
 }
 
 export interface BadgeProps {
@@ -24,6 +30,9 @@ export interface BadgeProps {
   size?: BadgeSize
   variant?: BadgeVariant
   hoverable?: boolean
+  className?: string
+  wide?: boolean
+  roundings?: BadgeRoundings
 }
 
 export const Badge = ({
@@ -34,6 +43,9 @@ export const Badge = ({
   size = BadgeSize.MEDIUM,
   variant = BadgeVariant.DEFAULT,
   hoverable = false,
+  className,
+  wide,
+  roundings = BadgeRoundings.SMALL,
 }: BadgeProps) => {
   const baseProps = {
     className: classNames(
@@ -42,6 +54,10 @@ export const Badge = ({
       onClick || tooltip ? 'Layer__badge--clickable' : '',
       `Layer__badge--${size}`,
       `Layer__badge--${variant}`,
+      roundings !== BadgeRoundings.MEDIUM &&
+        `Layer__badge--roundings-${roundings}`,
+      wide && 'Layer__badge--wide',
+      className,
     ),
     onClick,
     children,

src/components/NotificationCard/NotificationCard.tsx

@@ -6,22 +6,29 @@ import classNames from 'classnames'
 export interface NotificationCardProps {
   onClick: () => void
   children: ReactNode
+  bottomBar?: ReactNode
   className?: string
 }
 
 export const NotificationCard = ({
   onClick,
   children,
+  bottomBar,
   className,
 }: NotificationCardProps) => {
   return (
     <div className={classNames('Layer__notification-card', className)}>
-      <div className='Layer__notification-card__main'>{children}</div>
-      <IconButton
-        icon={<ChevronRightIcon />}
-        withBorder
-        onClick={() => onClick()}
-      />
+      <div className='Layer__notification-card__content'>
+        <div className='Layer__notification-card__main'>{children}</div>
+        <IconButton
+          icon={<ChevronRightIcon />}
+          withBorder
+          onClick={() => onClick()}
+        />
+      </div>
+      {bottomBar && (
+        <div className='Layer__notification-card__bottom-bar'>{bottomBar}</div>
+      )}
     </div>
   )
 }

src/components/ProfitAndLossChart/ProfitAndLossChart.tsx

@@ -378,6 +378,10 @@ export const ProfitAndLossChart = ({
         netProfit > 0 ? 'positive' : netProfit < 0 ? 'negative' : ''
       const revenue = payload.find(x => x.dataKey === 'revenue')?.value ?? 0
       const expenses = payload.find(x => x.dataKey === 'expenses')?.value ?? 0
+      const revenueUncategorized =
+        payload.find(x => x.dataKey === 'revenueUncategorized')?.value ?? 0
+      const expensesUncategorized =
+        payload.find(x => x.dataKey === 'expensesUncategorized')?.value ?? 0
 
       return (
         <div className='Layer__chart__tooltip'>
@@ -393,12 +397,29 @@ export const ProfitAndLossChart = ({
                   ${centsToDollars(revenue)}
                 </span>
               </li>
+              <li className='Layer__chart__tooltip-list--secondary-item'>
+                <label className='Layer__chart__tooltip-label'>
+                  Uncategorized
+                </label>
+                <span className='Layer__chart__tooltip-value'>
+                  ${centsToDollars(revenueUncategorized)}
+                </span>
+              </li>
               <li>
                 <label className='Layer__chart__tooltip-label'>Expenses</label>
                 <span className='Layer__chart__tooltip-value'>
                   ${centsToDollars(Math.abs(expenses))}
                 </span>
               </li>
+              <li className='Layer__chart__tooltip-list--secondary-item'>
+                <label className='Layer__chart__tooltip-label'>
+                  Uncategorized
+                </label>
+                <span className='Layer__chart__tooltip-value'>
+                  {expensesUncategorized &&
+                    `$${centsToDollars(expensesUncategorized * -1)}`}
+                </span>
+              </li>
               <li>
                 <label className='Layer__chart__tooltip-label'>
                   Net Profit