oh lord. prettier eslint and all that

2023-11-02 20:24:41 +01:00
parent e1f37b439e
commit 107feda4ad
121 changed files with 1856 additions and 1684 deletions
--- a/apps/web/src/components/report/ReportChartType.tsx
+++ b/apps/web/src/components/report/ReportChartType.tsx
@@ -1,13 +1,14 @@
-import { useDispatch, useSelector } from "@/redux";
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+import { useDispatch, useSelector } from '@/redux';
+import type { IChartType } from '@/types';
+import { chartTypes } from '@/utils/constants';
+
+import { Combobox } from '../ui/combobox';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
 import {
  changeChartType,
  changeDateRanges,
  changeInterval,
-} from "./reportSlice";
-import { Combobox } from "../ui/combobox";
-import { type IChartType } from "@/types";
-import { chartTypes } from "@/utils/constants";
+} from './reportSlice';

 export function ReportChartType() {
  const dispatch = useDispatch();
--- a/apps/web/src/components/report/ReportDateRange.tsx
+++ b/apps/web/src/components/report/ReportDateRange.tsx
@@ -1,9 +1,10 @@
-import { useDispatch, useSelector } from "@/redux";
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
-import { changeDateRanges, changeInterval } from "./reportSlice";
-import { Combobox } from "../ui/combobox";
-import { type IInterval } from "@/types";
-import { intervals, timeRanges } from "@/utils/constants";
+import { useDispatch, useSelector } from '@/redux';
+import type { IInterval } from '@/types';
+import { intervals, timeRanges } from '@/utils/constants';
+
+import { Combobox } from '../ui/combobox';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
+import { changeDateRanges, changeInterval } from './reportSlice';

 export function ReportDateRange() {
  const dispatch = useDispatch();
@@ -28,7 +29,7 @@ export function ReportDateRange() {
          );
        })}
      </RadioGroup>
-      {chartType === "linear" && (
+      {chartType === 'linear' && (
        <div className="w-full max-w-[200px]">
          <Combobox
            placeholder="Interval"
--- a/apps/web/src/components/report/chart/ChartProvider.tsx
+++ b/apps/web/src/components/report/chart/ChartProvider.tsx
@@ -1,9 +1,9 @@
-import { pick } from "ramda";
-import { createContext, memo, useContext, useMemo } from "react";
+import { createContext, memo, useContext, useMemo } from 'react';
+import { pick } from 'ramda';

-type ChartContextType = {
+interface ChartContextType {
  editMode: boolean;
-};
+}

 type ChartProviderProps = {
  children: React.ReactNode;
@@ -20,7 +20,7 @@ export function ChartProvider({ children, editMode }: ChartProviderProps) {
        () => ({
          editMode,
        }),
-        [editMode],
+        [editMode]
      )}
    >
      {children}
@@ -28,20 +28,24 @@ export function ChartProvider({ children, editMode }: ChartProviderProps) {
  );
 }

-export function withChartProivder<ComponentProps>(WrappedComponent: React.FC<ComponentProps>) {
+export function withChartProivder<ComponentProps>(
+  WrappedComponent: React.FC<ComponentProps>
+) {
  const WithChartProvider = (props: ComponentProps & ChartContextType) => {
    return (
      <ChartProvider {...props}>
        <WrappedComponent {...props} />
      </ChartProvider>
-    )
-  }
+    );
+  };

-  WithChartProvider.displayName = `WithChartProvider(${WrappedComponent.displayName ?? WrappedComponent.name ?? 'Component'})`
+  WithChartProvider.displayName = `WithChartProvider(${
+    WrappedComponent.displayName ?? WrappedComponent.name ?? 'Component'
+  })`;

-  return memo(WithChartProvider)
+  return memo(WithChartProvider);
 }

 export function useChartContext() {
  return useContext(ChartContext);
-}
+}
--- a/apps/web/src/components/report/chart/ReportBarChart.tsx
+++ b/apps/web/src/components/report/chart/ReportBarChart.tsx
@@ -1,28 +1,36 @@
-import { ColorSquare } from "@/components/ColorSquare";
-import { type IChartData } from "@/types";
-import { type RouterOutputs } from "@/utils/api";
-import { getChartColor } from "@/utils/theme";
+import { useMemo, useState } from 'react';
+import { ColorSquare } from '@/components/ColorSquare';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { IChartData } from '@/types';
+import type { RouterOutputs } from '@/utils/api';
+import { cn } from '@/utils/cn';
+import { getChartColor } from '@/utils/theme';
 import {
-  useReactTable,
-  getCoreRowModel,
-  flexRender,
  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
  getSortedRowModel,
-  type SortingState,
-} from "@tanstack/react-table";
-import { useMemo, useState } from "react";
-import { useElementSize } from "usehooks-ts";
-import { useChartContext } from "./ChartProvider";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import { cn } from "@/utils/cn";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+  useReactTable,
+} from '@tanstack/react-table';
+import type { SortingState } from '@tanstack/react-table';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useElementSize } from 'usehooks-ts';
+
+import { useChartContext } from './ChartProvider';

 const columnHelper =
