@dhiraj0720/report1chart 2.9.5 → 2.9.7

package/package.json

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

package/src/components/FrozenTableReport1A.jsx

@@ -19,11 +19,12 @@ const PercentCell = ({ value }) => {
   );
 };
 
-const Cell = ({ children, bold = false, isFrozen = false }) => (
+const Cell = ({ children, bold = false, highlight = false, isFrozen = false }) => (
   <View style={[
     styles.cell,
     isFrozen && styles.frozenCell,
-    bold && styles.boldCell
+    bold && styles.bold,
+    highlight && styles.highlightCell
   ]}>
     <Text 
       style={[styles.cellText, bold && styles.boldText]}
@@ -35,43 +36,40 @@ const Cell = ({ children, bold = false, isFrozen = false }) => (
   </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>;
   }
 
-  const frozenColumnWidth = 150;
-  const rowHeight = 48; // Fixed height for perfect alignment
+  const frozenColumnWidth = isFullscreen ? 180 : 130;
 
   return (
     <View style={styles.container}>
-      {/* Frozen Column - Fixed Height Rows */}
+      {/* Frozen Column */}
       <View style={[styles.frozenColumn, { width: frozenColumnWidth }]}>
         <Cell bold isFrozen>FAALİYET</Cell>
         {rows.map((row, i) => (
-          <View key={i} style={{ height: rowHeight }}>
-            <Cell bold isFrozen>
-              {row.name}
-            </Cell>
-          </View>
+          <Cell key={i} bold isFrozen>
+            {row.name}
+          </Cell>
         ))}
       </View>
 
-      {/* Scrollable Columns - Same Fixed Height Rows */}
+      {/* Scrollable Columns */}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         <View>
-          {/* Header */}
+          {/* Header Row - Single Line Only */}
           <View style={styles.headerRow}>
             {['2024', '2025', 'Artış %', '2025 Bütçe', 'Sapma %'].map((header) => (
-              <View key={header} style={{ height: rowHeight }}>
-                <Cell bold>{header}</Cell>
-              </View>
+              <Cell key={header} bold>
+                {header}
+              </Cell>
             ))}
           </View>
 
           {/* Data Rows */}
           {rows.map((row, i) => (
-            <View key={i} style={[styles.dataRow, { height: rowHeight }]}>
+            <View key={i} style={styles.dataRow}>
               <Cell>{formatNumber(row.actual2024)}</Cell>
               <Cell>{formatNumber(row.actual2025)}</Cell>
               <Cell><PercentCell value={row.actualChangePercent} /></Cell>
@@ -98,42 +96,45 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
   frozenColumn: {
-    backgroundColor: '#f5f7fa',
+    backgroundColor: '#f4f6f8',
     borderRightWidth: 1,
     borderColor: '#ddd',
   },
   headerRow: {
     flexDirection: 'row',
-    backgroundColor: '#f0f0f0',
+    backgroundColor: '#f4f6f8',
   },
   dataRow: {
     flexDirection: 'row',
   },
   cell: {
-    flex: 1,
-     minWidth: 105,   
+    minWidth: 100,                    // Increased to prevent wrapping
+    maxWidth: 180,                    // Optional: limit max width
     paddingHorizontal: 12,
+    paddingVertical: 12,
     justifyContent: 'center',
     alignItems: 'center',
     borderBottomWidth: 1,
-    borderColor: '#eee',
+    borderColor: '#e0e0e0',
   },
   frozenCell: {
     justifyContent: 'flex-start',
     paddingLeft: 16,
-    paddingRight: 8,
-  },
-  boldCell: {
-    backgroundColor: '#e9f0f8',
   },
   cellText: {
     fontSize: 12.5,
     textAlign: 'center',
     color: '#333',
   },
+  bold: {
+    backgroundColor: '#e9f0f8',
+  },
   boldText: {
     fontWeight: '700',
   },
+  highlightCell: {
+    backgroundColor: '#e9f0f8',
+  },
   percentText: {
     fontWeight: '700',
     fontSize: 12.5,

package/src/components/MonthSelector.jsx

@@ -3,20 +3,32 @@ import { ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native';
 
 const MonthSelector = ({ months, selected, onSelect }) => (
   <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.row}>
+    {/* SELECT ALL */}
     <TouchableOpacity
       style={[styles.btn, selected === 'ALL' && styles.active]}
       onPress={() => onSelect('ALL')}
     >
-      <Text style={styles.text}>Select all</Text>
+      <Text style={[
+        styles.text,
+        selected === 'ALL' && styles.activeText  // ← This was missing!
+      ]}>
+        Select all
+      </Text>
     </TouchableOpacity>
 
+    {/* MONTHS */}
     {months.map(m => (
       <TouchableOpacity
         key={m}
         style={[styles.btn, selected === m && styles.active]}
         onPress={() => onSelect(m)}
       >
-        <Text style={styles.text}>{m}</Text>
+        <Text style={[
+          styles.text,
+          selected === m && styles.activeText  // ← This was missing!
+        ]}>
+          {m}
+        </Text>
       </TouchableOpacity>
     ))}
   </ScrollView>
@@ -33,7 +45,16 @@ const styles = StyleSheet.create({
     backgroundColor: '#eef2f7',
     marginRight: 8,
   },
-  active: { backgroundColor: '#0f172a' },
-  text: { color: '#000', fontWeight: '600' },
-  activeText: { color: '#fff', fontWeight: '700' },
-});
+  active: { 
+    backgroundColor: '#0f172a'  // Dark background when active
+  },
+  text: { 
+    color: '#000', 
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  activeText: { 
+    color: '#fff',              // White text when active
+    fontWeight: '700' 
+  },
+});

package/src/screens/Report1Screen.jsx

@@ -65,9 +65,9 @@ const styles = StyleSheet.create({
     borderColor: '#eee',
   },
   backIcon: {
-    fontSize: 28,
+    fontSize: 32,
     color: '#000',
-    fontWeight: '300',
+    fontWeight: '700',
   },
   headerTitle: {
     fontSize: 19,