@dhiraj0720/report1chart 2.4.0 → 2.5.1

package/package.json

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

package/src/components/FrozenTableReport1A.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+
+const Arrow = ({ value }) => (
+  <Text style={{ color: value >= 0 ? 'green' : 'red', fontWeight: '700' }}>
+    {value >= 0 ? '↑' : '↓'} {Math.abs(value)}%
+  </Text>
+);
+
+const Cell = ({ children, bold }) => (
+  <View style={styles.cell}>
+    <Text style={[bold && styles.bold]}>{children}</Text>
+  </View>
+);
+
+const FrozenTableReport1A = ({ rows }) => {
+  return (
+    <View style={styles.container}>
+      {/* LEFT FROZEN COLUMN */}
+      <View style={styles.frozen}>
+        <Cell bold>FAALİYET</Cell>
+        {rows.map((r, i) => (
+          <Cell key={i} bold>{r.name}</Cell>
+        ))}
+      </View>
+
+      {/* SCROLLABLE */}
+      <ScrollView horizontal>
+        <View>
+          <View style={styles.headerRow}>
+            <Cell bold>2024</Cell>
+            <Cell bold>2025</Cell>
+            <Cell bold>Artış %</Cell>
+            <Cell bold>2025 Bütçe</Cell>
+            <Cell bold>Sapma %</Cell>
+          </View>
+
+          {rows.map((r, i) => (
+            <View key={i} style={styles.row}>
+              <Cell>{r.actual2024}</Cell>
+              <Cell>{r.actual2025}</Cell>
+              <Cell><Arrow value={r.actualChangePercent} /></Cell>
+              <Cell>{r.budget2025}</Cell>
+              <Cell><Arrow value={r.budgetVariancePercent} /></Cell>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default FrozenTableReport1A;

package/src/components/FullScreenTableModal.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Modal, View, Text, TouchableOpacity, Dimensions } from 'react-native';
+import FrozenTableReport1A from './FrozenTableReport1A';
+
+const FullScreenTableModal = ({ visible, rows, onClose }) => {
+  const [landscape, setLandscape] = useState(false);
+  const { width, height } = Dimensions.get('window');
+
+  return (
+    <Modal visible={visible} animationType="slide">
+      <View style={{ flex: 1, padding: 16 }}>
+        {/* TOP BAR */}
+        <View style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          marginBottom: 8,
+        }}>
+          <TouchableOpacity onPress={onClose}>
+            <Text style={{ fontSize: 18 }}>✕</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity onPress={() => setLandscape(!landscape)}>
+            <Text style={{ fontWeight: '700' }}>⟳ Rotate</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={{ flex: 1 }}>
+          <FrozenTableReport1A rows={rows} />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default FullScreenTableModal;

package/src/components/MonthSelector.jsx

@@ -35,4 +35,5 @@ const styles = StyleSheet.create({
   },
   active: { backgroundColor: '#0f172a' },
   text: { color: '#000', fontWeight: '600' },
+  activeText: { color: '#fff', fontWeight: '700' },
 });

package/src/components/SafeScreen.jsx

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-    paddingBottom: Platform.OS === 'android' ? 24 : 0,
-    paddingTop: Platform.OS === 'android' ? 24 : 0,
+    paddingBottom: Platform.OS === 'android' ? 50 : 0,
+    paddingTop: Platform.OS === 'android' ? 30 : 0,
   },
 });

package/src/index.jsx

@@ -6,7 +6,7 @@ import Report1Screen from './screens/Report1Screen';
 import Report2Screen from './screens/Report2Screen';
 import Report3Screen from './screens/Report3Screen';
 
