generate qr code

.env

@@ -5,3 +5,4 @@ VITE_BASE_URL = 'https://dmenu-api.danakcorp.com'
 # 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/'

Dockerfile

@@ -4,6 +4,12 @@ FROM node:20-alpine AS builder
 WORKDIR /build
 
 # ARG NPM_REGISTRY=https://mirror-npm.runflare.com
+RUN sed -i 's|https://dl-cdn.alpinelinux.org/alpine|https://mirror.de.velop.ir/alpine|g' /etc/apk/repositories
+
+# Configure npm registry mirror (Liara)
+ENV NPM_CONFIG_REGISTRY=https://package-mirror.liara.ir/repository/npm/
+RUN npm config set registry https://package-mirror.liara.ir/repository/npm/
+
 
 # Vite embeds these at build time
 ARG VITE_BASE_URL=https://dmenu-api.danakcorp.com

menuPreviewProxy.ts

@@ -0,0 +1,75 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+import type { 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: NonNullable<ProxyOptions["configure"]> } => ({
+  configure: (proxy) => {
+    proxy.on("proxyReq", (proxyReq) => {
+      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|wallet)/ {
+        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|wallet|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)

package-lock.json

@@ -20,6 +20,7 @@
         "iconsax-react": "^0.0.8",
         "leaflet": "^1.9.4",
         "moment-jalaali": "^0.10.4",
+        "qrcode.react": "^4.2.0",
         "rc-rate": "^2.13.1",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
@@ -37,6 +38,7 @@
         "socket.io-client": "^4.8.1",
         "swiper": "^11.2.10",
         "tailwind-merge": "^3.3.1",
+        "xlsx": "^0.18.5",
         "yup": "^1.7.0",
         "zustand": "^5.0.8"
       },
@@ -45,6 +47,7 @@
         "@types/leaflet": "^1.9.21",
         "@types/moment-jalaali": "^0.7.9",
         "@types/node": "^24.10.1",
+        "@types/qrcode.react": "^1.0.5",
         "@types/react": "^19.1.10",
         "@types/react-dom": "^19.1.7",
         "@vitejs/plugin-react": "^5.0.0",
@@ -1630,9 +1633,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1646,9 +1646,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1662,9 +1659,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1678,9 +1672,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1694,9 +1685,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1710,9 +1698,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1726,9 +1711,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1742,9 +1724,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1758,9 +1737,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1774,9 +1750,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1790,9 +1763,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1806,9 +1776,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1822,9 +1789,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2421,6 +2385,16 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/qrcode.react": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode.react/-/qrcode.react-1.0.5.tgz",
+      "integrity": "sha512-BghPtnlwvrvq8QkGa1H25YnN+5OIgCKFuQruncGWLGJYOzeSKiix/4+B9BtfKF2wf5ja8yfyWYA3OXju995G8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.1.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.11.tgz",
@@ -2761,6 +2735,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -2986,6 +2969,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3027,6 +3023,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3086,6 +3091,18 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3842,6 +3859,15 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4973,6 +4999,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5510,6 +5545,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -5995,6 +6042,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -6026,6 +6091,27 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xmlhttprequest-ssl": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",

package.json

@@ -22,6 +22,7 @@
     "iconsax-react": "^0.0.8",
     "leaflet": "^1.9.4",
     "moment-jalaali": "^0.10.4",
+    "qrcode.react": "^4.2.0",
     "rc-rate": "^2.13.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
@@ -39,6 +40,7 @@
     "socket.io-client": "^4.8.1",
     "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.1",
+    "xlsx": "^0.18.5",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
   },
@@ -47,6 +49,7 @@
     "@types/leaflet": "^1.9.21",
     "@types/moment-jalaali": "^0.7.9",
     "@types/node": "^24.10.1",
+    "@types/qrcode.react": "^1.0.5",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",

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/DateTimePicker.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState, type FC } from 'react';
+import DatePicker from './DatePicker';
+import TimePicker from './TimePicker';
+
+type Props = {
+  onChange: (value: string) => void;
+  defaultValue?: string;
+  placeholder?: string;
+};
+
+const parseDateTime = (value?: string) => {
+  if (!value) {
+    return { date: '', time: '' };
+  }
+
+  const [datePart, timePart] = value.split('T');
+  const time = timePart?.slice(0, 5) || '';
+
+  return {
+    date: datePart || '',
+    time,
+  };
+};
+
+const DateTimePicker: FC<Props> = ({ onChange, defaultValue, placeholder }) => {
+  const [date, setDate] = useState('');
+  const [time, setTime] = useState('');
+
+  useEffect(() => {
+    const parsed = parseDateTime(defaultValue);
+    setDate(parsed.date);
+    setTime(parsed.time);
+  }, [defaultValue]);
+
+  const emitChange = (nextDate: string, nextTime: string) => {
+    if (nextDate && nextTime) {
+      onChange(`${nextDate}T${nextTime}:00`);
+      return;
+    }
+
+    onChange('');
+  };
+
+  const handleDateChange = (nextDate: string) => {
+    setDate(nextDate);
+    emitChange(nextDate, time);
+  };
+
+  const handleTimeChange = (nextTime: string) => {
+    setTime(nextTime);
+    emitChange(date, nextTime);
+  };
+
+  return (
+    <div className="flex flex-col sm:flex-row gap-2 min-w-[280px]">
+      <DatePicker
+        placeholder={placeholder || 'تاریخ'}
+        onChange={handleDateChange}
+        defaulValue={date}
+      />
+      <TimePicker
+        placeholder="زمان"
+        onChange={handleTimeChange}
+        defaultValue={time}
+      />
+    </div>
+  );
+};
+
+export default DateTimePicker;

src/components/Filters.tsx

@@ -1,6 +1,7 @@
 import { type FC, useEffect, useState, type ChangeEvent, useRef } from 'react';
 import { Filter } from 'iconsax-react';
 import DatePicker from './DatePicker';
+import DateTimePicker from './DateTimePicker';
 import Input from './Input';
 import Select, { type ItemsSelectType } from './Select';
 import MultiSelect from './MultiSelect';
@@ -15,6 +16,13 @@ export type DateFieldType = {
     defaultValue?: string;
 };
 
+export type DateTimeFieldType = {
+    type: 'datetime';
+    name: string;
+    placeholder: string;
+    defaultValue?: string;
+};
+
 export type SelectFieldType = {
     type: 'select';
     name: string;
@@ -38,7 +46,7 @@ export type InputFieldType = {
     defaultValue?: string;
 };
 
-export type FieldType = DateFieldType | SelectFieldType | MultiSelectFieldType | InputFieldType;
+export type FieldType = DateFieldType | DateTimeFieldType | SelectFieldType | MultiSelectFieldType | InputFieldType;
 
 export type FilterValues = Record<string, string | string[] | null>;
 
@@ -49,6 +57,7 @@ interface FiltersProps {
     className?: string;
     fieldClassName?: string;
     searchField?: string;
+    showClearButton?: boolean;
 }
 
 const Filters: FC<FiltersProps> = ({
@@ -57,7 +66,8 @@ const Filters: FC<FiltersProps> = ({
     initialValues = {},
     className = "flex flex-col md:flex-row justify-between items-start md:items-center gap-4",
     fieldClassName = "flex flex-col sm:flex-row gap-3 md:gap-4 w-full md:w-auto",
-    searchField = "search"
+    searchField = "search",
+    showClearButton = false,
 }) => {
     const [filters, setFilters] = useState<FilterValues>({});
     const [isFiltersOpen, setIsFiltersOpen] = useState(false);
@@ -155,6 +165,42 @@ const Filters: FC<FiltersProps> = ({
         setInputValues(prev => ({ ...prev, [name]: value }));
     };
 
+    const hasActiveFilters = fields.some((field) => {
+        const value = field.type === 'input'
+            ? inputValues[field.name]
+            : field.type === 'multiselect'
+                ? multiSelectValues[field.name]
+                : filters[field.name];
+
+        if (Array.isArray(value)) {
+            return value.length > 0;
+        }
+
+        return Boolean(value);
+    });
+
+    const handleClear = () => {
+        setFilters({});
+        setInputValues({});
+        setMultiSelectValues({});
+        onChange({});
+    };
+
+    const renderClearButton = () => {
+        if (!showClearButton) {
+            return null;
+        }
+
+        return (
+            <Button
+                label="پاک کردن فیلترها"
+                onClick={handleClear}
+                disabled={!hasActiveFilters}
+                className="w-fit min-w-[140px] px-4 bg-transparent text-foreground border border-border hover:bg-secondary disabled:opacity-50"
+            />
+        );
+    };
+
     const renderField = (field: FieldType) => {
         const currentValue = field.type === 'input' ? inputValues[field.name] : filters[field.name];
         const currentMultiSelectValue = field.type === 'multiselect'
@@ -172,6 +218,16 @@ const Filters: FC<FiltersProps> = ({
                     />
                 );
 
+            case 'datetime':
+                return (
+                    <DateTimePicker
+                        key={field.name}
+                        placeholder={field.placeholder}
+                        onChange={(value) => handleChange(field.name, value || null)}
+                        defaultValue={(currentValue as string) || field.defaultValue || ''}
+                    />
+                );
+
             case 'select':
                 return (
                     <div className='mt-1'>
@@ -179,7 +235,7 @@ const Filters: FC<FiltersProps> = ({
                             key={field.name}
                             placeholder={field.placeholder}
                             onChange={(e) => handleChange(field.name, e.target.value)}
-                            defaultValue={currentValue as string || field.defaultValue || ''}
+                            value={(currentValue as string) || field.defaultValue || ''}
                             items={field.options}
                             className='min-w-[170px]'
                         />
@@ -237,6 +293,7 @@ const Filters: FC<FiltersProps> = ({
             <div className="hidden md:flex md:flex-row justify-between items-center gap-4 w-full">
                 <div className={fieldClassName}>
                     {fields.map(renderField)}
+                    {renderClearButton()}
                 </div>
             </div>
 
@@ -258,7 +315,18 @@ const Filters: FC<FiltersProps> = ({
                         </div>
                     ))}
                 </div>
-                <div className='mt-6'>
+                <div className='mt-6 flex flex-col gap-3'>
+                    {showClearButton && (
+                        <Button
+                            label="پاک کردن فیلترها"
+                            onClick={() => {
+                                handleClear();
+                                setIsFiltersOpen(false);
+                            }}
+                            disabled={!hasActiveFilters}
+                            className="w-full bg-transparent text-foreground border border-border hover:bg-secondary disabled:opacity-50"
+                        />
+                    )}
                     <Button
                         label='بستن'
                         onClick={() => setIsFiltersOpen(false)}

src/components/Input.tsx

@@ -84,15 +84,20 @@ const Input: FC<Props> = (props: Props) => {
 
     return (
         <div className='w-full'>
-            <label className='text-sm'>
-                {props.label}
-            </label>
+            {props.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>
+            )}
 
             <div className='w-full relative mt-1'>
                 <input {...props} onChange={(e) => {
                     setSearch(e.target.value)
                     handleInputChange(e)
-                }} value={props.seprator ? formattedValue : props.value} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
+                }} value={props.seprator ? formattedValue : props.value} type={props.seprator ? 'text' : props.type === 'password' ? (showPassword ? 'text' : 'password') : props.type} inputMode={props.seprator ? 'numeric' : props.inputMode} className={inputClass} />
 
                 {
                     props.type === 'password' &&

src/components/Notification.tsx

@@ -1,11 +1,13 @@
 import { getToken } from '@/config/func'
 import { useSocket } from '@/pages/pager/hooks/useSocket'
-import { type FC, useEffect, useCallback, useState } from 'react'
+import { type FC, useEffect, useCallback, useState, useRef } from 'react'
 import type { NotificationPayload } from '@/types/notification.types'
 import { NotificationSubject } from '@/types/notification.types'
 import NotificationItem from '@/components/NotificationItem'
 import { useQueryClient } from '@tanstack/react-query'
 
+const NOTIFICATION_SOUND_SRC = '/Qoddusi_improved.mp3'
+
 interface NotificationItemData extends NotificationPayload {
     id: string
     timestamp: number
@@ -13,13 +15,26 @@ interface NotificationItemData extends NotificationPayload {
 
 const Notification: FC = () => {
     const [notifications, setNotifications] = useState<NotificationItemData[]>([])
-    const [audioEnabled, setAudioEnabled] = useState(false)
+    const audioRef = useRef<HTMLAudioElement | null>(null)
+    const audioUnlockedRef = useRef(false)
     const queryClient = useQueryClient()
 
     const token = getToken()
     const socketUrl = `${import.meta.env.VITE_SOCKET_URL}/notifications`
     const { connect, socket, error } = useSocket(socketUrl, token!)
 
+    useEffect(() => {
+        const audio = new Audio(NOTIFICATION_SOUND_SRC)
+        audio.preload = 'auto'
+        audio.volume = 0.5
+        audioRef.current = audio
+
+        return () => {
+            audio.pause()
+            audioRef.current = null
+        }
+    }, [])
+
     useEffect(() => {
         if (error) {
             console.error('❌ Notification: خطا در اتصال:', error)
@@ -31,35 +46,54 @@ const Notification: FC = () => {
     }, [connect])
 
     useEffect(() => {
-        const enableAudio = async () => {
+        const unlockAudio = async () => {
+            if (audioUnlockedRef.current || !audioRef.current) {
+                return
+            }
+
             try {
-                const audio = new Audio('/mixkit-correct-answer-tone-2870.wav')
-                audio.volume = 0
+                const audio = audioRef.current
+                audio.muted = true
                 await audio.play()
                 audio.pause()
                 audio.currentTime = 0
-                setAudioEnabled(true)
+                audio.muted = false
+                audioUnlockedRef.current = true
             } catch {
-                console.warn('صدا هنوز فعال نشده است')
+                // Browser may still block until a later gesture — keep listening.
             }
         }
 
         const handleUserInteraction = () => {
-            if (!audioEnabled) {
-                enableAudio()
-            }
+            void unlockAudio()
         }
 
-        window.addEventListener('click', handleUserInteraction, { once: true })
-        window.addEventListener('touchstart', handleUserInteraction, { once: true })
-        window.addEventListener('keydown', handleUserInteraction, { once: true })
+        window.addEventListener('click', handleUserInteraction)
+        window.addEventListener('touchstart', handleUserInteraction)
+        window.addEventListener('keydown', handleUserInteraction)
 
         return () => {
             window.removeEventListener('click', handleUserInteraction)
             window.removeEventListener('touchstart', handleUserInteraction)
             window.removeEventListener('keydown', handleUserInteraction)
         }
-    }, [audioEnabled])
+    }, [])
+
+    const playNotificationSound = useCallback(() => {
+        const audio = audioRef.current
+        if (!audio || !audioUnlockedRef.current) {
+            return
+        }
+
+        try {
+            audio.currentTime = 0
+            void audio.play().catch((err) => {
+                console.warn('خطا در پخش صدا:', err)
+            })
+        } catch (err) {
+            console.warn('خطا در پخش صدا:', err)
+        }
+    }, [])
 
     const handleGetNotification = useCallback((data: NotificationPayload) => {
         const newNotification: NotificationItemData = {
@@ -68,14 +102,14 @@ const Notification: FC = () => {
             timestamp: Date.now(),
         }
         setNotifications((prev) => [...prev, newNotification])
+        playNotificationSound()
 
-        // Refetch بر اساس نوع نوتیفیکیشن
         if (data.subject === NotificationSubject.PAGER_CREATED) {
             queryClient.invalidateQueries({ queryKey: ['pagers'] })
         } else if (data.subject === NotificationSubject.ORDER_CREATED) {
             queryClient.invalidateQueries({ queryKey: ['orders'] })
         }
-    }, [queryClient])
+    }, [playNotificationSound, queryClient])
 
     const handleRemoveNotification = useCallback((id: string) => {
         setNotifications((prev) => prev.filter((notif) => notif.id !== id))
@@ -105,7 +139,6 @@ const Notification: FC = () => {
                     subject={notification.subject}
                     body={notification.body}
                     onRemove={handleRemoveNotification}
-                    audioEnabled={audioEnabled}
                 />
             ))}
         </div>

src/components/NotificationItem.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect } from 'react'
+import { type FC } from 'react'
 import { CloseCircle, NotificationBing, ShoppingBag, MessageText1 } from 'iconsax-react'
 import Button from '@/components/Button'
 import { NotificationSubject } from '@/types/notification.types'
@@ -8,32 +8,9 @@ interface NotificationItemProps {
     subject: string
     body: string
     onRemove: (id: string) => void
-    audioEnabled: boolean
 }
 
-const NotificationItem: FC<NotificationItemProps> = ({ id, subject, body, onRemove, audioEnabled }) => {
-    useEffect(() => {
-        if (!audioEnabled) {
-            return
-        }
-
-        const playNotificationSound = async () => {
-            try {
-                const audio = new Audio('/mixkit-correct-answer-tone-2870.wav')
-                audio.volume = 0.5
-
-                audio.addEventListener('error', (err) => {
-                    console.error('❌ خطا در لود فایل صوتی:', err)
-                }, { once: true })
-
-                await audio.play()
-            } catch (err) {
-                console.warn('خطا در پخش صدا:', err)
-            }
-        }
-
-        playNotificationSound()
-    }, [audioEnabled])
+const NotificationItem: FC<NotificationItemProps> = ({ id, subject, body, onRemove }) => {
     const getNotificationConfig = (subjectType: string) => {
         switch (subjectType) {
             case NotificationSubject.PAGER_CREATED:

src/components/RadioGroup.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const RadioGroup: FC<Props> = (props: Props) => {
     return (
-        <div className='flex gap-5 items-center text-xs'>
+        <div className='flex flex-wrap gap-5 items-center text-xs'>
             {
                 props.items.map((item, index) => (
                     <div key={index} className='flex gap-2 items-center'>

src/components/Select.tsx

@@ -13,28 +13,58 @@ type Props = {
     error_text?: string,
     placeholder?: string,
     label?: string,
+    isNotRequired?: boolean,
 } & SelectHTMLAttributes<HTMLSelectElement>
 
 const Select: FC<Props> = (props: Props) => {
+    const {
+        className,
+        items,
+        error_text,
+        placeholder,
+        label,
+        isNotRequired,
+        value,
+        ...selectProps
+    } = props
+
+    const hasMatchingItem =
+        value !== undefined &&
+        value !== '' &&
+        items?.some((item) => String(item.value) === String(value))
+
+    const selectValue =
+        !value || hasMatchingItem || !items?.length
+            ? (value ?? '')
+            : ''
+
     return (
         <div className='w-full relative'>
             {
-                props.label &&
-                <label className='text-sm'>
-                    {props.label}
-                </label>
+                label &&
+                <div className='flex items-center gap-1'>
+                    <label className='text-sm'>
+                        {label}
+                    </label>
+                    {isNotRequired && (
+                        <span className='text-xs text-description'>(اختیاری)</span>
+                    )}
+                </div>
             }
-            <select {...props} className={clx(
+            <select
+                {...selectProps}
+                value={selectValue}
+                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',
-                props.className,
-                props.label && 'mt-1'
+                className,
+                label && 'mt-1'
             )}>
                 {
-                    props.placeholder &&
-                    <option value="" disabled selected>{props.placeholder}</option>
+                    placeholder &&
+                    <option value="" disabled>{placeholder}</option>
                 }
                 {
-                    props.items?.map((item) => {
+                    items?.map((item) => {
                         return (
                             <option key={item.value} value={item.value}>
                                 {item.label}
@@ -45,12 +75,12 @@ const Select: FC<Props> = (props: Props) => {
             </select>
             <ArrowDown2 size={16} color='black' className={clx(
                 'absolute z-0 top-3 left-2',
-                props.label && 'top-10'
+                label && 'top-10'
             )} />
             {
-                props.error_text && props.error_text !== '' ?
+                error_text && error_text !== '' ?
                     <Error
-                        errorText={props.error_text}
+                        errorText={error_text}
                     />
                     : null
             }

src/components/Textarea.tsx

@@ -1,35 +1,37 @@
-import { type FC, type InputHTMLAttributes } from 'react'
+import { type FC, type TextareaHTMLAttributes } from 'react'
 import Error from './Error'
 import { clx } from '../helpers/utils'
 
 type Props = {
     label?: string,
     error_text?: string
-} & InputHTMLAttributes<HTMLTextAreaElement>
+    isNotRequired?: boolean
+} & TextareaHTMLAttributes<HTMLTextAreaElement>
 
-const Textarea: FC<Props> = (props: Props) => {
+const Textarea: FC<Props> = ({ label, error_text, isNotRequired, className, ...textareaProps }) => {
     return (
         <div className='w-full relative'>
             {
-                props.label &&
-                <div className='text-sm' >
-                    {props.label}
+                label &&
+                <div className='flex items-center gap-1'>
+                    <div className='text-sm'>{label}</div>
+                    {isNotRequired && (
+                        <span className='text-xs text-description'>(اختیاری)</span>
+                    )}
                 </div>
             }
 
             <textarea
-                {...props}
+                {...textareaProps}
                 className={clx(
                     'border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs',
-                    props.className
+                    className
                 )}
-            >
-
-            </textarea>
+            />
 
             {
-                props.error_text &&
-                <Error errorText={props.error_text} />
+                error_text &&
+                <Error errorText={error_text} />
             }
 
         </div>

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/Pages.ts

@@ -25,12 +25,20 @@ export const Pages = {
     list: "/orders/list",
     add: "/orders/add",
     detail: "/orders/detail/",
+    foodReport: "/orders/report/by-food",
+    dailyReport: "/orders/report/by-day",
+    cashShifts: "/orders/cash-shifts",
   },
   customers: {
     list: "/customers/list",
     add: "/customers/add",
     detail: "/customers/detail/",
     update: "/customers/update/",
+    groups: "/customers/groups",
+    groupsAdd: "/customers/groups/add",
+    groupsUpdate: "/customers/groups/update/",
+    campaigns: "/customers/campaigns",
+    campaignsAdd: "/customers/campaigns/add",
   },
   discount: {
     list: "/discounts/list",
@@ -81,7 +89,18 @@ export const Pages = {
   notifications: {
     list: "/notifications/list",
   },
+  sliders: {
+    list: "/sliders/list",
+    add: "/sliders/create",
+    update: "/sliders/update/",
+  },
   statistics: {
     list: "/statistics",
   },
+  wallet: {
+    transactions: "/wallet/transactions",
+  },
+  aiChats: {
+    list: "/ai-chats/list",
+  },
 };

src/config/menuPreview.ts

@@ -0,0 +1,67 @@
+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",
+  "sliders",
+  "wallet",
+  "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/langs/fa.json

@@ -24,7 +24,7 @@
     "mobile_or_email": " شماره موبایل یا ایمیل",
     "enter_mobile_or_email": " شماره موبایل یا ایمیل خود را وارد کنید",
     "mobile": "شماره موبایل",
-    "enter_mobile": "شماره موبایل خود را وارد کنید",
+    "enter_mobile": "09120000000",
     "otp_sent": "کد تایید ارسال شد",
     "have_account": "آیا حساب کاربری ندارید؟",
     "register": "ثبت نام",
@@ -40,7 +40,7 @@
     "forgot_password": "فراموشی رمز عبور",
     "login_with_otp": "ورود با رمز عبور یکبار مصرف",
     "slug": "نام کاربری",
-    "enter_slug": "نام کاربری خود را وارد کنید"
+    "enter_slug": ""
   },
   "errors": {
     "required": "این فیلد اجباری می باشد",
@@ -68,7 +68,9 @@
     "reviews": "نظرات",
     "pagers": "پیجرها",
     "notifications": "تنظیمات اعلانات",
-    "statistics": "گزارشات"
+    "statistics": "گزارشات",
+    "sliders": "اسلایدرها",
+    "ai_chats": "چت‌های AI"
   },
   "shipment": {
     "dineIn": "سرو در رستوران",
@@ -97,11 +99,16 @@
     "add_food": "افزودن غذا",
     "categories": "دسته بندی ها",
     "orders_list": "لیست سفارشات",
+    "orders_food_report": "گزارش فروش به تفکیک غذا",
+    "orders_daily_report": "گزارش فروش روزانه",
+    "cash_shifts": "شیفت‌های صندوق",
     "add_order": "افزودن سفارش",
     "discount_list": "لیست تخفیف",
     "add_discount": "افزودن تخفیف",
     "customers_list": "لیست مشتریان",
-    "add_customer": "افزودن مشتری"
+    "add_customer": "افزودن مشتری",
+    "groups": "گروه مشتری",
+    "campaigns": "کمپین‌ها"
   },
   "guide": {
     "list_guide": "لیست راهنمای سرویس",
@@ -606,6 +613,30 @@
     "exsist_special_character": "شامل کاراکتر های خاص (نماد ها) باشد"
   },
   "wallet": {
+    "charge": "شارژ",
+    "charge_title": "شارژ کیف پول",
+    "amount": "مبلغ",
+    "amount_placeholder": "مبلغ را وارد کنید",
+    "amount_required": "مبلغ را وارد کنید",
+    "charge_success": "درخواست شارژ با موفقیت ثبت شد",
+    "invoice_issued": "صورتحساب صادر شد",
+    "cancel": "انصراف",
+    "balance": "موجودی کیف پول",
+    "balance_after": "موجودی پس از تراکنش",
+    "type_credit": "واریز",
+    "type_debit": "برداشت",
+    "reason": "دلیل",
+    "reason_deposit": "شارژ کیف پول",
+    "reason_sms_send": "ارسال پیامک",
+    "transactions_tab": "تراکنش‌ها",
+    "charge_requests_tab": "درخواست‌های شارژ",
+    "invoice": "صورتحساب",
+    "view_invoice": "مشاهده صورتحساب",
+    "charge_status_pending": "در انتظار پرداخت",
+    "charge_status_paid": "پرداخت شده",
+    "charge_status_success": "پرداخت موفق",
+    "charge_status_failed": "ناموفق",
+    "charge_status_cancelled": "لغو شده",
     "increese_wallet": "افزایش موجودی حساب اعتباری",
     "online_pay": "پرداخت آنلاین",
     "card_to_card": "کارت به کارت",
@@ -614,7 +645,6 @@
     "enter_your_price": "مبلغ دلخواه خودرا وارد کنید",
     "select_payment": "انتخاب درگاه پرداخت",
     "pay": "پرداخت",
-    "amount": "مبلغ",
     "enter_amount_card": "مبلغ کارت به کارت شده را وارد کنید",
     "upload_deposit_slip": "آپلود فیش واریزی",
     "submit_slip": "ثبت فیش",
@@ -734,7 +764,21 @@
     "address": "آدرس",
     "image_profile": "تصویر پروفایل",
     "upload_image": "آپلود تصویر",
-    "new_password": "رمز عبور جدید"
+    "new_password": "رمز عبور جدید",
+    "import_excel": "ورود از Excel",
+    "download_sample": "دانلود فایل نمونه",
+    "import_file": "فایل Excel",
+    "import_submit": "بارگذاری و ورود",
+    "import_description": "فیلد phone اجباری است و باقی فیلدها اختیاری هستند . حداکثر 500 سطر میتواند باشد",
+    "import_file_required": "لطفاً یک فایل Excel انتخاب کنید",
+    "import_success": "مشتریان با موفقیت وارد شدند",
+    "import_failed": "خطا در ورود مشتریان",
+    "import_total": "تعداد کل: {{count}}",
+    "import_created": "کاربران جدید: {{count}}",
+    "import_linked": "متصل‌شده به رستوران: {{count}}",
+    "import_already_linked": "قبلاً متصل بودند: {{count}}",
+    "import_errors": "{{count}} خطا",
+    "import_error_row": "ردیف {{row}}{{phone}}: {{message}}"
   },
   "priority": "الویت",
   "messages": {
@@ -770,7 +814,7 @@
   "payment": {
     "Online": "آنلاین",
     "Cash": "نقدی",
-    "CardOnDelivery": "کارت هنگام تحویل",
+    "CreditCard": "کارت به کارت",
     "Wallet": "کیف پول",
     "zarinpal": "زرین‌پال",
     "payments": "پرداخت ها",
@@ -847,11 +891,9 @@
     "payment_methods_update": "ویرایش روش پرداخت"
   },
   "order_status": {
-    "pendingPayment": "در انتظار پرداخت",
-    "paid": "پرداخت شده",
+    "new": "جدید",
     "confirmed": "تایید شده",
     "preparing": "در حال آماده سازی",
-    "ready": "آماده",
     "shipped": "ارسال شده",
     "completed": "تکمیل شده",
     "canceled": "لغو شده",
@@ -887,5 +929,38 @@
     },
     "change_status": "تغییر وضعیت",
     "save": "ذخیره"
+  },
+  "cash_shift": {
+    "list_title": "شیفت‌های صندوق",
+    "current_shift": "شیفت فعال",
+    "open_shift": "باز کردن شیفت",
+    "close_shift": "بستن شیفت",
+    "open_title": "باز کردن شیفت صندوق",
+    "close_title": "بستن شیفت صندوق",
+    "detail_title": "جزئیات شیفت صندوق",
+    "summary_title": "خلاصه شیفت",
+    "operator": "اپراتور",
+    "status_label": "وضعیت",
+    "opened_at": "شروع شیفت",
+    "closed_at": "پایان شیفت",
+    "opening_amount": "موجودی اولیه",
+    "opening_amount_placeholder": "مبلغ موجودی اولیه صندوق",
+    "opening_amount_required": "موجودی اولیه الزامی است",
+    "expected_amount": "مبلغ مورد انتظار",
+    "counted_amount": "مبلغ شمارش‌شده",
+    "counted_amount_placeholder": "مبلغ شمارش‌شده در صندوق",
+    "counted_amount_required": "مبلغ شمارش‌شده الزامی است",
+    "difference_amount": "اختلاف",
+    "orders_count": "تعداد سفارشات",
+    "notes": "یادداشت",
+    "notes_placeholder": "یادداشت (اختیاری)",
+    "cancel": "انصراف",
+    "view_details": "مشاهده جزئیات",
+    "opened_success": "شیفت صندوق با موفقیت باز شد",
+    "closed_success": "شیفت صندوق با موفقیت بسته شد",
+    "status_values": {
+      "open": "باز",
+      "closed": "بسته"
+    }
   }
 }

src/pages/admin/Update.tsx

@@ -1,156 +1,148 @@
-import { type FC, useEffect } from 'react'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { TickCircle } from 'iconsax-react'
-import { toast } from 'react-toastify'
-import { useNavigate, useParams } from 'react-router-dom'
-import Button from '@/components/Button'
-import Input from '@/components/Input'
-import Select from '@/components/Select'
-import { useGetAdminById, useUpdateAdmin } from './hooks/useAdminData'
-import { useGetRoles } from '@/pages/roles/hooks/useRolesData'
-import type { CreateAdminType } from './types/Types'
-import { Pages } from '@/config/Pages'
-import type { ErrorType } from '@/helpers/types'
-import { extractErrorMessage } from '@/config/func'
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import Select from "@/components/Select";
+import { extractErrorMessage } from "@/config/func";
+import { Pages } from "@/config/Pages";
+import type { ErrorType } from "@/helpers/types";
+import { useGetRoles } from "@/pages/roles/hooks/useRolesData";
+import { useFormik } from "formik";
+import { TickCircle } from "iconsax-react";
+import { type FC, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import * as Yup from "yup";
+import { useGetAdminById, useUpdateAdmin } from "./hooks/useAdminData";
+import type { CreateAdminType } from "./types/Types";
 
 const UpdateAdmin: FC = () => {
-    const navigate = useNavigate()
-    const { id } = useParams()
-    const { data: adminData, isLoading } = useGetAdminById(id!)
-    const { mutate: updateAdmin, isPending } = useUpdateAdmin()
-    const { data: rolesData } = useGetRoles()
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { data: adminData, isLoading } = useGetAdminById(id!);
+  const { mutate: updateAdmin, isPending } = useUpdateAdmin();
+  const { data: rolesData } = useGetRoles();
 
-    const roles = rolesData?.data?.map(role => ({
-        label: role.name,
-        value: role.id
-    })) || []
+  const roles =
+    rolesData?.data?.map((role) => ({
+      label: role.name,
+      value: role.id,
+    })) || [];
 
-    const admin = adminData?.data
+  const admin = adminData?.data;
 
-    const formik = useFormik<CreateAdminType>({
-        initialValues: {
-            phone: '',
-            firstName: '',
-            lastName: '',
-            roleId: '',
+  const formik = useFormik<CreateAdminType>({
+    initialValues: {
+      phone: "",
+      firstName: "",
+      lastName: "",
+      roleId: "",
+    },
+    validationSchema: Yup.object().shape({
+      phone: Yup.string().required("شماره تلفن الزامی است"),
+      firstName: Yup.string().required("نام الزامی است"),
+      lastName: Yup.string().required("نام خانوادگی الزامی است"),
+      roleId: Yup.string().required("نقش الزامی است"),
+    }),
+    onSubmit: (values) => {
+      if (!id) {
+        toast.error("شناسه مدیر یافت نشد");
+        return;
+      }
+
+      updateAdmin(
+        { id, params: values },
+        {
+          onSuccess: () => {
+            toast.success("مدیر با موفقیت به‌روزرسانی شد");
+            navigate(Pages.admins.list);
+          },
+          onError: (error: ErrorType) => {
+            toast.error(extractErrorMessage(error));
+          },
         },
-        validationSchema: Yup.object().shape({
-            phone: Yup.string().required('شماره تلفن الزامی است'),
-            firstName: Yup.string().required('نام الزامی است'),
-            lastName: Yup.string().required('نام خانوادگی الزامی است'),
-            roleId: Yup.string().required('نقش الزامی است'),
-        }),
-        onSubmit: (values) => {
-            if (!id) {
-                toast.error('شناسه مدیر یافت نشد')
-                return
-            }
+      );
+    },
+  });
 
-            updateAdmin({ id, params: values }, {
-                onSuccess: () => {
-                    toast.success('مدیر با موفقیت به‌روزرسانی شد')
-                    navigate(Pages.admins.list)
-                },
-                onError: (error: ErrorType) => {
-                    toast.error(extractErrorMessage(error))
-                },
-            })
-        },
-    })
-
-    useEffect(() => {
-        if (admin) {
-            formik.setValues({
-                phone: admin.phone || '',
-                firstName: admin.firstName || '',
-                lastName: admin.lastName || '',
-                roleId: admin.roles?.[0]?.role?.id || '',
-            })
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [admin])
-
-    if (isLoading) {
-        return (
-            <div className='w-full mt-4 flex justify-center items-center'>
-                <div>در حال بارگذاری...</div>
-            </div>
-        )
-    }
-
-    if (!admin) {
-        return (
-            <div className='w-full mt-4 flex justify-center items-center'>
-                <div>مدیر یافت نشد</div>
-            </div>
-        )
+  useEffect(() => {
+    if (admin) {
+      formik.setValues({
+        phone: admin.phone || "",
+        firstName: admin.firstName || "",
+        lastName: admin.lastName || "",
+        roleId: admin.role?.id || "",
+      });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [admin]);
 
+  if (isLoading) {
     return (
-        <div className='mt-5'>
-            <div className='flex w-full justify-between items-center'>
-                <div className='text-lg font-light'>
-                    ویرایش مدیر
-                </div>
-                <div>
-                    <Button
-                        className='px-5'
-                        onClick={() => formik.handleSubmit()}
-                        isloading={isPending}
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <TickCircle className='size-5' color='white' />
-                            <div>ذخیره تغییرات</div>
-                        </div>
-                    </Button>
-                </div>
-            </div>
+      <div className="w-full mt-4 flex justify-center items-center">
+        <div>در حال بارگذاری...</div>
+      </div>
+    );
+  }
 
-            <div className='mt-6'>
-                <div className='bg-white rounded-3xl p-6'>
-                    <div className='mb-4'>
-                        <Input
-                            label='نام'
-                            name='firstName'
-                            value={formik.values.firstName}
-                            onChange={formik.handleChange}
-                            error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
-                        />
-                    </div>
-                    <div className='mt-6'>
-                        <Input
-                            label='نام خانوادگی'
-                            name='lastName'
-                            value={formik.values.lastName}
-                            onChange={formik.handleChange}
-                            error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
-                        />
-                    </div>
-                    <div className='mt-6'>
-                        <Input
-                            label='شماره تلفن'
-                            name='phone'
-                            value={formik.values.phone}
-                            onChange={formik.handleChange}
-                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
-                        />
-                    </div>
-                    <div className='mt-6'>
-                        <Select
-                            label='نقش'
-                            name='roleId'
-                            value={formik.values.roleId}
-                            onChange={formik.handleChange}
-                            items={roles}
-                            placeholder='نقش را انتخاب کنید'
-                            error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
-                        />
-                    </div>
-                </div>
+  if (!admin) {
+    return (
+      <div className="w-full mt-4 flex justify-center items-center">
+        <div>مدیر یافت نشد</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-5">
+      <div className="flex w-full justify-between items-center">
+        <div className="text-lg font-light">ویرایش مدیر</div>
+        <div>
+          <Button className="px-5" onClick={() => formik.handleSubmit()} isloading={isPending}>
+            <div className="flex gap-2 items-center">
+              <TickCircle className="size-5" color="white" />
+              <div>ذخیره تغییرات</div>
             </div>
+          </Button>
         </div>
-    )
-}
+      </div>
 
-export default UpdateAdmin
+      <div className="mt-6">
+        <div className="bg-white rounded-3xl p-6">
+          <div className="mb-4">
+            <Input
+              label="نام"
+              name="firstName"
+              value={formik.values.firstName}
+              onChange={formik.handleChange}
+              error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ""}
+            />
+          </div>
+          <div className="mt-6">
+            <Input
+              label="نام خانوادگی"
+              name="lastName"
+              value={formik.values.lastName}
+              onChange={formik.handleChange}
+              error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ""}
+            />
+          </div>
+          <div className="mt-6">
+            <Input label="شماره تلفن" name="phone" value={formik.values.phone} onChange={formik.handleChange} error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ""} />
+          </div>
+          <div className="mt-6">
+            <Select
+              label="نقش"
+              name="roleId"
+              value={formik.values.roleId}
+              onChange={formik.handleChange}
+              items={roles}
+              placeholder="نقش را انتخاب کنید"
+              error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ""}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateAdmin;

src/pages/admin/types/Types.ts

@@ -28,6 +28,7 @@ export type Admin = {
   lastName: string;
   phone: string;
   roles: AdminRole[];
+  role: RoleDetail;
 };
 
 export type GetAdminsParams = {

src/pages/aiChats/List.tsx

@@ -0,0 +1,110 @@
+import { type FC, useMemo, useState } from "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 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-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/auth/Login.tsx

@@ -1,42 +1,30 @@
-import { type FC } from 'react'
-import LogoImage from '../../assets/images/logo.png'
-import LogoSmallImage from '../../assets/images/logo-small.png'
-import { useAuthStore } from './store/AuthStore'
-import LoginStep1 from './components/LoginStep1'
-import LoginStep2 from './components/LoginStep2'
+import { type FC } from "react";
+import LogoSmallImage from "../../assets/images/logo-small.png";
+import LogoImage from "../../assets/images/logo.png";
+import LoginStep1 from "./components/LoginStep1";
+import LoginStep2 from "./components/LoginStep2";
+import { useAuthStore } from "./store/AuthStore";
 
 const Login: FC = () => {
+  const { stepLogin, phone } = useAuthStore();
 
-    const { stepLogin, phone } = useAuthStore()
+  return (
+    <div className="w-full h-full flex justify-center lg:py-[75px] py-4 lg:items-center lg:px-10 px-4">
+      <div className="flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden">
+        <div className="flex-1 min-w-[50%] overflow-y-auto  bg-white lg:px-9 px-4 py-7">
+          <div className="flex-1 h-full flex flex-col">
+            <img src={LogoSmallImage} className="w-8" />
 
-    return (
-        <div className='w-full h-full flex justify-center lg:py-[75px] py-4 lg:items-center lg:px-10 px-4'>
-            <div className='flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
-                <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white lg:px-9 px-4 py-7'>
-                    <div className='flex-1 h-full flex flex-col'>
-                        <img src={LogoSmallImage} className='w-8' />
-
-                        <div className='flex flex-1 flex-col h-full justify-center'>
-                            {
-                                stepLogin === 1 ?
-                                    <LoginStep1 />
-                                    :
-                                    stepLogin === 2 && !!phone ?
-                                        <LoginStep2 />
-                                        : null
-                            }
-                        </div>
-
-
-                    </div>
-                </div>
-
-                <div className='flex-1 min-w-[50%] lg:flex hidden justify-center items-center'>
-                    <img src={LogoImage} className='h-20' />
-                </div>
-            </div>
+            <div className="flex flex-1 flex-col h-full justify-center">{stepLogin === 1 ? <LoginStep1 /> : stepLogin === 2 && !!phone ? <LoginStep2 /> : null}</div>
+          </div>
         </div>
-    )
-}
 
-export default Login
+        <div className="flex-1 min-w-[50%] lg:flex hidden justify-center items-center">
+          <img src={LogoImage} className="h-14" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

src/pages/auth/components/LoginStep1.tsx

@@ -62,8 +62,9 @@ const LoginStep1: FC = () => {
                 <Input
                     label={t('auth.mobile')}
                     placeholder={t('auth.enter_mobile')}
-                    type='text'
-                    className='text-right'
+                    type='tel'
+                    dir='ltr'
+                    className='text-left dltr'
                     name='phone'
                     onChange={formik.handleChange}
                     value={formik.values.phone}
@@ -83,7 +84,8 @@ const LoginStep1: FC = () => {
                     label={t('auth.slug')}
                     placeholder={t('auth.enter_slug')}
                     type='text'
-                    className='text-right'
+                    dir='ltr'
+                    className='text-left dltr'
                     name='slug'
                     onChange={formik.handleChange}
                     value={formik.values.slug}

src/pages/cashShifts/List.tsx

@@ -0,0 +1,196 @@
+import { type FC, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Add, Lock1 } from "iconsax-react";
+import Table from "@/components/Table";
+import Filters from "@/components/Filters";
+import Button from "@/components/Button";
+import type { RowDataType } from "@/components/types/TableTypes";
+import {
+  useGetCashShifts,
+  useGetCurrentCashShift,
+  useGetCurrentCashShiftSummary,
+} from "./hooks/useCashShiftData";
+import { useCashShiftFilters } from "./hooks/useCashShiftFilters";
+import { getCashShiftTableColumns } from "./components/CashShiftTableColumns";
+import { useCashShiftFiltersFields } from "./components/CashShiftFiltersFields";
+import CashShiftSummaryCard from "./components/CashShiftSummaryCard";
+import OpenCashShiftModal from "./components/OpenCashShiftModal";
+import CloseCashShiftModal from "./components/CloseCashShiftModal";
+import CashShiftDetailModal from "./components/CashShiftDetailModal";
+import type { CashShift } from "./types/Types";
+import { CashShiftStatus } from "./enum/Enum";
+import { formatOptionalDate } from "@/helpers/func";
+import Status from "@/components/Status";
+import MoonLoader from "react-spinners/MoonLoader";
+
+const CashShiftsList: FC = () => {
+  const { t } = useTranslation("global");
+  const [isOpenModalVisible, setIsOpenModalVisible] = useState(false);
+  const [isCloseModalVisible, setIsCloseModalVisible] = useState(false);
+  const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
+  const [selectedShift, setSelectedShift] = useState<CashShift | null>(null);
+
+  const {
+    filters,
+    currentPage,
+    apiParams,
+    handleFiltersChange,
+    handlePageChange,
+  } = useCashShiftFilters();
+
+  const { data: shiftsData, isLoading } = useGetCashShifts(apiParams);
+  const { data: currentShiftData, isLoading: isCurrentShiftLoading } =
+    useGetCurrentCashShift();
+
+  const currentShift = currentShiftData?.data ?? null;
+  const hasOpenShift = currentShift?.status === CashShiftStatus.OPEN;
+
+  const { data: currentSummaryData, isLoading: isCurrentSummaryLoading } =
+    useGetCurrentCashShiftSummary(hasOpenShift);
+
+  const shifts = shiftsData?.data || [];
+  const totalPages = shiftsData?.meta?.totalPages || 1;
+
+  const columns = useMemo(
+    () =>
+      getCashShiftTableColumns({
+        t,
+        onView: (shift) => {
+          setSelectedShift(shift);
+          setIsDetailModalVisible(true);
+        },
+        onClose: (shift) => {
+          setSelectedShift(shift);
+          setIsCloseModalVisible(true);
+        },
+      }),
+    [t]
+  );
+
+  const filterFields = useCashShiftFiltersFields();
+
+  const getAdminName = (shift: CashShift) => {
+    const name = [shift.admin?.firstName, shift.admin?.lastName]
+      .filter(Boolean)
+      .join(" ");
+    return name || shift.admin?.phone || "-";
+  };
+
+  return (
+    <div className="mt-5">
+      <div className="flex justify-between items-center">
+        <h1 className="text-lg font-light">{t("cash_shift.list_title")}</h1>
+        {!hasOpenShift && (
+          <Button className="w-fit px-6" onClick={() => setIsOpenModalVisible(true)}>
+            <div className="flex gap-2 items-center">
+              <Add color="#fff" size={20} />
+              <span>{t("cash_shift.open_shift")}</span>
+            </div>
+          </Button>
+        )}
+      </div>
+
+      {isCurrentShiftLoading ? (
+        <div className="mt-6 flex items-center gap-2">
+          <MoonLoader size={16} color="#000" />
+        </div>
+      ) : (
+        hasOpenShift &&
+        currentShift && (
+          <div className="mt-6 bg-[#F5F5F5] rounded-2xl p-5 space-y-4">
+            <div className="flex flex-wrap justify-between items-start gap-4">
+              <div>
+                <div className="text-sm font-medium">
+                  {t("cash_shift.current_shift")}
+                </div>
+                <div className="text-xs text-description mt-1">
+                  {t("cash_shift.operator")}: {getAdminName(currentShift)}
+                </div>
+                <div className="text-xs text-description mt-1">
+                  {t("cash_shift.opened_at")}:{" "}
+                  {formatOptionalDate(currentShift.openedAt, {
+                    year: "numeric",
+                    month: "2-digit",
+                    day: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </div>
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Status
+                  variant="warning"
+                  label={t(`cash_shift.status_values.${CashShiftStatus.OPEN}`)}
+                />
+                <Button
+                  className="w-fit px-5"
+                  onClick={() => {
+                    setSelectedShift(currentShift);
+                    setIsCloseModalVisible(true);
+                  }}
+                >
+                  <div className="flex gap-2 items-center">
+                    <Lock1 color="#fff" size={18} />
+                    <span>{t("cash_shift.close_shift")}</span>
+                  </div>
+                </Button>
+              </div>
+            </div>
+
+            <CashShiftSummaryCard
+              summary={currentSummaryData?.data}
+              openingAmount={currentShift.openingAmount}
+              isLoading={isCurrentSummaryLoading}
+            />
+          </div>
+        )
+      )}
+
+      <div className="mt-8">
+        <Filters
+          fields={filterFields}
+          onChange={handleFiltersChange}
+          initialValues={filters}
+          showClearButton
+        />
+      </div>
+
+      <Table<CashShift & RowDataType>
+        columns={columns}
+        data={shifts as (CashShift & RowDataType)[]}
+        isloading={isLoading}
+        pagination={{
+          currentPage,
+          totalPages,
+          onPageChange: handlePageChange,
+        }}
+      />
+
+      <OpenCashShiftModal
+        open={isOpenModalVisible}
+        onClose={() => setIsOpenModalVisible(false)}
+      />
+
+      <CloseCashShiftModal
+        open={isCloseModalVisible}
+        onClose={() => {
+          setIsCloseModalVisible(false);
+          setSelectedShift(null);
+        }}
+        shift={selectedShift}
+      />
+
+      <CashShiftDetailModal
+        open={isDetailModalVisible}
+        onClose={() => {
+          setIsDetailModalVisible(false);
+          setSelectedShift(null);
+        }}
+        shift={selectedShift}
+      />
+    </div>
+  );
+};
+
+export default CashShiftsList;

src/pages/cashShifts/components/CashShiftDetailModal.tsx

@@ -0,0 +1,185 @@
+import { type FC } from "react";
+import DefaulModal from "@/components/DefaulModal";
+import Status from "@/components/Status";
+import { useTranslation } from "react-i18next";
+import {
+  formatFaNumber,
+  formatOptionalDate,
+  formatPrice,
+} from "@/helpers/func";
+import { useGetCashShiftSummary } from "../hooks/useCashShiftData";
+import CashShiftSummaryCard from "./CashShiftSummaryCard";
+import type { CashShift } from "../types/Types";
+import { CashShiftStatus } from "../enum/Enum";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  shift: CashShift | null;
+};
+
+const getAdminName = (shift: CashShift) => {
+  const name = [shift.admin?.firstName, shift.admin?.lastName]
+    .filter(Boolean)
+    .join(" ");
+  return name || shift.admin?.phone || "-";
+};
+
+const CashShiftDetailModal: FC<Props> = ({ open, onClose, shift }) => {
+  const { t } = useTranslation("global");
+
+  const { data: summaryData, isLoading: isSummaryLoading } =
+    useGetCashShiftSummary(shift?.id ?? "", open && !!shift?.id);
+
+  if (!shift) return null;
+
+  const summary = summaryData?.data;
+  const isOpen = shift.status === CashShiftStatus.OPEN;
+  const statusVariant = isOpen ? "warning" : "success";
+
+  return (
+    <DefaulModal
+      open={open}
+      close={onClose}
+      isHeader
+      title_header={t("cash_shift.detail_title")}
+      width={720}
+    >
+      <div className="mt-6 space-y-6">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="text-sm text-gray-500 mb-1 block">
+              {t("cash_shift.operator")}
+            </label>
+            <p className="text-sm font-medium">{getAdminName(shift)}</p>
+          </div>
+
+          <div>
+            <label className="text-sm text-gray-500 mb-1 block">
+              {t("cash_shift.status_label")}
+            </label>
+            <div className="mt-1">
+              <Status
+                variant={statusVariant}
+                label={t(`cash_shift.status_values.${shift.status}`)}
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="text-sm text-gray-500 mb-1 block">
+              {t("cash_shift.opened_at")}
+            </label>
+            <p className="text-sm font-medium">
+              {formatOptionalDate(shift.openedAt, {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+              })}
+            </p>
+          </div>
+
+          <div>
+            <label className="text-sm text-gray-500 mb-1 block">
+              {t("cash_shift.closed_at")}
+            </label>
+            <p className="text-sm font-medium">
+              {formatOptionalDate(shift.closedAt, {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+              })}
+            </p>
+          </div>
+
+          <div>
+            <label className="text-sm text-gray-500 mb-1 block">
+              {t("cash_shift.opening_amount")}
+            </label>
+            <p className="text-sm font-medium">
+              {formatPrice(shift.openingAmount)}
+            </p>
+          </div>
+
+          <div>
+            <label className="text-sm text-gray-500 mb-1 block">
+              {t("cash_shift.orders_count")}
+            </label>
+            <p className="text-sm font-medium">
+              {formatFaNumber(shift.ordersCount)}
+            </p>
+          </div>
+
+          {!isOpen && shift.expectedAmount !== null && (
+            <div>
+              <label className="text-sm text-gray-500 mb-1 block">
+                {t("cash_shift.expected_amount")}
+              </label>
+              <p className="text-sm font-medium">
+                {formatPrice(shift.expectedAmount)}
+              </p>
+            </div>
+          )}
+
+          {!isOpen && shift.countedAmount !== null && (
+            <div>
+              <label className="text-sm text-gray-500 mb-1 block">
+                {t("cash_shift.counted_amount")}
+              </label>
+              <p className="text-sm font-medium">
+                {formatPrice(shift.countedAmount)}
+              </p>
+            </div>
+          )}
+
+          {!isOpen && shift.differenceAmount !== null && (
+            <div>
+              <label className="text-sm text-gray-500 mb-1 block">
+                {t("cash_shift.difference_amount")}
+              </label>
+              <p
+                className={`text-sm font-medium ${
+                  shift.differenceAmount > 0
+                    ? "text-green-600"
+                    : shift.differenceAmount < 0
+                      ? "text-red-600"
+                      : ""
+                }`}
+              >
+                {formatPrice(shift.differenceAmount)}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {shift.notes && (
+          <div>
+            <label className="text-sm text-gray-500 mb-1 block">
+              {t("cash_shift.notes")}
+            </label>
+            <p className="text-sm font-medium bg-gray-50 p-3 rounded-lg whitespace-pre-wrap break-words">
+              {shift.notes}
+            </p>
+          </div>
+        )}
+
+        <div className="bg-[#F5F5F5] rounded-2xl p-4">
+          <div className="text-sm font-medium mb-3">
+            {t("cash_shift.summary_title")}
+          </div>
+          <CashShiftSummaryCard
+            summary={summary}
+            openingAmount={shift.openingAmount}
+            isLoading={isSummaryLoading}
+          />
+        </div>
+      </div>
+    </DefaulModal>
+  );
+};
+
+export default CashShiftDetailModal;

src/pages/cashShifts/components/CashShiftFiltersFields.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import type { FieldType } from "@/components/Filters";
+import { CashShiftStatus } from "../enum/Enum";
+
+export const useCashShiftFiltersFields = (): FieldType[] => {
+  return useMemo(
+    () => [
+      {
+        type: "select",
+        name: "status",
+        placeholder: "وضعیت شیفت",
+        defaultValue: "",
+        options: [
+          { label: "همه", value: "" },
+          { label: "باز", value: CashShiftStatus.OPEN },
+          { label: "بسته", value: CashShiftStatus.CLOSED },
+        ],
+      },
+      {
+        type: "datetime",
+        name: "startDate",
+        placeholder: "از تاریخ",
+      },
+      {
+        type: "datetime",
+        name: "endDate",
+        placeholder: "تا تاریخ",
+      },
+    ],
+    []
+  );
+};

src/pages/cashShifts/components/CashShiftSummaryCard.tsx

@@ -0,0 +1,48 @@
+import { type FC } from "react";
+import MoonLoader from "react-spinners/MoonLoader";
+import { formatFaNumber, formatPrice } from "@/helpers/func";
+import type { CashShiftSummary } from "../types/Types";
+
+type Props = {
+  summary?: CashShiftSummary | null;
+  openingAmount?: number;
+  isLoading?: boolean;
+};
+
+const SummaryItem: FC<{ label: string; value: string }> = ({ label, value }) => (
+  <div className="bg-white rounded-xl px-4 py-3 min-w-[140px]">
+    <div className="text-xs text-description">{label}</div>
+    <div className="text-sm font-medium mt-1">{value}</div>
+  </div>
+);
+
+const CashShiftSummaryCard: FC<Props> = ({ summary, openingAmount = 0, isLoading }) => {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-6">
+        <MoonLoader size={20} color="#000" />
+      </div>
+    );
+  }
+
+  if (!summary) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      <SummaryItem label="موجودی اولیه" value={formatPrice(openingAmount)} />
+      <SummaryItem label="نقدی" value={formatPrice(summary.cashReceived)} />
+      <SummaryItem label="آنلاین" value={formatPrice(summary.onlineReceived)} />
+      <SummaryItem label="کارت به کارت" value={formatPrice(summary.creditCardReceived)} />
+      <SummaryItem label="مجموع دریافتی" value={formatPrice(summary.totalReceived)} />
+      <SummaryItem label="مبلغ مورد انتظار" value={formatPrice(summary.expectedAmount)} />
+      <SummaryItem
+        label="تعداد سفارشات"
+        value={formatFaNumber(summary.ordersCount)}
+      />
+    </div>
+  );
+};
+
+export default CashShiftSummaryCard;

src/pages/cashShifts/components/CashShiftTableColumns.tsx

@@ -0,0 +1,125 @@
+import { Eye, Lock1 } from "iconsax-react";
+import type { ColumnType } from "@/components/types/TableTypes";
+import type { CashShift } from "../types/Types";
+import {
+  formatFaNumber,
+  formatOptionalDate,
+  formatPrice,
+} from "@/helpers/func";
+import Status from "@/components/Status";
+import { CashShiftStatus } from "../enum/Enum";
+import type { TFunction } from "i18next";
+
+interface GetCashShiftTableColumnsParams {
+  t: TFunction;
+  onView: (shift: CashShift) => void;
+  onClose?: (shift: CashShift) => void;
+}
+
+const getAdminName = (shift: CashShift) => {
+  const name = [shift.admin?.firstName, shift.admin?.lastName]
+    .filter(Boolean)
+    .join(" ");
+  return name || shift.admin?.phone || "-";
+};
+
+export const getCashShiftTableColumns = ({
+  t,
+  onView,
+  onClose,
+}: GetCashShiftTableColumnsParams): ColumnType<CashShift>[] => [
+  {
+    key: "openedAt",
+    title: t("cash_shift.opened_at"),
+    render: (item) =>
+      formatOptionalDate(item.openedAt, {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+      }),
+  },
+  {
+    key: "closedAt",
+    title: t("cash_shift.closed_at"),
+    render: (item) =>
+      formatOptionalDate(item.closedAt, {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+      }),
+  },
+  {
+    key: "admin",
+    title: t("cash_shift.operator"),
+    render: (item) => getAdminName(item),
+  },
+  {
+    key: "openingAmount",
+    title: t("cash_shift.opening_amount"),
+    render: (item) => formatPrice(item.openingAmount),
+  },
+  {
+    key: "expectedAmount",
+    title: t("cash_shift.expected_amount"),
+    render: (item) =>
+      item.expectedAmount !== null ? formatPrice(item.expectedAmount) : "-",
+  },
+  {
+    key: "differenceAmount",
+    title: t("cash_shift.difference_amount"),
+    render: (item) => {
+      if (item.differenceAmount === null) return "-";
+      const value = formatPrice(item.differenceAmount);
+      if (item.differenceAmount > 0) {
+        return <span className="text-green-600">{value}</span>;
+      }
+      if (item.differenceAmount < 0) {
+        return <span className="text-red-600">{value}</span>;
+      }
+      return value;
+    },
+  },
+  {
+    key: "ordersCount",
+    title: t("cash_shift.orders_count"),
+    render: (item) => formatFaNumber(item.ordersCount),
+  },
+  {
+    key: "status",
+    title: t("cash_shift.status_label"),
+    render: (item) => (
+      <Status
+        variant={item.status === CashShiftStatus.OPEN ? "warning" : "success"}
+        label={t(`cash_shift.status_values.${item.status}`)}
+      />
+    ),
+  },
+  {
+    key: "actions",
+    title: "",
+    render: (item) => (
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onView(item)}
+          className="cursor-pointer hover:opacity-70 transition-opacity"
+          title={t("cash_shift.view_details")}
+        >
+          <Eye size={20} color="#8C90A3" />
+        </button>
+        {item.status === CashShiftStatus.OPEN && onClose && (
+          <button
+            onClick={() => onClose(item)}
+            className="cursor-pointer hover:opacity-70 transition-opacity"
+            title={t("cash_shift.close_shift")}
+          >
+            <Lock1 size={20} color="#8C90A3" />
+          </button>
+        )}
+      </div>
+    ),
+  },
+];

src/pages/cashShifts/components/CloseCashShiftModal.tsx

@@ -0,0 +1,135 @@
+import { type FC, useState } from "react";
+import DefaulModal from "@/components/DefaulModal";
+import Input from "@/components/Input";
+import Textarea from "@/components/Textarea";
+import Button from "@/components/Button";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+import { extractErrorMessage } from "@/config/func";
+import {
+  useCloseCashShift,
+  useGetCashShiftSummary,
+} from "../hooks/useCashShiftData";
+import CashShiftSummaryCard from "./CashShiftSummaryCard";
+import type { CashShift } from "../types/Types";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  shift: CashShift | null;
+};
+
+const CloseCashShiftModal: FC<Props> = ({ open, onClose, shift }) => {
+  const { t } = useTranslation("global");
+  const [countedAmount, setCountedAmount] = useState("");
+  const [notes, setNotes] = useState("");
+  const [error, setError] = useState("");
+  const closeShift = useCloseCashShift();
+
+  const { data: summaryData, isLoading: isSummaryLoading } =
+    useGetCashShiftSummary(shift?.id ?? "", open && !!shift?.id);
+
+  const summary = summaryData?.data;
+
+  const handleClose = () => {
+    setCountedAmount("");
+    setNotes("");
+    setError("");
+    onClose();
+  };
+
+  const handleSubmit = () => {
+    if (!shift) return;
+
+    const numericAmount = Number(countedAmount);
+
+    if (Number.isNaN(numericAmount) || numericAmount < 0) {
+      setError(t("cash_shift.counted_amount_required"));
+      return;
+    }
+
+    closeShift.mutate(
+      {
+        shiftId: shift.id,
+        payload: {
+          countedAmount: numericAmount,
+          notes: notes.trim() || undefined,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("cash_shift.closed_success"));
+          handleClose();
+        },
+        onError: (err) => {
+          toast.error(extractErrorMessage(err));
+        },
+      }
+    );
+  };
+
+  if (!shift) return null;
+
+  return (
+    <DefaulModal
+      open={open}
+      close={handleClose}
+      isHeader
+      title_header={t("cash_shift.close_title")}
+      width={720}
+    >
+      <div className="mt-6 space-y-6">
+        <div className="bg-[#F5F5F5] rounded-2xl p-4">
+          <div className="text-sm font-medium mb-3">
+            {t("cash_shift.summary_title")}
+          </div>
+          <CashShiftSummaryCard
+            summary={summary}
+            openingAmount={shift.openingAmount}
+            isLoading={isSummaryLoading}
+          />
+        </div>
+
+        <Input
+          name="countedAmount"
+          label={t("cash_shift.counted_amount")}
+          placeholder={t("cash_shift.counted_amount_placeholder")}
+          type="number"
+          seprator
+          value={countedAmount}
+          onChange={(e) => {
+            setCountedAmount(e.target.value);
+            setError("");
+          }}
+          error_text={error}
+        />
+
+        <Textarea
+          name="notes"
+          label={t("cash_shift.notes")}
+          placeholder={t("cash_shift.notes_placeholder")}
+          value={notes}
+          onChange={(e) => setNotes(e.target.value)}
+          isNotRequired
+        />
+
+        <div className="flex gap-3">
+          <Button
+            label={t("cash_shift.cancel")}
+            type="button"
+            onClick={handleClose}
+            className="bg-gray-100 text-gray-700"
+          />
+          <Button
+            label={t("cash_shift.close_shift")}
+            type="button"
+            onClick={handleSubmit}
+            isloading={closeShift.isPending}
+          />
+        </div>
+      </div>
+    </DefaulModal>
+  );
+};
+
+export default CloseCashShiftModal;

src/pages/cashShifts/components/OpenCashShiftModal.tsx

@@ -0,0 +1,108 @@
+import { type FC, useState } from "react";
+import DefaulModal from "@/components/DefaulModal";
+import Input from "@/components/Input";
+import Textarea from "@/components/Textarea";
+import Button from "@/components/Button";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+import { extractErrorMessage } from "@/config/func";
+import { useOpenCashShift } from "../hooks/useCashShiftData";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+};
+
+const OpenCashShiftModal: FC<Props> = ({ open, onClose }) => {
+  const { t } = useTranslation("global");
+  const [openingAmount, setOpeningAmount] = useState("");
+  const [notes, setNotes] = useState("");
+  const [error, setError] = useState("");
+  const openShift = useOpenCashShift();
+
+  const handleClose = () => {
+    setOpeningAmount("");
+    setNotes("");
+    setError("");
+    onClose();
+  };
+
+  const handleSubmit = () => {
+    const numericAmount = Number(openingAmount);
+
+    if (Number.isNaN(numericAmount) || numericAmount < 0) {
+      setError(t("cash_shift.opening_amount_required"));
+      return;
+    }
+
+    openShift.mutate(
+      {
+        openingAmount: numericAmount,
+        notes: notes.trim() || undefined,
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("cash_shift.opened_success"));
+          handleClose();
+        },
+        onError: (err) => {
+          toast.error(extractErrorMessage(err));
+        },
+      }
+    );
+  };
+
+  return (
+    <DefaulModal
+      open={open}
+      close={handleClose}
+      isHeader
+      title_header={t("cash_shift.open_title")}
+      width={480}
+    >
+      <div className="mt-6">
+        <Input
+          name="openingAmount"
+          label={t("cash_shift.opening_amount")}
+          placeholder={t("cash_shift.opening_amount_placeholder")}
+          type="number"
+          seprator
+          value={openingAmount}
+          onChange={(e) => {
+            setOpeningAmount(e.target.value);
+            setError("");
+          }}
+          error_text={error}
+        />
+
+        <div className="mt-4">
+          <Textarea
+            name="notes"
+            label={t("cash_shift.notes")}
+            placeholder={t("cash_shift.notes_placeholder")}
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            isNotRequired
+          />
+        </div>
+
+        <div className="flex gap-3 mt-6">
+          <Button
+            label={t("cash_shift.cancel")}
+            type="button"
+            onClick={handleClose}
+            className="bg-gray-100 text-gray-700"
+          />
+          <Button
+            label={t("cash_shift.open_shift")}
+            type="button"
+            onClick={handleSubmit}
+            isloading={openShift.isPending}
+          />
+        </div>
+      </div>
+    </DefaulModal>
+  );
+};
+
+export default OpenCashShiftModal;

src/pages/cashShifts/enum/Enum.ts

@@ -0,0 +1,4 @@
+export enum CashShiftStatus {
+  OPEN = "open",
+  CLOSED = "closed",
+}

src/pages/cashShifts/hooks/useCashShiftData.ts

@@ -0,0 +1,66 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/CashShiftService";
+import type {
+  CloseCashShiftPayload,
+  OpenCashShiftPayload,
+} from "../types/Types";
+import type { GetCashShiftsParams } from "../service/CashShiftService";
+
+const invalidateCashShiftQueries = (queryClient: ReturnType<typeof useQueryClient>) => {
+  queryClient.invalidateQueries({ queryKey: ["cash-shifts"] });
+  queryClient.invalidateQueries({ queryKey: ["cash-shift-current"] });
+  queryClient.invalidateQueries({ queryKey: ["cash-shift-current-summary"] });
+  queryClient.invalidateQueries({ queryKey: ["cash-shift-summary"] });
+};
+
+export const useGetCashShifts = (params?: GetCashShiftsParams) => {
+  return useQuery({
+    queryKey: ["cash-shifts", params],
+    queryFn: () => api.getCashShifts(params),
+  });
+};
+
+export const useGetCurrentCashShift = () => {
+  return useQuery({
+    queryKey: ["cash-shift-current"],
+    queryFn: () => api.getCurrentCashShift(),
+  });
+};
+
+export const useGetCurrentCashShiftSummary = (enabled = true) => {
+  return useQuery({
+    queryKey: ["cash-shift-current-summary"],
+    queryFn: () => api.getCurrentCashShiftSummary(),
+    enabled,
+  });
+};
+
+export const useGetCashShiftSummary = (shiftId: string, enabled = true) => {
+  return useQuery({
+    queryKey: ["cash-shift-summary", shiftId],
+    queryFn: () => api.getCashShiftSummary(shiftId),
+    enabled: enabled && !!shiftId,
+  });
+};
+
+export const useOpenCashShift = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: OpenCashShiftPayload) => api.openCashShift(payload),
+    onSuccess: () => invalidateCashShiftQueries(queryClient),
+  });
+};
+
+export const useCloseCashShift = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      shiftId,
+      payload,
+    }: {
+      shiftId: string;
+      payload: CloseCashShiftPayload;
+    }) => api.closeCashShift(shiftId, payload),
+    onSuccess: () => invalidateCashShiftQueries(queryClient),
+  });
+};

src/pages/cashShifts/hooks/useCashShiftFilters.ts

@@ -0,0 +1,123 @@
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import type { FilterValues } from "@/components/Filters";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+const DEFAULT_FILTERS: FilterValues = {
+  status: "",
+  startDate: "",
+  endDate: "",
+};
+
+const getFiltersFromParams = (searchParams: URLSearchParams): FilterValues => {
+  const filters: FilterValues = { ...DEFAULT_FILTERS };
+  const status = searchParams.get("status");
+  const startDate = searchParams.get("startDate");
+  const endDate = searchParams.get("endDate");
+
+  if (status) filters.status = status;
+  if (startDate) filters.startDate = startDate;
+  if (endDate) filters.endDate = endDate;
+
+  return filters;
+};
+
+const getPageFromParams = (searchParams: URLSearchParams): number => {
+  const page = searchParams.get("page");
+  const parsed = page ? parseInt(page, 10) : DEFAULT_PAGE;
+  return Number.isNaN(parsed) || parsed < 1 ? DEFAULT_PAGE : parsed;
+};
+
+const buildSearchParams = (filters: FilterValues, page: number): URLSearchParams => {
+  const params = new URLSearchParams();
+
+  if (page > DEFAULT_PAGE) {
+    params.set("page", String(page));
+  }
+
+  if (filters.status) {
+    params.set("status", filters.status as string);
+  }
+
+  if (filters.startDate) {
+    params.set("startDate", filters.startDate as string);
+  }
+
+  if (filters.endDate) {
+    params.set("endDate", filters.endDate as string);
+  }
+
+  return params;
+};
+
+export const useCashShiftFilters = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [filters, setFilters] = useState<FilterValues>(() =>
+    getFiltersFromParams(searchParams)
+  );
+  const [currentPage, setCurrentPage] = useState(() =>
+    getPageFromParams(searchParams)
+  );
+  const [limit] = useState(DEFAULT_LIMIT);
+
+  useEffect(() => {
+    setFilters(getFiltersFromParams(searchParams));
+    setCurrentPage(getPageFromParams(searchParams));
+  }, [searchParams]);
+
+  const updateUrlParams = useCallback(
+    (newFilters: FilterValues, page: number) => {
+      setSearchParams(buildSearchParams(newFilters, page), { replace: true });
+    },
+    [setSearchParams]
+  );
+
+  const apiParams = useMemo(() => {
+    const params: Record<string, string | number> = {
+      page: currentPage,
+      limit,
+    };
+
+    if (filters.status) {
+      params.status = filters.status as string;
+    }
+
+    if (filters.startDate) {
+      params.startDate = filters.startDate as string;
+    }
+
+    if (filters.endDate) {
+      params.endDate = filters.endDate as string;
+    }
+
+    return params;
+  }, [filters, currentPage, limit]);
+
+  const handleFiltersChange = useCallback(
+    (newFilters: FilterValues) => {
+      setFilters(newFilters);
+      setCurrentPage(DEFAULT_PAGE);
+      updateUrlParams(newFilters, DEFAULT_PAGE);
+    },
+    [updateUrlParams]
+  );
+
+  const handlePageChange = useCallback(
+    (page: number) => {
+      setCurrentPage(page);
+      updateUrlParams(filters, page);
+    },
+    [filters, updateUrlParams]
+  );
+
+  return {
+    filters,
+    currentPage,
+    apiParams,
+    handleFiltersChange,
+    handlePageChange,
+    limit,
+  };
+};

src/pages/cashShifts/service/CashShiftService.ts

@@ -0,0 +1,82 @@
+import axios from "@/config/axios";
+import type {
+  CloseCashShiftPayload,
+  GetCashShiftResponse,
+  GetCashShiftsResponse,
+  GetCashShiftSummaryResponse,
+  OpenCashShiftPayload,
+} from "../types/Types";
+
+export interface GetCashShiftsParams {
+  page?: number;
+  limit?: number;
+  status?: string;
+  adminId?: string;
+  startDate?: string;
+  endDate?: string;
+  orderBy?: string;
+  order?: "asc" | "desc";
+}
+
+export const getCashShifts = async (
+  params?: GetCashShiftsParams
+): Promise<GetCashShiftsResponse> => {
+  const { data } = await axios.get<GetCashShiftsResponse>("/admin/cash-shifts", {
+    params,
+  });
+  return data;
+};
+
+export const getCurrentCashShift = async (): Promise<GetCashShiftResponse> => {
+  const { data } = await axios.get<GetCashShiftResponse>(
+    "/admin/cash-shifts/current"
+  );
+  return data;
+};
+
+export const getCurrentCashShiftSummary =
+  async (): Promise<GetCashShiftSummaryResponse> => {
+    const { data } = await axios.get<GetCashShiftSummaryResponse>(
+      "/admin/cash-shifts/current/summary"
+    );
+    return data;
+  };
+
+export const getCashShiftSummary = async (
+  shiftId: string
+): Promise<GetCashShiftSummaryResponse> => {
+  const { data } = await axios.get<GetCashShiftSummaryResponse>(
+    `/admin/cash-shifts/${shiftId}/summary`
+  );
+  return data;
+};
+
+export const getCashShiftById = async (
+  shiftId: string
+): Promise<GetCashShiftResponse> => {
+  const { data } = await axios.get<GetCashShiftResponse>(
+    `/admin/cash-shifts/${shiftId}`
+  );
+  return data;
+};
+
+export const openCashShift = async (
+  payload: OpenCashShiftPayload
+): Promise<GetCashShiftResponse> => {
+  const { data } = await axios.post<GetCashShiftResponse>(
+    "/admin/cash-shifts/open",
+    payload
+  );
+  return data;
+};
+
+export const closeCashShift = async (
+  shiftId: string,
+  payload: CloseCashShiftPayload
+): Promise<GetCashShiftResponse> => {
+  const { data } = await axios.patch<GetCashShiftResponse>(
+    `/admin/cash-shifts/${shiftId}/close`,
+    payload
+  );
+  return data;
+};

src/pages/cashShifts/types/Types.ts

@@ -0,0 +1,60 @@
+import type { IResponse } from "@/types/response.types";
+import type { RowDataType } from "@/components/types/TableTypes";
+import type { CashShiftStatus } from "../enum/Enum";
+
+export interface CashShiftAdmin {
+  id: string;
+  firstName?: string;
+  lastName?: string;
+  phone: string;
+}
+
+export interface CashShift extends RowDataType {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  openedAt: string;
+  closedAt: string | null;
+  openingAmount: number;
+  expectedAmount: number | null;
+  countedAmount: number | null;
+  differenceAmount: number | null;
+  ordersCount: number;
+  status: CashShiftStatus;
+  notes: string | null;
+  admin: CashShiftAdmin;
+}
+
+export interface CashShiftSummary {
+  ordersCount: number;
+  cashReceived: number;
+  onlineReceived: number;
+  creditCardReceived: number;
+  totalReceived: number;
+  expectedAmount: number;
+}
+
+export interface PaginationMeta {
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export type GetCashShiftsResponse = IResponse<CashShift[]> & {
+  meta: PaginationMeta;
+};
+
+export type GetCashShiftResponse = IResponse<CashShift>;
+export type GetCashShiftSummaryResponse = IResponse<CashShiftSummary | null>;
+
+export interface OpenCashShiftPayload {
+  openingAmount: number;
+  notes?: string;
+}
+
+export interface CloseCashShiftPayload {
+  countedAmount: number;
+  notes?: string;
+}

src/pages/customers/Create.tsx

@@ -1,155 +1,250 @@
+import { type FC, useEffect, useMemo, 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 MultiSelect from '@/components/MultiSelect'
 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 { useGetUserGroups } from '@/pages/customers/groups/hooks/useUserGroupData'
+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
+    groupIds: 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
+    if (values.groupIds.length > 0) payload.groupIds = values.groupIds
+
+    return payload
+}
 
 const CreateCustomer: FC = () => {
+    const navigate = useNavigate()
+    const { mutate: createUser, isPending } = useCreateUser()
+    const { mutate: singleUpload, isPending: isUploading } = useSingleUpload()
+    const { data: groupsData } = useGetUserGroups()
+    const [avatarFile, setAvatarFile] = useState<File[]>([])
+    const [avatarPreviewUrl, setAvatarPreviewUrl] = useState('')
+
+    const groupOptions = useMemo(
+        () =>
+            (groupsData?.data || []).map((group) => ({
+                value: group.id,
+                label: group.name,
+            })),
+        [groupsData],
+    )
+
+    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: '',
+            groupIds: [],
+        },
+        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(),
+            groupIds: Yup.array().of(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'>
+                        <MultiSelect
+                            label='گروه‌ها'
+                            items={groupOptions}
+                            value={formik.values.groupIds}
+                            onChange={(values) => formik.setFieldValue('groupIds', values)}
+                            placeholder='انتخاب گروه‌ها'
+                            error_text={
+                                formik.touched.groupIds && formik.errors.groupIds
+                                    ? String(formik.errors.groupIds)
+                                    : ''
+                            }
+                        />
+                    </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>

src/pages/customers/Groups.tsx

@@ -0,0 +1 @@
+export { default } from "./groups/List";

src/pages/customers/List.tsx

@@ -1,167 +1,158 @@
-import Table from '@/components/Table'
-import Filters, { type FilterValues, type FieldType } from '@/components/Filters'
-import { type FC, useState, useMemo, useCallback } from 'react'
-import { useGetUsers } from './hooks/useUsersData'
-import type { Customer, CustomerListRow } from '@/pages/customers/types/Types'
-import { formatOptionalDate, formatFaNumber } from '@/helpers/func'
+import Button from "@/components/Button";
+import Filters, { type FieldType } from "@/components/Filters";
+import Table from "@/components/Table";
+import { Pages } from "@/config/Pages";
+import { formatFaNumber, formatOptionalDate } from "@/helpers/func";
+import type { CustomerListRow, UserRestaurant } from "@/pages/customers/types/Types";
+import { DocumentDownload, DocumentUpload, Edit } from "iconsax-react";
+import { type FC, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import ImportCustomersModal from "./components/ImportCustomersModal";
+import { useCustomerFilters } from "./hooks/useCustomerFilters";
+import { useGetUsers } from "./hooks/useUsersData";
+import { downloadCustomerImportSampleExcel } from "./utils/downloadCustomerImportSampleExcel";
 
-const mapCustomerToRow = (customer: Customer): CustomerListRow => {
-    const fullName = [customer.firstName, customer.lastName].filter(Boolean).join(' ').trim()
-    return {
-        id: customer.id,
-        fullName: fullName || 'بدون نام',
-        phone: customer.phone || '-',
-        birthDate: formatOptionalDate(customer.birthDate),
-        marriageDate: formatOptionalDate(customer.marriageDate),
-        wallet: formatFaNumber(customer.wallet),
-        points: formatFaNumber(customer.points),
-        status: customer.isActive ? 'فعال' : 'غیرفعال',
-    }
-}
+const mapUserRestaurantToRow = (userRestaurant: UserRestaurant): CustomerListRow => {
+  const { user, orderCount, totalOrderAmount } = userRestaurant;
+  const fullName = [user.firstName, user.lastName].filter(Boolean).join(" ").trim();
+  return {
+    id: user.id,
+    fullName: fullName || "بدون نام",
+    phone: user.phone || "-",
+    birthDate: formatOptionalDate(user.birthDate),
+    marriageDate: formatOptionalDate(user.marriageDate),
+    orderCount: formatFaNumber(orderCount),
+    totalOrderAmount: formatFaNumber(totalOrderAmount),
+    status: user.isActive !== false ? "فعال" : "غیرفعال",
+    firstName: user.firstName,
+    lastName: user.lastName,
+    birthDateRaw: user.birthDate,
+    marriageDateRaw: user.marriageDate,
+    gender: user.gender,
+    avatarUrl: user.avatarUrl,
+  };
+};
 
 const CustomersList: FC = () => {
-    const { data: usersData, isLoading } = useGetUsers()
-    const [filters, setFilters] = useState<FilterValues>({ search: '', status: 'all' })
-    const [currentPage, setCurrentPage] = useState(1)
-    const limit = 10
+  const { t } = useTranslation("global");
+  const navigate = useNavigate();
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
 
-    const filterFields = useMemo<FieldType[]>(() => [
-        {
-            type: 'input',
-            name: 'search',
-            placeholder: 'نام یا شماره تماس',
-        },
-        {
-            type: 'select',
-            name: 'status',
-            placeholder: 'انتخاب وضعیت',
-            defaultValue: 'all',
-            options: [
-                { label: 'همه وضعیت‌ها', value: 'all' },
-                { label: 'فعال', value: 'active' },
-                { label: 'غیرفعال', value: 'inactive' },
-            ],
-        },
-    ], [])
+  const { filters, currentPage, apiParams, handleFiltersChange, handlePageChange } = useCustomerFilters();
 
-    const customers = useMemo(() => usersData?.data ?? [], [usersData])
+  const { data: usersData, isLoading } = useGetUsers(apiParams);
 
-    const filteredCustomers = useMemo(() => {
-        const searchValue = (filters.search as string || '').toLowerCase().trim()
-        const statusFilter = filters.status || 'all'
+  const filterFields = useMemo<FieldType[]>(
+    () => [
+      {
+        type: "input",
+        name: "search",
+        placeholder: "نام یا شماره تماس",
+      },
+    ],
+    [],
+  );
 
-        return customers.filter((customer) => {
-            const fullName = [customer.firstName, customer.lastName].filter(Boolean).join(' ').toLowerCase().trim()
-            const matchesSearch =
-                searchValue === '' ||
-                fullName.includes(searchValue) ||
-                (customer.phone || '').includes(searchValue)
+  const userRestaurants = usersData?.data ?? [];
+  const tableData = useMemo<CustomerListRow[]>(() => userRestaurants.map(mapUserRestaurantToRow), [userRestaurants]);
 
-            const matchesStatus =
-                statusFilter === 'all' ||
-                (statusFilter === 'active' && customer.isActive) ||
-                (statusFilter === 'inactive' && !customer.isActive)
+  const totalPages = usersData?.meta?.totalPages || 1;
 
-            return matchesSearch && matchesStatus
-        })
-    }, [customers, filters])
+  const columns = useMemo(
+    () => [
+      {
+        key: "fullName",
+        title: "نام و نام خانوادگی",
+      },
+      {
+        key: "phone",
+        title: "شماره تماس",
+      },
+      {
+        key: "birthDate",
+        title: "تاریخ تولد",
+      },
+      {
+        key: "marriageDate",
+        title: "تاریخ ازدواج",
+      },
+      {
+        key: "orderCount",
+        title: "تعداد سفارش",
+      },
+      {
+        key: "totalOrderAmount",
+        title: "مجموع سفارش (تومان)",
+      },
+      {
+        key: "status",
+        title: "وضعیت",
+        render: (item: CustomerListRow) => (
+          <span className={`px-3 py-1 rounded-full text-xs ${item.status === "فعال" ? "bg-green-100 text-green-700" : "bg-red-100 text-red-600"}`}>{item.status}</span>
+        ),
+      },
+      {
+        key: "details",
+        title: "عملیات",
+        render: (item: CustomerListRow) => (
+          <button
+            type="button"
+            className="text-primary text-xs flex items-center gap-1"
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(Pages.customers.update + item.id, {
+                state: { customer: item },
+              });
+            }}
+          >
+            <Edit size={18} color="#0047FF" />
+          </button>
+        ),
+      },
+    ],
+    [navigate],
+  );
 
-    const totalPages = Math.max(1, Math.ceil(filteredCustomers.length / limit) || 1)
-
-    const paginatedCustomers = useMemo(() => {
-        const startIndex = (currentPage - 1) * limit
-        return filteredCustomers.slice(startIndex, startIndex + limit)
-    }, [filteredCustomers, currentPage, limit])
-
-    const tableData = useMemo<CustomerListRow[]>(() => paginatedCustomers.map(mapCustomerToRow), [paginatedCustomers])
-
-    const columns = useMemo(() => [
-        {
-            key: 'fullName',
-            title: 'نام و نام خانوادگی',
-        },
-        {
-            key: 'phone',
-            title: 'شماره تماس',
-        },
-        {
-            key: 'birthDate',
-            title: 'تاریخ تولد',
-        },
-        {
-            key: 'marriageDate',
-            title: 'تاریخ ازدواج',
-        },
-        {
-            key: 'wallet',
-            title: 'کیف پول (تومان)',
-        },
-        {
-            key: 'points',
-            title: 'امتیاز',
-        },
-        {
-            key: 'status',
-            title: 'وضعیت',
-            render: (item: CustomerListRow) => (
-                <span
-                    className={`px-3 py-1 rounded-full text-xs ${item.status === 'فعال' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'}`}
-                >
-                    {item.status}
-                </span>
-            ),
-        },
-        {
-            key: 'details',
-            title: 'جزئیات',
-        },
-    ], [])
-
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page)
-    }
-
-    const handleFiltersChange = useCallback((newFilters: FilterValues) => {
-        setFilters(newFilters)
-        setCurrentPage(1)
-    }, [])
-
-    return (
-        <div className='mt-5'>
-            <div className='flex justify-between items-center'>
-                <h1 className='text-lg font-light'>لیست مشتریان</h1>
-                {/* <Link to={Pages.customers.add}>
-                    <Button className='w-fit px-6'>
-                        <div className='flex gap-2 items-center'>
-                            <Add color='#fff' size={20} />
-                            <span>افزودن مشتری</span>
-                        </div>
-                    </Button>
-                </Link> */}
+  return (
+    <div className="mt-5">
+      <div className="flex flex-wrap justify-between items-center gap-3">
+        <h1 className="text-lg font-light">{t("customer.customer_list")}</h1>
+        <div className="flex flex-wrap gap-2">
+          <Button type="button" className="w-fit px-4 bg-gray-100 text-gray-700" onClick={downloadCustomerImportSampleExcel}>
+            <div className="flex items-center gap-2">
+              <DocumentDownload size={18} color="#374151" />
+              <span>{t("customer.download_sample")}</span>
             </div>
-
-            <div className='mt-8'>
-                <Filters
-                    fields={filterFields}
-                    onChange={handleFiltersChange}
-                    initialValues={filters}
-                    searchField="search"
-                />
+          </Button>
+          <Button type="button" className="w-fit px-4" onClick={() => setIsImportModalOpen(true)}>
+            <div className="flex items-center gap-2">
+              <DocumentUpload size={18} color="#fff" />
+              <span>{t("customer.import_excel")}</span>
             </div>
-
-            <Table
-                columns={columns}
-                data={tableData}
-                isloading={isLoading}
-                selectable
-                pagination={{
-                    currentPage,
-                    totalPages,
-                    onPageChange: handlePageChange,
-                }}
-            />
+          </Button>
         </div>
-    )
-}
+      </div>
 
-export default CustomersList
+      <div className="mt-8">
+        <Filters fields={filterFields} onChange={handleFiltersChange} initialValues={filters} searchField="search" />
+      </div>
+
+      <Table
+        columns={columns}
+        data={tableData}
+        isloading={isLoading}
+        selectable
+        pagination={{
+          currentPage,
+          totalPages,
+          onPageChange: handlePageChange,
+        }}
+      />
+
+      <ImportCustomersModal open={isImportModalOpen} onClose={() => setIsImportModalOpen(false)} />
+    </div>
+  );
+};
+
+export default CustomersList;

src/pages/customers/Update.tsx

@@ -0,0 +1,258 @@
+import { type FC, useEffect, useMemo, useState } from 'react'
+import { useFormik } from 'formik'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import MultiSelect from '@/components/MultiSelect'
+import Select from '@/components/Select'
+import DatePicker from '@/components/DatePicker'
+import UploadBox from '@/components/UploadBox'
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
+import { useGetUserGroupsForUser, useUpdateUser } from './hooks/useUsersData'
+import { useGetUserGroups } from '@/pages/customers/groups/hooks/useUserGroupData'
+import type { CustomerListRow, UpdateUserType } from './types/Types'
+import { Pages } from '@/config/Pages'
+import type { ErrorType } from '@/helpers/types'
+import { extractErrorMessage } from '@/config/func'
+
+type UpdateCustomerFormValues = {
+    firstName: string
+    lastName: string
+    birthDate: string
+    marriageDate: string
+    gender: string
+    groupIds: string[]
+}
+
+type CustomerUpdateLocationState = {
+    customer?: CustomerListRow
+}
+
+const UpdateCustomer: FC = () => {
+    const navigate = useNavigate()
+    const location = useLocation()
+    const { id } = useParams<{ id: string }>()
+    const { mutate: updateUser, isPending: isUpdating } = useUpdateUser()
+    const { mutate: singleUpload, isPending: isUploading } = useSingleUpload()
+    const { data: userGroupsData } = useGetUserGroupsForUser(id || '')
+    const { data: allGroupsData } = useGetUserGroups()
+    const [avatarFile, setAvatarFile] = useState<File[]>([])
+    const [avatarPreviewUrl, setAvatarPreviewUrl] = useState('')
+
+    const customer = (location.state as CustomerUpdateLocationState | null)?.customer
+
+    const initialGroupIds = useMemo(
+        () => (userGroupsData?.data || []).map((group) => group.id),
+        [userGroupsData],
+    )
+
+    const groupOptions = useMemo(
+        () =>
+            (allGroupsData?.data || []).map((group) => ({
+                value: group.id,
+                label: group.name,
+            })),
+        [allGroupsData],
+    )
+
+    useEffect(() => {
+        if (!customer?.avatarUrl) {
+            setAvatarPreviewUrl('')
+            return
+        }
+        setAvatarPreviewUrl(customer.avatarUrl)
+    }, [customer?.avatarUrl])
+
+    useEffect(() => {
+        if (avatarFile.length > 0) {
+            const url = URL.createObjectURL(avatarFile[0])
+            setAvatarPreviewUrl(url)
+            return () => URL.revokeObjectURL(url)
+        }
+    }, [avatarFile])
+
+    const formik = useFormik<UpdateCustomerFormValues>({
+        initialValues: {
+            firstName: customer?.firstName || '',
+            lastName: customer?.lastName || '',
+            birthDate: customer?.birthDateRaw || '',
+            marriageDate: customer?.marriageDateRaw || '',
+            gender:
+                customer?.gender === undefined || customer?.gender === null
+                    ? ''
+                    : String(customer.gender),
+            groupIds: initialGroupIds,
+        },
+        enableReinitialize: true,
+        onSubmit: (values) => {
+            if (!id) {
+                toast.error('شناسه مشتری یافت نشد')
+                return
+            }
+
+            const submitUpdate = (avatarUrl?: string) => {
+                const payload: UpdateUserType = {
+                    groupIds: values.groupIds,
+                }
+
+                if (values.firstName.trim()) payload.firstName = values.firstName.trim()
+                if (values.lastName.trim()) payload.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
+
+                const groupsChanged =
+                    JSON.stringify([...values.groupIds].sort()) !==
+                    JSON.stringify([...initialGroupIds].sort())
+                const hasProfileChanges =
+                    Boolean(payload.firstName) ||
+                    Boolean(payload.lastName) ||
+                    Boolean(payload.birthDate) ||
+                    Boolean(payload.marriageDate) ||
+                    payload.gender !== undefined ||
+                    Boolean(payload.avatarUrl)
+
+                if (!hasProfileChanges && !groupsChanged) {
+                    toast.info('حداقل یک فیلد را برای ویرایش وارد کنید')
+                    return
+                }
+
+                updateUser(
+                    { userId: id, params: payload },
+                    {
+                        onSuccess: () => {
+                            toast.success('اطلاعات مشتری با موفقیت ویرایش شد')
+                            navigate(Pages.customers.list)
+                        },
+                        onError: (error: ErrorType) => {
+                            toast.error(extractErrorMessage(error, 'خطا در ویرایش مشتری'))
+                        },
+                    },
+                )
+            }
+
+            if (avatarFile.length > 0) {
+                singleUpload(avatarFile[0], {
+                    onSuccess: (response) => {
+                        const avatarUrl = response?.data?.url || ''
+                        submitUpdate(avatarUrl)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(extractErrorMessage(error, 'خطا در آپلود تصویر'))
+                    },
+                })
+            } else {
+                submitUpdate(customer?.avatarUrl || undefined)
+            }
+        },
+    })
+
+    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'
+                    isloading={isUpdating || isUploading}
+                    onClick={() => formik.handleSubmit()}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <TickCircle size={20} color='#fff' />
+                        <span>ذخیره تغییرات</span>
+                    </div>
+                </Button>
+            </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-1 sm:grid-cols-2 gap-4 mt-6'>
+                        <Input
+                            label='نام'
+                            placeholder=''
+                            name='firstName'
+                            value={formik.values.firstName}
+                            onChange={formik.handleChange}
+                            isNotRequired
+                        />
+                        <Input
+                            label='نام خانوادگی'
+                            placeholder=''
+                            name='lastName'
+                            value={formik.values.lastName}
+                            onChange={formik.handleChange}
+                            isNotRequired
+                        />
+                    </div>
+
+                    <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='grid grid-cols-1 sm:grid-cols-2 gap-4 mt-5'>
+                        <Select
+                            label='جنسیت'
+                            placeholder='انتخاب'
+                            name='gender'
+                            value={formik.values.gender}
+                            onChange={formik.handleChange}
+                            isNotRequired
+                            items={[
+                                { value: 'true', label: 'مرد' },
+                                { value: 'false', label: 'زن' },
+                            ]}
+                        />
+                    </div>
+
+                    <div className='mt-5'>
+                        <MultiSelect
+                            label='گروه‌ها'
+                            items={groupOptions}
+                            value={formik.values.groupIds}
+                            onChange={(values) => formik.setFieldValue('groupIds', values)}
+                            placeholder='انتخاب گروه‌ها'
+                        />
+                    </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>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UpdateCustomer

src/pages/customers/campaigns/Create.tsx

@@ -0,0 +1,152 @@
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import MultiSelect from "@/components/MultiSelect";
+import Select from "@/components/Select";
+import { extractErrorMessage } from "@/config/func";
+import { Pages } from "@/config/Pages";
+import type { ErrorType } from "@/helpers/types";
+import { useFormik } from "formik";
+import { TickCircle } from "iconsax-react";
+import { type FC, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import * as Yup from "yup";
+import { useGetUserGroups } from "@/pages/customers/groups/hooks/useUserGroupData";
+import { useCreateDiscountCampaign } from "./hooks/useCampaignData";
+import type { CreateDiscountCampaignType } from "./types/Types";
+
+const sentTypeOptions = [
+  { value: "push", label: "پوش نوتیفیکیشن" },
+  { value: "sms", label: "پیامک" },
+];
+
+const CreateCampaign: FC = () => {
+  const navigate = useNavigate();
+  const { mutate: createCampaign, isPending } = useCreateDiscountCampaign();
+  const { data: groupsData } = useGetUserGroups();
+
+  const groupOptions = useMemo(
+    () =>
+      (groupsData?.data || []).map((group) => ({
+        value: group.id,
+        label: group.name,
+      })),
+    [groupsData]
+  );
+
+  const formik = useFormik<CreateDiscountCampaignType>({
+    initialValues: {
+      title: "",
+      groups: [],
+      sentType: "push",
+      discountCode: "",
+      ocasion: "",
+    },
+    validationSchema: Yup.object().shape({
+      title: Yup.string().required("عنوان کمپین الزامی است"),
+      groups: Yup.array()
+        .of(Yup.string())
+        .min(1, "حداقل یک گروه باید انتخاب شود"),
+      sentType: Yup.string().required("نوع ارسال الزامی است"),
+      discountCode: Yup.string().required("کد تخفیف الزامی است"),
+      ocasion: Yup.string().required("مناسبت الزامی است"),
+    }),
+    onSubmit: (values) => {
+      createCampaign(values, {
+        onSuccess: () => {
+          toast.success("کمپین با موفقیت ایجاد شد");
+          navigate(Pages.customers.campaigns);
+        },
+        onError: (error: ErrorType) => {
+          toast.error(extractErrorMessage(error));
+        },
+      });
+    },
+  });
+
+  return (
+    <div className="mt-5">
+      <div className="flex w-full justify-between items-center">
+        <div className="text-lg font-light">افزودن کمپین تخفیف</div>
+        <Button
+          className="px-5 w-fit"
+          onClick={() => formik.handleSubmit()}
+          isloading={isPending}
+        >
+          <div className="flex gap-2 items-center">
+            <TickCircle className="size-5" color="white" />
+            <div>ثبت کمپین</div>
+          </div>
+        </Button>
+      </div>
+
+      <div className="mt-6">
+        <div className="bg-white rounded-3xl p-6 flex flex-col gap-6">
+          <Input
+            label="عنوان کمپین"
+            name="title"
+            value={formik.values.title}
+            onChange={formik.handleChange}
+            error_text={
+              formik.touched.title && formik.errors.title
+                ? formik.errors.title
+                : ""
+            }
+          />
+
+          <Input
+            label="کد تخفیف"
+            name="discountCode"
+            value={formik.values.discountCode}
+            onChange={formik.handleChange}
+            error_text={
+              formik.touched.discountCode && formik.errors.discountCode
+                ? formik.errors.discountCode
+                : ""
+            }
+          />
+
+          <Input
+            label="مناسبت"
+            name="ocasion"
+            value={formik.values.ocasion}
+            onChange={formik.handleChange}
+            error_text={
+              formik.touched.ocasion && formik.errors.ocasion
+                ? formik.errors.ocasion
+                : ""
+            }
+          />
+
+          <Select
+            label="نوع ارسال"
+            name="sentType"
+            items={sentTypeOptions}
+            value={formik.values.sentType}
+            onChange={formik.handleChange}
+            error_text={
+              formik.touched.sentType && formik.errors.sentType
+                ? formik.errors.sentType
+                : ""
+            }
+          />
+
+          <MultiSelect
+            label="گروه‌های مشتری"
+            items={groupOptions}
+            value={formik.values.groups}
+            onChange={(values) => formik.setFieldValue("groups", values)}
+            placeholder="انتخاب گروه‌ها"
+            error_text={
+              formik.touched.groups && formik.errors.groups
+                ? String(formik.errors.groups)
+                : ""
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateCampaign;

src/pages/customers/campaigns/List.tsx

@@ -0,0 +1,54 @@
+import Button from "@/components/Button";
+import Filters from "@/components/Filters";
+import Table from "@/components/Table";
+import { Pages } from "@/config/Pages";
+import { Add } from "iconsax-react";
+import { type FC } from "react";
+import { Link } from "react-router-dom";
+import { getCampaignTableColumns } from "./components/CampaignTableColumns";
+import { useGetCampaigns } from "./hooks/useCampaignData";
+import { useCampaignFilters } from "./hooks/useCampaignFilters";
+
+const CampaignsList: FC = () => {
+  const { filters, currentPage, apiParams, handleFiltersChange, handlePageChange, limit } = useCampaignFilters();
+
+  const { data: campaignsData, isLoading } = useGetCampaigns(apiParams);
+
+  const campaigns = campaignsData?.data || [];
+  const totalPages = campaignsData?.meta?.totalPages || Math.max(1, Math.ceil(campaigns.length / limit) || 1);
+
+  const columns = getCampaignTableColumns();
+
+  return (
+    <div className="mt-5">
+      <div className="flex justify-between items-center">
+        <h1 className="text-lg font-light">کمپین‌ها</h1>
+        <Link to={Pages.customers.campaignsAdd}>
+          <Button className="w-fit px-6">
+            <div className="flex gap-2 items-center">
+              <Add color="#fff" size={20} />
+              <span>افزودن کمپین</span>
+            </div>
+          </Button>
+        </Link>
+      </div>
+
+      <div className="mt-8">
+        <Filters fields={[]} onChange={handleFiltersChange} initialValues={filters} searchField="search" />
+      </div>
+
+      <Table
+        columns={columns}
+        data={campaigns}
+        isloading={isLoading}
+        pagination={{
+          currentPage,
+          totalPages,
+          onPageChange: handlePageChange,
+        }}
+      />
+    </div>
+  );
+};
+
+export default CampaignsList;

src/pages/customers/campaigns/components/CampaignTableColumns.tsx

@@ -0,0 +1,114 @@
+import Status from "@/components/Status";
+import type { ColumnType } from "@/components/types/TableTypes";
+import { formatFaNumber, formatOptionalDate, formatPrice } from "@/helpers/func";
+import type { Campaign } from "../types/Types";
+
+const getGroupNames = (groups: Campaign["groups"]) => {
+  if (!groups?.length) return "-";
+
+  return groups
+    .map((group) => {
+      if (typeof group === "string") return group;
+      const count = group.count != null ? ` (${formatFaNumber(group.count)})` : "";
+      return `${group.name}${count}`;
+    })
+    .join(" ، ");
+};
+
+const sentTypeLabels: Record<string, string> = {
+  push: "پوش نوتیفیکیشن",
+  sms: "پیامک",
+};
+
+const statusLabels: Record<string, string> = {
+  pending: "در انتظار",
+  processing: "در حال ارسال",
+  completed: "تکمیل شده",
+  failed: "ناموفق",
+  partial: "ناقص",
+};
+
+const getStatusVariant = (status: string): "success" | "error" | "warning" | "info" | "pending" => {
+  const variantMap: Record<string, "success" | "error" | "warning" | "info" | "pending"> = {
+    pending: "pending",
+    processing: "info",
+    completed: "success",
+    failed: "error",
+    partial: "warning",
+  };
+  return variantMap[status] || "pending";
+};
+
+export const getCampaignTableColumns = (): ColumnType<Campaign>[] => {
+  return [
+    {
+      key: "title",
+      title: "عنوان",
+      render: (item: Campaign) => item.title || "-",
+    },
+    {
+      key: "discountCode",
+      title: "کد تخفیف",
+      render: (item: Campaign) => item.discountCode || "-",
+    },
+    {
+      key: "ocasion",
+      title: "مناسبت",
+      render: (item: Campaign) => item.ocasion || "-",
+    },
+    {
+      key: "sentType",
+      title: "نوع ارسال",
+      render: (item: Campaign) => sentTypeLabels[item.sentType] || item.sentType,
+    },
+    {
+      key: "groups",
+      title: "گروه‌ها",
+      render: (item: Campaign) => getGroupNames(item.groups),
+    },
+    {
+      key: "status",
+      title: "وضعیت",
+      render: (item: Campaign) => (
+        <Status variant={getStatusVariant(item.status)} label={statusLabels[item.status] || item.status} />
+      ),
+    },
+    {
+      key: "totalCount",
+      title: "تعداد کل",
+      render: (item: Campaign) => formatFaNumber(item.totalCount),
+    },
+    {
+      key: "sentCount",
+      title: "ارسال موفق",
+      render: (item: Campaign) => formatFaNumber(item.sentCount),
+    },
+    {
+      key: "failedCount",
+      title: "ارسال ناموفق",
+      render: (item: Campaign) => formatFaNumber(item.failedCount),
+    },
+    {
+      key: "totalCost",
+      title: "هزینه کل",
+      render: (item: Campaign) => formatPrice(item.totalCost),
+    },
+    {
+      key: "refunded",
+      title: "بازگشتی",
+      render: (item: Campaign) => formatPrice(item.refunded),
+    },
+    {
+      key: "createdAt",
+      title: "تاریخ ایجاد",
+      render: (item: Campaign) =>
+        formatOptionalDate(item.createdAt, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+          hour: "2-digit",
+          minute: "2-digit",
+        }),
+    },
+  ];
+};

src/pages/customers/campaigns/hooks/useCampaignData.ts

@@ -0,0 +1,38 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/CampaignService";
+import type { GetCampaignsParams } from "../types/Types";
+
+export const useGetCampaigns = (params?: GetCampaignsParams) => {
+  return useQuery({
+    queryKey: ["campaigns", params],
+    queryFn: () => api.getCampaigns(params),
+  });
+};
+
+export const useGetCampaignById = (id: string) => {
+  return useQuery({
+    queryKey: ["campaign", id],
+    queryFn: () => api.getCampaignById(id),
+    enabled: !!id,
+  });
+};
+
+export const useCreateDiscountCampaign = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createDiscountCampaign,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["campaigns"] });
+    },
+  });
+};
+
+export const useDeleteCampaign = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.deleteCampaign,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["campaigns"] });
+    },
+  });
+};

src/pages/customers/campaigns/hooks/useCampaignFilters.ts

@@ -0,0 +1,43 @@
+import { useMemo, useState } from "react";
+import type { FilterValues } from "@/components/Filters";
+import type { GetCampaignsParams } from "../types/Types";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+export const useCampaignFilters = () => {
+  const [filters, setFilters] = useState<FilterValues>({});
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [limit] = useState(DEFAULT_LIMIT);
+
+  const apiParams = useMemo<GetCampaignsParams>(() => {
+    const params: GetCampaignsParams = {
+      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/customers/campaigns/service/CampaignService.ts

@@ -0,0 +1,33 @@
+import axios from "@/config/axios";
+import type {
+  CampaignResponse,
+  CampaignsResponse,
+  CreateDiscountCampaignType,
+  GetCampaignsParams,
+} from "../types/Types";
+
+export const getCampaigns = async (
+  params?: GetCampaignsParams
+): Promise<CampaignsResponse> => {
+  const { data } = await axios.get<CampaignsResponse>("/admin/campaigns", {
+    params,
+  });
+  return data;
+};
+
+export const getCampaignById = async (id: string): Promise<CampaignResponse> => {
+  const { data } = await axios.get<CampaignResponse>(`/admin/campaigns/${id}`);
+  return data;
+};
+
+export const createDiscountCampaign = async (
+  params: CreateDiscountCampaignType
+) => {
+  const { data } = await axios.post("/admin/campaigns/discount", params);
+  return data;
+};
+
+export const deleteCampaign = async (id: string) => {
+  const { data } = await axios.delete(`/admin/campaigns/${id}`);
+  return data;
+};

src/pages/customers/campaigns/types/Types.ts

@@ -0,0 +1,56 @@
+import type { UserGroup } from "@/pages/customers/groups/types/Types";
+import type { IResponse } from "@/types/response.types";
+
+export type CampaignSentType = "push" | "sms";
+
+export type CampaignStatus = "pending" | "processing" | "completed" | "failed" | "partial";
+
+export type CampaignGroup = UserGroup & {
+  restaurant?: string;
+  count?: number;
+};
+
+export type Campaign = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  restaurant?: string;
+  title: string;
+  groups: CampaignGroup[] | string[];
+  sentType: CampaignSentType;
+  discountCode: string;
+  ocasion?: string;
+  totalCount: number;
+  totalCost: number;
+  refunded: number;
+  sentCount: number;
+  failedCount: number;
+  status: CampaignStatus | string;
+};
+
+export type PaginationMeta = {
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+};
+
+export type GetCampaignsParams = {
+  page?: number;
+  limit?: number;
+  search?: string;
+};
+
+export type CampaignsResponse = IResponse<Campaign[]> & {
+  meta?: PaginationMeta;
+};
+export type CampaignResponse = IResponse<Campaign>;
+
+export type CreateDiscountCampaignType = {
+  title: string;
+  groups: string[];
+  sentType: CampaignSentType;
+  discountCode: string;
+  ocasion: string;
+};

src/pages/customers/components/ImportCustomersModal.tsx

@@ -0,0 +1,128 @@
+import { type FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DocumentDownload } from 'iconsax-react';
+import { toast } from 'react-toastify';
+import DefaulModal from '@/components/DefaulModal';
+import Button from '@/components/Button';
+import UploadBox from '@/components/UploadBox';
+import { extractErrorMessage } from '@/config/func';
+import { useImportUsersFromExcel } from '../hooks/useUsersData';
+import { downloadCustomerImportSampleExcel } from '../utils/downloadCustomerImportSampleExcel';
+import type { ImportUsersResult } from '../types/Types';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+};
+
+const ImportCustomersModal: FC<Props> = ({ open, onClose }) => {
+  const { t } = useTranslation('global');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [importResult, setImportResult] = useState<ImportUsersResult | null>(null);
+  const [isResetUpload, setIsResetUpload] = useState(false);
+
+  const { mutate: importUsers, isPending } = useImportUsersFromExcel();
+
+  const handleClose = () => {
+    setSelectedFile(null);
+    setImportResult(null);
+    setIsResetUpload(prev => !prev);
+    onClose();
+  };
+
+  const handleImport = () => {
+    if (!selectedFile) {
+      toast.error(t('customer.import_file_required'));
+      return;
+    }
+
+    importUsers(selectedFile, {
+      onSuccess: (response) => {
+        setImportResult(response);
+        toast.success(response.message || t('customer.import_success'));
+      },
+      onError: (error) => {
+        toast.error(extractErrorMessage(error, t('customer.import_failed')));
+      },
+    });
+  };
+
+  return (
+    <DefaulModal
+      open={open}
+      close={handleClose}
+      isHeader
+      title_header={t('customer.import_excel')}
+      width={520}
+    >
+      <div className='mt-6 flex flex-col gap-5'>
+        <p className='text-sm text-gray-600 leading-6'>
+          {t('customer.import_description')}
+        </p>
+
+        <Button
+          type='button'
+          className='w-fit px-4 bg-gray-100 text-gray-700'
+          onClick={downloadCustomerImportSampleExcel}
+        >
+          <div className='flex items-center gap-2'>
+            <DocumentDownload size={18} color='#374151' />
+            <span>{t('customer.download_sample')}</span>
+          </div>
+        </Button>
+
+        <UploadBox
+          label={t('customer.import_file')}
+          onChange={(files) => setSelectedFile(files[0] ?? null)}
+          isReset={isResetUpload}
+        />
+
+        {importResult && (
+          <div className='rounded-xl border border-border p-4 text-sm space-y-2'>
+            <p>{t('customer.import_total', { count: importResult.total })}</p>
+            <p>{t('customer.import_created', { count: importResult.usersCreated })}</p>
+            <p>{t('customer.import_linked', { count: importResult.usersLinked })}</p>
+            <p>{t('customer.import_already_linked', { count: importResult.usersAlreadyLinked })}</p>
+
+            {importResult.errors.length > 0 && (
+              <div className='mt-3'>
+                <p className='font-medium text-red-600 mb-2'>
+                  {t('customer.import_errors', { count: importResult.errors.length })}
+                </p>
+                <ul className='max-h-32 overflow-y-auto space-y-1 text-red-600'>
+                  {importResult.errors.map((error, index) => (
+                    <li key={`${error.row}-${index}`}>
+                      {t('customer.import_error_row', {
+                        row: error.row,
+                        message: error.message,
+                        phone: error.phone ? ` (${error.phone})` : '',
+                      })}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className='flex gap-3'>
+          <Button
+            label='انصراف'
+            type='button'
+            onClick={handleClose}
+            className='bg-gray-100 text-gray-700'
+          />
+          <Button
+            label={t('customer.import_submit')}
+            type='button'
+            onClick={handleImport}
+            isloading={isPending}
+            disabled={!selectedFile}
+          />
+        </div>
+      </div>
+    </DefaulModal>
+  );
+};
+
+export default ImportCustomersModal;

src/pages/customers/groups/Create.tsx

@@ -0,0 +1,60 @@
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import { extractErrorMessage } from "@/config/func";
+import { Pages } from "@/config/Pages";
+import type { ErrorType } from "@/helpers/types";
+import { useFormik } from "formik";
+import { TickCircle } from "iconsax-react";
+import { type FC } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import * as Yup from "yup";
+import { useCreateUserGroup } from "./hooks/useUserGroupData";
+import type { CreateUserGroupType } from "./types/Types";
+
+const CreateUserGroup: FC = () => {
+  const navigate = useNavigate();
+  const { mutate: createUserGroup, isPending } = useCreateUserGroup();
+
+  const formik = useFormik<CreateUserGroupType>({
+    initialValues: {
+      name: "",
+    },
+    validationSchema: Yup.object().shape({
+      name: Yup.string().required("نام گروه الزامی است"),
+    }),
+    onSubmit: (values) => {
+      createUserGroup(values, {
+        onSuccess: () => {
+          toast.success("گروه با موفقیت ایجاد شد");
+          navigate(Pages.customers.groups);
+        },
+        onError: (error: ErrorType) => {
+          toast.error(extractErrorMessage(error));
+        },
+      });
+    },
+  });
+
+  return (
+    <div className="mt-5">
+      <div className="flex w-full justify-between items-center">
+        <div className="text-lg font-light">افزودن گروه مشتری</div>
+        <Button className="px-5 w-fit" onClick={() => formik.handleSubmit()} isloading={isPending}>
+          <div className="flex gap-2 items-center">
+            <TickCircle className="size-5" color="white" />
+            <div>ثبت گروه</div>
+          </div>
+        </Button>
+      </div>
+
+      <div className="mt-6">
+        <div className="bg-white rounded-3xl p-6">
+          <Input label="نام گروه" name="name" value={formik.values.name} onChange={formik.handleChange} error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ""} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateUserGroup;

src/pages/customers/groups/List.tsx

@@ -0,0 +1,75 @@
+import { type FC } from "react";
+import Table from "@/components/Table";
+import Filters from "@/components/Filters";
+import { Add } from "iconsax-react";
+import Button from "@/components/Button";
+import { Link } from "react-router-dom";
+import { Pages } from "@/config/Pages";
+import {
+  useDeleteUserGroup,
+  useGetUserGroups,
+} from "./hooks/useUserGroupData";
+import { useUserGroupFilters } from "./hooks/useUserGroupFilters";
+import { getUserGroupTableColumns } from "./components/UserGroupTableColumns";
+import { useUserGroupFiltersFields } from "./components/UserGroupFiltersFields";
+
+const UserGroupsList: FC = () => {
+  const {
+    filters,
+    currentPage,
+    apiParams,
+    handleFiltersChange,
+    handlePageChange,
+    limit,
+  } = useUserGroupFilters();
+
+  const { data: groupsData, isLoading } = useGetUserGroups(apiParams);
+  const { mutate: deleteUserGroup, isPending: isDeleting } =
+    useDeleteUserGroup();
+
+  const groups = groupsData?.data || [];
+  const columns = getUserGroupTableColumns({
+    onDelete: (id: string) => deleteUserGroup(id),
+    isDeleting,
+  });
+  const filterFields = useUserGroupFiltersFields();
+  const totalPages = Math.ceil(groups.length / limit) || 1;
+
+  return (
+    <div className="mt-5">
+      <div className="flex justify-between items-center">
+        <h1 className="text-lg font-light">گروه‌های مشتری</h1>
+        <Link to={Pages.customers.groupsAdd}>
+          <Button className="w-fit px-6">
+            <div className="flex gap-2 items-center">
+              <Add color="#fff" size={20} />
+              <span>افزودن گروه</span>
+            </div>
+          </Button>
+        </Link>
+      </div>
+
+      <div className="mt-8">
+        <Filters
+          fields={filterFields}
+          onChange={handleFiltersChange}
+          initialValues={filters}
+          searchField="search"
+        />
+      </div>
+
+      <Table
+        columns={columns}
+        data={groups}
+        isloading={isLoading}
+        pagination={{
+          currentPage,
+          totalPages,
+          onPageChange: handlePageChange,
+        }}
+      />
+    </div>
+  );
+};
+
+export default UserGroupsList;

src/pages/customers/groups/Update.tsx

@@ -0,0 +1,98 @@
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import PageLoading from "@/components/PageLoading";
+import { extractErrorMessage } from "@/config/func";
+import { Pages } from "@/config/Pages";
+import type { ErrorType } from "@/helpers/types";
+import { useFormik } from "formik";
+import { TickCircle } from "iconsax-react";
+import { type FC, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import * as Yup from "yup";
+import { useGetUserGroup, useUpdateUserGroup } from "./hooks/useUserGroupData";
+import type { CreateUserGroupType } from "./types/Types";
+import GroupUsersSection from "./components/GroupUsersSection";
+
+const UpdateUserGroup: FC = () => {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const { data: groupData, isLoading } = useGetUserGroup(id || "");
+  const { mutate: updateUserGroup, isPending } = useUpdateUserGroup();
+
+  const group = groupData?.data;
+
+  const formik = useFormik<CreateUserGroupType>({
+    initialValues: {
+      name: "",
+    },
+    validationSchema: Yup.object().shape({
+      name: Yup.string().required("نام گروه الزامی است"),
+    }),
+    onSubmit: (values) => {
+      if (!id) return;
+
+      updateUserGroup(
+        { id, params: values },
+        {
+          onSuccess: () => {
+            toast.success("گروه با موفقیت ویرایش شد");
+            navigate(Pages.customers.groups);
+          },
+          onError: (error: ErrorType) => {
+            toast.error(extractErrorMessage(error));
+          },
+        },
+      );
+    },
+  });
+
+  useEffect(() => {
+    if (group) {
+      formik.setValues({
+        name: group.name || "",
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [group]);
+
+  if (isLoading) {
+    return <PageLoading />;
+  }
+
+  if (!group) {
+    return (
+      <div className="w-full mt-4 flex justify-center items-center">
+        <div>گروه یافت نشد</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-5">
+      <div className="flex w-full justify-between items-center">
+        <div className="text-lg font-light">ویرایش گروه مشتری</div>
+        <Button className="px-5 w-fit" onClick={() => formik.handleSubmit()} isloading={isPending}>
+          <div className="flex gap-2 items-center">
+            <TickCircle className="size-5" color="white" />
+            <div>ثبت تغییرات</div>
+          </div>
+        </Button>
+      </div>
+
+      <div className="mt-6 bg-white rounded-3xl p-6">
+        <Input
+          label="نام گروه"
+          name="name"
+          value={formik.values.name}
+          onChange={formik.handleChange}
+          error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ""}
+        />
+      </div>
+
+      {id && <GroupUsersSection groupId={id} />}
+    </div>
+  );
+};
+
+export default UpdateUserGroup;

src/pages/customers/groups/components/AddUsersModal.tsx

@@ -0,0 +1,144 @@
+import Button from "@/components/Button";
+import DefaulModal from "@/components/DefaulModal";
+import Input from "@/components/Input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { extractErrorMessage } from "@/config/func";
+import type { ErrorType } from "@/helpers/types";
+import { useGetUsers } from "@/pages/customers/hooks/useUsersData";
+import type { User } from "@/pages/customers/types/Types";
+import { type FC, useMemo, useState } from "react";
+import { toast } from "react-toastify";
+import { useAddUsersToGroup } from "../hooks/useUserGroupData";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  groupId: string;
+  existingUserIds: string[];
+};
+
+const AddUsersModal: FC<Props> = ({ open, onClose, groupId, existingUserIds }) => {
+  const [search, setSearch] = useState("");
+  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
+
+  const { data: usersData, isLoading } = useGetUsers({
+    search: search || undefined,
+    limit: 50,
+  });
+
+  const { mutate: addUsersToGroup, isPending } = useAddUsersToGroup();
+
+  const availableUsers = useMemo(() => {
+    const users =
+      usersData?.data?.map((userRestaurant) => userRestaurant.user) ?? [];
+    return users.filter((user) => !existingUserIds.includes(user.id));
+  }, [usersData?.data, existingUserIds]);
+
+  const handleToggle = (userId: string, checked: boolean) => {
+    if (checked) {
+      setSelectedUserIds((prev) => [...prev, userId]);
+    } else {
+      setSelectedUserIds((prev) => prev.filter((id) => id !== userId));
+    }
+  };
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedUserIds(availableUsers.map((user) => user.id));
+    } else {
+      setSelectedUserIds([]);
+    }
+  };
+
+  const isAllSelected = useMemo(() => {
+    return (
+      availableUsers.length > 0 &&
+      availableUsers.every((user) => selectedUserIds.includes(user.id))
+    );
+  }, [availableUsers, selectedUserIds]);
+
+  const handleClose = () => {
+    setSearch("");
+    setSelectedUserIds([]);
+    onClose();
+  };
+
+  const handleSubmit = () => {
+    if (selectedUserIds.length === 0) {
+      toast.error("حداقل یک کاربر باید انتخاب شود");
+      return;
+    }
+
+    addUsersToGroup(
+      { groupId, params: { userIds: selectedUserIds } },
+      {
+        onSuccess: () => {
+          toast.success("کاربران با موفقیت به گروه اضافه شدند");
+          handleClose();
+        },
+        onError: (error: ErrorType) => {
+          toast.error(extractErrorMessage(error));
+        },
+      },
+    );
+  };
+
+  const getUserLabel = (user: User) => {
+    const fullName = [user.firstName, user.lastName].filter(Boolean).join(" ").trim();
+    return fullName ? `${fullName} - ${user.phone}` : user.phone;
+  };
+
+  return (
+    <DefaulModal
+      open={open}
+      close={handleClose}
+      isHeader
+      title_header="افزودن کاربر به گروه"
+      width={520}
+    >
+      <div className="mt-4 flex flex-col gap-4">
+        <Input
+          variant="search"
+          className="bg-[#EEF0F7]"
+          placeholder="جستجو با نام یا شماره تماس"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+
+        <div className="border border-border rounded-xl p-4 max-h-72 overflow-y-auto">
+          {isLoading ? (
+            <div className="text-sm text-gray-500 text-center py-4">در حال بارگذاری...</div>
+          ) : availableUsers.length === 0 ? (
+            <div className="text-sm text-gray-500 text-center py-4">کاربری یافت نشد</div>
+          ) : (
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} />
+                <label className="text-sm cursor-pointer">همه</label>
+              </div>
+              {availableUsers.map((user) => (
+                <div key={user.id} className="flex items-center gap-2">
+                  <Checkbox
+                    checked={selectedUserIds.includes(user.id)}
+                    onCheckedChange={(checked) =>
+                      handleToggle(user.id, checked as boolean)
+                    }
+                  />
+                  <label className="text-sm cursor-pointer">{getUserLabel(user)}</label>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end">
+          <Button className="px-6 w-fit" onClick={handleSubmit} isloading={isPending}>
+            افزودن کاربران
+          </Button>
+        </div>
+      </div>
+    </DefaulModal>
+  );
+};
+
+export default AddUsersModal;

src/pages/customers/groups/components/GroupUserTableColumns.tsx

@@ -0,0 +1,40 @@
+import type { ColumnType } from "@/components/types/TableTypes";
+import TrashWithConfrim from "@/components/TrashWithConfrim";
+import type { User } from "@/pages/customers/types/Types";
+
+interface GetGroupUserTableColumnsParams {
+  onDelete?: (userId: string) => void;
+  isDeleting?: boolean;
+}
+
+export const getGroupUserTableColumns = ({
+  onDelete,
+  isDeleting,
+}: GetGroupUserTableColumnsParams = {}): ColumnType<User>[] => {
+  return [
+    {
+      key: "fullName",
+      title: "نام و نام خانوادگی",
+      render: (item: User) => {
+        const fullName = [item.firstName, item.lastName].filter(Boolean).join(" ").trim();
+        return fullName || "بدون نام";
+      },
+    },
+    {
+      key: "phone",
+      title: "شماره تماس",
+      render: (item: User) => item.phone || "-",
+    },
+    {
+      key: "actions",
+      title: "",
+      render: (item: User) =>
+        onDelete ? (
+          <TrashWithConfrim
+            onDelete={() => onDelete(item.id)}
+            isloading={isDeleting}
+          />
+        ) : null,
+    },
+  ];
+};

src/pages/customers/groups/components/GroupUsersSection.tsx

@@ -0,0 +1,72 @@
+import Button from "@/components/Button";
+import Table from "@/components/Table";
+import { extractErrorMessage } from "@/config/func";
+import type { ErrorType } from "@/helpers/types";
+import { Add } from "iconsax-react";
+import { type FC, useMemo, useState } from "react";
+import { toast } from "react-toastify";
+import {
+  useGetGroupUsers,
+  useRemoveUserFromGroup,
+} from "../hooks/useUserGroupData";
+import AddUsersModal from "./AddUsersModal";
+import { getGroupUserTableColumns } from "./GroupUserTableColumns";
+
+type Props = {
+  groupId: string;
+};
+
+const GroupUsersSection: FC<Props> = ({ groupId }) => {
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+
+  const { data: groupUsersData, isLoading } = useGetGroupUsers(groupId);
+  const { mutate: removeUserFromGroup, isPending: isRemoving } =
+    useRemoveUserFromGroup();
+
+  const users = groupUsersData?.data ?? [];
+  const existingUserIds = useMemo(() => users.map((user) => user.id), [users]);
+
+  const columns = getGroupUserTableColumns({
+    onDelete: (userId) => {
+      removeUserFromGroup(
+        { groupId, userId },
+        {
+          onSuccess: () => {
+            toast.success("کاربر از گروه حذف شد");
+          },
+          onError: (error: ErrorType) => {
+            toast.error(extractErrorMessage(error));
+          },
+        },
+      );
+    },
+    isDeleting: isRemoving,
+  });
+
+  return (
+    <div className="mt-6">
+      <div className="bg-white rounded-3xl p-6">
+        <div className="flex justify-between items-center mb-4">
+          <div className="text-sm">کاربران گروه</div>
+          <Button className="w-fit px-5" onClick={() => setIsAddModalOpen(true)}>
+            <div className="flex gap-2 items-center">
+              <Add color="#fff" size={18} />
+              <span>افزودن کاربر</span>
+            </div>
+          </Button>
+        </div>
+
+        <Table columns={columns} data={users} isloading={isLoading} />
+      </div>
+
+      <AddUsersModal
+        open={isAddModalOpen}
+        onClose={() => setIsAddModalOpen(false)}
+        groupId={groupId}
+        existingUserIds={existingUserIds}
+      />
+    </div>
+  );
+};
+
+export default GroupUsersSection;

src/pages/customers/groups/components/UserGroupFiltersFields.tsx

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

src/pages/customers/groups/components/UserGroupTableColumns.tsx

@@ -0,0 +1,47 @@
+import type { ColumnType } from "@/components/types/TableTypes";
+import type { UserGroup } from "../types/Types";
+import TrashWithConfrim from "@/components/TrashWithConfrim";
+import { Eye } from "iconsax-react";
+import { Link } from "react-router-dom";
+import { Pages } from "@/config/Pages";
+import { formatOptionalDate } from "@/helpers/func";
+
+interface GetUserGroupTableColumnsParams {
+  onDelete?: (id: string) => void;
+  isDeleting?: boolean;
+}
+
+export const getUserGroupTableColumns = ({
+  onDelete,
+  isDeleting,
+}: GetUserGroupTableColumnsParams = {}): ColumnType<UserGroup>[] => {
+  return [
+    {
+      key: "name",
+      title: "نام گروه",
+      render: (item: UserGroup) => item.name || "-",
+    },
+    {
+      key: "createdAt",
+      title: "تاریخ ایجاد",
+      render: (item: UserGroup) => formatOptionalDate(item.createdAt),
+    },
+    {
+      key: "actions",
+      title: "",
+      render: (item: UserGroup) => (
+        <div className="flex gap-2 items-center">
+          <Link to={Pages.customers.groupsUpdate + item.id}>
+            <Eye size={20} color="#8C90A3" className="cursor-pointer" />
+          </Link>
+          {onDelete && (
+            <TrashWithConfrim
+              onDelete={() => onDelete(item.id)}
+              isloading={isDeleting}
+            />
+          )}
+        </div>
+      ),
+    },
+  ];
+};

src/pages/customers/groups/hooks/useUserGroupData.ts

@@ -0,0 +1,98 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/UserGroupService";
+import type {
+  AddUsersToGroupType,
+  CreateUserGroupType,
+  GetUserGroupsParams,
+} from "../types/Types";
+
+export const useGetUserGroups = (params?: GetUserGroupsParams) => {
+  return useQuery({
+    queryKey: ["user-groups", params],
+    queryFn: () => api.getUserGroups(params),
+  });
+};
+
+export const useCreateUserGroup = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createUserGroup,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user-groups"] });
+    },
+  });
+};
+
+export const useDeleteUserGroup = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.deleteUserGroup,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user-groups"] });
+    },
+  });
+};
+
+export const useGetUserGroup = (id: string) => {
+  return useQuery({
+    queryKey: ["user-group", id],
+    queryFn: () => api.getUserGroup(id),
+    enabled: !!id,
+  });
+};
+
+export const useUpdateUserGroup = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: CreateUserGroupType }) =>
+      api.updateUserGroup(id, params),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ["user-groups"] });
+      queryClient.invalidateQueries({ queryKey: ["user-group", id] });
+    },
+  });
+};
+
+export const useGetGroupUsers = (groupId: string) => {
+  return useQuery({
+    queryKey: ["user-group-users", groupId],
+    queryFn: () => api.getGroupUsers(groupId),
+    enabled: !!groupId,
+  });
+};
+
+export const useAddUsersToGroup = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      groupId,
+      params,
+    }: {
+      groupId: string;
+      params: AddUsersToGroupType;
+    }) => api.addUsersToGroup(groupId, params),
+    onSuccess: (_, { groupId }) => {
+      queryClient.invalidateQueries({
+        queryKey: ["user-group-users", groupId],
+      });
+    },
+  });
+};
+
+export const useRemoveUserFromGroup = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      groupId,
+      userId,
+    }: {
+      groupId: string;
+      userId: string;
+    }) => api.removeUserFromGroup(groupId, userId),
+    onSuccess: (_, { groupId }) => {
+      queryClient.invalidateQueries({
+        queryKey: ["user-group-users", groupId],
+      });
+    },
+  });
+};

src/pages/customers/groups/hooks/useUserGroupFilters.ts

@@ -0,0 +1,42 @@
+import { useMemo, useState } from "react";
+import type { FilterValues } from "@/components/Filters";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+export const useUserGroupFilters = () => {
+  const [filters, setFilters] = useState<FilterValues>({});
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [limit] = useState(DEFAULT_LIMIT);
+
+  const apiParams = useMemo(() => {
+    const params: Record<string, unknown> = {
+      page: currentPage,
+      limit,
+    };
+
+    if (filters.search) {
+      params.search = filters.search;
+    }
+
+    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/customers/groups/service/UserGroupService.ts

@@ -0,0 +1,70 @@
+import axios from "@/config/axios";
+import type {
+  AddUsersToGroupType,
+  CreateUserGroupType,
+  GetUserGroupsParams,
+  UserGroupResponse,
+  UserGroupsResponse,
+  UsersInGroupResponse,
+} from "../types/Types";
+
+export const getUserGroups = async (
+  params?: GetUserGroupsParams
+): Promise<UserGroupsResponse> => {
+  const { data } = await axios.get<UserGroupsResponse>("/admin/user-groups", {
+    params,
+  });
+  return data;
+};
+
+export const createUserGroup = async (params: CreateUserGroupType) => {
+  const { data } = await axios.post("/admin/user-groups", params);
+  return data;
+};
+
+export const deleteUserGroup = async (id: string) => {
+  const { data } = await axios.delete(`/admin/user-groups/${id}`);
+  return data;
+};
+
+export const getUserGroup = async (id: string): Promise<UserGroupResponse> => {
+  const { data } = await axios.get<UserGroupResponse>(
+    `/admin/user-groups/${id}`
+  );
+  return data;
+};
+
+export const updateUserGroup = async (
+  id: string,
+  params: CreateUserGroupType
+) => {
+  const { data } = await axios.patch(`/admin/user-groups/${id}`, params);
+  return data;
+};
+
+export const getGroupUsers = async (
+  groupId: string
+): Promise<UsersInGroupResponse> => {
+  const { data } = await axios.get<UsersInGroupResponse>(
+    `/admin/user-groups/${groupId}/users`
+  );
+  return data;
+};
+
+export const addUsersToGroup = async (
+  groupId: string,
+  params: AddUsersToGroupType
+) => {
+  const { data } = await axios.post(
+    `/admin/user-groups/${groupId}/users`,
+    params
+  );
+  return data;
+};
+
+export const removeUserFromGroup = async (groupId: string, userId: string) => {
+  const { data } = await axios.delete(
+    `/admin/user-groups/${groupId}/users/${userId}`
+  );
+  return data;
+};

src/pages/customers/groups/types/Types.ts

@@ -0,0 +1,29 @@
+import type { User } from "@/pages/customers/types/Types";
+import type { IResponse } from "@/types/response.types";
+
+export type UserGroup = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+};
+
+export type UserGroupsResponse = IResponse<UserGroup[]>;
+export type UserGroupResponse = IResponse<UserGroup>;
+
+export type CreateUserGroupType = {
+  name: string;
+};
+
+export type GetUserGroupsParams = {
+  page?: number;
+  limit?: number;
+  search?: string;
+};
+
+export type UsersInGroupResponse = IResponse<User[]>;
+
+export type AddUsersToGroupType = {
+  userIds: string[];
+};

src/pages/customers/hooks/useCustomerFilters.ts

@@ -0,0 +1,43 @@
+import { useState, useMemo } from "react";
+import type { FilterValues } from "@/components/Filters";
+import type { GetUsersParams } from "../types/Types";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+export const useCustomerFilters = () => {
+  const [filters, setFilters] = useState<FilterValues>({});
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [limit] = useState(DEFAULT_LIMIT);
+
+  const apiParams = useMemo<GetUsersParams>(() => {
+    const params: GetUsersParams = {
+      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/customers/hooks/useUsersData.ts

@@ -1,9 +1,73 @@
 import * as api from "../service/UsersService";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  CreateUserAddressType,
+  GetUsersParams,
+  UpdateUserType,
+} from "../types/Types";
 
-export const useGetUsers = () => {
+export const useGetUsers = (params?: GetUsersParams) => {
   return useQuery({
-    queryKey: ["users"],
-    queryFn: api.getUsers,
+    queryKey: ["users", params],
+    queryFn: () => api.getUsers(params),
+  });
+};
+
+export const useGetUserGroupsForUser = (userId: string) => {
+  return useQuery({
+    queryKey: ["user-groups-for-user", userId],
+    queryFn: () => api.getUserGroups(userId),
+    enabled: !!userId,
+  });
+};
+
+export const useSearchUserByPhone = () => {
+  return useMutation({
+    mutationFn: api.searchUserByPhone,
+  });
+};
+
+export const useCreateUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: api.createUser,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+    },
+  });
+};
+
+export const useUpdateUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ userId, params }: { userId: string; params: UpdateUserType }) =>
+      api.updateUser(userId, params),
+    onSuccess: (_, { userId }) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["user-groups-for-user", userId] });
+    },
+  });
+};
+
+export const useCreateUserAddress = () => {
+  return useMutation({
+    mutationFn: ({
+      userId,
+      ...params
+    }: CreateUserAddressType & { userId: string }) =>
+      api.createUserAddress(userId, params),
+  });
+};
+
+export const useImportUsersFromExcel = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: api.importUsersFromExcel,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+    },
   });
 };

