@dhiraj0720/report1chart 2.2.3 → 2.2.5

package/package.json

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

package/src/api/report1Fetcher.jsx

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const fetchReport1 = async (endpoint, token) => {
+  const res = await axios.get(endpoint, {
+    headers: { Authorization: token },
+  });
+  return res.data.rows || [];
+};
+
+export default fetchReport1;

package/src/api/report2Fetcher.jsx

@@ -0,0 +1,29 @@
+import axios from 'axios';
+
+export const fetchDivisions = async (endpoint, token) => {
+  const res = await axios.get(endpoint, {
+    headers: { Authorization: token },
+  });
+  return res.data.data || [];
+};
+
+export const fetchTable = async (endpoint, division, token) => {
+  const res = await axios.get(`${endpoint}?division=${division}`, {
+    headers: { Authorization: token },
+  });
+  return res.data;
+};
+
+export const fetchLineChart = async (endpoint, division, token) => {
+  const res = await axios.get(`${endpoint}?division=${division}`, {
+    headers: { Authorization: token },
+  });
+  return res.data;
+};
+
+export const fetchBarChart = async (endpoint, division, token) => {
+  const res = await axios.get(`${endpoint}?division=${division}`, {
+    headers: { Authorization: token },
+  });
+  return res.data;
+};

package/src/components/BarChart.jsx

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+const DivisionSelector = ({ divisions, selected, onSelect }) => (
+  <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+    {divisions.map(d => (
+      <TouchableOpacity
+        key={d.code}
+        style={[styles.card, selected === d.code && styles.active]}
+        onPress={() => onSelect(d.code)}
+      >
+        <Text style={[styles.text, selected === d.code && styles.activeText]}>
+          {d.displayName}
+        </Text>
+      </TouchableOpacity>
+    ))}
+  </ScrollView>
+);
+
+export default DivisionSelector;
+
+const styles = StyleSheet.create({
+  card: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    marginRight: 8,
+  },
+  active: { backgroundColor: '#000' },
+  text: { fontSize: 12 },
+  activeText: { color: '#fff', fontWeight: '700' },
+});

package/src/components/FrozenTable.jsx

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+
+const LineChart = ({ data }) => {
+  if (!data?.series) 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>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+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 }
+});

package/src/components/MonthSelector.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+const MonthSelector = ({ months, selected, onSelect }) => (
+  <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+    {months.map(m => (
+      <TouchableOpacity
+        key={m}
+        style={[styles.card, selected === m && styles.active]}
+        onPress={() => onSelect(m)}
+      >
+        <Text style={[styles.text, selected === m && styles.activeText]}>
+          {m}
+        </Text>
+      </TouchableOpacity>
+    ))}
+  </ScrollView>
+);
+
+export default MonthSelector;
+
+const styles = StyleSheet.create({
+  card: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    marginRight: 8,
+  },
+  active: { backgroundColor: '#000' },
+  text: { fontSize: 13 },
+  activeText: { color: '#fff', fontWeight: '700' },
+});

package/src/components/ProgressBar.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+const ProgressBar = ({ value }) => {
+  const width = Math.min(Math.max(value || 0, 0), 100);
+
+  return (
+    <View style={styles.track}>
+      <View style={[styles.fill, { width: `${width}%` }]} />
+    </View>
+  );
+};
+
+export default ProgressBar;
+
+const styles = StyleSheet.create({
+  track: {
+    height: 6,
+    backgroundColor: '#e5e5e5',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginTop: 6,
+  },
+  fill: {
+    height: '100%',
+    backgroundColor: '#f57c00', // orange like original
+  },
+});

package/src/components/Report1Card.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import ProgressBar from './ProgressBar';
+
+const format = (num) => (num ?? 0).toLocaleString();
+
+const Trend = ({ value }) => {
+  const positive = value >= 0;
+  return (
+    <Text style={[styles.trend, positive ? styles.up : styles.down]}>
+      {positive ? '↑' : '↓'} {Math.abs(value)}%
+    </Text>
+  );
+};
+
+const Row = ({ label, value }) => (
+  <View style={styles.row}>
+    <Text style={styles.label}>{label}</Text>
+    <Text style={styles.value}>{value}</Text>
+  </View>
+);
+
+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)} />
+
+      <View style={styles.row}>
+        <Text style={styles.label}>Change YoY</Text>
+        <Trend value={item.actualChangePercent} />
+      </View>
+
+      <Row label="2025 Budget" value={format(item.budget2025)} />
+
+      <View style={styles.row}>
+        <Text style={styles.label}>Budget Variance</Text>
+        <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.value}>
+              {item.opexToGrossProfitPercent}%
+            </Text>
+          </View>
+
+          <ProgressBar value={item.opexToGrossProfitPercent} />
+        </>
+      )}
+    </View>
+  );
+};
+
+export default Report1Card;
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginBottom: 12,
+    color: '#000',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  label: {
+    fontSize: 13,
+    color: '#666',
+  },
+  value: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#000',
+  },
+  trend: {
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  up: {
+    color: '#2e7d32',
+  },
+  down: {
+    color: '#d32f2f',
+  },
+});

package/src/components/ReportCard.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+
+const ReportCard = ({ title, onPress }) => (
+  <TouchableOpacity style={styles.card} onPress={onPress}>
+    <Text style={styles.text}>{title}</Text>
+  </TouchableOpacity>
+);
+
+export default ReportCard;
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 18,
+    borderRadius: 12,
+    backgroundColor: '#fff',
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});

