@dhiraj0720/report1chart 3.0.8 → 3.0.9

package/package.json

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

package/src/components/ModernDataTable.jsx

@@ -17,7 +17,46 @@ const normalizeCell = (value) => {
   return { text: String(value), color: '#2b3850', weight: '600' };
 };
 
-const ModernDataTable = ({ title, columns = [], rows = [], compact = false }) => {
+const renderCell = (col, row, rowIndex, compact) => {
+  const raw = col.render ? col.render(row) : row[col.key];
+  const cell = normalizeCell(raw);
+
+  return (
+    <View
+      key={`cell-${rowIndex}-${col.key}`}
+      style={[
+        styles.cell,
+        { width: col.width || (compact ? 110 : 126) },
+        col.align === 'right' && styles.alignRight,
+      ]}
+    >
+      <Text
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={[
+          styles.cellText,
+          { color: cell.color, fontWeight: cell.weight },
+          col.align === 'right' && styles.textRight,
+          col.align === 'center' && styles.textCenter,
+        ]}
+      >
+        {cell.text}
+      </Text>
+    </View>
+  );
+};
+
+const ModernDataTable = ({
+  title,
+  columns = [],
+  rows = [],
+  compact = false,
+  freezeFirstColumn = false,
+}) => {
+  const firstColumn = columns[0];
+  const scrollColumns = columns.slice(1);
+  const shouldFreeze = freezeFirstColumn && columns.length > 1;
+
   return (
     <View style={styles.card}>
       <Text style={styles.title}>{title}</Text>
@@ -26,6 +65,84 @@ const ModernDataTable = ({ title, columns = [], rows = [], compact = false }) =>
         <View style={styles.emptyWrap}>
           <Text style={styles.emptyText}>No table data for selected filters.</Text>
         </View>
+      ) : shouldFreeze ? (
+        <View style={styles.freezeWrap}>
+          <View style={styles.frozenSide}>
+            <View style={styles.headerRow}>
+              <View
+                style={[
+                  styles.cell,
+                  styles.headerCell,
+                  styles.frozenCell,
+                  { width: firstColumn.width || (compact ? 110 : 126) },
+                  firstColumn.align === 'right' && styles.alignRight,
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.headerText,
+                    firstColumn.align === 'right' && styles.textRight,
+                    firstColumn.align === 'center' && styles.textCenter,
+                  ]}
+                >
+                  {firstColumn.label}
+                </Text>
+              </View>
+            </View>
+
+            {rows.map((row, rowIndex) => (
+              <View
+                key={`frozen-row-${rowIndex}`}
+                style={[
+                  styles.dataRow,
+                  rowIndex % 2 === 0 ? styles.rowEven : styles.rowOdd,
+                ]}
+              >
+                {renderCell(firstColumn, row, rowIndex, compact)}
+              </View>
+            ))}
+          </View>
+
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <View>
+              <View style={styles.headerRow}>
+                {scrollColumns.map((col) => (
+                  <View
+                    key={`header-${col.key}`}
+                    style={[
+                      styles.cell,
+                      styles.headerCell,
+                      { width: col.width || (compact ? 110 : 126) },
+                      col.align === 'right' && styles.alignRight,
+                    ]}
+                  >
+                    <Text
+                      style={[
+                        styles.headerText,
+                        col.align === 'right' && styles.textRight,
+                        col.align === 'center' && styles.textCenter,
+                      ]}
+                    >
+                      {col.label}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+
+              {rows.map((row, rowIndex) => (
+                <View
+                  key={`row-${rowIndex}`}
+                  style={[
+                    styles.dataRow,
+                    rowIndex % 2 === 0 ? styles.rowEven : styles.rowOdd,
+                  ]}
+                >
+                  {scrollColumns.map((col) => renderCell(col, row, rowIndex, compact))}
+                </View>
+              ))}
+            </View>
+          </ScrollView>
+        </View>
       ) : (
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <View>
@@ -61,34 +178,7 @@ const ModernDataTable = ({ title, columns = [], rows = [], compact = false }) =>
                   rowIndex % 2 === 0 ? styles.rowEven : styles.rowOdd,
                 ]}
               >
-                {columns.map((col) => {
-                  const raw = col.render ? col.render(row) : row[col.key];
-                  const cell = normalizeCell(raw);
-
-                  return (
-                    <View
-                      key={`cell-${rowIndex}-${col.key}`}
-                      style={[
-                        styles.cell,
-                        { width: col.width || (compact ? 110 : 126) },
-                        col.align === 'right' && styles.alignRight,
-                      ]}
-                    >
-                      <Text
-                        numberOfLines={1}
-                        ellipsizeMode="tail"
-                        style={[
-                          styles.cellText,
-                          { color: cell.color, fontWeight: cell.weight },
-                          col.align === 'right' && styles.textRight,
-                          col.align === 'center' && styles.textCenter,
-                        ]}
-                      >
-                        {cell.text}
-                      </Text>
-                    </View>
-                  );
-                })}
+                {columns.map((col) => renderCell(col, row, rowIndex, compact))}
               </View>
             ))}
           </View>
@@ -113,6 +203,15 @@ const styles = StyleSheet.create({
     color: '#1c2f47',
     marginBottom: 8,
   },
+  freezeWrap: {
+    flexDirection: 'row',
+  },
+  frozenSide: {
+    borderRightWidth: 1,
+    borderRightColor: '#c7d7ef',
+    backgroundColor: '#fff',
+    zIndex: 2,
+  },
   headerRow: {
     flexDirection: 'row',
     backgroundColor: '#1f385a',
@@ -145,6 +244,9 @@ const styles = StyleSheet.create({
     borderRightColor: '#e2ebf7',
     justifyContent: 'center',
   },
+  frozenCell: {
+    borderRightColor: '#c7d7ef',
+  },
   cellText: {
     fontSize: 11.5,
     color: '#2b3850',

package/src/screens/Report1ModernScreen.jsx

@@ -103,10 +103,6 @@ const Report1ModernScreen = ({ api, token, onBack }) => {
       return;
     }
 
-    if (!force && loadedByTab[tabKey]) {
-      return;
-    }
-
     setLoading(true);
     setErrorByTab((prev) => ({ ...prev, [tabKey]: null }));
 
@@ -126,7 +122,7 @@ const Report1ModernScreen = ({ api, token, onBack }) => {
     } finally {
       setLoading(false);
     }
-  }, [endpointByTab, loadedByTab, token]);
+  }, [endpointByTab, token]);
 
   useEffect(() => {
     loadTabData(activeTab);
@@ -331,6 +327,7 @@ const Report1ModernScreen = ({ api, token, onBack }) => {
 
             <ModernDataTable
               title="Performance Table"
+              freezeFirstColumn
               columns={[
                 { key: 'name', label: 'Activity', width: 150 },
                 { key: 'value2024', label: '2024', width: 120, align: 'right', render: (row) => formatNumber(row.value2024) },

package/src/screens/Report2ModernScreen.jsx

@@ -27,6 +27,14 @@ const toPercent = (current, previous) => {
   return ((current - previous) / Math.abs(previous)) * 100;
 };
 
+const toMonthKey = (value) => {
+  return String(value ?? '')
+    .trim()
+    .toLocaleUpperCase('tr-TR')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+};
+
 const TrendBadge = ({ value }) => {
   const positive = value >= 0;
   return (
@@ -101,7 +109,8 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
         if (!preserveSelection) {
           return monthLabels;
         }
-        const kept = prev.filter((month) => monthLabels.includes(month));
+        const monthKeys = new Set(monthLabels.map(toMonthKey));
+        const kept = prev.filter((month) => monthKeys.has(toMonthKey(month)));
         return kept.length ? kept : monthLabels;
       });
     },
@@ -147,7 +156,8 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
 
   const rows = useMemo(() => {
     if (!selectedMonths.length) return [];
-    return baseRows.filter((row) => selectedMonths.includes(row.monthLabel));
+    const selectedKeys = new Set(selectedMonths.map(toMonthKey));
+    return baseRows.filter((row) => selectedKeys.has(toMonthKey(row.monthLabel)));
   }, [baseRows, selectedMonths]);
 
   const filteredLine = useMemo(() => {
@@ -298,6 +308,7 @@ const Report2ModernScreen = ({ api, token, onBack }) => {
 
         <ModernDataTable
           title="Gross Profit Table"
+          freezeFirstColumn
           columns={[
             { key: 'monthLabel', label: 'Month', width: 110 },
             { key: 'teu2024', label: '2024 TEU', width: 108, align: 'right', render: (row) => formatNumber(row.teu2024) },

package/src/screens/Report3ModernScreen.jsx

@@ -35,6 +35,14 @@ const percentOf = (part, total) => {
   return (part / total) * 100;
 };
 
+const toMonthKey = (value) => {
+  return String(value ?? '')
+    .trim()
+    .toLocaleUpperCase('tr-TR')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+};
+
 const compactNumber = (value) => {
   const num = toNumber(value);
   if (Math.abs(num) >= 1000000000) return `${(num / 1000000000).toFixed(2)}B`;
@@ -120,7 +128,8 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
       const months = lineRes?.labels || [];
       setSelectedMonths((prev) => {
         if (!preserveSelection) return months;
-        const kept = prev.filter((month) => months.includes(month));
+        const monthKeys = new Set(months.map(toMonthKey));
+        const kept = prev.filter((month) => monthKeys.has(toMonthKey(month)));
         return kept.length ? kept : months;
       });
     },
@@ -153,7 +162,8 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
 
   const rows = useMemo(() => {
     if (!selectedMonths.length) return [];
-    return baseRows.filter((row) => selectedMonths.includes(row.monthLabel));
+    const selectedKeys = new Set(selectedMonths.map(toMonthKey));
+    return baseRows.filter((row) => selectedKeys.has(toMonthKey(row.monthLabel)));
   }, [baseRows, selectedMonths]);
 
   const filteredLine = useMemo(() => {
@@ -368,6 +378,7 @@ const Report3ModernScreen = ({ api, token, onBack }) => {
 
         <ModernDataTable
           title="Transportation Table"
+          freezeFirstColumn
           columns={[
             { key: 'monthLabel', label: 'Month', width: 110 },
             { key: 'loadCount2024', label: '2024 Load', width: 110, align: 'right', render: (row) => compactNumber(row.loadCount2024) },

package/src/utils/filterChartByMonths.js

@@ -12,8 +12,17 @@ export const filterChartByMonths = (chart, selectedMonths) => {
     };
   }
 
+  const toMonthKey = (value) => {
+    return String(value ?? '')
+      .trim()
+      .toLocaleUpperCase('tr-TR')
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '');
+  };
+  const selectedKeys = new Set(selectedMonths.map(toMonthKey));
+
   const indices = chart.labels
-    .map((label, i) => (selectedMonths.includes(label) ? i : -1))
+    .map((label, i) => (selectedKeys.has(toMonthKey(label)) ? i : -1))
     .filter(i => i !== -1);
 
   return {