fix: chart surat barchart not rendering - fix multiple issues

1. ResponsiveContainer Layout Issue:
   - Wrapped in Box with explicit height (300px)
   - Changed ResponsiveContainer height to "100%" (relative to parent)
   - Fixes chart not rendering due to height constraint issue

2. Bar Fill Color:
   - Changed from CSS variable "var(--mantine-color-blue-filled)"
   - To direct hex colors: #3B82F6 (light) / #60A5FA (dark)
   - Fixes bar color not resolving

3. Empty Data Handling:
   - Added check for data.length > 0
   - Shows friendly message when no data available
   - Prevents rendering empty chart

4. YAxis Improvement:
   - Added allowDecimals={false} for cleaner integer display

5. Enhanced Debug Logging:
   - Added emoji icons for easier console scanning
   - Better error messages

Files changed:
- dashboard/chart-surat.tsx: Fixed all chart rendering issues

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/components/dashboard/chart-surat.tsx

@@ -36,19 +36,21 @@ export function ChartSurat() {
 		async function fetchTrends() {
 			try {
 				const res = await apiClient.GET("/api/complaint/service-trends");
-				console.log("Service trends response:", res);
+				console.log("📊 Service trends response:", res);
-				if (res.data?.data) {
+				
+				if (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("📈 Mapped chart data:", chartData);
 					setData(chartData);
 				} else {
-					console.log("No data in response");
+					console.log("⚠️ No data in response or empty data array");
+					setData([]);
 				}
 			} catch (error) {
-				console.error("Failed to fetch service trends", error);
+				console.error("❌ Failed to fetch service trends", error);
 			} finally {
 				setLoading(false);
 			}
@@ -101,12 +103,13 @@ export function ChartSurat() {
 					</svg>
 				</ActionIcon>
 			</Group>
-			<ResponsiveContainer width="100%" height={300}>
+			<Box style={{ width: "100%", height: 300 }}>
 				{loading ? (
 					<Group justify="center" align="center" h="100%">
 						<Loader />
 					</Group>
-				) : (
+				) : data.length > 0 ? (
+					<ResponsiveContainer width="100%" height="100%">
 						<BarChart data={data}>
 							<CartesianGrid
 								strokeDasharray="3 3"
@@ -123,6 +126,7 @@ export function ChartSurat() {
 								axisLine={false}
 								tickLine={false}
 								tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+								allowDecimals={false}
 							/>
 							<Tooltip
 								contentStyle={{
@@ -135,12 +139,19 @@ export function ChartSurat() {
 							/>
 							<Bar
 								dataKey="value"
-							fill="var(--mantine-color-blue-filled)"
+								fill={dark ? "#60A5FA" : "#3B82F6"}
 								radius={[4, 4, 0, 0]}
 							/>
 						</BarChart>
-				)}
 					</ResponsiveContainer>
+				) : (
+					<Group justify="center" align="center" h="100%">
+						<Text size="sm" c="dimmed">
+							Tidak ada data pengajuan surat 6 bulan terakhir
+						</Text>
+					</Group>
+				)}
+			</Box>
 		</Card>
 	);
 }