@dhiraj0720/report1chart 2.6.8 → 2.6.9

package/package.json

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

package/src/components/DivisionFilterModal.jsx

@@ -1,27 +1,106 @@
 import React from 'react';
-import { Modal, View, Text, TouchableOpacity, ScrollView } from 'react-native';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from 'react-native';
 
-const DivisionFilterModal = ({ visible, divisions, selected, onSelect, onClose }) => (
-  <Modal visible={visible} transparent animationType="fade">
-    <View style={{ flex: 1, backgroundColor: '#0008', justifyContent: 'center' }}>
-      <View style={{ backgroundColor: '#fff', margin: 20, borderRadius: 12, padding: 16 }}>
-        <Text style={{ fontWeight: '700', marginBottom: 8 }}>Select Division</Text>
+const DivisionFilterModal = ({ visible, divisions, selected, onSelect, onClose }) => {
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay}>
+          <TouchableWithoutFeedback>
+            <View style={styles.modalContent}>
+              {/* Header with Close Icon */}
+              <View style={styles.header}>
+                <Text style={styles.title}>Select Division</Text>
+                <TouchableOpacity onPress={onClose}>
+                  <Text style={styles.closeIcon}>✕</Text>
+                </TouchableOpacity>
+              </View>
 
-        <ScrollView style={{ maxHeight: 260 }}>
-          {divisions.map(d => (
-            <TouchableOpacity
-              key={d.code}
-              onPress={() => { onSelect(d.code); onClose(); }}
-            >
-              <Text style={{ padding: 8, fontWeight: selected === d.code ? '700' : '400' }}>
-                {selected === d.code ? '✓ ' : ''}{d.displayName}
-              </Text>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-    </View>
-  </Modal>
-);
+              <ScrollView style={styles.list}>
+                {divisions.map(d => (
+                  <TouchableOpacity
+                    key={d.code}
+                    onPress={() => {
+                      onSelect(d.code);
+                      onClose();
+                    }}
+                    style={styles.item}
+                  >
+                    <Text style={[
+                      styles.itemText,
+                      selected === d.code && styles.selectedText
+                    ]}>
+                      {selected === d.code ? '✓ ' : '  '}{d.displayName}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </ScrollView>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
 
-export default DivisionFilterModal;
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '85%',
+    maxHeight: '80%',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 10,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#000',
+  },
+  closeIcon: {
+    fontSize: 24,
+    color: '#000',
+    fontWeight: '300',
+  },
+  list: {
+    maxHeight: 300,
+  },
+  item: {
+    paddingVertical: 12,
+    paddingHorizontal: 4,
+  },
+  itemText: {
+    fontSize: 16,
+    color: '#333',
+  },
+  selectedText: {
+    fontWeight: '700',
+    color: '#000',
+  },
+});
+
+export default DivisionFilterModal;

package/src/components/MonthFilterModal.jsx

@@ -1,8 +1,16 @@
 import React, { useState } from 'react';
-import { Modal, View, Text, TouchableOpacity, ScrollView } from 'react-native';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from 'react-native';
 
 const MonthFilterModal = ({ visible, months, selected, onApply, onClose }) => {
-  const [local, setLocal] = useState(selected);
+  const [local, setLocal] = useState(selected || []);
 
   const toggle = (m) => {
     if (local.includes(m)) {
@@ -12,36 +20,144 @@ const MonthFilterModal = ({ visible, months, selected, onApply, onClose }) => {
     }
   };
 
+  const selectAll = () => setLocal(months);
+  const clearAll = () => setLocal([]);
+
   return (
     <Modal visible={visible} transparent animationType="fade">
-      <View style={{ flex: 1, backgroundColor: '#0008', justifyContent: 'center' }}>
-        <View style={{ backgroundColor: '#fff', margin: 20, borderRadius: 12, padding: 16 }}>
-          <Text style={{ fontWeight: '700', marginBottom: 8 }}>Select Months</Text>
-
-          <TouchableOpacity onPress={() => setLocal(months)}>
-            <Text style={{ color: '#1e88e5', marginBottom: 8 }}>Select All</Text>
-          </TouchableOpacity>
-
-          <ScrollView style={{ maxHeight: 260 }}>
-            {months.map(m => (
-              <TouchableOpacity key={m} onPress={() => toggle(m)}>
-                <Text style={{ padding: 8, fontWeight: local.includes(m) ? '700' : '400' }}>
-                  {local.includes(m) ? '✓ ' : ''}{m}
-                </Text>
+      {/* Tap outside to close */}
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay}>
+          <TouchableWithoutFeedback>
+            <View style={styles.modalContent}>
+              {/* Header with Close Icon */}
+              <View style={styles.header}>
+                <Text style={styles.title}>Select Months</Text>
+                <TouchableOpacity onPress={onClose}>
+                  <Text style={styles.closeIcon}>✕</Text>
+                </TouchableOpacity>
+              </View>
+
+              {/* Select All / Clear All */}
+              <View style={styles.actionsRow}>
+                <TouchableOpacity onPress={selectAll}>
+                  <Text style={styles.actionTextSelect}>Select All</Text>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={clearAll}>
+                  <Text style={styles.actionTextClear}>Clear All</Text>
+                </TouchableOpacity>
+              </View>
+
+              {/* Month List */}
+              <ScrollView style={styles.list}>
+                {months.map(m => (
+                  <TouchableOpacity key={m} onPress={() => toggle(m)} style={styles.item}>
+                    <Text style={[
+                      styles.itemText,
+                      local.includes(m) && styles.selectedText
+                    ]}>
+                      {local.includes(m) ? '✓ ' : '  '}{m}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </ScrollView>
+
+              {/* Apply Button */}
+              <TouchableOpacity
+                style={styles.applyBtn}
+                onPress={() => {
+                  onApply(local);
+                  onClose();
+                }}
+              >
+                <Text style={styles.applyText}>Apply</Text>
               </TouchableOpacity>
-            ))}
-          </ScrollView>
-
-          <TouchableOpacity
-            style={{ marginTop: 12, alignSelf: 'flex-end' }}
-            onPress={() => { onApply(local); onClose(); }}
-          >
-            <Text style={{ fontWeight: '700' }}>Apply</Text>
-          </TouchableOpacity>
+            </View>
+          </TouchableWithoutFeedback>
         </View>
-      </View>
+      </TouchableWithoutFeedback>
     </Modal>
   );
 };
 
-export default MonthFilterModal;
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '85%',
+    maxHeight: '80%',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 10,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#000',
+  },
+  closeIcon: {
+    fontSize: 24,
+    color: '#000',
+    fontWeight: '300',
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+  },
+  actionTextSelect: {
+    color: '#1e88e5',
+    fontWeight: '600',
+    fontSize: 15,
+  },
+  actionTextClear: {
+    color: '#d32f2f',
+    fontWeight: '600',
+    fontSize: 15,
+  },
+  list: {
+    maxHeight: 300,
+  },
+  item: {
+    paddingVertical: 10,
+    paddingHorizontal: 4,
+  },
+  itemText: {
+    fontSize: 16,
+    color: '#333',
+  },
+  selectedText: {
+    fontWeight: '700',
+    color: '#000',
+  },
+  applyBtn: {
+    marginTop: 16,
+    alignSelf: 'flex-end',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    backgroundColor: '#1e88e5',
+    borderRadius: 8,
+  },
+  applyText: {
+    color: '#fff',
+    fontWeight: '700',
+    fontSize: 16,
+  },
+});
+
+export default MonthFilterModal;

package/src/screens/Report3AScreen.jsx

@@ -4,9 +4,12 @@ import {
   Text,
   TouchableOpacity,
   View,
-  ActivityIndicator,
   StyleSheet,
+  Modal,
+  Dimensions,
+  ActivityIndicator,
 } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
 import {
   fetchReport3Table,
   fetchReport3Line,
@@ -19,28 +22,26 @@ import SvgBarLineChartCompact3A from '../components/SvgBarLineChartCompact3A';
 
 const Report3AScreen = ({ api, token, onBack }) => {
   const [monthsModal, setMonthsModal] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+
   const [months, setMonths] = useState([]);
   const [selectedMonths, setSelectedMonths] = useState([]);
   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 || !token) return;
 
     setLoading(true);
-    setError(null);
 
     Promise.all([
-      fetchReport3Table(api.table, token).catch(() => null),
-      fetchReport3Line(api.line, token).catch(() => null),
-      fetchReport3Bar(api.bar, token).catch(() => null),
+      fetchReport3Table(api.table, token),
+      fetchReport3Line(api.line, token),
+      fetchReport3Bar(api.bar, token),
     ])
       .then(([t, l, b]) => {
-        if (!t || !l || !b) throw new Error('Failed to load data');
-
         setTable(t);
         setLine(l);
         setBar(b);
@@ -50,11 +51,10 @@ const Report3AScreen = ({ api, token, onBack }) => {
           .map(r => r.monthLabel);
 
         setMonths(monthLabels);
-        setSelectedMonths(monthLabels); // default: all selected
+        setSelectedMonths(monthLabels);
       })
       .catch((err) => {
         console.error(err);
-        setError('Failed to load Report 3A data');
       })
       .finally(() => setLoading(false));
   }, [api, token]);
@@ -62,19 +62,7 @@ const Report3AScreen = ({ api, token, onBack }) => {
   if (loading) {
     return (
       <View style={styles.center}>
-        <ActivityIndicator size="large" color="#1e88e5" />
-        <Text style={styles.loadingText}>Loading Report 3A...</Text>
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={styles.center}>
-        <Text style={styles.errorText}>{error}</Text>
-        <TouchableOpacity onPress={onBack}>
-          <Text style={styles.backLink}>← Go Back</Text>
-        </TouchableOpacity>
+        <ActivityIndicator size="large" color="#000" />
       </View>
     );
   }
@@ -103,36 +91,87 @@ const Report3AScreen = ({ api, token, onBack }) => {
   const filteredLine = filterChart(line);
   const filteredBar = filterChart(bar);
 
+  const { width, height } = Dimensions.get('window');
+  const isLandscape = width > height;
+
   return (
-    <ScrollView style={styles.container}>
-      <Text onPress={onBack} style={styles.backButton}>‹ Back</Text>
-
-      <Text style={styles.screenTitle}>Ulaştırma Hizmetleri Analizi (A)</Text>
-
-      {/* Month Filter */}
-      <TouchableOpacity
-        onPress={() => setMonthsModal(true)}
-        style={styles.filterButton}
-      >
-        <Text style={styles.filterText}>
-          Months ({selectedMonths.length}/{months.length}) ⛃
-        </Text>
-      </TouchableOpacity>
-
-      {/* Table */}
-      <FrozenTableReport3A rows={filteredRows} />
-
-      {/* Line Chart - Yük Adet */}
-      <View style={styles.chartWrapper}>
-        <SvgLineChartCompact3A data={filteredLine} />
+    <View style={styles.container}>
+      {/* HEADER WITH BACK ICON */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onBack}>
+          <Text style={styles.backIcon}>←</Text>
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Ulaştırma Hizmetleri Analizi (A)</Text>
       </View>
 
-      {/* Bar + Budget Chart - Ciro */}
-      <View style={styles.chartWrapper}>
-        <SvgBarLineChartCompact3A data={filteredBar} />
+      {/* FILTER WITH FUNNEL ICON */}
+      <View style={styles.filterBar}>
+        <TouchableOpacity onPress={() => setMonthsModal(true)} style={styles.filterItem}>
+          <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>
       </View>
 
-      {/* Modal */}
+      <ScrollView style={styles.content}>
+        {/* FULL SCREEN BUTTON */}
+        <TouchableOpacity onPress={() => setFullscreen(true)} style={styles.fullScreenBtn}>
+          <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>
+
+        {/* TABLE */}
+        <FrozenTableReport3A rows={filteredRows} />
+
+        {/* CHARTS */}
+        <View style={styles.chartContainer}>
+          <SvgLineChartCompact3A data={filteredLine} />
+        </View>
+
+        <View style={styles.chartContainer}>
+          <SvgBarLineChartCompact3A data={filteredBar} />
+        </View>
+      </ScrollView>
+
+      {/* FULL SCREEN MODAL */}
+      <Modal visible={fullscreen} supportedOrientations={['portrait', 'landscape']} animationType="fade">
+        <View style={styles.fullModal}>
+          <View style={styles.fullHeader}>
+            <Text style={styles.fullHintText}>
+              Rotate device • Pinch to zoom
+            </Text>
+            <TouchableOpacity onPress={() => setFullscreen(false)}>
+              <Text style={styles.closeBtn}>✕</Text>
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView
+            maximumZoomScale={3}
+            minimumZoomScale={0.7}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.zoomContent}
+            pinchGestureEnabled={true}
+            bouncesZoom={true}
+          >
+            <View style={[
+              styles.tableWrapper,
+              isLandscape && styles.landscapeFit
+            ]}>
+              <FrozenTableReport3A rows={table.rows} isFullscreen />
+            </View>
+          </ScrollView>
+        </View>
+      </Modal>
+
+      {/* MONTH FILTER MODAL */}
       <MonthFilterModal
         visible={monthsModal}
         months={months}
@@ -140,21 +179,51 @@ const Report3AScreen = ({ api, token, onBack }) => {
         onApply={setSelectedMonths}
         onClose={() => setMonthsModal(false)}
       />
-    </ScrollView>
+    </View>
   );
 };
 
 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' },
-  screenTitle: { fontSize: 18, fontWeight: '700', textAlign: 'center', marginVertical: 12 },
-  filterButton: { alignSelf: 'flex-start', marginVertical: 12 },
-  filterText: { fontSize: 16, color: '#1e88e5', fontWeight: '600' },
-  chartWrapper: {
+  container: { flex: 1, backgroundColor: '#f8f9fa' },
+  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 18,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderColor: '#eee',
+  },
+  backIcon: { fontSize: 28, color: '#000' },
+  headerTitle: { fontSize: 19, fontWeight: '700', color: '#000', flex: 1, textAlign: 'center' },
+
+  filterBar: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderColor: '#eee',
+  },
+  filterItem: { flexDirection: 'row', alignItems: 'center' },
+  filterText: { fontSize: 16, color: '#000', fontWeight: '600', marginLeft: 8 },
+
+  fullScreenBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 14,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    marginVertical: 12,
+  },
+  fullScreenText: { marginLeft: 10, fontSize: 16, color: '#000', fontWeight: '600' },
+
+  content: { flex: 1, padding: 12 },
+  chartContainer: {
     borderWidth: 1,
     borderColor: '#ddd',
     borderRadius: 10,
@@ -162,6 +231,44 @@ const styles = StyleSheet.create({
     marginVertical: 12,
     backgroundColor: '#fff',
   },
+
+  fullModal: { flex: 1, backgroundColor: '#fff' },
+  fullHeader: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    backgroundColor: '#f8f8f8',
+    borderBottomWidth: 1,
+    borderColor: '#ddd',
+  },
+  fullHintText: {
+    fontSize: 16,
+    color: '#000',
+    fontWeight: '600',
+    textAlign: 'center',
+    flex: 1,
+  },
+  closeBtn: { fontSize: 28, color: '#000', paddingLeft: 20 },
+
+  zoomContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  tableWrapper: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  landscapeFit: {
+    transform: [{ scale: 1.4 }],
+    maxWidth: '100%',
+  },
 });
 
 export default Report3AScreen;