@dhiraj0720/report1chart 3.0.6 → 3.0.7

package/src/screens/Report3ModernScreen.jsx

@@ -8,10 +8,16 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import Svg, { Circle, Line, Polyline } from 'react-native-svg';
-import { fetchReport3Table } from '../api/report3Fetcher';
+import Svg, { Circle } from 'react-native-svg';
+import {
+  fetchReport3Bar,
+  fetchReport3Line,
+  fetchReport3Table,
+} from '../api/report3Fetcher';
 import MonthFilterModal from '../components/MonthFilterModal';
-import { formatNumber } from '../utils/formatNumber';
+import CompactAxisBarLineChart from '../components/CompactAxisBarLineChart';
+import CompactAxisLineChart from '../components/CompactAxisLineChart';
+import { filterChartByMonths } from '../utils/filterChartByMonths';
 
 const toNumber = (value) => {
   const numeric = Number(value);
@@ -45,7 +51,7 @@ const StatTile = ({ label, value, hint, tone }) => (
 );
 
 const RingGauge = ({ progress }) => {
-  const size = 60;
+  const size = 58;
   const stroke = 8;
   const radius = (size - stroke) / 2;
   const circumference = 2 * Math.PI * radius;
@@ -78,124 +84,37 @@ const RingGauge = ({ progress }) => {
   );
 };
 
-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 [lineData, setLineData] = useState(null);
+  const [barData, setBarData] = 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]);
+  const loadData = useCallback(
+    async (preserveSelection = false) => {
+      const [tableRes, lineRes, barRes] = await Promise.all([
+        fetchReport3Table(api.table, token),
+        fetchReport3Line(api.line, token),
+        fetchReport3Bar(api.bar, token),
+      ]);
+
+      setTable(tableRes);
+      setLineData(lineRes);
+      setBarData(barRes);
+
+      const months = lineRes?.labels || [];
+      setSelectedMonths((prev) => {
+        if (!preserveSelection) return months;
+        const kept = prev.filter((month) => months.includes(month));
+        return kept.length ? kept : months;
+      });
+    },
+    [api.bar, api.line, api.table, token],
+  );
 
   useEffect(() => {
     setLoading(true);
@@ -207,28 +126,34 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
     try {
-      await loadData();
+      await loadData(true);
     } finally {
       setRefreshing(false);
     }
   }, [loadData]);
 
+  const monthOptions = useMemo(() => {
+    return lineData?.labels || [];
+  }, [lineData]);
+
   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]);
+    if (!selectedMonths.length) return [];
+    return baseRows.filter((row) => selectedMonths.includes(row.monthLabel));
+  }, [baseRows, selectedMonths]);
 
-  const quickMonths = useMemo(() => ['ALL', ...selectedMonths.slice(0, 6)], [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 load2024Total = useMemo(
     () => rows.reduce((sum, row) => sum + toNumber(row.loadCount2024), 0),
@@ -267,15 +192,15 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
 
   const maxLaneValue = useMemo(() => {
     if (!rows.length) return 1;
-    const values = rows.flatMap((row) => (
+    const values = rows.flatMap((row) =>
       mode === 'loads'
         ? [toNumber(row.loadCount2024), toNumber(row.loadCount2025)]
-        : [toNumber(row.revenueTl2024), toNumber(row.revenueTl2025), toNumber(row.budgetRevenueTl2025)]
-    ));
+        : [toNumber(row.revenueTl2024), toNumber(row.revenueTl2025), toNumber(row.budgetRevenueTl2025)],
+    );
     return Math.max(1, ...values);
   }, [rows, mode]);
 
-  if (loading && !table) {
+  if (loading && (!table || !lineData || !barData)) {
     return (
       <View style={styles.loaderWrap}>
         <ActivityIndicator size="large" color="#13866f" />
@@ -292,7 +217,7 @@ const Report3ModernScreen = ({ api, token, 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>
+        <Text style={styles.heroSubtitle}>Filtered API visuals with compact axis charts</Text>
       </View>
 
       <ScrollView
@@ -308,7 +233,7 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
           >
             <Text style={styles.controlChipLabel}>Months</Text>
             <Text style={styles.controlChipValue}>
-              {selectedMonths.length}/{baseRows.length || selectedMonths.length}
+              {selectedMonths.length}/{monthOptions.length || selectedMonths.length}
             </Text>
           </TouchableOpacity>
 
@@ -332,20 +257,6 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
           </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"
@@ -375,7 +286,24 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
           />
         </View>
 
-        <SignalChart rows={rows} mode={mode} />
+        <CompactAxisLineChart
+          data={filteredLine}
+          title="Load Amount Trend (Line)"
+          legend={[
+            { label: filteredLine?.series?.[0]?.name || '2024 Load', color: '#F29F45' },
+            { label: filteredLine?.series?.[1]?.name || '2025 Load', color: '#2E7DD1' },
+          ]}
+        />
+
+        <CompactAxisBarLineChart
+          data={filteredBar}
+          title="Revenue vs Budget (Compact)"
+          legend={[
+            { label: filteredBar?.series?.[0]?.name || '2024 Revenue', color: '#F29F45' },
+            { label: filteredBar?.series?.[1]?.name || '2025 Revenue', color: '#2E7DD1' },
+            { label: filteredBar?.series?.[2]?.name || '2025 Budget', color: '#8AB6E8' },
+          ]}
+        />
 
         <Text style={styles.sectionTitle}>Operational lanes</Text>
         {rows.map((row) => {
@@ -429,14 +357,16 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
 
         {!rows.length ? (
           <View style={styles.emptyWrap}>
-            <Text style={styles.emptyText}>No data for selected filters.</Text>
+            <Text style={styles.emptyText}>No data for selected month filter.</Text>
           </View>
         ) : null}
+
+        <View style={styles.footerSpacing} />
       </ScrollView>
 
       <MonthFilterModal
         visible={monthsModal}
-        months={baseRows.map((row) => row.monthLabel)}
+        months={monthOptions}
         selected={selectedMonths}
         onApply={setSelectedMonths}
         onClose={() => setMonthsModal(false)}
@@ -563,30 +493,6 @@ const styles = StyleSheet.create({
   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,
@@ -626,54 +532,6 @@ const styles = StyleSheet.create({
     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',
@@ -780,6 +638,9 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: '#6d675a',
   },
+  footerSpacing: {
+    height: 10,
+  },
 });
 
 export default Report3ModernScreen;

package/src/screens/ReportListScreen.jsx

@@ -46,6 +46,11 @@ const OLD_REPORTS = [
 ];
 
 const NEW_REPORTS = [
+  {
+    id: '1N1',
+    title: 'Performance Report',
+    desc: 'Modern performance studio',
+  },
   {
     id: '2N1',
     title: 'Gross Profit by Company & Division',