@dhiraj0720/report1chart 1.0.6 → 2.1.0

package/src/components/tables/FreezeTable.jsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+} from 'react-native';
+
+const FreezeTable = ({ data }) => {
+  const formatCurrency = (value) => {
+    const num = Number(value);
+    if (isNaN(num)) return '0';
+    
+    if (num >= 1000000) {
+      return `${(num / 1000000).toFixed(1)}M`;
+    } else if (num >= 1000) {
+      return `${(num / 1000).toFixed(1)}K`;
+    }
+    return num.toLocaleString();
+  };
+
+  if (!Array.isArray(data) || data.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Fixed First Column */}
+      <View style={styles.fixedColumn}>
+        <View style={[styles.fixedHeader, styles.fixedFirstCell]}>
+          <Text style={styles.fixedHeaderText}>FALİYET KAR/ZARAR</Text>
+        </View>
+        {data.map((item, index) => (
+          <View 
+            key={index}
+            style={[
+              styles.fixedRow,
+              item.isTotal && styles.fixedTotalRow,
+              index % 2 === 0 ? styles.evenRow : styles.oddRow
+            ]}
+          >
+            <Text style={[
+              styles.fixedCellText,
+              item.isTotal && styles.fixedTotalText
+            ]}>
+              {item.name}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Scrollable Data Columns */}
+      <ScrollView horizontal showsHorizontalScrollIndicator={true}>
+        <View style={styles.scrollableColumns}>
+          {/* Headers for scrollable columns */}
+          <View style={styles.scrollableHeaderRow}>
+            {['2024 Fiili', '2025 Fiili', 'Fiili Artış %', '2025 Bütçe', 'Sapma %', 'BRÜT KAR %'].map((header, idx) => (
+              <View key={idx} style={styles.scrollableHeader}>
+                <Text style={styles.scrollableHeaderText}>{header}</Text>
+              </View>
+            ))}
+          </View>
+
+          {/* Data rows for scrollable columns */}
+          {data.map((item, rowIndex) => (
+            <View 
+              key={rowIndex}
+              style={[
+                styles.scrollableDataRow,
+                item.isTotal && styles.scrollableTotalDataRow,
+                rowIndex % 2 === 0 ? styles.evenRow : styles.oddRow
+              ]}
+            >
+              <View style={styles.scrollableDataCell}>
+                <Text style={styles.scrollableDataText}>
+                  {formatCurrency(item.actual2024)}
+                </Text>
+              </View>
+              
+              <View style={styles.scrollableDataCell}>
+                <Text style={styles.scrollableDataText}>
+                  {formatCurrency(item.actual2025)}
+                </Text>
+              </View>
+              
+              <View style={styles.scrollableDataCell}>
+                <Text style={[
+                  styles.scrollablePercent,
+                  item.yoYChangePercent >= 0 ? styles.positive : styles.negative
+                ]}>
+                  {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent).toFixed(1)}%
+                </Text>
+              </View>
+              
+              <View style={styles.scrollableDataCell}>
+                <Text style={styles.scrollableDataText}>
+                  {formatCurrency(item.budget2025)}
+                </Text>
+              </View>
+              
+              <View style={styles.scrollableDataCell}>
+                <Text style={[
+                  styles.scrollablePercent,
+                  item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
+                ]}>
+                  {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent).toFixed(1)}%
+                </Text>
+              </View>
+              
+              <View style={styles.scrollableDataCell}>
+                <Text style={[
+                  styles.scrollablePercent,
+                  styles.grossMargin
+                ]}>
+                  {item.grossMarginPercent}%
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  fixedColumn: {
+    width: 180,
+    borderRightWidth: 2,
+    borderRightColor: '#ddd',
+    backgroundColor: '#fff',
+  },
+  fixedFirstCell: {
+    backgroundColor: '#2c3e50',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fixedHeader: {
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#2c3e50',
+    borderBottomWidth: 1,
+    borderBottomColor: '#444',
+    borderRightWidth: 1,
+    borderRightColor: '#444',
+    minWidth: 120,
+  },
+  fixedHeaderText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  fixedRow: {
+    height: 45,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  fixedTotalRow: {
+    backgroundColor: '#e8f5e9',
+    borderTopWidth: 2,
+    borderTopColor: '#4CAF50',
+    borderBottomWidth: 2,
+    borderBottomColor: '#4CAF50',
+  },
+  fixedCellText: {
+    fontSize: 12,
+    color: '#333',
+    fontWeight: '500',
+  },
+  fixedTotalText: {
+    fontWeight: '700',
+    color: '#2c3e50',
+  },
+  scrollableColumns: {
+    flex: 1,
+  },
+  scrollableHeaderRow: {
+    flexDirection: 'row',
+  },
+  scrollableHeader: {
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#2c3e50',
+    borderBottomWidth: 1,
+    borderBottomColor: '#444',
+    borderRightWidth: 1,
+    borderRightColor: '#444',
+    minWidth: 120,
+  },
+  scrollableHeaderText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  scrollableDataRow: {
+    flexDirection: 'row',
+    height: 45,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  scrollableTotalDataRow: {
+    backgroundColor: '#e8f5e9',
+  },
+  scrollableDataCell: {
+    minWidth: 120,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#eee',
+    paddingHorizontal: 8,
+  },
+  scrollableDataText: {
+    fontSize: 12,
+    fontWeight: '500',
+    fontFamily: 'monospace',
+    color: '#333',
+  },
+  scrollablePercent: {
+    fontSize: 12,
+    fontWeight: '600',
+    fontFamily: 'monospace',
+  },
+  positive: {
+    color: '#27ae60',
+  },
+  negative: {
+    color: '#e74c3c',
+  },
+  grossMargin: {
+    color: '#2c3e50',
+    fontWeight: '700',
+  },
+  evenRow: {
+    backgroundColor: '#fff',
+  },
+  oddRow: {
+    backgroundColor: '#f9f9f9',
+  },
+  noDataContainer: {
+    padding: 40,
+    alignItems: 'center',
+  },
+  noDataText: {
+    fontSize: 16,
+    color: '#999',
+    textAlign: 'center',
+  },
+});
+
+export default FreezeTable;

package/src/components/tables/TableUtils.jsx

@@ -0,0 +1,47 @@
+import { Dimensions } from 'react-native';
+
+export const formatCurrency = (value) => {
+  const num = Number(value);
+  if (isNaN(num)) return '0';
+  
+  if (num >= 1000000) {
+    return `${(num / 1000000).toFixed(1)}M`;
+  } else if (num >= 1000) {
+    return `${(num / 1000).toFixed(1)}K`;
+  }
+  return num.toLocaleString();
+};
+
+export const formatNumber = (num) => {
+  return num.toLocaleString();
+};
+
+export const calculatePercentageChange = (oldValue, newValue) => {
+  if (!oldValue || oldValue === 0) return 0;
+  return ((newValue - oldValue) / Math.abs(oldValue)) * 100;
+};
+
+export const getTableWidth = (columns) => {
+  const { width: screenWidth } = Dimensions.get('window');
+  return Math.max(screenWidth, columns * 120);
+};
+
+export const getStatusColor = (yoYChange, budgetVariance) => {
+  if (yoYChange >= 0 && budgetVariance >= 0) {
+    return '#4CAF50'; // Good
+  } else if (yoYChange >= 0 || budgetVariance >= 0) {
+    return '#FF9800'; // Warning
+  } else {
+    return '#F44336'; // Critical
+  }
+};
+
+export const getStatusText = (yoYChange, budgetVariance) => {
+  if (yoYChange >= 0 && budgetVariance >= 0) {
+    return 'Performans İyi';
+  } else if (yoYChange >= 0 || budgetVariance >= 0) {
+    return 'Kısmen İyi';
+  } else {
+    return 'İnceleme Gerekli';
+  }
+};