src/pages/customers/service/UsersService.ts

@@ -1,7 +1,77 @@
 import axios from "@/config/axios";
-import type { GetCustomersResponse } from "@/pages/customers/types/Types";
+import type {
+  CreateUserAddressResponse,
+  CreateUserAddressType,
+  CreateUserResponse,
+  CreateUserType,
+  GetCustomersResponse,
+  GetUserGroupsForUserResponse,
+  GetUsersParams,
+  ImportUsersResponse,
+  SearchUserByPhoneResponse,
+  UpdateUserResponse,
+  UpdateUserType,
+} from "@/pages/customers/types/Types";
 
-export const getUsers = async () => {
-  const { data } = await axios.get<GetCustomersResponse>(`/admin/users`);
+export const getUsers = async (params?: GetUsersParams) => {
+  const { data } = await axios.get<GetCustomersResponse>(`/admin/users`, {
+    params,
+  });
   return data;
 };
+
+export const searchUserByPhone = async (phone: string) => {
+  const { data } = await axios.get<SearchUserByPhoneResponse>(
+    "/admin/users/search-by-phone",
+    { params: { phone } },
+  );
+  return data;
+};
+
+export const createUser = async (params: CreateUserType) => {
+  const { data } = await axios.post<CreateUserResponse>("/admin/users", params);
+  return data;
+};
+
+export const updateUser = async (userId: string, params: UpdateUserType) => {
+  const { data } = await axios.patch<UpdateUserResponse>(
+    `/admin/users/${userId}`,
+    params,
+  );
+  return data;
+};
+
+export const getUserGroups = async (userId: string) => {
+  const { data } = await axios.get<GetUserGroupsForUserResponse>(
+    `/admin/users/${userId}/groups`,
+  );
+  return data;
+};
+
+export const createUserAddress = async (
+  userId: string,
+  params: CreateUserAddressType,
+) => {
+  const { data } = await axios.post<CreateUserAddressResponse>(
+    `/admin/users/${userId}/addresses`,
+    params,
+  );
+  return data;
+};
+
+export const importUsersFromExcel = async (file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const { data } = await axios.post<ImportUsersResponse>(
+    `/admin/users/import`,
+    formData,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    },
+  );
+
+  return data.data;
+};