package/src/index.jsx

@@ -1,18 +1,22 @@
-import React from 'react';
-import ReportScreen from './screens/ReportScreen';
+import React, { useState } from 'react';
+import ReportsHome from './screens/ReportsHome';
+import Report1Screen from './screens/Report1Screen';
+import Report2Screen from './screens/Report2Screen';
+import Report3Screen from './screens/Report3Screen';
 
-const ReportChart = ({ 
-  onReportSelect, 
-  onClose, 
-  reports = []
-}) => {
-  return (
-    <ReportScreen
-      reports={reports}
-      onReportSelect={onReportSelect}
-      onClose={onClose}
-    />
-  );
+const AnalyticsReports = (props) => {
+  const [active, setActive] = useState(null);
+
+  if (active === 1)
+    return <Report1Screen {...props} onBack={() => setActive(null)} />;
+
+  if (active === 2)
+    return <Report2Screen {...props} onBack={() => setActive(null)} />;
+
+  if (active === 3)
+    return <Report3Screen onBack={() => setActive(null)} />;
+
+  return <ReportsHome onSelect={setActive} />;
 };
 
-export default ReportChart;
+export default AnalyticsReports;

package/src/screens/Report1Screen.jsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+import { ScrollView, Text, ActivityIndicator } from 'react-native';
+import fetchReport1 from '../api/report1Fetcher';
+import Report1Card from '../components/Report1Card';
+
+const Report1Screen = ({ report1Endpoint, token, onBack }) => {
+  const [rows, setRows] = useState(null);
+
+  useEffect(() => {
+    fetchReport1(report1Endpoint, token).then(setRows);
+  }, []);
+
+  if (!rows) return <ActivityIndicator />;
+
+  return (
+    <ScrollView>
+      <Text onPress={onBack}>‹ Back</Text>
+      {rows.map((r, i) => (
+        <Report1Card key={i} item={r} />
+      ))}
+    </ScrollView>
+  );
+};
+
+export default Report1Screen;

package/src/screens/Report2Screen.jsx

@@ -0,0 +1,69 @@
+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';
+
+const Report2Screen = ({ report2, token, onBack }) => {
+  const [divisions, setDivisions] = useState([]);
+  const [division, setDivision] = useState(null);
+  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 => {
+      setDivisions(d);
+      setDivision(d[0]?.code);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!division) return;
+    Promise.all([
+      getTable(report2.table, division, token),
+      getLine(report2.lineChart, division, token),
+      getBar(report2.barChart, division, token)
+    ]).then(([t, l, b]) => {
+      setTable(t);
+      setLine(l);
+      setBar(b);
+      setMonth(null);
+    });
+  }, [division]);
+
+  if (!table || !line || !bar) return <ActivityIndicator />;
+
+  const rows = month
+    ? table.rows.filter(r => r.monthLabel === month)
+    : table.rows;
+
+  return (
+    <ScrollView>
+      <Text onPress={onBack}>‹ Back</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}
+      />
+    </ScrollView>
+  );
+};
+
+export default Report2Screen;

package/src/screens/Report3Screen.jsx

@@ -0,0 +1,13 @@
+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>
+);
+
+export default Report3Screen;

package/src/screens/ReportsHome.jsx

@@ -0,0 +1,17 @@
+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 },
+});

package/src/api/fetcher.jsx

@@ -1,70 +0,0 @@
-import axios from 'axios';
-
-export class ApiFetcher {
-  static async fetchReportData(reportConfig) {
-    try {
-      console.log('Fetching report data from:', reportConfig.apiConfig.url);
-      
-      const headers = {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json'
-      };
-
-      // Add token if provided
-      if (reportConfig.apiConfig.token) {
-        headers['Authorization'] = `Bearer ${reportConfig.apiConfig.token}`;
-      }
-
-      const response = await axios.get(reportConfig.apiConfig.url, {
-        timeout: 15000,
-        headers: headers
-      });
-
-      console.log('API Response received:', response.status);
-      
-      // Transform data based on report type
-      return this.transformData(response.data, reportConfig);
-      
-    } catch (error) {
-      console.error('API Fetch Error:', error);
-      throw new Error(`Failed to fetch report: ${error.message}`);
-    }
-  }
-
-  static transformData(data, reportConfig) {
-    // For performance reports (type 1, 1.1, 1.2)
-    if (reportConfig.id === 1 || reportConfig.id === 1.1 || reportConfig.id === 1.2) {
-      return {
-        data: data.data || [],
-        title: reportConfig.title,
-        type: 'table',
-        subType: reportConfig.subType
-      };
-    }
-
-    // For report 2 (Revenue by Mode)
-    if (reportConfig.id === 2) {
-      return {
-        data: Array.isArray(data) ? data : data.data || [],
-        title: reportConfig.title,
-        type: 'bar'
-      };
-    }
-
-    // For report 3 (Shipment by Direction)
-    if (reportConfig.id === 3) {
-      return {
-        data: Array.isArray(data) ? data : data.data || [],
-        title: reportConfig.title,
-        type: 'pie'
-      };
-    }
-
-    // Default transformation
-    return {
-      data: data,
-      title: reportConfig.title,
-      type: reportConfig.type || 'bar'
-    };
-  }
-}