feat(web): add loading skeletons, error boundaries, and accessibility improvements
- Add segment-level loading.tsx for dashboard, search, admin, and auth routes - Add segment-level error.tsx with Vietnamese error messages for all route groups - Add skip-to-content navigation link in root layout - Add id="main-content" to all layout main elements - Add aria-label to nav elements and mobile menu buttons - Improve dashboard nav responsiveness (icon-only on mobile) - Hide user name on small screens in dashboard layout Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
58
apps/web/app/(dashboard)/error.tsx
Normal file
58
apps/web/app/(dashboard)/error.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function DashboardError({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string };
|
||||
reset: () => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
console.error('Dashboard error:', error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-[400px] flex-col items-center justify-center px-4">
|
||||
<div className="mx-auto max-w-md text-center">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-destructive/10">
|
||||
<svg
|
||||
className="h-7 w-7 text-destructive"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="mt-4 text-xl font-semibold">Không thể tải bảng điều khiển</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Đã xảy ra lỗi khi tải dữ liệu. Vui lòng thử lại sau.
|
||||
</p>
|
||||
{error.digest && (
|
||||
<p className="mt-1 text-xs text-muted-foreground">Mã lỗi: {error.digest}</p>
|
||||
)}
|
||||
<div className="mt-6 flex justify-center gap-3">
|
||||
<button
|
||||
onClick={reset}
|
||||
className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90"
|
||||
>
|
||||
Thử lại
|
||||
</button>
|
||||
<a
|
||||
href="/dashboard"
|
||||
className="inline-flex h-9 items-center rounded-md border border-input bg-background px-4 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
Tải lại trang
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -25,27 +25,28 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
<span className="text-lg font-bold text-primary">GoodGo</span>
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center space-x-1">
|
||||
<nav aria-label="Bảng điều khiển" className="flex items-center space-x-1">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
aria-label={item.label}
|
||||
className={cn(
|
||||
'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
|
||||
'rounded-md px-2 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground sm:px-3',
|
||||
pathname === item.href
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
<span className="mr-1.5">{item.icon}</span>
|
||||
{item.label}
|
||||
<span className="sm:mr-1.5">{item.icon}</span>
|
||||
<span className="hidden sm:inline">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="ml-auto flex items-center space-x-3">
|
||||
{user && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
<span className="hidden text-sm text-muted-foreground sm:inline">
|
||||
{user.fullName}
|
||||
</span>
|
||||
)}
|
||||
@@ -56,7 +57,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-7xl px-4 py-6">{children}</main>
|
||||
<main id="main-content" className="mx-auto max-w-7xl px-4 py-6">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
71
apps/web/app/(dashboard)/loading.tsx
Normal file
71
apps/web/app/(dashboard)/loading.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
export default function DashboardLoading() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header skeleton */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="h-8 w-48 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-2 h-4 w-72 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
<div className="h-10 w-28 animate-pulse rounded-md bg-muted" />
|
||||
</div>
|
||||
|
||||
{/* Stats grid skeleton */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="rounded-lg border bg-card p-6 shadow-sm">
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-3 h-7 w-16 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-2 h-3 w-32 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Chart + sidebar skeleton */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<div className="rounded-lg border bg-card p-6 shadow-sm lg:col-span-2">
|
||||
<div className="h-5 w-40 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-2 h-4 w-56 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-6 h-64 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
<div className="rounded-lg border bg-card p-6 shadow-sm">
|
||||
<div className="h-5 w-36 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-2 h-4 w-28 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-6 space-y-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
|
||||
<div className="h-4 w-16 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent listings skeleton */}
|
||||
<div className="rounded-lg border bg-card shadow-sm">
|
||||
<div className="p-6">
|
||||
<div className="h-5 w-36 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-2 h-4 w-56 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
<div className="px-6 pb-6">
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-4 rounded-lg border p-3">
|
||||
<div className="h-12 w-16 flex-shrink-0 animate-pulse rounded bg-muted" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-2 h-3 w-1/2 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="h-4 w-20 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-1 h-5 w-16 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user