Updated grid layouts. Fixed chart tooltip.

src/components/charts/BarChart.tsx

@@ -82,19 +82,19 @@ export function BarChart(props: BarChartProps) {
   const handleTooltip = ({ tooltip }: { tooltip: any }) => {
     const { opacity } = tooltip;
 
-    setTooltip(
-      opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} currency={currency} /> : null,
-    );
+    setTooltip(opacity ? tooltip : null);
   };
 
   return (
-    <Chart
-      {...props}
-      type="bar"
-      chartOptions={options}
-      tooltip={tooltip}
-      onTooltip={handleTooltip}
-      style={{ height: 400 }}
-    />
+    <>
+      <Chart
+        {...props}
+        type="bar"
+        chartOptions={options}
+        onTooltip={handleTooltip}
+        style={{ height: 400 }}
+      />
+      {tooltip && <BarChartTooltip tooltip={tooltip} unit={unit} currency={currency} />}
+    </>
   );
 }

src/components/charts/Chart.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useMemo, ReactNode, HTMLAttributes } from 'react';
+import { useState, useRef, useEffect, useMemo, HTMLAttributes } from 'react';
 import { Loading } from '@umami/react-zen';
 import ChartJS, { LegendItem, ChartOptions } from 'chart.js/auto';
 import { Legend } from '@/components/metrics/Legend';
@@ -14,7 +14,6 @@ export interface ChartProps extends HTMLAttributes<HTMLDivElement> {
   onUpdate?: (chart: any) => void;
   onTooltip?: (model: any) => void;
   chartOptions?: ChartOptions;
-  tooltip?: ReactNode;
 }
 
 export function Chart({
@@ -27,7 +26,6 @@ export function Chart({
   onUpdate,
   onTooltip,
   chartOptions,
-  tooltip,
   ...props
 }: ChartProps) {
   const canvas = useRef(null);
@@ -53,6 +51,7 @@ export function Chart({
         },
         tooltip: {
           enabled: false,
+          intersect: true,
           external: onTooltip,
         },
       },
@@ -139,7 +138,6 @@ export function Chart({
         <canvas ref={canvas} />
       </div>
       <Legend items={legendItems} onClick={handleLegendClick} />
-      {tooltip}
     </>
   );
 }

src/components/common/GridRow.tsx

@@ -2,10 +2,20 @@ import { Grid } from '@umami/react-zen';
 
 const LAYOUTS = {
   one: { columns: '1fr' },
-  two: { columns: { xs: '1fr', sm: '1fr', md: '1fr 1fr', lg: '1fr 1fr' } },
-  three: { columns: { xs: '1fr', sm: '1fr', md: '1fr 1fr 1fr', lg: '1fr 2fr' } },
-  'one-two': { columns: { xs: '1fr', sm: '1fr', md: '1fr 2fr', lg: '1fr 2fr' } },
-  'two-one': { columns: { xs: '1fr', sm: '1fr', md: '2fr 1fr', lg: '2fr 1fr', xl: '2fr 1fr' } },
+  two: {
+    columns: {
+      xs: '1fr',
+      md: 'repeat(auto-fill, minmax(600px, 1fr))',
+    },
+  },
+  three: {
+    columns: {
+      xs: '1fr',
+      md: 'repeat(auto-fill, minmax(400px, 1fr))',
+    },
+  },
+  'one-two': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } },
+  'two-one': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } },
 };
 
 export function GridRow(props: {

src/components/common/TypeIcon.tsx

@@ -13,9 +13,9 @@ export function TypeIcon({
   return (
     <Row gap="3" alignItems="center">
       <img
-        src={`${process.env.basePath || ''}/images/${type}/${value
-          ?.replaceAll(' ', '-')
-          .toLowerCase()}.png`}
+        src={`${process.env.basePath || ''}/images/${type}/${
+          value?.replaceAll(' ', '-').toLowerCase() || 'xx'
+        }.png`}
         onError={e => {
           e.currentTarget.src = `${process.env.basePath || ''}/images/${type}/unknown.png`;
         }}

src/components/input/TeamsButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Key } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Text,
@@ -30,16 +30,10 @@ export function TeamsButton({
   const { teamId } = useNavigation();
   const router = useRouter();
   const team = result?.data?.find(({ id }) => id === teamId);
-  const [selectedKeys, setSelectedKeys] = useState<any>(new Set([teamId || user.id]));
+  const selectedKeys = new Set([teamId || user.id]);
 
-  const handleSelect = (keys: Set<string>) => {
-    if (keys.size > 0) {
-      const [id] = [...keys];
-
-      router.push(id === user.id ? '/dashboard' : `/teams/${id}/dashboard`);
-
-      setSelectedKeys(keys);
-    }
+  const handleSelect = (id: Key) => {
+    router.push(id === user.id ? '/dashboard' : `/teams/${id}/dashboard`);
   };
 
   if (!result?.count) {
@@ -63,7 +57,7 @@ export function TeamsButton({
             selectionMode="single"
             selectedKeys={selectedKeys}
             autoFocus="last"
-            onSelectionChange={keys => handleSelect(keys as Set<string>)}
+            onAction={handleSelect}
           >
             <MenuSection title={formatMessage(labels.myAccount)}>
               <MenuItem id={user.id}>