merge develop to main

[damnthonyy]

nothing changes

[sonarqubecloud]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[qodo-code-review]

Review Summary by Qodo

Add comprehensive UI component library and robot control dashboard system

✨ Enhancement

Walkthroughs

Description

• Comprehensive UI component library with 50+ reusable components built on Radix UI, Recharts, and
  other modern libraries
• Complete design system with CSS custom properties for colors, spacing, and theme configuration
• Robot control dashboard with task management, metrics visualization, manual control, and camera
  feed
• Form system with react-hook-form integration for validated form handling
• Utility functions for class name merging (cn()) and mobile viewport detection (useIsMobile())
• Expanded dependencies including Radix UI primitives, form validation (zod, react-hook-form),
  charting (Recharts), and animations (Framer Motion)
• Updated build configuration with direct ESLint usage instead of Next.js lint wrapper

Diagram

flowchart LR
  A["Design System<br/>CSS Variables"] --> B["UI Components<br/>50+ Components"]
  C["Radix UI<br/>Primitives"] --> B
  D["Recharts<br/>Library"] --> B
  B --> E["Dashboard<br/>Robot Control"]
  F["Form System<br/>react-hook-form"] --> E
  G["Utilities<br/>cn, useIsMobile"] --> B
  H["Dependencies<br/>Updated"] --> B

Loading

File Changes

1. src/components/ui/use-mobile.ts ✨ Enhancement +21/-0

Mobile detection hook for responsive components

• New hook useIsMobile() that detects mobile viewport using media queries
• Tracks window width against MOBILE_BREAKPOINT constant (768px)
• Uses matchMedia API with event listener for responsive updates

src/components/ui/use-mobile.ts

---

2. src/lib/utils.ts ✨ Enhancement +7/-0

Class name merging utility function

• New utility function cn() for merging Tailwind CSS classes
• Combines clsx and tailwind-merge for conflict resolution
• Follows shadcn design pattern for class composition

src/lib/utils.ts

---

3. src/app/globals.css ⚙️ Configuration changes +63/-2

Comprehensive design system CSS variables

• Expanded CSS custom properties with comprehensive design tokens
• Added color variables for UI components (primary, secondary, destructive, success, warning)
• Added dashboard-specific tokens and chart color definitions
• Extended Tailwind theme configuration with radius variants and color mappings

src/app/globals.css

---

View more (62)

4. src/components/ui/sidebar.tsx ✨ Enhancement +724/-0

Full-featured sidebar navigation component system

• Complete sidebar component system with 20+ sub-components
• Implements collapsible sidebar with desktop/mobile variants (offcanvas, icon, none)
• Includes context provider for state management and keyboard shortcuts (Cmd+B)
• Features responsive design with cookie-based state persistence

src/components/ui/sidebar.tsx

---

5. src/components/ui/chart.tsx ✨ Enhancement +353/-0

Recharts-based charting component library

• Chart wrapper component using Recharts library
• Provides ChartContainer, ChartTooltip, and ChartLegend components
• Implements theme-aware color configuration system
• Includes helper function for payload configuration extraction

src/components/ui/chart.tsx

---

6. src/components/ui/menubar.tsx ✨ Enhancement +276/-0

Radix-based menubar component suite

• Complete menubar component wrapping Radix UI primitives
• Includes menu items, checkboxes, radio items, and separators
• Supports nested submenus with keyboard navigation
• Styled with Tailwind CSS for consistent UI

src/components/ui/menubar.tsx

---

7. src/components/ui/context-menu.tsx ✨ Enhancement +252/-0

Right-click context menu component system

• Context menu component system built on Radix UI
• Supports checkbox items, radio items, and nested submenus
• Includes destructive variant for dangerous actions
• Provides keyboard shortcuts and accessibility features

src/components/ui/context-menu.tsx

---

8. src/components/ui/dropdown-menu.tsx ✨ Enhancement +257/-0

Dropdown menu component with variants

• Dropdown menu component wrapping Radix UI primitives
• Includes checkbox and radio item variants
• Supports nested submenus and keyboard shortcuts
• Styled with animations and proper accessibility

src/components/ui/dropdown-menu.tsx

