first version

2025-07-20 04:08:36 +08:00
commit 1e74a20554
37 changed files with 9691 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dev-dist
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/index.html
+++ b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+        <meta name="theme-color" content="#ffffff">
+    <link rel="icon" href="/favicon.ico" sizes="48x48">
+    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Salona + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "salona",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "generate-pwa-icons": "pwa-assets-generator"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.2.0",
+    "@tanstack/react-query": "^5.83.0",
+    "aos": "^2.3.4",
+    "axios": "^1.10.0",
+    "firebase": "^12.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-error-boundary": "^6.0.0",
+    "react-hook-form": "^7.60.0",
+    "react-hot-toast": "^2.5.2",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.7.0",
+    "swiper": "^11.2.10"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vite-pwa/assets-generator": "^0.2.6",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.11",
+    "vite-plugin-pwa": "^0.21.1",
+    "workbox-core": "^7.3.0",
+    "workbox-precaching": "^7.3.0",
+    "workbox-routing": "^7.3.0",
+    "workbox-strategies": "^7.3.0",
+    "workbox-window": "^7.3.0"
+  },
+  "resolutions": {
+    "sharp": "0.32.6",
+    "sharp-ico": "0.1.5"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="410"
+   height="404"
+   viewBox="0 0 410 404"
+   fill="none"
+   version="1.1"
+   id="svg20"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata24">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview22"
+     showgrid="false"
+     inkscape:zoom="0.51361386"
+     inkscape:cx="-374.79518"
+     inkscape:cy="145.0506"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g8"
+     inkscape:document-rotation="0"
+     inkscape:pagecheckerboard="0" />
+  <path
+     d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z"
+     fill="url(#paint0_linear)"
+     id="path2" />
+  <defs
+     id="defs18">
+    <linearGradient
+       id="paint0_linear"
+       x1="6.00017"
+       y1="32.9999"
+       x2="235"
+       y2="344"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#41D1FF"
+         id="stop6" />
+      <stop
+         offset="1"
+         stop-color="#BD34FE"
+         id="stop8" />
+    </linearGradient>
+    <linearGradient
+       id="paint1_linear"
+       x1="194.651"
+       y1="8.81818"
+       x2="236.076"
+       y2="292.989"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#FFEA83"
+         id="stop11" />
+      <stop
+         offset="0.0833333"
+         stop-color="#FFDD35"
+         id="stop13" />
+      <stop
+         offset="1"
+         stop-color="#FFA800"
+         id="stop15" />
+    </linearGradient>
+  </defs>
+  <path
+     d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z"
+     fill="url(#paint1_linear)"
+     id="path4" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="PWA">
+    <g
+       id="g8"
+       transform="matrix(0.15789659,0,0,0.15890333,54.892928,275.21638)">
+      <path
+         fill="#3d3d3d"
+         fill-opacity="1"
+         stroke-width="0.2"
+         stroke-linejoin="round"
+         d="m 1436.62,603.304 56.39,-142.599 h 162.82 L 1578.56,244.39 1675.2,5.28336e-4 1952,734.933 h -204.13 l -47.3,-131.629 z"
+         id="path2-1"
+         style="fill:#3e3e3e;fill-opacity:1" />
+      <path
+         fill="#5a0fc8"
+         fill-opacity="1"
+         stroke-width="0.2"
+         stroke-linejoin="round"
+         d="M 1262.47,734.935 1558.79,0.00156593 1362.34,0.0025425 1159.64,474.933 1015.5,0.00351906 H 864.499 L 709.731,474.933 600.585,258.517 501.812,562.819 602.096,734.935 h 193.331 l 139.857,-425.91 133.346,425.91 z"
+         id="path4-4"
+         style="fill:#2e859c;fill-opacity:1" />
+      <path
+         fill="#3d3d3d"
+         fill-opacity="1"
+         stroke-width="0.2"
+         stroke-linejoin="round"
+         d="m 186.476,482.643 h 121.003 c 36.654,0 69.293,-4.091 97.917,-12.273 l 31.293,-96.408 87.459,-269.446 C 517.484,93.9535 509.876,83.9667 501.324,74.5569 456.419,24.852 390.719,4.06265e-4 304.222,4.06265e-4 H -3.8147e-6 V 734.933 H 186.476 Z M 346.642,169.079 c 17.54,17.653 26.309,41.276 26.309,70.871 0,29.822 -7.713,53.474 -23.138,70.956 -16.91,19.425 -48.047,29.137 -93.409,29.137 H 186.476 V 142.598 h 70.442 c 42.277,0 72.185,8.827 89.724,26.481 z"
+         id="path6"
+         style="fill:#3e3e3e;fill-opacity:1" />
+    </g>
+  </g>
+</svg>
--- a/pwa-assets.config.ts
+++ b/pwa-assets.config.ts
@@ -0,0 +1,12 @@
+import {
+    defineConfig,
+    minimal2023Preset as preset,
+} from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+    headLinkOptions: {
+        preset: '2023',
+    },
+    preset,
+    images: ['public/favicon.svg'],
+})
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import 'aos/dist/aos.css';
+import 'swiper/swiper-bundle.css';
+import 'react-h5-audio-player/lib/styles.css';
+import './App.css';
+import AOS from 'aos';
+import { ErrorBoundary } from 'react-error-boundary';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { ErrorBoundaryFallback } from '@/components/ErrorBoundaryFallback';
+import SplashScreen from './components/SplashScreen';
+import { Toaster } from 'react-hot-toast';
+import VpnDetector from './components/VpnDetector';
+import {
+  mutationErrorHandler,
+  requestErrorRetryHandler,
+} from './utils/error-handlers';
+import UpdateDetector from './components/UpdateDetector';
+import { MultiAccountsProvider } from '@appointment/hooks/useMultipleAccounts';
+import AllRoutes from '@/routes';
+import useSamsungBrowserWarning from './hooks/useSamsungBrowserWarning';
+import InternetStatusDetector from './components/InternetStatusDetector';
+
+import './App.css'
+
+function App() {
+
+  return (
+      <SplashScreen>
+        <QueryClientProvider client={queryClient}>
+          <MultiAccountsProvider>
+            <VpnDetector />
+            <UpdateDetector />
+            <InternetStatusDetector>
+              <ErrorBoundary
+                  fallbackRender={({ error }) => (
+                      <ErrorBoundaryFallback error={error} />
+                  )}
+              >
+                <Router>
+                  <AllRoutes />
+                </Router>
+              </ErrorBoundary>
+              <Toaster />
+            </InternetStatusDetector>
+          </MultiAccountsProvider>
+        </QueryClientProvider>
+      </SplashScreen>
+  )
+}
+
+export default App
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/firebaseConfig.ts
+++ b/src/firebaseConfig.ts
@@ -0,0 +1,74 @@
+
+import { FirebaseApp, initializeApp } from 'firebase/app';
+// import { getAnalytics } from 'firebase/analytics';
+import {
+    getMessaging,
+    getToken,
+    isSupported,
+    Messaging,
+} from 'firebase/messaging';
+
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+    apiKey: 'AIzaSyA4tONYizVYn2gtmar48bQfv8YTTuzRJU4',
+    authDomain: 'salona-8e174.firebaseapp.com',
+    projectId: 'salona-8e174',
+    storageBucket: 'salona-8e174.firebasestorage.app',
+    messagingSenderId: '336749753638',
+    appId: '1:336749753638:web:dcf886e1289f39ef267de7',
+    measurementId: 'G-ZFYBE6DDDH',
+};
+
+let app: FirebaseApp | undefined;
+let messaging: Messaging | undefined;
+const isInAppBrowser = /Instagram|Telegram|FBAN|FBAV/i.test(
+    navigator.userAgent,
+);
+if (!isInAppBrowser) {
+    try {
+        app = initializeApp(firebaseConfig);
+        messaging = getMessaging(app);
+        // getAnalytics(app);
+    } catch (error) {
+        console.error('Firebase initialization error', error);
+    }
+}
+
+const checkNotificationRequirements = async () => {
+    const isSupportedMessaging = await isSupported();
+    if (isInAppBrowser || !isSupportedMessaging || !('PushManager' in window)) {
+        return {
+            status: false,
+            message:
+                'قابلیت Push notifications در مرورگر شما پشتیبانی نمیشود. لطفا با مرورگری دیگر وارد شده و مجددا تلاش نمایید',
+        };
+    }
+    if (!('serviceWorker' in navigator)) {
+        return {
+            status: false,
+            message:
+                'قابلیت Service workers در مرورگر شما پشتیبانی نمیشود. لطفا با مرورگری دیگر وارد شده و مجددا تلاش نمایید',
+        };
+    }
+    return {
+        status: true,
+    };
+};
+const getFCMToken = async () => {
+    try {
+        if (isInAppBrowser || !messaging) {
+            console.error(
+                'قابلیت Push notifications در مرورگر شما پشتیبانی نمیشود. لطفا با مرورگری دیگر وارد شده و مجددا تلاش نمایید',
+            );
+            return;
+        }
+        const token = await getToken(messaging, {
+            vapidKey: import.meta.env.VITE_VAPID_PUBLIC_KEY,
+        });
+        return token;
+    } catch (error) {
+        console.error('خطا در دریافت یا ساخت توکن اعلان‌ها', error);
+    }
+};
+
+export { messaging, getFCMToken, checkNotificationRequirements };
--- a/src/hooks/useAutofillSMS.tsx
+++ b/src/hooks/useAutofillSMS.tsx
@@ -0,0 +1,31 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
+
+interface OTPCredential extends Credential {
+  code: string;
+}
+
+const useAutofillSMS = (setOTP: Dispatch<SetStateAction<string>>) => {
+  useEffect(() => {
+    if ('OTPCredential' in window) {
+      const ac = new AbortController();
+      // Requesting OTP...
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (navigator.credentials.get as any)({
+        otp: { transport: ['sms'] },
+        signal: ac.signal,
+      })
+        .then((credential: OTPCredential) => {
+          if (credential?.code) setOTP(credential.code);
+        })
+        .catch((err: Error) => {
+          console.error('Error reading OTP:' + err.message);
+        });
+      return () => {
+        // Cleaning up...
+        ac.abort();
+      };
+    }
+  }, []);
+};
+
+export default useAutofillSMS;
--- a/src/hooks/useCopy.tsx
+++ b/src/hooks/useCopy.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+export const useCopy = () => {
+  const [state, setState] = useState<'default' | 'success' | 'loading'>(
+    'default',
+  );
+  const onCopyHandler = (text: string): void => {
+    setState('loading');
+    setTimeout(() => {
+      navigator.clipboard
+        .writeText(text)
+        .then(() => {
+          setState('success');
+          setTimeout(() => {
+            setState('default');
+          }, 1500);
+        })
+        .catch((error) => {
+          toast.error('خطا در کپی اطلاعات،  لطفا مجددا تلاش نمایید');
+          // eslint-disable-next-line no-console
+          console.error('Error copying text:', error);
+          setState('default');
+        });
+    }, 500);
+  };
+  return { state, onCopy: onCopyHandler };
+};
--- a/src/hooks/useIsMobile.tsx
+++ b/src/hooks/useIsMobile.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}
--- a/src/hooks/useSamsungBrowserWarning.tsx
+++ b/src/hooks/useSamsungBrowserWarning.tsx
@@ -0,0 +1,37 @@
+import { Alert } from '@/components/ui/alert-dialog';
+import { useEffect } from 'react';
+import { browserName } from 'react-device-detect';
+
+// "Chrome"
+// "Firefox"
+// "Safari"
+// "Edge"
+// "Opera"
+// "Internet Explorer"
+// "IE" (sometimes used interchangeably with Internet Explorer)
+// "Samsung Internet"
+// "Unknown" (if the browser cannot be identified)
+
+const useSamsungBrowserWarning = () => {
+  useEffect(() => {
+    const storedItem = localStorage.getItem('samsungBrowser_warning');
+    if (browserName === 'Samsung Internet' && !storedItem) {
+      Alert.fire({
+        html: '<p class="text-base">به نظر می‌رسد شما از مرورگر سامسونگ استفاده می‌کنید. این مرورگر ممکن است باعث بروز مشکلاتی مانند زوم خودکار یا فعال‌سازی ناخواسته دارک مود در اپلیکیشن شود. برای رفع این مشکلات و تجربه بهتر، پیشنهاد می‌کنیم از مرورگرهای دیگر مانند کروم، فایرفاکس یا مایکروسافت اج استفاده نمایید. این مرورگرها با استانداردهای وب سازگارتر هستند و عملکرد بهتری ارائه می‌دهند.</p>',
+        showCancelButton: false,
+        icon: 'warning',
+        footer: `<label for="dontShowSamsungBrowserWarning" class="flex items-center justify-center gap-2 select-none"><input class="size-4" type="checkbox" id="dontShowSamsungBrowserWarning"/><p>این پیام را نمایش نده</p></label>`,
+        willClose: () => {
+          const checkbox = document.getElementById(
+            'dontShowSamsungBrowserWarning',
+          ) as HTMLInputElement;
+          if (checkbox?.checked) {
+            localStorage.setItem('samsungBrowser_warning', 'true');
+          }
+        },
+      });
+    }
+  }, []);
+};
+
+export default useSamsungBrowserWarning;
--- a/src/hooks/useScrollToTop.tsx
+++ b/src/hooks/useScrollToTop.tsx
@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const useScrollToTop = () => {
+  const location = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
+};
+
+export default useScrollToTop;
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,11 @@
+// import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+    // For sms auto fill I had to remove the StrictMode
+    // https://stackoverflow.com/questions/75242951/domexception-signal-is-aborted-without-reason-in-useeffect-with-async-call
+    // <StrictMode>
+    <App />,
+    // </StrictMode>,
+);
--- a/src/pages/error/error.css
+++ b/src/pages/error/error.css
--- a/src/pages/error/index.tsx
+++ b/src/pages/error/index.tsx
@@ -0,0 +1,77 @@
+import './error.css';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import ROUTES_OBJECT from '@/routes/RoutesObject';
+
+const ErrorPage = ({ type = '404' }: { type?: '403' | '404' }) => {
+  return (
+    <div className="Error404_wrapper">
+      <div className="container_404 stars_container">
+        {new Array(30).fill('').map((_, index) => (
+          <div key={index} className="star-1"></div>
+        ))}
+        {new Array(30).fill('').map((_, index) => (
+          <div key={index} className="star-2"></div>
+        ))}
+      </div>
+      <div className="container_404 birds_container">
+        {new Array(6).fill('').map((_, index) => (
+          <div className="bird bird-anim" key={index}>
+            <div className="bird-container">
+              <div className="wing wing-left">
+                <div className="wing-left-top"></div>
+              </div>
+              <div className="wing wing-right">
+                <div className="wing-right-top"></div>
+              </div>
+            </div>
+          </div>
+        ))}
+        <div className="content_container">
+          <div className="title">
+            <div className="number">{type === '404' ? '4' : '3'}</div>
+            <div className="moon">
+              <div className="face">
+                <div className="mouth"></div>
+                <div className="eyes">
+                  <div className="eye-left"></div>
+                  <div className="eye-right"></div>
+                </div>
+              </div>
+            </div>
+            <div className="number">4</div>
+          </div>
+          <br />
+          <br />
+          {type === '404' ? (
+            <>
+              <div className="subtitle mt-5 mb-3 text-3xl">
+                آدرس مورد نظر یافت نشد
+              </div>
+              <p className="subtitle mt-3 mb-5 text-xl">
+                لطفا درستی آدرس وارد شده در url وبسایت را بررسی نمایید.
+              </p>
+            </>
+          ) : (
+            <>
+              <div className="subtitle mt-5 mb-3 text-3xl">عدم دسترسی</div>
+              <p className="subtitle mt-3 mb-5 text-xl">
+                حساب کاربری شما برای ورود به این بخش مجوز ندارد. با تمدید
+                اشتراک، می‌توانید به تمام امکانات دسترسی داشته باشید.
+              </p>
+            </>
+          )}
+          <br />
+          <br />
+          <Link to={ROUTES_OBJECT.home}>
+            <Button size="lg" variant="outline" className="text-primary">
+              بازگشت به صفحه اصلی
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorPage;
--- a/src/pages/login/+components/loginForm.tsx
+++ b/src/pages/login/+components/loginForm.tsx
@@ -0,0 +1,144 @@
+import { useRef, useState } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import WavesSVG from '@/components/WavesSVG';
+import { SmartphoneIcon } from 'lucide-react';
+import { useGenerateRegisterOTP, useLoginUser } from '@/services/Account';
+import { AxiosError } from 'axios';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { numberOnInputHandler } from '@/utils/fa-to-en-numbers';
+import { MOBILE_REGEX_PATTERN } from '@/utils/constants';
+import ROUTES_OBJECT from '@/routes/RoutesObject';
+import Captcha from '@/components/Captcha';
+import { validateCaptcha } from 'react-simple-captcha';
+
+const LoginForm = () => {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [captchaValue, setCaptchaValue] = useState('');
+  const captchaInputRef = useRef<HTMLInputElement>(null);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{ mobile: string }>({
+    defaultValues: { mobile: '' },
+  });
+  const { mutate: loginUser, isPending } = useLoginUser();
+  const { mutate: generateRegisterOTP, isPending: generateRegisterOTPPending } =
+    useGenerateRegisterOTP();
+
+  const confirmMobileHandler = handleSubmit(async (data) => {
+    if (!captchaValue) {
+      if (captchaInputRef.current) captchaInputRef.current.focus();
+      return toast.error(
+        'تکمیل کپچا برای جلوگیری از ورود ربات ها ضروری میباشد.',
+      );
+    }
+    const isValidCaptcha = validateCaptcha(captchaValue);
+    if (!isValidCaptcha) {
+      setCaptchaValue('');
+      return toast.error(
+        'مقادیر وارد شده برای کپچا اشتباه است. لطفا ورودی های خود را مجددا بررسی نمایید.',
+      );
+    }
+    loginUser(
+      { phone_number: data.mobile },
+      {
+        onSuccess: (response) => {
+          if (response.status >= 200 && response.status < 300) {
+            toast.success('کد احراز هویت با موفقیت ارسال شد.');
+            const prevParams = Object.fromEntries(searchParams);
+            setSearchParams({
+              ...prevParams,
+              mobile: data.mobile,
+            });
+          }
+        },
+        onError: (error) => {
+          if ((error as AxiosError).response?.status === 403) {
+            toast.error('شماره تلفن تایید نشده است');
+            generateRegisterOTP(
+              { phone_number: data.mobile },
+              {
+                onSuccess: (response) => {
+                  if (response.status >= 200 && response.status < 300) {
+                    toast.success(
+                      `کد احراز هویت به شماره ${data.mobile} ارسال شد.`,
+                    );
+                    navigate(`${ROUTES_OBJECT.register}?mobile=${data.mobile}`);
+                  }
+                },
+              },
+            );
+          }
+        },
+      },
+    );
+  });
+
+  return (
+    <Card className="relative mx-auto w-96 z-1 bg-primary" data-aos="fade-up">
+      <CardHeader>
+        <CardTitle className="text-3xl text-center mb-1 text-white">
+          ورود
+        </CardTitle>
+        <CardDescription className="text-white">
+          جهت ورود به حساب کاربری، شماره موبایل خود را وارد نمایید.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="grid gap-4 mt-8" onSubmit={confirmMobileHandler}>
+          <div className="relative">
+            <Input
+              placeholder="شماره موبایل"
+              id="mobile"
+              // type="number"
+              inputMode="tel"
+              {...register('mobile', {
+                required: true,
+                pattern: MOBILE_REGEX_PATTERN,
+              })}
+              error={errors.mobile}
+              className="bg-[#EDDDFA] pe-10"
+              onInput={numberOnInputHandler}
+            />
+            <SmartphoneIcon className="text-primary absolute top-2 start-2" />
+          </div>
+          <Captcha
+            ref={captchaInputRef}
+            inputClassName="bg-[#EDDDFA]"
+            value={captchaValue}
+            onChange={setCaptchaValue}
+          />
+          <Button
+            type="submit"
+            className="w-full mt-8 text-primary font-bold text-base rounded-full"
+            variant="outline"
+            isLoading={isPending || generateRegisterOTPPending}
+          >
+            ورود
+          </Button>
+        </form>
+        <div className="mt-8 text-center text-sm text-white">
+          حساب کاربری ندارید؟
+          <Link to={ROUTES_OBJECT.register} className="underline ms-2">
+            ثبت نام
+          </Link>
+        </div>
+      </CardContent>
+      <WavesSVG fill="#ffffff" />
+    </Card>
+  );
+};
+
+export default LoginForm;
--- a/src/pages/login/add-account.tsx
+++ b/src/pages/login/add-account.tsx
@@ -0,0 +1,35 @@
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import LoginForm from './+components/loginForm';
+import OTPForm from '@/components/OTPForm';
+import BackBtn from '@/components/BackBtn';
+import { appointmentRoutes } from '@appointment/routes';
+import { useCheckOTP, useLoginUser } from '@/services/Account';
+
+const AddAccount = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { mutate: loginUser, isPending: loginUserPending } = useLoginUser();
+  const { mutate: checkOTP, isPending: checkOTPPending } = useCheckOTP();
+
+  const mobile = searchParams.get('mobile');
+
+  return (
+    <div className="relative flex h-screen w-full items-center justify-center px-4 bg-[url('@/assets/images/bg-pattern.jpg')] bg-cover bg-center bg-opacity-0 before:absolute before:w-full before:h-full before:bg-white/70 before:-z-1">
+      <div className="absolute top-3 left-3 z-10">
+        <BackBtn onClick={() => navigate(appointmentRoutes.explore)} />
+      </div>
+      {mobile ? (
+        <OTPForm
+          onResend={loginUser}
+          isResendLoading={loginUserPending}
+          onConfirm={checkOTP}
+          isConfirmLoading={checkOTPPending}
+        />
+      ) : (
+        <LoginForm />
+      )}
+    </div>
+  );
+};
+
+export default AddAccount;
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -0,0 +1,44 @@
+import { Navigate, useSearchParams } from 'react-router-dom';
+import LoginForm from './+components/loginForm';
+import OTPForm from '@/components/OTPForm';
+import { useMultiAccounts } from '@appointment/hooks/useMultipleAccounts';
+import { appointmentRoutes } from '@appointment/routes';
+import { version } from '@package.json';
+import { useCheckOTP, useLoginUser } from '@/services/Account';
+
+const Login = () => {
+  const { currectAccount } = useMultiAccounts();
+  const [searchParams] = useSearchParams();
+  const { mutate: loginUser, isPending: loginUserPending } = useLoginUser();
+  const { mutate: checkOTP, isPending: checkOTPPending } = useCheckOTP();
+
+  const mobile = searchParams.get('mobile');
+  const return_url = searchParams.get('return_url');
+
+  if (currectAccount) {
+    if (return_url) {
+      window.location.href = `${return_url}?auth=${currectAccount.authToken}`;
+      return <></>;
+    }
+    return <Navigate to={appointmentRoutes.explore} />;
+  }
+  return (
+    <div className="relative flex h-screen w-full items-center justify-center px-4 bg-[url('@/assets/images/bg-pattern.jpg')] bg-cover bg-center bg-opacity-0 before:absolute before:w-full before:h-full before:bg-white/70 before:-z-1">
+      {mobile ? (
+        <OTPForm
+          onResend={loginUser}
+          isResendLoading={loginUserPending}
+          onConfirm={checkOTP}
+          isConfirmLoading={checkOTPPending}
+        />
+      ) : (
+        <LoginForm />
+      )}
+      <p className="text-sm text-gray-600 text-center fixed bottom-5 end-5">
+        نسخه v{version}
+      </p>
+    </div>
+  );
+};
+
+export default Login;
--- a/src/pages/register/+components/registerForm.tsx
+++ b/src/pages/register/+components/registerForm.tsx
@@ -0,0 +1,195 @@
+import { useRef, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import ROUTES_OBJECT from '@/routes/RoutesObject';
+import { useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import WavesSVG from '@/components/WavesSVG';
+import { ContactIcon, SmartphoneIcon, User2Icon } from 'lucide-react';
+import { useGenerateRegisterOTP, useRegisterUser } from '@/services/Account';
+import { numberOnInputHandler } from '@/utils/fa-to-en-numbers';
+import { MOBILE_REGEX_PATTERN } from '@/utils/constants';
+import Captcha from '@/components/Captcha';
+import { validateCaptcha } from 'react-simple-captcha';
+
+const RegisterForm = () =>
+{
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const ref = searchParams.get('ref') ?? '';
+  const [showReferralInput, setShowReferralInput] = useState<boolean>(!!ref);
+  const [captchaValue, setCaptchaValue] = useState('');
+  const captchaInputRef = useRef<HTMLInputElement>(null);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{
+    name: string;
+    mobile: string;
+    referral_code: string;
+  }>({
+    defaultValues: {
+      name: '',
+      mobile: '',
+      referral_code: ref,
+    },
+  });
+  const { mutate: registerUser, isPending } = useRegisterUser();
+  const { mutate: generateRegisterOTP, isPending: generateRegisterOTPPending } =
+    useGenerateRegisterOTP();
+
+  const confirmMobileHandler = handleSubmit((data) => {
+    if (!captchaValue) {
+      if (captchaInputRef.current) captchaInputRef.current.focus();
+      return toast.error(
+        'تکمیل کپچا برای جلوگیری از ورود ربات ها ضروری میباشد.',
+      );
+    }
+    const isValidCaptcha = validateCaptcha(captchaValue);
+    if (!isValidCaptcha) {
+      setCaptchaValue('');
+      return toast.error(
+        'مقادیر وارد شده برای کپچا اشتباه است. لطفا ورودی های خود را مجددا بررسی نمایید.',
+      );
+    }
+    registerUser(
+      {
+        name: data.name,
+        phone_number: data.mobile,
+        referral_code: data.referral_code,
+      },
+      {
+        onSuccess: (response) => {
+          if (response.status >= 200 && response.status < 300) {
+            toast.success(
+              response.data.message ?? 'ثبت نام با موفقیت انجام شد',
+            );
+            generateRegisterOTP(
+              { phone_number: data.mobile },
+              {
+                onSuccess: (response) => {
+                  if (response.status >= 200 && response.status < 300) {
+                    toast.success(
+                      `کد احراز هویت به شماره ${data.mobile} ارسال شد.`,
+                    );
+                    setSearchParams({ mobile: data.mobile });
+                  }
+                },
+              },
+            );
+          }
+        },
+      },
+    );
+  });
+
+  return (
+    <Card
+      className="relative mx-auto w-96 max-h-[90%] z-1 overflow-hidden"
+      data-aos="fade-down"
+    >
+      <CardHeader>
+        <CardTitle className="text-3xl text-center mb-1 text-primary">
+          ثبت نام
+        </CardTitle>
+        <CardDescription className="text-center">خوش آمدید</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="grid gap-4" onSubmit={confirmMobileHandler}>
+          <div className="relative">
+            <Input
+              placeholder="نام"
+              id="name"
+              {...register('name', {
+                required: true,
+                maxLength: {
+                  value: 30,
+                  message: 'حداکثر تعداد کاراکتر مجاز 30 حرف میباشد',
+                },
+              })}
+              error={errors.name}
+              className="bg-primary/20 rounded-full py-5 ps-10"
+            />
+            <User2Icon className="text-primary absolute top-2 start-2" />
+          </div>
+          <div className="relative">
+            <Input
+              placeholder="شماره موبایل"
+              id="mobile"
+              // type="number"
+              inputMode="tel"
+              {...register('mobile', {
+                required: true,
+                pattern: MOBILE_REGEX_PATTERN,
+              })}
+              error={errors.mobile}
+              className="bg-primary/20 rounded-full py-5 pe-10"
+              onInput={numberOnInputHandler}
+            />
+            <SmartphoneIcon className="text-primary absolute top-2 start-2" />
+          </div>
+          {showReferralInput ? (
+            <div className="relative" data-aos="fade-down">
+              <Input
+                placeholder="کد معرف"
+                id="referral_code"
+                {...register('referral_code', {
+                  maxLength: {
+                    value: 8,
+                    message: 'حداکثر تعداد کاراکتر مجاز 8 حرف میباشد',
+                  },
+                  pattern: {
+                    value: /^[a-zA-Z0-9_.-]*$/i,
+                    message: 'فرمت کد وارد شده صحیح نیست',
+                  },
+                })}
+                error={errors.referral_code}
+                className="bg-primary/20 rounded-full py-5 ps-10"
+              />
+              <ContactIcon className="text-primary absolute top-2 start-2" />
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setShowReferralInput(true)}
+              className="font-bold text-primary px-2 text-sm text-right"
+            >
+              کد معرف دارید؟
+            </button>
+          )}
+          <Captcha
+            ref={captchaInputRef}
+            inputClassName="bg-primary/20"
+            value={captchaValue}
+            onChange={setCaptchaValue}
+          />
+          <Button
+            type="submit"
+            className="w-full mt-3 font-bold text-base rounded-full"
+            isLoading={isPending || generateRegisterOTPPending}
+          >
+            ثبت نام
+          </Button>
+        </form>
+        <div className="mt-8 text-center text-sm">
+          حساب کاربری دارید؟
+          <Link to={ROUTES_OBJECT.home} className="underline ms-2">
+            ورود
+          </Link>
+        </div>
+      </CardContent>
+      <WavesSVG />
+    </Card>
+  );
+};
+
+export default RegisterForm;
--- a/src/pages/register/index.tsx
+++ b/src/pages/register/index.tsx
@@ -0,0 +1,30 @@
+import { useSearchParams } from 'react-router-dom';
+import RegisterForm from './+components/registerForm';
+import OTPForm from '@/components/OTPForm';
+import { useCheckOTP, useGenerateRegisterOTP } from '@/services/Account';
+
+const Register = () => {
+  const [searchParams] = useSearchParams();
+  const { mutate: generateRegisterOTP, isPending: generateRegisterOTPPending } =
+    useGenerateRegisterOTP();
+  const { mutate: checkOTP, isPending: checkOTPPending } = useCheckOTP();
+
+  const mobile = searchParams.get('mobile');
+
+  return (
+    <div className="relative flex min-h-screen w-full items-center justify-center px-4 bg-[url('@/assets/images/bg-pattern.jpg')] bg-cover bg-center bg-opacity-0 before:absolute before:w-full before:h-full before:bg-white/70 before:-z-1">
+      {mobile ? (
+        <OTPForm
+          onResend={generateRegisterOTP}
+          isResendLoading={generateRegisterOTPPending}
+          onConfirm={checkOTP}
+          isConfirmLoading={checkOTPPending}
+        />
+      ) : (
+        <RegisterForm />
+      )}
+    </div>
+  );
+};
+
+export default Register;
--- a/src/routes/ProtectedRoute.tsx
+++ b/src/routes/ProtectedRoute.tsx
@@ -0,0 +1,7 @@
+import { useMultiAccounts } from '@appointment/hooks/useMultipleAccounts';
+import { Navigate, Outlet } from 'react-router-dom';
+
+export const ProtectedRoute = () => {
+  const { currectAccount } = useMultiAccounts();
+  return currectAccount?.authToken ? <Outlet /> : <Navigate to="/" />;
+};
--- a/src/routes/RoutesObject.ts
+++ b/src/routes/RoutesObject.ts
@@ -0,0 +1,8 @@
+const ROUTES_OBJECT = Object.freeze({
+  home: '/',
+  register: '/register',
+  addAccount: '/add-account',
+  forbiddenAccess: '/forbidden-access',
+});
+
+export default ROUTES_OBJECT;
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -0,0 +1,33 @@
+import { useRoutes } from 'react-router-dom';
+import ErrorPage from '@/pages/error';
+import Login from '@/pages/login';
+import AddAccount from '@/pages/login/add-account';
+import Register from '@/pages/register';
+import useScrollToTop from '@/hooks/useScrollToTop';
+import ROUTES_OBJECT from './RoutesObject.ts';
+import { appointmentRoutesStructure } from '@appointment/routes/structure';
+import { cardRoutesStructure } from '@card/routes/structure';
+
+const AllRoutes = () => {
+  useScrollToTop();
+  return useRoutes([
+    {
+      path: ROUTES_OBJECT.home,
+      element: <Login />,
+    },
+    {
+      path: ROUTES_OBJECT.register,
+      element: <Register />,
+    },
+    {
+      path: ROUTES_OBJECT.addAccount,
+      element: <AddAccount />,
+    },
+    ...appointmentRoutesStructure,
+    ...cardRoutesStructure,
+    { path: ROUTES_OBJECT.forbiddenAccess, element: <ErrorPage type="403" /> },
+    { path: '*', element: <ErrorPage type="404" /> },
+  ]);
+};
+
+export default AllRoutes;
--- a/src/services/Account.tsx
+++ b/src/services/Account.tsx
@@ -0,0 +1,116 @@
+import { toast } from 'react-hot-toast';
+import { appointmentClient } from '@/utils/axios-interceptor';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { appointmentRoutes } from '@appointment/routes';
+import type {
+  IRegisterForm,
+  ILoginForm,
+  IOTPForm,
+} from '@appointment/utils/types';
+import { useMultiAccounts } from '@appointment/hooks/useMultipleAccounts';
+import ROUTES_OBJECT from '@/routes/RoutesObject';
+import { AxiosError } from 'axios';
+import swalErrorIcon from '@/assets/images/swal-error-icon.png';
+import { Alert } from '@/components/ui/alert-dialog';
+import { mutationErrorHandler } from '@/utils/error-handlers';
+
+export const useLoginUser = () => {
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: async (requestBody: ILoginForm) =>
+      await appointmentClient.post('/login', requestBody),
+    onError: (error: AxiosError) => {
+      if (error.status === 404) {
+        Alert.fire({
+          title: 'خطا',
+          imageUrl: swalErrorIcon,
+          imageHeight: 150,
+          text:
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (error.response?.data as any)?.message ??
+            'کاربر با مشخصات وارد شده یافت نشد. برای ورود به سامانه ابتدا ثبت نام نمایید',
+        }).then(() => {
+          navigate(ROUTES_OBJECT.register);
+        });
+      } else {
+        mutationErrorHandler(error);
+      }
+    },
+  });
+};
+export const useCheckOTP = () => {
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
+  const { addAccount } = useMultiAccounts();
+  return useMutation({
+    mutationFn: async (requestBody: IOTPForm) => {
+      if (pathname === ROUTES_OBJECT.register) {
+        return await appointmentClient.put('/confrim_user', requestBody);
+      }
+      return await appointmentClient.post('/check_otp', requestBody);
+    },
+    onSuccess: (response) => {
+      if (response.status >= 200 && response.status < 300) {
+        addAccount(response.data.token, response.data.user);
+        toast.success(
+          response.data.message ?? 'ورود به حساب کاربری با موفقیت انجام شد.',
+        );
+        const { return_url } = Object.fromEntries(searchParams);
+        if (return_url) {
+          window.location.href = `${return_url}?auth=${response.data.token}`;
+        } else {
+          window.location.href = appointmentRoutes.explore;
+          // navigate(ROUTES_OBJECT.explore);
+        }
+      }
+    },
+  });
+};
+export const useRegisterUser = () => {
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: async (requestBody: IRegisterForm) =>
+      await appointmentClient.post('/register_user', requestBody),
+    onError: (error: AxiosError) => {
+      if (error.status === 409) {
+        Alert.fire({
+          title: 'خطا',
+          imageUrl: swalErrorIcon,
+          imageHeight: 150,
+          text:
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (error.response?.data as any)?.error ??
+            'کاربر با شماره تلفن وارد شده وجود دارد. لطفا وارد شوید.',
+        }).then(() => {
+          navigate(ROUTES_OBJECT.home);
+        });
+      } else {
+        mutationErrorHandler(error);
+      }
+    },
+  });
+};
+export const useGenerateRegisterOTP = () => {
+  return useMutation({
+    mutationFn: async (requestBody: ILoginForm) =>
+      await appointmentClient.post('/generate_register_otp', requestBody),
+  });
+};
+export const useGetVersion = () =>
+  useQuery({
+    queryKey: ['VERSION_QUERY_KEY'],
+    queryFn: async (): Promise<
+      | {
+          version: string;
+          bugfixes?: string[];
+          new_features?: [];
+          server_update: boolean;
+        }
+      | undefined
+    > => {
+      const response = await appointmentClient.get('/get_version');
+      return response.data;
+    },
+    retry: 1,
+  });
--- a/src/services/Reserve.tsx
+++ b/src/services/Reserve.tsx
@@ -0,0 +1,56 @@
+import { Alert } from '@/components/ui/alert-dialog';
+import { toast } from 'react-hot-toast';
+import { appointmentClient } from '@/utils/axios-interceptor';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import type { ILoginForm } from '@appointment/utils/types';
+import appointmentSwalSucessVector from '@appointment/assets/images/appointment-swal-sucess-vector.png';
+
+export const useLoginEndUserOverCard = () => {
+  const { artistMobile } = useParams();
+  return useMutation({
+    mutationFn: async (requestBody: ILoginForm) =>
+      await appointmentClient.post(
+        `/login_end_user_over_visit_card/${artistMobile}`,
+        requestBody,
+      ),
+    onSuccess: (response) => {
+      if (response.status >= 200 && response.status < 300) {
+        toast.success(
+          response.data.message ??
+            'کد احراز هویت به شماره موبایل شما ارسال شد.',
+        );
+      }
+    },
+  });
+};
+export const useCheckOTPOverCard = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const returnUrl = searchParams.get('returnUrl');
+  return useMutation({
+    mutationFn: async (requestBody: {
+      phone_number: string;
+      name: string;
+      description: string;
+      service: string;
+      otp_code: string;
+      artist_id: number;
+    }) =>
+      await appointmentClient.post('/check_otp_over_visit_card', requestBody),
+    onSuccess: (response) => {
+      if (response.status >= 200 && response.status < 300) {
+        Alert.fire({
+          text: response.data.message ?? 'درخواست رزرو نوبت با موفقیت ثبت شد.',
+          imageUrl: appointmentSwalSucessVector,
+          imageHeight: 200,
+        }).then(() => {
+          // RETURNING TO THE CARD
+          // IDK why returnUrl??-1 does not work here !!!
+          if (returnUrl) navigate(returnUrl);
+          else navigate(-1);
+        });
+      }
+    },
+  });
+};
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -0,0 +1,26 @@
+/// <reference lib="webworker" />
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
+import { clientsClaim } from 'workbox-core'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+
+declare let self: ServiceWorkerGlobalScope
+
+// self.__WB_MANIFEST is the default injection point
+precacheAndRoute(self.__WB_MANIFEST)
+
+// clean old assets
+cleanupOutdatedCaches()
+
+let allowlist: RegExp[] | undefined
+// in dev mode, we disable precaching to avoid caching issues
+if (import.meta.env.DEV)
+  allowlist = [/^\/$/]
+
+// to allow work offline
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('index.html'),
+  { allowlist },
+))
+
+self.skipWaiting()
+clientsClaim()
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/react" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,59 @@
+import { VitePWA } from 'vite-plugin-pwa';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), VitePWA({
+    strategies: 'injectManifest',
+    srcDir: 'public',
+    filename: 'sw.ts',
+    registerType: 'autoUpdate',
+    injectRegister: false,
+
+    manifest: {
+      name: 'Salona',
+      short_name: 'Salona',
+
+      theme_color: '#ffffff',
+      dir: 'rtl',
+      lang: 'fa',
+      description: 'Salona is a platform to provide innovative tools to hairdressers and beauty salons.',
+      display_override: [
+        'standalone',
+        'fullscreen',
+        'window-controls-overlay',
+        'browser',
+      ],
+      icons: [{
+        src: 'pwa-64x64.png',
+        sizes: '64x64',
+        type: 'image/png',
+      }, {
+        src: 'pwa-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      }, {
+        src: 'pwa-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      }, {
+        src: 'maskable-icon-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'maskable',
+      }],
+    },
+
+    injectManifest: {
+      globPatterns: ['**/*.{js,css,html,svg,png,ico}'],
+    },
+
+    devOptions: {
+      enabled: false,
+      navigateFallback: 'index.html',
+      suppressWarnings: true,
+      type: 'module',
+    },
+  })],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>