diff --git a/src/components/dashboard/chart-surat.tsx b/src/components/dashboard/chart-surat.tsx
index e8c759c..3402a32 100644
--- a/src/components/dashboard/chart-surat.tsx
+++ b/src/components/dashboard/chart-surat.tsx
@@ -32,25 +32,41 @@ export function ChartSurat() {
 	const [data, setData] = useState<ChartData[]>([]);
 	const [loading, setLoading] = useState(true);
 
+	// DEBUG: Uncomment to test chart rendering with sample data
+	// useEffect(() => {
+	// 	setData([
+	// 		{ month: "Oct", value: 1 },
+	// 		{ month: "Nov", value: 1 },
+	// 		{ month: "Dec", value: 1 },
+	// 		{ month: "Feb", value: 1 },
+	// 		{ month: "Mar", value: 1 },
+	// 	]);
+	// 	setLoading(false);
+	// }, []);
+
 	useEffect(() => {
 		async function fetchTrends() {
 			try {
 				const res = await apiClient.GET("/api/complaint/service-trends");
 				console.log("📊 Service trends response:", res);
-				
-				if (res.data?.data && res.data.data.length > 0) {
+
+				// Check if response has data
+				if (res.data?.data && Array.isArray(res.data.data) && res.data.data.length > 0) {
 					const chartData = (res.data.data as { month: string; count: number }[]).map((d) => ({
 						month: d.month,
 						value: Number(d.count),
 					}));
 					console.log("📈 Mapped chart data:", chartData);
+					console.log("✅ Chart data count:", chartData.length);
 					setData(chartData);
 				} else {
-					console.log("⚠️ No data in response or empty data array");
+					console.warn("⚠️ No data in response or empty array");
+					console.log("Response structure:", JSON.stringify(res, null, 2));
 					setData([]);
 				}
 			} catch (error) {
 				console.error("❌ Failed to fetch service trends", error);
+				console.log("Error details:", error);
 			} finally {
 				setLoading(false);
 			}