docker mirror

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

@@ -153,6 +153,11 @@ export const Pages = {
       smsCountList: "/dkala/sms-count/list",
     },
   },
+  dpage: {
+    stickers: {
+      list: "/dpage/stickers/list",
+    },
+  },
   subscriptions: {
     list: "/customers/subscriptions",
   },

src/langs/fa.json

@@ -77,6 +77,8 @@
     "icons": "آیکون ها",
     "dmenu": "دی منو",
     "dkala": "دی کالا",
+    "dpage": "دی پیج",
+    "sticker": "استیکر",
     "groups_icon": "گروه های آیکون",
     "reports": "گزارش ها",
     "restaurants": "رستوران ها",
@@ -884,6 +886,14 @@
     "group": "گروه",
     "select_group": "انتخاب گروه"
   },
+  "sticker": {
+    "list_sticker": "لیست استیکر ها",
+    "add_new_sticker": "افزودن استیکر",
+    "created_at": "تاریخ ایجاد",
+    "url": "آدرس",
+    "group": "گروه",
+    "select_group": "انتخاب گروه"
+  },
   "report": {
     "list_report": "لیست گزارشات",
     "subject": "موضوع",

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/router/Main.tsx

@@ -89,6 +89,7 @@ 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'
@@ -198,6 +199,8 @@ 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 />} />

src/shared/SideBar.tsx

@@ -580,6 +580,42 @@ 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') &&
                         <>