@dhiraj0720/report1chart 1.0.6 → 2.1.0

package/src/index.jsx

@@ -1,1358 +1,18 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  ActivityIndicator,
-  Dimensions,
-} from 'react-native';
+import React from 'react';
+import ReportDashboard from './screens/ReportDashboard';
 
 const ReportChart = ({ 
+  reports = [], 
   onReportSelect, 
-  onClose, 
-  reports = [],
-  onFetchReportData 
+  onClose 
 }) => {
-  const [selectedReport, setSelectedReport] = useState(null);
-  const [reportData, setReportData] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [viewType, setViewType] = useState('default');
-
-  // Default reports if none provided
-  const defaultReports = [
-    { 
-      id: 1, 
-      name: 'Performance Report', 
-      title: 'PERFORMANS RAPORU (USD)',
-      type: 'table',
-      description: 'Fallyet Kar/Zarar tablosu - Varsayılan Görünüm'
-    },
-    { 
-      id: 1.1, 
-      name: 'Performance Report A', 
-      title: 'PERFORMANS RAPORU (USD)',
-      type: 'table',
-      description: 'Fallyet Kar/Zarar tablosu - Kompakt Görünüm'
-    },
-    { 
-      id: 1.2, 
-      name: 'Performance Report B', 
-      title: 'PERFORMANS RAPORU (USD)',
-      type: 'table',
-      description: 'Fallyet Kar/Zarar tablosu - Sabit Kolonlu Görünüm'
-    },
-    { 
-      id: 2, 
-      name: 'Revenue by Mode', 
-      title: 'Revenue by Mode',
-      type: 'bar',
-      description: 'Revenue distribution across modes'
-    },
-    { 
-      id: 3, 
-      name: 'Shipment by Direction', 
-      title: 'Shipment by Direction',
-      type: 'pie',
-      description: 'Shipment direction analysis'
-    },
-  ];
-
-  const reportList = reports.length > 0 ? reports : defaultReports;
-
-  const handleReportClick = async (report) => {
-    setLoading(true);
-    setError(null);
-    setReportData(null);
-    setSelectedReport(report);
-    setViewType('default'); // Reset view type when selecting new report
-    
-    try {
-      if (onFetchReportData) {
-        const data = await onFetchReportData(report);
-        if (data) {
-          setReportData({
-            ...data,
-            title: report.title || report.name,
-            type: report.type || 'bar',
-          });
-        }
-      }
-      
-      if (onReportSelect) {
-        onReportSelect(report.name);
-      }
-    } catch (err) {
-      setError(err.message || 'Failed to fetch report data');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  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();
-  };
-
-  const formatNumber = (num) => {
-    return num.toLocaleString();
-  };
-
-  const getColor = (index) => {
-    const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0', '#00BCD4'];
-    return colors[index % colors.length];
-  };
-
-  const handleClose = () => {
-    setSelectedReport(null);
-    setReportData(null);
-    if (onClose) onClose();
-  };
-
-  // ========== TABLE RENDERERS ==========
-  const renderTable = (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 horizontal showsHorizontalScrollIndicator={true}>
-        <View style={styles.table}>
-          {/* Table Header */}
-          <View style={styles.tableHeader}>
-            <View style={[styles.headerCell, styles.firstColumn]}>
-              <Text style={styles.headerText}>FALİYET KAR/ZARAR</Text>
-            </View>
-            <View style={styles.headerCell}>
-              <Text style={styles.headerText}>2024 Fiili</Text>
-            </View>
-            <View style={styles.headerCell}>
-              <Text style={styles.headerText}>2025 Fiili</Text>
-            </View>
-            <View style={styles.headerCell}>
-              <Text style={styles.headerText}>Fiili Artış %</Text>
-            </View>
-            <View style={styles.headerCell}>
-              <Text style={styles.headerText}>2025 Bütçe</Text>
-            </View>
-            <View style={styles.headerCell}>
-              <Text style={styles.headerText}>Sapma %</Text>
-            </View>
-            <View style={styles.headerCell}>
-              <Text style={styles.headerText}>BRÜT KAR %</Text>
-            </View>
-          </View>
-
-          {/* Table Rows */}
-          {data.map((item, index) => (
-            <View 
-              key={index} 
-              style={[
-                styles.tableRow,
-                item.isTotal ? styles.totalRow : (index % 2 === 0 ? styles.evenRow : styles.oddRow)
-              ]}
-            >
-              <View style={[styles.cell, styles.firstColumn]}>
-                <Text style={item.isTotal ? styles.totalText : styles.cellText}>
-                  {item.name}
-                </Text>
-              </View>
-              
-              <View style={styles.cell}>
-                <Text style={styles.numberText}>
-                  {formatCurrency(item.actual2024)}
-                </Text>
-              </View>
-              
-              <View style={styles.cell}>
-                <Text style={styles.numberText}>
-                  {formatCurrency(item.actual2025)}
-                </Text>
-              </View>
-              
-              <View style={styles.cell}>
-                <Text style={[
-                  styles.percentText,
-                  item.yoYChangePercent >= 0 ? styles.positive : styles.negative
-                ]}>
-                  {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
-                </Text>
-              </View>
-              
-              <View style={styles.cell}>
-                <Text style={styles.numberText}>
-                  {formatCurrency(item.budget2025)}
-                </Text>
-              </View>
-              
-              <View style={styles.cell}>
-                <Text style={[
-                  styles.percentText,
-                  item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
-                ]}>
-                  {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
-                </Text>
-              </View>
-              
-              <View style={styles.cell}>
-                <Text style={[
-                  styles.percentText,
-                  styles.grossMargin
-                ]}>
-                  {item.grossMarginPercent}%
-                </Text>
-              </View>
-            </View>
-          ))}
-        </View>
-      </ScrollView>
-    );
-  };
-
-  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,
-                styles.grossMargin
-              ]}>
-                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>
-    );
-  };
-
-  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>
-    );
-  };
-
-  // ========== CHART RENDERERS ==========
-  const renderLineChart = (data) => {
-    const values = data.values || data.map(d => d.value || d.revenue || d.shipments || 0);
-    const labels = data.labels || data.map(d => d.label || d.month || d.mode || d.direction || '');
-    
-    const maxValue = Math.max(...values, 1);
-    const chartHeight = 200;
-    const chartWidth = Dimensions.get('window').width - 64;
-    const barWidth = (chartWidth / values.length) - 10;
-    
-    return (
-      <View style={styles.chartContainer}>
-        <Text style={styles.chartTitle}>{reportData?.title || ''}</Text>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <View style={[styles.chart, { height: chartHeight, width: chartWidth }]}>
-            {values.map((value, index) => {
-              const height = (value / maxValue) * chartHeight;
-              const label = labels[index] || `M${index + 1}`;
-              
-              return (
-                <View key={index} style={styles.linePointWrapper}>
-                  <View style={[styles.linePoint, { 
-                    height: Math.max(height, 2),
-                    width: barWidth 
-                  }]} />
-                  <View style={styles.lineConnector} />
-                  <Text style={styles.lineLabel} numberOfLines={1}>{label}</Text>
-                  <Text style={styles.valueText}>{formatNumber(value)}</Text>
-                </View>
-              );
-            })}
-          </View>
-        </ScrollView>
-      </View>
-    );
-  };
-
-  const renderBarChart = (data) => {
-    const isArray = Array.isArray(data);
-    const values = isArray ? data.map(d => d.revenue || d.value || d.shipments || 0) : data.values;
-    const labels = isArray ? data.map(d => d.mode || d.label || '') : data.labels;
-    
-    const maxValue = Math.max(...values, 1);
-    const chartHeight = 200;
-    const chartWidth = Dimensions.get('window').width - 64;
-    const barWidth = Math.min(40, (chartWidth / values.length) - 10);
-    
-    return (
-      <View style={styles.chartContainer}>
-        <Text style={styles.chartTitle}>{reportData?.title || ''}</Text>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <View style={[styles.chart, { height: chartHeight, width: chartWidth }]}>
-            {values.map((value, index) => {
-              const height = (value / maxValue) * chartHeight;
-              const label = labels?.[index] || `Item ${index + 1}`;
-              
-              return (
-                <View key={index} style={styles.barWrapper}>
-                  <View style={[styles.bar, { 
-                    height,
-                    width: barWidth,
-                    backgroundColor: getColor(index)
-                  }]} />
-                  <Text style={styles.barLabel} numberOfLines={1}>{label}</Text>
-                  <Text style={styles.valueText}>{formatNumber(value)}</Text>
-                </View>
-              );
-            })}
-          </View>
-        </ScrollView>
-      </View>
-    );
-  };
-
-  const renderPieChart = (data) => {
-    const total = data.reduce((sum, item) => sum + (item.shipments || item.revenue || item.value || 0), 0);
-    
-    return (
-      <View style={styles.chartContainer}>
-        <Text style={styles.chartTitle}>{reportData?.title || ''}</Text>
-        <View style={styles.pieContainer}>
-          {data.map((item, index) => {
-            const value = item.shipments || item.revenue || item.value || 0;
-            const label = item.direction || item.mode || item.label || `Item ${index + 1}`;
-            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
-            
-            return (
-              <View key={index} style={styles.pieItem}>
-                <View style={[styles.pieColor, { backgroundColor: getColor(index) }]} />
-                <Text style={styles.pieLabel}>{label}:</Text>
-                <Text style={styles.pieValue}>
-                  {formatNumber(value)} ({percentage}%)
-                </Text>
-              </View>
-            );
-          })}
-        </View>
-        {total > 0 && (
-          <Text style={styles.totalText}>Total: {formatNumber(total)}</Text>
-        )}
-      </View>
-    );
-  };
-
-  // ========== MAIN RENDER LOGIC ==========
-  const renderChart = () => {
-    if (!reportData || !reportData.data) {
-      return (
-        <View style={styles.noDataContainer}>
-          <Text style={styles.noDataText}>No data available for this report</Text>
-        </View>
-      );
-    }
-
-    const { type, data } = reportData;
-    
-    // For performance reports
-    if (type === 'table' && selectedReport && 
-        (selectedReport.id === 1 || selectedReport.id === 1.1 || selectedReport.id === 1.2)) {
-      switch (viewType) {
-        case 'compact':
-          return renderCompactTable(data);
-        case 'freeze':
-          return renderFreezeTable(data);
-        case 'default':
-        default:
-          return renderTable(data);
-      }
-    }
-    
-    // For other table reports
-    if (type === 'table') {
-      return renderTable(data);
-    }
-    
-    // For chart reports
-    switch (type) {
-      case 'line':
-        return renderLineChart(data);
-      case 'bar':
-        return renderBarChart(data);
-      case 'pie':
-        return renderPieChart(data);
-      default:
-        return renderBarChart(data);
-    }
-  };
-
-  // ========== RENDER SELECTED REPORT VIEW ==========
-  if (selectedReport) {
-    return (
-      <View style={styles.container}>
-        <View style={styles.header}>
-          <TouchableOpacity 
-            style={styles.backButton}
-            onPress={() => {
-              setSelectedReport(null);
-              setReportData(null);
-              setViewType('default');
-            }}
-          >
-            <Text style={styles.backText}>‹</Text>
-            <Text style={styles.backButtonText}>Back</Text>
-          </TouchableOpacity>
-          <Text style={styles.headerTitle} numberOfLines={1}>
-            {selectedReport.title || selectedReport.name}
-          </Text>
-          <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
-            <Text style={styles.closeText}>×</Text>
-          </TouchableOpacity>
-        </View>
-
-        {loading ? (
-          <View style={styles.loadingContainer}>
-            <ActivityIndicator size="large" color="#4CAF50" />
-            <Text style={styles.loadingText}>Loading report data...</Text>
-          </View>
-        ) : error ? (
-          <View style={styles.errorContainer}>
-            <Text style={styles.errorText}>Error: {error}</Text>
-            <TouchableOpacity 
-              style={styles.retryButton}
-              onPress={() => handleReportClick(selectedReport)}
-            >
-              <Text style={styles.retryText}>Retry</Text>
-            </TouchableOpacity>
-          </View>
-        ) : (
-          <ScrollView style={styles.chartView}>
-            {/* View Type Selector for Performance Reports */}
-            {selectedReport && 
-             (selectedReport.id === 1 || selectedReport.id === 1.1 || selectedReport.id === 1.2) && 
-             reportData && (
-              <View style={styles.viewTypeSelector}>
-                <TouchableOpacity 
-                  style={[
-                    styles.viewTypeButton,
-                    viewType === 'default' && styles.activeViewType
-                  ]}
-                  onPress={() => setViewType('default')}
-                >
-                  <Text style={[
-                    styles.viewTypeText,
-                    viewType === 'default' && styles.activeViewTypeText
-                  ]}>Varsayılan</Text>
-                </TouchableOpacity>
-                
-                <TouchableOpacity 
-                  style={[
-                    styles.viewTypeButton,
-                    viewType === 'compact' && styles.activeViewType
-                  ]}
-                  onPress={() => setViewType('compact')}
-                >
-                  <Text style={[
-                    styles.viewTypeText,
-                    viewType === 'compact' && styles.activeViewTypeText
-                  ]}>Kompakt</Text>
-                </TouchableOpacity>
-                
-                <TouchableOpacity 
-                  style={[
-                    styles.viewTypeButton,
-                    viewType === 'freeze' && styles.activeViewType
-                  ]}
-                  onPress={() => setViewType('freeze')}
-                >
-                  <Text style={[
-                    styles.viewTypeText,
-                    viewType === 'freeze' && styles.activeViewTypeText
-                  ]}>Sabit Kolon</Text>
-                </TouchableOpacity>
-              </View>
-            )}
-            
-            <View style={styles.chartContainer}>
-              <Text style={styles.chartTitle}>{reportData?.title || selectedReport.title}</Text>
-              {selectedReport.id === 1 || selectedReport.id === 1.1 || selectedReport.id === 1.2 ? (
-                <Text style={styles.reportSubtitle}>
-                  {viewType === 'default' ? 'Varsayılan Görünüm' : 
-                   viewType === 'compact' ? 'Kompakt Görünüm' : 
-                   'Sabit Kolonlu Görünüm'}
-                </Text>
-              ) : null}
-              {renderChart()}
-            </View>
-            
-            {reportData && reportData.data && (
-              <View style={styles.dataInfo}>
-                <Text style={styles.infoTitle}>Report Information</Text>
-                <Text style={styles.infoText}>
-                  {selectedReport.description || 'Detailed analysis report'}
-                </Text>
-                <Text style={styles.dataSource}>
-                  Data points: {Array.isArray(reportData.data) ? reportData.data.length : 
-                    reportData.data.values?.length || reportData.data.labels?.length || 'N/A'}
-                </Text>
-              </View>
-            )}
-          </ScrollView>
-        )}
-      </View>
-    );
-  }
-
-  // ========== RENDER REPORT LIST VIEW ==========
   return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.headerTitle}>Reports Dashboard</Text>