-const AnalyticsReports = ({ config }) => {
+const AnalyticsReports = ({ config, onExit }) => {
   const [active, setActive] = useState(null);
   const [loading, setLoading] = useState(true);
 
@@ -38,7 +38,7 @@ const AnalyticsReports = ({ config }) => {
   if (!active) {
   return (
     <SafeScreen>
-      <ReportListScreen onSelect={setActive} />
+      <ReportListScreen onSelect={setActive} onExit={onExit}/>
     </SafeScreen>
   );
 }
@@ -57,6 +57,19 @@ const AnalyticsReports = ({ config }) => {
     );
   }
 
+  if (active === '1A') {
+  return (
+    <SafeScreen>
+      <Report1AScreen
+        endpoint={config.report1.url}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    </SafeScreen>
+  );
+}
+
+
   // 👉 REPORT 2
   if (active === 2) {
     return (

package/src/screens/Report1AScreen.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity } from 'react-native';
+import fetchReport1 from '../api/report1Fetcher';
+import FrozenTableReport1A from '../components/FrozenTableReport1A';
+import Report1Card from '../components/Report1Card';
+import FullScreenTableModal from '../components/FullScreenTableModal';
+
+const Report1AScreen = ({ endpoint, token, onBack }) => {
+  const [rows, setRows] = useState([]);
+  const [fullscreen, setFullscreen] = useState(false);
+
+  useEffect(() => {
+    fetchReport1(endpoint, token).then(setRows);
+  }, []);
+
+  return (
+    <>
+      <ScrollView style={{ padding: 16 }}>
+        <Text onPress={onBack} style={{ marginBottom: 12 }}>‹ Back</Text>
+
+        <Text style={{ fontSize: 18, fontWeight: '700', marginBottom: 12 }}>
+          PERFORMANS RAPORU (USD)
+        </Text>
+
+        {/* FULLSCREEN BUTTON */}
+        <TouchableOpacity
+          onPress={() => setFullscreen(true)}
+          style={{
+            alignSelf: 'flex-end',
+            marginBottom: 8,
+            padding: 6,
+          }}
+        >
+          <Text style={{ fontWeight: '700' }}>⤢ Full Screen</Text>
+        </TouchableOpacity>
+
+        <FrozenTableReport1A rows={rows} />
+
+        {/* BELOW TABLE → CARDS */}
+        <Text style={{ marginVertical: 12, fontWeight: '700' }}>
+          Individual Reports
+        </Text>
+
+        {rows.map((r, i) => (
+          <Report1Card key={i} item={r} />
+        ))}
+      </ScrollView>
+
+      {/* FULL SCREEN MODAL */}
+      <FullScreenTableModal
+        visible={fullscreen}
+        rows={rows}
+        onClose={() => setFullscreen(false)}
+      />
+    </>
+  );
+};
+
+export default Report1AScreen;

package/src/screens/ReportListScreen.jsx

@@ -1,15 +1,144 @@
 import React from 'react';
-import { View } from 'react-native';
-import ReportCard from '../components/ReportCard';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
 
-const ReportListScreen = ({ onSelect }) => {
+const REPORTS = [
+  {
+    id: 1,
+    title: 'Report 1',
+    desc: 'Performans Raporu (USD)',
+  },
+  {
+    id: '1A',
+    title: 'Report 1 A',
+    desc: 'Tablo Bazlı Performans (Detaylı)',
+  },
+  {
+    id: 2,
+    title: 'Report 2',
+    desc: 'Gross Profit by Company & Division',
+  },
+  {
+    id: '2A',
+    title: 'Report 2 A',
+    desc: 'Compact / Alternate View',
+  },
+  {
+    id: 3,
+    title: 'Report 3',
+    desc: 'Transportation Business Analysis',
+  },
+  {
+    id: '3A',
+    title: 'Report 3 A',
+    desc: 'Monthly & Budget Comparison',
+  },
+];
+
+const ReportListScreen = ({ onSelect, onExit }) => {
   return (
-    <View style={{ padding: 16 }}>
-      <ReportCard title="Report 1" onPress={() => onSelect(1)} />
-      <ReportCard title="Report 2" onPress={() => onSelect(2)} />
-      <ReportCard title="Report 3" onPress={() => onSelect(3)} />
+    <View style={styles.container}>
+      {/* HEADER */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          onPress={onExit}
+          style={styles.backBtn}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <Text style={styles.back}>‹</Text>
+        </TouchableOpacity>
+
+        <Text style={styles.title}>Analytics Reports</Text>
+
+        {/* Spacer */}
+        <View style={{ width: 28 }} />
+      </View>
+
+      {/* REPORT CARDS */}
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {REPORTS.map(report => (
+          <TouchableOpacity
+            key={report.id}
+            style={styles.card}
+            onPress={() => onSelect(report.id)}
+            activeOpacity={0.85}
+          >
+            <Text style={styles.cardTitle}>{report.title}</Text>
+            <Text style={styles.cardDesc}>{report.desc}</Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
     </View>
   );
 };
 
 export default ReportListScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f4f6f8',
+    padding: 16,
+  },
+
+  /* HEADER */
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+
+  backBtn: {
+    width: 28,
+    alignItems: 'flex-start',
+  },
+
+  back: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#111',
+  },
+
+  title: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111',
+  },
+
+  /* CARDS */
+  card: {
+    backgroundColor: '#fff',
+    padding: 18,
+    borderRadius: 14,
+    marginBottom: 14,
+
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+
+    shadowColor: '#000',
+    shadowOpacity: 0.06,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 3 },
+    elevation: 2,
+  },
+
+  cardTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginBottom: 6,
+    color: '#111',
+  },
+
+  cardDesc: {
+    fontSize: 13,
+    color: '#555',
+    lineHeight: 18,
+  },
+});