@dhiraj0720/report1chart 1.0.4 → 1.0.6

package/package.json

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

package/src/index.jsx

@@ -19,26 +19,41 @@ const ReportChart = ({
   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: 'Report 1', 
-      title: 'Revenue Trend',
-      type: 'line',
-      description: 'Monthly revenue analysis'
+      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: 'Report 2', 
+      name: 'Revenue by Mode', 
       title: 'Revenue by Mode',
       type: 'bar',
       description: 'Revenue distribution across modes'
     },
     { 
       id: 3, 
-      name: 'Report 3', 
+      name: 'Shipment by Direction', 
       title: 'Shipment by Direction',
       type: 'pie',
       description: 'Shipment direction analysis'
@@ -52,9 +67,9 @@ const ReportChart = ({
     setError(null);
     setReportData(null);
     setSelectedReport(report);
+    setViewType('default'); // Reset view type when selecting new report
     
     try {
-      // Call the parent function to fetch data
       if (onFetchReportData) {
         const data = await onFetchReportData(report);
         if (data) {
@@ -66,7 +81,6 @@ const ReportChart = ({
         }
       }
       
-      // Callback to parent
       if (onReportSelect) {
         onReportSelect(report.name);
       }
@@ -77,47 +91,357 @@ const ReportChart = ({
     }
   };
 
-  // Add currency formatter
-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.toString();
-};
+  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>
+      );
+    }
 
-  const renderChart = () => {
-  if (!reportData || !reportData.data) {
     return (
-      <View style={styles.noDataContainer}>
-        <Text style={styles.noDataText}>No data available for this report</Text>
-      </View>
+      <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 { type, data } = reportData;
-  
-  switch (type) {
-    case 'table':
-      return renderTable(data);
-    case 'line':
-      return renderLineChart(data);
-    case 'bar':
-      return renderBarChart(data);
-    case 'pie':
-      return renderPieChart(data);
-    default:
-      return renderBarChart(data);
-  }
-};
+  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) => {
-    // Handle both formats: { labels, values } or array format
     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 || '');
     
@@ -128,7 +452,7 @@ const formatCurrency = (value) => {
     
     return (
       <View style={styles.chartContainer}>
-        <Text style={styles.chartTitle}>{reportData.title}</Text>
+        <Text style={styles.chartTitle}>{reportData?.title || ''}</Text>
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <View style={[styles.chart, { height: chartHeight, width: chartWidth }]}>
             {values.map((value, index) => {
@@ -154,7 +478,6 @@ const formatCurrency = (value) => {
   };
 
   const renderBarChart = (data) => {
-    // Handle array format or object format
     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;
@@ -166,7 +489,7 @@ const formatCurrency = (value) => {
     
     return (
       <View style={styles.chartContainer}>
-        <Text style={styles.chartTitle}>{reportData.title}</Text>
+        <Text style={styles.chartTitle}>{reportData?.title || ''}</Text>
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <View style={[styles.chart, { height: chartHeight, width: chartWidth }]}>
             {values.map((value, index) => {
@@ -191,119 +514,12 @@ const formatCurrency = (value) => {
     );
   };
 
-  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}>FALİYET GİD.</Text>
-            <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 renderPieChart = (data) => {
-    // Data should be array of objects with label and value
     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>
+        <Text style={styles.chartTitle}>{reportData?.title || ''}</Text>
         <View style={styles.pieContainer}>
           {data.map((item, index) => {
             const value = item.shipments || item.revenue || item.value || 0;
@@ -328,21 +544,51 @@ const formatCurrency = (value) => {
     );
   };
 
-  const formatNumber = (num) => {
-    return num.toLocaleString();
-  };
-
-  const getColor = (index) => {
-    const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0', '#00BCD4'];
-    return colors[index % colors.length];
-  };
+  // ========== 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 handleClose = () => {
-    setSelectedReport(null);
-    setReportData(null);
-    if (onClose) onClose();
+    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}>
@@ -352,6 +598,7 @@ const formatCurrency = (value) => {
             onPress={() => {
               setSelectedReport(null);
               setReportData(null);
+              setViewType('default');
             }}
           >
             <Text style={styles.backText}>‹</Text>
@@ -382,7 +629,63 @@ const formatCurrency = (value) => {
           </View>
         ) : (
           <ScrollView style={styles.chartView}>
-            {renderChart()}
+            {/* 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}>
@@ -402,6 +705,7 @@ const formatCurrency = (value) => {
     );
   }
 
+  // ========== RENDER REPORT LIST VIEW ==========
   return (
     <View style={styles.container}>
       <View style={styles.header}>
@@ -718,7 +1022,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
 
-   // Table Styles
+  // Table Styles
   table: {
     minWidth: 700,
     marginBottom: 20,
@@ -781,12 +1085,6 @@ const styles = StyleSheet.create({
     color: '#333',
     textAlign: 'center',
   },
-  totalText: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: '#2c3e50',
-    textAlign: 'center',
-  },
   numberText: {
     fontSize: 11,
     fontWeight: '500',
@@ -808,6 +1106,253 @@ const styles = StyleSheet.create({
     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;