@dhiraj0720/report1chart 2.2.1 → 2.2.3

package/src/screens/ReportScreen.jsx

@@ -0,0 +1,417 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+} from 'react-native';
+import { ApiFetcher } from '../api/fetcher';
+import ReportList from '../components/ReportList';
+import { 
+  renderTable, 
+  renderCompactTable, 
+  renderFreezeTable 
+} from '../components/TableRenderer';
+import { 
+  renderLineChart, 
+  renderBarChart, 
+  renderPieChart,
+  getColor 
+} from '../components/ChartRenderer';
+
+const ReportScreen = ({ 
+  onReportSelect, 
+  onClose, 
+  reports = []
+}) => {
+  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');
+
+  const handleReportClick = async (report) => {
+    setLoading(true);
+    setError(null);
+    setReportData(null);
+    setSelectedReport(report);
+    setViewType('default');
+    
+    try {
+      // Fetch data using ApiFetcher from npm package
+      const data = await ApiFetcher.fetchReportData(report);
+      setReportData(data);
+      
+      if (onReportSelect) {
+        onReportSelect(report.name);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to fetch report data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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, title } = 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, title);
+      case 'bar':
+        return renderBarChart(data, title);
+      case 'pie':
+        return renderPieChart(data, title);
+      default:
+        return renderBarChart(data, title);
+    }
+  };
+
+  // ========== 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={onClose} 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={onClose} style={styles.closeButton}>
+          <Text style={styles.closeText}>×</Text>
+        </TouchableOpacity>
+      </View>
+
+      <ReportList 
+        reports={reports}
+        onReportClick={handleReportClick}
+        getColor={getColor}
+      />
+    </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',
+  },
+  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',
+  },
+  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',
+  },
+  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 ReportScreen;

package/src/api/ApiService.jsx

@@ -1,162 +0,0 @@
-import axios from 'axios';
-
-class ApiService {
-  constructor() {
-    this.api = axios.create({
-      timeout: 15000,
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json'
-      }
-    });
-  }
-
-  async fetchReportData(apiConfig) {
-    try {
-      const config = {
-        url: apiConfig.url,
-        method: apiConfig.method || 'GET',
-        timeout: apiConfig.timeout || 15000,
-        headers: {
-          'Content-Type': 'application/json',
-          'Accept': 'application/json'
-        }
-      };
-
-      if (apiConfig.token) {
-        config.headers.Authorization = `Bearer ${apiConfig.token}`;
-      }
-
-      const response = await this.api(config);
-      return this.transformData(response.data, apiConfig.url);
-      
-    } catch (error) {
-      console.error('API Error:', error.message);
-      return this.getFallbackData(apiConfig.url);
-    }
-  }
-
-  transformData(data, url) {
-    if (url.includes('cumulative-operating-profit')) {
-      return this.transformPerformanceData(data);
-    } else if (url.includes('revenue-by-mode')) {
-      return this.transformRevenueByMode(data);
-    } else if (url.includes('shipment-by-direction')) {
-      return this.transformShipmentByDirection(data);
-    } else if (url.includes('revenue-trend')) {
-      return this.transformRevenueTrend(data);
-    }
-    
-    return data;
-  }
-
-  transformPerformanceData(data) {
-    if (!data || !data.data) return this.getPerformanceFallbackData();
-    
-    return data.data.map(item => ({
-      name: item.name || 'Unknown',
-      actual2024: item.actual2024 || 0,
-      actual2025: item.actual2025 || 0,
-      budget2025: item.budget2025 || 0,
-      yoYChangePercent: this.calculatePercentageChange(item.actual2024 || 0, item.actual2025 || 0),
-      budgetVariancePercent: this.calculatePercentageChange(item.budget2025 || 0, item.actual2025 || 0),
-      grossMarginPercent: item.grossMarginPercent || 0,
-      isTotal: item.isTotal || false
-    }));
-  }
-
-  transformRevenueByMode(data) {
-    if (Array.isArray(data)) {
-      return data.map(item => ({
-        mode: item.mode || 'Unknown',
-        revenue: item.revenue || 0
-      }));
-    }
-    
-    if (data.data && Array.isArray(data.data)) {
-      return data.data;
-    }
-    
-    return this.getRevenueByModeFallbackData();
-  }
-
-  transformShipmentByDirection(data) {
-    if (Array.isArray(data)) {
-      return data.map(item => ({
-        direction: item.direction || 'Unknown',
-        shipments: item.shipments || 0
-      }));
-    }
-    
-    if (data.data && Array.isArray(data.data)) {
-      return data.data;
-    }
-    
-    return this.getShipmentFallbackData();
-  }
-
-  transformRevenueTrend(data) {
-    if (data.labels && data.values) {
-      return {
-        labels: data.labels,
-        values: data.values
-      };
-    }
-    
-    return this.getRevenueTrendFallbackData();
-  }
-
-  calculatePercentageChange(oldValue, newValue) {
-    if (!oldValue || oldValue === 0) return 0;
-    return Number(((newValue - oldValue) / Math.abs(oldValue)) * 100).toFixed(1);
-  }
-
-  getFallbackData(url) {
-    if (url.includes('cumulative-operating-profit')) {
-      return this.getPerformanceFallbackData();
-    } else if (url.includes('revenue-by-mode')) {
-      return this.getRevenueByModeFallbackData();
-    } else if (url.includes('shipment-by-direction')) {
-      return this.getShipmentFallbackData();
-    } else if (url.includes('revenue-trend')) {
-      return this.getRevenueTrendFallbackData();
-    }
-    
-    return [];
-  }
-
-  getPerformanceFallbackData() {
-    return [
-      { name: "Ocean Transportation", actual2024: 45000000, actual2025: 52000000, budget2025: 50000000, grossMarginPercent: 25, isTotal: false },
-      { name: "Air Freight", actual2024: 18000000, actual2025: 21000000, budget2025: 20000000, grossMarginPercent: 22, isTotal: false },
-      { name: "Road Logistics", actual2024: 32000000, actual2025: 38000000, budget2025: 35000000, grossMarginPercent: 28, isTotal: false },
-      { name: "Warehousing", actual2024: 12000000, actual2025: 15000000, budget2025: 14000000, grossMarginPercent: 35, isTotal: false },
-      { name: "Customs Clearance", actual2024: 8000000, actual2025: 9500000, budget2025: 9000000, grossMarginPercent: 40, isTotal: false },
-      { name: "TOTAL", actual2024: 115000000, actual2025: 135500000, budget2025: 128000000, grossMarginPercent: 28, isTotal: true }
-    ];
-  }
-
-  getRevenueByModeFallbackData() {
-    return [
-      { mode: "Ocean", revenue: 101951456 },
-      { mode: "Road", revenue: 89158437 },
-      { mode: "Air", revenue: 40171032 }
-    ];
-  }
-
-  getShipmentFallbackData() {
-    return [
-      { direction: "Export", shipments: 568 },
-      { direction: "Import", shipments: 546 }
-    ];
-  }
-
-  getRevenueTrendFallbackData() {
-    return {
-      labels: ["01-2025", "02-2025", "03-2025", "04-2025", "05-2025", "06-2025"],
-      values: [16011213, 13368072, 17004674, 19065790, 19978378, 20766951]
-    };
-  }
-}
-
-export default new ApiService();