---

9. src/components/ui/navigation-menu.tsx ✨ Enhancement +168/-0

Navigation menu component with viewport support

• Navigation menu component system using Radix UI
• Includes viewport-based and non-viewport layouts
• Provides trigger, content, link, and indicator sub-components
• Supports keyboard navigation and animations

src/components/ui/navigation-menu.tsx

---

10. src/components/ui/carousel.tsx ✨ Enhancement +253/-0

Embla-based carousel component with controls

• Carousel component using Embla Carousel library
• Supports horizontal and vertical orientations
• Includes previous/next navigation buttons with scroll state
• Provides keyboard navigation (arrow keys) and context-based API

src/components/ui/carousel.tsx

---

11. src/components/ui/select.tsx ✨ Enhancement +185/-0

Select dropdown component system

• Select dropdown component built on Radix UI
• Includes group, item, label, and separator sub-components
• Supports scroll buttons and keyboard navigation
• Features size variants (sm, default) and proper accessibility

src/components/ui/select.tsx

---

12. src/components/ui/command.tsx ✨ Enhancement +177/-0

Command palette and search component

• Command palette component using cmdk library
• Includes command dialog wrapper with search functionality
• Provides group, item, separator, and shortcut sub-components
• Integrates with Dialog component for modal display

src/components/ui/command.tsx

---

13. src/components/dashboard/task-manager.tsx ✨ Enhancement +141/-0

Robot task management dashboard component

• Dashboard task manager component for robot mission assignment
• Supports delivery (UC-01) and guidance (UC-02) use cases
• Displays active task status with progress animation
• Includes start/stop controls and time estimation

src/components/dashboard/task-manager.tsx

---

14. src/components/dashboard/metrics-and-alerts.tsx ✨ Enhancement +132/-0

Robot metrics and alerts dashboard display

• Metrics and alerts dashboard component with Recharts visualization
• Displays battery vs activity area chart with gradient
• Shows recent alerts with icons and timestamps
• Includes summary cards for daily missions and distance traveled

src/components/dashboard/metrics-and-alerts.tsx

---

15. package.json Dependencies +49/-5

Expanded dependencies and updated lint configuration

• Updated lint commands from next lint to eslint for direct ESLint usage
• Added 40+ dependencies including Radix UI components, form libraries, and charting
• Added motion animation library and theme management (next-themes)
• Added form validation (zod, react-hook-form) and UI utilities (sonner, vaul)

package.json

---

16. src/components/ui/drawer.tsx ✨ Enhancement +132/-0

Swipeable drawer component system

• Drawer component using Vaul library for swipeable drawers
• Supports multiple directions (top, bottom, left, right)
• Includes overlay, header, footer, and close button sub-components
• Provides animations and responsive sizing

src/components/ui/drawer.tsx

---

17. src/components/ui/sheet.tsx ✨ Enhancement +139/-0

Side sheet modal component system

• Sheet component built on Radix UI dialog primitives
• Supports four directional variants (top, right, bottom, left)
• Includes header, footer, and close button with animations
• Provides responsive width/height constraints

src/components/ui/sheet.tsx

---

18. src/components/ui/input.tsx ✨ Enhancement +23/-0

Styled HTML input component

• Basic input component with forwardRef for ref access
• Styled with Tailwind CSS including focus states and disabled states
• Supports all standard HTML input attributes
• Includes file input styling

src/components/ui/input.tsx

---

19. src/components/ui/form.tsx ✨ Enhancement +168/-0

Form components with react-hook-form integration

• New form component library with FormField, FormItem, FormLabel, FormControl,
 FormDescription, and FormMessage components
• Integrates react-hook-form for form state management with context-based field tracking
• Provides accessible form elements with proper ARIA attributes and error handling
• Exports reusable form building blocks for creating validated forms

src/components/ui/form.tsx

---

20. src/components/ui/alert-dialog.tsx ✨ Enhancement +157/-0

Alert dialog component with Radix UI primitives

• New alert dialog component wrapping @radix-ui/react-alert-dialog primitives
• Includes AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader,
 AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, and
 AlertDialogCancel components
