fix(frontend): Fix critical type safety issues from code review

Address all Critical and High Priority issues identified in frontend code review report:

Critical Issues Fixed:
- Created unified logger utility (lib/utils/logger.ts) to replace all console.log statements
- Consolidated User type definitions - removed duplicate from authStore, using single source from types/user.ts
- Eliminated 'any' types in API client - added proper generic types with AxiosRequestConfig
- Fixed SignalR ConnectionManager - replaced 'any' with generic types <T>
- Created API error types (lib/types/errors.ts) with ApiError and getErrorMessage helper
- Fixed IssueCard component - removed all type assertions, created discriminated union types for Kanban items
- Added React.memo to IssueCard for performance optimization
- Added proper ARIA labels and accessibility attributes to IssueCard

High Priority Issues Fixed:
- Fixed hardcoded user ID in CreateProjectDialog - now uses actual user from authStore
- Added useCallback to CreateProjectDialog onSubmit handler
- Fixed error handlers in use-epics.ts - replaced 'any' with ApiError type
- Updated all error handling to use logger and getErrorMessage

Type Safety Improvements:
- Created KanbanItem discriminated union (KanbanEpic | KanbanStory | KanbanTask) with proper type guards
- Added 'never' types to prevent invalid property access
- Fixed User interface to include all required fields (createdAt, updatedAt)
- Maintained backward compatibility with LegacyKanbanBoard for existing code

Files Changed:
- lib/utils/logger.ts - New centralized logging utility
- lib/types/errors.ts - New API error types and helpers
- types/user.ts - Consolidated User type with TenantRole
- types/kanban.ts - New discriminated union types for type-safe Kanban items
- components/features/kanban/IssueCard.tsx - Type-safe with React.memo
- components/features/projects/CreateProjectDialog.tsx - Fixed hardcoded user ID, added useCallback
- lib/api/client.ts - Eliminated 'any', added proper generics
- lib/signalr/ConnectionManager.ts - Replaced console.log, added generics
- lib/hooks/use-epics.ts - Fixed error handler types
- stores/authStore.ts - Removed duplicate User type
- lib/hooks/useAuth.ts - Added createdAt field to User

TypeScript compilation: ✅ All type checks passing (0 errors)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/features/kanban/IssueCard.tsx

@@ -1,17 +1,18 @@
 'use client';
 
+import React from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Issue } from '@/lib/api/issues';
+import { KanbanItem, isKanbanEpic, isKanbanStory, isKanbanTask, getKanbanItemTitle } from '@/types/kanban';
 import { FolderKanban, FileText, CheckSquare } from 'lucide-react';
 
 interface IssueCardProps {
-  issue: Issue;
+  issue: KanbanItem;
 }
 
-export function IssueCard({ issue }: IssueCardProps) {
+export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps) {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id: issue.id });
 
@@ -27,7 +28,7 @@ export function IssueCard({ issue }: IssueCardProps) {
     Critical: 'bg-red-100 text-red-700',
   };
 
-  // Type icon components (replacing emojis with lucide icons)
+  // Type icon components - type-safe with discriminated union
   const getTypeIcon = () => {
     switch (issue.type) {
       case 'Epic':
@@ -36,33 +37,29 @@ export function IssueCard({ issue }: IssueCardProps) {
         return <FileText className="w-4 h-4 text-green-600" />;
       case 'Task':
         return <CheckSquare className="w-4 h-4 text-purple-600" />;
-      case 'Bug':
-        return <span className="text-red-600">🐛</span>;
       default:
         return null;
     }
   };
 
-  // Parent breadcrumb (for Story and Task)
+  // Parent breadcrumb (for Story and Task) - type-safe with type guards
   const renderParentBreadcrumb = () => {
-    const item = issue as any;
-
-    // Story shows parent Epic
-    if (issue.type === 'Story' && item.epicId) {
+    // Story shows parent Epic - TypeScript knows epicId exists
+    if (isKanbanStory(issue)) {
       return (
         <div className="flex items-center gap-1 text-xs text-gray-500 mb-1">
           <FolderKanban className="w-3 h-3" />
-          <span className="truncate max-w-[150px]">Epic</span>
+          <span className="truncate max-w-[150px]">Epic: {issue.epicId}</span>
         </div>
       );
     }
 
-    // Task shows parent Story
-    if (issue.type === 'Task' && item.storyId) {
+    // Task shows parent Story - TypeScript knows storyId exists
+    if (isKanbanTask(issue)) {
       return (
         <div className="flex items-center gap-1 text-xs text-gray-500 mb-1">
           <FileText className="w-3 h-3" />
-          <span className="truncate max-w-[150px]">Story</span>
+          <span className="truncate max-w-[150px]">Story: {issue.storyId}</span>
         </div>
       );
     }
@@ -70,24 +67,22 @@ export function IssueCard({ issue }: IssueCardProps) {
     return null;
   };
 
-  // Child count badge (for Epic and Story)
+  // Child count badge (for Epic and Story) - type-safe with type guards
   const renderChildCount = () => {
-    const item = issue as any;
-
-    // Epic shows number of stories
-    if (issue.type === 'Epic' && item.childCount > 0) {
+    // Epic shows number of stories - TypeScript knows childCount exists
+    if (isKanbanEpic(issue) && issue.childCount && issue.childCount > 0) {
       return (
         <Badge variant="secondary" className="text-xs">
-          {item.childCount} stories
+          {issue.childCount} stories
         </Badge>
       );
     }
 
-    // Story shows number of tasks
-    if (issue.type === 'Story' && item.childCount > 0) {
+    // Story shows number of tasks - TypeScript knows childCount exists
+    if (isKanbanStory(issue) && issue.childCount && issue.childCount > 0) {
       return (
         <Badge variant="secondary" className="text-xs">
-          {item.childCount} tasks
+          {issue.childCount} tasks
         </Badge>
       );
     }
@@ -95,6 +90,9 @@ export function IssueCard({ issue }: IssueCardProps) {
     return null;
   };
 
+  // Get display title - type-safe helper function
+  const displayTitle = getKanbanItemTitle(issue);
+
   return (
     <Card
       ref={setNodeRef}
@@ -102,6 +100,9 @@ export function IssueCard({ issue }: IssueCardProps) {
       {...attributes}
       {...listeners}
       className="cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
+      role="button"
+      aria-label={`${issue.type}: ${displayTitle}, priority ${issue.priority}, status ${issue.status}`}
+      tabIndex={0}
     >
       <CardContent className="p-3 space-y-2">
         {/* Header: Type icon + Child count */}
@@ -116,26 +117,26 @@ export function IssueCard({ issue }: IssueCardProps) {
         {/* Parent breadcrumb */}
         {renderParentBreadcrumb()}
 
-        {/* Title */}
-        <h3 className="text-sm font-medium line-clamp-2">{issue.title}</h3>
+        {/* Title - type-safe */}
+        <h3 className="text-sm font-medium line-clamp-2">{displayTitle}</h3>
 
-        {/* Description (if available) */}
-        {(issue as any).description && (
-          <p className="text-xs text-gray-600 line-clamp-2">{(issue as any).description}</p>
+        {/* Description (if available) - type-safe */}
+        {issue.description && (
+          <p className="text-xs text-gray-600 line-clamp-2">{issue.description}</p>
         )}
 
-        {/* Footer: Priority + Hours */}
+        {/* Footer: Priority + Hours - type-safe */}
         <div className="flex items-center justify-between pt-2 border-t">
           <Badge variant="outline" className={priorityColors[issue.priority]}>
             {issue.priority}
           </Badge>
-          {(issue as any).estimatedHours && (
+          {issue.estimatedHours && (
             <span className="text-xs text-gray-500">
-              {(issue as any).estimatedHours}h
+              {issue.estimatedHours}h
             </span>
           )}
         </div>
       </CardContent>
     </Card>
   );
-}
+});