@dhiraj0720/report1chart 2.6.0 → 2.6.2

package/package.json

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

package/src/components/FrozenTableReport1A.jsx

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

package/src/components/FrozenTableReport3A.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+
+// Format numbers with commas: 556000000 → 556,000,000
+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>
+  );
+};
+
+// Reusable Cell Component
+const Cell = ({ children, bold = false, highlight = false }) => (
+  <View style={[
+    styles.cell,
+    bold && styles.boldCell,
+    highlight && styles.highlightCell
+  ]}>
+    <Text style={[
+      styles.cellText,
+      bold && styles.boldText
+    ]}>
+      {children}
+    </Text>
+  </View>
+);
+
+const FrozenTableReport3A = ({ rows = [] }) => {
+  if (!rows || rows.length === 0) {
+    return <Text style={{ textAlign: 'center', padding: 20, color: '#666' }}>
+      No data available
+    </Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Frozen Left Column - AY */}
+      <View style={styles.frozenColumn}>
+        <Cell bold>AY</Cell>
+        {rows.map((row, index) => {
+          const isTotal = row.monthLabel === 'Total';
+          return (
+            <Cell
+              key={index}
+              bold={isTotal}
+              highlight={isTotal}
+            >
+              {row.monthLabel}
+            </Cell>
+          );
+        })}
+      </View>
+
+      {/* Scrollable Columns */}
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <View>
+          {/* Header Row */}
+          <View style={styles.headerRow}>
+            {[
+              '2024 Yük',
+              '2025 Yük',
+              'Yük %',
+              '2024 Gelir',
+              '2025 Gelir',
+              'Gelir %',
+              '2025 Bütçe',
+              'Bütçe %'
+            ].map((header) => (
+              <Cell key={header} bold>
+                {header}
+              </Cell>
+            ))}
+          </View>
+
+          {/* Data Rows */}
+          {rows.map((row, index) => {
+            const isTotal = row.monthLabel === 'Total';
+
+            return (
+              <View key={index} style={styles.dataRow}>
+                <Cell highlight={isTotal}>{formatNumber(row.loadCount2024)}</Cell>
+                <Cell highlight={isTotal}>{formatNumber(row.loadCount2025)}</Cell>
+                <Cell highlight={isTotal}>
+                  <PercentCell value={row.loadCountChangePercent} />
+                </Cell>
+
+                <Cell highlight={isTotal}>{formatNumber(row.revenueTl2024)}</Cell>
+                <Cell highlight={isTotal}>{formatNumber(row.revenueTl2025)}</Cell>
+                <Cell highlight={isTotal}>
+                  <PercentCell value={row.revenueChangePercent} />
+                </Cell>
+
+                <Cell highlight={isTotal}>{formatNumber(row.budgetRevenueTl2025)}</Cell>
+                <Cell highlight={isTotal}>
+                  <PercentCell value={row.budgetChangePercent} />
+                </Cell>
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default FrozenTableReport3A;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    overflow: 'hidden',
+    marginVertical: 12,
+    backgroundColor: '#fff',
+  },
+  frozenColumn: {
+    width: 120,
+    backgroundColor: '#f4f6f8',
+    borderRightWidth: 1,
+    borderColor: '#ddd',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    backgroundColor: '#f4f6f8',
+  },
+  dataRow: {
+    flexDirection: 'row',
+  },
+  cell: {
+    width: 140,
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  cellText: {
+    fontSize: 12,
+    textAlign: 'center',
+    color: '#333',
+  },
+  boldCell: {
+    backgroundColor: '#e9f0f8',
+  },
+  boldText: {
+    fontWeight: '700',
+  },
+  highlightCell: {
+    backgroundColor: '#e9f0f8',
+  },
+  percentText: {
+    fontWeight: '700',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+});

package/src/screens/Report1AScreen.jsx

@@ -1,45 +1,52 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity } from 'react-native';
+import {
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  Modal,
+  View,
+  StyleSheet,
+  Dimensions,
+  Alert,
+} from 'react-native';
+import { PinchGestureHandler, State } from 'react-native-gesture-handler';
 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 }}>
-        <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>
+      <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>
         </TouchableOpacity>
 
         <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} />
@@ -47,13 +54,85 @@ const Report1AScreen = ({ endpoint, token, onBack }) => {
       </ScrollView>
 
       {/* FULL SCREEN MODAL */}
-      <FullScreenTableModal
+      <Modal
         visible={fullscreen}
-        rows={rows}
-        onClose={() => setFullscreen(false)}
-      />
+        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>
     </>
   );
 };
 
-export default Report1AScreen;
+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;