@dhiraj0720/report1chart 3.0.5 → 3.0.7

package/src/screens/Report2ModernScreen.jsx

@@ -8,9 +8,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { getDivisions, getTable } from '../api/report2Fetcher';
+import { getBar, getDivisions, getLine, getTable } from '../api/report2Fetcher';
 import DivisionFilterModal from '../components/DivisionFilterModal';
 import MonthFilterModal from '../components/MonthFilterModal';
+import CompactAxisLineChart from '../components/CompactAxisLineChart';
+import CompactAxisBarLineChart from '../components/CompactAxisBarLineChart';
+import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { formatNumber } from '../utils/formatNumber';
 
 const toNumber = (value) => {
@@ -52,70 +55,17 @@ const MetricCell = ({ label, value, accent }) => (
   </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 [lineData, setLineData] = useState(null);
+  const [barData, setBarData] = 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);
@@ -123,15 +73,29 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
     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]);
+  const loadReport = useCallback(
+    async (divisionCode, preserveSelection = false) => {
+      const [reportTable, reportLine, reportBar] = await Promise.all([
+        getTable(api.table, divisionCode, token),
+        getLine(api.line, divisionCode, token),
+        getBar(api.bar, divisionCode, token),
+      ]);
+
+      setTable(reportTable);
+      setLineData(reportLine);
+      setBarData(reportBar);
+
+      const monthLabels = reportLine?.labels || [];
+      setSelectedMonths((prev) => {
+        if (!preserveSelection) {
+          return monthLabels;
+        }
+        const kept = prev.filter((month) => monthLabels.includes(month));
+        return kept.length ? kept : monthLabels;
+      });
+    },
+    [api.bar, api.line, api.table, token],
+  );
 
   useEffect(() => {
     setLoading(true);
@@ -143,43 +107,53 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
   useEffect(() => {
     if (!division) return;
     setLoading(true);
-    loadTable(division)
+    loadReport(division)
       .catch(() => {})
       .finally(() => setLoading(false));
-  }, [division, loadTable]);
+  }, [division, loadReport]);
 
   const onRefresh = useCallback(async () => {
     if (!division) return;
     setRefreshing(true);
     try {
-      await loadTable(division);
+      await loadReport(division, true);
     } finally {
       setRefreshing(false);
     }
-  }, [division, loadTable]);
+  }, [division, loadReport]);
 
   const divisionName = useMemo(() => {
     return divisions.find((item) => item.code === division)?.displayName || 'Division';
   }, [division, divisions]);
 
+  const monthOptions = useMemo(() => {
+    return lineData?.labels || [];
+  }, [lineData]);
+
   const baseRows = useMemo(() => {
-    return (table?.rows || []).filter((row) => row.monthLabel && row.monthLabel !== 'Total');
+    return table?.rows || [];
   }, [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]);
+    if (!selectedMonths.length) return [];
+    return baseRows.filter((row) => selectedMonths.includes(row.monthLabel));
+  }, [baseRows, selectedMonths]);
+
+  const filteredLine = useMemo(() => {
+    if (!lineData) return null;
+    return filterChartByMonths(lineData, selectedMonths);
+  }, [lineData, selectedMonths]);
+
+  const filteredBar = useMemo(() => {
+    if (!barData) return null;
+    return filterChartByMonths(barData, selectedMonths);
+  }, [barData, 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 total2024Teu = useMemo(() => rows.reduce((sum, row) => sum + toNumber(row.teu2024), 0), [rows]);
+  const total2025Teu = useMemo(() => rows.reduce((sum, row) => sum + toNumber(row.teu2025), 0), [rows]);
   const budgetRate = total2025Budget ? (total2025Profit / total2025Budget) * 100 : 0;
   const yoyPercent = toPercent(total2025Profit, total2024Profit);
 
@@ -187,15 +161,11 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
     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;
+      return toNumber(row.profitChangePercent) > toNumber(best.profitChangePercent) ? row : best;
     }, null);
   }, [rows]);
 
