@dhiraj0720/report1chart 2.5.3 → 2.5.4

package/package.json

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

package/src/components/FrozenTableReport1A.jsx

@@ -1,84 +1,68 @@
 import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-
-/* ======================
-   ARROW COMPONENT
-====================== */
-const Arrow = ({ value }) => {
-  const num = Number(value) || 0;
-  const isPositive = num >= 0;
+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>
+);
 
-  return (
+const Cell = ({ children, bold, frozen }) => (
+  <View
+    style={[
+      styles.cell,
+      frozen && styles.frozenCell,
+    ]}
+  >
     <Text
+      numberOfLines={1}
+      ellipsizeMode="tail"
       style={[
-        styles.percent,
-        { color: isPositive ? '#2e7d32' : '#c62828' },
+        styles.text,
+        bold && styles.bold,
       ]}
     >
-      {isPositive ? '↑' : '↓'} {Math.abs(num)}%
-    </Text>
-  );
-};
-
-/* ======================
-   CELL COMPONENT
-====================== */
-const Cell = ({ children, bold }) => (
-  <View style={styles.cell}>
-    <Text style={[styles.text, bold && styles.bold]}>
       {children}
     </Text>
   </View>
 );
 
-/* ======================
-   MAIN TABLE
-====================== */
-const FrozenTableReport1A = ({ rows = [] }) => {
-  if (!rows.length) return null;
-
+const FrozenTableReport1A = ({ rows }) => {
   return (
     <View style={styles.container}>
       {/* LEFT FROZEN COLUMN */}
       <View style={styles.frozen}>
-        <Cell bold>FAALİYET</Cell>
-
+        <Cell bold frozen>FAALİYET</Cell>
         {rows.map((r, i) => (
-          <Cell key={i} bold>
+          <Cell key={i} frozen bold>
             {r.name}
           </Cell>
         ))}
       </View>
 
-      {/* RIGHT SCROLLABLE PART */}
+      {/* SCROLLABLE COLUMNS */}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         <View>
-          {/* HEADER */}
           <View style={styles.headerRow}>
-            <Cell bold>2024 Fiili</Cell>
-            <Cell bold>2025 Fiili</Cell>
+            <Cell bold>2024</Cell>
+            <Cell bold>2025</Cell>
             <Cell bold>Artış %</Cell>
             <Cell bold>2025 Bütçe</Cell>
             <Cell bold>Sapma %</Cell>
           </View>
 
-          {/* ROWS */}
           {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><Arrow value={r.actualChangePercent} /></Cell>
               <Cell>{r.budget2025}</Cell>
-              <Cell>
-                <Arrow value={r.budgetVariancePercent} />
-              </Cell>
+              <Cell><Arrow value={r.budgetVariancePercent} /></Cell>
             </View>
           ))}
         </View>
@@ -90,29 +74,31 @@ const FrozenTableReport1A = ({ rows = [] }) => {
 export default FrozenTableReport1A;
 
 /* ======================
-   STYLES
+   STYLES (COMPACT)
 ====================== */
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    borderRadius: 12,
-    overflow: 'hidden',
     borderWidth: 1,
-    borderColor: '#e0e0e0',
+    borderColor: '#ddd',
+    borderRadius: 8,
+    overflow: 'hidden',
     backgroundColor: '#fff',
-    marginBottom: 16,
   },
 
   frozen: {
-    width: 160,
+    width: 150,               // 👈 fixed width
     backgroundColor: '#f5f7fa',
-    borderRightWidth: 1,
-    borderRightColor: '#e0e0e0',
+  },
+
+  frozenCell: {
+    alignItems: 'flex-start',
+    paddingHorizontal: 8,
   },
 
   headerRow: {
     flexDirection: 'row',
-    backgroundColor: '#f0f3f7',
+    backgroundColor: '#f0f0f0',
   },
 
   row: {
@@ -120,16 +106,17 @@ const styles = StyleSheet.create({
   },
 
   cell: {
-    width: 120,
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-    justifyContent: 'center',
+    width: 110,               // 👈 compact width
+    paddingVertical: 6,       // 👈 reduced height
+    paddingHorizontal: 6,
     borderBottomWidth: 1,
-    borderBottomColor: '#ececec',
+    borderColor: '#eee',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 
   text: {
-    fontSize: 12,
+    fontSize: 12,             // 👈 smaller text
     color: '#222',
   },
 
@@ -137,8 +124,16 @@ const styles = StyleSheet.create({
     fontWeight: '700',
   },
 
-  percent: {
+  arrow: {
     fontSize: 12,
     fontWeight: '700',
   },
+
+  up: {
+    color: '#2e7d32',
+  },
+
+  down: {
+    color: '#d32f2f',
+  },
 });

package/src/components/FullScreenTableModal.jsx

@@ -7,7 +7,7 @@ import {
   StyleSheet,
   SafeAreaView,
 } from 'react-native';
-
+import SafeScreen from './components/SafeScreen';
 import FrozenTableReport1A from './FrozenTableReport1A';
 
 const FullScreenTableModal = ({ visible, rows, onClose }) => {
@@ -19,7 +19,7 @@ const FullScreenTableModal = ({ visible, rows, onClose }) => {
       animationType="slide"
       statusBarTranslucent
     >
-      <SafeAreaView style={styles.safe}>
+      <SafeScreen>
         <View style={styles.container}>
           {/* TOP BAR */}
           <View style={styles.header}>
@@ -50,7 +50,7 @@ const FullScreenTableModal = ({ visible, rows, onClose }) => {
             <FrozenTableReport1A rows={rows} />
           </View>
         </View>
-      </SafeAreaView>
+      </SafeScreen>
     </Modal>
   );
 };