@dhiraj0720/report1chart 2.2.7 → 2.2.9

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "main": "src/index.jsx",
   "scripts": {
     "test": "echo 'No tests'"
   },
   "dependencies": {
-    "axios": "^1.13.2"
+    "axios": "^1.13.2",
+    "react-native-svg": "^15.15.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -21,6 +22,5 @@
   ],
   "author": "Dhiraj",
   "license": "MIT",
-  "description": "A simple report chart and table package for React Native",
-  "devDependencies": {}
+  "description": "A simple report chart and table package for React Native"
 }

package/src/components/BarLineChart.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const BarLineChart = ({ data }) => {
+  if (!data?.series?.length) return null;
+
+  const max = Math.max(...data.series.flatMap(s => s.data));
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{data.title}</Text>
+
+      <View style={styles.chart}>
+        {data.labels.map((label, i) => (
+          <View key={label} style={styles.group}>
+            {data.series.map((s, idx) => {
+              const height = (s.data[i] / max) * 120;
+              return (
+                <View
+                  key={idx}
+                  style={[
+                    styles.bar,
+                    {
+                      height,
+                      backgroundColor:
+                        idx === 0
+                          ? '#FB8C00'
+                          : idx === 1
+                          ? '#1E88E5'
+                          : '#90CAF9',
+                    },
+                  ]}
+                />
+              );
+            })}
+            <Text style={styles.label}>{label}</Text>
+          </View>
+        ))}
+      </View>
+
+      <View style={styles.legend}>
+        {data.series.map(s => (
+          <Text key={s.name} style={styles.legendText}>
+            ■ {s.name}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default BarLineChart;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    padding: 12,
+    borderRadius: 12,
+    marginVertical: 12,
+  },
+  title: {
+    fontWeight: '700',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  chart: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-around',
+    height: 160,
+  },
+  group: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  bar: {
+    width: 10,
+    marginHorizontal: 2,
+    borderRadius: 2,
+  },
+  label: {
+    fontSize: 10,
+    marginTop: 4,
+    position: 'absolute',
+    bottom: -16,
+  },
+  legend: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16,
+  },
+  legendText: {
+    fontSize: 12,
+    marginHorizontal: 8,
+  },
+});

