455 lines
18 KiB
TypeScript
455 lines
18 KiB
TypeScript
|
import React, { useState, useEffect, useCallback } from 'react';
|
||
|
|
import { Card } from '../ui/card';
|
||
|
|
import { Button } from '../ui/button';
|
||
|
|
import { Badge } from '../ui/badge';
|
||
|
|
import { EmptyState } from '../ui/empty-state';
|
||
|
|
import {
|
||
|
|
BarChart3,
|
||
|
|
Users,
|
||
|
|
Music,
|
||
|
|
CreditCard,
|
||
|
|
FileText,
|
||
|
|
Search,
|
||
|
|
Ban,
|
||
|
|
CheckCircle,
|
||
|
|
Eye,
|
||
|
|
EyeOff,
|
||
|
|
Loader2,
|
||
|
|
Shield,
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { useToast } from '../../components/feedback/ToastProvider';
|
||
|
|
import {
|
||
|
|
adminService,
|
||
|
|
PlatformMetrics,
|
||
|
|
AdminUserInfo,
|
||
|
|
AdminContentItem,
|
||
|
|
PaymentOverview,
|
||
|
|
} from '../../services/adminService';
|
||
|
|
import { logger } from '@/utils/logger';
|
||
|
|
|
||
|
|
type PlatformTab = 'metrics' | 'users' | 'content' | 'payments';
|
||
|
|
|
||
|
|
export const AdminPlatformView: React.FC = () => {
|
||
|
|
const { addToast } = useToast();
|
||
|
|
const [activeTab, setActiveTab] = useState<PlatformTab>('metrics');
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
|
||
|
|
// Metrics
|
||
|
|
const [metrics, setMetrics] = useState<PlatformMetrics | null>(null);
|
||
|
|
|
||
|
|
// Users
|
||
|
|
const [users, setUsers] = useState<AdminUserInfo[]>([]);
|
||
|
|
const [usersTotal, setUsersTotal] = useState(0);
|
||
|
|
const [userSearch, setUserSearch] = useState('');
|
||
|
|
const [userRoleFilter, setUserRoleFilter] = useState('');
|
||
|
|
|
||
|
|
// Content
|
||
|
|
const [content, setContent] = useState<AdminContentItem[]>([]);
|
||
|
|
const [contentTotal, setContentTotal] = useState(0);
|
||
|
|
const [contentSearch, setContentSearch] = useState('');
|
||
|
|
const [contentType, setContentType] = useState('track');
|
||
|
|
|
||
|
|
// Payments
|
||
|
|
const [payments, setPayments] = useState<PaymentOverview | null>(null);
|
||
|
|
|
||
|
|
const loadMetrics = useCallback(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const data = await adminService.getPlatformMetrics();
|
||
|
|
setMetrics(data);
|
||
|
|
} catch (e) {
|
||
|
|
logger.error('Error loading platform metrics', { error: e instanceof Error ? e.message : String(e) });
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const loadUsers = useCallback(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const data = await adminService.searchUsers({ q: userSearch || undefined, role: userRoleFilter || undefined });
|
||
|
|
setUsers(data.users);
|
||
|
|
setUsersTotal(data.total);
|
||
|
|
} catch (e) {
|
||
|
|
logger.error('Error loading users', { error: e instanceof Error ? e.message : String(e) });
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [userSearch, userRoleFilter]);
|
||
|
|
|
||
|
|
const loadContent = useCallback(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const data = await adminService.searchContent({ type: contentType, q: contentSearch || undefined });
|
||
|
|
setContent(data.content);
|
||
|
|
setContentTotal(data.total);
|
||
|
|
} catch (e) {
|
||
|
|
logger.error('Error loading content', { error: e instanceof Error ? e.message : String(e) });
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [contentType, contentSearch]);
|
||
|
|
|
||
|
|
const loadPayments = useCallback(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const data = await adminService.getPaymentOverview();
|
||
|
|
setPayments(data);
|
||
|
|
} catch (e) {
|
||
|
|
logger.error('Error loading payments', { error: e instanceof Error ? e.message : String(e) });
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
switch (activeTab) {
|
||
|
|
case 'metrics': loadMetrics(); break;
|
||
|
|
case 'users': loadUsers(); break;
|
||
|
|
case 'content': loadContent(); break;
|
||
|
|
case 'payments': loadPayments(); break;
|
||
|
|
}
|
||
|
|
}, [activeTab, loadMetrics, loadUsers, loadContent, loadPayments]);
|
||
|
|
|
||
|
|
const handleSuspendUser = async (userId: string) => {
|
||
|
|
const reason = prompt('Suspension reason:');
|
||
|
|
if (!reason) return;
|
||
|
|
try {
|
||
|
|
await adminService.suspendUser(userId, reason);
|
||
|
|
addToast('User suspended', 'success');
|
||
|
|
loadUsers();
|
||
|
|
} catch { addToast('Suspension failed', 'error'); }
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleUnsuspendUser = async (userId: string) => {
|
||
|
|
try {
|
||
|
|
await adminService.unsuspendUser(userId);
|
||
|
|
addToast('User unsuspended', 'success');
|
||
|
|
loadUsers();
|
||
|
|
} catch { addToast('Unsuspension failed', 'error'); }
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleHideContent = async (id: string, type: string) => {
|
||
|
|
try {
|
||
|
|
await adminService.hideContent(id, type, 'Admin action');
|
||
|
|
addToast('Content hidden', 'success');
|
||
|
|
loadContent();
|
||
|
|
} catch { addToast('Hide failed', 'error'); }
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleRestoreContent = async (id: string, type: string) => {
|
||
|
|
try {
|
||
|
|
await adminService.restoreContent(id, type);
|
||
|
|
addToast('Content restored', 'success');
|
||
|
|
loadContent();
|
||
|
|
} catch { addToast('Restore failed', 'error'); }
|
||
|
|
};
|
||
|
|
|
||
|
|
const tabs: { key: PlatformTab; label: string; icon: React.ReactNode }[] = [
|
||
|
|
{ key: 'metrics', label: 'Dashboard', icon: <BarChart3 className="w-4 h-4" /> },
|
||
|
|
{ key: 'users', label: 'Users', icon: <Users className="w-4 h-4" /> },
|
||
|
|
{ key: 'content', label: 'Content', icon: <Music className="w-4 h-4" /> },
|
||
|
|
{ key: 'payments', label: 'Payments', icon: <CreditCard className="w-4 h-4" /> },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6 animate-fadeIn pb-20">
|
||
|
|
<div className="flex items-center gap-3 border-b border-border/50 pb-6">
|
||
|
|
<Shield className="w-6 h-6 text-primary" />
|
||
|
|
<div>
|
||
|
|
<h2 className="text-2xl font-heading font-bold text-foreground tracking-tight">
|
||
|
|
PLATFORM ADMINISTRATION
|
||
|
|
</h2>
|
||
|
|
<p className="text-muted-foreground font-mono text-sm">
|
||
|
|
Metrics, users, content, and payments management.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Tabs */}
|
||
|
|
<div className="border-b border-border flex gap-6 mb-6">
|
||
|
|
{tabs.map((tab) => (
|
||
|
|
<button
|
||
|
|
key={tab.key}
|
||
|
|
onClick={() => setActiveTab(tab.key)}
|
||
|
|
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors flex items-center gap-2 ${
|
||
|
|
activeTab === tab.key
|
||
|
|
? 'border-primary text-foreground'
|
||
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
||
|
|
}`}
|
||
|
|
aria-label={`${tab.label} tab`}
|
||
|
|
aria-selected={activeTab === tab.key}
|
||
|
|
role="tab"
|
||
|
|
>
|
||
|
|
{tab.icon}
|
||
|
|
{tab.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{loading && (
|
||
|
|
<div className="flex justify-center py-24">
|
||
|
|
<Loader2 className="w-8 h-8 text-muted-foreground animate-spin" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{!loading && activeTab === 'metrics' && metrics && <MetricsPanel metrics={metrics} />}
|
||
|
|
{!loading && activeTab === 'users' && (
|
||
|
|
<UsersPanel
|
||
|
|
users={users}
|
||
|
|
total={usersTotal}
|
||
|
|
search={userSearch}
|
||
|
|
roleFilter={userRoleFilter}
|
||
|
|
onSearchChange={setUserSearch}
|
||
|
|
onRoleFilterChange={setUserRoleFilter}
|
||
|
|
onSearch={loadUsers}
|
||
|
|
onSuspend={handleSuspendUser}
|
||
|
|
onUnsuspend={handleUnsuspendUser}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{!loading && activeTab === 'content' && (
|
||
|
|
<ContentPanel
|
||
|
|
content={content}
|
||
|
|
total={contentTotal}
|
||
|
|
search={contentSearch}
|
||
|
|
contentType={contentType}
|
||
|
|
onSearchChange={setContentSearch}
|
||
|
|
onTypeChange={setContentType}
|
||
|
|
onSearch={loadContent}
|
||
|
|
onHide={handleHideContent}
|
||
|
|
onRestore={handleRestoreContent}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{!loading && activeTab === 'payments' && payments && <PaymentsPanel payments={payments} />}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
function MetricsPanel({ metrics }: { metrics: PlatformMetrics }) {
|
||
|
|
const cards = [
|
||
|
|
{ label: 'Total Users', value: metrics.total_users.toLocaleString(), color: 'text-blue-400', icon: <Users className="w-5 h-5" /> },
|
||
|
|
{ label: 'Active (30d)', value: metrics.active_users.toLocaleString(), color: 'text-green-400', icon: <CheckCircle className="w-5 h-5" /> },
|
||
|
|
{ label: 'New Today', value: metrics.new_users_today.toLocaleString(), color: 'text-cyan-400', icon: <Users className="w-5 h-5" /> },
|
||
|
|
{ label: 'New This Week', value: metrics.new_users_week.toLocaleString(), color: 'text-cyan-400', icon: <Users className="w-5 h-5" /> },
|
||
|
|
{ label: 'Total Tracks', value: metrics.total_tracks.toLocaleString(), color: 'text-purple-400', icon: <Music className="w-5 h-5" /> },
|
||
|
|
{ label: 'Tracks Today', value: metrics.tracks_today.toLocaleString(), color: 'text-purple-400', icon: <Music className="w-5 h-5" /> },
|
||
|
|
{ label: 'Playlists', value: metrics.total_playlists.toLocaleString(), color: 'text-orange-400', icon: <FileText className="w-5 h-5" /> },
|
||
|
|
{ label: 'Comments', value: metrics.total_comments.toLocaleString(), color: 'text-orange-400', icon: <FileText className="w-5 h-5" /> },
|
||
|
|
{ label: 'Banned Users', value: metrics.banned_users.toLocaleString(), color: 'text-red-400', icon: <Ban className="w-5 h-5" /> },
|
||
|
|
{ label: 'Pending Reports', value: metrics.pending_reports.toLocaleString(), color: 'text-red-400', icon: <FileText className="w-5 h-5" /> },
|
||
|
|
{ label: 'Storage', value: `${(metrics.storage_used_mb / 1024).toFixed(1)} GB`, color: 'text-yellow-400', icon: <BarChart3 className="w-5 h-5" /> },
|
||
|
|
{ label: 'Total Revenue', value: `$${metrics.total_revenue.toFixed(2)}`, color: 'text-green-400', icon: <CreditCard className="w-5 h-5" /> },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||
|
|
{cards.map((card) => (
|
||
|
|
<Card key={card.label} variant="default" className="p-4">
|
||
|
|
<div className="flex items-center gap-3 mb-2">
|
||
|
|
<div className={card.color}>{card.icon}</div>
|
||
|
|
<span className="text-xs text-muted-foreground uppercase">{card.label}</span>
|
||
|
|
</div>
|
||
|
|
<div className={`text-2xl font-bold ${card.color}`}>{card.value}</div>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function UsersPanel({
|
||
|
|
users, total, search, roleFilter, onSearchChange, onRoleFilterChange, onSearch, onSuspend, onUnsuspend,
|
||
|
|
}: {
|
||
|
|
users: AdminUserInfo[];
|
||
|
|
total: number;
|
||
|
|
search: string;
|
||
|
|
roleFilter: string;
|
||
|
|
onSearchChange: (v: string) => void;
|
||
|
|
onRoleFilterChange: (v: string) => void;
|
||
|
|
onSearch: () => void;
|
||
|
|
onSuspend: (userId: string) => void;
|
||
|
|
onUnsuspend: (userId: string) => void;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="flex flex-wrap gap-3 items-center">
|
||
|
|
<div className="relative flex-1 min-w-64">
|
||
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Search username or email..."
|
||
|
|
value={search}
|
||
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
||
|
|
onKeyDown={(e) => e.key === 'Enter' && onSearch()}
|
||
|
|
className="w-full bg-muted border border-border rounded pl-10 pr-3 py-2 text-sm text-foreground"
|
||
|
|
aria-label="Search users"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<select
|
||
|
|
value={roleFilter}
|
||
|
|
onChange={(e) => { onRoleFilterChange(e.target.value); }}
|
||
|
|
className="bg-muted border border-border rounded px-2 py-2 text-sm text-foreground"
|
||
|
|
aria-label="Filter by role"
|
||
|
|
>
|
||
|
|
<option value="">All Roles</option>
|
||
|
|
<option value="user">User</option>
|
||
|
|
<option value="creator">Creator</option>
|
||
|
|
<option value="artist">Artist</option>
|
||
|
|
<option value="premium">Premium</option>
|
||
|
|
<option value="admin">Admin</option>
|
||
|
|
</select>
|
||
|
|
<Button variant="secondary" size="sm" icon={<Search className="w-4 h-4" />} onClick={onSearch}>
|
||
|
|
Search
|
||
|
|
</Button>
|
||
|
|
<span className="text-xs text-muted-foreground ml-auto">{total} users</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{users.length === 0 && (
|
||
|
|
<EmptyState icon={<Users className="w-full h-full" />} title="No users found" description="Try adjusting your search." />
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
{users.map((user) => (
|
||
|
|
<Card key={user.id} variant="default" className="p-4">
|
||
|
|
<div className="flex items-center justify-between gap-4">
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex items-center gap-3 mb-1">
|
||
|
|
<span className="font-bold text-foreground">{user.username}</span>
|
||
|
|
<Badge label={user.role} variant="terminal" />
|
||
|
|
{user.is_banned && <span className="text-xs bg-red-500/20 text-red-400 px-2 py-0.5 rounded">BANNED</span>}
|
||
|
|
{user.is_suspended && <span className="text-xs bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded">SUSPENDED</span>}
|
||
|
|
{user.is_admin && <span className="text-xs bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded">ADMIN</span>}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-muted-foreground flex gap-4">
|
||
|
|
<span>{user.email}</span>
|
||
|
|
<span>{user.track_count} tracks</span>
|
||
|
|
<span>{user.active_strikes} strikes</span>
|
||
|
|
<span>Joined: {new Date(user.created_at).toLocaleDateString()}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{!user.is_banned && !user.is_suspended ? (
|
||
|
|
<Button variant="primary" size="sm" className="bg-destructive hover:bg-destructive/90 border-destructive text-destructive-foreground" icon={<Ban className="w-4 h-4" />} onClick={() => onSuspend(user.id)}>
|
||
|
|
Suspend
|
||
|
|
</Button>
|
||
|
|
) : (
|
||
|
|
<Button variant="secondary" size="sm" icon={<CheckCircle className="w-4 h-4" />} onClick={() => onUnsuspend(user.id)}>
|
||
|
|
Unsuspend
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function ContentPanel({
|
||
|
|
content, total, search, contentType, onSearchChange, onTypeChange, onSearch, onHide, onRestore,
|
||
|
|
}: {
|
||
|
|
content: AdminContentItem[];
|
||
|
|
total: number;
|
||
|
|
search: string;
|
||
|
|
contentType: string;
|
||
|
|
onSearchChange: (v: string) => void;
|
||
|
|
onTypeChange: (v: string) => void;
|
||
|
|
onSearch: () => void;
|
||
|
|
onHide: (id: string, type: string) => void;
|
||
|
|
onRestore: (id: string, type: string) => void;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="flex flex-wrap gap-3 items-center">
|
||
|
|
<select
|
||
|
|
value={contentType}
|
||
|
|
onChange={(e) => onTypeChange(e.target.value)}
|
||
|
|
className="bg-muted border border-border rounded px-2 py-2 text-sm text-foreground"
|
||
|
|
aria-label="Content type"
|
||
|
|
>
|
||
|
|
<option value="track">Tracks</option>
|
||
|
|
<option value="comment">Comments</option>
|
||
|
|
</select>
|
||
|
|
<div className="relative flex-1 min-w-64">
|
||
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Search content..."
|
||
|
|
value={search}
|
||
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
||
|
|
onKeyDown={(e) => e.key === 'Enter' && onSearch()}
|
||
|
|
className="w-full bg-muted border border-border rounded pl-10 pr-3 py-2 text-sm text-foreground"
|
||
|
|
aria-label="Search content"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Button variant="secondary" size="sm" icon={<Search className="w-4 h-4" />} onClick={onSearch}>
|
||
|
|
Search
|
||
|
|
</Button>
|
||
|
|
<span className="text-xs text-muted-foreground ml-auto">{total} items</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{content.length === 0 && (
|
||
|
|
<EmptyState icon={<Music className="w-full h-full" />} title="No content found" description="Try adjusting your search." />
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
{content.map((item) => (
|
||
|
|
<Card key={item.id} variant="default" className="p-4">
|
||
|
|
<div className="flex items-center justify-between gap-4">
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex items-center gap-3 mb-1">
|
||
|
|
<Badge label={item.type} variant="terminal" />
|
||
|
|
<span className="font-bold text-foreground">{item.title}</span>
|
||
|
|
{item.status === 'hidden' && <span className="text-xs bg-red-500/20 text-red-400 px-2 py-0.5 rounded">HIDDEN</span>}
|
||
|
|
{item.report_count > 0 && (
|
||
|
|
<span className="text-xs bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded">{item.report_count} reports</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-muted-foreground">
|
||
|
|
By: {item.creator_name} | {new Date(item.created_at).toLocaleDateString()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{item.status === 'active' ? (
|
||
|
|
<Button variant="secondary" size="sm" icon={<EyeOff className="w-4 h-4" />} onClick={() => onHide(item.id, item.type)}>
|
||
|
|
Hide
|
||
|
|
</Button>
|
||
|
|
) : (
|
||
|
|
<Button variant="secondary" size="sm" icon={<Eye className="w-4 h-4" />} onClick={() => onRestore(item.id, item.type)}>
|
||
|
|
Restore
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function PaymentsPanel({ payments }: { payments: PaymentOverview }) {
|
||
|
|
const cards = [
|
||
|
|
{ label: 'Total Orders', value: payments.total_orders.toLocaleString(), color: 'text-blue-400' },
|
||
|
|
{ label: 'Completed', value: payments.completed_orders.toLocaleString(), color: 'text-green-400' },
|
||
|
|
{ label: 'Pending', value: payments.pending_orders.toLocaleString(), color: 'text-orange-400' },
|
||
|
|
{ label: 'Refunded', value: payments.refunded_orders.toLocaleString(), color: 'text-red-400' },
|
||
|
|
{ label: 'Total Revenue', value: `$${payments.total_revenue.toFixed(2)}`, color: 'text-green-400' },
|
||
|
|
{ label: 'Platform Fees', value: `$${payments.platform_fees.toFixed(2)}`, color: 'text-purple-400' },
|
||
|
|
{ label: 'Total Refunded', value: `$${payments.total_refunded.toFixed(2)}`, color: 'text-red-400' },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
|
|
{cards.map((card) => (
|
||
|
|
<div key={card.label} className="bg-muted/30 rounded-lg p-4 border border-border/50">
|
||
|
|
<div className="text-xs text-muted-foreground uppercase mb-1">{card.label}</div>
|
||
|
|
<div className={`text-2xl font-bold ${card.color}`}>{card.value}</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|