access logs + audio

src/shared/SideBar.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect } 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 } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -18,6 +18,7 @@ import LearningSubMenu from './components/LearningSubMenu'
 import BlogSubMenu from './components/BlogSubMenu'
 import { useGetProfile } from '../pages/profile/hooks/useProfileData'
 import SupportSubMenu from './components/SupportSubMenu'
+import AccessLogsSubMenu from './components/AccessLogsSubMenu'
 const SideBar: FC = () => {
 
     const { t } = useTranslation('global')
@@ -209,6 +210,17 @@ const SideBar: FC = () => {
                         />
                     </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} />}
@@ -335,7 +347,9 @@ const SideBar: FC = () => {
                                                     <BlogSubMenu />
                                                     : subMenuName === 'support' ?
                                                         <SupportSubMenu />
-                                                        : null
+                                                        : subMenuName === 'accessLogs' ?
+                                                            <AccessLogsSubMenu />
+                                                            : null
                     }
                 </div>
             }

src/shared/components/AccessLogsSubMenu.tsx

@@ -0,0 +1,62 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import SideBarItem from '../SideBarItem'
+import { DocumentText, Activity, Warning2, Shield } from 'iconsax-react'
+
+const AccessLogsSubMenu: FC = () => {
+    const { t } = useTranslation('global')
+    const location = useLocation()
+    const iconSizeSideBar = 20
+
+    const isActive = (name: string) => {
+        return location.pathname.includes(name)
+    }
+
+    return (
+        <div className='flex flex-col h-full'>
+            <div className='px-6 py-4 text-header text-sm font-normal'>
+                {t('sidebar.accessLogs')}
+            </div>
+
+            <div className='flex-1 px-6'>
+                <div className='text-xs text-[#8C90A3] space-y-2'>
+                    <SideBarItem
+                        icon={<Activity variant={isActive('access-logs/list') ? 'Bold' : 'Outline'} color={isActive('access-logs/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                        title="لیست لاگ‌ها"
+                        isActive={isActive('access-logs/list')}
+                        link={Pages.accessLogs.list}
+                        activeName='access_logs_list'
+                    />
+
+                    <SideBarItem
+                        icon={<DocumentText variant={isActive('access-logs/stats') ? 'Bold' : 'Outline'} color={isActive('access-logs/stats') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                        title="آمار لاگ‌ها"
+                        isActive={isActive('access-logs/stats')}
+                        link={Pages.accessLogs.stats}
+                        activeName='access_logs_stats'
+                    />
+
+                    <SideBarItem
+                        icon={<Warning2 variant={isActive('access-logs/errors') ? 'Bold' : 'Outline'} color={isActive('access-logs/errors') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                        title="لاگ‌های خطا"
+                        isActive={isActive('access-logs/errors')}
+                        link={Pages.accessLogs.errors}
+                        activeName='access_logs_errors'
+                    />
+
+                    <SideBarItem
+                        icon={<Shield variant={isActive('access-logs/permissions') ? 'Bold' : 'Outline'} color={isActive('access-logs/permissions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                        title="لاگ‌های مجوز"
+                        isActive={isActive('access-logs/permissions')}
+                        link={Pages.accessLogs.permissions}
+                        activeName='access_logs_permissions'
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AccessLogsSubMenu