@dhiraj0720/report1chart 2.9.1 → 2.9.3

package/package.json

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

package/src/components/FrozenTableReport1A.jsx

@@ -1,68 +1,78 @@
 import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
 
-const Arrow = ({ value }) => (
-  <Text
-    style={[
-      styles.arrow,
-      value >= 0 ? styles.up : styles.down,
-    ]}
-  >
-    {value >= 0 ? '↑' : '↓'} {Math.abs(value)}%
-  </Text>
-);
+// Format numbers with commas: 1234567 → 1,234,567
+const formatNumber = (value) => {
+  if (value === null || value === undefined || value === '') return '-';
+  return Number(value).toLocaleString('en-US');
+};
+
+// Percentage cell with arrow and color
+const PercentCell = ({ value }) => {
+  if (value === null || value === undefined) return <Text>-</Text>;
+  const positive = value >= 0;
+  return (
+    <Text style={[
+      styles.percentText,
+      { color: positive ? '#2e7d32' : '#d32f2f' }
+    ]}>
+      {positive ? '↑' : '↓'} {Math.abs(value)}%
+    </Text>
+  );
+};
 
-const Cell = ({ children, bold, frozen }) => (
-  <View
-    style={[
-      styles.cell,
-      frozen && styles.frozenCell,
-    ]}
-  >
-    <Text
-      numberOfLines={1}
-      ellipsizeMode="tail"
-      style={[
-        styles.text,
-        bold && styles.bold,
-      ]}
-    >
+// Reusable Cell
+const Cell = ({ children, bold = false, highlight = false, isFrozen = false }) => (
+  <View style={[
+    styles.cell,
+    isFrozen && styles.frozenCell,
+    bold && styles.bold,
+    highlight && styles.highlightCell
+  ]}>
+    <Text style={[styles.cellText, bold && styles.boldText]}>
       {children}
     </Text>
   </View>
 );
 
-const FrozenTableReport1A = ({ rows }) => {
+const FrozenTableReport1A = ({ rows = [], isFullscreen = false }) => {
+  if (!rows.length) {
+    return <Text style={{ textAlign: 'center', padding: 20, color: '#666' }}>No data available</Text>;
+  }
+
+  // Wider frozen column in fullscreen
+  const frozenColumnWidth = isFullscreen ? 180 : 150;
+
   return (
     <View style={styles.container}>
-      {/* LEFT FROZEN COLUMN */}
-      <View style={styles.frozen}>
-        <Cell bold frozen>FAALİYET</Cell>
-        {rows.map((r, i) => (
-          <Cell key={i} frozen bold>
-            {r.name}
+      {/* Frozen Left Column - FAALİYET */}
+      <View style={[styles.frozenColumn, { width: frozenColumnWidth }]}>
+        <Cell bold isFrozen>FAALİYET</Cell>
+        {rows.map((row, i) => (
+          <Cell key={i} bold isFrozen>
+            {row.name}
           </Cell>
         ))}
       </View>
 
-      {/* SCROLLABLE COLUMNS */}
+      {/* Scrollable Columns */}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         <View>
+          {/* Header Row */}
           <View style={styles.headerRow}>
-            <Cell bold>2024</Cell>
-            <Cell bold>2025</Cell>
-            <Cell bold>Artış %</Cell>
-            <Cell bold>2025 Bütçe</Cell>
-            <Cell bold>Sapma %</Cell>
+            {['2024', '2025', 'Artış %', '2025 Bütçe', 'Sapma %'].map((header) => (
+              <Cell key={header} bold>{header}</Cell>
+            ))}
           </View>
 
-          {rows.map((r, i) => (
-            <View key={i} style={styles.row}>
-              <Cell>{r.actual2024}</Cell>
-              <Cell>{r.actual2025}</Cell>
-              <Cell><Arrow value={r.actualChangePercent} /></Cell>
-              <Cell>{r.budget2025}</Cell>
-              <Cell><Arrow value={r.budgetVariancePercent} /></Cell>
+          {/* Data Rows */}
+          {rows.map((row, i) => (
+            <View key={i} style={styles.dataRow}>
+              <Cell>{formatNumber(row.actual2024)}</Cell>
+              <Cell>{formatNumber(row.actual2025)}</Cell>
+              <Cell><PercentCell value={row.actualChangePercent} /></Cell>
+              <Cell>{formatNumber(row.budget2025)}</Cell>
+              <Cell><PercentCell value={row.budgetVariancePercent} /></Cell>
             </View>
           ))}
         </View>
@@ -73,9 +83,6 @@ const FrozenTableReport1A = ({ rows }) => {
 
 export default FrozenTableReport1A;
 
-/* ======================
-   STYLES (COMPACT)
-====================== */
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
@@ -83,57 +90,51 @@ const styles = StyleSheet.create({
     borderColor: '#ddd',
     borderRadius: 8,
     overflow: 'hidden',
+    marginVertical: 12,
     backgroundColor: '#fff',
   },
-
-  frozen: {
-    width: 150,               // 👈 fixed width
-    backgroundColor: '#f5f7fa',
-  },
-
-  frozenCell: {
-    alignItems: 'flex-start',
-    paddingHorizontal: 8,
+  frozenColumn: {
+    backgroundColor: '#f4f6f8',
+    borderRightWidth: 1,
+    borderColor: '#ddd',
   },
-
   headerRow: {
     flexDirection: 'row',
-    backgroundColor: '#f0f0f0',
+    backgroundColor: '#f4f6f8',
   },
-
-  row: {
+  dataRow: {
     flexDirection: 'row',
   },
-
   cell: {
-    width: 110,               // 👈 compact width
-    paddingVertical: 6,       // 👈 reduced height
-    paddingHorizontal: 6,
-    borderBottomWidth: 1,
-    borderColor: '#eee',
+    minWidth: 110,
+    paddingHorizontal: 14,           // +7 left/right for spacious feel
+    paddingVertical: 12,
     justifyContent: 'center',
     alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: '#e0e0e0',
   },
-
-  text: {
-    fontSize: 12,             // 👈 smaller text
-    color: '#222',
+  frozenCell: {
+    justifyContent: 'flex-start',
+    paddingLeft: 18,
+  },
+  cellText: {
+    fontSize: 12.5,
+    textAlign: 'center',
+    color: '#333',
   },
-
   bold: {
-    fontWeight: '700',
+    backgroundColor: '#e9f0f8',
   },
-
-  arrow: {
-    fontSize: 12,
+  boldText: {
     fontWeight: '700',
   },
-
-  up: {
-    color: '#2e7d32',
+  highlightCell: {
+    backgroundColor: '#e9f0f8',
   },
-
-  down: {
-    color: '#d32f2f',
+  percentText: {
+    fontWeight: '700',
+    fontSize: 12.5,
+    textAlign: 'center',
   },
-});
+});

package/src/screens/Report1AScreen.jsx

@@ -1,9 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
+import {
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  Modal,
+  Dimensions,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
 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([]);
@@ -11,44 +19,42 @@ const Report1AScreen = ({ endpoint, token, onBack }) => {
 
   useEffect(() => {
     fetchReport1(endpoint, token).then(setRows);
-  }, []);
+  }, [endpoint, token]);
+
+  const { width, height } = Dimensions.get('window');
+  const isLandscape = width > height;
 
   return (
-    <>
-      <ScrollView style={{ padding: 16 }}>
-        {/* <Text onPress={onBack} style={{ marginBottom: 12 }}>‹ Back</Text>
-
-        <Text style={{ fontSize: 18, fontWeight: '700', marginBottom: 12 }}>
-          PERFORMANS RAPORU (USD)
-        </Text> */}
-
-         <View style={styles.header}>
-                <TouchableOpacity onPress={onBack}>
-                  <Text style={styles.backIcon}>‹</Text>
-                </TouchableOpacity>
-                <Text style={styles.headerTitle}>PERFORMANS RAPORU (USD)</Text>
-              </View>
-              
-              
-
-        {/* FULLSCREEN BUTTON */}
-        <TouchableOpacity
-          onPress={() => setFullscreen(true)}
-          style={{
-            alignSelf: 'flex-end',
-            marginBottom: 8,
-            padding: 6,
-          }}
-        >
-          <Text style={{ fontWeight: '700' }}>⤢ Full Screen</Text>
+    <View style={styles.container}>
+      {/* FULL-WIDTH BLUE HEADER */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onBack} style={styles.backButton}>
+          <Text style={styles.backIcon}>←</Text>
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>PERFORMANS RAPORU (USD)</Text>
+      </View>
+
+      {/* FILTER BAR - DIVISION + FULL SCREEN */}
+      <View style={styles.filterBar}>
+        {/* DIVISION FILTER - LEFT */}
+        <TouchableOpacity style={styles.filterItemLeft}>
+          <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}>Division Filter</Text>
         </TouchableOpacity>
 
+        {/* FULL SCREEN - RIGHT */}
+        <TouchableOpacity onPress={() => setFullscreen(true)} style={styles.filterItemRight}>
+          <Text style={styles.fullScreenFilterText}>⤢ Full Screen</Text>
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={styles.content}>
         <FrozenTableReport1A rows={rows} />
 
-        {/* BELOW TABLE → CARDS */}
-        <Text style={{ marginVertical: 12, fontWeight: '700' }}>
-          Individual Reports
-        </Text>
+        <Text style={styles.sectionTitle}>Individual Reports</Text>
 
         {rows.map((r, i) => (
           <Report1Card key={i} item={r} />
@@ -56,41 +62,144 @@ const Report1AScreen = ({ endpoint, token, onBack }) => {
       </ScrollView>
 
       {/* FULL SCREEN MODAL */}
-      <FullScreenTableModal
-        visible={fullscreen}
-        rows={rows}
-        onClose={() => setFullscreen(false)}
-      />
-    </>
+      <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]}>
+              <FrozenTableReport1A rows={rows} isFullscreen />
+            </View>
+          </ScrollView>
+        </View>
+      </Modal>
+    </View>
   );
 };
 
-// ONLY ADDED THIS STYLES PART — NOTHING ELSE CHANGED
 const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#f8f9fa' },
 
-
-   header: {
+  // FULL-WIDTH BLUE HEADER
+  header: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
     paddingVertical: 18,
-    backgroundColor: '#4E79A7',
-    borderBottomWidth: 1,
-    borderColor: '#4E79A7',
+    paddingHorizontal: 16,
+    backgroundColor: '#1565c0',  // Deep blue
+  },
+  backButton: {
+    padding: 8,
   },
   backIcon: {
     fontSize: 32,
-    color: '#fff',
-    marginRight: 16,
-    fontWeight: '700',
+    color: '#ffffff',
+    fontWeight: '300',
   },
   headerTitle: {
     fontSize: 19,
     fontWeight: '700',
-    color: '#fff',
+    color: '#ffffff',
+    flex: 1,
+    textAlign: 'center',
+  },
+
+  // FILTER BAR - LEFT & RIGHT ALIGNED
+  filterBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderColor: '#eee',
+  },
+  filterItemLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  filterItemRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  filterText: {
+    fontSize: 16,
+    color: '#000',
+    fontWeight: '600',
+    marginLeft: 8,
+  },
+  fullScreenFilterText: {
+    fontSize: 16,
+    color: '#000',
+    fontWeight: '700',
+  },
+
+  content: {
     flex: 1,
+    paddingHorizontal: 12,
+    paddingTop: 12,
+  },
+
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginVertical: 16,
+    color: '#111',
+  },
+
+  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: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 10,
+    elevation: 8,
+  },
+  landscapeFit: {
+    transform: [{ scale: 1.45 }],
   },
 });
 
-export default Report1AScreen;
+export default Report1AScreen;

package/src/screens/Report3AScreen.jsx

@@ -106,22 +106,22 @@ const Report3AScreen = ({ api, token, onBack }) => {
 
       {/* 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>
-
-          <TouchableOpacity
-                          onPress={() => setFullscreen(true)} style={styles.filterItem}
-                        >
-                          <Text style={styles.filterText} width={22} height={22}>⤢ Full Screen</Text>
-                        </TouchableOpacity>
-      </View>
+  {/* MONTHS FILTER - LEFT */}
+  <TouchableOpacity onPress={() => setMonthsModal(true)} style={styles.filterItemLeft}>
+    <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>
+
+  {/* FULL SCREEN - RIGHT */}
+  <TouchableOpacity onPress={() => setFullscreen(true)} style={styles.filterItemRight}>
+    <Text style={styles.fullScreenFilterText}>⤢ Full Screen</Text>
+  </TouchableOpacity>
+</View>
 
 
       <ScrollView style={styles.content}>
@@ -210,26 +210,33 @@ const styles = StyleSheet.create({
 
   filterBar: {
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'space-between',  // Perfectly pushes left & right
+    alignItems: 'center',
     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' },
+  filterItemLeft: {
+  flexDirection: 'row',
+  alignItems: 'center',
+},
+filterItemRight: {
+  flexDirection: 'row',
+  alignItems: 'center',
+},
+  filterText: {
+  fontSize: 16,
+  color: '#000',
+  fontWeight: '600',
+  marginLeft: 8,
+},
+fullScreenFilterText: {
+  fontSize: 16,
+  color: '#000',
+  fontWeight: '700',
+},
 
   content: { flex: 1, padding: 12 },
   chartContainer: {