From 5058e2cc1c1f8618e547de9d55e95a1ae9e9d6dd Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 27 Mar 2026 14:59:16 +0800
Subject: [PATCH] feat: add enhanced debugging for chart surat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added detailed console logging with response structure dump
- Added Array.isArray check for data validation
- Added test data fallback (commented out) for manual testing
- Added emoji indicators for easier debugging

Testing instructions:
1. Open browser DevTools console
2. Look for 📊 📈 ✅ ⚠️ ❌ emoji logs
3. If no data appears, check if API returns 401 (unauthorized)
4. To test chart rendering, uncomment the DEBUG useEffect block

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 src/components/dashboard/chart-surat.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

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