src/pages/customers/types/Types.ts

@@ -1,32 +1,153 @@
 import type { IResponse } from "@/types/response.types";
 import type { RowDataType } from "@/components/types/TableTypes";
+import type { UserGroup } from "@/pages/customers/groups/types/Types";
 
-export interface Customer {
+export type User = {
   id: string;
   createdAt: string;
   updatedAt: string;
   deletedAt: string | null;
-  restaurant: string;
   firstName: string;
-  lastName: string;
+  lastName?: string;
   phone: string;
-  birthDate: string;
-  marriageDate: string;
-  referrer: string | null;
-  isActive: boolean;
-  gender: boolean;
-  wallet: number;
-  points: number;
-}
+  birthDate?: string;
+  marriageDate?: string;
+  referrer?: string | null;
+  isActive?: boolean;
+  gender?: boolean;
+  avatarUrl?: string | null;
+};
 
-export type GetCustomersResponse = IResponse<Customer[]>;
+export type UserSavedAddress = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  user: string;
+  title: string;
+  address: string;
+  city: string;
+  province: string;
+  postalCode: string;
+  latitude: number;
+  longitude: number;
+  phone: string;
+  isDefault: boolean;
+};
+
+export type UserWithAddresses = User & {
+  addresses?: UserSavedAddress[];
+};
+
+export type UserRestaurant = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  user: User;
+  restaurant: string;
+  orderCount: number;
+  totalOrderAmount: number;
+};
+
+export type PaginationMeta = {
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+};
+
+export type GetUsersParams = {
+  page?: number;
+  limit?: number;
+  search?: string;
+  orderBy?: string;
+  order?: "asc" | "desc";
+};
+
+export type GetCustomersResponse = IResponse<UserRestaurant[]> & {
+  meta: PaginationMeta;
+};
 
 export type CustomerListRow = RowDataType & {
   fullName: string;
   phone: string;
   birthDate: string;
   marriageDate: string;
-  wallet: string;
-  points: string;
+  orderCount: string;
+  totalOrderAmount: string;
   status: string;
+  firstName?: string;
+  lastName?: string;
+  birthDateRaw?: string;
+  marriageDateRaw?: string;
+  gender?: boolean;
+  avatarUrl?: string | null;
 };
