Broken shit

app/dashboard/overview/page.tsx

@@ -27,46 +27,55 @@ function DashboardContent() {
   const [company, setCompany] = useState<Company | null>(null);
   const [, setLoading] = useState<boolean>(false);
   const [refreshing, setRefreshing] = useState<boolean>(false);
-  const [dateRange, setDateRange] = useState<{ minDate: string; maxDate: string } | null>(null);
+  const [dateRange, setDateRange] = useState<{
+    minDate: string;
+    maxDate: string;
+  } | null>(null);
   const [selectedStartDate, setSelectedStartDate] = useState<string>("");
   const [selectedEndDate, setSelectedEndDate] = useState<string>("");
 
   const isAuditor = session?.user?.role === "auditor";
 
   // Function to fetch metrics with optional date range
-  const fetchMetrics = useCallback(async (startDate?: string, endDate?: string) => {
-    setLoading(true);
-    try {
-      let url = "/api/dashboard/metrics";
-      if (startDate && endDate) {
-        url += `?startDate=${startDate}&endDate=${endDate}`;
+  const fetchMetrics = useCallback(
+    async (startDate?: string, endDate?: string) => {
+      setLoading(true);
+      try {
+        let url = "/api/dashboard/metrics";
+        if (startDate && endDate) {
+          url += `?startDate=${startDate}&endDate=${endDate}`;
+        }
+
+        const res = await fetch(url);
+        const data = await res.json();
+
+        setMetrics(data.metrics);
+        setCompany(data.company);
+
+        // Set date range from API response (only on initial load)
+        if (data.dateRange && !dateRange) {
+          setDateRange(data.dateRange);
+          setSelectedStartDate(data.dateRange.minDate);
+          setSelectedEndDate(data.dateRange.maxDate);
+        }
+      } catch (error) {
+        console.error("Error fetching metrics:", error);
+      } finally {
+        setLoading(false);
       }
-
-      const res = await fetch(url);
-      const data = await res.json();
-
-      setMetrics(data.metrics);
-      setCompany(data.company);
-
-      // Set date range from API response (only on initial load)
-      if (data.dateRange && !dateRange) {
-        setDateRange(data.dateRange);
-        setSelectedStartDate(data.dateRange.minDate);
-        setSelectedEndDate(data.dateRange.maxDate);
-      }
-    } catch (error) {
-      console.error("Error fetching metrics:", error);
-    } finally {
-      setLoading(false);
-    }
-  }, [dateRange]);
+    },
+    [dateRange]
+  );
 
   // Handle date range changes
-  const handleDateRangeChange = useCallback((startDate: string, endDate: string) => {
-    setSelectedStartDate(startDate);
-    setSelectedEndDate(endDate);
-    fetchMetrics(startDate, endDate);
-  }, [fetchMetrics]);
+  const handleDateRangeChange = useCallback(
+    (startDate: string, endDate: string) => {
+      setSelectedStartDate(startDate);
+      setSelectedEndDate(endDate);
+      fetchMetrics(startDate, endDate);
+    },
+    [fetchMetrics]
+  );
 
   useEffect(() => {
     // Redirect if not authenticated
@@ -368,7 +377,7 @@ function DashboardContent() {
         />
         <MetricCard
           title="Avg. Daily Costs"
-          value={`€${metrics.avgDailyCosts?.toFixed(4) || '0.0000'}`}
+          value={`€${metrics.avgDailyCosts?.toFixed(4) || "0.0000"}`}
           icon={
             <svg
               className="h-5 w-5"
@@ -388,7 +397,7 @@ function DashboardContent() {
         />
         <MetricCard
           title="Peak Usage Time"
-          value={metrics.peakUsageTime || 'N/A'}
+          value={metrics.peakUsageTime || "N/A"}
           icon={
             <svg
               className="h-5 w-5"
@@ -408,7 +417,7 @@ function DashboardContent() {
         />
         <MetricCard
           title="Resolved Chats"
-          value={`${metrics.resolvedChatsPercentage?.toFixed(1) || '0.0'}%`}
+          value={`${metrics.resolvedChatsPercentage?.toFixed(1) || "0.0"}%`}
           icon={
             <svg
               className="h-5 w-5"