feat: add advanced analytics and territory management system
- Add comprehensive analytics components with export functionality - Implement territory management with manager performance tracking - Add seatmap components for venue layout management - Create customer management features with modal interface - Add advanced hooks for dashboard flags and territory data - Implement seat selection and venue management utilities - Add type definitions for ticketing and seatmap systems 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
165
reactrebuild0825/src/components/SkeletonShowcase.tsx
Normal file
165
reactrebuild0825/src/components/SkeletonShowcase.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
|
||||
import {
|
||||
KPISkeleton,
|
||||
TableSkeleton,
|
||||
FormSkeleton,
|
||||
OrganizationSkeleton,
|
||||
LoginSkeleton,
|
||||
EventDetailSkeleton,
|
||||
EventCardsSkeleton
|
||||
} from './skeleton';
|
||||
import { Card, CardHeader, CardBody } from './ui/Card';
|
||||
|
||||
/**
|
||||
* Showcase component demonstrating all the new skeleton components
|
||||
* This replaces generic spinners with contextually appropriate loading states
|
||||
*/
|
||||
export function SkeletonShowcase() {
|
||||
return (
|
||||
<div className="space-y-8 p-6">
|
||||
<div className="text-center space-y-2">
|
||||
<h1 className="text-3xl font-bold text-text-primary">
|
||||
Regional Skeleton Components
|
||||
</h1>
|
||||
<p className="text-text-secondary max-w-2xl mx-auto">
|
||||
Context-aware loading states that provide better user experience than generic spinners.
|
||||
Each skeleton matches the structure of the content it represents.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* KPI Skeleton */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold">KPI Dashboard Skeleton</h2>
|
||||
<p className="text-sm text-text-secondary">
|
||||
For dashboard statistics and metric cards
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<KPISkeleton count={4} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Event Cards Skeleton */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold">Event Cards Skeleton</h2>
|
||||
<p className="text-sm text-text-secondary">
|
||||
For event listing grids and card layouts
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<EventCardsSkeleton count={6} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Table Skeleton */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold">Table Skeleton</h2>
|
||||
<p className="text-sm text-text-secondary">
|
||||
For data tables with customizable columns and features
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<TableSkeleton
|
||||
rows={5}
|
||||
columns={4}
|
||||
hasAvatar={true}
|
||||
hasActions={true}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Form Skeleton */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold">Form Skeleton</h2>
|
||||
<p className="text-sm text-text-secondary">
|
||||
For form layouts with various input types
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<FormSkeleton
|
||||
fields={4}
|
||||
textAreas={1}
|
||||
selects={2}
|
||||
checkboxes={2}
|
||||
layout="two-column"
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Full Page Skeletons */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Organization Skeleton Preview */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold">Organization Loading</h2>
|
||||
<p className="text-sm text-text-secondary">
|
||||
Full-screen loading for org initialization (scaled down)
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<div className="h-64 bg-org-canvas rounded-lg overflow-hidden">
|
||||
<div className="scale-50 origin-top-left w-[200%] h-[200%]">
|
||||
<OrganizationSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Login Skeleton Preview */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold">Login Loading</h2>
|
||||
<p className="text-sm text-text-secondary">
|
||||
Authentication state loading (scaled down)
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<div className="h-64 bg-solid-with-pattern rounded-lg overflow-hidden">
|
||||
<div className="scale-50 origin-top-left w-[200%] h-[200%]">
|
||||
<LoginSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Event Detail Skeleton */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold">Event Detail Skeleton</h2>
|
||||
<p className="text-sm text-text-secondary">
|
||||
Complex page layout with hero, stats, and content areas
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<div className="max-h-96 overflow-hidden">
|
||||
<EventDetailSkeleton />
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div className="text-center space-y-3">
|
||||
<h3 className="text-lg font-medium text-text-primary">
|
||||
Implementation Complete ✅
|
||||
</h3>
|
||||
<div className="text-sm text-text-secondary space-y-1 max-w-md mx-auto">
|
||||
<p>✅ Replaced LoadingSpinner in App.tsx with OrganizationSkeleton</p>
|
||||
<p>✅ Replaced LoginPage loading with LoginSkeleton</p>
|
||||
<p>✅ Replaced EventDetailPage loading with EventDetailSkeleton</p>
|
||||
<p>✅ EventsIndexPage already uses EventCardsSkeleton</p>
|
||||
<p>✅ Button loading spinner kept (appropriate for size constraint)</p>
|
||||
<p>✅ All new skeletons follow glassmorphism design system</p>
|
||||
<p>✅ Components use design tokens and responsive patterns</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user