oh lord. prettier eslint and all that

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)}>