package/src/components/charts/BarChart.jsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-
-const BarChart = ({ data, title }) => {
-  const formatNumber = (num) => {
-    return num.toLocaleString();
-  };
-
-  const getColor = (index) => {
-    const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0'];
-    return colors[index % colors.length];
-  };
-
-  if (!Array.isArray(data) || data.length === 0) {
-    return (
-      <View style={styles.noDataContainer}>
-        <Text style={styles.noDataText}>No data available</Text>
-      </View>
-    );
-  }
-
-  const values = data.map(d => d.revenue || d.value || 0);
-  const labels = data.map(d => d.mode || d.label || '');
-  
-  const maxValue = Math.max(...values, 1);
-  const chartHeight = 200;
-
-  return (
-    <View style={styles.container}>
-      {title && <Text style={styles.title}>{title}</Text>}
-      <ScrollView 
-        horizontal 
-        showsHorizontalScrollIndicator={true}
-      >
-        <View style={[styles.chart, { height: chartHeight }]}>
-          {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,
-                  backgroundColor: getColor(index)
-                }]} />
-                <Text style={styles.barLabel} numberOfLines={1}>{label}</Text>
-                <Text style={styles.valueText}>{formatNumber(value)}</Text>
-              </View>
-            );
-          })}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#e8e8e8',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#000',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  chart: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    paddingHorizontal: 8,
-    minWidth: 400,
-  },
-  barWrapper: {
-    alignItems: 'center',
-    marginHorizontal: 12,
-  },
-  bar: {
-    width: 40,
-    borderRadius: 4,
-  },
-  barLabel: {
-    marginTop: 8,
-    fontSize: 12,
-    color: '#666',
-    textAlign: 'center',
-    width: 60,
-  },
-  valueText: {
-    fontSize: 11,
-    color: '#999',
-    marginTop: 4,
-    fontWeight: '500',
-  },
-  noDataContainer: {
-    padding: 40,
-    alignItems: 'center',
-  },
-  noDataText: {
-    fontSize: 16,
-    color: '#999',
-    textAlign: 'center',
-  },
-});
-
-export default BarChart;