+
+export type ImportUserRowError = {
+  row: number;
+  phone?: string;
+  message: string;
+};
+
+export type ImportUsersResult = {
+  message?: string;
+  total: number;
+  usersCreated: number;
+  usersLinked: number;
+  usersAlreadyLinked: number;
+  errors: ImportUserRowError[];
+};
+
+export type ImportUsersResponse = IResponse<ImportUsersResult>;
+
+export type SearchUserByPhoneResponse = IResponse<UserWithAddresses>;
+
+export type CreateUserType = {
+  phone: string;
+  firstName: string;
+  lastName: string;
+  birthDate?: string;
+  marriageDate?: string;
+  gender?: boolean;
+  avatarUrl?: string;
+  groupIds?: string[];
+};
+
+export type CreateUserResult = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  user: User;
+  orderCount: number;
+  totalOrderAmount: number;
+};
+
+export type CreateUserResponse = IResponse<CreateUserResult>;
+
+export type CreateUserAddressType = {
+  title: string;
+  address: string;
+  postalCode?: string;
+  latitude: number;
+  longitude: number;
+  phone: string;
+  isDefault: boolean;
+};
+
+export type CreateUserAddressResponse = IResponse<UserSavedAddress>;
+
+export type UpdateUserType = {
+  firstName?: string;
+  lastName?: string;
+  birthDate?: string;
+  marriageDate?: string;
+  gender?: boolean;
+  avatarUrl?: string;
+  groupIds?: string[];
+};
+
+export type UpdateUserResponse = IResponse<User>;
+
+export type GetUserGroupsForUserResponse = IResponse<UserGroup[]>;

