list of foods and categories

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import Image from "next/image";
+import clsx from "clsx";
+import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
+import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
+import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
+import { Category } from "@/app/[name]/(Main)/types/Types";
+
+type Variant = "large" | "small";
+
+const variantConfig: Record<
+  Variant,
+  {
+    renderer: typeof CategoryItemRenderer;
+    imageSize: number;
+  }
+> = {
+  large: {
+    renderer: CategoryItemRenderer,
+    imageSize: 32,
+  },
+  small: {
+    renderer: CategorySmallItemRenderer,
+    imageSize: 24,
+  },
+};
+
+type Props = {
+  categories: Category[];
+  selectedCategory: string;
+  onSelect: (index: number) => void;
+  variant?: Variant;
+  className?: string;
+};
+
+const CategoryScroll = ({
+  categories,
+  selectedCategory,
+  onSelect,
+  variant = "large",
+  className,
+}: Props) => {
+  const { renderer: Renderer, imageSize } = variantConfig[variant];
+
+  const handleSelect = (index: number) => () => onSelect(index);
+
+  return (
+    <HorizontalScrollView
+      className={clsx(
+        "w-full noscrollbar py-4!",
+        variant === "large" && "mt-4!",
+        className
+      )}
+    >
+      <Renderer
+        key="all"
+        className={clsx(selectedCategory === "0" && "bg-container!")}
+        onClick={handleSelect(0)}
+      >
+        <Image
+          priority
+          src="/assets/images/food-image.png"
+          width={imageSize}
+          height={imageSize}
+          alt="category image"
+        />
+        <span className="text-xs text-foreground">همه</span>
+      </Renderer>
+      {categories.map((item, index) => {
+        const categoryIndex = index + 1;
+        const isSelected = String(categoryIndex) === selectedCategory;
+
+        return (
+          <Renderer
+            key={item.id}
+            className={clsx(isSelected && "bg-container!")}
+            onClick={handleSelect(categoryIndex)}
+          >
+            <Image
+              priority
+              src={item.avatarUrl || "/assets/images/food-image.png"}
+              width={imageSize}
+              height={imageSize}
+              alt="category image"
+            />
+            <span className="text-xs text-foreground">{item.title}</span>
+          </Renderer>
+        );
+      })}
+    </HorizontalScrollView>
+  );
+};
+
+export default CategoryScroll;
+

