@dhiraj0720/report1chart 1.0.6 → 2.1.0

package/src/components/common/ErrorDisplay.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+
+const ErrorDisplay = ({ error, onRetry }) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.errorText}>Error: {error}</Text>
+      {onRetry && (
+        <TouchableOpacity 
+          style={styles.retryButton}
+          onPress={onRetry}
+        >
+          <Text style={styles.retryText}>Retry</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    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',
+  },
+});
+
+export default ErrorDisplay;

package/src/components/common/LoadingSpinner.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+
+const LoadingSpinner = ({ message = 'Loading...' }) => {
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="#4CAF50" />
+      <Text style={styles.message}>{message}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 40,
+  },
+  message: {
+    marginTop: 16,
+    fontSize: 16,
+    color: '#666',
+  },
+});
+
+export default LoadingSpinner;

package/src/components/common/ReportCard.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+
+const ReportCard = ({ report, onPress }) => {
+  const getColor = (id) => {
+    const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0'];
+    return colors[Math.floor(id) % colors.length];
+  };
+
+  return (
+    <TouchableOpacity
+      style={styles.card}
+      onPress={onPress}
+    >
+      <View style={[styles.icon, { backgroundColor: getColor(report.id) }]}>
+        <Text style={styles.iconText}>{Math.floor(report.id)}</Text>
+      </View>
+      <View style={styles.info}>
+        <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>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  icon: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  iconText: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#fff',
+  },
+  info: {
+    flex: 1,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#000',
+    marginBottom: 2,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#4CAF50',
+    marginBottom: 4,
+  },
+  desc: {
+    fontSize: 13,
+    color: '#666',
+    lineHeight: 18,
+    marginBottom: 4,
+  },
+  apiInfo: {
+    fontSize: 12,
+    color: '#888',
+    fontStyle: 'italic',
+  },
+  arrow: {
+    fontSize: 24,
+    color: '#ccc',
+    fontWeight: '300',
+  },
+});
+
+export default ReportCard;

package/src/components/tables/CompactTable.jsx

@@ -0,0 +1,269 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+} from 'react-native';
+
+const CompactTable = ({ 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 style={styles.container}>
+      {data.map((item, index) => (
+        <View 
+          key={index}
+          style={[
+            styles.card,
+            item.isTotal && styles.totalCard,
+            index % 2 === 0 ? styles.evenCard : styles.oddCard
+          ]}
+        >
+          {/* Card Header */}
+          <View style={styles.header}>
+            <Text style={[
+              styles.title,
+              item.isTotal && styles.totalTitle
+            ]}>
+              {item.name}
+            </Text>
+            <Text style={[
+              styles.grossMargin,
+              styles.grossMarginText
+            ]}>
+              Brüt Kar: {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.value}>
+                {formatCurrency(item.actual2024)}
+              </Text>
+            </View>
+            
+            {/* Column 2 */}
+            <View style={styles.column}>
+              <Text style={styles.label}>2025 Fiili</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>
+            </View>
+            
+            {/* Column 4 */}
+            <View style={styles.column}>
+              <Text style={styles.label}>2025 Bütçe</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>
+            </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 styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 8,
+  },
+  card: {
+    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,
+  },
+  totalCard: {
+    backgroundColor: '#e8f5e9',
+    borderColor: '#4CAF50',
+    borderWidth: 2,
+  },
+  evenCard: {
+    backgroundColor: '#fff',
+  },
+  oddCard: {
+    backgroundColor: '#f9f9f9',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#2c3e50',
+    flex: 1,
+  },
+  totalTitle: {
+    fontWeight: '700',
+    color: '#2c3e50',
+    fontSize: 15,
+  },
+  grossMargin: {
+    fontSize: 13,
+    fontWeight: '600',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    backgroundColor: '#f0f0f0',
+  },
+  grossMarginText: {
+    color: '#2c3e50',
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  column: {
+    width: '48%',
+    marginBottom: 12,
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: 11,
+    color: '#666',
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  value: {
+    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',
+  },
+  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',
+  },
+  noDataText: {
+    fontSize: 16,
+    color: '#999',
+    textAlign: 'center',
+  },
+});
+
+export default CompactTable;

package/src/components/tables/DefaultTable.jsx

@@ -0,0 +1,225 @@
+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}>
+        {/* 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).toFixed(1)}%
+              </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).toFixed(1)}%
+              </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',
+    fontFamily: 'monospace',
+    color: '#333',
+  },
+  percentText: {
+    fontSize: 12,
+    fontWeight: '600',
+    fontFamily: 'monospace',
+  },
+  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;