@dhiraj0720/report1chart 3.0.4 → 3.0.5

package/package.json

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

package/src/components/MonthFilterModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Modal,
   View,
@@ -12,6 +12,12 @@ import {
 const MonthFilterModal = ({ visible, months, selected, onApply, onClose }) => {
   const [local, setLocal] = useState(selected || []);
 
+  useEffect(() => {
+    if (visible) {
+      setLocal(Array.isArray(selected) ? selected : []);
+    }
+  }, [visible, selected]);
+
   const toggle = (m) => {
     if (local.includes(m)) {
       setLocal(local.filter(x => x !== m));
@@ -20,7 +26,7 @@ const MonthFilterModal = ({ visible, months, selected, onApply, onClose }) => {
     }
   };
 
-  const selectAll = () => setLocal(months);
+  const selectAll = () => setLocal([...(months || [])]);
   const clearAll = () => setLocal([]);
 
   return (
@@ -160,4 +166,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default MonthFilterModal;
+export default MonthFilterModal;

package/src/index.jsx

@@ -4,6 +4,7 @@ import SafeScreen from './components/SafeScreen';
 import ReportListScreen from './screens/ReportListScreen';
 import Report1Screen from './screens/Report1Screen';
 import Report2Screen from './screens/Report2Screen';
+import Report2ModernScreen from './screens/Report2ModernScreen';
 import Report3Screen from './screens/Report3Screen';
 import Report1AScreen from './screens/Report1AScreen';
 import Report2AScreen from './screens/Report2AScreen';
@@ -85,6 +86,18 @@ if (active === '2A') {
   );
 }
 
+if (active === '2N1') {
+  return (
+    <SafeScreen>
+      <Report2ModernScreen
+        api={config.report2}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    </SafeScreen>
+  );
+}
+
 
   // 👉 REPORT 2
   if (active === 2) {

package/src/screens/Report2ModernScreen.jsx

@@ -0,0 +1,747 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { getDivisions, getTable } from '../api/report2Fetcher';
+import DivisionFilterModal from '../components/DivisionFilterModal';
+import MonthFilterModal from '../components/MonthFilterModal';
+import { formatNumber } from '../utils/formatNumber';
+
+const toNumber = (value) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+};
+
+const toPercent = (current, previous) => {
+  if (!previous) return 0;
+  return ((current - previous) / Math.abs(previous)) * 100;
+};
+
+const TrendBadge = ({ value }) => {
+  const positive = value >= 0;
+  return (
+    <View style={[styles.trendBadge, positive ? styles.trendUp : styles.trendDown]}>
+      <Text style={[styles.trendText, positive ? styles.trendTextUp : styles.trendTextDown]}>
+        {positive ? '+' : '-'} {Math.abs(value).toFixed(1)}%
+      </Text>
+    </View>
+  );
+};
+
+const KpiCard = ({ label, value, hint, tone }) => {
+  const toneStyle = tone === 'warm' ? styles.kpiWarm : tone === 'mint' ? styles.kpiMint : styles.kpiCool;
+  return (
+    <View style={[styles.kpiCard, toneStyle]}>
+      <Text style={styles.kpiLabel}>{label}</Text>
+      <Text style={styles.kpiValue}>{value}</Text>
+      <Text style={styles.kpiHint}>{hint}</Text>
+    </View>
+  );
+};
+
+const MetricCell = ({ label, value, accent }) => (
+  <View style={styles.metricCell}>
+    <Text style={styles.metricLabel}>{label}</Text>
+    <Text style={[styles.metricValue, accent && styles.metricValueAccent]}>{value}</Text>
+  </View>
+);
+
+const ModernBars = ({ rows, metric }) => {
+  const key2024 = metric === 'profit' ? 'profitUsd2024' : 'teu2024';
+  const key2025 = metric === 'profit' ? 'profitUsd2025' : 'teu2025';
+  const maxValue = Math.max(
+    1,
+    ...rows.map((row) => Math.max(toNumber(row[key2024]), toNumber(row[key2025]))),
+  );
+
+  return (
+    <View style={styles.chartCard}>
+      <View style={styles.chartHeader}>
+        <Text style={styles.chartTitle}>
+          {metric === 'profit' ? 'Profit Trend by Month' : 'TEU Trend by Month'}
+        </Text>
+        <View style={styles.legendRow}>
+          <Text style={styles.legendTextOrange}>2024</Text>
+          <Text style={styles.legendTextBlue}>2025</Text>
+        </View>
+      </View>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <View style={styles.chartColumns}>
+          {rows.map((row) => {
+            const value2024 = toNumber(row[key2024]);
+            const value2025 = toNumber(row[key2025]);
+            const pct = toPercent(value2025, value2024);
+            const bar2024Height = Math.max(6, (value2024 / maxValue) * 122);
+            const bar2025Height = Math.max(6, (value2025 / maxValue) * 122);
+
+            return (
+              <View key={row.monthLabel} style={styles.chartGroup}>
+                <View style={styles.barPair}>
+                  <View style={styles.barTrack}>
+                    <View style={[styles.barFill2024, { height: bar2024Height }]} />
+                  </View>
+                  <View style={styles.barTrack}>
+                    <View style={[styles.barFill2025, { height: bar2025Height }]} />
+                  </View>
+                </View>
+                <Text style={styles.chartMonthText}>{row.monthLabel.slice(0, 3)}</Text>
+                <Text style={[styles.chartDelta, pct >= 0 ? styles.deltaUp : styles.deltaDown]}>
+                  {pct >= 0 ? '+' : ''}
+                  {pct.toFixed(0)}%
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const Report2ModernScreen = ({ api, token, onBack }) => {
+  const [divisionModal, setDivisionModal] = useState(false);
+  const [monthsModal, setMonthsModal] = useState(false);
+  const [divisions, setDivisions] = useState([]);
+  const [division, setDivision] = useState(null);
+  const [table, setTable] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [selectedMonths, setSelectedMonths] = useState([]);
+  const [focusMonth, setFocusMonth] = useState('ALL');
+  const [metric, setMetric] = useState('profit');
+
+  const loadDivisions = useCallback(async () => {
+    const data = await getDivisions(api.divisions, token);
+    setDivisions(data);
+    setDivision((prev) => prev || data[0]?.code || prev);
+  }, [api.divisions, token]);
+
+  const loadTable = useCallback(async (divisionCode) => {
+    const reportTable = await getTable(api.table, divisionCode, token);
+    setTable(reportTable);
+    const monthLabels = (reportTable?.rows || [])
+      .filter((row) => row.monthLabel && row.monthLabel !== 'Total')
+      .map((row) => row.monthLabel);
+    setSelectedMonths(monthLabels);
+    setFocusMonth('ALL');
+  }, [api.table, token]);
+
+  useEffect(() => {
+    setLoading(true);
+    loadDivisions()
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [loadDivisions]);
+
+  useEffect(() => {
+    if (!division) return;
+    setLoading(true);
+    loadTable(division)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [division, loadTable]);
+
+  const onRefresh = useCallback(async () => {
+    if (!division) return;
+    setRefreshing(true);
+    try {
+      await loadTable(division);
+    } finally {
+      setRefreshing(false);
+    }
+  }, [division, loadTable]);
+
+  const divisionName = useMemo(() => {
+    return divisions.find((item) => item.code === division)?.displayName || 'Division';
+  }, [division, divisions]);
+
+  const baseRows = useMemo(() => {
+    return (table?.rows || []).filter((row) => row.monthLabel && row.monthLabel !== 'Total');
+  }, [table]);
+
+  const rows = useMemo(() => {
+    let filtered = baseRows;
+    if (selectedMonths.length > 0) {
+      filtered = filtered.filter((row) => selectedMonths.includes(row.monthLabel));
+    }
+    if (focusMonth !== 'ALL') {
+      filtered = filtered.filter((row) => row.monthLabel === focusMonth);
+    }
+    return filtered;
+  }, [baseRows, focusMonth, selectedMonths]);
+
+  const total2024Profit = useMemo(() => rows.reduce((sum, row) => sum + toNumber(row.profitUsd2024), 0), [rows]);
+  const total2025Profit = useMemo(() => rows.reduce((sum, row) => sum + toNumber(row.profitUsd2025), 0), [rows]);
+  const total2025Budget = useMemo(() => rows.reduce((sum, row) => sum + toNumber(row.budgetProfitUsd2025), 0), [rows]);
+  const budgetRate = total2025Budget ? (total2025Profit / total2025Budget) * 100 : 0;
+  const yoyPercent = toPercent(total2025Profit, total2024Profit);
+
+  const bestMonth = useMemo(() => {
+    if (!rows.length) return null;
+    return rows.reduce((best, row) => {
+      if (!best) return row;
+      const bestPct = toNumber(best.profitChangePercent);
+      const currentPct = toNumber(row.profitChangePercent);
+      return currentPct > bestPct ? row : best;
+    }, null);
+  }, [rows]);
+
+  const quickMonths = useMemo(() => ['ALL', ...selectedMonths.slice(0, 5)], [selectedMonths]);
+
+  if (loading && !table) {
+    return (
+      <View style={styles.loaderWrap}>
+        <ActivityIndicator size="large" color="#144a8a" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.screen}>
+      <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}>Modern view - interactive monthly insights</Text>
+      </View>
+
+      <ScrollView
+        style={styles.content}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.filterRow}>
+          <TouchableOpacity
+            style={[styles.filterChip, styles.filterChipSpacing]}
+            onPress={() => setDivisionModal(true)}
+            activeOpacity={0.9}
+          >
+            <Text style={styles.filterChipLabel}>Division</Text>
+            <Text style={styles.filterChipValue}>{divisionName}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.filterChip}
+            onPress={() => setMonthsModal(true)}
+            activeOpacity={0.9}
+          >
+            <Text style={styles.filterChipLabel}>Months</Text>
+            <Text style={styles.filterChipValue}>
+              {selectedMonths.length}/{baseRows.length || selectedMonths.length}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.kpiScroll}>
+          <KpiCard
+            label="2024 Profit"
+            value={formatNumber(total2024Profit)}
+            hint="Baseline"
+            tone="warm"
+          />
+          <KpiCard
+            label="2025 Profit"
+            value={formatNumber(total2025Profit)}
+            hint="Current"
+            tone="cool"
+          />
+          <KpiCard
+            label="Budget Coverage"
+            value={`${budgetRate.toFixed(1)}%`}
+            hint="2025 vs Budget"
+            tone="mint"
+          />
+        </ScrollView>
+
+        <View style={styles.insightStrip}>
+          <View>
+            <Text style={styles.insightTitle}>YoY Profit Change</Text>
+            <TrendBadge value={yoyPercent} />
+          </View>
+          <View>
+            <Text style={styles.insightTitle}>Best Month</Text>
+            <Text style={styles.insightValue}>{bestMonth?.monthLabel || '-'}</Text>
+          </View>
+        </View>
+
+        <View style={styles.metricSwitch}>
+          <TouchableOpacity
+            style={[styles.metricButton, metric === 'profit' && styles.metricButtonActive]}
+            onPress={() => setMetric('profit')}
+          >
+            <Text style={[styles.metricButtonText, metric === 'profit' && styles.metricButtonTextActive]}>
+              Profit
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.metricButton, metric === 'teu' && styles.metricButtonActive]}
+            onPress={() => setMetric('teu')}
+          >
+            <Text style={[styles.metricButtonText, metric === 'teu' && styles.metricButtonTextActive]}>
+              TEU
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.monthQuickScroll}>
+          {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>
+
+        <ModernBars rows={rows} metric={metric} />
+
+        <Text style={styles.sectionTitle}>Monthly insight cards</Text>
+        {rows.map((row) => (
+          <View key={row.monthLabel} style={styles.monthCard}>
+            <View style={styles.monthCardHeader}>
+              <Text style={styles.monthCardTitle}>{row.monthLabel}</Text>
+              <TrendBadge value={toNumber(row.profitChangePercent)} />
+            </View>
+
+            <View style={styles.metricGrid}>
+              <MetricCell label="2024 Profit" value={formatNumber(row.profitUsd2024)} />
+              <MetricCell label="2025 Profit" value={formatNumber(row.profitUsd2025)} />
+              <MetricCell label="2025 Budget" value={formatNumber(row.budgetProfitUsd2025)} />
+              <MetricCell
+                label="Budget Delta"
+                value={`${toNumber(row.budgetChangePercent).toFixed(1)}%`}
+                accent
+              />
+            </View>
+
+            <View style={styles.progressTrack}>
+              <View
+                style={[
+                  styles.progressFill,
+                  {
+                    width: `${Math.min(
+                      100,
+                      Math.max(
+                        0,
+                        (toNumber(row.profitUsd2025) / Math.max(1, toNumber(row.budgetProfitUsd2025))) * 100,
+                      ),
+                    )}%`,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        ))}
+
+        {!rows.length ? (
+          <View style={styles.emptyWrap}>
+            <Text style={styles.emptyText}>No months selected. Please update month filters.</Text>
+          </View>
+        ) : null}
+      </ScrollView>
+
+      <DivisionFilterModal
+        visible={divisionModal}
+        divisions={divisions}
+        selected={division}
+        onSelect={setDivision}
+        onClose={() => setDivisionModal(false)}
+      />
+
+      <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: '#f1f5fb',
+  },
+  loaderWrap: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f1f5fb',
+  },
+  hero: {
+    backgroundColor: '#0d3d77',
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 16,
+    overflow: 'hidden',
+  },
+  heroDotLarge: {
+    position: 'absolute',
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    right: -64,
+    top: -90,
+    backgroundColor: '#1f65ae',
+  },
+  heroDotSmall: {
+    position: 'absolute',
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    left: -40,
+    bottom: -70,
+    backgroundColor: '#2d7ac8',
+  },
+  backButton: {
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: 'rgba(255,255,255,0.18)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backIcon: {
+    fontSize: 28,
+    color: '#fff',
+    fontWeight: '700',
+    marginTop: -2,
+  },
+  heroTitle: {
+    marginTop: 10,
+    fontSize: 22,
+    fontWeight: '800',
+    color: '#fff',
+  },
+  heroSubtitle: {
+    marginTop: 6,
+    fontSize: 13,
+    color: '#cfe5ff',
+    fontWeight: '500',
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 14,
+    paddingTop: 14,
+  },
+  filterRow: {
+    flexDirection: 'row',
+    marginBottom: 12,
+  },
+  filterChip: {
+    flex: 1,
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderWidth: 1,
+    borderColor: '#d2deee',
+  },
+  filterChipSpacing: {
+    marginRight: 10,
+  },
+  filterChipLabel: {
+    fontSize: 11,
+    color: '#5e6878',
+    marginBottom: 3,
+  },
+  filterChipValue: {
+    fontSize: 14,
+    color: '#14253d',
+    fontWeight: '700',
+  },
+  kpiScroll: {
+    marginBottom: 12,
+  },
+  kpiCard: {
+    width: 165,
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    marginRight: 10,
+    borderWidth: 1,
+  },
+  kpiCool: {
+    backgroundColor: '#eaf2ff',
+    borderColor: '#94baff',
+  },
+  kpiWarm: {
+    backgroundColor: '#fff1e7',
+    borderColor: '#ffc89f',
+  },
+  kpiMint: {
+    backgroundColor: '#ebfff8',
+    borderColor: '#9fe8ca',
+  },
+  kpiLabel: {
+    fontSize: 12,
+    color: '#30425a',
+    marginBottom: 8,
+  },
+  kpiValue: {
+    fontSize: 18,
+    fontWeight: '800',
+    color: '#11253f',
+  },
+  kpiHint: {
+    marginTop: 6,
+    fontSize: 11,
+    color: '#57667b',
+  },
+  insightStrip: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#d2deee',
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+  },
+  insightTitle: {
+    fontSize: 11,
+    color: '#65748a',
+    marginBottom: 6,
+  },
+  insightValue: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#152842',
+  },
+  trendBadge: {
+    borderRadius: 999,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    alignSelf: 'flex-start',
+  },
+  trendUp: {
+    backgroundColor: '#e4f8ef',
+  },
+  trendDown: {
+    backgroundColor: '#ffe9ea',
+  },
+  trendText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  trendTextUp: {
+    color: '#1f8b58',
+  },
+  trendTextDown: {
+    color: '#c0393f',
+  },
+  metricSwitch: {
+    flexDirection: 'row',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#d2deee',
+    backgroundColor: '#fff',
+    padding: 4,
+    marginBottom: 10,
+  },
+  metricButton: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  metricButtonActive: {
+    backgroundColor: '#174b8f',
+  },
+  metricButtonText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#3a4a62',
+  },
+  metricButtonTextActive: {
+    color: '#fff',
+  },
+  monthQuickScroll: {
+    marginBottom: 10,
+  },
+  monthChip: {
+    backgroundColor: '#fff',
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#d5dfed',
+    paddingVertical: 7,
+    paddingHorizontal: 12,
+    marginRight: 8,
+  },
+  monthChipActive: {
+    backgroundColor: '#133f79',
+    borderColor: '#133f79',
+  },
+  monthChipText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#3f4f64',
+  },
+  monthChipTextActive: {
+    color: '#fff',
+  },
+  chartCard: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#d2deee',
+    padding: 12,
+    marginBottom: 14,
+  },
+  chartHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  chartTitle: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#142a45',
+  },
+  legendRow: {
+    flexDirection: 'row',
+  },
+  legendTextOrange: {
+    marginRight: 12,
+    color: '#e57d2f',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  legendTextBlue: {
+    color: '#2e74c4',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  chartColumns: {
+    flexDirection: 'row',
+    paddingTop: 8,
+  },
+  chartGroup: {
+    alignItems: 'center',
+    width: 46,
+    marginRight: 8,
+  },
+  barPair: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: 7,
+  },
+  barTrack: {
+    width: 12,
+    height: 126,
+    borderRadius: 10,
+    justifyContent: 'flex-end',
+    backgroundColor: '#eef3fa',
+    marginHorizontal: 2,
+    overflow: 'hidden',
+  },
+  barFill2024: {
+    backgroundColor: '#f19a54',
+    borderRadius: 10,
+  },
+  barFill2025: {
+    backgroundColor: '#2f7cca',
+    borderRadius: 10,
+  },
+  chartMonthText: {
+    fontSize: 10,
+    color: '#4f6078',
+    fontWeight: '700',
+  },
+  chartDelta: {
+    marginTop: 3,
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  deltaUp: {
+    color: '#229060',
+  },
+  deltaDown: {
+    color: '#cb4346',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#152a43',
+    marginBottom: 8,
+  },
+  monthCard: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#d2deee',
+    padding: 12,
+    marginBottom: 10,
+  },
+  monthCardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  monthCardTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#132844',
+  },
+  metricGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: -4,
+  },
+  metricCell: {
+    width: '50%',
+    paddingHorizontal: 4,
+    marginBottom: 10,
+  },
+  metricLabel: {
+    fontSize: 11,
+    color: '#62738a',
+    marginBottom: 3,
+  },
+  metricValue: {
+    fontSize: 13,
+    color: '#12263f',
+    fontWeight: '700',
+  },
+  metricValueAccent: {
+    color: '#0f5ba5',
+  },
+  progressTrack: {
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: '#ecf2fa',
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#3f8fe0',
+  },
+  emptyWrap: {
+    paddingVertical: 18,
+    alignItems: 'center',
+  },
+  emptyText: {
+    color: '#63748a',
+    fontSize: 13,
+  },
+});
+
+export default Report2ModernScreen;

