@dhiraj0720/report1chart 2.6.6 → 2.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "main": "src/index.jsx",
   "scripts": {
     "test": "echo 'No tests'"
@@ -8,6 +8,7 @@
   "dependencies": {
     "axios": "^1.13.2",
     "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.1",
     "react-native-svg": "^15.15.1"
   },
   "peerDependencies": {

package/src/screens/Report2AScreen.jsx

@@ -8,9 +8,9 @@ import {
   Modal,
   Dimensions,
   ActivityIndicator,
+  Alert,
 } from 'react-native';
-import { PinchGestureHandler, State } from 'react-native-gesture-handler';
-import Svg from 'react-native-svg'; // if not imported globally
+import Svg, { Path } from 'react-native-svg';
 import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { getDivisions, getTable, getLine, getBar } from '../api/report2Fetcher';
 import MonthFilterModal from '../components/MonthFilterModal';
@@ -18,57 +18,35 @@ import DivisionFilterModal from '../components/DivisionFilterModal';
 import FrozenTableReport2A from '../components/FrozenTableReport2A';
 import SvgLineChartCompact from '../components/SvgLineChartCompact';
 import SvgBarLineChartCompact from '../components/SvgBarLineChartCompact';
-import { FilterIcon, FullScreenIcon } from './icons'; // or inline
-
-// Proper SVG Funnel Icon Component (clean black filter icon)
-const FunnelIcon = () => (
-  <View style={styles.funnelIcon}>
-    <View style={styles.funnelTop} />
-    <View style={styles.funnelBody} />
-    <View style={styles.funnelLines}>
-      <View style={styles.line1} />
-      <View style={styles.line2} />
-      <View style={styles.line3} />
-    </View>
-  </View>
-);
 
 const Report2AScreen = ({ api, token, onBack }) => {
   const [monthsModal, setMonthsModal] = useState(false);
   const [divisionModal, setDivisionModal] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [zoomScale, setZoomScale] = useState(1);
 
   const [months, setMonths] = useState([]);
   const [selectedMonths, setSelectedMonths] = useState([]);
   const [divisions, setDivisions] = useState([]);
   const [division, setDivision] = useState(null);
-  const [fullscreen, setFullscreen] = useState(false);
-  const [zoomScale, setZoomScale] = useState(1);
 
   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);
 
-  
   useEffect(() => {
-    if (!api?.divisions || !token) return;
-
     getDivisions(api.divisions, token)
       .then((d) => {
         setDivisions(d);
         if (d.length > 0) setDivision(d[0].code);
       })
-      .catch(() => setError('Failed to load divisions'))
-      .finally(() => setLoading(false));
-  }, [api?.divisions, token]);
+      .catch(() => Alert.alert('Error', 'Failed to load divisions'));
+  }, [api.divisions, token]);
 
   useEffect(() => {
-    if (!division || !api || !token) return;
-
+    if (!division) return;
     setLoading(true);
-    setError(null);
-
     Promise.all([
       getTable(api.table, division, token),
       getLine(api.line, division, token),
@@ -81,61 +59,78 @@ const Report2AScreen = ({ api, token, onBack }) => {
         setMonths(l.labels || []);
         setSelectedMonths(l.labels || []);
       })
-      .catch(() => setError('Failed to load data'))
       .finally(() => setLoading(false));
-  }, [division, api, token]);
+  }, [division]);
 
   if (loading) {
     return (
       <View style={styles.center}>
         <ActivityIndicator size="large" color="#000" />
-        <Text style={styles.loadingText}>Loading...</Text>
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={styles.center}>
-        <Text style={styles.errorText}>{error}</Text>
-        <TouchableOpacity onPress={onBack}>
-          <Text style={styles.backLink}>‹ Back to Reports</Text>
-        </TouchableOpacity>
       </View>
     );
   }
 
-  if (!table || !line || !bar || !division) {
-    return <View style={styles.center}><Text>No data available</Text></View>;
-  }
+  const currentDivisionName = divisions.find(d => d.code === division)?.displayName || 'Division';
 
-const currentDivisionName = divisions.find(d => d.code === division)?.displayName || 'Division';
   const filteredRows = table.rows.filter(r => selectedMonths.includes(r.monthLabel));
   const filteredLine = filterChartByMonths(line, selectedMonths);
   const filteredBar = filterChartByMonths(bar, selectedMonths);
 