-  createColumnHelper<RouterOutputs["chart"]["chart"]["series"][number]>();
+  createColumnHelper<RouterOutputs['chart']['chart']['series'][number]>();

-type ReportBarChartProps = {
+interface ReportBarChartProps {
  data: IChartData;
-};
+}

 export function ReportBarChart({ data }: ReportBarChartProps) {
  const { editMode } = useChartContext();
@@ -31,13 +39,13 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
  const table = useReactTable({
    data: useMemo(
      () => (editMode ? data.series : data.series.slice(0, 20)),
-      [editMode, data],
+      [editMode, data]
    ),
    columns: useMemo(() => {
      return [
        columnHelper.accessor((row) => row.name, {
-          id: "label",
-          header: () => "Label",
+          id: 'label',
+          header: () => 'Label',
          cell(info) {
            return (
              <div className="flex items-center gap-2">
@@ -50,35 +58,35 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
          size: width ? width * 0.3 : undefined,
        }),
        columnHelper.accessor((row) => row.totalCount, {
-          id: "totalCount",
+          id: 'totalCount',
          cell: (info) => (
            <div className="text-right font-medium">{info.getValue()}</div>
          ),
-          header: () => "Count",
+          header: () => 'Count',
          footer: (info) => info.column.id,
          size: width ? width * 0.1 : undefined,
          enableSorting: true,
        }),
        columnHelper.accessor((row) => row.totalCount, {
-          id: "graph",
+          id: 'graph',
          cell: (info) => (
            <div
              className="shine h-4 rounded [.mini_&]:h-3"
              style={{
                width:
                  (info.getValue() / info.row.original.meta.highest) * 100 +
-                  "%",
+                  '%',
                background: getChartColor(info.row.index),
              }}
            />
          ),
-          header: () => "Graph",
+          header: () => 'Graph',
          footer: (info) => info.column.id,
          size: width ? width * 0.6 : undefined,
        }),
      ];
    }, [width]),
-    columnResizeMode: "onChange",
+    columnResizeMode: 'onChange',
    state: {
      sorting,
    },
@@ -100,7 +108,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
                  <ColorSquare>{event.id}</ColorSquare> {event.name}
                </div>
                <div className="mt-6 font-mono text-5xl font-light">
-                  {new Intl.NumberFormat("en-IN", {
+                  {new Intl.NumberFormat('en-IN', {
                    maximumSignificantDigits: 20,
                  }).format(event.count)}
                </div>
@@ -134,16 +142,16 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
                    <div
                      {...{
                        className: cn(
-                          "flex items-center gap-2",
+                          'flex items-center gap-2',
                          header.column.getCanSort() &&
-                            "cursor-pointer select-none",
+                            'cursor-pointer select-none'
                        ),
                        onClick: header.column.getToggleSortingHandler(),
                      }}
                    >
                      {flexRender(
                        header.column.columnDef.header,
-                        header.getContext(),
+                        header.getContext()
                      )}
                      {{
                        asc: <ChevronUp className="ml-auto" size={14} />,
@@ -156,7 +164,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
                            onMouseDown: header.getResizeHandler(),
                            onTouchStart: header.getResizeHandler(),
                            className: `resizer ${
-                              header.column.getIsResizing() ? "isResizing" : ""
+                              header.column.getIsResizing() ? 'isResizing' : ''
                            }`,
                            style: {},
                          }
--- a/apps/web/src/components/report/chart/ReportLineChart.tsx
+++ b/apps/web/src/components/report/chart/ReportLineChart.tsx
@@ -1,3 +1,8 @@
+import { useEffect, useRef, useState } from 'react';
+import { AutoSizer } from '@/components/AutoSizer';
+import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
+import type { IChartData, IInterval } from '@/types';
+import { getChartColor } from '@/utils/theme';
 import {
  CartesianGrid,
  Line,
@@ -5,20 +10,16 @@ import {
  Tooltip,
  XAxis,
  YAxis,
-} from "recharts";
-import { ReportLineChartTooltip } from "./ReportLineChartTooltip";
-import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
-import { type IChartData, type IInterval } from "@/types";
-import { getChartColor } from "@/utils/theme";
-import { ReportTable } from "./ReportTable";
-import { useEffect, useRef, useState } from "react";
-import { AutoSizer } from "@/components/AutoSizer";
-import { useChartContext } from "./ChartProvider";
+} from 'recharts';

-type ReportLineChartProps = {
+import { useChartContext } from './ChartProvider';
+import { ReportLineChartTooltip } from './ReportLineChartTooltip';
+import { ReportTable } from './ReportTable';
+
+interface ReportLineChartProps {
  data: IChartData;
  interval: IInterval;
-};
+}

 export function ReportLineChart({ interval, data }: ReportLineChartProps) {
  const { editMode } = useChartContext();
@@ -31,7 +32,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
      const max = 20;

      setVisibleSeries(
-        data?.series?.slice(0, max).map((serie) => serie.name) ?? [],
+        data?.series?.slice(0, max).map((serie) => serie.name) ?? []
      );
      // ref.current = true;
    }
@@ -42,7 +43,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
      <AutoSizer disableHeight>
        {({ width }) => (
          <LineChart width={width} height={Math.min(width * 0.5, 400)}>
-            <YAxis dataKey={"count"} width={30} fontSize={12}></YAxis>
+            <YAxis dataKey={'count'} width={30} fontSize={12}></YAxis>
            <Tooltip content={<ReportLineChartTooltip />} />
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
@@ -60,7 +61,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
              })
              .map((serie) => {
                const realIndex = data?.series.findIndex(
-                  (item) => item.name === serie.name,
+                  (item) => item.name === serie.name
                );
                const key = serie.name;
                const strokeColor = getChartColor(realIndex);
--- a/apps/web/src/components/report/chart/ReportLineChartTooltip.tsx
+++ b/apps/web/src/components/report/chart/ReportLineChartTooltip.tsx
@@ -1,7 +1,7 @@
-import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
-import { useMappings } from "@/hooks/useMappings";
-import { useSelector } from "@/redux";
-import { type IToolTipProps } from "@/types";
+import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
+import { useMappings } from '@/hooks/useMappings';
+import { useSelector } from '@/redux';
+import type { IToolTipProps } from '@/types';

 type ReportLineChartTooltipProps = IToolTipProps<{
  color: string;
--- a/apps/web/src/components/report/chart/ReportTable.tsx
+++ b/apps/web/src/components/report/chart/ReportTable.tsx
@@ -1,18 +1,17 @@
-import * as React from "react";
-import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
-import { useSelector } from "@/redux";
-import { Checkbox } from "@/components/ui/checkbox";
-import { getChartColor } from "@/utils/theme";
-import { cn } from "@/utils/cn";
-import { useMappings } from "@/hooks/useMappings";
-import { type IChartData } from "@/types";
+import * as React from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
+import { useMappings } from '@/hooks/useMappings';
+import { useSelector } from '@/redux';
+import type { IChartData } from '@/types';
+import { cn } from '@/utils/cn';
+import { getChartColor } from '@/utils/theme';

-
-type ReportTableProps = {
+interface ReportTableProps {
  data: IChartData;
  visibleSeries: string[];
  setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
-};
+}

 export function ReportTable({
  data,
@@ -21,7 +20,7 @@ export function ReportTable({
 }: ReportTableProps) {
  const interval = useSelector((state) => state.report.interval);
  const formatDate = useFormatDateInterval(interval);
-  const getLabel = useMappings()
+  const getLabel = useMappings();

  function handleChange(name: string, checked: boolean) {
    setVisibleSeries((prev) => {
@@ -33,11 +32,12 @@ export function ReportTable({
    });
  }

-  const row = "flex border-b border-border last:border-b-0 flex-1";
-  const cell = "p-2 last:pr-8 last:w-[8rem]";
-  const value = "min-w-[6rem] text-right";
-  const header = "text-sm font-medium";
-  const total = 'bg-gray-50 text-emerald-600 font-medium border-r border-border'
+  const row = 'flex border-b border-border last:border-b-0 flex-1';
+  const cell = 'p-2 last:pr-8 last:w-[8rem]';
+  const value = 'min-w-[6rem] text-right';
+  const header = 'text-sm font-medium';
+  const total =
+    'bg-gray-50 text-emerald-600 font-medium border-r border-border';
  return (
    <div className="flex w-fit max-w-full rounded-md border border-border">
      {/* Labels */}
@@ -49,7 +49,7 @@ export function ReportTable({
          return (
            <div
              key={serie.name}
-              className={cn("flex max-w-[200px] items-center gap-2", row, cell)}
+              className={cn('flex max-w-[200px] items-center gap-2', row, cell)}
            >
              <Checkbox
                onCheckedChange={(checked) =>
@@ -76,7 +76,7 @@ export function ReportTable({
      {/* ScrollView for all values */}
      <div className="w-full overflow-auto">
        {/* Header */}
-        <div className={cn("w-max", row)}>
+        <div className={cn('w-max', row)}>
          <div className={cn(header, value, cell, total)}>Total</div>
          {data.series[0]?.data.map((serie) => (
            <div
@@ -91,8 +91,10 @@ export function ReportTable({
        {/* Values */}
        {data.series.map((serie) => {
          return (
-            <div className={cn("w-max", row)} key={serie.name}>
-              <div className={cn(header, value, cell, total)}>{serie.totalCount}</div>
+            <div className={cn('w-max', row)} key={serie.name}>
+              <div className={cn(header, value, cell, total)}>
+                {serie.totalCount}
+              </div>
              {serie.data.map((item) => {
                return (
                  <div key={item.date} className={cn(value, cell)}>
--- a/apps/web/src/components/report/chart/index.tsx
+++ b/apps/web/src/components/report/chart/index.tsx
@@ -1,64 +1,67 @@
-import { api } from "@/utils/api";
-import { type IChartInput } from "@/types";
-import { ReportBarChart } from "./ReportBarChart";
-import { ReportLineChart } from "./ReportLineChart";
-import { withChartProivder } from "./ChartProvider";
+import type { IChartInput } from '@/types';
+import { api } from '@/utils/api';

-type ReportLineChartProps = IChartInput
+import { withChartProivder } from './ChartProvider';
+import { ReportBarChart } from './ReportBarChart';
+import { ReportLineChart } from './ReportLineChart';

-export const Chart = withChartProivder(({
-  interval,
-  events,
-  breakdowns,
-  chartType,
-  name,
-  range,
-}: ReportLineChartProps) =>  {
-  const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
-  const chart = api.chart.chart.useQuery(
-    {
-      interval,
-      chartType,
-      events,
-      breakdowns,
-      name,
-      range,
-      startDate: null,
-      endDate: null,
-    },
-    {
-      keepPreviousData: true,
-      enabled: events.length > 0 && !hasEmptyFilters,
-    },
-  );
+type ReportLineChartProps = IChartInput;

-  const anyData = Boolean(chart.data?.series?.[0]?.data)
+export const Chart = withChartProivder(
+  ({
+    interval,
+    events,
+    breakdowns,
+    chartType,
+    name,
+    range,
+  }: ReportLineChartProps) => {
+    const hasEmptyFilters = events.some((event) =>
+      event.filters.some((filter) => filter.value.length === 0)
+    );
+    const chart = api.chart.chart.useQuery(
+      {
+        interval,
+        chartType,
+        events,
+        breakdowns,
+        name,
+        range,
+        startDate: null,
+        endDate: null,
+      },
+      {
+        keepPreviousData: true,
+        enabled: events.length > 0 && !hasEmptyFilters,
+      }
+    );

-  if(chart.isFetching && !anyData) {
-    return (<p>Loading...</p>)
+    const anyData = Boolean(chart.data?.series?.[0]?.data);
+
+    if (chart.isFetching && !anyData) {
+      return <p>Loading...</p>;
+    }
+
+    if (chart.isError) {
+      return <p>Error</p>;
+    }
+
+    if (!chart.isSuccess) {
+      return <p>Loading...</p>;
+    }
+
+    if (!anyData) {
+      return <p>No data</p>;
+    }
+
+    if (chartType === 'bar') {
+      return <ReportBarChart data={chart.data} />;
+    }
+
+    if (chartType === 'linear') {
+      return <ReportLineChart interval={interval} data={chart.data} />;
+    }
+
+    return <p>Chart type &quot;{chartType}&quot; is not supported yet.</p>;
  }
-
-  if(chart.isError) {
-    return (<p>Error</p>)
-  }
-
-  if(!chart.isSuccess) {
-    return (<p>Loading...</p>)
-  }
-
-
-  if(!anyData) {
-    return (<p>No data</p>)
-  } 
-  
-  if(chartType === 'bar') {
-    return <ReportBarChart data={chart.data} />
-  }
-  
-  if(chartType === 'linear') {
-    return <ReportLineChart interval={interval} data={chart.data} />
-  }
-
-
-  return <p>Chart type &quot;{chartType}&quot; is not supported yet.</p>
-})
+);
--- a/apps/web/src/components/report/reportSlice.ts
+++ b/apps/web/src/components/report/reportSlice.ts
@@ -1,13 +1,14 @@
-import {
-  type IChartBreakdown,
-  type IChartEvent,
-  type IChartInput,
-  type IChartRange,
-  type IChartType,
-  type IInterval,
+import type {
+  IChartBreakdown,
+  IChartEvent,
+  IChartInput,
+  IChartRange,
+  IChartType,
+  IInterval,
 } from '@/types';
 import { alphabetIds } from '@/utils/constants';
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';

 type InitialState = IChartInput & {
  startDate: string | null;
--- a/apps/web/src/components/report/sidebar/ReportBreakdownMore.tsx
+++ b/apps/web/src/components/report/sidebar/ReportBreakdownMore.tsx
@@ -1,48 +1,41 @@
-import * as React from "react"
-import { Filter, MoreHorizontal, Tags, Trash } from "lucide-react"
- 
-import { Button } from "@/components/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
-  DropdownMenuLabel,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
- 
-export type ReportBreakdownMoreProps = {
-  onClick: (action: 'remove') => void
+} from '@/components/ui/dropdown-menu';
+import { MoreHorizontal, Trash } from 'lucide-react';
+
+export interface ReportBreakdownMoreProps {
+  onClick: (action: 'remove') => void;
 }

 export function ReportBreakdownMore({ onClick }: ReportBreakdownMoreProps) {
-  const [open, setOpen] = React.useState(false)
- 
+  const [open, setOpen] = React.useState(false);
+
  return (
-      <DropdownMenu open={open} onOpenChange={setOpen}>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm">
-            <MoreHorizontal />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="w-[200px]">
-          <DropdownMenuGroup>
-            <DropdownMenuItem className="text-red-600" onClick={() => onClick('remove')}>
-              <Trash className="mr-2 h-4 w-4" />
-              Delete
-              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-  )
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <MoreHorizontal />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[200px]">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="text-red-600"
+            onClick={() => onClick('remove')}
+          >
+            <Trash className="mr-2 h-4 w-4" />
+            Delete
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 }
--- a/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
+++ b/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
@@ -1,12 +1,13 @@
-import { api } from "@/utils/api";
-import { Combobox } from "@/components/ui/combobox";
-import { useDispatch, useSelector } from "@/redux";
-import { addBreakdown, changeBreakdown, removeBreakdown } from "../reportSlice";
-import { type ReportEventMoreProps } from "./ReportEventMore";
-import { type IChartBreakdown } from "@/types";
-import { ReportBreakdownMore } from "./ReportBreakdownMore";
-import { RenderDots } from "@/components/ui/RenderDots";
-import { ColorSquare } from "@/components/ColorSquare";
+import { ColorSquare } from '@/components/ColorSquare';
+import { Combobox } from '@/components/ui/combobox';
+import { RenderDots } from '@/components/ui/RenderDots';
+import { useDispatch, useSelector } from '@/redux';
+import type { IChartBreakdown } from '@/types';
+import { api } from '@/utils/api';
+
+import { addBreakdown, changeBreakdown, removeBreakdown } from '../reportSlice';
+import { ReportBreakdownMore } from './ReportBreakdownMore';
+import type { ReportEventMoreProps } from './ReportEventMore';

 export function ReportBreakdowns() {
  const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
@@ -18,9 +19,9 @@ export function ReportBreakdowns() {
  }));

  const handleMore = (breakdown: IChartBreakdown) => {
-    const callback: ReportEventMoreProps["onClick"] = (action) => {
+    const callback: ReportEventMoreProps['onClick'] = (action) => {
      switch (action) {
-        case "remove": {
+        case 'remove': {
          return dispatch(removeBreakdown(breakdown));
        }
      }
@@ -37,9 +38,7 @@ export function ReportBreakdowns() {
          return (
            <div key={item.name} className="rounded-lg border">
              <div className="flex items-center gap-2 p-2 px-4">
-                <ColorSquare>
-                  {index}
-                </ColorSquare>
+                <ColorSquare>{index}</ColorSquare>
                <Combobox
                  value={item.name}
                  onChange={(value) => {
@@ -47,7 +46,7 @@ export function ReportBreakdowns() {
                      changeBreakdown({
                        ...item,
                        name: value,
-                      }),
+                      })
                    );
                  }}
                  items={propertiesCombobox}
@@ -61,12 +60,12 @@ export function ReportBreakdowns() {

        {selectedBreakdowns.length === 0 && (
          <Combobox
-            value={""}
+            value={''}
            onChange={(value) => {
              dispatch(
                addBreakdown({
                  name: value,
-                }),
+                })
              );
            }}
            items={propertiesCombobox}
--- a/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
@@ -1,10 +1,8 @@
-import { api } from "@/utils/api";
-import {
-  type IChartEvent,
-  type IChartEventFilterValue,
-  type IChartEventFilter,
-} from "@/types";
-import { CreditCard, SlidersHorizontal, Trash } from "lucide-react";
+import type { Dispatch } from 'react';
+import { ColorSquare } from '@/components/ColorSquare';
+import { Dropdown } from '@/components/Dropdown';
+import { Button } from '@/components/ui/button';
+import { ComboboxMulti } from '@/components/ui/combobox-multi';
 import {
  CommandDialog,
  CommandEmpty,
@@ -13,23 +11,26 @@ import {
  CommandItem,
  CommandList,
  CommandSeparator,
-} from "@/components/ui/command";
-import { type Dispatch } from "react";
-import { RenderDots } from "@/components/ui/RenderDots";
-import { useDispatch } from "@/redux";
-import { changeEvent } from "../reportSlice";
-import { Button } from "@/components/ui/button";
-import { ComboboxMulti } from "@/components/ui/combobox-multi";
-import { Dropdown } from "@/components/Dropdown";
-import { operators } from "@/utils/constants";
-import { useMappings } from "@/hooks/useMappings";
-import { ColorSquare } from "@/components/ColorSquare";
+} from '@/components/ui/command';
+import { RenderDots } from '@/components/ui/RenderDots';
+import { useMappings } from '@/hooks/useMappings';
+import { useDispatch } from '@/redux';
+import type {
+  IChartEvent,
+  IChartEventFilter,
+  IChartEventFilterValue,
+} from '@/types';
+import { api } from '@/utils/api';
+import { operators } from '@/utils/constants';
+import { CreditCard, SlidersHorizontal, Trash } from 'lucide-react';

-type ReportEventFiltersProps = {
+import { changeEvent } from '../reportSlice';
+
+interface ReportEventFiltersProps {
  event: IChartEvent;
  isCreating: boolean;
  setIsCreating: Dispatch<boolean>;
-};
+}

 export function ReportEventFilters({
  event,
@@ -43,7 +44,7 @@ export function ReportEventFilters({
    },
    {
      enabled: !!event.name,
-    },
+    }
  );

  return (
@@ -71,11 +72,11 @@ export function ReportEventFilters({
                          {
                            id: (event.filters.length + 1).toString(),
                            name: item,
-                            operator: "is",
+                            operator: 'is',
                            value: [],
                          },
                        ],
-                      }),
+                      })
                    );
                  }}
                >
@@ -92,13 +93,13 @@ export function ReportEventFilters({
  );
 }

-type FilterProps = {
+interface FilterProps {
  event: IChartEvent;
-  filter: IChartEvent["filters"][number];
-};
+  filter: IChartEvent['filters'][number];
+}

 function Filter({ filter, event }: FilterProps) {
-  const getLabel = useMappings()
+  const getLabel = useMappings();
  const dispatch = useDispatch();
  const potentialValues = api.chart.values.useQuery({
    event: event.name,
@@ -116,12 +117,12 @@ function Filter({ filter, event }: FilterProps) {
      changeEvent({
        ...event,
        filters: event.filters.filter((item) => item.id !== filter.id),
-      }),
+      })
    );
  };

  const changeFilterValue = (
-    value: IChartEventFilterValue | IChartEventFilterValue[],
+    value: IChartEventFilterValue | IChartEventFilterValue[]
  ) => {
    dispatch(
      changeEvent({
@@ -136,11 +137,11 @@ function Filter({ filter, event }: FilterProps) {

          return item;
        }),
-      }),
+      })
    );
  };

-  const changeFilterOperator = (operator: IChartEventFilter["operator"]) => {
+  const changeFilterOperator = (operator: IChartEventFilter['operator']) => {
    dispatch(
      changeEvent({
        ...event,
@@ -154,7 +155,7 @@ function Filter({ filter, event }: FilterProps) {

          return item;
        }),
-      }),
+      })
    );
  };

@@ -168,7 +169,7 @@ function Filter({ filter, event }: FilterProps) {
          <SlidersHorizontal size={10} />
        </ColorSquare>
        <div className="flex flex-1 text-sm">
-        <RenderDots truncate>{filter.name}</RenderDots>
+          <RenderDots truncate>{filter.name}</RenderDots>
        </div>
        <Button variant="ghost" size="sm" onClick={removeFilter}>
          <Trash size={16} />
@@ -178,12 +179,12 @@ function Filter({ filter, event }: FilterProps) {
        <Dropdown
          onChange={changeFilterOperator}
          items={Object.entries(operators).map(([key, value]) => ({
-            value: key as IChartEventFilter["operator"],
+            value: key as IChartEventFilter['operator'],
            label: value,
          }))}
          label="Segment"
        >
-          <Button variant={"ghost"} className="whitespace-nowrap">
+          <Button variant={'ghost'} className="whitespace-nowrap">
            {operators[filter.operator]}
          </Button>
        </Dropdown>
@@ -191,16 +192,16 @@ function Filter({ filter, event }: FilterProps) {
          placeholder="Select values"
          items={valuesCombobox}
          selected={filter.value.map((item) => ({
-            value: item?.toString() ?? "__filter_value_null__",
-            label: getLabel(item?.toString() ?? "__filter_value_null__"),
+            value: item?.toString() ?? '__filter_value_null__',
+            label: getLabel(item?.toString() ?? '__filter_value_null__'),
          }))}
          setSelected={(setFn) => {
-            if(typeof setFn === "function") {
+            if (typeof setFn === 'function') {
              const newValues = setFn(
                filter.value.map((item) => ({
-                  value: item?.toString() ?? "__filter_value_null__",
-                  label: getLabel(item?.toString() ?? "__filter_value_null__"),
-                })),
+                  value: item?.toString() ?? '__filter_value_null__',
+                  label: getLabel(item?.toString() ?? '__filter_value_null__'),
+                }))
              );
              changeFilterValue(newValues.map((item) => item.value));
            } else {
--- a/apps/web/src/components/report/sidebar/ReportEventMore.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEventMore.tsx
@@ -1,7 +1,5 @@
-import * as React from "react"
-import { Filter, MoreHorizontal, Tags, Trash } from "lucide-react"
- 
-import { Button } from "@/components/ui/button"
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
 import {
  Command,
  CommandEmpty,
@@ -9,7 +7,7 @@ import {
  CommandInput,
  CommandItem,
  CommandList,
-} from "@/components/ui/command"
+} from '@/components/ui/command';
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -22,47 +20,50 @@ import {
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
- 
+} from '@/components/ui/dropdown-menu';
+import { Filter, MoreHorizontal, Tags, Trash } from 'lucide-react';
+
 const labels = [
-  "feature",
-  "bug",
-  "enhancement",
-  "documentation",
-  "design",
-  "question",
-  "maintenance",
-]
- 
-export type ReportEventMoreProps = {
-  onClick: (action: 'createFilter' | 'remove') => void
+  'feature',
+  'bug',
+  'enhancement',
+  'documentation',
+  'design',
+  'question',
+  'maintenance',
+];
+
+export interface ReportEventMoreProps {
+  onClick: (action: 'createFilter' | 'remove') => void;
 }

 export function ReportEventMore({ onClick }: ReportEventMoreProps) {
-  const [open, setOpen] = React.useState(false)
- 
-  return (
+  const [open, setOpen] = React.useState(false);

-      <DropdownMenu open={open} onOpenChange={setOpen}>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm">
-            <MoreHorizontal />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[200px]">
-          <DropdownMenuGroup>
-            <DropdownMenuItem onClick={() => onClick('createFilter')}>
-              <Filter className="mr-2 h-4 w-4" />
-              Add filter
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="text-red-600" onClick={() => onClick('remove')}>
-              <Trash className="mr-2 h-4 w-4" />
-              Delete
-              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-  )
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <MoreHorizontal />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[200px]">
+        <DropdownMenuGroup>
+          <DropdownMenuItem onClick={() => onClick('createFilter')}>
+            <Filter className="mr-2 h-4 w-4" />
+            Add filter
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            className="text-red-600"
+            onClick={() => onClick('remove')}
+          >
+            <Trash className="mr-2 h-4 w-4" />
+            Delete
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 }
--- a/apps/web/src/components/report/sidebar/ReportEvents.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEvents.tsx
@@ -1,14 +1,16 @@
-import { api } from "@/utils/api";
-import { Combobox } from "@/components/ui/combobox";
-import { useDispatch, useSelector } from "@/redux";
-import { addEvent, changeEvent, removeEvent } from "../reportSlice";
-import { ReportEventFilters } from "./ReportEventFilters";
-import { useState } from "react";
-import { ReportEventMore, type ReportEventMoreProps } from "./ReportEventMore";
-import { type IChartEvent } from "@/types";
-import { Filter, GanttChart, Users } from "lucide-react";
-import { Dropdown } from "@/components/Dropdown";
-import { ColorSquare } from "@/components/ColorSquare";
+import { useState } from 'react';
+import { ColorSquare } from '@/components/ColorSquare';
+import { Dropdown } from '@/components/Dropdown';
+import { Combobox } from '@/components/ui/combobox';
+import { useDispatch, useSelector } from '@/redux';
+import type { IChartEvent } from '@/types';
+import { api } from '@/utils/api';
+import { Filter, GanttChart, Users } from 'lucide-react';
+
+import { addEvent, changeEvent, removeEvent } from '../reportSlice';
+import { ReportEventFilters } from './ReportEventFilters';
+import { ReportEventMore } from './ReportEventMore';
+import type { ReportEventMoreProps } from './ReportEventMore';

 export function ReportEvents() {
  const [isCreating, setIsCreating] = useState(false);
@@ -21,12 +23,12 @@ export function ReportEvents() {
  }));

  const handleMore = (event: IChartEvent) => {
-    const callback: ReportEventMoreProps["onClick"] = (action) => {
+    const callback: ReportEventMoreProps['onClick'] = (action) => {
      switch (action) {
-        case "createFilter": {
+        case 'createFilter': {
          return setIsCreating(true);
        }
-        case "remove": {
+        case 'remove': {
          return dispatch(removeEvent(event));
        }
      }
@@ -43,9 +45,7 @@ export function ReportEvents() {
          return (
            <div key={event.name} className="rounded-lg border">
              <div className="flex items-center gap-2 p-2">
-                <ColorSquare>
-                  {event.id}
-                </ColorSquare>
+                <ColorSquare>{event.id}</ColorSquare>
                <Combobox
                  value={event.name}
                  onChange={(value) => {
@@ -54,7 +54,7 @@ export function ReportEvents() {
                        ...event,
                        name: value,
                        filters: [],
-                      }),
+                      })
                    );
                  }}
                  items={eventsCombobox}
@@ -71,32 +71,36 @@ export function ReportEvents() {
                      changeEvent({
                        ...event,
                        segment,
-                      }),
+                      })
                    );
                  }}
                  items={[
                    {
-                      value: "event",
-                      label: "All events",
+                      value: 'event',
+                      label: 'All events',
                    },
                    {
-                      value: "user",
-                      label: "Unique users",
+                      value: 'user',
+                      label: 'Unique users',
                    },
                  ]}
                  label="Segment"
                >
                  <button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs">
-                    {event.segment === "user" ? (
-                      <><Users size={12} /> Unique users</>
-                      ) : (
-                      <><GanttChart size={12} /> All events</>
+                    {event.segment === 'user' ? (
+                      <>
+                        <Users size={12} /> Unique users
+                      </>
+                    ) : (
+                      <>
+                        <GanttChart size={12} /> All events
+                      </>
                    )}
                  </button>
                </Dropdown>
                <button
                  onClick={() => {
-                    handleMore(event)("createFilter");
+                    handleMore(event)('createFilter');
                  }}
                  className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs"
                >
@@ -111,14 +115,14 @@ export function ReportEvents() {
        })}

        <Combobox
-          value={""}
+          value={''}
          onChange={(value) => {
            dispatch(
              addEvent({
                name: value,
-                segment: "event",
+                segment: 'event',
                filters: [],
-              }),
+              })
            );
          }}
          items={eventsCombobox}
--- a/apps/web/src/components/report/sidebar/ReportSaveButton.tsx
+++ b/apps/web/src/components/report/sidebar/ReportSaveButton.tsx
@@ -1,39 +1,47 @@
-import { Button } from "@/components/ui/button";
-import { useReportId } from "../hooks/useReportId";
-import { api, handleError } from "@/utils/api";
-import { useSelector } from "@/redux";
-import { pushModal } from "@/modals";
-import { toast } from "@/components/ui/use-toast";
+import { Button } from '@/components/ui/button';
+import { toast } from '@/components/ui/use-toast';
+import { pushModal } from '@/modals';
+import { useSelector } from '@/redux';
+import { api, handleError } from '@/utils/api';
+
+import { useReportId } from '../hooks/useReportId';

 export function ReportSaveButton() {
  const { reportId } = useReportId();
  const update = api.report.update.useMutation({
    onSuccess() {
      toast({
-        title: "Success",
-        description: "Report updated.",
+        title: 'Success',
+        description: 'Report updated.',
      });
    },
-    onError: handleError
+    onError: handleError,
  });
  const report = useSelector((state) => state.report);

  if (reportId) {
-    return <Button loading={update.isLoading} onClick={() => {
-      update.mutate({
-        reportId,
-        report,
-        dashboardId: "9227feb4-ad59-40f3-b887-3501685733dd",
-        projectId: "f7eabf0c-e0b0-4ac0-940f-1589715b0c3d",
-      });
-    }}>Update</Button>;
+    return (
+      <Button
+        loading={update.isLoading}
+        onClick={() => {
+          update.mutate({
+            reportId,
+            report,
+            dashboardId: '9227feb4-ad59-40f3-b887-3501685733dd',
+            projectId: 'f7eabf0c-e0b0-4ac0-940f-1589715b0c3d',
+          });
+        }}
+      >
+        Update
+      </Button>
+    );
  } else {
    return (
      <Button
        onClick={() => {
          pushModal('SaveReport', {
            report,
-          })
+          });
        }}
      >
        Create
--- a/apps/web/src/components/report/sidebar/ReportSidebar.tsx
+++ b/apps/web/src/components/report/sidebar/ReportSidebar.tsx
@@ -1,6 +1,6 @@
-import { ReportEvents } from "./ReportEvents";
-import { ReportBreakdowns } from "./ReportBreakdowns";
-import { ReportSaveButton } from "./ReportSaveButton";
+import { ReportBreakdowns } from './ReportBreakdowns';
+import { ReportEvents } from './ReportEvents';
+import { ReportSaveButton } from './ReportSaveButton';

 export function ReportSidebar() {
  return (