From 762ea34de635d0b5c74e0d2357cecba0d20311bc Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Mon, 6 Apr 2026 11:01:25 +0330
Subject: [PATCH] sidebar clean

---
 src/config/Pages.ts                       |   2 +-
 src/langs/fa.json                         |   3 +-
 src/shared/SideBar.tsx                    | 340 ++++++++++++++--------
 src/shared/components/CustomerSubMenu.tsx |   5 +
 4 files changed, 227 insertions(+), 123 deletions(-)

diff --git a/src/config/Pages.ts b/src/config/Pages.ts
index 4357336..1f393d7 100644
--- a/src/config/Pages.ts
+++ b/src/config/Pages.ts
@@ -151,6 +151,6 @@ export const Pages = {
     },
   },
   subscriptions: {
-    list: "/subscriptions/list",
+    list: "/customers/subscriptions",
   },
 };
diff --git a/src/langs/fa.json b/src/langs/fa.json
index 590c686..594313f 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -82,7 +82,8 @@
     "restaurants": "رستوران ها",
     "shops": "فروشگاه ها",
     "sms_count": "تعداد پیامک",
-    "subscriptions": "اشتراک ها"
+    "subscriptions": "اشتراک ها",
+    "financial": "مالی"
   },
   "slider": {
     "new_slider": "اسلایدر جدید",
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index 98ae646..1ae3528 100644
--- a/src/shared/SideBar.tsx
+++ b/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 } 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(
-                        'mt-10 px-12 text-header text-sm font-normal',
-                        hasSubMenu && 'px-2 text-center'
+                    <div onClick={() => handleOpenMenu('menu')} 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.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} />}
-                            title={t('sidebar.feedback')}
-                            isActive={isActive('feedback')}
-                            link={Pages.feedback.list}
-                            activeName='services'
+                            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={<BagTick variant={isActive('subscriptions') ? 'Bold' : 'Outline'} color={isActive('subscriptions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.subscriptions')}
-                            isActive={isActive('subscriptions')}
-                            link={Pages.subscriptions.list}
-                            activeName='payments'
+                            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={<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(
-                            'mt-10 px-12 text-header text-sm font-normal',
-                            hasSubMenu && 'px-2 text-center'
+                        <div onClick={() => handleOpenMenu('other')} 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.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,133 @@ 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} />}
-                            title={t('sidebar.accessLogs')}
-                            isActive={isActive('access-logs')}
-                            link={Pages.accessLogs.list}
-                            name='accessLogs'
-                            activeName='logs'
+                            icon={<Chart21 variant={isActive('feedback') ? 'Bold' : 'Outline'} color={isActive('feedback') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.feedback')}
+                            isActive={isActive('feedback')}
+                            link={Pages.feedback.list}
+                            activeName='services'
                         />
-                    </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(
-                            'mt-10 px-12 text-header text-sm font-normal',
-                            hasSubMenu && 'px-2 text-center text-xs'
+                        <div onClick={() => handleOpenMenu('content')} className={clx(
+                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
+                            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>
                     }
 
 
-                    <div className='text-xs text-[#8C90A3]'>
-                        <SideBarItem
-                            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={clx(
+                        !openMenu.includes('content') && 'hidden'
+                    )}>
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                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={<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={<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={<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 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(
-                                'mt-10 px-12 text-header text-sm font-normal',
-                                hasSubMenu && 'px-2 text-center'
+                            <div onClick={() => handleOpenMenu('dmenu')} 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.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 +460,26 @@ const SideBar: FC = () => {
                     {
                         adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dkala') &&
                         <>
-                            <div className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal',
-                                hasSubMenu && 'px-2 text-center'
+                            <div onClick={() => handleOpenMenu('dkala')} 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.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
@@ -432,13 +536,7 @@ const SideBar: FC = () => {
 
                     <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
diff --git a/src/shared/components/CustomerSubMenu.tsx b/src/shared/components/CustomerSubMenu.tsx
index 4d42a72..bbb2a54 100644
--- a/src/shared/components/CustomerSubMenu.tsx
+++ b/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>