-  const quickMonths = useMemo(() => ['ALL', ...selectedMonths.slice(0, 5)], [selectedMonths]);
-
-  if (loading && !table) {
+  if (loading && (!table || !lineData || !barData)) {
     return (
       <View style={styles.loaderWrap}>
         <ActivityIndicator size="large" color="#144a8a" />
@@ -212,7 +182,7 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
           <Text style={styles.backIcon}>‹</Text>
         </TouchableOpacity>
         <Text style={styles.heroTitle}>Gross Profit Dashboard</Text>
-        <Text style={styles.heroSubtitle}>Modern view - interactive monthly insights</Text>
+        <Text style={styles.heroSubtitle}>Compact analytical view with filtered month data</Text>
       </View>
 
       <ScrollView
@@ -236,7 +206,7 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
           >
             <Text style={styles.filterChipLabel}>Months</Text>
             <Text style={styles.filterChipValue}>
-              {selectedMonths.length}/{baseRows.length || selectedMonths.length}
+              {selectedMonths.length}/{monthOptions.length || selectedMonths.length}
             </Text>
           </TouchableOpacity>
         </View>
@@ -271,42 +241,30 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
             <Text style={styles.insightTitle}>Best Month</Text>
             <Text style={styles.insightValue}>{bestMonth?.monthLabel || '-'}</Text>
           </View>
+          <View>
+            <Text style={styles.insightTitle}>TEU 2025</Text>
+            <Text style={styles.insightValue}>{formatNumber(total2025Teu)}</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} />
+        <CompactAxisLineChart
+          data={filteredLine}
+          title="Profit Amount Trend (Line)"
+          legend={[
+            { label: filteredLine?.series?.[0]?.name || '2024 Profit', color: '#F29F45' },
+            { label: filteredLine?.series?.[1]?.name || '2025 Profit', color: '#2E7DD1' },
+          ]}
+        />
+
+        <CompactAxisBarLineChart
+          data={filteredBar}
+          title="Profit vs Budget (Compact)"
+          legend={[
+            { label: filteredBar?.series?.[0]?.name || '2024 Profit', color: '#F29F45' },
+            { label: filteredBar?.series?.[1]?.name || '2025 Profit', color: '#2E7DD1' },
+            { label: filteredBar?.series?.[2]?.name || 'Budget', color: '#8AB6E8' },
+          ]}
+        />
 
         <Text style={styles.sectionTitle}>Monthly insight cards</Text>
         {rows.map((row) => (
@@ -320,37 +278,20 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
               <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,
-                      ),
-                    )}%`,
-                  },
-                ]}
-              />
+              <MetricCell label="Budget Delta" value={`${toNumber(row.budgetChangePercent).toFixed(1)}%`} accent />
+              <MetricCell label="2024 TEU" value={formatNumber(row.teu2024)} />
+              <MetricCell label="2025 TEU" value={formatNumber(row.teu2025)} />
             </View>
           </View>
         ))}
 
         {!rows.length ? (
           <View style={styles.emptyWrap}>
-            <Text style={styles.emptyText}>No months selected. Please update month filters.</Text>
+            <Text style={styles.emptyText}>No months selected. Please update month filter.</Text>
           </View>
         ) : null}
+
+        <View style={styles.footerSpacing} />
       </ScrollView>
 
       <DivisionFilterModal
@@ -363,7 +304,7 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
 
       <MonthFilterModal
         visible={monthsModal}
-        months={baseRows.map((row) => row.monthLabel)}
+        months={monthOptions}
         selected={selectedMonths}
         onApply={setSelectedMonths}
         onClose={() => setMonthsModal(false)}
@@ -546,136 +487,6 @@ const styles = StyleSheet.create({
   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',
@@ -724,16 +535,6 @@ const styles = StyleSheet.create({
   metricValueAccent: {
     color: '#0f5ba5',
   },
-  progressTrack: {
-    height: 8,
-    borderRadius: 999,
-    backgroundColor: '#ecf2fa',
-    overflow: 'hidden',
-  },
-  progressFill: {
-    height: '100%',
-    backgroundColor: '#3f8fe0',
-  },
   emptyWrap: {
     paddingVertical: 18,
     alignItems: 'center',
@@ -742,6 +543,9 @@ const styles = StyleSheet.create({
     color: '#63748a',
     fontSize: 13,
   },
+  footerSpacing: {
+    height: 10,
+  },
 });
 
 export default Report2ModernScreen;