From 01f773dfb0ae112ab8012ef10324637b96ec182a Mon Sep 17 00:00:00 2001
From: Randa Firman Putra <randafrmn@gmail.com>
Date: Tue, 15 Jul 2025 21:15:45 +0700
Subject: [PATCH] Ayo Commit

---
 components/ClientLayout.tsx                   |  4 +--
 components/charts/StatistikMahasiswaChart.tsx |  6 ++--
 .../charts/StatistikPerAngkatanChart.tsx      |  6 ++--
 components/charts/StatusMahasiswaChart.tsx    | 18 ++++++------
 .../charts/StatusMahasiswaFilterChart.tsx     | 18 ++++++------
 .../charts/StatusMahasiswaFilterPieChart.tsx  |  8 +++---
 components/charts/TingkatPrestasiChart.tsx    | 26 ++++++++---------
 components/charts/TingkatPrestasiPieChart.tsx |  8 +++---
 components/charts/TotalBeasiswaChart.tsx      | 26 ++++++++---------
 components/charts/TotalBeasiswaPieChart.tsx   |  8 +++---
 components/charts/TotalPrestasiChart.tsx      | 28 +++++++++----------
 components/charts/TotalPrestasiPieChart.tsx   |  8 +++---
 12 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/components/ClientLayout.tsx b/components/ClientLayout.tsx
