docker mirror

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
 VITE_BASE_URL = 'https://api.danakcorp.com'
-# VITE_BASE_URL = 'http://10.86.60.88:3500'
+# VITE_BASE_URL = 'http://10.73.49.88:3500'

Dockerfile

@@ -1,4 +1,11 @@
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder
+
+# Change Alpine repo
+RUN sed -i 's|https://dl-cdn.alpinelinux.org/alpine|https://mirror.de.velop.ir/alpine|g' /etc/apk/repositories
+
+# Configure npm registry mirror (Liara)
+ENV NPM_CONFIG_REGISTRY=https://package-mirror.liara.ir/repository/npm/
+RUN npm config set registry https://package-mirror.liara.ir/repository/npm/
 
 # Install tzdata to support timezone settings
 RUN apk add --no-cache tzdata
@@ -7,13 +14,27 @@ RUN apk add --no-cache tzdata
 RUN cp /usr/share/zoneinfo/Asia/Tehran /etc/localtime && echo "Asia/Tehran" > /etc/timezone
 
 WORKDIR /build
+
+# Optional build-args (CapRover / docker build --build-arg). When unset, Vite reads .env from COPY.
+ARG VITE_BASE_URL
+ARG VITE_TOKEN_NAME
+ARG VITE_REFRESH_TOKEN_NAME
+
 COPY package*.json ./
-RUN npm install
+RUN npm ci --legacy-peer-deps
 COPY . ./
-RUN npm run build
+RUN set -e; \
+  env_args=""; \
+  [ -n "$VITE_BASE_URL" ] && env_args="$env_args VITE_BASE_URL=$VITE_BASE_URL"; \
+  [ -n "$VITE_TOKEN_NAME" ] && env_args="$env_args VITE_TOKEN_NAME=$VITE_TOKEN_NAME"; \
+  [ -n "$VITE_REFRESH_TOKEN_NAME" ] && env_args="$env_args VITE_REFRESH_TOKEN_NAME=$VITE_REFRESH_TOKEN_NAME"; \
+  eval "env$env_args npm run build"
 
 FROM nginx:stable-alpine AS production-stage
 
+# Change Alpine repo
+RUN sed -i 's|https://dl-cdn.alpinelinux.org/alpine|https://mirror.de.velop.ir/alpine|g' /etc/apk/repositories
+
 COPY --from=builder /build/dist /usr/share/nginx/html
 
 COPY --from=builder /build/nginx.con[f] /etc/nginx/conf.d/default.conf

package-lock.json

@@ -1568,6 +1568,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1584,6 +1585,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1600,6 +1602,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1616,6 +1619,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1632,6 +1636,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1648,6 +1653,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1664,6 +1670,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1680,6 +1687,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1696,6 +1704,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1712,6 +1721,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1728,6 +1738,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1744,6 +1755,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1760,6 +1772,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1776,6 +1789,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1792,6 +1806,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1808,6 +1823,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1824,6 +1840,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1840,6 +1857,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1856,6 +1874,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1872,6 +1891,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1888,6 +1908,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1904,6 +1925,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1920,6 +1942,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1936,6 +1959,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1952,6 +1976,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2722,6 +2747,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2735,6 +2761,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2748,6 +2775,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2761,6 +2789,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2774,6 +2803,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2787,6 +2817,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2800,6 +2831,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2813,6 +2845,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2826,6 +2859,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2839,6 +2873,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2852,6 +2887,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2865,6 +2901,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2878,6 +2915,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2891,6 +2929,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2904,6 +2943,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2917,6 +2957,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2930,6 +2971,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2943,6 +2985,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2956,6 +2999,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2969,6 +3013,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3053,7 +3098,7 @@
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
       "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.20.7",
@@ -3067,7 +3112,7 @@
       "version": "7.6.8",
       "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
       "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.0.0"
@@ -3077,7 +3122,7 @@
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
       "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.1.0",
@@ -3088,7 +3133,7 @@
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
       "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.20.7"
@@ -4446,6 +4491,7 @@
       "version": "0.25.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
       "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -6004,7 +6050,7 @@
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
@@ -6388,6 +6434,7 @@
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
       "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6739,6 +6786,7 @@
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
       "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7448,6 +7496,7 @@
       "version": "4.40.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
       "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.7"
@@ -7791,6 +7840,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -8507,7 +8557,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -8706,6 +8756,7 @@
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -8810,6 +8861,7 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -8827,6 +8879,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -9424,7 +9477,7 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
       "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"

src/config/Pages.ts

@@ -4,6 +4,9 @@ export const Pages = {
     register: "/auth/register",
     forgotPassword: "/auth/forgot",
   },
+  dmail: {
+    list: "/dmail/domain/list",
+  },
   dashboard: "/dashboard",
   services: {
     mine: "/services",
@@ -150,7 +153,17 @@ export const Pages = {
       smsCountList: "/dkala/sms-count/list",
     },
   },
+  dpage: {
+    stickers: {
+      list: "/dpage/stickers/list",
+    },
+  },
   subscriptions: {
-    list: "/subscriptions/list",
+    list: "/customers/subscriptions",
+  },
+  reseller: {
+    list: "/reseller/list",
+    create: "/reseller/create",
+    withdraw: "/reseller/withdraw",
   },
 };

src/langs/fa.json

@@ -77,12 +77,34 @@
     "icons": "آیکون ها",
     "dmenu": "دی منو",
     "dkala": "دی کالا",
+    "dpage": "دی پیج",
+    "sticker": "استیکر",
     "groups_icon": "گروه های آیکون",
     "reports": "گزارش ها",
     "restaurants": "رستوران ها",
     "shops": "فروشگاه ها",
     "sms_count": "تعداد پیامک",
