@dhiraj0720/report1chart 2.2.4 → 2.2.5

package/package.json

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

package/src/api/report1Fetcher.jsx

@@ -1,27 +1,10 @@
 import axios from 'axios';
 
-const fetchReport1 = async (apiEndpoint, apiToken) => {
-  try {
-    const response = await axios.get(apiEndpoint, {
-      headers: {
-        Authorization: apiToken,
-        Accept: 'application/json',
-      },
-      timeout: 15000,
-    });
-
-    if (!response.data || !response.data.rows) {
-      throw new Error('Invalid API response');
-    }
-
-    return response.data.rows;
-  } catch (error) {
-    throw new Error(
-      error?.response?.data?.message ||
-      error.message ||
-      'Failed to fetch report'
-    );
-  }
+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

@@ -16,12 +16,13 @@ export default ProgressBar;
 const styles = StyleSheet.create({
   track: {
     height: 6,
-    backgroundColor: '#e0e0e0',
+    backgroundColor: '#e5e5e5',
     borderRadius: 4,
     overflow: 'hidden',
+    marginTop: 6,
   },
   fill: {
     height: '100%',
-    backgroundColor: '#f57c00',
+    backgroundColor: '#f57c00', // orange like original
   },
 });

package/src/components/Report1Card.jsx

@@ -13,11 +13,20 @@ const Trend = ({ value }) => {
   );
 };
 
+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)} />
 
@@ -33,6 +42,7 @@ const Report1Card = ({ item }) => {
         <Trend value={item.budgetVariancePercent} />
       </View>
 
+      {/* OPEX / GROSS PROFIT */}
       {item.opexToGrossProfitPercent !== undefined && (
         <>
           <View style={styles.row}>
@@ -41,6 +51,7 @@ const Report1Card = ({ item }) => {
               {item.opexToGrossProfitPercent}%
             </Text>
           </View>
+
           <ProgressBar value={item.opexToGrossProfitPercent} />
         </>
       )}
@@ -48,13 +59,6 @@ const Report1Card = ({ item }) => {
   );
 };
 
-const Row = ({ label, value }) => (
-  <View style={styles.row}>
-    <Text style={styles.label}>{label}</Text>
-    <Text style={styles.value}>{value}</Text>
-  </View>
-);
-
 export default Report1Card;
 
 const styles = StyleSheet.create({

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,3 +1,22 @@
+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';
 
-export default Report1Screen;
+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 AnalyticsReports;

package/src/screens/Report1Screen.jsx

@@ -1,80 +1,25 @@
 import React, { useEffect, useState } from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  ActivityIndicator,
-  StyleSheet,
-} from 'react-native';
+import { ScrollView, Text, ActivityIndicator } from 'react-native';
 import fetchReport1 from '../api/report1Fetcher';
 import Report1Card from '../components/Report1Card';
 
-const Report1Screen = ({ apiEndpoint, apiToken }) => {
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [rows, setRows] = useState([]);
+const Report1Screen = ({ report1Endpoint, token, onBack }) => {
+  const [rows, setRows] = useState(null);
 
   useEffect(() => {
-    const loadData = async () => {
-      try {
-        const data = await fetchReport1(apiEndpoint, apiToken);
-        setRows(data);
-      } catch (e) {
-        setError(e.message);
-      } finally {
-        setLoading(false);
-      }
-    };
+    fetchReport1(report1Endpoint, token).then(setRows);
+  }, []);
 
-    loadData();
-  }, [apiEndpoint, apiToken]);
-
-  if (loading) {
-    return (
-      <View style={styles.center}>
-        <ActivityIndicator size="large" />
-        <Text style={styles.info}>Loading report...</Text>
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={styles.center}>
-        <Text style={styles.error}>{error}</Text>
-      </View>
-    );
-  }
+  if (!rows) return <ActivityIndicator />;
 
   return (
-    <ScrollView style={styles.container}>
-      {rows.map((item, index) => (
-        <Report1Card key={index} item={item} />
+    <ScrollView>
+      <Text onPress={onBack}>‹ Back</Text>
+      {rows.map((r, i) => (
+        <Report1Card key={i} item={r} />
       ))}
     </ScrollView>
   );
 };
 
 export default Report1Screen;
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#f5f5f5',
-    padding: 16,
-  },
-  center: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  info: {
-    marginTop: 12,
-    color: '#666',
-  },
-  error: {
-    fontSize: 16,
-    color: '#d32f2f',
-    textAlign: 'center',
-  },
-});

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 },
+});