src/pages/customers/utils/downloadCustomerImportSampleExcel.ts

@@ -0,0 +1,24 @@
+import * as XLSX from 'xlsx';
+
+const SAMPLE_ROWS = [
+  {
+    phone: '9123456789',
+    firstName: 'علی',
+    lastName: 'محمدی',
+    gender: 'مرد',
+  },
+  {
+    phone: '9129876543',
+    firstName: 'سارا',
+    lastName: 'احمدی',
+    gender: 'زن',
+  },
+];
+
+export const downloadCustomerImportSampleExcel = () => {
+  const worksheet = XLSX.utils.json_to_sheet(SAMPLE_ROWS);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'customers');
+
+  XLSX.writeFile(workbook, 'customer-import-sample.xlsx');
+};

src/pages/food/Create.tsx

@@ -1,295 +1,135 @@
-import { type FC, useState } from 'react'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { TickCircle } from 'iconsax-react'
-import { toast } from 'react-toastify'
-import Input from '@/components/Input'
-import Select from '@/components/Select'
-import Textarea from '@/components/Textarea'
-import Button from '@/components/Button'
-import { Checkbox } from '@/components/ui/checkbox'
-import CreateFoodSidebar from './components/CreateFoodSidebar'
-import WeekDaysSection from './components/WeekDaysSection'
-import MealTimesSection from './components/MealTimesSection'
-import type { CreateFoodType } from './types/Types'
-import { useCreateFood, useGetCategories } from './hooks/useFoodData'
-import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
-import { Pages } from '@/config/Pages'
-import type { ErrorType } from '@/helpers/types'
-
-
+import Button from "@/components/Button";
+import type { ErrorType } from "@/helpers/types";
+import { useFormik } from "formik";
+import { TickCircle } from "iconsax-react";
+import { type FC, useState } from "react";
+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";
 
 const CreateFood: FC = () => {
+  const { data } = useGetCategories();
+  const [isActive, setIsActive] = useState<boolean>(true);
+  const [isSpecial, setIsSpecial] = useState<boolean>(false);
+  const [imageFiles, setImageFiles] = useState<File[]>([]);
+  const { mutate: createFood, isPending } = useCreateFood();
+  const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload();
+  const navigate = useNavigate();
+  const categories =
+    data?.data?.map((category) => ({
+      label: category.title,
+      value: category.id,
+    })) || [];
 
-    const { data } = useGetCategories();
-    const [isActive, setIsActive] = useState<boolean>(true)
-    const [isSpecial, setIsSpecial] = useState<boolean>(false)
-    const [imageFiles, setImageFiles] = useState<File[]>([])
-    const { mutate: createFood, isPending } = useCreateFood()
-    const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload()
+  const formik = useFormik<CreateFoodType>({
+    initialValues: {
+      title: "",
+      desc: "",
+      content: [],
+      categoryId: "",
+      price: 0,
+      discount: 0,
+      prepareTime: 0,
+      weekDays: [0, 1, 2, 3, 4, 5, 6],
+      mealTypes: ["breakfast", "lunch", "dinner"],
+      pickupServe: true,
+      inPlaceServe: true,
+      isActive: true,
+      images: [],
+      isSpecialOffer: false,
+      dailyStock: 0,
+      availableStock: 0,
+      order: 0,
+    },
+    validationSchema: Yup.object().shape({
+      title: Yup.string().required("نام غذا الزامی است"),
+      categoryId: Yup.string().required("دسته‌بندی الزامی است"),
+      price: Yup.number().required("قیمت الزامی است").min(0, "قیمت باید مثبت باشد"),
+      prepareTime: Yup.number().required("زمان آماده‌سازی الزامی است").min(0, "زمان آماده‌سازی باید مثبت باشد"),
+      discount: Yup.number().min(0, "تخفیف باید مثبت باشد"),
+      dailyStock: Yup.number().required("موجودی روزانه الزامی است").min(0, "موجودی روزانه باید مثبت باشد"),
+      availableStock: Yup.number().required("موجودی فعلی الزامی است").min(0, "موجودی فعلی باید مثبت باشد"),
+      content: Yup.array().of(Yup.string()),
+      weekDays: Yup.array().of(Yup.number()),
+      mealTypes: Yup.array().of(Yup.string()),
+    }),
+    onSubmit: (values) => {
+      const submitFood = (imageUrls: string[] = []) => {
+        const foodData: CreateFoodType = {
+          ...values,
+          isActive,
+          isSpecialOffer: isSpecial,
+          images: imageUrls,
+          content: values.content.filter((item) => item && item.trim().length > 0),
+        };
 
-    const categories = data?.data?.map(category => ({
-        label: category.title,
-        value: category.id
-    })) || []
+        createFood(foodData, {
+          onSuccess: () => {
+            toast.success("غذا با موفقیت ایجاد شد");
+            navigate(-1);
+          },
+          onError: (error: ErrorType) => {
+            toast.error(error?.response?.data?.error?.message[0] || "خطا در ایجاد غذا");
+          },
+        });
+      };
 
-    const formik = useFormik<CreateFoodType>({
-        initialValues: {
-            title: '',
-            desc: '',
-            content: [],
-            categoryId: '',
-            price: 0,
-            discount: 0,
-            prepareTime: 0,
-            weekDays: [0, 1, 2, 3, 4, 5, 6],
-            mealTypes: ['breakfast', 'lunch', 'dinner'],
-            pickupServe: true,
-            inPlaceServe: true,
-            isActive: true,
-            images: [],
-            isSpecialOffer: false,
-            dailyStock: 0,
-            order: 0
-        },
-        validationSchema: Yup.object().shape({
-            title: Yup.string().required('نام غذا الزامی است'),
-            categoryId: Yup.string().required('دسته‌بندی الزامی است'),
-            price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
-            prepareTime: Yup.number().required('زمان آماده‌سازی الزامی است').min(0, 'زمان آماده‌سازی باید مثبت باشد'),
-            discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
-            dailyStock: Yup.number().required('موجودی روزانه الزامی است').min(0, 'موجودی روزانه باید مثبت باشد'),
-            content: Yup.array().of(Yup.string()),
-            weekDays: Yup.array().of(Yup.number()),
-            mealTypes: Yup.array().of(Yup.string())
-        }),
-        onSubmit: (values) => {
-            const submitFood = (imageUrls: string[] = []) => {
-                const foodData: CreateFoodType = {
-                    ...values,
-                    isActive,
-                    isSpecialOffer: isSpecial,
-                    images: imageUrls,
-                    content: values.content.filter(item => item && item.trim().length > 0)
-                }
+      if (imageFiles.length > 0) {
+        multipleUpload(imageFiles, {
+          onSuccess: (response) => {
+            const imageUrls = response?.data?.map((item) => item.url) || [];
+            submitFood(imageUrls);
+          },
+          onError: (error: ErrorType) => {
+            toast.error(error?.response?.data?.error?.message[0] || "خطا در آپلود تصاویر");
+          },
+        });
+      } else {
+        submitFood();
+      }
+    },
+  });
 
-                createFood(foodData, {
-                    onSuccess: () => {
-                        toast.success('غذا با موفقیت ایجاد شد')
-                        window.location.href = Pages.foods.list
-                    },
-                    onError: (error: ErrorType) => {
-                        toast.error(error?.response?.data?.error?.message[0] || 'خطا در ایجاد غذا')
-                    }
-                })
-            }
-
-            if (imageFiles.length > 0) {
-                multipleUpload(imageFiles, {
-                    onSuccess: (response) => {
-                        const imageUrls = response?.data?.map(item => item.url) || []
-                        submitFood(imageUrls)
-                    },
-                    onError: (error: ErrorType) => {
-                        toast.error(error?.response?.data?.error?.message[0] || 'خطا در آپلود تصاویر')
-                    }
-                })
-            } else {
-                submitFood()
-            }
-        }
-    })
-
-    return (
-        <div className='w-full mt-4'>
-            <div className='flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4'>
-                <div className='text-lg font-light'>
-                    غذای جدید
-                </div>
-                <div>
-                    <Button
-                        className='px-5 w-full sm:w-auto'
-                        onClick={() => formik.handleSubmit()}
-                        isloading={isPending || isUploading}
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <TickCircle className='size-5' color='white' />
-                            <div>ثبت غذا</div>
-                        </div>
-                    </Button>
-                </div>
-            </div>
-
-            <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
-                            label='نام غذا'
-                            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-4 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 : ''}
-                            />
-                        </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} />
-
-                        <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>
-
-                <div className='w-full lg:w-auto'>
-                    <CreateFoodSidebar
-                        isActive={isActive}
-                        isSpecial={isSpecial}
-                        onChangeActive={setIsActive}
-                        onChangeSpecial={setIsSpecial}
-                        onChangeImages={setImageFiles}
-                    />
-                </div>
+  return (
+    <div className="w-full mt-4">
+      <div className="flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4">
+        <div className="text-lg font-light">غذای جدید</div>
+        <div>
+          <Button className="px-5 w-full sm:w-auto" onClick={() => formik.handleSubmit()} isloading={isPending || isUploading}>
+            <div className="flex gap-2 items-center">
+              <TickCircle className="size-5" color="white" />
+              <div>ثبت غذا</div>
             </div>
+          </Button>
         </div>
-    )
-}
+      </div>
 
-export default CreateFood
+      <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">
+            <BasicInfoSection formik={formik} categories={categories} />
+            <FoodContentSection formik={formik} />
+            <MealTimesSection formik={formik} />
+            <WeekDaysSection formik={formik} />
+            <ServiceOptionsSection formik={formik} />
+          </div>
+        </div>
+
+        <div className="w-full lg:w-auto">
+          <CreateFoodSidebar isActive={isActive} isSpecial={isSpecial} onChangeActive={setIsActive} onChangeSpecial={setIsSpecial} onChangeImages={setImageFiles} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateFood;

src/pages/food/List.tsx

@@ -1,16 +1,27 @@
-import { type FC } from 'react'
+import { type FC, useCallback, useState } from 'react'
 import Table from '@/components/Table'
 import Filters from '@/components/Filters'
 import { Add } from 'iconsax-react'
 import Button from '@/components/Button'
-import { useGetFoods, useDeleteFood } from './hooks/useFoodData'
+import { useGetFoods, useDeleteFood, useCloneFood, useSetStockForFood } from './hooks/useFoodData'
 import { useFoodFilters } from './hooks/useFoodFilters'
 import { getFoodTableColumns } from './components/FoodTableColumns'
 import { useFoodFiltersFields } from './components/FoodFiltersFields'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { Pages } from '@/config/Pages'
+import type { ActionType } from '@/components/types/TableTypes'
+import type { Food } from './types/Types'
+import StockUpdateModal from './components/StockUpdateModal'
+import ModalConfrim from '@/components/ModalConfrim'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
 
 const FoodsList: FC = () => {
+    const navigate = useNavigate()
+    const [stockModalFood, setStockModalFood] = useState<Food | null>(null)
+    const [deleteConfirmFood, setDeleteConfirmFood] = useState<Food | null>(null)
+    const [cloneConfirmFood, setCloneConfirmFood] = useState<Food | null>(null)
+
     const {
         filters,
         currentPage,
@@ -21,18 +32,79 @@ const FoodsList: FC = () => {
 
     const { data: foodsData, isLoading } = useGetFoods(apiParams, filters)
     const { mutate: deleteFood, isPending: isDeleting } = useDeleteFood()
-
-
+    const { mutate: cloneFood, isPending: isCloning } = useCloneFood()
+    const { mutate: setStock, isPending: isUpdatingStock } = useSetStockForFood()
 
     const foods = foodsData?.data || []
-    const columns = getFoodTableColumns({
-        onDelete: (id: string) => deleteFood(id),
-        isDeleting
-    })
+    const columns = getFoodTableColumns()
     const filterFields = useFoodFiltersFields()
 
     const totalPages = foodsData?.meta?.totalPages || 1
 
+    const handleRowActions = useCallback((item: Food): ActionType[] => {
+        return [
+            {
+                label: 'ویرایش',
+                onClick: () => navigate(Pages.foods.update + item.id),
+            },
+            {
+                label: 'بروزرسانی موجودی',
+                onClick: () => setStockModalFood(item),
+            },
+            {
+                label: 'دابلیکیت کردن',
+                onClick: () => setCloneConfirmFood(item),
+            },
+            {
+                label: 'حذف',
+                onClick: () => setDeleteConfirmFood(item),
+            },
+        ]
+    }, [navigate])
+
+    const handleStockSubmit = (foodId: string, totalStock: number, availableStock: number) => {
+        setStock(
+            { foodId, params: { totalStock, availableStock } },
+            {
+                onSuccess: () => {
+                    toast.success('موجودی با موفقیت بروزرسانی شد')
+                    setStockModalFood(null)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            },
+        )
+    }
+
+    const handleDeleteConfirm = () => {
+        if (!deleteConfirmFood) return
+
+        deleteFood(deleteConfirmFood.id, {
+            onSuccess: () => {
+                toast.success('غذا با موفقیت حذف شد')
+                setDeleteConfirmFood(null)
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            },
+        })
+    }
+
+    const handleCloneConfirm = () => {
+        if (!cloneConfirmFood) return
+
+        cloneFood(cloneConfirmFood.id, {
+            onSuccess: () => {
+                toast.success('غذا با موفقیت دابلیکیت شد')
+                setCloneConfirmFood(null)
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            },
+        })
+    }
+
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
@@ -55,6 +127,7 @@ const FoodsList: FC = () => {
                     onChange={handleFiltersChange}
                     initialValues={filters}
                     searchField="search"
+                    showClearButton
                 />
             </div>
 
@@ -62,12 +135,37 @@ const FoodsList: FC = () => {
                 columns={columns}
                 data={foods}
                 isloading={isLoading}
+                rowActions={handleRowActions}
                 pagination={{
                     currentPage,
                     totalPages,
                     onPageChange: handlePageChange,
                 }}
             />
+
+            <StockUpdateModal
+                food={stockModalFood}
+                open={!!stockModalFood}
+                onClose={() => setStockModalFood(null)}
+                onSubmit={handleStockSubmit}
+                isLoading={isUpdatingStock}
+            />
+
+            <ModalConfrim
+                isOpen={!!deleteConfirmFood}
+                close={() => setDeleteConfirmFood(null)}
+                onConfrim={handleDeleteConfirm}
+                isloading={isDeleting}
+                label={deleteConfirmFood ? `آیا از حذف «${deleteConfirmFood.title}» اطمینان دارید؟` : undefined}
+            />
+
+            <ModalConfrim
+                isOpen={!!cloneConfirmFood}
+                close={() => setCloneConfirmFood(null)}
+                onConfrim={handleCloneConfirm}
+                isloading={isCloning}
+                label={cloneConfirmFood ? `آیا از دابلیکیت کردن «${cloneConfirmFood.title}» اطمینان دارید؟` : undefined}
+            />
         </div>
     )
 }

src/pages/food/Update.tsx

@@ -1,47 +1,47 @@
-import { type FC, useState, useEffect } from 'react'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { TickCircle } from 'iconsax-react'
-import { toast } from 'react-toastify'
-import { useNavigate, useParams } from 'react-router-dom'
-import Button from '@/components/Button'
-import CreateFoodSidebar from './components/CreateFoodSidebar'
-import BasicInfoSection from './components/BasicInfoSection'
-import FoodContentSection from './components/FoodContentSection'
-import MealTimesSection from './components/MealTimesSection'
-import WeekDaysSection from './components/WeekDaysSection'
-import ServiceOptionsSection from './components/ServiceOptionsSection'
-import type { CreateFoodType } from './types/Types'
-import { useUpdateFood, useGetFoodDetails, useGetCategories } from './hooks/useFoodData'
-import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
-import { Pages } from '@/config/Pages'
-import type { ErrorType } from '@/helpers/types'
-import { extractErrorMessage } from '@/config/func'
+import Button from "@/components/Button";
+import { extractErrorMessage } from "@/config/func";
+import type { ErrorType } from "@/helpers/types";
+import { useFormik } from "formik";
+import { TickCircle } from "iconsax-react";
+import { type FC, useEffect, useState } from "react";
+import { useNavigate, useParams } 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 { useGetCategories, useGetFoodDetails, useUpdateFood } from "./hooks/useFoodData";
+import type { CreateFoodType } from "./types/Types";
 
 const UpdateFood: FC = () => {
-  const { id } = useParams<{ id: string }>()
-  const { data: foodData, isLoading } = useGetFoodDetails(id || '')
-  const { data: categoriesData } = useGetCategories()
-  const [isActive, setIsActive] = useState<boolean>(true)
-  const [isSpecial, setIsSpecial] = useState<boolean>(false)
-  const [imageFiles, setImageFiles] = useState<File[]>([])
-  const [existingImages, setExistingImages] = useState<string[]>([])
-  const { mutate: updateFood, isPending } = useUpdateFood()
-  const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload()
-  const navigate = useNavigate()
-  const categories = categoriesData?.data?.map(category => ({
-    label: category.title,
-    value: category.id
-  })) || []
+  const { id } = useParams<{ id: string }>();
+  const { data: foodData, isLoading } = useGetFoodDetails(id || "");
+  const { data: categoriesData } = useGetCategories();
+  const [isActive, setIsActive] = useState<boolean>(true);
+  const [isSpecial, setIsSpecial] = useState<boolean>(false);
+  const [imageFiles, setImageFiles] = useState<File[]>([]);
+  const [existingImages, setExistingImages] = useState<string[]>([]);
+  const { mutate: updateFood, isPending } = useUpdateFood();
+  const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload();
+  const navigate = useNavigate();
+  const categories =
+    categoriesData?.data?.map((category) => ({
+      label: category.title,
+      value: category.id,
+    })) || [];
 
-  const food = foodData?.data
+  const food = foodData?.data;
 
   const formik = useFormik<CreateFoodType>({
     initialValues: {
-      title: '',
-      desc: '',
+      title: "",
+      desc: "",
       content: [],
-      categoryId: '',
+      categoryId: "",
       price: 0,
       discount: 0,
       prepareTime: 0,
@@ -53,69 +53,74 @@ const UpdateFood: FC = () => {
       images: [],
       isSpecialOffer: false,
       dailyStock: 0,
-      order: 0
+      availableStock: 0,
+      order: 0,
     },
     validationSchema: Yup.object().shape({
-      title: Yup.string().required('نام غذا الزامی است'),
-      categoryId: Yup.string().required('دسته‌بندی الزامی است'),
-      price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
-      prepareTime: Yup.number().required('زمان آماده‌سازی الزامی است').min(0, 'زمان آماده‌سازی باید مثبت باشد'),
-      discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
-      dailyStock: Yup.number().required('موجودی روزانه الزامی است').min(0, 'موجودی روزانه باید مثبت باشد'),
+      title: Yup.string().required("نام غذا الزامی است"),
+      categoryId: Yup.string().required("دسته‌بندی الزامی است"),
+      price: Yup.number().required("قیمت الزامی است").min(0, "قیمت باید مثبت باشد"),
+      prepareTime: Yup.number().required("زمان آماده‌سازی الزامی است").min(0, "زمان آماده‌سازی باید مثبت باشد"),
+      discount: Yup.number().min(0, "تخفیف باید مثبت باشد"),
+      dailyStock: Yup.number().required("موجودی روزانه الزامی است").min(0, "موجودی روزانه باید مثبت باشد"),
+      availableStock: Yup.number().required("موجودی فعلی الزامی است").min(0, "موجودی فعلی باید مثبت باشد"),
       content: Yup.array().of(Yup.string()),
       weekDays: Yup.array().of(Yup.number()),
-      mealTypes: Yup.array().of(Yup.string())
+      mealTypes: Yup.array().of(Yup.string()),
     }),
     onSubmit: (values) => {
       if (!id) {
-        toast.error('شناسه غذا یافت نشد')
-        return
+        toast.error("شناسه غذا یافت نشد");
+        return;
       }
 
       const submitFood = (newImageUrls: string[] = []) => {
-        const allImages = [...values.images, ...newImageUrls]
+        const allImages = [...values.images, ...newImageUrls];
         const foodData: CreateFoodType = {
           ...values,
           isActive,
           isSpecialOffer: isSpecial,
           images: allImages,
-          content: values.content.filter(item => item && item.trim().length > 0)
-        }
+          content: values.content.filter((item) => item && item.trim().length > 0),
+        };
 
-        updateFood({ id, params: foodData }, {
-          onSuccess: () => {
-            toast.success('غذا با موفقیت به‌روزرسانی شد')
-            navigate(Pages.foods.list)
+        updateFood(
+          { id, params: foodData },
+          {
+            onSuccess: () => {
+              toast.success("غذا با موفقیت به‌روزرسانی شد");
+              navigate(-1);
+            },
+            onError: (error: ErrorType) => {
+              toast.error(extractErrorMessage(error));
+            },
           },
-          onError: (error: ErrorType) => {
-            toast.error(extractErrorMessage(error))
-          }
-        })
-      }
+        );
+      };
 
       if (imageFiles.length > 0) {
         multipleUpload(imageFiles, {
           onSuccess: (response) => {
-            const imageUrls = response?.data?.map(item => item.url) || []
-            submitFood(imageUrls)
+            const imageUrls = response?.data?.map((item) => item.url) || [];
+            submitFood(imageUrls);
           },
           onError: (error: ErrorType) => {
-            toast.error(error?.response?.data?.error?.message[0] || 'خطا در آپلود تصاویر')
-          }
-        })
+            toast.error(error?.response?.data?.error?.message[0] || "خطا در آپلود تصاویر");
+          },
+        });
       } else {
-        submitFood()
+        submitFood();
       }
-    }
-  })
+    },
+  });
 
   useEffect(() => {
     if (food) {
       formik.setValues({
-        title: food.title || '',
-        desc: food.desc || '',
+        title: food.title || "",
+        desc: food.desc || "",
         content: food.content || [],
-        categoryId: food.category?.id || '',
+        categoryId: food.category?.id || "",
         price: food.price || 0,
         discount: food.discount || 0,
         prepareTime: food.prepareTime || 0,
@@ -127,59 +132,54 @@ const UpdateFood: FC = () => {
         images: food.images || [],
         isSpecialOffer: food.isSpecialOffer || false,
         dailyStock: food.inventory?.totalStock || 0,
-        order: food.order || 0
-      })
-      setIsActive(food.isActive || false)
-      setIsSpecial(food.isSpecialOffer || false)
-      setExistingImages(food.images || [])
+        availableStock: food.inventory?.availableStock || 0,
+        order: food.order || 0,
+      });
+      setIsActive(food.isActive || false);
+      setIsSpecial(food.isSpecialOffer || false);
+      setExistingImages(food.images || []);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [food])
+  }, [food]);
 
   useEffect(() => {
-    formik.setFieldValue('images', existingImages)
+    formik.setFieldValue("images", existingImages);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [existingImages])
+  }, [existingImages]);
 
   if (isLoading) {
     return (
-      <div className='w-full mt-4 flex justify-center items-center'>
+      <div className="w-full mt-4 flex justify-center items-center">
         <div>در حال بارگذاری...</div>
       </div>
-    )
+    );
   }
 
   if (!food) {
     return (
-      <div className='w-full mt-4 flex justify-center items-center'>
+      <div className="w-full mt-4 flex justify-center items-center">
         <div>غذا یافت نشد</div>
       </div>
-    )
+    );
   }
 
   return (
-    <div className='w-full mt-4'>
-      <div className='flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4'>
-        <div className='text-lg font-light'>
-          ویرایش غذا
-        </div>
+    <div className="w-full mt-4">
+      <div className="flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4">
+        <div className="text-lg font-light">ویرایش غذا</div>
         <div>
-          <Button
-            className='px-5 w-full sm:w-auto'
-            onClick={() => formik.handleSubmit()}
-            isloading={isPending || isUploading}
-          >
-            <div className='flex gap-2 items-center'>
-              <TickCircle className='size-5' color='white' />
+          <Button className="px-5 w-full sm:w-auto" onClick={() => formik.handleSubmit()} isloading={isPending || isUploading}>
+            <div className="flex gap-2 items-center">
+              <TickCircle className="size-5" color="white" />
               <div>ذخیره تغییرات</div>
             </div>
           </Button>
         </div>
       </div>
 
-      <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'>
+      <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">
             <BasicInfoSection formik={formik} categories={categories} />
             <FoodContentSection formik={formik} />
             <MealTimesSection formik={formik} />
@@ -188,7 +188,7 @@ const UpdateFood: FC = () => {
           </div>
         </div>
 
-        <div className='w-full lg:w-auto'>
+        <div className="w-full lg:w-auto">
           <CreateFoodSidebar
             isActive={isActive}
             isSpecial={isSpecial}
@@ -201,7 +201,7 @@ const UpdateFood: FC = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default UpdateFood
+export default UpdateFood;

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
@@ -37,7 +74,7 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
         />
       </div>
 
-      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
+      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mt-5'>
         <Input
           name='price'
           label='قیمت'
@@ -80,12 +117,36 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
           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'>
+        <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}
@@ -109,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'>

src/pages/food/components/FoodTableColumns.tsx

@@ -1,18 +1,9 @@
-import { Eye } from 'iconsax-react'
 import type { ColumnType } from '@/components/types/TableTypes'
 import type { Food } from '../types/Types'
 import { formatPrice, formatTime } from '../utils/formatters'
 import Status from '@/components/Status'
-import { Link } from 'react-router-dom'
-import { Pages } from '@/config/Pages'
-import TrashWithConfrim from '@/components/TrashWithConfrim'
 
-interface GetFoodTableColumnsParams {
-    onDelete: (id: string) => void
-    isDeleting: boolean
-}
-
-export const getFoodTableColumns = ({ onDelete, isDeleting }: GetFoodTableColumnsParams): ColumnType<Food>[] => {
+export const getFoodTableColumns = (): ColumnType<Food>[] => {
 
     return [
         {
@@ -87,23 +78,6 @@ export const getFoodTableColumns = ({ onDelete, isDeleting }: GetFoodTableColumn
                 )
             }
         },
-        {
-            key: 'view',
-            title: '',
-            render: (item: Food) => {
-                return (
-                    <div className='flex gap-2 items-center'>
-                        <Link to={Pages.foods.update + item.id} className='flex gap-2 items-center'>
-                            <Eye size={20} color='#8C90A3' />
-                        </Link>
-                        <TrashWithConfrim
-                            onDelete={() => onDelete(item.id)}
-                            isloading={isDeleting}
-                        />
-                    </div>
-                )
-            }
-        },
     ]
 }
 

src/pages/food/components/StockUpdateModal.tsx

@@ -0,0 +1,108 @@
+import { type FC, useEffect, useState } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import Input from '@/components/Input'
+import Button from '@/components/Button'
+import type { Food } from '../types/Types'
+
+type Props = {
+  food: Food | null
+  open: boolean
+  onClose: () => void
+  onSubmit: (foodId: string, totalStock: number, availableStock: number) => void
+  isLoading?: boolean
+}
+
+const StockUpdateModal: FC<Props> = ({
+  food,
+  open,
+  onClose,
+  onSubmit,
+  isLoading = false,
+}) => {
+  const [totalStock, setTotalStock] = useState(0)
+  const [availableStock, setAvailableStock] = useState(0)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (food) {
+      setTotalStock(food.inventory?.totalStock ?? 0)
+      setAvailableStock(food.inventory?.availableStock ?? 0)
+      setError('')
+    }
+  }, [food])
+
+  const handleSubmit = () => {
+    if (availableStock > totalStock) {
+      setError('موجودی فعلی نمی‌تواند بیشتر از موجودی روزانه باشد')
+      return
+    }
+
+    if (!food) return
+
+    onSubmit(food.id, totalStock, availableStock)
+  }
+
+  return (
+    <DefaulModal
+      open={open}
+      close={onClose}
+      isHeader
+      title_header='بروزرسانی موجودی'
+      width={480}
+    >
+      {food && (
+        <div className='mt-6'>
+          <p className='text-sm text-gray-600 mb-5'>
+            غذا: <span className='font-medium text-gray-800'>{food.title}</span>
+          </p>
+
+          <div className='flex flex-col gap-4'>
+            <Input
+              name='totalStock'
+              label='موجودی روزانه'
+              placeholder='عدد'
+              type='number'
+              seprator
+              value={totalStock}
+              onChange={(e) => {
+                setTotalStock(Number(e.target.value))
+                setError('')
+              }}
+            />
+
+            <Input
+              name='availableStock'
+              label='موجودی فعلی'
+              placeholder='عدد'
+              type='number'
+              seprator
+              value={availableStock}
+              onChange={(e) => {
+                setAvailableStock(Number(e.target.value))
+                setError('')
+              }}
+              error_text={error}
+            />
+          </div>
+
+          <div className='flex gap-3 mt-6'>
+            <Button
+              label='انصراف'
+              type='button'
+              onClick={onClose}
+              className='bg-gray-100 text-gray-700'
+            />
+            <Button
+              label='ذخیره'
+              type='button'
+              onClick={handleSubmit}
+              isloading={isLoading}
+            />
+          </div>
+        </div>
+      )}
+    </DefaulModal>
+  )
+}
+
+export default StockUpdateModal

