@dhiraj0720/report1chart 2.6.5 → 2.6.6

package/package.json

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

package/src/screens/Report2AScreen.jsx

@@ -5,8 +5,12 @@ import {
   TouchableOpacity,
   View,
   StyleSheet,
+  Modal,
+  Dimensions,
   ActivityIndicator,
 } from 'react-native';
+import { PinchGestureHandler, State } from 'react-native-gesture-handler';
+import Svg from 'react-native-svg'; // if not imported globally
 import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { getDivisions, getTable, getLine, getBar } from '../api/report2Fetcher';
 import MonthFilterModal from '../components/MonthFilterModal';
@@ -14,6 +18,7 @@ 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 = () => (
@@ -36,6 +41,8 @@ const Report2AScreen = ({ api, token, onBack }) => {
   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);
@@ -43,6 +50,7 @@ const Report2AScreen = ({ api, token, onBack }) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  
   useEffect(() => {
     if (!api?.divisions || !token) return;
 
@@ -91,7 +99,7 @@ const Report2AScreen = ({ api, token, onBack }) => {
       <View style={styles.center}>
         <Text style={styles.errorText}>{error}</Text>
         <TouchableOpacity onPress={onBack}>
-          <Text style={styles.backLink}>← Back to Reports</Text>
+          <Text style={styles.backLink}>‹ Back to Reports</Text>
         </TouchableOpacity>
       </View>
     );
@@ -101,8 +109,7 @@ const Report2AScreen = ({ api, token, onBack }) => {
     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);
@@ -112,7 +119,7 @@ const Report2AScreen = ({ api, token, onBack }) => {
       {/* HEADER WITH BACK ICON + HEADING */}
       <View style={styles.header}>
         <TouchableOpacity onPress={onBack} style={styles.backButton}>
-          <Text style={styles.backIcon}>←</Text>
+          <Text style={styles.backIcon}>‹</Text>
         </TouchableOpacity>
 
         <Text style={styles.headerTitle}>
@@ -122,28 +129,27 @@ const Report2AScreen = ({ api, token, onBack }) => {
 
       {/* FILTERS - BLACK TEXT + PROPER FUNNEL ICON */}
       <View style={styles.filterBar}>
-        <TouchableOpacity
-          onPress={() => setMonthsModal(true)}
-          style={styles.filterItem}
-        >
-          <FunnelIcon />
-          <Text style={styles.filterText}>
-            Months ({selectedMonths.length}/{months.length})
-          </Text>
+        <TouchableOpacity onPress={() => setMonthsModal(true)} style={styles.filterItem}>
+          <FilterIcon />
+          <Text style={styles.filterText}>Months ({selectedMonths.length}/{months.length})</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity
-          onPress={() => setDivisionModal(true)}
-          style={styles.filterItem}
-        >
-          <FunnelIcon />
-          <Text style={styles.filterText}>
-            {currentDivisionName}
-          </Text>
+        <TouchableOpacity onPress={() => setDivisionModal(true)} style={styles.filterItem}>
+          <FilterIcon />
+          <Text style={styles.filterText}>{currentDivisionName}</Text>
         </TouchableOpacity>
       </View>
 
       <ScrollView style={styles.content}>
+        {/* FULL SCREEN ICON ABOVE TABLE */}
+        <TouchableOpacity
+          onPress={() => setFullscreen(true)}
+          style={styles.fullScreenBtn}
+        >
+          <FullScreenIcon size={28} />
+          <Text style={styles.fullScreenText}>Full Screen View</Text>
+        </TouchableOpacity>
+
         <FrozenTableReport2A rows={filteredRows} />
 
         <View style={styles.chartContainer}>
@@ -156,6 +162,34 @@ const Report2AScreen = ({ api, token, onBack }) => {
       </ScrollView>
 
       {/* MODALS */}
+
+      {/* FULL SCREEN MODAL */}
+      <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>
+          </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)));
+              }
+            }}
+          >
+            <View style={styles.zoomView}>
+              <View style={{ transform: [{ scale: zoomScale }] }}>
+                <FrozenTableReport2A rows={table.rows} isFullscreen /> {/* all rows */}
+              </View>
+            </View>
+          </PinchGestureHandler>
+        </View>
+      </Modal>
+
       <MonthFilterModal
         visible={monthsModal}
         months={months}
@@ -264,6 +298,20 @@ const styles = StyleSheet.create({
     marginVertical: 12,
     backgroundColor: '#fff',
   },
+  fullScreenBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 12,
+    marginBottom: 12,
+  },
+  fullScreenText: { marginLeft: 8, fontSize: 16, color: '#000', fontWeight: '600' },
+
+  fullModal: { flex: 1, backgroundColor: '#fff' },
+  fullHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 16, backgroundColor: '#f8f9fa', position: 'relative' },
+  closeFull: { position: 'absolute', left: 16, fontSize: 28, color: '#000' },
+  fullTitle: { fontSize: 16, color: '#000' },
+  zoomView: { flex: 1, justifyContent: 'center', alignItems: 'center' },
 });
 
 export default Report2AScreen;

package/src/screens/icons.js

@@ -0,0 +1,34 @@
+import Svg, { Path } from 'react-native-svg';
+
+// Filter Funnel Icon (exact match to your image)
+const FilterIcon = ({ size = 20, color = '#000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M20 4H4V6.5L12 14.5L20 6.5V4Z"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M8 11V19L16 19V11"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+// Full Screen Expand Icon
+const FullScreenIcon = ({ size = 24, color = '#000' }) => (
+  <Svg width={size} height={size} 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={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);