index 90a3ce5..2d1c302 100644
--- a/components/ClientLayout.tsx
+++ b/components/ClientLayout.tsx
@@ -12,8 +12,8 @@ export default function ClientLayout({ children }: ClientLayoutProps) {
   return (
     <ThemeProvider
       attribute="class"
-      defaultTheme="system"
-      enableSystem
+      themes={["light", "dark"]}
+      enableSystem={false}
       disableTransitionOnChange
     >
       <div className="min-h-screen">
diff --git a/components/charts/StatistikMahasiswaChart.tsx b/components/charts/StatistikMahasiswaChart.tsx
index 33702d2..1f79df9 100644
--- a/components/charts/StatistikMahasiswaChart.tsx
+++ b/components/charts/StatistikMahasiswaChart.tsx
@@ -16,7 +16,7 @@ interface MahasiswaStatistik {
 }
 
 export default function StatistikMahasiswaChart() {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [statistikData, setStatistikData] = useState<MahasiswaStatistik[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -175,7 +175,7 @@ export default function StatistikMahasiswaChart() {
 
   // Update theme when it changes
   useEffect(() => {
-    const currentTheme = theme === 'system' ? systemTheme : theme;
+    const currentTheme = theme;
     const textColor = currentTheme === 'dark' ? '#fff' : '#000';
     const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light';
 
@@ -240,7 +240,7 @@ export default function StatistikMahasiswaChart() {
         theme: tooltipTheme
       }
     }));
-  }, [theme, systemTheme]);
+  }, [theme]);
 
   // Update categories when data changes
   useEffect(() => {
diff --git a/components/charts/StatistikPerAngkatanChart.tsx b/components/charts/StatistikPerAngkatanChart.tsx
index 8474132..95c7ab5 100644
--- a/components/charts/StatistikPerAngkatanChart.tsx
+++ b/components/charts/StatistikPerAngkatanChart.tsx
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [statistikData, setStatistikData] = useState<GenderStatistik[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -121,7 +121,7 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
   
   // Update theme when it changes
   useEffect(() => {
-    const currentTheme = theme === 'system' ? systemTheme : theme;
+    const currentTheme = theme;
     const textColor = currentTheme === 'dark' ? '#fff' : '#000';
     const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light';
     
@@ -150,7 +150,7 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
         theme: tooltipTheme
       }
     }));
-  }, [theme, systemTheme]);
+  }, [theme]);
   
   // Update dataLabels formatter when data changes
   useEffect(() => {
diff --git a/components/charts/StatusMahasiswaChart.tsx b/components/charts/StatusMahasiswaChart.tsx
index 75e9ae2..e891b66 100644
--- a/components/charts/StatusMahasiswaChart.tsx
+++ b/components/charts/StatusMahasiswaChart.tsx
@@ -16,7 +16,7 @@ interface StatusData {
 }
 
 export default function StatusMahasiswaChart() {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [data, setData] = useState<StatusData[]>([]);
@@ -29,7 +29,7 @@ export default function StatusMahasiswaChart() {
       toolbar: {
         show: true,
       },
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -44,7 +44,7 @@ export default function StatusMahasiswaChart() {
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -59,13 +59,13 @@ export default function StatusMahasiswaChart() {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -75,13 +75,13 @@ export default function StatusMahasiswaChart() {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
       min:0,
@@ -100,12 +100,12 @@ export default function StatusMahasiswaChart() {
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     colors: ['#008FFB', '#00E396', '#FEB019', '#EF4444'],
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
diff --git a/components/charts/StatusMahasiswaFilterChart.tsx b/components/charts/StatusMahasiswaFilterChart.tsx
index 506a951..34c465b 100644
--- a/components/charts/StatusMahasiswaFilterChart.tsx
+++ b/components/charts/StatusMahasiswaFilterChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatus }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [data, setData] = useState<StatusMahasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -76,7 +76,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
       toolbar: {
         show: true,
       },
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -91,7 +91,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -106,13 +106,13 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -122,13 +122,13 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
       min:0,
@@ -147,12 +147,12 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     colors: ['#3B82F6', '#EC4899'],
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
diff --git a/components/charts/StatusMahasiswaFilterPieChart.tsx b/components/charts/StatusMahasiswaFilterPieChart.tsx
index 98f2f04..1c6b7c8 100644
--- a/components/charts/StatusMahasiswaFilterPieChart.tsx
+++ b/components/charts/StatusMahasiswaFilterPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedStatus }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [data, setData] = useState<StatusMahasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -67,7 +67,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
           reset: true
         }
       },
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     labels: ['Laki-laki', 'Perempuan'],
     colors: ['#3B82F6', '#EC4899'],
@@ -82,7 +82,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
+        colors: theme === 'dark' ? '#fff' : '#000',
       }
     },
     dataLabels: {
@@ -101,7 +101,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
       }
     },
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
diff --git a/components/charts/TingkatPrestasiChart.tsx b/components/charts/TingkatPrestasiChart.tsx
index 131dbf7..a503dfa 100644
--- a/components/charts/TingkatPrestasiChart.tsx
+++ b/components/charts/TingkatPrestasiChart.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [data, setData] = useState<TingkatPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -94,7 +94,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -110,7 +110,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -125,22 +125,22 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       },
     },
     yaxis: {
@@ -149,18 +149,18 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -169,7 +169,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
     },
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -186,11 +186,11 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
diff --git a/components/charts/TingkatPrestasiPieChart.tsx b/components/charts/TingkatPrestasiPieChart.tsx
index 39028cb..d9d8b48 100644
--- a/components/charts/TingkatPrestasiPieChart.tsx
+++ b/components/charts/TingkatPrestasiPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [data, setData] = useState<TingkatPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -72,7 +72,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -99,7 +99,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -118,7 +118,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
       }
     },
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
diff --git a/components/charts/TotalBeasiswaChart.tsx b/components/charts/TotalBeasiswaChart.tsx
index b790ffd..aa76318 100644
--- a/components/charts/TotalBeasiswaChart.tsx
+++ b/components/charts/TotalBeasiswaChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [data, setData] = useState<TotalBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -107,7 +107,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
           reset: true
         }
       },
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -123,7 +123,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -138,22 +138,22 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -162,18 +162,18 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -182,7 +182,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
     },
     colors: ['#3B82F6', '#EC4899'],
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -199,11 +199,11 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
diff --git a/components/charts/TotalBeasiswaPieChart.tsx b/components/charts/TotalBeasiswaPieChart.tsx
index 3f3a660..41eb4d9 100644
--- a/components/charts/TotalBeasiswaPieChart.tsx
+++ b/components/charts/TotalBeasiswaPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [data, setData] = useState<TotalBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -85,7 +85,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
         return legendName;
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -104,7 +104,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
       }
     },
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
diff --git a/components/charts/TotalPrestasiChart.tsx b/components/charts/TotalPrestasiChart.tsx
index d865228..09445c0 100644
--- a/components/charts/TotalPrestasiChart.tsx
+++ b/components/charts/TotalPrestasiChart.tsx
@@ -17,10 +17,10 @@ interface TotalPrestasiData {
 
 interface Props {
   selectedJenisPrestasi: string;
-}
+} 
 
 export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [data, setData] = useState<TotalPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -106,7 +106,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -122,7 +122,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -137,22 +137,22 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -161,18 +161,18 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -181,7 +181,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
     },
     colors: ['#3B82F6', '#EC4899'],
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -198,11 +198,11 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
diff --git a/components/charts/TotalPrestasiPieChart.tsx b/components/charts/TotalPrestasiPieChart.tsx
index 95350b8..d61aed3 100644
--- a/components/charts/TotalPrestasiPieChart.tsx
+++ b/components/charts/TotalPrestasiPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
-  const { theme, systemTheme } = useTheme();
+  const { theme } = useTheme();
   const [data, setData] = useState<TotalPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -82,7 +82,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -101,7 +101,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
       }
     },
     tooltip: {
-      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"