• Provides styled overlay, animations, and button variants for confirmation dialogs
• Fully accessible with proper ARIA attributes and focus management

src/components/ui/alert-dialog.tsx

---

21. src/components/ui/dialog.tsx ✨ Enhancement +135/-0

Dialog modal component with Radix UI

• New dialog/modal component built on @radix-ui/react-dialog primitives
• Includes Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter,
 DialogTitle, DialogDescription, and DialogClose components
• Features animated overlay, close button with icon, and responsive styling
• Provides accessible modal dialog with proper focus trapping and keyboard support

src/components/ui/dialog.tsx

---

22. src/components/dashboard/manual-control.tsx ✨ Enhancement +122/-0

Manual robot control panel component

• New manual control component for robot piloting with autonomous mode toggle
• Includes directional movement buttons (up, down, left, right), speed slider, and emergency stop
 button
• Integrates Switch, Slider, Button, Card, and Label UI components
• Provides French labels and disables controls when in autonomous mode

src/components/dashboard/manual-control.tsx

---

23. src/components/ui/pagination.tsx ✨ Enhancement +127/-0

Pagination navigation component

• New pagination component with Pagination, PaginationContent, PaginationItem,
 PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis components
• Provides accessible navigation with proper ARIA labels and semantic HTML
• Includes previous/next buttons with icons and ellipsis for page ranges
• Supports active state styling and responsive text display

src/components/ui/pagination.tsx

---

24. src/components/ui/calendar.tsx ✨ Enhancement +75/-0

Calendar date picker component

• New calendar component wrapping react-day-picker with comprehensive styling
• Provides month/year navigation, day selection, and range selection support
• Includes customizable class names for all calendar elements and animations
• Supports multiple selection modes with proper accessibility attributes

src/components/ui/calendar.tsx

---

25. src/components/dashboard/dashboard.tsx ✨ Enhancement +77/-0

Main dashboard layout and state management

• New main dashboard component orchestrating robot control interface
• Integrates Header, CameraFeed, ManualControl, TaskManager, and MetricsAndAlerts
 sub-components
• Manages state for autonomous mode, speed, and active tasks with toast notifications
• Provides responsive grid layout with emergency stop functionality

src/components/dashboard/dashboard.tsx

---

26. src/components/ui/table.tsx ✨ Enhancement +116/-0

Data table component with responsive design

• New table component with Table, TableHeader, TableBody, TableFooter, TableRow,
 TableHead, TableCell, and TableCaption components
• Provides responsive table with horizontal scrolling on small screens
• Includes hover states, selection support, and proper semantic HTML structure
• Styled with consistent spacing and typography

src/components/ui/table.tsx

---

27. src/components/ui/breadcrumb.tsx ✨ Enhancement +109/-0

Breadcrumb navigation component

• New breadcrumb navigation component with Breadcrumb, BreadcrumbList, BreadcrumbItem,
 BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, and BreadcrumbEllipsis components
• Provides accessible navigation trail with proper ARIA attributes
• Supports custom separators and ellipsis for long breadcrumb trails
• Responsive design with flexible gap sizing

src/components/ui/breadcrumb.tsx

---

28. src/components/ui/input-otp.tsx ✨ Enhancement +77/-0

OTP input component with animations

• New OTP (One-Time Password) input component wrapping input-otp library
• Includes InputOTP, InputOTPGroup, InputOTPSlot, and InputOTPSeparator components
• Provides animated caret, focus states, and error handling with accessibility support
• Styled with proper spacing and visual feedback for active slots

src/components/ui/input-otp.tsx

---

29. src/components/ui/card.tsx ✨ Enhancement +82/-0

Card container component with sub-components

• New card component with Card, CardHeader, CardTitle, CardDescription, CardContent, and
 CardFooter sub-components
• Provides reusable container for content with consistent styling and spacing
• Uses forwardRef for proper ref forwarding and customization
• Includes white background and border styling

src/components/ui/card.tsx

---

30. src/components/ui/resizable.tsx ✨ Enhancement +56/-0

Resizable panel layout component

• New resizable panel component wrapping react-resizable-panels library
• Includes ResizablePanelGroup, ResizablePanel, and ResizableHandle components
• Provides draggable resize handles with optional grip icon and focus states
• Supports both horizontal and vertical panel layouts

