cool_todo_manager/src/components/CardGroup/CardGroup.tsx

@@ -46,7 +46,7 @@ export default function CardGroup(props: TCardGroup) {
 							data.map((task, i) => (
 								<TaskCard
 									key={task.id}
-									id={task.id.toString() + props.id}
+									id={task.id.toString()}
 									title={task.title}
 									description={task.status}
 									index={i}

cool_todo_manager/src/components/MainBoard/MainBoard.tsx

@@ -35,7 +35,7 @@ export default function MainBoard() {
 	return (
 		<>
 			<DragDropContext onDragEnd={dragEndHandle}>
-				<ScrollArea scrollbars='horizontal'>
+				<ScrollArea scrollbars='horizontal' className='pb-3'>
 					<Flex gap={'2'} className='min-w-fit'>
 						{!isLoading &&
 							(cringe as any[]).map((item: any) => (
@@ -44,7 +44,6 @@ export default function MainBoard() {
 					</Flex>
 				</ScrollArea>
 			</DragDropContext>
-			<Button onClick={onClick}>Create task</Button>
 			<Button onClick={onClick1}>Create project</Button>
 		</>
 	);

cool_todo_manager/src/components/TaskCard/TaskCard.tsx

@@ -1,26 +1,65 @@
 import { Draggable } from '@hello-pangea/dnd';
-import { Button, Card, Flex, Text } from '@radix-ui/themes';
+import { Badge, Button, Card, Flex, Text } from '@radix-ui/themes';
+import { useUpdateTaskMutation } from '../../services/mainApi';
 
 type TTaskCard = {
 	title?: string;
 	description?: string;
 	id?: string;
 	index?: number;
-	status: "todo" | "in-progress" | "completed";
+	status: 'todo' | 'in-progress' | 'completed';
 };
 
+const badgeNames = {
+	todo: 'To do',
+	'in-progress': 'In progress',
+	completed: 'Completed',
+} as const
+
+const badgeColors = {
+	todo: 'blue',
+	'in-progress': 'orange',
+	completed: 'green',
+} as const
+
 export default function TaskCard(props: TTaskCard) {
+	const [updateTask] = useUpdateTaskMutation();
+
+	const updateStatus = (newStatus: 'todo' | 'in-progress' | 'completed') => {
+		updateTask({ id: props.id, status: newStatus });
+	};
+
 	return (
 		<Draggable draggableId={props.id || '123'} index={props.index || 0}>
 			{(provided) => (
 				<Card
-					className="!w-62"
+					className="!w-62 !flex flex-col gap-2"
 					ref={provided.innerRef}
 					{...provided.draggableProps}
 				>
 					<Flex direction="column" gap="2">
-						<Text wrap="pretty">{props.title}</Text>
-						<Button>Mark completed</Button>
+						<Flex justify={'between'}>
+							<Text wrap="pretty">{props.title}</Text>
+							<Badge color={badgeColors[props.status] || 'gray'}>{badgeNames[props.status]}</Badge>
+						</Flex>
+					</Flex>
+
+					<Flex justify={'between'}>
+						{props.status !== 'todo' && (
+							<Button color={badgeColors['todo']} onClick={() => updateStatus('todo')}>
+								Todo
+							</Button>
+						)}
+						{props.status !== 'in-progress' && (
+							<Button color={badgeColors['in-progress']} onClick={() => updateStatus('in-progress')}>
+								In Progress
+							</Button>
+						)}
+						{props.status !== 'completed' && (
+							<Button color={badgeColors['completed']} onClick={() => updateStatus('completed')}>
+								Completed
+							</Button>
+						)}
 					</Flex>
 				</Card>
 			)}

cool_todo_manager/src/services/mainApi.ts

@@ -57,7 +57,7 @@ export const mainApi = createApi({
 			query: (task) => ({
 				url: `tasks/${task.id}`,
 				method: 'PATCH',
-				body: task,
+				body: {status: task.status},
 			}),
 			invalidatesTags: (result, error, id) => [{ type: 'Task', id }],
 		}),