refactor(panel): extract page sub-components from mega-files
Some checks failed
Deploy to Production / test (push) Failing after 33s
Some checks failed
Deploy to Production / test (push) Failing after 33s
Split ItemStudio (1863->388), Settings (1445->355), and Users (1062->164) into focused sub-components under pages/components/. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
syntaxbullet
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,908 +1,10 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Loader2,
|
||||
AlertTriangle,
|
||||
Save,
|
||||
Check,
|
||||
UserCircle2,
|
||||
Search,
|
||||
X,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Package,
|
||||
Plus,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { useUsers, type User, type InventoryEntry } from "../lib/useUsers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function formatNumber(num: number | string): string {
|
||||
const n = typeof num === "string" ? parseInt(num) : num;
|
||||
return n.toLocaleString();
|
||||
}
|
||||
|
||||
function formatBigInt(value: string): string {
|
||||
try {
|
||||
const num = BigInt(value);
|
||||
return num.toLocaleString();
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Reusable field components (from Settings.tsx)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function Field({
|
||||
label,
|
||||
hint,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-semibold text-text-secondary">
|
||||
{label}
|
||||
</label>
|
||||
{children}
|
||||
{hint && <p className="text-[11px] text-text-tertiary">{hint}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NumberInput({
|
||||
value,
|
||||
onChange,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
className,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function StringInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
className,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function Toggle({
|
||||
checked,
|
||||
onChange,
|
||||
}: {
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
onClick={() => onChange(!checked)}
|
||||
className={cn(
|
||||
"relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
|
||||
checked ? "bg-primary" : "bg-raised"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-block h-4 w-4 rounded-full bg-white transition-transform",
|
||||
checked ? "translate-x-6" : "translate-x-1"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectInput({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
options: { value: string; label: string }[];
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
{options.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionCard({
|
||||
title,
|
||||
icon: Icon,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Icon className="w-4 h-4 text-primary" />
|
||||
<h3 className="text-sm font-semibold text-foreground">{title}</h3>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SearchFilterBar Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function SearchFilterBar({
|
||||
search,
|
||||
onSearchChange,
|
||||
classId,
|
||||
onClassChange,
|
||||
isActive,
|
||||
onActiveChange,
|
||||
sortBy,
|
||||
onSortByChange,
|
||||
sortOrder,
|
||||
onSortOrderChange,
|
||||
onClear,
|
||||
classes,
|
||||
}: {
|
||||
search: string;
|
||||
onSearchChange: (v: string) => void;
|
||||
classId: string | null;
|
||||
onClassChange: (v: string | null) => void;
|
||||
isActive: boolean | null;
|
||||
onActiveChange: (v: boolean | null) => void;
|
||||
sortBy: string;
|
||||
onSortByChange: (v: string) => void;
|
||||
sortOrder: string;
|
||||
onSortOrderChange: (v: string) => void;
|
||||
onClear: () => void;
|
||||
classes: { id: string; name: string }[];
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
{/* Search input */}
|
||||
<div className="relative flex-1 min-w-[200px]">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary" />
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder="Search by username..."
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md pl-10 pr-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Class filter */}
|
||||
<select
|
||||
value={classId ?? ""}
|
||||
onChange={(e) => onClassChange(e.target.value || null)}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">All Classes</option>
|
||||
{Array.isArray(classes) && classes.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Active status filter */}
|
||||
<select
|
||||
value={isActive === null ? "" : String(isActive)}
|
||||
onChange={(e) =>
|
||||
onActiveChange(e.target.value === "" ? null : e.target.value === "true")
|
||||
}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="true">Active</option>
|
||||
<option value="false">Inactive</option>
|
||||
</select>
|
||||
|
||||
{/* Sort by */}
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => onSortByChange(e.target.value)}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="balance">Sort by Balance</option>
|
||||
<option value="level">Sort by Level</option>
|
||||
<option value="xp">Sort by XP</option>
|
||||
<option value="username">Sort by Username</option>
|
||||
</select>
|
||||
|
||||
{/* Sort order */}
|
||||
<button
|
||||
onClick={() => onSortOrderChange(sortOrder === "asc" ? "desc" : "asc")}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"hover:bg-raised transition-colors"
|
||||
)}
|
||||
>
|
||||
{sortOrder === "asc" ? "↑ Asc" : "↓ Desc"}
|
||||
</button>
|
||||
|
||||
{/* Clear filters */}
|
||||
<button
|
||||
onClick={onClear}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-text-secondary",
|
||||
"hover:bg-destructive hover:text-white hover:border-destructive transition-colors"
|
||||
)}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// UserTable Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function UserTable({
|
||||
users,
|
||||
loading,
|
||||
onSelectUser,
|
||||
}: {
|
||||
users: User[];
|
||||
loading: boolean;
|
||||
onSelectUser: (user: User) => void;
|
||||
}) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-raised border-b border-border">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Username
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Level
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Balance
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Class
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<tr key={i} className="border-b border-border">
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-32"></div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-12"></div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-24"></div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-20"></div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (users.length === 0) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg p-12 text-center">
|
||||
<UserCircle2 className="w-16 h-16 mx-auto mb-4 text-text-tertiary" />
|
||||
<p className="text-lg font-semibold text-text-secondary mb-2">
|
||||
No users found
|
||||
</p>
|
||||
<p className="text-sm text-text-tertiary">
|
||||
Try adjusting your search or filter criteria
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-raised border-b border-border">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Username
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Level
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Balance
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
XP
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Class
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr
|
||||
key={user.id}
|
||||
onClick={() => onSelectUser(user)}
|
||||
className="border-b border-border hover:bg-raised cursor-pointer transition-colors"
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
<UserCircle2 className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{user.username}
|
||||
</p>
|
||||
<p className="text-xs text-text-tertiary font-mono">
|
||||
{user.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm font-mono text-foreground">
|
||||
{user.level}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm font-mono text-foreground">
|
||||
{formatBigInt(user.balance)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm font-mono text-text-secondary">
|
||||
{formatBigInt(user.xp)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm text-foreground">
|
||||
{user.class?.name || "—"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium",
|
||||
user.isActive
|
||||
? "bg-green-500/20 text-green-400"
|
||||
: "bg-gray-500/20 text-gray-400"
|
||||
)}
|
||||
>
|
||||
{user.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Pagination Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function Pagination({
|
||||
currentPage,
|
||||
totalPages,
|
||||
limit,
|
||||
total,
|
||||
onPageChange,
|
||||
onLimitChange,
|
||||
}: {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
onPageChange: (page: number) => void;
|
||||
onLimitChange: (limit: number) => void;
|
||||
}) {
|
||||
const startItem = (currentPage - 1) * limit + 1;
|
||||
const endItem = Math.min(currentPage * limit, total);
|
||||
|
||||
// Calculate page numbers to show
|
||||
const getPageNumbers = () => {
|
||||
const pages: (number | string)[] = [];
|
||||
const showPages = 5;
|
||||
const halfShow = Math.floor(showPages / 2);
|
||||
|
||||
let start = Math.max(1, currentPage - halfShow);
|
||||
let end = Math.min(totalPages, start + showPages - 1);
|
||||
|
||||
if (end - start < showPages - 1) {
|
||||
start = Math.max(1, end - showPages + 1);
|
||||
}
|
||||
|
||||
if (start > 1) {
|
||||
pages.push(1);
|
||||
if (start > 2) pages.push("...");
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
if (end < totalPages) {
|
||||
if (end < totalPages - 1) pages.push("...");
|
||||
pages.push(totalPages);
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-4 flex flex-wrap gap-4 items-center justify-between">
|
||||
{/* Items info */}
|
||||
<p className="text-sm text-text-secondary">
|
||||
Showing {startItem}–{endItem} of {formatNumber(total)} users
|
||||
</p>
|
||||
|
||||
{/* Page controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Previous button */}
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className={cn(
|
||||
"px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
currentPage === 1
|
||||
? "bg-raised text-text-tertiary cursor-not-allowed"
|
||||
: "bg-input border border-border text-foreground hover:bg-raised"
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Page numbers */}
|
||||
{getPageNumbers().map((page, i) =>
|
||||
typeof page === "number" ? (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => onPageChange(page)}
|
||||
className={cn(
|
||||
"px-3 py-2 rounded-md text-sm font-medium transition-colors min-w-[40px]",
|
||||
page === currentPage
|
||||
? "bg-primary text-white"
|
||||
: "bg-input border border-border text-foreground hover:bg-raised"
|
||||
)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
) : (
|
||||
<span key={i} className="px-2 text-text-tertiary">
|
||||
{page}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* Next button */}
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className={cn(
|
||||
"px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
currentPage === totalPages
|
||||
? "bg-raised text-text-tertiary cursor-not-allowed"
|
||||
: "bg-input border border-border text-foreground hover:bg-raised"
|
||||
)}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Items per page */}
|
||||
<select
|
||||
value={limit}
|
||||
onChange={(e) => onLimitChange(Number(e.target.value))}
|
||||
className={cn(
|
||||
"ml-2 bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="10">10 / page</option>
|
||||
<option value="25">25 / page</option>
|
||||
<option value="50">50 / page</option>
|
||||
<option value="100">100 / page</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// InventoryAddForm Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function InventoryAddForm({
|
||||
items,
|
||||
onAdd,
|
||||
}: {
|
||||
items: { id: number; name: string }[];
|
||||
onAdd: (itemId: number, quantity: string) => void;
|
||||
}) {
|
||||
const [selectedItemId, setSelectedItemId] = useState<string>("");
|
||||
const [quantity, setQuantity] = useState<string>("1");
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!selectedItemId) return;
|
||||
onAdd(parseInt(selectedItemId), quantity);
|
||||
setSelectedItemId("");
|
||||
setQuantity("1");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-text-secondary">Add Item</p>
|
||||
<select
|
||||
value={selectedItemId}
|
||||
onChange={(e) => setSelectedItemId(e.target.value)}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">Select item...</option>
|
||||
{Array.isArray(items) && items.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(e.target.value)}
|
||||
min="1"
|
||||
placeholder="Qty"
|
||||
className={cn(
|
||||
"w-20 bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={!selectedItemId}
|
||||
className={cn(
|
||||
"flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
"bg-primary text-white hover:bg-primary/90",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
"flex items-center justify-center gap-1.5"
|
||||
)}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// DetailPanel Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function DetailPanel({
|
||||
user,
|
||||
userDraft,
|
||||
onClose,
|
||||
onUpdateDraft,
|
||||
onSave,
|
||||
onDiscard,
|
||||
isDirty,
|
||||
saving,
|
||||
saveSuccess,
|
||||
classes,
|
||||
inventoryDraft,
|
||||
items,
|
||||
onAddItem,
|
||||
onRemoveItem,
|
||||
}: {
|
||||
user: User;
|
||||
userDraft: Partial<User> | null;
|
||||
onClose: () => void;
|
||||
onUpdateDraft: (field: keyof User, value: unknown) => void;
|
||||
onSave: () => void;
|
||||
onDiscard: () => void;
|
||||
isDirty: boolean;
|
||||
saving: boolean;
|
||||
saveSuccess: boolean;
|
||||
classes: { id: string; name: string }[];
|
||||
inventoryDraft: InventoryEntry[];
|
||||
items: { id: number; name: string }[];
|
||||
onAddItem: (itemId: number, quantity: string) => void;
|
||||
onRemoveItem: (itemId: number) => void;
|
||||
}) {
|
||||
if (!userDraft) return null;
|
||||
|
||||
const classOptions = [
|
||||
{ value: "", label: "No Class" },
|
||||
...(Array.isArray(classes) ? classes.map((c) => ({ value: c.id, label: c.name })) : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 md:relative md:w-96 border-l border-border bg-card overflow-auto z-50 md:z-auto">
|
||||
<div className="p-6 space-y-6 pb-24">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-1">
|
||||
{user.username}
|
||||
</h2>
|
||||
<p className="text-xs font-mono text-text-tertiary">{user.id}</p>
|
||||
<p className="text-xs text-text-tertiary mt-1">
|
||||
Joined {new Date(user.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-text-tertiary hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* User Info (Editable) */}
|
||||
<div className="space-y-4">
|
||||
<Field label="Balance" hint="User's currency balance">
|
||||
<StringInput
|
||||
value={String(userDraft.balance || "0")}
|
||||
onChange={(v) => onUpdateDraft("balance", v)}
|
||||
placeholder="0"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="XP" hint="User's experience points">
|
||||
<StringInput
|
||||
value={String(userDraft.xp || "0")}
|
||||
onChange={(v) => onUpdateDraft("xp", v)}
|
||||
placeholder="0"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Level" hint="User's current level">
|
||||
<NumberInput
|
||||
value={userDraft.level || 1}
|
||||
onChange={(v) => onUpdateDraft("level", v)}
|
||||
min={1}
|
||||
max={100}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Daily Streak" hint="Consecutive days of daily command usage">
|
||||
<NumberInput
|
||||
value={userDraft.dailyStreak || 0}
|
||||
onChange={(v) => onUpdateDraft("dailyStreak", v)}
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Class" hint="User's selected class">
|
||||
<SelectInput
|
||||
value={String(userDraft.classId || "")}
|
||||
onChange={(v) => onUpdateDraft("classId", v || null)}
|
||||
options={classOptions}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Active Status" hint="Whether the user is active in the system">
|
||||
<div className="flex items-center gap-3">
|
||||
<Toggle
|
||||
checked={userDraft.isActive ?? true}
|
||||
onChange={(v) => onUpdateDraft("isActive", v)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
"text-sm font-medium",
|
||||
userDraft.isActive ? "text-green-400" : "text-gray-400"
|
||||
)}
|
||||
>
|
||||
{userDraft.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{/* Inventory Section */}
|
||||
<SectionCard title="Inventory" icon={Package}>
|
||||
{inventoryDraft.length === 0 ? (
|
||||
<p className="text-sm text-text-tertiary">No items in inventory</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{inventoryDraft.map((entry) => (
|
||||
<div
|
||||
key={entry.itemId}
|
||||
className="flex items-center justify-between gap-3 p-2 bg-raised rounded-md"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{entry.item?.name || `Item #${entry.itemId}`}
|
||||
</p>
|
||||
<p className="text-xs text-text-tertiary">
|
||||
Quantity: {formatBigInt(entry.quantity)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onRemoveItem(entry.itemId)}
|
||||
className="p-1.5 text-text-tertiary hover:text-destructive hover:bg-destructive/10 rounded transition-colors"
|
||||
title="Remove item"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Item Form */}
|
||||
<div className="mt-4 pt-4 border-t border-border">
|
||||
<InventoryAddForm items={items} onAdd={onAddItem} />
|
||||
</div>
|
||||
</SectionCard>
|
||||
</div>
|
||||
|
||||
{/* Sticky footer for save/discard (only shown when dirty) */}
|
||||
{isDirty && (
|
||||
<div className="sticky bottom-0 left-0 right-0 border-t border-border bg-card p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-amber-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">You have unsaved changes</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={onDiscard}
|
||||
disabled={saving}
|
||||
className={cn(
|
||||
"flex-1 px-4 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
"bg-input border border-border text-foreground hover:bg-raised",
|
||||
saving && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
Discard
|
||||
</button>
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={saving}
|
||||
className={cn(
|
||||
"flex-1 px-4 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
"bg-primary text-white hover:bg-primary/90",
|
||||
"flex items-center justify-center gap-2",
|
||||
saving && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : saveSuccess ? (
|
||||
<>
|
||||
<Check className="w-4 h-4" />
|
||||
Saved!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="w-4 h-4" />
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import { useUsers } from "../lib/useUsers";
|
||||
import { SearchFilterBar } from "./components/SearchFilterBar";
|
||||
import { UserTable } from "./components/UserTable";
|
||||
import { UserPagination } from "./components/UserPagination";
|
||||
import { UserDetailPanel } from "./components/UserDetailPanel";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main Users Component
|
||||
@@ -1025,7 +127,7 @@ export default function Users() {
|
||||
{/* Main content */}
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<UserTable users={users} loading={loading} onSelectUser={selectUser} />
|
||||
<Pagination
|
||||
<UserPagination
|
||||
currentPage={currentPage}
|
||||
totalPages={Math.ceil(total / limit)}
|
||||
limit={limit}
|
||||
@@ -1037,7 +139,7 @@ export default function Users() {
|
||||
|
||||
{/* Detail panel */}
|
||||
{selectedUser && userDraft && (
|
||||
<DetailPanel
|
||||
<UserDetailPanel
|
||||
user={selectedUser}
|
||||
userDraft={userDraft}
|
||||
onClose={closeDetail}
|
||||
|
||||
174
panel/src/pages/components/EffectEditor.tsx
Normal file
174
panel/src/pages/components/EffectEditor.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import {
|
||||
type EffectDraft,
|
||||
type EffectKind,
|
||||
EFFECT_META,
|
||||
inputCls,
|
||||
} from "./ItemStudioTypes";
|
||||
import { Field } from "./ItemStudioShared";
|
||||
import { LootboxEditor } from "./LootboxEditor";
|
||||
|
||||
// ===== Effect Editor =====
|
||||
|
||||
export function EffectEditor({
|
||||
effect,
|
||||
onChange,
|
||||
onRemove,
|
||||
}: {
|
||||
effect: EffectDraft;
|
||||
onChange: (updated: EffectDraft) => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const update = (fields: Partial<EffectDraft>) =>
|
||||
onChange({ ...effect, ...fields });
|
||||
|
||||
const resetFields = {
|
||||
amount: "",
|
||||
multiplier: "",
|
||||
durationSeconds: "",
|
||||
roleId: "",
|
||||
message: "",
|
||||
pool: [],
|
||||
};
|
||||
|
||||
const EffectIcon = EFFECT_META[effect.kind].icon;
|
||||
const isLootbox = effect.kind === "LOOTBOX";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"border rounded-lg p-4 space-y-3",
|
||||
isLootbox
|
||||
? "bg-amber-500/5 border-amber-500/25"
|
||||
: "bg-raised/20 border-border"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<EffectIcon
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
isLootbox ? "text-amber-400" : "text-primary"
|
||||
)}
|
||||
/>
|
||||
<select
|
||||
value={effect.kind}
|
||||
onChange={(e) =>
|
||||
update({ kind: e.target.value as EffectKind, ...resetFields })
|
||||
}
|
||||
className={cn(
|
||||
"flex-1 bg-input border border-border rounded-md px-3 py-1.5 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-colors"
|
||||
)}
|
||||
>
|
||||
{(Object.keys(EFFECT_META) as EffectKind[]).map((kind) => (
|
||||
<option key={kind} value={kind}>
|
||||
{EFFECT_META[kind].label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="p-1.5 rounded-md text-text-tertiary hover:text-destructive hover:bg-destructive/10 transition-colors"
|
||||
title="Remove effect"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{(effect.kind === "ADD_XP" || effect.kind === "ADD_BALANCE") && (
|
||||
<Field label="Amount">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={effect.amount}
|
||||
onChange={(e) => update({ amount: e.target.value })}
|
||||
placeholder="e.g. 100"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{effect.kind === "REPLY_MESSAGE" && (
|
||||
<Field label="Message">
|
||||
<textarea
|
||||
value={effect.message}
|
||||
onChange={(e) => update({ message: e.target.value })}
|
||||
placeholder="The message the bot will reply with..."
|
||||
rows={2}
|
||||
className={cn(inputCls, "resize-none")}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{effect.kind === "XP_BOOST" && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Multiplier (x)">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
step="0.1"
|
||||
value={effect.multiplier}
|
||||
onChange={(e) => update({ multiplier: e.target.value })}
|
||||
placeholder="e.g. 2"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Duration (sec, 0 = permanent)">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={effect.durationSeconds}
|
||||
onChange={(e) => update({ durationSeconds: e.target.value })}
|
||||
placeholder="e.g. 3600"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{effect.kind === "TEMP_ROLE" && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Role ID">
|
||||
<input
|
||||
type="text"
|
||||
value={effect.roleId}
|
||||
onChange={(e) => update({ roleId: e.target.value })}
|
||||
placeholder="Discord role ID"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Duration (sec, 0 = permanent)">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={effect.durationSeconds}
|
||||
onChange={(e) => update({ durationSeconds: e.target.value })}
|
||||
placeholder="e.g. 86400"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{effect.kind === "COLOR_ROLE" && (
|
||||
<Field label="Role ID">
|
||||
<input
|
||||
type="text"
|
||||
value={effect.roleId}
|
||||
onChange={(e) => update({ roleId: e.target.value })}
|
||||
placeholder="Discord role ID"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{effect.kind === "LOOTBOX" && (
|
||||
<LootboxEditor
|
||||
pool={effect.pool}
|
||||
onChange={(pool) => update({ pool })}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
152
panel/src/pages/components/ItemPreviewCard.tsx
Normal file
152
panel/src/pages/components/ItemPreviewCard.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import { ImageIcon, CircleDollarSign, Gift, Zap } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import {
|
||||
type Draft,
|
||||
TYPE_META,
|
||||
RARITY_META,
|
||||
LOOT_TYPE_META,
|
||||
} from "./ItemStudioTypes";
|
||||
|
||||
// ===== Item Preview Card =====
|
||||
|
||||
export function ItemPreviewCard({
|
||||
draft,
|
||||
previewImageSrc,
|
||||
}: {
|
||||
draft: Draft;
|
||||
previewImageSrc: string | null;
|
||||
}) {
|
||||
const rarity = RARITY_META[draft.rarity];
|
||||
const type = TYPE_META[draft.type];
|
||||
const TypeIcon = type.icon;
|
||||
|
||||
const lootboxEffect = draft.effects.find((e) => e.kind === "LOOTBOX");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-card border-2 rounded-xl overflow-hidden transition-all duration-300",
|
||||
rarity.activeBorder
|
||||
)}
|
||||
>
|
||||
{/* Image area */}
|
||||
<div className="relative aspect-square bg-raised">
|
||||
{previewImageSrc ? (
|
||||
<img
|
||||
src={previewImageSrc}
|
||||
alt="Preview"
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.opacity = "0.2";
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex flex-col items-center justify-center text-text-tertiary gap-2">
|
||||
<ImageIcon className="w-10 h-10 opacity-25" />
|
||||
<span className="text-xs opacity-40">No image</span>
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
"absolute top-3 right-3 px-2.5 py-1 rounded-full text-xs font-bold backdrop-blur-sm",
|
||||
rarity.badgeBg,
|
||||
rarity.text
|
||||
)}
|
||||
>
|
||||
{draft.rarity}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="p-4 space-y-2">
|
||||
<h4 className="text-base font-bold text-foreground leading-tight">
|
||||
{draft.name.trim() ? (
|
||||
draft.name
|
||||
) : (
|
||||
<span className="text-text-tertiary italic font-normal text-sm">
|
||||
Item name...
|
||||
</span>
|
||||
)}
|
||||
</h4>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<TypeIcon className="w-3.5 h-3.5 text-text-tertiary" />
|
||||
<span className="text-xs text-text-tertiary">{type.label}</span>
|
||||
</div>
|
||||
|
||||
{draft.description.trim() && (
|
||||
<p className="text-xs text-text-secondary line-clamp-3 leading-relaxed">
|
||||
{draft.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{draft.price && Number(draft.price) > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CircleDollarSign className="w-3.5 h-3.5 text-gold" />
|
||||
<span className="text-xs font-mono text-gold font-medium">
|
||||
{parseInt(draft.price).toLocaleString()} coins
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lootbox pool mini-preview */}
|
||||
{lootboxEffect && lootboxEffect.pool.length > 0 && (
|
||||
<div className="pt-2 border-t border-border space-y-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Gift className="w-3.5 h-3.5 text-amber-400" />
|
||||
<span className="text-xs text-amber-400 font-medium">
|
||||
Lootbox · {lootboxEffect.pool.length} outcome
|
||||
{lootboxEffect.pool.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
{/* Stacked bar */}
|
||||
{(() => {
|
||||
const total = lootboxEffect.pool.reduce(
|
||||
(s, e) => s + Number(e.weight || 0),
|
||||
0
|
||||
);
|
||||
return (
|
||||
<div className="flex h-1.5 w-full rounded-full overflow-hidden gap-px bg-raised">
|
||||
{lootboxEffect.pool.map((e) => {
|
||||
const pct =
|
||||
total > 0
|
||||
? (Number(e.weight || 0) / total) * 100
|
||||
: 0;
|
||||
return (
|
||||
<div
|
||||
key={e._id}
|
||||
style={{ width: `${pct}%` }}
|
||||
className={cn(
|
||||
"transition-all",
|
||||
LOOT_TYPE_META[e.type].barColor
|
||||
)}
|
||||
title={`${LOOT_TYPE_META[e.type].label} ${pct.toFixed(1)}%`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(draft.effects.length > 0 || draft.consume) && !lootboxEffect && (
|
||||
<div className="pt-2 border-t border-border flex flex-wrap gap-1.5">
|
||||
{draft.consume && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 text-xs">
|
||||
Consumed on use
|
||||
</span>
|
||||
)}
|
||||
{draft.effects.length > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs">
|
||||
<Zap className="w-3 h-3" />
|
||||
{draft.effects.length} effect
|
||||
{draft.effects.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
152
panel/src/pages/components/ItemSearchPicker.tsx
Normal file
152
panel/src/pages/components/ItemSearchPicker.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { Search, X, Package, Loader2 } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import { get } from "../../lib/api";
|
||||
import { RARITY_BADGE, inputCls } from "./ItemStudioTypes";
|
||||
|
||||
// ===== Item Search Picker =====
|
||||
|
||||
interface ItemResult {
|
||||
id: number;
|
||||
name: string;
|
||||
rarity: string;
|
||||
iconUrl: string;
|
||||
}
|
||||
|
||||
export function ItemSearchPicker({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: { id: number; name: string; rarity: string } | null;
|
||||
onChange: (item: { id: number; name: string; rarity: string } | null) => void;
|
||||
}) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [results, setResults] = useState<ItemResult[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!query.trim()) {
|
||||
setResults([]);
|
||||
setOpen(false);
|
||||
return;
|
||||
}
|
||||
const t = setTimeout(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await get<{ items: ItemResult[] }>(
|
||||
`/api/items?search=${encodeURIComponent(query)}&limit=8`
|
||||
);
|
||||
setResults(data.items);
|
||||
setOpen(data.items.length > 0);
|
||||
} catch {
|
||||
// silently fail -- network error shouldn't break the form
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
function onOutsideClick(e: MouseEvent) {
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(e.target as Node)
|
||||
) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", onOutsideClick);
|
||||
return () => document.removeEventListener("mousedown", onOutsideClick);
|
||||
}, []);
|
||||
|
||||
if (value) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 p-2 bg-raised/50 rounded-md border border-border">
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-1.5 py-0.5 rounded font-bold shrink-0",
|
||||
RARITY_BADGE[value.rarity] ?? "bg-gray-500/20 text-gray-400"
|
||||
)}
|
||||
>
|
||||
{value.rarity}
|
||||
</span>
|
||||
<span className="text-sm flex-1 text-foreground truncate">
|
||||
{value.name}
|
||||
</span>
|
||||
<span className="text-xs text-text-tertiary font-mono shrink-0">
|
||||
#{value.id}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => onChange(null)}
|
||||
className="p-0.5 text-text-tertiary hover:text-destructive transition-colors shrink-0"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative" ref={containerRef}>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-tertiary pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search items by name..."
|
||||
className={cn(inputCls, "pl-9 pr-9")}
|
||||
/>
|
||||
{loading && (
|
||||
<Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-tertiary animate-spin pointer-events-none" />
|
||||
)}
|
||||
</div>
|
||||
{open && results.length > 0 && (
|
||||
<div className="absolute top-full left-0 right-0 z-50 mt-1 bg-card border border-border rounded-lg shadow-xl overflow-hidden">
|
||||
{results.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => {
|
||||
onChange({ id: item.id, name: item.name, rarity: item.rarity });
|
||||
setQuery("");
|
||||
setOpen(false);
|
||||
}}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2 hover:bg-raised text-left transition-colors"
|
||||
>
|
||||
{item.iconUrl ? (
|
||||
<img
|
||||
src={item.iconUrl}
|
||||
alt=""
|
||||
className="w-6 h-6 rounded object-cover bg-raised shrink-0"
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Package className="w-6 h-6 text-text-tertiary shrink-0" />
|
||||
)}
|
||||
<span className="text-sm text-foreground flex-1 truncate">
|
||||
{item.name}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-1.5 py-0.5 rounded font-bold shrink-0",
|
||||
RARITY_BADGE[item.rarity] ?? "bg-gray-500/20 text-gray-400"
|
||||
)}
|
||||
>
|
||||
{item.rarity}
|
||||
</span>
|
||||
<span className="text-xs text-text-tertiary font-mono shrink-0">
|
||||
#{item.id}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
379
panel/src/pages/components/ItemStudioForm.tsx
Normal file
379
panel/src/pages/components/ItemStudioForm.tsx
Normal file
@@ -0,0 +1,379 @@
|
||||
import { Upload, X, Plus, CircleDollarSign } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import {
|
||||
type Draft,
|
||||
type EffectDraft,
|
||||
type ItemType,
|
||||
type ItemRarity,
|
||||
TYPE_META,
|
||||
RARITY_META,
|
||||
inputCls,
|
||||
} from "./ItemStudioTypes";
|
||||
import { SectionCard, Field } from "./ItemStudioShared";
|
||||
import { EffectEditor } from "./EffectEditor";
|
||||
|
||||
// ===== Item Studio Form Sections =====
|
||||
|
||||
export function IdentitySection({
|
||||
draft,
|
||||
update,
|
||||
validationErrors,
|
||||
}: {
|
||||
draft: Draft;
|
||||
update: (fields: Partial<Draft>) => void;
|
||||
validationErrors: Record<string, string>;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Identity">
|
||||
<Field label="Item Name *" error={validationErrors.name}>
|
||||
<input
|
||||
type="text"
|
||||
value={draft.name}
|
||||
onChange={(e) => update({ name: e.target.value })}
|
||||
placeholder="e.g. Treasure Chest"
|
||||
maxLength={255}
|
||||
className={cn(
|
||||
inputCls,
|
||||
validationErrors.name &&
|
||||
"border-destructive focus:border-destructive focus:ring-destructive/30"
|
||||
)}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Description">
|
||||
<textarea
|
||||
value={draft.description}
|
||||
onChange={(e) => update({ description: e.target.value })}
|
||||
placeholder="A brief description of this item..."
|
||||
rows={3}
|
||||
className={cn(inputCls, "resize-none")}
|
||||
/>
|
||||
</Field>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function ClassificationSection({
|
||||
draft,
|
||||
update,
|
||||
}: {
|
||||
draft: Draft;
|
||||
update: (fields: Partial<Draft>) => void;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Classification">
|
||||
<Field label="Type">
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{(Object.keys(TYPE_META) as ItemType[]).map((t) => {
|
||||
const meta = TYPE_META[t];
|
||||
const Icon = meta.icon;
|
||||
const active = draft.type === t;
|
||||
return (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => update({ type: t })}
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-1.5 py-3 px-2 rounded-lg border text-xs font-medium transition-all",
|
||||
active
|
||||
? "bg-primary/15 border-primary text-primary"
|
||||
: "bg-input border-border text-text-tertiary hover:border-primary/40 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{meta.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<Field label="Rarity">
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{(Object.keys(RARITY_META) as ItemRarity[]).map((r) => {
|
||||
const meta = RARITY_META[r];
|
||||
const active = draft.rarity === r;
|
||||
return (
|
||||
<button
|
||||
key={r}
|
||||
onClick={() => update({ rarity: r })}
|
||||
className={cn(
|
||||
"py-3 px-2 rounded-lg border text-center transition-all",
|
||||
active
|
||||
? cn(meta.bg, meta.text, meta.activeBorder)
|
||||
: "bg-input border-border text-text-tertiary hover:border-primary/40"
|
||||
)}
|
||||
>
|
||||
<div className="text-sm font-bold">{r}</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-xs mt-0.5 opacity-80",
|
||||
active ? meta.text : "text-text-disabled"
|
||||
)}
|
||||
>
|
||||
{meta.label}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Field>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function EconomySection({
|
||||
draft,
|
||||
update,
|
||||
}: {
|
||||
draft: Draft;
|
||||
update: (fields: Partial<Draft>) => void;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Economy">
|
||||
<Field label="Price (0 or empty = not for sale)">
|
||||
<div className="relative">
|
||||
<CircleDollarSign className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary pointer-events-none" />
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
value={draft.price}
|
||||
onChange={(e) => update({ price: e.target.value })}
|
||||
placeholder="0"
|
||||
className={cn(inputCls, "pl-10")}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArtworkSection({
|
||||
imageMode,
|
||||
setImageMode,
|
||||
imageFile,
|
||||
imagePreview,
|
||||
iconUrlInput,
|
||||
setIconUrlInput,
|
||||
imageUrlInput,
|
||||
setImageUrlInput,
|
||||
dragOver,
|
||||
setDragOver,
|
||||
handleDrop,
|
||||
clearImage,
|
||||
handleImageFile,
|
||||
fileInputRef,
|
||||
validationErrors,
|
||||
}: {
|
||||
imageMode: "upload" | "url";
|
||||
setImageMode: (mode: "upload" | "url") => void;
|
||||
imageFile: File | null;
|
||||
imagePreview: string | null;
|
||||
iconUrlInput: string;
|
||||
setIconUrlInput: (v: string) => void;
|
||||
imageUrlInput: string;
|
||||
setImageUrlInput: (v: string) => void;
|
||||
dragOver: boolean;
|
||||
setDragOver: (v: boolean) => void;
|
||||
handleDrop: (e: React.DragEvent) => void;
|
||||
clearImage: () => void;
|
||||
handleImageFile: (file: File) => void;
|
||||
fileInputRef: React.RefObject<HTMLInputElement | null>;
|
||||
validationErrors: Record<string, string>;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Artwork">
|
||||
<div className="flex gap-2">
|
||||
{(["upload", "url"] as const).map((mode) => (
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => setImageMode(mode)}
|
||||
className={cn(
|
||||
"px-3 py-1.5 rounded-md text-xs font-medium transition-colors border",
|
||||
imageMode === mode
|
||||
? "bg-primary/15 border-primary text-primary"
|
||||
: "bg-input border-border text-text-tertiary hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{mode === "upload" ? "Upload File" : "Enter URL"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{imageMode === "upload" ? (
|
||||
<div className="space-y-2">
|
||||
{imageFile ? (
|
||||
<div className="relative rounded-lg overflow-hidden border border-border">
|
||||
<img
|
||||
src={imagePreview!}
|
||||
alt="Selected"
|
||||
className="w-full max-h-56 object-contain bg-raised"
|
||||
/>
|
||||
<button
|
||||
onClick={clearImage}
|
||||
className="absolute top-2 right-2 p-1.5 bg-background/80 rounded-full hover:bg-destructive hover:text-white text-text-secondary transition-colors backdrop-blur-sm"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="px-3 py-2 bg-card border-t border-border">
|
||||
<p className="text-xs text-text-tertiary truncate">
|
||||
{imageFile.name} ({(imageFile.size / 1024).toFixed(1)}{" "}
|
||||
KB)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
setDragOver(true);
|
||||
}}
|
||||
onDragLeave={() => setDragOver(false)}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={cn(
|
||||
"border-2 border-dashed rounded-lg p-10 flex flex-col items-center gap-3 cursor-pointer transition-all select-none",
|
||||
dragOver
|
||||
? "border-primary bg-primary/5"
|
||||
: "border-border hover:border-primary/50 hover:bg-primary/3"
|
||||
)}
|
||||
>
|
||||
<Upload
|
||||
className={cn(
|
||||
"w-8 h-8 transition-colors",
|
||||
dragOver ? "text-primary" : "text-text-tertiary"
|
||||
)}
|
||||
/>
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-text-secondary">
|
||||
{dragOver ? "Drop to upload" : "Drop an image here"}
|
||||
</p>
|
||||
<p className="text-xs text-text-tertiary mt-1">
|
||||
or click to browse · PNG, JPEG, WebP, GIF · max 15 MB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{validationErrors.image && (
|
||||
<p className="text-xs text-destructive">
|
||||
{validationErrors.image}
|
||||
</p>
|
||||
)}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp,image/gif"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) handleImageFile(file);
|
||||
}}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<Field
|
||||
label="Icon URL (small, used in lists)"
|
||||
error={validationErrors.iconUrl}
|
||||
>
|
||||
<input
|
||||
type="url"
|
||||
value={iconUrlInput}
|
||||
onChange={(e) => setIconUrlInput(e.target.value)}
|
||||
placeholder="https://example.com/icon.png"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Image URL (full size)"
|
||||
error={validationErrors.imageUrl}
|
||||
>
|
||||
<input
|
||||
type="url"
|
||||
value={imageUrlInput}
|
||||
onChange={(e) => setImageUrlInput(e.target.value)}
|
||||
placeholder="https://example.com/image.png"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
{iconUrlInput && (
|
||||
<div className="flex items-center gap-3 p-3 bg-raised/40 rounded-lg border border-border">
|
||||
<img
|
||||
src={iconUrlInput}
|
||||
alt="Icon preview"
|
||||
className="w-10 h-10 rounded object-cover bg-raised"
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.opacity = "0.2";
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs text-text-tertiary">
|
||||
Icon preview
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function EffectsSection({
|
||||
draft,
|
||||
update,
|
||||
updateEffect,
|
||||
removeEffect,
|
||||
addEffect,
|
||||
}: {
|
||||
draft: Draft;
|
||||
update: (fields: Partial<Draft>) => void;
|
||||
updateEffect: (i: number, updated: EffectDraft) => void;
|
||||
removeEffect: (i: number) => void;
|
||||
addEffect: () => void;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Effects">
|
||||
<label className="flex items-center gap-3 cursor-pointer group select-none">
|
||||
<button
|
||||
role="switch"
|
||||
aria-checked={draft.consume}
|
||||
onClick={() => update({ consume: !draft.consume })}
|
||||
className={cn(
|
||||
"relative w-10 h-5 rounded-full border transition-all shrink-0",
|
||||
draft.consume
|
||||
? "bg-primary border-primary"
|
||||
: "bg-input border-border"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-all duration-200",
|
||||
draft.consume ? "left-5" : "left-0.5"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-sm text-text-secondary group-hover:text-foreground transition-colors">
|
||||
Consume item on use
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{draft.effects.map((eff, i) => (
|
||||
<EffectEditor
|
||||
key={eff._id}
|
||||
effect={eff}
|
||||
onChange={(updated) => updateEffect(i, updated)}
|
||||
onRemove={() => removeEffect(i)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={addEffect}
|
||||
className={cn(
|
||||
"w-full flex items-center justify-center gap-2 py-2.5 rounded-lg border border-dashed text-sm",
|
||||
"border-border text-text-tertiary hover:border-primary/50 hover:text-primary transition-colors"
|
||||
)}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Effect
|
||||
</button>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
38
panel/src/pages/components/ItemStudioShared.tsx
Normal file
38
panel/src/pages/components/ItemStudioShared.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// ===== Shared UI atoms for ItemStudio =====
|
||||
|
||||
export function SectionCard({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-xl p-5 space-y-4">
|
||||
<h3 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
|
||||
{title}
|
||||
</h3>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Field({
|
||||
label,
|
||||
error,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
error?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-medium text-text-secondary">
|
||||
{label}
|
||||
</label>
|
||||
{children}
|
||||
{error && <p className="text-xs text-destructive mt-1">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
185
panel/src/pages/components/ItemStudioSubmit.ts
Normal file
185
panel/src/pages/components/ItemStudioSubmit.ts
Normal file
@@ -0,0 +1,185 @@
|
||||
import type { Draft, EffectDraft } from "./ItemStudioTypes";
|
||||
|
||||
// ===== Build effects payload from draft =====
|
||||
|
||||
export function buildEffectsPayload(effects: EffectDraft[]) {
|
||||
return effects
|
||||
.map((eff) => {
|
||||
switch (eff.kind) {
|
||||
case "ADD_XP":
|
||||
return { type: "ADD_XP", amount: Number(eff.amount || 0) };
|
||||
case "ADD_BALANCE":
|
||||
return { type: "ADD_BALANCE", amount: Number(eff.amount || 0) };
|
||||
case "REPLY_MESSAGE":
|
||||
return { type: "REPLY_MESSAGE", message: eff.message };
|
||||
case "XP_BOOST":
|
||||
return {
|
||||
type: "XP_BOOST",
|
||||
multiplier: Number(eff.multiplier || 1),
|
||||
...(eff.durationSeconds
|
||||
? { durationSeconds: Number(eff.durationSeconds) }
|
||||
: {}),
|
||||
};
|
||||
case "TEMP_ROLE":
|
||||
return {
|
||||
type: "TEMP_ROLE",
|
||||
roleId: eff.roleId,
|
||||
...(eff.durationSeconds
|
||||
? { durationSeconds: Number(eff.durationSeconds) }
|
||||
: {}),
|
||||
};
|
||||
case "COLOR_ROLE":
|
||||
return { type: "COLOR_ROLE", roleId: eff.roleId };
|
||||
case "LOOTBOX":
|
||||
return {
|
||||
type: "LOOTBOX",
|
||||
pool: eff.pool.map((entry) => {
|
||||
const loot: Record<string, unknown> = {
|
||||
type: entry.type,
|
||||
weight: Number(entry.weight || 1),
|
||||
};
|
||||
if (entry.type !== "NOTHING") {
|
||||
if (entry.amountMode === "range") {
|
||||
loot.minAmount = Number(entry.minAmount || 0);
|
||||
loot.maxAmount = Number(entry.maxAmount || 0);
|
||||
} else {
|
||||
loot.amount = Number(entry.amount || 0);
|
||||
}
|
||||
}
|
||||
if (entry.type === "ITEM" && entry.itemId) {
|
||||
loot.itemId = Number(entry.itemId);
|
||||
}
|
||||
if (entry.message.trim()) {
|
||||
loot.message = entry.message.trim();
|
||||
}
|
||||
return loot;
|
||||
}),
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
// ===== Build base payload from draft =====
|
||||
|
||||
export function buildBasePayload(draft: Draft) {
|
||||
const effects = buildEffectsPayload(draft.effects);
|
||||
return {
|
||||
name: draft.name.trim(),
|
||||
description: draft.description.trim() || null,
|
||||
type: draft.type,
|
||||
rarity: draft.rarity,
|
||||
price:
|
||||
draft.price && Number(draft.price) > 0 ? Number(draft.price) : null,
|
||||
usageData:
|
||||
draft.effects.length > 0
|
||||
? { consume: draft.consume, effects }
|
||||
: null,
|
||||
} as Record<string, unknown>;
|
||||
}
|
||||
|
||||
// ===== Submit: Edit existing item =====
|
||||
|
||||
export async function submitEditItem({
|
||||
editItemId,
|
||||
basePayload,
|
||||
imageMode,
|
||||
iconUrlInput,
|
||||
imageUrlInput,
|
||||
imageFile,
|
||||
}: {
|
||||
editItemId: number;
|
||||
basePayload: Record<string, unknown>;
|
||||
imageMode: "upload" | "url";
|
||||
iconUrlInput: string;
|
||||
imageUrlInput: string;
|
||||
imageFile: File | null;
|
||||
}) {
|
||||
const editPayload = { ...basePayload };
|
||||
if (imageMode === "url") {
|
||||
editPayload.iconUrl = iconUrlInput.trim();
|
||||
editPayload.imageUrl = imageUrlInput.trim();
|
||||
}
|
||||
|
||||
const putRes = await fetch(`/api/items/${editItemId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(editPayload),
|
||||
credentials: "same-origin",
|
||||
});
|
||||
|
||||
if (!putRes.ok) {
|
||||
const body = (await putRes
|
||||
.json()
|
||||
.catch(() => ({ error: putRes.statusText }))) as { error?: string };
|
||||
throw new Error(body.error || "Failed to save item");
|
||||
}
|
||||
|
||||
if (imageMode === "upload" && imageFile) {
|
||||
const form = new FormData();
|
||||
form.append("image", imageFile);
|
||||
const iconRes = await fetch(`/api/items/${editItemId}/icon`, {
|
||||
method: "POST",
|
||||
body: form,
|
||||
credentials: "same-origin",
|
||||
});
|
||||
if (!iconRes.ok) {
|
||||
const body = (await iconRes
|
||||
.json()
|
||||
.catch(() => ({ error: iconRes.statusText }))) as {
|
||||
error?: string;
|
||||
};
|
||||
throw new Error(body.error || "Failed to upload image");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Submit: Create new item =====
|
||||
|
||||
export async function submitCreateItem({
|
||||
basePayload,
|
||||
imageMode,
|
||||
iconUrlInput,
|
||||
imageUrlInput,
|
||||
imageFile,
|
||||
}: {
|
||||
basePayload: Record<string, unknown>;
|
||||
imageMode: "upload" | "url";
|
||||
iconUrlInput: string;
|
||||
imageUrlInput: string;
|
||||
imageFile: File | null;
|
||||
}) {
|
||||
const payload = {
|
||||
...basePayload,
|
||||
iconUrl: imageMode === "url" ? iconUrlInput.trim() : "",
|
||||
imageUrl: imageMode === "url" ? imageUrlInput.trim() : "",
|
||||
};
|
||||
|
||||
let res: Response;
|
||||
if (imageMode === "upload" && imageFile) {
|
||||
const form = new FormData();
|
||||
form.append("data", JSON.stringify(payload));
|
||||
form.append("image", imageFile);
|
||||
res = await fetch("/api/items", {
|
||||
method: "POST",
|
||||
body: form,
|
||||
credentials: "same-origin",
|
||||
});
|
||||
} else {
|
||||
res = await fetch("/api/items", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
credentials: "same-origin",
|
||||
});
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const body = (await res
|
||||
.json()
|
||||
.catch(() => ({ error: res.statusText }))) as { error?: string };
|
||||
throw new Error(body.error || "Failed to create item");
|
||||
}
|
||||
}
|
||||
304
panel/src/pages/components/ItemStudioTypes.ts
Normal file
304
panel/src/pages/components/ItemStudioTypes.ts
Normal file
@@ -0,0 +1,304 @@
|
||||
import {
|
||||
Package,
|
||||
Zap,
|
||||
Shield,
|
||||
MessageSquare,
|
||||
TrendingUp,
|
||||
Palette,
|
||||
CircleDollarSign,
|
||||
Gift,
|
||||
} from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
// ===== Types =====
|
||||
|
||||
export type ItemType = "MATERIAL" | "CONSUMABLE" | "EQUIPMENT" | "QUEST";
|
||||
export type ItemRarity = "C" | "R" | "SR" | "SSR";
|
||||
export type EffectKind =
|
||||
| "ADD_XP"
|
||||
| "ADD_BALANCE"
|
||||
| "REPLY_MESSAGE"
|
||||
| "XP_BOOST"
|
||||
| "TEMP_ROLE"
|
||||
| "COLOR_ROLE"
|
||||
| "LOOTBOX";
|
||||
|
||||
export type LootEntryType = "NOTHING" | "CURRENCY" | "XP" | "ITEM";
|
||||
|
||||
export interface LootPoolEntry {
|
||||
_id: string;
|
||||
type: LootEntryType;
|
||||
weight: string;
|
||||
amountMode: "fixed" | "range";
|
||||
amount: string;
|
||||
minAmount: string;
|
||||
maxAmount: string;
|
||||
itemId: string;
|
||||
selectedItemName: string;
|
||||
selectedItemRarity: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface EffectDraft {
|
||||
_id: string;
|
||||
kind: EffectKind;
|
||||
amount: string;
|
||||
multiplier: string;
|
||||
durationSeconds: string;
|
||||
roleId: string;
|
||||
message: string;
|
||||
pool: LootPoolEntry[];
|
||||
}
|
||||
|
||||
export interface Draft {
|
||||
name: string;
|
||||
description: string;
|
||||
type: ItemType;
|
||||
rarity: ItemRarity;
|
||||
price: string;
|
||||
consume: boolean;
|
||||
effects: EffectDraft[];
|
||||
}
|
||||
|
||||
// ===== Full item shape returned by GET /api/items/:id =====
|
||||
|
||||
export interface LootPayloadEntry {
|
||||
type: LootEntryType;
|
||||
weight: number;
|
||||
amount?: number;
|
||||
minAmount?: number;
|
||||
maxAmount?: number;
|
||||
itemId?: number;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export type StoredEffect =
|
||||
| { type: "ADD_XP"; amount: number }
|
||||
| { type: "ADD_BALANCE"; amount: number }
|
||||
| { type: "REPLY_MESSAGE"; message: string }
|
||||
| { type: "XP_BOOST"; multiplier: number; durationSeconds?: number }
|
||||
| { type: "TEMP_ROLE"; roleId: string; durationSeconds?: number }
|
||||
| { type: "COLOR_ROLE"; roleId: string }
|
||||
| { type: "LOOTBOX"; pool: LootPayloadEntry[] };
|
||||
|
||||
export interface FullItem {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
type: ItemType;
|
||||
rarity: ItemRarity;
|
||||
price: string | null;
|
||||
iconUrl: string;
|
||||
imageUrl: string;
|
||||
usageData: { consume: boolean; effects: StoredEffect[] } | null;
|
||||
}
|
||||
|
||||
// ===== Constants =====
|
||||
|
||||
export const TYPE_META: Record<
|
||||
ItemType,
|
||||
{ label: string; icon: React.ComponentType<{ className?: string }> }
|
||||
> = {
|
||||
MATERIAL: { label: "Material", icon: Package },
|
||||
CONSUMABLE: { label: "Consumable", icon: Zap },
|
||||
EQUIPMENT: { label: "Equipment", icon: Shield },
|
||||
QUEST: { label: "Quest", icon: MessageSquare },
|
||||
};
|
||||
|
||||
export const RARITY_META: Record<
|
||||
ItemRarity,
|
||||
{
|
||||
label: string;
|
||||
bg: string;
|
||||
text: string;
|
||||
activeBorder: string;
|
||||
badgeBg: string;
|
||||
}
|
||||
> = {
|
||||
C: {
|
||||
label: "Common",
|
||||
bg: "bg-gray-500/15",
|
||||
text: "text-gray-300",
|
||||
activeBorder: "border-gray-500",
|
||||
badgeBg: "bg-gray-500/20",
|
||||
},
|
||||
R: {
|
||||
label: "Rare",
|
||||
bg: "bg-blue-500/15",
|
||||
text: "text-blue-300",
|
||||
activeBorder: "border-blue-500",
|
||||
badgeBg: "bg-blue-500/20",
|
||||
},
|
||||
SR: {
|
||||
label: "Super Rare",
|
||||
bg: "bg-purple-500/15",
|
||||
text: "text-purple-300",
|
||||
activeBorder: "border-purple-500",
|
||||
badgeBg: "bg-purple-500/20",
|
||||
},
|
||||
SSR: {
|
||||
label: "SSR",
|
||||
bg: "bg-amber-500/15",
|
||||
text: "text-amber-300",
|
||||
activeBorder: "border-amber-500",
|
||||
badgeBg: "bg-amber-500/20",
|
||||
},
|
||||
};
|
||||
|
||||
export const RARITY_BADGE: Record<string, string> = {
|
||||
C: "bg-gray-500/20 text-gray-400",
|
||||
R: "bg-blue-500/20 text-blue-400",
|
||||
SR: "bg-purple-500/20 text-purple-400",
|
||||
SSR: "bg-amber-500/20 text-amber-400",
|
||||
};
|
||||
|
||||
export const EFFECT_META: Record<
|
||||
EffectKind,
|
||||
{ label: string; icon: React.ComponentType<{ className?: string }> }
|
||||
> = {
|
||||
ADD_XP: { label: "Add XP", icon: Zap },
|
||||
ADD_BALANCE: { label: "Add Balance", icon: CircleDollarSign },
|
||||
REPLY_MESSAGE: { label: "Reply Message", icon: MessageSquare },
|
||||
XP_BOOST: { label: "XP Boost", icon: TrendingUp },
|
||||
TEMP_ROLE: { label: "Temporary Role", icon: Shield },
|
||||
COLOR_ROLE: { label: "Color Role", icon: Palette },
|
||||
LOOTBOX: { label: "Lootbox", icon: Gift },
|
||||
};
|
||||
|
||||
export const LOOT_TYPE_META: Record<
|
||||
LootEntryType,
|
||||
{ label: string; barColor: string; textColor: string }
|
||||
> = {
|
||||
NOTHING: {
|
||||
label: "Nothing",
|
||||
barColor: "bg-text-disabled",
|
||||
textColor: "text-text-tertiary",
|
||||
},
|
||||
CURRENCY: {
|
||||
label: "Currency",
|
||||
barColor: "bg-gold",
|
||||
textColor: "text-gold",
|
||||
},
|
||||
XP: {
|
||||
label: "XP",
|
||||
barColor: "bg-blue-400",
|
||||
textColor: "text-blue-400",
|
||||
},
|
||||
ITEM: {
|
||||
label: "Item",
|
||||
barColor: "bg-purple-400",
|
||||
textColor: "text-purple-400",
|
||||
},
|
||||
};
|
||||
|
||||
// ===== Helpers =====
|
||||
|
||||
export function uid() {
|
||||
return Math.random().toString(36).slice(2);
|
||||
}
|
||||
|
||||
export function makeLootEntry(): LootPoolEntry {
|
||||
return {
|
||||
_id: uid(),
|
||||
type: "CURRENCY",
|
||||
weight: "1",
|
||||
amountMode: "fixed",
|
||||
amount: "",
|
||||
minAmount: "",
|
||||
maxAmount: "",
|
||||
itemId: "",
|
||||
selectedItemName: "",
|
||||
selectedItemRarity: "",
|
||||
message: "",
|
||||
};
|
||||
}
|
||||
|
||||
export function makeEffect(kind: EffectKind): EffectDraft {
|
||||
return {
|
||||
_id: uid(),
|
||||
kind,
|
||||
amount: "",
|
||||
multiplier: "",
|
||||
durationSeconds: "",
|
||||
roleId: "",
|
||||
message: "",
|
||||
pool: [],
|
||||
};
|
||||
}
|
||||
|
||||
export function defaultDraft(): Draft {
|
||||
return {
|
||||
name: "",
|
||||
description: "",
|
||||
type: "MATERIAL",
|
||||
rarity: "C",
|
||||
price: "",
|
||||
consume: false,
|
||||
effects: [],
|
||||
};
|
||||
}
|
||||
|
||||
export function draftFromItem(item: FullItem): Draft {
|
||||
const effects: EffectDraft[] = (item.usageData?.effects ?? []).map((eff) => {
|
||||
const base = makeEffect(eff.type as EffectKind);
|
||||
switch (eff.type) {
|
||||
case "ADD_XP":
|
||||
case "ADD_BALANCE":
|
||||
return { ...base, amount: String(eff.amount) };
|
||||
case "REPLY_MESSAGE":
|
||||
return { ...base, message: eff.message };
|
||||
case "XP_BOOST":
|
||||
return {
|
||||
...base,
|
||||
multiplier: String(eff.multiplier),
|
||||
durationSeconds: String(eff.durationSeconds ?? ""),
|
||||
};
|
||||
case "TEMP_ROLE":
|
||||
return {
|
||||
...base,
|
||||
roleId: eff.roleId,
|
||||
durationSeconds: String(eff.durationSeconds ?? ""),
|
||||
};
|
||||
case "COLOR_ROLE":
|
||||
return { ...base, roleId: eff.roleId };
|
||||
case "LOOTBOX":
|
||||
return {
|
||||
...base,
|
||||
pool: eff.pool.map((entry) => ({
|
||||
_id: uid(),
|
||||
type: entry.type,
|
||||
weight: String(entry.weight),
|
||||
amountMode:
|
||||
entry.minAmount !== undefined || entry.maxAmount !== undefined
|
||||
? ("range" as const)
|
||||
: ("fixed" as const),
|
||||
amount: String(entry.amount ?? ""),
|
||||
minAmount: String(entry.minAmount ?? ""),
|
||||
maxAmount: String(entry.maxAmount ?? ""),
|
||||
itemId: String(entry.itemId ?? ""),
|
||||
selectedItemName: "",
|
||||
selectedItemRarity: "",
|
||||
message: entry.message ?? "",
|
||||
})),
|
||||
};
|
||||
default:
|
||||
return base;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
name: item.name,
|
||||
description: item.description ?? "",
|
||||
type: item.type,
|
||||
rarity: item.rarity,
|
||||
price: item.price ? String(parseInt(item.price)) : "",
|
||||
consume: item.usageData?.consume ?? false,
|
||||
effects,
|
||||
};
|
||||
}
|
||||
|
||||
export const inputCls = cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"placeholder:text-text-tertiary transition-colors"
|
||||
);
|
||||
222
panel/src/pages/components/LootPoolEntryEditor.tsx
Normal file
222
panel/src/pages/components/LootPoolEntryEditor.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import {
|
||||
type LootPoolEntry,
|
||||
type LootEntryType,
|
||||
LOOT_TYPE_META,
|
||||
inputCls,
|
||||
} from "./ItemStudioTypes";
|
||||
import { Field } from "./ItemStudioShared";
|
||||
import { ItemSearchPicker } from "./ItemSearchPicker";
|
||||
|
||||
// ===== Loot Pool Entry Editor =====
|
||||
|
||||
export function LootPoolEntryEditor({
|
||||
entry,
|
||||
totalWeight,
|
||||
onChange,
|
||||
onRemove,
|
||||
}: {
|
||||
entry: LootPoolEntry;
|
||||
totalWeight: number;
|
||||
onChange: (updated: LootPoolEntry) => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const upd = (fields: Partial<LootPoolEntry>) =>
|
||||
onChange({ ...entry, ...fields });
|
||||
|
||||
const weight = Number(entry.weight || 0);
|
||||
const pct =
|
||||
totalWeight > 0 ? ((weight / totalWeight) * 100).toFixed(1) : "0.0";
|
||||
const meta = LOOT_TYPE_META[entry.type];
|
||||
|
||||
const resetAmounts = {
|
||||
amount: "",
|
||||
minAmount: "",
|
||||
maxAmount: "",
|
||||
itemId: "",
|
||||
selectedItemName: "",
|
||||
selectedItemRarity: "",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-raised/30 border border-border rounded-lg p-3 space-y-3">
|
||||
{/* Header row: type tabs + weight input + percentage + remove */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex gap-1 flex-1 flex-wrap">
|
||||
{(Object.keys(LOOT_TYPE_META) as LootEntryType[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => upd({ type: t, ...resetAmounts })}
|
||||
className={cn(
|
||||
"px-2 py-1 rounded text-xs font-medium transition-colors border",
|
||||
entry.type === t
|
||||
? "bg-primary/15 border-primary text-primary"
|
||||
: "bg-input border-border text-text-tertiary hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{LOOT_TYPE_META[t].label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
<label className="text-xs text-text-tertiary">Weight</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={entry.weight}
|
||||
onChange={(e) => upd({ weight: e.target.value })}
|
||||
className={cn(
|
||||
"w-14 bg-input border border-border rounded-md px-2 py-1 text-xs text-foreground text-center",
|
||||
"focus:outline-none focus:border-primary transition-colors"
|
||||
)}
|
||||
/>
|
||||
<span className={cn("text-xs font-semibold w-12 text-right", meta.textColor)}>
|
||||
{pct}%
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="p-1 rounded text-text-tertiary hover:text-destructive hover:bg-destructive/10 transition-colors shrink-0"
|
||||
title="Remove entry"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* NOTHING */}
|
||||
{entry.type === "NOTHING" && (
|
||||
<Field label="Message (optional)">
|
||||
<input
|
||||
type="text"
|
||||
value={entry.message}
|
||||
onChange={(e) => upd({ message: e.target.value })}
|
||||
placeholder="You found nothing inside..."
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* CURRENCY / XP */}
|
||||
{(entry.type === "CURRENCY" || entry.type === "XP") && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-1.5">
|
||||
{(["fixed", "range"] as const).map((mode) => (
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => upd({ amountMode: mode })}
|
||||
className={cn(
|
||||
"px-2.5 py-1 rounded text-xs font-medium border transition-colors",
|
||||
entry.amountMode === mode
|
||||
? "bg-primary/15 border-primary text-primary"
|
||||
: "bg-input border-border text-text-tertiary hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{mode === "fixed" ? "Fixed" : "Random Range"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{entry.amountMode === "fixed" ? (
|
||||
<Field
|
||||
label={
|
||||
entry.type === "CURRENCY" ? "Coins Amount" : "XP Amount"
|
||||
}
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={entry.amount}
|
||||
onChange={(e) => upd({ amount: e.target.value })}
|
||||
placeholder="e.g. 100"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Min">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={entry.minAmount}
|
||||
onChange={(e) => upd({ minAmount: e.target.value })}
|
||||
placeholder="e.g. 50"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Max">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={entry.maxAmount}
|
||||
onChange={(e) => upd({ maxAmount: e.target.value })}
|
||||
placeholder="e.g. 200"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Field label="Message (optional)">
|
||||
<input
|
||||
type="text"
|
||||
value={entry.message}
|
||||
onChange={(e) => upd({ message: e.target.value })}
|
||||
placeholder={
|
||||
entry.type === "CURRENCY"
|
||||
? "You received {amount} coins!"
|
||||
: "You gained {amount} XP!"
|
||||
}
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ITEM */}
|
||||
{entry.type === "ITEM" && (
|
||||
<div className="space-y-3">
|
||||
<Field label="Item to Award">
|
||||
<ItemSearchPicker
|
||||
value={
|
||||
entry.itemId && entry.selectedItemName
|
||||
? {
|
||||
id: Number(entry.itemId),
|
||||
name: entry.selectedItemName,
|
||||
rarity: entry.selectedItemRarity,
|
||||
}
|
||||
: null
|
||||
}
|
||||
onChange={(item) =>
|
||||
upd({
|
||||
itemId: item ? String(item.id) : "",
|
||||
selectedItemName: item?.name ?? "",
|
||||
selectedItemRarity: item?.rarity ?? "",
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Quantity (optional, defaults to 1)">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={entry.amount}
|
||||
onChange={(e) => upd({ amount: e.target.value })}
|
||||
placeholder="1"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Message (optional)">
|
||||
<input
|
||||
type="text"
|
||||
value={entry.message}
|
||||
onChange={(e) => upd({ message: e.target.value })}
|
||||
placeholder="You found a rare item!"
|
||||
className={inputCls}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
111
panel/src/pages/components/LootboxEditor.tsx
Normal file
111
panel/src/pages/components/LootboxEditor.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { Plus } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import {
|
||||
type LootPoolEntry,
|
||||
type LootEntryType,
|
||||
LOOT_TYPE_META,
|
||||
makeLootEntry,
|
||||
} from "./ItemStudioTypes";
|
||||
import { LootPoolEntryEditor } from "./LootPoolEntryEditor";
|
||||
|
||||
// ===== Lootbox Pool Builder =====
|
||||
|
||||
export function LootboxEditor({
|
||||
pool,
|
||||
onChange,
|
||||
}: {
|
||||
pool: LootPoolEntry[];
|
||||
onChange: (pool: LootPoolEntry[]) => void;
|
||||
}) {
|
||||
const totalWeight = pool.reduce((sum, e) => sum + Number(e.weight || 0), 0);
|
||||
|
||||
const addEntry = () => onChange([...pool, makeLootEntry()]);
|
||||
const updateEntry = (i: number, updated: LootPoolEntry) => {
|
||||
const next = [...pool];
|
||||
next[i] = updated;
|
||||
onChange(next);
|
||||
};
|
||||
const removeEntry = (i: number) =>
|
||||
onChange(pool.filter((_, idx) => idx !== i));
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-1">
|
||||
{/* Summary bar */}
|
||||
{pool.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-text-tertiary">
|
||||
{pool.length} entr{pool.length === 1 ? "y" : "ies"} · total
|
||||
weight {totalWeight}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
{(Object.keys(LOOT_TYPE_META) as LootEntryType[]).map((t) => {
|
||||
const count = pool.filter((e) => e.type === t).length;
|
||||
if (!count) return null;
|
||||
return (
|
||||
<span
|
||||
key={t}
|
||||
className={cn(
|
||||
"text-xs",
|
||||
LOOT_TYPE_META[t].textColor
|
||||
)}
|
||||
>
|
||||
{LOOT_TYPE_META[t].label} ×{count}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Stacked probability bar */}
|
||||
<div className="flex h-2 w-full rounded-full overflow-hidden gap-px bg-raised">
|
||||
{pool.map((e) => {
|
||||
const w = Number(e.weight || 0);
|
||||
const pct = totalWeight > 0 ? (w / totalWeight) * 100 : 0;
|
||||
return (
|
||||
<div
|
||||
key={e._id}
|
||||
style={{ width: `${pct}%` }}
|
||||
className={cn(
|
||||
"transition-all duration-200",
|
||||
LOOT_TYPE_META[e.type].barColor
|
||||
)}
|
||||
title={`${LOOT_TYPE_META[e.type].label}: ${pct.toFixed(1)}%`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pool entries */}
|
||||
{pool.map((entry, i) => (
|
||||
<LootPoolEntryEditor
|
||||
key={entry._id}
|
||||
entry={entry}
|
||||
totalWeight={totalWeight}
|
||||
onChange={(updated) => updateEntry(i, updated)}
|
||||
onRemove={() => removeEntry(i)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Empty hint */}
|
||||
{pool.length === 0 && (
|
||||
<p className="text-xs text-text-tertiary text-center py-2">
|
||||
Add pool entries — each has a type, weight, and reward amount.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Add entry */}
|
||||
<button
|
||||
onClick={addEntry}
|
||||
className={cn(
|
||||
"w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-dashed text-xs",
|
||||
"border-border text-text-tertiary hover:border-amber-500/50 hover:text-amber-400 transition-colors"
|
||||
)}
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
Add Pool Entry
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
127
panel/src/pages/components/SearchFilterBar.tsx
Normal file
127
panel/src/pages/components/SearchFilterBar.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { Search } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SearchFilterBar Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function SearchFilterBar({
|
||||
search,
|
||||
onSearchChange,
|
||||
classId,
|
||||
onClassChange,
|
||||
isActive,
|
||||
onActiveChange,
|
||||
sortBy,
|
||||
onSortByChange,
|
||||
sortOrder,
|
||||
onSortOrderChange,
|
||||
onClear,
|
||||
classes,
|
||||
}: {
|
||||
search: string;
|
||||
onSearchChange: (v: string) => void;
|
||||
classId: string | null;
|
||||
onClassChange: (v: string | null) => void;
|
||||
isActive: boolean | null;
|
||||
onActiveChange: (v: boolean | null) => void;
|
||||
sortBy: string;
|
||||
onSortByChange: (v: string) => void;
|
||||
sortOrder: string;
|
||||
onSortOrderChange: (v: string) => void;
|
||||
onClear: () => void;
|
||||
classes: { id: string; name: string }[];
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
{/* Search input */}
|
||||
<div className="relative flex-1 min-w-[200px]">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary" />
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder="Search by username..."
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md pl-10 pr-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Class filter */}
|
||||
<select
|
||||
value={classId ?? ""}
|
||||
onChange={(e) => onClassChange(e.target.value || null)}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">All Classes</option>
|
||||
{Array.isArray(classes) && classes.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Active status filter */}
|
||||
<select
|
||||
value={isActive === null ? "" : String(isActive)}
|
||||
onChange={(e) =>
|
||||
onActiveChange(e.target.value === "" ? null : e.target.value === "true")
|
||||
}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="true">Active</option>
|
||||
<option value="false">Inactive</option>
|
||||
</select>
|
||||
|
||||
{/* Sort by */}
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => onSortByChange(e.target.value)}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="balance">Sort by Balance</option>
|
||||
<option value="level">Sort by Level</option>
|
||||
<option value="xp">Sort by XP</option>
|
||||
<option value="username">Sort by Username</option>
|
||||
</select>
|
||||
|
||||
{/* Sort order */}
|
||||
<button
|
||||
onClick={() => onSortOrderChange(sortOrder === "asc" ? "desc" : "asc")}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"hover:bg-raised transition-colors"
|
||||
)}
|
||||
>
|
||||
{sortOrder === "asc" ? "\u2191 Asc" : "\u2193 Desc"}
|
||||
</button>
|
||||
|
||||
{/* Clear filters */}
|
||||
<button
|
||||
onClick={onClear}
|
||||
className={cn(
|
||||
"bg-input border border-border rounded-md px-3 py-2 text-sm text-text-secondary",
|
||||
"hover:bg-destructive hover:text-white hover:border-destructive transition-colors"
|
||||
)}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
486
panel/src/pages/components/SettingsFormFields.tsx
Normal file
486
panel/src/pages/components/SettingsFormFields.tsx
Normal file
@@ -0,0 +1,486 @@
|
||||
import { useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import type { SettingsMeta } from "../../lib/useSettings";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Reusable field components
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function Field({
|
||||
label,
|
||||
hint,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-semibold text-text-secondary">
|
||||
{label}
|
||||
</label>
|
||||
{children}
|
||||
{hint && <p className="text-[11px] text-text-tertiary">{hint}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NumberInput({
|
||||
value,
|
||||
onChange,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
className,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function StringInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
className,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function TextArea({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
rows = 3,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
placeholder?: string;
|
||||
rows?: number;
|
||||
}) {
|
||||
return (
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
rows={rows}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground resize-y",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Toggle({
|
||||
checked,
|
||||
onChange,
|
||||
}: {
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
onClick={() => onChange(!checked)}
|
||||
className={cn(
|
||||
"relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
|
||||
checked ? "bg-primary" : "bg-raised"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-block h-4 w-4 rounded-full bg-white transition-transform",
|
||||
checked ? "translate-x-6" : "translate-x-1"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function SelectInput({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
options: { value: string; label: string }[];
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
{options.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
/** Role picker dropdown -- selects a single role ID */
|
||||
export function RolePicker({
|
||||
value,
|
||||
onChange,
|
||||
roles,
|
||||
placeholder = "Select a role...",
|
||||
}: {
|
||||
value: string | undefined;
|
||||
onChange: (v: string | undefined) => void;
|
||||
roles: SettingsMeta["roles"];
|
||||
placeholder?: string;
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
value={value ?? ""}
|
||||
onChange={(e) => onChange(e.target.value || undefined)}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">{placeholder}</option>
|
||||
{roles.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
/** Channel picker dropdown -- selects a single channel ID (text channels only) */
|
||||
export function ChannelPicker({
|
||||
value,
|
||||
onChange,
|
||||
channels,
|
||||
placeholder = "Select a channel...",
|
||||
}: {
|
||||
value: string | undefined;
|
||||
onChange: (v: string | undefined) => void;
|
||||
channels: SettingsMeta["channels"];
|
||||
placeholder?: string;
|
||||
}) {
|
||||
// type 0 = text channel
|
||||
const textChannels = channels.filter((c) => c.type === 0);
|
||||
return (
|
||||
<select
|
||||
value={value ?? ""}
|
||||
onChange={(e) => onChange(e.target.value || undefined)}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">{placeholder}</option>
|
||||
{textChannels.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
#{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
/** Multi-select role picker for color roles */
|
||||
export function MultiRolePicker({
|
||||
selected,
|
||||
onChange,
|
||||
roles,
|
||||
}: {
|
||||
selected: string[];
|
||||
onChange: (v: string[]) => void;
|
||||
roles: SettingsMeta["roles"];
|
||||
}) {
|
||||
const available = roles.filter((r) => !selected.includes(r.id));
|
||||
const selectedRoles = selected
|
||||
.map((id) => roles.find((r) => r.id === id))
|
||||
.filter(Boolean) as SettingsMeta["roles"];
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{selectedRoles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedRoles.map((r) => (
|
||||
<span
|
||||
key={r.id}
|
||||
className="inline-flex items-center gap-1.5 bg-primary/15 border border-primary/30 rounded-full px-3 py-1 text-xs font-medium"
|
||||
>
|
||||
<span
|
||||
className="w-2.5 h-2.5 rounded-full"
|
||||
style={{ backgroundColor: r.color !== "#000000" ? r.color : "#6B7280" }}
|
||||
/>
|
||||
{r.name}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(selected.filter((id) => id !== r.id))}
|
||||
className="ml-0.5 text-text-tertiary hover:text-destructive transition-colors"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{available.length > 0 && (
|
||||
<select
|
||||
value=""
|
||||
onChange={(e) => {
|
||||
if (e.target.value) onChange([...selected, e.target.value]);
|
||||
}}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">Add a color role...</option>
|
||||
{available.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** OpenTDB category IDs */
|
||||
const TRIVIA_CATEGORIES: { id: number; name: string }[] = [
|
||||
{ id: 9, name: "General Knowledge" },
|
||||
{ id: 10, name: "Books" },
|
||||
{ id: 11, name: "Film" },
|
||||
{ id: 12, name: "Music" },
|
||||
{ id: 13, name: "Musicals & Theatre" },
|
||||
{ id: 14, name: "Television" },
|
||||
{ id: 15, name: "Video Games" },
|
||||
{ id: 16, name: "Board Games" },
|
||||
{ id: 17, name: "Science & Nature" },
|
||||
{ id: 18, name: "Computers" },
|
||||
{ id: 19, name: "Mathematics" },
|
||||
{ id: 20, name: "Mythology" },
|
||||
{ id: 21, name: "Sports" },
|
||||
{ id: 22, name: "Geography" },
|
||||
{ id: 23, name: "History" },
|
||||
{ id: 24, name: "Politics" },
|
||||
{ id: 25, name: "Art" },
|
||||
{ id: 26, name: "Celebrities" },
|
||||
{ id: 27, name: "Animals" },
|
||||
{ id: 28, name: "Vehicles" },
|
||||
{ id: 29, name: "Comics" },
|
||||
{ id: 30, name: "Gadgets" },
|
||||
{ id: 31, name: "Anime & Manga" },
|
||||
{ id: 32, name: "Cartoons & Animations" },
|
||||
];
|
||||
|
||||
export function CategoryPicker({
|
||||
selected,
|
||||
onChange,
|
||||
}: {
|
||||
selected: number[];
|
||||
onChange: (v: number[]) => void;
|
||||
}) {
|
||||
const available = TRIVIA_CATEGORIES.filter((c) => !selected.includes(c.id));
|
||||
const selectedCats = selected
|
||||
.map((id) => TRIVIA_CATEGORIES.find((c) => c.id === id))
|
||||
.filter(Boolean) as typeof TRIVIA_CATEGORIES;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{selectedCats.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedCats.map((c) => (
|
||||
<span
|
||||
key={c.id}
|
||||
className="inline-flex items-center gap-1.5 bg-info/15 border border-info/30 rounded-full px-3 py-1 text-xs font-medium"
|
||||
>
|
||||
{c.name}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(selected.filter((id) => id !== c.id))}
|
||||
className="ml-0.5 text-text-tertiary hover:text-destructive transition-colors"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{available.length > 0 && (
|
||||
<select
|
||||
value=""
|
||||
onChange={(e) => {
|
||||
const id = Number(e.target.value);
|
||||
if (id) onChange([...selected, id]);
|
||||
}}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">Add a category...</option>
|
||||
{available.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Key-value editor for feature override flags */
|
||||
export function FeatureOverridesEditor({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: Record<string, boolean>;
|
||||
onChange: (v: Record<string, boolean>) => void;
|
||||
}) {
|
||||
const [newKey, setNewKey] = useState("");
|
||||
const entries = Object.entries(value).sort(([a], [b]) => a.localeCompare(b));
|
||||
|
||||
const addFlag = () => {
|
||||
const key = newKey.trim().toLowerCase().replace(/\s+/g, "_");
|
||||
if (!key || key in value) return;
|
||||
onChange({ ...value, [key]: true });
|
||||
setNewKey("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{entries.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{entries.map(([key, enabled]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-center justify-between py-1.5"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"text-sm font-mono",
|
||||
enabled ? "text-foreground" : "text-text-disabled"
|
||||
)}
|
||||
>
|
||||
{key}
|
||||
</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<Toggle
|
||||
checked={enabled}
|
||||
onChange={(v) => onChange({ ...value, [key]: v })}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const { [key]: _, ...rest } = value;
|
||||
onChange(rest);
|
||||
}}
|
||||
className="text-text-tertiary hover:text-destructive transition-colors"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<StringInput
|
||||
value={newKey}
|
||||
onChange={setNewKey}
|
||||
placeholder="feature_name"
|
||||
className="flex-1"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addFlag}
|
||||
disabled={!newKey.trim()}
|
||||
className={cn(
|
||||
"rounded-md px-4 py-2 text-sm font-medium transition-colors",
|
||||
newKey.trim()
|
||||
? "bg-primary/15 text-primary hover:bg-primary/25 border border-primary/30"
|
||||
: "bg-raised text-text-disabled cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SectionCard({
|
||||
title,
|
||||
icon: Icon,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card rounded-lg border border-border">
|
||||
<div className="flex items-center gap-2.5 px-6 py-4 border-b border-border">
|
||||
<Icon className="w-4 h-4 text-primary" />
|
||||
<h3 className="text-sm font-semibold">{title}</h3>
|
||||
</div>
|
||||
<div className="px-6 py-5 space-y-5">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
649
panel/src/pages/components/SettingsSections.tsx
Normal file
649
panel/src/pages/components/SettingsSections.tsx
Normal file
@@ -0,0 +1,649 @@
|
||||
import {
|
||||
TrendingUp,
|
||||
Coins,
|
||||
Package,
|
||||
Gift,
|
||||
Brain,
|
||||
Shield,
|
||||
Terminal,
|
||||
Server,
|
||||
Scroll,
|
||||
} from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import type { GameSettings, GuildSettings, SettingsMeta } from "../../lib/useSettings";
|
||||
import {
|
||||
Field,
|
||||
NumberInput,
|
||||
StringInput,
|
||||
TextArea,
|
||||
Toggle,
|
||||
SelectInput,
|
||||
RolePicker,
|
||||
ChannelPicker,
|
||||
MultiRolePicker,
|
||||
CategoryPicker,
|
||||
FeatureOverridesEditor,
|
||||
SectionCard,
|
||||
} from "./SettingsFormFields";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function formatMs(ms: number): string {
|
||||
if (ms >= 86_400_000) return `${ms / 86_400_000}h`;
|
||||
if (ms >= 60_000) return `${ms / 60_000} min`;
|
||||
return `${ms / 1_000}s`;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Section editors
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function GuildSection({
|
||||
data,
|
||||
onChange,
|
||||
meta,
|
||||
}: {
|
||||
data: GuildSettings;
|
||||
onChange: (d: GuildSettings) => void;
|
||||
meta: SettingsMeta | null;
|
||||
}) {
|
||||
const roles = meta?.roles ?? [];
|
||||
const channels = meta?.channels ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<SectionCard title="Roles" icon={Server}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<Field label="Student Role" hint="Assigned to verified students">
|
||||
<RolePicker
|
||||
value={data.studentRoleId}
|
||||
onChange={(v) => onChange({ ...data, studentRoleId: v })}
|
||||
roles={roles}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Visitor Role" hint="Assigned to unverified members">
|
||||
<RolePicker
|
||||
value={data.visitorRoleId}
|
||||
onChange={(v) => onChange({ ...data, visitorRoleId: v })}
|
||||
roles={roles}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<Field label="Color Roles" hint="Roles users can self-assign for name color">
|
||||
<MultiRolePicker
|
||||
selected={data.colorRoleIds ?? []}
|
||||
onChange={(v) => onChange({ ...data, colorRoleIds: v })}
|
||||
roles={roles}
|
||||
/>
|
||||
</Field>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard title="Channels" icon={Server}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<Field label="Welcome Channel">
|
||||
<ChannelPicker
|
||||
value={data.welcomeChannelId}
|
||||
onChange={(v) => onChange({ ...data, welcomeChannelId: v })}
|
||||
channels={channels}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Feedback Channel">
|
||||
<ChannelPicker
|
||||
value={data.feedbackChannelId}
|
||||
onChange={(v) => onChange({ ...data, feedbackChannelId: v })}
|
||||
channels={channels}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Terminal Channel">
|
||||
<ChannelPicker
|
||||
value={data.terminalChannelId}
|
||||
onChange={(v) => onChange({ ...data, terminalChannelId: v })}
|
||||
channels={channels}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Moderation Log Channel">
|
||||
<ChannelPicker
|
||||
value={data.moderationLogChannelId}
|
||||
onChange={(v) => onChange({ ...data, moderationLogChannelId: v })}
|
||||
channels={channels}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard title="Welcome Message" icon={Server}>
|
||||
<Field label="Message" hint="Sent when a new member joins. Leave empty to disable.">
|
||||
<TextArea
|
||||
value={data.welcomeMessage ?? ""}
|
||||
onChange={(v) => onChange({ ...data, welcomeMessage: v || undefined })}
|
||||
placeholder="Welcome to the academy, {user}!"
|
||||
rows={3}
|
||||
/>
|
||||
</Field>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard title="Moderation" icon={Shield}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<Field label="DM on Warn" hint="Send a DM to users when they receive a warning">
|
||||
<Toggle
|
||||
checked={data.moderationDmOnWarn ?? true}
|
||||
onChange={(v) => onChange({ ...data, moderationDmOnWarn: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Auto-Timeout Threshold" hint="Warnings before auto-timeout (empty = disabled)">
|
||||
<NumberInput
|
||||
value={data.moderationAutoTimeoutThreshold ?? 0}
|
||||
onChange={(v) =>
|
||||
onChange({
|
||||
...data,
|
||||
moderationAutoTimeoutThreshold: v || undefined,
|
||||
})
|
||||
}
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard title="Feature Overrides" icon={Server}>
|
||||
<p className="text-xs text-text-tertiary">
|
||||
Toggle feature flags for this guild. Add new flags by name.
|
||||
</p>
|
||||
<FeatureOverridesEditor
|
||||
value={data.featureOverrides ?? {}}
|
||||
onChange={(v) => onChange({ ...data, featureOverrides: v })}
|
||||
/>
|
||||
</SectionCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LevelingSection({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: GameSettings["leveling"];
|
||||
onChange: (d: GameSettings["leveling"]) => void;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Leveling" icon={TrendingUp}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<Field label="Base XP" hint="Base XP required for level 2">
|
||||
<NumberInput
|
||||
value={data.base}
|
||||
onChange={(v) => onChange({ ...data, base: v })}
|
||||
min={1}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Exponent" hint="XP growth curve exponent">
|
||||
<NumberInput
|
||||
value={data.exponent}
|
||||
onChange={(v) => onChange({ ...data, exponent: v })}
|
||||
min={1}
|
||||
max={5}
|
||||
step={0.1}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider pt-2">
|
||||
Chat XP
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
|
||||
<Field label="Cooldown (ms)" hint={formatMs(data.chat.cooldownMs)}>
|
||||
<NumberInput
|
||||
value={data.chat.cooldownMs}
|
||||
onChange={(v) =>
|
||||
onChange({ ...data, chat: { ...data.chat, cooldownMs: v } })
|
||||
}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Min XP">
|
||||
<NumberInput
|
||||
value={data.chat.minXp}
|
||||
onChange={(v) =>
|
||||
onChange({ ...data, chat: { ...data.chat, minXp: v } })
|
||||
}
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Max XP">
|
||||
<NumberInput
|
||||
value={data.chat.maxXp}
|
||||
onChange={(v) =>
|
||||
onChange({ ...data, chat: { ...data.chat, maxXp: v } })
|
||||
}
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function EconomySection({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: GameSettings["economy"];
|
||||
onChange: (d: GameSettings["economy"]) => void;
|
||||
}) {
|
||||
const setDaily = (patch: Partial<GameSettings["economy"]["daily"]>) =>
|
||||
onChange({ ...data, daily: { ...data.daily, ...patch } });
|
||||
const setTransfers = (
|
||||
patch: Partial<GameSettings["economy"]["transfers"]>
|
||||
) => onChange({ ...data, transfers: { ...data.transfers, ...patch } });
|
||||
const setExam = (patch: Partial<GameSettings["economy"]["exam"]>) =>
|
||||
onChange({ ...data, exam: { ...data.exam, ...patch } });
|
||||
|
||||
return (
|
||||
<SectionCard title="Economy" icon={Coins}>
|
||||
<h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
|
||||
Daily Rewards
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
<Field label="Amount (AU)">
|
||||
<StringInput
|
||||
value={data.daily.amount}
|
||||
onChange={(v) => setDaily({ amount: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Streak Bonus">
|
||||
<StringInput
|
||||
value={data.daily.streakBonus}
|
||||
onChange={(v) => setDaily({ streakBonus: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Weekly Bonus">
|
||||
<StringInput
|
||||
value={data.daily.weeklyBonus}
|
||||
onChange={(v) => setDaily({ weeklyBonus: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Cooldown (ms)" hint={formatMs(data.daily.cooldownMs)}>
|
||||
<NumberInput
|
||||
value={data.daily.cooldownMs}
|
||||
onChange={(v) => setDaily({ cooldownMs: v })}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider pt-2">
|
||||
Transfers
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<Field label="Min Amount">
|
||||
<StringInput
|
||||
value={data.transfers.minAmount}
|
||||
onChange={(v) => setTransfers({ minAmount: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Allow Self-Transfer">
|
||||
<Toggle
|
||||
checked={data.transfers.allowSelfTransfer}
|
||||
onChange={(v) => setTransfers({ allowSelfTransfer: v })}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider pt-2">
|
||||
Exam
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<Field label="Min Multiplier">
|
||||
<NumberInput
|
||||
value={data.exam.multMin}
|
||||
onChange={(v) => setExam({ multMin: v })}
|
||||
min={0}
|
||||
step={0.1}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Max Multiplier">
|
||||
<NumberInput
|
||||
value={data.exam.multMax}
|
||||
onChange={(v) => setExam({ multMax: v })}
|
||||
min={0}
|
||||
step={0.1}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function InventorySection({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: GameSettings["inventory"];
|
||||
onChange: (d: GameSettings["inventory"]) => void;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Inventory" icon={Package}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<Field label="Max Stack Size">
|
||||
<StringInput
|
||||
value={data.maxStackSize}
|
||||
onChange={(v) => onChange({ ...data, maxStackSize: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Max Slots">
|
||||
<NumberInput
|
||||
value={data.maxSlots}
|
||||
onChange={(v) => onChange({ ...data, maxSlots: v })}
|
||||
min={1}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function LootdropSection({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: GameSettings["lootdrop"];
|
||||
onChange: (d: GameSettings["lootdrop"]) => void;
|
||||
}) {
|
||||
const setReward = (patch: Partial<GameSettings["lootdrop"]["reward"]>) =>
|
||||
onChange({ ...data, reward: { ...data.reward, ...patch } });
|
||||
|
||||
return (
|
||||
<SectionCard title="Lootdrops" icon={Gift}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
<Field
|
||||
label="Activity Window (ms)"
|
||||
hint={formatMs(data.activityWindowMs)}
|
||||
>
|
||||
<NumberInput
|
||||
value={data.activityWindowMs}
|
||||
onChange={(v) => onChange({ ...data, activityWindowMs: v })}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Min Messages">
|
||||
<NumberInput
|
||||
value={data.minMessages}
|
||||
onChange={(v) => onChange({ ...data, minMessages: v })}
|
||||
min={1}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Spawn Chance" hint="0.0 - 1.0">
|
||||
<NumberInput
|
||||
value={data.spawnChance}
|
||||
onChange={(v) => onChange({ ...data, spawnChance: v })}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Cooldown (ms)" hint={formatMs(data.cooldownMs)}>
|
||||
<NumberInput
|
||||
value={data.cooldownMs}
|
||||
onChange={(v) => onChange({ ...data, cooldownMs: v })}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider pt-2">
|
||||
Reward
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
|
||||
<Field label="Min Reward">
|
||||
<NumberInput
|
||||
value={data.reward.min}
|
||||
onChange={(v) => setReward({ min: v })}
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Max Reward">
|
||||
<NumberInput
|
||||
value={data.reward.max}
|
||||
onChange={(v) => setReward({ max: v })}
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Currency">
|
||||
<SelectInput
|
||||
value={data.reward.currency}
|
||||
onChange={(v) => setReward({ currency: v })}
|
||||
options={[
|
||||
{ value: "AU", label: "AU (Astral Units)" },
|
||||
{ value: "CU", label: "CU (Constellation Units)" },
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function TriviaSection({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: GameSettings["trivia"];
|
||||
onChange: (d: GameSettings["trivia"]) => void;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Trivia" icon={Brain}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
<Field label="Entry Fee (AU)">
|
||||
<StringInput
|
||||
value={data.entryFee}
|
||||
onChange={(v) => onChange({ ...data, entryFee: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Reward Multiplier">
|
||||
<NumberInput
|
||||
value={data.rewardMultiplier}
|
||||
onChange={(v) => onChange({ ...data, rewardMultiplier: v })}
|
||||
min={0}
|
||||
step={0.1}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Timeout (seconds)">
|
||||
<NumberInput
|
||||
value={data.timeoutSeconds}
|
||||
onChange={(v) => onChange({ ...data, timeoutSeconds: v })}
|
||||
min={5}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Cooldown (ms)" hint={formatMs(data.cooldownMs)}>
|
||||
<NumberInput
|
||||
value={data.cooldownMs}
|
||||
onChange={(v) => onChange({ ...data, cooldownMs: v })}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<Field label="Difficulty">
|
||||
<SelectInput
|
||||
value={data.difficulty}
|
||||
onChange={(v) => onChange({ ...data, difficulty: v })}
|
||||
options={[
|
||||
{ value: "random", label: "Random" },
|
||||
{ value: "easy", label: "Easy" },
|
||||
{ value: "medium", label: "Medium" },
|
||||
{ value: "hard", label: "Hard" },
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
label="Categories"
|
||||
hint="Select which OpenTDB categories to pull from. Leave empty for all categories."
|
||||
>
|
||||
<CategoryPicker
|
||||
selected={data.categories ?? []}
|
||||
onChange={(v) => onChange({ ...data, categories: v })}
|
||||
/>
|
||||
</Field>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function ModerationSection({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: GameSettings["moderation"];
|
||||
onChange: (d: GameSettings["moderation"]) => void;
|
||||
}) {
|
||||
const setPrune = (patch: Partial<GameSettings["moderation"]["prune"]>) =>
|
||||
onChange({ ...data, prune: { ...data.prune, ...patch } });
|
||||
|
||||
return (
|
||||
<SectionCard title="Moderation" icon={Shield}>
|
||||
<h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
|
||||
Prune
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
<Field label="Max Amount">
|
||||
<NumberInput
|
||||
value={data.prune.maxAmount}
|
||||
onChange={(v) => setPrune({ maxAmount: v })}
|
||||
min={1}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Confirm Threshold"
|
||||
hint="Require confirmation above this"
|
||||
>
|
||||
<NumberInput
|
||||
value={data.prune.confirmThreshold}
|
||||
onChange={(v) => setPrune({ confirmThreshold: v })}
|
||||
min={1}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Batch Size">
|
||||
<NumberInput
|
||||
value={data.prune.batchSize}
|
||||
onChange={(v) => setPrune({ batchSize: v })}
|
||||
min={1}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Batch Delay (ms)"
|
||||
hint={formatMs(data.prune.batchDelayMs)}
|
||||
>
|
||||
<NumberInput
|
||||
value={data.prune.batchDelayMs}
|
||||
onChange={(v) => setPrune({ batchDelayMs: v })}
|
||||
min={0}
|
||||
step={100}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function QuestSection({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: GameSettings["quest"];
|
||||
onChange: (d: GameSettings["quest"]) => void;
|
||||
}) {
|
||||
return (
|
||||
<SectionCard title="Quests" icon={Scroll}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
<Field
|
||||
label="Max Active Quests"
|
||||
hint="How many incomplete quests a player can have at once"
|
||||
>
|
||||
<NumberInput
|
||||
value={data.maxActiveQuests}
|
||||
onChange={(v) => onChange({ ...data, maxActiveQuests: v })}
|
||||
min={1}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function CommandsSection({
|
||||
commands,
|
||||
onChange,
|
||||
meta,
|
||||
}: {
|
||||
commands: GameSettings["commands"];
|
||||
meta: SettingsMeta | null;
|
||||
onChange: (d: GameSettings["commands"]) => void;
|
||||
}) {
|
||||
const grouped = (meta?.commands ?? []).reduce<
|
||||
Record<string, Array<{ name: string; category: string }>>
|
||||
>((acc, cmd) => {
|
||||
(acc[cmd.category] ??= []).push(cmd);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const categories = Object.keys(grouped).sort();
|
||||
|
||||
if (categories.length === 0) {
|
||||
return (
|
||||
<SectionCard title="Commands" icon={Terminal}>
|
||||
<p className="text-sm text-text-tertiary">
|
||||
No registered commands found. Make sure the bot is online.
|
||||
</p>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionCard title="Commands" icon={Terminal}>
|
||||
<p className="text-xs text-text-tertiary">
|
||||
Toggle commands on or off. Disabled commands cannot be used by anyone.
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
{categories.map((cat) => (
|
||||
<div key={cat}>
|
||||
<h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-3">
|
||||
{cat}
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-3">
|
||||
{grouped[cat]!.map((cmd) => {
|
||||
const enabled = commands[cmd.name] !== false;
|
||||
return (
|
||||
<div
|
||||
key={cmd.name}
|
||||
className="flex items-center justify-between py-1.5"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"text-sm font-mono",
|
||||
enabled ? "text-foreground" : "text-text-disabled"
|
||||
)}
|
||||
>
|
||||
/{cmd.name}
|
||||
</span>
|
||||
<Toggle
|
||||
checked={enabled}
|
||||
onChange={(v) =>
|
||||
onChange({ ...commands, [cmd.name]: v })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
309
panel/src/pages/components/UserDetailPanel.tsx
Normal file
309
panel/src/pages/components/UserDetailPanel.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Loader2,
|
||||
AlertTriangle,
|
||||
Save,
|
||||
Check,
|
||||
X,
|
||||
Package,
|
||||
Plus,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import type { User, InventoryEntry } from "../../lib/useUsers";
|
||||
import {
|
||||
Field,
|
||||
NumberInput,
|
||||
StringInput,
|
||||
Toggle,
|
||||
SelectInput,
|
||||
SectionCard,
|
||||
formatBigInt,
|
||||
} from "./UserFormFields";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// InventoryAddForm Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function InventoryAddForm({
|
||||
items,
|
||||
onAdd,
|
||||
}: {
|
||||
items: { id: number; name: string }[];
|
||||
onAdd: (itemId: number, quantity: string) => void;
|
||||
}) {
|
||||
const [selectedItemId, setSelectedItemId] = useState<string>("");
|
||||
const [quantity, setQuantity] = useState<string>("1");
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!selectedItemId) return;
|
||||
onAdd(parseInt(selectedItemId), quantity);
|
||||
setSelectedItemId("");
|
||||
setQuantity("1");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-text-secondary">Add Item</p>
|
||||
<select
|
||||
value={selectedItemId}
|
||||
onChange={(e) => setSelectedItemId(e.target.value)}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="">Select item...</option>
|
||||
{Array.isArray(items) && items.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(e.target.value)}
|
||||
min="1"
|
||||
placeholder="Qty"
|
||||
className={cn(
|
||||
"w-20 bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={!selectedItemId}
|
||||
className={cn(
|
||||
"flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
"bg-primary text-white hover:bg-primary/90",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
"flex items-center justify-center gap-1.5"
|
||||
)}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// DetailPanel Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function UserDetailPanel({
|
||||
user,
|
||||
userDraft,
|
||||
onClose,
|
||||
onUpdateDraft,
|
||||
onSave,
|
||||
onDiscard,
|
||||
isDirty,
|
||||
saving,
|
||||
saveSuccess,
|
||||
classes,
|
||||
inventoryDraft,
|
||||
items,
|
||||
onAddItem,
|
||||
onRemoveItem,
|
||||
}: {
|
||||
user: User;
|
||||
userDraft: Partial<User> | null;
|
||||
onClose: () => void;
|
||||
onUpdateDraft: (field: keyof User, value: unknown) => void;
|
||||
onSave: () => void;
|
||||
onDiscard: () => void;
|
||||
isDirty: boolean;
|
||||
saving: boolean;
|
||||
saveSuccess: boolean;
|
||||
classes: { id: string; name: string }[];
|
||||
inventoryDraft: InventoryEntry[];
|
||||
items: { id: number; name: string }[];
|
||||
onAddItem: (itemId: number, quantity: string) => void;
|
||||
onRemoveItem: (itemId: number) => void;
|
||||
}) {
|
||||
if (!userDraft) return null;
|
||||
|
||||
const classOptions = [
|
||||
{ value: "", label: "No Class" },
|
||||
...(Array.isArray(classes) ? classes.map((c) => ({ value: c.id, label: c.name })) : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 md:relative md:w-96 border-l border-border bg-card overflow-auto z-50 md:z-auto">
|
||||
<div className="p-6 space-y-6 pb-24">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-1">
|
||||
{user.username}
|
||||
</h2>
|
||||
<p className="text-xs font-mono text-text-tertiary">{user.id}</p>
|
||||
<p className="text-xs text-text-tertiary mt-1">
|
||||
Joined {new Date(user.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-text-tertiary hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* User Info (Editable) */}
|
||||
<div className="space-y-4">
|
||||
<Field label="Balance" hint="User's currency balance">
|
||||
<StringInput
|
||||
value={String(userDraft.balance || "0")}
|
||||
onChange={(v) => onUpdateDraft("balance", v)}
|
||||
placeholder="0"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="XP" hint="User's experience points">
|
||||
<StringInput
|
||||
value={String(userDraft.xp || "0")}
|
||||
onChange={(v) => onUpdateDraft("xp", v)}
|
||||
placeholder="0"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Level" hint="User's current level">
|
||||
<NumberInput
|
||||
value={userDraft.level || 1}
|
||||
onChange={(v) => onUpdateDraft("level", v)}
|
||||
min={1}
|
||||
max={100}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Daily Streak" hint="Consecutive days of daily command usage">
|
||||
<NumberInput
|
||||
value={userDraft.dailyStreak || 0}
|
||||
onChange={(v) => onUpdateDraft("dailyStreak", v)}
|
||||
min={0}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Class" hint="User's selected class">
|
||||
<SelectInput
|
||||
value={String(userDraft.classId || "")}
|
||||
onChange={(v) => onUpdateDraft("classId", v || null)}
|
||||
options={classOptions}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Active Status" hint="Whether the user is active in the system">
|
||||
<div className="flex items-center gap-3">
|
||||
<Toggle
|
||||
checked={userDraft.isActive ?? true}
|
||||
onChange={(v) => onUpdateDraft("isActive", v)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
"text-sm font-medium",
|
||||
userDraft.isActive ? "text-green-400" : "text-gray-400"
|
||||
)}
|
||||
>
|
||||
{userDraft.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{/* Inventory Section */}
|
||||
<SectionCard title="Inventory" icon={Package}>
|
||||
{inventoryDraft.length === 0 ? (
|
||||
<p className="text-sm text-text-tertiary">No items in inventory</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{inventoryDraft.map((entry) => (
|
||||
<div
|
||||
key={entry.itemId}
|
||||
className="flex items-center justify-between gap-3 p-2 bg-raised rounded-md"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{entry.item?.name || `Item #${entry.itemId}`}
|
||||
</p>
|
||||
<p className="text-xs text-text-tertiary">
|
||||
Quantity: {formatBigInt(entry.quantity)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onRemoveItem(entry.itemId)}
|
||||
className="p-1.5 text-text-tertiary hover:text-destructive hover:bg-destructive/10 rounded transition-colors"
|
||||
title="Remove item"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Item Form */}
|
||||
<div className="mt-4 pt-4 border-t border-border">
|
||||
<InventoryAddForm items={items} onAdd={onAddItem} />
|
||||
</div>
|
||||
</SectionCard>
|
||||
</div>
|
||||
|
||||
{/* Sticky footer for save/discard (only shown when dirty) */}
|
||||
{isDirty && (
|
||||
<div className="sticky bottom-0 left-0 right-0 border-t border-border bg-card p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-amber-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">You have unsaved changes</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={onDiscard}
|
||||
disabled={saving}
|
||||
className={cn(
|
||||
"flex-1 px-4 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
"bg-input border border-border text-foreground hover:bg-raised",
|
||||
saving && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
Discard
|
||||
</button>
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={saving}
|
||||
className={cn(
|
||||
"flex-1 px-4 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
"bg-primary text-white hover:bg-primary/90",
|
||||
"flex items-center justify-center gap-2",
|
||||
saving && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : saveSuccess ? (
|
||||
<>
|
||||
<Check className="w-4 h-4" />
|
||||
Saved!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="w-4 h-4" />
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
179
panel/src/pages/components/UserFormFields.tsx
Normal file
179
panel/src/pages/components/UserFormFields.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Reusable field components for Users page
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function Field({
|
||||
label,
|
||||
hint,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-semibold text-text-secondary">
|
||||
{label}
|
||||
</label>
|
||||
{children}
|
||||
{hint && <p className="text-[11px] text-text-tertiary">{hint}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NumberInput({
|
||||
value,
|
||||
onChange,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
className,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function StringInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
className,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Toggle({
|
||||
checked,
|
||||
onChange,
|
||||
}: {
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
onClick={() => onChange(!checked)}
|
||||
className={cn(
|
||||
"relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
|
||||
checked ? "bg-primary" : "bg-raised"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-block h-4 w-4 rounded-full bg-white transition-transform",
|
||||
checked ? "translate-x-6" : "translate-x-1"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function SelectInput({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
options: { value: string; label: string }[];
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={cn(
|
||||
"w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
{options.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
export function SectionCard({
|
||||
title,
|
||||
icon: Icon,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Icon className="w-4 h-4 text-primary" />
|
||||
<h3 className="text-sm font-semibold text-foreground">{title}</h3>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function formatNumber(num: number | string): string {
|
||||
const n = typeof num === "string" ? parseInt(num) : num;
|
||||
return n.toLocaleString();
|
||||
}
|
||||
|
||||
export function formatBigInt(value: string): string {
|
||||
try {
|
||||
const num = BigInt(value);
|
||||
return num.toLocaleString();
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
134
panel/src/pages/components/UserPagination.tsx
Normal file
134
panel/src/pages/components/UserPagination.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import { formatNumber } from "./UserFormFields";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Pagination Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function UserPagination({
|
||||
currentPage,
|
||||
totalPages,
|
||||
limit,
|
||||
total,
|
||||
onPageChange,
|
||||
onLimitChange,
|
||||
}: {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
onPageChange: (page: number) => void;
|
||||
onLimitChange: (limit: number) => void;
|
||||
}) {
|
||||
const startItem = (currentPage - 1) * limit + 1;
|
||||
const endItem = Math.min(currentPage * limit, total);
|
||||
|
||||
// Calculate page numbers to show
|
||||
const getPageNumbers = () => {
|
||||
const pages: (number | string)[] = [];
|
||||
const showPages = 5;
|
||||
const halfShow = Math.floor(showPages / 2);
|
||||
|
||||
let start = Math.max(1, currentPage - halfShow);
|
||||
let end = Math.min(totalPages, start + showPages - 1);
|
||||
|
||||
if (end - start < showPages - 1) {
|
||||
start = Math.max(1, end - showPages + 1);
|
||||
}
|
||||
|
||||
if (start > 1) {
|
||||
pages.push(1);
|
||||
if (start > 2) pages.push("...");
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
if (end < totalPages) {
|
||||
if (end < totalPages - 1) pages.push("...");
|
||||
pages.push(totalPages);
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-4 flex flex-wrap gap-4 items-center justify-between">
|
||||
{/* Items info */}
|
||||
<p className="text-sm text-text-secondary">
|
||||
Showing {startItem}\u2013{endItem} of {formatNumber(total)} users
|
||||
</p>
|
||||
|
||||
{/* Page controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Previous button */}
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className={cn(
|
||||
"px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
currentPage === 1
|
||||
? "bg-raised text-text-tertiary cursor-not-allowed"
|
||||
: "bg-input border border-border text-foreground hover:bg-raised"
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Page numbers */}
|
||||
{getPageNumbers().map((page, i) =>
|
||||
typeof page === "number" ? (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => onPageChange(page)}
|
||||
className={cn(
|
||||
"px-3 py-2 rounded-md text-sm font-medium transition-colors min-w-[40px]",
|
||||
page === currentPage
|
||||
? "bg-primary text-white"
|
||||
: "bg-input border border-border text-foreground hover:bg-raised"
|
||||
)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
) : (
|
||||
<span key={i} className="px-2 text-text-tertiary">
|
||||
{page}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* Next button */}
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className={cn(
|
||||
"px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
currentPage === totalPages
|
||||
? "bg-raised text-text-tertiary cursor-not-allowed"
|
||||
: "bg-input border border-border text-foreground hover:bg-raised"
|
||||
)}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Items per page */}
|
||||
<select
|
||||
value={limit}
|
||||
onChange={(e) => onLimitChange(Number(e.target.value))}
|
||||
className={cn(
|
||||
"ml-2 bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
|
||||
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
<option value="10">10 / page</option>
|
||||
<option value="25">25 / page</option>
|
||||
<option value="50">50 / page</option>
|
||||
<option value="100">100 / page</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
171
panel/src/pages/components/UserTable.tsx
Normal file
171
panel/src/pages/components/UserTable.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { UserCircle2 } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import type { User } from "../../lib/useUsers";
|
||||
import { formatBigInt } from "./UserFormFields";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// UserTable Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function UserTable({
|
||||
users,
|
||||
loading,
|
||||
onSelectUser,
|
||||
}: {
|
||||
users: User[];
|
||||
loading: boolean;
|
||||
onSelectUser: (user: User) => void;
|
||||
}) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-raised border-b border-border">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Username
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Level
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Balance
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Class
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<tr key={i} className="border-b border-border">
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-32"></div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-12"></div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-24"></div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-20"></div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="h-4 bg-raised rounded animate-pulse w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (users.length === 0) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg p-12 text-center">
|
||||
<UserCircle2 className="w-16 h-16 mx-auto mb-4 text-text-tertiary" />
|
||||
<p className="text-lg font-semibold text-text-secondary mb-2">
|
||||
No users found
|
||||
</p>
|
||||
<p className="text-sm text-text-tertiary">
|
||||
Try adjusting your search or filter criteria
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-raised border-b border-border">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Username
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Level
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Balance
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
XP
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Class
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr
|
||||
key={user.id}
|
||||
onClick={() => onSelectUser(user)}
|
||||
className="border-b border-border hover:bg-raised cursor-pointer transition-colors"
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
<UserCircle2 className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{user.username}
|
||||
</p>
|
||||
<p className="text-xs text-text-tertiary font-mono">
|
||||
{user.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm font-mono text-foreground">
|
||||
{user.level}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm font-mono text-foreground">
|
||||
{formatBigInt(user.balance)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm font-mono text-text-secondary">
|
||||
{formatBigInt(user.xp)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm text-foreground">
|
||||
{user.class?.name || "\u2014"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium",
|
||||
user.isActive
|
||||
? "bg-green-500/20 text-green-400"
|
||||
: "bg-gray-500/20 text-gray-400"
|
||||
)}
|
||||
>
|
||||
{user.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user