@dhiraj0720/report1chart 2.2.2 → 2.2.4

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;

package/src/screens/ReportDetail.jsx

@@ -1,222 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native';
-import DefaultTable from '../components/tables/DefaultTable';
-import CompactTable from '../components/tables/CompactTable';
-import FreezeTable from '../components/tables/FreezeTable';
-import BarChart from '../components/charts/BarChart';
-import PieChart from '../components/charts/PieChart';
-import LineChart from '../components/charts/LineChart';
-import LoadingSpinner from '../components/common/LoadingSpinner';
-import ErrorDisplay from '../components/common/ErrorDisplay';
-
-const ReportDetail = ({ report, loading, error, onBack, onClose }) => {
-  const [viewType, setViewType] = useState(report.subType || 'default');
-
-  const renderContent = () => {
-    if (loading) {
-      return <LoadingSpinner message="Loading report data..." />;
-    }
-
-    if (error) {
-      return <ErrorDisplay error={error} onRetry={() => onBack()} />;
-    }
-
-    if (!report.data || (Array.isArray(report.data) && report.data.length === 0)) {
-      return (
-        <View style={styles.noDataContainer}>
-          <Text style={styles.noDataText}>No data available</Text>
-        </View>
-      );
-    }
-
-    switch (report.type) {
-      case 'table':
-        return renderTable();
-      case 'bar':
-        return <BarChart data={report.data} title={report.title} />;
-      case 'pie':
-        return <PieChart data={report.data} title={report.title} />;
-      case 'line':
-        return <LineChart data={report.data} title={report.title} />;
-      default:
-        return <BarChart data={report.data} title={report.title} />;
-    }
-  };
-
-  const renderTable = () => {
-    switch (viewType) {
-      case 'compact':
-        return <CompactTable data={report.data} />;
-      case 'freeze':
-        return <FreezeTable data={report.data} />;
-      default:
-        return <DefaultTable data={report.data} />;
-    }
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity 
-          style={styles.backButton}
-          onPress={onBack}
-        >
-          <Text style={styles.backText}>‹</Text>
-          <Text style={styles.backButtonText}>Back</Text>
-        </TouchableOpacity>
-        <Text style={styles.headerTitle} numberOfLines={1}>
-          {report.title || report.name}
-        </Text>
-        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-          <Text style={styles.closeText}>×</Text>
-        </TouchableOpacity>
-      </View>
-
-      {report.type === 'table' && (
-        <View style={styles.viewTypeSelector}>
-          <TouchableOpacity 
-            style={[
-              styles.viewTypeButton,
-              viewType === 'default' && styles.activeViewType
-            ]}
-            onPress={() => setViewType('default')}
-          >
-            <Text style={[
-              styles.viewTypeText,
-              viewType === 'default' && styles.activeViewTypeText
-            ]}>Default</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity 
-            style={[
-              styles.viewTypeButton,
-              viewType === 'compact' && styles.activeViewType
-            ]}
-            onPress={() => setViewType('compact')}
-          >
-            <Text style={[
-              styles.viewTypeText,
-              viewType === 'compact' && styles.activeViewTypeText
-            ]}>Compact</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity 
-            style={[
-              styles.viewTypeButton,
-              viewType === 'freeze' && styles.activeViewType
-            ]}
-            onPress={() => setViewType('freeze')}
-          >
-            <Text style={[
-              styles.viewTypeText,
-              viewType === 'freeze' && styles.activeViewTypeText
-            ]}>Freeze</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      <ScrollView style={styles.content}>
-        {renderContent()}
-      </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',
-  },
-  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',
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  viewTypeSelector: {
-    flexDirection: 'row',
-    backgroundColor: '#f0f0f0',
-    borderRadius: 8,
-    padding: 4,
-    margin: 16,
-    alignSelf: 'center',
-  },
-  viewTypeButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 6,
-    marginHorizontal: 2,
-  },
-  activeViewType: {
-    backgroundColor: '#fff',
-  },
-  viewTypeText: {
-    fontSize: 13,
-    fontWeight: '500',
-    color: '#666',
-  },
-  activeViewTypeText: {
-    color: '#4CAF50',
-    fontWeight: '600',
-  },
-  noDataContainer: {
-    padding: 40,
-    alignItems: 'center',
-  },
-  noDataText: {
-    fontSize: 16,
-    color: '#999',
-    textAlign: 'center',
-  },
-});
-
-export default ReportDetail;