package/src/components/DivisionSelector.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native';
 
 const DivisionSelector = ({ divisions, selected, onSelect }) => (
   <ScrollView horizontal showsHorizontalScrollIndicator={false}>

package/src/components/FrozenTableReport2.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+
+const Cell = ({ children, bold }) => (
+  <Text style={[styles.cell, bold && styles.bold]}>{children}</Text>
+);
+
+const FrozenTableReport2 = ({ rows }) => (
+  <View style={styles.container}>
+    <View style={styles.frozen}>
+      <Cell bold>AY</Cell>
+      {rows.map((r, i) => (
+        <Cell key={i} bold={r.monthLabel === 'Total'}>{r.monthLabel}</Cell>
+      ))}
+    </View>
+
+    <ScrollView horizontal>
+      <View>
+        <View style={styles.headerRow}>
+          {[
+            '2024 TEU','2025 TEU','TEU %',
+            '2024 Kar','2025 Kar','Kar %',
+            '2025 Bütçe','Bütçe %'
+          ].map(h => <Cell key={h} bold>{h}</Cell>)}
+        </View>
+
+        {rows.map((r, i) => (
+          <View key={i} style={styles.row}>
+            <Cell>{r.teu2024}</Cell>
+            <Cell>{r.teu2025}</Cell>
+            <Cell>{r.teuChangePercent}%</Cell>
+            <Cell>{r.profitUsd2024}</Cell>
+            <Cell>{r.profitUsd2025}</Cell>
+            <Cell>{r.profitChangePercent}%</Cell>
+            <Cell>{r.budgetProfitUsd2025}</Cell>
+            <Cell>{r.budgetChangePercent}%</Cell>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  </View>
+);
+
+export default FrozenTableReport2;
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'row' },
+  frozen: { width: 90, backgroundColor: '#f4f4f4' },
+  headerRow: { flexDirection: 'row', backgroundColor: '#f4f4f4' },
+  row: { flexDirection: 'row' },
+  cell: {
+    width: 90,
+    padding: 8,
+    textAlign: 'center',
+    borderBottomWidth: 1,
+    borderColor: '#ddd',
+  },
+  bold: { fontWeight: '700' },
+});

package/src/components/FrozenTableReport3.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+
+const Cell = ({ children, bold }) => (
+  <Text style={[styles.cell, bold && styles.bold]}>{children}</Text>
+);
+
+const FrozenTableReport3 = ({ rows }) => (
+  <View style={styles.container}>
+    <View style={styles.frozen}>
+      <Cell bold>AY</Cell>
+      {rows.map((r, i) => (
+        <Cell key={i} bold={r.monthLabel === 'Total'}>{r.monthLabel}</Cell>
+      ))}
+    </View>
+
+    <ScrollView horizontal>
+      <View>
+        <View style={styles.headerRow}>
+          {[
+            '2024 Yük','2025 Yük','Yük %',
+            '2024 Gelir','2025 Gelir','Gelir %',
+            '2025 Bütçe','Bütçe %'
+          ].map(h => <Cell key={h} bold>{h}</Cell>)}
+        </View>
+
+        {rows.map((r, i) => (
+          <View key={i} style={styles.row}>
+            <Cell>{r.loadCount2024}</Cell>
+            <Cell>{r.loadCount2025}</Cell>
+            <Cell>{r.loadCountChangePercent}%</Cell>
+            <Cell>{r.revenueTl2024}</Cell>
+            <Cell>{r.revenueTl2025}</Cell>
+            <Cell>{r.revenueChangePercent}%</Cell>
+            <Cell>{r.budgetRevenueTl2025}</Cell>
+            <Cell>{r.budgetChangePercent}%</Cell>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  </View>
+);
+
+export default FrozenTableReport3;
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'row' },
+  frozen: { width: 90, backgroundColor: '#f4f4f4' },
+  headerRow: { flexDirection: 'row', backgroundColor: '#f4f4f4' },
+  row: { flexDirection: 'row' },
+  cell: {
+    width: 100,
+    padding: 8,
+    textAlign: 'center',
+    borderBottomWidth: 1,
+    borderColor: '#ddd',
+  },
+  bold: { fontWeight: '700' },
+});

package/src/components/LineChart.jsx

@@ -1,35 +1,47 @@
 import React from 'react';
-import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 
 const LineChart = ({ data }) => {
-  if (!data?.series) return null;
+  if (!data?.series?.length) return null;
 
   const max = Math.max(...data.series.flatMap(s => s.data));
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{data.title}</Text>
-      <ScrollView horizontal>
-        <View style={styles.chart}>
-          {data.labels.map((label, i) => (
-            <View key={i} style={styles.column}>
-              {data.series.map((s, idx) => (
-                <View
-                  key={idx}
-                  style={[
-                    styles.bar,
-                    {
-                      height: (s.data[i] / max) * 120,
-                      backgroundColor: idx === 0 ? '#2962FF' : '#9E9E9E'
-                    }
-                  ]}
-                />
-              ))}
-              <Text style={styles.label}>{label}</Text>
+
+      <View style={styles.chart}>
+        {data.labels.map((label, i) => (
+          <View key={label} style={styles.column}>
+            <View style={styles.lines}>
+              {data.series.map((s, idx) => {
+                const height = (s.data[i] / max) * 120;
+                return (
+                  <View
+                    key={idx}
+                    style={[
+                      styles.point,
+                      {
+                        bottom: height,
+                        backgroundColor: idx === 0 ? '#FB8C00' : '#1E88E5',
+                      },
+                    ]}
+                  />
+                );
+              })}
             </View>
-          ))}
-        </View>
-      </ScrollView>
+            <Text style={styles.label}>{label}</Text>
+          </View>
+        ))}
+      </View>
+
+      <View style={styles.legend}>
+        {data.series.map((s, i) => (
+          <Text key={s.name} style={styles.legendText}>
+            ● {s.name}
+          </Text>
+        ))}
+      </View>
     </View>
   );
 };
@@ -37,10 +49,47 @@ const LineChart = ({ data }) => {
 export default LineChart;
 
 const styles = StyleSheet.create({
-  container: { marginVertical: 12 },
-  title: { fontWeight: '700', marginBottom: 8 },
-  chart: { flexDirection: 'row', alignItems: 'flex-end' },
-  column: { alignItems: 'center', marginHorizontal: 6 },
-  bar: { width: 8, marginHorizontal: 1, borderRadius: 2 },
-  label: { fontSize: 10, marginTop: 4 }
+  container: {
+    backgroundColor: '#fff',
+    padding: 12,
+    borderRadius: 12,
+    marginVertical: 12,
+  },
+  title: {
+    fontWeight: '700',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  chart: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    height: 160,
+  },
+  column: {
+    alignItems: 'center',
+    width: 40,
+  },
+  lines: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  point: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    position: 'absolute',
+  },
+  label: {
+    fontSize: 10,
+    marginTop: 4,
+  },
+  legend: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 8,
+  },
+  legendText: {
+    fontSize: 12,
+    marginHorizontal: 8,
+  },
 });