src/pages/food/hooks/useFoodData.ts

@@ -4,6 +4,7 @@ import type {
   CreateCategoryType,
   CreateFoodType,
   GetFoodsParams,
+  SetStockType,
 } from "../types/Types";
 import type { FilterValues } from "@/components/Filters";
 
@@ -54,6 +55,16 @@ export const useDeleteFood = () => {
   });
 };
 
+export const useCloneFood = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.cloneFood,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["foods"] });
+    },
+  });
+};
+
 export const useCreateCategory = () => {
   const queryClient = useQueryClient();
   return useMutation({
@@ -91,3 +102,26 @@ export const useGetIcons = () => {
     queryFn: api.getIcons,
   });
 };
+
+export const useSetStockForFood = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ foodId, params }: { foodId: string; params: SetStockType }) =>
+      api.setStockForFood(foodId, params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["foods"] });
+    },
+  });
+};
+
+export const useGenerateFoodDescription = () => {
+  return useMutation({
+    mutationFn: api.generateFoodDescription,
+  });
+};
+
+export const useGenerateFoodContent = () => {
+  return useMutation({
+    mutationFn: api.generateFoodContent,
+  });
+};

src/pages/food/hooks/useFoodFilters.ts

@@ -1,15 +1,69 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
 import type { FilterValues } from "@/components/Filters";
 import type { GetFoodsParams } from "../types/Types";
 
 const DEFAULT_PAGE = 1;
 const DEFAULT_LIMIT = 10;
 
