@dhiraj0720/report1chart 2.6.3 → 2.6.5

package/package.json

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

package/src/components/FrozenTableReport1A.jsx

@@ -1,33 +1,42 @@
 import React from 'react';
-import { View, Text, ScrollView, StyleSheet, Dimensions } from 'react-native';
-
-const { width, height } = Dimensions.get('window');
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
 
 const Arrow = ({ value }) => (
-  <Text style={[styles.arrow, value >= 0 ? styles.up : styles.down]}>
+  <Text
+    style={[
+      styles.arrow,
+      value >= 0 ? styles.up : styles.down,
+    ]}
+  >
     {value >= 0 ? '↑' : '↓'} {Math.abs(value)}%
   </Text>
 );
 
 const Cell = ({ children, bold, frozen }) => (
-  <View style={[styles.cell, frozen && styles.frozenCell]}>
-    <Text style={[styles.text, bold && styles.bold]} numberOfLines={1}>
+  <View
+    style={[
+      styles.cell,
+      frozen && styles.frozenCell,
+    ]}
+  >
+    <Text
+      numberOfLines={1}
+      ellipsizeMode="tail"
+      style={[
+        styles.text,
+        bold && styles.bold,
+      ]}
+    >
       {children}
     </Text>
   </View>
 );
 
-const FrozenTableReport1A = ({ rows, isFullscreen = false }) => {
-  const isLandscape = width > height;
-
-  // Auto-adjust cell width in fullscreen landscape
-  const cellWidth = isFullscreen && isLandscape ? 160 : 110;
-  const frozenWidth = isFullscreen && isLandscape ? 200 : 150;
-  const fontSize = isFullscreen ? 14 : 12;
-
+const FrozenTableReport1A = ({ rows }) => {
   return (
     <View style={styles.container}>
-      <View style={[styles.frozen, { width: frozenWidth }]}>
+      {/* LEFT FROZEN COLUMN */}
+      <View style={styles.frozen}>
         <Cell bold frozen>FAALİYET</Cell>
         {rows.map((r, i) => (
           <Cell key={i} frozen bold>
@@ -36,6 +45,7 @@ const FrozenTableReport1A = ({ rows, isFullscreen = false }) => {
         ))}
       </View>
 
+      {/* SCROLLABLE COLUMNS */}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         <View>
           <View style={styles.headerRow}>
@@ -48,10 +58,10 @@ const FrozenTableReport1A = ({ rows, isFullscreen = false }) => {
 
           {rows.map((r, i) => (
             <View key={i} style={styles.row}>
-              <Cell>{r.actual2024?.toLocaleString()}</Cell>
-              <Cell>{r.actual2025?.toLocaleString()}</Cell>
+              <Cell>{r.actual2024}</Cell>
+              <Cell>{r.actual2025}</Cell>
               <Cell><Arrow value={r.actualChangePercent} /></Cell>
-              <Cell>{r.budget2025?.toLocaleString()}</Cell>
+              <Cell>{r.budget2025}</Cell>
               <Cell><Arrow value={r.budgetVariancePercent} /></Cell>
             </View>
           ))}
@@ -61,6 +71,11 @@ const FrozenTableReport1A = ({ rows, isFullscreen = false }) => {
   );
 };
 
+export default FrozenTableReport1A;
+
+/* ======================
+   STYLES (COMPACT)
+====================== */
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
@@ -70,24 +85,55 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     backgroundColor: '#fff',
   },
-  frozen: { backgroundColor: '#f5f7fa' },
-  frozenCell: { alignItems: 'flex-start', paddingHorizontal: 10 },
-  headerRow: { flexDirection: 'row', backgroundColor: '#f0f0f0' },
-  row: { flexDirection: 'row' },
+
+  frozen: {
+    width: 150,               // 👈 fixed width
+    backgroundColor: '#f5f7fa',
+  },
+
+  frozenCell: {
+    alignItems: 'flex-start',
+    paddingHorizontal: 8,
+  },
+
+  headerRow: {
+    flexDirection: 'row',
+    backgroundColor: '#f0f0f0',
+  },
+
+  row: {
+    flexDirection: 'row',
+  },
+
   cell: {
-    width: 110,
-    paddingVertical: 8,
+    width: 110,               // 👈 compact width
+    paddingVertical: 6,       // 👈 reduced height
     paddingHorizontal: 6,
     borderBottomWidth: 1,
     borderColor: '#eee',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  text: { fontSize: 12, color: '#222' },
-  bold: { fontWeight: '700' },
-  arrow: { fontSize: 12, fontWeight: '700' },
-  up: { color: '#2e7d32' },
-  down: { color: '#d32f2f' },
-});
 
-export default FrozenTableReport1A;
+  text: {
+    fontSize: 12,             // 👈 smaller text
+    color: '#222',
+  },
+
+  bold: {
+    fontWeight: '700',
+  },
+
+  arrow: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+
+  up: {
+    color: '#2e7d32',
+  },
+
+  down: {
+    color: '#d32f2f',
+  },
+});

