diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx index 4b2aab1d7..011349bca 100644 --- a/apps/web/app/[locale]/kanban/page.tsx +++ b/apps/web/app/[locale]/kanban/page.tsx @@ -3,11 +3,9 @@ import { KanbanTabs } from '@app/constants'; import { useAuthenticateUser, useModal, useOrganizationTeams } from '@app/hooks'; import { useKanban } from '@app/hooks/features/useKanban'; -import KanbanBoardSkeleton from '@components/shared/skeleton/KanbanBoardSkeleton'; import { withAuthentication } from 'lib/app/authenticator'; -import { Breadcrumb, Container, Divider } from 'lib/components'; -import { KanbanView } from 'lib/features/team-members-kanban-view'; -import { Footer, MainLayout } from 'lib/layout'; +import { Breadcrumb, Container } from 'lib/components'; +import { MainLayout } from 'lib/layout'; import { useEffect, useMemo, useState } from 'react'; import { useTranslations } from 'next-intl'; import { useParams, useSearchParams } from 'next/navigation'; @@ -32,8 +30,8 @@ import { useRecoilValue } from 'recoil'; import { fullWidthState } from '@app/stores/fullWidth'; import { CircleIcon } from 'lucide-react'; import { XMarkIcon } from '@heroicons/react/20/solid'; -import Head from 'next/head'; -import { clsxm } from '@app/utils'; +import KanbanBoardSkeleton from '@components/shared/skeleton/KanbanBoardSkeleton'; +import { KanbanView } from 'lib/features/team-members-kanban-view'; const Kanban = () => { const { @@ -107,163 +105,151 @@ const Kanban = () => { }, [breadcrumbPath, currentLocale, employee]); return ( <> - - - {t('common.KANBAN')} {t('common.BOARD')} - - - -
-
- -
-
- - -
-
- -
+ + +
+
+ +
-
-

- {t('common.KANBAN')} {t('common.BOARD')} -

-
- - {`(`} - {timezone.split('(')[1]} - -
- -
+
+ +
+
+
+

+ {t('common.KANBAN')} {t('common.BOARD')} +

+
+ + {`(`} + {timezone.split('(')[1]} + +
+ +
+
-
- -
- +
+
+ +
+
-
-
- {tabs.map((tab) => ( -
setActiveTab(tab.value)} - className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${activeTab === tab.value +
+
+
+ {tabs.map((tab) => ( +
setActiveTab(tab.value)} + className={`cursor-pointer px-5 text-base font-semibold ${ + activeTab === tab.value ? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white' : 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]' - }`} - style={{ - borderBottomWidth: '3px', - borderBottomStyle: 'solid' - }} - > - {tab.name} -
- ))} + }`} + style={{ + borderBottomWidth: '3px', + borderBottomStyle: 'solid' + }} + > + {tab.name} +
+ ))} +
+
+
+ setEpics(values || [])} + className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" + multiple={true} + />
-
-
- setEpics(values || [])} - className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" - multiple={true} - /> + {/*
*/} +
+
+ +
+ {issues.icon ?? } +
+

{issues.name}

+ + {issues.value && ( +
+ setIssues({ + name: 'Issues', + icon: null, + bgColor: '', + value: '' + }) + } + className="w-5 h-5 z-50 p-0.5 cursor-pointer" + > + +
+ )}
- {/*
*/} -
-
- -
- {issues.icon ?? } -
-

{issues.name}

- - {issues.value && ( -
- setIssues({ - name: 'Issues', - icon: null, - bgColor: '', - value: '' - }) - } - className="w-5 h-5 z-50 p-0.5 cursor-pointer" - > - -
- )} -
- { - setIssues(items.find((v) => v.name == e) as TStatusItem); - }} - issueType="issue" - /> -
- {/*
*/} -
- setLabels(values || [])} - className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" - multiple={true} - /> -
-
- setPriority(values || [])} - className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" - multiple={true} - /> -
-
- setSizes(values || [])} - className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" - multiple={true} - /> -
-
- -
+ { + setIssues(items.find((v) => v.name == e) as TStatusItem); + }} + issueType="issue" + /> +
+ {/*
*/} +
+ setLabels(values || [])} + className="lg:min-w-[140px]" + multiple={true} + /> +
+
+ setPriority(values || [])} + className="lg:min-w-[140px]" + multiple={true} + /> +
+
+ setSizes(values || [])} + className="lg:min-w-[140px]" + multiple={true} + /> +
+
+ +
+
- {/*
*/} - -
-
+
+ +
{/** TODO:fetch teamtask based on days */} {activeTab && ( // add filter for today, yesterday and tomorrow -
+
{Object.keys(data).length > 0 ? ( ) : ( @@ -273,12 +259,6 @@ const Kanban = () => { )}
-
- -
-
); diff --git a/apps/web/components/pages/main/header-tabs.tsx b/apps/web/components/pages/main/header-tabs.tsx index 00b69117d..2ead49695 100644 --- a/apps/web/components/pages/main/header-tabs.tsx +++ b/apps/web/components/pages/main/header-tabs.tsx @@ -23,7 +23,11 @@ const HeaderTabs = ({ linkAll, kanban = false }: { linkAll: boolean; kanban?: bo return ( <> {options.map(({ label, icon: Icon, view: optionView }, index) => ( - + +
+ + + + +
- +
) : null}
)} @@ -492,7 +497,7 @@ const KanbanDraggable = ({ - +
); }; diff --git a/apps/web/lib/components/image-overlapper.tsx b/apps/web/lib/components/image-overlapper.tsx index 1f20eb588..441f686b5 100644 --- a/apps/web/lib/components/image-overlapper.tsx +++ b/apps/web/lib/components/image-overlapper.tsx @@ -121,7 +121,7 @@ export default function ImageOverlapper({ if ((!hasMembers && item) || hasActiveMembers || assignTaskButtonCall) { return ( -
+
{hasInfo.length > 0 && showInfo && (
@@ -232,13 +232,13 @@ export default function ImageOverlapper({ width: imageLength == 1 ? 40 : isMoreThanDisplay ? widthCalculate.length * 33 : widthCalculate.length * 35 }} - className="relative " + className="relative h-10 " > {firstArray.map((image, index) => (
( Object.keys(kanbanBoardTasks).map((key) => { const columnInfo = kanbanColumns.find((item) => item.name === key); - return { id: columnInfo?.id, name: key, icon: columnInfo ? columnInfo.fullIconUrl : '', color: columnInfo?.color }; + return { + id: columnInfo?.id, + name: key, + icon: columnInfo ? columnInfo.fullIconUrl : '', + color: columnInfo?.color + }; }) ); const fullWidth = useRecoilValue(fullWidthState); @@ -195,73 +200,55 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks: if (!enabled) return null; // ['open','close'] return ( - <> - - {Array.isArray(columns) && columns.length > 0 && ( - - {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( -
-
- {columns.length > 0 ? ( - <> - {columns.map((column: any, index: number) => { - return ( - -
- {isColumnCollapse(column.name) ? ( - - ) : ( - <> - - - )} -
- - ); - })} - - ) : null} - <>{provided.placeholder} -
+ + {Array.isArray(columns) && columns.length > 0 && ( + + {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( +
+
+ {columns?.map((column: any, index: number) => { + return ( +
+ {isColumnCollapse(column.name) ? ( + + ) : ( + + )} +
+ ); + })} + <>{provided.placeholder}
- )} - - )} - - +
+ )} + + )} + ); }; diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx index 26aba60d5..9c2ac6a4a 100644 --- a/apps/web/lib/layout/main-layout.tsx +++ b/apps/web/lib/layout/main-layout.tsx @@ -30,7 +30,7 @@ export function MainLayout({ }: Props) { const fullWidth = useRecoilValue(fullWidthState); return ( -
+