soufiane
c7c2a3f56c
- Delete unused page-advanced.tsx and page-backup.tsx (dashboard duplicates) - Add useApi hook for centralized API calls with auth token - Add LoadingState, ErrorState, StatusBadge reusable components - Create shared ProfilePage component for admin/employee profiles - Refactor admin and employee profile pages to use shared component This refactoring addresses SonarQube quality gate failure for duplicated lines. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface LoadingStateProps {
|
|
type?: 'page' | 'card' | 'table' | 'list';
|
|
rows?: number;
|
|
columns?: number;
|
|
}
|
|
|
|
/**
|
|
* Skeleton loading state for different UI patterns
|
|
*/
|
|
export const LoadingState: React.FC<LoadingStateProps> = ({
|
|
type = 'page',
|
|
rows = 4,
|
|
columns = 4,
|
|
}) => {
|
|
if (type === 'card') {
|
|
return (
|
|
<div className="animate-pulse">
|
|
<div className="h-32 bg-gray-200 rounded-lg"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'table') {
|
|
return (
|
|
<div className="animate-pulse space-y-3">
|
|
<div className="h-10 bg-gray-200 rounded"></div>
|
|
{[...Array(rows)].map((_, i) => (
|
|
<div key={i} className="h-12 bg-gray-100 rounded"></div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'list') {
|
|
return (
|
|
<div className="animate-pulse space-y-4">
|
|
{[...Array(rows)].map((_, i) => (
|
|
<div key={i} className="flex items-center space-x-4">
|
|
<div className="w-10 h-10 bg-gray-200 rounded-full"></div>
|
|
<div className="flex-1 space-y-2">
|
|
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
|
<div className="h-3 bg-gray-100 rounded w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Default: page layout with stats cards
|
|
return (
|
|
<div className="p-8">
|
|
<div className="animate-pulse space-y-6">
|
|
<div className="h-8 bg-gray-200 rounded w-1/4"></div>
|
|
<div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-${columns} gap-6`}>
|
|
{[...Array(columns)].map((_, i) => (
|
|
<div key={i} className="h-32 bg-gray-200 rounded-lg"></div>
|
|
))}
|
|
</div>
|
|
<div className="h-64 bg-gray-200 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoadingState;
|