+  // Detect landscape
+  const { width, height } = Dimensions.get('window');
+  const isLandscape = width > height;
+
   return (
     <View style={styles.container}>
-      {/* HEADER WITH BACK ICON + HEADING */}
+      {/* HEADER */}
       <View style={styles.header}>
-        <TouchableOpacity onPress={onBack} style={styles.backButton}>
-          <Text style={styles.backIcon}>‹</Text>
+        <TouchableOpacity onPress={onBack}>
+          <Text style={styles.backIcon}>←</Text>
         </TouchableOpacity>
-
-        <Text style={styles.headerTitle}>
-          {currentDivisionName} Transportation
-        </Text>
+        <Text style={styles.headerTitle}>{currentDivisionName} Transportation</Text>
       </View>
 
-      {/* FILTERS - BLACK TEXT + PROPER FUNNEL ICON */}
+      {/* FILTERS */}
       <View style={styles.filterBar}>
         <TouchableOpacity onPress={() => setMonthsModal(true)} style={styles.filterItem}>
-          <FilterIcon />
+          {/* FILTER FUNNEL ICON */}
+          <Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
+            <Path
+              d="M20 4H4V6.5L12 14.5L20 6.5V4Z"
+              stroke="#000"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <Path
+              d="M8 11V19L16 19V11"
+              stroke="#000"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </Svg>
           <Text style={styles.filterText}>Months ({selectedMonths.length}/{months.length})</Text>
         </TouchableOpacity>
 
         <TouchableOpacity onPress={() => setDivisionModal(true)} style={styles.filterItem}>
-          <FilterIcon />
+          {/* SAME FILTER ICON */}
+          <Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
+            <Path
+              d="M20 4H4V6.5L12 14.5L20 6.5V4Z"
+              stroke="#000"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <Path
+              d="M8 11V19L16 19V11"
+              stroke="#000"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </Svg>
           <Text style={styles.filterText}>{currentDivisionName}</Text>
         </TouchableOpacity>
       </View>
@@ -143,11 +138,24 @@ const currentDivisionName = divisions.find(d => d.code === division)?.displayNam
       <ScrollView style={styles.content}>
         {/* FULL SCREEN ICON ABOVE TABLE */}
         <TouchableOpacity
-          onPress={() => setFullscreen(true)}
+          onPress={() => {
+            setFullscreen(true);
+            setZoomScale(1);
+            Alert.alert('Tip', 'Rotate your device to landscape for full view');
+          }}
           style={styles.fullScreenBtn}
         >
-          <FullScreenIcon size={28} />
-          <Text style={styles.fullScreenText}>Full Screen View</Text>
+          {/* FULL SCREEN EXPAND ICON */}
+          <Svg width={28} height={28} viewBox="0 0 24 24" fill="none">
+            <Path
+              d="M8 3H5C4.44772 3 4 3.44772 4 4V8M20 8V4C20 3.44772 19.5523 3 19 3H16M16 21H19C19.5523 21 20 20.5523 20 20V16M4 16V20C4 20.5523 4.44772 21 5 21H8"
+              stroke="#000"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </Svg>
+          <Text style={styles.fullScreenText}>Full Screen Table</Text>
         </TouchableOpacity>
 
         <FrozenTableReport2A rows={filteredRows} />
@@ -161,60 +169,39 @@ const currentDivisionName = divisions.find(d => d.code === division)?.displayNam
         </View>
       </ScrollView>
 
-      {/* MODALS */}
-
-      {/* FULL SCREEN MODAL */}
+      {/* FULL SCREEN MODAL - SIMPLE ZOOM */}
       <Modal visible={fullscreen} supportedOrientations={['portrait', 'landscape']}>
         <View style={styles.fullModal}>
           <View style={styles.fullHeader}>
             <TouchableOpacity onPress={() => setFullscreen(false)}>
               <Text style={styles.closeFull}>✕</Text>
             </TouchableOpacity>
-            <Text style={styles.fullTitle}>Rotate device to landscape for best view</Text>
+            <Text style={styles.fullHint}>Rotate to landscape • Pinch to zoom</Text>
           </View>
 
-          <PinchGestureHandler
-            onGestureEvent={(e) => setZoomScale(e.nativeEvent.scale)}
-            onHandlerStateChange={(e) => {
-              if (e.nativeEvent.state === State.END) {
-                setZoomScale(Math.max(0.8, Math.min(e.nativeEvent.scale, 3)));
-              }
-            }}
+          <ScrollView
+            maximumZoomScale={3}
+            minimumZoomScale={0.8}
+            centerContent
+            contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}
           >
-            <View style={styles.zoomView}>
-              <View style={{ transform: [{ scale: zoomScale }] }}>
-                <FrozenTableReport2A rows={table.rows} isFullscreen /> {/* all rows */}
-              </View>
+            <View style={{ transform: [{ scale: isLandscape ? 1.4 : 1 }] }}>
+              <FrozenTableReport2A rows={table.rows} isFullscreen />
             </View>
