fix filter with category id

src/app/[name]/(Main)/page.tsx

@@ -16,6 +16,7 @@ import CategoryScroll from "@/app/[name]/(Main)/components/CategoryScroll";
 import MenuFilterDrawer from "@/app/[name]/(Main)/components/MenuFilterDrawer";
 import MenuSortingDrawer from "@/app/[name]/(Main)/components/MenuSortingDrawer";
 import { useGetCategories, useGetFoods } from "./hooks/useMenuData";
+import type { Food, Category } from "./types/Types";
 
 const sortings = [
   "PopularityDescending",
@@ -23,17 +24,14 @@ const sortings = [
   "PriceAscending",
   "RateDescending",
   "PriceDescending"
-]
+];
 
 const MenuIndex = () => {
   const { data: foodsData } = useGetFoods();
   const { data: categoriesData } = useGetCategories();
 
-  const foods = useMemo(() => {
+  const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
-    const foodsList = foodsData?.data || [];
+  const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);
-    return foodsList;
-  }, [foodsData?.data]);
-  const categories = useMemo(() => categoriesData?.data || [], [categoriesData?.data]);
   const { t: tCommon } = useTranslation('common');
   const { t: tMenu } = useTranslation('menu', {
     keyPrefix: "Menu"
@@ -103,7 +101,8 @@ const MenuIndex = () => {
 
     return foods.filter(
       (item) => {
-        const matchesCategory = selectedCategory === '0' || item.category === selectedCatId;
+        const matchesCategory =
+          selectedCategory === '0' || item.category?.id === selectedCatId;
         const itemName = item.name || item.title || item.foodName || '';
         const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);
         return matchesCategory && matchesSearch;

src/app/[name]/(Main)/service/MenuService.ts

@@ -1,8 +1,5 @@
-import { api } from "@/lib/api/axiosInstance";
+import { api } from "@/config/axios";
-import {
+import { CategoriesResponse, FoodsResponse } from "../types/Types";
-  CategoriesResponse,
-  FoodsResponse,
-} from "@/app/[name]/(Main)/types/Types";
 
 export const getFoods = async (slug: string): Promise<FoodsResponse> => {
   const response = await api.get<FoodsResponse>(

src/app/[name]/(Main)/types/Types.ts

@@ -5,22 +5,6 @@ export interface BaseResponse<T = unknown> {
   message?: string;
 }
 
-export interface Food {
-  id: string;
-  name?: string;
-  title?: string;
-  foodName?: string;
-  description?: string;
-  desc?: string;
-  content?: string;
-  price: number;
-  image?: string;
-  category?: string;
-  [key: string]: unknown;
-}
-
-export type FoodsResponse = BaseResponse<Food[]>;
-
 export interface Category {
   id: string;
   createdAt: string;
@@ -33,3 +17,42 @@ export interface Category {
 }
 
 export type CategoriesResponse = BaseResponse<Category[]>;
+
+export type FoodImage = string | { url: string; alt?: string | null };
+
+export interface Food {
+  id: string;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string | null;
+  restaurant?: string;
+  category?: Category;
+  name?: string;
+  title?: string;
+  foodName?: string;
+  description?: string;
+  desc?: string | null;
+  content?: string | null;
+  price: number;
+  image?: string | null;
+  images?: FoodImage[] | null;
+  points?: number | null;
+  order?: number | null;
+  prepareTime?: number | null;
+  sat?: boolean;
+  sun?: boolean;
+  mon?: boolean;
+  breakfast?: boolean;
+  noon?: boolean;
+  dinner?: boolean;
+  stock?: number;
+  stockDefault?: number;
+  isActive?: boolean;
+  inPlaceServe?: boolean;
+  pickupServe?: boolean;
+  rate?: number;
+  discount?: number;
+  [key: string]: unknown;
+}
+
+export type FoodsResponse = BaseResponse<Food[]>;

src/components/listview/MenuItem.tsx

@@ -1,23 +1,14 @@
 'use client'
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import Image from "next/image";
 import PlusIcon from "@/components/icons/PlusIcon";
 import MinusIcon from "@/components/icons/MinusIcon";
 import { useReceiptStore } from "@/zustand/receiptStore";
 import { motion } from "framer-motion";
+import type { Food } from "@/app/[name]/(Main)/types/Types";
 interface MenuItemProps {
-  food: {
+  food: Food;
-    id: string | number;
-    name?: string;
-    title?: string;
-    foodName?: string;
-    description?: string;
-    desc?: string;
-    content?: string;
-    price: number;
-    image?: string;
-  };
 }
 
 const MenuItem = ({ food }: MenuItemProps) => {
@@ -26,7 +17,16 @@ const MenuItem = ({ food }: MenuItemProps) => {
   const increment = useReceiptStore(state => state.increment);
   const decrement = useReceiptStore(state => state.decrement);
 
-  if (!food) return null;
+  const fallbackImage = "/assets/images/food-preview.png";
+  const resolvedImage = useMemo(() => {
+    if (food.image) return food.image;
+    if (Array.isArray(food.images) && food.images.length > 0) {
+      const [firstImage] = food.images;
+      if (typeof firstImage === "string") return firstImage;
+      return firstImage?.url || fallbackImage;
+    }
+    return fallbackImage;
+  }, [food.image, food.images]);
 
   const foodName = food.name || food.title || food.foodName || 'بدون نام';
   const foodDescription = food.description || food.desc || food.content || '';
@@ -35,7 +35,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
     <div className="flex gap-4 w-full h-full">
       <Image
         className="rounded-xl w-28 h-28"
-        src={food.image || "/assets/images/food-preview.png"}
+        src={resolvedImage}
         height={100}
         width={100}
         alt="Food image"

src/config/axios.ts

@@ -0,0 +1,4 @@
+import { api } from "@/lib/api/axiosInstance";
+
+export { api };
+