-        <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
-          <Text style={styles.closeText}>×</Text>
-        </TouchableOpacity>
-      </View>
-
-      <ScrollView style={styles.reportsList}>
-        {reportList.map((report) => (
-          <TouchableOpacity
-            key={report.id}
-            style={styles.reportCard}
-            onPress={() => handleReportClick(report)}
-          >
-            <View style={[styles.reportIcon, { backgroundColor: getColor(report.id) }]}>
-              <Text style={styles.reportIconText}>{report.id}</Text>
-            </View>
-            <View style={styles.reportInfo}>
-              <Text style={styles.reportName}>{report.name}</Text>
-              <Text style={styles.reportTitle}>{report.title}</Text>
-              <Text style={styles.reportDesc}>{report.description}</Text>
-            </View>
-            <Text style={styles.arrow}>›</Text>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
+    <ReportDashboard
+      reports={reports}
+      onReportSelect={onReportSelect}
+      onClose={onClose}
+    />
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f8f9fa',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    backgroundColor: '#fff',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#000',
-    flex: 1,
-    textAlign: 'center',
-  },
-  backButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-  },
-  backText: {
-    fontSize: 24,
-    color: '#4CAF50',
-    marginRight: 4,
-  },
-  backButtonText: {
-    fontSize: 16,
-    color: '#4CAF50',
-    fontWeight: '600',
-  },
-  closeButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: '#f0f0f0',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  closeText: {
-    fontSize: 20,
-    color: '#666',
-    fontWeight: '300',
-  },
-  reportsList: {
-    flex: 1,
-    padding: 16,
-  },
-  reportCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: '#e8e8e8',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  reportIcon: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  reportIconText: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#fff',
-  },
-  reportInfo: {
-    flex: 1,
-  },
-  reportName: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#000',
-    marginBottom: 2,
-  },
-  reportTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#4CAF50',
-    marginBottom: 4,
-  },
-  reportDesc: {
-    fontSize: 13,
-    color: '#666',
-    lineHeight: 18,
-  },
-  arrow: {
-    fontSize: 24,
-    color: '#ccc',
-    fontWeight: '300',
-  },
-  chartView: {
-    flex: 1,
-    padding: 16,
-  },
-  chartContainer: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#e8e8e8',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  chartTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#000',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  chart: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    justifyContent: 'space-between',
-    paddingHorizontal: 8,
-  },
-  barWrapper: {
-    alignItems: 'center',
-    marginHorizontal: 4,
-  },
-  bar: {
-    borderRadius: 4,
-  },
-  barLabel: {
-    marginTop: 8,
-    fontSize: 11,
-    color: '#666',
-    textAlign: 'center',
-    width: 60,
-  },
-  linePointWrapper: {
-    alignItems: 'center',
-    marginHorizontal: 4,
-  },
-  linePoint: {
-    backgroundColor: '#2196F3',
-    borderRadius: 2,
-  },
-  lineConnector: {
-    width: 2,
-    backgroundColor: '#2196F3',
-    opacity: 0.3,
-    marginVertical: 2,
-    flex: 1,
-  },
-  lineLabel: {
-    marginTop: 8,
-    fontSize: 11,
-    color: '#666',
-    textAlign: 'center',
-    width: 60,
-  },
-  valueText: {
-    fontSize: 10,
-    color: '#999',
-    marginTop: 4,
-    fontWeight: '500',
-  },
-  pieContainer: {
-    padding: 10,
-  },
-  pieItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 12,
-    padding: 8,
-    backgroundColor: '#f9f9f9',
-    borderRadius: 8,
-  },
-  pieColor: {
-    width: 16,
-    height: 16,
-    borderRadius: 8,
-    marginRight: 12,
-  },
-  pieLabel: {
-    fontSize: 15,
-    fontWeight: '600',
-    color: '#000',
-    flex: 1,
-  },
-  pieValue: {
-    fontSize: 14,
-    color: '#666',
-    fontWeight: '500',
-  },
-  totalText: {
-    fontSize: 16,
-    fontWeight: '700',
-    color: '#4CAF50',
-    textAlign: 'center',
-    marginTop: 16,
-    paddingTop: 16,
-    borderTopWidth: 1,
-    borderTopColor: '#eee',
-  },
-  dataInfo: {
-    backgroundColor: '#e8f5e9',
-    borderRadius: 12,
-    padding: 16,
-    marginTop: 8,
-  },
-  infoTitle: {
-    fontSize: 16,
-    fontWeight: '700',
-    color: '#2e7d32',
-    marginBottom: 8,
-  },
-  infoText: {
-    fontSize: 14,
-    color: '#555',
-    lineHeight: 20,
-    marginBottom: 8,
-  },
-  dataSource: {
-    fontSize: 13,
-    color: '#777',
-    fontStyle: 'italic',
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 40,
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 16,
-    color: '#666',
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 40,
-  },
-  errorText: {
-    fontSize: 16,
-    color: '#d32f2f',
-    textAlign: 'center',
-    marginBottom: 20,
-  },
-  retryButton: {
-    backgroundColor: '#4CAF50',
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    borderRadius: 8,
-  },
-  retryText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  noDataContainer: {
-    padding: 40,
-    alignItems: 'center',
-  },
-  noDataText: {
-    fontSize: 16,
-    color: '#999',
-    textAlign: 'center',
-  },
-
-  // Table Styles
-  table: {
-    minWidth: 700,
-    marginBottom: 20,
-  },
-  tableHeader: {
-    flexDirection: 'row',
-    backgroundColor: '#2c3e50',
-    borderBottomWidth: 1,
-    borderBottomColor: '#ddd',
-  },
-  headerCell: {
-    flex: 1,
-    padding: 10,
-    minWidth: 100,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#444',
-  },
-  firstColumn: {
-    flex: 1.5,
-    minWidth: 180,
-  },
-  headerText: {
-    color: '#fff',
-    fontWeight: '600',
-    fontSize: 11,
-    textAlign: 'center',
-  },
-  tableRow: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#eee',
-    minHeight: 40,
-  },
-  evenRow: {
-    backgroundColor: '#fff',
-  },
-  oddRow: {
-    backgroundColor: '#f9f9f9',
-  },
-  totalRow: {
-    backgroundColor: '#e8f5e9',
-    borderTopWidth: 2,
-    borderTopColor: '#4CAF50',
-    borderBottomWidth: 2,
-    borderBottomColor: '#4CAF50',
-  },
-  cell: {
-    flex: 1,
-    padding: 8,
-    minWidth: 100,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#eee',
-  },
-  cellText: {
-    fontSize: 12,
-    color: '#333',
-    textAlign: 'center',
-  },
-  numberText: {
-    fontSize: 11,
-    fontWeight: '500',
-    fontFamily: 'monospace',
-    color: '#333',
-  },
-  percentText: {
-    fontSize: 12,
-    fontWeight: '600',
-    fontFamily: 'monospace',
-  },
-  positive: {
-    color: '#27ae60',
-  },
-  negative: {
-    color: '#e74c3c',
-  },
-  grossMargin: {
-    color: '#2c3e50',
-    fontWeight: '700',
-  },
-
-  // Compact Table Styles
-  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',
-  },
-  
-  // Freeze Table 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',
-  },
-  
-  // View Type Selector
-  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',
-  },
-  reportSubtitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#4CAF50',
-    textAlign: 'center',
-    marginBottom: 16,
-    fontStyle: 'italic',
-  },
-});
-
 export default ReportChart;