Project details fix issue: Labels comes as string

client/src/app/dashboard/(regular_user)/layout.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 const Layout = ({ children } : Props) => {
   return (
-    <Stack alignItems='center' justifyContent='center'>
+    <Stack alignItems='center' justifyContent='center' height='100%'>
       {children}
     </Stack>
   )

client/src/hooks/useKanban.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import useSWR from 'swr';
 import axiosInstance, { fetcher, endpoints } from '@/utils/axios';
-import { KanbanProjectType, KanbanProjectsResponseCollectionType } from '@/types';
+import { KanbanProjectType, KanbanProjectsResponseCollectionType, KanbanProjectsResponseIndividualType } from '@/types';
 import { ProjectStateType } from '@/sections/dashboard/kanban/kanban-project/context/types';
 
 type swrResponseType = { 
@@ -43,17 +43,18 @@ export async function postProject(data : ProjectStateType) {
 }
 
 export function useGetKanbanProjectByUUID(projectUUID: string) {
-  const { data, isLoading, error, isValidating } = useSWR(`${endpoints.projects}/${projectUUID}`, fetcher, options);
+  const { data, isLoading, error, isValidating }  = useSWR(`${endpoints.projects}/${projectUUID}`, fetcher, options);
   const project: ProjectStateType = data?.data?.attributes;
 
   const memoizedValue = useMemo(
     () => ({
       project: {
         ...project,
-        sections: project?.sections?.map(section => ({
+        sections: project?.sections?.map((section:any) => ({
           ...section,
-          tasks: section.tasks.map(task => ({ 
-            ...task 
+          tasks: section.tasks.map((task: any) => ({ 
+            ...task,
+            labels: Object.values(JSON.parse(task.labels)) 
           }))
         }))
       },

client/src/layouts/dashboard/DashboardLayout.tsx

@@ -31,7 +31,7 @@ const DashboardLayout = ({children}: Props) => {
           <LogoutButton />
         </Stack>
         <Container maxWidth='xl' sx={{ flexGrow: 1 }}>
-          <Box pt={5} pb={{ xs: 15, md: 8 }}>
+          <Box pt={5} pb={{ xs: 15, md: 8 }} height='100%'>
             {children}
           </Box>
         </Container>

client/src/sections/dashboard/kanban/kanban-project/kanban-section.tsx

@@ -71,7 +71,7 @@ const KanbanSection = ({ section, index } : { section : SectionType, index: numb
           <KanbanSectionCard {...provided.dragHandleProps}>
             {!deleteSectionToggle.value && !editSectionToggle.value && (
               <Stack direction='column' height='100%'>
-                <Stack direction='row' alignItems='center' spacing={3}>
+                <Stack direction='row' alignItems='center' justifyContent='space-between' spacing={3}>
                   <Typography
                     sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} 
                     variant='subtitle1'

server/src/services/project.js

@@ -3,7 +3,6 @@ const { faker } = require("@faker-js/faker")
 const expressValidatorResult = require('../utils/expressValidatorResult');
 const ErrorHandler = require("../utils/errorHandler");
 const ResponseParser = require("../utils/responseParser");
-const section = require('../models/section');
 
 const getProjects = async (req, res, next) => {
   ErrorHandler(async () => {
@@ -91,16 +90,18 @@ const postProject = async (req, res, next) => {
         uuid: faker.string.uuid(),
         tasks: section.tasks.map(task => ({
           ...task,
-          labels: task.labels.join('|')
+          labels: JSON.stringify(Object.assign({}, task.labels))
         }))
       }))
     }, {
       include: [{
         model: Section,
         as: 'sections',
+        attributes: Section.getFieldsToSelect(),
         include: [{
           model: Task,
           as: 'tasks',
+          attributes: Task.getFieldsToSelect()
         }]
       }]
     });

server/src/utils/responseParser.js

@@ -13,7 +13,7 @@ class ResponseParser {
     this.pageSize = request?.query?.page?.size ?? null;
     this.response = {};
   }
-
+  
   getSelectedAttributes = document => {
     const attributes = {};