base url

.env

@@ -2,7 +2,7 @@ VITE_TOKEN_NAME = 'dmnu_a_t'
 VITE_REFRESH_TOKEN_NAME = 'dmnu-a-rt'
 
 VITE_BASE_URL = 'https://dmenu-api.danakcorp.com'
-#VITE_BASE_URL = 'http://192.168.1.107:2000'
+# VITE_BASE_URL = 'http://192.168.99.131:2000'
 
 VITE_SOCKET_URL = 'https://dmenu-api.danakcorp.com'
 VITE_INVOICE_URL = 'https://console.danakcorp.com/receipts/'

src/config/Pages.ts

@@ -100,4 +100,7 @@ export const Pages = {
   wallet: {
     transactions: "/wallet/transactions",
   },
+  aiChats: {
+    list: "/ai-chats/list",
+  },
 };

src/langs/fa.json

@@ -69,7 +69,8 @@
     "pagers": "پیجرها",
     "notifications": "تنظیمات اعلانات",
     "statistics": "گزارشات",
-    "sliders": "اسلایدرها"
+    "sliders": "اسلایدرها",
+    "ai_chats": "چت‌های AI"
   },
   "shipment": {
     "dineIn": "سرو در رستوران",

src/pages/aiChats/List.tsx

@@ -0,0 +1,140 @@
+import { type FC, useMemo, useState } from "react";
+import { EmptyWallet } from "iconsax-react";
+import Table from "@/components/Table";
+import Filters from "@/components/Filters";
+import DefaulModal from "@/components/DefaulModal";
+import { useGetAiChats } from "./hooks/useAiChatData";
+import { useAiChatFilters } from "./hooks/useAiChatFilters";
+import { getAiChatTableColumns } from "./components/AiChatTableColumns";
+import { useAiChatFiltersFields } from "./components/AiChatFiltersFields";
+import {
+  getAiChatAnswer,
+  getAiChatQuestion,
+  type AiChat,
+} from "./types/Types";
+import type { RowDataType } from "@/components/types/TableTypes";
+import { formatPrice } from "@/helpers/func";
+
+const AiChatsList: FC = () => {
+  const [selectedChat, setSelectedChat] = useState<AiChat | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const {
+    filters,
+    currentPage,
+    apiParams,
+    handleFiltersChange,
+    handlePageChange,
+  } = useAiChatFilters();
+
+  const { data: chatsData, isLoading } = useGetAiChats(apiParams);
+
+  const chats = chatsData?.data || [];
+  const totalPages = chatsData?.meta?.totalPages || 1;
+  const totalCost = chatsData?.meta?.totalCost;
+  const pageCost = useMemo(
+    () => chats.reduce((sum, chat) => sum + (chat.cost || 0), 0),
+    [chats]
+  );
+
+  const filterFields = useAiChatFiltersFields();
+  const columns = useMemo(
+    () =>
+      getAiChatTableColumns({
+        onViewAnswer: (chat) => {
+          setSelectedChat(chat);
+          setIsModalOpen(true);
+        },
+      }),
+    []
+  );
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedChat(null);
+  };
+
+  return (
+    <div className="mt-5">
+      <div className="flex justify-between items-center">
+        <h1 className="text-lg font-light">لیست چت‌های AI</h1>
+      </div>
+
+      <div className="mt-6 bg-[#F5F5F5] rounded-2xl px-6 py-4 flex flex-wrap items-center gap-6 w-fit">
+        <div className="flex items-center gap-3">
+          <EmptyWallet size={22} color="black" />
+          <div>
+            <div className="text-xs text-description">
+              {typeof totalCost === "number"
+                ? "مجموع هزینه کل"
+                : "مجموع هزینه این صفحه"}
+            </div>
+            <div className="text-sm font-medium min-w-[100px]">
+              {formatPrice(typeof totalCost === "number" ? totalCost : pageCost)}
+            </div>
+          </div>
+        </div>
+        {typeof chatsData?.meta?.total === "number" && (
+          <div>
+            <div className="text-xs text-description">تعداد سوالات</div>
+            <div className="text-sm font-medium">
+              {chatsData.meta.total.toLocaleString("fa-IR")}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-8">
+        <Filters
+          fields={filterFields}
+          onChange={handleFiltersChange}
+          initialValues={filters}
+          searchField="search"
+        />
+      </div>
+
+      <Table<AiChat & RowDataType>
+        columns={columns}
+        data={chats as (AiChat & RowDataType)[]}
+        isloading={isLoading}
+        pagination={{
+          currentPage,
+          totalPages,
+          onPageChange: handlePageChange,
+        }}
+      />
+
+      <DefaulModal
+        open={isModalOpen}
+        close={handleCloseModal}
+        isHeader={true}
+        title_header="جزئیات چت"
+      >
+        <div className="mt-4 space-y-4">
+          <div>
+            <div className="text-xs text-description mb-1">سوال</div>
+            <p className="text-sm text-foreground whitespace-pre-wrap break-words">
+              {(selectedChat && getAiChatQuestion(selectedChat)) || "-"}
+            </p>
+          </div>
+          <div>
+            <div className="text-xs text-description mb-1">پاسخ</div>
+            <p className="text-sm text-foreground whitespace-pre-wrap break-words">
+              {(selectedChat && getAiChatAnswer(selectedChat)) || "-"}
+            </p>
+          </div>
+          {typeof selectedChat?.cost === "number" && (
+            <div>
+              <div className="text-xs text-description mb-1">هزینه</div>
+              <p className="text-sm text-foreground">
+                {formatPrice(selectedChat.cost)}
+              </p>
+            </div>
+          )}
+        </div>
+      </DefaulModal>
+    </div>
+  );
+};
+
+export default AiChatsList;

src/pages/aiChats/components/AiChatFiltersFields.tsx

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import type { FieldType } from "@/components/Filters";
+
+export const useAiChatFiltersFields = (): FieldType[] => {
+  return useMemo(
+    () => [
+      {
+        type: "input",
+        name: "search",
+        placeholder: "جستجو در سوالات",
+      },
+    ],
+    []
+  );
+};

src/pages/aiChats/components/AiChatTableColumns.tsx

@@ -0,0 +1,89 @@
+import { Eye } from "iconsax-react";
+import type { ColumnType } from "@/components/types/TableTypes";
+import {
+  getAiChatAnswer,
+  getAiChatQuestion,
+  getAiChatTokens,
+  type AiChat,
+} from "../types/Types";
+import { formatOptionalDate, formatPrice } from "@/helpers/func";
+
+interface GetAiChatTableColumnsProps {
+  onViewAnswer?: (chat: AiChat) => void;
+}
+
+export const getAiChatTableColumns = (
+  props?: GetAiChatTableColumnsProps
+): ColumnType<AiChat>[] => {
+  return [
+    {
+      key: "question",
+      title: "سوال",
+      render: (item: AiChat) => {
+        const question = getAiChatQuestion(item);
+        return (
+          <div className="max-w-md truncate" title={question}>
+            {question || "-"}
+          </div>
+        );
+      },
+    },
+    {
+      key: "type",
+      title: "نوع",
+      render: (item: AiChat) => {
+        return item.type || "-";
+      },
+    },
+    {
+      key: "cost",
+      title: "هزینه مصرف‌شده",
+      render: (item: AiChat) => {
+        return typeof item.cost === "number" ? formatPrice(item.cost) : "-";
+      },
+    },
+    {
+      key: "consumedTokens",
+      title: "توکن مصرفی",
+      render: (item: AiChat) => {
+        const tokens = getAiChatTokens(item);
+        return typeof tokens === "number"
+          ? tokens.toLocaleString("fa-IR")
+          : "-";
+      },
+    },
+    {
+      key: "createdAt",
+      title: "تاریخ",
+      render: (item: AiChat) => {
+        return formatOptionalDate(item.createdAt, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+          hour: "2-digit",
+          minute: "2-digit",
+        });
+      },
+    },
+    {
+      key: "details",
+      title: "",
+      render: (item: AiChat) => {
+        if (!getAiChatAnswer(item) || !props?.onViewAnswer) {
+          return null;
+        }
+        return (
+          <Eye
+            size={20}
+            color="#8C90A3"
+            className="cursor-pointer hover:opacity-70 transition-opacity"
+            onClick={(e) => {
+              e.stopPropagation();
+              props.onViewAnswer?.(item);
+            }}
+          />
+        );
+      },
+    },
+  ];
+};

src/pages/aiChats/hooks/useAiChatData.ts

@@ -0,0 +1,10 @@
+import * as api from "../service/AiChatService";
+import { useQuery } from "@tanstack/react-query";
+import type { GetAiChatsParams } from "../types/Types";
+
+export const useGetAiChats = (params?: GetAiChatsParams) => {
+  return useQuery({
+    queryKey: ["ai-chats", params],
+    queryFn: () => api.getAiChats(params),
+  });
+};

src/pages/aiChats/hooks/useAiChatFilters.ts

@@ -0,0 +1,43 @@
+import { useState, useMemo } from "react";
+import type { FilterValues } from "@/components/Filters";
+import type { GetAiChatsParams } from "../types/Types";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+export const useAiChatFilters = () => {
+  const [filters, setFilters] = useState<FilterValues>({});
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [limit] = useState(DEFAULT_LIMIT);
+
+  const apiParams = useMemo<GetAiChatsParams>(() => {
+    const params: GetAiChatsParams = {
+      page: currentPage,
+      limit,
+    };
+
+    if (filters.search) {
+      params.search = filters.search as string;
+    }
+
+    return params;
+  }, [filters, currentPage, limit]);
+
+  const handleFiltersChange = (newFilters: FilterValues) => {
+    setFilters(newFilters);
+    setCurrentPage(DEFAULT_PAGE);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return {
+    filters,
+    currentPage,
+    apiParams,
+    handleFiltersChange,
+    handlePageChange,
+    limit,
+  };
+};

src/pages/aiChats/service/AiChatService.ts

@@ -0,0 +1,11 @@
+import axios from "@/config/axios";
+import type { GetAiChatsParams, GetAiChatsResponse } from "../types/Types";
+
+export const getAiChats = async (
+  params?: GetAiChatsParams
+): Promise<GetAiChatsResponse> => {
+  const { data } = await axios.get<GetAiChatsResponse>("/admin/ai/chats", {
+    params,
+  });
+  return data;
+};

src/pages/aiChats/types/Types.ts

@@ -0,0 +1,47 @@
+import type { IResponse } from "@/types/response.types";
+import type { RowDataType } from "@/components/types/TableTypes";
+
+export interface AiChat extends RowDataType {
+  id: string;
+  createdAt: string;
+  updatedAt?: string;
+  deletedAt?: string | null;
+  question?: string;
+  prompt?: string;
+  message?: string;
+  answer?: string | null;
+  response?: string | null;
+  cost?: number;
+  consumedTokens?: number;
+  totalTokens?: number;
+  promptTokens?: number;
+  completionTokens?: number;
+  type?: string | null;
+}
+
+export type PaginationMeta = {
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+  totalCost?: number;
+};
+
+export type GetAiChatsParams = {
+  page?: number;
+  limit?: number;
+  search?: string;
+};
+
+export type GetAiChatsResponse = IResponse<AiChat[]> & {
+  meta: PaginationMeta;
+};
+
+export const getAiChatQuestion = (chat: AiChat): string =>
+  chat.question || chat.prompt || chat.message || "";
+
+export const getAiChatAnswer = (chat: AiChat): string =>
+  chat.answer || chat.response || "";
+
+export const getAiChatTokens = (chat: AiChat): number | undefined =>
+  chat.consumedTokens ?? chat.totalTokens ?? chat.promptTokens;

src/pages/food/Create.tsx

@@ -1,8 +1,4 @@
 import Button from "@/components/Button";
-import Input from "@/components/Input";
-import Select from "@/components/Select";
-import Textarea from "@/components/Textarea";
-import { Checkbox } from "@/components/ui/checkbox";
 import type { ErrorType } from "@/helpers/types";
 import { useFormik } from "formik";
 import { TickCircle } from "iconsax-react";
@@ -11,8 +7,11 @@ import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import * as Yup from "yup";
 import { useMultipleUpload } from "../uploader/hooks/useUploaderData";
+import BasicInfoSection from "./components/BasicInfoSection";
 import CreateFoodSidebar from "./components/CreateFoodSidebar";
+import FoodContentSection from "./components/FoodContentSection";
 import MealTimesSection from "./components/MealTimesSection";
+import ServiceOptionsSection from "./components/ServiceOptionsSection";
 import WeekDaysSection from "./components/WeekDaysSection";
 import { useCreateFood, useGetCategories } from "./hooks/useFoodData";
 import type { CreateFoodType } from "./types/Types";
@@ -117,163 +116,11 @@ const CreateFood: FC = () => {
       <div className="flex flex-col lg:flex-row gap-6 mt-6">
         <div className="flex-1">
           <div className="bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl">
-            <Input
+            <BasicInfoSection formik={formik} categories={categories} />
-              label="نام غذا"
+            <FoodContentSection formik={formik} />
-              name="title"
-              placeholder=""
-              value={formik.values.title}
-              onChange={formik.handleChange}
-              error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ""}
-            />
-
-            <div className="mt-5">
-              <Select
-                items={categories}
-                label="دسته بندی"
-                placeholder="انتخاب کنید"
-                name="categoryId"
-                value={formik.values.categoryId}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  formik.setFieldValue("categoryId", value);
-                }}
-                error_text={formik.touched.categoryId && formik.errors.categoryId ? String(formik.errors.categoryId) : ""}
-              />
-            </div>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mt-5">
-              <Input
-                name="price"
-                label="قیمت"
-                placeholder="تومان"
-                type="number"
-                seprator={true}
-                value={formik.values.price}
-                onChange={(e) => formik.setFieldValue("price", Number(e.target.value))}
-                error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ""}
-              />
-
-              <Input
-                name="discount"
-                label="تخفیف"
-                placeholder="تومان"
-                type="number"
-                seprator={true}
-                value={formik.values.discount}
-                onChange={(e) => formik.setFieldValue("discount", Number(e.target.value))}
-                error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ""}
-              />
-
-              <Input
-                name="prepareTime"
-                label="زمان آماده سازی"
-                placeholder="دقیقه"
-                type="number"
-                value={formik.values.prepareTime}
-                onChange={(e) => formik.setFieldValue("prepareTime", Number(e.target.value))}
-                error_text={formik.touched.prepareTime && formik.errors.prepareTime ? formik.errors.prepareTime : ""}
-              />
-
-              <Input
-                name="dailyStock"
-                label="موجودی روزانه"
-                placeholder="عدد"
-                type="number"
-                seprator={true}
-                value={formik.values.dailyStock}
-                onChange={(e) => formik.setFieldValue("dailyStock", Number(e.target.value))}
-                error_text={formik.touched.dailyStock && formik.errors.dailyStock ? formik.errors.dailyStock : ""}
-              />
-
-              <Input
-                name="availableStock"
-                label="موجودی فعلی"
-                placeholder="عدد"
-                type="number"
-                seprator={true}
-                value={formik.values.availableStock}
-                onChange={(e) => formik.setFieldValue("availableStock", Number(e.target.value))}
-                error_text={formik.touched.availableStock && formik.errors.availableStock ? formik.errors.availableStock : ""}
-              />
-            </div>
-
-            <div className="mt-5">
-              <Textarea
-                name="desc"
-                label="توضیحات غذا"
-                placeholder=""
-                value={formik.values.desc}
-                onChange={formik.handleChange}
-                error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ""}
-              />
-            </div>
-
-            <div className="mt-5">
-              <Input
-                name="order"
-                label="اولویت"
-                placeholder="عدد"
-                type="number"
-                value={formik.values.order}
-                onChange={(e) => formik.setFieldValue("order", Number(e.target.value))}
-                error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ""}
-              />
-            </div>
-
-            <div className="mt-5">
-              <div className="text-sm mb-2">محتوای غذا</div>
-              <div className="space-y-2">
-                {formik.values.content.map((item, index) => (
-                  <div key={index} className="flex gap-2 items-center">
-                    <Input
-                      placeholder="متن محتوا"
-                      value={item}
-                      onChange={(e) => {
-                        const newContent = [...formik.values.content];
-                        newContent[index] = e.target.value;
-                        formik.setFieldValue("content", newContent);
-                      }}
-                    />
-                    <Button
-                      type="button"
-                      className="px-3 bg-red-500 hover:bg-red-600 w-auto"
-                      onClick={() => {
-                        const newContent = formik.values.content.filter((_, i) => i !== index);
-                        formik.setFieldValue("content", newContent);
-                      }}
-                    >
-                      حذف
-                    </Button>
-                  </div>
-                ))}
-                <Button
-                  type="button"
-                  className="w-full bg-gray-200 text-gray-700 hover:bg-gray-300"
-                  onClick={() => {
-                    formik.setFieldValue("content", [...formik.values.content, ""]);
-                  }}
-                >
-                  افزودن محتوا
-                </Button>
-              </div>
-            </div>
-
             <MealTimesSection formik={formik} />
             <WeekDaysSection formik={formik} />
-
+            <ServiceOptionsSection formik={formik} />
-            <div className="mt-6">
-              <div className="text-sm mb-3">گزینه‌های سرویس</div>
-              <div className="flex gap-6 flex-wrap">
-                <div className="flex items-center gap-2">
-                  <Checkbox checked={formik.values.pickupServe} onCheckedChange={(checked) => formik.setFieldValue("pickupServe", checked)} />
-                  <label className="text-xs cursor-pointer"> بیرون‌بر</label>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Checkbox checked={formik.values.inPlaceServe} onCheckedChange={(checked) => formik.setFieldValue("inPlaceServe", checked)} />
-                  <label className="text-xs cursor-pointer">سرو در محل</label>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
 

src/pages/food/components/BasicInfoSection.tsx

@@ -1,16 +1,53 @@
 import { type FC } from 'react'
 import type { FormikProps } from 'formik'
+import { Magicpen } from 'iconsax-react'
 import Input from '@/components/Input'
 import Select from '@/components/Select'
 import Textarea from '@/components/Textarea'
+import Button from '@/components/Button'
+import { extractErrorMessage } from '@/config/func'
+import { toast } from 'react-toastify'
 import type { CreateFoodType } from '../types/Types'
+import { useGenerateFoodDescription } from '../hooks/useFoodData'
 
 type BasicInfoSectionProps = {
   formik: FormikProps<CreateFoodType>
   categories: Array<{ label: string; value: string }>
 }
 
