[UI] Modernize Views with Better Tailwind Components

[devalade]

Description

The current generated views are functional but very basic. Upgrade to modern, polished UI components.

Current Issues

• Plain table with no hover states or zebra striping
• No card layouts for forms
• No responsive mobile design
• Basic form inputs without floating labels or validation styling
• No toast notifications (just session flash)

Proposed Improvements

• Card-based layouts for create/edit forms
• Better tables: Zebra striping, row hover, sticky headers
• Form inputs: Floating labels, inline validation errors, helper text
• Toast notifications: Auto-dismissible success/error toasts
• Breadcrumbs: Auto-generated breadcrumb navigation
• Responsive: Collapsible sidebar, mobile-optimized table (card view on small screens)
• Dark mode support: dark: Tailwind variants
• Empty states: Illustrations and clear CTAs
• Loading states: Skeleton screens for table rows

Example Form Input

<div class="space-y-1">
    <label for="title" class="text-sm font-medium text-gray-700 dark:text-gray-300">
        Title
    </label>
    <input 
        wire:model="title" 
        id="title"
        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600"
        :class="{ 'border-red-500': $errors->has('title') }"
    />
    @error('title') 
        <p class="text-sm text-red-600">{{ $message }}</p> 
    @enderror
</div>

Inspiration

• Laravel Nova
• Filament Admin Panel
• Tailwind UI