@dhiraj0720/report1chart 2.2.6 → 2.2.8

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "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/api/report3Fetcher.jsx

@@ -0,0 +1,22 @@
+import axios from 'axios';
+
+export const fetchReport3Table = async (url, token) => {
+  const res = await axios.get(url, {
+    headers: { Authorization: token },
+  });
+  return res.data;
+};
+
+export const fetchReport3Line = async (url, token) => {
+  const res = await axios.get(url, {
+    headers: { Authorization: token },
+  });
+  return res.data;
+};
+
+export const fetchReport3Bar = async (url, token) => {
+  const res = await axios.get(url, {
+    headers: { Authorization: token },
+  });
+  return res.data;
+};

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,17 +1,22 @@
 import React from 'react';
-import { ScrollView, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native';
 
 const MonthSelector = ({ months, selected, onSelect }) => (
-  <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+  <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
         key={m}
-        style={[styles.card, selected === m && styles.active]}
+        style={[styles.btn, selected === m && styles.active]}
         onPress={() => onSelect(m)}
       >
-        <Text style={[styles.text, selected === m && styles.activeText]}>
-          {m}
-        </Text>
+        <Text style={styles.text}>{m}</Text>
       </TouchableOpacity>
     ))}
   </ScrollView>
@@ -20,15 +25,14 @@ const MonthSelector = ({ months, selected, onSelect }) => (
 export default MonthSelector;
 
 const styles = StyleSheet.create({
-  card: {
+  row: { paddingVertical: 10 },
+  btn: {
     paddingHorizontal: 14,
     paddingVertical: 8,
     borderRadius: 16,
-    borderWidth: 1,
-    borderColor: '#ccc',
+    backgroundColor: '#eef2f7',
     marginRight: 8,
   },
-  active: { backgroundColor: '#000' },
-  text: { fontSize: 13 },
-  activeText: { color: '#fff', fontWeight: '700' },
+  active: { backgroundColor: '#0f172a' },
+  text: { color: '#000', fontWeight: '600' },
 });

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,86 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import Svg, { Rect, Polyline, Circle, Text as SvgText } from 'react-native-svg';
+
+const SvgBarLineChart = ({ data }) => {
+  if (!data?.series?.length) return null;
+
+  const width = 360;
+  const height = 190;
+  const padding = 30;
+  const barWidth = 12;
+
+  const max = Math.max(...data.series.flatMap(s => s.data));
+
+  const scaleX = i =>
+    padding + i * ((width - padding * 2) / data.labels.length);
+
+  const scaleY = v =>
+    height - padding - (v / max) * (height - padding * 2);
+
+  return (
+    <View style={{ backgroundColor: '#fff', padding: 12, borderRadius: 12 }}>
+      <Text style={{ fontWeight: '700', textAlign: 'center', marginBottom: 8 }}>
+        {data.title}
+      </Text>
+
+      <Svg width={width} height={height}>
+        {/* Bars */}
+        {data.labels.map((_, i) =>
+          data.series.slice(0, 2).map((s, idx) => (
+            <Rect
+              key={`${i}-${idx}`}
+              x={scaleX(i) + idx * (barWidth + 4)}
+              y={scaleY(s.data[i])}
+              width={barWidth}
+              height={height - padding - scaleY(s.data[i])}
+              fill={idx === 0 ? '#FB8C00' : '#1E88E5'}
+              rx="2"
+            />
+          ))
+        )}
+
+        {/* Budget dotted line */}
+        {data.series[2] && (
+          <>
+            <Polyline
+              points={data.series[2].data
+                .map((v, i) => `${scaleX(i) + barWidth},${scaleY(v)}`)
+                .join(' ')}
+              fill="none"
+              stroke="#90CAF9"
+              strokeWidth="2"
+              strokeDasharray="4,4"
+            />
+
+            {data.series[2].data.map((v, i) => (
+              <Circle
+                key={i}
+                cx={scaleX(i) + barWidth}
+                cy={scaleY(v)}
+                r="4"
+                fill="#90CAF9"
+              />
+            ))}
+          </>
+        )}
+
+        {/* Value labels */}
+        {data.series[2]?.data.map((v, i) => (
+          <SvgText
+            key={i}
+            x={scaleX(i) + barWidth}
+            y={scaleY(v) - 8}
+            fontSize="9"
+            fill="#333"
+            textAnchor="middle"
+          >
+            {(v / 1_000_000).toFixed(0)}M
+          </SvgText>
+        ))}
+      </Svg>
+    </View>
+  );
+};
+
+export default SvgBarLineChart;

package/src/components/SvgLineChart.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import Svg, { Polyline, Circle, Line, Text as SvgText } from 'react-native-svg';
+
+const SvgLineChart = ({ data }) => {
+  if (!data?.series?.length) return null;
+
+  const width = 340;
+  const height = 180;
+  const padding = 30;
+
+  const allValues = data.series.flatMap(s => s.data);
+  const max = Math.max(...allValues);
+  const min = Math.min(...allValues);
+
+  const scaleX = i =>
+    padding + (i * (width - padding * 2)) / (data.labels.length - 1);
+
+  const scaleY = v =>
+    height - padding - ((v - min) / (max - min)) * (height - padding * 2);
+
+  return (
+    <View style={{ backgroundColor: '#fff', padding: 12, borderRadius: 12 }}>
+      <Text style={{ fontWeight: '700', textAlign: 'center', marginBottom: 8 }}>
+        {data.title}
+      </Text>
+
+      <Svg width={width} height={height}>
+        {/* Grid */}
+        {[0.25, 0.5, 0.75].map(p => (
+          <Line
+            key={p}
+            x1={padding}
+            x2={width - padding}
+            y1={padding + p * (height - padding * 2)}
+            y2={padding + p * (height - padding * 2)}
+            stroke="#e0e0e0"
+            strokeDasharray="4,4"
+          />
+        ))}
+
+        {/* Lines */}
+        {data.series.map((s, idx) => {
+          const points = s.data
+            .map((v, i) => `${scaleX(i)},${scaleY(v)}`)
+            .join(' ');
+
+          return (
+            <Polyline
+              key={s.name}
+              points={points}
+              fill="none"
+              stroke={idx === 0 ? '#FB8C00' : '#1E88E5'}
+              strokeWidth="2"
+            />
+          );
+        })}
+
+        {/* Points + Labels */}
+        {data.series.map((s, idx) =>
+          s.data.map((v, i) => (
+            <React.Fragment key={`${idx}-${i}`}>
+              <Circle
+                cx={scaleX(i)}
+                cy={scaleY(v)}
+                r="4"
+                fill={idx === 0 ? '#FB8C00' : '#1E88E5'}
+              />
+              <SvgText
+                x={scaleX(i)}
+                y={scaleY(v) - 8}
+                fontSize="9"
+                fill="#333"
+                textAnchor="middle"
+              >
+                {v}
+              </SvgText>
+            </React.Fragment>
+          ))
+        )}
+      </Svg>
+    </View>
+  );
+};
+
+export default SvgLineChart;

package/src/index.jsx

@@ -1,22 +1,48 @@
 import React, { useState } from 'react';
-import ReportsHome from './screens/ReportsHome';
+
+import ReportListScreen from './screens/ReportListScreen';
 import Report1Screen from './screens/Report1Screen';
 import Report2Screen from './screens/Report2Screen';
 import Report3Screen from './screens/Report3Screen';
 
-const AnalyticsReports = (props) => {
+const AnalyticsReports = ({ config }) => {
   const [active, setActive] = useState(null);
 
-  if (active === 1)
-    return <Report1Screen {...props} onBack={() => setActive(null)} />;
+  if (!active) {
+    return <ReportListScreen onSelect={setActive} />;
+  }
+
+  if (active === 1) {
+    return (
+      <Report1Screen
+        endpoint={config.report1.url}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    );
+  }
 
-  if (active === 2)
-    return <Report2Screen {...props} onBack={() => setActive(null)} />;
+  if (active === 2) {
+    return (
+      <Report2Screen
+        api={config.report2}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    );
+  }
 
-  if (active === 3)
-    return <Report3Screen onBack={() => setActive(null)} />;
+  if (active === 3) {
+    return (
+      <Report3Screen
+        api={config.report3}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    );
+  }
 
-  return <ReportsHome onSelect={setActive} />;
+  return null;
 };
 
 export default AnalyticsReports;

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,27 +1,23 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, Text, ActivityIndicator } from 'react-native';
- import {
-  getDivisions,
-  getTable,
-  getLine,
-  getBar,
-} from '../api/report2Fetcher';
+
+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);
     });
