From 85451a6b3187223c062244f7d6b708f6d3fd9c77 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 8 Apr 2026 19:27:29 +0200
Subject: [PATCH] fix: add parentheses for correct boolean operator precedence
 in column filter

The missing/present filter was not working due to operator precedence.
Added explicit parentheses to ensure correct evaluation.

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 src/components/ProductDescriptions.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/ProductDescriptions.tsx b/src/components/ProductDescriptions.tsx
index 14872be..b5f8685 100644
--- a/src/components/ProductDescriptions.tsx
+++ b/src/components/ProductDescriptions.tsx
@@ -7,6 +7,7 @@ import { ColumnFilterPopover } from './ColumnFilterPopover';
 interface ProductDescriptionsProps {
   data: ExcelRow[];
   onEdit: (index: number) => void;
+  rowStatuses: Record<string, string>;
 }
 
 type TabType = 'all' | 'missingLongDE' | 'missingLongEN' | 'missingLongAny' | 'missingShortDE' | 'missingShortEN' | 'missingShortAny' | 'complete' | 'incomplete';
@@ -14,7 +15,7 @@ type TabType = 'all' | 'missingLongDE' | 'missingLongEN' | 'missingLongAny' | 'm
 // Description columns that should only have Present/Missing filters
 const DESCRIPTION_COLUMNS = [COLUMNS.LONG_DE, COLUMNS.LONG_EN, COLUMNS.SHORT_DE, COLUMNS.SHORT_EN];
 
-export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps) {
+export function ProductDescriptions({ data, onEdit, rowStatuses }: ProductDescriptionsProps) {
   const [activeTab, setActiveTab] = useState<TabType>('all');
   const [search, setSearch] = useState('');
   const [lineFilter, setLineFilter] = useState('');
@@ -71,7 +72,7 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
         if (DESCRIPTION_COLUMNS.includes(col)) {
           result = result.filter(r => {
             const hasValue = Boolean(r.row[col]);
-            const shouldInclude = vals.includes('Present') && hasValue || vals.includes('Missing') && !hasValue;
+            const shouldInclude = (vals.includes('Present') && hasValue) || (vals.includes('Missing') && !hasValue);
             return shouldInclude;
           });
         } else {
@@ -304,8 +305,17 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
               </tr>
             </thead>
             <tbody className="divide-y divide-slate-700/50">
-              {paginatedData.map(({ row, index }) => (
-                <tr key={index} className={cn("transition-colors", getRowColor(row))}>
+              {paginatedData.map(({ row, index }) => {
+                const isPending = rowStatuses[String(row[COLUMNS.ARTICLE_NO])] === 'pending';
+                return (
+                  <tr 
+                    key={index} 
+                    className={cn(
+                      "transition-colors", 
+                      getRowColor(row),
+                      isPending ? "bg-yellow-400/20 border-l-4 border-l-yellow-400" : ""
+                    )}
+                  >
                   <td className="px-4 py-3 font-mono text-slate-300 text-xs">{row[COLUMNS.ARTICLE_NO]}</td>
                   <td className="px-4 py-3 font-medium text-white max-w-[200px] truncate" title={row[COLUMNS.ARTICLE_NAME]}>{row[COLUMNS.ARTICLE_NAME]}</td>
                   <td className="px-4 py-3 text-slate-300 text-xs">{row[COLUMNS.LINE]}</td>
@@ -334,7 +344,8 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
                     </button>
                   </td>
                 </tr>
-              ))}
+                );
+              })}
               {paginatedData.length === 0 && (
                 <tr>
                   <td colSpan={9} className="px-4 py-8 text-center text-slate-500">