Create order filter by category

src/pages/orders/components/CreateOrderItemsSection.tsx

@@ -23,17 +23,36 @@ const CreateOrderItemsSection: FC<CreateOrderItemsSectionProps> = ({
     onRemoveItem,
 }) => {
     const [search, setSearch] = useState('')
+    const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null)
 
     const foodsMap = useMemo(
         () => new Map(foods.map((food) => [food.id, food])),
         [foods]
     )
 
+    const categories = useMemo(() => {
+        const categoryMap = new Map<string, string>()
+        foods.forEach((food) => {
+            if (food.category?.id) {
+                categoryMap.set(food.category.id, food.category.title)
+            }
+        })
+        return Array.from(categoryMap.entries())
+            .map(([id, title]) => ({ id, title }))
+            .sort((a, b) => a.title.localeCompare(b.title, 'fa'))
+    }, [foods])
+
     const filteredFoods = useMemo(() => {
+        let result = foods
+        if (selectedCategoryId) {
+            result = result.filter((food) => food.category?.id === selectedCategoryId)
+        }
         const query = search.trim().toLowerCase()
-        if (!query) return foods
+        if (query) {
-        return foods.filter((food) => food.title.toLowerCase().includes(query))
+            result = result.filter((food) => food.title.toLowerCase().includes(query))
-    }, [foods, search])
+        }
+        return result
+    }, [foods, search, selectedCategoryId])
 
     const selectedItems = formik.values.items
         .map((item) => {
@@ -56,6 +75,36 @@ const CreateOrderItemsSection: FC<CreateOrderItemsSectionProps> = ({
                     onChange={(e) => setSearch(e.target.value)}
                 />
 
+                {categories.length > 0 && (
+                    <div className='mt-3 flex gap-2 overflow-x-auto pb-1'>
+                        <button
+                            type='button'
+                            onClick={() => setSelectedCategoryId(null)}
+                            className={`flex-shrink-0 px-3 h-8 rounded-full text-xs transition-colors ${
+                                selectedCategoryId === null
+                                    ? 'bg-primary text-white'
+                                    : 'bg-[#EEF0F7] text-description hover:bg-[#E4E7F0]'
+                            }`}
+                        >
+                            همه
+                        </button>
+                        {categories.map((category) => (
+                            <button
+                                key={category.id}
+                                type='button'
+                                onClick={() => setSelectedCategoryId(category.id)}
+                                className={`flex-shrink-0 px-3 h-8 rounded-full text-xs transition-colors whitespace-nowrap ${
+                                    selectedCategoryId === category.id
+                                        ? 'bg-primary text-white'
+                                        : 'bg-[#EEF0F7] text-description hover:bg-[#E4E7F0]'
+                                }`}
+                            >
+                                {category.title}
+                            </button>
+                        ))}
+                    </div>
+                )}
+
                 <div className='mt-3 space-y-2 max-h-56 overflow-y-auto'>
                     {filteredFoods.length === 0 ? (
                         <div className='text-center py-6 text-xs text-description'>