@@ -30,37 +26,42 @@ 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 rows =
+    month === 'ALL'
+      ? table.rows
+      : table.rows.filter(r => r.monthLabel === 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} />
+      <FrozenTableReport2 rows={rows} />
 
-      <LineChart data={line} />
-      <BarChart data={bar} />
+      <SvgLineChart data={line} />
+      <SvgBarLineChart data={bar} />
 
       <DivisionSelector
         divisions={divisions}

package/src/screens/Report3Screen.jsx

@@ -1,13 +1,58 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-
-const Report3Screen = ({ onBack }) => (
-  <View style={{ padding: 16 }}>
-    <Text onPress={onBack}>‹ Back</Text>
-    <Text style={{ marginTop: 20, fontSize: 16 }}>
-      Report 3 – Coming Soon
-    </Text>
-  </View>
-);
+import React, { useEffect, useState } from 'react';
+import { ScrollView, Text, ActivityIndicator } from 'react-native';
+
+import {
+  fetchReport3Table,
+  fetchReport3Line,
+  fetchReport3Bar,
+} from '../api/report3Fetcher';
+
+import MonthSelector from '../components/MonthSelector';
+import FrozenTableReport3 from '../components/FrozenTableReport3';
+import SvgLineChart from '../components/SvgLineChart';
+import SvgBarLineChart from '../components/SvgBarLineChart';
+
+const Report3Screen = ({ api, token, onBack }) => {
+  const [table, setTable] = useState(null);
+  const [line, setLine] = useState(null);
+  const [bar, setBar] = useState(null);
+  const [month, setMonth] = useState('ALL');
+
+  useEffect(() => {
+    fetchReport3Table(api.table, token).then(setTable);
+    fetchReport3Line(api.line, token).then(setLine);
+    fetchReport3Bar(api.bar, token).then(setBar);
+  }, []);
+
+  if (!table || !line || !bar) return <ActivityIndicator />;
+
+  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);
+
+  return (
+    <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={line} />
+      <SvgBarLineChart data={bar} />
+    </ScrollView>
+  );
+};
 
 export default Report3Screen;

package/src/screens/ReportListScreen.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+import ReportCard from '../components/ReportCard';
+
+const ReportListScreen = ({ onSelect }) => {
+  return (
+    <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>
+  );
+};
+
+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/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/screens/ReportsHome.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import ReportCard from '../components/ReportCard';
-
-const ReportsHome = ({ onSelect }) => (
-  <View style={styles.container}>
-    <ReportCard title="Report 1 – Operating Profit" onPress={() => onSelect(1)} />
-    <ReportCard title="Report 2 – TEU & Profit" onPress={() => onSelect(2)} />
-    <ReportCard title="Report 3 – Coming Soon" onPress={() => onSelect(3)} />
-  </View>
-);
-
-export default ReportsHome;
-
-const styles = StyleSheet.create({
-  container: { padding: 16 },
-});