src/app/[name]/(Main)/components/MenuFilterDrawer.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import React from "react";
+import Button from "@/components/button/PrimaryButton";
+import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
+import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
+import { Switch } from "@/components/ui/switch";
+import { MedalStar } from "iconsax-react";
+import { TicketPercentIcon } from "lucide-react";
+
+type MenuFilterDrawerProps = {
+  visible: boolean;
+  onClose: () => void;
+  selectedIngredients: string;
+  selectedDeliveryId: string;
+  onIngredientsChange: (value: string) => void;
+  onDeliveryChange: (value: string) => void;
+  tMenu: (key: string) => string;
+};
+
+const MenuFilterDrawer = ({
+  visible,
+  onClose,
+  selectedIngredients,
+  selectedDeliveryId,
+  onIngredientsChange,
+  onDeliveryChange,
+  tMenu,
+}: MenuFilterDrawerProps) => {
+  const contents: Array<ComboboxOption> = [
+    {
+      id: "0",
+      title: tMenu("MenuFilterDrawer.SelectContent.Options.Normal"),
+      label: "",
+    },
+    {
+      id: "1",
+      title: tMenu("MenuFilterDrawer.SelectContent.Options.Vegan"),
+      label: "",
+    },
+  ];
+
+  const shippings: Array<ComboboxOption> = [
+    {
+      id: "0",
+      title: tMenu("MenuFilterDrawer.SelectDelivery.Options.Courier"),
+      label: "",
+    },
+  ];
+
+  const handleIngredientsChange = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    index: number
+  ) => {
+    e.stopPropagation();
+    onIngredientsChange(contents[index]?.id ?? contents[0].id);
+  };
+
+  const handleDeliveryChange = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    index: number
+  ) => {
+    e.stopPropagation();
+    onDeliveryChange(shippings[index]?.id ?? shippings[0].id);
+  };
+
+  return (
+    <AnimatedBottomSheet
+      title={tMenu("MenuFilterDrawer.Heading")}
+      visible={visible}
+      outDelay={150}
+      onClick={onClose}
+    >
+      <div className="ps-8.5 pe-[31px] mt-[89px]">
+        <ComboBox
+          title={tMenu("MenuFilterDrawer.SelectContent.Label")}
+          options={contents}
+          selectedId={selectedIngredients}
+          onSelectionChange={handleIngredientsChange}
+        />
+        <ComboBox
+          className="relative mt-9.5"
+          title={tMenu("MenuFilterDrawer.SelectDelivery.Label")}
+          options={shippings}
+          selectedId={selectedDeliveryId}
+          onSelectionChange={handleDeliveryChange}
+        />
+        <div className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black">
+          <span className="inline-flex items-center gap-2.5 text-sm2">
+            <MedalStar size="16" className="stroke-foreground" />
+            {tMenu("MenuFilterDrawer.PlusPoint")}
+          </span>
+          <Switch className="w-12 h-6" />
+        </div>
+        <div className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black">
+          <span className="inline-flex items-center gap-2.5 text-sm2">
+            <TicketPercentIcon size={16} />
+            {tMenu("MenuFilterDrawer.DiscountState")}
+          </span>
+          <Switch />
+        </div>
+      </div>
+      <hr className="text-white/40 mt-12" />
+      <div className="px-9 pt-6 flex justify-between gap-[22px]">
+        <div className="w-full">
+          <Button>{tMenu("MenuFilterDrawer.ButtonOk")}</Button>
+        </div>
+        <div className="w-full">
+          <Button className="bg-disabled! text-disabled-text!">
+            {tMenu("MenuFilterDrawer.ButtonCancel")}
+          </Button>
+        </div>
+      </div>
+    </AnimatedBottomSheet>
+  );
+};
+
+export default MenuFilterDrawer;

src/app/[name]/(Main)/components/MenuSortingDrawer.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
+import React from "react";
+
+type MenuSortingDrawerProps = {
+  visible: boolean;
+  onClose: () => void;
+  sortings: string[];
+  onSelect: (index: number) => void;
+  tMenu: (key: string) => string;
+};
+
+const MenuSortingDrawer = ({
+  visible,
+  onClose,
+  sortings,
+  onSelect,
+  tMenu,
+}: MenuSortingDrawerProps) => {
+  return (
+    <AnimatedBottomSheet
+      title={tMenu("MenuSortingDrawer.Heading")}
+      visible={visible}
+      inDelay={150}
+      onClick={onClose}
+    >
+      <div className="px-8.5 py-10 justify-between">
+        {sortings.map((value, index) => (
+          <div key={value}>
+            <div
+              onClick={() => onSelect(index)}
+              className="text-sm2 font-normal cursor-pointer"
+            >
+              {tMenu(`MenuSortingDrawer.Options.${value}`)}
+            </div>
+            {index < sortings.length - 1 && (
+              <hr className="border-white/40 dark:border-border mb-4 mt-4" />
+            )}
+          </div>
+        ))}
+      </div>
+    </AnimatedBottomSheet>
+  );
+};
+
+export default MenuSortingDrawer;
+

src/app/[name]/(Main)/hooks/useMenuData.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/MenuService";
+import { useParams } from "next/navigation";
+
+export const useGetFoods = () => {
+  const { name } = useParams<{ name: string }>();
+  return useQuery({
+    queryKey: ["menu"],
+    queryFn: () => api.getFoods(name),
+    enabled: !!name,
+  });
+};
+
+export const useGetCategories = () => {
+  const { name } = useParams<{ name: string }>();
+  return useQuery({
+    queryKey: ["categories"],
+    queryFn: () => api.getCategories(name),
+    enabled: !!name,
+  });
+};

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

@@ -2,129 +2,20 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import SearchBox from "@/components/input/SearchBox";
-import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
-import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
-import Image from "next/image";
 import TextAlignIcon from "@/components/icons/TextAlignIcon";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
-import React from "react";
 import MenuItem from "@/components/listview/MenuItem";
-import Button from "@/components/button/PrimaryButton";
+import { Candle2 } from "iconsax-react";
-import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
+import { useQueryState } from "next-usequerystate";
-import { Switch } from "@/components/ui/switch";
-import { TicketPercentIcon } from "lucide-react";
-import { Candle2, MedalStar } from 'iconsax-react'
-import { useQueryState } from 'next-usequerystate'
 import clsx from "clsx";
-import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
-import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
 import useToggle from "@/hooks/helpers/useToggle";
-
+import CategoryScroll from "@/app/[name]/(Main)/components/CategoryScroll";
-const categories = new Array(13).fill({ title: "خوراک", icon: "" });
+import MenuFilterDrawer from "@/app/[name]/(Main)/components/MenuFilterDrawer";
-
+import MenuSortingDrawer from "@/app/[name]/(Main)/components/MenuSortingDrawer";
-const foods = [
+import { useGetCategories, useGetFoods } from "./hooks/useMenuData";
-  {
-    id: 1,
-    category: 0,
-    price: "69.000",
-    name: "کباب چوبی ژیوان )سیخ چوبی(",
-    contains: "فیله گوساله / سس سفید / قارچ و سیب زمینی/ پنیر پارمزان"
-  },
-  {
-    id: 2,
-    category: 1,
-    price: "49.000",
-    name: "برگر گوشت گوساله",
-    contains: "گوشت گوساله / پنیر چدار / کاهو / گوجه"
-  },
-  {
-    id: 3,
-    category: 2,
-    price: "29.000",
-    name: "ساندویچ مرغ",
-    contains: "مرغ / کاهو / گوجه / سس مایونز"
-  },
-  {
-    id: 4,
-    category: 0,
-    price: "89.000",
-    name: "کباب ماهی",
-    contains: "ماهی / سس لیمو / قارچ و سیب زمینی"
-  },
-  {
-    id: 5,
-    category: 1,
-    price: "39.000",
-    name: "سالاد فصل",
-    contains: "کاهو / گوجه / خیار / پنیر فتا"
-  },
-  {
-    id: 6,
-    category: 3,
-    price: "59.000",
-    name: "پاستا گوشت",
-    contains: "گوشت گوساله / پاستا / سس گوجه"
-  },
-  {
-    id: 7,
-    category: 2,
-    price: "49.000",
-    name: "ساندویچ تن ماهی",
-    contains: "تن ماهی / کاهو / گوجه / سس مایونز"
-  },
-  {
-    id: 8,
-    category: 0,
-    price: "79.000",
-    name: "کباب گوشت گوسفندی",
-    contains: "گوشت گوسفندی / سس سفید / قارچ و سیب زمینی"
-  },
-  {
-    id: 9,
-    category: 1,
-    price: "29.000",
-    name: "برگر مرغ",
-    contains: "مرغ / پنیر چدار / کاهو / گوجه"
-  },
-  {
-    id: 10,
-    category: 3,
-    price: "69.000",
-    name: "سالاد میگو",
-    contains: "میگو / کاهو / گوجه / خیار"
-  },
-  {
-    id: 11,
-    category: 2,
-    price: "39.000",
-    name: "ساندویچ شاورما",
-    contains: "مرغ / کاهو / گوجه / سس تارتار"
-  },
-  {
-    id: 12,
-    category: 0,
-    price: "99.000",
-    name: "کباب گوشت بوقلمون",
-    contains: "گوشت بوقلمون / سس سفید / قارچ و سیب زمینی"
-  },
-  {
-    id: 13,
-    category: 1,
-    price: "59.000",
-    name: "برگر ماهی",
-    contains: "ماهی / پنیر چدار / کاهو / گوجه"
-  },
-  {
-    id: 14,
-    category: 3,
-    price: "49.000",
-    name: "سالاد مرغ",
-    contains: "مرغ / کاهو / گوجه / خیار"
-  }
-];
 
 const sortings = [
   "PopularityDescending",
@@ -135,18 +26,18 @@ const sortings = [
 ]
 
 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 { t: tCommon } = useTranslation('common');
   const { t: tMenu } = useTranslation('menu', {
     keyPrefix: "Menu"
   });
-  const contents: Array<ComboboxOption> = [
-    { id: '0', title: tMenu('MenuFilterDrawer.SelectContent.Options.Normal'), label: '' },
-    { id: '1', title: tMenu('MenuFilterDrawer.SelectContent.Options.Vegan'), label: '' },
-  ]
-
-  const shippings: Array<ComboboxOption> = [
-    { id: '0', title: tMenu('MenuFilterDrawer.SelectDelivery.Options.Courier'), label: '' },
-  ]
 
   const { state: filterModal, toggle: toggleFilterModal } = useToggle();
   const { state: sortingModal, toggle: toggleSortingModal } = useToggle();
@@ -188,62 +79,54 @@ const MenuIndex = () => {
     setSearch(e.target.value);
   }, [setSearch]);
 
-  const updateCategory = useCallback((id: number) => {
+  const updateCategory = useCallback((index: number) => {
-    setSelectedCategory(String(id));
+    setSelectedCategory(String(index));
   }, [setSelectedCategory]);
 
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
   }
 
-  const changeSelectedIngredients = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+  const changeSelectedIngredients = useCallback((value: string) => {
-    setSelectedIngredients(() => contents[index]?.id || contents[0].id);
+    setSelectedIngredients(() => value);
-  }
+  }, [setSelectedIngredients]);
 
-  const changeSelectedDelivery = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+  const changeSelectedDelivery = useCallback((value: string) => {
-    setSelectedDeliveryId(() => contents[index]?.id || contents[0].id);
+    setSelectedDeliveryId(() => value);
-  }
+  }, [setSelectedDeliveryId]);
 
   const filteredReceiptItems = useMemo(() => {
+    if (!foods.length) return [];
+
     const lowerSearch = search.toLowerCase();
+    const selectedCatId = selectedCategory === '0' ? null : categories[+selectedCategory - 1]?.id;
+
     return foods.filter(
-      (item) =>
+      (item) => {
-        item.category === +selectedCategory &&
+        const matchesCategory = selectedCategory === '0' || item.category === selectedCatId;
-        item.name.toLowerCase().includes(lowerSearch)
+        const itemName = item.name || item.title || item.foodName || '';
+        const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);
+        return matchesCategory && matchesSearch;
+      }
     );
-  }, [selectedCategory, search]);
+  }, [selectedCategory, search, foods, categories]);
 
 
   return (
     <div className="flex flex-col gap-4 items-center pt-8 mb-8" ref={wrapperRef}>
       <div className="w-full">
         <SearchBox value={search} placeholder={tCommon('SearchPlaceholder')} onChange={updateSearch} />
-        <HorizontalScrollView className="w-full noscrollbar mt-4! py-4!">
+        <CategoryScroll
-          {categories.map((item, index) => (
+          categories={categories}
-            <CategoryItemRenderer
+          selectedCategory={selectedCategory}
-              key={index}
+          onSelect={updateCategory}
-              className={clsx(
+        />
-                index === +selectedCategory && "bg-container!",
-              )}
-              onClick={() => updateCategory(index)}
-            >
-              <Image
-                priority
-                src="/assets/images/food-image.png"
-                width={32}
-                height={32}
-                alt="category image"
-              />
-              <span className="text-xs text-foreground">{item.title}</span>
-            </CategoryItemRenderer>
-          ))}
-        </HorizontalScrollView>
       </div>
 
       <section className="w-full">
         <div className="flex justify-between items-center relative" ref={smallCategoriesRef} >
           <span className="text-base font-medium">
-            {categories[+selectedCategory]?.title}
+            {selectedCategory === '0' ? 'همه' : categories[+selectedCategory - 1]?.title || ''}
           </span>
           <div className="inline-flex gap-2 justify-around items-center">
             <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
@@ -264,98 +147,46 @@ const MenuIndex = () => {
             'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
             ``
           )}>