-    "subscriptions": "اشتراک ها"
+    "subscriptions": "اشتراک ها",
+    "financial": "مالی",
+    "dmail": "دی میل",
+    "domain": "دامنه",
+    "reseller": "نماینده",
+    "resellers": "نمایندگان",
+    "withdraw": "درخواست های برداشت"
+  },
+  "reseller": {
+    "list": "لیست نمایندکان",
+    "add_new": "افزودن نماینده جدید",
+    "name": "نام نمایندگی",
+    "user": "کاربر",
+    "submit": "ساخت",
+    "phone": "شماره",
+    "withdraws": "درخواست های برداشت",
+    "requestedAmount": "مبلغ درخواستی",
+    "paitAt": "تاریخ پرداخت"
+  },
+  "dmail": {
+    "domain": "لیست دامنه ها"
   },
   "slider": {
     "new_slider": "اسلایدر جدید",
@@ -864,6 +886,14 @@
     "group": "گروه",
     "select_group": "انتخاب گروه"
   },
+  "sticker": {
+    "list_sticker": "لیست استیکر ها",
+    "add_new_sticker": "افزودن استیکر",
+    "created_at": "تاریخ ایجاد",
+    "url": "آدرس",
+    "group": "گروه",
+    "select_group": "انتخاب گروه"
+  },
   "report": {
     "list_report": "لیست گزارشات",
     "subject": "موضوع",

src/pages/dmail/Domains.tsx

@@ -0,0 +1,16 @@
+import { type FC } from 'react'
+import { useGetDomains } from './hooks/useDmailData'
+
+const Domains: FC = () => {
+
+    const { data } = useGetDomains()
+
+    console.log('data', data);
+
+
+    return (
+        <div>Domains</div>
+    )
+}
+
+export default Domains

src/pages/dmail/hooks/useDmailData.ts

@@ -0,0 +1,15 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/DmailService";
+
+export const useGetDomains = () => {
+  return useQuery({
+    queryKey: ["dmail-domains"],
+    queryFn: api.getDomains,
+  });
+};
+
+export const useActiveDomain = () => {
+  return useMutation({
+    mutationFn: api.activeDomain,
+  });
+};

src/pages/dmail/service/DmailService.ts

@@ -0,0 +1,12 @@
+import axios from "../../../config/axios";
+import { ActiveDomainType } from "../types/Types";
+
+export const getDomains = async () => {
+  const { data } = await axios.get(`/dmail`);
+  return data;
+};
+
+export const activeDomain = async (params: ActiveDomainType) => {
+  const { data } = await axios.patch(`/dmail/${params.id}/active`, params);
+  return data;
+};

src/pages/dmail/types/Types.ts

@@ -0,0 +1,4 @@
+export type ActiveDomainType = {
+  isActive: boolean;
+  id: string;
+};

src/pages/dpage/hooks/useStickerData.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/StickerService";
+import { GroupStickersResponse } from "../types/Types";
+
+export const useGetStickers = () => {
+  return useQuery({
+    queryKey: ["dpage-stickers"],
+    queryFn: api.getStickers,
+  });
+};
+
+export const useGetGroupStickers = () => {
+  return useQuery<GroupStickersResponse>({
+    queryKey: ["dpage-group-stickers"],
+    queryFn: api.getGroupStickers,
+  });
+};
+
+export const useCreateSticker = () => {
+  return useMutation({
+    mutationFn: api.createSticker,
+  });
+};
+
+export const useDeleteSticker = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteSticker(id),
+  });
+};

src/pages/dpage/service/StickerService.ts

@@ -0,0 +1,26 @@
+import axios from "../../../config/axios";
+import {
+  CreateStickerType,
+  GroupStickersResponse,
+  StickersResponse,
+} from "../types/Types";
+
+export const getStickers = async (): Promise<StickersResponse> => {
+  const { data } = await axios.get("/admin/dpage/stickers");
+  return data;
+};
+
+export const getGroupStickers = async (): Promise<GroupStickersResponse> => {
+  const { data } = await axios.get("/admin/dpage/stickers/groups");
+  return data;
+};
+
+export const createSticker = async (params: CreateStickerType) => {
+  const { data } = await axios.post("/admin/dpage/stickers", params);
+  return data;
+};
+
+export const deleteSticker = async (id: string) => {
+  const { data } = await axios.delete(`/admin/dpage/stickers/${id}`);
+  return data;
+};

src/pages/dpage/sticker/List.tsx

