default 1 column + header + ...

package.json

@@ -11,6 +11,7 @@
     "orval": "orval"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.6",
     "@hookform/resolvers": "^5.1.1",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-switch": "^1.2.5",
@@ -36,6 +37,7 @@
     "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.60.0",
     "react-i18next": "^15.5.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-loading-skeleton": "^3.5.0",
     "react-multi-date-picker": "^4.5.2",
     "react-quill": "^2.0.0",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@headlessui/react':
+        specifier: ^2.2.6
+        version: 2.2.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@hookform/resolvers':
         specifier: ^5.1.1
         version: 5.1.1(react-hook-form@7.60.0(react@19.1.0))
@@ -83,6 +86,9 @@ importers:
       react-i18next:
         specifier: ^15.5.1
         version: 15.5.2(i18next@25.2.1(typescript@5.7.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
+      react-infinite-scroll-component:
+        specifier: ^6.1.0
+        version: 6.1.0(react@19.1.0)
       react-loading-skeleton:
         specifier: ^3.5.0
         version: 3.5.0(react@19.1.0)
@@ -483,9 +489,37 @@ packages:
   '@exodus/schemasafe@1.3.0':
     resolution: {integrity: sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==}
 
+  '@floating-ui/core@1.7.2':
+    resolution: {integrity: sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==}
+
+  '@floating-ui/dom@1.7.2':
+    resolution: {integrity: sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==}
+
+  '@floating-ui/react-dom@2.1.4':
+    resolution: {integrity: sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/react@0.26.28':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
   '@gerrit0/mini-shiki@3.7.0':
     resolution: {integrity: sha512-7iY9wg4FWXmeoFJpUL2u+tsmh0d0jcEJHAIzVxl3TG4KL493JNnisdLAILZ77zcD+z3J0keEXZ+lFzUgzQzPDg==}
 
+  '@headlessui/react@2.2.6':
+    resolution: {integrity: sha512-gN5CT8Kf4IWwL04GQOjZ/ZnHMFoeFHZmVSFoDKeTmbtmy9oFqQqJMthdBiO3Pl5LXk2w03fGFLpQV6EW84vjjQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   '@hookform/resolvers@5.1.1':
     resolution: {integrity: sha512-J/NVING3LMAEvexJkyTLjruSm7aOFx7QX21pzkiJfMoNG0wl5aFEjLTl7ay7IQb9EWY6AkrBy7tHL2Alijpdcg==}
     peerDependencies:
@@ -739,6 +773,38 @@ packages:
       '@types/react':
         optional: true
 
+  '@react-aria/focus@3.21.0':
+    resolution: {integrity: sha512-7NEGtTPsBy52EZ/ToVKCu0HSelE3kq9qeis+2eEq90XSuJOMaDHUQrA7RC2Y89tlEwQB31bud/kKRi9Qme1dkA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/interactions@3.25.4':
+    resolution: {integrity: sha512-HBQMxgUPHrW8V63u9uGgBymkMfj6vdWbB0GgUJY49K9mBKMsypcHeWkWM6+bF7kxRO728/IK8bWDV6whDbqjHg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/ssr@3.9.10':
+    resolution: {integrity: sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/utils@3.30.0':
+    resolution: {integrity: sha512-ydA6y5G1+gbem3Va2nczj/0G0W7/jUVo/cbN10WA5IizzWIwMP5qhFr7macgbKfHMkZ+YZC3oXnt2NNre5odKw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-stately/flags@3.1.2':
+    resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
+
+  '@react-stately/utils@3.10.8':
+    resolution: {integrity: sha512-SN3/h7SzRsusVQjQ4v10LaVsDc81jyyR0DD5HnsQitm/I5WDpaSr2nRHtyloPFU48jlql1XX/S04T2DLQM7Y3g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
   '@react-three/drei@10.1.2':
     resolution: {integrity: sha512-CCcLAqZEvYiUErOcJgGzovY3RH6KgdrqD4ubeAx1nyGbSPLnKR9a8ynYbPdtZhIyiWqGc07z+RYQzpaOfN4ZIA==}
     peerDependencies:
@@ -775,6 +841,11 @@ packages:
       react-native:
         optional: true
 
+  '@react-types/shared@3.31.0':
+    resolution: {integrity: sha512-ua5U6V66gDcbLZe4P2QeyNgPp4YWD1ymGA6j3n+s8CGExtrCPe64v+g4mvpT8Bnb985R96e4zFT61+m0YCwqMg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
   '@rolldown/pluginutils@1.0.0-beta.9':
     resolution: {integrity: sha512-e9MeMtVWo186sgvFFJOPGy7/d2j2mZhLJIdVW0C/xDluuOvymEATqz6zKsP0ZmXGzQtqlyjz5sC1sYQUoJG98w==}
 
@@ -969,6 +1040,9 @@ packages:
     resolution: {integrity: sha512-JZlVFE6/dYpP9tQmV0/ADfn32L9uFarHWxfcRhReKUnljz1ZiUM5zpX+PH8h5CJs6lao3TuFqnPm9IJJCEkE2w==}
     engines: {node: '>=10.8'}
 
+  '@swc/helpers@0.5.17':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+
   '@tailwindcss/node@4.1.7':
     resolution: {integrity: sha512-9rsOpdY9idRI2NH6CL4wORFY0+Q6fnx9XP9Ju+iq/0wJwGD5IByIgFmwVbyy4ymuyprj8Qh4ErxMKTUL4uNh3g==}
 
@@ -1067,6 +1141,15 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
+  '@tanstack/react-virtual@3.13.12':
+    resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.13.12':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
   '@tweenjs/tween.js@23.1.3':
     resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
 
@@ -2538,6 +2621,11 @@ packages:
       typescript:
         optional: true
 
+  react-infinite-scroll-component@6.1.0:
+    resolution: {integrity: sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==}
+    peerDependencies:
+      react: '>=16.0.0'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -2814,6 +2902,9 @@ packages:
     resolution: {integrity: sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==}
     engines: {node: '>= 4.7.0'}
 
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
   tailwind-merge@3.3.0:
     resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
 
@@ -2844,6 +2935,10 @@ packages:
   three@0.177.0:
     resolution: {integrity: sha512-EiXv5/qWAaGI+Vz2A+JfavwYCMdGjxVsrn3oBwllUoqYeaBO75J63ZfyaQKoiLrqNHoTlUc6PFgMXnS0kI45zg==}
 
+  throttle-debounce@2.3.0:
+    resolution: {integrity: sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==}
+    engines: {node: '>=8'}
+
   tiny-case@1.0.3:
     resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==}
 
@@ -3435,6 +3530,31 @@ snapshots:
 
   '@exodus/schemasafe@1.3.0': {}
 
+  '@floating-ui/core@1.7.2':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.2':
+    dependencies:
+      '@floating-ui/core': 1.7.2
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.2
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@floating-ui/react@0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@floating-ui/utils': 0.2.10
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      tabbable: 6.2.0
+
+  '@floating-ui/utils@0.2.10': {}
+
   '@gerrit0/mini-shiki@3.7.0':
     dependencies:
       '@shikijs/engine-oniguruma': 3.7.0
@@ -3443,6 +3563,16 @@ snapshots:
       '@shikijs/types': 3.7.0
       '@shikijs/vscode-textmate': 10.0.2
 
+  '@headlessui/react@2.2.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react': 0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/focus': 3.21.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/interactions': 3.25.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@tanstack/react-virtual': 3.13.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      use-sync-external-store: 1.5.0(react@19.1.0)
+
   '@hookform/resolvers@5.1.1(react-hook-form@7.60.0(react@19.1.0))':
     dependencies:
       '@standard-schema/utils': 0.3.0
@@ -3743,6 +3873,51 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.6
 
+  '@react-aria/focus@3.21.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@react-aria/interactions': 3.25.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/utils': 3.30.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@react-types/shared': 3.31.0(react@19.1.0)
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@react-aria/interactions@3.25.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.10(react@19.1.0)
+      '@react-aria/utils': 3.30.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@react-stately/flags': 3.1.2
+      '@react-types/shared': 3.31.0(react@19.1.0)
+      '@swc/helpers': 0.5.17
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@react-aria/ssr@3.9.10(react@19.1.0)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.1.0
+
+  '@react-aria/utils@3.30.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.10(react@19.1.0)
+      '@react-stately/flags': 3.1.2
+      '@react-stately/utils': 3.10.8(react@19.1.0)
+      '@react-types/shared': 3.31.0(react@19.1.0)
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@react-stately/flags@3.1.2':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@react-stately/utils@3.10.8(react@19.1.0)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.1.0
+
   '@react-three/drei@10.1.2(@react-three/fiber@9.1.2(@types/react@19.1.6)(immer@9.0.21)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(three@0.177.0))(@types/react@19.1.6)(@types/three@0.177.0)(immer@9.0.21)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(three@0.177.0)':
     dependencies:
       '@babel/runtime': 7.27.3
@@ -3798,6 +3973,10 @@ snapshots:
       - '@types/react'
       - immer
 
+  '@react-types/shared@3.31.0(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+
   '@rolldown/pluginutils@1.0.0-beta.9': {}
 
   '@rollup/rollup-android-arm-eabi@4.41.1':
@@ -4045,6 +4224,10 @@ snapshots:
       '@stoplight/yaml-ast-parser': 0.0.50
       tslib: 2.8.1
 
+  '@swc/helpers@0.5.17':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/node@4.1.7':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -4123,6 +4306,14 @@ snapshots:
       '@tanstack/query-core': 5.81.5
       react: 19.1.0
 
+  '@tanstack/react-virtual@3.13.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@tanstack/virtual-core@3.13.12': {}
+
   '@tweenjs/tween.js@23.1.3': {}
 
   '@types/babel__core@7.20.5':
@@ -5686,6 +5877,11 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       typescript: 5.7.3
 
+  react-infinite-scroll-component@6.1.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      throttle-debounce: 2.3.0
+
   react-is@16.13.1: {}
 
   react-loading-skeleton@3.5.0(react@19.1.0):
@@ -6011,6 +6207,8 @@ snapshots:
 
   swiper@11.2.8: {}
 
+  tabbable@6.2.0: {}
+
   tailwind-merge@3.3.0: {}
 
   tailwindcss@4.1.7: {}
@@ -6046,6 +6244,8 @@ snapshots:
 
   three@0.177.0: {}
 
+  throttle-debounce@2.3.0: {}
+
   tiny-case@1.0.3: {}
 
   tinyglobby@0.2.14:

src/components/StatusCircle.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+type Props = {
+    color: string
+}
+
+const StatusCircle: FC<Props> = (props: Props) => {
+    return (
+        <div style={{ background: props.color }} className='size-1.5 rounded-full'>
+
+        </div>
+    )
+}
+
+export default StatusCircle

src/hooks/useOutSideClick.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+export const useOutsideClick = (callback: () => void) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener('mouseup', handleClickOutside);
+    document.addEventListener('touchend', handleClickOutside);
+
+
+    return () => {
+      document.removeEventListener('mouseup', handleClickOutside);
+      document.removeEventListener('touchend', handleClickOutside);
+    };
+  }, [callback]);
+
+  return ref;
+};

src/langs/fa.json

@@ -71,9 +71,13 @@
     "unread": "خوانده نشده",
     "search": "جستجو"
   },
+  "notif": {
+    "natification": "اعلان ها",
+    "all_read": "همه خوانده شده"
+  },
   "setting": {
     "title": "تنظیمات",
-    "personality": "قالب",
+    "personality": "قالب ها",
     "mail_server": "تنظیمات میل سرور",
     "domain": "تنظیمات دامنه",
     "address": "نشانی ها",
@@ -81,6 +85,7 @@
     "background": "رنگ زمینه",
     "upload_background": "تصویر پس زمینه مورد نظر را آپلود کنید",
     "size": "سایز",
+    "position": "موقعیت",
     "horizontal_position": "موقعیت افقی",
     "vertical_position": "موقعیت عمودی",
     "text": "متن",
@@ -120,7 +125,7 @@
     "email": "ایمیل",
     "marketing": "بازاریابی",
     "actions": "عملیات",
-    "delete": "حذف کردن ایمیل",
+    "delete_email": "حذف کردن ایمیل",
     "active": "فعال",
     "inactive": "غیرفعال",
     "add_address": "اضافه کردن نشانی",

src/pages/notification/Notification.tsx

@@ -0,0 +1,172 @@
+import { CloseCircle, Notification } from 'iconsax-react';
+import { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { clx } from '../../helpers/utils';
+import StatusCircle from '../../components/StatusCircle';
+import { useOutsideClick } from '../../hooks/useOutSideClick';
+import { useGetNotification, useReadAll } from './hooks/useNotificationData';
+import { NotificationItemType, NotificationTypeEnum } from './types/NotificationTypes';
+import { timeAgo } from '../../config/func';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import MoonLoader from "react-spinners/MoonLoader"
+import Button from '../../components/Button';
+import { toast } from '../../components/Toast';
+// import { useNavigate } from 'react-router-dom';
+import { ErrorType } from '../../helpers/types';
+const Notifications: FC = () => {
+    // const navigate = useNavigate()
+    const { t } = useTranslation();
+    const ref = useOutsideClick(() => setShowModal(false));
+    const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
+    const [showModal, setShowModal] = useState<boolean>(false);
+    const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
+    const readAll = useReadAll()
+    const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
+
+    const handleAllRead = () => {
+        readAll.mutate(undefined, {
+            onSuccess: () => {
+                refetch()
+                toast(t('success'), 'success')
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message[0], 'error')
+            }
+        })
+    }
+
+    const handleRedirect = (type: NotificationTypeEnum) => {
+        switch (type) {
+            case NotificationTypeEnum.USER_LOGIN:
+                break;
+            // case NotificationTypeEnum.ANNOUNCEMENT:
+            //     navigate(Pages.announcement.list)
+            //     break;
+            // case NotificationTypeEnum.WALLET_CHARGE:
+            //     navigate(Pages.transactions)
+            //     break;
+            // case NotificationTypeEnum.WALLET_DEDUCTION:
+            //     navigate(Pages.transactions)
+            //     break;
+            // case NotificationTypeEnum.BILL_INVOICE_REMINDER:
+            //     navigate(Pages.receipts.index)
+            //     break;
+            // case NotificationTypeEnum.BILL_INVOICE:
+            //     navigate(Pages.receipts.index)
+            //     break;
+            // case NotificationTypeEnum.CREATE_INVOICE:
+            //     navigate(Pages.receipts.index)
+            //     break;
+            // case NotificationTypeEnum.CREATE_SERVICE:
+            //     navigate(Pages.services.other)
+            //     break;
+            // case NotificationTypeEnum.UNBLOCK_SERVICE:
+            //     navigate(Pages.services.other)
+            //     break;
+            // case NotificationTypeEnum.BLOCK_SERVICE:
+            //     navigate(Pages.services.other)
+            //     break;
+            // case NotificationTypeEnum.ANSWER_TICKET:
+            //     navigate(Pages.ticket.list)
+            //     break;
+            // case NotificationTypeEnum.CREATE_TICKET:
+            //     navigate(Pages.ticket.list)
+            //     break;
+            default:
+                break
+        }
+        setShowModal(false)
+    }
+
+    return (
+        <div ref={ref}>
+            <div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
+                <Notification size={18} color="black" />
+                <div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex pt-0.5 pl-[1px] justify-center items-center">
+                    {data?.pages[0]?.data?.notificationCount}
+                </div>
+            </div>
+
+            {showModal && (
+                <div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
+                    <div className="flex justify-between items-center">
+                        <div>{t('notif.natification')}</div>
+                        <div className="size-7 rounded-full bg-white/30 flex justify-center items-center">
+                            <CloseCircle size={20} color="black" onClick={() => setShowModal(false)} />
+                        </div>
+                    </div>
+
+
+
+                    <div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
+                        <div
+                            onClick={() => setActiveTab('unread')}
+                            className={clx(
+                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
+                                activeTab === 'unread' ? 'bg-white/70 text-black' : ''
+                            )}
+                        >
+                            خوانده نشده
+                        </div>
+                        <div
+                            onClick={() => setActiveTab('read')}
+                            className={clx(
+                                'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
+                                activeTab === 'read' ? 'bg-white/70 text-black' : ''
+                            )}
+                        >
+                            خوانده شده
+                        </div>
+                    </div>
+
+                    <div className='flex mt-4 justify-end'>
+                        <Button
+                            loading={readAll.isPending}
+                            onClick={handleAllRead}
+                            className={clx(
+                                'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
+                            )}
+                        >
+                            {t('notif.all_read')}
+                        </Button>
+                    </div>
+
+                    <div className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
+                        <InfiniteScroll
+                            dataLength={posts.length}
+                            next={fetchNextPage}
+                            hasMore={hasNextPage}
+                            loader={<div className='flex justify-center'><MoonLoader color="black" size={20} /></div>}
+                            scrollableTarget="notificationsContainer"
+                        >
+                            {
+                                posts.map((item: NotificationItemType) => (
+                                    <div onClick={() => handleRedirect(item.type)} className="bg-white cursor-pointer h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
+                                        {
+                                            !item.isRead &&
+                                            <div className="mt-1">
+                                                <StatusCircle color="#00BA4B" />
+                                            </div>
+                                        }
+                                        <div>
+                                            <div className="truncate max-w-[200px]">{item.message}</div>
+                                            <div className="mt-2 flex gap-2 text-[10px] text-description">
+                                                <div>{timeAgo(item.createdAt)}</div>
+                                                <div className="flex gap-1 items-center">
+                                                    <StatusCircle color="#8C90A3" />
+                                                    <div>{item.title}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            }
+                        </InfiniteScroll>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Notifications;

src/pages/notification/hooks/useNotificationData.ts

@@ -0,0 +1,22 @@
+import * as api from "../service/NotificationService";
+import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
+
+export const useGetNotification = (status: "all" | "read" | "unread") => {
+  return useInfiniteQuery({
+    queryKey: ["notifications", status],
+    queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam, status), // فراخوانی API برای گرفتن داده‌ها
+    initialPageParam: 1, // صفحه اول به طور پیشفرض
+    getNextPageParam: (lastPage) => {
+      const currentPage = lastPage.data?.pager.page;
+      const totalPages = lastPage.data?.pager.totalPages;
+
+      return currentPage < totalPages ? currentPage + 1 : undefined;
+    },
+  });
+};
+
+export const useReadAll = () => {
+  return useMutation({
+    mutationFn: (_) => api.readAll(),
+  });
+};

src/pages/notification/service/NotificationService.ts

@@ -0,0 +1,18 @@
+import axios from "../../../config/axiosDanak";
+
+export const getNotifications = async (
+  page: number,
+  status: "all" | "read" | "unread"
+) => {
+  let query = ``;
+  if (status !== "all") {
+    query = `&isRead=${status === "read" ? 1 : 0}`;
+  }
+  const { data } = await axios.get(`/notifications?page=${page}${query}`);
+  return data;
+};
+
+export const readAll = async () => {
+  const { data } = await axios.patch(`/notifications/read-all`);
+  return data;
+};

src/pages/notification/types/NotificationTypes.ts

@@ -0,0 +1,31 @@
+export type NotificationItemType = {
+  id: string;
+  title: string;
+  message: string;
+  createdAt: string;
+  isRead: boolean;
+  type: NotificationTypeEnum;
+};
+
+export enum NotificationTypeEnum {
+  USER_LOGIN = "USER_LOGIN",
+  ANNOUNCEMENT = "ANNOUNCEMENT",
+
+  // Finance category
+  WALLET_CHARGE = "WALLET_CHARGE",
+  WALLET_DEDUCTION = "WALLET_DEDUCTION",
+
+  //Invoice
+  BILL_INVOICE_REMINDER = "BILL_INVOICE_REMINDER",
+  BILL_INVOICE = "BILL_INVOICE",
+  CREATE_INVOICE = "CREATE_INVOICE",
+
+  // Service category
+  CREATE_SERVICE = "CREATE_SERVICE",
+  UNBLOCK_SERVICE = "UNBLOCK_SERVICE",
+  BLOCK_SERVICE = "BLOCK_SERVICE",
+
+  // Support category
+  ANSWER_TICKET = "ANSWER_TICKET",
+  CREATE_TICKET = "CREATE_TICKET",
+}

src/pages/profile/hooks/useProfileData.tsx

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import * as api from '../service/ProfileService'
+
+export const useGetProfile = () => {
+    return useQuery({
+        queryKey: ["profile"],
+        queryFn: () => api.getProfile(),
+    });
+};

src/pages/profile/service/ProfileService.ts

@@ -0,0 +1,6 @@
+import axios from "../../../config/axiosDanak";
+
+export const getProfile = async () => {
+  const { data } = await axios.get(`/users/me`);
+  return data;
+};

src/pages/setting/Setting.tsx

@@ -158,7 +158,7 @@ const Setting: FC = () => {
 
     return (
         <div className='mt-2 md:mt-4 px-2 md:px-0'>
-            <div className='flex justify-between items-center'>
+            <div className='flex flex-col md:flex-row justify-between md:items-center'>
                 <h1 className='text-lg mb-4 md:mb-0'>{t('setting.title')}</h1>
                 {
                     activeTab === SettingTabEnum.SETTING_PERSONALITY &&

src/pages/setting/personality/SideBar.tsx

@@ -9,13 +9,13 @@ import ImageSideBar from './components/ImageSideBar'
 import SocialSidebar from './components/SocialSidebar'
 import { clx } from '@/helpers/utils'
 import { usePersonalityStore } from './store/Store'
-import { ElementType } from './types/Types'
+import { ElementType, SectionName } from './types/Types'
 
 const PersonalitySidebar: FC = () => {
 
     const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
     const sidebarRef = useRef<HTMLDivElement>(null)
-    const { selectedElement } = usePersonalityStore()
+    const { selectedElement, activeSection } = usePersonalityStore()
 
     // Auto-switch to relevant tab when element is selected
     useEffect(() => {
@@ -39,6 +39,11 @@ const PersonalitySidebar: FC = () => {
         }
     }, [selectedElement])
 
+    // وقتی بین بخش‌ها (header, content, footer) جابجا می‌شود، تب را به تنظیمات تغییر بده
+    useEffect(() => {
+        setActive(SideBarTab.SETTING)
+    }, [activeSection])
+
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             // فقط در موبایل (عرض کمتر از 1280px) کار کند
@@ -88,34 +93,38 @@ const PersonalitySidebar: FC = () => {
                         onClick={() => setActive(SideBarTab.SETTING)}
                         className='cursor-pointer'
                     />
-                    <Text
+                    {
-                        size={22}
+                        activeSection !== SectionName.CONTENT && <>
-                        color={'black'}
+                            <Text
-                        variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'}
+                                size={22}
-                        onClick={() => setActive(SideBarTab.TEXT)}
+                                color={'black'}
-                        className='cursor-pointer'
+                                variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'}
-                    />
+                                onClick={() => setActive(SideBarTab.TEXT)}
-                    <LinkSquare
+                                className='cursor-pointer'
-                        size={22}
+                            />
-                        color={'black'}
+                            <LinkSquare
-                        variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'}
+                                size={22}
-                        onClick={() => setActive(SideBarTab.BUTTON)}
+                                color={'black'}
-                        className='cursor-pointer'
+                                variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'}
-                    />
+                                onClick={() => setActive(SideBarTab.BUTTON)}
-                    <Gallery
+                                className='cursor-pointer'
-                        size={22}
+                            />
-                        color={'black'}
+                            <Gallery
-                        variant={SideBarTab.IMAGE === active ? 'Bold' : 'Outline'}
+                                size={22}
-                        onClick={() => setActive(SideBarTab.IMAGE)}
+                                color={'black'}
-                        className='cursor-pointer'
+                                variant={SideBarTab.IMAGE === active ? 'Bold' : 'Outline'}
-                    />
+                                onClick={() => setActive(SideBarTab.IMAGE)}
-                    <Profile2User
+                                className='cursor-pointer'
-                        size={22}
+                            />
-                        color={'black'}
+                            <Profile2User
-                        variant={SideBarTab.SOCIAL === active ? 'Bold' : 'Outline'}
+                                size={22}
-                        onClick={() => setActive(SideBarTab.SOCIAL)}
+                                color={'black'}
-                        className='cursor-pointer'
+                                variant={SideBarTab.SOCIAL === active ? 'Bold' : 'Outline'}
-                    />
+                                onClick={() => setActive(SideBarTab.SOCIAL)}
+                                className='cursor-pointer'
+                            />
+                        </>
+                    }
                 </div>
             </div>
         </div>

src/pages/setting/personality/components/ImageSideBar.tsx

@@ -1,5 +1,6 @@
 import Button from '@/components/Button'
 import Select from '@/components/Select'
+import Input from '@/components/Input'
 import UploadBoxDraggble from '@/components/UploadBoxDraggble'
 import { Add, AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, AlignVertically, Edit, Trash } from 'iconsax-react'
 import { FC, useState, useEffect } from 'react'
@@ -26,6 +27,8 @@ const ImageSideBar: FC = () => {
     const [imageSize, setImageSize] = useState<ImageSize>(ImageSize.COVER)
     const [horizontalAlignment, setHorizontalAlignment] = useState<HorizontalAlignment>(HorizontalAlignment.CENTER)
     const [verticalAlignment, setVerticalAlignment] = useState<VerticalAlignment>(VerticalAlignment.MIDDLE)
+    const [imageWidth, setImageWidth] = useState<string>('100%')
+    const [imageHeight, setImageHeight] = useState<string>('auto')
     const [isLoading, setIsLoading] = useState<boolean>(false)
     const [isReset, setIsReset] = useState<boolean>(false)
     const [isUploading, setIsUploading] = useState<boolean>(false)
@@ -59,6 +62,8 @@ const ImageSideBar: FC = () => {
                     setImageSize(image.size);
                     setHorizontalAlignment(image.alignment || HorizontalAlignment.CENTER);
                     setVerticalAlignment(image.verticalAlignment || VerticalAlignment.MIDDLE);
+                    setImageWidth(image.width || '100%');
+                    setImageHeight(image.height || 'auto');
                 } else {
                     console.error('Image element not found');
                 }
@@ -71,6 +76,8 @@ const ImageSideBar: FC = () => {
             setImageSize(ImageSize.COVER)
             setHorizontalAlignment(HorizontalAlignment.CENTER)
             setVerticalAlignment(VerticalAlignment.MIDDLE)
+            setImageWidth('100%')
+            setImageHeight('auto')
         }
     }, [selectedElement, isEditMode, data]);
 
@@ -138,6 +145,8 @@ const ImageSideBar: FC = () => {
                 size: imageSize,
                 alignment: horizontalAlignment,
                 verticalAlignment,
+                width: imageWidth,
+                height: imageHeight,
             })
 
             // Reset form after adding
@@ -145,6 +154,8 @@ const ImageSideBar: FC = () => {
             setImageSize(ImageSize.COVER)
             setHorizontalAlignment(HorizontalAlignment.CENTER)
             setVerticalAlignment(VerticalAlignment.MIDDLE)
+            setImageWidth('100%')
+            setImageHeight('auto')
             setIsReset(true)
             setTimeout(() => {
                 setIsReset(false)
@@ -171,6 +182,8 @@ const ImageSideBar: FC = () => {
                         size: imageSize,
                         alignment: horizontalAlignment,
                         verticalAlignment,
+                        width: imageWidth,
+                        height: imageHeight,
                     }
                 );
 
@@ -239,6 +252,73 @@ const ImageSideBar: FC = () => {
                 />
             </div>
 
+            <div className='mt-5'>
+                <div className='text-sm mb-3'>اندازه سریع</div>
+                <div className='flex gap-2 flex-wrap'>
+                    <button
+                        type='button'
+                        onClick={() => { setImageWidth('100%'); setImageHeight('auto'); }}
+                        className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
+                        disabled={isUploading}
+                    >
+                        تمام عرض
+                    </button>
+                    <button
+                        type='button'
+                        onClick={() => { setImageWidth('50%'); setImageHeight('auto'); }}
+                        className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
+                        disabled={isUploading}
+                    >
+                        نصف عرض
+                    </button>
+                    <button
+                        type='button'
+                        onClick={() => { setImageWidth('200px'); setImageHeight('150px'); }}
+                        className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
+                        disabled={isUploading}
+                    >
+                        کوچک
+                    </button>
+                    <button
+                        type='button'
+                        onClick={() => { setImageWidth('300px'); setImageHeight('200px'); }}
+                        className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
+                        disabled={isUploading}
+                    >
+                        متوسط
+                    </button>
+                    <button
+                        type='button'
+                        onClick={() => { setImageWidth('400px'); setImageHeight('300px'); }}
+                        className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
+                        disabled={isUploading}
+                    >
+                        بزرگ
+                    </button>
+                </div>
+            </div>
+
+            <div className='mt-5 grid grid-cols-2 gap-4'>
+                <div>
+                    <Input
+                        label='عرض (Width)'
+                        value={imageWidth}
+                        onChange={(e) => setImageWidth(e.target.value)}
+                        placeholder='مثال: 100%, 200px'
+                        disabled={isUploading}
+                    />
+                </div>
+                <div>
+                    <Input
+                        label='ارتفاع (Height)'
+                        value={imageHeight}
+                        onChange={(e) => setImageHeight(e.target.value)}
+                        placeholder='مثال: auto, 150px'
+                        disabled={isUploading}
+                    />
+                </div>
+            </div>
+
             <div className='mt-5 flex justify-between'>
                 <div>
                     <div className='text-sm'>
@@ -292,7 +372,7 @@ const ImageSideBar: FC = () => {
                     <div className='space-y-3'>
                         <Button
                             onClick={handleUpdateImage}
-                            className='bg-[#0038FF] text-white w-full'
+                            className='w-full'
                             disabled={!imageSrc || isUploading}
                             loading={isLoading || isUploading}
                         >

src/pages/setting/personality/components/SettingSideBar.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import UploadBoxDraggble from '@/components/UploadBoxDraggble';
 import ColorPicker from '@/components/ColorPicker';
 import { usePersonalityStore } from '../store/Store';
-import { SectionItemType, BackgroundSize, SectionName } from '../types/Types';
+import { SectionItemType, BackgroundSize, BackgroundPosition, SectionName } from '../types/Types';
 import Select from '@/components/Select';
 import { useSingleUpload } from '../hooks/usePersonalityData';
 import { toast } from '@/components/Toast';
@@ -13,6 +13,7 @@ const SettingSideBar: FC = () => {
     const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex } = usePersonalityStore()
     const [color, setColor] = useState("#aabbcc");
     const [backgroundSize, setBackgroundSize] = useState<BackgroundSize>(BackgroundSize.COVER)
+    const [backgroundPosition, setBackgroundPosition] = useState<BackgroundPosition>(BackgroundPosition.CENTER)
     const [isUploading, setIsUploading] = useState<boolean>(false)
 
     const { mutateAsync: singleUpload } = useSingleUpload()
@@ -32,19 +33,31 @@ const SettingSideBar: FC = () => {
         return BackgroundSize.COVER
     }
 
+    // تشخیص موقعیت background بر اساس style موجود
+    const getCurrentBackgroundPosition = (style?: SectionItemType['style']) => {
+        if (!style?.backgroundPosition) return BackgroundPosition.CENTER
+        return Object.values(BackgroundPosition).find(pos => pos === style.backgroundPosition) || BackgroundPosition.CENTER
+    }
+
     // به‌روزرسانی state وقتی activeSection یا activeItem تغییر می‌کند
     useEffect(() => {
         if (activeSection && data[activeSection as keyof typeof data]) {
             const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex]
             if (currentItem?.style) {
                 const currentType = getCurrentBackgroundSizeType(currentItem.style)
+                const currentPosition = getCurrentBackgroundPosition(currentItem.style)
                 setBackgroundSize(currentType)
+                setBackgroundPosition(currentPosition)
             }
         }
     }, [activeSection, activeItemIndex, data])
 
     const handleColumnClick = (columns: number) => {
         if (activeSection) {
+            if (activeSection === SectionName.CONTENT && columns > 1) {
+                toast('این بخش فقط می تواند یک ستون داشته باشد', 'error')
+                return
+            }
             setColumnsCount(activeSection as SectionName, columns);
         }
     }
@@ -70,7 +83,7 @@ const SettingSideBar: FC = () => {
                             ...currentItem?.style,
                             backgroundSize: getBackgroundSize(backgroundSize),
                             backgroundRepeat: getBackgroundRepeat(backgroundSize),
-                            backgroundPosition: 'center center'
+                            backgroundPosition: backgroundPosition
                         }
                     })
                     toast('تصویر پس‌زمینه با موفقیت آپلود شد', 'success')
@@ -89,7 +102,7 @@ const SettingSideBar: FC = () => {
                         ...currentItem?.style,
                         backgroundSize: getBackgroundSize(backgroundSize),
                         backgroundRepeat: getBackgroundRepeat(backgroundSize),
-                        backgroundPosition: 'center center'
+                        backgroundPosition: backgroundPosition
                     }
                 })
             } finally {
@@ -123,9 +136,21 @@ const SettingSideBar: FC = () => {
     }
 
     const sizeOptions = [
-        { label: 'کاور - تمام فضا را پوشش دهد (Cover)', value: BackgroundSize.COVER },
+        { label: 'کاور', value: BackgroundSize.COVER },
-        { label: 'در مقیاس - در فضا جا شود (Contain)', value: BackgroundSize.CONTAIN },
+        { label: 'در مقیاس', value: BackgroundSize.CONTAIN },
-        { label: 'گرد - عکس به صورت گرد تکرار شود (Round)', value: BackgroundSize.ROUND }
+        { label: 'تکرار گرد', value: BackgroundSize.ROUND }
+    ]
+
+    const positionOptions = [
+        { label: 'وسط', value: BackgroundPosition.CENTER },
+        { label: 'بالا چپ', value: BackgroundPosition.TOP_LEFT },
+        { label: 'بالا وسط', value: BackgroundPosition.TOP_CENTER },
+        { label: 'بالا راست', value: BackgroundPosition.TOP_RIGHT },
+        { label: 'وسط چپ', value: BackgroundPosition.CENTER_LEFT },
+        { label: 'وسط راست', value: BackgroundPosition.CENTER_RIGHT },
+        { label: 'پایین چپ', value: BackgroundPosition.BOTTOM_LEFT },
+        { label: 'پایین وسط', value: BackgroundPosition.BOTTOM_CENTER },
+        { label: 'پایین راست', value: BackgroundPosition.BOTTOM_RIGHT }
     ]
 
     if (!activeSection) {
@@ -204,7 +229,7 @@ const SettingSideBar: FC = () => {
                                 ...currentItem?.style,
                                 backgroundSize: getBackgroundSize(newSize),
                                 backgroundRepeat: getBackgroundRepeat(newSize),
-                                backgroundPosition: 'center center'
+                                backgroundPosition: backgroundPosition
                             }
                         })
                     }}
@@ -212,6 +237,28 @@ const SettingSideBar: FC = () => {
                     disabled={isUploading}
                 />
             </div>
+
+            <div className='mt-5'>
+                <Select
+                    items={positionOptions}
+                    label={t('setting.position')}
+                    value={backgroundPosition}
+                    onChange={(e) => {
+                        const newPosition = e.target.value as BackgroundPosition
+                        setBackgroundPosition(newPosition)
+
+                        const currentItem = activeSection ? data[activeSection as keyof typeof data]?.items[activeItemIndex] : null
+                        updateActiveItem({
+                            style: {
+                                ...currentItem?.style,
+                                backgroundPosition: newPosition
+                            }
+                        })
+                    }}
+                    placeholder={t('setting.position')}
+                    disabled={isUploading}
+                />
+            </div>
         </div>
     )
 }

src/pages/setting/personality/store/Store.ts

@@ -16,9 +16,9 @@ import {
 
 export const usePersonalityStore = create<PersonalityStore>((set) => ({
   data: {
-    header: { columnsCount: 0, items: [] },
+    header: { columnsCount: 1, items: [] },
-    content: { columnsCount: 0, items: [] },
+    content: { columnsCount: 1, items: [] },
-    footer: { columnsCount: 0, items: [] },
+    footer: { columnsCount: 1, items: [] },
   },
 
   activeSection: "",
@@ -32,7 +32,37 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
     })),
 
   setActiveSection: (section: SectionName) =>
-    set(() => {
+    set((state) => {
+      const sectionData = state.data[section as keyof PersonalityDataType];
+
+      // اگر بخش آیتم ندارد و تعداد ستون‌ها بیشتر از صفر است، یک آیتم پیش‌فرض بساز
+      if (sectionData.items.length === 0 && sectionData.columnsCount > 0) {
+        const defaultItem = {
+          id: uuidv4(),
+          backgroundColor: "#ffffff",
+          texts: [],
+          buttons: [],
+          images: [],
+          socials: [],
+          alignment: HorizontalAlignment.CENTER,
+          verticalAlignment: VerticalAlignment.MIDDLE,
+        };
+
+        return {
+          activeSection: section,
+          activeItemIndex: 0,
+          selectedElement: null,
+          isEditMode: false,
+          data: {
+            ...state.data,
+            [section]: {
+              ...sectionData,
+              items: [defaultItem],
+            },
+          },
+        };
+      }
+
       return {
         activeSection: section,
         activeItemIndex: 0,
@@ -61,20 +91,34 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
   ) =>
     set((state) => {
       const currentItems = state.data[sectionKey].items;
-      const newItems = Array.from(
+      const currentActiveItem = currentItems[state.activeItemIndex];
-        { length: columnsCount },
+
-        (_, index) =>
+      const newItems = Array.from({ length: columnsCount }, (_, index) => {
-          currentItems[index] || {
+        // اگر این آیتم در حال حاضر وجود دارد، آن را حفظ کن
-            id: uuidv4(),
+        if (currentItems[index]) {
-            backgroundColor: "#ffffff",
+          return currentItems[index];
-            texts: [],
+        }
-            buttons: [],
+
-            images: [],
+        // اگر این اولین آیتم است و آیتم فعلی وجود دارد، از آن استفاده کن
-            socials: [],
+        if (index === 0 && currentActiveItem) {
-            alignment: HorizontalAlignment.CENTER,
+          return {
-            verticalAlignment: VerticalAlignment.MIDDLE,
+            ...currentActiveItem,
-          }
+            id: currentActiveItem.id || uuidv4(),
-      );
+          };
+        }
+
+        // در غیر این صورت، یک آیتم جدید بساز
+        return {
+          id: uuidv4(),
+          backgroundColor: "#ffffff",
+          texts: [],
+          buttons: [],
+          images: [],
+          socials: [],
+          alignment: HorizontalAlignment.CENTER,
+          verticalAlignment: VerticalAlignment.MIDDLE,
+        };
+      });
 
       return {
         data: {
@@ -121,7 +165,33 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
       const items = state.data[sectionKey].items;
       const activeIndex = state.activeItemIndex;
 
-      if (activeIndex >= items.length) return state;
+      // اگر آیتم فعال وجود ندارد، یکی بساز
+      if (activeIndex >= items.length) {
+        const newItem = {
+          id: uuidv4(),
+          backgroundColor: "#ffffff",
+          texts: [],
+          buttons: [],
+          images: [],
+          socials: [],
+          alignment: HorizontalAlignment.CENTER,
+          verticalAlignment: VerticalAlignment.MIDDLE,
+          ...updates,
+        };
+
+        const newItems = [...items];
+        newItems[activeIndex] = newItem;
+
+        return {
+          data: {
+            ...state.data,
+            [sectionKey]: {
+              ...state.data[sectionKey],
+              items: newItems,
+            },
+          },
+        };
+      }
 
       const updatedItems = items.map((item, index) =>
         index === activeIndex ? { ...item, ...updates } : item

src/pages/setting/personality/types/Types.ts

@@ -33,6 +33,18 @@ export enum BackgroundSize {
   ROUND = "round",
 }
 
+export enum BackgroundPosition {
+  CENTER = "center center",
+  TOP_LEFT = "top left",
+  TOP_CENTER = "top center",
+  TOP_RIGHT = "top right",
+  CENTER_LEFT = "center left",
+  CENTER_RIGHT = "center right",
+  BOTTOM_LEFT = "bottom left",
+  BOTTOM_CENTER = "bottom center",
+  BOTTOM_RIGHT = "bottom right",
+}
+
 export enum SectionName {
   HEADER = "header",
   CONTENT = "content",

src/shared/Header.tsx

@@ -1,56 +1,61 @@
-import { FC } from 'react'
+import { FC, useEffect, useState } from 'react'
-import Input from '../components/Input'
+// import Input from '../components/Input'
-import { Element3, HambergerMenu, Wallet } from 'iconsax-react'
+import { ArrowDown2, CloseCircle, Element4, HambergerMenu, Logout } from 'iconsax-react'
+import AvatarImage from '../assets/images/avatar_image.png'
 import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
-import { Paths } from '@/utils/Paths'
+import Notifications from '../pages/notification/Notification'
-// import Notifications from '../pages/notification/Notification'
 import { useSharedStore } from './store/sharedStore'
-// import { useGetProfile } from '../pages/profile/hooks/useProfileData'
+import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
-// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
-// import { useGetWalletBalance } from '../pages/wallet/hooks/useWalletData'
+import { removeRefreshToken, removeToken } from '../config/func'
-// import { NumberFormat } from '../config/func'
+import { clx } from '../helpers/utils'
 
 const Header: FC = () => {
 
+    const location = useLocation();
+    const [popoverKey, setPopoverKey] = useState(0);
     const { t } = useTranslation('global')
-    const { setOpenSidebar, openSidebar } = useSharedStore()
+    const { setOpenSidebar, openSidebar, hasSubMenu } = useSharedStore()
-    // const { data } = useGetProfile()
+    const { data } = useGetProfile()
-    // const getWalletBalance = useGetWalletBalance()
+
+    useEffect(() => {
+        setPopoverKey((prevKey) => prevKey + 1);
+    }, [location.pathname]);
+
+    const handleLogout = () => {
+        removeToken()
+        removeRefreshToken()
+        window.location.href = import.meta.env.VITE_LOGIN_URL
+    }
+
+    const hasSubMenuOpen = hasSubMenu && (openSidebar || window.innerWidth > 1139)
 
     return (
-        <div className='fixed z-10 right-2 left-2 md:right-4 md:left-4 xl:right-[285px] top-2 md:top-4 xl:h-16 h-12 flex items-center px-3 md:px-6 bg-white justify-between rounded-[20px] md:rounded-[32px] xl:w-[calc(100%-305px)]'>
+        <div className={clx(
+            'fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]',
+            hasSubMenuOpen && '!right-[320px] !w-[calc(100%-340px)]'
+        )}>
 
-            <div className='min-w-[200px] md:min-w-[270px] hidden xl:block'>
+            <div className='min-w-[270px] hidden xl:block'>
-                <Input
+                {/* <Input
                     variant='search'
                     placeholder={t('header.search')}
-                    className='bg-secondary border-none'
+                /> */}
-                />
             </div>
             <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
                 <HambergerMenu size={24} color='black' />
             </div>
             {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
-            <div className='flex xl:gap-6 gap-3 md:gap-4 items-center'>
+            <div className='flex xl:gap-6 gap-4 items-center'>
-                <Link to={Paths.home}>
+                <a target='_blank' href={`https://console.danakcorp.com/services`}>
-                    <Element3 color='black' className='size-4 md:size-[17px] xl:size-[18px]' />
+                    <Element4 size={19} color='black' />
-                </Link>
+                </a>
-                <Link className='xl:hidden' to={Paths.home}>
+                {/* <Link className='xl:hidden' to={Pages.wallet}>
-                    <Wallet className='size-4 md:size-[17px] xl:size-[18px]' color='black' />
+                    <Wallet className='xl:size-[18px] size-[17px]' color='black' />
-                </Link>
+                </Link> */}
-                <Link className='hidden xl:block' to={Paths.home}>
+                <Notifications />
-                    <div className='flex items-center h-8 pl-2 rounded-full bg-[#EEF0F7]'>
+                {
-                        <div className='px-3 text-xs'>
-                            {/* {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')} */}
-                        </div>
-                        <div className='size-[26px] flex justify-center items-center bg-white rounded-xl'>
-                            <Wallet className='xl:size-[18px] size-[17px]' color='black' />
-                        </div>
-                    </div>
-                </Link>
-                {/* <Notifications /> */}
-                {/* {
                     data && (
                         <Popover className="relative" key={popoverKey}>
                             <PopoverButton >
@@ -71,7 +76,7 @@ const Header: FC = () => {
                                 <div className='absolute xl:hidden top-6 left-6'>
                                     <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
                                 </div>
-                                <Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
+                                <Link to={'#'} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
                                     <div className='size-14 rounded-full overflow-hidden'>
                                         <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
                                     </div>
@@ -85,79 +90,19 @@ const Header: FC = () => {
                                     </div>
                                 </Link>
 
-                                <div className='pb-6 px-6 border-b border-[#EAEDF5]'>
+                                <div className='px-6 mt-2'>
-                                    <div className='flex justify-between items-center'>
+                                    <div onClick={() => handleLogout()} className='flex gap-2 items-center cursor-pointer'>
-                                        <SideBarItem
+                                        <Logout size={20} color='black' />
-                                            icon={<Wallet size={20} color='black' />}
+                                        <div>
-                                            title={t('header.wallet')}
+                                            {t('sidebar.logout')}
-                                            link={Pages.wallet}
-                                            isActive
-                                            isWithoutLine
-                                        />
-                                        <div className='flex xl:hidden items-center mt-4 h-8 pl-2 rounded-full bg-[#EEF0F7]'>
-                                            <div className='ps-3'>{t('home.balance')}</div>
-                                            <div className='px-3 text-xs'>
-                                                {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
-                                            </div>
                                         </div>
                                     </div>
-
-                                    <SideBarItem
-                                        icon={<Card color={'black'} size={20} />}
-                                        title={t('sidebar.transactions')}
-                                        isActive
-                                        link={Pages.transactions}
-                                        isWithoutLine
-                                    />
-
-                                    <SideBarItem
-                                        icon={<TicketDiscount color={'black'} size={20} />}
-                                        title={t('header.discounts')}
-                                        isActive
-                                        link={Pages.discounts}
-                                        isWithoutLine
-                                    />
-
-                                    <SideBarItem
-                                        icon={<Receipt1 color={'black'} size={20} />}
-                                        title={t('header.financial_info')}
-                                        isActive
-                                        link={Pages.financial}
-                                        isWithoutLine
-                                    />
-
-                                    <SideBarItem
-                                        icon={<ProfileCircle color={'black'} size={20} />}
-                                        title={t('header.profile')}
-                                        isActive
-                                        link={Pages.profile}
-                                        isWithoutLine
-                                    />
-
-                                    <SideBarItem
-                                        icon={<Setting2 color={'black'} size={20} />}
-                                        title={t('header.setting')}
-                                        isActive
-                                        link={Pages.setting}
-                                        isWithoutLine
-                                    />
-                                </div>
-
-                                <div className='px-6 -mt-[2px]'>
-                                    <SideBarItem
-                                        icon={<Logout color={'black'} size={20} />}
-                                        title={t('sidebar.logout')}
-                                        isActive
-                                        link={Pages.setting}
-                                        isWithoutLine
-                                        isLogout
-                                    />
                                 </div>
 
                             </PopoverPanel>
                         </Popover>
                     )
-                } */}
+                }
             </div>
         </div>
     )

src/shared/store/sharedStore.ts

@@ -8,4 +8,6 @@ export const useSharedStore = create<SharedStoreType>((set) => ({
   setOpenNewMessage: (value) => set({ openNewMessage: value }),
   openBuySpace: false,
   setOpenBuySpace: (value) => set({ openBuySpace: value }),
+  hasSubMenu: false,
+  setSubtMenu: (value: boolean) => set({ hasSubMenu: value }),
 }));

src/shared/types/SharedTypes.ts

@@ -5,4 +5,6 @@ export type SharedStoreType = {
   setOpenNewMessage: (value: boolean) => void;
   openBuySpace: boolean;
   setOpenBuySpace: (value: boolean) => void;
+  hasSubMenu: boolean;
+  setSubtMenu: (value: boolean) => void;
 };