create customer

menuPreviewProxy.ts

@@ -0,0 +1,75 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+import type { ClientRequest, IncomingMessage as ProxyIncomingMessage } from "node:http";
+import type { ProxyOptions } from "vite";
+import { MENU_SITE_ORIGIN, isMenuSlugProxyPath, stripMenuPreviewCacheParam, toMenuSitePath } from "./src/config/menuPreview";
+
+const stripFrameHeaders = (_proxyRes: ProxyIncomingMessage, _req: IncomingMessage, res: ServerResponse) => {
+  res.removeHeader("x-frame-options");
+  res.removeHeader("content-security-policy");
+};
+
+const stripPreviewPageHeaders = (_proxyRes: ProxyIncomingMessage, _req: IncomingMessage, res: ServerResponse) => {
+  stripFrameHeaders(_proxyRes, _req, res);
+  res.removeHeader("cache-control");
+  res.removeHeader("etag");
+  res.removeHeader("last-modified");
+  res.setHeader("cache-control", "no-store, no-cache, must-revalidate");
+  res.setHeader("pragma", "no-cache");
+  res.setHeader("expires", "0");
+};
+
+const menuAssetProxy = (): ProxyOptions => ({
+  target: MENU_SITE_ORIGIN,
+  changeOrigin: true,
+  secure: true,
+  configure: (proxy) => {
+    proxy.on("proxyRes", stripFrameHeaders);
+  },
+});
+
+export const createMenuPreviewProxy = (): Record<string, ProxyOptions> => ({
+  "/assets/fonts": menuAssetProxy(),
+  "/assets/images": menuAssetProxy(),
+  "/_next": menuAssetProxy(),
+  "/icons": menuAssetProxy(),
+});
+
+export const shouldProxyMenuSlugRequest = (url: string | undefined) => {
+  if (!url) return false;
+
+  const pathname = url.split("?")[0] ?? "";
+  if (pathname.startsWith("/@") || pathname.startsWith("/src/") || pathname.startsWith("/node_modules/")) {
+    return false;
+  }
+
+  if (
+    pathname.startsWith("/assets/fonts/") ||
+    pathname.startsWith("/assets/images/") ||
+    pathname.startsWith("/_next/") ||
+    pathname.startsWith("/icons/")
+  ) {
+    return false;
+  }
+
+  if (pathname.startsWith("/assets/")) {
+    return false;
+  }
+
+  return isMenuSlugProxyPath(pathname);
+};
+
+export const getMenuSiteTargetUrl = (url: string) => {
+  const [pathname, search = ""] = url.split("?");
+  const menuPath = toMenuSitePath(pathname ?? "");
+  if (!menuPath) return null;
+  return `${MENU_SITE_ORIGIN}${menuPath}${stripMenuPreviewCacheParam(search)}`;
+};
+
+export const createMenuSlugProxyAgent = () => ({
+  configure: (proxy: { on: (event: string, handler: (...args: unknown[]) => void) => void }) => {
+    proxy.on("proxyReq", (proxyReq: ClientRequest) => {
+      proxyReq.removeHeader("origin");
+    });
+    proxy.on("proxyRes", stripPreviewPageHeaders);
+  },
+});

nginx.conf