src/components/ui/resizable.tsx

---

31. src/components/ui/accordion.tsx ✨ Enhancement +66/-0

Accordion collapsible component

• New accordion component wrapping @radix-ui/react-accordion primitives
• Includes Accordion, AccordionItem, AccordionTrigger, and AccordionContent components
• Provides animated expand/collapse with chevron icon rotation
• Supports keyboard navigation and proper accessibility attributes

src/components/ui/accordion.tsx

---

32. src/components/ui/toggle-group.tsx ✨ Enhancement +73/-0

Toggle group button component

• New toggle group component for grouped toggle buttons using @radix-ui/react-toggle-group
• Includes ToggleGroup and ToggleGroupItem components with variant and size support
• Provides context-based styling inheritance and rounded corner styling for group items
• Supports multiple selection modes with proper focus management

src/components/ui/toggle-group.tsx

---

33. src/components/ui/tooltip.tsx ✨ Enhancement +61/-0

Tooltip component with animations

• New tooltip component wrapping @radix-ui/react-tooltip primitives
• Includes Tooltip, TooltipTrigger, TooltipContent, and TooltipProvider components
• Provides animated tooltip with configurable delay and positioning
• Includes arrow indicator and proper accessibility support

src/components/ui/tooltip.tsx

---

34. src/components/ui/alert.tsx ✨ Enhancement +66/-0

Alert notification component

• New alert component with Alert, AlertTitle, and AlertDescription sub-components
• Provides variant support for default and destructive alerts with icon support
• Uses CSS grid layout for flexible icon and text positioning
• Includes proper styling for different alert types

src/components/ui/alert.tsx

---

35. src/components/ui/button.tsx ✨ Enhancement +54/-0

Button component with multiple variants

• New button component with multiple variants (default, destructive, outline, secondary, ghost,
 link)
• Supports size variants (default, sm, lg, icon) with proper spacing and styling
• Includes focus states, disabled states, and asChild prop for composition
• Uses class-variance-authority for variant management

src/components/ui/button.tsx

---

36. src/components/dashboard/header.tsx ✨ Enhancement +52/-0

Dashboard header with robot status display

• New header component displaying robot status and connection information
• Shows logo, robot name, connection status with ping, battery level, and autonomous mode badge
• Provides sticky positioning and responsive layout with icon indicators
• Integrates Badge component for status display

src/components/dashboard/header.tsx

---

37. src/components/ui/tabs.tsx ✨ Enhancement +53/-0

Tabs navigation component

• New tabs component wrapping @radix-ui/react-tabs primitives
• Includes Tabs, TabsList, TabsTrigger, and TabsContent components
• Provides styled tab navigation with active state styling and animations
• Supports keyboard navigation and proper accessibility attributes

src/components/ui/tabs.tsx

---

38. src/components/ui/slider.tsx ✨ Enhancement +53/-0

Slider range input component

• New slider component wrapping @radix-ui/react-slider primitives
• Includes Slider, SliderTrack, and SliderThumb components
• Provides range input with styled track, thumb, and focus states
• Supports disabled state and smooth transitions

src/components/ui/slider.tsx

---

39. src/components/ui/popover.tsx ✨ Enhancement +48/-0

Popover floating component

• New popover component wrapping @radix-ui/react-popover primitives
• Includes Popover, PopoverTrigger, PopoverContent, and PopoverAnchor components
• Provides animated popover with configurable alignment and positioning
• Supports portal rendering and proper focus management

src/components/ui/popover.tsx

---

40. src/components/ui/toggle.tsx ✨ Enhancement +47/-0

Toggle button component

• New toggle button component wrapping @radix-ui/react-toggle primitives
• Provides variant support (default, outline) and size variants (default, sm, lg)
• Includes active state styling and proper accessibility attributes
• Exports toggleVariants for use in other components

src/components/ui/toggle.tsx

---

41. src/components/ui/scroll-area.tsx ✨ Enhancement +58/-0

Custom scroll area component

• New scroll area component wrapping @radix-ui/react-scroll-area primitives
• Includes ScrollArea and ScrollBar components with vertical/horizontal support
• Provides custom scrollbar styling with proper focus states
• Supports responsive scrolling with smooth transitions

src/components/ui/scroll-area.tsx

---

42. src/components/ui/hover-card.tsx ✨ Enhancement +44/-0

Hover card component

• New hover card component wrapping @radix-ui/react-hover-card primitives
• Includes HoverCard, HoverCardTrigger, and HoverCardContent components
• Provides animated card that appears on hover with configurable positioning
• Supports portal rendering and proper focus management

src/components/ui/hover-card.tsx

---

43. src/components/dashboard/camera-feed.tsx ✨ Enhancement +38/-0

Camera feed display component

• New camera feed component displaying simulated video stream
• Shows recording indicator with animated pulse and crosshair overlay
• Integrates Card, Badge components for layout and status display
• Provides responsive aspect ratio video container

src/components/dashboard/camera-feed.tsx

---

44. src/components/ui/radio-group.tsx ✨ Enhancement +45/-0

Radio button group component

• New radio group component wrapping @radix-ui/react-radio-group primitives
• Includes RadioGroup and RadioGroupItem components with indicator
• Provides styled radio buttons with focus states and error handling
• Supports proper accessibility with ARIA attributes

src/components/ui/radio-group.tsx

---

45. src/components/ui/badge.tsx ✨ Enhancement +40/-0

Badge status indicator component

• New badge component with multiple variants (default, secondary, destructive, outline, success,
 warning)
• Provides inline display with rounded styling and hover effects
• Supports custom className composition
• Exports badgeVariants for variant management

src/components/ui/badge.tsx

---

46. src/components/ui/checkbox.tsx ✨ Enhancement +32/-0

Checkbox input component

• New checkbox component wrapping @radix-ui/react-checkbox primitives
• Provides styled checkbox with check icon indicator
• Includes focus states, disabled state, and error handling
• Supports proper accessibility with ARIA attributes

src/components/ui/checkbox.tsx

---

47. src/components/ui/avatar.tsx ✨ Enhancement +53/-0

Avatar image component

• New avatar component wrapping @radix-ui/react-avatar primitives
• Includes Avatar, AvatarImage, and AvatarFallback components
• Provides circular image container with fallback text support
• Supports responsive sizing and proper image aspect ratio

src/components/ui/avatar.tsx

---

48. src/components/ui/switch.tsx ✨ Enhancement +27/-0

Switch toggle component

• New switch/toggle component wrapping @radix-ui/react-switch primitives
• Provides animated toggle with checked/unchecked states
• Includes focus states, disabled state, and smooth transitions
• Styled with blue color scheme and proper accessibility support

src/components/ui/switch.tsx

---

49. src/components/ui/collapsible.tsx ✨ Enhancement +33/-0

Collapsible content component

• New collapsible component wrapping @radix-ui/react-collapsible primitives
• Includes Collapsible, CollapsibleTrigger, and CollapsibleContent components
• Provides expandable/collapsible content with state management
• Supports keyboard navigation and proper accessibility attributes

src/components/ui/collapsible.tsx

---

50. src/components/ui/progress.tsx ✨ Enhancement +31/-0

Progress bar component

• New progress bar component wrapping @radix-ui/react-progress primitives
• Provides visual progress indication with animated fill
• Supports custom value and styling with proper accessibility
• Includes smooth transitions and responsive design

src/components/ui/progress.tsx

---

51. src/components/ui/label.tsx ✨ Enhancement +24/-0

Form label component

• New label component wrapping @radix-ui/react-label primitives
• Provides styled form label with proper accessibility support
• Includes disabled state styling and proper text styling
• Exports labelVariants for variant management

src/components/ui/label.tsx

---

52. src/components/ui/textarea.tsx ✨ Enhancement +18/-0

Textarea input component

• New textarea component for multi-line text input
• Provides styled textarea with focus states and error handling
• Includes proper accessibility attributes and responsive sizing
• Supports field-sizing-content for dynamic height

src/components/ui/textarea.tsx

---

53. src/components/ui 📦 Other +0/-0

src/components/ui

---

54. .prettierrc Additional files +2/-1

...

.prettierrc

---

55. eslint.config.mjs Additional files +2/-0

...

eslint.config.mjs

---

56. pnpm-lock.yaml Additional files +2237/-148

...

pnpm-lock.yaml

---

57. sonar-project.properties Additional files +1/-0

...

sonar-project.properties

---

58. src/app/page.tsx Additional files +3/-7

...

src/app/page.tsx

---

59. src/components/dashboard/.gitkeep Additional files +0/-0

...

src/components/dashboard/.gitkeep

---

60. src/components/ui/.gitkeep Additional files +0/-0

...

src/components/ui/.gitkeep

---

61. src/components/ui/aspect-ratio.tsx Additional files +11/-0

...

src/components/ui/aspect-ratio.tsx

---

62. src/components/ui/separator.tsx Additional files +28/-0

...

src/components/ui/separator.tsx

---

63. src/components/ui/skeleton.tsx Additional files +13/-0

...

src/components/ui/skeleton.tsx

---

64. src/components/ui/sonner.tsx Additional files +25/-0

...

src/components/ui/sonner.tsx

---

65. tsconfig.json Additional files +1/-1

...

tsconfig.json

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. React namespace undefined ✓ Resolved 🐞 Bug ≡ Correctness

Description

src/components/ui/sonner.tsx uses the React namespace in a type assertion (React.CSSProperties)
but does not import React, which causes a TypeScript compile error. Because tsconfig includes all
**/*.ts(x) files, pnpm run typecheck will fail even if this component is not imported anywhere.

Code

src/components/ui/sonner.tsx[R3-18]

+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, ToasterProps } from 'sonner';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties

Evidence

sonner.tsx references React.CSSProperties without importing React, so the React identifier is
undefined at typecheck time. The repo’s tsconfig includes all TS/TSX files, so this file is
typechecked regardless of whether it’s referenced by runtime entrypoints.

src/components/ui/sonner.tsx[1-25]
tsconfig.json[25-33]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`src/components/ui/sonner.tsx` uses `React.CSSProperties` but does not import React (or `CSSProperties`). This causes a TypeScript error (`Cannot find name 'React'`) during `tsc --noEmit`.
### Issue Context
The repo’s `tsconfig.json` includes all `**/*.ts` / `**/*.tsx`, so this fails CI even if the component isn’t imported.
### Fix Focus Areas
- src/components/ui/sonner.tsx[1-20]
### Suggested change
Add an import and keep style typing explicit, e.g.:
- `import * as React from 'react';`
Or replace the assertion with:
- `import type { CSSProperties } from 'react';`
- `} as CSSProperties`

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. CardTitle ref type mismatch ✓ Resolved 🐞 Bug ≡ Correctness

Description

src/components/ui/card.tsx defines CardTitle as forwardRef but renders an `` and assigns that
ref to it, which is a type mismatch. Under strict TypeScript settings this can produce ref-type
errors and break compilation for consumers using refs.

Code

src/components/ui/card.tsx[R32-44]

+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'font-semibold leading-none tracking-tight text-zinc-900 text-lg',
+      className
+    )}
+    {...props}
+  />
+));

Evidence

The code explicitly declares the forwarded ref element type as HTMLParagraphElement but attaches
the ref to an `` element. This mismatch is visible directly in the component definition.

src/components/ui/card.tsx[32-44]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`CardTitle` forwards a ref typed as `HTMLParagraphElement` but renders an `<h3>` and assigns that ref to it. This is a type mismatch that can cause TypeScript compilation errors when refs are used.
### Issue Context
The repo runs TypeScript in strict mode and typechecks all `**/*.ts(x)`.
### Fix Focus Areas
- src/components/ui/card.tsx[32-44]
### Suggested change
Update the ref generic to match the element:
- `React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(... render <h3 /> ...)`
(Alternative: `React.forwardRef<React.ElementRef<'h3'>, React.ComponentPropsWithoutRef<'h3'>>`)

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[damnthonyy]

dont need coverage for frontend... not > 80% like so, merge to main

[iGrec-a2n]

Minor warnings: Some props has to be read only.
Nothing to change