setup husky prettier eslint

src/components/dashboard/detection-donut-chart.tsx

@@ -1,47 +1,47 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Loader2 } from "lucide-react"
-import { Label, Pie, PieChart } from "recharts"
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+import { Label, Pie, PieChart } from 'recharts';
 
 import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
   type ChartConfig,
-} from "@/components/ui/chart"
+} from '@/components/ui/chart';
 
 interface DetectionDonutChartProps {
-  defectedSignboard: number
-  pothole: number
-  roadCrack: number
-  damagedRoadMarking: number
-  goodSignboard: number
-  isLoading?: boolean
+  defectedSignboard: number;
+  pothole: number;
+  roadCrack: number;
+  damagedRoadMarking: number;
+  goodSignboard: number;
+  isLoading?: boolean;
 }
 
 const chartConfig = {
   pothole: {
-    label: "Potholes",
-    color: "var(--chart-1)",
+    label: 'Potholes',
+    color: 'var(--chart-1)',
   },
   defectedSignboard: {
-    label: "Defected Signboards",
-    color: "var(--chart-2)",
+    label: 'Defected Signboards',
+    color: 'var(--chart-2)',
   },
   roadCrack: {
-    label: "Road Cracks",
-    color: "var(--chart-3)",
+    label: 'Road Cracks',
+    color: 'var(--chart-3)',
   },
   damagedRoadMarking: {
-    label: "Damaged Markings",
-    color: "var(--chart-4)",
+    label: 'Damaged Markings',
+    color: 'var(--chart-4)',
   },
   goodSignboard: {
-    label: "Good Signboards",
-    color: "var(--chart-5)",
+    label: 'Good Signboards',
+    color: 'var(--chart-5)',
   },
-} satisfies ChartConfig
+} satisfies ChartConfig;
 
 export function DetectionDonutChart({
   defectedSignboard,
@@ -54,43 +54,37 @@ export function DetectionDonutChart({
   const chartData = React.useMemo(
     () =>
       [
-        { type: "pothole", count: pothole, fill: "var(--color-pothole)" },
+        { type: 'pothole', count: pothole, fill: 'var(--color-pothole)' },
         {
-          type: "defectedSignboard",
+          type: 'defectedSignboard',
           count: defectedSignboard,
-          fill: "var(--color-defectedSignboard)",
+          fill: 'var(--color-defectedSignboard)',
         },
-        { type: "roadCrack", count: roadCrack, fill: "var(--color-roadCrack)" },
+        { type: 'roadCrack', count: roadCrack, fill: 'var(--color-roadCrack)' },
         {
-          type: "damagedRoadMarking",
+          type: 'damagedRoadMarking',
           count: damagedRoadMarking,
-          fill: "var(--color-damagedRoadMarking)",
+          fill: 'var(--color-damagedRoadMarking)',
         },
         {
-          type: "goodSignboard",
+          type: 'goodSignboard',
           count: goodSignboard,
-          fill: "var(--color-goodSignboard)",
+          fill: 'var(--color-goodSignboard)',
         },
       ].filter((item) => item.count > 0),
-    [
-      pothole,
-      defectedSignboard,
-      roadCrack,
-      damagedRoadMarking,
-      goodSignboard,
-    ]
-  )
+    [pothole, defectedSignboard, roadCrack, damagedRoadMarking, goodSignboard],
+  );
 
   const totalDetections = React.useMemo(() => {
-    return chartData.reduce((acc, curr) => acc + curr.count, 0)
-  }, [chartData])
+    return chartData.reduce((acc, curr) => acc + curr.count, 0);
+  }, [chartData]);
 
   if (isLoading) {
     return (
       <div className="h-[250px] flex items-center justify-center">
         <Loader2 className="h-8 w-8 text-primary/50 animate-spin" />
       </div>
-    )
+    );
   }
 
   if (totalDetections === 0) {
@@ -99,36 +93,19 @@ export function DetectionDonutChart({
         <p className="text-sm">No detections found</p>
         <p className="text-xs mt-1">Process videos to see data</p>
       </div>
-    )
+    );
   }
 
   return (
-    <ChartContainer
-      config={chartConfig}
-      className="mx-auto aspect-square max-h-[250px]"
-    >
+    <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
       <PieChart>
-        <ChartTooltip
-          cursor={false}
-          content={<ChartTooltipContent hideLabel />}
-        />
-        <Pie
-          data={chartData}
-          dataKey="count"
-          nameKey="type"
-          innerRadius={60}
-          strokeWidth={5}
-        >
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <Pie data={chartData} dataKey="count" nameKey="type" innerRadius={60} strokeWidth={5}>
           <Label
             content={({ viewBox }) => {
-              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+              if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
                 return (
-                  <text
-                    x={viewBox.cx}
-                    y={viewBox.cy}
-                    textAnchor="middle"
-                    dominantBaseline="middle"
-                  >
+                  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
                     <tspan
                       x={viewBox.cx}
                       y={viewBox.cy}
@@ -144,13 +121,12 @@ export function DetectionDonutChart({
                       Total
                     </tspan>
                   </text>
-                )
+                );
               }
             }}
           />
         </Pie>
       </PieChart>
     </ChartContainer>
-  )
+  );
 }
-