@dhiraj0720/report1chart 3.0.0 → 3.0.2

package/package.json

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

package/src/components/FrozenTableReport4A.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
-import { formatNumber } from '../utils/formatNumber';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
 
-const TAB_TABLE_CONFIG = {
+const TABLE_CONFIG = {
   kumule: {
     title: '2025 YILI ŞİRKET ve İŞTİPİ BAZINDA BRÜT KAR & FAALİYET KAR PERFORMANS TABLOSU',
     columns: [
@@ -71,171 +70,176 @@ const TAB_TABLE_CONFIG = {
   },
 };
 
-const trendUi = (trendValue) => {
-  if (trendValue === 1) {
-    return { icon: '↑', color: '#2e7d32' };
+const formatNumber = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return '-';
   }
 
-  if (trendValue === 2) {
-    return { icon: '↓', color: '#c62828' };
-  }
+  return Number(value).toLocaleString('en-US');
+};
 
-  if (trendValue === 0) {
-    return { icon: '●', color: '#c62828' };
+const isTotalRow = (row) => row?.rowType === 1 || row?.rowType === 3;
+
+const trendFromValue = (value) => {
+  if (value === null || value === undefined) {
+    return 0;
   }
 
-  return { icon: '●', color: '#e65100' };
+  return value >= 0 ? 1 : 2;
 };
 
-const ratioTrend = (ratioValue) => {
-  if (ratioValue === null || ratioValue === undefined) {
-    return null;
+const ratioTrend = (value) => {
+  if (value === null || value === undefined) {
+    return 0;
   }
 
-  if (ratioValue < 0) {
+  if (value < 0) {
     return 0;
   }
 
-  if (ratioValue <= 50) {
+  if (value <= 50) {
     return 1;
   }
 
   return 2;
 };
 
-const formatPercent = (value) => {
+const PercentCell = ({ value, trend }) => {
   if (value === null || value === undefined) {
-    return '-';
+    return <Text>-</Text>;
   }
 
-  return Number(value).toLocaleString('en-US');
+  const resolvedTrend = trend || trendFromValue(value);
+  const isUp = resolvedTrend === 1;
+
+  return (
+    <Text
+      style={[
+        styles.percentText,
+        isUp ? styles.percentUp : styles.percentDown,
+      ]}
+    >
+      {isUp ? '↑' : '↓'} {Math.abs(value)}%
+    </Text>
+  );
 };
 
-const formatRatio = (value) => {
+const RatioCell = ({ value }) => {
   if (value === null || value === undefined) {
-    return '-';
+    return <Text>-</Text>;
   }
 
-  if (value < 0) {
-    return `-%${Math.abs(value)}`;
-  }
+  const trend = ratioTrend(value);
+  const isUp = trend === 1;
 
-  return `%${value}`;
+  return (
+    <Text
+      style={[
+        styles.percentText,
+        isUp ? styles.percentUp : styles.percentDown,
+      ]}
+    >
+      {isUp ? '↑' : '↓'} %{value}
+    </Text>
+  );
 };
 
-const DataCell = ({ children, style }) => (
-  <View style={[styles.dataCell, style]}>
-    {children}
+const Cell = ({ children, bold = false, highlight = false, width = 100 }) => (
+  <View
+    style={[
+      styles.cell,
+      { width },
+      bold && styles.boldCell,
+      highlight && styles.highlightCell,
+    ]}
+  >
+    <Text
+      style={[
+        styles.cellText,
+        bold && styles.boldText,
+      ]}
+      numberOfLines={2}
+    >
+      {children}
+    </Text>
   </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) => {
+const renderDataCell = (row, column, isTotal) => {
   if (column.type === 'number') {
-    return <Text style={styles.dataCellText}>{formatNumber(row[column.key])}</Text>;
+    return <Cell key={column.key} highlight={isTotal}>{formatNumber(row[column.key])}</Cell>;
   }
 
   if (column.type === 'trendPercent') {
     return (
-      <TrendValue
-        value={formatPercent(row[column.key])}
-        trend={row[column.trendKey]}
-      />
+      <Cell key={column.key} highlight={isTotal}>
+        <PercentCell value={row[column.key]} trend={row[column.trendKey]} />
+      </Cell>
     );
   }
 
   if (column.type === 'ratio') {
     return (
-      <TrendValue
-        value={formatRatio(row[column.key])}
-        trend={ratioTrend(row[column.key])}
-      />
+      <Cell key={column.key} highlight={isTotal}>
+        <RatioCell value={row[column.key]} />
+      </Cell>
     );
   }
 
-  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;
+  return <Cell key={column.key} highlight={isTotal}>-</Cell>;
 };
 
 const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule' }) => {
-  const config = TAB_TABLE_CONFIG[tabKey] || TAB_TABLE_CONFIG.kumule;
+  const config = TABLE_CONFIG[tabKey] || TABLE_CONFIG.kumule;
 
-  if (!rows.length) {
-    return <Text style={styles.noData}>No data available</Text>;
+  if (!rows || rows.length === 0) {
+    return (
+      <Text style={styles.emptyText}>
+        No data available
+      </Text>
+    );
   }
 
   return (
-    <View style={styles.wrapper}>
-      <Text style={styles.tableTitle}>{config.title}</Text>
+    <View>
+      <Text style={styles.title}>{config.title}</Text>
 
-      <View style={styles.tableContainer}>
+      <View style={styles.container}>
         <View style={styles.frozenColumn}>
-          <View style={[styles.nameCell, styles.headerCell]}>
-            <Text style={styles.headerText}>ŞİRKET / İŞTİPİ</Text>
-          </View>
+          <Cell bold width={180}>ŞİRKET / İŞTİPİ</Cell>
           {rows.map((row, index) => {
-            const isTotal = row.rowType === 1 || row.rowType === 3;
+            const total = isTotalRow(row);
             return (
-              <View
-                key={`name-${row.sortOrder || index}`}
-                style={[styles.nameCell, rowTypeStyle(row, index)]}
+              <Cell
+                key={`${row.sortOrder || index}-name`}
+                bold={total}
+                highlight={total}
+                width={180}
               >
-                <View style={styles.nameCellContent}>
-                  <Text style={styles.star}>{isTotal ? '★' : ' '}</Text>
-                  <Text numberOfLines={1} style={styles.nameText}>
-                    {row.name}
-                  </Text>
-                </View>
-              </View>
+                {row.name}
+              </Cell>
             );
           })}
         </View>
 
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <View>
-            <View style={styles.row}>
+            <View style={styles.headerRow}>
               {config.columns.map((column) => (
-                <View key={column.key} style={[styles.dataCell, styles.headerCell]}>
-                  <Text numberOfLines={2} style={styles.headerText}>
-                    {column.label}
-                  </Text>
-                </View>
+                <Cell key={column.key} bold>
+                  {column.label}
+                </Cell>
               ))}
             </View>
 
-            {rows.map((row, index) => (
-              <View key={`row-${row.sortOrder || index}`} style={styles.row}>
-                {config.columns.map((column) => (
-                  <DataCell
-                    key={`${row.sortOrder || index}-${column.key}`}
-                    style={rowTypeStyle(row, index)}
-                  >
-                    {renderCellValue(row, column)}
-                  </DataCell>
-                ))}
-              </View>
-            ))}
+            {rows.map((row, index) => {
+              const total = isTotalRow(row);
+              return (
+                <View key={`${row.sortOrder || index}-row`} style={styles.dataRow}>
+                  {config.columns.map((column) => renderDataCell(row, column, total))}
+                </View>
+              );
+            })}
           </View>
         </ScrollView>
       </View>
@@ -246,105 +250,72 @@ const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule' }) => {
 export default FrozenTableReport4A;
 
 const styles = StyleSheet.create({
-  wrapper: {
-    backgroundColor: '#eef1f5',
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#97aec4',
-    padding: 8,
-  },
-  tableTitle: {
+  title: {
     textAlign: 'center',
     fontSize: 16,
     fontWeight: '700',
     color: '#2e2e2e',
     marginBottom: 8,
+    marginTop: 4,
   },
-  tableContainer: {
+  container: {
     flexDirection: 'row',
     borderWidth: 1,
-    borderColor: '#97aec4',
-    backgroundColor: '#d9dce1',
+    borderColor: '#ddd',
+    borderRadius: 10,
+    overflow: 'hidden',
+    marginVertical: 12,
+    backgroundColor: '#fff',
   },
   frozenColumn: {
-    width: 290,
+    width: 180,
+    backgroundColor: '#f4f6f8',
     borderRightWidth: 1,
-    borderRightColor: '#f3f3f3',
+    borderColor: '#ddd',
   },
-  row: {
+  headerRow: {
     flexDirection: 'row',
+    backgroundColor: '#4E79A7',
   },
-  nameCell: {
-    height: 46,
-    justifyContent: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-    paddingHorizontal: 8,
-  },
-  nameCellContent: {
+  dataRow: {
     flexDirection: 'row',
-    alignItems: 'center',
   },
-  nameText: {
-    flex: 1,
-    fontSize: 13,
-    color: '#1f1f1f',
-  },
-  star: {
-    width: 20,
-    textAlign: 'center',
-    color: '#c37f18',
-    fontSize: 16,
-    marginRight: 4,
-  },
-  dataCell: {
-    width: 120,
-    height: 46,
+  cell: {
+    width: 100,
+    paddingVertical: 12,
+    paddingHorizontal: 8,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 6,
     borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
+    borderColor: '#e0e0e0',
   },
-  dataCellText: {
-    fontSize: 13,
-    color: '#303030',
+  cellText: {
+    fontSize: 12,
     textAlign: 'center',
+    color: '#333',
   },
-  headerCell: {
-    backgroundColor: '#5f7f9f',
-    height: 58,
+  boldCell: {
+    backgroundColor: '#e9f0f8',
   },
-  headerText: {
-    color: '#ffffff',
+  boldText: {
     fontWeight: '700',
-    textAlign: 'center',
-    fontSize: 12,
   },
-  evenRow: {
-    backgroundColor: '#dfdfdf',
+  highlightCell: {
+    backgroundColor: '#e9f0f8',
   },
-  oddRow: {
-    backgroundColor: '#d2d2d2',
+  percentText: {
+    fontWeight: '700',
+    fontSize: 12,
+    textAlign: 'center',
   },
-  totalRow: {
-    backgroundColor: '#9db6cb',
+  percentUp: {
+    color: '#2e7d32',
   },
-  trendWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  trendIcon: {
-    fontSize: 18,
-    fontWeight: '700',
-    marginRight: 4,
-    marginTop: -1,
+  percentDown: {
+    color: '#d32f2f',
   },
-  noData: {
+  emptyText: {
     textAlign: 'center',
+    padding: 20,
     color: '#666',
-    paddingVertical: 20,
-    fontSize: 14,
   },
 });

package/src/screens/Report4AScreen.jsx

@@ -1,14 +1,17 @@
 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';
+import Report1Card from '../components/Report1Card';
 
 const TABS = [
   { key: 'kumule', label: 'KÜMÜLE' },
@@ -16,12 +19,52 @@ const TABS = [
   { key: 'fg', label: 'FG / BRÜT KAR ORANI' },
 ];
 
+const mapRowToCardItem = (row, tabKey) => {
+  if (tabKey === 'faaliyet') {
+    return {
+      name: row.name,
+      actual2024: row.fk2024,
+      actual2025: row.fk2025,
+      actualChangePercent: row.changePercent ?? 0,
+      budget2025: row.budget2025,
+      budgetVariancePercent: row.budgetVariancePercent ?? 0,
+    };
+  }
+
+  if (tabKey === 'fg') {
+    const ratioDiff = (row.ratio2025 ?? 0) - (row.ratio2024 ?? 0);
+    return {
+      name: row.name,
+      actual2024: row.gross2024,
+      actual2025: row.gross2025,
+      actualChangePercent: ratioDiff,
+      budget2025: row.fk2025,
+      budgetVariancePercent: ratioDiff,
+      opexToGrossProfitPercent: row.ratio2025,
+    };
+  }
+
+  return {
+    name: row.name,
+    actual2024: row.gross2024,
+    actual2025: row.gross2025,
+    actualChangePercent: row.grossChangePercent ?? 0,
+    budget2025: row.budgetGross2025,
+    budgetVariancePercent: row.budgetGrossVariancePercent ?? 0,
+    opexToGrossProfitPercent: row.ratio2025,
+  };
+};
+
 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,
@@ -79,7 +122,7 @@ const Report4AScreen = ({ api, token, onBack }) => {
         <TouchableOpacity onPress={onBack} style={styles.backButton}>
           <Text style={styles.backIcon}>‹</Text>
         </TouchableOpacity>
-        <Text style={styles.headerTitle}>New report Formate</Text>
+        <Text style={styles.headerTitle}>Performans Raporu (USD) - NEW</Text>
       </View>
 
       <View style={styles.tabsContainer}>
@@ -122,10 +165,63 @@ const Report4AScreen = ({ api, token, onBack }) => {
 
         {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} />
+
+            <Text style={styles.sectionTitle}>Individual Reports</Text>
+            {activeRows.map((row, index) => (
+              <Report1Card
+                key={`card-${row.sortOrder || index}`}
+                item={mapRowToCardItem(row, 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>
   );
 };
@@ -220,7 +316,67 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   tableContent: {
-    padding: 10,
+    paddingHorizontal: 10,
     paddingBottom: 16,
   },
+  tableToolbar: {
+    alignItems: 'flex-end',
+    marginTop: 8,
+    marginBottom: 6,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginTop: 8,
+    marginBottom: 14,
+    color: '#111',
+  },
+  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

@@ -8,16 +8,11 @@ import {
 } from 'react-native';
 
 const REPORTS = [
-  
-  {
-    id: '1A',
-    title: 'Performans Raporu (USD)',
-    desc: 'Option 1',
-  },
+
   {
-    id: 1,
-    title: 'Performans Raporu (USD)',
-    desc: 'Option 2',
+    id: '4A',
+    title: 'Performans Raporu (USD) - NEW',
+    desc: 'New report formate',
   },
   
   {
@@ -41,11 +36,18 @@ const REPORTS = [
     title: 'Transportation Business Analysis',
     desc: 'Option 2',
   },
+
   {
-    id: '4A',
-    title: 'New performance Report',
-    desc: 'New report formate',
+    id: '1A',
+    title: 'Performans Raporu (USD) - OLD',
+    desc: 'Option 1',
   },
+  {
+    id: 1,
+    title: 'Performans Raporu (USD) - OLD',
+    desc: 'Option 2',
+  },
+  
 ];
 
 const ReportListScreen = ({ onSelect, onExit }) => {