Initial commit
This commit is contained in:
commit
84d38c5173
46 changed files with 6819 additions and 0 deletions
13
apps/dashboard/index.html
Normal file
13
apps/dashboard/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>POE2 Data Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
27
apps/dashboard/package.json
Normal file
27
apps/dashboard/package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "@poe2data/dashboard",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.22.0",
|
||||
"recharts": "^2.12.0",
|
||||
"@tanstack/react-query": "^5.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.0",
|
||||
"@vitejs/plugin-react": "^4.2.0",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"postcss": "^8.4.35",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.3.0",
|
||||
"vite": "^5.1.0"
|
||||
}
|
||||
}
|
||||
6
apps/dashboard/postcss.config.js
Normal file
6
apps/dashboard/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
53
apps/dashboard/src/App.tsx
Normal file
53
apps/dashboard/src/App.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { Routes, Route, Link, useLocation } from 'react-router-dom';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import Items from './pages/Items';
|
||||
import LeagueStart from './pages/LeagueStart';
|
||||
|
||||
const navItems = [
|
||||
{ path: '/', label: 'Dashboard' },
|
||||
{ path: '/items', label: 'Items' },
|
||||
{ path: '/league-start', label: 'League Start' },
|
||||
];
|
||||
|
||||
function App() {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Header */}
|
||||
<header className="bg-gray-800 border-b border-gray-700">
|
||||
<div className="max-w-7xl mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-amber-500">POE2 Data</h1>
|
||||
<nav className="flex gap-4">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
location.pathname === item.path
|
||||
? 'bg-amber-600 text-white'
|
||||
: 'text-gray-300 hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 py-6">
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/items" element={<Items />} />
|
||||
<Route path="/league-start" element={<LeagueStart />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
7
apps/dashboard/src/index.css
Normal file
7
apps/dashboard/src/index.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
@apply bg-gray-900 text-gray-100;
|
||||
}
|
||||
61
apps/dashboard/src/lib/api.ts
Normal file
61
apps/dashboard/src/lib/api.ts
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
const API_BASE = '/api/v1';
|
||||
|
||||
export interface Item {
|
||||
id: number;
|
||||
name: string;
|
||||
category: string;
|
||||
iconUrl: string | null;
|
||||
currentValue: number;
|
||||
change7d: number;
|
||||
volume: number;
|
||||
chaosValue: number;
|
||||
}
|
||||
|
||||
export interface CategorySummary {
|
||||
category: string;
|
||||
itemCount: number;
|
||||
topItem: string;
|
||||
topValue: number;
|
||||
avgChange7d: number;
|
||||
}
|
||||
|
||||
export interface LeagueStartPriority {
|
||||
name: string;
|
||||
category: string;
|
||||
currentValue: number;
|
||||
change7d: number;
|
||||
volume: number;
|
||||
priority: 'high' | 'medium' | 'low';
|
||||
reason: string;
|
||||
}
|
||||
|
||||
export async function fetchItems(category?: string): Promise<{ items: Item[]; count: number }> {
|
||||
const url = category ? `${API_BASE}/items?category=${category}` : `${API_BASE}/items`;
|
||||
const res = await fetch(url);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchMovers(): Promise<{ gainers: Item[]; losers: Item[] }> {
|
||||
const res = await fetch(`${API_BASE}/trends/movers`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchCategories(): Promise<{ categories: CategorySummary[] }> {
|
||||
const res = await fetch(`${API_BASE}/categories`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchLeagueStartPriorities(): Promise<{
|
||||
priorities: LeagueStartPriority[];
|
||||
summary: { high: number; medium: number; low: number };
|
||||
}> {
|
||||
const res = await fetch(`${API_BASE}/league-start/priorities`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchItemHistory(id: number): Promise<{
|
||||
history: { timestamp: number; value: number; volume: number }[];
|
||||
}> {
|
||||
const res = await fetch(`${API_BASE}/items/${id}/history`);
|
||||
return res.json();
|
||||
}
|
||||
25
apps/dashboard/src/main.tsx
Normal file
25
apps/dashboard/src/main.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 1000 * 60 * 5, // 5 minutes
|
||||
refetchInterval: 1000 * 60 * 5, // Refetch every 5 minutes
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
156
apps/dashboard/src/pages/Dashboard.tsx
Normal file
156
apps/dashboard/src/pages/Dashboard.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import { useQuery } from '@tanstack/react-query';
|
||||
import { fetchMovers, fetchCategories } from '../lib/api';
|
||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
|
||||
|
||||
function formatValue(value: number): string {
|
||||
if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
|
||||
if (value >= 1) return value.toFixed(2);
|
||||
return value.toFixed(4);
|
||||
}
|
||||
|
||||
function ChangeIndicator({ change }: { change: number }) {
|
||||
const color = change >= 0 ? 'text-green-400' : 'text-red-400';
|
||||
const arrow = change >= 0 ? '↑' : '↓';
|
||||
return (
|
||||
<span className={color}>
|
||||
{arrow} {Math.abs(change).toFixed(1)}%
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const { data: movers, isLoading: moversLoading } = useQuery({
|
||||
queryKey: ['movers'],
|
||||
queryFn: fetchMovers,
|
||||
});
|
||||
|
||||
const { data: categories, isLoading: categoriesLoading } = useQuery({
|
||||
queryKey: ['categories'],
|
||||
queryFn: fetchCategories,
|
||||
});
|
||||
|
||||
if (moversLoading || categoriesLoading) {
|
||||
return <div className="text-center py-10">Loading...</div>;
|
||||
}
|
||||
|
||||
const chartData = movers?.gainers.slice(0, 10).map((item) => ({
|
||||
name: item.name.length > 15 ? item.name.substring(0, 15) + '...' : item.name,
|
||||
change: item.change7d,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Categories Overview */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4">Categories Overview</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{categories?.categories.map((cat) => (
|
||||
<div key={cat.category} className="bg-gray-800 rounded-lg p-4">
|
||||
<div className="text-sm text-gray-400">{cat.category}</div>
|
||||
<div className="text-lg font-semibold">{cat.itemCount} items</div>
|
||||
<div className="text-sm text-amber-500">{cat.topItem}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Top: {formatValue(cat.topValue)} div
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Top Gainers Chart */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4">Top Gainers (7d)</h2>
|
||||
<div className="bg-gray-800 rounded-lg p-4 h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData} layout="vertical">
|
||||
<XAxis type="number" tickFormatter={(v) => `${v}%`} />
|
||||
<YAxis type="category" dataKey="name" width={120} tick={{ fontSize: 12 }} />
|
||||
<Tooltip
|
||||
formatter={(value: number) => [`${value.toFixed(1)}%`, '7d Change']}
|
||||
contentStyle={{ backgroundColor: '#1f2937', border: 'none' }}
|
||||
/>
|
||||
<Bar dataKey="change" radius={[0, 4, 4, 0]}>
|
||||
{chartData?.map((entry, index) => (
|
||||
<Cell key={index} fill={entry.change >= 0 ? '#10b981' : '#ef4444'} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Top Movers Tables */}
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{/* Gainers */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-green-400">Top Gainers</h2>
|
||||
<div className="bg-gray-800 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-sm">Item</th>
|
||||
<th className="px-4 py-2 text-right text-sm">Value</th>
|
||||
<th className="px-4 py-2 text-right text-sm">7d</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{movers?.gainers.slice(0, 10).map((item) => (
|
||||
<tr key={item.id} className="border-t border-gray-700 hover:bg-gray-750">
|
||||
<td className="px-4 py-2">
|
||||
<div className="font-medium">{item.name}</div>
|
||||
<div className="text-xs text-gray-400">{item.category}</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-right">
|
||||
<div>{formatValue(item.currentValue)} div</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{formatValue(item.chaosValue)} chaos
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-right">
|
||||
<ChangeIndicator change={item.change7d} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Losers */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-red-400">Top Losers</h2>
|
||||
<div className="bg-gray-800 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-sm">Item</th>
|
||||
<th className="px-4 py-2 text-right text-sm">Value</th>
|
||||
<th className="px-4 py-2 text-right text-sm">7d</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{movers?.losers.slice(0, 10).map((item) => (
|
||||
<tr key={item.id} className="border-t border-gray-700 hover:bg-gray-750">
|
||||
<td className="px-4 py-2">
|
||||
<div className="font-medium">{item.name}</div>
|
||||
<div className="text-xs text-gray-400">{item.category}</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-right">
|
||||
<div>{formatValue(item.currentValue)} div</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{formatValue(item.chaosValue)} chaos
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-right">
|
||||
<ChangeIndicator change={item.change7d} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
156
apps/dashboard/src/pages/Items.tsx
Normal file
156
apps/dashboard/src/pages/Items.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { fetchItems, fetchCategories, Item } from '../lib/api';
|
||||
|
||||
function formatValue(value: number): string {
|
||||
if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
|
||||
if (value >= 1) return value.toFixed(2);
|
||||
return value.toFixed(4);
|
||||
}
|
||||
|
||||
function ChangeIndicator({ change }: { change: number }) {
|
||||
const color = change >= 0 ? 'text-green-400' : 'text-red-400';
|
||||
const arrow = change >= 0 ? '↑' : '↓';
|
||||
return (
|
||||
<span className={color}>
|
||||
{arrow} {Math.abs(change).toFixed(1)}%
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Items() {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [sortBy, setSortBy] = useState<'value' | 'change' | 'volume'>('value');
|
||||
|
||||
const { data: categories } = useQuery({
|
||||
queryKey: ['categories'],
|
||||
queryFn: fetchCategories,
|
||||
});
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['items', selectedCategory],
|
||||
queryFn: () => fetchItems(selectedCategory || undefined),
|
||||
});
|
||||
|
||||
let filteredItems = data?.items || [];
|
||||
|
||||
// Filter by search
|
||||
if (searchTerm) {
|
||||
filteredItems = filteredItems.filter((item) =>
|
||||
item.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
// Sort
|
||||
filteredItems = [...filteredItems].sort((a, b) => {
|
||||
if (sortBy === 'value') return b.currentValue - a.currentValue;
|
||||
if (sortBy === 'change') return b.change7d - a.change7d;
|
||||
return b.volume - a.volume;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Category</label>
|
||||
<select
|
||||
value={selectedCategory}
|
||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||
className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">All Categories</option>
|
||||
{categories?.categories.map((cat) => (
|
||||
<option key={cat.category} value={cat.category}>
|
||||
{cat.category} ({cat.itemCount})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Search</label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search items..."
|
||||
className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm w-64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Sort By</label>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as any)}
|
||||
className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="value">Value</option>
|
||||
<option value="change">7d Change</option>
|
||||
<option value="volume">Volume</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto text-sm text-gray-400">
|
||||
{filteredItems.length} items
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Items Table */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-10">Loading...</div>
|
||||
) : (
|
||||
<div className="bg-gray-800 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-sm">Item</th>
|
||||
<th className="px-4 py-3 text-left text-sm">Category</th>
|
||||
<th className="px-4 py-3 text-right text-sm">Value (Divine)</th>
|
||||
<th className="px-4 py-3 text-right text-sm">Value (Chaos)</th>
|
||||
<th className="px-4 py-3 text-right text-sm">7d Change</th>
|
||||
<th className="px-4 py-3 text-right text-sm">Volume</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredItems.map((item) => (
|
||||
<tr
|
||||
key={item.id}
|
||||
className="border-t border-gray-700 hover:bg-gray-750"
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{item.iconUrl && (
|
||||
<img
|
||||
src={`https://web.poecdn.com${item.iconUrl}`}
|
||||
alt=""
|
||||
className="w-8 h-8 object-contain"
|
||||
/>
|
||||
)}
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-400">{item.category}</td>
|
||||
<td className="px-4 py-3 text-right font-mono">
|
||||
{formatValue(item.currentValue)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right font-mono text-gray-400">
|
||||
{formatValue(item.chaosValue)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<ChangeIndicator change={item.change7d} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-gray-400">
|
||||
{formatValue(item.volume)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
160
apps/dashboard/src/pages/LeagueStart.tsx
Normal file
160
apps/dashboard/src/pages/LeagueStart.tsx
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
import { useQuery } from '@tanstack/react-query';
|
||||
import { fetchLeagueStartPriorities } from '../lib/api';
|
||||
|
||||
function formatValue(value: number): string {
|
||||
if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
|
||||
if (value >= 1) return value.toFixed(2);
|
||||
return value.toFixed(4);
|
||||
}
|
||||
|
||||
function ChangeIndicator({ change }: { change: number }) {
|
||||
const color = change >= 0 ? 'text-green-400' : 'text-red-400';
|
||||
const arrow = change >= 0 ? '↑' : '↓';
|
||||
return (
|
||||
<span className={color}>
|
||||
{arrow} {Math.abs(change).toFixed(1)}%
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function PriorityBadge({ priority }: { priority: 'high' | 'medium' | 'low' }) {
|
||||
const colors = {
|
||||
high: 'bg-red-500/20 text-red-400 border-red-500/50',
|
||||
medium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50',
|
||||
low: 'bg-gray-500/20 text-gray-400 border-gray-500/50',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium border ${colors[priority]}`}>
|
||||
{priority.toUpperCase()}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LeagueStart() {
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['league-start'],
|
||||
queryFn: fetchLeagueStartPriorities,
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-center py-10">Loading...</div>;
|
||||
}
|
||||
|
||||
const highPriority = data?.priorities.filter((p) => p.priority === 'high') || [];
|
||||
const mediumPriority = data?.priorities.filter((p) => p.priority === 'medium') || [];
|
||||
const lowPriority = data?.priorities.filter((p) => p.priority === 'low') || [];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-red-400">{data?.summary.high}</div>
|
||||
<div className="text-sm text-gray-400">High Priority</div>
|
||||
</div>
|
||||
<div className="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-yellow-400">{data?.summary.medium}</div>
|
||||
<div className="text-sm text-gray-400">Medium Priority</div>
|
||||
</div>
|
||||
<div className="bg-gray-500/10 border border-gray-500/30 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-gray-400">{data?.summary.low}</div>
|
||||
<div className="text-sm text-gray-400">Low Priority</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* High Priority Section */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-red-400">
|
||||
High Priority - Farm These First
|
||||
</h2>
|
||||
<div className="bg-gray-800 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-sm">Item</th>
|
||||
<th className="px-4 py-3 text-left text-sm">Category</th>
|
||||
<th className="px-4 py-3 text-right text-sm">Value</th>
|
||||
<th className="px-4 py-3 text-right text-sm">7d Change</th>
|
||||
<th className="px-4 py-3 text-left text-sm">Reason</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{highPriority.slice(0, 15).map((item, i) => (
|
||||
<tr key={i} className="border-t border-gray-700 hover:bg-gray-750">
|
||||
<td className="px-4 py-3 font-medium">{item.name}</td>
|
||||
<td className="px-4 py-3 text-gray-400">{item.category}</td>
|
||||
<td className="px-4 py-3 text-right font-mono">
|
||||
{formatValue(item.currentValue)} div
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<ChangeIndicator change={item.change7d} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-400">{item.reason}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Medium Priority Section */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-yellow-400">
|
||||
Medium Priority - Good Opportunities
|
||||
</h2>
|
||||
<div className="bg-gray-800 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-sm">Item</th>
|
||||
<th className="px-4 py-3 text-left text-sm">Category</th>
|
||||
<th className="px-4 py-3 text-right text-sm">Value</th>
|
||||
<th className="px-4 py-3 text-right text-sm">7d Change</th>
|
||||
<th className="px-4 py-3 text-left text-sm">Reason</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mediumPriority.slice(0, 15).map((item, i) => (
|
||||
<tr key={i} className="border-t border-gray-700 hover:bg-gray-750">
|
||||
<td className="px-4 py-3 font-medium">{item.name}</td>
|
||||
<td className="px-4 py-3 text-gray-400">{item.category}</td>
|
||||
<td className="px-4 py-3 text-right font-mono">
|
||||
{formatValue(item.currentValue)} div
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<ChangeIndicator change={item.change7d} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-400">{item.reason}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Tips Section */}
|
||||
<section className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-amber-400 mb-3">League Start Tips</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-300">
|
||||
<li>
|
||||
<strong>High Priority Items:</strong> These have high value and good demand - focus on
|
||||
farming these early in the league when prices are typically higher.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Rising Prices:</strong> Items with large positive 7d changes may continue
|
||||
rising - consider holding these.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Volume Matters:</strong> High volume means easy selling - important for league
|
||||
start currency building.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Check Daily:</strong> Prices change rapidly in the first weeks - scrape data
|
||||
frequently!
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
8
apps/dashboard/tailwind.config.js
Normal file
8
apps/dashboard/tailwind.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
21
apps/dashboard/tsconfig.json
Normal file
21
apps/dashboard/tsconfig.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
10
apps/dashboard/tsconfig.node.json
Normal file
10
apps/dashboard/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
15
apps/dashboard/vite.config.ts
Normal file
15
apps/dashboard/vite.config.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3001',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue