change name logind all component

package-lock.json

@@ -18,12 +18,14 @@
         "formik": "^2.4.6",
         "i18next": "^25.4.2",
         "iconsax-react": "^0.0.8",
+        "leaflet": "^1.9.4",
         "moment-jalaali": "^0.10.4",
         "rc-rate": "^2.13.1",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-dropzone": "^14.3.8",
         "react-i18next": "^15.7.2",
+        "react-leaflet": "^5.0.0-rc.2",
         "react-loading-skeleton": "^3.5.0",
         "react-multi-date-picker": "^4.5.2",
         "react-otp-input": "^3.1.1",
@@ -37,6 +39,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.33.0",
+        "@types/leaflet": "^1.9.21",
         "@types/moment-jalaali": "^0.7.9",
         "@types/node": "^24.10.1",
         "@types/react": "^19.1.10",
@@ -1456,6 +1459,17 @@
         "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@react-stately/flags": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz",
@@ -2128,6 +2142,13 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
@@ -2147,6 +2168,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/moment-jalaali": {
       "version": "0.7.9",
       "resolved": "https://registry.npmjs.org/@types/moment-jalaali/-/moment-jalaali-0.7.9.tgz",
@@ -3759,9 +3790,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3828,6 +3859,13 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause",
+      "peer": true
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4663,6 +4701,20 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0-rc.2.tgz",
+      "integrity": "sha512-1xQGYG9mEIW+nfkQhqgHImwUuB1UDlnzYFSzv6PrBFDBeYrFmv0BbpwpNAFdJg/UQ2yz5UZSL7ZwlUxjwb8MZw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0-rc.2"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-loading-skeleton": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz",

package.json

@@ -20,12 +20,14 @@
     "formik": "^2.4.6",
     "i18next": "^25.4.2",
     "iconsax-react": "^0.0.8",
+    "leaflet": "^1.9.4",
     "moment-jalaali": "^0.10.4",
     "rc-rate": "^2.13.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-dropzone": "^14.3.8",
     "react-i18next": "^15.7.2",
+    "react-leaflet": "^5.0.0-rc.2",
     "react-loading-skeleton": "^3.5.0",
     "react-multi-date-picker": "^4.5.2",
     "react-otp-input": "^3.1.1",
@@ -39,6 +41,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
+    "@types/leaflet": "^1.9.21",
     "@types/moment-jalaali": "^0.7.9",
     "@types/node": "^24.10.1",
     "@types/react": "^19.1.10",

src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom'
 import 'swiper/swiper-bundle.css';
 // import 'rc-rate/assets/index.css';
 // import "react-multi-date-picker/styles/layouts/mobile.css"
+import 'leaflet/dist/leaflet.css';
 import './assets/fonts/irancell/style.css'
 import i18next from 'i18next'
 import { I18nextProvider } from 'react-i18next'

src/components/Button.tsx

@@ -5,7 +5,7 @@ import { clx } from '../helpers/utils'
 
 type Props = {
     className?: string;
-    isLoading?: boolean,
+    isloading?: boolean,
 } & ButtonHTMLAttributes<HTMLButtonElement> &
     XOR<{ children: ReactNode }, { label: string }>;
 
