@dhiraj0720/report1chart 2.2.6 → 2.2.7

package/package.json

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

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/BarChartReport3.jsx

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,60 @@
+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/LineChartReport3.jsx

@@ -0,0 +1,22 @@
+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;

package/src/components/MonthSelector.jsx

@@ -1,34 +1,45 @@
 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}>
-    {months.map(m => (
+const MonthSelector = ({ months, selected, onSelect }) => {
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.row}>
       <TouchableOpacity
-        key={m}
-        style={[styles.card, selected === m && styles.active]}
-        onPress={() => onSelect(m)}
+        style={[styles.btn, selected === 'ALL' && styles.active]}
+        onPress={() => onSelect('ALL')}
       >
-        <Text style={[styles.text, selected === m && styles.activeText]}>
-          {m}
-        </Text>
+        <Text style={styles.text}>Select all</Text>
       </TouchableOpacity>
-    ))}
-  </ScrollView>
-);
 
-export default MonthSelector;
+      {months.map(m => (
+        <TouchableOpacity
+          key={m}
+          style={[styles.btn, selected === m && styles.active]}
+          onPress={() => onSelect(m)}
+        >
+          <Text style={styles.text}>{m}</Text>
+        </TouchableOpacity>
+      ))}
+    </ScrollView>
+  );
+};
 
 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',
+  },
 });
+
+export default MonthSelector;

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 [active, setActive] = useState(null);
+const AnalyticsReports = ({ config }) => {
+  const [activeReport, setActiveReport] = useState(null);
+
+  if (!activeReport) {
+    return <ReportListScreen onSelect={setActiveReport} />;
+  }
 
-  if (active === 1)
-    return <Report1Screen {...props} onBack={() => setActive(null)} />;
+  if (activeReport === 1) {
+    return (
+      <Report1Screen
+        api={config.report1}
+        token={config.token}
+        onBack={() => setActiveReport(null)}
+      />
+    );
+  }
 
-  if (active === 2)
-    return <Report2Screen {...props} onBack={() => setActive(null)} />;
+  if (activeReport === 2) {
+    return (
+      <Report2Screen
+        api={config.report2}
+        token={config.token}
+        onBack={() => setActiveReport(null)}
+      />
+    );
+  }
 
-  if (active === 3)
-    return <Report3Screen onBack={() => setActive(null)} />;
+  if (activeReport === 3) {
+    return (
+      <Report3Screen
+        api={config.report3}
+        token={config.token}
+        onBack={() => setActiveReport(null)}
+      />
+    );
+  }
 
-  return <ReportsHome onSelect={setActive} />;
+  return null;
 };
 
 export default AnalyticsReports;

package/src/screens/Report2Screen.jsx

@@ -1,11 +1,6 @@
 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';

package/src/screens/Report3Screen.jsx

@@ -1,13 +1,44 @@
-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, ActivityIndicator } from 'react-native';
+import {
+  fetchReport3Table,
+  fetchReport3Line,
+  fetchReport3Bar
+} from '../api/report3Fetcher';
+
+import MonthSelector from '../components/MonthSelector';
+import FreezeTableReport3 from '../components/FreezeTableReport3';
+import LineChartReport3 from '../components/LineChartReport3';
+import BarChartReport3 from '../components/BarChartReport3';
+
+const Report3Screen = ({ api, token }) => {
+  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>
+      <MonthSelector months={months} selected={month} onSelect={setMonth} />
+      <FreezeTableReport3 rows={rows} />
+      <LineChartReport3 data={line} />
+      <BarChartReport3 data={bar} />
+    </ScrollView>
+  );
+};
 
 export default Report3Screen;

package/src/screens/ReportListScreen.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+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>
+  );
+};
+
+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/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 },
-});