@dhiraj0720/report1chart 3.0.9 → 3.1.1

package/package.json

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

package/src/components/CompactAxisBarLineChart.jsx

@@ -58,6 +58,7 @@ const CompactAxisBarLineChart = ({
     maxValue,
     barWidth,
     barGap,
+    groupSidePadding,
   } = useMemo(() => {
     const allValues = [...barSeriesA, ...barSeriesB, ...lineSeries].map(toNumber);
     const peak = Math.max(1, ...allValues);
@@ -66,7 +67,13 @@ const CompactAxisBarLineChart = ({
     const computedPaddingTop = 14;
     const computedPaddingBottom = 42;
     const computedChartHeight = height - computedPaddingTop - computedPaddingBottom;
-    const computedGraphWidth = Math.max(minGraphWidth, labels.length * groupSpacing);
+    const computedBarWidth = 20;
+    const computedBarGap = 4;
+    const computedSidePadding = computedBarWidth + computedBarGap / 2 + 4;
+    const computedGraphWidth = Math.max(
+      minGraphWidth,
+      labels.length * groupSpacing + computedSidePadding * 2,
+    );
 
     return {
       graphWidth: computedGraphWidth,
@@ -76,8 +83,9 @@ const CompactAxisBarLineChart = ({
       paddingTop: computedPaddingTop,
       chartHeight: computedChartHeight,
       maxValue: peak,
-      barWidth: 20,
-      barGap: 4,
+      barWidth: computedBarWidth,
+      barGap: computedBarGap,
+      groupSidePadding: computedSidePadding,
     };
   }, [barSeriesA, barSeriesB, groupSpacing, height, labels.length, lineSeries, minGraphWidth]);
 
@@ -86,10 +94,12 @@ const CompactAxisBarLineChart = ({
   };
 
   const groupCenterX = (index) => {
-    const usableWidth = graphWidth - paddingLeft - paddingRight;
-    const step = labels.length > 1 ? usableWidth / (labels.length - 1) : usableWidth / 2;
-    if (labels.length <= 1) return graphWidth / 2;
-    return paddingLeft + index * step;
+    const startX = paddingLeft + groupSidePadding;
+    const endX = graphWidth - paddingRight - groupSidePadding;
+    const usableWidth = Math.max(0, endX - startX);
+    const step = labels.length > 1 ? usableWidth / (labels.length - 1) : 0;
+    if (labels.length <= 1) return (startX + endX) / 2;
+    return startX + index * step;
   };
 
   const legendItems = legend || [

package/src/components/CompareOptionsModal.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+const CompareOptionsModal = ({
+  visible,
+  title = 'Select Comparison',
+  options = [],
+  selected,
+  onApply,
+  onClose,
+}) => {
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay}>
+          <TouchableWithoutFeedback>
+            <View style={styles.modalContent}>
+              <View style={styles.header}>
+                <Text style={styles.title}>{title}</Text>
+                <TouchableOpacity onPress={onClose}>
+                  <Text style={styles.closeIcon}>X</Text>
+                </TouchableOpacity>
+              </View>
+
+              <ScrollView style={styles.list}>
+                {options.map((option) => {
+                  const active = selected === option.key;
+                  return (
+                    <TouchableOpacity
+                      key={option.key}
+                      style={[styles.item, active && styles.itemActive]}
+                      onPress={() => {
+                        onApply(option.key);
+                        onClose();
+                      }}
+                    >
+                      <Text style={[styles.itemTitle, active && styles.itemTitleActive]}>
+                        {active ? '✓ ' : '  '}
+                        {option.label}
+                      </Text>
+                      {option.description ? (
+                        <Text style={[styles.itemDesc, active && styles.itemDescActive]}>
+                          {option.description}
+                        </Text>
+                      ) : null}
+                    </TouchableOpacity>
+                  );
+                })}
+              </ScrollView>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '86%',
+    maxHeight: '80%',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 10,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 14,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111',
+  },
+  closeIcon: {
+    fontSize: 24,
+    color: '#222',
+    fontWeight: '300',
+  },
+  list: {
+    maxHeight: 360,
+  },
+  item: {
+    borderWidth: 1,
+    borderColor: '#d9e1ee',
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    marginBottom: 10,
+    backgroundColor: '#fff',
+  },
+  itemActive: {
+    borderColor: '#2f6fb8',
+    backgroundColor: '#edf5ff',
+  },
+  itemTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#1a2f49',
+  },
+  itemTitleActive: {
+    color: '#0f4f92',
+  },
+  itemDesc: {
+    marginTop: 3,
+    fontSize: 12,
+    color: '#5a6880',
+  },
+  itemDescActive: {
+    color: '#2c598f',
+  },
+});
+
+export default CompareOptionsModal;

package/src/screens/Report1ModernScreen.jsx

@@ -8,6 +8,9 @@ import {
   View,
 } from 'react-native';
 import fetchReport4 from '../api/report4Fetcher';
+import CompactAxisBarLineChart from '../components/CompactAxisBarLineChart';
+import CompactAxisLineChart from '../components/CompactAxisLineChart';
+import CompareOptionsModal from '../components/CompareOptionsModal';
 import ModernDataTable from '../components/ModernDataTable';
 import { formatNumber } from '../utils/formatNumber';
 
@@ -17,6 +20,24 @@ const TABS = [
   { key: 'fg', label: 'FG / BRÜT KAR ORANI' },
 ];
 
+const COMPARE_OPTIONS = [
+  {
+    key: 'value_yoy',
+    label: '2025 Value vs 2024 Value',
+    description: 'Total value comparison in selected tab',
+  },
+  {
+    key: 'budget_gap',
+    label: '2025 Value vs 2025 Budget',
+    description: 'Actual against budget on selected tab',
+  },
+  {
+    key: 'top_vs_avg',
+    label: 'Top Activity vs Average',
+    description: 'Best activity compared with average 2025 value',
+  },
+];
+
 const toNumber = (value) => {
   const numeric = Number(value);
   return Number.isFinite(numeric) ? numeric : 0;
@@ -27,6 +48,13 @@ const toPercent = (current, previous) => {
   return ((current - previous) / Math.abs(previous)) * 100;
 };
 
+const toShortLabel = (value) => {
+  const text = String(value || '').trim();
+  if (!text) return '-';
+  if (text.length <= 12) return text;
+  return `${text.slice(0, 11)}...`;
+};
+
 const asPercentCell = (value) => {
   const numeric = toNumber(value);
   const positive = numeric >= 0;
@@ -81,6 +109,8 @@ const mapRowByTab = (row, tabKey) => {
 const Report1ModernScreen = ({ api, token, onBack }) => {
   const [activeTab, setActiveTab] = useState('kumule');
   const [sortMode, setSortMode] = useState('growth');
+  const [compareModal, setCompareModal] = useState(false);
+  const [compareMode, setCompareMode] = useState('value_yoy');
   const [rowsByTab, setRowsByTab] = useState({});
   const [loadedByTab, setLoadedByTab] = useState({});
   const [errorByTab, setErrorByTab] = useState({});
@@ -165,17 +195,81 @@ const Report1ModernScreen = ({ api, token, onBack }) => {
   }, [sortedRows]);
 
   const spotlight = sortedRows[0];
+  const compareLabel = COMPARE_OPTIONS.find((item) => item.key === compareMode)?.label || 'Select compare mode';
+
+  const chartRows = useMemo(() => sortedRows.slice(0, 10), [sortedRows]);
+  const chartLabels = useMemo(() => chartRows.map((row) => toShortLabel(row.name)), [chartRows]);
+
+  const lineChartData = useMemo(() => {
+    if (!chartRows.length) return null;
+    return {
+      labels: chartLabels,
+      series: [
+        { name: '2024 Value', data: chartRows.map((row) => row.value2024) },
+        { name: '2025 Value', data: chartRows.map((row) => row.value2025) },
+      ],
+    };
+  }, [chartLabels, chartRows]);
+
+  const barChartData = useMemo(() => {
+    if (!chartRows.length) return null;
+    return {
+      labels: chartLabels,
+      series: [
+        { name: '2024 Value', data: chartRows.map((row) => row.value2024) },
+        { name: '2025 Value', data: chartRows.map((row) => row.value2025) },
+        { name: '2025 Budget', data: chartRows.map((row) => row.budget2025) },
+      ],
+    };
+  }, [chartLabels, chartRows]);
+
+  const compareSummary = useMemo(() => {
+    if (compareMode === 'budget_gap') {
+      return {
+        title: '2025 Value vs 2025 Budget',
+        primaryLabel: '2025 Value',
+        primaryValue: totals.total2025,
+        secondaryLabel: '2025 Budget',
+        secondaryValue: totals.budget2025,
+      };
+    }
+
+    if (compareMode === 'top_vs_avg') {
+      const topValue = spotlight?.value2025 || 0;
+      const avgValue = sortedRows.length ? totals.total2025 / sortedRows.length : 0;
+      return {
+        title: 'Top Activity vs Average (2025)',
+        primaryLabel: spotlight?.name || 'Top Activity',
+        primaryValue: topValue,
+        secondaryLabel: 'Average Activity',
+        secondaryValue: avgValue,
+      };
+    }
+
+    return {
+      title: '2025 Value vs 2024 Value',
+      primaryLabel: '2025 Value',
+      primaryValue: totals.total2025,
+      secondaryLabel: '2024 Value',
+      secondaryValue: totals.total2024,
+    };
+  }, [compareMode, sortedRows.length, spotlight, totals.budget2025, totals.total2024, totals.total2025]);
+
+  const compareMax = Math.max(1, compareSummary.primaryValue, compareSummary.secondaryValue);
+  const compareDelta = toPercent(compareSummary.primaryValue, compareSummary.secondaryValue);
 
   return (
     <View style={styles.screen}>
       <View style={styles.hero}>
         <View style={styles.heroGlowLeft} />
         <View style={styles.heroGlowRight} />
-        <TouchableOpacity onPress={onBack} style={styles.backButton}>
-          <Text style={styles.backIcon}>‹</Text>
-        </TouchableOpacity>
-        <Text style={styles.heroTitle}>Performance Studio</Text>
-        <Text style={styles.heroSubtitle}>Three-tab live performance monitor</Text>
+        <View style={styles.heroTopRow}>
+          <TouchableOpacity onPress={onBack} style={styles.backButton}>
+            <Text style={styles.backIcon}>‹</Text>
+          </TouchableOpacity>
+          <Text numberOfLines={1} style={styles.heroTitle}>Performance Studio</Text>
+        </View>
+        <Text style={styles.heroSubtitle}>Three-tab performance monitor</Text>
       </View>
 
       <View style={styles.tabsContainer}>
@@ -218,6 +312,11 @@ const Report1ModernScreen = ({ api, token, onBack }) => {
 
         {sortedRows.length ? (
           <>
+            <TouchableOpacity style={styles.compareButton} onPress={() => setCompareModal(true)}>
+              <Text style={styles.compareButtonLabel}>Compare</Text>
+              <Text style={styles.compareButtonValue}>{compareLabel}</Text>
+            </TouchableOpacity>
+
             <View style={styles.kpiRow}>
               <View style={[styles.kpiCard, styles.kpiWarm]}>
                 <Text style={styles.kpiLabel}>2024 Value</Text>
@@ -253,6 +352,65 @@ const Report1ModernScreen = ({ api, token, onBack }) => {
               </View>
             </View>
 
+            <View style={styles.compareCard}>
+              <View style={styles.compareTitleRow}>
+                <Text style={styles.compareTitle}>{compareSummary.title}</Text>
+                <Text style={[styles.compareDelta, compareDelta >= 0 ? styles.compareDeltaUp : styles.compareDeltaDown]}>
+                  {compareDelta >= 0 ? '+' : ''}
+                  {compareDelta.toFixed(1)}%
+                </Text>
+              </View>
+
+              <View style={styles.compareMetric}>
+                <View style={styles.compareMetricHead}>
+                  <Text style={styles.compareMetricLabel}>{compareSummary.primaryLabel}</Text>
+                  <Text style={styles.compareMetricValue}>{formatNumber(compareSummary.primaryValue)}</Text>
+                </View>
+                <View style={styles.compareTrack}>
+                  <View
+                    style={[
+                      styles.compareFillPrimary,
+                      { width: `${Math.min(100, (Math.abs(compareSummary.primaryValue) / compareMax) * 100)}%` },
+                    ]}
+                  />
+                </View>
+              </View>
+
+              <View style={styles.compareMetric}>
+                <View style={styles.compareMetricHead}>
+                  <Text style={styles.compareMetricLabel}>{compareSummary.secondaryLabel}</Text>
+                  <Text style={styles.compareMetricValue}>{formatNumber(compareSummary.secondaryValue)}</Text>
+                </View>
+                <View style={styles.compareTrack}>
+                  <View
+                    style={[
+                      styles.compareFillSecondary,
+                      { width: `${Math.min(100, (Math.abs(compareSummary.secondaryValue) / compareMax) * 100)}%` },
+                    ]}
+                  />
+                </View>
+              </View>
+            </View>
+
+            <CompactAxisLineChart
+              data={lineChartData}
+              title="Activity Trend (2024 vs 2025)"
+              legend={[
+                { label: lineChartData?.series?.[0]?.name || '2024 Value', color: '#F29F45' },
+                { label: lineChartData?.series?.[1]?.name || '2025 Value', color: '#2E7DD1' },
+              ]}
+            />
+
+            <CompactAxisBarLineChart
+              data={barChartData}
+              title="2025 Value vs Budget by Activity"
+              legend={[
+                { label: barChartData?.series?.[0]?.name || '2024 Value', color: '#F29F45' },
+                { label: barChartData?.series?.[1]?.name || '2025 Value', color: '#2E7DD1' },
+                { label: barChartData?.series?.[2]?.name || '2025 Budget', color: '#8AB6E8' },
+              ]}
+            />
+
             {spotlight ? (
               <View style={styles.spotlightCard}>
                 <Text style={styles.spotlightLabel}>SPOTLIGHT</Text>
@@ -357,6 +515,15 @@ const Report1ModernScreen = ({ api, token, onBack }) => {
 
         <View style={styles.footerSpacing} />
       </ScrollView>
+
+      <CompareOptionsModal
+        visible={compareModal}
+        title="Compare Performance"
+        options={COMPARE_OPTIONS}
+        selected={compareMode}
+        onApply={setCompareMode}
+        onClose={() => setCompareModal(false)}
+      />
     </View>
   );
 };
@@ -373,6 +540,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#131d30',
     overflow: 'hidden',
   },
+  heroTopRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   heroGlowLeft: {
     position: 'absolute',
     width: 180,
@@ -406,7 +577,8 @@ const styles = StyleSheet.create({
     marginTop: -2,
   },
   heroTitle: {
-    marginTop: 10,
+    marginLeft: 10,
+    flex: 1,
     color: '#fff',
     fontSize: 22,
     fontWeight: '800',
@@ -450,6 +622,26 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
     paddingTop: 14,
   },
+  compareButton: {
+    backgroundColor: '#1a2640',
+    borderColor: '#2f3d5f',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginBottom: 10,
+  },
+  compareButtonLabel: {
+    fontSize: 11,
+    color: '#9eb1d3',
+    marginBottom: 4,
+    fontWeight: '700',
+  },
+  compareButtonValue: {
+    fontSize: 13,
+    color: '#ffffff',
+    fontWeight: '700',
+  },
   center: {
     paddingVertical: 24,
     alignItems: 'center',
@@ -528,6 +720,80 @@ const styles = StyleSheet.create({
     fontWeight: '800',
     fontSize: 13,
   },
+  compareCard: {
+    backgroundColor: '#1a2640',
+    borderColor: '#303d58',
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    marginBottom: 10,
+  },
+  compareTitleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  compareTitle: {
+    color: '#d9e3fa',
+    fontSize: 12,
+    fontWeight: '700',
+    flex: 1,
+    marginRight: 8,
+  },
+  compareDelta: {
+    fontSize: 12,
+    fontWeight: '800',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 999,
+  },
+  compareDeltaUp: {
+    color: '#7ff0c8',
+    backgroundColor: '#1d463a',
+  },
+  compareDeltaDown: {
+    color: '#ff9ca6',
+    backgroundColor: '#522d34',
+  },
+  compareMetric: {
+    marginTop: 6,
+  },
+  compareMetricHead: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  compareMetricLabel: {
+    color: '#b9cae8',
+    fontSize: 11,
+    flex: 1,
+    marginRight: 8,
+  },
+  compareMetricValue: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  compareTrack: {
+    width: '100%',
+    height: 9,
+    borderRadius: 999,
+    backgroundColor: '#2a3652',
+    overflow: 'hidden',
+  },
+  compareFillPrimary: {
+    height: '100%',
+    borderRadius: 999,
+    backgroundColor: '#2E7DD1',
+  },
+  compareFillSecondary: {
+    height: '100%',
+    borderRadius: 999,
+    backgroundColor: '#F29F45',
+  },
   spotlightCard: {
     backgroundColor: '#1a2640',
     borderColor: '#303d58',

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 CompareOptionsModal from '../components/CompareOptionsModal';
 import ModernDataTable from '../components/ModernDataTable';
 import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { formatNumber } from '../utils/formatNumber';
@@ -35,6 +36,24 @@ const toMonthKey = (value) => {
     .replace(/[\u0300-\u036f]/g, '');
 };
 
+const COMPARE_OPTIONS = [
+  {
+    key: 'profit_yoy',
+    label: '2025 Profit vs 2024 Profit',
+    description: 'Compare total profit values by selected filters',
+  },
+  {
+    key: 'profit_budget',
+    label: '2025 Profit vs 2025 Budget',
+    description: 'Compare actual profit against budget',
+  },
+  {
+    key: 'teu_yoy',
+    label: '2025 TEU vs 2024 TEU',
+    description: 'Compare total TEU movement year-over-year',
+  },
+];
+
 const TrendBadge = ({ value }) => {
   const positive = value >= 0;
   return (
@@ -77,6 +96,8 @@ const MetricCell = ({ label, value, accent }) => (
 const Report2ModernScreen = ({ api, token, onBack }) => {
   const [divisionModal, setDivisionModal] = useState(false);
   const [monthsModal, setMonthsModal] = useState(false);
+  const [compareModal, setCompareModal] = useState(false);
+  const [compareMode, setCompareMode] = useState('profit_yoy');
   const [divisions, setDivisions] = useState([]);
   const [division, setDivision] = useState(null);
   const [table, setTable] = useState(null);
@@ -186,6 +207,46 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
     }, null);
   }, [rows]);
 
+  const compareLabel = COMPARE_OPTIONS.find((item) => item.key === compareMode)?.label || 'Select comparison';
+  const compareSummary = useMemo(() => {
+    if (compareMode === 'profit_budget') {
+      return {
+        title: '2025 Profit vs 2025 Budget',
+        primaryLabel: '2025 Profit',
+        primaryValue: total2025Profit,
+        secondaryLabel: '2025 Budget',
+        secondaryValue: total2025Budget,
+      };
+    }
+    if (compareMode === 'teu_yoy') {
+      return {
+        title: '2025 TEU vs 2024 TEU',
+        primaryLabel: '2025 TEU',
+        primaryValue: total2025Teu,
+        secondaryLabel: '2024 TEU',
+        secondaryValue: total2024Teu,
+      };
+    }
+
+    return {
+      title: '2025 Profit vs 2024 Profit',
+      primaryLabel: '2025 Profit',
+      primaryValue: total2025Profit,
+      secondaryLabel: '2024 Profit',
+      secondaryValue: total2024Profit,
+    };
+  }, [
+    compareMode,
+    total2024Profit,
+    total2024Teu,
+    total2025Budget,
+    total2025Profit,
+    total2025Teu,
+  ]);
+
+  const compareMax = Math.max(1, compareSummary.primaryValue, compareSummary.secondaryValue);
+  const compareDelta = toPercent(compareSummary.primaryValue, compareSummary.secondaryValue);
+
   if (loading && (!table || !lineData || !barData)) {
     return (
       <View style={styles.loaderWrap}>
@@ -199,11 +260,13 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
       <View style={styles.hero}>
         <View style={styles.heroDotLarge} />
         <View style={styles.heroDotSmall} />
-        <TouchableOpacity onPress={onBack} style={styles.backButton}>
-          <Text style={styles.backIcon}>‹</Text>
-        </TouchableOpacity>
-        <Text style={styles.heroTitle}>Gross Profit Dashboard</Text>
-        <Text style={styles.heroSubtitle}>Compact analytical view with filtered month data</Text>
+        <View style={styles.heroTopRow}>
+          <TouchableOpacity onPress={onBack} style={styles.backButton}>
+            <Text style={styles.backIcon}>‹</Text>
+          </TouchableOpacity>
+          <Text numberOfLines={1} style={styles.heroTitle}>Gross Profit</Text>
+        </View>
+        <Text style={styles.heroSubtitle}>Filtered month data overview</Text>
       </View>
 
       <ScrollView
@@ -232,6 +295,11 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
           </TouchableOpacity>
         </View>
 
+        <TouchableOpacity style={styles.compareButton} onPress={() => setCompareModal(true)}>
+          <Text style={styles.compareButtonLabel}>Compare</Text>
+          <Text style={styles.compareButtonValue}>{compareLabel}</Text>
+        </TouchableOpacity>
+
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.kpiScroll}>
           <KpiCard
             label="2024 Profit"
@@ -268,6 +336,46 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
           </View>
         </View>
 
+        <View style={styles.compareCard}>
+          <View style={styles.compareTitleRow}>
+            <Text style={styles.compareTitle}>{compareSummary.title}</Text>
+            <Text style={[styles.compareDelta, compareDelta >= 0 ? styles.compareDeltaUp : styles.compareDeltaDown]}>
+              {compareDelta >= 0 ? '+' : ''}
+              {compareDelta.toFixed(1)}%
+            </Text>
+          </View>
+
+          <View style={styles.compareMetric}>
+            <View style={styles.compareMetricHead}>
+              <Text style={styles.compareMetricLabel}>{compareSummary.primaryLabel}</Text>
+              <Text style={styles.compareMetricValue}>{formatNumber(compareSummary.primaryValue)}</Text>
+            </View>
+            <View style={styles.compareTrack}>
+              <View
+                style={[
+                  styles.compareFillPrimary,
+                  { width: `${Math.min(100, (Math.abs(compareSummary.primaryValue) / compareMax) * 100)}%` },
+                ]}
+              />
+            </View>
+          </View>
+
+          <View style={styles.compareMetric}>
+            <View style={styles.compareMetricHead}>
+              <Text style={styles.compareMetricLabel}>{compareSummary.secondaryLabel}</Text>
+              <Text style={styles.compareMetricValue}>{formatNumber(compareSummary.secondaryValue)}</Text>
+            </View>
+            <View style={styles.compareTrack}>
+              <View
+                style={[
+                  styles.compareFillSecondary,
+                  { width: `${Math.min(100, (Math.abs(compareSummary.secondaryValue) / compareMax) * 100)}%` },
+                ]}
+              />
+            </View>
+          </View>
+        </View>
+
         <CompactAxisLineChart
           data={filteredLine}
           title="Profit Amount Trend (Line)"
@@ -347,6 +455,15 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
         onApply={setSelectedMonths}
         onClose={() => setMonthsModal(false)}
       />
+
+      <CompareOptionsModal
+        visible={compareModal}
+        title="Compare Gross Profit"
+        options={COMPARE_OPTIONS}
+        selected={compareMode}
+        onApply={setCompareMode}
+        onClose={() => setCompareModal(false)}
+      />
     </View>
   );
 };
@@ -369,6 +486,10 @@ const styles = StyleSheet.create({
     paddingBottom: 16,
     overflow: 'hidden',
   },
+  heroTopRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   heroDotLarge: {
     position: 'absolute',
     width: 180,
@@ -402,7 +523,8 @@ const styles = StyleSheet.create({
     marginTop: -2,
   },
   heroTitle: {
-    marginTop: 10,
+    marginLeft: 10,
+    flex: 1,
     fontSize: 22,
     fontWeight: '800',
     color: '#fff',
@@ -444,6 +566,26 @@ const styles = StyleSheet.create({
     color: '#14253d',
     fontWeight: '700',
   },
+  compareButton: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#d2deee',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginBottom: 12,
+  },
+  compareButtonLabel: {
+    fontSize: 11,
+    color: '#5e6878',
+    marginBottom: 4,
+    fontWeight: '700',
+  },
+  compareButtonValue: {
+    fontSize: 13,
+    color: '#14253d',
+    fontWeight: '700',
+  },
   kpiScroll: {
     marginBottom: 12,
   },
@@ -503,6 +645,80 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     color: '#152842',
   },
+  compareCard: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#d2deee',
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    marginBottom: 12,
+  },
+  compareTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  compareTitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#152842',
+    flex: 1,
+    marginRight: 8,
+  },
+  compareDelta: {
+    fontSize: 12,
+    fontWeight: '800',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 999,
+  },
+  compareDeltaUp: {
+    color: '#15724a',
+    backgroundColor: '#e4f8ef',
+  },
+  compareDeltaDown: {
+    color: '#b43c44',
+    backgroundColor: '#ffe9ea',
+  },
+  compareMetric: {
+    marginTop: 6,
+  },
+  compareMetricHead: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  compareMetricLabel: {
+    fontSize: 11,
+    color: '#5e6878',
+    flex: 1,
+    marginRight: 8,
+  },
+  compareMetricValue: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#152842',
+  },
+  compareTrack: {
+    width: '100%',
+    height: 9,
+    borderRadius: 999,
+    backgroundColor: '#ecf2fb',
+    overflow: 'hidden',
+  },
+  compareFillPrimary: {
+    height: '100%',
+    borderRadius: 999,
+    backgroundColor: '#2E7DD1',
+  },
+  compareFillSecondary: {
+    height: '100%',
+    borderRadius: 999,
+    backgroundColor: '#F29F45',
+  },
   trendBadge: {
     borderRadius: 999,
     paddingVertical: 4,

package/src/screens/Report3ModernScreen.jsx

@@ -14,6 +14,7 @@ import {
   fetchReport3Line,
   fetchReport3Table,
 } from '../api/report3Fetcher';
+import CompareOptionsModal from '../components/CompareOptionsModal';
 import MonthFilterModal from '../components/MonthFilterModal';
 import CompactAxisBarLineChart from '../components/CompactAxisBarLineChart';
 import CompactAxisLineChart from '../components/CompactAxisLineChart';
@@ -43,6 +44,24 @@ const toMonthKey = (value) => {
     .replace(/[\u0300-\u036f]/g, '');
 };
 
+const COMPARE_OPTIONS = [
+  {
+    key: 'load_yoy',
+    label: '2025 Load vs 2024 Load',
+    description: 'Compare total load counts with selected filters',
+  },
+  {
+    key: 'revenue_yoy',
+    label: '2025 Revenue vs 2024 Revenue',
+    description: 'Compare transportation revenue year-over-year',
+  },
+  {
+    key: 'revenue_budget',
+    label: '2025 Revenue vs 2025 Budget',
+    description: 'Compare actual revenue against planned budget',
+  },
+];
+
 const compactNumber = (value) => {
   const num = toNumber(value);
   if (Math.abs(num) >= 1000000000) return `${(num / 1000000000).toFixed(2)}B`;
@@ -107,6 +126,8 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [monthsModal, setMonthsModal] = useState(false);
+  const [compareModal, setCompareModal] = useState(false);
+  const [compareMode, setCompareMode] = useState('load_yoy');
   const [table, setTable] = useState(null);
   const [lineData, setLineData] = useState(null);
   const [barData, setBarData] = useState(null);
@@ -200,6 +221,45 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
   const loadYoY = percentChange(load2025Total, load2024Total);
   const revenueYoY = percentChange(revenue2025Total, revenue2024Total);
   const budgetCoverage = percentOf(revenue2025Total, budget2025Total);
+  const compareLabel = COMPARE_OPTIONS.find((item) => item.key === compareMode)?.label || 'Select comparison';
+  const compareSummary = useMemo(() => {
+    if (compareMode === 'revenue_yoy') {
+      return {
+        title: '2025 Revenue vs 2024 Revenue',
+        primaryLabel: '2025 Revenue',
+        primaryValue: revenue2025Total,
+        secondaryLabel: '2024 Revenue',
+        secondaryValue: revenue2024Total,
+      };
+    }
+
+    if (compareMode === 'revenue_budget') {
+      return {
+        title: '2025 Revenue vs 2025 Budget',
+        primaryLabel: '2025 Revenue',
+        primaryValue: revenue2025Total,
+        secondaryLabel: '2025 Budget',
+        secondaryValue: budget2025Total,
+      };
+    }
+
+    return {
+      title: '2025 Load vs 2024 Load',
+      primaryLabel: '2025 Load',
+      primaryValue: load2025Total,
+      secondaryLabel: '2024 Load',
+      secondaryValue: load2024Total,
+    };
+  }, [
+    budget2025Total,
+    compareMode,
+    load2024Total,
+    load2025Total,
+    revenue2024Total,
+    revenue2025Total,
+  ]);
+  const compareMax = Math.max(1, compareSummary.primaryValue, compareSummary.secondaryValue);
+  const compareDelta = percentChange(compareSummary.primaryValue, compareSummary.secondaryValue);
 
   const topMonth = useMemo(() => {
     if (!rows.length) return null;
@@ -234,11 +294,13 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
       <View style={styles.hero}>
         <View style={styles.heroBlobLeft} />
         <View style={styles.heroBlobRight} />
-        <TouchableOpacity style={styles.backButton} onPress={onBack}>
-          <Text style={styles.backIcon}>‹</Text>
-        </TouchableOpacity>
-        <Text style={styles.heroTitle}>Transportation Command Center</Text>
-        <Text style={styles.heroSubtitle}>Filtered API visuals with compact axis charts</Text>
+        <View style={styles.heroTopRow}>
+          <TouchableOpacity style={styles.backButton} onPress={onBack}>
+            <Text style={styles.backIcon}>‹</Text>
+          </TouchableOpacity>
+          <Text numberOfLines={1} style={styles.heroTitle}>Transport</Text>
+        </View>
+        <Text style={styles.heroSubtitle}>Filtered API visuals with compact charts</Text>
       </View>
 
       <ScrollView
@@ -278,6 +340,11 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
           </View>
         </View>
 
+        <TouchableOpacity style={styles.compareButton} onPress={() => setCompareModal(true)}>
+          <Text style={styles.compareButtonLabel}>Compare</Text>
+          <Text style={styles.compareButtonValue}>{compareLabel}</Text>
+        </TouchableOpacity>
+
         <View style={styles.statRow}>
           <StatTile
             label="Load YoY"
@@ -307,6 +374,46 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
           />
         </View>
 
+        <View style={styles.compareCard}>
+          <View style={styles.compareTitleRow}>
+            <Text style={styles.compareTitle}>{compareSummary.title}</Text>
+            <Text style={[styles.compareDelta, compareDelta >= 0 ? styles.compareDeltaUp : styles.compareDeltaDown]}>
+              {compareDelta >= 0 ? '+' : ''}
+              {compareDelta.toFixed(1)}%
+            </Text>
+          </View>
+
+          <View style={styles.compareMetric}>
+            <View style={styles.compareMetricHead}>
+              <Text style={styles.compareMetricLabel}>{compareSummary.primaryLabel}</Text>
+              <Text style={styles.compareMetricValue}>{compactNumber(compareSummary.primaryValue)}</Text>
+            </View>
+            <View style={styles.compareTrack}>
+              <View
+                style={[
+                  styles.compareFillPrimary,
+                  { width: `${Math.min(100, (Math.abs(compareSummary.primaryValue) / compareMax) * 100)}%` },
+                ]}
+              />
+            </View>
+          </View>
+
+          <View style={styles.compareMetric}>
+            <View style={styles.compareMetricHead}>
+              <Text style={styles.compareMetricLabel}>{compareSummary.secondaryLabel}</Text>
+              <Text style={styles.compareMetricValue}>{compactNumber(compareSummary.secondaryValue)}</Text>
+            </View>
+            <View style={styles.compareTrack}>
+              <View
+                style={[
+                  styles.compareFillSecondary,
+                  { width: `${Math.min(100, (Math.abs(compareSummary.secondaryValue) / compareMax) * 100)}%` },
+                ]}
+              />
+            </View>
+          </View>
+        </View>
+
         <CompactAxisLineChart
           data={filteredLine}
           title="Load Amount Trend (Line)"
@@ -409,6 +516,15 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
         onApply={setSelectedMonths}
         onClose={() => setMonthsModal(false)}
       />
+
+      <CompareOptionsModal
+        visible={compareModal}
+        title="Compare Transportation"
+        options={COMPARE_OPTIONS}
+        selected={compareMode}
+        onApply={setCompareMode}
+        onClose={() => setCompareModal(false)}
+      />
     </View>
   );
 };
@@ -431,6 +547,10 @@ const styles = StyleSheet.create({
     paddingBottom: 18,
     overflow: 'hidden',
   },
+  heroTopRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   heroBlobLeft: {
     position: 'absolute',
     width: 160,
@@ -464,7 +584,8 @@ const styles = StyleSheet.create({
     marginTop: -2,
   },
   heroTitle: {
-    marginTop: 10,
+    marginLeft: 10,
+    flex: 1,
     color: '#fff',
     fontSize: 22,
     fontWeight: '800',
@@ -531,6 +652,26 @@ const styles = StyleSheet.create({
   modeButtonTextActive: {
     color: '#fff',
   },
+  compareButton: {
+    borderRadius: 14,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: '#fffdf8',
+    borderWidth: 1,
+    borderColor: '#dfd6c3',
+    marginBottom: 10,
+  },
+  compareButtonLabel: {
+    fontSize: 11,
+    color: '#736b57',
+    marginBottom: 4,
+    fontWeight: '700',
+  },
+  compareButtonValue: {
+    fontSize: 13,
+    color: '#2e2a21',
+    fontWeight: '700',
+  },
   statRow: {
     flexDirection: 'row',
     marginBottom: 10,
@@ -570,6 +711,80 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: '#6b6860',
   },
+  compareCard: {
+    backgroundColor: '#fffdf8',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#dfd6c3',
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    marginBottom: 10,
+  },
+  compareTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  compareTitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#2b2a22',
+    flex: 1,
+    marginRight: 8,
+  },
+  compareDelta: {
+    fontSize: 12,
+    fontWeight: '800',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 999,
+  },
+  compareDeltaUp: {
+    color: '#15724a',
+    backgroundColor: '#e4f8ef',
+  },
+  compareDeltaDown: {
+    color: '#b43c44',
+    backgroundColor: '#ffe9ea',
+  },
+  compareMetric: {
+    marginTop: 6,
+  },
+  compareMetricHead: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  compareMetricLabel: {
+    fontSize: 11,
+    color: '#6b6860',
+    flex: 1,
+    marginRight: 8,
+  },
+  compareMetricValue: {
+    fontSize: 12,
+    color: '#2e2a21',
+    fontWeight: '700',
+  },
+  compareTrack: {
+    width: '100%',
+    height: 9,
+    borderRadius: 999,
+    backgroundColor: '#efe8da',
+    overflow: 'hidden',
+  },
+  compareFillPrimary: {
+    height: '100%',
+    borderRadius: 999,
+    backgroundColor: '#179a79',
+  },
+  compareFillSecondary: {
+    height: '100%',
+    borderRadius: 999,
+    backgroundColor: '#f4a04a',
+  },
   sectionTitle: {
     fontSize: 15,
     fontWeight: '800',

package/src/screens/ReportListScreen.jsx

@@ -48,18 +48,18 @@ const OLD_REPORTS = [
 const NEW_REPORTS = [
   {
     id: '1N1',
-    title: 'Performance Report',
-    desc: 'Modern performance studio',
+    title: 'Performance Studio',
+    desc: '',
   },
   {
     id: '2N1',
-    title: 'Gross Profit by Company & Division',
-    desc: 'Modern interactive layout',
+    title: 'Gross Profit',
+    desc: '',
   },
   {
     id: '3N1',
-    title: 'Transportation Business Analysis',
-    desc: 'Modern command center layout',
+    title: 'Transport',
+    desc: '',
   },
 ];
 
@@ -130,7 +130,9 @@ const ReportListScreen = ({ onSelect, onExit }) => {
             activeOpacity={0.88}
           >
             <Text style={styles.cardTitle}>{report.title}</Text>
-            <Text style={styles.cardDesc}>{report.desc}</Text>
+            {report.desc ? (
+              <Text style={styles.cardDesc}>{report.desc}</Text>
+            ) : null}
           </TouchableOpacity>
         ))}
       </ScrollView>