base design workspace

src/config/Pages.ts

@@ -167,6 +167,6 @@ export const Pages = {
     withdraw: "/reseller/withdraw",
   },
   taskmanager: {
-    list: "/taskmanager/list",
+    workspace: "/taskmanager/workspace/",
   },
 };

src/index.css

@@ -4,6 +4,7 @@
 
 html {
   direction: rtl;
+  min-height: 100%;
 }
 
 body {
@@ -16,6 +17,7 @@ body {
   background: #eceef6;
   font-weight: 300;
   overflow: hidden;
+  min-height: 100%;
 }
 html,
 body,

src/pages/taskmanager/HeaderWorkspace.tsx

@@ -0,0 +1,23 @@
+import { InfoCircle, Setting2, UserAdd } from "iconsax-react";
+
+const HeaderWorkspace = () => {
+  return (
+    <div className="flex justify-between items-center bg-primary h-[102px] px-8">
+      <div className="flex gap-4 items-center">
+        <div className="text-white text-xl">طراحی Dpage</div>
+        <InfoCircle size={20} color="white" />
+      </div>
+
+      <div className="flex gap-4 items-center">
+        <div className="flex gap-1 items-center px-2 rounded-lg bg-white h-8">
+          <UserAdd size={18} color="black" />
+          <div className="text-black text-xs">اشتراک گذاری</div>
+        </div>
+
+        <Setting2 size={20} color="white" />
+      </div>
+    </div>
+  );
+};
+
+export default HeaderWorkspace;

src/pages/taskmanager/workspace.tsx

@@ -0,0 +1,12 @@
+import { type FC } from "react";
+import HeaderWorkspace from "./HeaderWorkspace";
+
+const Workspace: FC = () => {
+  return (
+    <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden">
+      <HeaderWorkspace />
+    </div>
+  );
+};
+
+export default Workspace;

src/router/Main.tsx

@@ -1,151 +1,154 @@
-import { FC } from 'react'
+import { FC } from "react";
-import SideBar from '../shared/SideBar'
+import { Route, Routes, useLocation } from "react-router-dom";
-import Header from '../shared/Header'
+import { Pages } from "../config/Pages";
-import { Route, Routes } from 'react-router-dom'
+import { clx } from "../helpers/utils";
-import { Pages } from '../config/Pages'
+import AccessLogsList from "../pages/accessLogs/AccessLogsList";
-import Home from '../pages/home/Home'
+import AccessLogsStats from "../pages/accessLogs/AccessLogsStats";
-import MyServices from '../pages/service/MyServices'
+import ErrorLogs from "../pages/accessLogs/ErrorLogs";
-import DiscountsList from '../pages/discounts/DiscountsList'
+import PermissionLogs from "../pages/accessLogs/PermissionLogs";
-import CreateDiscount from '../pages/discounts/CreateDiscount'
+import AdsList from "../pages/ads/AdsList";
-import AdsList from '../pages/ads/AdsList'
+import CreateAds from "../pages/ads/CreateAds";
-import BlogList from '../pages/blog/BlogList'
+import UpdateAds from "../pages/ads/Update";
-import CreateBlog from '../pages/blog/CreateBlog'
+import Create from "../pages/annoncement/Create";
-import BlogCategory from '../pages/blog/BlogCategory'
+import AnnouncementtList from "../pages/annoncement/List";
-import CreateAds from '../pages/ads/CreateAds'
+import Update from "../pages/annoncement/Update";
-import TicketList from '../pages/ticket/TicketList'
+import BlogCategory from "../pages/blog/BlogCategory";
-import CreateTicket from '../pages/ticket/CreateTicket'
+import BlogList from "../pages/blog/BlogList";
-import TicketDetail from '../pages/ticket/Detail'
+import Comments from "../pages/blog/Comments";
-import TransactionList from '../pages/transaction/List'
+import CreateBlog from "../pages/blog/CreateBlog";
-import ReceiptsList from '../pages/receipts/List'
+import UpdateBlog from "../pages/blog/Update";
-import AnnouncementtList from '../pages/annoncement/List'
+import CreateBankCard from "../pages/cardBank/Create";
-import LearningList from '../pages/learning/List'
+import EditBankCard from "../pages/cardBank/Edit";
-import Setting from '../pages/setting/Setting'
+import CardBankList from "../pages/cardBank/List";
-import Wallet from '../pages/wallet/Wallet'
+import CriticismsDetail from "../pages/criticisms/Detail";
-import ReceiptsDetail from '../pages/receipts/Detail'
+import CriticismsList from "../pages/criticisms/List";
-import Profile from '../pages/profile/Profile'
+import CreateCustomer from "../pages/customer/Create";
-import OtherServices from '../pages/service/OtherServices'
+import CustomerList from "../pages/customer/List";
-import Footer from '../shared/Footer'
+import UpdateCustomer from "../pages/customer/Update";
-import DetailService from '../pages/service/DetailService'
+import CreateDiscount from "../pages/discounts/CreateDiscount";
-import { clx } from '../helpers/utils'
+import DiscountsList from "../pages/discounts/DiscountsList";
-import { useSharedStore } from '../shared/store/sharedStore'
+import UpdateDiscount from "../pages/discounts/UpdateDiscount";
-import CreateReceipt from '../pages/receipts/Create'
+import DkalaGroupIconList from "../pages/dkala/icon/GroupList";
-import AddService from '../pages/service/AddService'
+import DkalaIconsList from "../pages/dkala/icon/List";
-import ListService from '../pages/service/List'
+import DkalaWarningsList from "../pages/dkala/report/List.tsx";
-import Category from '../pages/service/Category'
+import ShopsList from "../pages/dkala/shop/List.tsx";
-import CustomerList from '../pages/customer/List'
+import DkalaSmsCountList from "../pages/dkala/shop/SmsCountList.tsx";
-import CreateCustomer from '../pages/customer/Create'
+import UpdateShop from "../pages/dkala/shop/Update.tsx";
-import TicketCategory from '../pages/ticket/Category'
+import Domains from "../pages/dmail/Domains.tsx";
-import MessagesList from '../pages/messages/List'
+import GroupIconList from "../pages/dmenu/icon/GroupList";
-import CriticismsList from '../pages/criticisms/List'
+import IconsList from "../pages/dmenu/icon/List";
-import CriticismsDetail from '../pages/criticisms/Detail'
+import WarningsList from "../pages/dmenu/report/List.tsx";
-import Create from '../pages/annoncement/Create'
+import RestaurantsList from "../pages/dmenu/restaurant/List.tsx";
-import UsersList from '../pages/users/List'
+import SmsCountList from "../pages/dmenu/restaurant/SmsCountList.tsx";
-import CreateUser from '../pages/users/Create'
+import UpdateRestaurant from "../pages/dmenu/restaurant/Update.tsx";
-import RolesList from '../pages/users/RolesList'
+import DpageStickersList from "../pages/dpage/sticker/List";
-import RoleCreate from '../pages/users/RoleCreate'
+import ListFeedback from "../pages/feedback/List";
-import MessageDetail from '../pages/messages/Detail'
+import CreateGuide from "../pages/guide/Create";
-import CreateBankCard from '../pages/cardBank/Create'
+import List from "../pages/guide/List";
-import CardBankList from '../pages/cardBank/List'
+import UpdateGuide from "../pages/guide/Update.tsx";
-import EditBankCard from '../pages/cardBank/Edit'
+import Home from "../pages/home/Home";
-import PaymentList from '../pages/payment/List'
+import LearningCategory from "../pages/learning/Category";
-import LearningCategory from '../pages/learning/Category'
+import CreateLearning from "../pages/learning/Create";
-import CreateLearning from '../pages/learning/Create'
+import LearningList from "../pages/learning/List";
-import Plans from '../pages/service/Plans'
+import MessageDetail from "../pages/messages/Detail";
-import GroupCreate from '../pages/users/GroupCreate'
+import MessagesList from "../pages/messages/List";
-import GroupList from '../pages/users/GroupList'
+import PaymentList from "../pages/payment/List";
-import Reviews from '../pages/service/Reviews'
+import Profile from "../pages/profile/Profile";
-import UpdateAds from '../pages/ads/Update'
+import CreateReceipt from "../pages/receipts/Create";
-import UpdateService from '../pages/service/UpdateService'
+import ReceiptsDetail from "../pages/receipts/Detail";
-import UpdateCustomer from '../pages/customer/Update'
+import ReceiptsList from "../pages/receipts/List";
-import UpdateBlog from '../pages/blog/Update'
+import CreateReseller from "../pages/reseller/Create.tsx";
-import Update from '../pages/annoncement/Update'
+import ResellerList from "../pages/reseller/List.tsx";
-import UpdateDiscount from '../pages/discounts/UpdateDiscount'
+import Withdraw from "../pages/reseller/Withdraw.tsx";
-import UpdateUser from '../pages/users/Update'
+import AddService from "../pages/service/AddService";
-import CreateSlider from '../pages/slider/Create'
+import Category from "../pages/service/Category";
-import SliderList from '../pages/slider/List'
+import DetailService from "../pages/service/DetailService";
-import UpdateSlider from '../pages/slider/Update'
+import ListService from "../pages/service/List";
-import Comments from '../pages/blog/Comments'
+import MyServices from "../pages/service/MyServices";
-import CreatePlan from '../pages/support/Create'
+import OtherServices from "../pages/service/OtherServices";
-import SupportList from '../pages/support/List'
+import Plans from "../pages/service/Plans";
-import UpdateSupport from '../pages/support/Update'
+import Reviews from "../pages/service/Reviews";
-import PlanUsers from '../pages/support/PlanUsers'
+import UpdateService from "../pages/service/UpdateService";
-import List from '../pages/guide/List'
+import Setting from "../pages/setting/Setting";
-import CreateGuide from '../pages/guide/Create'
+import CreateSlider from "../pages/slider/Create";
-import UpdateGuide from '../pages/guide/Update.tsx'
+import SliderList from "../pages/slider/List";
-import ListFeedback from '../pages/feedback/List'
+import UpdateSlider from "../pages/slider/Update";
-import AccessLogsList from '../pages/accessLogs/AccessLogsList'
+import SubscriptionsList from "../pages/subscriptions/List.tsx";
-import AccessLogsStats from '../pages/accessLogs/AccessLogsStats'
+import CreatePlan from "../pages/support/Create";
-import ErrorLogs from '../pages/accessLogs/ErrorLogs'
+import SupportList from "../pages/support/List";
-import PermissionLogs from '../pages/accessLogs/PermissionLogs'
+import PlanUsers from "../pages/support/PlanUsers";
-import IconsList from '../pages/dmenu/icon/List'
+import UpdateSupport from "../pages/support/Update";
-import GroupIconList from '../pages/dmenu/icon/GroupList'
+import Workspace from "../pages/taskmanager/workspace.tsx";
-import WarningsList from '../pages/dmenu/report/List.tsx'
+import TicketCategory from "../pages/ticket/Category";
-import RestaurantsList from '../pages/dmenu/restaurant/List.tsx'
+import CreateTicket from "../pages/ticket/CreateTicket";
-import SmsCountList from '../pages/dmenu/restaurant/SmsCountList.tsx'
+import TicketDetail from "../pages/ticket/Detail";
-import UpdateRestaurant from '../pages/dmenu/restaurant/Update.tsx'
+import TicketList from "../pages/ticket/TicketList";
-import DkalaIconsList from '../pages/dkala/icon/List'
+import TransactionList from "../pages/transaction/List";
-import DkalaGroupIconList from '../pages/dkala/icon/GroupList'
+import CreateUser from "../pages/users/Create";
-import DkalaWarningsList from '../pages/dkala/report/List.tsx'
+import GroupCreate from "../pages/users/GroupCreate";
-import ShopsList from '../pages/dkala/shop/List.tsx'
+import GroupList from "../pages/users/GroupList";
-import DkalaSmsCountList from '../pages/dkala/shop/SmsCountList.tsx'
+import UsersList from "../pages/users/List";
-import UpdateShop from '../pages/dkala/shop/Update.tsx'
+import RoleCreate from "../pages/users/RoleCreate";
-import DpageStickersList from '../pages/dpage/sticker/List'
+import RolesList from "../pages/users/RolesList";
-import SubscriptionsList from '../pages/subscriptions/List.tsx'
+import UpdateUser from "../pages/users/Update";
-import Domains from '../pages/dmail/Domains.tsx'
+import Wallet from "../pages/wallet/Wallet";
-import ResellerList from '../pages/reseller/List.tsx'
+import Footer from "../shared/Footer";
-import CreateReseller from '../pages/reseller/Create.tsx'
+import Header from "../shared/Header";
-import Withdraw from '../pages/reseller/Withdraw.tsx'
+import SideBar from "../shared/SideBar";
+import { useSharedStore } from "../shared/store/sharedStore";
 // import WarningsList from '../pages/dmenu/reports/List' // TODO: Create this component
 const MainRouter: FC = () => {
-
+  const { hasSubMenu } = useSharedStore();
-    const { hasSubMenu } = useSharedStore()
+  const { pathname } = useLocation();
+  const isWorkspace = pathname.startsWith(Pages.taskmanager.workspace);
 
   return (
-        <div className='p-4 overflow-hidden'>
+    <div className="p-4 overflow-hidden">
-            <SideBar />
+      {!isWorkspace && <SideBar />}
       <Header />
-            <div className={clx(
+      <div
-                'flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]',
+        className={clx(
-                hasSubMenu && 'xl:ms-[305px]',
+          "flex-1 mt-[68px] xl:mt-[81px]",
-            )}>
+          !isWorkspace && "xl:ms-[269px]",
-                <div className={clx(
+          !isWorkspace && hasSubMenu && "xl:ms-[305px]",
-                    `overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`,
+        )}
-                )}>
+      >
-                    <div className='pb-20'>
+        <div className={clx(`overflow-auto w-[${window.innerWidth}] h-[calc(100vh-113px)] flex flex-col`)}>
+          <div className="flex-1 min-h-0">
             <Routes>
               <Route path={Pages.dashboard} element={<Home />} />
               <Route path={Pages.services.mine} element={<MyServices />} />
               <Route path={Pages.services.other} element={<OtherServices />} />
-                            <Route path={Pages.services.detail + ':id'} element={<DetailService />} />
+              <Route path={Pages.services.detail + ":id"} element={<DetailService />} />
               <Route path={Pages.services.add} element={<AddService />} />
               <Route path={Pages.services.list} element={<ListService />} />
-                            <Route path={Pages.services.update + ':id'} element={<UpdateService />} />
+              <Route path={Pages.services.update + ":id"} element={<UpdateService />} />
               <Route path={Pages.services.category} element={<Category />} />
-                            <Route path={Pages.services.plan + ':id'} element={<Plans />} />
+              <Route path={Pages.services.plan + ":id"} element={<Plans />} />
               <Route path={Pages.services.review} element={<Reviews />} />
               <Route path={Pages.ticket.list} element={<TicketList />} />
               <Route path={Pages.ticket.create} element={<CreateTicket />} />
               <Route path={Pages.ticket.category} element={<TicketCategory />} />
-                            <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
+              <Route path={Pages.ticket.detail + ":id"} element={<TicketDetail />} />
               <Route path={Pages.ads.list} element={<AdsList />} />
               <Route path={Pages.ads.create} element={<CreateAds />} />
-                            <Route path={Pages.ads.update + ':id'} element={<UpdateAds />} />
+              <Route path={Pages.ads.update + ":id"} element={<UpdateAds />} />
               <Route path={Pages.discount.list} element={<DiscountsList />} />
               <Route path={Pages.discount.create} element={<CreateDiscount />} />
-                            <Route path={Pages.discount.detail + ':id'} element={<UpdateDiscount />} />
+              <Route path={Pages.discount.detail + ":id"} element={<UpdateDiscount />} />
               <Route path={Pages.blog.list} element={<BlogList />} />
               <Route path={Pages.blog.create} element={<CreateBlog />} />
               <Route path={Pages.blog.category} element={<BlogCategory />} />
-                            <Route path={Pages.blog.detail + ':id'} element={<UpdateBlog />} />
+              <Route path={Pages.blog.detail + ":id"} element={<UpdateBlog />} />
               <Route path={Pages.transactions} element={<TransactionList />} />
               <Route path={Pages.receipts.index} element={<ReceiptsList />} />
-                            <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
+              <Route path={Pages.receipts.detail + ":id"} element={<ReceiptsDetail />} />
               <Route path={Pages.receipts.create} element={<CreateReceipt />} />
               <Route path={Pages.announcement.list} element={<AnnouncementtList />} />
-                            <Route path={Pages.announcement.detail + ':id'} element={<Update />} />
+              <Route path={Pages.announcement.detail + ":id"} element={<Update />} />
               <Route path={Pages.announcement.create} element={<Create />} />
               <Route path={Pages.criticisms.list} element={<CriticismsList />} />
-                            <Route path={Pages.criticisms.detail + ':id'} element={<CriticismsDetail />} />
+              <Route path={Pages.criticisms.detail + ":id"} element={<CriticismsDetail />} />
               <Route path={Pages.learning.list} element={<LearningList />} />
               <Route path={Pages.learning.create} element={<CreateLearning />} />
               <Route path={Pages.learning.category} element={<LearningCategory />} />
@@ -154,31 +157,31 @@ const MainRouter: FC = () => {
               <Route path={Pages.profile} element={<Profile />} />
               <Route path={Pages.customer.list} element={<CustomerList />} />
               <Route path={Pages.customer.create} element={<CreateCustomer />} />
-                            <Route path={Pages.customer.update + ':id'} element={<UpdateCustomer />} />
+              <Route path={Pages.customer.update + ":id"} element={<UpdateCustomer />} />
               <Route path={Pages.messages.list} element={<MessagesList />} />
-                            <Route path={Pages.messages.detail + ':id'} element={<MessageDetail />} />
+              <Route path={Pages.messages.detail + ":id"} element={<MessageDetail />} />
               <Route path={Pages.users.list} element={<UsersList />} />
               <Route path={Pages.users.create} element={<CreateUser />} />
-                            <Route path={Pages.users.detail + ':id'} element={<UpdateUser />} />
+              <Route path={Pages.users.detail + ":id"} element={<UpdateUser />} />
               <Route path={Pages.users.roleList} element={<RolesList />} />
               <Route path={Pages.users.roleCreate} element={<RoleCreate />} />
               <Route path={Pages.users.groupAdd} element={<GroupCreate />} />
               <Route path={Pages.users.groupList} element={<GroupList />} />
               <Route path={Pages.cardBank.create} element={<CreateBankCard />} />
               <Route path={Pages.cardBank.list} element={<CardBankList />} />
-                            <Route path={Pages.cardBank.detail + ':id'} element={<EditBankCard />} />
+              <Route path={Pages.cardBank.detail + ":id"} element={<EditBankCard />} />
               <Route path={Pages.payment.list} element={<PaymentList />} />
               <Route path={Pages.sliders.create} element={<CreateSlider />} />
               <Route path={Pages.sliders.list} element={<SliderList />} />
-                            <Route path={Pages.sliders.detail + ':id'} element={<UpdateSlider />} />
+              <Route path={Pages.sliders.detail + ":id"} element={<UpdateSlider />} />
               <Route path={Pages.blog.comments} element={<Comments />} />
               <Route path={Pages.support.create} element={<CreatePlan />} />
               <Route path={Pages.support.list} element={<SupportList />} />
-                            <Route path={Pages.support.detail + ':id'} element={<UpdateSupport />} />
+              <Route path={Pages.support.detail + ":id"} element={<UpdateSupport />} />
-                            <Route path={Pages.support.planUsers + ':id'} element={<PlanUsers />} />
+              <Route path={Pages.support.planUsers + ":id"} element={<PlanUsers />} />
-                            <Route path={Pages.services.guide + ':id'} element={<List />} />
+              <Route path={Pages.services.guide + ":id"} element={<List />} />
-                            <Route path={Pages.services.guide + ':id/create'} element={<CreateGuide />} />
+              <Route path={Pages.services.guide + ":id/create"} element={<CreateGuide />} />
-                            <Route path={Pages.services.guide + ':id/:guideId'} element={<UpdateGuide />} />
+              <Route path={Pages.services.guide + ":id/:guideId"} element={<UpdateGuide />} />
               <Route path={Pages.feedback.list} element={<ListFeedback />} />
               <Route path={Pages.accessLogs.list} element={<AccessLogsList />} />
               <Route path={Pages.accessLogs.stats} element={<AccessLogsStats />} />
@@ -190,14 +193,14 @@ const MainRouter: FC = () => {
               <Route path={Pages.dmenu.warnings.list} element={<WarningsList />} />
               <Route path={Pages.dmenu.restaurants.list} element={<RestaurantsList />} />
               <Route path={Pages.dmenu.restaurants.smsCountList} element={<SmsCountList />} />
-                            <Route path={Pages.dmenu.restaurants.update + ':id'} element={<UpdateRestaurant />} />
+              <Route path={Pages.dmenu.restaurants.update + ":id"} element={<UpdateRestaurant />} />
 
               <Route path={Pages.dkala.icons.list} element={<DkalaIconsList />} />
               <Route path={Pages.dkala.icons.groupList} element={<DkalaGroupIconList />} />
               <Route path={Pages.dkala.warnings.list} element={<DkalaWarningsList />} />
               <Route path={Pages.dkala.shops.list} element={<ShopsList />} />
               <Route path={Pages.dkala.shops.smsCountList} element={<DkalaSmsCountList />} />
-                            <Route path={Pages.dkala.shops.update + ':id'} element={<UpdateShop />} />
+              <Route path={Pages.dkala.shops.update + ":id"} element={<UpdateShop />} />
 
               <Route path={Pages.dpage.stickers.list} element={<DpageStickersList />} />
 
@@ -208,13 +211,16 @@ const MainRouter: FC = () => {
               <Route path={Pages.reseller.list} element={<ResellerList />} />
               <Route path={Pages.reseller.create} element={<CreateReseller />} />
               <Route path={Pages.reseller.withdraw} element={<Withdraw />} />
+
+              <Route path={Pages.taskmanager.workspace + ":slug"} element={<Workspace />} />
             </Routes>
           </div>
+          <div className="h-20 shrink-0 xl:hidden" />
         </div>
       </div>
       <Footer />
     </div>
-    )
+  );
-}
+};
 
-export default MainRouter
+export default MainRouter;

src/shared/Header.tsx

@@ -5,6 +5,7 @@ import AvatarImage from '../assets/images/avatar_image.png'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
+import { clx } from '../helpers/utils'
 import Notifications from '../pages/notification/Notification'
 import { useSharedStore } from './store/sharedStore'
 import { useGetProfile } from '../pages/profile/hooks/useProfileData'
@@ -14,6 +15,7 @@ import { removeRefreshToken, removeToken } from '../config/func'
 const Header: FC = () => {
 
     const location = useLocation();
+    const isWorkspace = location.pathname.startsWith(Pages.taskmanager.workspace);
     const [popoverKey, setPopoverKey] = useState(0);
     const { t } = useTranslation('global')
     const { setOpenSidebar, openSidebar } = useSharedStore()
@@ -30,7 +32,10 @@ const Header: FC = () => {
     }
 
     return (
-        <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
+        <div className={clx(
+            'fixed z-10 right-4 left-4 top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px]',
+            !isWorkspace && 'xl:right-[285px] xl:w-[calc(100%-305px)]',
+        )}>
 
             <div className='min-w-[270px] hidden xl:block'>
                 <Input

src/shared/SideBar.tsx

@@ -319,7 +319,7 @@ const SideBar: FC = () => {
               icon={<Task variant={isActive("taskmanager") ? "Bold" : "Outline"} color={isActive("taskmanager") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.taskmanager")}
               isActive={isActive("taskmanager")}
-              link={Pages.taskmanager.list}
+              link={Pages.taskmanager.workspace + "dpage"}
               activeName=""
             />
           </div>