Overview

Migrate MUI data display components to shadcn/ui equivalents.

Parent Issue: #18993
Estimated Duration: 1-2 days
Priority: Low
Depends on: #18995 (Core Components)

Component Usage Analysis

• List: 3 usages
• ListItem: 3 usages
• ListItemText: 2 usages
• ListItemIcon: 1 usage
• Card: 3 usages
• CardContent: 1 usage
• CardActionArea: 1 usage
• CircularProgress: 11 usages
• LinearProgress: 2 usages
• Skeleton: 22 usages
• Alert: 2 usages
• AlertTitle: 7 usages
• Chip: 1 usage
• Divider: 7 usages
• Paper: 1 usage
• Total: 25 core data display components

Tasks

Card Components

• Generate Card component suite
• Create CardHeader, CardContent, CardFooter
• Migrate Card usage (3 instances)
• Update CardContent and CardActionArea

Progress Components

• Generate Progress component
• Create loading spinner variants
• Migrate CircularProgress (11 instances)
• Replace LinearProgress (2 instances)
• Update Skeleton components (22 instances)

List Components

• Create custom List components
• Design ListItem patterns
• Migrate List/ListItem usage (9 instances)

Feedback Components

• Generate Alert component
• Create Badge component for Chip replacement
• Generate Separator for Divider
• Migrate Alert components (9 instances)
• Replace Chip and Divider (8 instances)

Implementation Strategy

1. Generate Components: Create shadcn data display components
2. Progress Migration: Start with loading states
3. Card Migration: Convert card layouts
4. List Migration: Handle list patterns
5. Feedback Migration: Update alerts and badges

Acceptance Criteria

• All data display components use shadcn equivalents
• Loading states work correctly
• Card layouts maintain design
• List patterns are consistent
• Alert messaging works properly
• All tests pass

Testing Requirements

• Loading state testing
• Card interaction testing
• Alert display testing
• Visual regression testing