+const parseDescription = (data: { answer?: string } | undefined): string => {
+  return data?.answer?.trim() || ''
+}
+
 const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) => {
+  const { mutate: generateDescription, isPending: isGeneratingDesc } = useGenerateFoodDescription()
+
+  const handleGenerateDescription = () => {
+    const foodName = formik.values.title.trim()
+    if (!foodName) {
+      toast.error('لطفاً ابتدا نام کامل غذا را وارد کنید')
+      return
+    }
+
+    generateDescription(
+      { foodName },
+      {
+        onSuccess: (response) => {
+          const description = parseDescription(response.data)
+          if (!description) {
+            toast.error('توضیحی از هوش مصنوعی دریافت نشد')
+            return
+          }
+          formik.setFieldValue('desc', description)
+          toast.success('توضیحات با موفقیت تولید شد')
+        },
+        onError: (error) => {
+          toast.error(extractErrorMessage(error))
+        },
+      },
+    )
+  }
+
   return (
     <>
       <Input
@@ -94,9 +131,22 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
       </div>
 
       <div className='mt-5'>
+        <div className='flex items-center justify-between mb-1'>
+          <div className='text-sm'>توضیحات غذا</div>
+          <Button
+            type='button'
+            className='w-auto h-8 px-3 bg-transparent text-primary border border-primary text-xs gap-1.5'
+            onClick={handleGenerateDescription}
+            isloading={isGeneratingDesc}
+            colorLoading='black'
+            disabled={!formik.values.title.trim() || isGeneratingDesc}
+          >
+            <Magicpen size={16} color='currentColor' />
+            تولید با AI
+          </Button>
+        </div>
         <Textarea
           name='desc'
-          label='توضیحات غذا'
           placeholder=''
           value={formik.values.desc}
           onChange={formik.handleChange}
@@ -120,4 +170,3 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
 }
 
 export default BasicInfoSection
-

src/pages/food/components/FoodContentSection.tsx

@@ -1,18 +1,70 @@
 import { type FC } from 'react'
 import type { FormikProps } from 'formik'
+import { Magicpen } from 'iconsax-react'
 import Input from '@/components/Input'
 import Button from '@/components/Button'
+import { extractErrorMessage } from '@/config/func'
+import { toast } from 'react-toastify'
 import type { CreateFoodType } from '../types/Types'
+import { useGenerateFoodContent } from '../hooks/useFoodData'
 
 type FoodContentSectionProps = {
   formik: FormikProps<CreateFoodType>
 }
 
+const parseContent = (data: { answer?: string } | undefined): string[] => {
+  if (!data?.answer) return []
+  return data.answer
+    .split('،')
+    .map((item) => item.trim())
+    .filter(Boolean)
+}
+
 const FoodContentSection: FC<FoodContentSectionProps> = ({ formik }) => {
+  const { mutate: generateContent, isPending: isGeneratingContent } = useGenerateFoodContent()
+
+  const handleGenerateContent = () => {
+    const foodName = formik.values.title.trim()
+    if (!foodName) {
+      toast.error('لطفاً ابتدا نام کامل غذا را وارد کنید')
+      return
+    }
+
+    generateContent(
+      { foodName },
+      {
+        onSuccess: (response) => {
+          const content = parseContent(response.data)
+          if (!content.length) {
+            toast.error('محتوایی از هوش مصنوعی دریافت نشد')
+            return
+          }
+          formik.setFieldValue('content', content)
+          toast.success('محتوای غذا با موفقیت تولید شد')
+        },
+        onError: (error) => {
+          toast.error(extractErrorMessage(error))
+        },
+      },
+    )
+  }
 
   return (
     <div className='mt-5'>
-      <div className='text-sm mb-2'>محتوای غذا</div>
+      <div className='flex items-center justify-between mb-2'>
+        <div className='text-sm'>محتوای غذا</div>
+        <Button
+          type='button'
+          className='w-auto h-8 px-3 bg-transparent text-primary border border-primary text-xs gap-1.5'
+          onClick={handleGenerateContent}
+          isloading={isGeneratingContent}
+          colorLoading='black'
+          disabled={!formik.values.title.trim() || isGeneratingContent}
+        >
+          <Magicpen size={16} color='currentColor' />
+          تولید با AI
+        </Button>
+      </div>
       <div className='space-y-2'>
         {formik.values.content.map((item, index) => (
           <div key={index} className='flex gap-2 items-center'>
@@ -51,4 +103,4 @@ const FoodContentSection: FC<FoodContentSectionProps> = ({ formik }) => {
   )
 }
 
-export default FoodContentSection
+export default FoodContentSection

src/pages/food/hooks/useFoodData.ts

@@ -113,3 +113,15 @@ export const useSetStockForFood = () => {
     },
   });
 };
+
+export const useGenerateFoodDescription = () => {
+  return useMutation({
+    mutationFn: api.generateFoodDescription,
+  });
+};
+
+export const useGenerateFoodContent = () => {
+  return useMutation({
+    mutationFn: api.generateFoodContent,
+  });
+};

src/pages/food/service/FoodService.ts

@@ -2,6 +2,9 @@ import axios from "@/config/axios";
 import type {
   CreateCategoryType,
   CreateFoodType,
+  GenerateFoodAiParams,
+  GenerateFoodContentResponse,
+  GenerateFoodDescriptionResponse,
   GetCategoriesResponseType,
   GetFoodDetailsResponseType,
   GetFoodsParams,
@@ -90,3 +93,23 @@ export const setStockForFood = async (foodId: string, params: SetStockType) => {
   );
   return data;
 };
+
+export const generateFoodDescription = async (
+  params: GenerateFoodAiParams,
+): Promise<GenerateFoodDescriptionResponse> => {
+  const { data } = await axios.post<GenerateFoodDescriptionResponse>(
+    `/admin/ai/food-description`,
+    params,
+  );
+  return data;
+};
+
+export const generateFoodContent = async (
+  params: GenerateFoodAiParams,
+): Promise<GenerateFoodContentResponse> => {
+  const { data } = await axios.post<GenerateFoodContentResponse>(
+    `/admin/ai/food-content`,
+    params,
+  );
+  return data;
+};

src/pages/food/types/Types.ts

@@ -155,3 +155,18 @@ export type SetStockType = {
   totalStock: number;
   availableStock: number;
 };
+
+export type GenerateFoodAiParams = {
+  foodName: string;
+};
+
+export type GenerateFoodAiResult = {
+  answer: string;
+  consumedTokens?: number;
+  cost?: number;
+  promptTokens?: number;
+  completionTokens?: number;
+};
+
+export type GenerateFoodDescriptionResponse = IResponse<GenerateFoodAiResult>;
+export type GenerateFoodContentResponse = IResponse<GenerateFoodAiResult>;

src/router/Main.tsx

@@ -57,6 +57,7 @@ import UpdateUserGroup from '@/pages/customers/groups/Update'
 import CampaignsList from '@/pages/customers/campaigns/List'
 import CreateCampaign from '@/pages/customers/campaigns/Create'
 import WalletTransactions from '@/pages/wallet/Transactions'
+import AiChatsList from '@/pages/aiChats/List'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -137,6 +138,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.statistics.list} element={<Statistics />} />
 
                             <Route path={Pages.wallet.transactions} element={<WalletTransactions />} />
+                            <Route path={Pages.aiChats.list} element={<AiChatsList />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -1,6 +1,6 @@
 import { usePermissions } from '@/hooks/usePermissions'
 import { PermissionEnum } from '@/pages/roles/enum/Enum'
-import { Calendar, Card, DocumentText, Element3, Gallery, Home2, Logout, NotificationBing, People, Security, SecurityUser, Setting2, SmsEdit, Star1, TicketDiscount, TruckFast } from 'iconsax-react'
+import { Calendar, Card, DocumentText, Element3, Gallery, Home2, Logout, MessageQuestion, NotificationBing, People, Security, SecurityUser, Setting2, SmsEdit, Star1, TicketDiscount, TruckFast } from 'iconsax-react'
 import { type FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Skeleton from 'react-loading-skeleton'
@@ -123,6 +123,16 @@ const SideBar: FC = () => {
                                 />
                             )}
 
+                            {checkPermission(PermissionEnum.MANAGE_FOODS) && (
+                                <SideBarItem
+                                    icon={<MessageQuestion variant={isActive('ai-chats') ? 'Bold' : 'Outline'} color={isActive('ai-chats') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.ai_chats')}
+                                    isActive={isActive('ai-chats')}
+                                    link={Pages.aiChats.list}
+                                    activeName='ai-chats'
+                                />
+                            )}
+
                             {checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
                                 <SideBarItem
                                     icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}