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 foodsList = foodsData?.data || [];
-    return foodsList;
-  }, [foodsData?.data]);
-  const categories = useMemo(() => categoriesData?.data || [], [categoriesData?.data]);
+  const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
+  const categories = useMemo<Category[]>(() => 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 {
-  CategoriesResponse,
-  FoodsResponse,
-} from "@/app/[name]/(Main)/types/Types";
+import { api } from "@/config/axios";
+import { CategoriesResponse, FoodsResponse } from "../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[]>;