@dhiraj0720/report1chart 2.2.3 → 2.2.4

package/package.json

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

package/src/api/report1Fetcher.jsx

@@ -0,0 +1,27 @@
+import axios from 'axios';
+
+const fetchReport1 = async (apiEndpoint, apiToken) => {
+  try {
+    const response = await axios.get(apiEndpoint, {
+      headers: {
+        Authorization: apiToken,
+        Accept: 'application/json',
+      },
+      timeout: 15000,
+    });
+
+    if (!response.data || !response.data.rows) {
+      throw new Error('Invalid API response');
+    }
+
+    return response.data.rows;
+  } catch (error) {
+    throw new Error(
+      error?.response?.data?.message ||
+      error.message ||
+      'Failed to fetch report'
+    );
+  }
+};
+
+export default fetchReport1;

package/src/components/ProgressBar.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+const ProgressBar = ({ value }) => {
+  const width = Math.min(Math.max(value || 0, 0), 100);
+
+  return (
+    <View style={styles.track}>
+      <View style={[styles.fill, { width: `${width}%` }]} />
+    </View>
+  );
+};
+
+export default ProgressBar;
+
+const styles = StyleSheet.create({
+  track: {
+    height: 6,
+    backgroundColor: '#e0e0e0',
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    backgroundColor: '#f57c00',
+  },
+});

package/src/components/Report1Card.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import ProgressBar from './ProgressBar';
+
+const format = (num) => (num ?? 0).toLocaleString();
+
+const Trend = ({ value }) => {
+  const positive = value >= 0;
+  return (
+    <Text style={[styles.trend, positive ? styles.up : styles.down]}>
+      {positive ? '↑' : '↓'} {Math.abs(value)}%
+    </Text>
+  );
+};
+
+const Report1Card = ({ item }) => {
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>{item.name}</Text>
+
+      <Row label="2024 Actual" value={format(item.actual2024)} />
+      <Row label="2025 Actual" value={format(item.actual2025)} />
+
+      <View style={styles.row}>
+        <Text style={styles.label}>Change YoY</Text>
+        <Trend value={item.actualChangePercent} />
+      </View>
+
+      <Row label="2025 Budget" value={format(item.budget2025)} />
+
+      <View style={styles.row}>
+        <Text style={styles.label}>Budget Variance</Text>
+        <Trend value={item.budgetVariancePercent} />
+      </View>
+
+      {item.opexToGrossProfitPercent !== undefined && (
+        <>
+          <View style={styles.row}>
+            <Text style={styles.label}>OPEX / Gross Profit</Text>
+            <Text style={styles.value}>
+              {item.opexToGrossProfitPercent}%
+            </Text>
+          </View>
+          <ProgressBar value={item.opexToGrossProfitPercent} />
+        </>
+      )}
+    </View>
+  );
+};
+
+const Row = ({ label, value }) => (
+  <View style={styles.row}>
+    <Text style={styles.label}>{label}</Text>
+    <Text style={styles.value}>{value}</Text>
+  </View>
+);
+
+export default Report1Card;
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginBottom: 12,
+    color: '#000',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  label: {
+    fontSize: 13,
+    color: '#666',
+  },
+  value: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#000',
+  },
+  trend: {
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  up: {
+    color: '#2e7d32',
+  },
+  down: {
+    color: '#d32f2f',
+  },
+});

package/src/index.jsx

@@ -1,18 +1,3 @@
-import React from 'react';
-import ReportScreen from './screens/ReportScreen';
+import Report1Screen from './screens/Report1Screen';
 
-const ReportChart = ({ 
-  onReportSelect, 
-  onClose, 
-  reports = []
-}) => {
-  return (
-    <ReportScreen
-      reports={reports}
-      onReportSelect={onReportSelect}
-      onClose={onClose}
-    />
-  );
-};
-
-export default ReportChart;
+export default Report1Screen;

package/src/screens/Report1Screen.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import fetchReport1 from '../api/report1Fetcher';
+import Report1Card from '../components/Report1Card';
+
+const Report1Screen = ({ apiEndpoint, apiToken }) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [rows, setRows] = useState([]);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const data = await fetchReport1(apiEndpoint, apiToken);
+        setRows(data);
+      } catch (e) {
+        setError(e.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, [apiEndpoint, apiToken]);
+
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" />
+        <Text style={styles.info}>Loading report...</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.error}>{error}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {rows.map((item, index) => (
+        <Report1Card key={index} item={item} />
+      ))}
+    </ScrollView>
+  );
+};
+
+export default Report1Screen;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#f5f5f5',
+    padding: 16,
+  },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  info: {
+    marginTop: 12,
+    color: '#666',
+  },
+  error: {
+    fontSize: 16,
+    color: '#d32f2f',
+    textAlign: 'center',
+  },
+});

package/src/api/fetcher.jsx

@@ -1,70 +0,0 @@
-import axios from 'axios';
-
-export class ApiFetcher {
-  static async fetchReportData(reportConfig) {
-    try {
-      console.log('Fetching report data from:', reportConfig.apiConfig.url);
-      
-      const headers = {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json'
-      };
-
-      // Add token if provided
-      if (reportConfig.apiConfig.token) {
-        headers['Authorization'] = `Bearer ${reportConfig.apiConfig.token}`;
-      }
-
-      const response = await axios.get(reportConfig.apiConfig.url, {
-        timeout: 15000,
-        headers: headers
-      });
-
-      console.log('API Response received:', response.status);
-      
-      // Transform data based on report type
-      return this.transformData(response.data, reportConfig);
-      
-    } catch (error) {
-      console.error('API Fetch Error:', error);
-      throw new Error(`Failed to fetch report: ${error.message}`);
-    }
-  }
-
-  static transformData(data, reportConfig) {
-    // For performance reports (type 1, 1.1, 1.2)
-    if (reportConfig.id === 1 || reportConfig.id === 1.1 || reportConfig.id === 1.2) {
-      return {
-        data: data.data || [],
-        title: reportConfig.title,
-        type: 'table',
-        subType: reportConfig.subType
-      };
-    }
-
-    // For report 2 (Revenue by Mode)
-    if (reportConfig.id === 2) {
-      return {
-        data: Array.isArray(data) ? data : data.data || [],
-        title: reportConfig.title,
-        type: 'bar'
-      };
-    }
-
-    // For report 3 (Shipment by Direction)
-    if (reportConfig.id === 3) {
-      return {
-        data: Array.isArray(data) ? data : data.data || [],
-        title: reportConfig.title,
-        type: 'pie'
-      };
-    }
-
-    // Default transformation
-    return {
-      data: data,
-      title: reportConfig.title,
-      type: reportConfig.type || 'bar'
-    };
-  }
-}