show footer + add sidebar

src/config/Pages.ts

@@ -26,6 +26,7 @@ export const Pages = {
   company: {
     detail: "company/",
     my: "company/my",
+    list: "company-list",
   },
   grade: {
     records: "grade-records",

src/langs/fa.json

@@ -92,7 +92,9 @@
     "criticisms": "انتقادات",
     "learning": "آموزش",
     "setting": "تنظیمات",
-    "logout": "خروج"
+    "logout": "خروج",
+    "my_company": "شرکت من",
+    "companies": "لیست شرکت ها"
   },
   "header": {
     "search": "جستجو"

src/pages/company/List.tsx

@@ -0,0 +1,72 @@
+import { FC, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useGetCompanies, useGetIndustry } from '../home/hooks/useHomeData'
+import { buildPath, clx } from '../../helpers/utils'
+import { Building } from 'iconsax-react'
+import { CompanyItemType, IndustryItemType } from '../home/types/HomeTypes'
+import { Pages } from '../../config/Pages'
+
+const CompanyList: FC = () => {
+
+    const [activeIndustry, setActiveIndustry] = useState<string>('')
+    const { data: industry } = useGetIndustry()
+    const { data: companies } = useGetCompanies(activeIndustry)
+
+    return (
+        <div>
+            <div className='flex gap-2 mt-4 overflowX'>
+                <div className={clx(
+                    'h-9 bg-white rounded-full px-5 flex gap-2 items-center cursor-pointer',
+                    activeIndustry === '' ? 'bg-opacity-100' : 'bg-opacity-50'
+                )} onClick={() => setActiveIndustry('')}>
+                    <Building
+                        size={20}
+                        color='black'
+                    />
+                    <div className='text-sm'>
+                        همه
+                    </div>
+                </div>
+                {
+                    industry?.data?.industries?.map((item: IndustryItemType) => {
+                        return (
+                            <div key={item.id} className={clx(
+                                'h-9 bg-white rounded-full px-5 flex gap-2 items-center cursor-pointer',
+                                activeIndustry === item.id ? 'bg-opacity-100' : 'bg-opacity-50'
+                            )} onClick={() => setActiveIndustry(item.id)}>
+                                <img src={item.iconUrl} alt={item.title} className='size-5' />
+                                <div className='text-sm'>
+                                    {item.title}
+                                </div>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+
+            <div className='mt-6 flex gap-4 flex-wrap'>
+                {
+                    companies?.data?.companies?.map((item: CompanyItemType) => {
+                        return (
+                            <Link to={buildPath(Pages.company.detail + item.id)} key={item.id} className='flex-1 gap-2.5 bg-white min-w-[40%] h-20 flex items-center p-2 rounded-xl'>
+                                <div className='size-[64px] rounded-xl overflow-hidden'>
+                                    <img src={item.profileImageUrl} alt={item.name} className='size-full object-cover' />
+                                </div>
+                                <div className='text-xs'>
+                                    <div>
+                                        {item.name}
+                                    </div>
+                                    <div className='text-description mt-2'>
+                                        {item.address}
+                                    </div>
+                                </div>
+                            </Link>
+                        )
+                    })
+                }
+            </div>
+        </div>
+    )
+}
+
+export default CompanyList

src/router/Main.tsx

@@ -27,6 +27,7 @@ import AnnouncementtList from "../pages/annoncement/List"
 import AnnouncementDetail from "../pages/annoncement/Detail"
 import MyCompany from "../pages/company/MyCompany"
 import Setting from "../pages/setting/Setting"
+import CompanyList from "../pages/company/List"
 const MainRouter = () => {
     const { slug } = useParams()
     const getSlugId = useGetSlugId()
@@ -66,6 +67,7 @@ const MainRouter = () => {
                             <Route path="receipts/:id" element={<ReceiptsDetail />} />
                             <Route path="company/my" element={<MyCompany />} />
                             <Route path="company/:id" element={<CompanyDetail />} />
+                            <Route path="company-list" element={<CompanyList />} />
                             <Route path="criticisms" element={<AddCriticisms />} />
                             <Route path="grade/records" element={<GradeRecordes />} />
                             <Route path="certificate" element={<Certificate />} />

src/shared/Footer.tsx

@@ -1,11 +1,13 @@
-import { Buildings, Home2, Messages3, NotificationStatus, Receipt21 } from 'iconsax-react'
+import { Buildings, Buildings2, Home2, Messages3, NotificationStatus } from 'iconsax-react'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pages } from '../config/Pages'
 import { Link, useParams, useLocation } from 'react-router-dom'
+import { useSharedStore } from './store/sharedStore'
 
 const Footer: FC = () => {
 
+    const { isLogin } = useSharedStore()
     const { t } = useTranslation('global')
     const { slug } = useParams()
     const location = useLocation()
@@ -14,79 +16,78 @@ const Footer: FC = () => {
         return location.pathname.includes(path)
     }
 
-    return null
+    if (isLogin)
-
+        return (
-    return (
+            <div className='xl:hidden'>
-        <div className='xl:hidden'>
+                <div className='h-[60px] '></div>
-            <div className='h-[60px] '></div>
+                <div className='fixed bottom-2 z-10 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
-            <div className='fixed bottom-2 z-10 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
+                    <Link to={`/${slug}/${Pages.dashboard}`}>
-                <Link to={`/${slug}/${Pages.dashboard}`}>
+                        <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.dashboard) ? 'text-black' : 'text-description'}`}>
-                    <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.dashboard) ? 'text-black' : 'text-description'}`}>
+                            <Home2
-                        <Home2
+                                className='size-5'
-                            className='size-5'
+                                color={isActive(Pages.dashboard) ? 'black' : '#8C90A3'}
-                            color={isActive(Pages.dashboard) ? 'black' : '#8C90A3'}
+                                variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
-                            variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
+                            />
-                        />
+                            <div className='text-[10px]'>
-                        <div className='text-[10px]'>
+                                {t('footer.home')}
-                            {t('footer.home')}
-                        </div>
-                    </div>
-                </Link>
-                <Link to={`/${slug}/${Pages.receipts.index}`}>
-                    <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.receipts.index) ? 'text-black' : 'text-description'}`}>
-                        <Receipt21
-                            className='size-5'
-                            color={isActive(Pages.receipts.index) ? 'black' : '#8C90A3'}
-                            variant={isActive(Pages.receipts.index) ? 'Bold' : 'Linear'}
-                        />
-                        <div className='text-[10px]'>
-                            {t('footer.invoice')}
-                        </div>
-                    </div>
-                </Link>
-                <Link to={`/${slug}/${Pages.company.my}`}>
-                    <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.company.my) ? 'text-black' : 'text-description'}`}>
-                        <div className='bg-white p-1 rounded-full -mt-7'>
-                            <div className='bg-black flex justify-center items-center size-10 rounded-full'>
-                                <Buildings
-                                    className='size-5'
-                                    color='white'
-                                />
                             </div>
                         </div>
-                        <div className='text-[10px]'>
+                    </Link>
-                            {t('footer.my_company')}
+                    <Link to={`/${slug}/${Pages.company.list}`}>
+                        <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.company.list) ? 'text-black' : 'text-description'}`}>
+                            <Buildings2
+                                className='size-5'
+                                color={isActive(Pages.company.list) ? 'black' : '#8C90A3'}
+                                variant={isActive(Pages.company.list) ? 'Bold' : 'Linear'}
+                            />
+                            <div className='text-[10px]'>
+                                {t('footer.companies')}
+                            </div>
                         </div>
-                    </div>
+                    </Link>
-                </Link>
+                    <Link to={`/${slug}/${Pages.company.my}`}>
-                <Link to={`/${slug}/${Pages.announcement.list}`}>
+                        <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.company.my) ? 'text-black' : 'text-description'}`}>
-                    <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.announcement.list) ? 'text-black' : 'text-description'}`}>
+                            <div className='bg-white p-1 rounded-full -mt-7'>
-                        <NotificationStatus
+                                <div className='bg-black flex justify-center items-center size-10 rounded-full'>
-                            className='size-5'
+                                    <Buildings
-                            color={isActive(Pages.announcement.list) ? 'black' : '#8C90A3'}
+                                        className='size-5'
-                            variant={isActive(Pages.announcement.list) ? 'Bold' : 'Linear'}
+                                        color='white'
-                        />
+                                    />
-                        <div className='text-[10px]'>
+                                </div>
-                            {t('footer.announcements')}
+                            </div>
+                            <div className='text-[10px]'>
+                                {t('footer.my_company')}
+                            </div>
                         </div>
-                    </div>
+                    </Link>
-                </Link>
+                    <Link to={`/${slug}/${Pages.announcement.list}`}>
+                        <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.announcement.list) ? 'text-black' : 'text-description'}`}>
+                            <NotificationStatus
+                                className='size-5'
+                                color={isActive(Pages.announcement.list) ? 'black' : '#8C90A3'}
+                                variant={isActive(Pages.announcement.list) ? 'Bold' : 'Linear'}
+                            />
+                            <div className='text-[10px]'>
+                                {t('footer.announcements')}
+                            </div>
+                        </div>
+                    </Link>
 