package/src/components/MonthSelector.jsx

@@ -1,28 +1,28 @@
 import React from 'react';
 import { ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native';
 
-const MonthSelector = ({ months, selected, onSelect }) => {
-  return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.row}>
+const MonthSelector = ({ months, selected, onSelect }) => (
+  <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.row}>
+    <TouchableOpacity
+      style={[styles.btn, selected === 'ALL' && styles.active]}
+      onPress={() => onSelect('ALL')}
+    >
+      <Text style={styles.text}>Select all</Text>
+    </TouchableOpacity>
+
+    {months.map(m => (
       <TouchableOpacity
-        style={[styles.btn, selected === 'ALL' && styles.active]}
-        onPress={() => onSelect('ALL')}
+        key={m}
+        style={[styles.btn, selected === m && styles.active]}
+        onPress={() => onSelect(m)}
       >
-        <Text style={styles.text}>Select all</Text>
+        <Text style={styles.text}>{m}</Text>
       </TouchableOpacity>
+    ))}
+  </ScrollView>
+);
 
-      {months.map(m => (
-        <TouchableOpacity
-          key={m}
-          style={[styles.btn, selected === m && styles.active]}
-          onPress={() => onSelect(m)}
-        >
-          <Text style={styles.text}>{m}</Text>
-        </TouchableOpacity>
-      ))}
-    </ScrollView>
-  );
-};
+export default MonthSelector;
 
 const styles = StyleSheet.create({
   row: { paddingVertical: 10 },
@@ -33,13 +33,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#eef2f7',
     marginRight: 8,
   },
-  active: {
-    backgroundColor: '#0f172a',
-  },
-  text: {
-    color: '#000',
-    fontWeight: '600',
-  },
+  active: { backgroundColor: '#0f172a' },
+  text: { color: '#000', fontWeight: '600' },
 });
-
-export default MonthSelector;

package/src/components/ProgressBar.jsx

@@ -23,6 +23,6 @@ const styles = StyleSheet.create({
   },
   fill: {
     height: '100%',
-    backgroundColor: '#f57c00', // orange like original
+    backgroundColor: '#f57c00',
   },
 });

package/src/components/Report1Card.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import ProgressBar from './ProgressBar';
 
-const format = (num) => (num ?? 0).toLocaleString();
+const format = n => (n ?? 0).toLocaleString();
 
 const Trend = ({ value }) => {
-  const positive = value >= 0;
+  const up = value >= 0;
   return (
-    <Text style={[styles.trend, positive ? styles.up : styles.down]}>
-      {positive ? '↑' : '↓'} {Math.abs(value)}%
+    <Text style={[styles.trend, up ? styles.up : styles.down]}>
+      {up ? '↑' : '↓'} {Math.abs(value)}%
     </Text>
   );
 };