package/src/screens/Report1AScreen.jsx

@@ -1,52 +1,45 @@
 import React, { useEffect, useState } from 'react';
-import {
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  Modal,
-  View,
-  StyleSheet,
-  Dimensions,
-  Alert,
-} from 'react-native';
-import { PinchGestureHandler, State } from 'react-native-gesture-handler';
+import { ScrollView, Text, TouchableOpacity } from 'react-native';
 import fetchReport1 from '../api/report1Fetcher';
 import FrozenTableReport1A from '../components/FrozenTableReport1A';
 import Report1Card from '../components/Report1Card';
+import FullScreenTableModal from '../components/FullScreenTableModal';
 
 const Report1AScreen = ({ endpoint, token, onBack }) => {
   const [rows, setRows] = useState([]);
   const [fullscreen, setFullscreen] = useState(false);
-  const [scale, setScale] = useState(1);
 
   useEffect(() => {
     fetchReport1(endpoint, token).then(setRows);
-  }, [endpoint, token]);
-
-  const openFullscreen = () => {
-    setFullscreen(true);
-    setScale(1);
-  };
-
-  const closeFullscreen = () => {
-    setFullscreen(false);
-    setScale(1);
-  };
+  }, []);
 
   return (
     <>
-      <ScrollView style={{ padding: 16, backgroundColor: '#f8f9fa' }}>
-        <Text onPress={onBack} style={styles.backButton}>‹ Back</Text>
-
-        <Text style={styles.title}>PERFORMANS RAPORU (USD)</Text>
-
-        <TouchableOpacity onPress={openFullscreen} style={styles.fullscreenBtn}>
-          <Text style={styles.fullscreenText}>⤢ Full Screen</Text>
+      <ScrollView style={{ padding: 16 }}>
+        <Text onPress={onBack} style={{ marginBottom: 12 }}>‹ Back</Text>
+
+        <Text style={{ fontSize: 18, fontWeight: '700', marginBottom: 12 }}>
+          PERFORMANS RAPORU (USD)
+        </Text>
+
+        {/* FULLSCREEN BUTTON */}
+        <TouchableOpacity
+          onPress={() => setFullscreen(true)}
+          style={{
+            alignSelf: 'flex-end',
+            marginBottom: 8,
+            padding: 6,
+          }}
+        >
+          <Text style={{ fontWeight: '700' }}>⤢ Full Screen</Text>
         </TouchableOpacity>
 
         <FrozenTableReport1A rows={rows} />
 
-        <Text style={styles.sectionTitle}>Individual Reports</Text>
+        {/* BELOW TABLE → CARDS */}
+        <Text style={{ marginVertical: 12, fontWeight: '700' }}>
+          Individual Reports
+        </Text>
 
         {rows.map((r, i) => (
           <Report1Card key={i} item={r} />
@@ -54,85 +47,13 @@ const Report1AScreen = ({ endpoint, token, onBack }) => {
       </ScrollView>
 
       {/* FULL SCREEN MODAL */}
-      <Modal
+      <FullScreenTableModal
         visible={fullscreen}
-        supportedOrientations={['portrait', 'landscape']}
-        onRequestClose={closeFullscreen}
-      >
-        <View style={styles.modalContainer}>
-          {/* Header */}
-          <View style={styles.modalHeader}>
-            <TouchableOpacity
-              onPress={() =>
-                Alert.alert(
-                  'Rotate Device',
-                  'For best view, please rotate your device to landscape mode ↻',
-                  [{ text: 'OK' }]
-                )
-              }
-            >
-              <Text style={styles.rotateHint}>↻ Rotate Device</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={closeFullscreen}>
-              <Text style={styles.closeBtn}>✕ Close</Text>
-            </TouchableOpacity>
-          </View>
-
-          {/* Zoomable Table */}
-          <PinchGestureHandler
-            onGestureEvent={(e) => setScale(e.nativeEvent.scale)}
-            onHandlerStateChange={(e) => {
-              if (e.nativeEvent.state === State.END) {
-                let newScale = e.nativeEvent.scale;
-                newScale = Math.max(0.8, Math.min(newScale, 3));
-                setScale(newScale);
-              }
-            }}
-          >
-            <View style={styles.zoomContainer}>
-              <View style={{ transform: [{ scale }] }}>
-                <FrozenTableReport1A rows={rows} isFullscreen />
-              </View>
-            </View>
-          </PinchGestureHandler>
-        </View>
-      </Modal>
+        rows={rows}
+        onClose={() => setFullscreen(false)}
+      />
     </>
   );
 };
 
-const styles = StyleSheet.create({
-  backButton: { fontSize: 20, color: '#1e88e5', marginBottom: 16, fontWeight: '600' },
-  title: { fontSize: 18, fontWeight: '700', textAlign: 'center', marginVertical: 16 },
-  fullscreenBtn: {
-    alignSelf: 'flex-end',
-    backgroundColor: '#1e88e5',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    marginBottom: 16,
-  },
-  fullscreenText: { color: '#fff', fontWeight: '700' },
-  sectionTitle: { fontSize: 16, fontWeight: '700', marginVertical: 16 },
-
-  modalContainer: { flex: 1, backgroundColor: '#000' },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 16,
-    backgroundColor: '#111',
-    borderBottomWidth: 1,
-    borderColor: '#333',
-  },
-  rotateHint: { color: '#fff', fontSize: 16, fontWeight: '700' },
-  closeBtn: { color: '#fff', fontSize: 28, fontWeight: '300' },
-  zoomContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default Report1AScreen;
+export default Report1AScreen;

package/src/screens/Report2AScreen.jsx

@@ -1,12 +1,11 @@
-// src/screens/Report2AScreen.jsx
 import React, { useEffect, useState } from 'react';
 import {
   ScrollView,
   Text,
   TouchableOpacity,
   View,
-  ActivityIndicator,
   StyleSheet,
+  ActivityIndicator,
 } from 'react-native';
 import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { getDivisions, getTable, getLine, getBar } from '../api/report2Fetcher';
@@ -16,6 +15,19 @@ import FrozenTableReport2A from '../components/FrozenTableReport2A';
 import SvgLineChartCompact from '../components/SvgLineChartCompact';
 import SvgBarLineChartCompact from '../components/SvgBarLineChartCompact';
 
+// 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);
@@ -31,25 +43,18 @@ const Report2AScreen = ({ api, token, onBack }) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
-  // Fetch divisions
   useEffect(() => {
     if (!api?.divisions || !token) return;
 
     getDivisions(api.divisions, token)
       .then((d) => {
         setDivisions(d);
-        if (d.length > 0) {
-          setDivision(d[0].code);
-        }
+        if (d.length > 0) setDivision(d[0].code);
       })
-      .catch((err) => {
-        console.error('Failed to load divisions:', err);
-        setError('Failed to load divisions');
-        setLoading(false);
-      });
+      .catch(() => setError('Failed to load divisions'))
+      .finally(() => setLoading(false));
   }, [api?.divisions, token]);
 
-  // Fetch data when division changes
   useEffect(() => {
     if (!division || !api || !token) return;
 
@@ -57,106 +62,100 @@ const Report2AScreen = ({ api, token, onBack }) => {
     setError(null);
 
     Promise.all([
-      getTable(api.table, division, token).catch(() => null),
-      getLine(api.line, division, token).catch(() => null),
-      getBar(api.bar, division, token).catch(() => null),
+      getTable(api.table, division, token),
+      getLine(api.line, division, token),
+      getBar(api.bar, division, token),
     ])
       .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);
-      });
+      .catch(() => setError('Failed to load data'))
+      .finally(() => setLoading(false));
   }, [division, api, token]);
 
-  // Loading State
   if (loading) {
     return (
       <View style={styles.center}>
-        <ActivityIndicator size="large" color="#1e88e5" />
-        <Text style={styles.loadingText}>Loading Report 2A...</Text>
+        <ActivityIndicator size="large" color="#000" />
+        <Text style={styles.loadingText}>Loading...</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>
+          <Text style={styles.backLink}>← Back to Reports</Text>
         </TouchableOpacity>
       </View>
     );
   }
 
-  // Safety check
   if (!table || !line || !bar || !division) {
-    return (
-      <View style={styles.center}>
-        <Text>No data available</Text>
-      </View>
-    );
+    return <View style={styles.center}><Text>No data available</Text></View>;
   }
 
-  const filteredRows = table.rows.filter((r) =>
-    selectedMonths.includes(r.monthLabel)
-  );
+  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);
 
   return (
-    <ScrollView style={styles.container}>
-      {/* Header */}
-      <Text onPress={onBack} style={styles.backButton}>
-        ‹ Back
-      </Text>
-
-      {/* Filters */}
-      <View style={styles.filterRow}>
-        <TouchableOpacity onPress={() => setMonthsModal(true)}>
-          <Text style={styles.filterText}>Months ⛃</Text>
+    <View style={styles.container}>
+      {/* HEADER WITH BACK ICON + HEADING */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onBack} style={styles.backButton}>
+          <Text style={styles.backIcon}>←</Text>
+        </TouchableOpacity>
+
+        <Text style={styles.headerTitle}>
+          {currentDivisionName} Transportation
+        </Text>
+      </View>
+
+      {/* 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>
 
         <TouchableOpacity
           onPress={() => setDivisionModal(true)}
-          style={{ marginLeft: 20 }}
+          style={styles.filterItem}
         >
+          <FunnelIcon />
           <Text style={styles.filterText}>
-            Division: {divisions.find((d) => d.code === division)?.displayName || division}
+            {currentDivisionName}
           </Text>
         </TouchableOpacity>
       </View>
 
-      {/* Table */}
-      <FrozenTableReport2A rows={filteredRows} />
+      <ScrollView style={styles.content}>
+        <FrozenTableReport2A rows={filteredRows} />
 
-      {/* Line Chart */}
-      <View style={styles.chartContainer}>
-        <SvgLineChartCompact data={filteredLine} />
-      </View>
+        <View style={styles.chartContainer}>
+          <SvgLineChartCompact data={filteredLine} />
+        </View>
 
-      {/* Bar + Budget Chart */}
-      <View style={styles.chartContainer}>
-        <SvgBarLineChartCompact data={filteredBar} />
-      </View>
+        <View style={styles.chartContainer}>
+          <SvgBarLineChartCompact data={filteredBar} />
+        </View>
+      </ScrollView>
 
-      {/* Modals */}
+      {/* MODALS */}
       <MonthFilterModal
         visible={monthsModal}
         months={months}
@@ -172,50 +171,91 @@ const Report2AScreen = ({ api, token, onBack }) => {
         onSelect={setDivision}
         onClose={() => setDivisionModal(false)}
       />
-    </ScrollView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: { padding: 12, backgroundColor: '#f8f9fa' },
-  center: {
-    flex: 1,
-    justifyContent: 'center',
+  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' },
+
+  header: {
+    flexDirection: 'row',
     alignItems: 'center',
-    padding: 20,
-  },
-  loadingText: {
-    marginTop: 12,
-    fontSize: 16,
-    color: '#555',
+    paddingHorizontal: 16,
+    paddingVertical: 18,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderColor: '#eee',
   },
-  errorText: {
-    fontSize: 16,
-    color: '#d32f2f',
+  backButton: { paddingRight: 12 },
+  backIcon: { fontSize: 28, color: '#000', fontWeight: '300' },
+  headerTitle: {
+    fontSize: 19,
+    fontWeight: '700',
+    color: '#000',
+    flex: 1,
     textAlign: 'center',
-    marginBottom: 20,
-  },
-  backLink: {
-    fontSize: 18,
-    color: '#1e88e5',
-    fontWeight: '600',
   },
-  backButton: {
-    fontSize: 20,
-    color: '#1e88e5',
-    marginBottom: 16,
-    fontWeight: '600',
+
+  filterBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 14,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderColor: '#eee',
   },
-  filterRow: {
+  filterItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginVertical: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
   },
   filterText: {
     fontSize: 16,
-    color: '#1e88e5',
+    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 },
+
+  content: { flex: 1, padding: 12 },
   chartContainer: {
     borderWidth: 1,
     borderColor: '#ddd',