-          </PinchGestureHandler>
+          </ScrollView>
         </View>
       </Modal>
 
-      <MonthFilterModal
-        visible={monthsModal}
-        months={months}
-        selected={selectedMonths}
-        onApply={setSelectedMonths}
-        onClose={() => setMonthsModal(false)}
-      />
-
-      <DivisionFilterModal
-        visible={divisionModal}
-        divisions={divisions}
-        selected={division}
-        onSelect={setDivision}
-        onClose={() => setDivisionModal(false)}
-      />
+      {/* Existing modals */}
+      <MonthFilterModal visible={monthsModal} months={months} selected={selectedMonths} onApply={setSelectedMonths} onClose={() => setMonthsModal(false)} />
+      <DivisionFilterModal visible={divisionModal} divisions={divisions} selected={division} onSelect={setDivision} onClose={() => setDivisionModal(false)} />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#f8f9fa' },
-  center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
-  loadingText: { marginTop: 12, fontSize: 16, color: '#000' },
-  errorText: { fontSize: 16, color: '#d32f2f', textAlign: 'center', marginBottom: 20 },
-  backLink: { fontSize: 18, color: '#000', fontWeight: '600' },
+  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
 
   header: {
     flexDirection: 'row',
@@ -225,15 +212,8 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderColor: '#eee',
   },
-  backButton: { paddingRight: 12 },
-  backIcon: { fontSize: 28, color: '#000', fontWeight: '300' },
-  headerTitle: {
-    fontSize: 19,
-    fontWeight: '700',
-    color: '#000',
-    flex: 1,
-    textAlign: 'center',
-  },
+  backIcon: { fontSize: 28, color: '#000' },
+  headerTitle: { fontSize: 19, fontWeight: '700', color: '#000', flex: 1, textAlign: 'center' },
 
   filterBar: {
     flexDirection: 'row',
@@ -243,75 +223,27 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderColor: '#eee',
   },
-  filterItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  filterText: {
-    fontSize: 16,
-    color: '#000',
-    fontWeight: '600',
-    marginLeft: 8,
-  },
-
-  // Proper Funnel Icon (SVG-style with Views)
-  funnelIcon: {
-    width: 20,
-    height: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  funnelTop: {
-    width: 16,
-    height: 4,
-    backgroundColor: '#000',
-    borderRadius: 2,
-  },
-  funnelBody: {
-    width: 10,
-    height: 10,
-    borderLeftWidth: 4,
-    borderRightWidth: 4,
-    borderBottomWidth: 8,
-    borderColor: 'transparent',
-    borderBottomColor: '#000',
-    marginTop: -2,
-  },
-  funnelLines: {
-    position: 'absolute',
-    top: 6,
-    left: 4,
-    right: 4,
-  },
-  line1: { height: 1, backgroundColor: '#000', marginVertical: 2 },
-  line2: { height: 1, backgroundColor: '#000', marginVertical: 2 },
-  line3: { height: 1, backgroundColor: '#000', marginVertical: 2 },
+  filterItem: { flexDirection: 'row', alignItems: 'center' },
+  filterText: { fontSize: 16, color: '#000', fontWeight: '600', marginLeft: 8 },
 
-  content: { flex: 1, padding: 12 },
-  chartContainer: {
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 10,
-    overflow: 'hidden',
-    marginVertical: 12,
-    backgroundColor: '#fff',
-  },
   fullScreenBtn: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 12,
-    marginBottom: 12,
+    padding: 14,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    marginVertical: 12,
   },
-  fullScreenText: { marginLeft: 8, fontSize: 16, color: '#000', fontWeight: '600' },
+  fullScreenText: { marginLeft: 10, fontSize: 16, color: '#000', fontWeight: '600' },
+
+  content: { flex: 1, padding: 12 },
+  chartContainer: { borderWidth: 1, borderColor: '#ddd', borderRadius: 10, overflow: 'hidden', marginVertical: 12, backgroundColor: '#fff' },
 
   fullModal: { flex: 1, backgroundColor: '#fff' },
-  fullHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 16, backgroundColor: '#f8f9fa', position: 'relative' },
+  fullHeader: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 16, backgroundColor: '#f8f8f8', position: 'relative' },
   closeFull: { position: 'absolute', left: 16, fontSize: 28, color: '#000' },
-  fullTitle: { fontSize: 16, color: '#000' },
-  zoomView: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  fullHint: { fontSize: 15, color: '#000' },
 });
 
 export default Report2AScreen;