-                <Link to={`/${slug}/${Pages.ticket.list}`}>
+                    <Link to={`/${slug}/${Pages.ticket.list}`}>
-                    <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.ticket.list) ? 'text-black' : 'text-description'}`}>
+                        <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.ticket.list) ? 'text-black' : 'text-description'}`}>
-                        <Messages3
+                            <Messages3
-                            className='size-5'
+                                className='size-5'
-                            color={isActive(Pages.ticket.list) ? 'black' : '#8C90A3'}
+                                color={isActive(Pages.ticket.list) ? 'black' : '#8C90A3'}
-                            variant={isActive(Pages.ticket.list) ? 'Bold' : 'Linear'}
+                                variant={isActive(Pages.ticket.list) ? 'Bold' : 'Linear'}
-                        />
+                            />
-                        <div className='text-[10px]'>
+                            <div className='text-[10px]'>
-                            {t('footer.tickets')}
+                                {t('footer.tickets')}
+                            </div>
                         </div>
-                    </div>
+                    </Link>
-                </Link>
+                </div>
             </div>
-        </div>
+        )
-    )
 }
 
 export default Footer

src/shared/Header.tsx

@@ -16,7 +16,7 @@ import { getToken } from '../config/func'
 
 const Header: FC = () => {
 
-    const [isLogin, setIsLogin] = useState(false)
+    const { isLogin, setIsLogin } = useSharedStore()
     const checkLogin = async () => {
         const token = await getToken()
         setIsLogin(!!token)

src/shared/SideBar.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import LogoImage from '../assets/images/logo.svg'
 import { useTranslation } from 'react-i18next'
-import { DocumentText, Home2, Logout, Messages3, NotificationStatus, Receipt21, Setting2 } from 'iconsax-react'
+import { Buildings2, DocumentText, Home2, Logout, Messages3, NotificationStatus, Receipt21, Setting2 } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -46,6 +46,20 @@ const SideBar: FC = () => {
                             link={Pages.dashboard}
                         />
 
+                        <SideBarItem
+                            icon={<Buildings2 variant={isActive('company-list') ? 'Bold' : 'Outline'} color={isActive('company-list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.companies')}
+                            isActive={isActive('company-list')}
+                            link={Pages.company.list}
+                        />
+
+                        <SideBarItem
+                            icon={<Buildings2 variant={isActive('company/my') ? 'Bold' : 'Outline'} color={isActive('company/my') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.my_company')}
+                            isActive={isActive('company/my')}
+                            link={Pages.company.my}
+                        />
+
 
 
                         <SideBarItem

src/shared/store/sharedStore.ts

@@ -6,4 +6,6 @@ export const useSharedStore = create<SharedStoreType>((set) => ({
   setOpenSidebar: (value) => set({ openSidebar: value }),
   slug: "",
   setSlug: (value) => set({ slug: value }),
+  isLogin: false,
+  setIsLogin: (value) => set({ isLogin: value }),
 }));

src/shared/types/SharedTypes.ts

@@ -3,4 +3,6 @@ export type SharedStoreType = {
   setOpenSidebar: (value: boolean) => void;
   slug: string;
   setSlug: (value: string) => void;
+  isLogin: boolean;
+  setIsLogin: (value: boolean) => void;
 };