@dhiraj0720/report1chart 2.9.8 → 3.0.1

package/package.json

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

package/src/api/report4Fetcher.jsx

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const fetchReport4 = async (endpoint, token) => {
+  const res = await axios.get(endpoint, {
+    headers: { Authorization: token },
+  });
+
+  if (Array.isArray(res.data)) {
+    return res.data;
+  }
+
+  if (Array.isArray(res.data?.rows)) {
+    return res.data.rows;
+  }
+
+  if (Array.isArray(res.data?.data)) {
+    return res.data.data;
+  }
+
+  return [];
+};
+
+export default fetchReport4;

package/src/components/FrozenTableReport4A.jsx

@@ -0,0 +1,404 @@
+import React, { useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { formatNumber } from '../utils/formatNumber';
+
+const TAB_TABLE_CONFIG = {
+  kumule: {
+    title: '2025 YILI ŞİRKET ve İŞTİPİ BAZINDA BRÜT KAR & FAALİYET KAR PERFORMANS TABLOSU',
+    columns: [
+      { key: 'gross2024', label: '2024 Brüt Kar', type: 'number' },
+      { key: 'gross2025', label: '2025 Brüt Kar', type: 'number' },
+      {
+        key: 'grossChangePercent',
+        label: 'Brüt Kar Fiili Artış %',
+        type: 'trendPercent',
+        trendKey: 'grossTrend',
+      },
+      { key: 'budgetGross2025', label: '2025 Bütçe Brüt Kar', type: 'number' },
+      {
+        key: 'budgetGrossVariancePercent',
+        label: 'Brüt Kar Bütçe Sapma %',
+        type: 'trendPercent',
+        trendKey: 'budgetGrossTrend',
+      },
+      { key: 'fk2024', label: '2024 FK', type: 'number' },
+      { key: 'fk2025', label: '2025 FK', type: 'number' },
+      {
+        key: 'fkChangePercent',
+        label: 'Yıllık FK Fiili Artış %',
+        type: 'trendPercent',
+        trendKey: 'fkTrend',
+      },
+      { key: 'budgetFk2025', label: '2025 Bütçe FK', type: 'number' },
+      {
+        key: 'budgetFkVariancePercent',
+        label: 'FK Bütçe Sapma %',
+        type: 'trendPercent',
+        trendKey: 'budgetFkTrend',
+      },
+    ],
+  },
+  faaliyet: {
+    title: '2025 YILI ŞİRKET ve İŞTİPİ BAZINDA FAALİYET KAR / ZARAR PERFORMANS TABLOSU',
+    columns: [
+      { key: 'fk2024', label: '2024 FK', type: 'number' },
+      { key: 'fk2025', label: '2025 FK', type: 'number' },
+      {
+        key: 'changePercent',
+        label: 'Yıllık FK Fiili Artış %',
+        type: 'trendPercent',
+        trendKey: 'trend',
+      },
+      { key: 'budget2025', label: '2025 Bütçe FK', type: 'number' },
+      {
+        key: 'budgetVariancePercent',
+        label: 'FK Bütçe Sapma %',
+        type: 'trendPercent',
+        trendKey: 'budgetTrend',
+      },
+    ],
+  },
+  fg: {
+    title: 'YIL BAZINDA ŞİRKET ve İŞTİPİ BAZINDA FAALİYET GİDERİ / BRÜT KAR ORANI TABLOSU',
+    columns: [
+      { key: 'gross2024', label: '2024 Brüt Kar', type: 'number' },
+      { key: 'gross2025', label: '2025 Brüt Kar', type: 'number' },
+      { key: 'fk2024', label: '2024 FK', type: 'number' },
+      { key: 'fk2025', label: '2025 FK', type: 'number' },
+      { key: 'ratio2024', label: '2024 FG / Brüt Kar Oranı', type: 'ratio' },
+      { key: 'ratio2025', label: '2025 FG / Brüt Kar Oranı', type: 'ratio' },
+    ],
+  },
+};
+
+const trendUi = (trendValue) => {
+  if (trendValue === 1) {
+    return { icon: '↑', color: '#2e7d32' };
+  }
+
+  if (trendValue === 2) {
+    return { icon: '↓', color: '#c62828' };
+  }
+
+  if (trendValue === 0) {
+    return { icon: '●', color: '#c62828' };
+  }
+
+  return { icon: '●', color: '#e65100' };
+};
+
+const ratioTrend = (ratioValue) => {
+  if (ratioValue === null || ratioValue === undefined) {
+    return null;
+  }
+
+  if (ratioValue < 0) {
+    return 0;
+  }
+
+  if (ratioValue <= 50) {
+    return 1;
+  }
+
+  return 2;
+};
+
+const formatPercent = (value) => {
+  if (value === null || value === undefined) {
+    return '-';
+  }
+
+  return Number(value).toLocaleString('en-US');
+};
+
+const formatRatio = (value) => {
+  if (value === null || value === undefined) {
+    return '-';
+  }
+
+  if (value < 0) {
+    return `-%${Math.abs(value)}`;
+  }
+
+  return `%${value}`;
+};
+
+const DataCell = ({ children, rowStyle, cellStyle }) => (
+  <View style={[styles.dataCell, rowStyle, cellStyle]}>
+    {children}
+  </View>
+);
+
+const TrendValue = ({ value, trend }) => {
+  const trendStyle = trendUi(trend);
+
+  return (
+    <View style={styles.trendWrapper}>
+      <Text style={[styles.trendIcon, { color: trendStyle.color }]}>
+        {trendStyle.icon}
+      </Text>
+      <Text numberOfLines={1} style={styles.dataCellText}>
+        {value}
+      </Text>
+    </View>
+  );
+};
+
+const renderCellValue = (row, column) => {
+  if (column.type === 'number') {
+    return <Text style={styles.dataCellText}>{formatNumber(row[column.key])}</Text>;
+  }
+
+  if (column.type === 'trendPercent') {
+    return (
+      <TrendValue
+        value={formatPercent(row[column.key])}
+        trend={row[column.trendKey]}
+      />
+    );
+  }
+
+  if (column.type === 'ratio') {
+    return (
+      <TrendValue
+        value={formatRatio(row[column.key])}
+        trend={ratioTrend(row[column.key])}
+      />
+    );
+  }
+
+  return <Text style={styles.dataCellText}>-</Text>;
+};
+
+const rowTypeStyle = (row, index) => {
+  if (row.rowType === 1 || row.rowType === 3) {
+    return styles.totalRow;
+  }
+
+  return index % 2 === 0 ? styles.evenRow : styles.oddRow;
+};
+
+const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule', isFullscreen = false }) => {
+  const { width: screenWidth } = useWindowDimensions();
+  const config = TAB_TABLE_CONFIG[tabKey] || TAB_TABLE_CONFIG.kumule;
+
+  const layout = useMemo(() => {
+    const safeWidth = Math.max(280, screenWidth - (isFullscreen ? 32 : 24));
+
+    const frozenColumnWidth = isFullscreen
+      ? Math.max(160, Math.min(220, safeWidth * 0.3))
+      : Math.max(128, Math.min(156, safeWidth * 0.38));
+
+    const dataColumnWidth = isFullscreen
+      ? Math.max(96, Math.min(142, safeWidth * 0.18))
+      : Math.max(92, Math.min(116, (safeWidth - frozenColumnWidth) / 2));
+
+    return {
+      frozenColumnWidth,
+      dataColumnWidth,
+      rowHeight: isFullscreen ? 42 : 38,
+      headerHeight: isFullscreen ? 54 : 46,
+    };
+  }, [isFullscreen, screenWidth]);
+
+  if (!rows.length) {
+    return <Text style={styles.noData}>No data available</Text>;
+  }
+
+  return (
+    <View style={[styles.wrapper, isFullscreen && styles.wrapperFullscreen]}>
+      <Text style={styles.tableTitle}>{config.title}</Text>
+
+      <View style={styles.tableContainer}>
+        <View style={[styles.frozenColumn, { width: layout.frozenColumnWidth }]}>
+          <View
+            style={[
+              styles.nameCell,
+              styles.headerCell,
+              { height: layout.headerHeight },
+            ]}
+          >
+            <Text style={styles.headerText}>ŞİRKET / İŞTİPİ</Text>
+          </View>
+
+          {rows.map((row, index) => {
+            const isTotal = row.rowType === 1 || row.rowType === 3;
+            return (
+              <View
+                key={`name-${row.sortOrder || index}`}
+                style={[
+                  styles.nameCell,
+                  rowTypeStyle(row, index),
+                  { height: layout.rowHeight },
+                ]}
+              >
+                <View style={styles.nameCellContent}>
+                  <Text style={styles.star}>{isTotal ? '★' : ''}</Text>
+                  <Text
+                    numberOfLines={1}
+                    adjustsFontSizeToFit
+                    minimumFontScale={0.78}
+                    style={styles.nameText}
+                  >
+                    {row.name}
+                  </Text>
+                </View>
+              </View>
+            );
+          })}
+        </View>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View>
+            <View style={styles.row}>
+              {config.columns.map((column) => (
+                <View
+                  key={column.key}
+                  style={[
+                    styles.dataCell,
+                    styles.headerCell,
+                    {
+                      width: layout.dataColumnWidth,
+                      height: layout.headerHeight,
+                    },
+                  ]}
+                >
+                  <Text numberOfLines={2} style={styles.headerText}>
+                    {column.label}
+                  </Text>
+                </View>
+              ))}
+            </View>
+
+            {rows.map((row, index) => {
+              const rowStyle = rowTypeStyle(row, index);
+
+              return (
+                <View key={`row-${row.sortOrder || index}`} style={styles.row}>
+                  {config.columns.map((column) => (
+                    <DataCell
+                      key={`${row.sortOrder || index}-${column.key}`}
+                      rowStyle={rowStyle}
+                      cellStyle={{
+                        width: layout.dataColumnWidth,
+                        height: layout.rowHeight,
+                      }}
+                    >
+                      {renderCellValue(row, column)}
+                    </DataCell>
+                  ))}
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+};
+
+export default FrozenTableReport4A;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    backgroundColor: '#f4f7fb',
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#ccd8e4',
+    padding: 6,
+  },
+  wrapperFullscreen: {
+    padding: 8,
+  },
+  tableTitle: {
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#223648',
+    marginBottom: 6,
+  },
+  tableContainer: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: '#b8c6d4',
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#e7edf3',
+  },
+  frozenColumn: {
+    borderRightWidth: 1,
+    borderRightColor: '#ecf1f6',
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  nameCell: {
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#edf2f7',
+    paddingHorizontal: 6,
+  },
+  nameCellContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  nameText: {
+    flex: 1,
+    fontSize: 11.5,
+    color: '#203040',
+  },
+  star: {
+    width: 14,
+    textAlign: 'center',
+    color: '#b7791f',
+    fontSize: 13,
+    marginRight: 2,
+  },
+  dataCell: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+    borderBottomWidth: 1,
+    borderBottomColor: '#edf2f7',
+  },
+  dataCellText: {
+    fontSize: 11.5,
+    color: '#2b3d4e',
+    textAlign: 'center',
+  },
+  headerCell: {
+    backgroundColor: '#5f7f9f',
+  },
+  headerText: {
+    color: '#ffffff',
+    fontWeight: '700',
+    textAlign: 'center',
+    fontSize: 11,
+  },
+  evenRow: {
+    backgroundColor: '#e6eaef',
+  },
+  oddRow: {
+    backgroundColor: '#dde3e9',
+  },
+  totalRow: {
+    backgroundColor: '#a7bdd2',
+  },
+  trendWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  trendIcon: {
+    fontSize: 13,
+    fontWeight: '700',
+    marginRight: 3,
+    marginTop: -1,
+  },
+  noData: {
+    textAlign: 'center',
+    color: '#666',
+    paddingVertical: 20,
+    fontSize: 14,
+  },
+});

package/src/index.jsx

@@ -8,6 +8,7 @@ import Report3Screen from './screens/Report3Screen';
 import Report1AScreen from './screens/Report1AScreen';
 import Report2AScreen from './screens/Report2AScreen';
 import Report3AScreen from './screens/Report3AScreen';
+import Report4AScreen from './screens/Report4AScreen';
 
 const AnalyticsReports = ({ config, onExit }) => {
   const [active, setActive] = useState(null);
@@ -111,7 +112,7 @@ if (active === '2A') {
     );
   }
 
-  if (active === '3A') {
+if (active === '3A') {
   return (
     <SafeScreen>
       <Report3AScreen api={config.report3} token={config.token} onBack={() => setActive(null)} />
@@ -119,6 +120,18 @@ if (active === '2A') {
   );
 }
 
+if (active === '4A') {
+  return (
+    <SafeScreen>
+      <Report4AScreen
+        api={config.report4}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    </SafeScreen>
+  );
+}
+
   return null;
 };
 

package/src/screens/Report4AScreen.jsx

@@ -0,0 +1,330 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import fetchReport4 from '../api/report4Fetcher';
+import FrozenTableReport4A from '../components/FrozenTableReport4A';
+
+const TABS = [
+  { key: 'kumule', label: 'KÜMÜLE' },
+  { key: 'faaliyet', label: 'FAALİYET KAR/ZARAR' },
+  { key: 'fg', label: 'FG / BRÜT KAR ORANI' },
+];
+
+const Report4AScreen = ({ api, token, onBack }) => {
+  const { width, height } = useWindowDimensions();
+  const [activeTab, setActiveTab] = useState('kumule');
+  const [rowsByTab, setRowsByTab] = useState({});
+  const [loadedByTab, setLoadedByTab] = useState({});
+  const [errorByTab, setErrorByTab] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+
+  const isLandscape = width > height;
+
+  const endpointByTab = useMemo(() => ({
+    kumule: api?.kumule,
+    faaliyet: api?.faaliyetKarZarar,
+    fg: api?.fgBrutKarOrani,
+  }), [api]);
+
+  const loadTabData = useCallback(async (tabKey, force = false) => {
+    const endpoint = endpointByTab[tabKey];
+
+    if (!endpoint || !token) {
+      setErrorByTab((prev) => ({
+        ...prev,
+        [tabKey]: 'API endpoint or token missing.',
+      }));
+      return;
+    }
+
+    if (!force && loadedByTab[tabKey]) {
+      return;
+    }
+
+    setLoading(true);
+    setErrorByTab((prev) => ({ ...prev, [tabKey]: null }));
+
+    try {
+      const rows = await fetchReport4(endpoint, token);
+      const sortedRows = [...rows].sort(
+        (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0),
+      );
+
+      setRowsByTab((prev) => ({ ...prev, [tabKey]: sortedRows }));
+      setLoadedByTab((prev) => ({ ...prev, [tabKey]: true }));
+    } catch (error) {
+      setErrorByTab((prev) => ({
+        ...prev,
+        [tabKey]: error?.message || 'Failed to load report data.',
+      }));
+    } finally {
+      setLoading(false);
+    }
+  }, [endpointByTab, loadedByTab, token]);
+
+  useEffect(() => {
+    loadTabData(activeTab);
+  }, [activeTab, loadTabData]);
+
+  const activeRows = rowsByTab[activeTab] || [];
+  const activeError = errorByTab[activeTab];
+  const activeLoaded = loadedByTab[activeTab];
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onBack} style={styles.backButton}>
+          <Text style={styles.backIcon}>‹</Text>
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>New report Formate</Text>
+      </View>
+
+      <View style={styles.tabsContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {TABS.map((tab) => {
+            const isActive = tab.key === activeTab;
+            return (
+              <TouchableOpacity
+                key={tab.key}
+                style={[styles.tabButton, isActive && styles.activeTabButton]}
+                onPress={() => setActiveTab(tab.key)}
+              >
+                <Text style={[styles.tabText, isActive && styles.activeTabText]}>
+                  {tab.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </View>
+
+      <View style={styles.content}>
+        {loading && !activeLoaded ? (
+          <View style={styles.center}>
+            <ActivityIndicator size="large" color="#4E79A7" />
+          </View>
+        ) : null}
+
+        {!loading && activeError && !activeRows.length ? (
+          <View style={styles.center}>
+            <Text style={styles.errorText}>{activeError}</Text>
+            <TouchableOpacity
+              style={styles.retryButton}
+              onPress={() => loadTabData(activeTab, true)}
+            >
+              <Text style={styles.retryText}>Retry</Text>
+            </TouchableOpacity>
+          </View>
+        ) : null}
+
+        {activeRows.length ? (
+          <ScrollView style={styles.tableScroll} contentContainerStyle={styles.tableContent}>
+            <View style={styles.tableToolbar}>
+              <TouchableOpacity
+                onPress={() => setFullscreen(true)}
+                style={styles.fullViewButton}
+              >
+                <Text style={styles.fullViewButtonText}>⤢ Full View</Text>
+              </TouchableOpacity>
+            </View>
+
+            <FrozenTableReport4A rows={activeRows} tabKey={activeTab} />
+          </ScrollView>
+        ) : null}
+      </View>
+
+      <Modal
+        visible={fullscreen}
+        animationType="fade"
+        onRequestClose={() => setFullscreen(false)}
+        supportedOrientations={['portrait', 'landscape-left', 'landscape-right']}
+      >
+        <View style={styles.fullModal}>
+          <View style={styles.fullHeader}>
+            <Text style={styles.fullHintText}>
+              Full View • Auto fit • Pinch to zoom
+            </Text>
+            <TouchableOpacity onPress={() => setFullscreen(false)}>
+              <Text style={styles.closeBtn}>✕</Text>
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView
+            maximumZoomScale={3.5}
+            minimumZoomScale={0.45}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.zoomContent}
+            pinchGestureEnabled
+            bouncesZoom
+          >
+            <View style={[styles.tableWrapper, isLandscape && styles.tableWrapperLandscape]}>
+              <FrozenTableReport4A
+                rows={activeRows}
+                tabKey={activeTab}
+                isFullscreen
+              />
+            </View>
+          </ScrollView>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default Report4AScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#eef2f6',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#4E79A7',
+    paddingHorizontal: 14,
+    paddingVertical: 16,
+  },
+  backButton: {
+    paddingVertical: 4,
+    paddingRight: 10,
+  },
+  backIcon: {
+    fontSize: 32,
+    color: '#fff',
+    fontWeight: '700',
+  },
+  headerTitle: {
+    flex: 1,
+    color: '#fff',
+    fontSize: 19,
+    fontWeight: '700',
+    textAlign: 'center',
+    marginRight: 28,
+  },
+  tabsContainer: {
+    backgroundColor: '#dde3ea',
+    borderBottomWidth: 1,
+    borderBottomColor: '#c6d0da',
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+  },
+  tabButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 6,
+    marginHorizontal: 4,
+    backgroundColor: '#f2f4f7',
+    borderWidth: 1,
+    borderColor: '#d1d6dd',
+  },
+  activeTabButton: {
+    backgroundColor: '#ffffff',
+    borderColor: '#4E79A7',
+  },
+  tabText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#495057',
+  },
+  activeTabText: {
+    color: '#1d3550',
+    fontWeight: '700',
+  },
+  content: {
+    flex: 1,
+  },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  errorText: {
+    textAlign: 'center',
+    color: '#a23434',
+    marginBottom: 14,
+    fontSize: 14,
+  },
+  retryButton: {
+    backgroundColor: '#4E79A7',
+    borderRadius: 6,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  retryText: {
+    color: '#fff',
+    fontWeight: '700',
+    fontSize: 13,
+  },
+  tableScroll: {
+    flex: 1,
+  },
+  tableContent: {
+    paddingHorizontal: 10,
+    paddingBottom: 16,
+  },
+  tableToolbar: {
+    alignItems: 'flex-end',
+    marginTop: 8,
+    marginBottom: 6,
+  },
+  fullViewButton: {
+    backgroundColor: '#4E79A7',
+    borderRadius: 7,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+  },
+  fullViewButtonText: {
+    color: '#fff',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+  fullModal: {
+    flex: 1,
+    backgroundColor: '#f3f6fa',
+  },
+  fullHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#d3dde7',
+    backgroundColor: '#fff',
+  },
+  fullHintText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#23384a',
+    textAlign: 'center',
+  },
+  closeBtn: {
+    fontSize: 24,
+    color: '#1f2d3a',
+    paddingHorizontal: 8,
+  },
+  zoomContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  tableWrapper: {
+    width: '100%',
+  },
+  tableWrapperLandscape: {
+    maxWidth: '96%',
+  },
+});

package/src/screens/ReportListScreen.jsx

@@ -36,11 +36,16 @@ const REPORTS = [
     title: 'Transportation Business Analysis',
     desc: 'Option 1',
   },
-   {
+  {
     id: 3,
     title: 'Transportation Business Analysis',
     desc: 'Option 2',
   },
+  {
+    id: '4A',
+    title: 'New performance Report',
+    desc: 'New report formate',
+  },
 ];
 
 const ReportListScreen = ({ onSelect, onExit }) => {