@dhiraj0720/report1chart 2.2.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "main": "src/index.jsx",
   "scripts": {
     "test": "echo 'No tests'"

package/src/api/ApiService.jsx

@@ -13,34 +13,30 @@ class ApiService {
 
   async fetchReportData(apiConfig) {
     try {
-      console.log('Fetching from npm package:', apiConfig.url);
-      
       const config = {
         url: apiConfig.url,
         method: apiConfig.method || 'GET',
         timeout: apiConfig.timeout || 15000,
         headers: {
           'Content-Type': 'application/json',
-          'Accept': 'application/json',
-          ...(apiConfig.token && { 
-            'Authorization': `Bearer ${apiConfig.token}` 
-          })
+          'Accept': 'application/json'
         }
       };
 
+      if (apiConfig.token) {
+        config.headers.Authorization = `Bearer ${apiConfig.token}`;
+      }
+
       const response = await this.api(config);
-      
-      // Transform data based on endpoint
       return this.transformData(response.data, apiConfig.url);
       
     } catch (error) {
-      console.error('NPM Package API Error:', error);
-      throw this.handleError(error, apiConfig.url);
+      console.error('API Error:', error.message);
+      return this.getFallbackData(apiConfig.url);
     }
   }
 
   transformData(data, url) {
-    // Transform data based on endpoint patterns
     if (url.includes('cumulative-operating-profit')) {
       return this.transformPerformanceData(data);
     } else if (url.includes('revenue-by-mode')) {
@@ -51,55 +47,44 @@ class ApiService {
       return this.transformRevenueTrend(data);
     }
     
-    // Return as-is for unknown formats
     return data;
   }
 
   transformPerformanceData(data) {
-    // Transform performance report data to match table structure
-    if (!data || !data.data) return [];
+    if (!data || !data.data) return this.getPerformanceFallbackData();
     
     return data.data.map(item => ({
-      name: item.name || item.activity || 'Unknown',
-      actual2024: item.actual2024 || item.lastYear || 0,
-      actual2025: item.actual2025 || item.currentYear || 0,
-      budget2025: item.budget2025 || item.budget || 0,
-      yoYChangePercent: this.calculatePercentageChange(
-        item.actual2024 || item.lastYear || 0,
-        item.actual2025 || item.currentYear || 0
-      ),
-      budgetVariancePercent: this.calculatePercentageChange(
-        item.budget2025 || item.budget || 0,
-        item.actual2025 || item.currentYear || 0
-      ),
-      grossMarginPercent: item.grossMargin || item.margin || 0,
-      isTotal: item.isTotal || item.name?.toLowerCase().includes('total')
+      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) {
-    // Transform revenue by mode data
     if (Array.isArray(data)) {
       return data.map(item => ({
-        mode: item.mode || item.transportMode || 'Unknown',
-        revenue: item.revenue || item.value || 0
+        mode: item.mode || 'Unknown',
+        revenue: item.revenue || 0
       }));
     }
     
-    // Handle different response formats
     if (data.data && Array.isArray(data.data)) {
       return data.data;
     }
     
-    return [];
+    return this.getRevenueByModeFallbackData();
   }
 
   transformShipmentByDirection(data) {
-    // Transform shipment by direction data
     if (Array.isArray(data)) {
       return data.map(item => ({
-        direction: item.direction || item.type || 'Unknown',
-        shipments: item.shipments || item.count || item.value || 0
+        direction: item.direction || 'Unknown',
+        shipments: item.shipments || 0
       }));
     }
     
@@ -107,11 +92,10 @@ class ApiService {
       return data.data;
     }
     
-    return [];
+    return this.getShipmentFallbackData();
   }
 
   transformRevenueTrend(data) {
-    // Transform revenue trend data
     if (data.labels && data.values) {
       return {
         labels: data.labels,
@@ -119,62 +103,60 @@ class ApiService {
       };
     }
     
-    return data;
+    return this.getRevenueTrendFallbackData();
   }
 
   calculatePercentageChange(oldValue, newValue) {
     if (!oldValue || oldValue === 0) return 0;
-    return ((newValue - oldValue) / Math.abs(oldValue)) * 100;
-  }
-
-  handleError(error, url) {
-    let errorMessage = 'Failed to fetch report data';
-    
-    if (error.response) {
-      // Server responded with error
-      errorMessage = `Server Error: ${error.response.status} - ${error.response.data?.message || 'Unknown error'}`;
-    } else if (error.request) {
-      // Request made but no response
-      errorMessage = 'Network Error: No response from server';
-    } else {
-      // Something else happened
-      errorMessage = error.message || 'Unknown error occurred';
-    }
-    
-    // Fallback mock data for development
-    console.warn('Using fallback data for:', url);
-    return {
-      error: errorMessage,
-      fallbackData: this.getFallbackData(url)
-    };
+    return Number(((newValue - oldValue) / Math.abs(oldValue)) * 100).toFixed(1);
   }
 
   getFallbackData(url) {
-    // Return mock data for development
     if (url.includes('cumulative-operating-profit')) {
-      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 }
-      ];
+      return this.getPerformanceFallbackData();
     } else if (url.includes('revenue-by-mode')) {
-      return [
-        { mode: "Ocean", revenue: 101951456 },
-        { mode: "Road", revenue: 89158437 },
-        { mode: "Air", revenue: 40171032 }
-      ];
+      return this.getRevenueByModeFallbackData();
     } else if (url.includes('shipment-by-direction')) {
-      return [
-        { direction: "Export", shipments: 568 },
-        { direction: "Import", shipments: 546 }
-      ];
+      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();
+export default new ApiService();

package/src/components/charts/BarChart.jsx

@@ -24,12 +24,11 @@ const BarChart = ({ data, title }) => {
     );
   }
 
-  const values = data.map(d => d.revenue || d.value || d.shipments || 0);
-  const labels = data.map(d => d.mode || d.label || d.direction || '');
+  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;
-  const barWidth = 40; // Fixed width, no Dimensions needed
 
   return (
     <View style={styles.container}>
@@ -37,7 +36,6 @@ const BarChart = ({ data, title }) => {
       <ScrollView 
         horizontal 
         showsHorizontalScrollIndicator={true}
-        contentContainerStyle={styles.scrollContent}
       >
         <View style={[styles.chart, { height: chartHeight }]}>
           {values.map((value, index) => {
@@ -48,7 +46,6 @@ const BarChart = ({ data, title }) => {
               <View key={index} style={styles.barWrapper}>
                 <View style={[styles.bar, { 
                   height,
-                  width: barWidth,
                   backgroundColor: getColor(index)
                 }]} />
                 <Text style={styles.barLabel} numberOfLines={1}>{label}</Text>
@@ -78,31 +75,29 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     textAlign: 'center',
   },
-  scrollContent: {
-    paddingHorizontal: 8,
-  },
   chart: {
     flexDirection: 'row',
     alignItems: 'flex-end',
-    justifyContent: 'flex-start',
+    paddingHorizontal: 8,
     minWidth: 400,
   },
   barWrapper: {
     alignItems: 'center',
-    marginHorizontal: 8,
+    marginHorizontal: 12,
   },
   bar: {
+    width: 40,
     borderRadius: 4,
   },
   barLabel: {
     marginTop: 8,
-    fontSize: 11,
+    fontSize: 12,
     color: '#666',
     textAlign: 'center',
     width: 60,
   },
   valueText: {
-    fontSize: 10,
+    fontSize: 11,
     color: '#999',
     marginTop: 4,
     fontWeight: '500',

package/src/components/charts/LineChart.jsx

@@ -19,15 +19,12 @@ const LineChart = ({ data, title }) => {
     );
   }
 
-  // Handle different data formats
   let values, labels;
   
   if (Array.isArray(data)) {
-    // If data is array of objects
-    values = data.map(d => d.value || d.revenue || d.shipments || 0);
-    labels = data.map(d => d.label || d.month || d.mode || d.direction || '');
+    values = data.map(d => d.value || 0);
+    labels = data.map(d => d.label || '');
   } else {
-    // If data has separate values and labels
     values = data.values || [];
     labels = data.labels || [];
   }
@@ -42,7 +39,6 @@ const LineChart = ({ data, title }) => {
 
   const maxValue = Math.max(...values, 1);
   const chartHeight = 200;
-  const barWidth = 30; // Fixed width
 
   return (
     <View style={styles.container}>
@@ -50,7 +46,6 @@ const LineChart = ({ data, title }) => {
       <ScrollView 
         horizontal 
         showsHorizontalScrollIndicator={true}
-        contentContainerStyle={styles.scrollContent}
       >
         <View style={[styles.chart, { height: chartHeight }]}>
           {values.map((value, index) => {
@@ -61,7 +56,6 @@ const LineChart = ({ data, title }) => {
               <View key={index} style={styles.pointWrapper}>
                 <View style={[styles.point, { 
                   height: Math.max(height, 2),
-                  width: barWidth
                 }]} />
                 <View style={styles.connector} />
                 <Text style={styles.pointLabel} numberOfLines={1}>{label}</Text>
@@ -91,20 +85,18 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     textAlign: 'center',
   },
-  scrollContent: {
-    paddingHorizontal: 8,
-  },
   chart: {
     flexDirection: 'row',
     alignItems: 'flex-end',
-    justifyContent: 'flex-start',
+    paddingHorizontal: 8,
     minWidth: 400,
   },
   pointWrapper: {
     alignItems: 'center',
-    marginHorizontal: 8,
+    marginHorizontal: 12,
   },
   point: {
+    width: 30,
     backgroundColor: '#2196F3',
     borderRadius: 2,
   },
@@ -117,13 +109,13 @@ const styles = StyleSheet.create({
   },
   pointLabel: {
     marginTop: 8,
-    fontSize: 11,
+    fontSize: 12,
     color: '#666',
     textAlign: 'center',
     width: 60,
   },
   valueText: {
-    fontSize: 10,
+    fontSize: 11,
     color: '#999',
     marginTop: 4,
     fontWeight: '500',

package/src/components/charts/PieChart.jsx

@@ -23,15 +23,15 @@ const PieChart = ({ data, title }) => {
     );
   }
 
-  const total = data.reduce((sum, item) => sum + (item.shipments || item.revenue || item.value || 0), 0);
+  const total = data.reduce((sum, item) => sum + (item.shipments || item.value || 0), 0);
 
   return (
     <View style={styles.container}>
       {title && <Text style={styles.title}>{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 value = item.shipments || item.value || 0;
+          const label = item.direction || item.label || `Item ${index + 1}`;
           const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
           
           return (
@@ -60,11 +60,6 @@ const styles = StyleSheet.create({
     marginBottom: 16,
     borderWidth: 1,
     borderColor: '#e8e8e8',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
   },
   title: {
     fontSize: 18,

package/src/components/common/ReportCard.jsx

@@ -24,9 +24,6 @@ const ReportCard = ({ report, onPress }) => {
         <Text style={styles.name}>{report.name}</Text>
         <Text style={styles.title}>{report.title}</Text>
         <Text style={styles.desc}>{report.description}</Text>
-        <Text style={styles.apiInfo}>
-          API: {report.apiConfig?.url ? 'Configured' : 'No API'}
-        </Text>
       </View>
       <Text style={styles.arrow}>›</Text>
     </TouchableOpacity>
@@ -43,11 +40,6 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     borderWidth: 1,
     borderColor: '#e8e8e8',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
   },
   icon: {
     width: 44,
@@ -81,12 +73,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: '#666',
     lineHeight: 18,
-    marginBottom: 4,
-  },
-  apiInfo: {
-    fontSize: 12,
-    color: '#888',
-    fontStyle: 'italic',
   },
   arrow: {
     fontSize: 24,

package/src/components/tables/CompactTable.jsx

@@ -35,10 +35,8 @@ const CompactTable = ({ data }) => {
           style={[
             styles.card,
             item.isTotal && styles.totalCard,
-            index % 2 === 0 ? styles.evenCard : styles.oddCard
           ]}
         >
-          {/* Card Header */}
           <View style={styles.header}>
             <Text style={[
               styles.title,
@@ -48,79 +46,53 @@ const CompactTable = ({ data }) => {
             </Text>
             <Text style={[
               styles.grossMargin,
-              styles.grossMarginText
             ]}>
-              Brüt Kar: {item.grossMarginPercent}%
+              Gross Margin: {item.grossMarginPercent}%
             </Text>
           </View>
 
-          {/* Card Body - Grid Layout */}
           <View style={styles.grid}>
-            {/* Column 1 */}
             <View style={styles.column}>
-              <Text style={styles.label}>2024 Fiili</Text>
+              <Text style={styles.label}>2024 Actual</Text>
               <Text style={styles.value}>
                 {formatCurrency(item.actual2024)}
               </Text>
             </View>
             
-            {/* Column 2 */}
             <View style={styles.column}>
-              <Text style={styles.label}>2025 Fiili</Text>
+              <Text style={styles.label}>2025 Actual</Text>
               <Text style={styles.value}>
                 {formatCurrency(item.actual2025)}
               </Text>
             </View>
             
-            {/* Column 3 */}
             <View style={styles.column}>
-              <Text style={styles.label}>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).toFixed(1)}%
-                </Text>
-              </View>
+              <Text style={styles.label}>YoY Change</Text>
+              <Text style={[
+                styles.percentText,
+                item.yoYChangePercent >= 0 ? styles.positive : styles.negative
+              ]}>
+                {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
+              </Text>
             </View>
             
-            {/* Column 4 */}
             <View style={styles.column}>
-              <Text style={styles.label}>2025 Bütçe</Text>
+              <Text style={styles.label}>2025 Budget</Text>
               <Text style={styles.value}>
                 {formatCurrency(item.budget2025)}
               </Text>
             </View>
             
-            {/* Column 5 */}
             <View style={styles.column}>
-              <Text style={styles.label}>Sapma</Text>
-              <View style={styles.percentBadge}>
-                <Text style={[
-                  styles.percentText,
-                  item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
-                ]}>
-                  {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent).toFixed(1)}%
-                </Text>
-              </View>
+              <Text style={styles.label}>Variance</Text>
+              <Text style={[
+                styles.percentText,
+                item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
+              ]}>
+                {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
+              </Text>
             </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>
@@ -139,23 +111,12 @@ const styles = StyleSheet.create({
     padding: 16,
     borderWidth: 1,
     borderColor: '#e8e8e8',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 3,
-    elevation: 2,
   },
   totalCard: {
     backgroundColor: '#e8f5e9',
     borderColor: '#4CAF50',
     borderWidth: 2,
   },
-  evenCard: {
-    backgroundColor: '#fff',
-  },
-  oddCard: {
-    backgroundColor: '#f9f9f9',
-  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -183,8 +144,6 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     borderRadius: 6,
     backgroundColor: '#f0f0f0',
-  },
-  grossMarginText: {
     color: '#2c3e50',
   },
   grid: {
@@ -210,20 +169,10 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '600',
     color: '#2c3e50',
-    fontFamily: 'monospace',
-  },
-  percentBadge: {
-    backgroundColor: '#fff',
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#e0e0e0',
   },
   percentText: {
     fontSize: 12,
     fontWeight: '600',
-    fontFamily: 'monospace',
   },
   positive: {
     color: '#27ae60',
@@ -231,30 +180,6 @@ const styles = StyleSheet.create({
   negative: {
     color: '#e74c3c',
   },
-  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',
-  },
   noDataContainer: {
     padding: 40,
     alignItems: 'center',

package/src/components/tables/DefaultTable.jsx

@@ -30,32 +30,30 @@ const DefaultTable = ({ data }) => {
   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>
+            <Text style={styles.headerText}>ACTIVITY PROFIT/LOSS</Text>
           </View>
           <View style={styles.headerCell}>
-            <Text style={styles.headerText}>2024 Fiili</Text>
+            <Text style={styles.headerText}>2024 Actual</Text>
           </View>
           <View style={styles.headerCell}>
-            <Text style={styles.headerText}>2025 Fiili</Text>
+            <Text style={styles.headerText}>2025 Actual</Text>
           </View>
           <View style={styles.headerCell}>
-            <Text style={styles.headerText}>Fiili Artış %</Text>
+            <Text style={styles.headerText}>YoY Change %</Text>
           </View>
           <View style={styles.headerCell}>
-            <Text style={styles.headerText}>2025 Bütçe</Text>
+            <Text style={styles.headerText}>2025 Budget</Text>
           </View>
           <View style={styles.headerCell}>
-            <Text style={styles.headerText}>Sapma %</Text>
+            <Text style={styles.headerText}>Variance %</Text>
           </View>
           <View style={styles.headerCell}>
-            <Text style={styles.headerText}>BRÜT KAR %</Text>
+            <Text style={styles.headerText}>GROSS MARGIN %</Text>
           </View>
         </View>
 
-        {/* Table Rows */}
         {data.map((item, index) => (
           <View 
             key={index} 
@@ -87,7 +85,7 @@ const DefaultTable = ({ data }) => {
                 styles.percentText,
                 item.yoYChangePercent >= 0 ? styles.positive : styles.negative
               ]}>
-                {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent).toFixed(1)}%
+                {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
               </Text>
             </View>
             
@@ -102,7 +100,7 @@ const DefaultTable = ({ data }) => {
                 styles.percentText,
                 item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
               ]}>
-                {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent).toFixed(1)}%
+                {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
               </Text>
             </View>
             
@@ -193,13 +191,11 @@ const styles = StyleSheet.create({
   numberText: {
     fontSize: 11,
     fontWeight: '500',
-    fontFamily: 'monospace',
     color: '#333',
   },
   percentText: {
     fontSize: 12,
     fontWeight: '600',
-    fontFamily: 'monospace',
   },
   positive: {
     color: '#27ae60',

package/src/components/tables/FreezeTable.jsx

@@ -29,10 +29,9 @@ const FreezeTable = ({ data }) => {
 
   return (
     <View style={styles.container}>
-      {/* Fixed First Column */}
       <View style={styles.fixedColumn}>
         <View style={[styles.fixedHeader, styles.fixedFirstCell]}>
-          <Text style={styles.fixedHeaderText}>FALİYET KAR/ZARAR</Text>
+          <Text style={styles.fixedHeaderText}>ACTIVITY</Text>
         </View>
         {data.map((item, index) => (
           <View 
@@ -40,7 +39,6 @@ const FreezeTable = ({ data }) => {
             style={[
               styles.fixedRow,
               item.isTotal && styles.fixedTotalRow,
-              index % 2 === 0 ? styles.evenRow : styles.oddRow
             ]}
           >
             <Text style={[
@@ -53,26 +51,22 @@ const FreezeTable = ({ data }) => {
         ))}
       </View>
 
-      {/* Scrollable Data Columns */}
       <ScrollView horizontal showsHorizontalScrollIndicator={true}>
         <View style={styles.scrollableColumns}>
-          {/* Headers for scrollable columns */}
           <View style={styles.scrollableHeaderRow}>
-            {['2024 Fiili', '2025 Fiili', 'Fiili Artış %', '2025 Bütçe', 'Sapma %', 'BRÜT KAR %'].map((header, idx) => (
+            {['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 rows for scrollable columns */}
           {data.map((item, rowIndex) => (
             <View 
               key={rowIndex}
               style={[
                 styles.scrollableDataRow,
                 item.isTotal && styles.scrollableTotalDataRow,
-                rowIndex % 2 === 0 ? styles.evenRow : styles.oddRow
               ]}
             >
               <View style={styles.scrollableDataCell}>
@@ -92,7 +86,7 @@ const FreezeTable = ({ data }) => {
                   styles.scrollablePercent,
                   item.yoYChangePercent >= 0 ? styles.positive : styles.negative
                 ]}>
-                  {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent).toFixed(1)}%
+                  {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
                 </Text>
               </View>
               
@@ -107,7 +101,7 @@ const FreezeTable = ({ data }) => {
                   styles.scrollablePercent,
                   item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
                 ]}>
-                  {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent).toFixed(1)}%
+                  {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
                 </Text>
               </View>
               
@@ -226,13 +220,11 @@ const styles = StyleSheet.create({
   scrollableDataText: {
     fontSize: 12,
     fontWeight: '500',
-    fontFamily: 'monospace',
     color: '#333',
   },
   scrollablePercent: {
     fontSize: 12,
     fontWeight: '600',
-    fontFamily: 'monospace',
   },
   positive: {
     color: '#27ae60',
@@ -244,12 +236,6 @@ const styles = StyleSheet.create({
     color: '#2c3e50',
     fontWeight: '700',
   },
-  evenRow: {
-    backgroundColor: '#fff',
-  },
-  oddRow: {
-    backgroundColor: '#f9f9f9',
-  },
   noDataContainer: {
     padding: 40,
     alignItems: 'center',

package/src/screens/ReportDashboard.jsx

@@ -20,30 +20,19 @@ const ReportDashboard = ({ reports, onReportSelect, onClose }) => {
     setError(null);
     
     try {
-      // Fetch data from API using npm package service
       const data = await ApiService.fetchReportData(report.apiConfig);
       
-      if (data.error) {
-        setError(data.error);
-        // Use fallback data if available
-        if (data.fallbackData) {
-          setSelectedReport({
-            ...report,
-            data: data.fallbackData
-          });
-        }
-      } else {
-        setSelectedReport({
-          ...report,
-          data: data
-        });
-      }
+      setSelectedReport({
+        ...report,
+        data: data
+      });
       
       if (onReportSelect) {
         onReportSelect(report.name);
       }
     } catch (err) {
-      setError(err.message || 'Failed to fetch report data');
+      setError('Failed to fetch data');
+      console.error(err);
     } finally {
       setLoading(false);
     }

package/src/screens/ReportDetail.jsx

@@ -5,7 +5,6 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
-  ActivityIndicator,
 } from 'react-native';
 import DefaultTable from '../components/tables/DefaultTable';
 import CompactTable from '../components/tables/CompactTable';
@@ -36,7 +35,6 @@ const ReportDetail = ({ report, loading, error, onBack, onClose }) => {
       );
     }
 
-    // Render based on report type
     switch (report.type) {
       case 'table':
         return renderTable();
@@ -57,7 +55,6 @@ const ReportDetail = ({ report, loading, error, onBack, onClose }) => {
         return <CompactTable data={report.data} />;
       case 'freeze':
         return <FreezeTable data={report.data} />;
-      case 'default':
       default:
         return <DefaultTable data={report.data} />;
     }
@@ -93,7 +90,7 @@ const ReportDetail = ({ report, loading, error, onBack, onClose }) => {
             <Text style={[
               styles.viewTypeText,
               viewType === 'default' && styles.activeViewTypeText
-            ]}>Varsayılan</Text>
+            ]}>Default</Text>
           </TouchableOpacity>
           
           <TouchableOpacity 
@@ -106,7 +103,7 @@ const ReportDetail = ({ report, loading, error, onBack, onClose }) => {
             <Text style={[
               styles.viewTypeText,
               viewType === 'compact' && styles.activeViewTypeText
-            ]}>Kompakt</Text>
+            ]}>Compact</Text>
           </TouchableOpacity>
           
           <TouchableOpacity 
@@ -119,25 +116,13 @@ const ReportDetail = ({ report, loading, error, onBack, onClose }) => {
             <Text style={[
               styles.viewTypeText,
               viewType === 'freeze' && styles.activeViewTypeText
-            ]}>Sabit Kolon</Text>
+            ]}>Freeze</Text>
           </TouchableOpacity>
         </View>
       )}
 
       <ScrollView style={styles.content}>
         {renderContent()}
-        
-        {report.data && (
-          <View style={styles.dataInfo}>
-            <Text style={styles.infoTitle}>Report Information</Text>
-            <Text style={styles.infoText}>
-              {report.description || 'Detailed analysis report'}
-            </Text>
-            <Text style={styles.dataSource}>
-              Data points: {Array.isArray(report.data) ? report.data.length : 'N/A'}
-            </Text>
-          </View>
-        )}
       </ScrollView>
     </View>
   );
@@ -213,11 +198,6 @@ const styles = StyleSheet.create({
   },
   activeViewType: {
     backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
   },
   viewTypeText: {
     fontSize: 13,
@@ -228,29 +208,6 @@ const styles = StyleSheet.create({
     color: '#4CAF50',
     fontWeight: '600',
   },
-  dataInfo: {
-    backgroundColor: '#e8f5e9',
-    borderRadius: 12,
-    padding: 16,
-    marginTop: 16,
-  },
-  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',
-  },
   noDataContainer: {
     padding: 40,
     alignItems: 'center',

package/src/api/ApiService.test.jsx

@@ -1,27 +0,0 @@
-import ApiService from './ApiService';
-
-describe('ApiService', () => {
-  it('should transform performance data correctly', () => {
-    const mockData = {
-      data: [
-        { name: 'Ocean', actual2024: 100, actual2025: 120, budget2025: 110, grossMargin: 25 }
-      ]
-    };
-    
-    const result = ApiService.transformPerformanceData(mockData);
-    
-    expect(result).toHaveLength(1);
-    expect(result[0].name).toBe('Ocean');
-    expect(result[0].yoYChangePercent).toBe(20);
-    expect(result[0].budgetVariancePercent).toBeCloseTo(9.09);
-  });
-  
-  it('should handle API errors gracefully', async () => {
-    const apiConfig = {
-      url: 'http://invalid-url',
-      method: 'GET'
-    };
-    
-    await expect(ApiService.fetchReportData(apiConfig)).rejects.toThrow();
-  });
-});

package/src/components/charts/ChartUtils.jsx

@@ -1,25 +0,0 @@
-export 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();
-};
-
-export const formatNumber = (num) => {
-  return num.toLocaleString();
-};
-
-export const getColor = (index) => {
-  const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0', '#00BCD4'];
-  return colors[index % colors.length];
-};
-
-export const calculatePercentageChange = (oldValue, newValue) => {
-  if (!oldValue || oldValue === 0) return 0;
-  return ((newValue - oldValue) / Math.abs(oldValue)) * 100;
-};

package/src/components/tables/TableUtils.jsx

@@ -1,47 +0,0 @@
-import { Dimensions } from 'react-native';
-
-export 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();
-};
-
-export const formatNumber = (num) => {
-  return num.toLocaleString();
-};
-
-export const calculatePercentageChange = (oldValue, newValue) => {
-  if (!oldValue || oldValue === 0) return 0;
-  return ((newValue - oldValue) / Math.abs(oldValue)) * 100;
-};
-
-export const getTableWidth = (columns) => {
-  const { width: screenWidth } = Dimensions.get('window');
-  return Math.max(screenWidth, columns * 120);
-};
-
-export const getStatusColor = (yoYChange, budgetVariance) => {
-  if (yoYChange >= 0 && budgetVariance >= 0) {
-    return '#4CAF50'; // Good
-  } else if (yoYChange >= 0 || budgetVariance >= 0) {
-    return '#FF9800'; // Warning
-  } else {
-    return '#F44336'; // Critical
-  }
-};
-
-export const getStatusText = (yoYChange, budgetVariance) => {
-  if (yoYChange >= 0 && budgetVariance >= 0) {
-    return 'Performans İyi';
-  } else if (yoYChange >= 0 || budgetVariance >= 0) {
-    return 'Kısmen İyi';
-  } else {
-    return 'İnceleme Gerekli';
-  }
-};