-          <HorizontalScrollView className="w-full noscrollbar py-4!">
+          <CategoryScroll
-            {categories.map((item, index) => (
+            categories={categories}
-              <CategorySmallItemRenderer
+            selectedCategory={selectedCategory}
-                key={index}
+            onSelect={updateCategory}
-                className={clsx(
+            variant="small"
-                  index === +selectedCategory && "bg-container!",
+          />
-                )}
-                onClick={() => updateCategory(index)}
-              >
-                <Image
-                  priority
-                  src="/assets/images/food-image.png"
-                  width={24}
-                  height={24}
-                  alt="category image"
-                />
-                <span className="text-xs text-foreground">{item.title}</span>
-              </CategorySmallItemRenderer>
-            ))}
-          </HorizontalScrollView>
         </motion.div>
 
         <VerticalScrollView className="mt-5! overflow-y-auto h-full">
-          {filteredReceiptItems.map((food) => (
+          {filteredReceiptItems.length === 0 ? (
-            <MenuItemRenderer key={food.id}>
+            <div className="text-center text-foreground/60 py-8">
-              <MenuItem food={food} />
+              {foodsData ? 'غذایی یافت نشد' : 'در حال بارگذاری...'}
-            </MenuItemRenderer>
+            </div>
-          ))}
+          ) : (
+            filteredReceiptItems.map((food) => (
+              <MenuItemRenderer key={food.id}>
+                <MenuItem food={food} />
+              </MenuItemRenderer>
+            ))
+          )}
         </VerticalScrollView>
       </section>
 
-      <AnimatedBottomSheet title={tMenu('MenuFilterDrawer.Heading')} visible={filterModal} outDelay={150} onClick={toggleFilterModal}>
+      <MenuFilterDrawer
-        <div className="ps-8.5 pe-[31px] mt-[89px]">
+        visible={filterModal}
-          <ComboBox
+        onClose={toggleFilterModal}
-            title={tMenu('MenuFilterDrawer.SelectContent.Label')}
+        selectedIngredients={selectedIngredients}
-            options={contents}
+        selectedDeliveryId={selectedDeliveryId}
-            selectedId={selectedIngredients}
+        onIngredientsChange={changeSelectedIngredients}
-            onSelectionChange={changeSelectedIngredients} />
+        onDeliveryChange={changeSelectedDelivery}
-          <ComboBox
+        tMenu={tMenu}
-            className="relative mt-9.5"
+      />
-            title={tMenu('MenuFilterDrawer.SelectDelivery.Label')}
-            options={shippings}
-            selectedId={selectedDeliveryId}
-            onSelectionChange={changeSelectedDelivery} />
-          <div
-            className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
-          >
-            <span className="inline-flex items-center gap-2.5 text-sm2">
-              <MedalStar size="16" className="stroke-foreground" />
-              {tMenu('MenuFilterDrawer.PlusPoint')}
-            </span>
-            <Switch className="w-12 h-6" />
-          </div>
-          <div
-            className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
-          >
-            <span className="inline-flex items-center gap-2.5 text-sm2">
-              <TicketPercentIcon size={16} />
-              {tMenu('MenuFilterDrawer.DiscountState')}
-            </span>
-            <Switch />
-          </div>
-        </div>
-        <hr className="text-white/40  mt-12" />
-        <div className="px-9 pt-6 flex justify-between gap-[22px]">
-          <div className="w-full">
-            <Button>
-              {tMenu('MenuFilterDrawer.ButtonOk')}
-            </Button>
-          </div>
-          <div className="w-full">
-            <Button className="bg-disabled! text-disabled-text!">
-              {tMenu('MenuFilterDrawer.ButtonCancel')}
-            </Button>
-          </div>
-        </div>
-      </AnimatedBottomSheet>
 
