@dhiraj0720/report1chart 2.5.8 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.5.8",
+  "version": "2.6.0",
   "main": "src/index.jsx",
   "scripts": {
     "test": "echo 'No tests'"

package/src/components/SvgBarLineChartCompact.jsx

@@ -6,125 +6,161 @@ import { formatNumber } from '../utils/formatNumber';
 const SvgBarLineChartCompact = ({ data }) => {
   if (!data?.series || !data.labels?.length) return null;
 
-  const height = 240;
-  const paddingLeft = 60;
-  const paddingRight = 20;
+  const height = 260;
+  const paddingLeft = 70;
+  const paddingRight = 30;
   const paddingTop = 20;
-  const paddingBottom = 50;
+  const paddingBottom = 60;
 
   const chartHeight = height - paddingTop - paddingBottom;
-  const graphWidth = Math.max(400, data.labels.length * 90);
+  const graphWidth = Math.max(500, data.labels.length * 100); // Wider spacing like image
 
-  const MAX = 1279958; // Slightly above max in image
-  const barWidth = 16;
-  const groupGap = 20;
-  const groupWidth = barWidth * 2 + 4 + groupGap;
+  // Max value slightly above the highest in image
+  const MAX = 1279958;
+  const barWidth = 20;
+  const barGap = 6; // Gap between 2024 and 2025 bar
+  const groupGap = 30; // Gap between months (matches image)
 
   const y = (v) => paddingTop + ((MAX - v) / MAX) * chartHeight;
 
-  const getX = (i) => paddingLeft + i * groupWidth + groupGap / 2;
+  // Center X for each month group
+  const getGroupCenterX = (i) => paddingLeft + i * (barWidth * 2 + barGap + groupGap) + (barWidth + barGap / 2);
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{data.title}</Text>
+      <Text style={styles.title}>{data.title || 'AY BAZINDA KAR KARŞILAŞTIRMALARI'}</Text>
 
       <View style={{ flexDirection: 'row' }}>
+        {/* Y Axis Labels */}
         <Svg width={paddingLeft} height={height}>
-          {[1000000, 500000, 0].map((v) => (
+          {[1279958, 1000000, 500000, 0].map((v, i) => (
             <SvgText
-              key={v}
-              x={paddingLeft - 8}
+              key={i}
+              x={paddingLeft - 10}
               y={y(v) + 5}
               fontSize="11"
               textAnchor="end"
               fill="#444"
             >
-              {(v / 1000000).toFixed(1)}M
+              {v >= 1000000 ? `$${ (v / 1000000).toFixed(1) }M` : formatNumber(v)}
             </SvgText>
           ))}
         </Svg>
 
+        {/* Main Chart - Scrollable */}
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <Svg width={graphWidth} height={height}>
-            {/* Grid */}
-            {[1000000, 500000, 0].map((v) => (
-              <Line key={v} x1={0} x2={graphWidth} y1={y(v)} y2={y(v)} stroke="#eee" strokeDasharray="5,5" />
+            {/* Horizontal Grid Lines */}
+            {[1279958, 1000000, 500000, 0].map((v) => (
+              <Line
+                key={v}
+                x1={0}
+                x2={graphWidth}
+                y1={y(v)}
+                y2={y(v)}
+                stroke="#eee"
+                strokeDasharray="5,5"
+              />
             ))}
 
+            {/* Bars & Budget Line */}
             {data.labels.map((label, i) => {
-              const xCenter = getX(i);
-              const bar2024 = data.series[0].data[i] || 0;
-              const bar2025 = data.series[1].data[i] || 0;
-              const budget = data.series[2].data[i] || 0;
+              const centerX = getGroupCenterX(i);
 
-              const height2024 = chartHeight - (y(bar2024) - paddingTop);
-              const height2025 = chartHeight - (y(bar2025) - paddingTop);
+              const val2024 = data.series[0]?.data[i] || 0;
+              const val2025 = data.series[1]?.data[i] || 0;
+              const budget = data.series[2]?.data[i] || 0;
+
+              const barHeight2024 = chartHeight - (y(val2024) - paddingTop);
+              const barHeight2025 = chartHeight - (y(val2025) - paddingTop);
 
               return (
                 <React.Fragment key={i}>
-                  {/* 2024 Bar */}
+                  {/* 2024 Bar - Orange */}
                   <Rect
-                    x={xCenter - barWidth - 2}
-                    y={y(bar2024)}
+                    x={centerX - barWidth - barGap / 2}
+                    y={y(val2024)}
                     width={barWidth}
-                    height={height2024}
+                    height={barHeight2024}
                     fill="#E07A3F"
                   />
-                  {bar2024 > MAX * 0.1 && (
+                  {val2024 > MAX * 0.08 && (
                     <SvgText
-                      x={xCenter - barWidth - 2 + barWidth / 2}
-                      y={y(bar2024) + height2024 / 2 + 5}
-                      fontSize="9"
+                      x={centerX - barWidth - barGap / 2 + barWidth / 2}
+                      y={y(val2024) + barHeight2024 / 2 + 4}
+                      fontSize="10"
                       textAnchor="middle"
                       fill="white"
                       fontWeight="700"
                     >
-                      {formatNumber(bar2024)}
+                      ${formatNumber(val2024)}
                     </SvgText>
                   )}
 
-                  {/* 2025 Bar */}
+                  {/* 2025 Bar - Blue */}
                   <Rect
-                    x={xCenter + 2}
-                    y={y(bar2025)}
+                    x={centerX + barGap / 2}
+                    y={y(val2025)}
                     width={barWidth}
-                    height={height2025}
+                    height={barHeight2025}
                     fill="#4E79A7"
                   />
-                  {bar2025 > MAX * 0.1 && (
+                  {val2025 > MAX * 0.08 && (
                     <SvgText
-                      x={xCenter + 2 + barWidth / 2}
-                      y={y(bar2025) + height2025 / 2 + 5}
-                      fontSize="9"
+                      x={centerX + barGap / 2 + barWidth / 2}
+                      y={y(val2025) + barHeight2025 / 2 + 4}
+                      fontSize="10"
                       textAnchor="middle"
                       fill="white"
                       fontWeight="700"
                     >
-                      {formatNumber(bar2025)}
+                      ${formatNumber(val2025)}
                     </SvgText>
                   )}
 
-                  {/* Budget Line + Dot */}
-                  <Circle cx={xCenter} cy={y(budget)} r={5} fill="#8AB6E8" stroke="#fff" strokeWidth={2} />
+                  {/* Budget Dotted Line */}
+                  {i > 0 && (
+                    <Line
+                      x1={getGroupCenterX(i - 1)}
+                      y1={y(data.series[2].data[i - 1])}
+                      x2={centerX}
+                      y2={y(budget)}
+                      stroke="#8AB6E8"
+                      strokeWidth={2}
+                      strokeDasharray="6,4"
+                    />
+                  )}
+
+                  {/* Budget Dot */}
+                  <Circle
+                    cx={centerX}
+                    cy={y(budget)}
+                    r={5}
+                    fill="#8AB6E8"
+                    stroke="#fff"
+                    strokeWidth={2}
+                  />
+
+                  {/* Budget Value Above Dot */}
                   <SvgText
-                    x={xCenter}
+                    x={centerX}
                     y={y(budget) - 10}
                     fontSize="10"
                     textAnchor="middle"
                     fill="#333"
                     fontWeight="700"
                   >
-                    {formatNumber(budget)}
+                    ${formatNumber(budget)}
                   </SvgText>
 
-                  {/* X Label */}
+                  {/* X Axis Label - Rotated */}
                   <SvgText
-                    x={xCenter}
-                    y={height - 20}
+                    x={centerX}
+                    y={height - 25}
                     fontSize="11"
                     textAnchor="middle"
                     fill="#555"
-                    transform={`rotate(-45 ${xCenter} ${height - 20})`}
+                    transform={`rotate(-45 ${centerX} ${height - 25})`}
                   >
                     {label}
                   </SvgText>
@@ -135,10 +171,11 @@ const SvgBarLineChartCompact = ({ data }) => {
         </ScrollView>
       </View>
 
+      {/* Legend */}
       <View style={styles.legend}>
-        <Text style={{ color: '#E07A3F', marginRight: 16 }}>● {data.series[0].name}</Text>
-        <Text style={{ color: '#4E79A7', marginRight: 16 }}>● {data.series[1].name}</Text>
-        <Text style={{ color: '#8AB6E8' }}>● {data.series[2].name}</Text>
+        <Text style={{ color: '#E07A3F', marginRight: 20 }}>● 2024 Kar USD</Text>
+        <Text style={{ color: '#4E79A7', marginRight: 20 }}>● 2025 Kar USD</Text>
+        <Text style={{ color: '#8AB6E8' }}>● Bütçe Kar USD</Text>
       </View>
     </View>
   );
@@ -147,15 +184,25 @@ const SvgBarLineChartCompact = ({ data }) => {
 export default SvgBarLineChartCompact;
 
 const styles = StyleSheet.create({
-  container: { marginVertical: 6 },
+  container: {
+    marginVertical: 12,
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
   title: {
     fontWeight: '700',
-    marginBottom: 4,
-    fontSize: 13,
+    fontSize: 14,
+    textAlign: 'center',
+    marginBottom: 8,
+    color: '#111',
   },
   legend: {
     flexDirection: 'row',
-    marginTop: 4,
+    justifyContent: 'center',
+    marginTop: 10,
     flexWrap: 'wrap',
   },
-});
+});

package/src/components/SvgBarLineChartCompact3A.jsx

@@ -0,0 +1,144 @@
+// src/components/SvgBarLineChartCompact3A.jsx
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import Svg, { Rect, Line, Circle, Text as SvgText } from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
+
+const SvgBarLineChartCompact3A = ({ data }) => {
+  if (!data?.series || !data.labels?.length) return null;
+
+  const height = 280;
+  const paddingLeft = 80;
+  const paddingRight = 30;
+  const paddingTop = 30;
+  const paddingBottom = 70;
+
+  const chartHeight = height - paddingTop - paddingBottom;
+  const graphWidth = Math.max(500, data.labels.length * 110);
+
+  const MAX = 600000000; // 0.6bn
+  const barWidth = 22;
+  const barGap = 8;
+  const groupGap = 35;
+
+  const y = (v) => paddingTop + ((MAX - v) / MAX) * chartHeight;
+  const getCenterX = (i) => paddingLeft + i * (barWidth * 2 + barGap + groupGap) + (barWidth + barGap / 2);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>ULAŞTIRMA HİZMETLERİ CİRO GRAFİĞİ</Text>
+
+      <View style={{ flexDirection: 'row' }}>
+        <Svg width={paddingLeft} height={height}>
+          {[500000000, 0].map((v) => (
+            <SvgText
+              key={v}
+              x={paddingLeft - 10}
+              y={y(v) + 5}
+              fontSize="11"
+              textAnchor="end"
+              fill="#444"
+            >
+              {v === 0 ? '0.0bn' : '0.5bn'}
+            </SvgText>
+          ))}
+        </Svg>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <Svg width={graphWidth} height={height}>
+            {[500000000, 0].map((v) => (
+              <Line key={v} x1={0} x2={graphWidth} y1={y(v)} y2={y(v)} stroke="#eee" strokeDasharray="5,5" />
+            ))}
+
+            {data.labels.map((label, i) => {
+              const centerX = getCenterX(i);
+              const val2024 = data.series[0]?.data[i] || 0;
+              const val2025 = data.series[1]?.data[i] || 0;
+              const budget = data.series[2]?.data[i] || 0;
+
+              const h2024 = chartHeight - (y(val2024) - paddingTop);
+              const h2025 = chartHeight - (y(val2025) - paddingTop);
+
+              return (
+                <React.Fragment key={i}>
+                  {/* 2024 Bar */}
+                  <Rect x={centerX - barWidth - barGap / 2} y={y(val2024)} width={barWidth} height={h2024} fill="#E07A3F" />
+                  {val2024 > MAX * 0.1 && (
+                    <SvgText
+                      x={centerX - barWidth - barGap / 2 + barWidth / 2}
+                      y={y(val2024) + h2024 / 2 + 5}
+                      fontSize="10"
+                      textAnchor="middle"
+                      fill="white"
+                      fontWeight="700"
+                    >
+                      {formatNumber(val2024)}M
+                    </SvgText>
+                  )}
+
+                  {/* 2025 Bar */}
+                  <Rect x={centerX + barGap / 2} y={y(val2025)} width={barWidth} height={h2025} fill="#4E79A7" />
+                  {val2025 > MAX * 0.1 && (
+                    <SvgText
+                      x={centerX + barGap / 2 + barWidth / 2}
+                      y={y(val2025) + h2025 / 2 + 5}
+                      fontSize="10"
+                      textAnchor="middle"
+                      fill="white"
+                      fontWeight="700"
+                    >
+                      {formatNumber(val2025)}M
+                    </SvgText>
+                  )}
+
+                  {/* Budget Dotted Line & Dot */}
+                  {i > 0 && (
+                    <Line
+                      x1={getCenterX(i - 1)}
+                      y1={y(data.series[2].data[i - 1])}
+                      x2={centerX}
+                      y2={y(budget)}
+                      stroke="#8AB6E8"
+                      strokeWidth={2}
+                      strokeDasharray="6,4"
+                    />
+                  )}
+                  <Circle cx={centerX} cy={y(budget)} r={6} fill="#8AB6E8" stroke="#fff" strokeWidth={2} />
+                  <SvgText x={centerX} y={y(budget) - 12} fontSize="11" textAnchor="middle" fill="#333" fontWeight="700">
+                    {formatNumber(budget)}M
+                  </SvgText>
+
+                  {/* X Label */}
+                  <SvgText
+                    x={centerX}
+                    y={height - 30}
+                    fontSize="11"
+                    textAnchor="middle"
+                    fill="#555"
+                    transform={`rotate(-45 ${centerX} ${height - 30})`}
+                  >
+                    {label}
+                  </SvgText>
+                </React.Fragment>
+              );
+            })}
+          </Svg>
+        </ScrollView>
+      </View>
+
+      <View style={styles.legend}>
+        <Text style={{ color: '#E07A3F', marginRight: 20 }}>● 2024 Gelir Tutar (TL)</Text>
+        <Text style={{ color: '#4E79A7', marginRight: 20 }}>● 2025 Gelir Tutar (TL)</Text>
+        <Text style={{ color: '#8AB6E8' }}>● 2025 Bütçe Gelir (TL)</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 10 },
+  title: { fontWeight: '700', fontSize: 14, textAlign: 'center', marginBottom: 10 },
+  legend: { flexDirection: 'row', justifyContent: 'center', marginTop: 12, flexWrap: 'wrap' },
+});
+
+export default SvgBarLineChartCompact3A;

package/src/components/SvgLineChartCompact3A.jsx

@@ -0,0 +1,115 @@
+// src/components/SvgLineChartCompact3A.jsx
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import Svg, { Line, Circle, Text as SvgText } from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
+
+const SvgLineChartCompact3A = ({ data }) => {
+  if (!data?.series || !data.labels?.length) return null;
+
+  const height = 260;
+  const paddingLeft = 70;
+  const paddingRight = 30;
+  const paddingTop = 30;
+  const paddingBottom = 60;
+
+  const chartHeight = height - paddingTop - paddingBottom;
+  const graphWidth = Math.max(500, data.labels.length * 100);
+
+  const MIN = 35000;
+  const MAX = 55000;
+
+  const y = (v) => paddingTop + ((MAX - v) / (MAX - MIN)) * chartHeight;
+
+  const totalPoints = data.labels.length;
+  const xStep = totalPoints === 1 ? graphWidth / 2 : (graphWidth - paddingLeft - paddingRight) / (totalPoints - 1);
+
+  const colors = ['#E07A3F', '#4E79A7']; // Orange 2024, Blue 2025
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>ULAŞTIRMA HİZMETLERİ YÜK ADET GRAFİĞİ</Text>
+
+      <View style={{ flexDirection: 'row' }}>
+        <Svg width={paddingLeft} height={height}>
+          {[50000, 40000].map((v) => (
+            <SvgText
+              key={v}
+              x={paddingLeft - 10}
+              y={y(v) + 5}
+              fontSize="11"
+              textAnchor="end"
+              fill="#444"
+            >
+              {v / 1000}K
+            </SvgText>
+          ))}
+        </Svg>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <Svg width={graphWidth} height={height}>
+            {[50000, 40000].map((v) => (
+              <Line key={v} x1={0} x2={graphWidth} y1={y(v)} y2={y(v)} stroke="#eee" strokeDasharray="5,5" />
+            ))}
+
+            {data.series.map((series, si) =>
+              series.data.map((val, i) => {
+                const x = paddingLeft + i * (totalPoints === 1 ? 0 : xStep) + (totalPoints === 1 ? graphWidth / 2 - paddingLeft : 0);
+
+                return (
+                  <React.Fragment key={`${si}-${i}`}>
+                    {i > 0 && (
+                      <Line
+                        x1={paddingLeft + (i - 1) * xStep + (totalPoints === 1 ? graphWidth / 2 - paddingLeft : 0)}
+                        y1={y(series.data[i - 1])}
+                        x2={x}
+                        y2={y(val)}
+                        stroke={colors[si]}
+                        strokeWidth={3}
+                        strokeDasharray={si === 0 ? "6,4" : "0"}
+                      />
+                    )}
+                    <Circle cx={x} cy={y(val)} r={6} fill={colors[si]} stroke="#fff" strokeWidth={2} />
+                    <SvgText x={x} y={y(val) - 12} fontSize="11" textAnchor="middle" fill="#333" fontWeight="700">
+                      {formatNumber(val)}
+                    </SvgText>
+                  </React.Fragment>
+                );
+              })
+            )}
+
+            {data.labels.map((label, i) => {
+              const x = paddingLeft + i * xStep + (totalPoints === 1 ? graphWidth / 2 - paddingLeft : 0);
+              return (
+                <SvgText
+                  key={i}
+                  x={x}
+                  y={height - 25}
+                  fontSize="11"
+                  textAnchor="middle"
+                  fill="#555"
+                  transform={`rotate(-45 ${x} ${height - 25})`}
+                >
+                  {label}
+                </SvgText>
+              );
+            })}
+          </Svg>
+        </ScrollView>
+      </View>
+
+      <View style={styles.legend}>
+        <Text style={{ color: '#E07A3F', marginRight: 20 }}>● 2024 Yük Adet</Text>
+        <Text style={{ color: '#4E79A7' }}>● 2025 Yük Adet</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 10 },
+  title: { fontWeight: '700', fontSize: 14, textAlign: 'center', marginBottom: 10 },
+  legend: { flexDirection: 'row', justifyContent: 'center', marginTop: 12 },
+});
+
+export default SvgLineChartCompact3A;

package/src/index.jsx

@@ -7,6 +7,7 @@ import Report2Screen from './screens/Report2Screen';
 import Report3Screen from './screens/Report3Screen';
 import Report1AScreen from './screens/Report1AScreen';
 import Report2AScreen from './screens/Report2AScreen';
+import Report3AScreen from './screens/Report3AScreen';
 
 const AnalyticsReports = ({ config, onExit }) => {
   const [active, setActive] = useState(null);
@@ -110,6 +111,14 @@ if (active === '2A') {
     );
   }
 
+  if (active === '3A') {
+  return (
+    <SafeScreen>
+      <Report3AScreen api={config.report3} token={config.token} onBack={() => setActive(null)} />
+    </SafeScreen>
+  );
+}
+
   return null;
 };
 

package/src/screens/Report2AScreen.jsx

@@ -1,5 +1,13 @@
+// src/screens/Report2AScreen.jsx
 import React, { useEffect, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import {
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
 import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { getDivisions, getTable, getLine, getBar } from '../api/report2Fetcher';
 import MonthFilterModal from '../components/MonthFilterModal';
@@ -20,33 +28,92 @@ const Report2AScreen = ({ api, token, onBack }) => {
   const [table, setTable] = useState(null);
   const [line, setLine] = useState(null);
   const [bar, setBar] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
+  // Fetch divisions
   useEffect(() => {
-    getDivisions(api.divisions, token).then(d => {
-      setDivisions(d);
-      if (d.length > 0) setDivision(d[0]?.code);
-    });
-  }, [api.divisions, token]);
-
+    if (!api?.divisions || !token) return;
+
+    getDivisions(api.divisions, token)
+      .then((d) => {
+        setDivisions(d);
+        if (d.length > 0) {
+          setDivision(d[0].code);
+        }
+      })
+      .catch((err) => {
+        console.error('Failed to load divisions:', err);
+        setError('Failed to load divisions');
+        setLoading(false);
+      });
+  }, [api?.divisions, token]);
+
+  // Fetch data when division changes
   useEffect(() => {
-    if (!division) return;
+    if (!division || !api || !token) return;
+
+    setLoading(true);
+    setError(null);
 
     Promise.all([
-      getTable(api.table, division, token),
-      getLine(api.line, division, token),
-      getBar(api.bar, division, token),
-    ]).then(([t, l, b]) => {
-      setTable(t);
-      setLine(l);
-      setBar(b);
-      setMonths(l.labels);
-      setSelectedMonths(l.labels); // default: all selected
-    });
+      getTable(api.table, division, token).catch(() => null),
+      getLine(api.line, division, token).catch(() => null),
+      getBar(api.bar, division, token).catch(() => null),
+    ])
+      .then(([t, l, b]) => {
+        if (!t || !l || !b) {
+          setError('Failed to load report data');
+          return;
+        }
+
+        setTable(t);
+        setLine(l);
+        setBar(b);
+        setMonths(l.labels || []);
+        setSelectedMonths(l.labels || []);
+      })
+      .catch((err) => {
+        console.error('Data fetch error:', err);
+        setError('Network error or data unavailable');
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [division, api, token]);
 
-  if (!table || !line || !bar || !division) return null;
+  // Loading State
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" color="#1e88e5" />
+        <Text style={styles.loadingText}>Loading Report 2A...</Text>
+      </View>
+    );
+  }
+
+  // Error State
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.errorText}>{error}</Text>
+        <TouchableOpacity onPress={onBack}>
+          <Text style={styles.backLink}>← Go Back</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  // Safety check
+  if (!table || !line || !bar || !division) {
+    return (
+      <View style={styles.center}>
+        <Text>No data available</Text>
+      </View>
+    );
+  }
 
-  const filteredRows = table.rows.filter(r =>
+  const filteredRows = table.rows.filter((r) =>
     selectedMonths.includes(r.monthLabel)
   );
 
@@ -54,36 +121,42 @@ const Report2AScreen = ({ api, token, onBack }) => {
   const filteredBar = filterChartByMonths(bar, selectedMonths);
 
   return (
-    <ScrollView style={{ padding: 12 }}>
-      <Text onPress={onBack} style={{ fontSize: 18, marginBottom: 12 }}>
+    <ScrollView style={styles.container}>
+      {/* Header */}
+      <Text onPress={onBack} style={styles.backButton}>
         ‹ Back
       </Text>
 
-      {/* FILTER BUTTONS */}
-      <View style={{ flexDirection: 'row', marginVertical: 10, gap: 16 }}>
+      {/* Filters */}
+      <View style={styles.filterRow}>
         <TouchableOpacity onPress={() => setMonthsModal(true)}>
-          <Text style={{ fontSize: 16, color: '#1e88e5' }}>Months ⛃</Text>
+          <Text style={styles.filterText}>Months ⛃</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity onPress={() => setDivisionModal(true)}>
-          <Text style={{ fontSize: 16, color: '#1e88e5' }}>Divisions ⛃</Text>
+        <TouchableOpacity
+          onPress={() => setDivisionModal(true)}
+          style={{ marginLeft: 20 }}
+        >
+          <Text style={styles.filterText}>
+            Division: {divisions.find((d) => d.code === division)?.displayName || division}
+          </Text>
         </TouchableOpacity>
       </View>
 
-      {/* TABLE */}
+      {/* Table */}
       <FrozenTableReport2A rows={filteredRows} />
 
-      {/* LINE CHART */}
-      <View style={{ borderWidth: 1, borderColor: '#ddd', borderRadius: 8, marginVertical: 12 }}>
+      {/* Line Chart */}
+      <View style={styles.chartContainer}>
         <SvgLineChartCompact data={filteredLine} />
       </View>
 
-      {/* BAR + LINE CHART */}
-      <View style={{ borderWidth: 1, borderColor: '#ddd', borderRadius: 8, marginVertical: 12 }}>
+      {/* Bar + Budget Chart */}
+      <View style={styles.chartContainer}>
         <SvgBarLineChartCompact data={filteredBar} />
       </View>
 
-      {/* MODALS */}
+      {/* Modals */}
       <MonthFilterModal
         visible={monthsModal}
         months={months}
@@ -103,4 +176,54 @@ const Report2AScreen = ({ api, token, onBack }) => {
   );
 };
 
+const styles = StyleSheet.create({
+  container: { padding: 12, backgroundColor: '#f8f9fa' },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  loadingText: {
+    marginTop: 12,
+    fontSize: 16,
+    color: '#555',
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#d32f2f',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  backLink: {
+    fontSize: 18,
+    color: '#1e88e5',
+    fontWeight: '600',
+  },
+  backButton: {
+    fontSize: 20,
+    color: '#1e88e5',
+    marginBottom: 16,
+    fontWeight: '600',
+  },
+  filterRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 12,
+  },
+  filterText: {
+    fontSize: 16,
+    color: '#1e88e5',
+    fontWeight: '600',
+  },
+  chartContainer: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    overflow: 'hidden',
+    marginVertical: 12,
+    backgroundColor: '#fff',
+  },
+});
+
 export default Report2AScreen;

package/src/screens/Report3AScreen.jsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import {
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import {
+  fetchReport3Table,
+  fetchReport3Line,
+  fetchReport3Bar,
+} from '../api/report3Fetcher';
+import MonthFilterModal from '../components/MonthFilterModal';
+import FrozenTableReport3A from '../components/FrozenTableReport3A';
+import SvgLineChartCompact3A from '../components/SvgLineChartCompact3A';
+import SvgBarLineChartCompact3A from '../components/SvgBarLineChartCompact3A';
+
+const Report3AScreen = ({ api, token, onBack }) => {
+  const [monthsModal, setMonthsModal] = useState(false);
+  const [months, setMonths] = useState([]);
+  const [selectedMonths, setSelectedMonths] = useState([]);
+  const [table, setTable] = useState(null);
+  const [line, setLine] = useState(null);
+  const [bar, setBar] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!api || !token) return;
+
+    setLoading(true);
+    setError(null);
+
+    Promise.all([
+      fetchReport3Table(api.table, token).catch(() => null),
+      fetchReport3Line(api.line, token).catch(() => null),
+      fetchReport3Bar(api.bar, token).catch(() => null),
+    ])
+      .then(([t, l, b]) => {
+        if (!t || !l || !b) throw new Error('Failed to load data');
+
+        setTable(t);
+        setLine(l);
+        setBar(b);
+
+        const monthLabels = t.rows
+          .filter(r => r.month !== 99)
+          .map(r => r.monthLabel);
+
+        setMonths(monthLabels);
+        setSelectedMonths(monthLabels); // default: all selected
+      })
+      .catch((err) => {
+        console.error(err);
+        setError('Failed to load Report 3A data');
+      })
+      .finally(() => setLoading(false));
+  }, [api, token]);
+
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" color="#1e88e5" />
+        <Text style={styles.loadingText}>Loading Report 3A...</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.errorText}>{error}</Text>
+        <TouchableOpacity onPress={onBack}>
+          <Text style={styles.backLink}>← Go Back</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  const filteredRows = table.rows.filter(r =>
+    selectedMonths.includes(r.monthLabel)
+  );
+
+  const filterChart = (chart) => {
+    if (selectedMonths.length === months.length) return chart;
+
+    const indices = chart.labels
+      .map((label, i) => selectedMonths.includes(label) ? i : -1)
+      .filter(i => i !== -1);
+
+    return {
+      ...chart,
+      labels: indices.map(i => chart.labels[i]),
+      series: chart.series.map(s => ({
+        ...s,
+        data: indices.map(i => s.data[i]),
+      })),
+    };
+  };
+
+  const filteredLine = filterChart(line);
+  const filteredBar = filterChart(bar);
+
+  return (
+    <ScrollView style={styles.container}>
+      <Text onPress={onBack} style={styles.backButton}>‹ Back</Text>
+
+      <Text style={styles.screenTitle}>Ulaştırma Hizmetleri Analizi (A)</Text>
+
+      {/* Month Filter */}
+      <TouchableOpacity
+        onPress={() => setMonthsModal(true)}
+        style={styles.filterButton}
+      >
+        <Text style={styles.filterText}>
+          Months ({selectedMonths.length}/{months.length}) ⛃
+        </Text>
+      </TouchableOpacity>
+
+      {/* Table */}
+      <FrozenTableReport3A rows={filteredRows} />
+
+      {/* Line Chart - Yük Adet */}
+      <View style={styles.chartWrapper}>
+        <SvgLineChartCompact3A data={filteredLine} />
+      </View>
+
+      {/* Bar + Budget Chart - Ciro */}
+      <View style={styles.chartWrapper}>
+        <SvgBarLineChartCompact3A data={filteredBar} />
+      </View>
+
+      {/* Modal */}
+      <MonthFilterModal
+        visible={monthsModal}
+        months={months}
+        selected={selectedMonths}
+        onApply={setSelectedMonths}
+        onClose={() => setMonthsModal(false)}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 12, backgroundColor: '#f8f9fa' },
+  center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
+  loadingText: { marginTop: 12, fontSize: 16, color: '#555' },
+  errorText: { fontSize: 16, color: '#d32f2f', textAlign: 'center', marginBottom: 20 },
+  backLink: { fontSize: 18, color: '#1e88e5', fontWeight: '600' },
+  backButton: { fontSize: 20, color: '#1e88e5', marginBottom: 16, fontWeight: '600' },
+  screenTitle: { fontSize: 18, fontWeight: '700', textAlign: 'center', marginVertical: 12 },
+  filterButton: { alignSelf: 'flex-start', marginVertical: 12 },
+  filterText: { fontSize: 16, color: '#1e88e5', fontWeight: '600' },
+  chartWrapper: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    overflow: 'hidden',
+    marginVertical: 12,
+    backgroundColor: '#fff',
+  },
+});
+
+export default Report3AScreen;