@@ -18,9 +18,9 @@ const Button: FC<Props> = memo((props: Props) => {
     );
 
     return (
-        <button disabled={props.isLoading} {...props} className={`${buttonClass} ${props.className}`} >
+        <button disabled={props.isloading} {...props} className={`${buttonClass} ${props.className}`} >
             {
-                props.isLoading ?
+                props.isloading ?
                     <MoonLoader color="white" size={16} />
                     :
                     props.label || props.children

src/components/ModalConfrim.tsx

@@ -5,7 +5,7 @@ import Button from './Button'
 import Textarea from './Textarea'
 
 type Props = {
-    isLoading?: boolean,
+    isloading?: boolean,
     close: () => void,
     isOpen: boolean,
     onConfrim: (text?: string) => void,
@@ -51,7 +51,7 @@ const ModalConfrim: FC<Props> = (props: Props) => {
                     <Button
                         label={t('confrim.yes')}
                         onClick={() => props.onConfrim(props.isHasDescription ? description : undefined)}
-                        isLoading={props.isLoading}
+                        isloading={props.isloading}
                     />
                     <Button
                         label={t('confrim.cancel')}

src/components/Table.tsx

@@ -9,7 +9,7 @@ import Pagination from '../components/Pagination';
 const Table = <T extends RowDataType>({
     columns,
     data,
-    isLoading = false,
+    isloading = false,
     onRowClick,
     className = '',
     rowClassName = '',
@@ -74,7 +74,7 @@ const Table = <T extends RowDataType>({
         const hasActions = (actionsPosition === 'top' || actionsPosition === 'above-header') && (actions || (selectable && selectedRows.length > 0 && selectedActions));
         const roundedClass = hasActions ? 'rounded-b-2xl' : 'rounded-2xl';
 
-        if (isLoading) {
+        if (isloading) {
             return (
                 <div className={`bg-white ${roundedClass} overflow-hidden`}>
                     {Array.from({ length: emptyRowsCount }).map((_, index) => (
@@ -145,7 +145,7 @@ const Table = <T extends RowDataType>({
     };
 
     const renderTableBody = () => {
-        if (isLoading) {
+        if (isloading) {
             return (
                 <DefaultTableSkeleton tdCount={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} trCount={emptyRowsCount} />
             );

src/components/TrashWithConfrim.tsx

@@ -4,10 +4,10 @@ import ModalConfrim from './ModalConfrim'
 
 interface Props {
     onDelete: () => void,
-    isLoading?: boolean
+    isloading?: boolean
 }
 
-const TrashWithConfrim: FC<Props> = ({ onDelete, isLoading = false }) => {
+const TrashWithConfrim: FC<Props> = ({ onDelete, isloading = false }) => {
     const [isConfirm, setIsConfirm] = useState(false)
     return (
         <div>
@@ -21,7 +21,7 @@ const TrashWithConfrim: FC<Props> = ({ onDelete, isLoading = false }) => {
                 isOpen={isConfirm}
                 close={() => setIsConfirm(false)}
                 onConfrim={() => onDelete()}
-                isLoading={isLoading}
+                isloading={isloading}
             />
         </div>
     )

src/components/types/TableTypes.ts

@@ -29,7 +29,7 @@ export interface ActionType {
 export interface TableProps<T extends RowDataType> {
   columns: ColumnType<T>[];
   data?: T[];
-  isLoading?: boolean;
+  isloading?: boolean;
   onRowClick?: (id: string | number, item: T) => void;
   className?: string;
   rowClassName?: string | ((item: T, index: number) => string);

src/pages/auth/components/LoginStep1.tsx

@@ -103,7 +103,7 @@ const LoginStep1: FC = () => {
                 label={t('auth.next')}
                 className='mt-8'
                 onClick={() => formik.handleSubmit()}
-                isLoading={loginWithOtp.isPending}
+                isloading={loginWithOtp.isPending}
             />
 
         </div>

src/pages/auth/components/LoginStep2.tsx

@@ -109,7 +109,7 @@ const LoginStep2: FC = () => {
                 label={t('auth.login')}
                 className='mt-8'
                 onClick={() => formik.handleSubmit()}
-                isLoading={otpVerify.isPending}
+                isloading={otpVerify.isPending}
             />
 
             {/* <div onClick={() => setStepLogin(3)} className='mt-6 cursor-pointer flex gap-2 items-center text-sm'>

src/pages/auth/components/RegisterStep1.tsx

@@ -68,7 +68,7 @@ const RegisterStep1: FC = () => {
                 label={t('auth.next')}
                 className='mt-8'
                 onClick={() => formik.handleSubmit()}
-                isLoading={loginWithOtp.isPending || checkHasAccount.isPending}
+                isloading={loginWithOtp.isPending || checkHasAccount.isPending}
             />
         </div>
     )

src/pages/food/Category.tsx

@@ -180,7 +180,7 @@ const CategoryFood: FC = () => {
                 <Table
                     columns={columns}
                     data={filteredCategories}
-                    isLoading={isLoading}
+                    isloading={isLoading}
                     selectable
                 />
             </div>

src/pages/food/Create.tsx

@@ -116,7 +116,7 @@ const CreateFood: FC = () => {
                     <Button
                         className='px-5'
                         onClick={() => formik.handleSubmit()}
-                        isLoading={isPending || isUploading}
+                        isloading={isPending || isUploading}
                     >
                         <div className='flex gap-2 items-center'>
                             <TickCircle className='size-5' color='white' />

src/pages/food/List.tsx

@@ -60,7 +60,7 @@ const FoodsList: FC = () => {
             <Table
                 columns={columns}
                 data={foods}
-                isLoading={isLoading}
+                isloading={isLoading}
                 pagination={{
                     currentPage,
                     totalPages,

src/pages/food/Update.tsx

@@ -182,7 +182,7 @@ const UpdateFood: FC = () => {
           <Button
             className='px-5'
             onClick={() => formik.handleSubmit()}
-            isLoading={isPending || isUploading}
+            isloading={isPending || isUploading}
           >
             <div className='flex gap-2 items-center'>
               <TickCircle className='size-5' color='white' />

src/pages/food/components/CategoryForm.tsx

@@ -66,7 +66,7 @@ const CategoryForm: FC<Props> = ({
       <Button
         onClick={() => formik.handleSubmit()}
         className="w-full"
-        isLoading={isSubmitting}
+        isloading={isSubmitting}
       >
         <Add color='#fff' size={20} className="ml-2" />
         ذخیره

src/pages/food/components/CategoryTableColumns.tsx

@@ -59,7 +59,7 @@ const CategoryTableColumns = ({ onStatusChange, onEdit, onDelete, isDeleting = f
             />
             <TrashWithConfrim
               onDelete={() => onDelete(item.id)}
-              isLoading={isDeleting}
+              isloading={isDeleting}
             />
           </div>
         )

src/pages/food/components/FoodTableColumns.tsx

@@ -80,7 +80,7 @@ export const getFoodTableColumns = ({ onDelete, isDeleting }: GetFoodTableColumn
                         </Link>
                         <TrashWithConfrim
                             onDelete={() => onDelete(item.id)}
-                            isLoading={isDeleting}
+                            isloading={isDeleting}
                         />
                     </div>
                 )

src/pages/roles/Create.tsx

@@ -49,7 +49,7 @@ const CreateRole: FC = () => {
                     <Button
                         className='px-5'
                         onClick={() => formik.handleSubmit()}
-                        isLoading={isPending}
+                        isloading={isPending}
                     >
                         <div className='flex gap-2 items-center'>
                             <TickCircle className='size-5' color='white' />

src/pages/roles/List.tsx

@@ -58,7 +58,7 @@ const RolesList: FC = () => {
             <Table
                 columns={columns}
                 data={roles}
-                isLoading={isLoading}
+                isloading={isLoading}
                 pagination={{
                     currentPage,
                     totalPages,

src/pages/roles/Update.tsx

@@ -81,7 +81,7 @@ const UpdateRole: FC = () => {
                     <Button
                         className='px-5'
                         onClick={() => formik.handleSubmit()}
-                        isLoading={isPending}
+                        isloading={isPending}
                     >
                         <div className='flex gap-2 items-center'>
                             <TickCircle className='size-5' color='white' />

src/pages/roles/components/RoleTableColumns.tsx

@@ -46,7 +46,7 @@ export const getRoleTableColumns = ({ onDelete, isDeleting }: GetRoleTableColumn
                         {onDelete && (
                             <TrashWithConfrim
                                 onDelete={() => onDelete(item.id)}
-                                isLoading={isDeleting}
+                                isloading={isDeleting}
                             />
                         )}
                     </div>

src/pages/schedule/Create.tsx

@@ -56,7 +56,7 @@ const CreateSchedule: FC = () => {
                     <Button
                         className='px-5'
                         onClick={() => formik.handleSubmit()}
-                        isLoading={isPending}
+                        isloading={isPending}
                     >
                         <div className='flex gap-2 items-center'>
                             <TickCircle className='size-5' color='white' />

src/pages/schedule/List.tsx

@@ -61,7 +61,7 @@ const ScheduleList: FC = () => {
             <Table
                 columns={columns}
                 data={schedules}
-                isLoading={isLoading}
+                isloading={isLoading}
                 pagination={{
                     currentPage,
                     totalPages,

src/pages/schedule/Update.tsx

@@ -83,7 +83,7 @@ const UpdateSchedule: FC = () => {
                     <Button
                         className='px-5'
                         onClick={() => formik.handleSubmit()}
-                        isLoading={isPending}
+                        isloading={isPending}
                     >
                         <div className='flex gap-2 items-center'>
                             <TickCircle className='size-5' color='white' />

src/pages/schedule/components/ScheduleTableColumns.tsx

@@ -62,7 +62,7 @@ export const getScheduleTableColumns = ({ onDelete, isDeleting, t }: GetSchedule
                         {onDelete && (
                             <TrashWithConfrim
                                 onDelete={() => onDelete(item.id)}
-                                isLoading={isDeleting}
+                                isloading={isDeleting}
                             />
                         )}
                     </div>

src/pages/settings/GeneralSettings.tsx

@@ -1,24 +1,253 @@
+import Button from '@/components/Button'
 import ColorPicker from '@/components/ColorPicker'
 import Input from '@/components/Input'
-import { type FC } from 'react'
+import Textarea from '@/components/Textarea'
+import UploadBox from '@/components/UploadBox'
+import DefaulModal from '@/components/DefaulModal'
+import LocationPicker from './components/LocationPicker'
+import LocationInput from './components/LocationInput'
+import { TickCircle } from 'iconsax-react'
+import { type FC, useEffect, useState } from 'react'
+import { useGetRestaurant, useUpdateRestaurant } from './hooks/useSettingData'
+import { useSingleUpload } from '../uploader/hooks/useUploaderData'
+import type { UpdateRestaurantType } from './types/Types'
+import type { ErrorType } from '@/helpers/types'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
+
+const validationSchema = yup.object({
+    name: yup.string().required('نام رستوران الزامی است'),
+    menuColor: yup.string().required('رنگ منو الزامی است'),
+    phone: yup.string().required('شماره تماس الزامی است'),
+    instagram: yup.string().url('لینک اینستاگرام معتبر نیست').nullable(),
+    address: yup.string().required('آدرس الزامی است'),
+    latitude: yup.number().required('انتخاب موقعیت روی نقشه الزامی است'),
+    longitude: yup.number().required('انتخاب موقعیت روی نقشه الزامی است'),
+    description: yup.string().nullable(),
+})
 
 const GeneralSettings: FC = () => {
+    const { data: restaurant, refetch } = useGetRestaurant()
+    const { mutate: updateRestaurant, isPending } = useUpdateRestaurant()
+    const { mutate: singleUpload, isPending: isUploading } = useSingleUpload()
+    const [isLocationModalOpen, setIsLocationModalOpen] = useState(false)
+    const [logoFile, setLogoFile] = useState<File[]>([])
+
+    const formik = useFormik<UpdateRestaurantType>({
+        initialValues: {
+            name: '',
+            menuColor: '#000000',
+            phone: '',
+            instagram: '',
+            address: '',
+            latitude: 0,
+            longitude: 0,
+            description: '',
+            logo: '',
+        },
+        validationSchema,
+        onSubmit: (values) => {
+            const submitSettings = (logoUrl?: string) => {
+                const settingsData: UpdateRestaurantType = {
+                    ...values,
+                    logo: logoUrl || values.logo || ''
+                }
+
+                updateRestaurant(settingsData, {
+                    onSuccess: () => {
+                        toast.success('تنظیمات با موفقیت ذخیره شد')
+                        refetch()
+                        setLogoFile([])
+                    },
+                    onError: (error: unknown) => {
+                        toast.error('خطا در ذخیره تنظیمات')
+                        console.error(error)
+                    },
+                })
+            }
+
+            if (logoFile.length > 0) {
+                singleUpload(logoFile[0], {
+                    onSuccess: (response) => {
+                        const logoUrl = response?.data?.url || ''
+                        submitSettings(logoUrl)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(extractErrorMessage(error, 'خطا در آپلود لوگو'))
+                    },
+                })
+            } else {
+                submitSettings()
+            }
+        },
+        enableReinitialize: true,
+    })
+
+    useEffect(() => {
+        if (restaurant?.data) {
+            const restaurantData = restaurant.data
+            formik.setValues({
+                name: restaurantData.name || '',
+                menuColor: restaurantData.menuColor || '#000000',
+                phone: restaurantData.phoneNumber || '',
+                instagram: restaurantData.instagram || '',
+                address: restaurantData.address || '',
+                latitude: restaurantData.latitude || 0,
+                longitude: restaurantData.longitude || 0,
+                description: restaurantData.description || '',
+                logo: restaurantData.logo || '',
+            })
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [restaurant])
+
+    const handleLocationSelect = (lat: number, lng: number) => {
+        formik.setFieldValue('latitude', lat)
+        formik.setFieldValue('longitude', lng)
+        setIsLocationModalOpen(false)
+    }
+
+
     return (
-        <div className='bg-white rounded-4xl p-8'>
+        <>
-            <div className='text-lg font-light'>
+            <div className='bg-white rounded-4xl p-8'>
-                تنظیمات عمومی
+                <div className='text-lg font-light'>
+                    تنظیمات عمومی
+                </div>
+
+                <form onSubmit={formik.handleSubmit}>
+                    <div className='mt-8 rowTwoInput'>
+                        <Input
+                            label='نام رستوران'
+                            name='name'
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            error_text={formik.touched.name && formik.errors.name ? formik.errors.name : undefined}
+                        />
+
+                        <ColorPicker
+                            label='رنگ منو'
+                            value={formik.values.menuColor}
+                            onChange={(value) => formik.setFieldValue('menuColor', value)}
+                            error_text={formik.touched.menuColor && formik.errors.menuColor ? formik.errors.menuColor : undefined}
+                        />
+                    </div>
+
+                    <div className='mt-8'>
+                        <UploadBox
+                            label='لوگو'
+                            onChange={(files) => setLogoFile(files)}
+                            isReset={logoFile.length === 0 && !formik.values.logo}
+                        />
+
+                        {
+                            formik.values.logo && (
+                                <div className='mt-3'>
+                                    <img src={formik.values.logo} alt='logo' className='w-20 h-20 rounded-full' />
+                                </div>
+                            )
+                        }
+                    </div>
+
+                    <div className='mt-8 rowTwoInput'>
+                        <Input
+                            label='شماره تماس'
+                            name='phone'
+                            value={formik.values.phone}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : undefined}
+                        />
+
+                        <Input
+                            label='اینستاگرام'
+                            name='instagram'
+                            value={formik.values.instagram}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            error_text={formik.touched.instagram && formik.errors.instagram ? formik.errors.instagram : undefined}
+                            placeholder='https://instagram.com/...'
+                        />
+                    </div>
+
+                    <div className='mt-8'>
+                        <Textarea
+                            label='آدرس'
+                            name='address'
+                            value={formik.values.address}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            error_text={formik.touched.address && formik.errors.address ? formik.errors.address : undefined}
+                        />
+                    </div>
+
+                    <LocationInput
+                        label='موقعیت روی نقشه'
+                        latitude={formik.values.latitude}
+                        longitude={formik.values.longitude}
+                        onClick={() => setIsLocationModalOpen(true)}
+                        error_text={
+                            (formik.touched.latitude || formik.touched.longitude) && (formik.errors.latitude || formik.errors.longitude)
+                                ? formik.errors.latitude || formik.errors.longitude
+                                : undefined
+                        }
+                    />
+
+                    <div className='mt-8'>
+                        <Textarea
+                            label='توضیحات'
+                            name='description'
+                            value={formik.values.description || ''}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : undefined}
+                        />
+                    </div>
+
+                    <div className='mt-8 flex justify-end'>
+                        <Button
+                            type='submit'
+                            className='w-fit px-6'
+                            isloading={isPending || isUploading}
+                            disabled={isPending || isUploading}
+                        >
+                            <div className='flex gap-2 items-center'>
+                                <TickCircle
+                                    size={20}
+                                    color='#fff'
+                                />
+                                <span>ذخیره</span>
+                            </div>
+                        </Button>
+                    </div>
+                </form>
             </div>
 
-            <div className='mt-8 rowTwoInput'>
+            <DefaulModal
-                <Input
+                open={isLocationModalOpen}
-                    label='نام رستوران'
+                close={() => setIsLocationModalOpen(false)}
-                />
+                isHeader={true}
-
+                title_header='انتخاب موقعیت روی نقشه'
-                <ColorPicker
+                width={800}
-                    label='رنگ منو'
+            >
-                />
+                <div className='p-4'>
-            </div>
+                    <LocationPicker
-        </div>
+                        initialPosition={
+                            formik.values.latitude && formik.values.longitude
+                                ? [formik.values.latitude, formik.values.longitude]
+                                : undefined
+                        }
+                        onLocationSelect={handleLocationSelect}
+                    />
+                    <div className='mt-4 text-xs text-gray-600 text-center'>
+                        روی نقشه کلیک کنید تا موقعیت را انتخاب کنید
+                    </div>
+                </div>
+            </DefaulModal>
+        </>
     )
 }
 

src/pages/settings/components/LocationInput.tsx

@@ -0,0 +1,45 @@
+import { type FC } from 'react'
+import { Location } from 'iconsax-react'
+import Error from '@/components/Error'
+
+type LocationInputProps = {
+    label?: string
+    latitude?: number
+    longitude?: number
+    onClick: () => void
+    error_text?: string
+}
+
+const LocationInput: FC<LocationInputProps> = ({
+    label,
+    latitude,
+    longitude,
+    onClick,
+    error_text,
+}) => {
+    const getLocationDisplay = () => {
+        if (latitude && longitude) {
+            return `${latitude.toFixed(6)}, ${longitude.toFixed(6)}`
+        }
+        return 'روی نقشه کلیک کنید'
+    }
+
+    return (
+        <div className='mt-8'>
+            {label && <div className='text-sm mb-1'>{label}</div>}
+            <div
+                onClick={onClick}
+                className='w-full bg-white h-10 text-black px-4 text-xs rounded-xl border border-border flex items-center gap-2 cursor-pointer mt-1'
+            >
+                <Location size={20} color='#8C90A3' />
+                <span className='flex-1 text-right'>{getLocationDisplay()}</span>
+            </div>
+            {error_text && (
+                <Error errorText={error_text} />
+            )}
+        </div>
+    )
+}
+
+export default LocationInput
+

src/pages/settings/components/LocationPicker.tsx

@@ -0,0 +1,72 @@
+import { type FC, useState, useEffect } from 'react'
+import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet'
+import { Icon } from 'leaflet'
+import type { LatLngTuple } from 'leaflet'
+
+interface LocationPickerProps {
+    initialPosition?: [number, number]
+    onLocationSelect: (lat: number, lng: number) => void
+}
+
+const ChangeView = ({ center, zoom }: { center: LatLngTuple; zoom: number }) => {
+    const map = useMap()
+    useEffect(() => {
+        map.setView(center, zoom)
+    }, [map, center, zoom])
+    return null
+}
+
+const LocationPicker: FC<LocationPickerProps> = ({ initialPosition, onLocationSelect }) => {
+    const [position, setPosition] = useState<LatLngTuple>(
+        initialPosition || [35.6892, 51.3890] // تهران به عنوان پیش‌فرض
+    )
+
+    useEffect(() => {
+        if (initialPosition) {
+            setPosition(initialPosition)
+        }
+    }, [initialPosition])
+
+    const LocationMarker = () => {
+        useMapEvents({
+            click(e) {
+                const newPosition: LatLngTuple = [e.latlng.lat, e.latlng.lng]
+                setPosition(newPosition)
+                onLocationSelect(newPosition[0], newPosition[1])
+            },
+        })
+
+        const customIcon = new Icon({
+            iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+            iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+            shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41],
+        })
+
+        return position ? <Marker position={position} icon={customIcon} /> : null
+    }
+
+    return (
+        <div className="w-full h-[400px] rounded-xl overflow-hidden">
+            <MapContainer
+                center={position}
+                zoom={13}
+                style={{ height: '100%', width: '100%' }}
+                scrollWheelZoom={true}
+            >
+                <ChangeView center={position} zoom={13} />
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <LocationMarker />
+            </MapContainer>
+        </div>
+    )
+}
+
+export default LocationPicker
+

src/pages/settings/hooks/useSettingData.ts

@@ -0,0 +1,15 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/SettingService";
+
+export const useGetRestaurant = () => {
+  return useQuery({
+    queryKey: ["restaurant"],
+    queryFn: api.getRestaurant,
+  });
+};
+
+export const useUpdateRestaurant = () => {
+  return useMutation({
+    mutationFn: api.updateRestaurant,
+  });
+};

src/pages/settings/service/SettingService.ts

@@ -0,0 +1,20 @@
+import axios from "@/config/axios";
+import type {
+  GetRestaurantResponse,
+  UpdateRestaurantType,
+} from "../types/Types";
+
+export const getRestaurant = async (): Promise<GetRestaurantResponse> => {
+  const { data } = await axios.get<GetRestaurantResponse>(
+    "/admin/restaurants/my-restaurant"
+  );
+  return data;
+};
+
+export const updateRestaurant = async (params: UpdateRestaurantType) => {
+  const { data } = await axios.patch(
+    "/admin/restaurants/my-restaurant",
+    params
+  );
+  return data;
+};

src/pages/settings/types/Types.ts

@@ -0,0 +1,42 @@
+import type { IResponse } from "@/types/response.types";
+
+export type UpdateRestaurantType = {
+  name: string;
+  menuColor: string;
+  phone: string;
+  instagram: string;
+  address: string;
+  logo?: string;
+  latitude: number;
+  longitude: number;
+  description: string;
+};
+
+export type Restaurant = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  slug: string;
+  logo: string | null;
+  address: string | null;
+  menuColor: string | null;
+  latitude: number | null;
+  longitude: number | null;
+  serviceArea: unknown | null;
+  isActive: boolean;
+  establishedYear: number | null;
+  phoneNumber: string | null;
+  instagram: string | null;
+  telegram: string | null;
+  whatsapp: string | null;
+  description: string | null;
+  seoTitle: string | null;
+  seoDescription: string | null;
+  tagNames: unknown | null;
+  images: unknown | null;
+  vat: number;
+};
+
+export type GetRestaurantResponse = IResponse<Restaurant>;