+const getFiltersFromParams = (searchParams: URLSearchParams): FilterValues => {
+  const filters: FilterValues = {};
+  const search = searchParams.get("search");
+  const categoryId = searchParams.get("categoryId");
+
+  if (search) filters.search = search;
+  if (categoryId) filters.categoryId = categoryId;
+
+  return filters;
+};
+
+const getPageFromParams = (searchParams: URLSearchParams): number => {
+  const page = searchParams.get("page");
+  const parsed = page ? parseInt(page, 10) : DEFAULT_PAGE;
+  return Number.isNaN(parsed) || parsed < 1 ? DEFAULT_PAGE : parsed;
+};
+
+const buildSearchParams = (filters: FilterValues, page: number): URLSearchParams => {
+  const params = new URLSearchParams();
+
+  if (page > DEFAULT_PAGE) {
+    params.set("page", String(page));
+  }
+
+  if (filters.search) {
+    params.set("search", filters.search as string);
+  }
+
+  if (filters.categoryId) {
+    params.set("categoryId", filters.categoryId as string);
+  }
+
+  return params;
+};
+
 export const useFoodFilters = () => {
-  const [filters, setFilters] = useState<FilterValues>({});
-  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [filters, setFilters] = useState<FilterValues>(() =>
+    getFiltersFromParams(searchParams),
+  );
+  const [currentPage, setCurrentPage] = useState(() =>
+    getPageFromParams(searchParams),
+  );
   const [limit] = useState(DEFAULT_LIMIT);
 
+  useEffect(() => {
+    setFilters(getFiltersFromParams(searchParams));
+    setCurrentPage(getPageFromParams(searchParams));
+  }, [searchParams]);
+
+  const updateUrlParams = useCallback(
+    (newFilters: FilterValues, page: number) => {
+      setSearchParams(buildSearchParams(newFilters, page), { replace: true });
+    },
+    [setSearchParams],
+  );
+
   const apiParams = useMemo<GetFoodsParams>(() => {
     const params: GetFoodsParams = {
       page: currentPage,
@@ -20,17 +74,29 @@ export const useFoodFilters = () => {
       params.search = filters.search as string;
     }
 
+    if (filters.categoryId) {
+      params.categoryId = filters.categoryId as string;
+    }
+
     return params;
   }, [filters, currentPage, limit]);
 
-  const handleFiltersChange = (newFilters: FilterValues) => {
-    setFilters(newFilters);
-    setCurrentPage(DEFAULT_PAGE);
-  };
+  const handleFiltersChange = useCallback(
+    (newFilters: FilterValues) => {
+      setFilters(newFilters);
+      setCurrentPage(DEFAULT_PAGE);
+      updateUrlParams(newFilters, DEFAULT_PAGE);
+    },
+    [updateUrlParams],
+  );
 
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
+  const handlePageChange = useCallback(
+    (page: number) => {
+      setCurrentPage(page);
+      updateUrlParams(filters, page);
+    },
+    [filters, updateUrlParams],
+  );
 
   return {
     filters,

src/pages/food/service/FoodService.ts

@@ -2,11 +2,15 @@ import axios from "@/config/axios";
 import type {
   CreateCategoryType,
   CreateFoodType,
+  GenerateFoodAiParams,
+  GenerateFoodContentResponse,
+  GenerateFoodDescriptionResponse,
   GetCategoriesResponseType,
   GetFoodDetailsResponseType,
   GetFoodsParams,
   GetFoodsResponseType,
   GetIconsResponseType,
+  SetStockType,
 } from "../types/Types";
 import type { FilterValues } from "@/components/Filters";
 
@@ -54,6 +58,11 @@ export const deleteFood = async (id: string) => {
   return data;
 };
 
+export const cloneFood = async (id: string) => {
+  const { data } = await axios.post(`/admin/foods/${id}/clone`);
+  return data;
+};
+
 export const createCategory = async (params: CreateCategoryType) => {
   const { data } = await axios.post(`/admin/categories`, params);
   return data;
@@ -76,3 +85,31 @@ export const getIcons = async (): Promise<GetIconsResponseType> => {
   const { data } = await axios.get<GetIconsResponseType>(`/admin/groups/icons`);
   return data;
 };
+
+export const setStockForFood = async (foodId: string, params: SetStockType) => {
+  const { data } = await axios.patch(
+    `/admin/inventory/food/${foodId}/stock`,
+    params,
+  );
+  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

@@ -16,6 +16,7 @@ export type CreateFoodType = {
   discount: number;
   isSpecialOffer: boolean;
   dailyStock: number;
+  availableStock: number;
   order: number;
 };
 
@@ -149,3 +150,23 @@ export type IconGroup = {
 };
 
 export type GetIconsResponseType = IResponse<IconGroup[]>;
+
+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/pages/orders/Create.tsx

@@ -0,0 +1,94 @@
+import { type FC } from 'react'
+import { TickCircle } from 'iconsax-react'
+import Button from '@/components/Button'
+import { useCreateOrderForm } from './hooks/useCreateOrderForm'
+import CreateOrderCustomerSection from './components/CreateOrderCustomerSection'
+import CreateOrderItemsSection from './components/CreateOrderItemsSection'
+import CreateOrderSidebar from './components/CreateOrderSidebar'
+
+const CreateOrder: FC = () => {
+    const {
+        formik,
+        foods,
+        deliveryMethods,
+        cashPaymentMethod,
+        selectedDeliveryMethod,
+        selectedPaymentMethod,
+        isCourierDelivery,
+        isCarDelivery,
+        isDineIn,
+        orderSummary,
+        addFoodToOrder,
+        updateItemQuantity,
+        removeItem,
+        isSubmitting,
+        customerAddresses,
+        selectedAddressId,
+        handleUserFound,
+        handleUserNotFound,
+        clearCustomerData,
+        applySavedAddress,
+        selectManualAddress,
+        handleAddressFieldChange,
+        handleLocationSelect,
+    } = useCreateOrderForm()
+
+    return (
+        <div className='flex flex-col h-[calc(100vh-113px)] xl:overflow-hidden overflow-y-auto -mb-20'>
+            <div className='flex justify-between items-center flex-shrink-0 mb-3'>
+                <h1 className='text-lg font-light'>ثبت سفارش جدید</h1>
+                <Button
+                    className='w-fit px-6'
+                    isloading={isSubmitting}
+                    onClick={() => formik.handleSubmit()}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <TickCircle size={20} color='#fff' />
+                        <span>ثبت سفارش</span>
+                    </div>
+                </Button>
+            </div>
+
+            <CreateOrderCustomerSection
+                formik={formik}
+                onUserFound={handleUserFound}
+                onUserNotFound={handleUserNotFound}
+                onClearCustomerData={clearCustomerData}
+            />
+
+            <div className='flex-1 min-h-0 grid grid-cols-1 xl:grid-cols-[1fr_minmax(0,320px)] gap-4 mt-3 items-stretch'>
+                <div className='min-h-0 h-full overflow-hidden flex flex-col'>
+                    <CreateOrderItemsSection
+                        formik={formik}
+                        foods={foods}
+                        onAddFood={addFoodToOrder}
+                    />
+                </div>
+
+                <div className='min-h-0 h-full flex flex-col overflow-hidden'>
+                    <CreateOrderSidebar
+                        formik={formik}
+                        orderSummary={orderSummary}
+                        deliveryMethods={deliveryMethods}
+                        cashPaymentMethod={cashPaymentMethod}
+                        selectedDeliveryMethod={selectedDeliveryMethod}
+                        selectedPaymentMethod={selectedPaymentMethod}
+                        isCourierDelivery={isCourierDelivery}
+                        isCarDelivery={isCarDelivery}
+                        isDineIn={isDineIn}
+                        customerAddresses={customerAddresses}
+                        selectedAddressId={selectedAddressId}
+                        onSelectSavedAddress={applySavedAddress}
+                        onSelectManualAddress={selectManualAddress}
+                        onAddressFieldChange={handleAddressFieldChange}
+                        onLocationSelect={handleLocationSelect}
+                        onUpdateQuantity={updateItemQuantity}
+                        onRemoveItem={removeItem}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateOrder

src/pages/orders/DailyOrderReport.tsx

@@ -0,0 +1,97 @@
+import { type FC, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DocumentDownload } from 'iconsax-react';
+import Table from '@/components/Table';
+import Filters from '@/components/Filters';
+import Button from '@/components/Button';
+import PageLoading from '@/components/PageLoading';
+import { usePermissions } from '@/hooks/usePermissions';
+import { PermissionEnum } from '@/pages/roles/enum/Enum';
+import { useGetDailyOrderReport } from './hooks/useDailyOrderReportData';
+import { useDailyOrderReportFilters } from './hooks/useDailyOrderReportFilters';
+import { getDailyOrderReportTableColumns } from './components/DailyOrderReportTableColumns';
+import { useDailyOrderReportFiltersFields } from './components/DailyOrderReportFiltersFields';
+import { getDailyOrderReport } from './service/OrderService';
+import { exportDailyOrderReportExcel } from './utils/exportDailyOrderReportExcel';
+import type { DailyOrderReportItem } from './types/Types';
+import type { RowDataType } from '@/components/types/TableTypes';
+
+const DailyOrderReport: FC = () => {
+  const { t } = useTranslation('global');
+  const { checkPermission, isLoading: isPermissionsLoading } = usePermissions();
+  const { filters, apiParams, handleFiltersChange } = useDailyOrderReportFilters();
+  const { data: reportData, isLoading } = useGetDailyOrderReport(apiParams);
+  const [isExporting, setIsExporting] = useState(false);
+
+  const columns = getDailyOrderReportTableColumns();
+  const filterFields = useDailyOrderReportFiltersFields();
+
+  const reportItems = useMemo(() => {
+    return (reportData?.data || []).map((item) => ({
+      ...item,
+      id: item.date,
+    }));
+  }, [reportData?.data]);
+
+  const handleExportExcel = async () => {
+    setIsExporting(true);
+    try {
+      const response = await getDailyOrderReport(apiParams);
+      const items = (response?.data || []).map((item) => ({
+        ...item,
+        id: item.date,
+      }));
+      exportDailyOrderReportExcel(items);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  if (isPermissionsLoading) {
+    return <PageLoading />;
+  }
+
+  if (!checkPermission(PermissionEnum.VIEW_ORDER_REPORTS)) {
+    return (
+      <div className='mt-5 text-sm text-gray-500'>
+        شما دسترسی مشاهده این گزارش را ندارید.
+      </div>
+    );
+  }
+
+  return (
+    <div className='mt-5'>
+      <div className='flex justify-between items-center'>
+        <h1 className='text-lg font-light'>{t('submenu.orders_daily_report')}</h1>
+        <Button
+          className='w-fit px-4'
+          isloading={isExporting}
+          disabled={isLoading}
+          onClick={handleExportExcel}
+        >
+          <div className='flex items-center gap-2'>
+            <DocumentDownload size={18} color='#fff' />
+            <span>خروجی Excel</span>
+          </div>
+        </Button>
+      </div>
+
+      <div className='mt-8'>
+        <Filters
+          fields={filterFields}
+          onChange={handleFiltersChange}
+          initialValues={filters}
+          showClearButton
+        />
+      </div>
+
+      <Table<DailyOrderReportItem & RowDataType>
+        columns={columns}
+        data={reportItems as (DailyOrderReportItem & RowDataType)[]}
+        isloading={isLoading}
+      />
+    </div>
+  );
+};
+
+export default DailyOrderReport;

src/pages/orders/Details.tsx

@@ -1,76 +1,78 @@
 import { type FC, useState } from 'react'
 import {
     useGetOrderById,
-    useVerifyCashPayment,
+    useVerifyPayment,
     useChangeOrderStatus,
-    useRefundPayment
+    useRefundPayment,
+    useAddPayment,
+    useUpdateOrderFees,
+    useAddOrderItem,
+    useUpdateOrderItemQuantity,
+    useRemoveOrderItem,
+    useSendPleaseComeSms,
 } from './hooks/useOrderData'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
+import { ArrowRight2 } from 'iconsax-react'
 import { formatFaNumber } from '@/helpers/func'
+import { Pages } from '@/config/Pages'
 import { OrderStatus, PaymentStatusEnum } from './enum/Enum'
 import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
 import { DeliveryMethodEnum } from '@/pages/shipmentMethod/enum/Enum'
+import Button from '@/components/Button'
 import ModalConfrim from '@/components/ModalConfrim'
 import CustomerInfo from './components/CustomerInfo'
 import OrderItemsDetails from './components/OrderItemsDetails'
+import PaymentsList from './components/PaymentsList'
 import PaymentInfo from './components/PaymentInfo'
 import OrderActions from './components/OrderActions'
+import UpdateOrderFeesModal from './components/UpdateOrderFeesModal'
+import AddOrderItemModal from './components/AddOrderItemModal'
+import RefundPaymentModal from './components/RefundPaymentModal'
+import AddPaymentModal from './components/AddPaymentModal'
+import SendPleaseComeSmsModal from './components/SendPleaseComeSmsModal'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
 import { printOrderReceipt } from './print/orderReceiptPrint'
+import type { UpdateOrderFeesType } from './types/Types'
 
 const OrderDetails: FC = () => {
     const { id } = useParams()
+    const navigate = useNavigate()
     const { data: orderData, isLoading } = useGetOrderById(id!)
-    const { mutate: verifyCashPayment, isPending: isVerifyingPayment } = useVerifyCashPayment()
+    const { mutate: verifyPayment, isPending: isVerifyingPayment } = useVerifyPayment()
     const { mutate: changeOrderStatus, isPending: isChangingStatus } = useChangeOrderStatus()
     const { mutate: refundPayment, isPending: isRefunding } = useRefundPayment()
+    const { mutate: addPayment, isPending: isAddingPayment } = useAddPayment()
+    const { mutate: updateOrderFees, isPending: isUpdatingFees } = useUpdateOrderFees()
+    const { mutate: addOrderItem, isPending: isAddingItem } = useAddOrderItem()
+    const { mutate: updateOrderItemQuantity, isPending: isUpdatingItemQuantity } = useUpdateOrderItemQuantity()
+    const { mutate: removeOrderItem, isPending: isRemovingItem } = useRemoveOrderItem()
+    const { mutate: sendPleaseComeSms, isPending: isSendingPleaseComeSms } = useSendPleaseComeSms()
 
     const [showCancelModal, setShowCancelModal] = useState(false)
-    const [showRefundModal, setShowRefundModal] = useState(false)
+    const [showPleaseComeSmsModal, setShowPleaseComeSmsModal] = useState(false)
+    const [refundModal, setRefundModal] = useState<{ defaultAmount: number; maxAmount: number } | null>(null)
+    const [showAddPaymentModal, setShowAddPaymentModal] = useState(false)
+    const [showEditFeesModal, setShowEditFeesModal] = useState(false)
+    const [showAddItemModal, setShowAddItemModal] = useState(false)
+    const [itemIdToRemove, setItemIdToRemove] = useState<string | null>(null)
+    const [verifyingPaymentId, setVerifyingPaymentId] = useState<string | null>(null)
 
     const order = orderData?.data
 
     const getStatusColor = (status: string): string => {
         const colorMap: Record<string, string> = {
-            'pendingPayment': '#FFEECC',
-            'paid': '#E3F2FD',
-            'preparing': '#FFF3E0',
-            'ready': '#E3F2FD',
-            'shipped': '#E3F2FD',
-            'completed': '#E8F5E9',
-            'canceled': '#FFEBEE',
+            pendingPayment: '#FFEECC',
+            paid: '#E3F2FD',
+            preparing: '#FFF3E0',
+            ready: '#E3F2FD',
+            shipped: '#E3F2FD',
+            completed: '#E8F5E9',
+            canceled: '#FFEBEE',
         }
         return colorMap[status] || '#FFEECC'
     }
 
-    const getPaymentStatusColor = (status: string): string => {
-        const colorMap: Record<string, string> = {
-            [PaymentStatusEnum.Paid]: 'bg-green-500',
-            [PaymentStatusEnum.Pending]: 'bg-yellow-500',
-            [PaymentStatusEnum.Failed]: 'bg-red-500',
-        }
-        return colorMap[status] || 'bg-gray-500'
-    }
-
-    const getPaymentStatusTextColor = (status: string): string => {
-        const colorMap: Record<string, string> = {
-            [PaymentStatusEnum.Paid]: 'text-green-500',
-            [PaymentStatusEnum.Pending]: 'text-yellow-500',
-            [PaymentStatusEnum.Failed]: 'text-red-500',
-        }
-        return colorMap[status] || 'text-gray-500'
-    }
-
-    const getPaymentStatusText = (status: string): string => {
-        const textMap: Record<string, string> = {
-            [PaymentStatusEnum.Paid]: 'پرداخت شده',
-            [PaymentStatusEnum.Pending]: 'در انتظار پرداخت',
-            [PaymentStatusEnum.Failed]: 'پرداخت ناموفق',
-        }
-        return textMap[status] || status
-    }
-
     if (isLoading) {
         return (
             <div className='mt-5 flex items-center justify-center h-64'>
@@ -87,154 +89,295 @@ const OrderDetails: FC = () => {
         )
     }
 
-    // منطق نمایش دکمه‌ها
     const isCashPayment = order.paymentMethod?.method === PaymentMethodEnum.Cash
-    const isPendingPayment = order.status === OrderStatus.PENDING_PAYMENT
-    const isOrderPaid = order.status === OrderStatus.PAID
+    const isOrderPaid = Number(order.paidAmount ?? 0) > 0 || order.payments?.some(
+        (payment) => payment.status === PaymentStatusEnum.Paid
+    )
     const isPreparing = order.status === OrderStatus.PREPARING
     const isCanceled = order.status === OrderStatus.CANCELED
-    // بررسی وضعیت پرداخت از payments array یا paymentStatus
-    // ابتدا از paymentStatus استفاده می‌کنیم، اگر نبود از اولین payment در payments array استفاده می‌کنیم
-    const paymentStatus = order.paymentStatus || order.payments?.[0]?.status
-    // بررسی وضعیت pending (هم enum و هم string literal)
-    const isPaymentPending = paymentStatus === PaymentStatusEnum.Pending || paymentStatus === 'pending'
+    const isCompleted = order.status === OrderStatus.COMPLETED
+    const isPendingPayment = order.status === OrderStatus.NEW
+    const canEditFees = !isCanceled && !isCompleted
+    const canEditItems = !isCanceled && !isCompleted
+    const canAddPayment = !isCanceled && Number(order.balance ?? 0) > 0
+    const isUpdatingItem = isAddingItem || isUpdatingItemQuantity || isRemovingItem
+    const canCompleteOrder = [
+        OrderStatus.DELIVERED_TO_WAITER,
+        OrderStatus.DELIVERED_TO_RECEPTIONIST,
+        OrderStatus.SHIPPED,
+    ].includes(order.status as OrderStatus)
+    const canSendPleaseComeSms = Boolean(order.user?.phone)
     const isCourierDelivery = order.deliveryMethod?.method === DeliveryMethodEnum.DeliveryCourier
-    const isDineInOrCarDelivery = order.deliveryMethod?.method === DeliveryMethodEnum.DineIn || order.deliveryMethod?.method === DeliveryMethodEnum.DeliveryCar
+    const isDineInOrCarDelivery =
+        order.deliveryMethod?.method === DeliveryMethodEnum.DineIn ||
+        order.deliveryMethod?.method === DeliveryMethodEnum.DeliveryCar
     const isCustomerPickup = order.deliveryMethod?.method === DeliveryMethodEnum.CustomerPickup
 
-    // نمایش دکمه تایید پرداخت نقدی
-    // وقتی روش پرداخت نقدی است و وضعیت پرداخت Pending باشد
-    const showVerifyCashPaymentButton = isCashPayment && isPaymentPending
-
-    // نمایش دکمه ارسال به آشپزخانه
-    // برای pendingPayment با پرداخت نقدی یا برای paid
     const showSendToKitchenButton = (isPendingPayment && isCashPayment) || isOrderPaid
-
-    // نمایش دکمه کنسل
-    // همیشه نمایش داده می‌شود مگر اینکه سفارش قبلاً کنسل شده باشد
     const showCancelButton = !isCanceled
 
-    const handleVerifyCashPayment = () => {
-        const paymentId = order.paymentId || order.payments?.[0]?.id
-        if (paymentId) {
-            verifyCashPayment(paymentId, {
-                onSuccess: () => {
-                    // Success handled by query invalidation
-                },
-                onError: (error) => {
-                    toast.error(extractErrorMessage(error))
-                }
-            })
-        }
+    const handleVerifyPayment = (paymentId: string) => {
+        setVerifyingPaymentId(paymentId)
+        verifyPayment(paymentId, {
+            onSuccess: () => {
+                setVerifyingPaymentId(null)
+            },
+            onError: (error) => {
+                setVerifyingPaymentId(null)
+                toast.error(extractErrorMessage(error))
+            },
+        })
     }
 
     const handleSendToKitchen = () => {
-        changeOrderStatus({
-            orderId: order.id,
-            status: OrderStatus.PREPARING
-        }, {
-            onError: (error) => {
-                toast.error(extractErrorMessage(error))
+        changeOrderStatus(
+            {
+                orderId: order.id,
+                status: OrderStatus.PREPARING,
+            },
+            {
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
             }
-        })
+        )
     }
 
     const handleDeliverToCourier = () => {
-        changeOrderStatus({
-            orderId: order.id,
-            status: OrderStatus.SHIPPED
-        }, {
-            onError: (error) => {
-                toast.error(extractErrorMessage(error))
+        changeOrderStatus(
+            {
+                orderId: order.id,
+                status: OrderStatus.SHIPPED,
+            },
+            {
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
             }
-        })
+        )
     }
 
     const handleDeliverToWaiter = () => {
-        changeOrderStatus({
-            orderId: order.id,
-            status: OrderStatus.DELIVERED_TO_WAITER
-        }, {
-            onError: (error) => {
-                toast.error(extractErrorMessage(error))
+        changeOrderStatus(
+            {
+                orderId: order.id,
+                status: OrderStatus.DELIVERED_TO_WAITER,
+            },
+            {
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
             }
-        })
+        )
     }
 
     const handleDeliverToReceptionist = () => {
-        changeOrderStatus({
-            orderId: order.id,
-            status: OrderStatus.DELIVERED_TO_RECEPTIONIST
-        }, {
-            onError: (error) => {
-                toast.error(extractErrorMessage(error))
+        changeOrderStatus(
+            {
+                orderId: order.id,
+                status: OrderStatus.DELIVERED_TO_RECEPTIONIST,
+            },
+            {
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
             }
-        })
+        )
     }
 
     const handleCancelOrder = (description?: string) => {
-        changeOrderStatus({
-            orderId: order.id,
-            status: OrderStatus.CANCELED,
-            params: description ? { description } : undefined
-        }, {
-            onError: (error) => {
-                toast.error(extractErrorMessage(error))
+        changeOrderStatus(
+            {
+                orderId: order.id,
+                status: OrderStatus.CANCELED,
+                params: description ? { description } : undefined,
+            },
+            {
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
             }
-        })
+        )
         setShowCancelModal(false)
     }
 
-    const handleRefund = (text?: string) => {
-        if (!text) return
-        refundPayment({
-            orderId: order.id,
-            params: { description: text }
-        }, {
-            onError: (error) => {
-                toast.error(extractErrorMessage(error))
+    const handleCompleteOrder = () => {
+        changeOrderStatus(
+            {
+                orderId: order.id,
+                status: OrderStatus.COMPLETED,
+            },
+            {
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
             }
-        })
-        setShowRefundModal(false)
+        )
+    }
+
+    const handleRefund = (amount: number, description: string) => {
+        refundPayment(
+            {
+                orderId: order.id,
+                params: { amount, description },
+            },
+            {
+                onSuccess: () => {
+                    toast.success('بازگشت وجه با موفقیت انجام شد')
+                    setRefundModal(null)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            }
+        )
+    }
+
+    const handleAddPayment = (amount: number, description: string) => {
+        addPayment(
+            {
+                orderId: order.id,
+                params: {
+                    amount,
+                    ...(description ? { description } : {}),
+                },
+            },
+            {
+                onSuccess: () => {
+                    toast.success('پرداخت با موفقیت ثبت شد')
+                    setShowAddPaymentModal(false)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            }
+        )
     }
 
     const handlePrintOrder = () => {
         printOrderReceipt(order)
     }
 
+    const handleUpdateOrderFees = (params: UpdateOrderFeesType) => {
+        updateOrderFees(
+            { orderId: order.id, params },
+            {
+                onSuccess: () => {
+                    toast.success('هزینه‌های سفارش به‌روزرسانی شد')
+                    setShowEditFeesModal(false)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            }
+        )
+    }
+
+    const handleAddOrderItem = (foodId: string, quantity: number) => {
+        addOrderItem(
+            { orderId: order.id, params: { foodId, quantity } },
+            {
+                onSuccess: () => {
+                    toast.success('آیتم به سفارش اضافه شد')
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            }
+        )
+    }
+
+    const handleUpdateItemQuantity = (itemId: string, quantity: number) => {
+        if (quantity < 1) return
+        updateOrderItemQuantity(
+            { orderId: order.id, itemId, params: { quantity } },
+            {
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            }
+        )
+    }
+
+    const handleConfirmRemoveItem = () => {
+        if (!itemIdToRemove) return
+        removeOrderItem(
+            { orderId: order.id, itemId: itemIdToRemove },
+            {
+                onSuccess: () => {
+                    toast.success('آیتم از سفارش حذف شد')
+                    setItemIdToRemove(null)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            }
+        )
+    }
+
+    const handleConfirmPleaseComeSms = () => {
+        sendPleaseComeSms(order.id, {
+            onSuccess: (response) => {
+                toast.success(response.message || 'پیامک در صف ارسال قرار گرفت')
+                setShowPleaseComeSmsModal(false)
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            },
+        })
+    }
+
     return (
-        <div className='mt-5'>
+        <div className='mt-5 pb-8'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>
                     سفارش {formatFaNumber(order.orderNumber)}
                 </h1>
-                {/* <div>
-                    <Select
-                        items={statusItems}
-                        value={order.status}
-                        placeholder={t(`order_status.${order.status}`)}
-                        className='w-[200px]'
-                        style={{ backgroundColor: getStatusColor(order.status) }}
-                    />
-                </div> */}
+                <Button
+                    className='w-fit px-6 bg-transparent text-primary border-primary border'
+                    onClick={() => navigate(Pages.orders.list)}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <ArrowRight2 color='#000' size={18} />
+                        <span>بازگشت</span>
+                    </div>
+                </Button>
             </div>
 
-            <div className='flex gap-7 mt-9'>
-                <div className='flex-1 space-y-8'>
+            <div className='flex flex-col lg:flex-row gap-5 lg:gap-7 mt-6 sm:mt-9'>
+                <div className='flex-1 min-w-0 space-y-5 sm:space-y-8 order-2 lg:order-1'>
                     <CustomerInfo order={order} />
-                    <OrderItemsDetails order={order} getStatusColor={getStatusColor} />
+                    <OrderItemsDetails
+                        order={order}
+                        getStatusColor={getStatusColor}
+                        canEditItems={canEditItems}
+                        isUpdatingItem={isUpdatingItem}
+                        onAddItem={() => setShowAddItemModal(true)}
+                        onUpdateQuantity={handleUpdateItemQuantity}
+                        onRemoveItem={(itemId) => setItemIdToRemove(itemId)}
+                    />
+                    <PaymentsList
+                        order={order}
+                        isVerifyingPayment={isVerifyingPayment}
+                        verifyingPaymentId={verifyingPaymentId}
+                        onVerifyPayment={handleVerifyPayment}
+                        canAddPayment={canAddPayment}
+                        onAddPayment={() => setShowAddPaymentModal(true)}
+                    />
                 </div>
 
-                <div>
+                <div className='w-full lg:w-[330px] shrink-0 order-1 lg:order-2'>
                     <PaymentInfo
                         order={order}
-                        getPaymentStatusColor={getPaymentStatusColor}
-                        getPaymentStatusTextColor={getPaymentStatusTextColor}
-                        getPaymentStatusText={getPaymentStatusText}
+                        canEditFees={canEditFees}
+                        onEditFees={() => setShowEditFeesModal(true)}
+                        isRefunding={isRefunding}
+                        onRefund={(defaultAmount, maxAmount) =>
+                            setRefundModal({ defaultAmount, maxAmount })
+                        }
                     />
                     <OrderActions
                         onPrint={handlePrintOrder}
-                        showVerifyCashPaymentButton={showVerifyCashPaymentButton}
                         showSendToKitchenButton={showSendToKitchenButton}
                         showCancelButton={showCancelButton}
                         isPreparing={isPreparing}
@@ -242,19 +385,37 @@ const OrderDetails: FC = () => {
                         isDineInOrCarDelivery={isDineInOrCarDelivery}
                         isCustomerPickup={isCustomerPickup}
                         isCanceled={isCanceled}
-                        isVerifyingPayment={isVerifyingPayment}
+                        canCompleteOrder={canCompleteOrder}
+                        canSendPleaseComeSms={canSendPleaseComeSms}
                         isChangingStatus={isChangingStatus}
-                        onVerifyCashPayment={handleVerifyCashPayment}
+                        isSendingPleaseComeSms={isSendingPleaseComeSms}
                         onSendToKitchen={handleSendToKitchen}
                         onDeliverToCourier={handleDeliverToCourier}
                         onDeliverToWaiter={handleDeliverToWaiter}
                         onDeliverToReceptionist={handleDeliverToReceptionist}
+                        onCompleteOrder={handleCompleteOrder}
                         onCancelOrder={() => setShowCancelModal(true)}
+                        onSendPleaseComeSms={() => setShowPleaseComeSmsModal(true)}
                     />
                 </div>
             </div>
 
-            {/* مدال کنسل سفارش */}
+            <UpdateOrderFeesModal
+                isOpen={showEditFeesModal}
+                onClose={() => setShowEditFeesModal(false)}
+                order={order}
+                isLoading={isUpdatingFees}
+                onSubmit={handleUpdateOrderFees}
+            />
+
+            <AddOrderItemModal
+                isOpen={showAddItemModal}
+                onClose={() => setShowAddItemModal(false)}
+                existingItems={order.items}
+                isLoading={isAddingItem}
+                onAdd={handleAddOrderItem}
+            />
+
             <ModalConfrim
                 isOpen={showCancelModal}
                 close={() => setShowCancelModal(false)}
@@ -264,14 +425,38 @@ const OrderDetails: FC = () => {
                 isHasDescription
             />
 
-            {/* مدال ریفاند */}
+            <RefundPaymentModal
+                isOpen={!!refundModal}
+                onClose={() => setRefundModal(null)}
+                defaultAmount={refundModal?.defaultAmount ?? 0}
+                maxAmount={refundModal?.maxAmount ?? 0}
+                isLoading={isRefunding}
+                onSubmit={handleRefund}
+            />
+
+            <AddPaymentModal
+                isOpen={showAddPaymentModal}
+                onClose={() => setShowAddPaymentModal(false)}
+                defaultAmount={Number(order.balance ?? 0)}
+                isLoading={isAddingPayment}
+                onSubmit={handleAddPayment}
+            />
+
             <ModalConfrim
-                isOpen={showRefundModal}
-                close={() => setShowRefundModal(false)}
-                onConfrim={handleRefund}
-                isloading={isRefunding}
-                label='آیا از ریفاند این سفارش مطمئن هستید؟'
-                isHasDescription
+                isOpen={!!itemIdToRemove}
+                close={() => setItemIdToRemove(null)}
+                onConfrim={handleConfirmRemoveItem}
+                isloading={isRemovingItem}
+                label='آیا از حذف این آیتم مطمئن هستید؟'
+            />
+
+            <SendPleaseComeSmsModal
+                isOpen={showPleaseComeSmsModal}
+                onClose={() => setShowPleaseComeSmsModal(false)}
+                isLoading={isSendingPleaseComeSms}
+                customerName={order.user?.firstName || ''}
+                restaurantName={order.restaurant?.name || ''}
+                onConfirm={handleConfirmPleaseComeSms}
             />
         </div>
     )

src/pages/orders/FoodOrderReport.tsx

@@ -0,0 +1,97 @@
+import { type FC, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DocumentDownload } from 'iconsax-react';
+import Table from '@/components/Table';
+import Filters from '@/components/Filters';
+import Button from '@/components/Button';
+import PageLoading from '@/components/PageLoading';
+import { usePermissions } from '@/hooks/usePermissions';
+import { PermissionEnum } from '@/pages/roles/enum/Enum';
+import { useGetFoodOrderReport } from './hooks/useFoodOrderReportData';
+import { useFoodOrderReportFilters } from './hooks/useFoodOrderReportFilters';
+import { getFoodOrderReportTableColumns } from './components/FoodOrderReportTableColumns';
+import { useFoodOrderReportFiltersFields } from './components/FoodOrderReportFiltersFields';
+import { getFoodOrderReport } from './service/OrderService';
+import { exportFoodOrderReportExcel } from './utils/exportFoodOrderReportExcel';
+import type { FoodOrderReportItem } from './types/Types';
+import type { RowDataType } from '@/components/types/TableTypes';
+
+const FoodOrderReport: FC = () => {
+  const { t } = useTranslation('global');
+  const { checkPermission, isLoading: isPermissionsLoading } = usePermissions();
+  const { filters, apiParams, handleFiltersChange } = useFoodOrderReportFilters();
+  const { data: reportData, isLoading } = useGetFoodOrderReport(apiParams);
+  const [isExporting, setIsExporting] = useState(false);
+
+  const columns = getFoodOrderReportTableColumns();
+  const filterFields = useFoodOrderReportFiltersFields();
+
+  const reportItems = useMemo(() => {
+    return (reportData?.data || []).map((item) => ({
+      ...item,
+      id: item.food.id,
+    }));
+  }, [reportData?.data]);
+
+  const handleExportExcel = async () => {
+    setIsExporting(true);
+    try {
+      const response = await getFoodOrderReport(apiParams);
+      const items = (response?.data || []).map((item) => ({
+        ...item,
+        id: item.food.id,
+      }));
+      exportFoodOrderReportExcel(items);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  if (isPermissionsLoading) {
+    return <PageLoading />;
+  }
+
+  if (!checkPermission(PermissionEnum.VIEW_ORDER_REPORTS)) {
+    return (
+      <div className='mt-5 text-sm text-gray-500'>
+        شما دسترسی مشاهده این گزارش را ندارید.
+      </div>
+    );
+  }
+
+  return (
+    <div className='mt-5'>
+      <div className='flex justify-between items-center'>
+        <h1 className='text-lg font-light'>{t('submenu.orders_food_report')}</h1>
+        <Button
+          className='w-fit px-4'
+          isloading={isExporting}
+          disabled={isLoading}
+          onClick={handleExportExcel}
+        >
+          <div className='flex items-center gap-2'>
+            <DocumentDownload size={18} color='#fff' />
+            <span>خروجی Excel</span>
+          </div>
+        </Button>
+      </div>
+
+      <div className='mt-8'>
+        <Filters
+          fields={filterFields}
+          onChange={handleFiltersChange}
+          initialValues={filters}
+          showClearButton
+        />
+      </div>
+
+      <Table<FoodOrderReportItem & RowDataType>
+        columns={columns}
+        data={reportItems as (FoodOrderReportItem & RowDataType)[]}
+        isloading={isLoading}
+      />
+    </div>
+  );
+};
+
+export default FoodOrderReport;

src/pages/orders/List.tsx

@@ -1,13 +1,20 @@
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Add } from 'iconsax-react'
+import { Link } from 'react-router-dom'
 import Table from '@/components/Table'
 import Filters from '@/components/Filters'
-import { useGetOrders } from './hooks/useOrderData'
+import Button from '@/components/Button'
+import { Pages } from '@/config/Pages'
+import { useGetOrders, useSendPleaseComeSms } from './hooks/useOrderData'
 import { useOrderFilters } from './hooks/useOrderFilters'
 import { getOrderTableColumns } from './components/OrderTableColumns'
 import { useOrderFiltersFields } from './components/OrderFiltersFields'
+import SendPleaseComeSmsModal from './components/SendPleaseComeSmsModal'
 import type { Order } from './types/Types'
 import type { RowDataType } from '@/components/types/TableTypes'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
 
 const OrdersList: FC = () => {
     const { t } = useTranslation('global')
@@ -17,21 +24,47 @@ const OrdersList: FC = () => {
         apiParams,
         handleFiltersChange,
         handlePageChange,
-        limit,
     } = useOrderFilters()
 
     const { data: ordersData, isLoading } = useGetOrders(apiParams)
+    const { mutate: sendPleaseComeSms, isPending: isSendingSms } = useSendPleaseComeSms()
+    const [smsOrder, setSmsOrder] = useState<Order | null>(null)
 
     const orders = ordersData?.data || []
-    const columns = getOrderTableColumns({ t })
+    const columns = getOrderTableColumns({
+        t,
+        onSendPleaseComeSms: (order) => setSmsOrder(order),
+    })
     const filterFields = useOrderFiltersFields()
 
-    const totalPages = Math.ceil(orders.length / limit) || 1
+    const totalPages = ordersData?.meta?.totalPages || 1
+
+    const handleConfirmSendSms = () => {
+        if (!smsOrder) return
+
+        sendPleaseComeSms(smsOrder.id, {
+            onSuccess: (response) => {
+                toast.success(response.message || 'پیامک در صف ارسال قرار گرفت')
+                setSmsOrder(null)
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            },
+        })
+    }
 
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>لیست سفارشات</h1>
+                <Link to={Pages.orders.add}>
+                    <Button className='w-fit px-6'>
+                        <div className='flex gap-2 items-center'>
+                            <Add color='#fff' size={20} />
+                            <span>ثبت سفارش</span>
+                        </div>
+                    </Button>
+                </Link>
             </div>
 
             <div className='mt-8'>
@@ -53,6 +86,15 @@ const OrdersList: FC = () => {
                     onPageChange: handlePageChange,
                 }}
             />
+
+            <SendPleaseComeSmsModal
+                isOpen={!!smsOrder}
+                onClose={() => setSmsOrder(null)}
+                isLoading={isSendingSms}
+                customerName={smsOrder?.user?.firstName || ''}
+                restaurantName={smsOrder?.restaurant?.name || ''}
+                onConfirm={handleConfirmSendSms}
+            />
         </div>
     )
 }

src/pages/orders/components/AddOrderItemModal.tsx

@@ -0,0 +1,160 @@
+import { type FC, useMemo, useState } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import Input from '@/components/Input'
+import { Add } from 'iconsax-react'
+import { useGetFoods } from '@/pages/food/hooks/useFoodData'
+import { formatPrice } from '@/helpers/func'
+import { getFoodUnitPrice } from '../hooks/useCreateOrderForm'
+import type { OrderItem } from '../types/Types'
+
+interface AddOrderItemModalProps {
+    isOpen: boolean
+    onClose: () => void
+    existingItems: OrderItem[]
+    isLoading?: boolean
+    onAdd: (foodId: string, quantity: number) => void
+}
+
+const AddOrderItemModal: FC<AddOrderItemModalProps> = ({
+    isOpen,
+    onClose,
+    existingItems,
+    isLoading,
+    onAdd,
+}) => {
+    const [search, setSearch] = useState('')
+    const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null)
+    const { data: foodsData } = useGetFoods({ limit: 500 })
+    const foods = foodsData?.data ?? []
+
+    const categories = useMemo(() => {
+        const categoryMap = new Map<string, string>()
+        foods.forEach((food) => {
+            if (food.category?.id) {
+                categoryMap.set(food.category.id, food.category.title)
+            }
+        })
+        return Array.from(categoryMap.entries())
+            .map(([id, title]) => ({ id, title }))
+            .sort((a, b) => a.title.localeCompare(b.title, 'fa'))
+    }, [foods])
+
+    const filteredFoods = useMemo(() => {
+        let result = foods
+        if (selectedCategoryId) {
+            result = result.filter((food) => food.category?.id === selectedCategoryId)
+        }
+        const query = search.trim().toLowerCase()
+        if (query) {
+            result = result.filter((food) => food.title.toLowerCase().includes(query))
+        }
+        return result
+    }, [foods, search, selectedCategoryId])
+
+    const existingQtyByFoodId = useMemo(() => {
+        const map = new Map<string, number>()
+        existingItems.forEach((item) => {
+            map.set(item.food.id, item.quantity)
+        })
+        return map
+    }, [existingItems])
+
+    return (
+        <DefaulModal
+            open={isOpen}
+            close={onClose}
+            isHeader
+            title_header='افزودن آیتم'
+            width={480}
+        >
+            <div className='mt-4 flex flex-col max-h-[60vh]'>
+                <Input
+                    variant='search'
+                    className='bg-[#EEF0F7]'
+                    placeholder='جستجوی غذا...'
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                />
+
+                {categories.length > 0 && (
+                    <div className='mt-2 flex gap-1.5 overflow-x-auto flex-shrink-0 pb-0.5'>
+                        <button
+                            type='button'
+                            onClick={() => setSelectedCategoryId(null)}
+                            className={`flex-shrink-0 px-2.5 h-7 rounded-full text-[11px] transition-colors ${
+                                selectedCategoryId === null
+                                    ? 'bg-primary text-white'
+                                    : 'bg-[#EEF0F7] text-description hover:bg-[#E4E7F0]'
+                            }`}
+                        >
+                            همه
+                        </button>
+                        {categories.map((category) => (
+                            <button
+                                key={category.id}
+                                type='button'
+                                onClick={() => setSelectedCategoryId(category.id)}
+                                className={`flex-shrink-0 px-2.5 h-7 rounded-full text-[11px] transition-colors whitespace-nowrap ${
+                                    selectedCategoryId === category.id
+                                        ? 'bg-primary text-white'
+                                        : 'bg-[#EEF0F7] text-description hover:bg-[#E4E7F0]'
+                                }`}
+                            >
+                                {category.title}
+                            </button>
+                        ))}
+                    </div>
+                )}
+
+                <div className='mt-3 flex-1 min-h-0 overflow-y-auto space-y-1'>
+                    {filteredFoods.length === 0 ? (
+                        <div className='text-center py-8 text-xs text-description'>
+                            غذایی یافت نشد
+                        </div>
+                    ) : (
+                        filteredFoods.map((food) => {
+                            const existingQty = existingQtyByFoodId.get(food.id)
+                            return (
+                                <div
+                                    key={food.id}
+                                    className='flex items-center gap-2 p-1.5 rounded-lg hover:bg-[#F8F9FC] transition-colors'
+                                >
+                                    {food.images?.[0] ? (
+                                        <img
+                                            src={food.images[0]}
+                                            alt={food.title}
+                                            className='w-9 h-9 rounded-lg object-cover flex-shrink-0'
+                                        />
+                                    ) : (
+                                        <div className='w-9 h-9 rounded-lg bg-gray-100 flex-shrink-0' />
+                                    )}
+                                    <div className='flex-1 min-w-0'>
+                                        <div className='text-xs truncate'>{food.title}</div>
+                                        <div className='text-[11px] text-description'>
+                                            {formatPrice(getFoodUnitPrice(food))}
+                                        </div>
+                                    </div>
+                                    <button
+                                        type='button'
+                                        disabled={isLoading}
+                                        onClick={() => onAdd(food.id, 1)}
+                                        className={`flex items-center gap-1 px-2.5 h-7 rounded-lg text-[11px] transition-colors flex-shrink-0 disabled:opacity-50 ${
+                                            existingQty
+                                                ? 'bg-primary/10 text-primary'
+                                                : 'bg-primary text-white'
+                                        }`}
+                                    >
+                                        <Add size={12} color={existingQty ? '#000' : '#fff'} />
+                                        {existingQty ? `×${existingQty}` : 'افزودن'}
+                                    </button>
+                                </div>
+                            )
+                        })
+                    )}
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default AddOrderItemModal

src/pages/orders/components/AddPaymentModal.tsx

@@ -0,0 +1,102 @@
+import { type FC, useEffect, useState } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import Textarea from '@/components/Textarea'
+import Select from '@/components/Select'
+import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
+
+interface AddPaymentModalProps {
+    isOpen: boolean
+    onClose: () => void
+    defaultAmount: number
+    isLoading?: boolean
+    onSubmit: (amount: number, description: string) => void
+}
+
+const AddPaymentModal: FC<AddPaymentModalProps> = ({
+    isOpen,
+    onClose,
+    defaultAmount,
+    isLoading,
+    onSubmit,
+}) => {
+    const [amount, setAmount] = useState(String(defaultAmount))
+    const [description, setDescription] = useState('')
+    const [error, setError] = useState('')
+
+    useEffect(() => {
+        if (!isOpen) return
+        setAmount(String(Math.max(0, defaultAmount)))
+        setDescription('')
+        setError('')
+    }, [isOpen, defaultAmount])
+
+    const handleSubmit = () => {
+        const parsed = Number(amount)
+        if (!parsed || parsed <= 0) {
+            setError('مبلغ پرداخت باید بیشتر از صفر باشد')
+            return
+        }
+        onSubmit(parsed, description.trim())
+    }
+
+    return (
+        <DefaulModal
+            open={isOpen}
+            close={onClose}
+            isHeader
+            title_header='افزودن پرداخت'
+            width={420}
+        >
+            <div className='mt-6 space-y-4'>
+                <Select
+                    label='روش پرداخت'
+                    value={PaymentMethodEnum.Cash}
+                    items={[{ value: PaymentMethodEnum.Cash, label: 'نقدی' }]}
+                    disabled
+                />
+
+                <Input
+                    label='مبلغ پرداخت (تومان)'
+                    type='number'
+                    inputMode='numeric'
+                    min={1}
+                    seprator
+                    value={amount}
+                    onChange={(e) => {
+                        setAmount(e.target.value)
+                        setError('')
+                    }}
+                />
+
+                <Textarea
+                    placeholder='توضیحات (اختیاری)'
+                    value={description}
+                    onChange={(e) => {
+                        setDescription(e.target.value)
+                        setError('')
+                    }}
+                    className='bg-transparent border border-gray-500 rounded-xl w-full p-2 min-h-[80px]'
+                />
+
+                {error && <p className='text-xs text-red-500 text-center'>{error}</p>}
+
+                <div className='flex gap-4 justify-center pt-4'>
+                    <Button
+                        label='تایید'
+                        onClick={handleSubmit}
+                        isloading={isLoading}
+                    />
+                    <Button
+                        label='انصراف'
+                        className='bg-transparent text-black border border-primary'
+                        onClick={onClose}
+                    />
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default AddPaymentModal

src/pages/orders/components/CreateOrderAddressSelector.tsx

@@ -0,0 +1,77 @@
+import { type FC } from 'react'
+import { Location } from 'iconsax-react'
+import type { UserSavedAddress } from '@/pages/customers/types/Types'
+
+interface CreateOrderAddressSelectorProps {
+    addresses: UserSavedAddress[]
+    selectedAddressId: string | null
+    onSelectAddress: (address: UserSavedAddress) => void
+    onSelectManual: () => void
+}
+
+const CreateOrderAddressSelector: FC<CreateOrderAddressSelectorProps> = ({
+    addresses,
+    selectedAddressId,
+    onSelectAddress,
+    onSelectManual,
+}) => {
+    if (addresses.length === 0) {
+        return null
+    }
+
+    const isManualSelected = selectedAddressId === null
+
+    return (
+        <div className='mb-6'>
+            <div className='text-sm mb-3'>انتخاب آدرس ذخیره‌شده</div>
+            <div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
+                {addresses.map((address) => {
+                    const isSelected = selectedAddressId === address.id
+
+                    return (
+                        <button
+                            key={address.id}
+                            type='button'
+                            onClick={() => onSelectAddress(address)}
+                            className={`text-right p-4 rounded-xl border transition-colors ${
+                                isSelected
+                                    ? 'border-primary bg-primary/5'
+                                    : 'border-border hover:border-primary/40'
+                            }`}
+                        >
+                            <div className='flex items-center justify-between gap-2'>
+                                <div className='text-sm font-medium'>{address.title || 'آدرس'}</div>
+                                {address.isDefault && (
+                                    <span className='text-[10px] px-2 py-0.5 rounded-full bg-primary/10 text-primary'>
+                                        پیش‌فرض
+                                    </span>
+                                )}
+                            </div>
+                            <div className='text-xs mt-2 line-clamp-2'>{address.address}</div>
+                        </button>
+                    )
+                })}
+
+                <button
+                    type='button'
+                    onClick={onSelectManual}
+                    className={`text-right p-4 rounded-xl border transition-colors ${
+                        isManualSelected
+                            ? 'border-primary bg-primary/5'
+                            : 'border-border hover:border-primary/40'
+                    }`}
+                >
+                    <div className='flex items-center gap-2 text-sm font-medium'>
+                        <Location size={16} color='#000' />
+                        <span>ورود آدرس جدید</span>
+                    </div>
+                    <div className='text-xs text-description mt-1'>
+                        آدرس را به‌صورت دستی وارد کنید
+                    </div>
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default CreateOrderAddressSelector

src/pages/orders/components/CreateOrderCustomerSection.tsx

@@ -0,0 +1,249 @@
+import { type FC, useState } from 'react'
+import { Profile, SearchNormal, TickCircle, UserAdd } from 'iconsax-react'
+import type { FormikProps } from 'formik'
+import { toast } from 'react-toastify'
+import { clx } from '@/helpers/utils'
+import Button from '@/components/Button'
+import DefaulModal from '@/components/DefaulModal'
+import Input from '@/components/Input'
+import { useSearchUserByPhone } from '@/pages/customers/hooks/useUsersData'
+import type { UserWithAddresses } from '@/pages/customers/types/Types'
+import type { CreateOrderFormValues } from '../hooks/useCreateOrderForm'
+import type { ErrorType } from '@/helpers/types'
+import { extractErrorMessage } from '@/config/func'
+import { isAxiosError } from 'axios'
+
+interface CreateOrderCustomerSectionProps {
+    formik: FormikProps<CreateOrderFormValues>
+    onUserFound: (user: UserWithAddresses) => void
+    onUserNotFound: () => void
+    onClearCustomerData: () => void
+}
+
+type CustomerSearchState = 'idle' | 'found' | 'not_found'
+
+const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
+    formik,
+    onUserFound,
+    onUserNotFound,
+    onClearCustomerData,
+}) => {
+    const { mutate: searchUser, isPending: isSearching } = useSearchUserByPhone()
+    const [searchState, setSearchState] = useState<CustomerSearchState>('idle')
+    const [isCustomerModalOpen, setIsCustomerModalOpen] = useState(false)
+
+    const handleSearch = () => {
+        const phone = formik.values.userPhone.trim()
+        if (!phone) {
+            toast.error('شماره تلفن را وارد کنید')
+            return
+        }
+
+        searchUser(phone, {
+            onSuccess: (response) => {
+                const user = response?.data
+                if (!user) {
+                    setSearchState('not_found')
+                    onUserNotFound()
+                    toast.info('مشتری یافت نشد. اطلاعات را وارد کنید.')
+                    return
+                }
+
+                formik.setFieldValue('userPhone', user.phone || phone)
+                formik.setFieldValue('firstName', user.firstName || '')
+                formik.setFieldValue('lastName', user.lastName || '')
+                onUserFound(user)
+                setSearchState('found')
+                toast.success('اطلاعات مشتری بارگذاری شد')
+            },
+            onError: (error: ErrorType) => {
+                if (isAxiosError(error) && error.response?.status === 404) {
+                    setSearchState('not_found')
+                    onUserNotFound()
+                    toast.info('مشتری یافت نشد. اطلاعات را وارد کنید.')
+                    return
+                }
+
+                setSearchState('idle')
+                toast.error(extractErrorMessage(error, 'خطا در جستجوی مشتری'))
+            },
+        })
+    }
+
+    const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        formik.handleChange(e)
+        if (searchState !== 'idle') {
+            setSearchState('idle')
+            onClearCustomerData()
+        }
+    }
+
+    const isCustomerLocked = searchState !== 'not_found'
+    const isNameDisabled = searchState === 'idle'
+    const customerName = [formik.values.firstName, formik.values.lastName]
+        .filter(Boolean)
+        .join(' ')
+
+    const phoneError =
+        formik.touched.userPhone && formik.errors.userPhone
+            ? formik.errors.userPhone
+            : ''
+
+    return (
+        <>
+            <div className='w-full bg-white rounded-4xl px-5 py-4 flex-shrink-0'>
+                <div className='flex items-center justify-between gap-3'>
+                    <div className='flex items-center gap-2'>
+                        <div
+                            className={clx(
+                                'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 transition-colors',
+                                searchState === 'found' ? 'bg-green-50' : 'bg-[#EEF0F7]',
+                            )}
+                        >
+                            {searchState === 'found' ? (
+                                <TickCircle size={18} color='#16A34A' />
+                            ) : searchState === 'not_found' ? (
+                                <UserAdd size={18} color='#8C90A3' />
+                            ) : (
+                                <Profile size={18} color='#8C90A3' />
+                            )}
+                        </div>
+                        <div>
+                            <div className='text-sm font-light flex items-center gap-2'>
+                                اطلاعات مشتری
+                                <span className='text-[11px] text-description bg-[#F8F9FC] rounded-full px-2 py-0.5'>
+                                    اختیاری
+                                </span>
+                            </div>
+                            {searchState === 'found' && customerName && (
+                                <div className='text-[11px] text-green-600 mt-0.5'>
+                                    {customerName}
+                                </div>
+                            )}
+                            {searchState === 'not_found' && (
+                                <div className='text-[11px] text-description mt-0.5'>
+                                    مشتری جدید
+                                </div>
+                            )}
+                            {searchState === 'idle' && (
+                                <div className='text-[11px] text-description mt-0.5'>
+                                    برای این سفارش وارد کردن اطلاعات مشتری الزامی نیست
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <Button
+                        type='button'
+                        className='w-fit px-4 h-10'
+                        onClick={() => setIsCustomerModalOpen(true)}
+                    >
+                        {searchState === 'idle' ? 'افزودن مشتری' : 'ویرایش مشتری'}
+                    </Button>
+                </div>
+            </div>
+
+            <DefaulModal
+                open={isCustomerModalOpen}
+                close={() => setIsCustomerModalOpen(false)}
+                isHeader={true}
+                title_header='اطلاعات مشتری'
+                width={700}
+            >
+                <div className='p-2'>
+                    <div className='text-xs text-description mb-4'>
+                        اطلاعات مشتری اختیاری است و در صورت نیاز می‌توانید ثبت کنید.
+                    </div>
+
+                    <div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-[1.2fr_1fr_1fr] gap-3 xl:items-end'>
+                        <div className='w-full'>
+                            <label className='text-xs text-description'>شماره تلفن</label>
+                            <div className='flex mt-1'>
+                                <input
+                                    name='userPhone'
+                                    placeholder='۰۹۱۲۱۲۳۴۵۶۷'
+                                    value={formik.values.userPhone}
+                                    onChange={handlePhoneChange}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault()
+                                            handleSearch()
+                                        }
+                                    }}
+                                    className={clx(
+                                        'flex-1 min-w-0 h-10 text-xs px-4 border border-border bg-white',
+                                        'rounded-r-xl border-l-0 focus:outline-none',
+                                        phoneError && 'border-red-400',
+                                    )}
+                                />
+                                <button
+                                    type='button'
+                                    disabled={isSearching}
+                                    onClick={handleSearch}
+                                    className={clx(
+                                        'h-10 px-4 flex items-center gap-1.5 flex-shrink-0',
+                                        'bg-primary text-white text-xs rounded-l-xl',
+                                        'hover:opacity-90 transition-opacity disabled:opacity-60',
+                                    )}
+                                >
+                                    {isSearching ? (
+                                        <span className='w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin' />
+                                    ) : (
+                                        <SearchNormal size={16} color='#fff' />
+                                    )}
+                                    <span className='hidden sm:inline'>جستجو</span>
+                                </button>
+                            </div>
+                            {phoneError && (
+                                <p className='text-[11px] text-red-500 mt-1'>{phoneError}</p>
+                            )}
+                        </div>
+
+                        <Input
+                            label='نام'
+                            name='firstName'
+                            placeholder={isNameDisabled ? 'پس از جستجو' : 'نام'}
+                            value={formik.values.firstName}
+                            onChange={formik.handleChange}
+                            readOnly={isCustomerLocked}
+                            disabled={isNameDisabled}
+                            className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
+                            error_text={
+                                formik.touched.firstName && formik.errors.firstName
+                                    ? formik.errors.firstName
+                                    : ''
+                            }
+                        />
+
+                        <Input
+                            label='نام خانوادگی'
+                            name='lastName'
+                            placeholder={isNameDisabled ? 'پس از جستجو' : 'نام خانوادگی'}
+                            value={formik.values.lastName}
+                            onChange={formik.handleChange}
+                            readOnly={isCustomerLocked}
+                            disabled={isNameDisabled}
+                            className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
+                            error_text={
+                                formik.touched.lastName && formik.errors.lastName
+                                    ? formik.errors.lastName
+                                    : ''
+                            }
+                        />
+                    </div>
+
+                    <div className='mt-5 flex justify-end'>
+                        <Button
+                            type='button'
+                            className='w-fit px-6'
+                            onClick={() => setIsCustomerModalOpen(false)}
+                        >
+                            تایید
+                        </Button>
+                    </div>
+                </div>
+            </DefaulModal>
+        </>
+    )
+}
+
+export default CreateOrderCustomerSection

src/pages/orders/components/CreateOrderDeliveryModal.tsx

@@ -0,0 +1,335 @@
+import { type FC, useState } from 'react'
+import type { FormikProps } from 'formik'
+import { Edit2, Location } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import RadioGroup from '@/components/RadioGroup'
+import Textarea from '@/components/Textarea'
+import DefaulModal from '@/components/DefaulModal'
+import LocationInput from '@/pages/settings/components/LocationInput'
+import LocationPicker from '@/pages/settings/components/LocationPicker'
+import { formatPrice } from '@/helpers/func'
+import type { CreateOrderFormValues } from '../hooks/useCreateOrderForm'
+import type { RestaurantPaymentMethod, RestaurantShipmentMethod } from '../hooks/useCreateOrderForm'
+import type { UserSavedAddress } from '@/pages/customers/types/Types'
+import CreateOrderAddressSelector from './CreateOrderAddressSelector'
+
+interface CreateOrderDeliveryModalProps {
+    open: boolean
+    onClose: () => void
+    formik: FormikProps<CreateOrderFormValues>
+    deliveryMethods: RestaurantShipmentMethod[]
+    cashPaymentMethod?: RestaurantPaymentMethod
+    isCourierDelivery: boolean
+    isCarDelivery: boolean
+    isDineIn: boolean
+    customerAddresses: UserSavedAddress[]
+    selectedAddressId: string | null
+    onSelectSavedAddress: (address: UserSavedAddress) => void
+    onSelectManualAddress: () => void
+    onAddressFieldChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
+    onLocationSelect: (lat: number, lng: number) => void
+}
+
+const CreateOrderDeliveryModal: FC<CreateOrderDeliveryModalProps> = ({
+    open,
+    onClose,
+    formik,
+    deliveryMethods,
+    cashPaymentMethod,
+    isCourierDelivery,
+    isCarDelivery,
+    isDineIn,
+    customerAddresses,
+    selectedAddressId,
+    onSelectSavedAddress,
+    onSelectManualAddress,
+    onAddressFieldChange,
+    onLocationSelect,
+}) => {
+    const { t } = useTranslation('global')
+    const [isAddressModalOpen, setIsAddressModalOpen] = useState(false)
+    const [isLocationModalOpen, setIsLocationModalOpen] = useState(false)
+
+    const getDeliveryLabel = (method: string) => {
+        return t(`shipment.${method}`, { defaultValue: method })
+    }
+
+    const isAddressReadOnly =
+        selectedAddressId !== null && customerAddresses.length > 0
+
+    const handleMapLocationSelect = (lat: number, lng: number) => {
+        onLocationSelect(lat, lng)
+        setIsLocationModalOpen(false)
+    }
+
+    const latitude = formik.values.userAddress.latitude
+    const longitude = formik.values.userAddress.longitude
+    const hasAddress = Boolean(formik.values.userAddress.address?.trim())
+
+    const handleConfirm = () => {
+        formik.setFieldTouched('deliveryMethodId', true, false)
+        onClose()
+    }
+
+    return (
+        <>
+            <DefaulModal
+                open={open}
+                close={onClose}
+                isHeader={true}
+                title_header='تحویل و پرداخت'
+                width={560}
+            >
+                <div className='p-1 max-h-[70vh] overflow-y-auto'>
+                    <div>
+                        <div className='text-sm mb-3'>روش تحویل</div>
+                        <RadioGroup
+                            items={deliveryMethods.map((method) => ({
+                                label:
+                                    method.deliveryFee > 0
+                                        ? `${getDeliveryLabel(method.method)} (${formatPrice(method.deliveryFee)})`
+                                        : getDeliveryLabel(method.method),
+                                value: method.id,
+                            }))}
+                            selected={formik.values.deliveryMethodId}
+                            onChange={(value) => {
+                                formik.setFieldValue('deliveryMethodId', value)
+                                formik.setFieldTouched('deliveryMethodId', true, false)
+                            }}
+                        />
+                        {formik.touched.deliveryMethodId && formik.errors.deliveryMethodId && (
+                            <div className='text-xs text-red-500 mt-2'>
+                                {formik.errors.deliveryMethodId}
+                            </div>
+                        )}
+                    </div>
+
+                    <div className='mt-6'>
+                        <div className='text-sm mb-3'>روش پرداخت</div>
+                        {cashPaymentMethod ? (
+                            <RadioGroup
+                                items={[
+                                    {
+                                        label: cashPaymentMethod.description
+                                            ? `پرداخت نقدی (${cashPaymentMethod.description})`
+                                            : 'پرداخت نقدی',
+                                        value: cashPaymentMethod.id,
+                                    },
+                                ]}
+                                selected={formik.values.paymentMethodId}
+                                onChange={(value) => formik.setFieldValue('paymentMethodId', value)}
+                            />
+                        ) : (
+                            <div className='text-xs text-red-500'>
+                                روش پرداخت نقدی فعال یافت نشد
+                            </div>
+                        )}
+                    </div>
+
+                    {isDineIn && (
+                        <div className='mt-6'>
+                            <Input
+                                label='شماره میز'
+                                name='tableNumber'
+                                placeholder='مثال: ۱۲'
+                                value={formik.values.tableNumber}
+                                onChange={formik.handleChange}
+                            />
+                        </div>
+                    )}
+
+                    {isCourierDelivery && (
+                        <div className='mt-6 pt-5 border-t border-border border-dashed'>
+                            <div className='text-sm mb-3'>آدرس تحویل</div>
+
+                            {customerAddresses.length > 0 && (
+                                <CreateOrderAddressSelector
+                                    addresses={customerAddresses}
+                                    selectedAddressId={selectedAddressId}
+                                    onSelectAddress={onSelectSavedAddress}
+                                    onSelectManual={onSelectManualAddress}
+                                />
+                            )}
+
+                            {hasAddress ? (
+                                <div className='flex items-start gap-2 p-3 bg-[#F8F9FC] rounded-xl'>
+                                    <Location size={16} color='#8C90A3' className='flex-shrink-0 mt-0.5' />
+                                    <div className='flex-1 min-w-0 text-xs'>
+                                        {formik.values.userAddress.address}
+                                    </div>
+                                    <button
+                                        type='button'
+                                        onClick={() => setIsAddressModalOpen(true)}
+                                        className='flex-shrink-0'
+                                    >
+                                        <Edit2 size={16} color='#000' />
+                                    </button>
+                                </div>
+                            ) : (
+                                <Button
+                                    type='button'
+                                    className='w-full'
+                                    onClick={() => setIsAddressModalOpen(true)}
+                                >
+                                    ثبت آدرس تحویل
+                                </Button>
+                            )}
+                        </div>
+                    )}
+
+                    {isCarDelivery && (
+                        <div className='mt-6 pt-5 border-t border-border border-dashed'>
+                            <div className='text-sm mb-3'>اطلاعات خودرو</div>
+                            <div className='grid grid-cols-2 gap-4'>
+                                <Input
+                                    label='مدل خودرو'
+                                    name='carAddress.carModel'
+                                    value={formik.values.carAddress.carModel}
+                                    onChange={formik.handleChange}
+                                />
+                                <Input
+                                    label='رنگ خودرو'
+                                    name='carAddress.carColor'
+                                    value={formik.values.carAddress.carColor}
+                                    onChange={formik.handleChange}
+                                />
+                                <Input
+                                    label='پلاک'
+                                    name='carAddress.plateNumber'
+                                    value={formik.values.carAddress.plateNumber}
+                                    onChange={formik.handleChange}
+                                />
+                                <Input
+                                    label='شماره تماس'
+                                    name='carAddress.phone'
+                                    value={formik.values.carAddress.phone}
+                                    onChange={formik.handleChange}
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    <div className='mt-6'>
+                        <Textarea
+                            label='توضیحات سفارش'
+                            name='description'
+                            placeholder='توضیحات اضافی...'
+                            value={formik.values.description}
+                            onChange={formik.handleChange}
+                            isNotRequired
+                        />
+                    </div>
+
+                    <div className='mt-6 flex justify-end gap-3 sticky bottom-0 bg-white pt-3'>
+                        <button
+                            type='button'
+                            onClick={onClose}
+                            className='h-10 px-6 rounded-xl border border-border text-sm hover:bg-[#F8F9FC] transition-colors'
+                        >
+                            انصراف
+                        </button>
+                        <Button type='button' className='w-fit px-6' onClick={handleConfirm}>
+                            تأیید
+                        </Button>
+                    </div>
+                </div>
+            </DefaulModal>
+
+            <DefaulModal
+                open={isAddressModalOpen}
+                close={() => setIsAddressModalOpen(false)}
+                isHeader={true}
+                title_header='آدرس تحویل'
+                width={600}
+            >
+                <div className='p-2'>
+                    <CreateOrderAddressSelector
+                        addresses={customerAddresses}
+                        selectedAddressId={selectedAddressId}
+                        onSelectAddress={onSelectSavedAddress}
+                        onSelectManual={onSelectManualAddress}
+                    />
+
+                    <div className='grid grid-cols-2 gap-3 mt-4'>
+                        <Input
+                            label='عنوان آدرس'
+                            name='userAddress.title'
+                            placeholder='مثال: منزل'
+                            value={formik.values.userAddress.title}
+                            onChange={onAddressFieldChange}
+                            readOnly={isAddressReadOnly}
+                        />
+                        <Input
+                            label='شماره تماس'
+                            name='userAddress.phone'
+                            value={formik.values.userAddress.phone}
+                            onChange={onAddressFieldChange}
+                            readOnly={isAddressReadOnly}
+                        />
+                        <Input
+                            label='کد پستی'
+                            name='userAddress.postalCode'
+                            value={formik.values.userAddress.postalCode}
+                            onChange={onAddressFieldChange}
+                            readOnly={isAddressReadOnly}
+                            isNotRequired
+                        />
+                    </div>
+
+                    <div className={isAddressReadOnly ? 'pointer-events-none opacity-60' : ''}>
+                        <LocationInput
+                            label='موقعیت روی نقشه'
+                            latitude={latitude || undefined}
+                            longitude={longitude || undefined}
+                            onClick={() => setIsLocationModalOpen(true)}
+                        />
+                    </div>
+
+                    <div className='mt-4'>
+                        <Textarea
+                            label='آدرس کامل'
+                            name='userAddress.address'
+                            value={formik.values.userAddress.address}
+                            onChange={onAddressFieldChange}
+                            readOnly={isAddressReadOnly}
+                        />
+                    </div>
+
+                    <div className='mt-4 flex justify-end'>
+                        <Button
+                            type='button'
+                            className='w-fit px-6'
+                            onClick={() => setIsAddressModalOpen(false)}
+                        >
+                            تأیید
+                        </Button>
+                    </div>
+                </div>
+            </DefaulModal>
+
+            <DefaulModal
+                open={isLocationModalOpen}
+                close={() => setIsLocationModalOpen(false)}
+                isHeader={true}
+                title_header='انتخاب موقعیت روی نقشه'
+                width={800}
+            >
+                <div className='p-4'>
+                    <LocationPicker
+                        initialPosition={
+                            latitude && longitude ? [latitude, longitude] : undefined
+                        }
+                        onLocationSelect={handleMapLocationSelect}
+                    />
+                    <div className='mt-4 text-xs text-gray-600 text-center'>
+                        روی نقشه کلیک کنید تا موقعیت را انتخاب کنید
+                    </div>
+                </div>
+            </DefaulModal>
+        </>
+    )
+}
+
+export default CreateOrderDeliveryModal

src/pages/orders/components/CreateOrderItemsSection.tsx

@@ -0,0 +1,151 @@
+import { type FC, useMemo, useState } from 'react'
+import type { FormikProps } from 'formik'
+import { Add } from 'iconsax-react'
+import Input from '@/components/Input'
+import type { Food } from '@/pages/food/types/Types'
+import { formatPrice } from '@/helpers/func'
+import { getFoodUnitPrice } from '../hooks/useCreateOrderForm'
+import type { CreateOrderFormValues } from '../hooks/useCreateOrderForm'
+
+interface CreateOrderItemsSectionProps {
+    formik: FormikProps<CreateOrderFormValues>
+    foods: Food[]
+    onAddFood: (foodId: string) => void
+}
+
+const CreateOrderItemsSection: FC<CreateOrderItemsSectionProps> = ({
+    formik,
+    foods,
+    onAddFood,
+}) => {
+    const [search, setSearch] = useState('')
+    const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null)
+
+    const categories = useMemo(() => {
+        const categoryMap = new Map<string, string>()
+        foods.forEach((food) => {
+            if (food.category?.id) {
+                categoryMap.set(food.category.id, food.category.title)
+            }
+        })
+        return Array.from(categoryMap.entries())
+            .map(([id, title]) => ({ id, title }))
+            .sort((a, b) => a.title.localeCompare(b.title, 'fa'))
+    }, [foods])
+
+    const filteredFoods = useMemo(() => {
+        let result = foods
+        if (selectedCategoryId) {
+            result = result.filter((food) => food.category?.id === selectedCategoryId)
+        }
+        const query = search.trim().toLowerCase()
+        if (query) {
+            result = result.filter((food) => food.title.toLowerCase().includes(query))
+        }
+        return result
+    }, [foods, search, selectedCategoryId])
+
+    return (
+        <div className='w-full h-full bg-white rounded-4xl p-5 flex flex-col min-h-0'>
+            <div className='text-sm font-light flex-shrink-0'>انتخاب غذا</div>
+
+            <div className='mt-3 flex-1 min-h-0 flex flex-col border border-border rounded-xl p-3'>
+                <Input
+                    variant='search'
+                    className='bg-[#EEF0F7]'
+                    placeholder='جستجوی غذا...'
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                />
+
+                {categories.length > 0 && (
+                    <div className='mt-2 flex gap-1.5 overflow-x-auto flex-shrink-0 pb-0.5'>
+                        <button
+                            type='button'
+                            onClick={() => setSelectedCategoryId(null)}
+                            className={`flex-shrink-0 px-2.5 h-7 rounded-full text-[11px] transition-colors ${
+                                selectedCategoryId === null
+                                    ? 'bg-primary text-white'
+                                    : 'bg-[#EEF0F7] text-description hover:bg-[#E4E7F0]'
+                            }`}
+                        >
+                            همه
+                        </button>
+                        {categories.map((category) => (
+                            <button
+                                key={category.id}
+                                type='button'
+                                onClick={() => setSelectedCategoryId(category.id)}
+                                className={`flex-shrink-0 px-2.5 h-7 rounded-full text-[11px] transition-colors whitespace-nowrap ${
+                                    selectedCategoryId === category.id
+                                        ? 'bg-primary text-white'
+                                        : 'bg-[#EEF0F7] text-description hover:bg-[#E4E7F0]'
+                                }`}
+                            >
+                                {category.title}
+                            </button>
+                        ))}
+                    </div>
+                )}
+
+                <div className='mt-2 flex-1 min-h-0 overflow-y-auto space-y-1'>
+                    {filteredFoods.length === 0 ? (
+                        <div className='text-center py-8 text-xs text-description'>
+                            غذایی یافت نشد
+                        </div>
+                    ) : (
+                        filteredFoods.map((food) => {
+                            const inCart = formik.values.items.some(
+                                (item) => item.foodId === food.id
+                            )
+                            const cartQty = formik.values.items.find(
+                                (item) => item.foodId === food.id
+                            )?.quantity
+
+                            return (
+                                <div
+                                    key={food.id}
+                                    className='flex items-center gap-2 p-1.5 rounded-lg hover:bg-[#F8F9FC] transition-colors'
+                                >
+                                    {food.images?.[0] ? (
+                                        <img
+                                            src={food.images[0]}
+                                            alt={food.title}
+                                            className='w-9 h-9 rounded-lg object-cover flex-shrink-0'
+                                        />
+                                    ) : (
+                                        <div className='w-9 h-9 rounded-lg bg-gray-100 flex-shrink-0' />
+                                    )}
+                                    <div className='flex-1 min-w-0'>
+                                        <div className='text-xs truncate'>{food.title}</div>
+                                        <div className='text-[11px] text-description'>
+                                            {formatPrice(getFoodUnitPrice(food))}
+                                        </div>
+                                    </div>
+                                    <button
+                                        type='button'
+                                        onClick={() => onAddFood(food.id)}
+                                        className={`flex items-center gap-1 px-2.5 h-7 rounded-lg text-[11px] transition-colors flex-shrink-0 ${
+                                            inCart
+                                                ? 'bg-primary/10 text-primary'
+                                                : 'bg-primary text-white'
+                                        }`}
+                                    >
+                                        <Add size={12} color={inCart ? '#000' : '#fff'} />
+                                        {inCart ? `×${cartQty}` : 'انتخاب'}
+                                    </button>
+                                </div>
+                            )
+                        })
+                    )}
+                </div>
+            </div>
+
+            {formik.touched.items && formik.errors.items && typeof formik.errors.items === 'string' && (
+                <div className='text-xs text-red-500 mt-2 flex-shrink-0'>{formik.errors.items}</div>
+            )}
+        </div>
+    )
+}
+
+export default CreateOrderItemsSection

src/pages/orders/components/CreateOrderSidebar.tsx

@@ -0,0 +1,421 @@
+import { formatFaNumber, formatPrice } from '@/helpers/func'
+import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
+import { DeliveryMethodEnum } from '@/pages/shipmentMethod/enum/Enum'
+import type { FormikProps } from 'formik'
+import {
+    Add,
+    ArrowLeft2,
+    Car,
+    Location,
+    Minus,
+    Moneys,
+    ShoppingCart,
+    Trash,
+    Truck,
+} from 'iconsax-react'
+import { type FC, useState } from 'react'
+import type { CreateOrderFormValues, RestaurantPaymentMethod, RestaurantShipmentMethod } from '../hooks/useCreateOrderForm'
+import type { UserSavedAddress } from '@/pages/customers/types/Types'
+import CreateOrderDeliveryModal from './CreateOrderDeliveryModal'
+
+interface OrderSummaryData {
+    lineItems: Array<{
+        foodId: string
+        title: string
+        image: string
+        quantity: number
+        unitPrice: number
+        totalPrice: number
+    } | null>
+    subTotal: number
+    deliveryFee: number
+    packingFee: number
+    discountAmount: number
+    total: number
+    totalItems: number
+}
+
+interface CreateOrderSidebarProps {
+    formik: FormikProps<CreateOrderFormValues>
+    orderSummary: OrderSummaryData
+    deliveryMethods: RestaurantShipmentMethod[]
+    cashPaymentMethod?: RestaurantPaymentMethod
+    selectedDeliveryMethod?: RestaurantShipmentMethod
+    selectedPaymentMethod?: RestaurantPaymentMethod
+    isCourierDelivery: boolean
+    isCarDelivery: boolean
+    isDineIn: boolean
+    customerAddresses: UserSavedAddress[]
+    selectedAddressId: string | null
+    onSelectSavedAddress: (address: UserSavedAddress) => void
+    onSelectManualAddress: () => void
+    onAddressFieldChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
+    onLocationSelect: (lat: number, lng: number) => void
+    onUpdateQuantity: (foodId: string, quantity: number) => void
+    onRemoveItem: (foodId: string) => void
+}
+
+const getDeliveryMethodText = (method?: string): string => {
+    const methodMap: Record<string, string> = {
+        [DeliveryMethodEnum.DineIn]: 'سرو در رستوران',
+        [DeliveryMethodEnum.CustomerPickup]: 'دریافت از محل',
+        [DeliveryMethodEnum.DeliveryCar]: 'تحویل به خودرو',
+        [DeliveryMethodEnum.DeliveryCourier]: 'بیرون‌بر',
+    }
+    return method ? methodMap[method] || method : 'انتخاب نشده'
+}
+
+const getPaymentMethodText = (method?: string): string => {
+    const methodMap: Record<string, string> = {
+        [PaymentMethodEnum.Cash]: 'پرداخت نقدی',
+        [PaymentMethodEnum.Online]: 'پرداخت آنلاین',
+        [PaymentMethodEnum.CreditCard]: 'کارت به کارت',
+        [PaymentMethodEnum.Wallet]: 'کیف پول',
+    }
+    return method ? methodMap[method] || method : 'انتخاب نشده'
+}
+
+const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
+    formik,
+    orderSummary,
+    deliveryMethods,
+    cashPaymentMethod,
+    selectedDeliveryMethod,
+    selectedPaymentMethod,
+    isCourierDelivery,
+    isCarDelivery,
+    isDineIn,
+    customerAddresses,
+    selectedAddressId,
+    onSelectSavedAddress,
+    onSelectManualAddress,
+    onAddressFieldChange,
+    onLocationSelect,
+    onUpdateQuantity,
+    onRemoveItem,
+}) => {
+    const [isDeliveryModalOpen, setIsDeliveryModalOpen] = useState(false)
+
+    const customerName = [formik.values.firstName, formik.values.lastName].filter(Boolean).join(' ')
+    const deliveryText = getDeliveryMethodText(selectedDeliveryMethod?.method)
+    const paymentText = getPaymentMethodText(selectedPaymentMethod?.method)
+
+    const deliveryFeeText =
+        selectedDeliveryMethod && selectedDeliveryMethod.deliveryFee > 0
+            ? formatPrice(selectedDeliveryMethod.deliveryFee)
+            : null
+
+    const getDeliveryExtraInfo = (): { text: string; warning?: boolean } | null => {
+        if (isCourierDelivery) {
+            const address = formik.values.userAddress.address?.trim()
+            if (!address) return { text: 'آدرس تحویل ثبت نشده', warning: true }
+            return { text: address }
+        }
+        if (isCarDelivery) {
+            const { carModel, plateNumber } = formik.values.carAddress
+            if (!carModel && !plateNumber) return { text: 'اطلاعات خودرو وارد نشده', warning: true }
+            return { text: [carModel, plateNumber].filter(Boolean).join(' · ') }
+        }
+        if (isDineIn && formik.values.tableNumber) {
+            return { text: `میز ${formik.values.tableNumber}` }
+        }
+        if (formik.values.description?.trim()) {
+            return { text: formik.values.description }
+        }
+        return null
+    }
+
+    const extraInfo = getDeliveryExtraInfo()
+    const isDeliverySelected = Boolean(selectedDeliveryMethod)
+    const isPaymentSelected = Boolean(selectedPaymentMethod)
+
+    return (
+        <>
+            <div className='bg-white rounded-4xl p-4 flex-1 min-h-0 flex flex-col h-full'>
+                <div className='flex items-center justify-between flex-shrink-0'>
+                    <div className='flex items-center gap-2 text-sm font-light'>
+                        <ShoppingCart size={18} color='#000' />
+                        خلاصه سفارش
+                    </div>
+                    {orderSummary.totalItems > 0 && (
+                        <span className='text-[11px] text-description bg-[#F8F9FC] rounded-full px-2.5 py-0.5'>
+                            {formatFaNumber(orderSummary.totalItems)} آیتم
+                        </span>
+                    )}
+                </div>
+
+                {(customerName || formik.values.userPhone) && (
+                    <div className='mt-2 p-2.5 bg-[#F8F9FC] rounded-xl flex-shrink-0'>
+                        <div className='text-[11px] font-medium truncate'>
+                            {customerName || 'مشتری'}
+                        </div>
+                        {formik.values.userPhone && (
+                            <div className='text-[10px] text-description mt-0.5'>
+                                {formik.values.userPhone}
+                            </div>
+                        )}
+                    </div>
+                )}
+
+                <button
+                    type='button'
+                    onClick={() => setIsDeliveryModalOpen(true)}
+                    className={`mt-2 w-full text-right p-2.5 rounded-xl border transition-colors flex-shrink-0 ${
+                        isDeliverySelected && isPaymentSelected
+                            ? 'border-border hover:border-primary/40 hover:bg-[#F8F9FC]'
+                            : 'border-dashed border-primary/50 bg-primary/5 hover:bg-primary/10'
+                    }`}
+                >
+                    <div className='flex items-center justify-between gap-2'>
+                        <span className='text-xs font-medium'>تحویل و پرداخت</span>
+                        <span className='text-[11px] text-primary flex items-center gap-1 flex-shrink-0'>
+                            {isDeliverySelected && isPaymentSelected ? 'ویرایش' : 'انتخاب'}
+                            <ArrowLeft2 size={12} color='#000' />
+                        </span>
+                    </div>
+
+                    {!isDeliverySelected || !isPaymentSelected ? (
+                        <p className='mt-1.5 text-[11px] text-description'>
+                            برای تعیین روش تحویل و پرداخت کلیک کنید
+                        </p>
+                    ) : null}
+
+                    <div className='mt-1.5 space-y-1.5'>
+                        <div className='flex items-center gap-2 text-xs'>
+                            <Truck size={15} color='#8C90A3' className='flex-shrink-0' />
+                            <span
+                                className={`flex-1 truncate ${
+                                    !isDeliverySelected ? 'text-description italic' : ''
+                                }`}
+                            >
+                                {deliveryText}
+                            </span>
+                            {deliveryFeeText && (
+                                <span className='text-description text-[11px] flex-shrink-0'>
+                                    {deliveryFeeText}
+                                </span>
+                            )}
+                        </div>
+                        <div className='flex items-center gap-2 text-xs'>
+                            <Moneys size={15} color='#8C90A3' className='flex-shrink-0' />
+                            <span
+                                className={`truncate ${
+                                    !isPaymentSelected ? 'text-description italic' : ''
+                                }`}
+                            >
+                                {paymentText}
+                            </span>
+                        </div>
+                        {extraInfo && (
+                            <div
+                                className={`flex items-start gap-2 text-[11px] pt-1 border-t border-border border-dashed ${
+                                    extraInfo.warning ? 'text-red-500' : 'text-description'
+                                }`}
+                            >
+                                {isCourierDelivery ? (
+                                    <Location size={14} className='flex-shrink-0 mt-0.5' color={extraInfo.warning ? '#EF4444' : '#8C90A3'} />
+                                ) : isCarDelivery ? (
+                                    <Car size={14} className='flex-shrink-0 mt-0.5' color={extraInfo.warning ? '#EF4444' : '#8C90A3'} />
+                                ) : null}
+                                <span className='line-clamp-2'>{extraInfo.text}</span>
+                            </div>
+                        )}
+                    </div>
+                </button>
+
+                <div className='mt-3 pt-2.5 border-t border-border border-dashed flex-1 min-h-0 flex flex-col'>
+                    <div className='text-xs text-description mb-1.5 flex-shrink-0'>سبد سفارش</div>
+
+                    <div className='flex-1 min-h-0 overflow-y-auto relative'>
+                        {orderSummary.lineItems.length === 0 ? (
+                            <div className='h-full flex flex-col items-center justify-center text-center py-6'>
+                                <ShoppingCart size={32} color='#D0D0D0' />
+                                <div className='text-xs text-description mt-2'>
+                                    هنوز آیتمی انتخاب نشده
+                                </div>
+                            </div>
+                        ) : (
+                            <div className='space-y-2 pb-2'>
+                                {orderSummary.lineItems.map((item) => {
+                                    if (!item) return null
+                                    return (
+                                        <div
+                                            key={item.foodId}
+                                            className='rounded-xl bg-[#F8F9FC] overflow-hidden'
+                                        >
+                                            <div className='flex items-start gap-2.5 p-2.5'>
+                                                {item.image ? (
+                                                    <img
+                                                        src={item.image}
+                                                        alt={item.title}
+                                                        className='w-11 h-11 rounded-lg object-cover flex-shrink-0'
+                                                    />
+                                                ) : (
+                                                    <div className='w-11 h-11 rounded-lg bg-gray-200 flex-shrink-0' />
+                                                )}
+
+                                                <div className='flex-1 min-w-0'>
+                                                    <div className='flex items-start gap-1.5'>
+                                                        <div className='flex-1 min-w-0 text-xs font-medium leading-5 line-clamp-2'>
+                                                            {item.title}
+                                                        </div>
+                                                        <button
+                                                            type='button'
+                                                            onClick={() => onRemoveItem(item.foodId)}
+                                                            className='flex-shrink-0 w-7 h-7 rounded-lg flex items-center justify-center hover:bg-red-50 transition-colors'
+                                                            aria-label='حذف آیتم'
+                                                        >
+                                                            <Trash size={15} color='#EF4444' />
+                                                        </button>
+                                                    </div>
+                                                    <div className='mt-1 text-[11px] text-description tabular-nums'>
+                                                        {item.quantity > 1
+                                                            ? `${formatFaNumber(item.quantity)} × ${formatPrice(item.unitPrice)}`
+                                                            : formatPrice(item.unitPrice)}
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div className='flex items-center justify-between gap-3 px-2.5 py-2 border-t border-[#ECEEF5] bg-white/60'>
+                                                <div className='flex items-center gap-0.5 rounded-lg bg-white border border-border p-0.5 flex-shrink-0'>
+                                                    <button
+                                                        type='button'
+                                                        onClick={() =>
+                                                            onUpdateQuantity(
+                                                                item.foodId,
+                                                                item.quantity - 1
+                                                            )
+                                                        }
+                                                        className='w-7 h-7 rounded-md flex items-center justify-center hover:bg-[#F8F9FC] transition-colors'
+                                                    >
+                                                        <Minus size={13} color='#000' />
+                                                    </button>
+                                                    <span className='w-6 text-center text-xs tabular-nums'>
+                                                        {formatFaNumber(item.quantity)}
+                                                    </span>
+                                                    <button
+                                                        type='button'
+                                                        onClick={() =>
+                                                            onUpdateQuantity(
+                                                                item.foodId,
+                                                                item.quantity + 1
+                                                            )
+                                                        }
+                                                        className='w-7 h-7 rounded-md flex items-center justify-center hover:bg-[#F8F9FC] transition-colors'
+                                                    >
+                                                        <Add size={13} color='#000' />
+                                                    </button>
+                                                </div>
+
+                                                <span className='text-xs font-semibold whitespace-nowrap tabular-nums flex-shrink-0'>
+                                                    {formatPrice(item.totalPrice)}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    )
+                                })}
+                            </div>
+                        )}
+                        {orderSummary.lineItems.length > 3 && (
+                            <div className='pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent' />
+                        )}
+                    </div>
+
+                    <div className='mt-2 space-y-2 text-xs pt-2.5 border-t border-border flex-shrink-0'>
+                        <div className='grid grid-cols-2 gap-2.5 mb-2'>
+                            <div>
+                                <div className='text-xs mb-1.5'>
+                                    <span className='font-medium'>هزینه بسته‌بندی</span>
+                                    <span className='text-description mr-1'>(اختیاری)</span>
+                                </div>
+                                <input
+                                    name='packingFee'
+                                    type='number'
+                                    inputMode='numeric'
+                                    min={0}
+                                    placeholder='تومان'
+                                    className='w-full h-10 rounded-xl border border-border px-3 text-sm outline-none focus:border-primary'
+                                    value={formik.values.packingFee || ''}
+                                    onChange={(e) =>
+                                        formik.setFieldValue(
+                                            'packingFee',
+                                            Math.max(Number(e.target.value) || 0, 0)
+                                        )
+                                    }
+                                />
+                            </div>
+                            <div>
+                                <div className='text-xs mb-1.5'>
+                                    <span className='font-medium'>تخفیف مبلغی</span>
+                                    <span className='text-description mr-1'>(اختیاری)</span>
+                                </div>
+                                <input
+                                    name='discountAmount'
+                                    type='number'
+                                    inputMode='numeric'
+                                    min={0}
+                                    placeholder='تومان'
+                                    className='w-full h-10 rounded-xl border border-border px-3 text-sm outline-none focus:border-primary'
+                                    value={formik.values.discountAmount || ''}
+                                    onChange={(e) =>
+                                        formik.setFieldValue(
+                                            'discountAmount',
+                                            Math.max(Number(e.target.value) || 0, 0)
+                                        )
+                                    }
+                                />
+                            </div>
+                        </div>
+                        <div className='flex justify-between'>
+                            <span className='text-description'>جمع آیتم‌ها</span>
+                            <span>{formatPrice(orderSummary.subTotal)}</span>
+                        </div>
+                        {orderSummary.deliveryFee > 0 && (
+                            <div className='flex justify-between'>
+                                <span className='text-description'>هزینه ارسال</span>
+                                <span>{formatPrice(orderSummary.deliveryFee)}</span>
+                            </div>
+                        )}
+                        {orderSummary.packingFee > 0 && (
+                            <div className='flex justify-between'>
+                                <span className='text-description'>هزینه بسته‌بندی</span>
+                                <span>{formatPrice(orderSummary.packingFee)}</span>
+                            </div>
+                        )}
+                        {orderSummary.discountAmount > 0 && (
+                            <div className='flex justify-between'>
+                                <span className='text-description'>تخفیف</span>
+                                <span className='text-green-600'>
+                                    -{formatPrice(orderSummary.discountAmount)}
+                                </span>
+                            </div>
+                        )}
+                        <div className='flex justify-between font-bold text-sm pt-2 border-t-2 border-gray-200'>
+                            <span>جمع کل</span>
+                            <span>{formatPrice(orderSummary.total)}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <CreateOrderDeliveryModal
+                open={isDeliveryModalOpen}
+                onClose={() => setIsDeliveryModalOpen(false)}
+                formik={formik}
+                deliveryMethods={deliveryMethods}
+                cashPaymentMethod={cashPaymentMethod}
+                isCourierDelivery={isCourierDelivery}
+                isCarDelivery={isCarDelivery}
+                isDineIn={isDineIn}
+                customerAddresses={customerAddresses}
+                selectedAddressId={selectedAddressId}
+                onSelectSavedAddress={onSelectSavedAddress}
+                onSelectManualAddress={onSelectManualAddress}
+                onAddressFieldChange={onAddressFieldChange}
+                onLocationSelect={onLocationSelect}
+            />
+        </>
+    )
+}
+
+export default CreateOrderSidebar

src/pages/orders/components/CustomerInfo.tsx

@@ -1,7 +1,7 @@
-import { Location, User, Call, Cake, Heart } from 'iconsax-react'
+import { Location, User, Call } from 'iconsax-react'
 import type { FC } from 'react'
 import type { Order } from '../types/Types'
-import { formatOptionalDate, formatFaNumber } from '@/helpers/func'
+import { formatFaNumber } from '@/helpers/func'
 
 interface CustomerInfoProps {
     order: Order
@@ -14,7 +14,7 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
         : '-'
 
     return (
-        <div className='w-full bg-white rounded-4xl p-8'>
+        <div className='w-full bg-white rounded-4xl p-4 sm:p-6 lg:p-8'>
             <div className='flex justify-between items-center'>
                 <div className='text-lg font-light flex items-center gap-2'>
                     <User color='#000' size={20} />
@@ -22,7 +22,7 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
                 </div>
             </div>
 
-            <div className='mt-8 flex flex-wrap gap-y-7 gap-20 text-[13px] font-light border-b border-dashed border-border pb-8'>
+            <div className='mt-6 sm:mt-8 flex flex-wrap gap-x-8 gap-y-4 sm:gap-x-12 sm:gap-y-7 text-[13px] font-light border-b border-dashed border-border pb-6 sm:pb-8'>
                 <div className='flex gap-2'>
                     <div className='text-description'>
                         شماره سفارش:
@@ -54,45 +54,6 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
                     </div>
                 </div>
  
-                {order.user?.birthDate && (
-                    <div className='flex gap-2'>
-                        <div className='text-description'>تاریخ تولد:</div>
-                        <div className='flex items-center gap-1'>
-                            <Cake size={14} />
-                            {formatOptionalDate(order.user.birthDate, {
-                                year: 'numeric',
-                                month: '2-digit',
-                                day: '2-digit'
-                            })}
-                        </div>
-                    </div>
-                )}
-
-                {order.user?.marriageDate && (
-                    <div className='flex gap-2'>
-                        <div className='text-description'>تاریخ ازدواج:</div>
-                        <div className='flex items-center gap-1'>
-                            <Heart size={14} />
-                            {formatOptionalDate(order.user.marriageDate, {
-                                year: 'numeric',
-                                month: '2-digit',
-                                day: '2-digit'
-                            })}
-                        </div>
-                    </div>
-                )}
-
-                <div className='flex gap-2'>
-                    <div className='text-description'>جنسیت:</div>
-                    <div>{order.user?.gender ? 'مرد' : 'زن'}</div>
-                </div>
-
-                <div className='flex gap-2'>
-                    <div className='text-description'>وضعیت:</div>
-                    <div className={`px-2 py-1 rounded text-xs ${order.user?.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
-                        {order.user?.isActive ? 'فعال' : 'غیرفعال'}
-                    </div>
-                </div>
 
                 {order.user?.referrer && (
                     <div className='flex gap-2'>
@@ -103,13 +64,13 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
             </div>
 
             {order.userAddress && (
-                <div className='mt-8 space-y-4 text-[13px] font-light'>
-                    <div className='flex gap-2 items-start'>
-                        <div className='text-description flex items-center gap-1'>
+                <div className='mt-6 sm:mt-8 space-y-4 text-[13px] font-light'>
+                    <div className='flex flex-col sm:flex-row gap-1 sm:gap-2 items-start'>
+                        <div className='text-description flex items-center gap-1 shrink-0'>
                             <Location size={14} />
                             آدرس کامل:
                         </div>
-                        <div className='flex-1'>{fullAddress}</div>
+                        <div className='flex-1 min-w-0 break-words'>{fullAddress}</div>
                     </div>
 
                     {order.userAddress.fullName && (

src/pages/orders/components/DailyOrderReportFiltersFields.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import type { FieldType } from '@/components/Filters';
+
+export const useDailyOrderReportFiltersFields = (): FieldType[] => {
+  return useMemo(() => [
+    {
+      type: 'datetime',
+      name: 'from',
+      placeholder: 'از تاریخ',
+    },
+    {
+      type: 'datetime',
+      name: 'to',
+      placeholder: 'تا تاریخ',
+    },
+    {
+      type: 'select',
+      name: 'sortBy',
+      placeholder: 'مرتب‌سازی',
+      defaultValue: 'date',
+      options: [
+        { label: 'تاریخ', value: 'date' },
+        { label: 'مبلغ کل', value: 'totalAmount' },
+        { label: 'تعداد سفارش', value: 'orderCount' },
+      ],
+    },
+  ], []);
+};

src/pages/orders/components/DailyOrderReportTableColumns.tsx

@@ -0,0 +1,23 @@
+import type { ColumnType } from '@/components/types/TableTypes';
+import type { DailyOrderReportItem } from '../types/Types';
+import { formatDateShort, formatFaNumber, formatPrice } from '@/helpers/func';
+
+export const getDailyOrderReportTableColumns = (): ColumnType<DailyOrderReportItem>[] => {
+  return [
+    {
+      key: 'date',
+      title: 'تاریخ',
+      render: (item: DailyOrderReportItem) => formatDateShort(item.date),
+    },
+    {
+      key: 'orderCount',
+      title: 'تعداد سفارش',
+      render: (item: DailyOrderReportItem) => formatFaNumber(item.orderCount),
+    },
+    {
+      key: 'totalAmount',
+      title: 'مبلغ کل',
+      render: (item: DailyOrderReportItem) => formatPrice(item.totalAmount),
+    },
+  ];
+};