Add plan remaining

src/components/DefaulModal.tsx

@@ -28,7 +28,7 @@ const DefaulModal: FC<Props> = (props: Props) => {
                     <Fragment>
                         <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
                             <div className='relative xl:h-full max-h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
-                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none'>
+                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none max-h-[85%]'>
 
 
                                     {

src/shared/SideBar.tsx

@@ -10,6 +10,7 @@ import { Paths } from '@/utils/Paths'
 import Storage from './components/Storage'
 import { useGetDomains } from '@/pages/setting/domain/hooks/useDomainData'
 import { toast } from '@/components/Toast'
+import PlanRemaining from './components/PlanRemaining'
 
 const SideBar: FC = () => {
 
@@ -31,6 +32,7 @@ const SideBar: FC = () => {
         setOpenSidebar(false)
     }
 
+
     return (
         <>
             {
@@ -108,6 +110,7 @@ const SideBar: FC = () => {
                     </div>
 
                     <div className='flex-1 flex flex-col justify-end mt-10 md:mt-14 pb-6 md:pb-8'>
+                        <PlanRemaining />
                         <Storage />
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem

src/shared/components/PlanRemaining.tsx

@@ -0,0 +1,71 @@
+import { FC, useMemo } from 'react'
+import { Calendar } from 'iconsax-react'
+import moment from 'moment-jalaali'
+import Button from '@/components/Button'
+import { useWorkspaces } from '@/pages/home/hooks/useHomeData'
+import { workspaceItem } from '@/pages/home/types/HomeTypes'
+
+const PlanRemaining: FC = () => {
+    const getWorkspaces = useWorkspaces()
+
+    const currentWorkspace = useMemo(() => {
+        if (getWorkspaces.data?.data?.workspaces) {
+            const workspaceId = localStorage.getItem(import.meta.env.VITE_WORKSPACE_ID)
+            return getWorkspaces.data?.data?.workspaces.find((item: workspaceItem) => item.id === workspaceId)
+        }
+        return null
+    }, [getWorkspaces.data])
+
+    const remainingDays = useMemo(() => {
+        if (currentWorkspace?.endDate) {
+            const endDate = moment(currentWorkspace.endDate)
+            const now = moment()
+            const days = endDate.diff(now, 'days')
+            return days > 0 ? days : 0
+        }
+        return null
+    }, [currentWorkspace])
+
+    if (!currentWorkspace || remainingDays === null) {
+        return null
+    }
+
+    return (
+        <div className='px-10 pb-5 mb-5 border-b border-[#ECEEF5]'>
+            <div className='flex gap-2 items-center'>
+                <Calendar size={20} color='#8C90A3' />
+                <div className='text-xs text-description'>
+                    زمان باقی‌مانده پلن
+                </div>
+            </div>
+            <div className='mt-3 text-xs text-[#8C90A3]'>
+                {remainingDays > 0 ? (
+                    <span className='text-[#F59E0B] font-medium'>
+                        {remainingDays} روز تا پایان پلن
+                    </span>
+                ) : (
+                    <span className='text-red-500 font-medium'>
+                        پلن شما منقضی شده است
+                    </span>
+                )}
+            </div>
+            {currentWorkspace.endDate && (
+                <div className='mt-2 text-xs text-[#8C90A3]'>
+                    تاریخ پایان: {moment(currentWorkspace.endDate).format('jYYYY/jMM/jDD')}
+                </div>
+            )}
+            <div className='mt-4'>
+                <Button
+                    variant='primary'
+                    label='تمدید پلن'
+                    onClick={() => {
+                        window.open(`${import.meta.env.VITE_CONSOLE_URL}/services/detail/${currentWorkspace?.plan?.service?.slug}?id=${currentWorkspace?.plan?.id}`, '_blank')
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default PlanRemaining
+