• X
• Mastodon
• LinkedIn
• Facebook

pos/app/reciept/progress/page.tsx (1)

128-144: Type inconsistency in printItems could cause runtime errors

The printItems variable can be either OrderItem[] or OrderItem[][] depending on the conditions, but TypeScript won't catch this mixed type usage. This could lead to runtime errors if the wrong type is assumed elsewhere.

Consider maintaining consistent types or using a discriminated union:

// Add proper typing at the component level
type PrintItemsType = {
  isGrouped: true;
  items: OrderItem[][];
} | {
  isGrouped: false;
  items: OrderItem[];
}

// Then update the useMemo:
const printItems = useMemo((): PrintItemsType => {
  if (forCustomer) {
    return { isGrouped: false, items: items || [] }
  }
  const hasFilters = categoryOrderses.some((group) => group.length > 0)
  if (hasFilters) {
    return { isGrouped: true, items: itemsToPrint }
  }
  if (onlyNewItems) {
    return {
      isGrouped: false,
      items: items?.filter(
        (item: OrderItem) => item.status !== ORDER_ITEM_STATUSES.DONE
      ) || []
    }
  }
  return { isGrouped: false, items: items || [] }
}, [forCustomer, onlyNewItems, categoryOrderses, itemsToPrint, items])

pos/modules/settings/components/categoriesToPrint.tsx (3)

5-5: Remove unused import

The X icon from lucide-react is imported but never used in the component. The remove button uses an emoji (❌) instead.

-import { Plus, X } from "lucide-react"
+import { Plus } from "lucide-react"

---

67-71: UX improvement: Warn before removing the last filter group

Currently, the function silently prevents removal of the last filter group. Users might be confused when clicking the remove button has no effect.

Consider providing user feedback or disabling the button instead:

 const removeFilter = (index: number) => {
   if (categoriesToPrint.length > 1) {
     setCategoriesToPrint(categoriesToPrint.filter((_, i) => i !== index))
+  } else {
+    // Consider showing a toast: "At least one filter group must be maintained"
   }
 }

Or better yet, since you're already conditionally rendering the remove button (line 95), this check is redundant:

-const removeFilter = (index: number) => {
-  if (categoriesToPrint.length > 1) {
-    setCategoriesToPrint(categoriesToPrint.filter((_, i) => i !== index))
-  }
-}
+const removeFilter = (index: number) => {
+  setCategoriesToPrint(categoriesToPrint.filter((_, i) => i !== index))
+}

---

95-104: Consider using a proper icon component instead of emoji

Using an emoji (❌) for the remove button is inconsistent with the Plus icon used for the add button. This could cause rendering issues across different platforms and browsers.

Since you've already imported X from lucide-react, use it for consistency:

 {categoriesToPrint.length > 1 && (
   <Button
     variant="ghost"
     size="sm"
     onClick={() => removeFilter(index)}
     className="h-8 w-8 p-0 text-red-500 hover:text-red-600 hover:bg-red-50"
   >
-    ❌
+    <X className="h-4 w-4" />
   </Button>
 )}

pos/app/reciept/progress/page.tsx (1)

168-209: Complex rendering logic could benefit from extraction

The nested ternary operators and type checking make this rendering logic hard to follow and maintain. The three different rendering paths (customer view, grouped items, flat items) would be clearer as separate functions or components.

Consider extracting the rendering logic into separate functions:

+const renderCustomerItems = (items: OrderItem[]) => (
+  <>
+    {items.map((item: OrderItem) => (
+      <div className="flex items-center" key={item._id}>
+        <span className="flex-auto">{item.productName}</span>
+        <span>
+          x{item.count}{" "}
+          {item.status === ORDER_ITEM_STATUSES.CONFIRM && "!!!"}
+        </span>
+        <span className="ml-1 w-1/4 text-right">
+          {(item.unitPrice * item.count).toLocaleString()}
+        </span>
+      </div>
+    ))}
+  </>
+)
+
+const renderGroupedItems = (groups: OrderItem[][]) => (
+  <>
+    {groups.map((groupItems: OrderItem[], groupIndex: number) => (
+      <div key={groupIndex}>
+        {groupIndex > 0 && (
+          <div className="my-3 border-t border-dashed" />
+        )}
+        {groupItems.map((item: OrderItem) => (
+          <div className="flex items-center" key={item._id}>
+            <span className="flex-auto">{item.productName}</span>
+            <span>
+              x{item.count}{" "}
+              {item.status === ORDER_ITEM_STATUSES.CONFIRM && "!!!"}
+            </span>
+          </div>
+        ))}
+      </div>
+    ))}
+  </>
+)
+
+const renderFlatItems = (items: OrderItem[]) => (
+  <>
+    {items.map((item: OrderItem) => (
+      <div className="flex items-center" key={item._id}>
+        <span className="flex-auto">{item.productName}</span>
+        <span>
+          x{item.count}{" "}
+          {item.status === ORDER_ITEM_STATUSES.CONFIRM && "!!!"}
+        </span>
+      </div>
+    ))}
+  </>
+)

 // Then in the JSX:
-{forCustomer
-  ?
-    printItems.map((item: OrderItem) => (
-      // ... customer view
-    ))
-  : Array.isArray(printItems[0])
-  ? 
-    printItems.map((groupItems: OrderItem[], groupIndex: number) => (
-      // ... grouped view
-    ))
-  : 
-    printItems.map((item: OrderItem) => (
-      // ... flat view
-    ))}
+{forCustomer
+  ? renderCustomerItems(printItems)
+  : Array.isArray(printItems[0])
+  ? renderGroupedItems(printItems)
+  : renderFlatItems(printItems)}

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

pos/app/reciept/progress/page.tsx (1)

226-234: Guard against items being undefined when computing totals

Calling reduce on undefined will throw if orderDetail.items is missing. Use a safe default.

Apply this diff:

-              {items
+              {(items || [])
                 .reduce(
                   (acc: number, item: OrderItem) =>
                     acc + item.unitPrice * item.count,
                   0
                 )
                 .toLocaleString()}

pos/app/reciept/progress/page.tsx (1)

182-186: Avoid fragile Array.isArray(printItems[0]) check; use has-filters signal instead

You already derive grouping from the presence of non-empty filter groups. Rely on that instead of inspecting runtime shapes.

Apply this diff:

-          const hasMultipleGroups = Array.isArray(printItems) && 
-            printItems.length > 0 && 
-            Array.isArray(printItems[0])
+          const hasMultipleGroups = categoryOrders.some((group) => group.length > 0)

This keeps the render logic aligned with the decision used to construct printItems and avoids brittle shape introspection.

pos/modules/settings/components/categoriesToPrint.tsx (1)

19-24: Prune empty groups after filtering invalid categories (and ensure at least one group remains)

Avoid rendering empty filter rows after categories change. Keep UX clean and deterministic.

Apply this diff:

-  const { loading, categories } = useProductCategories((cats) => {
-    const validOrders = cats.map((c: ICategory) => c.order)
-    setCategoriesToPrint(
-      categoriesToPrint.map((filterGroup) =>
-        filterGroup.filter((cat) => validOrders.includes(cat))
-      )
-    )
-  }, isActive || !isPrint)
+  const { loading, categories } = useProductCategories((cats) => {
+    const validOrders = cats.map((c: ICategory) => c.order)
+    setCategoriesToPrint((prev) => {
+      const updated = prev
+        .map((filterGroup) => filterGroup.filter((cat) => validOrders.includes(cat)))
+        .filter((filteredGroup) => filteredGroup.length > 0)
+      return updated.length > 0 ? updated : [[]] // keep at least one group
+    })
+  }, isActive || !isPrint)

pos/app/reciept/progress/page.tsx (1)

126-142: Unify print data model to simplify rendering and types

Today printItems is sometimes OrderItem[] and sometimes OrderItem[][]. This forces runtime shape checks and casts. Normalize to a discriminated model or always use a 2D array (wrap flat lists as a single group). This simplifies both memo and render, improves type-safety, and removes the need for shape probing.

Example (minimal change outside current structure):

• In the memo, when no filters, return [flatItems] instead of flatItems.
• In the render, always iterate groups and items; keep the customer branch as-is.

If you want, I can provide a full diff converting printItems to always be OrderItem[][] and updating the render accordingly.

Also applies to: 166-214

pos/store/index.tsx (1)

106-127: Consider delegating JSON handling to createJSONStorage and layering migration

This keeps behavior consistent with other atoms using JSON storage and centralizes serialization concerns. Layer migration on top of the JSON storage getItem.

Apply this diff:

-import { atomWithStorage } from "jotai/utils"
+import { atomWithStorage, createJSONStorage } from "jotai/utils"
@@
-export const categoriesToPrintAtom = atomWithStorage<string[][]>(
-  "categoriesToPrint",
-  [[]],
-  {
-    getItem: (key, initialValue) => {
-      try {
-        const stored = localStorage.getItem(key)
-        if (stored === null) return initialValue
-        const parsed = JSON.parse(stored)
-        return migrateCategoriesData(parsed)
-      } catch {
-        return initialValue
-      }
-    },
-    setItem: (key, value) => {
-      localStorage.setItem(key, JSON.stringify(value))
-    },
-    removeItem: (key) => {
-      localStorage.removeItem(key)
-    },
-  }
-)
+const jsonStorage = createJSONStorage<string[][]>(() => localStorage)
+export const categoriesToPrintAtom = atomWithStorage<string[][]>(
+  "categoriesToPrint",
+  [[]],
+  {
+    getItem: (key, initialValue) => {
+      try {
+        const parsed = jsonStorage.getItem(key, initialValue)
+        return migrateCategoriesData(parsed)
+      } catch {
+        return initialValue
+      }
+    },
+    setItem: (key, value) => jsonStorage.setItem(key, value),
+    removeItem: (key) => jsonStorage.removeItem(key),
+  }
+)

pos/modules/settings/components/categoriesToPrint.tsx (3)

63-77: Use functional state updates to avoid stale closures

These setters depend on the previous state; use functional updates for correctness under rapid interactions.

Apply this diff:

-  const addNewFilter = () => {
-    setCategoriesToPrint([...categoriesToPrint, []])
-  }
+  const addNewFilter = () => {
+    setCategoriesToPrint((prev) => [...prev, []])
+  }
@@
-  const removeFilter = (index: number) => {
-    if (categoriesToPrint.length > 1) {
-      setCategoriesToPrint(categoriesToPrint.filter((_, i) => i !== index))
-    }
-  }
+  const removeFilter = (index: number) => {
+    setCategoriesToPrint((prev) => (prev.length > 1 ? prev.filter((_, i) => i !== index) : prev))
+  }
@@
-  const updateFilter = (index: number, value: string[]) => {
-    const updated = [...categoriesToPrint]
-    updated[index] = value
-    setCategoriesToPrint(updated)
-  }
+  const updateFilter = (index: number, value: string[]) => {
+    setCategoriesToPrint((prev) => {
+      const updated = [...prev]
+      updated[index] = value
+      return updated
+    })
+  }

---

82-85: Stabilize keys to reduce re-mounting when groups change

Index-only keys can cause unnecessary re-mounts and state loss across edits/removals.

Apply this diff:

-        <div
-          key={`category-filter-${index}`}
+        <div
+          key={`category-filter-${index}-${(filterGroup || []).join("|")}`}

If users can reorder or duplicate groups, consider storing a generated id per group for truly stable keys.

---

98-107: Improve accessibility for the remove button

Add an aria-label so screen readers announce the action meaningfully.

Apply this diff:

           {categoriesToPrint.length > 1 && (
             <Button
               variant="ghost"
               size="sm"
               onClick={() => removeFilter(index)}
               className="h-8 w-8 p-0 text-red-500 hover:text-red-600 hover:bg-red-50"
+              aria-label={`Remove filter group ${index + 1}`}
             >
               ❌
             </Button>
           )}

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

pos/modules/settings/components/categoriesToPrint.tsx (2)

33-38: Guard against undefined categories in rootCategories

categories.find(...) will throw if categories is undefined. Use a safe default.

   const rootCategories = (categories || []).filter(
     (category) =>
-      !categories.find(
+      !(categories || []).find(
         (cat) => cat._id !== category._id && category.order.includes(cat.order)
       )
   )

---

43-49: Prevent potential crash in getDirectChildren when categories is undefined

Use a safe default for categories.

-  return categories.filter(
+  return (categories || []).filter(
     (cat) =>
       cat._id !== parentCat._id &&
       getGen(cat.order) === getGen(parentCat.order) + 1 &&
       cat.order.includes(parentCat.order)
   )

pos/app/reciept/progress/page.tsx (1)

86-96: Potential duplicate prints; gate with a ref

window.print() is invoked here and also in effects below, which can cause double prints. Gate all print calls via a single ref.

   onCompleted({ orderDetail }) {
     const hasFilters = categoryOrders.some((group) => group.length > 0)
     if (forCustomer) {
-      return window.print()
+      if (!didRequestPrintRef.current) {
+        didRequestPrintRef.current = true
+        return window.print()
+      }
+      return
     }
     if (!onlyNewItems && !hasFilters) {
-      return window.print()
+      if (!didRequestPrintRef.current) {
+        didRequestPrintRef.current = true
+        return window.print()
+      }
+      return
     }

Additions required outside this hunk:

• Import and ref initialization:

// add to imports
import { useCallback, useEffect, useMemo, useRef, useState } from "react"

// declare once near other state
const didRequestPrintRef = useRef(false)

pos/modules/settings/components/categoriesToPrint.tsx (1)

19-24: Fix stale state update and prune empty filter groups

The callback uses a captured categoriesToPrint value, which can be stale. Use a functional state update. Also, prune empty groups after filtering to avoid rendering empty UI rows. This aligns with prior feedback.

-    const validOrders = cats.map((c: ICategory) => c.order)
-    setCategoriesToPrint(
-      categoriesToPrint.map((filterGroup) =>
-        filterGroup.filter((cat) => validOrders.includes(cat))
-      )
-    )
+    const validOrders = cats.map((c: ICategory) => c.order)
+    setCategoriesToPrint((prev) =>
+      prev
+        .map((filterGroup) =>
+          filterGroup.filter((cat) => validOrders.includes(cat))
+        )
+        .filter((filteredGroup) => filteredGroup.length > 0)
+    )

pos/app/reciept/progress/page.tsx (2)

208-212: LGTM: safer multiple-groups detection

Guarding with printItems.length > 0 before peeking at [0] addresses the fragility noted previously.

---

42-84: Add onError handler to avoid a stuck progress window

If getCategoryOrders fails, the UI can hang. Close gracefully.

 const [getCategoryOrders, ordersQuery] = useLazyQuery(
   productQueries.getCategoryOrders,
   {
     onCompleted({ poscProducts }) {
       const allFilteredItems: OrderItem[][] = []
@@
       },
+    onError() {
+      // Avoid leaving the progress window hanging on network/server errors
+      handleAfterPrint()
+    },
   }
 )

pos/modules/settings/components/categoriesToPrint.tsx (3)

75-81: Add bounds check in updateFilter to avoid OOB updates

Prevents accidental runtime issues if the index becomes stale (e.g., during rapid add/remove).

 const updateFilter = (index: number, value: string[]) => {
   setCategoriesToPrint((prev) => {
+    if (index < 0 || index >= prev.length) return prev
     const updated = [...prev]
     updated[index] = value
     return updated
   })
 }

---

85-114: Consider stable keys for dynamic filter groups

The key combines index + joined values. This can still cause remounts and state leakage on reordering/removal. Ideally, each group would have a stable id.

Would you consider evolving categoriesToPrintAtom to store { id: string; values: string[] }[]? I can help generate a small migration helper if desired.

---

102-112: Use a consistent icon instead of a Unicode cross

For consistency with the rest of the UI, prefer lucide-react’s X icon.

-          {categoriesToPrint.length > 1 && (
+          {categoriesToPrint.length > 1 && (
             <Button
               variant="ghost"
               size="sm"
               onClick={() => removeFilter(index)}
               className="h-8 w-8 p-0 text-red-500 hover:text-red-600 hover:bg-red-50"
               aria-label={`Remove filter group ${index + 1}`}
             >
-              ❌
+              <X className="h-4 w-4" aria-hidden="true" />
             </Button>
           )}

Additionally, update the import:

-import { Plus } from "lucide-react"
+import { Plus, X } from "lucide-react"

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro