From 1628677222e77539b5ac71731aed28aedf54f3cd Mon Sep 17 00:00:00 2001
From: david <njorogedavid13@gmail.com>
Date: Fri, 27 Feb 2026 10:53:36 +0300
Subject: [PATCH] lint frontend, fix drag and drop bug

---
 .../src/components/kanban/CreateCardModal.tsx | 120 ++++++++++++++++++
 .../src/components/kanban/CreateListModal.tsx | 106 ++++++++++++++++
 frontend/src/components/kanban/KanbanCard.tsx |   2 +-
 .../src/components/kanban/KanbanColumn.tsx    |  38 +++++-
 frontend/src/hooks/useBoard.ts                |   8 +-
 frontend/src/hooks/useBoards.ts               |   8 +-
 frontend/src/hooks/useCardMutations.ts        |  12 +-
 frontend/src/hooks/useListMutations.ts        |   4 +-
 frontend/src/pages/BoardCreate.tsx            |  20 ++-
 frontend/src/pages/BoardDetail.tsx            |  85 +++++++++----
 frontend/src/pages/BoardEdit.tsx              |   9 ++
 frontend/src/pages/Login.tsx                  |  12 +-
 frontend/src/pages/Register.tsx               |  10 +-
 13 files changed, 382 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/components/kanban/CreateCardModal.tsx
 create mode 100644 frontend/src/components/kanban/CreateListModal.tsx

