hamid zarghami
71 lines
3.0 KiB
TypeScript
71 lines
3.0 KiB
TypeScript
import { FC, useEffect, useState } from 'react'
|
||
import { useWorkspaces } from './hooks/useHomeData'
|
||
import { workspaceItem } from './types/HomeTypes'
|
||
import moment from 'moment-jalaali'
|
||
import { toast } from 'react-toastify'
|
||
|
||
const Home: FC = () => {
|
||
|
||
const getWorkspaces = useWorkspaces()
|
||
const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
setSelectedWorkspace(localStorage.getItem(import.meta.env.VITE_WORKSPACE_ID))
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (getWorkspaces.isError && getWorkspaces.error instanceof Error) {
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const error = getWorkspaces.error as any;
|
||
if (error.response?.status === 403) {
|
||
toast.error(error.response?.data?.error.message[0])
|
||
localStorage.removeItem(import.meta.env.VITE_WORKSPACE_ID)
|
||
window.location.href = 'https://console.danakcorp.com'
|
||
}
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [getWorkspaces.isError, getWorkspaces.data])
|
||
|
||
|
||
const handleChangeWorkspace = (id: string) => {
|
||
localStorage.setItem(import.meta.env.VITE_WORKSPACE_ID, id)
|
||
setSelectedWorkspace(id)
|
||
window.location.reload()
|
||
}
|
||
|
||
return (
|
||
<div className='w-full flex gap-6'>
|
||
<div className='flex-1'>
|
||
|
||
<div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
|
||
{
|
||
getWorkspaces.data?.data?.workspaces?.map((item: workspaceItem) => {
|
||
return (
|
||
<div className={`p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl cursor-pointer transition-all duration-300 hover:shadow-lg ${selectedWorkspace === item.id ? 'border border-black' : ''}`}
|
||
onClick={() => handleChangeWorkspace(item.id)}
|
||
>
|
||
<div className='mt-5'>
|
||
{item.businessName}
|
||
</div>
|
||
|
||
<div className='mt-5'>
|
||
{item.plan?.name}
|
||
</div>
|
||
|
||
<div className='mt-5 flex gap-1'>
|
||
<div>تاریخ پایان: </div>
|
||
<div className='text-description text-sm'>{moment(item?.endDate).format('jYYYY/jMM/jDD')}</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
|
||
<div className='px-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px]'></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Home |