forked from syntaxbullet/aurorabot
refactor(web): remove frontend dashboard files
Delete all React components, pages, hooks, contexts, styles, and build scripts. The web module now serves as an API-only server.
This commit is contained in:
syntaxbullet
245
web/build.ts
245
web/build.ts
@@ -1,245 +0,0 @@
|
||||
#!/usr/bin/env bun
|
||||
import plugin from "bun-plugin-tailwind";
|
||||
import { existsSync } from "fs";
|
||||
import { rm } from "fs/promises";
|
||||
import path from "path";
|
||||
|
||||
if (process.argv.includes("--help") || process.argv.includes("-h")) {
|
||||
console.log(`
|
||||
🏗️ Bun Build Script
|
||||
|
||||
Usage: bun run build.ts [options]
|
||||
|
||||
Common Options:
|
||||
--outdir <path> Output directory (default: "dist")
|
||||
--minify Enable minification (or --minify.whitespace, --minify.syntax, etc)
|
||||
--sourcemap <type> Sourcemap type: none|linked|inline|external
|
||||
--target <target> Build target: browser|bun|node
|
||||
--format <format> Output format: esm|cjs|iife
|
||||
--splitting Enable code splitting
|
||||
--packages <type> Package handling: bundle|external
|
||||
--public-path <path> Public path for assets
|
||||
--env <mode> Environment handling: inline|disable|prefix*
|
||||
--conditions <list> Package.json export conditions (comma separated)
|
||||
--external <list> External packages (comma separated)
|
||||
--banner <text> Add banner text to output
|
||||
--footer <text> Add footer text to output
|
||||
--define <obj> Define global constants (e.g. --define.VERSION=1.0.0)
|
||||
--help, -h Show this help message
|
||||
|
||||
Example:
|
||||
bun run build.ts --outdir=dist --minify --sourcemap=linked --external=react,react-dom
|
||||
`);
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, g => g[1]?.toUpperCase() || "");
|
||||
|
||||
const parseValue = (value: string): any => {
|
||||
if (value === "true") return true;
|
||||
if (value === "false") return false;
|
||||
|
||||
if (/^\d+$/.test(value)) return parseInt(value, 10);
|
||||
if (/^\d*\.\d+$/.test(value)) return parseFloat(value);
|
||||
|
||||
if (value.includes(",")) return value.split(",").map(v => v.trim());
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
function parseArgs(): Partial<Bun.BuildConfig> {
|
||||
const config: Partial<Bun.BuildConfig> = {};
|
||||
const args = process.argv.slice(2);
|
||||
|
||||
for (let i = 0; i < args.length; i++) {
|
||||
const arg = args[i];
|
||||
if (arg === undefined) continue;
|
||||
if (!arg.startsWith("--")) continue;
|
||||
|
||||
if (arg.startsWith("--no-")) {
|
||||
const key = toCamelCase(arg.slice(5));
|
||||
// @ts-ignore
|
||||
config[key] = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!arg.includes("=") && (i === args.length - 1 || args[i + 1]?.startsWith("--"))) {
|
||||
const key = toCamelCase(arg.slice(2));
|
||||
// @ts-ignore
|
||||
config[key] = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
let key: string;
|
||||
let value: string;
|
||||
|
||||
if (arg.includes("=")) {
|
||||
[key, value] = arg.slice(2).split("=", 2) as [string, string];
|
||||
} else {
|
||||
key = arg.slice(2);
|
||||
value = args[++i] ?? "";
|
||||
}
|
||||
|
||||
key = toCamelCase(key);
|
||||
|
||||
if (key.includes(".")) {
|
||||
const [parentKey, childKey] = key.split(".");
|
||||
// @ts-ignore
|
||||
config[parentKey] = config[parentKey] || {};
|
||||
// @ts-ignore
|
||||
config[parentKey][childKey] = parseValue(value);
|
||||
} else {
|
||||
// @ts-ignore
|
||||
config[key] = parseValue(value);
|
||||
}
|
||||
}
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
const units = ["B", "KB", "MB", "GB"];
|
||||
let size = bytes;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${size.toFixed(2)} ${units[unitIndex]}`;
|
||||
};
|
||||
|
||||
console.log("\n🚀 Starting build process...\n");
|
||||
|
||||
const cliConfig = parseArgs();
|
||||
const outdir = cliConfig.outdir || path.join(process.cwd(), "dist");
|
||||
|
||||
if (existsSync(outdir)) {
|
||||
console.log(`🗑️ Cleaning previous build at ${outdir}`);
|
||||
await rm(outdir, { recursive: true, force: true });
|
||||
}
|
||||
|
||||
const start = performance.now();
|
||||
|
||||
const entrypoints = [...new Bun.Glob("**.html").scanSync("src")]
|
||||
.map(a => path.resolve("src", a))
|
||||
.filter(dir => !dir.includes("node_modules"));
|
||||
console.log(`📄 Found ${entrypoints.length} HTML ${entrypoints.length === 1 ? "file" : "files"} to process\n`);
|
||||
|
||||
const build = async () => {
|
||||
const result = await Bun.build({
|
||||
entrypoints,
|
||||
outdir,
|
||||
plugins: [plugin],
|
||||
minify: true,
|
||||
target: "browser",
|
||||
sourcemap: "linked",
|
||||
publicPath: "/", // Use absolute paths for SPA routing compatibility
|
||||
define: {
|
||||
"process.env.NODE_ENV": JSON.stringify((cliConfig as any).watch ? "development" : "production"),
|
||||
},
|
||||
...cliConfig,
|
||||
});
|
||||
|
||||
const outputTable = result.outputs.map(output => ({
|
||||
File: path.relative(process.cwd(), output.path),
|
||||
Type: output.kind,
|
||||
Size: formatFileSize(output.size),
|
||||
}));
|
||||
|
||||
console.table(outputTable);
|
||||
return result;
|
||||
};
|
||||
|
||||
const result = await build();
|
||||
|
||||
const end = performance.now();
|
||||
const buildTime = (end - start).toFixed(2);
|
||||
console.log(`\n✅ Build completed in ${buildTime}ms\n`);
|
||||
|
||||
if ((cliConfig as any).watch) {
|
||||
console.log("👀 Watching for changes...\n");
|
||||
|
||||
// Polling-based file watcher for Docker compatibility
|
||||
// Docker volumes don't propagate filesystem events (inotify) reliably
|
||||
const srcDir = path.join(process.cwd(), "src");
|
||||
const POLL_INTERVAL_MS = 1000;
|
||||
let lastMtimes = new Map<string, number>();
|
||||
let isRebuilding = false;
|
||||
|
||||
// Collect all file mtimes in src directory
|
||||
const collectMtimes = async (): Promise<Map<string, number>> => {
|
||||
const mtimes = new Map<string, number>();
|
||||
const glob = new Bun.Glob("**/*.{ts,tsx,js,jsx,css,html}");
|
||||
|
||||
for await (const file of glob.scan({ cwd: srcDir, absolute: true })) {
|
||||
try {
|
||||
const stat = await Bun.file(file).stat();
|
||||
if (stat) {
|
||||
mtimes.set(file, stat.mtime.getTime());
|
||||
}
|
||||
} catch {
|
||||
// File may have been deleted, skip
|
||||
}
|
||||
}
|
||||
return mtimes;
|
||||
};
|
||||
|
||||
// Initial collection
|
||||
lastMtimes = await collectMtimes();
|
||||
|
||||
// Polling loop
|
||||
const poll = async () => {
|
||||
if (isRebuilding) return;
|
||||
|
||||
const currentMtimes = await collectMtimes();
|
||||
const changedFiles: string[] = [];
|
||||
|
||||
// Check for new or modified files
|
||||
for (const [file, mtime] of currentMtimes) {
|
||||
const lastMtime = lastMtimes.get(file);
|
||||
if (lastMtime === undefined || lastMtime < mtime) {
|
||||
changedFiles.push(path.relative(srcDir, file));
|
||||
}
|
||||
}
|
||||
|
||||
// Check for deleted files
|
||||
for (const file of lastMtimes.keys()) {
|
||||
if (!currentMtimes.has(file)) {
|
||||
changedFiles.push(path.relative(srcDir, file) + " (deleted)");
|
||||
}
|
||||
}
|
||||
|
||||
if (changedFiles.length > 0) {
|
||||
isRebuilding = true;
|
||||
console.log(`\n🔄 Changes detected:`);
|
||||
changedFiles.forEach(f => console.log(` • ${f}`));
|
||||
console.log("");
|
||||
|
||||
try {
|
||||
const rebuildStart = performance.now();
|
||||
await build();
|
||||
const rebuildEnd = performance.now();
|
||||
console.log(`\n✅ Rebuild completed in ${(rebuildEnd - rebuildStart).toFixed(2)}ms\n`);
|
||||
} catch (err) {
|
||||
console.error("❌ Rebuild failed:", err);
|
||||
}
|
||||
|
||||
lastMtimes = currentMtimes;
|
||||
isRebuilding = false;
|
||||
}
|
||||
};
|
||||
|
||||
const interval = setInterval(poll, POLL_INTERVAL_MS);
|
||||
|
||||
// Handle manual exit
|
||||
process.on("SIGINT", () => {
|
||||
clearInterval(interval);
|
||||
console.log("\n👋 Stopping build watcher...");
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
// Keep process alive
|
||||
process.stdin.resume();
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "styles/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||
import "./index.css";
|
||||
|
||||
import { DesignSystem } from "./pages/DesignSystem";
|
||||
import { AdminQuests } from "./pages/AdminQuests";
|
||||
import { AdminOverview } from "./pages/admin/Overview";
|
||||
import { AdminItems } from "./pages/admin/Items";
|
||||
|
||||
import { Home } from "./pages/Home";
|
||||
import { Toaster } from "sonner";
|
||||
import { NavigationProvider } from "./contexts/navigation-context";
|
||||
import { MainLayout } from "./components/layout/main-layout";
|
||||
|
||||
import { SettingsLayout } from "./pages/settings/SettingsLayout";
|
||||
import { GeneralSettings } from "./pages/settings/General";
|
||||
import { EconomySettings } from "./pages/settings/Economy";
|
||||
import { SystemsSettings } from "./pages/settings/Systems";
|
||||
import { RolesSettings } from "./pages/settings/Roles";
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<NavigationProvider>
|
||||
<Toaster richColors position="top-right" theme="dark" />
|
||||
<MainLayout>
|
||||
<Routes>
|
||||
|
||||
<Route path="/design-system" element={<DesignSystem />} />
|
||||
<Route path="/admin" element={<Navigate to="/admin/overview" replace />} />
|
||||
<Route path="/admin/overview" element={<AdminOverview />} />
|
||||
<Route path="/admin/quests" element={<AdminQuests />} />
|
||||
<Route path="/admin/items" element={<AdminItems />} />
|
||||
|
||||
|
||||
<Route path="/settings" element={<SettingsLayout />}>
|
||||
<Route index element={<Navigate to="/settings/general" replace />} />
|
||||
<Route path="general" element={<GeneralSettings />} />
|
||||
<Route path="economy" element={<EconomySettings />} />
|
||||
<Route path="systems" element={<SystemsSettings />} />
|
||||
<Route path="roles" element={<RolesSettings />} />
|
||||
</Route>
|
||||
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
</MainLayout>
|
||||
</NavigationProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,164 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
|
||||
import { Activity } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import type { ActivityData } from "@shared/modules/dashboard/dashboard.types";
|
||||
|
||||
interface ActivityChartProps {
|
||||
className?: string;
|
||||
data?: ActivityData[];
|
||||
}
|
||||
|
||||
export function ActivityChart({ className, data: providedData }: ActivityChartProps) {
|
||||
const [data, setData] = useState<any[]>([]); // using any[] for the displayTime extension
|
||||
const [isLoading, setIsLoading] = useState(!providedData);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (providedData) {
|
||||
// Process provided data
|
||||
const formatted = providedData.map((item) => ({
|
||||
...item,
|
||||
displayTime: new Date(item.hour).getHours().toString().padStart(2, '0') + ':00',
|
||||
}));
|
||||
setData(formatted);
|
||||
return;
|
||||
}
|
||||
|
||||
let mounted = true;
|
||||
|
||||
async function fetchActivity() {
|
||||
try {
|
||||
const response = await fetch("/api/stats/activity");
|
||||
if (!response.ok) throw new Error("Failed to fetch activity data");
|
||||
const result = await response.json();
|
||||
|
||||
if (mounted) {
|
||||
// Normalize data: ensure we have 24 hours format
|
||||
// The API returns { hour: ISOString, commands: number, transactions: number }
|
||||
// We want to format hour to readable time
|
||||
const formatted = result.map((item: ActivityData) => ({
|
||||
...item,
|
||||
displayTime: new Date(item.hour).getHours().toString().padStart(2, '0') + ':00',
|
||||
}));
|
||||
|
||||
// Sort by time just in case, though API should handle it
|
||||
setData(formatted);
|
||||
|
||||
// Only set loading to false on the first load to avoid flickering
|
||||
setIsLoading(false);
|
||||
}
|
||||
} catch (err) {
|
||||
if (mounted) {
|
||||
console.error(err);
|
||||
setError("Failed to load activity data");
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchActivity();
|
||||
|
||||
// Refresh every 60 seconds
|
||||
const interval = setInterval(fetchActivity, 60000);
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [providedData]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className={cn("glass-card", className)}>
|
||||
<CardContent className="flex items-center justify-center h-[300px] text-destructive">
|
||||
{error}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={cn("glass-card overflow-hidden", className)}>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="w-5 h-5 text-primary" />
|
||||
<CardTitle>24h Activity</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[250px] w-full">
|
||||
{isLoading ? (
|
||||
<div className="h-full w-full flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={data}
|
||||
margin={{
|
||||
top: 10,
|
||||
right: 10,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="colorCommands" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--primary)" stopOpacity={0.8} />
|
||||
<stop offset="95%" stopColor="var(--primary)" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorTx" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--secondary)" stopOpacity={0.8} />
|
||||
<stop offset="95%" stopColor="var(--secondary)" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--border)" />
|
||||
<XAxis
|
||||
dataKey="displayTime"
|
||||
stroke="var(--muted-foreground)"
|
||||
fontSize={12}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="var(--muted-foreground)"
|
||||
fontSize={12}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => `${value}`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "var(--card)",
|
||||
borderColor: "var(--border)",
|
||||
borderRadius: "calc(var(--radius) + 2px)",
|
||||
color: "var(--foreground)"
|
||||
}}
|
||||
itemStyle={{ color: "var(--foreground)" }}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="commands"
|
||||
name="Commands"
|
||||
stroke="var(--primary)"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorCommands)"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="transactions"
|
||||
name="Transactions"
|
||||
stroke="var(--secondary)"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorTx)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,235 +0,0 @@
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "./ui/sheet";
|
||||
import { ScrollArea } from "./ui/scroll-area";
|
||||
import { Switch } from "./ui/switch";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Loader2, Terminal, Sparkles, Coins, Shield, Backpack, TrendingUp, MessageSquare, User } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Command {
|
||||
name: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
interface CommandsDrawerProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
// Category metadata for visual styling
|
||||
const CATEGORY_CONFIG: Record<string, { label: string; color: string; icon: React.ElementType }> = {
|
||||
admin: { label: "Admin", color: "bg-red-500/20 text-red-400 border-red-500/30", icon: Shield },
|
||||
economy: { label: "Economy", color: "bg-amber-500/20 text-amber-400 border-amber-500/30", icon: Coins },
|
||||
leveling: { label: "Leveling", color: "bg-emerald-500/20 text-emerald-400 border-emerald-500/30", icon: TrendingUp },
|
||||
inventory: { label: "Inventory", color: "bg-blue-500/20 text-blue-400 border-blue-500/30", icon: Backpack },
|
||||
quest: { label: "Quests", color: "bg-purple-500/20 text-purple-400 border-purple-500/30", icon: Sparkles },
|
||||
feedback: { label: "Feedback", color: "bg-cyan-500/20 text-cyan-400 border-cyan-500/30", icon: MessageSquare },
|
||||
user: { label: "User", color: "bg-pink-500/20 text-pink-400 border-pink-500/30", icon: User },
|
||||
uncategorized: { label: "Other", color: "bg-zinc-500/20 text-zinc-400 border-zinc-500/30", icon: Terminal },
|
||||
};
|
||||
|
||||
export function CommandsDrawer({ open, onOpenChange }: CommandsDrawerProps) {
|
||||
const [commands, setCommands] = useState<Command[]>([]);
|
||||
const [enabledState, setEnabledState] = useState<Record<string, boolean>>({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState<string | null>(null);
|
||||
|
||||
// Fetch commands and their enabled state
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setLoading(true);
|
||||
Promise.all([
|
||||
fetch("/api/settings/meta").then(res => res.json()),
|
||||
fetch("/api/settings").then(res => res.json()),
|
||||
]).then(([meta, config]) => {
|
||||
setCommands(meta.commands || []);
|
||||
// Build enabled state from config.commands (undefined = enabled by default)
|
||||
const state: Record<string, boolean> = {};
|
||||
for (const cmd of meta.commands || []) {
|
||||
state[cmd.name] = config.commands?.[cmd.name] !== false;
|
||||
}
|
||||
setEnabledState(state);
|
||||
}).catch(err => {
|
||||
toast.error("Failed to load commands", {
|
||||
description: "Unable to fetch command list. Please try again."
|
||||
});
|
||||
console.error(err);
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// Group commands by category
|
||||
const groupedCommands = useMemo(() => {
|
||||
const groups: Record<string, Command[]> = {};
|
||||
for (const cmd of commands) {
|
||||
const cat = cmd.category || "uncategorized";
|
||||
if (!groups[cat]) groups[cat] = [];
|
||||
groups[cat].push(cmd);
|
||||
}
|
||||
// Sort categories: admin first, then alphabetically
|
||||
const sortedCategories = Object.keys(groups).sort((a, b) => {
|
||||
if (a === "admin") return -1;
|
||||
if (b === "admin") return 1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
return sortedCategories.map(cat => ({ category: cat, commands: groups[cat]! }));
|
||||
}, [commands]);
|
||||
|
||||
// Toggle command enabled state
|
||||
const toggleCommand = async (commandName: string, enabled: boolean) => {
|
||||
setSaving(commandName);
|
||||
try {
|
||||
const response = await fetch("/api/settings", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
commands: {
|
||||
[commandName]: enabled,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to save");
|
||||
|
||||
setEnabledState(prev => ({ ...prev, [commandName]: enabled }));
|
||||
toast.success(`/${commandName} ${enabled ? "enabled" : "disabled"}`, {
|
||||
description: `Command has been ${enabled ? "enabled" : "disabled"} successfully.`,
|
||||
duration: 2000,
|
||||
id: "command-toggle",
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error("Failed to toggle command", {
|
||||
description: "Unable to update command status. Please try again."
|
||||
});
|
||||
console.error(error);
|
||||
} finally {
|
||||
setSaving(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange} modal={false}>
|
||||
<SheetContent side="right" className="w-[800px] sm:max-w-[800px] p-0 flex flex-col gap-0 border-l border-border/50 glass-card bg-background/95 text-foreground">
|
||||
<SheetHeader className="p-6 border-b border-border/50">
|
||||
<SheetTitle className="flex items-center gap-2">
|
||||
<Terminal className="w-5 h-5 text-primary" />
|
||||
Command Manager
|
||||
</SheetTitle>
|
||||
<SheetDescription>
|
||||
Enable or disable commands. Changes take effect immediately.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<ScrollArea className="h-full">
|
||||
<div className="space-y-6 p-6 pb-8">
|
||||
{groupedCommands.map(({ category, commands: cmds }) => {
|
||||
const config = (CATEGORY_CONFIG[category] ?? CATEGORY_CONFIG.uncategorized)!;
|
||||
const IconComponent = config.icon;
|
||||
|
||||
return (
|
||||
<div key={category} className="space-y-3">
|
||||
{/* Category Header */}
|
||||
<div className="flex items-center gap-2">
|
||||
<IconComponent className="w-4 h-4 text-muted-foreground" />
|
||||
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
|
||||
{config.label}
|
||||
</h3>
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
||||
{cmds.length}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Commands Grid */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{cmds.map(cmd => {
|
||||
const isEnabled = enabledState[cmd.name] !== false;
|
||||
const isSaving = saving === cmd.name;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cmd.name}
|
||||
className={cn(
|
||||
"group relative rounded-lg overflow-hidden transition-all duration-300",
|
||||
"bg-gradient-to-r from-card/80 to-card/40",
|
||||
"border border-border/20 hover:border-border/40",
|
||||
"hover:shadow-lg hover:shadow-primary/5",
|
||||
"hover:translate-x-1",
|
||||
!isEnabled && "opacity-40 grayscale",
|
||||
isSaving && "animate-pulse"
|
||||
)}
|
||||
>
|
||||
{/* Category color accent bar */}
|
||||
<div className={cn(
|
||||
"absolute left-0 top-0 bottom-0 w-1 transition-all duration-300",
|
||||
config.color.split(' ')[0],
|
||||
"group-hover:w-1.5"
|
||||
)} />
|
||||
|
||||
<div className="p-3 pl-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Icon with glow effect */}
|
||||
<div className={cn(
|
||||
"w-9 h-9 rounded-lg flex items-center justify-center",
|
||||
"bg-gradient-to-br",
|
||||
config.color,
|
||||
"shadow-sm",
|
||||
isEnabled && "group-hover:shadow-md group-hover:scale-105",
|
||||
"transition-all duration-300"
|
||||
)}>
|
||||
<IconComponent className="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<span className={cn(
|
||||
"font-mono text-sm font-semibold tracking-tight",
|
||||
"transition-colors duration-300",
|
||||
isEnabled ? "text-foreground" : "text-muted-foreground"
|
||||
)}>
|
||||
/{cmd.name}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground/70 uppercase tracking-wider">
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Switch
|
||||
checked={isEnabled}
|
||||
onCheckedChange={(checked) => toggleCommand(cmd.name, checked)}
|
||||
disabled={isSaving}
|
||||
className={cn(
|
||||
"transition-opacity duration-300",
|
||||
!isEnabled && "opacity-60"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{groupedCommands.length === 0 && (
|
||||
<div className="text-center text-muted-foreground py-8">
|
||||
No commands found.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
@@ -1,397 +0,0 @@
|
||||
/**
|
||||
* EffectEditor Component
|
||||
* Dynamic form for adding/editing item effects with all 7 effect types.
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { LootTableBuilder } from "@/components/loot-table-builder";
|
||||
import {
|
||||
Plus,
|
||||
Trash2,
|
||||
Sparkles,
|
||||
Coins,
|
||||
MessageSquare,
|
||||
Zap,
|
||||
Clock,
|
||||
Palette,
|
||||
Package,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Effect types matching the backend
|
||||
const EFFECT_TYPES = [
|
||||
{ value: "ADD_XP", label: "Add XP", icon: Sparkles, color: "text-blue-400" },
|
||||
{ value: "ADD_BALANCE", label: "Add Balance", icon: Coins, color: "text-amber-400" },
|
||||
{ value: "REPLY_MESSAGE", label: "Reply Message", icon: MessageSquare, color: "text-green-400" },
|
||||
{ value: "XP_BOOST", label: "XP Boost", icon: Zap, color: "text-purple-400" },
|
||||
{ value: "TEMP_ROLE", label: "Temporary Role", icon: Clock, color: "text-orange-400" },
|
||||
{ value: "COLOR_ROLE", label: "Color Role", icon: Palette, color: "text-pink-400" },
|
||||
{ value: "LOOTBOX", label: "Lootbox", icon: Package, color: "text-yellow-400" },
|
||||
];
|
||||
|
||||
interface Effect {
|
||||
type: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface EffectEditorProps {
|
||||
effects: Effect[];
|
||||
onChange: (effects: Effect[]) => void;
|
||||
}
|
||||
|
||||
const getDefaultEffect = (type: string): Effect => {
|
||||
switch (type) {
|
||||
case "ADD_XP":
|
||||
return { type, amount: 100 };
|
||||
case "ADD_BALANCE":
|
||||
return { type, amount: 100 };
|
||||
case "REPLY_MESSAGE":
|
||||
return { type, message: "" };
|
||||
case "XP_BOOST":
|
||||
return { type, multiplier: 2, durationMinutes: 60 };
|
||||
case "TEMP_ROLE":
|
||||
return { type, roleId: "", durationMinutes: 60 };
|
||||
case "COLOR_ROLE":
|
||||
return { type, roleId: "" };
|
||||
case "LOOTBOX":
|
||||
return { type, pool: [] };
|
||||
default:
|
||||
return { type };
|
||||
}
|
||||
};
|
||||
|
||||
const getEffectSummary = (effect: Effect): string => {
|
||||
switch (effect.type) {
|
||||
case "ADD_XP":
|
||||
return `+${effect.amount} XP`;
|
||||
case "ADD_BALANCE":
|
||||
return `+${effect.amount} coins`;
|
||||
case "REPLY_MESSAGE":
|
||||
return effect.message ? `"${effect.message.slice(0, 30)}..."` : "No message";
|
||||
case "XP_BOOST":
|
||||
return `${effect.multiplier}x for ${effect.durationMinutes || effect.durationHours * 60 || effect.durationSeconds / 60}m`;
|
||||
case "TEMP_ROLE":
|
||||
return `Role for ${effect.durationMinutes || effect.durationHours * 60 || effect.durationSeconds / 60}m`;
|
||||
case "COLOR_ROLE":
|
||||
return effect.roleId ? `Role: ${effect.roleId}` : "No role set";
|
||||
case "LOOTBOX":
|
||||
return `${effect.pool?.length || 0} drops`;
|
||||
default:
|
||||
return effect.type;
|
||||
}
|
||||
};
|
||||
|
||||
export function EffectEditor({ effects, onChange }: EffectEditorProps) {
|
||||
const [expandedItems, setExpandedItems] = useState<string[]>([]);
|
||||
|
||||
const addEffect = useCallback(() => {
|
||||
const newEffect = getDefaultEffect("ADD_XP");
|
||||
const newEffects = [...effects, newEffect];
|
||||
onChange(newEffects);
|
||||
setExpandedItems(prev => [...prev, `effect-${newEffects.length - 1}`]);
|
||||
}, [effects, onChange]);
|
||||
|
||||
const removeEffect = useCallback((index: number) => {
|
||||
const newEffects = effects.filter((_, i) => i !== index);
|
||||
onChange(newEffects);
|
||||
}, [effects, onChange]);
|
||||
|
||||
const updateEffect = useCallback((index: number, updates: Partial<Effect>) => {
|
||||
const newEffects = effects.map((effect, i) =>
|
||||
i === index ? { ...effect, ...updates } : effect
|
||||
);
|
||||
onChange(newEffects);
|
||||
}, [effects, onChange]);
|
||||
|
||||
const changeEffectType = useCallback((index: number, newType: string) => {
|
||||
const newEffects = effects.map((effect, i) =>
|
||||
i === index ? getDefaultEffect(newType) : effect
|
||||
);
|
||||
onChange(newEffects);
|
||||
}, [effects, onChange]);
|
||||
|
||||
if (effects.length === 0) {
|
||||
return (
|
||||
<div className="border border-dashed border-border/50 rounded-lg p-6 text-center">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
No effects added yet
|
||||
</p>
|
||||
<Button type="button" variant="outline" size="sm" onClick={addEffect}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Effect
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Accordion
|
||||
type="multiple"
|
||||
value={expandedItems}
|
||||
onValueChange={setExpandedItems}
|
||||
className="space-y-2"
|
||||
>
|
||||
{effects.map((effect, index) => {
|
||||
const effectType = EFFECT_TYPES.find(t => t.value === effect.type);
|
||||
const Icon = effectType?.icon || Sparkles;
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
key={index}
|
||||
value={`effect-${index}`}
|
||||
className="border border-border/50 rounded-lg bg-card/30 overflow-hidden"
|
||||
>
|
||||
<AccordionTrigger className="px-4 py-3 hover:no-underline hover:bg-muted/30">
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<Icon className={cn("h-4 w-4", effectType?.color)} />
|
||||
<span className="font-medium">
|
||||
{effectType?.label || effect.type}
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{getEffectSummary(effect)}
|
||||
</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-4 pb-4">
|
||||
<div className="space-y-4 pt-2">
|
||||
{/* Effect Type Selector */}
|
||||
<div className="space-y-2">
|
||||
<Label>Effect Type</Label>
|
||||
<Select
|
||||
value={effect.type}
|
||||
onValueChange={(value) => changeEffectType(index, value)}
|
||||
>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{EFFECT_TYPES.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
<div className="flex items-center gap-2">
|
||||
<type.icon className={cn("h-4 w-4", type.color)} />
|
||||
{type.label}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Dynamic Fields Based on Effect Type */}
|
||||
{effect.type === "ADD_XP" && (
|
||||
<div className="space-y-2">
|
||||
<Label>Amount</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={effect.amount || 0}
|
||||
onChange={(e) => updateEffect(index, { amount: parseInt(e.target.value) || 0 })}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{effect.type === "ADD_BALANCE" && (
|
||||
<div className="space-y-2">
|
||||
<Label>Amount</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
value={effect.amount || 0}
|
||||
onChange={(e) => updateEffect(index, { amount: parseInt(e.target.value) || 0 })}
|
||||
className="bg-background/50 pr-10"
|
||||
/>
|
||||
<Coins className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-amber-400" /></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{effect.type === "REPLY_MESSAGE" && (
|
||||
<div className="space-y-2">
|
||||
<Label>Message</Label>
|
||||
<Textarea
|
||||
value={effect.message || ""}
|
||||
onChange={(e) => updateEffect(index, { message: e.target.value })}
|
||||
placeholder="The message to display when used..."
|
||||
className="bg-background/50 min-h-[80px]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{effect.type === "XP_BOOST" && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label>Multiplier</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.1"
|
||||
value={effect.multiplier || 2}
|
||||
onChange={(e) => updateEffect(index, { multiplier: parseFloat(e.target.value) || 2 })}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="space-y-2">
|
||||
<Label>Hours</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={effect.durationHours || 0}
|
||||
onChange={(e) => updateEffect(index, {
|
||||
durationHours: parseInt(e.target.value) || 0,
|
||||
durationMinutes: undefined,
|
||||
durationSeconds: undefined,
|
||||
})}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Minutes</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={effect.durationMinutes || 0}
|
||||
onChange={(e) => updateEffect(index, {
|
||||
durationMinutes: parseInt(e.target.value) || 0,
|
||||
durationHours: undefined,
|
||||
durationSeconds: undefined,
|
||||
})}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Seconds</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={effect.durationSeconds || 0}
|
||||
onChange={(e) => updateEffect(index, {
|
||||
durationSeconds: parseInt(e.target.value) || 0,
|
||||
durationHours: undefined,
|
||||
durationMinutes: undefined,
|
||||
})}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{effect.type === "TEMP_ROLE" && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label>Role ID</Label>
|
||||
<Input
|
||||
value={effect.roleId || ""}
|
||||
onChange={(e) => updateEffect(index, { roleId: e.target.value })}
|
||||
placeholder="Discord Role ID"
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="space-y-2">
|
||||
<Label>Hours</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={effect.durationHours || 0}
|
||||
onChange={(e) => updateEffect(index, {
|
||||
durationHours: parseInt(e.target.value) || 0,
|
||||
durationMinutes: undefined,
|
||||
durationSeconds: undefined,
|
||||
})}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Minutes</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={effect.durationMinutes || 0}
|
||||
onChange={(e) => updateEffect(index, {
|
||||
durationMinutes: parseInt(e.target.value) || 0,
|
||||
durationHours: undefined,
|
||||
durationSeconds: undefined,
|
||||
})}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Seconds</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={effect.durationSeconds || 0}
|
||||
onChange={(e) => updateEffect(index, {
|
||||
durationSeconds: parseInt(e.target.value) || 0,
|
||||
durationHours: undefined,
|
||||
durationMinutes: undefined,
|
||||
})}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{effect.type === "COLOR_ROLE" && (
|
||||
<div className="space-y-2">
|
||||
<Label>Role ID</Label>
|
||||
<Input
|
||||
value={effect.roleId || ""}
|
||||
onChange={(e) => updateEffect(index, { roleId: e.target.value })}
|
||||
placeholder="Discord Role ID for color"
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{effect.type === "LOOTBOX" && (
|
||||
<div className="space-y-2">
|
||||
<Label>Loot Table</Label>
|
||||
<LootTableBuilder
|
||||
pool={effect.pool || []}
|
||||
onChange={(pool: unknown[]) => updateEffect(index, { pool })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Button */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => removeEffect(index)}
|
||||
className="mt-2"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Remove Effect
|
||||
</Button>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
);
|
||||
})}
|
||||
</Accordion>
|
||||
|
||||
<Button type="button" variant="outline" size="sm" onClick={addEffect}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Effect
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EffectEditor;
|
||||
@@ -1,48 +0,0 @@
|
||||
import React, { type ReactNode } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
interface FeatureCardProps {
|
||||
title: string;
|
||||
category: string;
|
||||
description?: string;
|
||||
icon?: ReactNode;
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
delay?: number; // Animation delay in ms or generic unit
|
||||
}
|
||||
|
||||
export function FeatureCard({
|
||||
title,
|
||||
category,
|
||||
description,
|
||||
icon,
|
||||
children,
|
||||
className,
|
||||
}: FeatureCardProps) {
|
||||
return (
|
||||
<Card className={cn(
|
||||
"glass-card border-none hover-lift transition-all animate-in slide-up group overflow-hidden",
|
||||
className
|
||||
)}>
|
||||
{icon && (
|
||||
<div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<CardHeader>
|
||||
<Badge variant="glass" className="w-fit mb-2">{category}</Badge>
|
||||
<CardTitle className="text-xl text-primary">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{description && (
|
||||
<p className="text-muted-foreground text-step--1">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
{children}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import Cropper, { type Area } from "react-easy-crop";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { getCroppedImg } from "@/lib/canvasUtils";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
interface ImageCropperProps {
|
||||
imageSrc: string | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onCropComplete: (croppedImage: Blob) => void;
|
||||
}
|
||||
|
||||
export function ImageCropper({
|
||||
imageSrc,
|
||||
isOpen,
|
||||
onClose,
|
||||
onCropComplete,
|
||||
}: ImageCropperProps) {
|
||||
const [crop, setCrop] = useState({ x: 0, y: 0 });
|
||||
const [zoom, setZoom] = useState(1);
|
||||
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const onCropChange = (crop: { x: number; y: number }) => {
|
||||
setCrop(crop);
|
||||
};
|
||||
|
||||
const onZoomChange = (zoom: number) => {
|
||||
setZoom(zoom);
|
||||
};
|
||||
|
||||
const onCropCompleteHandler = useCallback(
|
||||
(_croppedArea: Area, croppedAreaPixels: Area) => {
|
||||
setCroppedAreaPixels(croppedAreaPixels);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!imageSrc || !croppedAreaPixels) return;
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels);
|
||||
if (croppedImage) {
|
||||
onCropComplete(croppedImage);
|
||||
onClose();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Crop Image</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="relative w-full h-80 bg-black/5 rounded-md overflow-hidden mt-4">
|
||||
{imageSrc && (
|
||||
<Cropper
|
||||
image={imageSrc}
|
||||
crop={crop}
|
||||
zoom={zoom}
|
||||
aspect={1}
|
||||
onCropChange={onCropChange}
|
||||
onCropComplete={onCropCompleteHandler}
|
||||
onZoomChange={onZoomChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="py-4 space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Zoom</span>
|
||||
<span className="text-muted-foreground">{zoom.toFixed(1)}x</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[zoom]}
|
||||
min={1}
|
||||
max={3}
|
||||
step={0.1}
|
||||
onValueChange={(value) => onZoomChange(value[0] ?? 1)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Crop & Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default ImageCropper;
|
||||
@@ -1,259 +0,0 @@
|
||||
/**
|
||||
* ImageUploader Component
|
||||
* Drag-and-drop image upload zone with preview.
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Upload, X, Image as ImageIcon, Loader2, AlertCircle } from "lucide-react";
|
||||
import { ImageCropper } from "@/components/image-cropper";
|
||||
|
||||
interface ImageUploaderProps {
|
||||
existingUrl?: string | null;
|
||||
onFileSelect: (file: File | null) => void;
|
||||
disabled?: boolean;
|
||||
maxSizeMB?: number;
|
||||
}
|
||||
|
||||
const ACCEPTED_TYPES = ["image/png", "image/jpeg", "image/webp", "image/gif"];
|
||||
const MAX_SIZE_DEFAULT = 15; // 15MB
|
||||
|
||||
export function ImageUploader({
|
||||
existingUrl,
|
||||
onFileSelect,
|
||||
disabled,
|
||||
maxSizeMB = MAX_SIZE_DEFAULT,
|
||||
}: ImageUploaderProps) {
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(existingUrl || null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Cropper state
|
||||
const [isCropperOpen, setIsCropperOpen] = useState(false);
|
||||
const [tempImageSrc, setTempImageSrc] = useState<string | null>(null);
|
||||
const [tempFileName, setTempFileName] = useState<string>("image.jpg");
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const validateFile = useCallback((file: File): string | null => {
|
||||
if (!ACCEPTED_TYPES.includes(file.type)) {
|
||||
return "Invalid file type. Please use PNG, JPEG, WebP, or GIF.";
|
||||
}
|
||||
if (file.size > maxSizeMB * 1024 * 1024) {
|
||||
return `File too large. Maximum size is ${maxSizeMB}MB.`;
|
||||
}
|
||||
return null;
|
||||
}, [maxSizeMB]);
|
||||
|
||||
const handleFile = useCallback((file: File) => {
|
||||
setError(null);
|
||||
const validationError = validateFile(file);
|
||||
|
||||
if (validationError) {
|
||||
setError(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setTempFileName(file.name);
|
||||
|
||||
// Read file for cropper
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setTempImageSrc(reader.result as string);
|
||||
setIsCropperOpen(true);
|
||||
setIsLoading(false);
|
||||
};
|
||||
reader.onerror = () => {
|
||||
setError("Failed to read file");
|
||||
setIsLoading(false);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}, [validateFile]);
|
||||
|
||||
const handleCropComplete = useCallback((croppedBlob: Blob) => {
|
||||
// Convert blob back to file
|
||||
const file = new File([croppedBlob], tempFileName, { type: "image/jpeg" });
|
||||
|
||||
// Create preview
|
||||
const url = URL.createObjectURL(croppedBlob);
|
||||
setPreviewUrl(url);
|
||||
|
||||
// Pass to parent
|
||||
onFileSelect(file);
|
||||
setIsCropperOpen(false);
|
||||
setTempImageSrc(null);
|
||||
}, [onFileSelect, tempFileName]);
|
||||
|
||||
const handleDragEnter = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!disabled) {
|
||||
setIsDragging(true);
|
||||
}
|
||||
}, [disabled]);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
if (disabled) return;
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
const file = files[0];
|
||||
if (file) {
|
||||
handleFile(file);
|
||||
}
|
||||
}, [disabled, handleFile]);
|
||||
|
||||
const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
const file = files?.[0];
|
||||
if (file) {
|
||||
handleFile(file);
|
||||
}
|
||||
}, [handleFile]);
|
||||
|
||||
const handleRemove = useCallback(() => {
|
||||
setPreviewUrl(null);
|
||||
setError(null);
|
||||
onFileSelect(null);
|
||||
if (inputRef.current) {
|
||||
inputRef.current.value = "";
|
||||
}
|
||||
}, [onFileSelect]);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (!disabled) {
|
||||
inputRef.current?.click();
|
||||
}
|
||||
}, [disabled]);
|
||||
|
||||
// Show preview state
|
||||
if (previewUrl) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="relative aspect-square max-w-[200px] rounded-lg overflow-hidden border border-border/50 bg-muted/30">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Item preview"
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
{!disabled && (
|
||||
<div className="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={handleClick}
|
||||
>
|
||||
Replace
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleRemove}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept={ACCEPTED_TYPES.join(",")}
|
||||
onChange={handleInputChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Show upload zone
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div
|
||||
onClick={handleClick}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={handleDrop}
|
||||
className={cn(
|
||||
"relative flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-lg transition-colors cursor-pointer",
|
||||
isDragging && "border-primary bg-primary/5",
|
||||
error && "border-destructive bg-destructive/5",
|
||||
!isDragging && !error && "border-border/50 hover:border-border bg-muted/10",
|
||||
disabled && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="h-8 w-8 text-muted-foreground animate-spin" />
|
||||
) : error ? (
|
||||
<AlertCircle className="h-8 w-8 text-destructive" />
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
{isDragging ? (
|
||||
<Upload className="h-8 w-8 text-primary animate-bounce" />
|
||||
) : (
|
||||
<ImageIcon className="h-8 w-8 text-muted-foreground" />
|
||||
)}
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{isDragging ? (
|
||||
<p className="text-primary font-medium">Drop to upload</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="font-medium">Drop image or click to browse</p>
|
||||
<p className="text-xs mt-1">
|
||||
PNG, JPEG, WebP, GIF • Max {maxSizeMB}MB
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept={ACCEPTED_TYPES.join(",")}
|
||||
onChange={handleInputChange}
|
||||
className="hidden"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<ImageCropper
|
||||
isOpen={isCropperOpen}
|
||||
onClose={() => setIsCropperOpen(false)}
|
||||
onCropComplete={handleCropComplete}
|
||||
imageSrc={tempImageSrc}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ImageUploader;
|
||||
@@ -1,30 +0,0 @@
|
||||
import React, { type ReactNode } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
interface InfoCardProps {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
iconWrapperClassName?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InfoCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
iconWrapperClassName,
|
||||
className,
|
||||
}: InfoCardProps) {
|
||||
return (
|
||||
<div className={cn("space-y-4 p-6 glass-card rounded-2xl hover:bg-white/5 transition-colors", className)}>
|
||||
<div className={cn("w-12 h-12 rounded-xl flex items-center justify-center mb-4", iconWrapperClassName)}>
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-primary">{title}</h3>
|
||||
<p className="text-muted-foreground text-step--1">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
/**
|
||||
* ItemFormSheet Component
|
||||
* Sheet/Drawer wrapper for ItemForm, used for create/edit from the list view.
|
||||
*/
|
||||
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet";
|
||||
import { ItemForm } from "@/components/item-form";
|
||||
import type { ItemWithUsage } from "@/hooks/use-items";
|
||||
import { Package, Pencil } from "lucide-react";
|
||||
|
||||
interface ItemFormSheetProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
item: ItemWithUsage | null;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
export function ItemFormSheet({ open, onOpenChange, item, onSaved }: ItemFormSheetProps) {
|
||||
const isEditMode = item !== null;
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent
|
||||
className="w-full sm:max-w-xl overflow-y-auto p-0"
|
||||
side="right"
|
||||
>
|
||||
{/* Primary accent bar */}
|
||||
<div className="h-1.5 bg-primary w-full" />
|
||||
|
||||
<div className="p-6">
|
||||
<SheetHeader className="mb-8">
|
||||
<SheetTitle className="text-2xl font-bold text-primary flex items-center gap-3">
|
||||
{isEditMode ? (
|
||||
<>
|
||||
<Pencil className="h-5 w-5" />
|
||||
Edit Item
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Package className="h-5 w-5" />
|
||||
Create Item
|
||||
</>
|
||||
)}
|
||||
</SheetTitle>
|
||||
<SheetDescription className="text-muted-foreground">
|
||||
{isEditMode
|
||||
? `Update the details for "${item.name}" below.`
|
||||
: "Configure a new item for the Aurora RPG."
|
||||
}
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<ItemForm
|
||||
initialData={item}
|
||||
onSuccess={onSaved}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
/>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemFormSheet;
|
||||
@@ -1,380 +0,0 @@
|
||||
/**
|
||||
* ItemForm Component
|
||||
* Main form for creating and editing items with all fields and effects.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ImageUploader } from "@/components/image-uploader";
|
||||
import { EffectEditor } from "@/components/effect-editor";
|
||||
import { useCreateItem, useUpdateItem, useUploadItemIcon, type ItemWithUsage, type CreateItemData } from "@/hooks/use-items";
|
||||
import { Loader2, Coins, FileText, Image, Zap } from "lucide-react";
|
||||
|
||||
// Form schema
|
||||
const itemFormSchema = z.object({
|
||||
name: z.string().min(1, "Name is required").max(255, "Name is too long"),
|
||||
description: z.string().optional().nullable(),
|
||||
rarity: z.enum(["C", "R", "SR", "SSR"]),
|
||||
type: z.enum(["MATERIAL", "CONSUMABLE", "EQUIPMENT", "QUEST"]),
|
||||
price: z.string().optional().nullable(),
|
||||
consume: z.boolean(),
|
||||
effects: z.array(z.any()).default([]),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof itemFormSchema>;
|
||||
|
||||
interface ItemFormProps {
|
||||
initialData?: ItemWithUsage | null;
|
||||
onSuccess: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const ITEM_TYPES = [
|
||||
{ value: "MATERIAL", label: "Material", description: "Raw materials and crafting components" },
|
||||
{ value: "CONSUMABLE", label: "Consumable", description: "Items that can be used and consumed" },
|
||||
{ value: "EQUIPMENT", label: "Equipment", description: "Equippable items with passive effects" },
|
||||
{ value: "QUEST", label: "Quest", description: "Quest-related items" },
|
||||
];
|
||||
|
||||
const RARITIES = [
|
||||
{ value: "C", label: "C" },
|
||||
{ value: "R", label: "R" },
|
||||
{ value: "SR", label: "SR" },
|
||||
{ value: "SSR", label: "SSR" },
|
||||
];
|
||||
|
||||
export function ItemForm({ initialData, onSuccess, onCancel }: ItemFormProps) {
|
||||
const isEditMode = !!initialData;
|
||||
const { createItem, loading: createLoading } = useCreateItem();
|
||||
const { updateItem, loading: updateLoading } = useUpdateItem();
|
||||
const { uploadIcon, loading: uploadIconLoading } = useUploadItemIcon();
|
||||
const [imageFile, setImageFile] = useState<File | null>(null);
|
||||
const [existingImageUrl, setExistingImageUrl] = useState<string | null>(null);
|
||||
|
||||
const form = useForm({
|
||||
resolver: zodResolver(itemFormSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
description: "",
|
||||
rarity: "C" as const,
|
||||
type: "MATERIAL" as const,
|
||||
price: "",
|
||||
consume: false,
|
||||
effects: [] as unknown[],
|
||||
},
|
||||
});
|
||||
|
||||
// Populate form when editing
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
form.reset({
|
||||
name: initialData.name,
|
||||
description: initialData.description || "",
|
||||
rarity: (initialData.rarity as FormValues["rarity"]) || "C",
|
||||
type: (initialData.type as FormValues["type"]) || "MATERIAL",
|
||||
price: initialData.price ? String(initialData.price) : "",
|
||||
consume: initialData.usageData?.consume ?? false,
|
||||
effects: initialData.usageData?.effects ?? [],
|
||||
});
|
||||
|
||||
// Set existing image URL for preview
|
||||
if (initialData.iconUrl && !initialData.iconUrl.includes("placeholder")) {
|
||||
setExistingImageUrl(initialData.iconUrl);
|
||||
}
|
||||
}
|
||||
}, [initialData, form]);
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
const itemData: CreateItemData = {
|
||||
name: values.name,
|
||||
description: values.description || null,
|
||||
rarity: values.rarity,
|
||||
type: values.type,
|
||||
price: values.price || null,
|
||||
usageData: {
|
||||
consume: values.consume,
|
||||
effects: values.effects,
|
||||
},
|
||||
};
|
||||
|
||||
if (isEditMode && initialData) {
|
||||
const result = await updateItem(initialData.id, itemData);
|
||||
|
||||
// If update was successful and we have a new image, upload it
|
||||
if (result) {
|
||||
if (imageFile) {
|
||||
await uploadIcon(initialData.id, imageFile);
|
||||
}
|
||||
onSuccess();
|
||||
}
|
||||
} else {
|
||||
const result = await createItem(itemData, imageFile || undefined);
|
||||
if (result) {
|
||||
onSuccess();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const isLoading = createLoading || updateLoading || uploadIconLoading;
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Basic Info Section */}
|
||||
<Card className="glass-card overflow-hidden">
|
||||
<CardHeader className="pb-4 border-b border-border/30">
|
||||
<CardTitle className="text-base font-medium flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 text-primary" />
|
||||
Basic Info
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5 pt-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name *</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Health Potion"
|
||||
{...field}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="A mystical potion that restores vitality..."
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
className="bg-background/50 min-h-[80px]"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Type *</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{ITEM_TYPES.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rarity"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Rarity</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select rarity" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{RARITIES.map((rarity) => (
|
||||
<SelectItem key={rarity.value} value={rarity.value}>
|
||||
{rarity.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Economy Section */}
|
||||
<Card className="glass-card overflow-hidden">
|
||||
<CardHeader className="pb-4 border-b border-border/30">
|
||||
<CardTitle className="text-base font-medium flex items-center gap-2">
|
||||
<Coins className="h-4 w-4 text-amber-400" />
|
||||
Economy
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="price"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Shop Price</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="0"
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
className="bg-background/50 pr-10"
|
||||
/>
|
||||
<Coins className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-amber-400" />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Leave empty if item cannot be purchased in shops
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Visuals Section */}
|
||||
<Card className="glass-card overflow-hidden">
|
||||
<CardHeader className="pb-4 border-b border-border/30">
|
||||
<CardTitle className="text-base font-medium flex items-center gap-2">
|
||||
<Image className="h-4 w-4 text-purple-400" />
|
||||
Visuals
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-5">
|
||||
<ImageUploader
|
||||
existingUrl={existingImageUrl}
|
||||
onFileSelect={setImageFile}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Usage Section */}
|
||||
<Card className="glass-card overflow-hidden">
|
||||
<CardHeader className="pb-4 border-b border-border/30">
|
||||
<CardTitle className="text-base font-medium flex items-center gap-2">
|
||||
<Zap className="h-4 w-4 text-green-400" />
|
||||
Usage
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5 pt-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="consume"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center justify-between rounded-lg border border-border/50 p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-base">Consume on Use</FormLabel>
|
||||
<FormDescription>
|
||||
Remove one from inventory when used
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="effects"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Effects</FormLabel>
|
||||
<FormDescription className="mb-3">
|
||||
Add effects that trigger when the item is used
|
||||
</FormDescription>
|
||||
<FormControl>
|
||||
<EffectEditor
|
||||
effects={field.value ?? []}
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-4 pt-6">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
className="flex-1 py-6 text-base font-semibold"
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className="flex-1 bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-base font-semibold"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{isEditMode ? "Update Item" : "Create Item"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemForm;
|
||||
@@ -1,139 +0,0 @@
|
||||
/**
|
||||
* ItemsFilter Component
|
||||
* Filter bar for the items list with search, type, and rarity filters.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Search, X, Filter, Package, Zap, Hammer, Scroll, Gem } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ItemFilters } from "@/hooks/use-items";
|
||||
|
||||
interface ItemsFilterProps {
|
||||
filters: ItemFilters;
|
||||
onFilterChange: (filters: Partial<ItemFilters>) => void;
|
||||
onClearFilters: () => void;
|
||||
}
|
||||
|
||||
const ITEM_TYPES = [
|
||||
{ value: "MATERIAL", label: "Material", icon: Package },
|
||||
{ value: "CONSUMABLE", label: "Consumable", icon: Zap },
|
||||
{ value: "EQUIPMENT", label: "Equipment", icon: Hammer },
|
||||
{ value: "QUEST", label: "Quest", icon: Scroll },
|
||||
];
|
||||
|
||||
const RARITIES = [
|
||||
{ value: "C", label: "C", color: "text-zinc-400" },
|
||||
{ value: "R", label: "R", color: "text-blue-400" },
|
||||
{ value: "SR", label: "SR", color: "text-purple-400" },
|
||||
{ value: "SSR", label: "SSR", color: "text-amber-400" },
|
||||
];
|
||||
|
||||
export function ItemsFilter({ filters, onFilterChange, onClearFilters }: ItemsFilterProps) {
|
||||
const [searchValue, setSearchValue] = useState(filters.search || "");
|
||||
|
||||
// Debounced search
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
if (searchValue !== filters.search) {
|
||||
onFilterChange({ search: searchValue || undefined });
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [searchValue, filters.search, onFilterChange]);
|
||||
|
||||
const handleTypeChange = useCallback((value: string) => {
|
||||
onFilterChange({ type: value === "__all__" ? undefined : value });
|
||||
}, [onFilterChange]);
|
||||
|
||||
const handleRarityChange = useCallback((value: string) => {
|
||||
onFilterChange({ rarity: value === "__all__" ? undefined : value });
|
||||
}, [onFilterChange]);
|
||||
|
||||
const hasActiveFilters = !!(filters.search || filters.type || filters.rarity);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
|
||||
{/* Search Input */}
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search items..."
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
className="pl-9 bg-card/50 border-border/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type Filter */}
|
||||
<Select
|
||||
value={filters.type || "__all__"}
|
||||
onValueChange={handleTypeChange}
|
||||
>
|
||||
<SelectTrigger className="w-full sm:w-40 bg-card/50 border-border/50">
|
||||
<Filter className="h-4 w-4 mr-2 text-muted-foreground" />
|
||||
<SelectValue placeholder="Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__all__">All Types</SelectItem>
|
||||
{ITEM_TYPES.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
<div className="flex items-center gap-2">
|
||||
<type.icon className="h-4 w-4 text-muted-foreground" />
|
||||
{type.label}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Rarity Filter */}
|
||||
<Select
|
||||
value={filters.rarity || "__all__"}
|
||||
onValueChange={handleRarityChange}
|
||||
>
|
||||
<SelectTrigger className="w-full sm:w-40 bg-card/50 border-border/50">
|
||||
<SelectValue placeholder="Rarity" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__all__">All Rarities</SelectItem>
|
||||
{RARITIES.map((rarity) => (
|
||||
<SelectItem key={rarity.value} value={rarity.value}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Gem className={cn("h-4 w-4", rarity.color)} />
|
||||
<span className={rarity.color}>{rarity.label}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Clear Button */}
|
||||
{hasActiveFilters && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSearchValue("");
|
||||
onClearFilters();
|
||||
}}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Clear
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemsFilter;
|
||||
@@ -1,342 +0,0 @@
|
||||
/**
|
||||
* ItemsTable Component
|
||||
* Data table displaying all items with key information and actions.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { RarityBadge } from "@/components/rarity-badge";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
MoreHorizontal,
|
||||
Pencil,
|
||||
Trash2,
|
||||
RefreshCw,
|
||||
Package,
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
Coins,
|
||||
} from "lucide-react";
|
||||
import type { ItemWithUsage } from "@/hooks/use-items";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ItemsTableProps {
|
||||
items: ItemWithUsage[];
|
||||
isLoading: boolean;
|
||||
isRefreshing?: boolean;
|
||||
total: number;
|
||||
onRefresh: () => void;
|
||||
onEdit: (item: ItemWithUsage) => void;
|
||||
onDelete: (item: ItemWithUsage) => void;
|
||||
}
|
||||
|
||||
type SortField = 'name' | 'type' | 'rarity' | 'price';
|
||||
type SortDirection = 'asc' | 'desc';
|
||||
|
||||
const TYPE_LABELS: Record<string, string> = {
|
||||
MATERIAL: 'Material',
|
||||
CONSUMABLE: 'Consumable',
|
||||
EQUIPMENT: 'Equipment',
|
||||
QUEST: 'Quest',
|
||||
};
|
||||
|
||||
const TYPE_COLORS: Record<string, string> = {
|
||||
MATERIAL: 'text-zinc-400',
|
||||
CONSUMABLE: 'text-green-400',
|
||||
EQUIPMENT: 'text-blue-400',
|
||||
QUEST: 'text-yellow-400',
|
||||
};
|
||||
|
||||
export function ItemsTable({
|
||||
items,
|
||||
isLoading,
|
||||
isRefreshing,
|
||||
total,
|
||||
onRefresh,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: ItemsTableProps) {
|
||||
const [sortField, setSortField] = useState<SortField>('name');
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
|
||||
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const sortedItems = [...items].sort((a, b) => {
|
||||
const direction = sortDirection === 'asc' ? 1 : -1;
|
||||
|
||||
switch (sortField) {
|
||||
case 'name':
|
||||
return direction * a.name.localeCompare(b.name);
|
||||
case 'type':
|
||||
return direction * (a.type || '').localeCompare(b.type || '');
|
||||
case 'rarity': {
|
||||
const rarityOrder = ['C', 'R', 'SR', 'SSR'];
|
||||
const aIndex = rarityOrder.indexOf(a.rarity || 'C');
|
||||
const bIndex = rarityOrder.indexOf(b.rarity || 'C');
|
||||
return direction * (aIndex - bIndex);
|
||||
}
|
||||
case 'price': {
|
||||
const aPrice = a.price ?? 0n;
|
||||
const bPrice = b.price ?? 0n;
|
||||
if (aPrice < bPrice) return -direction;
|
||||
if (aPrice > bPrice) return direction;
|
||||
return 0;
|
||||
}
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
const SortIcon = ({ field }: { field: SortField }) => {
|
||||
if (sortField !== field) return null;
|
||||
return sortDirection === 'asc'
|
||||
? <ChevronUp className="h-4 w-4 ml-1" />
|
||||
: <ChevronDown className="h-4 w-4 ml-1" />;
|
||||
};
|
||||
|
||||
const handleDeleteClick = (item: ItemWithUsage) => {
|
||||
if (deleteConfirm === item.id) {
|
||||
onDelete(item);
|
||||
setDeleteConfirm(null);
|
||||
} else {
|
||||
setDeleteConfirm(item.id);
|
||||
// Auto-reset after 3 seconds
|
||||
setTimeout(() => setDeleteConfirm(null), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium flex items-center gap-2">
|
||||
<Package className="h-5 w-5" />
|
||||
Items
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton className="h-10 w-10 rounded-lg" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-3 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-6 w-16 rounded-full" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium flex items-center gap-2">
|
||||
<Package className="h-5 w-5" />
|
||||
Items
|
||||
</CardTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
>
|
||||
<RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Package className="h-12 w-12 text-muted-foreground/50 mb-4" />
|
||||
<p className="text-muted-foreground">No items found</p>
|
||||
<p className="text-sm text-muted-foreground/70">
|
||||
Create your first item to get started
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<CardTitle className="text-lg font-medium flex items-center gap-2">
|
||||
<Package className="h-5 w-5" />
|
||||
Items
|
||||
</CardTitle>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
({total} total)
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
>
|
||||
<RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Table Header */}
|
||||
<div className="hidden md:grid grid-cols-[48px_1fr_120px_100px_100px_48px] gap-4 px-4 py-2 text-sm font-medium text-muted-foreground border-b border-border/50">
|
||||
<div></div>
|
||||
<button
|
||||
onClick={() => handleSort('name')}
|
||||
className="flex items-center hover:text-foreground transition-colors text-left"
|
||||
>
|
||||
Name
|
||||
<SortIcon field="name" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSort('type')}
|
||||
className="flex items-center hover:text-foreground transition-colors"
|
||||
>
|
||||
Type
|
||||
<SortIcon field="type" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSort('rarity')}
|
||||
className="flex items-center hover:text-foreground transition-colors"
|
||||
>
|
||||
Rarity
|
||||
<SortIcon field="rarity" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSort('price')}
|
||||
className="flex items-center hover:text-foreground transition-colors"
|
||||
>
|
||||
Price
|
||||
<SortIcon field="price" />
|
||||
</button>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
{/* Table Body */}
|
||||
<div className="divide-y divide-border/30">
|
||||
{sortedItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
id={`item-row-${item.id}`}
|
||||
className="grid grid-cols-[48px_1fr_auto] md:grid-cols-[48px_1fr_120px_100px_100px_48px] gap-4 px-4 py-3 items-center hover:bg-muted/30 transition-colors group cursor-pointer"
|
||||
onClick={() => onEdit(item)}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="relative h-10 w-10 rounded-lg overflow-hidden bg-muted/50">
|
||||
{item.iconUrl && !item.iconUrl.includes('placeholder') ? (
|
||||
<img
|
||||
src={item.iconUrl}
|
||||
alt={item.name}
|
||||
className="h-full w-full object-cover"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src = '';
|
||||
(e.target as HTMLImageElement).classList.add('hidden');
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full flex items-center justify-center">
|
||||
<Package className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Name & Description */}
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium truncate">{item.name}</p>
|
||||
{item.description && (
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{item.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Type (hidden on mobile) */}
|
||||
<div className="hidden md:block">
|
||||
<span className={cn("text-sm", TYPE_COLORS[item.type || 'MATERIAL'])}>
|
||||
{TYPE_LABELS[item.type || 'MATERIAL']}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Rarity (hidden on mobile) */}
|
||||
<div className="hidden md:block">
|
||||
<RarityBadge rarity={item.rarity || 'C'} size="sm" />
|
||||
</div>
|
||||
|
||||
{/* Price (hidden on mobile) */}
|
||||
<div className="hidden md:block text-sm">
|
||||
{item.price ? (
|
||||
<span className="text-amber-400 flex items-center gap-1">
|
||||
{item.price.toLocaleString()}
|
||||
<Coins className="h-3.5 w-3.5" />
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile: badges */}
|
||||
<div className="flex md:hidden items-center gap-2">
|
||||
<RarityBadge rarity={item.rarity || 'C'} size="sm" />
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onEdit(item)}>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteClick(item)}
|
||||
className={cn(
|
||||
deleteConfirm === item.id
|
||||
? "bg-destructive text-destructive-foreground"
|
||||
: "text-destructive focus:text-destructive"
|
||||
)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
{deleteConfirm === item.id ? "Click to confirm" : "Delete"}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemsTable;
|
||||
@@ -1,220 +0,0 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import { ChevronRight } from "lucide-react"
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubItem,
|
||||
SidebarMenuSubButton,
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarGroupContent,
|
||||
SidebarRail,
|
||||
useSidebar,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { useNavigation, type NavItem } from "@/contexts/navigation-context"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { useSocket } from "@/hooks/use-socket"
|
||||
|
||||
function NavItemWithSubMenu({ item }: { item: NavItem }) {
|
||||
const { state } = useSidebar()
|
||||
const isCollapsed = state === "collapsed"
|
||||
|
||||
// When collapsed, show a dropdown menu on hover/click
|
||||
if (isCollapsed) {
|
||||
return (
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
tooltip={item.title}
|
||||
className={cn(
|
||||
"transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
|
||||
item.isActive
|
||||
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
side="right"
|
||||
align="start"
|
||||
sideOffset={8}
|
||||
className="min-w-[180px] bg-background/95 backdrop-blur-xl border-border/50"
|
||||
>
|
||||
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
{item.title}
|
||||
</div>
|
||||
{item.subItems?.map((subItem) => (
|
||||
<DropdownMenuItem key={subItem.title} asChild className="group/dropitem">
|
||||
<Link
|
||||
to={subItem.url}
|
||||
className={cn(
|
||||
"cursor-pointer py-4 min-h-10 flex items-center gap-2",
|
||||
subItem.isActive
|
||||
? "text-primary bg-primary/10"
|
||||
: "text-muted-foreground hover:text-inherit"
|
||||
)}
|
||||
>
|
||||
<subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/dropitem:text-inherit")} />
|
||||
{subItem.title}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
)
|
||||
}
|
||||
|
||||
// When expanded, show collapsible sub-menu
|
||||
return (
|
||||
<Collapsible defaultOpen={item.isActive} className="group/collapsible">
|
||||
<SidebarMenuItem className="flex flex-col">
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
tooltip={item.title}
|
||||
className={cn(
|
||||
"transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
|
||||
item.isActive
|
||||
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
||||
<span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>
|
||||
{item.title}
|
||||
</span>
|
||||
<ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
||||
<SidebarMenuSub>
|
||||
{item.subItems?.map((subItem) => (
|
||||
<SidebarMenuSubItem key={subItem.title}>
|
||||
<SidebarMenuSubButton
|
||||
asChild
|
||||
isActive={subItem.isActive}
|
||||
className={cn(
|
||||
"transition-all duration-200 py-4 min-h-10 group/subitem",
|
||||
subItem.isActive
|
||||
? "text-primary bg-primary/10"
|
||||
: "text-muted-foreground hover:text-inherit"
|
||||
)}
|
||||
>
|
||||
<Link to={subItem.url}>
|
||||
<subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/subitem:text-inherit")} />
|
||||
<span>{subItem.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
)
|
||||
}
|
||||
|
||||
function NavItemLink({ item }: { item: NavItem }) {
|
||||
return (
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={item.isActive}
|
||||
tooltip={item.title}
|
||||
className={cn(
|
||||
"transition-all duration-200 ease-in-out font-medium",
|
||||
item.isActive
|
||||
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
<Link to={item.url} className="flex items-center gap-3 py-4 min-h-10 group-data-[collapsible=icon]:justify-center">
|
||||
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
||||
<span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>{item.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
)
|
||||
}
|
||||
|
||||
export function AppSidebar() {
|
||||
const { navItems } = useNavigation()
|
||||
const { stats } = useSocket()
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon" className="border-r border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60">
|
||||
<SidebarHeader className="pb-4 pt-4">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" asChild className="hover:bg-primary/10 transition-colors">
|
||||
<Link to="/">
|
||||
{stats?.bot?.avatarUrl ? (
|
||||
<img
|
||||
src={stats.bot.avatarUrl}
|
||||
alt={stats.bot.name}
|
||||
className="size-10 rounded-full group-data-[collapsible=icon]:size-8 object-cover shadow-lg"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex aspect-square size-10 items-center justify-center rounded-full bg-aurora sun-flare shadow-lg group-data-[collapsible=icon]:size-8">
|
||||
<span className="sr-only">Aurora</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid flex-1 text-left text-sm leading-tight ml-2 group-data-[collapsible=icon]:hidden">
|
||||
<span className="truncate font-bold text-primary text-base">Aurora</span>
|
||||
<span className="truncate text-xs text-muted-foreground font-medium">
|
||||
{stats?.bot?.status || "Online"}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent className="px-2 group-data-[collapsible=icon]:px-0">
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel className="text-muted-foreground/70 uppercase tracking-wider text-xs font-bold mb-2 px-2 group-data-[collapsible=icon]:hidden">
|
||||
Menu
|
||||
</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu className="gap-2 group-data-[collapsible=icon]:items-center">
|
||||
{navItems.map((item) => (
|
||||
item.subItems ? (
|
||||
<NavItemWithSubMenu key={item.title} item={item} />
|
||||
) : (
|
||||
<NavItemLink key={item.title} item={item} />
|
||||
)
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
|
||||
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
|
||||
import { AppSidebar } from "./app-sidebar"
|
||||
import { MobileNav } from "@/components/navigation/mobile-nav"
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { useNavigation } from "@/contexts/navigation-context"
|
||||
|
||||
interface MainLayoutProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function MainLayout({ children }: MainLayoutProps) {
|
||||
const isMobile = useIsMobile()
|
||||
const { breadcrumbs, currentTitle } = useNavigation()
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
{/* Header with breadcrumbs */}
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 transition-all duration-300 ease-in-out">
|
||||
<div className="flex items-center gap-2 px-4 w-full">
|
||||
<SidebarTrigger className="-ml-1 text-muted-foreground hover:text-primary transition-colors" />
|
||||
<Separator orientation="vertical" className="mr-2 h-4 bg-border/50" />
|
||||
<nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm bg-muted/30 px-3 py-1.5 rounded-full border border-border/30">
|
||||
{breadcrumbs.length === 0 ? (
|
||||
<span className="text-sm font-medium text-primary px-1">{currentTitle}</span>
|
||||
) : (
|
||||
breadcrumbs.map((crumb, index) => (
|
||||
<span key={crumb.url} className="flex items-center gap-1">
|
||||
{index > 0 && (
|
||||
<span className="text-muted-foreground/50">/</span>
|
||||
)}
|
||||
{index === breadcrumbs.length - 1 ? (
|
||||
<span className="text-sm font-medium text-primary px-1">{crumb.title}</span>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground hover:text-foreground transition-colors px-1">{crumb.title}</span>
|
||||
)}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* Mobile bottom navigation */}
|
||||
{isMobile && <MobileNav />}
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
||||
import { Trophy, Coins, Award, Crown, Target } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Skeleton } from "./ui/skeleton";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
interface LocalUser {
|
||||
username: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
export interface LeaderboardData {
|
||||
topLevels: { username: string; level: number }[];
|
||||
topWealth: { username: string; balance: string }[];
|
||||
topNetWorth: { username: string; netWorth: string }[];
|
||||
}
|
||||
|
||||
interface LeaderboardCardProps {
|
||||
data?: LeaderboardData;
|
||||
isLoading?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function LeaderboardCard({ data, isLoading, className }: LeaderboardCardProps) {
|
||||
const [view, setView] = useState<"wealth" | "levels" | "networth">("wealth");
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card className={cn("glass-card border-none bg-card/40", className)}>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium">Top Players</CardTitle>
|
||||
<Trophy className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8 rounded-full" />
|
||||
<div className="space-y-1 flex-1">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-3 w-12" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-16" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const currentList = view === "wealth" ? data?.topWealth : view === "networth" ? data?.topNetWorth : data?.topLevels;
|
||||
|
||||
const getTitle = () => {
|
||||
switch (view) {
|
||||
case "wealth": return "Richest Users";
|
||||
case "networth": return "Highest Net Worth";
|
||||
case "levels": return "Top Levels";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={cn("glass-card border-none transition-all duration-300", className)}>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2 whitespace-nowrap">
|
||||
{getTitle()}
|
||||
</CardTitle>
|
||||
<div className="flex bg-muted/50 rounded-lg p-0.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn(
|
||||
"h-6 px-2 text-xs rounded-md transition-all",
|
||||
view === "wealth" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
onClick={() => setView("wealth")}
|
||||
>
|
||||
<Coins className="w-3 h-3 mr-1" />
|
||||
Wealth
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn(
|
||||
"h-6 px-2 text-xs rounded-md transition-all",
|
||||
view === "levels" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
onClick={() => setView("levels")}
|
||||
>
|
||||
<Award className="w-3 h-3 mr-1" />
|
||||
Levels
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn(
|
||||
"h-6 px-2 text-xs rounded-md transition-all",
|
||||
view === "networth" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
onClick={() => setView("networth")}
|
||||
>
|
||||
<Target className="w-3 h-3 mr-1" />
|
||||
Net Worth
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4 animate-in fade-in slide-up duration-300 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar" key={view}>
|
||||
{currentList?.map((user, index) => {
|
||||
const isTop = index === 0;
|
||||
const RankIcon = index === 0 ? Crown : index === 1 ? Trophy : Award;
|
||||
const rankColor = index === 0 ? "text-yellow-500" : index === 1 ? "text-slate-400" : "text-orange-500";
|
||||
const bgColor = index === 0 ? "bg-yellow-500/10 border-yellow-500/20" : index === 1 ? "bg-slate-400/10 border-slate-400/20" : "bg-orange-500/10 border-orange-500/20";
|
||||
|
||||
// Type guard or simple check because structure differs slightly or we can normalize
|
||||
let valueDisplay = "";
|
||||
if (view === "wealth") {
|
||||
valueDisplay = `${Number((user as any).balance).toLocaleString()} AU`;
|
||||
} else if (view === "networth") {
|
||||
valueDisplay = `${Number((user as any).netWorth).toLocaleString()} AU`;
|
||||
} else {
|
||||
valueDisplay = `Lvl ${(user as any).level}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={user.username} className={cn(
|
||||
"flex items-center gap-3 p-2 rounded-lg border transition-colors",
|
||||
"hover:bg-muted/50 border-transparent hover:border-border/50",
|
||||
isTop && "bg-primary/5 border-primary/10"
|
||||
)}>
|
||||
<div className={cn(
|
||||
"w-8 h-8 flex items-center justify-center rounded-full border text-xs font-bold",
|
||||
bgColor, rankColor
|
||||
)}>
|
||||
{index + 1}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate flex items-center gap-1.5">
|
||||
{user.username}
|
||||
{isTop && <Crown className="w-3 h-3 text-yellow-500 fill-yellow-500" />}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<span className={cn(
|
||||
"text-xs font-bold font-mono",
|
||||
view === "wealth" ? "text-emerald-500" : view === "networth" ? "text-purple-500" : "text-blue-500"
|
||||
)}>
|
||||
{valueDisplay}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{(!currentList || currentList.length === 0) && (
|
||||
<div className="text-center py-4 text-muted-foreground text-sm">
|
||||
No data available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card >
|
||||
);
|
||||
}
|
||||
@@ -1,281 +0,0 @@
|
||||
/**
|
||||
* LootTableBuilder Component
|
||||
* Visual editor for configuring lootbox drop pools with items and currencies.
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { Plus, Trash2, Package, Coins, Sparkles, GripVertical, Percent } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Loot drop types
|
||||
type LootType = "ITEM" | "CURRENCY" | "XP";
|
||||
|
||||
interface LootDrop {
|
||||
type: LootType;
|
||||
itemId?: number;
|
||||
itemName?: string;
|
||||
amount?: number;
|
||||
minAmount?: number;
|
||||
maxAmount?: number;
|
||||
weight: number;
|
||||
}
|
||||
|
||||
interface LootTableBuilderProps {
|
||||
pool: LootDrop[];
|
||||
onChange: (pool: LootDrop[]) => void;
|
||||
}
|
||||
|
||||
const LOOT_TYPES = [
|
||||
{ value: "ITEM" as LootType, label: "Item", icon: Package, color: "text-purple-400" },
|
||||
{ value: "CURRENCY" as LootType, label: "Currency", icon: Coins, color: "text-amber-400" },
|
||||
{ value: "XP" as LootType, label: "XP", icon: Sparkles, color: "text-blue-400" },
|
||||
];
|
||||
|
||||
const getDefaultDrop = (type: LootType): LootDrop => {
|
||||
switch (type) {
|
||||
case "ITEM":
|
||||
return { type: "ITEM", itemId: 0, itemName: "", weight: 10 };
|
||||
case "CURRENCY":
|
||||
return { type: "CURRENCY", minAmount: 100, maxAmount: 500, weight: 30 };
|
||||
case "XP":
|
||||
return { type: "XP", minAmount: 50, maxAmount: 200, weight: 20 };
|
||||
}
|
||||
};
|
||||
|
||||
export function LootTableBuilder({ pool, onChange }: LootTableBuilderProps) {
|
||||
// Calculate total weight for probability display
|
||||
const totalWeight = pool.reduce((sum, drop) => sum + drop.weight, 0);
|
||||
|
||||
const addDrop = useCallback(() => {
|
||||
onChange([...pool, getDefaultDrop("CURRENCY")]);
|
||||
}, [pool, onChange]);
|
||||
|
||||
const removeDrop = useCallback((index: number) => {
|
||||
onChange(pool.filter((_, i) => i !== index));
|
||||
}, [pool, onChange]);
|
||||
|
||||
const updateDrop = useCallback((index: number, updates: Partial<LootDrop>) => {
|
||||
onChange(pool.map((drop, i) => i === index ? { ...drop, ...updates } : drop));
|
||||
}, [pool, onChange]);
|
||||
|
||||
const changeDropType = useCallback((index: number, newType: LootType) => {
|
||||
onChange(pool.map((drop, i) => i === index ? getDefaultDrop(newType) : drop));
|
||||
}, [pool, onChange]);
|
||||
|
||||
const getProbability = (weight: number): string => {
|
||||
if (totalWeight === 0) return "0%";
|
||||
return ((weight / totalWeight) * 100).toFixed(1) + "%";
|
||||
};
|
||||
|
||||
if (pool.length === 0) {
|
||||
return (
|
||||
<div className="border border-dashed border-border/50 rounded-lg p-6 text-center">
|
||||
<Package className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
No drops configured yet
|
||||
</p>
|
||||
<Button type="button" variant="outline" size="sm" onClick={addDrop}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Drop
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Probability Summary Bar */}
|
||||
{pool.length > 0 && (
|
||||
<div className="flex h-6 rounded-lg overflow-hidden">
|
||||
{pool.map((drop, index) => {
|
||||
const lootType = LOOT_TYPES.find(t => t.value === drop.type);
|
||||
const probability = totalWeight > 0 ? (drop.weight / totalWeight) * 100 : 0;
|
||||
|
||||
if (probability < 1) return null;
|
||||
|
||||
const colors: Record<LootType, string> = {
|
||||
ITEM: "bg-purple-500",
|
||||
CURRENCY: "bg-amber-500",
|
||||
XP: "bg-blue-500",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
"h-full transition-all duration-300 relative group cursor-pointer",
|
||||
colors[drop.type]
|
||||
)}
|
||||
style={{ width: `${probability}%` }}
|
||||
title={`${lootType?.label}: ${probability.toFixed(1)}%`}
|
||||
>
|
||||
{probability > 10 && (
|
||||
<span className="absolute inset-0 flex items-center justify-center text-xs font-medium text-white">
|
||||
{probability.toFixed(0)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Drop List */}
|
||||
<div className="space-y-2">
|
||||
{pool.map((drop, index) => {
|
||||
|
||||
|
||||
return (
|
||||
<Card key={index} className="bg-muted/20 border-border/30">
|
||||
<CardContent className="p-4 space-y-3">
|
||||
{/* Header Row */}
|
||||
<div className="flex items-center gap-3">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground/50 cursor-grab" />
|
||||
|
||||
{/* Type Selector */}
|
||||
<Select
|
||||
value={drop.type}
|
||||
onValueChange={(value) => changeDropType(index, value as LootType)}
|
||||
>
|
||||
<SelectTrigger className="w-32 bg-background/50">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{LOOT_TYPES.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
<div className="flex items-center gap-2">
|
||||
<type.icon className={cn("h-4 w-4", type.color)} />
|
||||
{type.label}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Probability Badge */}
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground ml-auto">
|
||||
<Percent className="h-3 w-3" />
|
||||
{getProbability(drop.weight)}
|
||||
</div>
|
||||
|
||||
{/* Delete Button */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeDrop(index)}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Type-Specific Fields */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{drop.type === "ITEM" && (
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Item ID</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={drop.itemId || ""}
|
||||
onChange={(e) => updateDrop(index, { itemId: parseInt(e.target.value) || 0 })}
|
||||
placeholder="Item ID"
|
||||
className="bg-background/50 h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Item Name (Optional)</Label>
|
||||
<Input
|
||||
value={drop.itemName || ""}
|
||||
onChange={(e) => updateDrop(index, { itemName: e.target.value })}
|
||||
placeholder="For reference only"
|
||||
className="bg-background/50 h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(drop.type === "CURRENCY" || drop.type === "XP") && (
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Min Amount</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={drop.minAmount ?? drop.amount ?? 0}
|
||||
onChange={(e) => {
|
||||
const min = parseInt(e.target.value) || 0;
|
||||
const currentMax = drop.maxAmount ?? drop.amount ?? min;
|
||||
updateDrop(index, {
|
||||
minAmount: min,
|
||||
maxAmount: Math.max(min, currentMax),
|
||||
amount: undefined // Clear amount
|
||||
});
|
||||
}}
|
||||
className="bg-background/50 h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Max Amount</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={drop.maxAmount ?? drop.amount ?? 0}
|
||||
onChange={(e) => {
|
||||
const max = parseInt(e.target.value) || 0;
|
||||
const currentMin = drop.minAmount ?? drop.amount ?? max;
|
||||
updateDrop(index, {
|
||||
minAmount: Math.min(currentMin, max),
|
||||
maxAmount: max,
|
||||
amount: undefined // Clear amount
|
||||
});
|
||||
}}
|
||||
className="bg-background/50 h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Weight Slider */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs">Weight</Label>
|
||||
<span className="text-xs text-muted-foreground">{drop.weight}</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[drop.weight]}
|
||||
onValueChange={(values) => updateDrop(index, { weight: values[0] ?? drop.weight })}
|
||||
min={1}
|
||||
max={100}
|
||||
step={1}
|
||||
className="py-1"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Add Button */}
|
||||
<Button type="button" variant="outline" size="sm" onClick={addDrop}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Drop
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LootTableBuilder;
|
||||
@@ -1,128 +0,0 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
||||
import { Progress } from "./ui/progress";
|
||||
import { Gift, Clock, Sparkles, Zap, Timer } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Skeleton } from "./ui/skeleton";
|
||||
|
||||
export interface LootdropData {
|
||||
rewardAmount: number;
|
||||
currency: string;
|
||||
createdAt: string;
|
||||
expiresAt: string | null;
|
||||
}
|
||||
|
||||
export interface LootdropState {
|
||||
monitoredChannels: number;
|
||||
hottestChannel: {
|
||||
id: string;
|
||||
messages: number;
|
||||
progress: number;
|
||||
cooldown: boolean;
|
||||
} | null;
|
||||
config: {
|
||||
requiredMessages: number;
|
||||
dropChance: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface LootdropCardProps {
|
||||
drop?: LootdropData | null;
|
||||
state?: LootdropState;
|
||||
isLoading?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function LootdropCard({ drop, state, isLoading, className }: LootdropCardProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card className={cn("glass-card border-none bg-card/40", className)}>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium">Lootdrop Status</CardTitle>
|
||||
<Gift className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-8 w-[120px]" />
|
||||
<Skeleton className="h-4 w-[80px]" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const isActive = !!drop;
|
||||
const progress = state?.hottestChannel?.progress || 0;
|
||||
const isCooldown = state?.hottestChannel?.cooldown || false;
|
||||
|
||||
return (
|
||||
<Card className={cn(
|
||||
"glass-card border-none transition-all duration-500 overflow-hidden relative",
|
||||
isActive ? "bg-primary/5 border-primary/20 hover-glow ring-1 ring-primary/20" : "bg-card/40",
|
||||
className
|
||||
)}>
|
||||
{/* Ambient Background Effect */}
|
||||
{isActive && (
|
||||
<div className="absolute -right-4 -top-4 w-24 h-24 bg-primary/20 blur-3xl rounded-full pointer-events-none animate-pulse" />
|
||||
)}
|
||||
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2 relative z-10">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
{isActive ? "Active Lootdrop" : "Lootdrop Potential"}
|
||||
{isActive && (
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
||||
</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
<Gift className={cn("h-4 w-4 transition-colors", isActive ? "text-primary " : "text-muted-foreground")} />
|
||||
</CardHeader>
|
||||
<CardContent className="relative z-10">
|
||||
{isActive ? (
|
||||
<div className="space-y-3 animate-in fade-in slide-up">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-2xl font-bold text-primary flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-yellow-500 fill-yellow-500 animate-pulse" />
|
||||
{drop.rewardAmount.toLocaleString()} {drop.currency}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>Dropped {new Date(drop.createdAt).toLocaleTimeString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{isCooldown ? (
|
||||
<div className="flex flex-col items-center justify-center py-2 text-muted-foreground space-y-1">
|
||||
<Timer className="w-6 h-6 text-yellow-500 opacity-80" />
|
||||
<p className="text-sm font-medium text-yellow-500/80">Cooling Down...</p>
|
||||
<p className="text-xs opacity-50">Channels are recovering.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Zap className={cn("w-3 h-3", progress > 80 ? "text-yellow-500" : "text-muted-foreground")} />
|
||||
<span>Next Drop Chance</span>
|
||||
</div>
|
||||
<span className="font-mono">{Math.round(progress)}%</span>
|
||||
</div>
|
||||
<Progress value={progress} className="h-1.5" indicatorClassName={cn(progress > 80 ? "bg-yellow-500" : "bg-primary")} />
|
||||
{state?.hottestChannel ? (
|
||||
<p className="text-[10px] text-muted-foreground text-right opacity-70">
|
||||
{state.hottestChannel.messages} / {state.config.requiredMessages} msgs
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-[10px] text-muted-foreground text-center opacity-50 pt-1">
|
||||
No recent activity
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import { useNavigation } from "@/contexts/navigation-context"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export function MobileNav() {
|
||||
const { navItems } = useNavigation()
|
||||
|
||||
return (
|
||||
<nav className="fixed bottom-4 left-4 right-4 z-50 rounded-2xl border border-border/40 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 md:hidden shadow-lg shadow-black/5">
|
||||
<div className="flex h-16 items-center justify-around px-2">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.title}
|
||||
to={item.url}
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-center gap-1 rounded-xl px-4 py-2 text-xs font-medium transition-all duration-200",
|
||||
"min-w-[48px] min-h-[48px]",
|
||||
item.isActive
|
||||
? "text-primary bg-primary/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]"
|
||||
: "text-muted-foreground/80 hover:text-foreground hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
<item.icon className={cn(
|
||||
"size-5 transition-transform duration-200",
|
||||
item.isActive && "scale-110 fill-primary/20"
|
||||
)} />
|
||||
<span className={cn(
|
||||
"truncate max-w-[60px] text-[10px]",
|
||||
item.isActive && "font-bold"
|
||||
)}>
|
||||
{item.title}
|
||||
</span>
|
||||
{item.isActive && (
|
||||
<span className="absolute bottom-1 h-0.5 w-4 rounded-full bg-primary/50 blur-[1px]" />
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -1,297 +0,0 @@
|
||||
import React from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/card";
|
||||
import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "./ui/form";
|
||||
import { Input } from "./ui/input";
|
||||
import { Button } from "./ui/button";
|
||||
import { Textarea } from "./ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { ScrollArea } from "./ui/scroll-area";
|
||||
import { Star, Coins } from "lucide-react";
|
||||
|
||||
interface QuestListItem {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
triggerEvent: string;
|
||||
requirements: { target?: number };
|
||||
rewards: { xp?: number; balance?: number };
|
||||
}
|
||||
|
||||
const questSchema = z.object({
|
||||
name: z.string().min(3, "Name must be at least 3 characters"),
|
||||
description: z.string().optional(),
|
||||
triggerEvent: z.string().min(1, "Trigger event is required"),
|
||||
target: z.number().min(1, "Target must be at least 1"),
|
||||
xpReward: z.number().min(0).optional(),
|
||||
balanceReward: z.number().min(0).optional(),
|
||||
});
|
||||
|
||||
type QuestFormValues = z.infer<typeof questSchema>;
|
||||
|
||||
interface QuestFormProps {
|
||||
initialData?: QuestListItem;
|
||||
onUpdate?: () => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
const TRIGGER_EVENTS = [
|
||||
{ label: "XP Gain", value: "XP_GAIN" },
|
||||
{ label: "Item Collect", value: "ITEM_COLLECT" },
|
||||
{ label: "Item Use", value: "ITEM_USE" },
|
||||
{ label: "Daily Reward", value: "DAILY_REWARD" },
|
||||
{ label: "Lootbox Currency Reward", value: "LOOTBOX" },
|
||||
{ label: "Exam Reward", value: "EXAM_REWARD" },
|
||||
{ label: "Purchase", value: "PURCHASE" },
|
||||
{ label: "Transfer In", value: "TRANSFER_IN" },
|
||||
{ label: "Transfer Out", value: "TRANSFER_OUT" },
|
||||
{ label: "Trade In", value: "TRADE_IN" },
|
||||
{ label: "Trade Out", value: "TRADE_OUT" },
|
||||
{ label: "Quest Reward", value: "QUEST_REWARD" },
|
||||
{ label: "Trivia Entry", value: "TRIVIA_ENTRY" },
|
||||
{ label: "Trivia Win", value: "TRIVIA_WIN" },
|
||||
];
|
||||
|
||||
export function QuestForm({ initialData, onUpdate, onCancel }: QuestFormProps) {
|
||||
const isEditMode = initialData !== undefined;
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
||||
const form = useForm<QuestFormValues>({
|
||||
resolver: zodResolver(questSchema),
|
||||
defaultValues: {
|
||||
name: initialData?.name || "",
|
||||
description: initialData?.description || "",
|
||||
triggerEvent: initialData?.triggerEvent || "XP_GAIN",
|
||||
target: (initialData?.requirements as { target?: number })?.target || 1,
|
||||
xpReward: (initialData?.rewards as { xp?: number })?.xp || 100,
|
||||
balanceReward: (initialData?.rewards as { balance?: number })?.balance || 500,
|
||||
},
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (initialData) {
|
||||
form.reset({
|
||||
name: initialData.name || "",
|
||||
description: initialData.description || "",
|
||||
triggerEvent: initialData.triggerEvent || "XP_GAIN",
|
||||
target: (initialData.requirements as { target?: number })?.target || 1,
|
||||
xpReward: (initialData.rewards as { xp?: number })?.xp || 100,
|
||||
balanceReward: (initialData.rewards as { balance?: number })?.balance || 500,
|
||||
});
|
||||
}
|
||||
}, [initialData, form]);
|
||||
|
||||
const onSubmit = async (data: QuestFormValues) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const url = isEditMode ? `/api/quests/${initialData.id}` : "/api/quests";
|
||||
const method = isEditMode ? "PUT" : "POST";
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: method,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || (isEditMode ? "Failed to update quest" : "Failed to create quest"));
|
||||
}
|
||||
|
||||
toast.success(isEditMode ? "Quest updated successfully!" : "Quest created successfully!", {
|
||||
description: `${data.name} has been ${isEditMode ? "updated" : "added to the database"}.`,
|
||||
});
|
||||
form.reset({
|
||||
name: "",
|
||||
description: "",
|
||||
triggerEvent: "XP_GAIN",
|
||||
target: 1,
|
||||
xpReward: 100,
|
||||
balanceReward: 500,
|
||||
});
|
||||
onUpdate?.();
|
||||
} catch (error) {
|
||||
console.error("Submission error:", error);
|
||||
toast.error(isEditMode ? "Failed to update quest" : "Failed to create quest", {
|
||||
description: error instanceof Error ? error.message : "An unknown error occurred",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="glass-card overflow-hidden">
|
||||
<div className="h-1.5 bg-primary w-full" />
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-bold text-primary">{isEditMode ? "Edit Quest" : "Create New Quest"}</CardTitle>
|
||||
<CardDescription>
|
||||
{isEditMode ? "Update the quest configuration." : "Configure a new quest for the Aurora RPG academy."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Quest Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Collector's Journey" {...field} className="bg-background/50" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="triggerEvent"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Trigger Event</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select an event" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent className="glass-card border-border/50">
|
||||
<ScrollArea className="h-48">
|
||||
{TRIGGER_EVENTS.map((event) => (
|
||||
<SelectItem key={event.value} value={event.value}>
|
||||
{event.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Assigns a task to the student..."
|
||||
{...field}
|
||||
className="min-h-[100px] bg-background/50"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="target"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Target Value</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={e => field.onChange(parseInt(e.target.value))}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="xpReward"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex items-center gap-2">
|
||||
<Star className="w-4 h-4 text-amber-400" />
|
||||
XP Reward
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={e => field.onChange(parseInt(e.target.value))}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="balanceReward"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex items-center gap-2">
|
||||
<Coins className="w-4 h-4 text-amber-500" />
|
||||
AU Reward
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={e => field.onChange(parseInt(e.target.value))}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isEditMode ? (
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-lg font-bold"
|
||||
>
|
||||
{isSubmitting ? "Updating..." : "Update Quest"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
className="flex-1 py-6 text-lg font-bold"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-lg font-bold"
|
||||
>
|
||||
{isSubmitting ? "Creating..." : "Create Quest"}
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,288 +0,0 @@
|
||||
import React from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Skeleton } from "./ui/skeleton";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
|
||||
import { cn } from "../lib/utils";
|
||||
import { FileText, RefreshCw, Trash2, Pencil, Star, Coins } from "lucide-react";
|
||||
|
||||
interface QuestListItem {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
triggerEvent: string;
|
||||
requirements: { target?: number };
|
||||
rewards: { xp?: number; balance?: number };
|
||||
}
|
||||
|
||||
interface QuestTableProps {
|
||||
quests: QuestListItem[];
|
||||
isInitialLoading: boolean;
|
||||
isRefreshing: boolean;
|
||||
onRefresh?: () => void;
|
||||
onDelete?: (id: number) => void;
|
||||
onEdit?: (id: number) => void;
|
||||
}
|
||||
|
||||
const TRIGGER_EVENT_LABELS: Record<string, string> = {
|
||||
XP_GAIN: "XP Gain",
|
||||
ITEM_COLLECT: "Item Collect",
|
||||
ITEM_USE: "Item Use",
|
||||
DAILY_REWARD: "Daily Reward",
|
||||
LOOTBOX: "Lootbox Currency Reward",
|
||||
EXAM_REWARD: "Exam Reward",
|
||||
PURCHASE: "Purchase",
|
||||
TRANSFER_IN: "Transfer In",
|
||||
TRANSFER_OUT: "Transfer Out",
|
||||
TRADE_IN: "Trade In",
|
||||
TRADE_OUT: "Trade Out",
|
||||
QUEST_REWARD: "Quest Reward",
|
||||
TRIVIA_ENTRY: "Trivia Entry",
|
||||
TRIVIA_WIN: "Trivia Win",
|
||||
};
|
||||
|
||||
function getTriggerEventLabel(triggerEvent: string): string {
|
||||
return TRIGGER_EVENT_LABELS[triggerEvent] || triggerEvent;
|
||||
}
|
||||
|
||||
function TruncatedText({ text, maxLength = 100 }: { text: string; maxLength?: number }) {
|
||||
if (!text || text.length <= maxLength) {
|
||||
return <span>{text || "-"}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="cursor-help border-b border-dashed border-muted-foreground/50">
|
||||
{text.slice(0, maxLength)}...
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-md">
|
||||
<p>{text}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function QuestTableSkeleton() {
|
||||
return (
|
||||
<div className="space-y-3 animate-pulse">
|
||||
<div className="grid grid-cols-8 gap-4 px-4 py-2 text-sm font-medium text-muted-foreground">
|
||||
<Skeleton className="h-4 w-8" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="grid grid-cols-8 gap-4 px-4 py-3 border-t border-border/50">
|
||||
<Skeleton className="h-5 w-8" />
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<Skeleton className="h-5 w-48" />
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-5 w-16" />
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-5 w-16" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyQuestState() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center animate-in fade-in duration-500">
|
||||
<div className="rounded-full bg-muted/50 p-4 mb-4">
|
||||
<FileText className="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">No quests available</h3>
|
||||
<p className="text-muted-foreground mt-1 max-w-sm">
|
||||
There are no quests in the database yet. Create your first quest using the form below.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function QuestTableContent({ quests, onDelete, onEdit }: { quests: QuestListItem[]; onDelete?: (id: number) => void; onEdit?: (id: number) => void }) {
|
||||
if (quests.length === 0) {
|
||||
return <EmptyQuestState />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border/50">
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-16">
|
||||
ID
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-40">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-64">
|
||||
Description
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-36">
|
||||
Trigger Event
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-20">
|
||||
Target
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-32">
|
||||
XP Reward
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-32">
|
||||
AU Reward
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-24">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{quests.map((quest) => {
|
||||
const requirements = quest.requirements as { target?: number };
|
||||
const rewards = quest.rewards as { xp?: number; balance?: number };
|
||||
const target = requirements?.target || 1;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={quest.id}
|
||||
id={`quest-row-${quest.id}`}
|
||||
className="border-b border-border/30 hover:bg-muted/20 transition-colors animate-in fade-in slide-in-from-left-2 duration-300"
|
||||
>
|
||||
<td className="py-3 px-4 text-sm text-muted-foreground font-mono">
|
||||
#{quest.id}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm font-medium text-foreground">
|
||||
{quest.name}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-muted-foreground">
|
||||
<TruncatedText text={quest.description || ""} maxLength={50} />
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant="outline" className="text-xs border-border/50">
|
||||
{getTriggerEventLabel(quest.triggerEvent)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-foreground font-mono">
|
||||
{target}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-foreground">
|
||||
{rewards?.xp ? (
|
||||
<span className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 text-amber-400" />
|
||||
<span className="font-mono">{rewards.xp}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-foreground">
|
||||
{rewards?.balance ? (
|
||||
<span className="flex items-center gap-1">
|
||||
<Coins className="w-4 h-4 text-amber-500" />
|
||||
<span className="font-mono">{rewards.balance}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => onEdit?.(quest.id)}
|
||||
className="p-1.5 rounded-md hover:bg-muted/50 transition-colors text-muted-foreground hover:text-foreground"
|
||||
title="Edit quest"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
toast("Delete this quest?", {
|
||||
description: "This action cannot be undone.",
|
||||
action: {
|
||||
label: "Delete",
|
||||
onClick: () => onDelete?.(quest.id)
|
||||
},
|
||||
cancel: {
|
||||
label: "Cancel",
|
||||
onClick: () => {}
|
||||
},
|
||||
style: {
|
||||
background: "var(--destructive)",
|
||||
color: "var(--destructive-foreground)"
|
||||
},
|
||||
actionButtonStyle: {
|
||||
background: "var(--destructive)",
|
||||
color: "var(--destructive-foreground)"
|
||||
}
|
||||
});
|
||||
}}
|
||||
className="p-1.5 rounded-md hover:bg-muted/50 transition-colors text-muted-foreground hover:text-destructive"
|
||||
title="Delete quest"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh, onDelete, onEdit }: QuestTableProps) {
|
||||
const showSkeleton = isInitialLoading && quests.length === 0;
|
||||
|
||||
return (
|
||||
<Card className="glass-card overflow-hidden">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-xl font-bold text-primary">Quest Inventory</CardTitle>
|
||||
<div className="flex items-center gap-3">
|
||||
{showSkeleton ? (
|
||||
<Badge variant="secondary" className="animate-pulse">
|
||||
Loading...
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="border-border/50">
|
||||
{quests.length} quest{quests.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
)}
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
className={cn(
|
||||
"p-2 rounded-md hover:bg-muted/50 transition-colors",
|
||||
isRefreshing && "cursor-wait"
|
||||
)}
|
||||
title="Refresh quests"
|
||||
>
|
||||
<RefreshCw className={cn(
|
||||
"w-[18px] h-[18px] text-muted-foreground transition-transform",
|
||||
isRefreshing && "animate-spin"
|
||||
)} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{showSkeleton ? (
|
||||
<QuestTableSkeleton />
|
||||
) : (
|
||||
<QuestTableContent quests={quests} onDelete={onDelete} onEdit={onEdit} />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
/**
|
||||
* RarityBadge Component
|
||||
* Displays item rarity with appropriate colors and optional glow effect.
|
||||
*/
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type Rarity = 'C' | 'R' | 'SR' | 'SSR';
|
||||
|
||||
interface RarityBadgeProps {
|
||||
rarity: Rarity | string;
|
||||
className?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}
|
||||
|
||||
const rarityStyles: Record<Rarity, { bg: string; text: string; glow?: string }> = {
|
||||
C: {
|
||||
bg: 'bg-zinc-600/30',
|
||||
text: 'text-zinc-300',
|
||||
},
|
||||
R: {
|
||||
bg: 'bg-blue-600/30',
|
||||
text: 'text-blue-400',
|
||||
},
|
||||
SR: {
|
||||
bg: 'bg-purple-600/30',
|
||||
text: 'text-purple-400',
|
||||
},
|
||||
SSR: {
|
||||
bg: 'bg-amber-600/30',
|
||||
text: 'text-amber-400',
|
||||
glow: 'shadow-[0_0_10px_rgba(251,191,36,0.4)]',
|
||||
},
|
||||
};
|
||||
|
||||
const sizeStyles = {
|
||||
sm: 'text-xs px-1.5 py-0.5',
|
||||
md: 'text-xs px-2 py-1',
|
||||
lg: 'text-sm px-2.5 py-1',
|
||||
};
|
||||
|
||||
export function RarityBadge({ rarity, className, size = 'md' }: RarityBadgeProps) {
|
||||
const validRarity = (rarity in rarityStyles ? rarity : 'C') as Rarity;
|
||||
const styles = rarityStyles[validRarity];
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center font-medium rounded-full',
|
||||
styles.bg,
|
||||
styles.text,
|
||||
styles.glow,
|
||||
sizeStyles[size],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{validRarity}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default RarityBadge;
|
||||
@@ -1,98 +0,0 @@
|
||||
import React from "react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Skeleton } from "./ui/skeleton";
|
||||
|
||||
function timeAgo(dateInput: Date | string) {
|
||||
const date = new Date(dateInput);
|
||||
const now = new Date();
|
||||
const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||||
|
||||
if (seconds < 60) return "just now";
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
interface RecentActivityProps {
|
||||
events: RecentEvent[];
|
||||
isLoading?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function RecentActivity({ events, isLoading, className }: RecentActivityProps) {
|
||||
return (
|
||||
<Card className={cn("glass-card border-none bg-card/40 h-full", className)}>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center justify-between text-lg font-medium">
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
Live Activity
|
||||
</span>
|
||||
{!isLoading && events.length > 0 && (
|
||||
<Badge variant="glass" className="text-[10px] font-mono">
|
||||
{events.length} EVENTS
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-4 pt-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton className="h-10 w-10 rounded-lg" />
|
||||
<div className="space-y-2 flex-1">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-3 w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : events.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground space-y-2">
|
||||
<div className="text-4xl">😴</div>
|
||||
<p>No recent activity</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 -mr-2 custom-scrollbar">
|
||||
{events.map((event, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="group flex items-start gap-3 p-3 rounded-xl bg-background/30 hover:bg-background/50 border border-transparent hover:border-border/50 transition-all duration-300"
|
||||
>
|
||||
<div className="text-2xl p-2 rounded-lg bg-background/50 group-hover:scale-110 transition-transform">
|
||||
{event.icon || "📝"}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 py-1">
|
||||
<p className="text-sm font-medium leading-none truncate mb-1.5 text-foreground/90">
|
||||
{event.message}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant={
|
||||
event.type === 'error' ? 'destructive' :
|
||||
event.type === 'warn' ? 'destructive' :
|
||||
event.type === 'success' ? 'aurora' : 'secondary'
|
||||
}
|
||||
className="text-[10px] h-4 px-1.5"
|
||||
>
|
||||
{event.type}
|
||||
</Badge>
|
||||
<span className="text-[10px] text-muted-foreground font-mono">
|
||||
{timeAgo(event.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
interface SectionHeaderProps {
|
||||
badge: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
align?: "center" | "left" | "right";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SectionHeader({
|
||||
badge,
|
||||
title,
|
||||
description,
|
||||
align = "center",
|
||||
className,
|
||||
}: SectionHeaderProps) {
|
||||
const alignClasses = {
|
||||
center: "text-center mx-auto",
|
||||
left: "text-left mr-auto", // reset margin if needed
|
||||
right: "text-right ml-auto",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-4 mb-16", alignClasses[align], className)}>
|
||||
<Badge variant="glass" className="py-1.5 px-4">{badge}</Badge>
|
||||
<h2 className="text-3xl md:text-4xl font-black text-primary tracking-tight">
|
||||
{title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import React, { type ReactNode } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
||||
import { Skeleton } from "./ui/skeleton";
|
||||
import { type LucideIcon, ChevronRight } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: ReactNode;
|
||||
subtitle?: ReactNode;
|
||||
icon: LucideIcon;
|
||||
isLoading?: boolean;
|
||||
className?: string;
|
||||
valueClassName?: string;
|
||||
iconClassName?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export function StatCard({
|
||||
title,
|
||||
value,
|
||||
subtitle,
|
||||
icon: Icon,
|
||||
isLoading = false,
|
||||
className,
|
||||
valueClassName,
|
||||
iconClassName,
|
||||
onClick,
|
||||
}: StatCardProps) {
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"glass-card border-none bg-card/40 hover-glow group transition-all duration-300",
|
||||
onClick && "cursor-pointer hover:bg-card/60 hover:scale-[1.02] active:scale-[0.98]",
|
||||
className
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative overflow-hidden">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
|
||||
{title}
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{onClick && (
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-primary opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 flex items-center gap-1">
|
||||
Manage <ChevronRight className="w-3 h-3" />
|
||||
</span>
|
||||
)}
|
||||
<div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center ring-1 ring-primary/20">
|
||||
<Icon className={cn(
|
||||
"h-4 w-4 transition-all duration-300 text-primary",
|
||||
onClick && "group-hover:scale-110",
|
||||
iconClassName
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-[60px]" />
|
||||
<Skeleton className="h-3 w-[100px]" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={cn("text-2xl font-bold", valueClassName)}>{value}</div>
|
||||
{subtitle && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card >
|
||||
);
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Card } from "./ui/card";
|
||||
|
||||
interface TestimonialCardProps {
|
||||
quote: string;
|
||||
author: string;
|
||||
role: string;
|
||||
avatarGradient: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function TestimonialCard({
|
||||
quote,
|
||||
author,
|
||||
role,
|
||||
avatarGradient,
|
||||
className,
|
||||
}: TestimonialCardProps) {
|
||||
return (
|
||||
<Card className={cn("glass-card border-none p-6 space-y-4", className)}>
|
||||
<div className="flex gap-1 text-yellow-500">
|
||||
{[1, 2, 3, 4, 5].map((_, i) => (
|
||||
<svg key={i} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" className="w-4 h-4">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-muted-foreground italic">
|
||||
"{quote}"
|
||||
</p>
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<div className={cn("w-10 h-10 rounded-full animate-gradient", avatarGradient)} />
|
||||
<div>
|
||||
<p className="font-bold text-sm text-primary">{author}</p>
|
||||
<p className="text-xs text-muted-foreground">{role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||
import { ChevronDownIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Accordion({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn("border-b last:border-b-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||
return (
|
||||
<AccordionPrimitive.Content
|
||||
data-slot="accordion-content"
|
||||
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
)
|
||||
}
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
@@ -1,37 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground hover:opacity-90 hover-scale shadow-sm",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:opacity-80 hover-scale",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 hover-scale",
|
||||
outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground transition-colors",
|
||||
aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm hover-scale",
|
||||
glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 backdrop-blur-md",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> { }
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -1,64 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90 hover-glow active-press shadow-md",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active-press shadow-sm",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active-press",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 active-press shadow-sm",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active-press",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90 hover-glow active-press",
|
||||
glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 hover-lift active-press",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -1,92 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"glass-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||
|
||||
function Collapsible({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
||||
}
|
||||
|
||||
function CollapsibleTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleTrigger
|
||||
data-slot="collapsible-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CollapsibleContent({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleContent
|
||||
data-slot="collapsible-content"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
@@ -1,122 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Dialog = DialogPrimitive.Root
|
||||
|
||||
const DialogTrigger = DialogPrimitive.Trigger
|
||||
|
||||
const DialogPortal = DialogPrimitive.Portal
|
||||
|
||||
const DialogClose = DialogPrimitive.Close
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
))
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
const DialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogHeader.displayName = "DialogHeader"
|
||||
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogFooter.displayName = "DialogFooter"
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
}
|
||||
@@ -1,255 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
import * as React from "react"
|
||||
import type * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import {
|
||||
Controller,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
useFormState,
|
||||
type ControllerProps,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
const Form = FormProvider
|
||||
|
||||
type FormFieldContextValue<
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
> = {
|
||||
name: TName
|
||||
}
|
||||
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||
{} as FormFieldContextValue
|
||||
)
|
||||
|
||||
const FormField = <
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
>({
|
||||
...props
|
||||
}: ControllerProps<TFieldValues, TName>) => {
|
||||
return (
|
||||
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||
<Controller {...props} />
|
||||
</FormFieldContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const useFormField = () => {
|
||||
const fieldContext = React.useContext(FormFieldContext)
|
||||
const itemContext = React.useContext(FormItemContext)
|
||||
const { getFieldState } = useFormContext()
|
||||
const formState = useFormState({ name: fieldContext.name })
|
||||
const fieldState = getFieldState(fieldContext.name, formState)
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>")
|
||||
}
|
||||
|
||||
const { id } = itemContext
|
||||
|
||||
return {
|
||||
id,
|
||||
name: fieldContext.name,
|
||||
formItemId: `${id}-form-item`,
|
||||
formDescriptionId: `${id}-form-item-description`,
|
||||
formMessageId: `${id}-form-item-message`,
|
||||
...fieldState,
|
||||
}
|
||||
}
|
||||
|
||||
type FormItemContextValue = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||
{} as FormItemContextValue
|
||||
)
|
||||
|
||||
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const id = React.useId()
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div
|
||||
data-slot="form-item"
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
</FormItemContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function FormLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
const { error, formItemId } = useFormField()
|
||||
|
||||
return (
|
||||
<Label
|
||||
data-slot="form-label"
|
||||
data-error={!!error}
|
||||
className={cn("data-[error=true]:text-destructive", className)}
|
||||
htmlFor={formItemId}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
||||
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
|
||||
|
||||
return (
|
||||
<Slot
|
||||
data-slot="form-control"
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-invalid={!!error}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { formDescriptionId } = useFormField()
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-description"
|
||||
id={formDescriptionId}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { error, formMessageId } = useFormField()
|
||||
const body = error ? String(error?.message ?? "") : props.children
|
||||
|
||||
if (!body) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-message"
|
||||
id={formMessageId}
|
||||
className={cn("text-destructive text-sm", className)}
|
||||
{...props}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
useFormField,
|
||||
Form,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
FormField,
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/20 border-input/50 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-foreground shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm",
|
||||
"focus-visible:border-primary/50 focus-visible:bg-input/40 focus-visible:ring-2 focus-visible:ring-primary/20",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -1,22 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
@@ -1,24 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "../../lib/utils"
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & { value?: number | null, indicatorClassName?: string }
|
||||
>(({ className, value, indicatorClassName, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative h-4 w-full overflow-hidden rounded-full bg-secondary/20",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
Progress.displayName = "Progress"
|
||||
|
||||
export { Progress }
|
||||
@@ -1,58 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="bg-border relative flex-1 rounded-full"
|
||||
/>
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
@@ -1,188 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "item-aligned",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
data-slot="select-item-indicator"
|
||||
className="absolute right-2 flex size-3.5 items-center justify-center"
|
||||
>
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
@@ -1,139 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||
return (
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
side === "right" &&
|
||||
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||
side === "left" &&
|
||||
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
||||
side === "top" &&
|
||||
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
||||
side === "bottom" &&
|
||||
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||
<XIcon className="size-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn("text-foreground font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
@@ -1,725 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { PanelLeftIcon } from "lucide-react"
|
||||
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||
const SIDEBAR_WIDTH = "16rem"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "64px"
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
|
||||
type SidebarContextProps = {
|
||||
state: "expanded" | "collapsed"
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
openMobile: boolean
|
||||
setOpenMobile: (open: boolean) => void
|
||||
isMobile: boolean
|
||||
toggleSidebar: () => void
|
||||
}
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
|
||||
|
||||
function useSidebar() {
|
||||
const context = React.useContext(SidebarContext)
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider.")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function SidebarProvider({
|
||||
defaultOpen = true,
|
||||
open: openProp,
|
||||
onOpenChange: setOpenProp,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
defaultOpen?: boolean
|
||||
open?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}) {
|
||||
const isMobile = useIsMobile()
|
||||
const [openMobile, setOpenMobile] = React.useState(false)
|
||||
|
||||
// This is the internal state of the sidebar.
|
||||
// We use openProp and setOpenProp for control from outside the component.
|
||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
||||
const open = openProp ?? _open
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
const openState = typeof value === "function" ? value(open) : value
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState)
|
||||
} else {
|
||||
_setOpen(openState)
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
||||
},
|
||||
[setOpenProp, open]
|
||||
)
|
||||
|
||||
// Helper to toggle the sidebar.
|
||||
const toggleSidebar = React.useCallback(() => {
|
||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
|
||||
}, [isMobile, setOpen, setOpenMobile])
|
||||
|
||||
// Adds a keyboard shortcut to toggle the sidebar.
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||
(event.metaKey || event.ctrlKey)
|
||||
) {
|
||||
event.preventDefault()
|
||||
toggleSidebar()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||
}, [toggleSidebar])
|
||||
|
||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = open ? "expanded" : "collapsed"
|
||||
|
||||
const contextValue = React.useMemo<SidebarContextProps>(
|
||||
() => ({
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
}),
|
||||
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
||||
)
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div
|
||||
data-slot="sidebar-wrapper"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH,
|
||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||
...style,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</SidebarContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function Sidebar({
|
||||
side = "left",
|
||||
variant = "sidebar",
|
||||
collapsible = "offcanvas",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
side?: "left" | "right"
|
||||
variant?: "sidebar" | "floating" | "inset"
|
||||
collapsible?: "offcanvas" | "icon" | "none"
|
||||
}) {
|
||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
||||
|
||||
if (collapsible === "none") {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar"
|
||||
className={cn(
|
||||
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<SheetContent
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar"
|
||||
data-mobile="true"
|
||||
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
side={side}
|
||||
>
|
||||
<SheetHeader className="sr-only">
|
||||
<SheetTitle>Sidebar</SheetTitle>
|
||||
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="flex h-full w-full flex-col">{children}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group peer text-sidebar-foreground hidden md:block"
|
||||
data-state={state}
|
||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||
data-variant={variant}
|
||||
data-side={side}
|
||||
data-slot="sidebar"
|
||||
>
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
data-slot="sidebar-gap"
|
||||
className={cn(
|
||||
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
data-slot="sidebar-container"
|
||||
className={cn(
|
||||
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
||||
side === "left"
|
||||
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||
// Adjust the padding for floating and inset variants.
|
||||
variant === "floating" || variant === "inset"
|
||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar-inner"
|
||||
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarTrigger({
|
||||
className,
|
||||
onClick,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-sidebar="trigger"
|
||||
data-slot="sidebar-trigger"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn("size-7", className)}
|
||||
onClick={(event) => {
|
||||
onClick?.(event)
|
||||
toggleSidebar()
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<PanelLeftIcon />
|
||||
<span className="sr-only">Toggle Sidebar</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<button
|
||||
data-sidebar="rail"
|
||||
data-slot="sidebar-rail"
|
||||
aria-label="Toggle Sidebar"
|
||||
tabIndex={-1}
|
||||
onClick={toggleSidebar}
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||
return (
|
||||
<main
|
||||
data-slot="sidebar-inset"
|
||||
className={cn(
|
||||
"bg-aurora-page text-foreground font-outfit overflow-x-hidden relative flex w-full flex-1 flex-col",
|
||||
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Input>) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="sidebar-input"
|
||||
data-sidebar="input"
|
||||
className={cn("bg-background h-8 w-full shadow-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-header"
|
||||
data-sidebar="header"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-footer"
|
||||
data-sidebar="footer"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Separator>) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="sidebar-separator"
|
||||
data-sidebar="separator"
|
||||
className={cn("bg-sidebar-border mx-2 w-auto", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-content"
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group"
|
||||
data-sidebar="group"
|
||||
className={cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupLabel({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "div"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-group-label"
|
||||
data-sidebar="group-label"
|
||||
className={cn(
|
||||
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupAction({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-group-action"
|
||||
data-sidebar="group-action"
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 md:after:hidden",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group-content"
|
||||
data-sidebar="group-content"
|
||||
className={cn("w-full text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu"
|
||||
data-sidebar="menu"
|
||||
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-item"
|
||||
data-sidebar="menu-item"
|
||||
className={cn("group/menu-item relative flex group-data-[collapsible=icon]:justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const sidebarMenuButtonVariants = cva(
|
||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
outline:
|
||||
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 text-sm",
|
||||
sm: "h-7 text-xs",
|
||||
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function SidebarMenuButton({
|
||||
asChild = false,
|
||||
isActive = false,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
tooltip,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & {
|
||||
asChild?: boolean
|
||||
isActive?: boolean
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
||||
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const { isMobile, state } = useSidebar()
|
||||
|
||||
const button = (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-button"
|
||||
data-sidebar="menu-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
if (!tooltip) {
|
||||
return button
|
||||
}
|
||||
|
||||
if (typeof tooltip === "string") {
|
||||
tooltip = {
|
||||
children: tooltip,
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed" || isMobile}
|
||||
{...tooltip}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuAction({
|
||||
className,
|
||||
asChild = false,
|
||||
showOnHover = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & {
|
||||
asChild?: boolean
|
||||
showOnHover?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-action"
|
||||
data-sidebar="menu-action"
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 md:after:hidden",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
showOnHover &&
|
||||
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuBadge({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-badge"
|
||||
data-sidebar="menu-badge"
|
||||
className={cn(
|
||||
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
|
||||
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSkeleton({
|
||||
className,
|
||||
showIcon = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showIcon?: boolean
|
||||
}) {
|
||||
// Random width between 50 to 90%.
|
||||
const width = React.useMemo(() => {
|
||||
return `${Math.floor(Math.random() * 40) + 50}%`
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-skeleton"
|
||||
data-sidebar="menu-skeleton"
|
||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||
{...props}
|
||||
>
|
||||
{showIcon && (
|
||||
<Skeleton
|
||||
className="size-4 rounded-md"
|
||||
data-sidebar="menu-skeleton-icon"
|
||||
/>
|
||||
)}
|
||||
<Skeleton
|
||||
className="h-4 max-w-(--skeleton-width) flex-1"
|
||||
data-sidebar="menu-skeleton-text"
|
||||
style={
|
||||
{
|
||||
"--skeleton-width": width,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu-sub"
|
||||
data-sidebar="menu-sub"
|
||||
className={cn(
|
||||
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSubItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-sub-item"
|
||||
data-sidebar="menu-sub-item"
|
||||
className={cn("group/menu-sub-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSubButton({
|
||||
asChild = false,
|
||||
size = "md",
|
||||
isActive = false,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"a"> & {
|
||||
asChild?: boolean
|
||||
size?: "sm" | "md"
|
||||
isActive?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "a"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-sub-button"
|
||||
data-sidebar="menu-sub-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
size === "sm" && "text-xs",
|
||||
size === "md" && "text-sm",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInput,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSkeleton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
useSidebar,
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("bg-accent animate-pulse rounded-md", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
@@ -1,26 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Slider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
))
|
||||
Slider.displayName = SliderPrimitive.Root.displayName
|
||||
|
||||
export { Slider }
|
||||
@@ -1,38 +0,0 @@
|
||||
import {
|
||||
CircleCheckIcon,
|
||||
InfoIcon,
|
||||
Loader2Icon,
|
||||
OctagonXIcon,
|
||||
TriangleAlertIcon,
|
||||
} from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: <CircleCheckIcon className="size-4" />,
|
||||
info: <InfoIcon className="size-4" />,
|
||||
warning: <TriangleAlertIcon className="size-4" />,
|
||||
error: <OctagonXIcon className="size-4" />,
|
||||
loading: <Loader2Icon className="size-4 animate-spin" />,
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
@@ -1,29 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitive from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
|
||||
return (
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
className={cn(
|
||||
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className={cn(
|
||||
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Switch }
|
||||
@@ -1,64 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
@@ -1,18 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
@@ -1,59 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
@@ -1,147 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { useLocation, type Location } from "react-router-dom"
|
||||
import { Home, Palette, ShieldCheck, Settings, LayoutDashboard, Trophy, SlidersHorizontal, Coins, Cog, UserCog, Package, type LucideIcon } from "lucide-react"
|
||||
|
||||
export interface NavSubItem {
|
||||
title: string
|
||||
url: string
|
||||
icon: LucideIcon
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
export interface NavItem {
|
||||
title: string
|
||||
url: string
|
||||
icon: LucideIcon
|
||||
isActive?: boolean
|
||||
subItems?: NavSubItem[]
|
||||
}
|
||||
|
||||
export interface Breadcrumb {
|
||||
title: string
|
||||
url: string
|
||||
}
|
||||
|
||||
interface NavigationContextProps {
|
||||
navItems: NavItem[]
|
||||
breadcrumbs: Breadcrumb[]
|
||||
currentPath: string
|
||||
currentTitle: string
|
||||
}
|
||||
|
||||
const NavigationContext = React.createContext<NavigationContextProps | null>(null)
|
||||
|
||||
interface NavConfigItem extends Omit<NavItem, "isActive" | "subItems"> {
|
||||
subItems?: Omit<NavSubItem, "isActive">[]
|
||||
}
|
||||
|
||||
const NAV_CONFIG: NavConfigItem[] = [
|
||||
{ title: "Home", url: "/", icon: Home },
|
||||
|
||||
{ title: "Design System", url: "/design-system", icon: Palette },
|
||||
{
|
||||
title: "Admin",
|
||||
url: "/admin",
|
||||
icon: ShieldCheck,
|
||||
subItems: [
|
||||
{ title: "Overview", url: "/admin/overview", icon: LayoutDashboard },
|
||||
{ title: "Quests", url: "/admin/quests", icon: Trophy },
|
||||
{ title: "Items", url: "/admin/items", icon: Package },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
url: "/settings",
|
||||
icon: Settings,
|
||||
subItems: [
|
||||
{ title: "General", url: "/settings/general", icon: SlidersHorizontal },
|
||||
{ title: "Economy", url: "/settings/economy", icon: Coins },
|
||||
{ title: "Systems", url: "/settings/systems", icon: Cog },
|
||||
{ title: "Roles", url: "/settings/roles", icon: UserCog },
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
function generateBreadcrumbs(location: Location): Breadcrumb[] {
|
||||
const pathParts = location.pathname.split("/").filter(Boolean)
|
||||
const breadcrumbs: Breadcrumb[] = []
|
||||
|
||||
let currentPath = ""
|
||||
for (const part of pathParts) {
|
||||
currentPath += `/${part}`
|
||||
// Capitalize and clean up the part for display
|
||||
const title = part
|
||||
.split("-")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ")
|
||||
breadcrumbs.push({ title, url: currentPath })
|
||||
}
|
||||
|
||||
return breadcrumbs
|
||||
}
|
||||
|
||||
function getPageTitle(pathname: string): string {
|
||||
// Check top-level items first
|
||||
for (const item of NAV_CONFIG) {
|
||||
if (item.url === pathname) return item.title
|
||||
// Check sub-items
|
||||
if (item.subItems) {
|
||||
const subItem = item.subItems.find((sub) => sub.url === pathname)
|
||||
if (subItem) return subItem.title
|
||||
}
|
||||
}
|
||||
|
||||
// Handle nested routes
|
||||
const parts = pathname.split("/").filter(Boolean)
|
||||
const lastPart = parts[parts.length - 1]
|
||||
if (lastPart) {
|
||||
return lastPart
|
||||
.split("-")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ")
|
||||
}
|
||||
|
||||
return "Aurora"
|
||||
}
|
||||
|
||||
export function NavigationProvider({ children }: { children: React.ReactNode }) {
|
||||
const location = useLocation()
|
||||
|
||||
const value = React.useMemo<NavigationContextProps>(() => {
|
||||
const navItems = NAV_CONFIG.map((item) => {
|
||||
const isParentActive = item.subItems
|
||||
? location.pathname.startsWith(item.url)
|
||||
: location.pathname === item.url
|
||||
|
||||
return {
|
||||
...item,
|
||||
isActive: isParentActive,
|
||||
subItems: item.subItems?.map((subItem) => ({
|
||||
...subItem,
|
||||
isActive: location.pathname === subItem.url,
|
||||
})),
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
navItems,
|
||||
breadcrumbs: generateBreadcrumbs(location),
|
||||
currentPath: location.pathname,
|
||||
currentTitle: getPageTitle(location.pathname),
|
||||
}
|
||||
}, [location.pathname])
|
||||
|
||||
return (
|
||||
<NavigationContext.Provider value={value}>
|
||||
{children}
|
||||
</NavigationContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useNavigation() {
|
||||
const context = React.useContext(NavigationContext)
|
||||
if (!context) {
|
||||
throw new Error("useNavigation must be used within a NavigationProvider")
|
||||
}
|
||||
return context
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/**
|
||||
* This file is the entry point for the React app, it sets up the root
|
||||
* element and renders the App component to the DOM.
|
||||
*
|
||||
* It is included in `src/index.html`.
|
||||
*/
|
||||
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { App } from "./App";
|
||||
|
||||
const elem = document.getElementById("root")!;
|
||||
const app = (
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
|
||||
if (import.meta.hot) {
|
||||
// With hot module reloading, `import.meta.hot.data` is persisted.
|
||||
const root = (import.meta.hot.data.root ??= createRoot(elem));
|
||||
root.render(app);
|
||||
} else {
|
||||
// The hot module reloading API is not available in production.
|
||||
createRoot(elem).render(app);
|
||||
}
|
||||
@@ -1,306 +0,0 @@
|
||||
/**
|
||||
* useItems Hook
|
||||
* Manages item data fetching and mutations for the items management interface.
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
// Full item type matching the database schema
|
||||
export interface ItemWithUsage {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
rarity: string | null;
|
||||
type: string | null;
|
||||
price: bigint | null;
|
||||
iconUrl: string | null;
|
||||
imageUrl: string | null;
|
||||
usageData: {
|
||||
consume: boolean;
|
||||
effects: Array<{
|
||||
type: string;
|
||||
[key: string]: any;
|
||||
}>;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export interface ItemFilters {
|
||||
search?: string;
|
||||
type?: string;
|
||||
rarity?: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
}
|
||||
|
||||
export interface ItemsResponse {
|
||||
items: ItemWithUsage[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface CreateItemData {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
rarity?: 'C' | 'R' | 'SR' | 'SSR';
|
||||
type: 'MATERIAL' | 'CONSUMABLE' | 'EQUIPMENT' | 'QUEST';
|
||||
price?: string | null;
|
||||
iconUrl?: string;
|
||||
imageUrl?: string;
|
||||
usageData?: {
|
||||
consume: boolean;
|
||||
effects: Array<{ type: string;[key: string]: any }>;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export interface UpdateItemData extends Partial<CreateItemData> { }
|
||||
|
||||
export function useItems(initialFilters: ItemFilters = {}) {
|
||||
const [items, setItems] = useState<ItemWithUsage[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filters, setFilters] = useState<ItemFilters>(initialFilters);
|
||||
|
||||
const fetchItems = useCallback(async (newFilters?: ItemFilters) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
const activeFilters = newFilters ?? filters;
|
||||
|
||||
if (activeFilters.search) params.set("search", activeFilters.search);
|
||||
if (activeFilters.type) params.set("type", activeFilters.type);
|
||||
if (activeFilters.rarity) params.set("rarity", activeFilters.rarity);
|
||||
if (activeFilters.limit) params.set("limit", String(activeFilters.limit));
|
||||
if (activeFilters.offset) params.set("offset", String(activeFilters.offset));
|
||||
|
||||
const response = await fetch(`/api/items?${params.toString()}`);
|
||||
if (!response.ok) throw new Error("Failed to fetch items");
|
||||
|
||||
const data: ItemsResponse = await response.json();
|
||||
setItems(data.items);
|
||||
setTotal(data.total);
|
||||
} catch (error) {
|
||||
console.error("Error fetching items:", error);
|
||||
toast.error("Failed to load items", {
|
||||
description: error instanceof Error ? error.message : "Unknown error"
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filters]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems();
|
||||
}, [fetchItems]);
|
||||
|
||||
const updateFilters = useCallback((newFilters: Partial<ItemFilters>) => {
|
||||
setFilters(prev => ({ ...prev, ...newFilters }));
|
||||
}, []);
|
||||
|
||||
const clearFilters = useCallback(() => {
|
||||
setFilters({});
|
||||
}, []);
|
||||
|
||||
return {
|
||||
items,
|
||||
total,
|
||||
loading,
|
||||
filters,
|
||||
fetchItems,
|
||||
updateFilters,
|
||||
clearFilters,
|
||||
};
|
||||
}
|
||||
|
||||
export function useItem(id: number | null) {
|
||||
const [item, setItem] = useState<ItemWithUsage | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchItem = useCallback(async () => {
|
||||
if (id === null) {
|
||||
setItem(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(`/api/items/${id}`);
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
throw new Error("Item not found");
|
||||
}
|
||||
throw new Error("Failed to fetch item");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setItem(data);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Unknown error";
|
||||
setError(message);
|
||||
toast.error("Failed to load item", { description: message });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchItem();
|
||||
}, [fetchItem]);
|
||||
|
||||
return { item, loading, error, refetch: fetchItem };
|
||||
}
|
||||
|
||||
export function useCreateItem() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const createItem = useCallback(async (data: CreateItemData, imageFile?: File): Promise<ItemWithUsage | null> => {
|
||||
setLoading(true);
|
||||
try {
|
||||
let response: Response;
|
||||
|
||||
if (imageFile) {
|
||||
// Multipart form with image
|
||||
const formData = new FormData();
|
||||
formData.append("data", JSON.stringify(data));
|
||||
formData.append("image", imageFile);
|
||||
|
||||
response = await fetch("/api/items", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
} else {
|
||||
// JSON-only request
|
||||
response = await fetch("/api/items", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error || "Failed to create item");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
toast.success("Item created", {
|
||||
description: `"${result.item.name}" has been created successfully.`
|
||||
});
|
||||
|
||||
return result.item;
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Unknown error";
|
||||
toast.error("Failed to create item", { description: message });
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return { createItem, loading };
|
||||
}
|
||||
|
||||
export function useUpdateItem() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const updateItem = useCallback(async (id: number, data: UpdateItemData): Promise<ItemWithUsage | null> => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/items/${id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error || "Failed to update item");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
toast.success("Item updated", {
|
||||
description: `"${result.item.name}" has been updated successfully.`
|
||||
});
|
||||
|
||||
return result.item;
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Unknown error";
|
||||
toast.error("Failed to update item", { description: message });
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return { updateItem, loading };
|
||||
}
|
||||
|
||||
export function useDeleteItem() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const deleteItem = useCallback(async (id: number, name?: string): Promise<boolean> => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/items/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error || "Failed to delete item");
|
||||
}
|
||||
|
||||
toast.success("Item deleted", {
|
||||
description: name ? `"${name}" has been deleted.` : "Item has been deleted."
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Unknown error";
|
||||
toast.error("Failed to delete item", { description: message });
|
||||
return false;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return { deleteItem, loading };
|
||||
}
|
||||
|
||||
export function useUploadItemIcon() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const uploadIcon = useCallback(async (itemId: number, imageFile: File): Promise<ItemWithUsage | null> => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("image", imageFile);
|
||||
|
||||
const response = await fetch(`/api/items/${itemId}/icon`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error || "Failed to upload icon");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
toast.success("Icon uploaded", {
|
||||
description: "Item icon has been updated successfully."
|
||||
});
|
||||
|
||||
return result.item;
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Unknown error";
|
||||
toast.error("Failed to upload icon", { description: message });
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return { uploadIcon, loading };
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
@@ -1,187 +0,0 @@
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { toast } from "sonner";
|
||||
|
||||
// Sentinel value for "none" selection
|
||||
export const NONE_VALUE = "__none__";
|
||||
|
||||
// Schema definition matching backend config
|
||||
const bigIntStringSchema = z.coerce.string()
|
||||
.refine((val) => /^\d+$/.test(val), { message: "Must be a valid integer" });
|
||||
|
||||
export const formSchema = z.object({
|
||||
leveling: z.object({
|
||||
base: z.number(),
|
||||
exponent: z.number(),
|
||||
chat: z.object({
|
||||
cooldownMs: z.number(),
|
||||
minXp: z.number(),
|
||||
maxXp: z.number(),
|
||||
})
|
||||
}),
|
||||
economy: z.object({
|
||||
daily: z.object({
|
||||
amount: bigIntStringSchema,
|
||||
streakBonus: bigIntStringSchema,
|
||||
weeklyBonus: bigIntStringSchema,
|
||||
cooldownMs: z.number(),
|
||||
}),
|
||||
transfers: z.object({
|
||||
allowSelfTransfer: z.boolean(),
|
||||
minAmount: bigIntStringSchema,
|
||||
}),
|
||||
exam: z.object({
|
||||
multMin: z.number(),
|
||||
multMax: z.number(),
|
||||
})
|
||||
}),
|
||||
inventory: z.object({
|
||||
maxStackSize: bigIntStringSchema,
|
||||
maxSlots: z.number(),
|
||||
}),
|
||||
commands: z.record(z.string(), z.boolean()).optional(),
|
||||
lootdrop: z.object({
|
||||
activityWindowMs: z.number(),
|
||||
minMessages: z.number(),
|
||||
spawnChance: z.number(),
|
||||
cooldownMs: z.number(),
|
||||
reward: z.object({
|
||||
min: z.number(),
|
||||
max: z.number(),
|
||||
currency: z.string(),
|
||||
})
|
||||
}),
|
||||
studentRole: z.string().optional(),
|
||||
visitorRole: z.string().optional(),
|
||||
colorRoles: z.array(z.string()).default([]),
|
||||
welcomeChannelId: z.string().optional(),
|
||||
welcomeMessage: z.string().optional(),
|
||||
feedbackChannelId: z.string().optional(),
|
||||
terminal: z.object({
|
||||
channelId: z.string(),
|
||||
messageId: z.string()
|
||||
}).optional(),
|
||||
moderation: z.object({
|
||||
prune: z.object({
|
||||
maxAmount: z.number(),
|
||||
confirmThreshold: z.number(),
|
||||
batchSize: z.number(),
|
||||
batchDelayMs: z.number(),
|
||||
}),
|
||||
cases: z.object({
|
||||
dmOnWarn: z.boolean(),
|
||||
logChannelId: z.string().optional(),
|
||||
autoTimeoutThreshold: z.number().optional()
|
||||
})
|
||||
}),
|
||||
trivia: z.object({
|
||||
entryFee: bigIntStringSchema,
|
||||
rewardMultiplier: z.number(),
|
||||
timeoutSeconds: z.number(),
|
||||
cooldownMs: z.number(),
|
||||
categories: z.array(z.number()).default([]),
|
||||
difficulty: z.enum(['easy', 'medium', 'hard', 'random']),
|
||||
}).optional(),
|
||||
system: z.record(z.string(), z.any()).optional(),
|
||||
});
|
||||
|
||||
export type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export interface ConfigMeta {
|
||||
roles: { id: string, name: string, color: string }[];
|
||||
channels: { id: string, name: string, type: number }[];
|
||||
commands: { name: string, category: string }[];
|
||||
}
|
||||
|
||||
export const toSelectValue = (v: string | undefined | null) => v || NONE_VALUE;
|
||||
export const fromSelectValue = (v: string) => v === NONE_VALUE ? "" : v;
|
||||
|
||||
export function useSettings() {
|
||||
const [meta, setMeta] = useState<ConfigMeta | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema) as any,
|
||||
defaultValues: {
|
||||
economy: {
|
||||
daily: { amount: "0", streakBonus: "0", weeklyBonus: "0", cooldownMs: 0 },
|
||||
transfers: { minAmount: "0", allowSelfTransfer: false },
|
||||
exam: { multMin: 1, multMax: 1 }
|
||||
},
|
||||
leveling: { base: 100, exponent: 1.5, chat: { minXp: 10, maxXp: 20, cooldownMs: 60000 } },
|
||||
inventory: { maxStackSize: "1", maxSlots: 10 },
|
||||
moderation: {
|
||||
prune: { maxAmount: 100, confirmThreshold: 50, batchSize: 100, batchDelayMs: 1000 },
|
||||
cases: { dmOnWarn: true }
|
||||
},
|
||||
lootdrop: {
|
||||
spawnChance: 0.05,
|
||||
minMessages: 10,
|
||||
cooldownMs: 300000,
|
||||
activityWindowMs: 600000,
|
||||
reward: { min: 100, max: 500, currency: "AU" }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const loadSettings = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [config, metaData] = await Promise.all([
|
||||
fetch("/api/settings").then(res => res.json()),
|
||||
fetch("/api/settings/meta").then(res => res.json())
|
||||
]);
|
||||
form.reset(config as any);
|
||||
setMeta(metaData);
|
||||
} catch (err) {
|
||||
toast.error("Failed to load settings", {
|
||||
description: "Unable to fetch bot configuration. Please try again."
|
||||
});
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [form]);
|
||||
|
||||
useEffect(() => {
|
||||
loadSettings();
|
||||
}, [loadSettings]);
|
||||
|
||||
const saveSettings = async (data: FormValues) => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const response = await fetch("/api/settings", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to save");
|
||||
|
||||
toast.success("Settings saved successfully", {
|
||||
description: "Bot configuration has been updated and reloaded."
|
||||
});
|
||||
// Reload settings to ensure we have the latest state
|
||||
await loadSettings();
|
||||
} catch (error) {
|
||||
toast.error("Failed to save settings", {
|
||||
description: error instanceof Error ? error.message : "Unable to save changes. Please try again."
|
||||
});
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
form,
|
||||
meta,
|
||||
loading,
|
||||
isSaving,
|
||||
saveSettings,
|
||||
loadSettings
|
||||
};
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import type { DashboardStats } from "@shared/modules/dashboard/dashboard.types";
|
||||
|
||||
export function useSocket() {
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
const socketRef = useRef<WebSocket | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Determine WS protocol based on current page schema
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const host = window.location.host;
|
||||
const wsUrl = `${protocol}//${host}/ws`;
|
||||
|
||||
function connect() {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
socketRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log("Connected to dashboard websocket");
|
||||
setIsConnected(true);
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const payload = JSON.parse(event.data);
|
||||
|
||||
if (payload.type === "STATS_UPDATE") {
|
||||
setStats(payload.data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to parse WS message", err);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("Disconnected from dashboard websocket");
|
||||
setIsConnected(false);
|
||||
// Simple reconnect logic
|
||||
setTimeout(connect, 3000);
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error("WebSocket error:", err);
|
||||
ws.close();
|
||||
};
|
||||
}
|
||||
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
if (socketRef.current) {
|
||||
// Prevent reconnect on unmount
|
||||
socketRef.current.onclose = null;
|
||||
socketRef.current.close();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { isConnected, stats };
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@import "../styles/globals.css";
|
||||
@@ -1,18 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Dashboard</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./frontend.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,18 +0,0 @@
|
||||
/**
|
||||
* Web server entry point.
|
||||
*
|
||||
* This file can be run directly for standalone development:
|
||||
* bun --hot src/index.ts
|
||||
*
|
||||
* Or the server can be started in-process by importing from ./server.ts
|
||||
*/
|
||||
|
||||
import { createWebServer } from "./server";
|
||||
|
||||
// Auto-start when run directly
|
||||
const instance = await createWebServer({
|
||||
port: Number(process.env.WEB_PORT) || 3000,
|
||||
hostname: process.env.WEB_HOST || "localhost",
|
||||
});
|
||||
|
||||
console.log(`🌐 Web server is running at ${instance.url}`);
|
||||
@@ -1,89 +0,0 @@
|
||||
export const createImage = (url: string): Promise<HTMLImageElement> =>
|
||||
new Promise((resolve, reject) => {
|
||||
const image = new Image()
|
||||
image.addEventListener('load', () => resolve(image))
|
||||
image.addEventListener('error', (error) => reject(error))
|
||||
image.setAttribute('crossOrigin', 'anonymous') // needed to avoid cross-origin issues on CodeSandbox
|
||||
image.src = url
|
||||
})
|
||||
|
||||
export function getRadianAngle(degreeValue: number) {
|
||||
return (degreeValue * Math.PI) / 180
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the new bounding area of a rotated rectangle.
|
||||
*/
|
||||
export function rotateSize(width: number, height: number, rotation: number) {
|
||||
const rotRad = getRadianAngle(rotation)
|
||||
|
||||
return {
|
||||
width:
|
||||
Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
|
||||
height:
|
||||
Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height),
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
|
||||
*/
|
||||
export async function getCroppedImg(
|
||||
imageSrc: string,
|
||||
pixelCrop: { x: number; y: number; width: number; height: number },
|
||||
rotation = 0,
|
||||
flip = { horizontal: false, vertical: false }
|
||||
): Promise<Blob | null> {
|
||||
const image = await createImage(imageSrc)
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
if (!ctx) {
|
||||
return null
|
||||
}
|
||||
|
||||
const rotRad = getRadianAngle(rotation)
|
||||
|
||||
// calculate bounding box of the rotated image
|
||||
const { width: bBoxWidth, height: bBoxHeight } = rotateSize(
|
||||
image.width,
|
||||
image.height,
|
||||
rotation
|
||||
)
|
||||
|
||||
// set canvas size to match the bounding box
|
||||
canvas.width = bBoxWidth
|
||||
canvas.height = bBoxHeight
|
||||
|
||||
// translate canvas context to a central location to allow rotating and flipping around the center
|
||||
ctx.translate(bBoxWidth / 2, bBoxHeight / 2)
|
||||
ctx.rotate(rotRad)
|
||||
ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1)
|
||||
ctx.translate(-image.width / 2, -image.height / 2)
|
||||
|
||||
// draw rotated image
|
||||
ctx.drawImage(image, 0, 0)
|
||||
|
||||
// croppedAreaPixels values are bounding box relative
|
||||
// extract the cropped image using these values
|
||||
const data = ctx.getImageData(
|
||||
pixelCrop.x,
|
||||
pixelCrop.y,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height
|
||||
)
|
||||
|
||||
// set canvas width to final desired crop size - this will clear existing context
|
||||
canvas.width = pixelCrop.width
|
||||
canvas.height = pixelCrop.height
|
||||
|
||||
// paste generated rotate image at the top left corner
|
||||
ctx.putImageData(data, 0, 0)
|
||||
|
||||
// As a Blob
|
||||
return new Promise((resolve) => {
|
||||
canvas.toBlob((file) => {
|
||||
resolve(file)
|
||||
}, 'image/jpeg')
|
||||
})
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -1,152 +0,0 @@
|
||||
import React from "react";
|
||||
import { QuestForm } from "../components/quest-form";
|
||||
import { QuestTable } from "../components/quest-table";
|
||||
import { SectionHeader } from "../components/section-header";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface QuestListItem {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
triggerEvent: string;
|
||||
requirements: { target?: number };
|
||||
rewards: { xp?: number; balance?: number };
|
||||
}
|
||||
|
||||
export function AdminQuests() {
|
||||
const [quests, setQuests] = React.useState<QuestListItem[]>([]);
|
||||
const [isInitialLoading, setIsInitialLoading] = React.useState(true);
|
||||
const [isRefreshing, setIsRefreshing] = React.useState(false);
|
||||
const [lastCreatedQuestId, setLastCreatedQuestId] = React.useState<number | null>(null);
|
||||
const [editingQuest, setEditingQuest] = React.useState<QuestListItem | null>(null);
|
||||
const [isFormModeEdit, setIsFormModeEdit] = React.useState(false);
|
||||
const formRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
const fetchQuests = React.useCallback(async (isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
setIsRefreshing(true);
|
||||
} else {
|
||||
setIsInitialLoading(true);
|
||||
}
|
||||
try {
|
||||
const response = await fetch("/api/quests");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch quests");
|
||||
}
|
||||
const data = await response.json();
|
||||
if (data.success && Array.isArray(data.data)) {
|
||||
setQuests(data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching quests:", error);
|
||||
toast.error("Failed to load quests", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
} finally {
|
||||
setIsInitialLoading(false);
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchQuests(false);
|
||||
}, [fetchQuests]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (lastCreatedQuestId !== null) {
|
||||
const element = document.getElementById(`quest-row-${lastCreatedQuestId}`);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
element.classList.add("bg-primary/10");
|
||||
setTimeout(() => {
|
||||
element.classList.remove("bg-primary/10");
|
||||
}, 2000);
|
||||
}
|
||||
setLastCreatedQuestId(null);
|
||||
}
|
||||
}, [lastCreatedQuestId, quests]);
|
||||
|
||||
const handleQuestCreated = () => {
|
||||
fetchQuests(true);
|
||||
toast.success("Quest list updated", {
|
||||
description: "The quest inventory has been refreshed.",
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteQuest = async (id: number) => {
|
||||
try {
|
||||
const response = await fetch(`/api/quests/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.message || "Failed to delete quest");
|
||||
}
|
||||
|
||||
setQuests((prev) => prev.filter((q) => q.id !== id));
|
||||
toast.success("Quest deleted", {
|
||||
description: `Quest #${id} has been successfully deleted.`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error deleting quest:", error);
|
||||
toast.error("Failed to delete quest", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditQuest = (id: number) => {
|
||||
const quest = quests.find(q => q.id === id);
|
||||
if (quest) {
|
||||
setEditingQuest(quest);
|
||||
setIsFormModeEdit(true);
|
||||
formRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleQuestUpdated = () => {
|
||||
fetchQuests(true);
|
||||
setEditingQuest(null);
|
||||
setIsFormModeEdit(false);
|
||||
toast.success("Quest list updated", {
|
||||
description: "The quest inventory has been refreshed.",
|
||||
});
|
||||
};
|
||||
|
||||
const handleFormCancel = () => {
|
||||
setEditingQuest(null);
|
||||
setIsFormModeEdit(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-12">
|
||||
<SectionHeader
|
||||
badge="Quest Management"
|
||||
title="Quests"
|
||||
description="Create and manage quests for the Aurora RPG students."
|
||||
/>
|
||||
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<QuestTable
|
||||
quests={quests}
|
||||
isInitialLoading={isInitialLoading}
|
||||
isRefreshing={isRefreshing}
|
||||
onRefresh={() => fetchQuests(true)}
|
||||
onDelete={handleDeleteQuest}
|
||||
onEdit={handleEditQuest}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="animate-in fade-in slide-up duration-700" ref={formRef}>
|
||||
<QuestForm
|
||||
initialData={editingQuest || undefined}
|
||||
onUpdate={handleQuestUpdated}
|
||||
onCancel={handleFormCancel}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminQuests;
|
||||
@@ -1,382 +0,0 @@
|
||||
import React from "react";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from "../components/ui/card";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Switch } from "../components/ui/switch";
|
||||
import { Input } from "../components/ui/input";
|
||||
import { Label } from "../components/ui/label";
|
||||
import { Textarea } from "../components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
|
||||
import { FeatureCard } from "../components/feature-card";
|
||||
import { InfoCard } from "../components/info-card";
|
||||
import { SectionHeader } from "../components/section-header";
|
||||
import { TestimonialCard } from "../components/testimonial-card";
|
||||
import { StatCard } from "../components/stat-card";
|
||||
import { LootdropCard } from "../components/lootdrop-card";
|
||||
import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
|
||||
import { ActivityChart } from "../components/activity-chart";
|
||||
import { RecentActivity } from "../components/recent-activity";
|
||||
import { QuestForm } from "../components/quest-form";
|
||||
import { Activity, Coins, Flame, Trophy, Check, User, Mail, Shield, Bell } from "lucide-react";
|
||||
import { type RecentEvent, type ActivityData } from "@shared/modules/dashboard/dashboard.types";
|
||||
|
||||
// Mock Data
|
||||
const mockEvents: RecentEvent[] = [
|
||||
{ type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
|
||||
{ type: 'info', message: 'New user joined', timestamp: new Date(Date.now() - 1000 * 60 * 15), icon: '👋' },
|
||||
{ type: 'warn', message: 'Failed login attempt', timestamp: new Date(Date.now() - 1000 * 60 * 60), icon: '⚠️' }
|
||||
];
|
||||
|
||||
const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) => {
|
||||
const d = new Date();
|
||||
d.setHours(d.getHours() - (23 - i));
|
||||
d.setMinutes(0, 0, 0);
|
||||
return {
|
||||
hour: d.toISOString(),
|
||||
commands: Math.floor(Math.random() * 100) + 20,
|
||||
transactions: Math.floor(Math.random() * 60) + 10
|
||||
};
|
||||
});
|
||||
|
||||
const mockLeaderboardData: LeaderboardData = {
|
||||
topLevels: [
|
||||
{ username: "StellarMage", level: 99 },
|
||||
{ username: "MoonWalker", level: 85 },
|
||||
{ username: "SunChaser", level: 72 },
|
||||
],
|
||||
topWealth: [
|
||||
{ username: "GoldHoarder", balance: "1000000" },
|
||||
{ username: "MerchantKing", balance: "750000" },
|
||||
{ username: "LuckyLooter", balance: "500000" },
|
||||
],
|
||||
topNetWorth: [
|
||||
{ username: "MerchantKing", netWorth: "1500000" },
|
||||
{ username: "GoldHoarder", netWorth: "1250000" },
|
||||
{ username: "LuckyLooter", netWorth: "850000" },
|
||||
]
|
||||
};
|
||||
|
||||
export function DesignSystem() {
|
||||
return (
|
||||
<div className="pt-8 px-8 max-w-7xl mx-auto space-y-8 text-center md:text-left pb-24">
|
||||
{/* Header Section */}
|
||||
<header className="space-y-4 animate-in fade-in">
|
||||
<div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<Badge variant="aurora" className="mb-2">v2.0.0-solaris</Badge>
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-primary glow-text">
|
||||
Aurora Design System
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl">
|
||||
The Solaris design language. A cohesive collection of celestial components,
|
||||
glassmorphic surfaces, and radiant interactions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<div className="size-32 rounded-full bg-aurora opacity-20 blur-3xl animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Tabs defaultValue="foundations" className="space-y-8 animate-in slide-up delay-100">
|
||||
<div className="flex items-center justify-center md:justify-start">
|
||||
<TabsList className="grid w-full max-w-md grid-cols-3">
|
||||
<TabsTrigger value="foundations">Foundations</TabsTrigger>
|
||||
<TabsTrigger value="components">Components</TabsTrigger>
|
||||
<TabsTrigger value="patterns">Patterns</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
{/* FOUNDATIONS TAB */}
|
||||
<TabsContent value="foundations" className="space-y-12">
|
||||
{/* Color Palette */}
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px bg-border flex-1" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Color Palette</h2>
|
||||
<div className="h-px bg-border flex-1" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
<ColorSwatch label="Primary" color="bg-primary" text="text-primary-foreground" />
|
||||
<ColorSwatch label="Secondary" color="bg-secondary" text="text-secondary-foreground" />
|
||||
<ColorSwatch label="Background" color="bg-background" border />
|
||||
<ColorSwatch label="Card" color="bg-card" border />
|
||||
<ColorSwatch label="Accent" color="bg-accent" />
|
||||
<ColorSwatch label="Muted" color="bg-muted" />
|
||||
<ColorSwatch label="Destructive" color="bg-destructive" text="text-white" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Gradients & Special Effects */}
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px bg-border flex-1" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Gradients & Effects</h2>
|
||||
<div className="h-px bg-border flex-1" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient</h3>
|
||||
<div className="h-32 w-full rounded-xl bg-aurora-page sun-flare flex items-center justify-center border border-border hover-glow transition-all">
|
||||
<span className="text-primary font-bold text-2xl">Celestial Void</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-medium text-muted-foreground">Glassmorphism</h3>
|
||||
<div className="h-32 w-full rounded-xl glass-card flex items-center justify-center p-6 bg-[url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?auto=format&fit=crop&q=80&w=2342')] bg-cover bg-center overflow-hidden">
|
||||
<div className="glass-card p-4 rounded-lg text-center w-full hover-lift transition-all backdrop-blur-md">
|
||||
<span className="font-bold">Frosted Celestial Glass</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Typography */}
|
||||
<section className="space-y-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px bg-border flex-1" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Typography</h2>
|
||||
<div className="h-px bg-border flex-1" />
|
||||
</div>
|
||||
<div className="space-y-2 border border-border/50 rounded-xl p-8 bg-card/50">
|
||||
<TypographyRow step="-2" className="text-step--2" label="Step -2 (Small Print)" />
|
||||
<TypographyRow step="-1" className="text-step--1" label="Step -1 (Small)" />
|
||||
<TypographyRow step="0" className="text-step-0" label="Step 0 (Base / Body)" />
|
||||
<TypographyRow step="1" className="text-step-1" label="Step 1 (H4 / Subhead)" />
|
||||
<TypographyRow step="2" className="text-step-2" label="Step 2 (H3 / Section)" />
|
||||
<TypographyRow step="3" className="text-step-3 text-primary" label="Step 3 (H2 / Header)" />
|
||||
<TypographyRow step="4" className="text-step-4 text-primary" label="Step 4 (H1 / Title)" />
|
||||
<TypographyRow step="5" className="text-step-5 text-primary font-black" label="Step 5 (Display)" />
|
||||
</div>
|
||||
</section>
|
||||
</TabsContent>
|
||||
|
||||
{/* COMPONENTS TAB */}
|
||||
<TabsContent value="components" className="space-y-12">
|
||||
{/* Buttons & Badges */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Buttons & Badges" />
|
||||
<Card className="p-8">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Label>Buttons</Label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Button variant="default">Default</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="link">Link</Button>
|
||||
<Button variant="aurora">Aurora</Button>
|
||||
<Button variant="glass">Glass</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<Label>Badges</Label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Badge>Primary</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
<Badge variant="aurora">Aurora</Badge>
|
||||
<Badge variant="glass">Glass</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
{/* Form Controls */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Form Controls" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="p-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email Address</Label>
|
||||
<Input id="email" placeholder="enter@email.com" type="email" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bio">Bio</Label>
|
||||
<Textarea id="bio" placeholder="Tell us about yourself..." />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="notifications">Enable Notifications</Label>
|
||||
<Switch id="notifications" />
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label>Role Selection</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Administrator</SelectItem>
|
||||
<SelectItem value="mod">Moderator</SelectItem>
|
||||
<SelectItem value="user">User</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Tooltip Demo</Label>
|
||||
<div className="p-4 border border-dashed rounded-lg flex items-center justify-center">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="outline">Hover Me</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>This is a glowing tooltip!</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Cards & Containers */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Cards & Containers" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="hover-lift">
|
||||
<CardHeader>
|
||||
<CardTitle>Standard Card</CardTitle>
|
||||
<CardDescription>Default glassmorphic style</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">The default card component comes with built-in separation and padding.</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button size="sm" variant="secondary" className="w-full">Action</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-aurora/10 border-primary/20 hover-glow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-primary">Highlighted Card</CardTitle>
|
||||
<CardDescription>Active or featured state</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">Use this variation to draw attention to specific content blocks.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-dashed shadow-none bg-transparent">
|
||||
<CardHeader>
|
||||
<CardTitle>Ghost/Dashed Card</CardTitle>
|
||||
<CardDescription>Placeholder or empty state</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-center justify-center py-8">
|
||||
<div className="bg-muted p-4 rounded-full">
|
||||
<Activity className="size-6 text-muted-foreground" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</TabsContent>
|
||||
|
||||
{/* PATTERNS TAB */}
|
||||
<TabsContent value="patterns" className="space-y-12">
|
||||
{/* Dashboard Widgets */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Dashboard Widgets" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<StatCard
|
||||
title="Total XP"
|
||||
value="1,240,500"
|
||||
subtitle="+12% from last week"
|
||||
icon={Trophy}
|
||||
isLoading={false}
|
||||
iconClassName="text-yellow-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="Active Users"
|
||||
value="3,405"
|
||||
subtitle="Currently online"
|
||||
icon={User}
|
||||
isLoading={false}
|
||||
iconClassName="text-blue-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="System Load"
|
||||
value="42%"
|
||||
subtitle="Optimal performance"
|
||||
icon={Activity}
|
||||
isLoading={false}
|
||||
iconClassName="text-green-500"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Complex Lists */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Complex Lists & Charts" />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<RecentActivity
|
||||
events={mockEvents}
|
||||
isLoading={false}
|
||||
className="h-[400px]"
|
||||
/>
|
||||
<LeaderboardCard
|
||||
data={mockLeaderboardData}
|
||||
isLoading={false}
|
||||
className="h-[400px]"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Application Patterns */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Application Forms" />
|
||||
<div className="max-w-xl mx-auto">
|
||||
<QuestForm />
|
||||
</div>
|
||||
</section>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionTitle({ title }: { title: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-4 py-4">
|
||||
<div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
|
||||
<h2 className="text-xl font-bold text-foreground/80 uppercase tracking-widest">{title}</h2>
|
||||
<div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TypographyRow({ step, className, label }: { step: string, className: string, label: string }) {
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4 last:border-0 last:pb-0">
|
||||
<span className="text-xs font-mono text-muted-foreground w-24 shrink-0">var(--step-{step})</span>
|
||||
<p className={`${className} font-medium truncate`}>{label}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ColorSwatch({ label, color, text = "text-foreground", border = false }: { label: string, color: string, text?: string, border?: boolean }) {
|
||||
return (
|
||||
<div className="group space-y-2 cursor-pointer">
|
||||
<div className={`h-24 w-full rounded-xl ${color} ${border ? 'border border-border' : ''} flex items-end p-3 shadow-lg group-hover:scale-105 transition-transform duration-300 relative overflow-hidden`}>
|
||||
<div className="absolute inset-0 bg-linear-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<span className={`text-xs font-bold uppercase tracking-widest ${text} relative z-10`}>{label}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-muted-foreground px-1">
|
||||
<span>{color.replace('bg-', '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DesignSystem;
|
||||
@@ -1,219 +0,0 @@
|
||||
import React from "react";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { FeatureCard } from "../components/feature-card";
|
||||
import { InfoCard } from "../components/info-card";
|
||||
import { SectionHeader } from "../components/section-header";
|
||||
import { TestimonialCard } from "../components/testimonial-card";
|
||||
import {
|
||||
GraduationCap,
|
||||
Coins,
|
||||
Package,
|
||||
ShieldCheck,
|
||||
Zap,
|
||||
Trophy
|
||||
} from "lucide-react";
|
||||
|
||||
export function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<header className="relative pt-16 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
|
||||
<Badge variant="glass" className="mb-4 py-1.5 px-4 text-step--1 animate-in zoom-in spin-in-12 duration-700 delay-100">
|
||||
The Ultimate Academic Strategy RPG
|
||||
</Badge>
|
||||
|
||||
<h1 className="flex flex-col items-center justify-center text-step-5 font-black tracking-tighter leading-[0.9] text-primary drop-shadow-sm">
|
||||
<span className="animate-in slide-in-from-bottom-8 fade-in duration-700 delay-200 fill-mode-both">
|
||||
Rise to the Top
|
||||
</span>
|
||||
<span className="animate-in slide-in-from-bottom-8 fade-in duration-700 delay-300 fill-mode-both">
|
||||
of the Elite Academy
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-step--1 md:text-step-0 text-muted-foreground max-w-2xl mx-auto leading-relaxed animate-in slide-in-from-bottom-4 fade-in duration-700 delay-500 fill-mode-both">
|
||||
Aurora is a competitive academic RPG bot where students are assigned to Classes A through D, vying for supremacy in a high-stakes elite school setting.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6 pt-6 animate-in zoom-in-50 fade-in duration-700 delay-700 fill-mode-both">
|
||||
<Button className="bg-primary text-primary-foreground active-press font-bold px-6">
|
||||
Join our Server
|
||||
</Button>
|
||||
<Button className="bg-secondary text-primary-foreground active-press font-bold px-6">
|
||||
Explore Documentation
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Features Section (Bento Grid) */}
|
||||
<section className="px-8 pb-32 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-4 gap-6">
|
||||
|
||||
{/* Class System */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-2 delay-400"
|
||||
title="Class Constellations"
|
||||
category="Immersion"
|
||||
description="You are assigned to one of the four constellations: Class A, B, C, or D. Work with your classmates to rise through the rankings and avoid expulsion."
|
||||
icon={<GraduationCap className="w-32 h-32 text-primary" />}
|
||||
>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Constellation Units</Badge>
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Special Exams</Badge>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Economy */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-1 delay-500"
|
||||
title="Astral Units"
|
||||
category="Commerce"
|
||||
description="Earn Astral Units through exams, tasks, and achievements. Use them to purchase privileges or influence test results."
|
||||
icon={<Coins className="w-20 h-20 text-secondary" />}
|
||||
/>
|
||||
|
||||
{/* Inventory */}
|
||||
<FeatureCard
|
||||
className="md:col-span-2 lg:col-span-1 delay-500"
|
||||
title="Inventory"
|
||||
category="Management"
|
||||
description="Manage vast collections of items, from common materials to legendary artifacts with unique rarities."
|
||||
icon={<Package className="w-20 h-20 text-primary" />}
|
||||
/>
|
||||
|
||||
{/* Exams */}
|
||||
<FeatureCard
|
||||
className="md:col-span-2 lg:col-span-1 delay-600"
|
||||
title="Special Exams"
|
||||
category="Academics"
|
||||
description="Participate in complex written and physical exams. Strategy and cooperation are key to survival."
|
||||
>
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-aurora w-[65%]" />
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] text-muted-foreground font-bold uppercase tracking-wider">
|
||||
<span>Island Exam</span>
|
||||
<span>Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Trading & Social */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-2 delay-400"
|
||||
title="Class Constellations"
|
||||
category="Immersion"
|
||||
description="You are assigned to one of the four constellations: Class A, B, C, or D. Work with your classmates to rise through the rankings and avoid expulsion."
|
||||
icon={<GraduationCap className="w-32 h-32 text-primary" />}
|
||||
>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Constellation Units</Badge>
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Special Exams</Badge>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<FeatureCard
|
||||
className="md:col-span-6 lg:col-span-1 delay-700 bg-primary/5"
|
||||
title="Modern Core"
|
||||
category="Technology"
|
||||
description="Built for speed and reliability using the most modern tech stack."
|
||||
>
|
||||
<div className="flex flex-wrap gap-2 text-[10px] font-bold">
|
||||
<span className="px-2 py-1 bg-black text-white rounded">BUN 1.0+</span>
|
||||
<span className="px-2 py-1 bg-[#5865F2] text-white rounded">DISCORD.JS</span>
|
||||
<span className="px-2 py-1 bg-[#C5F74F] text-black rounded">DRIZZLE</span>
|
||||
<span className="px-2 py-1 bg-[#336791] text-white rounded">POSTGRES</span>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Unique Features Section */}
|
||||
<section className="px-8 py-20 bg-primary/5 border-y border-border/50">
|
||||
<div className="max-w-7xl mx-auto space-y-16">
|
||||
<SectionHeader
|
||||
badge="Why Aurora?"
|
||||
title="More Than Just A Game"
|
||||
description="Aurora isn't just about leveling up. It's a social experiment designed to test your strategic thinking, diplomacy, and resource management."
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<InfoCard
|
||||
icon={<Trophy className="w-6 h-6" />}
|
||||
title="Merit-Based Society"
|
||||
description="Your class standing determines your privileges. Earn points to rise, or lose them and face the consequences of falling behind."
|
||||
iconWrapperClassName="bg-primary/20 text-primary"
|
||||
/>
|
||||
<InfoCard
|
||||
icon={<ShieldCheck className="w-6 h-6" />}
|
||||
title="Psychological Warfare"
|
||||
description="Form alliances, uncover spies, and execute strategies during Special Exams where trust is the most valuable currency."
|
||||
iconWrapperClassName="bg-secondary/20 text-secondary"
|
||||
/>
|
||||
<InfoCard
|
||||
icon={<Zap className="w-6 h-6" />}
|
||||
title="Dynamic World"
|
||||
description="The school rules change based on the actions of the student body. Your decisions shape the future of the academy."
|
||||
iconWrapperClassName="bg-primary/20 text-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="px-8 py-32 max-w-7xl mx-auto">
|
||||
<SectionHeader
|
||||
badge="Student Voices"
|
||||
title="Overheard at the Academy"
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<TestimonialCard
|
||||
quote="I thought I could just grind my way to the top like other RPGs. I was wrong. The Class D exams forced me to actually talk to people and strategize."
|
||||
author="Alex K."
|
||||
role="Class D Representative"
|
||||
avatarGradient="bg-gradient-to-br from-blue-500 to-purple-500"
|
||||
/>
|
||||
<TestimonialCard
|
||||
className="mt-8 md:mt-0"
|
||||
quote="The economy systems are surprisingly deep. Manipulating the market during exam week is honestly the most fun I've had in a Discord server."
|
||||
author="Sarah M."
|
||||
role="Class B Treasurer"
|
||||
avatarGradient="bg-gradient-to-br from-emerald-500 to-teal-500"
|
||||
/>
|
||||
<TestimonialCard
|
||||
quote="Aurora creates an environment where 'elite' actually means something. Maintaining Class A status is stressful but incredibly rewarding."
|
||||
author="James R."
|
||||
role="Class A President"
|
||||
avatarGradient="bg-gradient-to-br from-rose-500 to-orange-500"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-20 px-8 border-t border-border/50 bg-background/50">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div className="flex flex-col items-center md:items-start gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-aurora" />
|
||||
<span className="text-lg font-bold text-primary">Aurora</span>
|
||||
</div>
|
||||
<p className="text-step--1 text-muted-foreground text-center md:text-left">
|
||||
© 2026 Aurora Project. Licensed under MIT.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-8 text-step--1 font-medium text-muted-foreground">
|
||||
<a href="#" className="hover:text-primary transition-colors">Documentation</a>
|
||||
<a href="#" className="hover:text-primary transition-colors">Support Server</a>
|
||||
<a href="#" className="hover:text-primary transition-colors">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@@ -1,106 +0,0 @@
|
||||
/**
|
||||
* AdminItems Page
|
||||
* Full item management page with filtering, table, and create/edit functionality.
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { SectionHeader } from "@/components/section-header";
|
||||
import { ItemsTable } from "@/components/items-table";
|
||||
import { ItemsFilter } from "@/components/items-filter";
|
||||
import { ItemFormSheet } from "@/components/item-form-sheet";
|
||||
import { useItems, useDeleteItem, type ItemWithUsage } from "@/hooks/use-items";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
export function AdminItems() {
|
||||
const { items, total, loading, filters, fetchItems, updateFilters, clearFilters } = useItems();
|
||||
const { deleteItem } = useDeleteItem();
|
||||
|
||||
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState<ItemWithUsage | null>(null);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setIsRefreshing(true);
|
||||
await fetchItems();
|
||||
setIsRefreshing(false);
|
||||
}, [fetchItems]);
|
||||
|
||||
const handleCreateClick = useCallback(() => {
|
||||
setEditingItem(null);
|
||||
setIsSheetOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleEditItem = useCallback((item: ItemWithUsage) => {
|
||||
setEditingItem(item);
|
||||
setIsSheetOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleDeleteItem = useCallback(async (item: ItemWithUsage) => {
|
||||
const success = await deleteItem(item.id, item.name);
|
||||
if (success) {
|
||||
await fetchItems();
|
||||
}
|
||||
}, [deleteItem, fetchItems]);
|
||||
|
||||
const handleSheetClose = useCallback(() => {
|
||||
setIsSheetOpen(false);
|
||||
setEditingItem(null);
|
||||
}, []);
|
||||
|
||||
const handleItemSaved = useCallback(async () => {
|
||||
setIsSheetOpen(false);
|
||||
setEditingItem(null);
|
||||
await fetchItems();
|
||||
}, [fetchItems]);
|
||||
|
||||
return (
|
||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<SectionHeader
|
||||
badge="Item Management"
|
||||
title="Items"
|
||||
description="Create and manage game items, lootboxes, and consumables."
|
||||
/>
|
||||
<Button
|
||||
onClick={handleCreateClick}
|
||||
className="bg-primary hover:bg-primary/90 gap-2"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Create Item
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<ItemsFilter
|
||||
filters={filters}
|
||||
onFilterChange={updateFilters}
|
||||
onClearFilters={clearFilters}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<ItemsTable
|
||||
items={items}
|
||||
total={total}
|
||||
isLoading={loading}
|
||||
isRefreshing={isRefreshing}
|
||||
onRefresh={handleRefresh}
|
||||
onEdit={handleEditItem}
|
||||
onDelete={handleDeleteItem}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ItemFormSheet
|
||||
open={isSheetOpen}
|
||||
onOpenChange={(open: boolean) => {
|
||||
if (!open) handleSheetClose();
|
||||
}}
|
||||
item={editingItem}
|
||||
onSaved={handleItemSaved}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminItems;
|
||||
@@ -1,164 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { SectionHeader } from "../../components/section-header";
|
||||
import { useSocket } from "../../hooks/use-socket";
|
||||
import { StatCard } from "../../components/stat-card";
|
||||
import { ActivityChart } from "../../components/activity-chart";
|
||||
import { LootdropCard } from "../../components/lootdrop-card";
|
||||
import { LeaderboardCard } from "../../components/leaderboard-card";
|
||||
import { RecentActivity } from "../../components/recent-activity";
|
||||
import { CommandsDrawer } from "../../components/commands-drawer";
|
||||
import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
export function AdminOverview() {
|
||||
const { isConnected, stats } = useSocket();
|
||||
const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
||||
<SectionHeader
|
||||
badge="Admin Dashboard"
|
||||
title="Overview"
|
||||
description="Monitor your Aurora RPG server statistics and activity."
|
||||
/>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up duration-700">
|
||||
<StatCard
|
||||
title="Total Servers"
|
||||
icon={Server}
|
||||
isLoading={!stats}
|
||||
value={stats?.guilds.count.toLocaleString()}
|
||||
subtitle={stats?.guilds.changeFromLastMonth
|
||||
? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
|
||||
: "Active Guilds"
|
||||
}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Total Users"
|
||||
icon={Users}
|
||||
isLoading={!stats}
|
||||
value={stats?.users.total.toLocaleString()}
|
||||
subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
|
||||
className="delay-100"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Commands"
|
||||
icon={Terminal}
|
||||
isLoading={!stats}
|
||||
value={stats?.commands.total.toLocaleString()}
|
||||
subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
|
||||
className="delay-200"
|
||||
onClick={() => setCommandsDrawerOpen(true)}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="System Ping"
|
||||
icon={Activity}
|
||||
isLoading={!stats}
|
||||
value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
|
||||
subtitle="Average latency"
|
||||
className="delay-300"
|
||||
valueClassName={stats ? cn(
|
||||
"transition-colors duration-300",
|
||||
stats.ping.avg < 100 ? "text-emerald-500" :
|
||||
stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
|
||||
) : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Activity Chart */}
|
||||
<div className="animate-in fade-in slide-up delay-400">
|
||||
<ActivityChart />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
|
||||
{/* Economy Stats */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold tracking-tight mb-4">Economy Overview</h2>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<StatCard
|
||||
title="Total Wealth"
|
||||
icon={Coins}
|
||||
isLoading={!stats}
|
||||
value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
|
||||
subtitle="Astral Units in circulation"
|
||||
valueClassName="text-primary"
|
||||
iconClassName="text-primary"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Items Circulating"
|
||||
icon={Package}
|
||||
isLoading={!stats}
|
||||
value={stats?.economy.totalItems?.toLocaleString()}
|
||||
subtitle="Total items owned by users"
|
||||
className="delay-75"
|
||||
valueClassName="text-blue-500"
|
||||
iconClassName="text-blue-500"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Average Level"
|
||||
icon={TrendingUp}
|
||||
isLoading={!stats}
|
||||
value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
|
||||
subtitle="Global player average"
|
||||
className="delay-100"
|
||||
valueClassName="text-secondary"
|
||||
iconClassName="text-secondary"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Top /daily Streak"
|
||||
icon={Flame}
|
||||
isLoading={!stats}
|
||||
value={stats?.economy.topStreak}
|
||||
subtitle="Days daily streak"
|
||||
className="delay-200"
|
||||
valueClassName="text-destructive"
|
||||
iconClassName="text-destructive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LeaderboardCard
|
||||
data={stats?.leaderboards}
|
||||
isLoading={!stats}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity & Lootdrops */}
|
||||
<div className="space-y-6">
|
||||
<LootdropCard
|
||||
drop={stats?.activeLootdrops?.[0]}
|
||||
state={stats?.lootdropState}
|
||||
isLoading={!stats}
|
||||
/>
|
||||
<div className="h-[calc(100%-12rem)] min-h-[400px]">
|
||||
<h2 className="text-xl font-semibold tracking-tight mb-4">Live Feed</h2>
|
||||
<RecentActivity
|
||||
events={stats?.recentEvents || []}
|
||||
isLoading={!stats}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Commands Drawer */}
|
||||
<CommandsDrawer
|
||||
open={commandsDrawerOpen}
|
||||
onOpenChange={setCommandsDrawerOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminOverview;
|
||||
@@ -1,290 +0,0 @@
|
||||
import React from "react";
|
||||
import { useSettingsForm } from "./SettingsLayout";
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { Users, Backpack, Sparkles, CreditCard, MessageSquare } from "lucide-react";
|
||||
|
||||
export function EconomySettings() {
|
||||
const { form } = useSettingsForm();
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in slide-up duration-500">
|
||||
<Accordion type="multiple" className="w-full space-y-4" defaultValue={["daily", "inventory"]}>
|
||||
<AccordionItem value="daily" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-500">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Daily Rewards</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.daily.amount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Base Amount</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" placeholder="100" />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">Reward (AU)</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.daily.streakBonus"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Streak Bonus</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" placeholder="10" />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">Bonus/day</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.daily.weeklyBonus"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Weekly Bonus</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" placeholder="50" />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">7-day bonus</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.daily.cooldownMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cooldown (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="inventory" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
|
||||
<Backpack className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Inventory</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inventory.maxStackSize"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Max Stack Size</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inventory.maxSlots"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Max Slots</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="leveling" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Leveling & XP</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.base"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Base XP</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.exponent"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Exponent</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-muted/30 p-4 rounded-lg space-y-3">
|
||||
<h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
|
||||
<MessageSquare className="w-3 h-3" /> Chat XP
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.chat.minXp"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Min</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.chat.maxXp"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Max</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.chat.cooldownMs"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Cooldown</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="transfers" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
|
||||
<CreditCard className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Transfers</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.transfers.allowSelfTransfer"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-sm font-medium">Allow Self-Transfer</FormLabel>
|
||||
<FormDescription className="text-xs">
|
||||
Permit users to transfer currency to themselves.
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.transfers.minAmount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Minimum Transfer Amount</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" placeholder="1" className="bg-background/50" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="exam" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Exams</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.exam.multMin"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min Multiplier</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.exam.multMax"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Max Multiplier</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
import React from "react";
|
||||
import { useSettingsForm } from "./SettingsLayout";
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { MessageSquare, Terminal } from "lucide-react";
|
||||
import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
|
||||
|
||||
export function GeneralSettings() {
|
||||
const { form, meta } = useSettingsForm();
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in slide-up duration-500">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
<MessageSquare className="w-3 h-3 mr-1" /> Onboarding
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="welcomeChannelId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="text-foreground/80">Welcome Channel</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50 border-border/50">
|
||||
<SelectValue placeholder="Select a channel" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||
{meta?.channels
|
||||
.filter(c => c.type === 0)
|
||||
.map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Where to send welcome messages.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="welcomeMessage"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="text-foreground/80">Welcome Message Template</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
value={field.value || ""}
|
||||
placeholder="Welcome {user}!"
|
||||
className="min-h-[100px] font-mono text-xs bg-background/50 border-border/50 focus:border-primary/50 focus:ring-primary/20 resize-none"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Available variables: {"{user}"}, {"{count}"}.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
Channels & Features
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="feedbackChannelId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="text-foreground/80">Feedback Channel</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50 border-border/50">
|
||||
<SelectValue placeholder="Select a channel" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Where user feedback is sent.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="glass-card p-5 rounded-xl border border-border/50 space-y-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Terminal className="w-4 h-4 text-muted-foreground" />
|
||||
<h4 className="font-medium text-sm">Terminal Embed</h4>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="terminal.channelId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Channel</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50 border-border/50 h-9 text-xs">
|
||||
<SelectValue placeholder="Select channel" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="terminal.messageId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Message ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} value={field.value || ""} placeholder="Message ID" className="font-mono text-xs bg-background/50 border-border/50 h-9" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
import React from "react";
|
||||
import { useSettingsForm } from "./SettingsLayout";
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Palette, Users } from "lucide-react";
|
||||
import { fromSelectValue, toSelectValue } from "@/hooks/use-settings";
|
||||
|
||||
export function RolesSettings() {
|
||||
const { form, meta } = useSettingsForm();
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in slide-up duration-500">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
<Users className="w-3 h-3 mr-1" /> System Roles
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="studentRole"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="font-bold">Student Role</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select role" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{meta?.roles.map(r => (
|
||||
<SelectItem key={r.id} value={r.id}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
|
||||
{r.name}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription className="text-xs">Default role for new members/students.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="visitorRole"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="font-bold">Visitor Role</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select role" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{meta?.roles.map(r => (
|
||||
<SelectItem key={r.id} value={r.id}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
|
||||
{r.name}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription className="text-xs">Role for visitors/guests.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
<Palette className="w-3 h-3 mr-1" /> Color Roles
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-6 rounded-xl border border-border/50 bg-card/30">
|
||||
<div className="mb-4">
|
||||
<FormDescription className="text-sm">
|
||||
Select roles that users can choose from to set their name color in the bot.
|
||||
</FormDescription>
|
||||
</div>
|
||||
<ScrollArea className="h-[400px] pr-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{meta?.roles.map((role) => (
|
||||
<FormField
|
||||
key={role.id}
|
||||
control={form.control}
|
||||
name="colorRoles"
|
||||
render={({ field }) => {
|
||||
const isSelected = field.value?.includes(role.id);
|
||||
return (
|
||||
<FormItem
|
||||
key={role.id}
|
||||
className={`flex flex-row items-center space-x-3 space-y-0 p-3 rounded-lg border transition-all cursor-pointer ${
|
||||
isSelected
|
||||
? 'bg-primary/10 border-primary/30 ring-1 ring-primary/20'
|
||||
: 'hover:bg-muted/50 border-transparent'
|
||||
}`}
|
||||
>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={isSelected}
|
||||
onCheckedChange={(checked) => {
|
||||
return checked
|
||||
? field.onChange([...(field.value || []), role.id])
|
||||
: field.onChange(
|
||||
field.value?.filter(
|
||||
(value: string) => value !== role.id
|
||||
)
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-medium flex items-center gap-2 cursor-pointer w-full text-foreground text-sm">
|
||||
<span className="w-3 h-3 rounded-full shadow-sm" style={{ background: role.color }} />
|
||||
{role.name}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import React, { createContext, useContext } from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { useSettings, type FormValues, type ConfigMeta } from "@/hooks/use-settings";
|
||||
import { Form } from "@/components/ui/form";
|
||||
import { SectionHeader } from "@/components/section-header";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Save, Loader2 } from "lucide-react";
|
||||
|
||||
interface SettingsContextType {
|
||||
form: ReturnType<typeof useSettings>["form"];
|
||||
meta: ConfigMeta | null;
|
||||
}
|
||||
|
||||
const SettingsContext = createContext<SettingsContextType | null>(null);
|
||||
|
||||
export const useSettingsForm = () => {
|
||||
const context = useContext(SettingsContext);
|
||||
if (!context) throw new Error("useSettingsForm must be used within SettingsLayout");
|
||||
return context;
|
||||
};
|
||||
|
||||
export function SettingsLayout() {
|
||||
const { form, meta, loading, isSaving, saveSettings } = useSettings();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center flex-col gap-4 min-h-[400px]">
|
||||
<Loader2 className="w-10 h-10 animate-spin text-primary" />
|
||||
<p className="text-muted-foreground animate-pulse">Loading configuration...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsContext.Provider value={{ form, meta }}>
|
||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
||||
<div className="flex justify-between items-end">
|
||||
<SectionHeader
|
||||
badge="System"
|
||||
title="Configuration"
|
||||
description="Manage bot behavior, economy, and game systems."
|
||||
/>
|
||||
<Button
|
||||
onClick={form.handleSubmit(saveSettings)}
|
||||
disabled={isSaving || !form.formState.isDirty}
|
||||
className="shadow-lg hover:shadow-primary/20 transition-all font-bold min-w-[140px]"
|
||||
>
|
||||
{isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="glass-card rounded-2xl border border-border/50 overflow-hidden">
|
||||
<Form {...form}>
|
||||
<form className="flex flex-col h-full">
|
||||
<div className="p-8">
|
||||
<Outlet />
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</main>
|
||||
</SettingsContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -1,338 +0,0 @@
|
||||
import React from "react";
|
||||
import { useSettingsForm } from "./SettingsLayout";
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { CreditCard, Shield } from "lucide-react";
|
||||
import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
|
||||
|
||||
export function SystemsSettings() {
|
||||
const { form, meta } = useSettingsForm();
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in slide-up duration-500">
|
||||
<Accordion type="multiple" className="w-full space-y-4" defaultValue={["lootdrop", "moderation"]}>
|
||||
<AccordionItem value="lootdrop" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-500">
|
||||
<CreditCard className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Loot Drops</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.spawnChance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Spawn Chance (0-1)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.01" min="0" max="1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.minMessages"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min Messages</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/30 p-4 rounded-lg space-y-3">
|
||||
<h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Rewards</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.reward.min"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Min</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.reward.max"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Max</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.reward.currency"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Currency</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="AU" className="h-9 text-sm" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.cooldownMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cooldown (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.activityWindowMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Activity Window (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="trivia" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-sm">
|
||||
🎯
|
||||
</div>
|
||||
<span className="font-bold">Trivia</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.entryFee"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Entry Fee (AU)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" placeholder="50" />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">Cost to play</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.rewardMultiplier"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Reward Multiplier</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">multiplier</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.timeoutSeconds"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Timeout (seconds)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.cooldownMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cooldown (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.difficulty"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Difficulty</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select difficulty" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="easy">Easy</SelectItem>
|
||||
<SelectItem value="medium">Medium</SelectItem>
|
||||
<SelectItem value="hard">Hard</SelectItem>
|
||||
<SelectItem value="random">Random</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="moderation" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
|
||||
<Shield className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Moderation</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-6 pb-4">
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Case Management</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.cases.dmOnWarn"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-sm font-medium">DM on Warm</FormLabel>
|
||||
<FormDescription className="text-xs">Notify via DM</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.cases.logChannelId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-4 rounded-xl border border-border/50">
|
||||
<FormLabel className="text-sm">Log Channel</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50 h-9">
|
||||
<SelectValue placeholder="Select a channel" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.cases.autoTimeoutThreshold"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Auto Timeout Threshold</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" min="0" className="bg-background/50" onChange={e => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">Warnings before auto-timeout.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Message Pruning</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.prune.maxAmount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Max Amount</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.prune.confirmThreshold"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Confirm Threshold</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.prune.batchSize"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Batch Size</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.prune.batchDelayMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Batch Delay (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,314 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--text-step--2: var(--step--2);
|
||||
--text-step--1: var(--step--1);
|
||||
--text-step-0: var(--step-0);
|
||||
--text-step-1: var(--step-1);
|
||||
--text-step-2: var(--step-2);
|
||||
--text-step-3: var(--step-3);
|
||||
--text-step-4: var(--step-4);
|
||||
--text-step-5: var(--step-5);
|
||||
}
|
||||
|
||||
:root {
|
||||
--step--2: clamp(0.5002rem, 0.449rem + 0.2273vw, 0.6252rem);
|
||||
--step--1: clamp(0.7072rem, 0.6349rem + 0.3215vw, 0.884rem);
|
||||
--step-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
|
||||
--step-1: clamp(1.414rem, 1.2694rem + 0.6427vw, 1.7675rem);
|
||||
--step-2: clamp(1.9994rem, 1.7949rem + 0.9088vw, 2.4992rem);
|
||||
--step-3: clamp(2.8271rem, 2.538rem + 1.2851vw, 3.5339rem);
|
||||
--step-4: clamp(3.9976rem, 3.5887rem + 1.8171vw, 4.997rem);
|
||||
--step-5: clamp(5.6526rem, 5.0745rem + 2.5694vw, 7.0657rem);
|
||||
|
||||
--radius: 0.5rem;
|
||||
--background: oklch(0.12 0.015 40);
|
||||
--foreground: oklch(0.98 0.01 60);
|
||||
--card: oklch(0.16 0.03 40 / 0.6);
|
||||
--card-foreground: oklch(0.98 0.01 60);
|
||||
--popover: oklch(0.14 0.02 40 / 0.85);
|
||||
--popover-foreground: oklch(0.98 0.01 60);
|
||||
--primary: oklch(0.82 0.18 85);
|
||||
--primary-foreground: oklch(0.12 0.015 40);
|
||||
--secondary: oklch(0.65 0.2 55);
|
||||
--secondary-foreground: oklch(0.98 0.01 60);
|
||||
--muted: oklch(0.22 0.02 40 / 0.6);
|
||||
--muted-foreground: oklch(0.7 0.08 40);
|
||||
--accent: oklch(0.75 0.15 70 / 0.15);
|
||||
--accent-foreground: oklch(0.98 0.01 60);
|
||||
--destructive: oklch(0.55 0.18 25);
|
||||
--border: oklch(1 0 0 / 12%);
|
||||
--input: oklch(1 0 0 / 8%);
|
||||
--ring: oklch(0.82 0.18 85 / 40%);
|
||||
--chart-1: oklch(0.82 0.18 85);
|
||||
--chart-2: oklch(0.65 0.2 55);
|
||||
--chart-3: oklch(0.75 0.15 70);
|
||||
--chart-4: oklch(0.55 0.18 25);
|
||||
--chart-5: oklch(0.9 0.1 95);
|
||||
--sidebar: oklch(0.14 0.02 40 / 0.7);
|
||||
--sidebar-foreground: oklch(0.98 0.01 60);
|
||||
--sidebar-primary: oklch(0.82 0.18 85);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.015 40);
|
||||
--sidebar-accent: oklch(1 0 0 / 8%);
|
||||
--sidebar-accent-foreground: oklch(0.98 0.01 60);
|
||||
--sidebar-border: oklch(1 0 0 / 12%);
|
||||
--sidebar-ring: oklch(0.82 0.18 85 / 40%);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* Global Scrollbar Styling */
|
||||
html,
|
||||
body {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--muted) transparent;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-track,
|
||||
body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb,
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: var(--muted);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb:hover,
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.bg-aurora-page {
|
||||
background: radial-gradient(circle at 50% -20%, oklch(0.25 0.1 50) 0%, var(--background) 70%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.bg-aurora {
|
||||
background-image: linear-gradient(135deg, oklch(0.82 0.18 85) 0%, oklch(0.65 0.2 55) 100%);
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sun-flare {
|
||||
box-shadow: 0 0 40px oklch(0.82 0.18 85 / 0.12);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar Utility Class */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--muted) transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: var(--muted);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* Entrance Animations */
|
||||
.animate-in {
|
||||
animation-duration: 0.6s;
|
||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation-name: fade-in;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation-name: slide-up;
|
||||
}
|
||||
|
||||
.zoom-in {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
animation-name: zoom-in;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom-in {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Interaction Utilities */
|
||||
.hover-lift {
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 25px -5px oklch(0 0 0 / 0.3), 0 0 20px oklch(0.82 0.18 85 / 0.1);
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
transition: box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-glow:hover {
|
||||
border-color: oklch(0.82 0.18 85 / 0.4);
|
||||
box-shadow: 0 0 20px oklch(0.82 0.18 85 / 0.15);
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.active-press {
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.active-press:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* Staggered Delay Utilities */
|
||||
.delay-100 {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
.delay-200 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
.delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.delay-400 {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
|
||||
.delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
/* Sidebar collapsed state - center icons */
|
||||
[data-state="collapsed"] [data-sidebar="header"],
|
||||
[data-state="collapsed"] [data-sidebar="footer"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
[data-state="collapsed"] [data-sidebar="content"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
[data-state="collapsed"] [data-sidebar="group"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
[data-state="collapsed"] [data-sidebar="menu"] {
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
[data-state="collapsed"] [data-sidebar="menu-item"] {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
[data-state="collapsed"] [data-sidebar="menu-button"] {
|
||||
justify-content: center !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user