diff --git a/frontend/src/components/kanban/CreateCardModal.tsx b/frontend/src/components/kanban/CreateCardModal.tsx
new file mode 100644
index 0000000..09eba9c
--- /dev/null
+++ b/frontend/src/components/kanban/CreateCardModal.tsx
@@ -0,0 +1,120 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { ModalContentProps } from '../../types';
+import { useToast } from '../../context/toasts/useToast';
+
+const cardSchema = z.object({
+  name: z
+    .string()
+    .min(1, 'Card name is required')
+    .max(100, 'Card name must be less than 100 characters'),
+  description: z.string().max(2000, 'Description must be less than 2000 characters').optional(),
+});
+
+type CardFormData = z.infer<typeof cardSchema>;
+
+interface CreateCardModalProps extends ModalContentProps {
+  onCreate: (data: { name: string; description?: string }) => Promise<void>;
+}
+
+export function CreateCardModal({ onClose, onCreate }: CreateCardModalProps) {
+  const { addNotification } = useToast();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CardFormData>({
+    resolver: zodResolver(cardSchema),
+  });
+
+  const onSubmit = async (data: CardFormData) => {
+    try {
+      await onCreate(data);
+      onClose();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to create card';
+      addNotification({
+        type: 'error',
+        title: 'Error Creating Card',
+        message: errorMessage,
+        duration: 5000,
+      });
+    }
+  };
+
+  return (
+    <div className="bg-gray-800 rounded-lg shadow-xl w-full max-w-md border border-gray-700">
+      <div className="flex justify-between items-center p-6 border-b border-gray-700">
+        <h2 id="modal-title" className="text-xl font-bold text-white">
+          Create Card
+        </h2>
+        <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="p-6">
+        <div className="mb-4">
+          <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
+            Card Name <span className="text-red-400">*</span>
+          </label>
+          <input
+            id="name"
+            type="text"
+            {...register('name')}
+            className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            placeholder="Enter card name..."
+            autoFocus
+          />
+          {errors.name && <p className="mt-1 text-sm text-red-400">{errors.name.message}</p>}
+        </div>
+
+        <div className="mb-6">
+          <label htmlFor="description" className="block text-sm font-medium text-gray-300 mb-2">
+            Description
+          </label>
+          <textarea
+            id="description"
+            rows={4}
+            {...register('description')}
+            className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+            placeholder="Optional card description..."
+          />
+          {errors.description && (
+            <p className="mt-1 text-sm text-red-400">{errors.description.message}</p>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-6 py-3 text-gray-300 hover:text-white transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors"
+          >
+            Create Card
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/src/components/kanban/CreateListModal.tsx b/frontend/src/components/kanban/CreateListModal.tsx
new file mode 100644
index 0000000..c6d7f65
--- /dev/null
+++ b/frontend/src/components/kanban/CreateListModal.tsx
@@ -0,0 +1,106 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { ModalContentProps } from '../../types';
+import { useToast } from '@/context/toasts';
+
+const listSchema = z.object({
+  name: z
+    .string()
+    .min(1, 'List name is required')
+    .max(100, 'List name must be less than 100 characters'),
+});
+
+type ListFormData = z.infer<typeof listSchema>;
+
+interface CreateListModalProps extends ModalContentProps {
+  onCreate: (name: string) => Promise<void>;
+}
+
+export function CreateListModal({ onClose, onCreate }: CreateListModalProps) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ListFormData>({
+    resolver: zodResolver(listSchema),
+  });
+
+  const { addNotification } = useToast();
+
+  const onSubmit = async (data: ListFormData) => {
+    try {
+      await onCreate(data.name);
+      onClose();
+    } catch (err) {
+      // Error is handled by caller
+
+      const errorMessage = err instanceof Error ? err.message : 'Failed to create card';
+      addNotification({
+        type: 'error',
+        title: 'Error Register',
+        message: errorMessage,
+        duration: 5000,
+      });
+    }
+  };
+
+  return (
+    <div className="bg-gray-800 rounded-lg shadow-xl w-full max-w-md border border-gray-700">
+      <div className="flex justify-between items-center p-6 border-b border-gray-700">
+        <h2 id="modal-title" className="text-xl font-bold text-white">
+          Create List
+        </h2>
+        <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="p-6">
+        <div className="mb-6">
+          <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
+            List Name <span className="text-red-400">*</span>
+          </label>
+          <input
+            id="name"
+            type="text"
+            {...register('name')}
+            className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            placeholder="e.g., To Do, In Progress, Done"
+            autoFocus
+          />
+          {errors.name && <p className="mt-1 text-sm text-red-400">{errors.name.message}</p>}
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-6 py-3 text-gray-300 hover:text-white transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors"
+          >
+            Create List
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/src/components/kanban/KanbanCard.tsx b/frontend/src/components/kanban/KanbanCard.tsx
index bed9801..3ad5740 100644
--- a/frontend/src/components/kanban/KanbanCard.tsx
+++ b/frontend/src/components/kanban/KanbanCard.tsx
@@ -9,7 +9,7 @@ interface KanbanCardProps {
 
 export function KanbanCard({ card, onClick }: KanbanCardProps) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: card.id.toString(),
+    id: `CARD_${card.id}`,
   });
 
   const style = {
diff --git a/frontend/src/components/kanban/KanbanColumn.tsx b/frontend/src/components/kanban/KanbanColumn.tsx
index aaaa0b1..f2acb25 100644
--- a/frontend/src/components/kanban/KanbanColumn.tsx
+++ b/frontend/src/components/kanban/KanbanColumn.tsx
@@ -2,20 +2,29 @@ import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { ListWithCards, Card as CardType } from '../../types/kanban';
 import { KanbanCard } from './KanbanCard';
+import { CreateCardModal } from './CreateCardModal';
+import { useModal } from '../../context/modals/useModal';
 
 interface KanbanColumnProps {
   list: ListWithCards;
   cards: CardType[];
   onCardClick: (card: CardType) => void;
+  onCardCreate: (data: { name: string; description?: string }) => Promise<void>;
 }
 
-export function KanbanColumn({ list, cards, onCardClick }: KanbanColumnProps) {
+export function KanbanColumn({ list, cards, onCardClick, onCardCreate }: KanbanColumnProps) {
   const { setNodeRef, isOver } = useDroppable({
-    id: list.id.toString(),
+    id: `LIST_${list.id}`,
   });
 
+  const { openModal } = useModal();
+
+  const handleAddCard = () => {
+    openModal((props) => <CreateCardModal {...props} onCreate={onCardCreate} />);
+  };
+
   return (
-    <div className="bg-gray-800 rounded-lg p-4 min-w-[300px] max-w-[300px] border border-gray-700">
+    <div className="bg-gray-800 rounded-lg p-4 min-w-[300px] max-w-[300px] border border-gray-700 flex flex-col">
       <h2 className="text-white font-bold text-lg mb-4 flex items-center justify-between">
         {list.name}
         <span className="bg-gray-600 text-gray-300 text-xs px-2 py-1 rounded-full">
@@ -30,13 +39,34 @@ export function KanbanColumn({ list, cards, onCardClick }: KanbanColumnProps) {
       >
         <div
           ref={setNodeRef}
-          className={`min-h-[200px] transition-colors ${isOver ? 'bg-gray-750' : ''}`}
+          className={`min-h-[200px] flex-1 transition-colors ${isOver ? 'bg-gray-750' : ''}`}
         >
           {cards.map((card) => (
             <KanbanCard key={card.id} card={card} onClick={() => onCardClick(card)} />
           ))}
         </div>
       </SortableContext>
+
+      <button
+        onClick={handleAddCard}
+        className="mt-3 w-full py-2 px-4 bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white rounded-lg transition-colors flex items-center justify-center gap-2 text-sm font-medium"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="12" y1="5" x2="12" y2="19"></line>
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+        Add Card
+      </button>
     </div>
   );
 }
diff --git a/frontend/src/hooks/useBoard.ts b/frontend/src/hooks/useBoard.ts
index a9613c5..cec080b 100644
--- a/frontend/src/hooks/useBoard.ts
+++ b/frontend/src/hooks/useBoard.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useApi } from './useApi';
 import { useLoader } from '../context/loaders/useLoader';
 import { useToast } from '../context/toasts/useToast';
@@ -12,7 +12,7 @@ export function useBoard(boardId: number) {
   const { withLoader } = useLoader();
   const { addNotification } = useToast();
 
-  const fetchBoard = async () => {
+  const fetchBoard = useCallback(async () => {
     try {
       setError(null);
       const data = await withLoader(() => getBoard(boardId), 'Loading board...');
@@ -29,7 +29,7 @@ export function useBoard(boardId: number) {
       });
       return null;
     }
-  };
+  }, [boardId, getBoard, withLoader, addNotification]);
 
   const updateBoardData = (updatedBoard: BoardWithDetails) => {
     setBoard(updatedBoard);
@@ -37,7 +37,7 @@ export function useBoard(boardId: number) {
 
   useEffect(() => {
     fetchBoard();
-  }, [boardId]);
+  }, [boardId, fetchBoard]);
 
   return {
     board,
diff --git a/frontend/src/hooks/useBoards.ts b/frontend/src/hooks/useBoards.ts
index 045e859..8074a5f 100644
--- a/frontend/src/hooks/useBoards.ts
+++ b/frontend/src/hooks/useBoards.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useApi } from './useApi';
 import { useLoader } from '../context/loaders/useLoader';
 import { useToast } from '../context/toasts/useToast';
@@ -12,7 +12,7 @@ export function useBoards() {
   const { withLoader } = useLoader();
   const { addNotification } = useToast();
 
-  const fetchBoards = async () => {
+  const fetchBoards = useCallback(async () => {
     try {
       setError(null);
       const data = await withLoader(() => getBoards(), 'Loading boards...');
@@ -29,7 +29,7 @@ export function useBoards() {
       });
       return [];
     }
-  };
+  }, [getBoards, withLoader, addNotification]);
 
   const createNewBoard = async (boardData: { name: string; description?: string }) => {
     try {
@@ -110,7 +110,7 @@ export function useBoards() {
 
   useEffect(() => {
     fetchBoards();
-  }, []);
+  }, [fetchBoards]);
 
   return {
     boards,
diff --git a/frontend/src/hooks/useCardMutations.ts b/frontend/src/hooks/useCardMutations.ts
index 06a509a..e712fdd 100644
--- a/frontend/src/hooks/useCardMutations.ts
+++ b/frontend/src/hooks/useCardMutations.ts
@@ -1,9 +1,9 @@
 import { useApi } from './useApi';
 import { useLoader } from '../context/loaders/useLoader';
 import { useToast } from '../context/toasts/useToast';
-import { BoardWithDetails, Card, List } from '../types/kanban';
+import { Card } from '../types/kanban';
 
-export function useCardMutations(boardId: number, onUpdate: (board: BoardWithDetails) => void) {
+export function useCardMutations(boardId: number, onUpdate: () => void) {
   const { createCard, updateCard, deleteCard } = useApi();
   const { withLoader } = useLoader();
   const { addNotification } = useToast();
@@ -68,18 +68,20 @@ export function useCardMutations(boardId: number, onUpdate: (board: BoardWithDet
   };
 
   const moveCard = async (
-    cardId: number,
+    card: Card,
     fromListId: number,
     toListId: number,
     newPosition: number
   ) => {
     try {
       // Optimistic update - don't show loader for drag operations
-      await updateCard(cardId, {
-        name: '', // Placeholder, will be filled by server
+      await updateCard(card.id, {
+        name: card.name, // Placeholder, will be filled by server
         pos: newPosition,
         list_id: toListId,
       });
+
+      onUpdate();
       addNotification({
         type: 'success',
         title: 'Card Moved',
diff --git a/frontend/src/hooks/useListMutations.ts b/frontend/src/hooks/useListMutations.ts
index 0b56951..5369144 100644
--- a/frontend/src/hooks/useListMutations.ts
+++ b/frontend/src/hooks/useListMutations.ts
@@ -1,9 +1,8 @@
 import { useApi } from './useApi';
 import { useLoader } from '../context/loaders/useLoader';
 import { useToast } from '../context/toasts/useToast';
-import { BoardWithDetails } from '../types/kanban';
 
-export function useListMutations(boardId: number, onUpdate: (board: BoardWithDetails) => void) {
+export function useListMutations(boardId: number, onUpdate: () => void) {
   const { createList, updateList, deleteList } = useApi();
   const { withLoader } = useLoader();
   const { addNotification } = useToast();
@@ -11,6 +10,7 @@ export function useListMutations(boardId: number, onUpdate: (board: BoardWithDet
   const createNewList = async (name: string, pos: number) => {
     try {
       const data = await withLoader(() => createList(boardId, { name, pos }), 'Creating list...');
+      onUpdate();
       addNotification({
         type: 'success',
         title: 'List Created',
diff --git a/frontend/src/pages/BoardCreate.tsx b/frontend/src/pages/BoardCreate.tsx
index f4090b4..ba0aa17 100644
--- a/frontend/src/pages/BoardCreate.tsx
+++ b/frontend/src/pages/BoardCreate.tsx
@@ -3,6 +3,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useNavigate, Link } from 'react-router-dom';
 import { useBoards } from '../hooks/useBoards';
+import { useToast } from '@/context/toasts';
 
 const boardSchema = z.object({
   name: z
@@ -17,6 +18,7 @@ type BoardFormData = z.infer<typeof boardSchema>;
 export function BoardCreate() {
   const navigate = useNavigate();
   const { createBoard } = useBoards();
+  const { addNotification } = useToast();
 
   const {
     register,
@@ -28,10 +30,22 @@ export function BoardCreate() {
 
   const onSubmit = async (data: BoardFormData) => {
     try {
-      await createBoard(data);
-      navigate('/boards');
+      const newBoard = await createBoard(data);
+      addNotification({
+        type: 'success',
+        title: 'Board Created',
+        message: `Board "${newBoard.name}" created successfully.`,
+        duration: 3000,
+      });
+      navigate(`/boards/${newBoard.id}`);
     } catch (err) {
-      // Error is handled by the hook
+      const errorMessage = err instanceof Error ? err.message : 'Failed to create board';
+      addNotification({
+        type: 'error',
+        title: 'Error Creating Board',
+        message: errorMessage,
+        duration: 5000,
+      });
     }
   };
 
diff --git a/frontend/src/pages/BoardDetail.tsx b/frontend/src/pages/BoardDetail.tsx
index 2a6a480..914f0ce 100644
--- a/frontend/src/pages/BoardDetail.tsx
+++ b/frontend/src/pages/BoardDetail.tsx
@@ -3,6 +3,8 @@ import { useBoard } from '../hooks/useBoard';
 import { useCardMutations } from '../hooks/useCardMutations';
 import { useListMutations } from '../hooks/useListMutations';
 import { KanbanColumn } from '../components/kanban/KanbanColumn';
+import { CreateListModal } from '../components/kanban/CreateListModal';
+import { useModal } from '../context/modals/useModal';
 import {
   DndContext,
   DragEndEvent,
@@ -14,15 +16,16 @@ import {
   useSensors,
   closestCenter,
 } from '@dnd-kit/core';
-import { Card as CardType, BoardWithDetails } from '../types/kanban';
+import { Card as CardType } from '../types/kanban';
 import { useState } from 'react';
 
 export function BoardDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const { board, fetchBoard } = useBoard(parseInt(id || '0'));
-  const { moveCard } = useCardMutations(parseInt(id || '0'), fetchBoard);
+  const { createCard, moveCard } = useCardMutations(parseInt(id || '0'), fetchBoard);
   const { createList } = useListMutations(parseInt(id || '0'), fetchBoard);
+  const { openModal } = useModal();
 
   const [activeCard, setActiveCard] = useState<CardType | null>(null);
 
@@ -36,11 +39,16 @@ export function BoardDetail() {
 
   const handleDragStart = (event: DragStartEvent) => {
     const { active } = event;
-    const cardId = parseInt(active.id as string);
+
+    const activeIdStr = (active.id as string).split('_')[1];
+
+    const cardId = parseInt(activeIdStr as string);
 
     if (board) {
       const card = board.lists.flatMap((list) => list.cards).find((c) => c.id === cardId);
 
+      // console.log('---handleDragStart', event, card)
+      // console.log('---handleDragStart.board', board)
       if (card) {
         setActiveCard(card);
       }
@@ -50,19 +58,24 @@ export function BoardDetail() {
   const handleDragOver = (event: DragOverEvent) => {
     const { active, over } = event;
 
+    console.log('---handleDragOver', event);
     if (!over) return;
 
-    const activeId = parseInt(active.id as string);
-    const overId = parseInt(over.id as string);
+    // const activeId = parseInt(active.id as string);
+    // const overId = parseInt(over.id as string);
 
+    const overIdStr = (over.id as string).split('_')[1];
+    const overId = parseInt(overIdStr, 10);
+    const activeIdStr = (active.id as string).split('_')[1];
+    const activeId = parseInt(activeIdStr, 10);
     if (activeId === overId) return;
 
-    // Find the active card and its current list
+    // Find active card and its current list
     if (!board) return;
 
     const activeList = board.lists.find((list) => list.cards.some((card) => card.id === activeId));
 
-    // If we're hovering over a card in the same list, do nothing
+    // If we're hovering over a card in same list, do nothing
     if (activeList) {
       const overCard = activeList.cards.find((card) => card.id === overId);
       if (overCard) return;
@@ -75,12 +88,17 @@ export function BoardDetail() {
 
     if (!over || !board) return;
 
-    const activeId = parseInt(active.id as string);
-    const overId = parseInt(over.id as string);
+    // console.log('--------------over', over)
+    // console.log('--------------board', board)
+    const [overType, overIdStr] = (over.id as string).split('_');
+    const overId = parseInt(overIdStr, 10);
+    const activeIdStr = (active.id as string).split('_')[1];
+    const activeId = parseInt(activeIdStr, 10);
+    // debugger
 
-    if (activeId === overId) return;
+    if (active.id === over.id) return;
 
-    // Find the active card
+    // Find active card
     let activeCard: CardType | undefined;
     let activeList: (typeof board.lists)[0] | undefined;
 
@@ -96,13 +114,14 @@ export function BoardDetail() {
     if (!activeCard || !activeList) return;
 
     // Check if we're dropping on a list or a card
-    const overList = board.lists.find((list) => list.id === overId);
+    // debugger
+    if (overType.toLocaleLowerCase() === 'list') {
+      const overList = board.lists.find((list) => list.id === overId);
+      // Dropping on a list - append to end
 
-    if (overList) {
-      // Dropping on a list - append to the end
-      if (overList.id === activeList.id) return; // Same list, do nothing
+      if (!overList || overList.id === activeList.id) return; // Same list, do nothing
 
-      await moveCard(activeCard.id, activeList.id, overList.id, overList.cards.length);
+      await moveCard(activeCard, activeList.id, overList.id, overList.cards.length);
       return;
     }
 
@@ -124,7 +143,7 @@ export function BoardDetail() {
     // Calculate new position
     const overCardIndex = overListContainingCard.cards.findIndex((c) => c.id === overId);
 
-    // If dropping on the same list and after the same card, do nothing
+    // If dropping on to same list and after of same card, do nothing
     if (
       overListContainingCard.id === activeList.id &&
       overCardIndex === activeList.cards.findIndex((c) => c.id === activeId) + 1
@@ -132,24 +151,35 @@ export function BoardDetail() {
       return;
     }
 
-    await moveCard(activeCard.id, activeList.id, overListContainingCard.id, overCardIndex);
+    await moveCard(activeCard, activeList.id, overListContainingCard.id, overCardIndex);
   };
 
   const handleCardClick = (card: CardType) => {
     navigate(`/boards/${id}/cards/${card.id}`);
   };
 
-  const handleAddList = async () => {
-    const listName = prompt('Enter list name:');
-    if (listName && listName.trim()) {
-      try {
-        const newList = await createList(listName.trim(), board ? board.lists.length : 0);
-      } catch (err) {
-        // Error handled by hook
-      }
-    }
+  const handleAddList = () => {
+    openModal((props) => (
+      <CreateListModal
+        {...props}
+        onCreate={async (name) => {
+          await createList(name, board ? board.lists.length : 0);
+          fetchBoard(); // Refresh board data
+        }}
+      />
+    ));
   };
 
+  const handleAddCard =
+    (listId: number) => async (data: { name: string; description?: string }) => {
+      await createCard(listId, {
+        name: data.name,
+        description: data.description,
+        pos: board ? board.lists.find((list) => list.id === listId)?.cards.length || 0 : 0,
+      });
+      fetchBoard(); // Refresh board data
+    };
+
   if (!board) {
     return <div className="text-white">Loading...</div>;
   }
@@ -194,6 +224,7 @@ export function BoardDetail() {
               list={list}
               cards={list.cards}
               onCardClick={handleCardClick}
+              onCardCreate={handleAddCard(list.id)}
             />
           ))}
         </div>
diff --git a/frontend/src/pages/BoardEdit.tsx b/frontend/src/pages/BoardEdit.tsx
index 68e684d..8178cd8 100644
--- a/frontend/src/pages/BoardEdit.tsx
+++ b/frontend/src/pages/BoardEdit.tsx
@@ -5,6 +5,7 @@ import { useNavigate, Link, useParams } from 'react-router-dom';
 import { useBoard } from '../hooks/useBoard';
 import { useBoards } from '../hooks/useBoards';
 import { useEffect } from 'react';
+import { useToast } from '@/context/toasts';
 
 const boardSchema = z.object({
   name: z
@@ -22,6 +23,7 @@ export function BoardEdit() {
   const { board } = useBoard(parseInt(id || '0'));
   const { updateBoard } = useBoards();
 
+  const { addNotification } = useToast();
   const {
     register,
     handleSubmit,
@@ -46,6 +48,13 @@ export function BoardEdit() {
       navigate(`/boards/${id}`);
     } catch (err) {
       // Error is handled by the hook
+      const errorMessage = err instanceof Error ? err.message : 'Failed to create card';
+      addNotification({
+        type: 'error',
+        title: 'Error Login',
+        message: errorMessage,
+        duration: 5000,
+      });
     }
   };
 
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 65e7515..6cdbfd6 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,18 +1,28 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../hooks/useAuth';
+import { useToast } from '@/context/toasts';
 
 export default function Login() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const { login: handleLogin } = useAuth();
 
+  const { addNotification } = useToast();
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
       await handleLogin(email, password);
     } catch (err) {
       // Error is handled by the hook (toast shown)
+      const errorMessage = err instanceof Error ? err.message : 'Failed to create card';
+      addNotification({
+        type: 'error',
+        title: 'Error Login',
+        message: errorMessage,
+        duration: 5000,
+      });
     }
   };
 
@@ -58,7 +68,7 @@ export default function Login() {
       </form>
 
       <p className="mt-6 text-center text-gray-400">
-        Don't have an account?
+        Don&apos;t have an account?
         <Link to="/register" className="ml-2 text-blue-400 hover:text-blue-300">
           Register
         </Link>
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index 6025b9a..db26265 100644
--- a/frontend/src/pages/Register.tsx
+++ b/frontend/src/pages/Register.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../hooks/useAuth';
+import { useToast } from '../context/toasts/useToast';
 
 interface FormData {
   email: string;
@@ -22,6 +23,7 @@ export function Register() {
   });
 
   const { register: handleRegister } = useAuth();
+  const { addNotification } = useToast();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({
@@ -50,7 +52,13 @@ export function Register() {
         last_name: formData.last_name,
       });
     } catch (err) {
-      // Error is handled by the hook (toast shown)
+      const errorMessage = err instanceof Error ? err.message : 'Failed to register';
+      addNotification({
+        type: 'error',
+        title: 'Registration Error',
+        message: errorMessage,
+        duration: 5000,
+      });
     }
   };