-      <AnimatedBottomSheet title={tMenu('MenuSortingDrawer.Heading')} visible={sortingModal} inDelay={150} onClick={toggleSortingModal}>
+      <MenuSortingDrawer
-        <div className="px-8.5 py-10 justify-between">
+        visible={sortingModal}
-          {sortings.map((v, i) => {
+        onClose={toggleSortingModal}
-            return (
+        sortings={sortings}
-              <div key={i}>
+        onSelect={changeSorting}
-                <div onClick={() => changeSorting(i)} className="text-sm2 font-normal cursor-pointer">
+        tMenu={tMenu}
-                  {tMenu('MenuSortingDrawer.Options.' + v)}
+      />
-                </div>
-                {i < sortings.length - 1 && <hr className="border-white/40 dark:border-border mb-4 mt-4" />}
-              </div>
-            )
-          })}
-        </div>
-      </AnimatedBottomSheet>
     </div>
   );
 };

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

@@ -0,0 +1,21 @@
+import { api } from "@/lib/api/axiosInstance";
+import {
+  CategoriesResponse,
+  FoodsResponse,
+} from "@/app/[name]/(Main)/types/Types";
+
+export const getFoods = async (slug: string): Promise<FoodsResponse> => {
+  const response = await api.get<FoodsResponse>(
+    `/public/foods/restaurant/${slug}`
+  );
+  return response.data;
+};
+
+export const getCategories = async (
+  slug: string
+): Promise<CategoriesResponse> => {
+  const response = await api.get<CategoriesResponse>(
+    `/public/categories/restaurant/${slug}`
+  );
+  return response.data;
+};

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

@@ -0,0 +1,35 @@
+export interface BaseResponse<T = unknown> {
+  statusCode?: number;
+  success: boolean;
+  data: T;
+  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;
+  updatedAt: string;
+  deletedAt: string | null;
+  title: string;
+  isActive: boolean;
+  restId: string;
+  avatarUrl: string | null;
+}
+
+export type CategoriesResponse = BaseResponse<Category[]>;

src/components/listview/MenuItem.tsx

@@ -8,10 +8,15 @@ import { useReceiptStore } from "@/zustand/receiptStore";
 import { motion } from "framer-motion";
 interface MenuItemProps {
   food: {
-    id: number
+    id: string | number;
-    name: string;
+    name?: string;
-    contains: string;
+    title?: string;
-    price: string;
+    foodName?: string;
+    description?: string;
+    desc?: string;
+    content?: string;
+    price: number;
+    image?: string;
   };
 }
 
@@ -21,24 +26,35 @@ const MenuItem = ({ food }: MenuItemProps) => {
   const increment = useReceiptStore(state => state.increment);
   const decrement = useReceiptStore(state => state.decrement);
 
+  if (!food) return null;
+
+  const foodName = food.name || food.title || food.foodName || 'بدون نام';
+  const foodDescription = food.description || food.desc || food.content || '';
+
   return (
     <div className="flex gap-4 w-full h-full">
       <Image
         className="rounded-xl w-28 h-28"
-        src={"/assets/images/food-preview.png"}
+        src={food.image || "/assets/images/food-preview.png"}
         height={100}
         width={100}
         alt="Food image"
       />
       <div className="w-full inline-flex flex-col justify-between">
         <div>
-          <div className="text-sm2 font-normal text-black dark:text-white">{food.name}</div>
+          <div className="text-sm2 font-normal text-black dark:text-white">
-          <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
+            {foodName}
-            {food.contains}
           </div>
+          {foodDescription && (
+            <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
+              {foodDescription}
+            </div>
+          )}
         </div>
         <div className="inline-flex gap-2 justify-between w-full items-center">
-          <span className="w-full text-sm mt-1" dir="ltr">{food.price} T</span>
+          <span className="w-full text-sm mt-1" dir="ltr">
+            {food.price ? food.price.toLocaleString('fa-IR') : '0'} T
+          </span>
           <motion.div
             whileTap={{ scale: 1.05 }}
             className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"

src/zustand/receiptStore.ts

@@ -3,15 +3,15 @@ import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 
 type ReceiptItemMap = {
-  [id: number]: {
+  [id: string | number]: {
     quantity: number;
   };
 };
 
 type ReceiptStore = {
   items: ReceiptItemMap;
-  increment: (id: number) => void;
+  increment: (id: string | number) => void;
-  decrement: (id: number) => void;
+  decrement: (id: string | number) => void;
   clear: () => void;
 };