@dhiraj0720/report1chart 3.0.5 → 3.0.6

package/package.json

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

package/src/index.jsx

@@ -6,6 +6,7 @@ import Report1Screen from './screens/Report1Screen';
 import Report2Screen from './screens/Report2Screen';
 import Report2ModernScreen from './screens/Report2ModernScreen';
 import Report3Screen from './screens/Report3Screen';
+import Report3ModernScreen from './screens/Report3ModernScreen';
 import Report1AScreen from './screens/Report1AScreen';
 import Report2AScreen from './screens/Report2AScreen';
 import Report3AScreen from './screens/Report3AScreen';
@@ -98,6 +99,18 @@ if (active === '2N1') {
   );
 }
 
+if (active === '3N1') {
+  return (
+    <SafeScreen>
+      <Report3ModernScreen
+        api={config.report3}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    </SafeScreen>
+  );
+}
+
 
   // 👉 REPORT 2
   if (active === 2) {

package/src/screens/Report2ModernScreen.jsx

@@ -23,6 +23,13 @@ const toPercent = (current, previous) => {
   return ((current - previous) / Math.abs(previous)) * 100;
 };
 
+const compactAmount = (value) => {
+  const num = toNumber(value);
+  if (Math.abs(num) >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+  if (Math.abs(num) >= 1000) return `${(num / 1000).toFixed(1)}K`;
+  return `${num}`;
+};
+
 const TrendBadge = ({ value }) => {
   const positive = value >= 0;
   return (
@@ -80,15 +87,35 @@ const ModernBars = ({ rows, metric }) => {
             const pct = toPercent(value2025, value2024);
             const bar2024Height = Math.max(6, (value2024 / maxValue) * 122);
             const bar2025Height = Math.max(6, (value2025 / maxValue) * 122);
+            const showInside2024 = bar2024Height > 48;
+            const showInside2025 = bar2025Height > 48;
 
             return (
               <View key={row.monthLabel} style={styles.chartGroup}>
                 <View style={styles.barPair}>
                   <View style={styles.barTrack}>
-                    <View style={[styles.barFill2024, { height: bar2024Height }]} />
+                    {!showInside2024 ? (
+                      <Text style={styles.valueTopText}>{compactAmount(value2024)}</Text>
+                    ) : null}
+                    <View style={[styles.barFill2024, { height: bar2024Height }]}>
+                      {showInside2024 ? (
+                        <View style={styles.valueInsideWrap}>
+                          <Text style={styles.valueInsideText}>{formatNumber(value2024)}</Text>
+                        </View>
+                      ) : null}
+                    </View>
                   </View>
                   <View style={styles.barTrack}>
-                    <View style={[styles.barFill2025, { height: bar2025Height }]} />
+                    {!showInside2025 ? (
+                      <Text style={styles.valueTopText}>{compactAmount(value2025)}</Text>
+                    ) : null}
+                    <View style={[styles.barFill2025, { height: bar2025Height }]}>
+                      {showInside2025 ? (
+                        <View style={styles.valueInsideWrap}>
+                          <Text style={styles.valueInsideText}>{formatNumber(value2025)}</Text>
+                        </View>
+                      ) : null}
+                    </View>
                   </View>
                 </View>
                 <Text style={styles.chartMonthText}>{row.monthLabel.slice(0, 3)}</Text>
@@ -644,21 +671,46 @@ const styles = StyleSheet.create({
     marginBottom: 7,
   },
   barTrack: {
-    width: 12,
-    height: 126,
+    width: 14,
+    height: 130,
     borderRadius: 10,
     justifyContent: 'flex-end',
     backgroundColor: '#eef3fa',
     marginHorizontal: 2,
-    overflow: 'hidden',
+    overflow: 'visible',
   },
   barFill2024: {
     backgroundColor: '#f19a54',
     borderRadius: 10,
+    overflow: 'hidden',
   },
   barFill2025: {
     backgroundColor: '#2f7cca',
     borderRadius: 10,
+    overflow: 'hidden',
+  },
+  valueInsideWrap: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  valueInsideText: {
+    color: '#fff',
+    fontSize: 8,
+    fontWeight: '700',
+    transform: [{ rotate: '-90deg' }],
+    width: 84,
+    textAlign: 'center',
+  },
+  valueTopText: {
+    position: 'absolute',
+    top: -15,
+    left: -18,
+    width: 48,
+    textAlign: 'center',
+    fontSize: 8,
+    fontWeight: '700',
+    color: '#405268',
   },
   chartMonthText: {
     fontSize: 10,

package/src/screens/Report3ModernScreen.jsx

@@ -0,0 +1,785 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Svg, { Circle, Line, Polyline } from 'react-native-svg';
+import { fetchReport3Table } from '../api/report3Fetcher';
+import MonthFilterModal from '../components/MonthFilterModal';
+import { formatNumber } from '../utils/formatNumber';
+
+const toNumber = (value) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+};
+
+const percentChange = (current, previous) => {
+  if (!previous) return 0;
+  return ((current - previous) / Math.abs(previous)) * 100;
+};
+
+const percentOf = (part, total) => {
+  if (!total) return 0;
+  return (part / total) * 100;
+};
+
+const compactNumber = (value) => {
+  const num = toNumber(value);
+  if (Math.abs(num) >= 1000000000) return `${(num / 1000000000).toFixed(2)}B`;
+  if (Math.abs(num) >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+  if (Math.abs(num) >= 1000) return `${(num / 1000).toFixed(1)}K`;
+  return `${num}`;
+};
+
+const StatTile = ({ label, value, hint, tone }) => (
+  <View style={[styles.statTile, tone === 'mint' ? styles.statMint : tone === 'sun' ? styles.statSun : styles.statSea]}>
+    <Text style={styles.statLabel}>{label}</Text>
+    <Text style={styles.statValue}>{value}</Text>
+    <Text style={styles.statHint}>{hint}</Text>
+  </View>
+);
+
+const RingGauge = ({ progress }) => {
+  const size = 60;
+  const stroke = 8;
+  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;
+
+  return (
+    <Svg width={size} height={size}>
+      <Circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke="#d8ece8"
+        strokeWidth={stroke}
+        fill="none"
+      />
+      <Circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke="#179b78"
+        strokeWidth={stroke}
+        strokeLinecap="round"
+        strokeDasharray={`${circumference} ${circumference}`}
+        strokeDashoffset={offset}
+        fill="none"
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+      />
+    </Svg>
+  );
+};
+
+const SignalChart = ({ rows, mode }) => {
+  if (!rows.length) return null;
+
+  const values2024 = rows.map((row) =>
+    mode === 'loads' ? toNumber(row.loadCount2024) : toNumber(row.revenueTl2024),
+  );
+  const values2025 = rows.map((row) =>
+    mode === 'loads' ? toNumber(row.loadCount2025) : toNumber(row.revenueTl2025),
+  );
+
+  const width = Math.max(360, rows.length * 72);
+  const height = 190;
+  const left = 18;
+  const right = 12;
+  const top = 16;
+  const bottom = 38;
+  const chartHeight = height - top - bottom;
+
+  const all = [...values2024, ...values2025];
+  const min = Math.min(...all);
+  const max = Math.max(...all);
+  const pad = Math.max(1, (max - min) * 0.14);
+  const yMin = min - pad;
+  const yMax = max + pad;
+
+  const stepX = rows.length > 1 ? (width - left - right) / (rows.length - 1) : width / 2;
+  const toY = (value) => top + ((yMax - value) / Math.max(1, yMax - yMin)) * chartHeight;
+  const toX = (index) => left + index * stepX;
+
+  const points2024 = values2024.map((value, i) => `${toX(i)},${toY(value)}`).join(' ');
+  const points2025 = values2025.map((value, i) => `${toX(i)},${toY(value)}`).join(' ');
+
+  return (
+    <View style={styles.signalCard}>
+      <View style={styles.signalHeader}>
+        <Text style={styles.signalTitle}>
+          {mode === 'loads' ? 'Load Movement Signal' : 'Revenue Movement Signal'}
+        </Text>
+        <View style={styles.signalLegend}>
+          <Text style={styles.legend2024}>2024</Text>
+          <Text style={styles.legend2025}>2025</Text>
+        </View>
+      </View>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <Svg width={width} height={height}>
+          {[0, 0.5, 1].map((ratio) => {
+            const y = top + ratio * chartHeight;
+            return (
+              <Line
+                key={ratio}
+                x1={left}
+                y1={y}
+                x2={width - right}
+                y2={y}
+                stroke="#e7e3d9"
+                strokeDasharray="4 5"
+                strokeWidth={1}
+              />
+            );
+          })}
+
+          <Polyline
+            points={points2024}
+            fill="none"
+            stroke="#f59f40"
+            strokeWidth={3}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeDasharray="8 6"
+          />
+          <Polyline
+            points={points2025}
+            fill="none"
+            stroke="#168a73"
+            strokeWidth={3}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+
+          {rows.map((row, index) => (
+            <React.Fragment key={`${row.monthLabel}-${index}`}>
+              <Circle cx={toX(index)} cy={toY(values2024[index])} r={4.8} fill="#f59f40" />
+              <Circle cx={toX(index)} cy={toY(values2025[index])} r={4.8} fill="#168a73" />
+            </React.Fragment>
+          ))}
+        </Svg>
+      </ScrollView>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.signalMonthStrip}>
+        {rows.map((row) => (
+          <View key={`month-${row.monthLabel}`} style={styles.signalMonthChip}>
+            <Text style={styles.signalMonthText}>{row.monthLabel}</Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const Report3ModernScreen = ({ api, token, onBack }) => {
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [monthsModal, setMonthsModal] = useState(false);
+  const [table, setTable] = useState(null);
+  const [selectedMonths, setSelectedMonths] = useState([]);
+  const [focusMonth, setFocusMonth] = useState('ALL');
+  const [mode, setMode] = useState('loads');
+
+  const loadData = useCallback(async () => {
+    const response = await fetchReport3Table(api.table, token);
+    setTable(response);
+    const months = (response?.rows || [])
+      .filter((row) => row.month !== 99 && row.monthLabel !== 'Total')
+      .map((row) => row.monthLabel);
+    setSelectedMonths(months);
+    setFocusMonth('ALL');
+  }, [api.table, token]);
+
+  useEffect(() => {
+    setLoading(true);
+    loadData()
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [loadData]);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await loadData();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [loadData]);
+
+  const baseRows = useMemo(() => {
+    return (table?.rows || []).filter((row) => row.month !== 99 && row.monthLabel !== 'Total');
+  }, [table]);
+
+  const rows = useMemo(() => {
+    let filtered = baseRows;
+    if (selectedMonths.length) {
+      filtered = filtered.filter((row) => selectedMonths.includes(row.monthLabel));
+    }
+    if (focusMonth !== 'ALL') {
+      filtered = filtered.filter((row) => row.monthLabel === focusMonth);
+    }
+    return filtered;
+  }, [baseRows, selectedMonths, focusMonth]);
+
+  const quickMonths = useMemo(() => ['ALL', ...selectedMonths.slice(0, 6)], [selectedMonths]);
+
+  const load2024Total = useMemo(
+    () => rows.reduce((sum, row) => sum + toNumber(row.loadCount2024), 0),
+    [rows],
+  );
+  const load2025Total = useMemo(
+    () => rows.reduce((sum, row) => sum + toNumber(row.loadCount2025), 0),
+    [rows],
+  );
+  const revenue2024Total = useMemo(
+    () => rows.reduce((sum, row) => sum + toNumber(row.revenueTl2024), 0),
+    [rows],
+  );
+  const revenue2025Total = useMemo(
+    () => rows.reduce((sum, row) => sum + toNumber(row.revenueTl2025), 0),
+    [rows],
+  );
+  const budget2025Total = useMemo(
+    () => rows.reduce((sum, row) => sum + toNumber(row.budgetRevenueTl2025), 0),
+    [rows],
+  );
+
+  const loadYoY = percentChange(load2025Total, load2024Total);
+  const revenueYoY = percentChange(revenue2025Total, revenue2024Total);
+  const budgetCoverage = percentOf(revenue2025Total, budget2025Total);
+
+  const topMonth = useMemo(() => {
+    if (!rows.length) return null;
+    return rows.reduce((best, row) => {
+      if (!best) return row;
+      const bestValue = mode === 'loads' ? toNumber(best.loadCount2025) : toNumber(best.revenueTl2025);
+      const rowValue = mode === 'loads' ? toNumber(row.loadCount2025) : toNumber(row.revenueTl2025);
+      return rowValue > bestValue ? row : best;
+    }, null);
+  }, [rows, mode]);
+
+  const maxLaneValue = useMemo(() => {
+    if (!rows.length) return 1;
+    const values = rows.flatMap((row) => (
+      mode === 'loads'
+        ? [toNumber(row.loadCount2024), toNumber(row.loadCount2025)]
+        : [toNumber(row.revenueTl2024), toNumber(row.revenueTl2025), toNumber(row.budgetRevenueTl2025)]
+    ));
+    return Math.max(1, ...values);
+  }, [rows, mode]);
+
+  if (loading && !table) {
+    return (
+      <View style={styles.loaderWrap}>
+        <ActivityIndicator size="large" color="#13866f" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.screen}>
+      <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}>Operational pulse for load and revenue movement</Text>
+      </View>
+
+      <ScrollView
+        style={styles.content}
+        showsVerticalScrollIndicator={false}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+      >
+        <View style={styles.topControlRow}>
+          <TouchableOpacity
+            style={styles.controlChip}
+            onPress={() => setMonthsModal(true)}
+            activeOpacity={0.9}
+          >
+            <Text style={styles.controlChipLabel}>Months</Text>
+            <Text style={styles.controlChipValue}>
+              {selectedMonths.length}/{baseRows.length || selectedMonths.length}
+            </Text>
+          </TouchableOpacity>
+
+          <View style={styles.modeToggle}>
+            <TouchableOpacity
+              style={[styles.modeButton, mode === 'loads' && styles.modeButtonActive]}
+              onPress={() => setMode('loads')}
+            >
+              <Text style={[styles.modeButtonText, mode === 'loads' && styles.modeButtonTextActive]}>
+                Loads
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.modeButton, mode === 'revenue' && styles.modeButtonActive]}
+              onPress={() => setMode('revenue')}
+            >
+              <Text style={[styles.modeButtonText, mode === 'revenue' && styles.modeButtonTextActive]}>
+                Revenue
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.quickMonthRow}>
+          {quickMonths.map((month) => (
+            <TouchableOpacity
+              key={month}
+              style={[styles.monthChip, focusMonth === month && styles.monthChipActive]}
+              onPress={() => setFocusMonth(month)}
+            >
+              <Text style={[styles.monthChipText, focusMonth === month && styles.monthChipTextActive]}>
+                {month}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+
+        <View style={styles.statRow}>
+          <StatTile
+            label="Load YoY"
+            value={`${loadYoY >= 0 ? '+' : ''}${loadYoY.toFixed(1)}%`}
+            hint={`${compactNumber(load2025Total)} vs ${compactNumber(load2024Total)}`}
+            tone="mint"
+          />
+          <StatTile
+            label="Revenue YoY"
+            value={`${revenueYoY >= 0 ? '+' : ''}${revenueYoY.toFixed(1)}%`}
+            hint={`${compactNumber(revenue2025Total)} vs ${compactNumber(revenue2024Total)}`}
+            tone="sun"
+          />
+        </View>
+        <View style={styles.statRow}>
+          <StatTile
+            label="Budget Coverage"
+            value={`${budgetCoverage.toFixed(1)}%`}
+            hint={`${compactNumber(revenue2025Total)} / ${compactNumber(budget2025Total)}`}
+            tone="sea"
+          />
+          <StatTile
+            label="Peak Month"
+            value={topMonth?.monthLabel || '-'}
+            hint={mode === 'loads' ? compactNumber(topMonth?.loadCount2025) : compactNumber(topMonth?.revenueTl2025)}
+            tone="mint"
+          />
+        </View>
+
+        <SignalChart rows={rows} mode={mode} />
+
+        <Text style={styles.sectionTitle}>Operational lanes</Text>
+        {rows.map((row) => {
+          const current = mode === 'loads' ? toNumber(row.loadCount2025) : toNumber(row.revenueTl2025);
+          const previous = mode === 'loads' ? toNumber(row.loadCount2024) : toNumber(row.revenueTl2024);
+          const target = mode === 'loads' ? previous : toNumber(row.budgetRevenueTl2025);
+          const delta = percentChange(current, previous);
+          const progress = percentOf(current, Math.max(1, target));
+          const previousWidth = `${Math.min(100, (previous / maxLaneValue) * 100)}%`;
+          const currentWidth = `${Math.min(100, (current / maxLaneValue) * 100)}%`;
+
+          return (
+            <View key={`lane-${row.monthLabel}`} style={styles.laneCard}>
+              <View style={styles.laneHeader}>
+                <Text style={styles.laneTitle}>{row.monthLabel}</Text>
+                <Text style={[styles.deltaTag, delta >= 0 ? styles.deltaUp : styles.deltaDown]}>
+                  {delta >= 0 ? '+' : ''}
+                  {delta.toFixed(1)}%
+                </Text>
+              </View>
+
+              <View style={styles.laneBarsArea}>
+                <View style={styles.laneBars}>
+                  <Text style={styles.laneLabel}>2024</Text>
+                  <View style={styles.track}>
+                    <View style={[styles.bar2024, { width: previousWidth }]} />
+                  </View>
+                  <Text style={styles.laneValue}>{compactNumber(previous)}</Text>
+                </View>
+                <View style={styles.laneBars}>
+                  <Text style={styles.laneLabel}>2025</Text>
+                  <View style={styles.track}>
+                    <View style={[styles.bar2025, { width: currentWidth }]} />
+                  </View>
+                  <Text style={styles.laneValue}>{compactNumber(current)}</Text>
+                </View>
+              </View>
+
+              <View style={styles.gaugeRow}>
+                <RingGauge progress={progress} />
+                <View style={styles.gaugeTextWrap}>
+                  <Text style={styles.gaugeTitle}>
+                    {mode === 'loads' ? '2025 vs 2024 efficiency' : '2025 budget delivery'}
+                  </Text>
+                  <Text style={styles.gaugeValue}>{progress.toFixed(1)}%</Text>
+                </View>
+              </View>
+            </View>
+          );
+        })}
+
+        {!rows.length ? (
+          <View style={styles.emptyWrap}>
+            <Text style={styles.emptyText}>No data for selected filters.</Text>
+          </View>
+        ) : null}
+      </ScrollView>
+
+      <MonthFilterModal
+        visible={monthsModal}
+        months={baseRows.map((row) => row.monthLabel)}
+        selected={selectedMonths}
+        onApply={setSelectedMonths}
+        onClose={() => setMonthsModal(false)}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: '#faf7ef',
+  },
+  loaderWrap: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#faf7ef',
+  },
+  hero: {
+    backgroundColor: '#0b7a61',
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 18,
+    overflow: 'hidden',
+  },
+  heroBlobLeft: {
+    position: 'absolute',
+    width: 160,
+    height: 160,
+    borderRadius: 80,
+    left: -55,
+    top: -90,
+    backgroundColor: '#12a07f',
+  },
+  heroBlobRight: {
+    position: 'absolute',
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    right: -70,
+    top: -40,
+    backgroundColor: '#0f8d70',
+  },
+  backButton: {
+    width: 42,
+    height: 42,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.2)',
+  },
+  backIcon: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#fff',
+    marginTop: -2,
+  },
+  heroTitle: {
+    marginTop: 10,
+    color: '#fff',
+    fontSize: 22,
+    fontWeight: '800',
+  },
+  heroSubtitle: {
+    marginTop: 5,
+    fontSize: 13,
+    color: '#d4fff4',
+    fontWeight: '500',
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 14,
+    paddingTop: 14,
+  },
+  topControlRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  controlChip: {
+    width: 118,
+    borderRadius: 14,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: '#fffdf8',
+    borderWidth: 1,
+    borderColor: '#dfd6c3',
+    marginRight: 10,
+  },
+  controlChipLabel: {
+    fontSize: 11,
+    color: '#736b57',
+    marginBottom: 2,
+  },
+  controlChipValue: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#2e2a21',
+  },
+  modeToggle: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '#ede6d8',
+    borderRadius: 12,
+    padding: 4,
+    borderWidth: 1,
+    borderColor: '#d8cfbf',
+  },
+  modeButton: {
+    flex: 1,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 9,
+  },
+  modeButtonActive: {
+    backgroundColor: '#1c6f5a',
+  },
+  modeButtonText: {
+    fontSize: 13,
+    color: '#544b38',
+    fontWeight: '700',
+  },
+  modeButtonTextActive: {
+    color: '#fff',
+  },
+  quickMonthRow: {
+    marginBottom: 12,
+  },
+  monthChip: {
+    backgroundColor: '#fffdf8',
+    borderWidth: 1,
+    borderColor: '#ddd2be',
+    borderRadius: 999,
+    paddingVertical: 7,
+    paddingHorizontal: 12,
+    marginRight: 8,
+  },
+  monthChipActive: {
+    backgroundColor: '#e3912f',
+    borderColor: '#e3912f',
+  },
+  monthChipText: {
+    fontSize: 12,
+    color: '#635640',
+    fontWeight: '700',
+  },
+  monthChipTextActive: {
+    color: '#fff',
+  },
+  statRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  statTile: {
+    flex: 1,
+    borderRadius: 15,
+    paddingHorizontal: 12,
+    paddingVertical: 11,
+    borderWidth: 1,
+    marginRight: 10,
+  },
+  statMint: {
+    backgroundColor: '#edfdf7',
+    borderColor: '#bcefe0',
+  },
+  statSun: {
+    backgroundColor: '#fff6eb',
+    borderColor: '#ffd6a8',
+  },
+  statSea: {
+    backgroundColor: '#edf8ff',
+    borderColor: '#b8dcf5',
+  },
+  statLabel: {
+    fontSize: 11,
+    color: '#5d5a52',
+  },
+  statValue: {
+    marginTop: 6,
+    fontSize: 17,
+    color: '#1f2f2d',
+    fontWeight: '800',
+  },
+  statHint: {
+    marginTop: 4,
+    fontSize: 11,
+    color: '#6b6860',
+  },
+  signalCard: {
+    backgroundColor: '#fffdf8',
+    borderWidth: 1,
+    borderColor: '#e0d7c6',
+    borderRadius: 16,
+    padding: 12,
+    marginBottom: 12,
+  },
+  signalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  signalTitle: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#2c2a22',
+  },
+  signalLegend: {
+    flexDirection: 'row',
+  },
+  legend2024: {
+    marginRight: 10,
+    color: '#d78835',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+  legend2025: {
+    color: '#15896f',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+  signalMonthStrip: {
+    marginTop: 6,
+  },
+  signalMonthChip: {
+    backgroundColor: '#f5efe2',
+    borderRadius: 999,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    marginRight: 6,
+  },
+  signalMonthText: {
+    color: '#635742',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#2b2a22',
+    marginBottom: 8,
+  },
+  laneCard: {
+    backgroundColor: '#fffdf8',
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#e0d7c6',
+    padding: 12,
+    marginBottom: 10,
+  },
+  laneHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+    alignItems: 'center',
+  },
+  laneTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#28261f',
+  },
+  deltaTag: {
+    fontSize: 12,
+    fontWeight: '700',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 999,
+  },
+  deltaUp: {
+    color: '#0f8a6d',
+    backgroundColor: '#ddf8ef',
+  },
+  deltaDown: {
+    color: '#b6494c',
+    backgroundColor: '#ffe7e7',
+  },
+  laneBarsArea: {
+    marginBottom: 10,
+  },
+  laneBars: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  laneLabel: {
+    width: 34,
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#675a43',
+  },
+  track: {
+    flex: 1,
+    height: 10,
+    borderRadius: 999,
+    overflow: 'hidden',
+    backgroundColor: '#efe8da',
+    marginHorizontal: 8,
+  },
+  bar2024: {
+    height: '100%',
+    backgroundColor: '#f4a04a',
+    borderRadius: 999,
+  },
+  bar2025: {
+    height: '100%',
+    backgroundColor: '#179a79',
+    borderRadius: 999,
+  },
+  laneValue: {
+    width: 74,
+    textAlign: 'right',
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#464238',
+  },
+  gaugeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 2,
+  },
+  gaugeTextWrap: {
+    marginLeft: 10,
+    flex: 1,
+  },
+  gaugeTitle: {
+    fontSize: 11,
+    color: '#686152',
+    marginBottom: 3,
+  },
+  gaugeValue: {
+    fontSize: 17,
+    fontWeight: '800',
+    color: '#165a4a',
+  },
+  emptyWrap: {
+    paddingVertical: 24,
+    alignItems: 'center',
+  },
+  emptyText: {
+    fontSize: 13,
+    color: '#6d675a',
+  },
+});
+
+export default Report3ModernScreen;

package/src/screens/ReportListScreen.jsx

@@ -51,6 +51,11 @@ const NEW_REPORTS = [
     title: 'Gross Profit by Company & Division',
     desc: 'Modern interactive layout',
   },
+  {
+    id: '3N1',
+    title: 'Transportation Business Analysis',
+    desc: 'Modern command center layout',
+  },
 ];
 
 const ReportListScreen = ({ onSelect, onExit }) => {