@dhiraj0720/report1chart 3.0.7 → 3.0.8

package/package.json

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

package/src/components/CompactAxisBarLineChart.jsx

@@ -36,8 +36,8 @@ const CompactAxisBarLineChart = ({
   title,
   legend,
   height = 220,
-  minGraphWidth = 360,
-  groupSpacing = 86,
+  minGraphWidth = 300,
+  groupSpacing = 64,
 }) => {
   const labels = data?.labels || [];
   const series = data?.series || [];
@@ -76,8 +76,8 @@ const CompactAxisBarLineChart = ({
       paddingTop: computedPaddingTop,
       chartHeight: computedChartHeight,
       maxValue: peak,
-      barWidth: 18,
-      barGap: 8,
+      barWidth: 20,
+      barGap: 4,
     };
   }, [barSeriesA, barSeriesB, groupSpacing, height, labels.length, lineSeries, minGraphWidth]);
 
@@ -251,7 +251,7 @@ const CompactAxisBarLineChart = ({
                     fontSize="10"
                     fill="#4f6076"
                     textAnchor="middle"
-                    transform={`rotate(-35 ${cx} ${height - 14})`}
+                    transform={`rotate(-30 ${cx} ${height - 14})`}
                   >
                     {label}
                   </SvgText>

package/src/components/CompactAxisLineChart.jsx

@@ -26,8 +26,8 @@ const CompactAxisLineChart = ({
   title,
   legend,
   height = 210,
-  minGraphWidth = 340,
-  pointSpacing = 72,
+  minGraphWidth = 300,
+  pointSpacing = 56,
 }) => {
   const labels = data?.labels || [];
   const series = data?.series || [];
@@ -171,7 +171,7 @@ const CompactAxisLineChart = ({
                 fontSize="10"
                 fill="#4f6076"
                 textAnchor="middle"
-                transform={`rotate(-35 ${toX(index)} ${height - 14})`}
+              transform={`rotate(-30 ${toX(index)} ${height - 14})`}
               >
                 {label}
               </SvgText>

package/src/components/ModernDataTable.jsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+const normalizeCell = (value) => {
+  if (value === null || value === undefined) {
+    return { text: '-', color: '#2b3850', weight: '600' };
+  }
+
+  if (typeof value === 'object' && !Array.isArray(value) && value.text !== undefined) {
+    return {
+      text: value.text,
+      color: value.color || '#2b3850',
+      weight: value.weight || '600',
+    };
+  }
+
+  return { text: String(value), color: '#2b3850', weight: '600' };
+};
+
+const ModernDataTable = ({ title, columns = [], rows = [], compact = false }) => {
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>{title}</Text>
+
+      {!rows.length ? (
+        <View style={styles.emptyWrap}>
+          <Text style={styles.emptyText}>No table data for selected filters.</Text>
+        </View>
+      ) : (
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View>
+            <View style={styles.headerRow}>
+              {columns.map((col) => (
+                <View
+                  key={`header-${col.key}`}
+                  style={[
+                    styles.cell,
+                    styles.headerCell,
+                    { width: col.width || (compact ? 110 : 126) },
+                    col.align === 'right' && styles.alignRight,
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.headerText,
+                      col.align === 'right' && styles.textRight,
+                      col.align === 'center' && styles.textCenter,
+                    ]}
+                  >
+                    {col.label}
+                  </Text>
+                </View>
+              ))}
+            </View>
+
+            {rows.map((row, rowIndex) => (
+              <View
+                key={`row-${rowIndex}`}
+                style={[
+                  styles.dataRow,
+                  rowIndex % 2 === 0 ? styles.rowEven : styles.rowOdd,
+                ]}
+              >
+                {columns.map((col) => {
+                  const raw = col.render ? col.render(row) : row[col.key];
+                  const cell = normalizeCell(raw);
+
+                  return (
+                    <View
+                      key={`cell-${rowIndex}-${col.key}`}
+                      style={[
+                        styles.cell,
+                        { width: col.width || (compact ? 110 : 126) },
+                        col.align === 'right' && styles.alignRight,
+                      ]}
+                    >
+                      <Text
+                        numberOfLines={1}
+                        ellipsizeMode="tail"
+                        style={[
+                          styles.cellText,
+                          { color: cell.color, fontWeight: cell.weight },
+                          col.align === 'right' && styles.textRight,
+                          col.align === 'center' && styles.textCenter,
+                        ]}
+                      >
+                        {cell.text}
+                      </Text>
+                    </View>
+                  );
+                })}
+              </View>
+            ))}
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#d4deed',
+    borderRadius: 14,
+    padding: 10,
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: '800',
+    color: '#1c2f47',
+    marginBottom: 8,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    backgroundColor: '#1f385a',
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    overflow: 'hidden',
+  },
+  headerCell: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#2d4d78',
+  },
+  headerText: {
+    fontSize: 11,
+    color: '#f3f8ff',
+    fontWeight: '700',
+  },
+  dataRow: {
+    flexDirection: 'row',
+  },
+  rowEven: {
+    backgroundColor: '#f8fbff',
+  },
+  rowOdd: {
+    backgroundColor: '#ffffff',
+  },
+  cell: {
+    paddingVertical: 10,
+    paddingHorizontal: 8,
+    borderRightWidth: 1,
+    borderRightColor: '#e2ebf7',
+    justifyContent: 'center',
+  },
+  cellText: {
+    fontSize: 11.5,
+    color: '#2b3850',
+  },
+  alignRight: {
+    alignItems: 'flex-end',
+  },
+  textRight: {
+    textAlign: 'right',
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  emptyWrap: {
+    borderWidth: 1,
+    borderColor: '#dce5f3',
+    borderRadius: 10,
+    paddingVertical: 18,
+    alignItems: 'center',
+  },
+  emptyText: {
+    color: '#6b7a91',
+    fontSize: 12,
+  },
+});
+
+export default ModernDataTable;

package/src/index.jsx

@@ -80,7 +80,7 @@ if (active === '1N1') {
   return (
     <SafeScreen>
       <Report1ModernScreen
-        endpoint={config.report1.url}
+        api={config.report4}
         token={config.token}
         onBack={() => setActive(null)}
       />

package/src/screens/Report1ModernScreen.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
   ScrollView,
@@ -7,10 +7,16 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
-import fetchReport1 from '../api/report1Fetcher';
+import fetchReport4 from '../api/report4Fetcher';
+import ModernDataTable from '../components/ModernDataTable';
 import { formatNumber } from '../utils/formatNumber';
 
+const TABS = [
+  { key: 'kumule', label: 'KÜMÜLE' },
+  { key: 'faaliyet', label: 'FAALİYET KAR/ZARAR' },
+  { key: 'fg', label: 'FG / BRÜT KAR ORANI' },
+];
+
 const toNumber = (value) => {
   const numeric = Number(value);
   return Number.isFinite(numeric) ? numeric : 0;
@@ -21,86 +27,148 @@ const toPercent = (current, previous) => {
   return ((current - previous) / Math.abs(previous)) * 100;
 };
 
-const RingGauge = ({ progress }) => {
-  const size = 58;
-  const stroke = 7;
-  const radius = (size - stroke) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const clamped = Math.max(0, Math.min(100, progress));
-  const offset = circumference - (circumference * clamped) / 100;
+const asPercentCell = (value) => {
+  const numeric = toNumber(value);
+  const positive = numeric >= 0;
+  return {
+    text: `${positive ? '+' : ''}${numeric.toFixed(1)}%`,
+    color: positive ? '#15724a' : '#b43c44',
+    weight: '700',
+  };
+};
 
-  return (
-    <Svg width={size} height={size}>
-      <Circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        stroke="#3f4e68"
-        strokeWidth={stroke}
-        fill="none"
-      />
-      <Circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        stroke="#ffb155"
-        strokeWidth={stroke}
-        strokeLinecap="round"
-        strokeDasharray={`${circumference} ${circumference}`}
-        strokeDashoffset={offset}
-        fill="none"
-        transform={`rotate(-90 ${size / 2} ${size / 2})`}
-      />
-    </Svg>
-  );
+const mapRowByTab = (row, tabKey) => {
+  if (tabKey === 'faaliyet') {
+    return {
+      name: row.name,
+      value2024: toNumber(row.fk2024),
+      value2025: toNumber(row.fk2025),
+      change: toNumber(row.changePercent),
+      budget2025: toNumber(row.budget2025),
+      variance: toNumber(row.budgetVariancePercent),
+      ratio2024: null,
+      ratio2025: null,
+    };
+  }
+
+  if (tabKey === 'fg') {
+    const ratio2024 = toNumber(row.ratio2024);
+    const ratio2025 = toNumber(row.ratio2025);
+    return {
+      name: row.name,
+      value2024: toNumber(row.gross2024),
+      value2025: toNumber(row.gross2025),
+      change: ratio2025 - ratio2024,
+      budget2025: toNumber(row.fk2025 || row.budget2025),
+      variance: ratio2025 - ratio2024,
+      ratio2024,
+      ratio2025,
+    };
+  }
+
+  return {
+    name: row.name,
+    value2024: toNumber(row.gross2024),
+    value2025: toNumber(row.gross2025),
+    change: toNumber(row.grossChangePercent),
+    budget2025: toNumber(row.budgetGross2025),
+    variance: toNumber(row.budgetGrossVariancePercent),
+    ratio2024: toNumber(row.ratio2024),
+    ratio2025: toNumber(row.ratio2025),
+  };
 };
 
-const Report1ModernScreen = ({ endpoint, token, onBack }) => {
-  const [rows, setRows] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [viewMode, setViewMode] = useState('yoy');
+const Report1ModernScreen = ({ api, token, onBack }) => {
+  const [activeTab, setActiveTab] = useState('kumule');
   const [sortMode, setSortMode] = useState('growth');
+  const [rowsByTab, setRowsByTab] = useState({});
+  const [loadedByTab, setLoadedByTab] = useState({});
+  const [errorByTab, setErrorByTab] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  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;
+    }
 
-  useEffect(() => {
     setLoading(true);
-    fetchReport1(endpoint, token)
-      .then((data) => setRows(data || []))
-      .catch(() => setRows([]))
-      .finally(() => setLoading(false));
-  }, [endpoint, token]);
+    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 performance data.',
+      }));
+    } finally {
+      setLoading(false);
+    }
+  }, [endpointByTab, loadedByTab, token]);
+
+  useEffect(() => {
+    loadTabData(activeTab);
+  }, [activeTab, loadTabData]);
+
+  const activeRawRows = rowsByTab[activeTab] || [];
+  const activeError = errorByTab[activeTab];
+  const activeLoaded = loadedByTab[activeTab];
+
+  const mappedRows = useMemo(() => {
+    return activeRawRows.map((row) => mapRowByTab(row, activeTab));
+  }, [activeRawRows, activeTab]);
+
+  const sortedRows = useMemo(() => {
+    const copy = [...mappedRows];
+    if (sortMode === 'name') {
+      return copy.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+    }
+    if (sortMode === 'variance') {
+      return copy.sort((a, b) => b.variance - a.variance);
+    }
+    return copy.sort((a, b) => b.change - a.change);
+  }, [mappedRows, sortMode]);
 
   const totals = useMemo(() => {
-    const total2024 = rows.reduce((sum, row) => sum + toNumber(row.actual2024), 0);
-    const total2025 = rows.reduce((sum, row) => sum + toNumber(row.actual2025), 0);
-    const budget2025 = rows.reduce((sum, row) => sum + toNumber(row.budget2025), 0);
+    const total2024 = sortedRows.reduce((sum, row) => sum + row.value2024, 0);
+    const total2025 = sortedRows.reduce((sum, row) => sum + row.value2025, 0);
+    const budget2025 = sortedRows.reduce((sum, row) => sum + row.budget2025, 0);
+    const avgRatio2025 = sortedRows.length
+      ? sortedRows.reduce((sum, row) => sum + (row.ratio2025 || 0), 0) / sortedRows.length
+      : 0;
+
     return {
       total2024,
       total2025,
       budget2025,
       yoy: toPercent(total2025, total2024),
+      avgRatio2025,
     };
-  }, [rows]);
+  }, [sortedRows]);
 
-  const sortedRows = useMemo(() => {
-    const copy = [...rows];
-    if (sortMode === 'variance') {
-      return copy.sort((a, b) => toNumber(b.budgetVariancePercent) - toNumber(a.budgetVariancePercent));
-    }
-    if (sortMode === 'name') {
-      return copy.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-    }
-    return copy.sort((a, b) => toNumber(b.actualChangePercent) - toNumber(a.actualChangePercent));
-  }, [rows, sortMode]);
-
-  const topItem = sortedRows[0];
-
-  if (loading) {
-    return (
-      <View style={styles.loaderWrap}>
-        <ActivityIndicator size="large" color="#ffb155" />
-      </View>
-    );
-  }
+  const spotlight = sortedRows[0];
 
   return (
     <View style={styles.screen}>
@@ -111,151 +179,184 @@ const Report1ModernScreen = ({ endpoint, token, onBack }) => {
           <Text style={styles.backIcon}>‹</Text>
         </TouchableOpacity>
         <Text style={styles.heroTitle}>Performance Studio</Text>
-        <Text style={styles.heroSubtitle}>Live operational performance map by activity</Text>
+        <Text style={styles.heroSubtitle}>Three-tab live performance monitor</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>
 
       <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-        <View style={styles.kpiRow}>
-          <View style={[styles.kpiCard, styles.kpiWarm]}>
-            <Text style={styles.kpiLabel}>2024 Actual</Text>
-            <Text style={styles.kpiValue}>{formatNumber(totals.total2024)}</Text>
-          </View>
-          <View style={[styles.kpiCard, styles.kpiBlue]}>
-            <Text style={styles.kpiLabel}>2025 Actual</Text>
-            <Text style={styles.kpiValue}>{formatNumber(totals.total2025)}</Text>
-          </View>
-        </View>
-        <View style={styles.kpiRow}>
-          <View style={[styles.kpiCard, styles.kpiIndigo]}>
-            <Text style={styles.kpiLabel}>2025 Budget</Text>
-            <Text style={styles.kpiValue}>{formatNumber(totals.budget2025)}</Text>
-          </View>
-          <View style={[styles.kpiCard, styles.kpiTeal]}>
-            <Text style={styles.kpiLabel}>Total YoY</Text>
-            <Text style={styles.kpiValue}>
-              {totals.yoy >= 0 ? '+' : ''}
-              {totals.yoy.toFixed(1)}%
-            </Text>
-          </View>
-        </View>
-
-        {topItem ? (
-          <View style={styles.spotlightCard}>
-            <Text style={styles.spotlightLabel}>SPOTLIGHT</Text>
-            <Text style={styles.spotlightName}>{topItem.name}</Text>
-            <Text style={styles.spotlightValue}>
-              {formatNumber(topItem.actual2025)} in 2025 • {toNumber(topItem.actualChangePercent).toFixed(1)}% YoY
-            </Text>
+        {loading && !activeLoaded ? (
+          <View style={styles.center}>
+            <ActivityIndicator size="large" color="#ffb155" />
           </View>
         ) : null}
 
-        <View style={styles.controlsWrap}>
-          <View style={styles.segmentRow}>
-            <TouchableOpacity
-              style={[styles.segmentBtn, viewMode === 'yoy' && styles.segmentBtnActive]}
-              onPress={() => setViewMode('yoy')}
-            >
-              <Text style={[styles.segmentText, viewMode === 'yoy' && styles.segmentTextActive]}>YoY</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.segmentBtn, viewMode === 'budget' && styles.segmentBtnActive]}
-              onPress={() => setViewMode('budget')}
-            >
-              <Text style={[styles.segmentText, viewMode === 'budget' && styles.segmentTextActive]}>Budget</Text>
-            </TouchableOpacity>
+        {!loading && activeError && !sortedRows.length ? (
+          <View style={styles.center}>
+            <Text style={styles.errorText}>{activeError}</Text>
             <TouchableOpacity
-              style={[styles.segmentBtn, viewMode === 'efficiency' && styles.segmentBtnActive]}
-              onPress={() => setViewMode('efficiency')}
+              style={styles.retryButton}
+              onPress={() => loadTabData(activeTab, true)}
             >
-              <Text style={[styles.segmentText, viewMode === 'efficiency' && styles.segmentTextActive]}>Efficiency</Text>
+              <Text style={styles.retryText}>Retry</Text>
             </TouchableOpacity>
           </View>
+        ) : null}
 
-          <View style={styles.sortRow}>
-            <TouchableOpacity
-              style={[styles.sortChip, sortMode === 'growth' && styles.sortChipActive]}
-              onPress={() => setSortMode('growth')}
-            >
-              <Text style={[styles.sortChipText, sortMode === 'growth' && styles.sortChipTextActive]}>Top Growth</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.sortChip, sortMode === 'variance' && styles.sortChipActive]}
-              onPress={() => setSortMode('variance')}
-            >
-              <Text style={[styles.sortChipText, sortMode === 'variance' && styles.sortChipTextActive]}>Top Variance</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.sortChip, sortMode === 'name' && styles.sortChipActive]}
-              onPress={() => setSortMode('name')}
-            >
-              <Text style={[styles.sortChipText, sortMode === 'name' && styles.sortChipTextActive]}>A-Z</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        {sortedRows.map((item) => {
-          const actual2024 = toNumber(item.actual2024);
-          const actual2025 = toNumber(item.actual2025);
-          const budget2025 = toNumber(item.budget2025);
-          const growth = toNumber(item.actualChangePercent);
-          const variance = toNumber(item.budgetVariancePercent);
-          const efficiency = toNumber(item.opexToGrossProfitPercent);
-          const maxForBar = Math.max(1, actual2024, actual2025, budget2025);
-          const bar2024Width = `${(actual2024 / maxForBar) * 100}%`;
-          const bar2025Width = `${(actual2025 / maxForBar) * 100}%`;
-          const budgetWidth = `${(budget2025 / maxForBar) * 100}%`;
-
-          const badgeValue =
-            viewMode === 'budget' ? variance : viewMode === 'efficiency' ? efficiency : growth;
-
-          return (
-            <View key={item.name} style={styles.card}>
-              <View style={styles.cardHeader}>
-                <Text style={styles.cardTitle}>{item.name}</Text>
-                <Text style={[styles.badge, badgeValue >= 0 ? styles.badgeUp : styles.badgeDown]}>
-                  {badgeValue >= 0 ? '+' : ''}
-                  {badgeValue.toFixed(1)}%
+        {sortedRows.length ? (
+          <>
+            <View style={styles.kpiRow}>
+              <View style={[styles.kpiCard, styles.kpiWarm]}>
+                <Text style={styles.kpiLabel}>2024 Value</Text>
+                <Text style={styles.kpiValue}>{formatNumber(totals.total2024)}</Text>
+              </View>
+              <View style={[styles.kpiCard, styles.kpiBlue]}>
+                <Text style={styles.kpiLabel}>2025 Value</Text>
+                <Text style={styles.kpiValue}>{formatNumber(totals.total2025)}</Text>
+              </View>
+            </View>
+            <View style={styles.kpiRow}>
+              <View style={[styles.kpiCard, styles.kpiIndigo]}>
+                <Text style={styles.kpiLabel}>2025 Budget</Text>
+                <Text style={styles.kpiValue}>{formatNumber(totals.budget2025)}</Text>
+              </View>
+              <View style={[styles.kpiCard, styles.kpiTeal]}>
+                <Text style={styles.kpiLabel}>Total Change</Text>
+                <Text style={styles.kpiValue}>
+                  {totals.yoy >= 0 ? '+' : ''}
+                  {totals.yoy.toFixed(1)}%
                 </Text>
               </View>
+            </View>
 
-              <View style={styles.row}>
-                <Text style={styles.rowLabel}>2024</Text>
-                <View style={styles.track}>
-                  <View style={[styles.fill2024, { width: bar2024Width }]} />
-                </View>
-                <Text style={styles.rowValue}>{formatNumber(actual2024)}</Text>
+            <View style={styles.insightStrip}>
+              <View>
+                <Text style={styles.insightLabel}>Average Ratio 2025</Text>
+                <Text style={styles.insightValue}>{totals.avgRatio2025.toFixed(2)}%</Text>
+              </View>
+              <View>
+                <Text style={styles.insightLabel}>Tab</Text>
+                <Text style={styles.insightValue}>{TABS.find((x) => x.key === activeTab)?.label}</Text>
               </View>
+            </View>
 
-              <View style={styles.row}>
-                <Text style={styles.rowLabel}>2025</Text>
-                <View style={styles.track}>
-                  <View style={[styles.fill2025, { width: bar2025Width }]} />
-                </View>
-                <Text style={styles.rowValue}>{formatNumber(actual2025)}</Text>
+            {spotlight ? (
+              <View style={styles.spotlightCard}>
+                <Text style={styles.spotlightLabel}>SPOTLIGHT</Text>
+                <Text style={styles.spotlightName}>{spotlight.name}</Text>
+                <Text style={styles.spotlightValue}>
+                  2025: {formatNumber(spotlight.value2025)} • Change: {spotlight.change >= 0 ? '+' : ''}
+                  {spotlight.change.toFixed(1)}%
+                </Text>
               </View>
+            ) : null}
+
+            <View style={styles.sortRow}>
+              <TouchableOpacity
+                style={[styles.sortChip, sortMode === 'growth' && styles.sortChipActive]}
+                onPress={() => setSortMode('growth')}
+              >
+                <Text style={[styles.sortChipText, sortMode === 'growth' && styles.sortChipTextActive]}>
+                  Top Growth
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.sortChip, sortMode === 'variance' && styles.sortChipActive]}
+                onPress={() => setSortMode('variance')}
+              >
+                <Text style={[styles.sortChipText, sortMode === 'variance' && styles.sortChipTextActive]}>
+                  Top Variance
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.sortChip, sortMode === 'name' && styles.sortChipActive]}
+                onPress={() => setSortMode('name')}
+              >
+                <Text style={[styles.sortChipText, sortMode === 'name' && styles.sortChipTextActive]}>
+                  A-Z
+                </Text>
+              </TouchableOpacity>
+            </View>
+
+            {sortedRows.map((item) => {
+              const maxForBar = Math.max(1, item.value2024, item.value2025, item.budget2025);
+              const width2024 = `${(item.value2024 / maxForBar) * 100}%`;
+              const width2025 = `${(item.value2025 / maxForBar) * 100}%`;
 
-              {viewMode !== 'yoy' ? (
-                <View style={styles.row}>
-                  <Text style={styles.rowLabel}>Budget</Text>
-                  <View style={styles.track}>
-                    <View style={[styles.fillBudget, { width: budgetWidth }]} />
+              return (
+                <View key={item.name} style={styles.card}>
+                  <View style={styles.cardHeader}>
+                    <Text style={styles.cardTitle}>{item.name}</Text>
+                    <Text style={[styles.badge, item.change >= 0 ? styles.badgeUp : styles.badgeDown]}>
+                      {item.change >= 0 ? '+' : ''}
+                      {item.change.toFixed(1)}%
+                    </Text>
                   </View>
-                  <Text style={styles.rowValue}>{formatNumber(budget2025)}</Text>
-                </View>
-              ) : null}
-
-              {viewMode === 'efficiency' ? (
-                <View style={styles.efficiencyRow}>
-                  <RingGauge progress={efficiency} />
-                  <View style={styles.efficiencyTextWrap}>
-                    <Text style={styles.efficiencyLabel}>OPEX / Gross Profit</Text>
-                    <Text style={styles.efficiencyValue}>{efficiency.toFixed(1)}%</Text>
+
+                  <View style={styles.barRow}>
+                    <Text style={styles.barLabel}>2024</Text>
+                    <View style={styles.track}>
+                      <View style={[styles.fill2024, { width: width2024 }]} />
+                    </View>
+                    <Text style={styles.barValue}>{formatNumber(item.value2024)}</Text>
+                  </View>
+
+                  <View style={styles.barRow}>
+                    <Text style={styles.barLabel}>2025</Text>
+                    <View style={styles.track}>
+                      <View style={[styles.fill2025, { width: width2025 }]} />
+                    </View>
+                    <Text style={styles.barValue}>{formatNumber(item.value2025)}</Text>
                   </View>
                 </View>
-              ) : null}
-            </View>
-          );
-        })}
+              );
+            })}
+
+            <ModernDataTable
+              title="Performance Table"
+              columns={[
+                { key: 'name', label: 'Activity', width: 150 },
+                { key: 'value2024', label: '2024', width: 120, align: 'right', render: (row) => formatNumber(row.value2024) },
+                { key: 'value2025', label: '2025', width: 120, align: 'right', render: (row) => formatNumber(row.value2025) },
+                { key: 'change', label: 'Change %', width: 90, align: 'right', render: (row) => asPercentCell(row.change) },
+                { key: 'budget2025', label: 'Budget 2025', width: 130, align: 'right', render: (row) => formatNumber(row.budget2025) },
+                { key: 'variance', label: 'Variance %', width: 95, align: 'right', render: (row) => asPercentCell(row.variance) },
+                {
+                  key: 'ratio2024',
+                  label: 'Ratio 2024',
+                  width: 92,
+                  align: 'right',
+                  render: (row) => (row.ratio2024 === null ? '-' : `${row.ratio2024.toFixed(2)}%`),
+                },
+                {
+                  key: 'ratio2025',
+                  label: 'Ratio 2025',
+                  width: 92,
+                  align: 'right',
+                  render: (row) => (row.ratio2025 === null ? '-' : `${row.ratio2025.toFixed(2)}%`),
+                },
+              ]}
+              rows={sortedRows}
+            />
+          </>
+        ) : null}
 
         <View style={styles.footerSpacing} />
       </ScrollView>
