@dhiraj0720/report1chart 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "src/index.jsx",
   "publishConfig": {
     "access": "public"

package/src/index.jsx

@@ -99,11 +99,21 @@ const formatCurrency = (value) => {
     );
   }
 
-  const { type, data } = reportData;
+  const { type, subType, data } = reportData;
+  
+  if (type === 'table') {
+    switch (subType) {
+      case 'compact': // Report 1A
+        return renderCompactTable(data);
+      case 'freeze': // Report 1B
+        return renderFreezeTable(data);
+      case 'default': // Report 1
+      default:
+        return renderTable(data); // Original table
+    }
+  }
   
   switch (type) {
-    case 'table':
-      return renderTable(data);
     case 'line':
       return renderLineChart(data);
     case 'bar':
@@ -295,6 +305,224 @@ const formatCurrency = (value) => {
   );
 };
 
+const renderCompactTable = (data) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.compactContainer}>
+      {data.map((item, index) => (
+        <View 
+          key={index}
+          style={[
+            styles.compactCard,
+            item.isTotal && styles.compactTotalCard,
+            index % 2 === 0 ? styles.evenCard : styles.oddCard
+          ]}
+        >
+          {/* Card Header */}
+          <View style={styles.compactHeader}>
+            <Text style={[
+              styles.compactTitle,
+              item.isTotal && styles.totalTitle
+            ]}>
+              {item.name}
+            </Text>
+            <Text style={[
+              styles.compactGrossMargin,
+              item.grossMarginPercent >= 0 ? styles.positive : styles.negative
+            ]}>
+              Brüt Kar: {item.grossMarginPercent}%
+            </Text>
+          </View>
+
+          {/* Card Body - Grid Layout */}
+          <View style={styles.compactGrid}>
+            {/* Column 1 */}
+            <View style={styles.compactColumn}>
+              <Text style={styles.compactLabel}>2024 Fiili</Text>
+              <Text style={styles.compactValue}>
+                {formatCurrency(item.actual2024)}
+              </Text>
+            </View>
+            
+            {/* Column 2 */}
+            <View style={styles.compactColumn}>
+              <Text style={styles.compactLabel}>2025 Fiili</Text>
+              <Text style={styles.compactValue}>
+                {formatCurrency(item.actual2025)}
+              </Text>
+            </View>
+            
+            {/* Column 3 */}
+            <View style={styles.compactColumn}>
+              <Text style={styles.compactLabel}>Fiili Artış</Text>
+              <View style={styles.percentBadge}>
+                <Text style={[
+                  styles.percentText,
+                  item.yoYChangePercent >= 0 ? styles.positive : styles.negative
+                ]}>
+                  {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
+                </Text>
+              </View>
+            </View>
+            
+            {/* Column 4 */}
+            <View style={styles.compactColumn}>
+              <Text style={styles.compactLabel}>2025 Bütçe</Text>
+              <Text style={styles.compactValue}>
+                {formatCurrency(item.budget2025)}
+              </Text>
+            </View>
+            
+            {/* Column 5 */}
+            <View style={styles.compactColumn}>
+              <Text style={styles.compactLabel}>Sapma</Text>
+              <View style={styles.percentBadge}>
+                <Text style={[
+                  styles.percentText,
+                  item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
+                ]}>
+                  {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
+                </Text>
+              </View>
+            </View>
+          </View>
+
+          {/* Status Indicator */}
+          <View style={styles.statusIndicator}>
+            <View style={[
+              styles.statusDot,
+              (item.yoYChangePercent >= 0 && item.budgetVariancePercent >= 0) 
+                ? styles.statusGood 
+                : styles.statusWarning
+            ]} />
+            <Text style={styles.statusText}>
+              {item.yoYChangePercent >= 0 && item.budgetVariancePercent >= 0 
+                ? 'Performans İyi' 
+                : 'İnceleme Gerekli'}
+            </Text>
+          </View>
+        </View>
+      ))}
+    </ScrollView>
+  );
+};
+
+// Report 1B: Freeze First Column Table
+const renderFreezeTable = (data) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.freezeContainer}>
+      {/* Fixed First Column */}
+      <View style={styles.freezeColumn}>
+        <View style={[styles.freezeHeader, styles.freezeFirstCell]}>
+          <Text style={styles.freezeHeaderText}>FALİYET KAR/ZARAR</Text>
+        </View>
+        {data.map((item, index) => (
+          <View 
+            key={index}
+            style={[
+              styles.freezeRow,
+              item.isTotal && styles.freezeTotalRow,
+              index % 2 === 0 ? styles.evenRow : styles.oddRow
+            ]}
+          >
+            <Text style={[
+              styles.freezeCellText,
+              item.isTotal && styles.freezeTotalText
+            ]}>
+              {item.name}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Scrollable Data Columns */}
+      <ScrollView horizontal showsHorizontalScrollIndicator={true}>
+        <View style={styles.scrollableColumns}>
+          {/* Headers for scrollable columns */}
+          <View style={styles.freezeHeaderRow}>
+            {['2024 Fiili', '2025 Fiili', 'Fiili Artış %', '2025 Bütçe', 'Sapma %', 'BRÜT KAR %'].map((header, idx) => (
+              <View key={idx} style={styles.freezeHeader}>
+                <Text style={styles.freezeHeaderText}>{header}</Text>
+              </View>
+            ))}
+          </View>
+
+          {/* Data rows for scrollable columns */}
+          {data.map((item, rowIndex) => (
+            <View 
+              key={rowIndex}
+              style={[
+                styles.freezeDataRow,
+                item.isTotal && styles.freezeTotalDataRow,
+                rowIndex % 2 === 0 ? styles.evenRow : styles.oddRow
+              ]}
+            >
+              <View style={styles.freezeDataCell}>
+                <Text style={styles.freezeDataText}>
+                  {formatCurrency(item.actual2024)}
+                </Text>
+              </View>
+              
+              <View style={styles.freezeDataCell}>
+                <Text style={styles.freezeDataText}>
+                  {formatCurrency(item.actual2025)}
+                </Text>
+              </View>
+              
+              <View style={styles.freezeDataCell}>
+                <Text style={[
+                  styles.freezePercent,
+                  item.yoYChangePercent >= 0 ? styles.positive : styles.negative
+                ]}>
+                  {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
+                </Text>
+              </View>
+              
+              <View style={styles.freezeDataCell}>
+                <Text style={styles.freezeDataText}>
+                  {formatCurrency(item.budget2025)}
+                </Text>
+              </View>
+              
+              <View style={styles.freezeDataCell}>
+                <Text style={[
+                  styles.freezePercent,
+                  item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
+                ]}>
+                  {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
+                </Text>
+              </View>
+              
+              <View style={styles.freezeDataCell}>
+                <Text style={[
+                  styles.freezePercent,
+                  styles.grossMargin
+                ]}>
+                  {item.grossMarginPercent}%
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
 
 
   const renderPieChart = (data) => {
@@ -808,6 +1036,303 @@ const styles = StyleSheet.create({
     color: '#2c3e50',
     fontWeight: '700',
   },
+
+  compactContainer: {
+    flex: 1,
+    paddingHorizontal: 8,
+  },
+  compactCard: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    marginBottom: 12,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  compactTotalCard: {
+    backgroundColor: '#e8f5e9',
+    borderColor: '#4CAF50',
+    borderWidth: 2,
+  },
+  evenCard: {
+    backgroundColor: '#fff',
+  },
+  oddCard: {
+    backgroundColor: '#f9f9f9',
+  },
+  compactHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  compactTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#2c3e50',
+    flex: 1,
+  },
+  totalTitle: {
+    fontWeight: '700',
+    color: '#2c3e50',
+    fontSize: 15,
+  },
+  compactGrossMargin: {
+    fontSize: 13,
+    fontWeight: '600',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    backgroundColor: '#f0f0f0',
+  },
+  compactGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  compactColumn: {
+    width: '48%',
+    marginBottom: 12,
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  compactLabel: {
+    fontSize: 11,
+    color: '#666',
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  compactValue: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#2c3e50',
+    fontFamily: 'monospace',
+  },
+  percentBadge: {
+    backgroundColor: '#fff',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  statusIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 8,
+  },
+  statusGood: {
+    backgroundColor: '#4CAF50',
+  },
+  statusWarning: {
+    backgroundColor: '#FF9800',
+  },
+  statusText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  
+  // Report 1B: Freeze First Column Styles
+  freezeContainer: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  freezeColumn: {
+    width: 180,
+    borderRightWidth: 2,
+    borderRightColor: '#ddd',
+    backgroundColor: '#fff',
+  },
+  freezeFirstCell: {
+    backgroundColor: '#2c3e50',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  freezeHeader: {
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#2c3e50',
+    borderBottomWidth: 1,
+    borderBottomColor: '#444',
+    borderRightWidth: 1,
+    borderRightColor: '#444',
+    minWidth: 120,
+  },
+  freezeHeaderRow: {
+    flexDirection: 'row',
+  },
+  freezeHeaderText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  freezeRow: {
+    height: 45,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  freezeTotalRow: {
+    backgroundColor: '#e8f5e9',
+    borderTopWidth: 2,
+    borderTopColor: '#4CAF50',
+    borderBottomWidth: 2,
+    borderBottomColor: '#4CAF50',
+  },
+  freezeCellText: {
+    fontSize: 12,
+    color: '#333',
+    fontWeight: '500',
+  },
+  freezeTotalText: {
+    fontWeight: '700',
+    color: '#2c3e50',
+  },
+  scrollableColumns: {
+    flex: 1,
+  },
+  freezeDataRow: {
+    flexDirection: 'row',
+    height: 45,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  freezeTotalDataRow: {
+    backgroundColor: '#e8f5e9',
+  },
+  freezeDataCell: {
+    minWidth: 120,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#eee',
+    paddingHorizontal: 8,
+  },
+  freezeDataText: {
+    fontSize: 12,
+    fontWeight: '500',
+    fontFamily: 'monospace',
+    color: '#333',
+  },
+  freezePercent: {
+    fontSize: 12,
+    fontWeight: '600',
+    fontFamily: 'monospace',
+  },
+  
+  // Add view type selector for performance reports
+  viewTypeSelector: {
+    flexDirection: 'row',
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    padding: 4,
+    marginBottom: 16,
+    alignSelf: 'center',
+  },
+  viewTypeButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 6,
+    marginHorizontal: 2,
+  },
+  activeViewType: {
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  viewTypeText: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: '#666',
+  },
+  activeViewTypeText: {
+    color: '#4CAF50',
+    fontWeight: '600',
+  },
 });
 
+// Add view type selector component in the chart view
+{selectedReport && (selectedReport.id === 1 || selectedReport.id === 1.1 || selectedReport.id === 1.2) && (
+  <View style={styles.viewTypeSelector}>
+    <TouchableOpacity 
+      style={[
+        styles.viewTypeButton,
+        reportData?.subType === 'default' && styles.activeViewType
+      ]}
+      onPress={() => {
+        setReportData({
+          ...reportData,
+          subType: 'default'
+        });
+      }}
+    >
+      <Text style={[
+        styles.viewTypeText,
+        reportData?.subType === 'default' && styles.activeViewTypeText
+      ]}>Varsayılan</Text>
+    </TouchableOpacity>
+    
+    <TouchableOpacity 
+      style={[
+        styles.viewTypeButton,
+        reportData?.subType === 'compact' && styles.activeViewType
+      ]}
+      onPress={() => {
+        setReportData({
+          ...reportData,
+          subType: 'compact'
+        });
+      }}
+    >
+      <Text style={[
+        styles.viewTypeText,
+        reportData?.subType === 'compact' && styles.activeViewTypeText
+      ]}>Kompakt</Text>
+    </TouchableOpacity>
+    
+    <TouchableOpacity 
+      style={[
+        styles.viewTypeButton,
+        reportData?.subType === 'freeze' && styles.activeViewType
+      ]}
+      onPress={() => {
+        setReportData({
+          ...reportData,
+          subType: 'freeze'
+        });
+      }}
+    >
+      <Text style={[
+        styles.viewTypeText,
+        reportData?.subType === 'freeze' && styles.activeViewTypeText
+      ]}>Sabit Kolon</Text>
+    </TouchableOpacity>
+  </View>
+)}
+
 export default ReportChart;