fix: handle undefined card titles in card modal header

__tests__/components/card-modal-header.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { Header } from '@/components/modals/card-modal/header';
+
+// Mock the necessary hooks and components
+jest.mock('@/hooks/use-action', () => ({
+  useAction: () => ({
+    execute: jest.fn(),
+  }),
+}));
+
+jest.mock('next/navigation', () => ({
+  useParams: () => ({
+    boardId: 'test-board-id',
+  }),
+}));
+
+jest.mock('@tanstack/react-query', () => ({
+  useQueryClient: jest.fn(() => ({
+    invalidateQueries: jest.fn(),
+  })),
+}));
+
+describe('Card Modal Header Component', () => {
+  it('should render with valid data', () => {
+    const mockData = {
+      id: 'test-card-id',
+      title: 'Test Card Title',
+      list: {
+        id: 'test-list-id',
+        title: 'Test List Title',
+      },
+    };
+
+    render(<Header data={mockData} />);
+    
+    const titleInput = screen.getByDisplayValue('Test Card Title');
+    expect(titleInput).toBeInTheDocument();
+    
+    const listText = screen.getByText(/in list/i);
+    expect(listText).toBeInTheDocument();
+    expect(screen.getByText('Test List Title')).toBeInTheDocument();
+  });
+
+  it('should handle undefined title gracefully', () => {
+    // Create a mock data object without a title
+    const mockData = {
+      id: 'test-card-id',
+      list: {
+        id: 'test-list-id',
+        title: 'Test List Title',
+      },
+    };
+
+    // @ts-ignore - Intentionally passing incorrect data to test the fix
+    render(<Header data={mockData} />);
+    
+    // Should render with empty title
+    const titleInput = screen.getByRole('textbox', { name: /title/i });
+    expect(titleInput).toBeInTheDocument();
+    expect(titleInput).toHaveValue('');
+    
+    // List title should still be displayed
+    expect(screen.getByText('Test List Title')).toBeInTheDocument();
+  });
+});

components/modals/card-modal/header.tsx

@@ -40,7 +40,7 @@ export const Header = ({ data }: HeaderProps) => {
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const [title, setTitle] = useState(data.title);
+  const [title, setTitle] = useState(data?.title || '');
 
   const onBlur = () => {
     inputRef.current?.form?.requestSubmit();

components/modals/card-modal/index.tsx

@@ -19,14 +19,16 @@ export const CardModal = () => {
   const isOpen = useCardModal((state) => state.isOpen);
   const onClose = useCardModal((state) => state.onClose);
 
-  const { data: cardData } = useQuery<CardWithList>({
+  const { data: cardData, isLoading } = useQuery<CardWithList>({
     queryKey: ['card', id],
     queryFn: () => fetcher(`/api/cards/${id}`),
+    enabled: !!id, // Only run the query when ID exists
   });
 
   const { data: auditLogsData } = useQuery<AuditLog[]>({
     queryKey: ['card-logs', id],
     queryFn: () => fetcher(`/api/cards/${id}/logs`),
+    enabled: !!id, // Only run the query when ID exists
   });
 
   return (
@@ -35,7 +37,7 @@ export const CardModal = () => {
         <VisuallyHidden.Root>
           <DialogTitle>Card Data Panel</DialogTitle>
         </VisuallyHidden.Root>
-        {!cardData ? <Header.Skeleton /> : <Header data={cardData} />}
+        {!cardData || !cardData.title ? <Header.Skeleton /> : <Header data={cardData} />}
         <div className='grid grid-cols-1 md:grid-cols-4 md:gap-4'>
           <div className='col-span-3'>
             <div className='w-full space-y-10'>