@dhiraj0720/report1chart 2.2.1 → 2.2.3

package/src/components/tables/DefaultTable.jsx

@@ -1,221 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-
-const DefaultTable = ({ 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 (
-    <ScrollView horizontal showsHorizontalScrollIndicator={true}>
-      <View style={styles.table}>
-        <View style={styles.tableHeader}>
-          <View style={[styles.headerCell, styles.firstColumn]}>
-            <Text style={styles.headerText}>ACTIVITY PROFIT/LOSS</Text>
-          </View>
-          <View style={styles.headerCell}>
-            <Text style={styles.headerText}>2024 Actual</Text>
-          </View>
-          <View style={styles.headerCell}>
-            <Text style={styles.headerText}>2025 Actual</Text>
-          </View>
-          <View style={styles.headerCell}>
-            <Text style={styles.headerText}>YoY Change %</Text>
-          </View>
-          <View style={styles.headerCell}>
-            <Text style={styles.headerText}>2025 Budget</Text>
-          </View>
-          <View style={styles.headerCell}>
-            <Text style={styles.headerText}>Variance %</Text>
-          </View>
-          <View style={styles.headerCell}>
-            <Text style={styles.headerText}>GROSS MARGIN %</Text>
-          </View>
-        </View>
-
-        {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 styles = StyleSheet.create({
-  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',
-  },
-  totalText: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: '#2c3e50',
-    textAlign: 'center',
-  },
-  numberText: {
-    fontSize: 11,
-    fontWeight: '500',
-    color: '#333',
-  },
-  percentText: {
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  positive: {
-    color: '#27ae60',
-  },
-  negative: {
-    color: '#e74c3c',
-  },
-  grossMargin: {
-    color: '#2c3e50',
-    fontWeight: '700',
-  },
-  noDataContainer: {
-    padding: 40,
-    alignItems: 'center',
-  },
-  noDataText: {
-    fontSize: 16,
-    color: '#999',
-    textAlign: 'center',
-  },
-});
-
-export default DefaultTable;

package/src/components/tables/FreezeTable.jsx

@@ -1,250 +0,0 @@
-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}>
-      <View style={styles.fixedColumn}>
-        <View style={[styles.fixedHeader, styles.fixedFirstCell]}>
-          <Text style={styles.fixedHeaderText}>ACTIVITY</Text>
-        </View>
-        {data.map((item, index) => (
-          <View 
-            key={index}
-            style={[
-              styles.fixedRow,
-              item.isTotal && styles.fixedTotalRow,
-            ]}
-          >
-            <Text style={[
-              styles.fixedCellText,
-              item.isTotal && styles.fixedTotalText
-            ]}>
-              {item.name}
-            </Text>
-          </View>
-        ))}
-      </View>
-
-      <ScrollView horizontal showsHorizontalScrollIndicator={true}>
-        <View style={styles.scrollableColumns}>
-          <View style={styles.scrollableHeaderRow}>
-            {['2024 Actual', '2025 Actual', 'YoY Change %', '2025 Budget', 'Variance %', 'GROSS MARGIN %'].map((header, idx) => (
-              <View key={idx} style={styles.scrollableHeader}>
-                <Text style={styles.scrollableHeaderText}>{header}</Text>
-              </View>
-            ))}
-          </View>
-
-          {data.map((item, rowIndex) => (
-            <View 
-              key={rowIndex}
-              style={[
-                styles.scrollableDataRow,
-                item.isTotal && styles.scrollableTotalDataRow,
-              ]}
-            >
-              <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)}%
-                </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)}%
-                </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',
-    color: '#333',
-  },
-  scrollablePercent: {
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  positive: {
-    color: '#27ae60',
-  },
-  negative: {
-    color: '#e74c3c',
-  },
-  grossMargin: {
-    color: '#2c3e50',
-    fontWeight: '700',
-  },
-  noDataContainer: {
-    padding: 40,
-    alignItems: 'center',
-  },
-  noDataText: {
-    fontSize: 16,
-    color: '#999',
-    textAlign: 'center',
-  },
-});
-
-export default FreezeTable;

package/src/screens/ReportDashboard.jsx

@@ -1,121 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native';
-import ReportDetail from './ReportDetail';
-import ReportCard from '../components/common/ReportCard';
-import ApiService from '../api/ApiService';
-
-const ReportDashboard = ({ reports, onReportSelect, onClose }) => {
-  const [selectedReport, setSelectedReport] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  const handleReportClick = async (report) => {
-    setLoading(true);
-    setError(null);
-    
-    try {
-      const data = await ApiService.fetchReportData(report.apiConfig);
-      
-      setSelectedReport({
-        ...report,
-        data: data
-      });
-      
-      if (onReportSelect) {
-        onReportSelect(report.name);
-      }
-    } catch (err) {
-      setError('Failed to fetch data');
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleBack = () => {
-    setSelectedReport(null);
-    setError(null);
-  };
-
-  if (selectedReport) {
-    return (
-      <ReportDetail
-        report={selectedReport}
-        loading={loading}
-        error={error}
-        onBack={handleBack}
-        onClose={onClose}
-      />
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.headerTitle}>Reports Dashboard</Text>
-        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-          <Text style={styles.closeText}>×</Text>
-        </TouchableOpacity>
-      </View>
-
-      <ScrollView style={styles.reportsList}>
-        {reports.map((report) => (
-          <ReportCard
-            key={report.id}
-            report={report}
-            onPress={() => handleReportClick(report)}
-          />
-        ))}
-      </ScrollView>
-    </View>
-  );
-};
-
-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',
-  },
-  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,
-  },
-});
-
-export default ReportDashboard;