@@ -268,12 +369,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#0f1726',
   },
-  loaderWrap: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#0f1726',
-  },
   hero: {
     paddingHorizontal: 16,
     paddingTop: 14,
@@ -325,11 +420,58 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '500',
   },
+  tabsContainer: {
+    backgroundColor: '#111b2d',
+    borderBottomWidth: 1,
+    borderBottomColor: '#2f3b57',
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+  },
+  tabButton: {
+    paddingHorizontal: 14,
+    paddingVertical: 9,
+    borderRadius: 8,
+    marginHorizontal: 4,
+    backgroundColor: '#18233a',
+    borderWidth: 1,
+    borderColor: '#35415e',
+  },
+  activeTabButton: {
+    backgroundColor: '#ffb155',
+    borderColor: '#ffb155',
+  },
+  tabText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#c5d0e8',
+  },
+  activeTabText: {
+    color: '#2e2720',
+  },
   content: {
     flex: 1,
     paddingHorizontal: 14,
     paddingTop: 14,
   },
+  center: {
+    paddingVertical: 24,
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#ffb3bb',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  retryButton: {
+    backgroundColor: '#ffb155',
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  retryText: {
+    color: '#2e2720',
+    fontWeight: '700',
+  },
   kpiRow: {
     flexDirection: 'row',
     marginBottom: 10,
@@ -368,6 +510,27 @@ const styles = StyleSheet.create({
     fontWeight: '800',
     color: '#1d2738',
   },
+  insightStrip: {
+    backgroundColor: '#1a2640',
+    borderColor: '#303d58',
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  insightLabel: {
+    fontSize: 11,
+    color: '#9eb1d3',
+    marginBottom: 4,
+  },
+  insightValue: {
+    color: '#fff',
+    fontWeight: '800',
+    fontSize: 13,
+  },
   spotlightCard: {
     backgroundColor: '#1a2640',
     borderColor: '#303d58',
@@ -375,7 +538,7 @@ const styles = StyleSheet.create({
     borderRadius: 14,
     paddingHorizontal: 12,
     paddingVertical: 12,
-    marginBottom: 12,
+    marginBottom: 10,
   },
   spotlightLabel: {
     fontSize: 10,
@@ -394,37 +557,9 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: '#c9d5ed',
   },
-  controlsWrap: {
-    marginBottom: 12,
-  },
-  segmentRow: {
-    flexDirection: 'row',
-    backgroundColor: '#1a2640',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#35415e',
-    padding: 4,
-    marginBottom: 8,
-  },
-  segmentBtn: {
-    flex: 1,
-    alignItems: 'center',
-    paddingVertical: 9,
-    borderRadius: 10,
-  },
-  segmentBtnActive: {
-    backgroundColor: '#ffb155',
-  },
-  segmentText: {
-    color: '#c0cee8',
-    fontWeight: '700',
-    fontSize: 12,
-  },
-  segmentTextActive: {
-    color: '#2e2720',
-  },
   sortRow: {
     flexDirection: 'row',
+    marginBottom: 10,
   },
   sortChip: {
     paddingVertical: 6,
@@ -483,12 +618,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#522d34',
     color: '#ff9ca6',
   },
-  row: {
+  barRow: {
     flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 8,
   },
-  rowLabel: {
+  barLabel: {
     width: 54,
     color: '#bac8e1',
     fontSize: 11,
@@ -512,37 +647,13 @@ const styles = StyleSheet.create({
     backgroundColor: '#6db2ff',
     borderRadius: 999,
   },
-  fillBudget: {
-    height: '100%',
-    backgroundColor: '#c8cfff',
-    borderRadius: 999,
-  },
-  rowValue: {
-    width: 86,
+  barValue: {
+    width: 92,
     textAlign: 'right',
     color: '#e4ecff',
     fontSize: 11,
     fontWeight: '700',
   },
-  efficiencyRow: {
-    marginTop: 4,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  efficiencyTextWrap: {
-    marginLeft: 10,
-    flex: 1,
-  },
-  efficiencyLabel: {
-    color: '#aebadb',
-    fontSize: 11,
-  },
-  efficiencyValue: {
-    marginTop: 3,
-    color: '#ffbf72',
-    fontSize: 16,
-    fontWeight: '800',
-  },
   footerSpacing: {
     height: 14,
   },

package/src/screens/Report2ModernScreen.jsx

@@ -13,6 +13,7 @@ import DivisionFilterModal from '../components/DivisionFilterModal';
 import MonthFilterModal from '../components/MonthFilterModal';
 import CompactAxisLineChart from '../components/CompactAxisLineChart';
 import CompactAxisBarLineChart from '../components/CompactAxisBarLineChart';
+import ModernDataTable from '../components/ModernDataTable';
 import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { formatNumber } from '../utils/formatNumber';
 
@@ -37,6 +38,16 @@ const TrendBadge = ({ value }) => {
   );
 };
 
+const percentCell = (value) => {
+  const numeric = toNumber(value);
+  const positive = numeric >= 0;
+  return {
+    text: `${positive ? '+' : ''}${numeric.toFixed(1)}%`,
+    color: positive ? '#15724a' : '#b43c44',
+    weight: '700',
+  };
+};
+
 const KpiCard = ({ label, value, hint, tone }) => {
   const toneStyle = tone === 'warm' ? styles.kpiWarm : tone === 'mint' ? styles.kpiMint : styles.kpiCool;
   return (
@@ -285,6 +296,22 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
           </View>
         ))}
 
+        <ModernDataTable
+          title="Gross Profit Table"
+          columns={[
+            { key: 'monthLabel', label: 'Month', width: 110 },
+            { key: 'teu2024', label: '2024 TEU', width: 108, align: 'right', render: (row) => formatNumber(row.teu2024) },
+            { key: 'teu2025', label: '2025 TEU', width: 108, align: 'right', render: (row) => formatNumber(row.teu2025) },
+            { key: 'teuChangePercent', label: 'TEU %', width: 88, align: 'right', render: (row) => percentCell(row.teuChangePercent) },
+            { key: 'profitUsd2024', label: '2024 Profit', width: 120, align: 'right', render: (row) => formatNumber(row.profitUsd2024) },
+            { key: 'profitUsd2025', label: '2025 Profit', width: 120, align: 'right', render: (row) => formatNumber(row.profitUsd2025) },
+            { key: 'profitChangePercent', label: 'Profit %', width: 92, align: 'right', render: (row) => percentCell(row.profitChangePercent) },
+            { key: 'budgetProfitUsd2025', label: '2025 Budget', width: 122, align: 'right', render: (row) => formatNumber(row.budgetProfitUsd2025) },
+            { key: 'budgetChangePercent', label: 'Budget %', width: 96, align: 'right', render: (row) => percentCell(row.budgetChangePercent) },
+          ]}
+          rows={rows}
+        />
+
         {!rows.length ? (
           <View style={styles.emptyWrap}>
             <Text style={styles.emptyText}>No months selected. Please update month filter.</Text>

package/src/screens/Report3ModernScreen.jsx

@@ -17,6 +17,7 @@ import {
 import MonthFilterModal from '../components/MonthFilterModal';
 import CompactAxisBarLineChart from '../components/CompactAxisBarLineChart';
 import CompactAxisLineChart from '../components/CompactAxisLineChart';
+import ModernDataTable from '../components/ModernDataTable';
 import { filterChartByMonths } from '../utils/filterChartByMonths';
 
 const toNumber = (value) => {
@@ -50,6 +51,16 @@ const StatTile = ({ label, value, hint, tone }) => (
   </View>
 );
 
+const percentCell = (value) => {
+  const numeric = toNumber(value);
+  const positive = numeric >= 0;
+  return {
+    text: `${positive ? '+' : ''}${numeric.toFixed(1)}%`,
+    color: positive ? '#15724a' : '#b43c44',
+    weight: '700',
+  };
+};
+
 const RingGauge = ({ progress }) => {
   const size = 58;
   const stroke = 8;
@@ -355,6 +366,22 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
           );
         })}
 
+        <ModernDataTable
+          title="Transportation Table"
+          columns={[
+            { key: 'monthLabel', label: 'Month', width: 110 },
+            { key: 'loadCount2024', label: '2024 Load', width: 110, align: 'right', render: (row) => compactNumber(row.loadCount2024) },
+            { key: 'loadCount2025', label: '2025 Load', width: 110, align: 'right', render: (row) => compactNumber(row.loadCount2025) },
+            { key: 'loadCountChangePercent', label: 'Load %', width: 90, align: 'right', render: (row) => percentCell(row.loadCountChangePercent) },
+            { key: 'revenueTl2024', label: '2024 Revenue', width: 122, align: 'right', render: (row) => compactNumber(row.revenueTl2024) },
+            { key: 'revenueTl2025', label: '2025 Revenue', width: 122, align: 'right', render: (row) => compactNumber(row.revenueTl2025) },
+            { key: 'revenueChangePercent', label: 'Revenue %', width: 95, align: 'right', render: (row) => percentCell(row.revenueChangePercent) },
+            { key: 'budgetRevenueTl2025', label: '2025 Budget', width: 122, align: 'right', render: (row) => compactNumber(row.budgetRevenueTl2025) },
+            { key: 'budgetChangePercent', label: 'Budget %', width: 95, align: 'right', render: (row) => percentCell(row.budgetChangePercent) },
+          ]}
+          rows={rows}
+        />
+
         {!rows.length ? (
           <View style={styles.emptyWrap}>
             <Text style={styles.emptyText}>No data for selected month filter.</Text>

package/src/utils/filterChartByMonths.js

@@ -1,5 +1,16 @@
 export const filterChartByMonths = (chart, selectedMonths) => {
-  if (!selectedMonths || selectedMonths.length === 0) return chart;
+  if (!chart) return chart;
+  if (!selectedMonths) return chart;
+  if (selectedMonths.length === 0) {
+    return {
+      ...chart,
+      labels: [],
+      series: (chart.series || []).map((s) => ({
+        ...s,
+        data: [],
+      })),
+    };
+  }
 
   const indices = chart.labels
     .map((label, i) => (selectedMonths.includes(label) ? i : -1))