@dhiraj0720/report1chart 3.0.0 → 3.0.1

package/package.json

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

package/src/components/FrozenTableReport4A.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import { formatNumber } from '../utils/formatNumber';
 
 const TAB_TABLE_CONFIG = {
@@ -123,8 +123,8 @@ const formatRatio = (value) => {
   return `%${value}`;
 };
 
-const DataCell = ({ children, style }) => (
-  <View style={[styles.dataCell, style]}>
+const DataCell = ({ children, rowStyle, cellStyle }) => (
+  <View style={[styles.dataCell, rowStyle, cellStyle]}>
     {children}
   </View>
 );
@@ -178,32 +178,68 @@ const rowTypeStyle = (row, index) => {
   return index % 2 === 0 ? styles.evenRow : styles.oddRow;
 };
 
-const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule' }) => {
+const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule', isFullscreen = false }) => {
+  const { width: screenWidth } = useWindowDimensions();
   const config = TAB_TABLE_CONFIG[tabKey] || TAB_TABLE_CONFIG.kumule;
 
+  const layout = useMemo(() => {
+    const safeWidth = Math.max(280, screenWidth - (isFullscreen ? 32 : 24));
+
+    const frozenColumnWidth = isFullscreen
+      ? Math.max(160, Math.min(220, safeWidth * 0.3))
+      : Math.max(128, Math.min(156, safeWidth * 0.38));
+
+    const dataColumnWidth = isFullscreen
+      ? Math.max(96, Math.min(142, safeWidth * 0.18))
+      : Math.max(92, Math.min(116, (safeWidth - frozenColumnWidth) / 2));
+
+    return {
+      frozenColumnWidth,
+      dataColumnWidth,
+      rowHeight: isFullscreen ? 42 : 38,
+      headerHeight: isFullscreen ? 54 : 46,
+    };
+  }, [isFullscreen, screenWidth]);
+
   if (!rows.length) {
     return <Text style={styles.noData}>No data available</Text>;
   }
 
   return (
-    <View style={styles.wrapper}>
+    <View style={[styles.wrapper, isFullscreen && styles.wrapperFullscreen]}>
       <Text style={styles.tableTitle}>{config.title}</Text>
 
       <View style={styles.tableContainer}>
-        <View style={styles.frozenColumn}>
-          <View style={[styles.nameCell, styles.headerCell]}>
+        <View style={[styles.frozenColumn, { width: layout.frozenColumnWidth }]}>
+          <View
+            style={[
+              styles.nameCell,
+              styles.headerCell,
+              { height: layout.headerHeight },
+            ]}
+          >
             <Text style={styles.headerText}>ŞİRKET / İŞTİPİ</Text>
           </View>
+
           {rows.map((row, index) => {
             const isTotal = row.rowType === 1 || row.rowType === 3;
             return (
               <View
                 key={`name-${row.sortOrder || index}`}
-                style={[styles.nameCell, rowTypeStyle(row, index)]}
+                style={[
+                  styles.nameCell,
+                  rowTypeStyle(row, index),
+                  { height: layout.rowHeight },
+                ]}
               >
                 <View style={styles.nameCellContent}>
-                  <Text style={styles.star}>{isTotal ? '★' : ' '}</Text>
-                  <Text numberOfLines={1} style={styles.nameText}>
+                  <Text style={styles.star}>{isTotal ? '★' : ''}</Text>
+                  <Text
+                    numberOfLines={1}
+                    adjustsFontSizeToFit
+                    minimumFontScale={0.78}
+                    style={styles.nameText}
+                  >
                     {row.name}
                   </Text>
                 </View>
@@ -216,7 +252,17 @@ const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule' }) => {
           <View>
             <View style={styles.row}>
               {config.columns.map((column) => (
-                <View key={column.key} style={[styles.dataCell, styles.headerCell]}>
+                <View
+                  key={column.key}
+                  style={[
+                    styles.dataCell,
+                    styles.headerCell,
+                    {
+                      width: layout.dataColumnWidth,
+                      height: layout.headerHeight,
+                    },
+                  ]}
+                >
                   <Text numberOfLines={2} style={styles.headerText}>
                     {column.label}
                   </Text>
@@ -224,18 +270,26 @@ const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule' }) => {
               ))}
             </View>
 
-            {rows.map((row, index) => (
-              <View key={`row-${row.sortOrder || index}`} style={styles.row}>
-                {config.columns.map((column) => (
-                  <DataCell
-                    key={`${row.sortOrder || index}-${column.key}`}
-                    style={rowTypeStyle(row, index)}
-                  >
-                    {renderCellValue(row, column)}
-                  </DataCell>
-                ))}
-              </View>
-            ))}
+            {rows.map((row, index) => {
+              const rowStyle = rowTypeStyle(row, index);
+
+              return (
+                <View key={`row-${row.sortOrder || index}`} style={styles.row}>
+                  {config.columns.map((column) => (
+                    <DataCell
+                      key={`${row.sortOrder || index}-${column.key}`}
+                      rowStyle={rowStyle}
+                      cellStyle={{
+                        width: layout.dataColumnWidth,
+                        height: layout.rowHeight,
+                      }}
+                    >
+                      {renderCellValue(row, column)}
+                    </DataCell>
+                  ))}
+                </View>
+              );
+            })}
           </View>
         </ScrollView>
       </View>
@@ -247,39 +301,42 @@ export default FrozenTableReport4A;
 
 const styles = StyleSheet.create({
   wrapper: {
-    backgroundColor: '#eef1f5',
-    borderRadius: 8,
+    backgroundColor: '#f4f7fb',
+    borderRadius: 10,
     borderWidth: 1,
-    borderColor: '#97aec4',
+    borderColor: '#ccd8e4',
+    padding: 6,
+  },
+  wrapperFullscreen: {
     padding: 8,
   },
   tableTitle: {
     textAlign: 'center',
-    fontSize: 16,
+    fontSize: 14,
     fontWeight: '700',
-    color: '#2e2e2e',
-    marginBottom: 8,
+    color: '#223648',
+    marginBottom: 6,
   },
   tableContainer: {
     flexDirection: 'row',
     borderWidth: 1,
-    borderColor: '#97aec4',
-    backgroundColor: '#d9dce1',
+    borderColor: '#b8c6d4',
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#e7edf3',
   },
   frozenColumn: {
-    width: 290,
     borderRightWidth: 1,
-    borderRightColor: '#f3f3f3',
+    borderRightColor: '#ecf1f6',
   },
   row: {
     flexDirection: 'row',
   },
   nameCell: {
-    height: 46,
     justifyContent: 'center',
     borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-    paddingHorizontal: 8,
+    borderBottomColor: '#edf2f7',
+    paddingHorizontal: 6,
   },
   nameCellContent: {
     flexDirection: 'row',
@@ -287,48 +344,45 @@ const styles = StyleSheet.create({
   },
   nameText: {
     flex: 1,
-    fontSize: 13,
-    color: '#1f1f1f',
+    fontSize: 11.5,
+    color: '#203040',
   },
   star: {
-    width: 20,
+    width: 14,
     textAlign: 'center',
-    color: '#c37f18',
-    fontSize: 16,
-    marginRight: 4,
+    color: '#b7791f',
+    fontSize: 13,
+    marginRight: 2,
   },
   dataCell: {
-    width: 120,
-    height: 46,
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 6,
+    paddingHorizontal: 4,
     borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
+    borderBottomColor: '#edf2f7',
   },
   dataCellText: {
-    fontSize: 13,
-    color: '#303030',
+    fontSize: 11.5,
+    color: '#2b3d4e',
     textAlign: 'center',
   },
   headerCell: {
     backgroundColor: '#5f7f9f',
-    height: 58,
   },
   headerText: {
     color: '#ffffff',
     fontWeight: '700',
     textAlign: 'center',
-    fontSize: 12,
+    fontSize: 11,
   },
   evenRow: {
-    backgroundColor: '#dfdfdf',
+    backgroundColor: '#e6eaef',
   },
   oddRow: {
-    backgroundColor: '#d2d2d2',
+    backgroundColor: '#dde3e9',
   },
   totalRow: {
-    backgroundColor: '#9db6cb',
+    backgroundColor: '#a7bdd2',
   },
   trendWrapper: {
     flexDirection: 'row',
@@ -336,9 +390,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   trendIcon: {
-    fontSize: 18,
+    fontSize: 13,
     fontWeight: '700',
-    marginRight: 4,
+    marginRight: 3,
     marginTop: -1,
   },
   noData: {

package/src/screens/Report4AScreen.jsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
+  Modal,
   ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
+  useWindowDimensions,
 } from 'react-native';
 import fetchReport4 from '../api/report4Fetcher';
 import FrozenTableReport4A from '../components/FrozenTableReport4A';
@@ -17,11 +19,15 @@ const TABS = [
 ];
 
 const Report4AScreen = ({ api, token, onBack }) => {
+  const { width, height } = useWindowDimensions();
   const [activeTab, setActiveTab] = useState('kumule');
   const [rowsByTab, setRowsByTab] = useState({});
   const [loadedByTab, setLoadedByTab] = useState({});
   const [errorByTab, setErrorByTab] = useState({});
   const [loading, setLoading] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+
+  const isLandscape = width > height;
 
   const endpointByTab = useMemo(() => ({
     kumule: api?.kumule,
@@ -122,10 +128,55 @@ const Report4AScreen = ({ api, token, onBack }) => {
 
         {activeRows.length ? (
           <ScrollView style={styles.tableScroll} contentContainerStyle={styles.tableContent}>
+            <View style={styles.tableToolbar}>
+              <TouchableOpacity
+                onPress={() => setFullscreen(true)}
+                style={styles.fullViewButton}
+              >
+                <Text style={styles.fullViewButtonText}>⤢ Full View</Text>
+              </TouchableOpacity>
+            </View>
+
             <FrozenTableReport4A rows={activeRows} tabKey={activeTab} />
           </ScrollView>
         ) : null}
       </View>
+
+      <Modal
+        visible={fullscreen}
+        animationType="fade"
+        onRequestClose={() => setFullscreen(false)}
+        supportedOrientations={['portrait', 'landscape-left', 'landscape-right']}
+      >
+        <View style={styles.fullModal}>
+          <View style={styles.fullHeader}>
+            <Text style={styles.fullHintText}>
+              Full View • Auto fit • Pinch to zoom
+            </Text>
+            <TouchableOpacity onPress={() => setFullscreen(false)}>
+              <Text style={styles.closeBtn}>✕</Text>
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView
+            maximumZoomScale={3.5}
+            minimumZoomScale={0.45}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.zoomContent}
+            pinchGestureEnabled
+            bouncesZoom
+          >
+            <View style={[styles.tableWrapper, isLandscape && styles.tableWrapperLandscape]}>
+              <FrozenTableReport4A
+                rows={activeRows}
+                tabKey={activeTab}
+                isFullscreen
+              />
+            </View>
+          </ScrollView>
+        </View>
+      </Modal>
     </View>
   );
 };
@@ -220,7 +271,60 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   tableContent: {
-    padding: 10,
+    paddingHorizontal: 10,
     paddingBottom: 16,
   },
+  tableToolbar: {
+    alignItems: 'flex-end',
+    marginTop: 8,
+    marginBottom: 6,
+  },
+  fullViewButton: {
+    backgroundColor: '#4E79A7',
+    borderRadius: 7,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+  },
+  fullViewButtonText: {
+    color: '#fff',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+  fullModal: {
+    flex: 1,
+    backgroundColor: '#f3f6fa',
+  },
+  fullHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#d3dde7',
+    backgroundColor: '#fff',
+  },
+  fullHintText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#23384a',
+    textAlign: 'center',
+  },
+  closeBtn: {
+    fontSize: 24,
+    color: '#1f2d3a',
+    paddingHorizontal: 8,
+  },
+  zoomContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  tableWrapper: {
+    width: '100%',
+  },
+  tableWrapperLandscape: {
+    maxWidth: '96%',
+  },
 });