@@ -5,17 +5,92 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    # SPA fallback
-    location / {
+    # Public menu site assets (Next.js)
+    location ^~ /_next/ {
+        proxy_pass https://dmenu.danakcorp.com/_next/;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    location ^~ /icons/ {
+        proxy_pass https://dmenu.danakcorp.com/icons/;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    location ^~ /assets/fonts/ {
+        proxy_pass https://dmenu.danakcorp.com/assets/fonts/;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    location ^~ /assets/images/ {
+        proxy_pass https://dmenu.danakcorp.com/assets/images/;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    # Vite build outputs to /assets by default
+    location ^~ /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # Admin SPA routes
+    location ^~ /auth/ {
         try_files $uri $uri/ /index.html;
         add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
-    # Vite build outputs to /assets by default
-    location /assets/ {
-        expires 1y;
-        add_header Cache-Control "public, immutable";
-        try_files $uri =404;
+    location = /dashboard {
+        try_files $uri /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    location = /setting {
+        try_files $uri /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    location = /statistics {
+        try_files $uri /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    location ~ ^/(foods|orders|customers|schedule|payment_methods|discounts|announcements|reports|comments|roles|admins|shipment_methods|coupons|reviews|pagers|notifications)/ {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    # Restaurant menu preview (same-origin iframe; strips X-Frame-Options from upstream)
+    location ~ ^/(?!auth|dashboard|setting|statistics|foods|orders|customers|schedule|payment_methods|discounts|announcements|reports|comments|roles|admins|shipment_methods|coupons|reviews|pagers|notifications|assets|icons|_next)([a-zA-Z0-9][a-zA-Z0-9_-]*)(/.*)?$ {
+        proxy_pass https://dmenu.danakcorp.com/$1$2$is_args$args;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+        proxy_hide_header Cache-Control;
+        proxy_hide_header ETag;
+        proxy_hide_header Last-Modified;
+        proxy_hide_header Expires;
+        add_header Cache-Control "no-store, no-cache, must-revalidate" always;
+        add_header Pragma "no-cache" always;
+        add_header Expires "0" always;
+    }
+
+    # SPA fallback
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
     # optional: favicon (avoid noisy logs if missing)

src/components/DatePicker.tsx

@@ -14,7 +14,8 @@ type Props = {
     reset?: boolean;
     isDateTime?: boolean;
     className?: string;
-    label?: string
+    label?: string;
+    isNotRequired?: boolean;
 };
 
 const DatePickerComponent: FC<Props> = (props: Props) => {
@@ -85,8 +86,11 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
     return (
         <div className="w-full">
             {props.label &&
-                <div className='text-sm'>
-                    {props.label}
+                <div className='flex items-center gap-1 text-sm'>
+                    <div>{props.label}</div>
+                    {props.isNotRequired && (
+                        <span className='text-xs text-description'>(اختیاری)</span>
+                    )}
                 </div>}
             <div className={clx(
                 'relative ',

src/components/Select.tsx

@@ -13,6 +13,7 @@ type Props = {
     error_text?: string,
     placeholder?: string,
     label?: string,
+    isNotRequired?: boolean,
 } & SelectHTMLAttributes<HTMLSelectElement>
 
 const Select: FC<Props> = (props: Props) => {
@@ -20,9 +21,14 @@ const Select: FC<Props> = (props: Props) => {
         <div className='w-full relative'>
             {
                 props.label &&
-                <label className='text-sm'>
-                    {props.label}
-                </label>
+                <div className='flex items-center gap-1'>
+                    <label className='text-sm'>
+                        {props.label}
+                    </label>
+                    {props.isNotRequired && (
+                        <span className='text-xs text-description'>(اختیاری)</span>
+                    )}
+                </div>
             }
             <select {...props} className={clx(
                 'w-full text-black block border appearance-none border-border !bg-white px-2.5 h-10 text-sm rounded-[10px] bg-gray',

src/components/UploadBox.tsx

@@ -9,6 +9,7 @@ type Props = {
     isMultiple?: boolean,
     onChange?: (file: File[]) => void;
     isReset?: boolean;
+    isNotRequired?: boolean;
 }
 
 const UploadBox: FC<Props> = (props: Props) => {
@@ -55,7 +56,12 @@ const UploadBox: FC<Props> = (props: Props) => {
 
     return (
         <div>
-            <div className='text-sm'>{props.label}</div>
+            <div className='flex items-center gap-1 text-sm'>
+                <div>{props.label}</div>
+                {props.isNotRequired && (
+                    <span className='text-xs text-description'>(اختیاری)</span>
+                )}
+            </div>
             <div className='w-full h-10 mt-1 border border-border rounded-xl items-center px-2 flex gap-2.5'>
                 <button {...getRootProps()} className=' w-fit h-7 rounded-lg text-xs px-6 bg-secondary'>
                     <input {...getInputProps()} />

src/config/menuPreview.ts

@@ -0,0 +1,65 @@
+export const MENU_SITE_ORIGIN = "https://dmenu.danakcorp.com";
+
+/** Admin routes whose first segment must not be proxied to the public menu site. */
+export const MENU_PREVIEW_RESERVED_SEGMENTS = new Set([
+  "auth",
+  "dashboard",
+  "setting",
+  "statistics",
+  "schedule",
+  "payment_methods",
+  "foods",
+  "orders",
+  "customers",
+  "discounts",
+  "announcements",
+  "reports",
+  "comments",
+  "roles",
+  "admins",
+  "shipment_methods",
+  "coupons",
+  "reviews",
+  "pagers",
+  "notifications",
+  "assets",
+  "menu-preview",
+]);
+
+export const isMenuPreviewProxyPath = (pathname: string) => {
+  if (!pathname.startsWith("/menu-preview/")) return false;
+  const rest = pathname.slice("/menu-preview".length);
+  return rest.length > 0;
+};
+
+export const isMenuSlugProxyPath = (pathname: string) => {
+  const [firstSegment] = pathname.split("/").filter(Boolean);
+  if (!firstSegment) return false;
+  return !MENU_PREVIEW_RESERVED_SEGMENTS.has(firstSegment);
+};
+
+export const toMenuPreviewProxyPath = (slug: string) => `/${slug}`;
+
+export const MENU_PREVIEW_CACHE_PARAM = "_preview";
+
+export const buildMenuPreviewUrl = (slug: string, cacheKey: number) =>
+  `${toMenuPreviewProxyPath(slug)}?${MENU_PREVIEW_CACHE_PARAM}=${cacheKey}`;
+
+export const stripMenuPreviewCacheParam = (search: string) => {
+  const params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+  params.delete(MENU_PREVIEW_CACHE_PARAM);
+  const query = params.toString();
+  return query ? `?${query}` : "";
+};
+
+export const toMenuSitePath = (pathname: string) => {
+  if (isMenuPreviewProxyPath(pathname)) {
+    return pathname.replace(/^\/menu-preview/, "") || "/";
+  }
+
+  if (isMenuSlugProxyPath(pathname)) {
+    return pathname;
+  }
+
+  return null;
+};

src/pages/customers/Create.tsx

@@ -1,155 +1,219 @@
+import { type FC, useEffect, useState } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
 import Button from '@/components/Button'
 import Input from '@/components/Input'
 import Select from '@/components/Select'
 import DatePicker from '@/components/DatePicker'
-import Textarea from '@/components/Textarea'
-import CustomerStats from '@/components/CustomerStats'
-import { TickCircle, Wallet2, TicketDiscount } from 'iconsax-react'
-import { type FC } from 'react'
+import UploadBox from '@/components/UploadBox'
+import { useCreateUser } from './hooks/useUsersData'
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
+import type { CreateUserType } from './types/Types'
+import { Pages } from '@/config/Pages'
+import type { ErrorType } from '@/helpers/types'
+import { extractErrorMessage } from '@/config/func'
+
+type CreateCustomerFormValues = {
+    phone: string
+    firstName: string
+    lastName: string
+    birthDate: string
+    marriageDate: string
+    gender: string
+}
+
+const buildCreateUserPayload = (
+    values: CreateCustomerFormValues,
+    avatarUrl?: string,
+): CreateUserType => {
+    const payload: CreateUserType = {
+        phone: values.phone.trim(),
+        firstName: values.firstName.trim(),
+        lastName: values.lastName.trim(),
+    }
+
+    if (values.birthDate) payload.birthDate = values.birthDate
+    if (values.marriageDate) payload.marriageDate = values.marriageDate
+    if (values.gender !== '') payload.gender = values.gender === 'true'
+    if (avatarUrl) payload.avatarUrl = avatarUrl
+
+    return payload
+}
 
 const CreateCustomer: FC = () => {
+    const navigate = useNavigate()
+    const { mutate: createUser, isPending } = useCreateUser()
+    const { mutate: singleUpload, isPending: isUploading } = useSingleUpload()
+    const [avatarFile, setAvatarFile] = useState<File[]>([])
+    const [avatarPreviewUrl, setAvatarPreviewUrl] = useState('')
+
+    useEffect(() => {
+        if (avatarFile.length > 0) {
+            const url = URL.createObjectURL(avatarFile[0])
+            setAvatarPreviewUrl(url)
+            return () => URL.revokeObjectURL(url)
+        }
+        setAvatarPreviewUrl('')
+    }, [avatarFile])
+
+    const formik = useFormik<CreateCustomerFormValues>({
+        initialValues: {
+            phone: '',
+            firstName: '',
+            lastName: '',
+            birthDate: '',
+            marriageDate: '',
+            gender: '',
+        },
+        validationSchema: Yup.object().shape({
+            phone: Yup.string().required('شماره تلفن الزامی است'),
+            firstName: Yup.string().required('نام الزامی است'),
+            lastName: Yup.string().required('نام خانوادگی الزامی است'),
+            birthDate: Yup.string(),
+            marriageDate: Yup.string(),
+            gender: Yup.string(),
+        }),
+        onSubmit: (values) => {
+            const submitCustomer = (avatarUrl?: string) => {
+                createUser(buildCreateUserPayload(values, avatarUrl), {
+                    onSuccess: (response) => {
+                        toast.success('مشتری با موفقیت ایجاد شد')
+                        const userId = response.data.user.id
+                        navigate(Pages.customers.detail + userId)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(extractErrorMessage(error))
+                    },
+                })
+            }
+
+            if (avatarFile.length > 0) {
+                singleUpload(avatarFile[0], {
+                    onSuccess: (response) => {
+                        const avatarUrl = response?.data?.url || ''
+                        submitCustomer(avatarUrl)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(extractErrorMessage(error, 'خطا در آپلود تصویر'))
+                    },
+                })
+            } else {
+                submitCustomer()
+            }
+        },
+    })
+
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>افزودن مشتری</h1>
-                <Button className='w-fit px-6'>
+                <Button
+                    className='w-fit px-6'
+                    isloading={isPending || isUploading}
+                    onClick={() => formik.handleSubmit()}
+                >
                     <div className='flex gap-2 items-center'>
-                        <TickCircle
-                            size={20}
-                            color='#fff'
-                        />
+                        <TickCircle size={20} color='#fff' />
                         <span>ثبت مشتری</span>
                     </div>
                 </Button>
             </div>
 
-            <div className='flex gap-7 mt-9'>
-                <div className='flex-1'>
-                    <div className='w-full bg-white rounded-4xl p-8'>
-                        <div className='text-lg font-light'>
-                            اطلاعات مشتری
-                        </div>
+            <div className='mt-9'>
+                <div className='w-full bg-white rounded-4xl p-8'>
+                    <div className='text-lg font-light'>اطلاعات مشتری</div>
 
-                        <div className='grid grid-cols-2 gap-4 mt-6'>
-                            <Input
-                                label='نام'
-                                placeholder=''
-                                name='name'
-                            />
-                            <Input
-                                label='کد ملی'
-                                placeholder=''
-                                name='nationalCode'
-                            />
-                        </div>
+                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6'>
+                        <Input
+                            label='شماره تماس'
+                            placeholder='۰۹۱۲۱۲۳۴۵۶۷'
+                            name='phone'
+                            value={formik.values.phone}
+                            onChange={formik.handleChange}
+                            error_text={
+                                formik.touched.phone && formik.errors.phone
+                                    ? formik.errors.phone
+                                    : ''
+                            }
+                        />
+                        <Select
+                            label='جنسیت'
+                            placeholder='انتخاب'
+                            name='gender'
+                            value={formik.values.gender}
+                            onChange={formik.handleChange}
+                            isNotRequired
+                            items={[
+                                { value: 'true', label: 'مرد' },
+                                { value: 'false', label: 'زن' },
+                            ]}
+                        />
+                    </div>
 
-                        <div className='grid grid-cols-2 gap-4 mt-5'>
-                            <Input
-                                label='شماره تماس'
-                                placeholder=''
-                                name='phone'
-                            />
-                            <Input
-                                label='ایمیل'
-                                placeholder=''
-                                name='email'
-                                type='email'
-                            />
-                        </div>
+                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mt-5'>
+                        <Input
+                            label='نام'
+                            placeholder=''
+                            name='firstName'
+                            value={formik.values.firstName}
+                            onChange={formik.handleChange}
+                            error_text={
+                                formik.touched.firstName && formik.errors.firstName
+                                    ? formik.errors.firstName
+                                    : ''
+                            }
+                        />
+                        <Input
+                            label='نام خانوادگی'
+                            placeholder=''
+                            name='lastName'
+                            value={formik.values.lastName}
+                            onChange={formik.handleChange}
+                            error_text={
+                                formik.touched.lastName && formik.errors.lastName
+                                    ? formik.errors.lastName
+                                    : ''
+                            }
+                        />
+                    </div>
 
-                        <div className='grid grid-cols-2 gap-4 mt-5'>
-                            <div>
-                                <DatePicker
-                                    label='تاریخ تولد'
-                                    placeholder='انتخاب'
-                                    onChange={() => { }}
+                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mt-5'>
+                        <DatePicker
+                            label='تاریخ تولد'
+                            placeholder='انتخاب'
+                            isNotRequired
+                            defaulValue={formik.values.birthDate}
+                            onChange={(date) => formik.setFieldValue('birthDate', date)}
+                        />
+                        <DatePicker
+                            label='تاریخ ازدواج'
+                            placeholder='انتخاب'
+                            isNotRequired
+                            defaulValue={formik.values.marriageDate}
+                            onChange={(date) => formik.setFieldValue('marriageDate', date)}
+                        />
+                    </div>
+
+                    <div className='mt-5'>
+                        <UploadBox
+                            label='تصویر پروفایل'
+                            isNotRequired
+                            onChange={(files) => setAvatarFile(files)}
+                            isReset={avatarFile.length === 0}
+                        />
+
+                        {avatarPreviewUrl && (
+                            <div className='mt-3'>
+                                <img
+                                    src={avatarPreviewUrl}
+                                    alt='avatar preview'
+                                    className='w-20 h-20 rounded-full object-cover'
                                 />
                             </div>
-                            <DatePicker
-                                label='تاریخ ازدواج'
-                                placeholder='انتخاب'
-                                onChange={() => { }}
-                            />
-                        </div>
-                    </div>
-
-                    <div className='w-full bg-white rounded-4xl p-8 mt-8'>
-                        <div className='text-lg font-light'>
-                            آدرس
-                        </div>
-
-                        <div className='grid grid-cols-2 gap-4 mt-6'>
-                            <Select
-                                label='استان'
-                                placeholder='انتخاب'
-                                items={[]}
-                            />
-                            <Select
-                                label='شهر'
-                                placeholder='انتخاب'
-                                items={[]}
-                            />
-                        </div>
-
-                        <div className='mt-5'>
-                            <Input
-                                label='عنوان آدرس'
-                                placeholder=''
-                                name='addressTitle'
-                            />
-                        </div>
-
-                        <div className='mt-5'>
-                            <Textarea
-                                label='آدرس'
-                                placeholder=''
-                                name='address'
-                            />
-                        </div>
-                    </div>
-                </div>
-
-                <div className='w-[330px]'>
-                    <div className='bg-white rounded-4xl p-8'>
-                        <CustomerStats points={0} walletBalance='۰ تومان' />
-                        <Button className='w-full mt-5'>
-                            <div className='flex gap-2 items-center'>
-                                <Wallet2 size={16} color='#fff' />
-                                <span>افزایش موجودی کیف پول</span>
-                            </div>
-                        </Button>
-                    </div>
-
-                    <div className='mt-6 bg-white rounded-4xl p-8'>
-                        <div className='font-light'>
-                            کدهای تخفیف
-                        </div>
-                        <div className='mt-4'>
-                            <table className='w-full'>
-                                <thead>
-                                    <tr className='border-b border-border'>
-                                        <th className='text-right pb-2 font-light text-xs text-description'>
-                                            کد
-                                        </th>
-                                        <th className='text-center pb-2 font-light text-xs text-description'>
-                                            انقضا
-                                        </th>
-                                        <th className='text-center pb-2 font-light text-xs text-description'>
-                                            وضعیت
-                                        </th>
-                                    </tr>
-                                </thead>
-                            </table>
-                            <div className='text-center py-8 text-xs text-description'>
-                                کد تخفیفی موجود نیست
-                            </div>
-                            <Button className='w-full'>
-                                <div className='flex gap-2 items-center'>
-                                    <TicketDiscount size={16} color='#fff' />
-                                    <span>اضافه کردن کد تخفیف</span>
-                                </div>
-                            </Button>
-                        </div>
+                        )}
                     </div>
                 </div>
             </div>
@@ -157,4 +221,4 @@ const CreateCustomer: FC = () => {
     )
 }
 
-export default CreateCustomer
+export default CreateCustomer

src/pages/customers/types/Types.ts

@@ -101,6 +101,10 @@ export type CreateUserType = {
   phone: string;
   firstName: string;
   lastName: string;
+  birthDate?: string;
+  marriageDate?: string;
+  gender?: boolean;
+  avatarUrl?: string;
 };
 
 export type CreateUserResult = {

src/pages/settings/components/DesignSettings.tsx

@@ -1,3 +1,6 @@
+import { buildMenuPreviewUrl } from "@/config/menuPreview";
+import iphoneCamera from "@/assets/images/iphone_camera.png";
+import iphoneFrame from "@/assets/images/iphonr.png";
 import Button from "@/components/Button";
 import ColorPicker from "@/components/ColorPicker";
 import Radio from "@/components/Radio";
@@ -19,6 +22,28 @@ type BackgroundType = "pattern" | "custom";
 
 const UPLOAD_BOX_CLASS = "w-[200px] h-[362px] rounded-2xl border border-dashed border-description";
 
+const PHONE_FRAME_WIDTH = 375;
+
+/** Measured from `iphonr.png` (839×1759) — white screen rect inside the bezel. */
+const PHONE_FRAME_IMAGE = { width: 839, height: 1759 } as const;
+const PHONE_SCREEN_RECT = { left: 33, top: 36, right: 806, bottom: 1756, radius: 89 } as const;
+
+const toFramePercent = (value: number, axis: "width" | "height") =>
+  `${(value / PHONE_FRAME_IMAGE[axis]) * 100}%`;
+
+const PHONE_SCREEN_STYLE = {
+  top: toFramePercent(PHONE_SCREEN_RECT.top, "height"),
+  left: toFramePercent(PHONE_SCREEN_RECT.left, "width"),
+  right: toFramePercent(PHONE_FRAME_IMAGE.width - 1 - PHONE_SCREEN_RECT.right, "width"),
+  bottom: toFramePercent(PHONE_FRAME_IMAGE.height - 1 - PHONE_SCREEN_RECT.bottom, "height"),
+  borderRadius: (PHONE_SCREEN_RECT.radius / PHONE_FRAME_IMAGE.width) * PHONE_FRAME_WIDTH,
+} as const;
+
+const PHONE_CAMERA_STYLE = {
+  top: toFramePercent(18, "height"),
+  width: toFramePercent(178, "width"),
+} as const;
+
 const getPatternBgUrl = (item: BackgroundItemType) => item.url ?? item.bgUrl ?? "";
 
 const normalizeBgUrl = (url: string) => {
@@ -45,6 +70,7 @@ const DesignSettings: FC = () => {
   const [imageBlur, setImageBlur] = useState(0);
   const [overlayDarkness, setOverlayDarkness] = useState(0);
   const [isInitialized, setIsInitialized] = useState(false);
+  const [previewReloadKey, setPreviewReloadKey] = useState(0);
   const { data: backgrounds } = useGetBackgrounds();
   const { mutate: setBackground, isPending: isSavingBackground } = useSetBackground();
   const { mutate: updateRestaurant, isPending: isUpdatingRestaurant } = useUpdateRestaurant();
@@ -52,6 +78,11 @@ const DesignSettings: FC = () => {
   const { patterns, isLoading: isPatternsLoading, isError: isPatternsError } = useBackgroundPatterns(appliedColor);
   const { data: restaurant, refetch } = useGetRestaurant();
   const backgroundItems = useMemo(() => backgrounds?.data ?? [], [backgrounds]);
+  const menuPreviewUrl = useMemo(() => {
+    const slug = restaurant?.data?.slug;
+    if (!slug) return "";
+    return buildMenuPreviewUrl(slug, previewReloadKey);
+  }, [restaurant?.data?.slug, previewReloadKey]);
   const isSaving = isSavingBackground || isUploadingImage || isUpdatingRestaurant;
 
   useEffect(() => {
@@ -127,6 +158,12 @@ const DesignSettings: FC = () => {
     setOverlayDarkness(0);
   };
 
+  const handleSaveSuccess = useCallback(() => {
+    toast.success("تنظیمات طراحی با موفقیت ذخیره شد");
+    refetch();
+    setPreviewReloadKey(Date.now());
+  }, [refetch]);
+
   const saveCustomBackground = (bgUrl: string) => {
     const backgroundPayload: SetBackgroundType = {
       bgUrl,
@@ -140,10 +177,7 @@ const DesignSettings: FC = () => {
     }
 
     setBackground(backgroundPayload, {
-      onSuccess: () => {
-        toast.success("تنظیمات طراحی با موفقیت ذخیره شد");
-        refetch();
-      },
+      onSuccess: handleSaveSuccess,
       onError: (error: unknown) => {
         toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی"));
       },
@@ -174,10 +208,7 @@ const DesignSettings: FC = () => {
                 bgType: resolveBgType(backgroundType, selectedPatternId),
               },
               {
-                onSuccess: () => {
-                  toast.success("تنظیمات طراحی با موفقیت ذخیره شد");
-                  refetch();
-                },
+                onSuccess: handleSaveSuccess,
                 onError: (error: unknown) => {
                   toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی"));
                 },
@@ -225,8 +256,8 @@ const DesignSettings: FC = () => {
     <div className="bg-white rounded-4xl p-8">
       <div className="text-lg font-light">تنظیمات طراحی</div>
 
-      <div className="flex mt-5">
-        <div className="max-w-[506px] w-full">
+      <div className="flex mt-5 gap-10">
+        <div className="max-w-[506px] w-full shrink-0">
           <ColorPicker label="رنگ منو" value={menuColor} onChange={setMenuColor} />
 
           <div className="mt-7">
@@ -322,6 +353,40 @@ const DesignSettings: FC = () => {
             </Button>
           </div>
         </div>
+
+        <div className="flex-1 flex justify-center items-start min-w-0 sticky top-4">
+          <div className="relative shrink-0 select-none overflow-hidden" style={{ width: PHONE_FRAME_WIDTH }}>
+            <img src={iphoneFrame} alt="" className="relative z-0 w-full h-auto block pointer-events-none" draggable={false} />
+            <div
+              className="absolute z-10 overflow-hidden"
+              style={{
+                top: PHONE_SCREEN_STYLE.top,
+                left: PHONE_SCREEN_STYLE.left,
+                right: PHONE_SCREEN_STYLE.right,
+                bottom: PHONE_SCREEN_STYLE.bottom,
+                borderRadius: PHONE_SCREEN_STYLE.borderRadius,
+              }}
+            >
+              {menuPreviewUrl ? (
+                <iframe
+                  key={previewReloadKey}
+                  src={menuPreviewUrl}
+                  title="پیش‌نمایش منو"
+                  className="block h-full w-full border-0 bg-white"
+                />
+              ) : (
+                <div className="flex h-full w-full items-center justify-center bg-white text-description text-xs">در حال بارگذاری...</div>
+              )}
+            </div>
+            <img
+              src={iphoneCamera}
+              alt=""
+              className="pointer-events-none absolute left-1/2 z-20 -translate-x-1/2"
+              style={{ top: PHONE_CAMERA_STYLE.top, width: PHONE_CAMERA_STYLE.width }}
+              draggable={false}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );

src/shared/components/CustomersSubMenu.tsx

@@ -33,11 +33,11 @@ const CustomersSubMenu: FC = () => {
                     isActive={isActive('list')}
                     link={Pages.customers.list}
                 />
-                {/* <SubMenuItem
+                <SubMenuItem
                     title={t('submenu.add_customer')}
                     isActive={isActive('add')}
                     link={Pages.customers.add}
-                /> */}
+                />
             </div>
         </div>
     )

vite.config.ts

@@ -1,14 +1,81 @@
-import { defineConfig } from "vite";
+import { defineConfig, type Plugin } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import path from "path";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import { createMenuPreviewProxy, getMenuSiteTargetUrl, shouldProxyMenuSlugRequest } from "./menuPreviewProxy";
+
+const PREVIEW_NO_CACHE_HEADERS = {
+  "cache-control": "no-store, no-cache, must-revalidate",
+  pragma: "no-cache",
+  expires: "0",
+} as const;
+
+const menuSlugPreviewPlugin = (): Plugin => ({
+  name: "menu-slug-preview",
+  configureServer(server) {
+    server.middlewares.use(async (req: IncomingMessage, res: ServerResponse, next) => {
+      if (!shouldProxyMenuSlugRequest(req.url)) {
+        next();
+        return;
+      }
+
+      const targetUrl = getMenuSiteTargetUrl(req.url ?? "");
+      if (!targetUrl) {
+        next();
+        return;
+      }
+
+      try {
+        const response = await fetch(targetUrl, {
+          cache: "no-store",
+          headers: {
+            accept: req.headers.accept ?? "*/*",
+            "accept-language": req.headers["accept-language"] ?? "fa",
+            "cache-control": "no-cache",
+            pragma: "no-cache",
+          },
+        });
+
+        res.statusCode = response.status;
+        Object.entries(PREVIEW_NO_CACHE_HEADERS).forEach(([key, value]) => {
+          res.setHeader(key, value);
+        });
+        response.headers.forEach((value, key) => {
+          const lowerKey = key.toLowerCase();
+          if (
+            lowerKey === "x-frame-options" ||
+            lowerKey === "content-security-policy" ||
+            lowerKey === "content-encoding" ||
+            lowerKey === "cache-control" ||
+            lowerKey === "etag" ||
+            lowerKey === "last-modified" ||
+            lowerKey === "expires" ||
+            lowerKey === "pragma"
+          ) {
+            return;
+          }
+          res.setHeader(key, value);
+        });
+
+        const body = Buffer.from(await response.arrayBuffer());
+        res.end(body);
+      } catch {
+        next();
+      }
+    });
+  },
+});
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), menuSlugPreviewPlugin()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    proxy: createMenuPreviewProxy(),
+  },
 });