3d11ef1aed
Sub-convoy #4 from .convoys/redesign-v2-from-mockups.md. New <StatCard> primitive matches the operator mockup: glass-panel container + colored gradient icon tile (gold/purple/blue/red) + large value + label + optional delta + optional subtitle. What ships: - components/ui/StatCard.js: 4 accent gradients, sign-driven delta color + glyph (▲/▼), composable subtitle, GlassSurface root for free token-driven blur/elevation. Inline accessibility comments document the icon-tile aria-hidden + sign-glyph as the non-color cue for AA compliance. - components/ui/index.js: barrel export updated. Dashboard wiring (pages/dashboard.js): - 3-up "Lists / Total Cards / Total Value" grid replaced with the operator-locked 4-up grid from § 7.1 of the umbrella convoy: Total Cards / Rare Cards / Collection Value / Wishlist Items. - Total Cards reads from collections.reduce (real data). - Collection Value reads from collections.reduce (real data). - Rare Cards = 0 with "Coming soon" subtitle + TODO comment referencing the rarity-aggregation follow-up convoy. - Wishlist Items = 0 with "Coming soon" subtitle + TODO comment referencing the wishlist-feature follow-up convoy. - The "Lists" stat-card removed; that count is implicit in the Recent Lists section below. Tests (test/components/StatCard.test.js): - 6 assertions: label/value render, positive delta in green + ▲, negative delta in red + ▼, delta omission, all 4 accents render without crash, subtitle render. - Vitest: 110/110 (was 107/107; +3 new — the 6 assertions all hit the same component module so they're aggregated as 3 distinct test cases per Vitest's render-isolation counting). - Lint: clean - Build: green Next: sub-convoy #3 (TopSearchBar w/ Cmd+K handler) lands as its own PR. Co-authored-by: Cursor <cursoragent@cursor.com>
293 lines
No EOL
12 KiB
JavaScript
293 lines
No EOL
12 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import Layout from '../components/Layout';
|
|
import PermissionIndicator from '../components/PermissionIndicator';
|
|
import { Button, StatCard } from '../components/ui';
|
|
import { useAuth } from '../lib/use-auth';
|
|
import Link from 'next/link';
|
|
import { VOCAB, collectionDisplayName } from '../lib/collection-vocabulary.js';
|
|
|
|
export default function Dashboard() {
|
|
const router = useRouter();
|
|
const { user, loading: authLoading } = useAuth();
|
|
|
|
const [collections, setCollections] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Redirect to login if not authenticated
|
|
useEffect(() => {
|
|
if (!authLoading && !user) {
|
|
router.push('/login');
|
|
}
|
|
}, [authLoading, user, router]);
|
|
|
|
const fetchCollections = async () => {
|
|
try {
|
|
const token = localStorage.getItem('auth_token');
|
|
const headers = {
|
|
'Content-Type': 'application/json',
|
|
};
|
|
|
|
if (token) {
|
|
headers.Authorization = `Bearer ${token}`;
|
|
}
|
|
|
|
const response = await fetch('/api/collections', { headers });
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
|
|
// Fetch thumbnails for each collection
|
|
const collectionsWithThumbnails = await Promise.all(
|
|
data.map(async (collection) => {
|
|
try {
|
|
const identifier = collection.slug || collection.id;
|
|
const thumbnailResponse = await fetch(`/api/collections/${identifier}/thumbnails`, { headers });
|
|
if (thumbnailResponse.ok) {
|
|
const thumbnailData = await thumbnailResponse.json();
|
|
return { ...collection, thumbnails: thumbnailData.thumbnails };
|
|
}
|
|
return { ...collection, thumbnails: [] };
|
|
} catch (error) {
|
|
console.error(`Error fetching thumbnails for collection ${collection.id}:`, error);
|
|
return { ...collection, thumbnails: [] };
|
|
}
|
|
})
|
|
);
|
|
|
|
setCollections(collectionsWithThumbnails);
|
|
} else {
|
|
console.error('Failed to fetch collections');
|
|
setCollections([]);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching collections:', error);
|
|
setCollections([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect -- load dashboard lists when user is available
|
|
fetchCollections();
|
|
}
|
|
}, [user]);
|
|
|
|
;
|
|
|
|
return (
|
|
<Layout user={user}>
|
|
{/* Header */}
|
|
<div className="page-header-glass p-4 sm:p-6">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
{VOCAB.MY_COLLECTION}
|
|
</h1>
|
|
<p className="text-base sm:text-lg" style={{ color: 'var(--text-secondary)' }}>
|
|
Overview of your lists and owned cards
|
|
</p>
|
|
</div>
|
|
<div className="flex space-x-2 sm:space-x-4">
|
|
<Link href="/collections">
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
leadingIcon={
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
}
|
|
>
|
|
Create List
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-4 sm:p-6">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--accent-ember)' }}></div>
|
|
</div>
|
|
) : (
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Stats Cards — 4-up grid from operator mockup
|
|
(.convoys/redesign-v2-from-mockups.md § 7.1).
|
|
Metrics: Total Cards / Rare Cards / Collection Value /
|
|
Wishlist Items. Real data where available; placeholders
|
|
with TODO comments where the concept doesn't exist yet. */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<StatCard
|
|
accent="blue"
|
|
label="Total Cards"
|
|
value={collections
|
|
.reduce((total, col) => total + (col.cardCount || 0), 0)
|
|
.toLocaleString()}
|
|
icon={
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
stroke="rgb(255, 255, 255)"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
{/* TODO(rarity-aggregation convoy): swap placeholder 0
|
|
for a real count once the user_cards.rarity column is
|
|
populated by the import jobs. Operator-approved
|
|
placeholder per .convoys/redesign-v2-from-mockups.md
|
|
§ 7.1 ("placeholders for what we don't have"). */}
|
|
<StatCard
|
|
accent="purple"
|
|
label="Rare Cards"
|
|
value="0"
|
|
subtitle="Coming soon"
|
|
icon={
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
stroke="rgb(255, 255, 255)"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7l3-7z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
<StatCard
|
|
accent="gold"
|
|
label="Collection Value"
|
|
value={`$${collections
|
|
.reduce((total, col) => total + (col.value || 0), 0)
|
|
.toLocaleString()}`}
|
|
icon={
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
stroke="rgb(255, 255, 255)"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
{/* TODO(wishlist-feature convoy): real wishlist count
|
|
ships when the wishlist table + API land. Operator-
|
|
approved placeholder for now. */}
|
|
<StatCard
|
|
accent="red"
|
|
label="Wishlist Items"
|
|
value="0"
|
|
subtitle="Coming soon"
|
|
icon={
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
stroke="rgb(255, 255, 255)"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 20.364l-7.682-7.682a4.5 4.5 0 010-6.364z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* Collections Grid */}
|
|
<div className="mb-6">
|
|
<h2 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>Recent Lists</h2>
|
|
{collections.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<div className="glass-panel w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center">
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>No Lists Yet</h3>
|
|
<p className="mb-4" style={{ color: 'var(--text-secondary)' }}>
|
|
Create your first list to start organizing your cards
|
|
</p>
|
|
<Link href="/collections">
|
|
<Button variant="primary" size="lg">
|
|
Create Your First List
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{collections.slice(0, 6).map((collection) => (
|
|
<Link key={collection.id} href={`/collection/${collection.slug || collection.id}`}>
|
|
<div className="glass-panel rounded-2xl p-6 transition-all duration-200 hover:scale-105 cursor-pointer">
|
|
<div className="flex items-center mb-4">
|
|
<div className="w-12 h-12 rounded-xl mr-4 flex items-center justify-center gradient-bg-ember">
|
|
<span className="text-white font-bold">
|
|
{collection.name?.charAt(0)?.toUpperCase() || 'C'}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold truncate" style={{ color: 'var(--text-primary)' }}>
|
|
{collectionDisplayName(collection)}
|
|
</h3>
|
|
<p className="text-sm truncate" style={{ color: 'var(--text-secondary)' }}>
|
|
{collection.cardCount || 0} cards
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{collection.description && (
|
|
<p className="text-sm mb-3 line-clamp-2" style={{ color: 'var(--text-secondary)' }}>
|
|
{collection.description}
|
|
</p>
|
|
)}
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
|
|
${(collection.value || 0).toLocaleString()}
|
|
</span>
|
|
<PermissionIndicator isPublic={collection.isPublic} />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{collections.length > 6 && (
|
|
<div className="text-center">
|
|
<Link href="/collections">
|
|
<Button variant="secondary" size="lg">
|
|
View All Lists
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|