@@ -0,0 +1,144 @@
+import { useState, type FC } from 'react'
+import { useGetStickers, useDeleteSticker } from '../hooks/useStickerData'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import { Add } from 'iconsax-react'
+import CreateSticker from './components/CreateSticker'
+import Td from '../../../components/Td'
+import Input from '../../../components/Input'
+import PageLoading from '../../../components/PageLoading'
+import TrashWithConfrim from '../../../components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+import { StickerType } from '../types/Types'
+import moment from 'moment-jalaali'
+
+const StickersList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const [search, setSearch] = useState<string>('')
+    const { data: stickersData, isLoading, refetch } = useGetStickers()
+    const deleteSticker = useDeleteSticker()
+
+    const handleCloseModal = () => {
+        setShowModal(false)
+        refetch()
+    }
+
+    const handleDelete = (id: string) => {
+        deleteSticker.mutate(id, {
+            onSuccess: () => {
+                refetch()
+                toast.success(t('success'))
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const stickers = (stickersData as unknown as { data?: StickerType[] })?.data || []
+    const filteredStickers = stickers.filter((sticker: StickerType) =>
+        sticker.url.toLowerCase().includes(search.toLowerCase()) ||
+        sticker.group?.name?.toLowerCase().includes(search.toLowerCase())
+    )
+
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('sticker.list_sticker')}
+                </div>
+
+                <Button
+                    className='w-[172px]'
+                    onClick={() => setShowModal(true)}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <Add size={20} color='white' />
+                        <div>
+                            {t('sticker.add_new_sticker')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-4'>
+                <div className='flex justify-end items-center'>
+                    <div className='xl:w-[300px] w-full'>
+                        <Input
+                            variant='search'
+                            placeholder={t('ads.search')}
+                            className='bg-white w-full'
+                            onChangeSearchFinal={(value) => setSearch(value)}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {
+                isLoading ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm'>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={t('sticker.url')} />
+                                    <Td text={t('sticker.group')} />
+                                    <Td text={t('sticker.created_at')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    filteredStickers.map((item: StickerType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={''}>
+                                                    <div className='flex items-center gap-3'>
+                                                        <div className='size-10 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center'>
+                                                            <img
+                                                                src={item.url}
+                                                                alt={item.url}
+                                                                className='size-full object-contain'
+                                                                onError={(e) => {
+                                                                    const target = e.target as HTMLImageElement
+                                                                    target.style.display = 'none'
+                                                                }}
+                                                            />
+                                                        </div>
+                                                        <div className='truncate max-w-xs' title={item.url}>
+                                                            {item.url}
+                                                        </div>
+                                                    </div>
+                                                </Td>
+                                                <Td text={item.group?.name || '-'} />
+                                                <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
+                                                <Td text={''}>
+                                                    <div className='flex gap-2 items-center'>
+                                                        <TrashWithConfrim
+                                                            onDelete={() => handleDelete(item.id)}
+                                                            isLoading={deleteSticker.isPending}
+                                                        />
+                                                    </div>
+                                                </Td>
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+            <CreateSticker
+                open={showModal}
+                close={handleCloseModal}
+            />
+        </div>
+    )
+}
+
+export default StickersList

src/pages/dpage/sticker/components/CreateSticker.tsx

@@ -0,0 +1,139 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../../components/Button'
+import DefaulModal from '../../../../components/DefaulModal'
+import UploadBox from '../../../../components/UploadBox'
+import Select from '../../../../components/Select'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { toast } from 'react-toastify'
+import { TickCircle } from 'iconsax-react'
+import { useCreateSticker, useGetGroupStickers } from '../../hooks/useStickerData'
+import { useSingleUpload } from '../../../service/hooks/useServiceData'
+import { CreateStickerType, GroupStickerType } from '../../types/Types'
+import { ErrorType } from '../../../../helpers/types'
+
+interface CreateStickerProps {
+    open: boolean
+    close: () => void
+    onSuccess?: () => void
+}
+
+const CreateSticker: FC<CreateStickerProps> = ({ open, close, onSuccess }) => {
+    const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const createSticker = useCreateSticker()
+    const singleUpload = useSingleUpload()
+    const { data: groupStickers } = useGetGroupStickers()
+
+    const groups = (groupStickers as unknown as { data?: GroupStickerType[] })?.data || []
+    const groupOptions = groups.map((group: GroupStickerType) => ({
+        value: group.id,
+        label: group.name
+    }))
+
+    const handleCreateSticker = (values: CreateStickerType) => {
+        createSticker.mutate(values, {
+            onSuccess: () => {
+                formik.resetForm()
+                setFile(undefined)
+                close()
+                toast.success(t('success'))
+                onSuccess?.()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const formik = useFormik<CreateStickerType>({
+        initialValues: {
+            url: '',
+            groupId: ''
+        },
+        validationSchema: Yup.object({
+            groupId: Yup.string()
+                .required(t('errors.required'))
+        }),
+        onSubmit: async (values) => {
+            if (!file) {
+                toast.error(t('errors.required'))
+                return
+            }
+            const formData = new FormData()
+            formData.append('file', file)
+            await singleUpload.mutateAsync(formData, {
+                onSuccess: (data) => {
+                    values.url = data?.data?.url
+                    handleCreateSticker(values)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    const handleClose = () => {
+        formik.resetForm()
+        setFile(undefined)
+        close()
+    }
+
+    return (
+        <DefaulModal
+            open={open}
+            close={handleClose}
+            title_header={t('sticker.add_new_sticker')}
+            isHeader
+        >
+            <div className='mt-6'>
+                <UploadBox
+                    label={t('sticker.url')}
+                    onChange={(files) => setFile(files[0])}
+                    isReset={!open}
+                    accept="image/svg+xml"
+                />
+
+                <div className='mt-4'>
+                    <Select
+                        label={t('sticker.group')}
+                        className='bg-white bg-opacity-30'
+                        items={groupOptions}
+                        placeholder={t('sticker.select_group')}
+                        {...formik.getFieldProps('groupId')}
+                        error_text={formik.touched.groupId && formik.errors.groupId ? formik.errors.groupId : ''}
+                    />
+                </div>
+
+                <div className='mt-12 border-t border-border pt-5 flex justify-end'>
+                    <div className='flex gap-5 items-center'>
+                        <Button
+                            className='w-[150px] bg-white bg-opacity-15 text-description'
+                            label={t('cancel')}
+                            onClick={handleClose}
+                        />
+
+                        <Button
+                            onClick={() => formik.handleSubmit()}
+                            isLoading={createSticker.isPending || singleUpload.isPending}
+                        >
+                            <div className='flex gap-2'>
+                                <TickCircle
+                                    size={20}
+                                    color='white'
+                                />
+                                <div>
+                                    {t('submit')}
+                                </div>
+                            </div>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default CreateSticker

src/pages/dpage/types/Types.ts

@@ -0,0 +1,40 @@
+import { IResponse } from "../../../types/response.types";
+
+export type CreateStickerType = {
+  url: string;
+  groupId: string;
+};
+
+export type StickerGroupType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+};
+
+export type StickerType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  url: string;
+  group: StickerGroupType;
+};
+
+export interface StickersResponse extends IResponse<StickerType[]> {
+  statusCode: number;
+}
+
+export type GroupStickerType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  stickers: unknown[];
+};
+
+export interface GroupStickersResponse extends IResponse<GroupStickerType[]> {
+  statusCode: number;
+}

src/pages/reseller/Create.tsx

@@ -0,0 +1,83 @@
+import { useFormik } from 'formik'
+import { type FC } from 'react'
+import { CreateResellerType } from './types/Types'
+import * as Yup from 'yup'
+import Button from '../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useCreateResellers } from './hooks/useResellerData'
+import { useNavigate } from 'react-router-dom'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
+import Input from '../../components/Input'
+
+const CreateReseller: FC = () => {
+
+    const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const create = useCreateResellers()
+
+    const formik = useFormik<CreateResellerType>({
+        initialValues: {
+            name: '',
+            phone: ''
+        },
+        validationSchema: Yup.object({
+            name: Yup.string().required(t('errors.required')),
+            phone: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: (values) => {
+            create.mutate(values, {
+                onSuccess: () => {
+                    navigate(-1)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('discount.new_discount')}
+                </div>
+                <Button
+                    className='w-[172px]'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={create.isPending}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <TickCircle size={20} color='white' />
+                        <div>
+                            {t('reseller.submit')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='flex gap-6 xl:mt-8 mt-4'>
+                <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                    <div>
+                        <Input
+                            label={t('reseller.name')}
+                            {...formik.getFieldProps('name')}
+                            error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label={t('reseller.phone')}
+                            {...formik.getFieldProps('phone')}
+                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateReseller

src/pages/reseller/List.tsx

@@ -0,0 +1,70 @@
+import { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import Button from '../../components/Button'
+import { Add } from 'iconsax-react'
+import { useGetResellers } from './hooks/useResellerData'
+import PageLoading from '../../components/PageLoading'
+import Td from '../../components/Td'
+import { ResellerItemType } from './types/Types'
+
+const ResellerList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const getReseller = useGetResellers()
+
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('reseller.list')}
+                </div>
+
+                <Link to={Pages.reseller.create}>
+                    <Button
+                        className='w-[172px]'
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <Add size={20} color='white' />
+                            <div>
+                                {t('reseller.add_new')}
+                            </div>
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+
+            {
+                getReseller.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm '>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={t('reseller.name')} />
+                                    <Td text={t('reseller.user')} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    getReseller?.data?.data?.map((item: ResellerItemType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={item.name} />
+                                                <Td text={item?.owner?.firstName + ' ' + item.owner?.lastName} />
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+        </div>
+    )
+}
+
+export default ResellerList

src/pages/reseller/Withdraw.tsx

@@ -0,0 +1,93 @@
+import { useState, type FC } from 'react'
+import { useGetWithdraws } from './hooks/useResellerData'
+import { useTranslation } from 'react-i18next'
+import PageLoading from '../../components/PageLoading'
+import Td from '../../components/Td'
+import { WithDrawItemType } from './types/Types'
+import { NumberFormat } from '../../config/func'
+import moment from 'moment-jalaali'
+import Pagination from '../../components/Pagination'
+import DefaulModal from '../../components/DefaulModal'
+import Input from '../../components/Input'
+import Payment from './components/Payment'
+
+const Withdraw: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const getWithdraw = useGetWithdraws(page)
+
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('reseller.withdraws')}
+                </div>
+            </div>
+
+            {
+                getWithdraw.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm '>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={t('reseller.requestedAmount')} />
+                                    <Td text={t('reseller.user')} />
+                                    <Td text={t('reseller.paitAt')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    getWithdraw?.data?.data?.requests?.map((item: WithDrawItemType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={NumberFormat(+item.requestedAmount)} />
+                                                <Td text={item?.user?.firstName + ' ' + item.user?.lastName} />
+                                                <Td text={item?.paidAt ? moment(item.paidAt).format('jYYYY-jMM-jDD') : '-'} />
+                                                <Td text=''>
+                                                    {
+                                                        !item.paidAt ?
+                                                            <Payment id={item.id} refetch={getWithdraw.refetch} />
+                                                            :
+                                                            <span className='text-green-400 font-bold'>پرداخت شده</span>
+                                                    }
+                                                </Td>
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+            <Pagination
+                currentPage={page}
+                onPageChange={setPage}
+                totalPages={getWithdraw.data?.data?.pager?.totalPages}
+            />
+
+            <DefaulModal
+                open={showModal}
+                close={() => setShowModal(false)}
+                isHeader
+                title_header='پرداخت'
+            >
+
+                <div className='mt-5'>
+                    <Input
+
+                    />
+                </div>
+
+            </DefaulModal>
+
+        </div>
+    )
+}
+
+export default Withdraw

src/pages/reseller/components/Payment.tsx

@@ -0,0 +1,72 @@
+import { useState, type FC } from 'react'
+import Button from '../../../components/Button'
+import DefaulModal from '../../../components/DefaulModal'
+import { usePayment } from '../hooks/useResellerData'
+import Input from '../../../components/Input'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    id: string,
+    refetch: () => void,
+}
+
+const Payment: FC<Props> = ({ id, refetch }) => {
+
+    const payment = usePayment()
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const [transactionId, setTransactionId] = useState<string>('')
+
+    const handleSubmit = () => {
+        if (transactionId.length > 0) {
+            payment.mutate({ id: id, transactionId: transactionId }, {
+                onSuccess: () => {
+                    toast('با موفقت ثبت شد')
+                    setTransactionId('')
+                    refetch()
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error.message[0])
+                }
+            })
+        } else {
+            toast.error('شماره تراکنش رو پر کنید')
+        }
+    }
+
+    return (
+        <div>
+            <Button
+                className='w-fit px-4'
+                label='پرداخت'
+                onClick={() => setShowModal(true)}
+            />
+
+            <DefaulModal
+                open={showModal}
+                close={() => setShowModal(false)}
+                isHeader
+                title_header='پرداخت'
+            >
+                <div className='mt-4'>
+                    <Input
+                        value={transactionId}
+                        onChange={(e) => setTransactionId(e.target.value)}
+                        label='شماره تراکنش'
+                    />
+                </div>
+
+                <div className='mt-5'>
+                    <Button
+                        label='ثبت'
+                        onClick={handleSubmit}
+                        isLoading={payment.isPending}
+                    />
+                </div>
+
+            </DefaulModal>
+        </div>
+    )
+}
+
+export default Payment

src/pages/reseller/hooks/useResellerData.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/ResellerService";
+
+export const useGetResellers = () => {
+  return useQuery({
+    queryKey: ["resellers"],
+    queryFn: api.getResellers,
+  });
+};
+
+export const useCreateResellers = () => {
+  return useMutation({
+    mutationFn: api.createReseller,
+  });
+};
+
+export const useGetWithdraws = (page: number) => {
+  return useQuery({
+    queryKey: ["withdraw", page],
+    queryFn: () => api.getWithDraws(page),
+  });
+};
+
+export const usePayment = () => {
+  return useMutation({
+    mutationFn: api.payment,
+  });
+};

src/pages/reseller/service/ResellerService.ts

@@ -0,0 +1,27 @@
+import axios from "../../../config/axios";
+import { CreateResellerType, PaymentType } from "../types/Types";
+
+export const getResellers = async () => {
+  const { data } = await axios.get(`/reseller`);
+  return data;
+};
+
+export const createReseller = async (params: CreateResellerType) => {
+  const { data } = await axios.post(`/reseller`, params);
+  return data;
+};
+
+export const getWithDraws = async (page: number) => {
+  const { data } = await axios.get(
+    `/reseller/withdraw-request/admin?page=${page}`,
+  );
+  return data;
+};
+
+export const payment = async (params: PaymentType) => {
+  const { data } = await axios.patch(
+    `/reseller/withdraw-request/${params.id}`,
+    params,
+  );
+  return data;
+};

src/pages/reseller/types/Types.ts

@@ -0,0 +1,25 @@
+import { UserItemType } from "../../users/types/UserTypes";
+
+export type ResellerItemType = {
+  createdAt: string;
+  id: string;
+  name: string;
+  owner: UserItemType;
+};
+
+export type CreateResellerType = {
+  name: string;
+  phone: string;
+};
+
+export type WithDrawItemType = {
+  id: string;
+  user: UserItemType;
+  requestedAmount: string;
+  paidAt: string;
+};
+
+export type PaymentType = {
+  transactionId: string;
+  id: string;
+};

src/pages/subscriptions/List.tsx

@@ -134,10 +134,12 @@ const SubscriptionsList: FC = () => {
                         placeholder={t('header.search')}
                         value={search}
                         className='bg-white'
-                        onChange={(e) => setSearch(e.target.value)}
+                        // onChange={(e) => setSearch(e.target.value)}
                         onChangeSearchFinal={(value) => {
-                            setSearch(value)
+                            if (value !== search) {
-                            setPage(1)
+                                setSearch(value)
+                                setPage(1)
+                            }
                         }}
                     />
                 </div>

src/router/Main.tsx

@@ -89,7 +89,12 @@ import DkalaWarningsList from '../pages/dkala/report/List.tsx'
 import ShopsList from '../pages/dkala/shop/List.tsx'
 import DkalaSmsCountList from '../pages/dkala/shop/SmsCountList.tsx'
 import UpdateShop from '../pages/dkala/shop/Update.tsx'
+import DpageStickersList from '../pages/dpage/sticker/List'
 import SubscriptionsList from '../pages/subscriptions/List.tsx'
+import Domains from '../pages/dmail/Domains.tsx'
+import ResellerList from '../pages/reseller/List.tsx'
+import CreateReseller from '../pages/reseller/Create.tsx'
+import Withdraw from '../pages/reseller/Withdraw.tsx'
 // import WarningsList from '../pages/dmenu/reports/List' // TODO: Create this component
 const MainRouter: FC = () => {
 
@@ -194,7 +199,15 @@ const MainRouter: FC = () => {
                             <Route path={Pages.dkala.shops.smsCountList} element={<DkalaSmsCountList />} />
                             <Route path={Pages.dkala.shops.update + ':id'} element={<UpdateShop />} />
 
+                            <Route path={Pages.dpage.stickers.list} element={<DpageStickersList />} />
+
                             <Route path={Pages.subscriptions.list} element={<SubscriptionsList />} />
+
+                            <Route path={Pages.dmail.list} element={<Domains />} />
+
+                            <Route path={Pages.reseller.list} element={<ResellerList />} />
+                            <Route path={Pages.reseller.create} element={<CreateReseller />} />
+                            <Route path={Pages.reseller.withdraw} element={<Withdraw />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -1,8 +1,8 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, useState } from 'react'
 import LogoImage from '../assets/images/logo.svg'
 import LogoSmall from '../assets/images/logo-small.svg'
 import { useTranslation } from 'react-i18next'
-import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, BagTick } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, Chart21, ArrowDown2, Global, UserTick, Money } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -31,6 +31,8 @@ const SideBar: FC = () => {
         return location.pathname.includes(name)
     }
 
+    const [openMenu, setOpenMenu] = useState<string[]>(['menu'])
+
     useEffect(() => {
 
         const split = location.pathname.split('/')
@@ -51,6 +53,17 @@ const SideBar: FC = () => {
 
     const iconSizeSideBar = 20
 
+    const handleOpenMenu = (name: string) => {
+        const opens = [...openMenu]
+        const index = opens.findIndex(o => o === name)
+        if (index > -1) {
+            opens.splice(index, 1)
+        } else {
+            opens.push(name)
+        }
+        setOpenMenu(opens)
+    }
+
 
     return (
         <>
@@ -74,14 +87,26 @@ const SideBar: FC = () => {
                 </div>
 
                 <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
-                    <div className={clx(
+                    <div onClick={() => handleOpenMenu('menu')} className={clx(
-                        'mt-10 px-12 text-header text-sm font-normal',
+                        'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                        hasSubMenu && 'px-2 text-center'
+                        hasSubMenu && 'px-2 text-center',
+                        !hasSubMenu && 'flex gap-2 items-center'
                     )}>
                         {t('sidebar.menu')}
+
+                        <div className={clx(
+                            'transition-all',
+                            !openMenu.includes('menu') && 'rotate-180',
+                            hasSubMenu && 'hidden'
+                        )}>
+                            <ArrowDown2 size={18} color='#c3c7dd' />
+                        </div>
                     </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
+                    <div className={clx(
+                        'text-xs text-[#8C90A3]',
+                        !openMenu.includes('menu') && 'hidden'
+                    )}>
                         <SideBarItem
                             icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.mainpage')}
@@ -129,20 +154,8 @@ const SideBar: FC = () => {
                         />
 
 
-                        <SideBarItem
+
-                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+
-                            title={t('sidebar.receipt_list')}
-                            isActive={isActive('receipts')}
-                            link={Pages.receipts.index}
-                            activeName='invoices'
-                        />
-                        <SideBarItem
-                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.transactions')}
-                            isActive={isActive('transactions')}
-                            link={Pages.transactions}
-                            activeName='transactions'
-                        />
                         <SideBarItem
                             icon={<Money3 variant={isActive('payments') ? 'Bold' : 'Outline'} color={isActive('payments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.payments')}
@@ -150,13 +163,7 @@ const SideBar: FC = () => {
                             link={Pages.payment.list}
                             activeName='payments'
                         />
-                        <SideBarItem
+
-                            icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.discounts')}
-                            isActive={isActive('discounts')}
-                            link={Pages.discount.list}
-                            activeName='discounts'
-                        />
                         <SideBarItem
                             icon={<Code variant={isActive('referral-code') ? 'Bold' : 'Outline'} color={isActive('referral-code') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.code_referral')}
@@ -179,38 +186,89 @@ const SideBar: FC = () => {
                             activeName='blogs'
                         />
 
+                    </div>
+
+                    {
+                        <div onClick={() => handleOpenMenu('financial')} className={clx(
+                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
+                            hasSubMenu && 'px-2 text-center',
+                            !hasSubMenu && 'flex gap-2 items-center'
+                        )}>
+                            {t('sidebar.financial')}
+
+                            <div className={clx(
+                                'transition-all',
+                                !openMenu.includes('financial') && 'rotate-180',
+                                hasSubMenu && 'hidden'
+                            )}>
+                                <ArrowDown2 size={18} color='#c3c7dd' />
+                            </div>
+                        </div>
+                    }
+                    <div className={clx(
+                        'text-xs text-[#8C90A3]',
+                        !openMenu.includes('financial') && 'hidden'
+                    )}>
+
                         <SideBarItem
-                            icon={<Message variant={isActive('feedback') ? 'Bold' : 'Outline'} color={isActive('feedback') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.feedback')}
+                            title={t('sidebar.receipt_list')}
-                            isActive={isActive('feedback')}
+                            isActive={isActive('receipts')}
-                            link={Pages.feedback.list}
+                            link={Pages.receipts.index}
-                            activeName='services'
+                            activeName='invoices'
                         />
 
                         <SideBarItem
-                            icon={<BagTick variant={isActive('subscriptions') ? 'Bold' : 'Outline'} color={isActive('subscriptions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.subscriptions')}
+                            title={t('sidebar.transactions')}
-                            isActive={isActive('subscriptions')}
+                            isActive={isActive('transactions')}
-                            link={Pages.subscriptions.list}
+                            link={Pages.transactions}
-                            activeName='payments'
+                            activeName='transactions'
                         />
 
+                        <SideBarItem
+                            icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.discounts')}
+                            isActive={isActive('discounts')}
+                            link={Pages.discount.list}
+                            activeName='discounts'
+                        />
+
+                        <SideBarItem
+                            icon={<Card variant={isActive('card') ? 'Bold' : 'Outline'} color={isActive('card') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.card')}
+                            isActive={isActive('card')}
+                            link={Pages.cardBank.list}
+                            activeName='bank_accounts'
+                        />
                     </div>
 
                     {
                         profile?.data?.user?.roles.some((role: { name: string }) => role.name === 'super_admin') &&
-                        <div className={clx(
+                        <div onClick={() => handleOpenMenu('other')} className={clx(
-                            'mt-10 px-12 text-header text-sm font-normal',
+                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                            hasSubMenu && 'px-2 text-center'
+                            hasSubMenu && 'px-2 text-center',
+                            !hasSubMenu && 'flex gap-2 items-center'
                         )}>
                             {t('sidebar.other')}
+
+                            <div className={clx(
+                                'transition-all',
+                                !openMenu.includes('other') && 'rotate-180',
+                                hasSubMenu && 'hidden'
+                            )}>
+                                <ArrowDown2 size={18} color='#c3c7dd' />
+                            </div>
                         </div>
                     }
 
 
 
 
-                    <div className='text-xs text-[#8C90A3]'>
+                    <div className={clx(
+                        'text-xs text-[#8C90A3]',
+                        !openMenu.includes('other') && 'hidden'
+                    )}>
                         <SideBarItem
                             icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.ticket')}
@@ -218,100 +276,180 @@ const SideBar: FC = () => {
                             link={Pages.ticket.list}
                             activeName='tickets'
                         />
-                    </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
                         <SideBarItem
-                            icon={<Activity variant={isActive('access-logs') ? 'Bold' : 'Outline'} color={isActive('access-logs') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Chart21 variant={isActive('feedback') ? 'Bold' : 'Outline'} color={isActive('feedback') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.accessLogs')}
+                            title={t('sidebar.feedback')}
-                            isActive={isActive('access-logs')}
+                            isActive={isActive('feedback')}
-                            link={Pages.accessLogs.list}
+                            link={Pages.feedback.list}
-                            name='accessLogs'
+                            activeName='services'
-                            activeName='logs'
                         />
-                    </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
-                        <SideBarItem
-                            icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.criticisms')}
-                            isActive={isActive('criticisms')}
-                            link={Pages.criticisms.list}
-                            activeName='criticisms'
-                        />
-                    </div>
 
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<Activity variant={isActive('access-logs') ? 'Bold' : 'Outline'} color={isActive('access-logs') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.accessLogs')}
+                                isActive={isActive('access-logs')}
+                                link={Pages.accessLogs.list}
+                                name='accessLogs'
+                                activeName='logs'
+                            />
+                        </div>
+
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.criticisms')}
+                                isActive={isActive('criticisms')}
+                                link={Pages.criticisms.list}
+                                activeName='criticisms'
+                            />
+                        </div>
+                    </div>
                     {
                         profile?.data?.user?.roles?.some((role: { name: string }) => role.name === 'super_admin') &&
-                        <div className={clx(
+                        <div onClick={() => handleOpenMenu('content')} className={clx(
-                            'mt-10 px-12 text-header text-sm font-normal',
+                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                            hasSubMenu && 'px-2 text-center text-xs'
+                            hasSubMenu && 'px-2 text-center text-xs',
+                            !hasSubMenu && 'flex gap-2 items-center'
                         )}>
                             {t('sidebar.mnage_content')}
+
+                            <div className={clx(
+                                'transition-all',
+                                !openMenu.includes('content') && 'rotate-180',
+                                hasSubMenu && 'hidden'
+                            )}>
+                                <ArrowDown2 size={18} color='#c3c7dd' />
+                            </div>
                         </div>
                     }
 
+                    {
+                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'reseller') &&
+                        <>
+                            <div onClick={() => handleOpenMenu('reseller')} className={clx(
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
+                            )}>
+                                {t('sidebar.reseller')}
 
-                    <div className='text-xs text-[#8C90A3]'>
+                                <div className={clx(
-                        <SideBarItem
+                                    'transition-all',
-                            icon={<DocumentLike variant={isActive('ads') ? 'Bold' : 'Outline'} color={isActive('ads') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    !openMenu.includes('reseller') && 'rotate-180',
-                            title={t('sidebar.ads')}
+                                    hasSubMenu && 'hidden'
-                            isActive={isActive('ads')}
+                                )}>
-                            link={Pages.ads.list}
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
-                            activeName='advertisements'
+                                </div>
-                        />
+                            </div>
-                    </div>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('reseller') && 'hidden'
 
-                    <div className='text-xs text-[#8C90A3]'>
+                            )}>
-                        <SideBarItem
-                            icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.announcement')}
-                            isActive={isActive('announcement')}
-                            link={Pages.announcement.list}
-                            activeName='announcements'
-                        />
-                    </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
+                                <div className='text-xs text-[#8C90A3]'>
-                        <SideBarItem
+                                    <SideBarItem
-                            icon={<DocumentText variant={isActive('blog') ? 'Bold' : 'Outline'} color={isActive('blog') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        icon={<UserTick variant={isActive('reseller/list') ? 'Bold' : 'Outline'} color={isActive('reseller/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.blog')}
+                                        title={t('sidebar.resellers')}
-                            isActive={isActive('blog')}
+                                        isActive={isActive('reseller/list')}
-                            link={Pages.blog.list}
+                                        link={Pages.reseller.list}
-                            activeName='blogs'
+                                        activeName='reseller'
-                        />
+                                    />
-                    </div>
+                                </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
+                                <div className='text-xs text-[#8C90A3]'>
-                        <SideBarItem
+                                    <SideBarItem
-                            icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        icon={<Money variant={isActive('reseller/withdraw') ? 'Bold' : 'Outline'} color={isActive('reseller/withdraw') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.learning')}
+                                        title={t('sidebar.withdraw')}
-                            isActive={isActive('learning')}
+                                        isActive={isActive('reseller/withdraw')}
-                            link={Pages.learning.list}
+                                        link={Pages.reseller.withdraw}
-                            activeName='learnings'
+                                        activeName='reseller'
-                        />
+                                    />
-                    </div>
+                                </div>
+                            </div>
+                        </>
+                    }
 
-                    <div className='text-xs text-[#8C90A3]'>
+
-                        <SideBarItem
+                    <div className={clx(
-                            icon={<SmsTracking variant={isActive('messages') ? 'Bold' : 'Outline'} color={isActive('messages') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                        !openMenu.includes('content') && 'hidden'
-                            title={t('sidebar.messages')}
+                    )}>
-                            isActive={isActive('messages')}
+                        <div className='text-xs text-[#8C90A3]'>
-                            link={Pages.messages.list}
+                            <SideBarItem
-                            activeName='contacts_us'
+                                icon={<DocumentLike variant={isActive('ads') ? 'Bold' : 'Outline'} color={isActive('ads') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        />
+                                title={t('sidebar.ads')}
+                                isActive={isActive('ads')}
+                                link={Pages.ads.list}
+                                activeName='advertisements'
+                            />
+                        </div>
+
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.announcement')}
+                                isActive={isActive('announcement')}
+                                link={Pages.announcement.list}
+                                activeName='announcements'
+                            />
+                        </div>
+
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<DocumentText variant={isActive('blog') ? 'Bold' : 'Outline'} color={isActive('blog') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.blog')}
+                                isActive={isActive('blog')}
+                                link={Pages.blog.list}
+                                activeName='blogs'
+                            />
+                        </div>
+
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.learning')}
+                                isActive={isActive('learning')}
+                                link={Pages.learning.list}
+                                activeName='learnings'
+                            />
+                        </div>
+
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<SmsTracking variant={isActive('messages') ? 'Bold' : 'Outline'} color={isActive('messages') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.messages')}
+                                isActive={isActive('messages')}
+                                link={Pages.messages.list}
+                                activeName='contacts_us'
+                            />
+                        </div>
                     </div>
 
                     {
                         adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dmenu') &&
                         <>
-                            <div className={clx(
+                            <div onClick={() => handleOpenMenu('dmenu')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal',
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center'
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
                             )}>
                                 {t('sidebar.dmenu')}
+
+                                <div className={clx(
+                                    'transition-all',
+                                    !openMenu.includes('dmenu') && 'rotate-180',
+                                    hasSubMenu && 'hidden'
+                                )}>
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
+                                </div>
                             </div>
-                            <div className='flex-1 flex flex-col justify-end'>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('dmenu') && 'hidden'
+                            )}>
 
                                 <div className='text-xs text-[#8C90A3]'>
                                     <SideBarItem
@@ -369,13 +507,26 @@ const SideBar: FC = () => {
                     {
                         adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dkala') &&
                         <>
-                            <div className={clx(
+                            <div onClick={() => handleOpenMenu('dkala')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal',
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center'
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
                             )}>
                                 {t('sidebar.dkala')}
+
+                                <div className={clx(
+                                    'transition-all',
+                                    !openMenu.includes('dkala') && 'rotate-180',
+                                    hasSubMenu && 'hidden'
+                                )}>
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
+                                </div>
                             </div>
-                            <div className='flex-1 flex flex-col justify-end'>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('dkala') && 'hidden'
+
+                            )}>
 
                                 <div className='text-xs text-[#8C90A3]'>
                                     <SideBarItem
@@ -429,16 +580,82 @@ const SideBar: FC = () => {
                             </div>
                         </>
                     }
+                    {
+                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dpage') &&
+                        <>
+                            <div onClick={() => handleOpenMenu('dpage')} className={clx(
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
+                            )}>
+                                {t('sidebar.dpage')}
+
+                                <div className={clx(
+                                    'transition-all',
+                                    !openMenu.includes('dpage') && 'rotate-180',
+                                    hasSubMenu && 'hidden'
+                                )}>
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
+                                </div>
+                            </div>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('dpage') && 'hidden'
+                            )}>
+
+                                <div className='text-xs text-[#8C90A3]'>
+                                    <SideBarItem
+                                        icon={<Icon variant={isActive('dpage/stickers/list') ? 'Bold' : 'Outline'} color={isActive('dpage/stickers/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        title={t('sidebar.sticker')}
+                                        isActive={isActive('dpage/stickers/list')}
+                                        link={Pages.dpage.stickers.list}
+                                        activeName='dpage'
+                                    />
+                                </div>
+                            </div>
+                        </>
+                    }
+
+                    {
+                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dmail') &&
+                        <>
+                            <div onClick={() => handleOpenMenu('dmail')} className={clx(
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
+                            )}>
+                                {t('sidebar.dmail')}
+
+                                <div className={clx(
+                                    'transition-all',
+                                    !openMenu.includes('dmail') && 'rotate-180',
+                                    hasSubMenu && 'hidden'
+                                )}>
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
+                                </div>
+                            </div>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('dmail') && 'hidden'
+
+                            )}>
+
+                                <div className='text-xs text-[#8C90A3]'>
+                                    <SideBarItem
+                                        icon={<Global variant={isActive('dmail/domain/list') ? 'Bold' : 'Outline'} color={isActive('dmail/domain/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        title={t('sidebar.domain')}
+                                        isActive={isActive('dmail/domain/list')}
+                                        link={Pages.dmail.list}
+                                        activeName='dmail'
+                                    />
+                                </div>
+                            </div>
+                        </>
+                    }
 
                     <div className='flex-1 flex flex-col justify-end mt-14'>
                         <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
+
-                                icon={<Card variant={isActive('card') ? 'Bold' : 'Outline'} color={isActive('card') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.card')}
-                                isActive={isActive('card')}
-                                link={Pages.cardBank.list}
-                                activeName='bank_accounts'
-                            />
                         </div>
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem

src/shared/components/CustomerSubMenu.tsx

@@ -36,6 +36,11 @@ const CustomerSubMenu: FC = () => {
                     isActive={isActive('create')}
                     link={Pages.customer.create}
                 />
+                <SubMenuItem
+                    title={t('sidebar.subscriptions')}
+                    isActive={isActive('subscriptions')}
+                    link={Pages.subscriptions.list}
+                />
             </div>
 
         </div>