Merge pull request #1980 from ever-co/develop

Release
ever-co · Dec 8, 2023 · e3cfb90 · e3cfb90
2 parents 3a67979 + b109293
commit e3cfb90
Show file tree

Hide file tree

Showing 28 changed files with 228 additions and 111 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -16,6 +16,7 @@
 		"cacheable",
 		"camelcase",
 		"Chatwoot",
+		"chetwode",
 		"cloc",
 		"cloudinary",
 		"clsx",

diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts
@@ -2,7 +2,8 @@ import { kanbanBoardState } from "@app/stores/kanban";
 import { useTaskStatus } from "./useTaskStatus";
 import { useRecoilState } from "recoil";
 import { useEffect, useState } from "react";
-import { ITaskStatusItemList } from "@app/interfaces";
+import { ITaskStatusItemList, ITeamTask } from "@app/interfaces";
+import { useTeamTasks } from "./useTeamTasks";
 
 export function useKanban() {
 
@@ -11,23 +12,32 @@ export function useKanban() {
     const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState);
 
     const taskStatusHook = useTaskStatus();
+    const { tasks, tasksFetching } = useTeamTasks();
 
+
     /**
      * format data for kanban board
      */
     useEffect(()=> {
-        if(taskStatusHook.loading) {
+        if(!taskStatusHook.loading && !tasksFetching) {
             let kanban = {};
+
+            const getTasksByStatus = (status: string | undefined) => {
+                return tasks.filter((task: ITeamTask)=> {
+                    return task.status === status
+                })
+            }
+
             taskStatusHook.taskStatus.map((taskStatus: ITaskStatusItemList,)=> {
                 kanban = {
                     ...kanban,
-                    [taskStatus.name ? taskStatus.name : ''] : []
+                    [taskStatus.name ? taskStatus.name : ''] : getTasksByStatus(taskStatus.name)
                 }
             });
             setKanbanBoard(kanban)
             setLoading(false)
         }
-    },[taskStatusHook.loading])
+    },[taskStatusHook.loading, tasksFetching])
 
     return {
         data: kanbanBoard,

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -0,0 +1,15 @@
+import '../styles/globals.css';
+
+export default function RootLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+
+    <html>
+      <body>{children}</body>
+    </html>
+
+  )
+}
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
@@ -0,0 +1,15 @@
+'use client';
+import NotFound from '@components/pages/404';
+import { AuthLayout } from 'lib/layout';
+
+const NotFoundPage = () => {
+	// TODO:
+	// Fix localisation issue
+	return (
+		<AuthLayout title={'Page not found !'} isAuthPage={false}>
+			<NotFound />
+		</AuthLayout>
+	);
+};
+
+export default NotFoundPage;
diff --git a/apps/web/components/pages/404/index.tsx b/apps/web/components/pages/404/index.tsx
@@ -1,25 +1,27 @@
+'use client';
+import SadCry from '@components/ui/svgs/sad-cry';
 import { Button, Text } from 'lib/components';
 import Link from 'next/link';
-import { useTranslation } from 'react-i18next';
+
 function NotFound() {
-	const { t } = useTranslation();
 	return (
-		<div className="mt-28">
-			<div className="m-auto w-[218px] h-[218px] rounded-full relative flex justify-center items-center text-center p-5 bg-[#6755c933] dark:bg-light--theme-light">
-				<Text className="text-6xl font-semibold text-primary">404</Text>
+		<div className="mt-28 flex flex-col gap-7 items-center">
+			<div className="m-auto relative flex justify-center items-center gap-4 text-center ">
+				<SadCry width={97} height={97} />
+				<Text className="text-[78px] font-semibold text-chetwodeBlue">404!</Text>
 			</div>
 
-			<Text className="text-2xl font-normal text-center mt-10 text-[#282048] dark:text-light--theme">
-				{t('pages.page404.HEADING_TITLE')}
-			</Text>
-			<Text className="mt-5 text-base font-normal text-center text-gray-400">
-				{t('pages.page404.HEADING_DESCRIPTION')}
+			<Text className="text-[40px] font-bold text-center text-[#282048] dark:text-light--theme">
+				Page not found !
 			</Text>
-			<Link href="/">
-				<Button className="m-auto mt-10 font-normal rounded-lg pl-7 pr-7">
-					{t('pages.page404.LINK_LABEL')}
-				</Button>
-			</Link>
+			<div className="flex flex-col gap-4">
+				<Text className="text-[20px] font-normal text-center text-gray-400">
+					{`We looked, but can't find it ....`}
+				</Text>
+				<Link href="/">
+					<Button className="m-auto mt-10 font-normal rounded-lg pl-7 pr-7">Home</Button>
+				</Link>
+			</div>
 		</div>
 	);
 }