package/src/screens/ReportListScreen.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   View,
   Text,
@@ -7,53 +7,61 @@ import {
   ScrollView,
 } from 'react-native';
 
-const REPORTS = [
-
+const OLD_REPORTS = [
   {
     id: '4A',
     title: 'Performans Raporu (USD) - NEW',
-    desc: 'New report formate',
+    desc: 'Current package flow',
   },
-  
   {
     id: '2A',
     title: 'Gross Profit by Company & Division',
-    desc: 'Option 1',
+    desc: 'Current option 1',
   },
   {
     id: 2,
     title: 'Gross Profit by Company & Division',
-    desc: 'Option 2',
+    desc: 'Current option 2',
   },
- 
   {
     id: '3A',
     title: 'Transportation Business Analysis',
-    desc: 'Option 1',
+    desc: 'Current option 1',
   },
   {
     id: 3,
     title: 'Transportation Business Analysis',
-    desc: 'Option 2',
+    desc: 'Current option 2',
   },
-
   {
     id: '1A',
     title: 'Performans Raporu (USD) - OLD',
-    desc: 'Option 1',
+    desc: 'Current option 1',
   },
   {
     id: 1,
     title: 'Performans Raporu (USD) - OLD',
-    desc: 'Option 2',
+    desc: 'Current option 2',
+  },
+];
+
+const NEW_REPORTS = [
+  {
+    id: '2N1',
+    title: 'Gross Profit by Company & Division',
+    desc: 'Modern interactive layout',
   },
-  
 ];
 
 const ReportListScreen = ({ onSelect, onExit }) => {
+  const [activeMode, setActiveMode] = useState('old');
+
+  const reports = useMemo(() => {
+    return activeMode === 'old' ? OLD_REPORTS : NEW_REPORTS;
+  }, [activeMode]);
+
   return (
     <View style={styles.container}>
-      {/* HEADER */}
       <View style={styles.header}>
         <TouchableOpacity
           onPress={onExit}
@@ -64,19 +72,52 @@ const ReportListScreen = ({ onSelect, onExit }) => {
         </TouchableOpacity>
 
         <Text style={styles.title}>Analytics Reports</Text>
+        <View style={styles.headerSpacer} />
+      </View>
+
+      <Text style={styles.subtitle}>
+        Select report mode before opening report tabs
+      </Text>
 
-        {/* Spacer */}
-        <View style={{ width: 28 }} />
+      <View style={styles.modeRow}>
+        <TouchableOpacity
+          style={[styles.modeBtn, activeMode === 'old' && styles.modeBtnActive]}
+          onPress={() => setActiveMode('old')}
+        >
+          <Text
+            style={[
+              styles.modeBtnText,
+              activeMode === 'old' && styles.modeBtnTextActive,
+            ]}
+          >
+            Option 1 - Old
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.modeBtn, activeMode === 'new' && styles.modeBtnActive]}
+          onPress={() => setActiveMode('new')}
+        >
+          <Text
+            style={[
+              styles.modeBtnText,
+              activeMode === 'new' && styles.modeBtnTextActive,
+            ]}
+          >
+            Option 2 - New
+          </Text>
+        </TouchableOpacity>
       </View>
 
-      {/* REPORT CARDS */}
       <ScrollView showsVerticalScrollIndicator={false}>
-        {REPORTS.map(report => (
+        {reports.map((report) => (
           <TouchableOpacity
             key={report.id}
-            style={styles.card}
+            style={[
+              styles.card,
+              activeMode === 'new' && styles.cardNewTheme,
+            ]}
             onPress={() => onSelect(report.id)}
-            activeOpacity={0.85}
+            activeOpacity={0.88}
           >
             <Text style={styles.cardTitle}>{report.title}</Text>
             <Text style={styles.cardDesc}>{report.desc}</Text>
@@ -92,28 +133,23 @@ export default ReportListScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f4f6f8',
+    backgroundColor: '#edf1f7',
     padding: 16,
   },
-
-  /* HEADER */
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 20,
+    marginBottom: 6,
   },
-
   backBtn: {
     width: 28,
     alignItems: 'flex-start',
   },
-
   back: {
     fontSize: 28,
     fontWeight: '700',
     color: '#111',
   },
-
   title: {
     flex: 1,
     textAlign: 'center',
@@ -121,34 +157,65 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     color: '#111',
   },
-
-  /* CARDS */
+  headerSpacer: {
+    width: 28,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: '#5b6570',
+    marginBottom: 14,
+    textAlign: 'center',
+  },
+  modeRow: {
+    flexDirection: 'row',
+    backgroundColor: '#dce3ed',
+    borderRadius: 12,
+    padding: 4,
+    marginBottom: 16,
+  },
+  modeBtn: {
+    flex: 1,
+    borderRadius: 10,
+    paddingVertical: 10,
+    alignItems: 'center',
+  },
+  modeBtnActive: {
+    backgroundColor: '#0f3d75',
+  },
+  modeBtnText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#2f3a46',
+  },
+  modeBtnTextActive: {
+    color: '#fff',
+  },
   card: {
     backgroundColor: '#fff',
     padding: 18,
     borderRadius: 14,
     marginBottom: 14,
-
     borderWidth: 1,
-    borderColor: '#e0e0e0',
-
-    shadowColor: '#000',
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: 3 },
+    borderColor: '#d9e0ea',
+    shadowColor: '#0b1f3a',
+    shadowOpacity: 0.08,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
     elevation: 2,
   },
-
+  cardNewTheme: {
+    borderColor: '#8bb4ff',
+    backgroundColor: '#f4f8ff',
+  },
   cardTitle: {
     fontSize: 16,
     fontWeight: '700',
     marginBottom: 6,
     color: '#111',
   },
-
   cardDesc: {
     fontSize: 13,
-    color: '#555',
+    color: '#4e5968',
     lineHeight: 18,
   },
 });