@dhiraj0720/report1chart 2.5.8 → 2.5.9

package/package.json

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

package/src/screens/Report2AScreen.jsx

@@ -1,5 +1,13 @@
+// src/screens/Report2AScreen.jsx
 import React, { useEffect, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import {
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
 import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { getDivisions, getTable, getLine, getBar } from '../api/report2Fetcher';
 import MonthFilterModal from '../components/MonthFilterModal';
@@ -20,33 +28,92 @@ const Report2AScreen = ({ api, token, onBack }) => {
   const [table, setTable] = useState(null);
   const [line, setLine] = useState(null);
   const [bar, setBar] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
+  // Fetch divisions
   useEffect(() => {
-    getDivisions(api.divisions, token).then(d => {
-      setDivisions(d);
-      if (d.length > 0) setDivision(d[0]?.code);
-    });
-  }, [api.divisions, token]);
-
+    if (!api?.divisions || !token) return;
+
+    getDivisions(api.divisions, token)
+      .then((d) => {
+        setDivisions(d);
+        if (d.length > 0) {
+          setDivision(d[0].code);
+        }
+      })
+      .catch((err) => {
+        console.error('Failed to load divisions:', err);
+        setError('Failed to load divisions');
+        setLoading(false);
+      });
+  }, [api?.divisions, token]);
+
+  // Fetch data when division changes
   useEffect(() => {
-    if (!division) return;
+    if (!division || !api || !token) return;
+
+    setLoading(true);
+    setError(null);
 
     Promise.all([
-      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);
-      setMonths(l.labels);
-      setSelectedMonths(l.labels); // default: all selected
-    });
+      getTable(api.table, division, token).catch(() => null),
+      getLine(api.line, division, token).catch(() => null),
+      getBar(api.bar, division, token).catch(() => null),
+    ])
+      .then(([t, l, b]) => {
+        if (!t || !l || !b) {
+          setError('Failed to load report data');
+          return;
+        }
+
+        setTable(t);
+        setLine(l);
+        setBar(b);
+        setMonths(l.labels || []);
+        setSelectedMonths(l.labels || []);
+      })
+      .catch((err) => {
+        console.error('Data fetch error:', err);
+        setError('Network error or data unavailable');
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [division, api, token]);
 
-  if (!table || !line || !bar || !division) return null;
+  // Loading State
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" color="#1e88e5" />
+        <Text style={styles.loadingText}>Loading Report 2A...</Text>
+      </View>
+    );
+  }
+
+  // Error State
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.errorText}>{error}</Text>
+        <TouchableOpacity onPress={onBack}>
+          <Text style={styles.backLink}>← Go Back</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  // Safety check
+  if (!table || !line || !bar || !division) {
+    return (
+      <View style={styles.center}>
+        <Text>No data available</Text>
+      </View>
+    );
+  }
 
-  const filteredRows = table.rows.filter(r =>
+  const filteredRows = table.rows.filter((r) =>
     selectedMonths.includes(r.monthLabel)
   );
 
@@ -54,36 +121,42 @@ const Report2AScreen = ({ api, token, onBack }) => {
   const filteredBar = filterChartByMonths(bar, selectedMonths);
 
   return (
-    <ScrollView style={{ padding: 12 }}>
-      <Text onPress={onBack} style={{ fontSize: 18, marginBottom: 12 }}>
+    <ScrollView style={styles.container}>
+      {/* Header */}
+      <Text onPress={onBack} style={styles.backButton}>
         ‹ Back
       </Text>
 
-      {/* FILTER BUTTONS */}
-      <View style={{ flexDirection: 'row', marginVertical: 10, gap: 16 }}>
+      {/* Filters */}
+      <View style={styles.filterRow}>
         <TouchableOpacity onPress={() => setMonthsModal(true)}>
-          <Text style={{ fontSize: 16, color: '#1e88e5' }}>Months ⛃</Text>
+          <Text style={styles.filterText}>Months ⛃</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity onPress={() => setDivisionModal(true)}>
-          <Text style={{ fontSize: 16, color: '#1e88e5' }}>Divisions ⛃</Text>
+        <TouchableOpacity
+          onPress={() => setDivisionModal(true)}
+          style={{ marginLeft: 20 }}
+        >
+          <Text style={styles.filterText}>
+            Division: {divisions.find((d) => d.code === division)?.displayName || division}
+          </Text>
         </TouchableOpacity>
       </View>
 
-      {/* TABLE */}
+      {/* Table */}
       <FrozenTableReport2A rows={filteredRows} />
 
-      {/* LINE CHART */}
-      <View style={{ borderWidth: 1, borderColor: '#ddd', borderRadius: 8, marginVertical: 12 }}>
+      {/* Line Chart */}
+      <View style={styles.chartContainer}>
         <SvgLineChartCompact data={filteredLine} />
       </View>
 
-      {/* BAR + LINE CHART */}
-      <View style={{ borderWidth: 1, borderColor: '#ddd', borderRadius: 8, marginVertical: 12 }}>
+      {/* Bar + Budget Chart */}
+      <View style={styles.chartContainer}>
         <SvgBarLineChartCompact data={filteredBar} />
       </View>
 
-      {/* MODALS */}
+      {/* Modals */}
       <MonthFilterModal
         visible={monthsModal}
         months={months}
@@ -103,4 +176,54 @@ const Report2AScreen = ({ api, token, onBack }) => {
   );
 };
 
+const styles = StyleSheet.create({
+  container: { padding: 12, backgroundColor: '#f8f9fa' },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  loadingText: {
+    marginTop: 12,
+    fontSize: 16,
+    color: '#555',
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#d32f2f',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  backLink: {
+    fontSize: 18,
+    color: '#1e88e5',
+    fontWeight: '600',
+  },
+  backButton: {
+    fontSize: 20,
+    color: '#1e88e5',
+    marginBottom: 16,
+    fontWeight: '600',
+  },
+  filterRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 12,
+  },
+  filterText: {
+    fontSize: 16,
+    color: '#1e88e5',
+    fontWeight: '600',
+  },
+  chartContainer: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    overflow: 'hidden',
+    marginVertical: 12,
+    backgroundColor: '#fff',
+  },
+});
+
 export default Report2AScreen;