@@ -23,10 +23,8 @@ const Row = ({ label, value }) => (
 const Report1Card = ({ item }) => {
   return (
     <View style={styles.card}>
-      {/* TITLE */}
       <Text style={styles.title}>{item.name}</Text>
 
-      {/* VALUES */}
       <Row label="2024 Actual" value={format(item.actual2024)} />
       <Row label="2025 Actual" value={format(item.actual2025)} />
 
@@ -42,16 +40,14 @@ const Report1Card = ({ item }) => {
         <Trend value={item.budgetVariancePercent} />
       </View>
 
-      {/* OPEX / GROSS PROFIT */}
       {item.opexToGrossProfitPercent !== undefined && (
         <>
           <View style={styles.row}>
-            <Text style={styles.label}>OPEX / Gross Profit</Text>
+            <Text style={styles.label}>Faaliyet Gid. / Brüt Kar</Text>
             <Text style={styles.value}>
               {item.opexToGrossProfitPercent}%
             </Text>
           </View>
-
           <ProgressBar value={item.opexToGrossProfitPercent} />
         </>
       )}
@@ -74,7 +70,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '700',
     marginBottom: 12,
-    color: '#000',
   },
   row: {
     flexDirection: 'row',
@@ -88,16 +83,11 @@ const styles = StyleSheet.create({
   value: {
     fontSize: 13,
     fontWeight: '600',
-    color: '#000',
   },
   trend: {
     fontSize: 13,
     fontWeight: '700',
   },
-  up: {
-    color: '#2e7d32',
-  },
-  down: {
-    color: '#d32f2f',
-  },
+  up: { color: '#2e7d32' },
+  down: { color: '#d32f2f' },
 });

package/src/components/SvgBarLineChart.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import Svg, { Rect, Circle, Text as SvgText } from 'react-native-svg';
+
+const SvgBarLineChart = ({ data }) => {
+  if (!data?.series) return null;
+
+  const width = Math.max(360, data.labels.length * 90);
+  const height = 240;
+  const padding = 40;
+
+  const max = Math.max(...data.series.flatMap(s => s.data));
+  const barWidth = 14;
+
+  return (
+    <View style={{ marginVertical: 16 }}>
+      <Text style={{ fontWeight: '700', marginBottom: 8 }}>
+        {data.title}
+      </Text>
+
+      <ScrollView horizontal>
+        <Svg width={width} height={height}>
+          {data.labels.map((label, i) => {
+            const x = padding + i * 70;
+
+            return (
+              <React.Fragment key={i}>
+                {/* 2024 bar */}
+                <Rect
+                  x={x}
+                  y={height - (data.series[0].data[i] / max) * 150}
+                  width={barWidth}
+                  height={(data.series[0].data[i] / max) * 150}
+                  fill="#E07A3F"
+                />
+
+                {/* 2025 bar */}
+                <Rect
+                  x={x + barWidth + 4}
+                  y={height - (data.series[1].data[i] / max) * 150}
+                  width={barWidth}
+                  height={(data.series[1].data[i] / max) * 150}
+                  fill="#4E79A7"
+                />
+
+                {/* Budget dot */}
+                <Circle
+                  cx={x + barWidth}
+                  cy={height - (data.series[2].data[i] / max) * 150}
+                  r={4}
+                  fill="#8AB6E8"
+                />
+
+                <SvgText
+                  x={x + barWidth}
+                  y={height - 6}
+                  fontSize="10"
+                  textAnchor="middle"
+                >
+                  {label}
+                </SvgText>
+              </React.Fragment>
+            );
+          })}
+        </Svg>
+      </ScrollView>
+
+      <View style={{ flexDirection: 'row', marginTop: 8 }}>
+        {data.series.map((s, i) => (
+          <Text key={i} style={{ marginRight: 16 }}>
+            ● {s.name}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default SvgBarLineChart;

package/src/components/SvgLineChart.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import Svg, { Line, Circle, Text as SvgText } from 'react-native-svg';
+
+const SvgLineChart = ({ data }) => {
+  if (!data?.series) return null;
+
+  const width = Math.max(360, data.labels.length * 80);
+  const height = 220;
+  const padding = 40;
+
+  const values = data.series.flatMap(s => s.data);
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+
+  const y = v =>
+    height - padding -
+    ((v - min) / (max - min || 1)) * (height - padding * 2);
+
+  const xStep = (width - padding * 2) / (data.labels.length - 1 || 1);
+  const colors = ['#E07A3F', '#4E79A7'];
+
+  return (
+    <View style={{ marginVertical: 16 }}>
+      <Text style={{ fontWeight: '700', marginBottom: 8 }}>
+        {data.title}
+      </Text>
+
+      <ScrollView horizontal>
+        <Svg width={width} height={height}>
+          {/* Grid */}
+          {[0.25, 0.5, 0.75].map((p, i) => (
+            <Line
+              key={i}
+              x1={padding}
+              x2={width - padding}
+              y1={padding + (height - padding * 2) * p}
+              y2={padding + (height - padding * 2) * p}
+              stroke="#ccc"
+              strokeDasharray="4"
+            />
+          ))}
+
+          {data.series.map((s, si) =>
+            s.data.map((v, i) => {
+              const x = padding + i * xStep;
+              const yVal = y(v);
+
+              if (i === s.data.length - 1) return null;
+
+              return (
+                <React.Fragment key={`${si}-${i}`}>
+                  <Line
+                    x1={x}
+                    y1={yVal}
+                    x2={x + xStep}
+                    y2={y(s.data[i + 1])}
+                    stroke={colors[si]}
+                    strokeWidth={2}
+                    strokeDasharray={si === 0 ? '4' : '0'}
+                  />
+                  <Circle cx={x} cy={yVal} r={4} fill={colors[si]} />
+                  <SvgText
+                    x={x}
+                    y={yVal - 8}
+                    fontSize="10"
+                    textAnchor="middle"
+                  >
+                    {v.toLocaleString()}
+                  </SvgText>
+                </React.Fragment>
+              );
+            })
+          )}
+        </Svg>
+      </ScrollView>
+
+      {/* Legend */}
+      <View style={{ flexDirection: 'row', marginTop: 8 }}>
+        {data.series.map((s, i) => (
+          <Text key={i} style={{ marginRight: 16, color: colors[i] }}>
+            ● {s.name}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default SvgLineChart;

package/src/index.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { View, ActivityIndicator } from 'react-native';
 
 import ReportListScreen from './screens/ReportListScreen';
 import Report1Screen from './screens/Report1Screen';
@@ -6,38 +7,67 @@ import Report2Screen from './screens/Report2Screen';
 import Report3Screen from './screens/Report3Screen';
 
 const AnalyticsReports = ({ config }) => {
-  const [activeReport, setActiveReport] = useState(null);
+  const [active, setActive] = useState(null);
+  const [loading, setLoading] = useState(true);
 
-  if (!activeReport) {
-    return <ReportListScreen onSelect={setActiveReport} />;
+  // SPLASH / LOADER (5 seconds)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // 👉 SHOW LOADER FIRST (BEFORE REPORT LIST)
+  if (loading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  // 👉 AFTER LOADER → SHOW REPORT LIST
+  if (!active) {
+    return <ReportListScreen onSelect={setActive} />;
   }
 
-  if (activeReport === 1) {
+  // 👉 REPORT 1
+  if (active === 1) {
     return (
       <Report1Screen
-        api={config.report1}
+        endpoint={config.report1.url}
         token={config.token}
-        onBack={() => setActiveReport(null)}
+        onBack={() => setActive(null)}
       />
     );
   }
 
-  if (activeReport === 2) {
+  // 👉 REPORT 2
+  if (active === 2) {
     return (
       <Report2Screen
         api={config.report2}
         token={config.token}
-        onBack={() => setActiveReport(null)}
+        onBack={() => setActive(null)}
       />
     );
   }
 
-  if (activeReport === 3) {
+  // 👉 REPORT 3
+  if (active === 3) {
     return (
       <Report3Screen
         api={config.report3}
         token={config.token}
-        onBack={() => setActiveReport(null)}
+        onBack={() => setActive(null)}
       />
     );
   }

package/src/screens/Report1Screen.jsx

@@ -3,18 +3,22 @@ import { ScrollView, Text, ActivityIndicator } from 'react-native';
 import fetchReport1 from '../api/report1Fetcher';
 import Report1Card from '../components/Report1Card';
 
-const Report1Screen = ({ report1Endpoint, token, onBack }) => {
+const Report1Screen = ({ endpoint, token, onBack }) => {
   const [rows, setRows] = useState(null);
 
   useEffect(() => {
-    fetchReport1(report1Endpoint, token).then(setRows);
+    fetchReport1(endpoint, token).then(setRows);
   }, []);
 
   if (!rows) return <ActivityIndicator />;
 
   return (
-    <ScrollView>
-      <Text onPress={onBack}>‹ Back</Text>
+    <ScrollView style={{ padding: 16 }}>
+      <Text onPress={onBack} style={{ marginBottom: 12 }}>‹ Back</Text>
+      <Text style={{ fontSize: 18, fontWeight: '700', marginBottom: 12 }}>
+        PERFORMANS RAPORU (USD)
+      </Text>
+
       {rows.map((r, i) => (
         <Report1Card key={i} item={r} />
       ))}

package/src/screens/Report2Screen.jsx

@@ -1,22 +1,23 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, Text, ActivityIndicator } from 'react-native';
+
 import { getDivisions, getTable, getLine, getBar } from '../api/report2Fetcher';
 import MonthSelector from '../components/MonthSelector';
 import DivisionSelector from '../components/DivisionSelector';
-import FrozenTable from '../components/FrozenTable';
-import LineChart from '../components/LineChart';
-import BarChart from '../components/BarChart';
+import FrozenTableReport2 from '../components/FrozenTableReport2';
+import SvgLineChart from '../components/SvgLineChart';
+import SvgBarLineChart from '../components/SvgBarLineChart';
 
-const Report2Screen = ({ report2, token, onBack }) => {
+const Report2Screen = ({ api, token, onBack }) => {
   const [divisions, setDivisions] = useState([]);
   const [division, setDivision] = useState(null);
+  const [month, setMonth] = useState('ALL');
   const [table, setTable] = useState(null);
   const [line, setLine] = useState(null);
   const [bar, setBar] = useState(null);
-  const [month, setMonth] = useState(null);
 
   useEffect(() => {
-    getDivisions(report2.divisions, token).then(d => {
+    getDivisions(api.divisions, token).then(d => {
       setDivisions(d);
       setDivision(d[0]?.code);
     });
@@ -25,43 +26,70 @@ const Report2Screen = ({ report2, token, onBack }) => {
   useEffect(() => {
     if (!division) return;
     Promise.all([
-      getTable(report2.table, division, token),
-      getLine(report2.lineChart, division, token),
-      getBar(report2.barChart, division, token)
+      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);
-      setMonth(null);
+      setMonth('ALL');
     });
   }, [division]);
 
   if (!table || !line || !bar) return <ActivityIndicator />;
 
-  const rows = month
-    ? table.rows.filter(r => r.monthLabel === month)
-    : table.rows;
+  const filterChartByMonth = (chart, month) => {
+  if (month === 'ALL') return chart;
+  const index = chart.labels.indexOf(month);
+  if (index === -1) return chart;
+
+  return {
+    ...chart,
+    labels: [chart.labels[index]],
+    series: chart.series.map(s => ({
+      ...s,
+      data: [s.data[index]],
+    })),
+  };
+};
+
+
+  const rows =
+    month === 'ALL'
+      ? table.rows
+      : table.rows.filter(r => r.monthLabel === month);
+
+      const filteredLine = filterChartByMonth(line, month);
+const filteredBar = filterChartByMonth(bar, month);
+
 
   return (
-    <ScrollView>
+    <ScrollView style={{ padding: 16 }}>
       <Text onPress={onBack}>‹ Back</Text>
 
+      <Text style={{ fontSize: 18, fontWeight: '700', marginVertical: 12 }}>
+        {table.title}
+      </Text>
+
       <MonthSelector
         months={line.labels}
         selected={month}
         onSelect={setMonth}
       />
 
-      <FrozenTable rows={rows} />
-
-      <LineChart data={line} />
-      <BarChart data={bar} />
-
       <DivisionSelector
         divisions={divisions}
         selected={division}
         onSelect={setDivision}
       />
+
+      <FrozenTableReport2 rows={rows} />
+
+      <SvgLineChart data={filteredLine} />
+<SvgBarLineChart data={filteredBar} />
+
+      
     </ScrollView>
   );
 };

package/src/screens/Report3Screen.jsx

@@ -1,17 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, ActivityIndicator } from 'react-native';
+import { ScrollView, Text, ActivityIndicator } from 'react-native';
+
 import {
   fetchReport3Table,
   fetchReport3Line,
-  fetchReport3Bar
+  fetchReport3Bar,
 } from '../api/report3Fetcher';
 
 import MonthSelector from '../components/MonthSelector';
-import FreezeTableReport3 from '../components/FreezeTableReport3';
-import LineChartReport3 from '../components/LineChartReport3';
-import BarChartReport3 from '../components/BarChartReport3';
+import FrozenTableReport3 from '../components/FrozenTableReport3';
+import SvgLineChart from '../components/SvgLineChart';
+import SvgBarLineChart from '../components/SvgBarLineChart';
 
-const Report3Screen = ({ api, token }) => {
+const Report3Screen = ({ api, token, onBack }) => {
   const [table, setTable] = useState(null);
   const [line, setLine] = useState(null);
   const [bar, setBar] = useState(null);
@@ -25,18 +26,50 @@ const Report3Screen = ({ api, token }) => {
 
   if (!table || !line || !bar) return <ActivityIndicator />;
 
+  const filterChartByMonth = (chart, month) => {
+  if (month === 'ALL') return chart;
+  const index = chart.labels.indexOf(month);
+  if (index === -1) return chart;
+
+  return {
+    ...chart,
+    labels: [chart.labels[index]],
+    series: chart.series.map(s => ({
+      ...s,
+      data: [s.data[index]],
+    })),
+  };
+};
+
   const months = table.rows.filter(r => r.month !== 99).map(r => r.monthLabel);
+
   const rows =
     month === 'ALL'
       ? table.rows
       : table.rows.filter(r => r.monthLabel === month);
 
+      const filteredLine = filterChartByMonth(line, month);
+const filteredBar = filterChartByMonth(bar, month);
+
+
   return (
-    <ScrollView>
-      <MonthSelector months={months} selected={month} onSelect={setMonth} />
-      <FreezeTableReport3 rows={rows} />
-      <LineChartReport3 data={line} />
-      <BarChartReport3 data={bar} />
+    <ScrollView style={{ padding: 16 }}>
+      <Text onPress={onBack}>‹ Back</Text>
+
+      <Text style={{ fontSize: 18, fontWeight: '700', marginVertical: 12 }}>
+        {table.title}
+      </Text>
+
+      <MonthSelector
+        months={months}
+        selected={month}
+        onSelect={setMonth}
+      />
+
+      <FrozenTableReport3 rows={rows} />
+
+      <SvgLineChart data={filteredLine} />
+<SvgBarLineChart data={filteredBar} />
     </ScrollView>
   );
 };

package/src/screens/ReportListScreen.jsx

@@ -1,38 +1,15 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View } from 'react-native';
+import ReportCard from '../components/ReportCard';
 
 const ReportListScreen = ({ onSelect }) => {
-  const reports = [
-    { id: 1, title: 'Report 1' },
-    { id: 2, title: 'Report 2' },
-    { id: 3, title: 'Report 3' },
-  ];
-
   return (
-    <View style={styles.container}>
-      {reports.map(r => (
-        <TouchableOpacity
-          key={r.id}
-          style={styles.card}
-          onPress={() => onSelect(r.id)}
-        >
-          <Text style={styles.text}>{r.title}</Text>
-        </TouchableOpacity>
-      ))}
+    <View style={{ padding: 16 }}>
+      <ReportCard title="Report 1" onPress={() => onSelect(1)} />
+      <ReportCard title="Report 2" onPress={() => onSelect(2)} />
+      <ReportCard title="Report 3" onPress={() => onSelect(3)} />
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: { padding: 16 },
-  card: {
-    backgroundColor: '#fff',
-    padding: 20,
-    borderRadius: 12,
-    marginBottom: 12,
-    elevation: 2,
-  },
-  text: { fontSize: 16, fontWeight: '700' },
-});
-
 export default ReportListScreen;

package/src/components/BarChart.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { View, Text, ScrollView, StyleSheet } from 'react-native';
-
-const BarChart = ({ data }) => {
-  if (!data?.series) return null;
-
-  const max = Math.max(...data.series.flatMap(s => s.data));
-
-  const colors = ['#FB8C00', '#1E88E5', '#9E9E9E'];
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>{data.title}</Text>
-      <ScrollView horizontal>
-        <View style={styles.chart}>
-          {data.labels.map((label, i) => (
-            <View key={i} style={styles.group}>
-              {data.series.map((s, idx) => (
-                <View
-                  key={idx}
-                  style={[
-                    styles.bar,
-                    {
-                      height: (s.data[i] / max) * 120,
-                      backgroundColor: colors[idx]
-                    }
-                  ]}
-                />
-              ))}
-              <Text style={styles.label}>{label}</Text>
-            </View>
-          ))}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-export default BarChart;
-
-const styles = StyleSheet.create({
-  container: { marginVertical: 12 },
-  title: { fontWeight: '700', marginBottom: 8 },
-  chart: { flexDirection: 'row', alignItems: 'flex-end' },
-  group: { flexDirection: 'row', alignItems: 'flex-end', marginHorizontal: 6 },
-  bar: { width: 10, marginHorizontal: 2, borderRadius: 2 },
-  label: { fontSize: 10, marginTop: 4, textAlign: 'center', width: 40 }
-});

package/src/components/BarChartReport3.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-const BarChartReport3 = ({ data }) => {
-  return (
-    <View style={styles.card}>
-      <Text style={styles.title}>{data.title}</Text>
-      {data.series.map(s => (
-        <Text key={s.name} style={styles.legend}>{s.name}</Text>
-      ))}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  card: { padding: 12, backgroundColor: '#fff', borderRadius: 12, marginTop: 12 },
-  title: { fontWeight: '700', textAlign: 'center' },
-  legend: { textAlign: 'center' },
-});
-
-export default BarChartReport3;

package/src/components/FreezeTableReport3.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { View, Text, ScrollView, StyleSheet } from 'react-native';
-
-const FreezeTableReport3 = ({ rows }) => {
-  return (
-    <View style={styles.container}>
-      {/* Frozen column */}
-      <View style={styles.left}>
-        <Text style={styles.header}>AY</Text>
-        {rows.map(r => (
-          <Text key={r.sortOrder} style={styles.cell}>{r.monthLabel}</Text>
-        ))}
-      </View>
-
-      {/* Scrollable */}
-      <ScrollView horizontal>
-        <View>
-          <View style={styles.row}>
-            {[
-              '2024 Yük',
-              '2025 Yük',
-              'Yük %',
-              '2024 Gelir',
-              '2025 Gelir',
-              'Gelir %',
-              '2025 Bütçe',
-              'Bütçe %'
-            ].map(h => (
-              <Text key={h} style={styles.header}>{h}</Text>
-            ))}
-          </View>
-
-          {rows.map(r => (
-            <View key={r.sortOrder} style={styles.row}>
-              <Text style={styles.cell}>{r.loadCount2024}</Text>
-              <Text style={styles.cell}>{r.loadCount2025}</Text>
-              <Text style={styles.percent}>{r.loadCountChangePercent}%</Text>
-              <Text style={styles.cell}>{r.revenueTl2024}</Text>
-              <Text style={styles.cell}>{r.revenueTl2025}</Text>
-              <Text style={styles.percent}>{r.revenueChangePercent}%</Text>
-              <Text style={styles.cell}>{r.budgetRevenueTl2025}</Text>
-              <Text style={styles.percent}>{r.budgetChangePercent}%</Text>
-            </View>
-          ))}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { flexDirection: 'row' },
-  left: { width: 90, backgroundColor: '#fff' },
-  header: { fontWeight: '700', padding: 8 },
-  cell: { padding: 8 },
-  percent: { padding: 8, fontWeight: '600' },
-  row: { flexDirection: 'row' },
-});
-
-export default FreezeTableReport3;

package/src/components/FrozenTable.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { View, Text, ScrollView, StyleSheet } from 'react-native';
-
-const Cell = ({ children, bold }) => (
-  <View style={styles.cell}>
-    <Text style={[styles.text, bold && styles.bold]}>{children}</Text>
-  </View>
-);
-
-const FrozenTable = ({ rows = [] }) => {
-  if (!rows.length) {
-    return <Text style={styles.noData}>No data available</Text>;
-  }
-
-  return (
-    <View style={styles.container}>
-      {/* Frozen Column */}
-      <View style={styles.frozen}>
-        <Cell bold>AY</Cell>
-        {rows.map((r, i) => (
-          <Cell key={i} bold={r.monthLabel === 'Total'}>
-            {r.monthLabel}
-          </Cell>
-        ))}
-      </View>
-
-      {/* Scrollable Columns */}
-      <ScrollView horizontal>
-        <View>
-          <View style={styles.headerRow}>
-            <Cell bold>2024 TEU</Cell>
-            <Cell bold>2025 TEU</Cell>
-            <Cell bold>TEU %</Cell>
-          </View>
-
-          {rows.map((r, i) => (
-            <View key={i} style={styles.row}>
-              <Cell>{r.teu2024}</Cell>
-              <Cell>{r.teu2025}</Cell>
-              <Cell style={r.teuChangePercent < 0 ? styles.down : styles.up}>
-                {r.teuChangePercent}%
-              </Cell>
-            </View>
-          ))}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-export default FrozenTable;
-
-const styles = StyleSheet.create({
-  container: { flexDirection: 'row', marginVertical: 12 },
-  frozen: { width: 90, backgroundColor: '#f4f4f4' },
-  headerRow: { flexDirection: 'row', backgroundColor: '#f4f4f4' },
-  row: { flexDirection: 'row' },
-  cell: {
-    width: 90,
-    padding: 8,
-    borderBottomWidth: 1,
-    borderColor: '#ddd',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  text: { fontSize: 12 },
-  bold: { fontWeight: '700' },
-  up: { color: 'green' },
-  down: { color: 'red' },
-  noData: { textAlign: 'center', padding: 16 }
-});

package/src/components/LineChartReport3.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-const LineChartReport3 = ({ data }) => {
-  return (
-    <View style={styles.card}>
-      <Text style={styles.title}>{data.title}</Text>
-      {/* Simple SVG-less visual representation */}
-      {data.series.map(s => (
-        <Text key={s.name} style={styles.legend}>{s.name}</Text>
-      ))}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  card: { padding: 12, backgroundColor: '#fff', borderRadius: 12, marginTop: 12 },
-  title: { fontWeight: '700', textAlign: 'center', marginBottom: 8 },
-  legend: { textAlign: 'center' },
-});
-
-export default LineChartReport3;