diff --git a/apps/web/components/pages/offline/index.tsx b/apps/web/components/pages/offline/index.tsx
@@ -0,0 +1,27 @@
+import SadCry from '@components/ui/svgs/sad-cry';
+import { Text } from 'lib/components';
+import { useTranslation } from 'react-i18next';
+
+function Offline() {
+	const { t } = useTranslation();
+
+	return (
+		<div className="mt-28 flex flex-col gap-7 items-center">
+			<div className="m-auto relative flex justify-center items-center gap-4 text-center ">
+				<SadCry width={97} height={97} />
+				<Text className="text-[78px] font-semibold text-chetwodeBlue">Offline!</Text>
+			</div>
+
+			<Text className="text-[40px] font-bold text-center text-[#282048] dark:text-light--theme">
+				{t('pages.offline.HEADING_TITLE')}
+			</Text>
+			<div className="flex flex-col gap-4">
+				<Text className="text-[20px] font-normal text-center text-gray-400">
+					{t('pages.offline.HEADING_DESCRIPTION')}
+				</Text>
+			</div>
+		</div>
+	);
+}
+
+export default Offline;
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
@@ -72,7 +72,7 @@ function DataTable<TData, TValue>({
 	})
 
 	return (
-		<Table className='border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full'>
+		<Table className="border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full rounded-2xl">
 			<TableHeader>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<TableRow key={headerGroup.id}>
@@ -81,57 +81,39 @@ function DataTable<TData, TValue>({
 								<TableHead key={header.id}>
 									{header.isPlaceholder
 										? null
-										: flexRender(
-											header.column.columnDef.header,
-											header.getContext()
-										)}
+										: flexRender(header.column.columnDef.header, header.getContext())}
 								</TableHead>
-							)
+							);
 						})}
 					</TableRow>
 				))}
 			</TableHeader>
 			<TableBody className="divide-y divide-gray-200">
 				{table.getRowModel().rows?.length ? (
 					table.getRowModel().rows.map((row) => (
-						<TableRow
-							key={row.id}
-							data-state={row.getIsSelected() && "selected"}
-							className='my-4'
-						>
+						<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className="my-4">
 							{row.getVisibleCells().map((cell) => (
-								<TableCell key={cell.id}
-								className="rounded-[16px] my-4">
-
-									{flexRender(
-										cell.column.columnDef.cell,
-										cell.getContext()
-									)}
+								<TableCell key={cell.id} className="rounded-[16px] my-4">
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
 								</TableCell>
 							))}
 						</TableRow>
 					))
 				) : (
 					<TableRow>
-						<TableCell
-							colSpan={columns.length}
-							className="h-24 text-center"
-						>
+						<TableCell colSpan={columns.length} className="h-24 text-center">
 							No results.
 						</TableCell>
 					</TableRow>
 				)}
 			</TableBody>
-			{
-				footerRows && footerRows?.length > 0 && (
-					<TableFooter className='bg-gray-50 dark:bg-gray-800'>
-						{footerRows.map((row, index) => (
-							<TableRow key={`footer-row-${index}}`}>{row}</TableRow>
-						))}
-					</TableFooter>
-				)
-			}
-
+			{footerRows && footerRows?.length > 0 && (
+				<TableFooter className="bg-gray-50 dark:bg-gray-800">
+					{footerRows.map((row, index) => (
+						<TableRow key={`footer-row-${index}}`}>{row}</TableRow>
+					))}
+				</TableFooter>
+			)}
 		</Table>
 	);
 }

diff --git a/apps/web/components/ui/svgs/sad-cry.tsx b/apps/web/components/ui/svgs/sad-cry.tsx
@@ -0,0 +1,21 @@
+
+const SadCry = ({
+    width,
+    height,
+    fill="#8C7AE4"
+}:{
+    width: number,
+    height: number,
+    fill?: string,
+}) => {
+    return (
+        <>
+            <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 97 98" fill="none">
+                <path d="M48.5 0.5625C21.7422 0.5625 0.0625 22.2422 0.0625 49C0.0625 66.5977 9.47656 81.9492 23.5 90.4258V55.25C23.5 53.5312 24.9062 52.125 26.625 52.125C28.3438 52.125 29.75 53.5312 29.75 55.25V93.668C35.5117 96.0898 41.8594 97.4375 48.5 97.4375C55.1406 97.4375 61.4883 96.0898 67.25 93.668V55.25C67.25 53.5312 68.6562 52.125 70.375 52.125C72.0938 52.125 73.5 53.5312 73.5 55.25V90.4258C87.5234 81.9492 96.9375 66.5781 96.9375 49C96.9375 22.2422 75.2578 0.5625 48.5 0.5625ZM35.707 42.8477C32.8164 40.2695 26.6836 40.2695 23.793 42.8477L21.9375 44.5078C21.1953 45.1523 20.1211 45.2891 19.2617 44.8203C18.4023 44.3516 17.9141 43.375 18.0703 42.3984C18.8516 37.4766 24.75 34.1758 29.7695 34.1758C34.7891 34.1758 40.6875 37.4766 41.4688 42.3984C41.625 43.375 41.1367 44.3516 40.2773 44.8203C39.1445 45.4258 38.0898 44.957 37.6016 44.5078L35.707 42.8477ZM48.5 80.25C43.3242 80.25 39.125 74.6445 39.125 67.75C39.125 60.8555 43.3242 55.25 48.5 55.25C53.6758 55.25 57.875 60.8555 57.875 67.75C57.875 74.6445 53.6758 80.25 48.5 80.25ZM77.7578 44.8008C76.625 45.4062 75.5703 44.9375 75.082 44.4883L73.2266 42.8281C70.3359 40.25 64.2031 40.25 61.3125 42.8281L59.4375 44.5078C58.6953 45.1523 57.6211 45.2891 56.7617 44.8203C55.9023 44.3516 55.4141 43.375 55.5703 42.3984C56.3516 37.4766 62.25 34.1758 67.2695 34.1758C72.2891 34.1758 78.1875 37.4766 78.9688 42.3984C79.0859 43.3555 78.6172 44.332 77.7578 44.8008Z" 
+                fill={fill}/>
+            </svg>
+        </>
+    )
+}
+
+export default SadCry;
diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
 import Item from './kanban-card';
