@dhiraj0720/report1chart 3.0.1 → 3.0.3

package/package.json

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

package/src/components/FrozenTableReport4A.jsx

@@ -1,8 +1,7 @@
-import React, { useMemo } from 'react';
-import { ScrollView, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
-import { formatNumber } from '../utils/formatNumber';
+import React from 'react';
+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,222 +70,182 @@ 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,
+      ]}
+      numberOfLines={1}
+      adjustsFontSizeToFit
+      minimumFontScale={0.8}
+    >
+      {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,
+      ]}
+      numberOfLines={1}
+      adjustsFontSizeToFit
+      minimumFontScale={0.8}
+    >
+      {isUp ? '↑' : '↓'} %{value}
+    </Text>
+  );
 };
 
-const DataCell = ({ children, rowStyle, cellStyle }) => (
-  <View style={[styles.dataCell, rowStyle, cellStyle]}>
-    {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={1}
+      ellipsizeMode="tail"
+      adjustsFontSizeToFit
+      minimumFontScale={0.72}
+    >
+      {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', 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));
+const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule' }) => {
+  const config = TABLE_CONFIG[tabKey] || TABLE_CONFIG.kumule;
 
-    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>;
+  if (!rows || rows.length === 0) {
+    return (
+      <Text style={styles.emptyText}>
+        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>
+    <View>
+      <Text style={styles.title}>{config.title}</Text>
 
+      <View style={styles.container}>
+        <View style={styles.frozenColumn}>
+          <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),
-                  { height: layout.rowHeight },
-                ]}
+              <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}
-                    adjustsFontSizeToFit
-                    minimumFontScale={0.78}
-                    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,
-                    {
-                      width: layout.dataColumnWidth,
-                      height: layout.headerHeight,
-                    },
-                  ]}
-                >
-                  <Text numberOfLines={2} style={styles.headerText}>
-                    {column.label}
-                  </Text>
-                </View>
+                <Cell key={column.key} bold>
+                  {column.label}
+                </Cell>
               ))}
             </View>
 
             {rows.map((row, index) => {
-              const rowStyle = rowTypeStyle(row, index);
-
+              const total = isTotalRow(row);
               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 key={`${row.sortOrder || index}-row`} style={styles.dataRow}>
+                  {config.columns.map((column) => renderDataCell(row, column, total))}
                 </View>
               );
             })}
@@ -300,105 +259,72 @@ const FrozenTableReport4A = ({ rows = [], tabKey = 'kumule', isFullscreen = fals
 export default FrozenTableReport4A;
 
 const styles = StyleSheet.create({
-  wrapper: {
-    backgroundColor: '#f4f7fb',
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: '#ccd8e4',
-    padding: 6,
-  },
-  wrapperFullscreen: {
-    padding: 8,
-  },
-  tableTitle: {
+  title: {
     textAlign: 'center',
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: '700',
-    color: '#223648',
-    marginBottom: 6,
+    color: '#2e2e2e',
+    marginBottom: 8,
+    marginTop: 4,
   },
-  tableContainer: {
+  container: {
     flexDirection: 'row',
     borderWidth: 1,
-    borderColor: '#b8c6d4',
-    borderRadius: 8,
+    borderColor: '#ddd',
+    borderRadius: 10,
     overflow: 'hidden',
-    backgroundColor: '#e7edf3',
+    marginVertical: 12,
+    backgroundColor: '#fff',
   },
   frozenColumn: {
+    width: 180,
+    backgroundColor: '#f4f6f8',
     borderRightWidth: 1,
-    borderRightColor: '#ecf1f6',
+    borderColor: '#ddd',
   },
-  row: {
+  headerRow: {
     flexDirection: 'row',
+    backgroundColor: '#4E79A7',
   },
-  nameCell: {
-    justifyContent: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: '#edf2f7',
-    paddingHorizontal: 6,
-  },
-  nameCellContent: {
+  dataRow: {
     flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nameText: {
-    flex: 1,
-    fontSize: 11.5,
-    color: '#203040',
-  },
-  star: {
-    width: 14,
-    textAlign: 'center',
-    color: '#b7791f',
-    fontSize: 13,
-    marginRight: 2,
   },
-  dataCell: {
+  cell: {
+    width: 100,
+    paddingVertical: 12,
+    paddingHorizontal: 8,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 4,
     borderBottomWidth: 1,
-    borderBottomColor: '#edf2f7',
+    borderColor: '#e0e0e0',
   },
-  dataCellText: {
-    fontSize: 11.5,
-    color: '#2b3d4e',
+  cellText: {
+    fontSize: 12,
     textAlign: 'center',
+    color: '#333',
   },
-  headerCell: {
-    backgroundColor: '#5f7f9f',
+  boldCell: {
+    backgroundColor: '#e9f0f8',
   },
-  headerText: {
-    color: '#ffffff',
+  boldText: {
     fontWeight: '700',
-    textAlign: 'center',
-    fontSize: 11,
   },
-  evenRow: {
-    backgroundColor: '#e6eaef',
+  highlightCell: {
+    backgroundColor: '#e9f0f8',
   },
-  oddRow: {
-    backgroundColor: '#dde3e9',
+  percentText: {
+    fontWeight: '700',
+    fontSize: 12,
+    textAlign: 'center',
   },
-  totalRow: {
-    backgroundColor: '#a7bdd2',
+  percentUp: {
+    color: '#2e7d32',
   },
-  trendWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  trendIcon: {
-    fontSize: 13,
-    fontWeight: '700',
-    marginRight: 3,
-    marginTop: -1,
+  percentDown: {
+    color: '#d32f2f',
   },
-  noData: {
+  emptyText: {
     textAlign: 'center',
+    padding: 20,
     color: '#666',
-    paddingVertical: 20,
-    fontSize: 14,
   },
 });

package/src/screens/Report4AScreen.jsx

@@ -11,6 +11,7 @@ import {
 } 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' },
@@ -18,6 +19,42 @@ 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');
@@ -85,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}>
@@ -138,6 +175,14 @@ const Report4AScreen = ({ api, token, onBack }) => {
             </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>
@@ -279,6 +324,13 @@ const styles = StyleSheet.create({
     marginTop: 8,
     marginBottom: 6,
   },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginTop: 8,
+    marginBottom: 14,
+    color: '#111',
+  },
   fullViewButton: {
     backgroundColor: '#4E79A7',
     borderRadius: 7,

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 }) => {