+import { ITeamTask } from '@app/interfaces';
 
 const grid = 8;
 
@@ -48,12 +49,12 @@ function headerStyleChanger(snapshot: DraggableStateSnapshot, bgColor: any){
  */
 function InnerItemList({items, title}: {
     title: string,
-    items: any[]
+    items: ITeamTask[]
 }) {
     return (
         <>
         <section className="flex flex-col gap-2.5 max-h-[520px] overflow-scroll ">
-        {items.map((item: any, index: number) => (
+        {items.map((item: ITeamTask, index: number) => (
             <Draggable key={item.id} draggableId={item.id} index={index}>
                 {(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
                 <Item
@@ -84,7 +85,7 @@ function InnerItemList({items, title}: {
  */
 function InnerList(props: {
     title: string, 
-    items: any,
+    items: ITeamTask[],
     dropProvided: DroppableProvided,
     dropSnapshot: DroppableStateSnapshot
 }) {
@@ -114,7 +115,7 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: {
     title: string,
     droppableId: string,
     type: string,
-    content: any
+    content: ITeamTask[]
 } ) => {
     const [enabled, setEnabled] = useState(false);
 
@@ -319,7 +320,7 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: {
     index: number;
     title: string;
     backgroundColor: any
-    items: any;
+    items: ITeamTask[];
 }) => {
 
 

diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
@@ -152,13 +152,16 @@ export default function Item(props: any) {
       >
         <div className="flex gap-1.5 border-b border-b-gray-200 pb-4">
             <div className="flex flex-col gap-5 grow">
-                <TagList tags={item.tags}/>
+                {item.tags && (
+                    <TagList tags={item.tags}/>
+                )}
+
                 <div className="flex flex-row flex-wrap items-center text-sm not-italic font-semibold">
                     <span className="bg-indianRed rounded p-1 mr-1">
                         <BugIcon/>
                     </span>
-                    <span className="text-grey text-normal mr-1">#213</span>
-                    <span className="text-black dark:text-white text-normal capitalize mr-2">{item.content}</span>
+                    <span className="text-grey text-normal mr-1">#{item.number}</span>
+                    <span className="text-black dark:text-white text-normal capitalize mr-2">{item.title}</span>
                     <Priority level={1}/>
                 </div>
             </div>
@@ -175,16 +178,16 @@ export default function Item(props: any) {
             </div>
             <div className="relative">
                 <div className="w-10 flex flex-row justify-end items-center relative bg-primary">
-                {images.map((image: any, index: number)=> {
+                {item.members.map((option: any, index: number)=> {
                     return (
                         <Image 
                             key={index}
-                            src={image.url} 
-                            alt={""} 
+                            src={option.user.imageUrl} 
+                            alt={`${option.user.firstName} avatar`} 
                             height={40} 
                             width={40} 
                             className="absolute rounded-full border-2 border-white"
-                            style={stackImages(index, images.length)}
+                            style={stackImages(index, item.members.length)}
                         />
                     )
                 })}
@@ -202,27 +205,4 @@ export default function Item(props: any) {
         }
       </section>
     );
-}
-
-const images = [
-    {
-        id: 0,
-        url: '/assets/cover/auth-bg-cover-dark.png'
-    },
-    {
-        id: 1,
-        url: '/assets/cover/auth-bg-cover-dark.png'
-    },
-    {
-        id: 2,
-        url: '/assets/cover/auth-bg-cover-dark.png'
-    },
-    {
-        id: 3,
-        url: '/assets/cover/auth-bg-cover-dark.png'
-    },
-    {
-        id: 4,
-        url: '/assets/cover/auth-bg-cover-dark.png'
-    },
-]
+}
diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -54,8 +54,9 @@ const reorderItemMap = ({ itemMap, source, destination }: {
 };
 
 const getHeaderBackground = (columns: any, column: any) => {
+
   const selectState = columns.filter((item: any)=> {
-    return item.name === column.toUpperCase()
+    return item.name === column
   });
 
   return selectState[0].color