feat: dynamic pricing by disk space + episode count, total requests stat, disk bar graph
This commit is contained in:
@@ -4,7 +4,7 @@ import {
|
||||
Activity,
|
||||
Coffee,
|
||||
Egg,
|
||||
ExternalLink,
|
||||
HardDrive,
|
||||
History,
|
||||
LogOut,
|
||||
RefreshCw,
|
||||
@@ -36,8 +36,13 @@ export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const { isAuthenticated, logout } = useStore();
|
||||
const [wallet, setWallet] = useState<WalletData | null>(null);
|
||||
const [requestCosts, setRequestCosts] = useState({ movie: 500, tv: 1000 });
|
||||
const [pendingRequests, setPendingRequests] = useState<any[]>([]);
|
||||
const [requestCosts, setRequestCosts] = useState({
|
||||
movie: 500,
|
||||
tv: 1000,
|
||||
scarcityMultiplier: 1,
|
||||
});
|
||||
const [totalRequests, setTotalRequests] = useState(0);
|
||||
const [diskSpace, setDiskSpace] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
|
||||
const [isBuyModalOpen, setIsBuyModalOpen] = useState(false);
|
||||
@@ -54,30 +59,35 @@ export default function DashboardPage() {
|
||||
|
||||
const loadWalletAndPending = async () => {
|
||||
try {
|
||||
const [walletRes, reqRes] = await Promise.all([
|
||||
const [walletRes, reqRes, diskRes] = await Promise.all([
|
||||
api.get("/wallet"),
|
||||
userApi.getRequests(1, 10, "PENDING"),
|
||||
userApi.getRequests(1, 100),
|
||||
api.get("/overseer/diskspace"),
|
||||
]);
|
||||
setWallet(walletRes.data);
|
||||
setPendingRequests(reqRes.data.requests || []);
|
||||
setTotalRequests(reqRes.data.requests?.length || 0);
|
||||
setDiskSpace(diskRes.data);
|
||||
} catch {
|
||||
toast.error("Chickens escaped! Failed to load.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadCosts = async () => {
|
||||
try {
|
||||
const costsRes = await overseerApi.getCosts();
|
||||
setRequestCosts(costsRes.data);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const syncPending = async () => {
|
||||
try {
|
||||
await api.post("/overseer/sync-pending");
|
||||
await loadWalletAndPending();
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await authApi.logout();
|
||||
@@ -85,6 +95,7 @@ export default function DashboardPage() {
|
||||
logout();
|
||||
router.push("/login");
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
loadWalletAndPending();
|
||||
syncPending();
|
||||
@@ -101,20 +112,35 @@ export default function DashboardPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-4 sm:p-6 lg:p-8 font-sans">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
{/* Barn Header */}
|
||||
<div className="flex flex-col items-center justify-between gap-4 rounded-3xl border-4 border-primary bg-accent/20 p-6 shadow-[8px_8px_0px_0px_rgba(192,111,74,1)] md:flex-row">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-primary p-3 text-primary-foreground shadow-lg">
|
||||
<Egg className="h-8 w-8" />
|
||||
</div>
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 rounded-3xl border-4 border-foreground bg-card p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="font-display text-4xl leading-none text-primary uppercase italic tracking-tighter">
|
||||
The Big Coop
|
||||
<h1 className="font-display text-4xl uppercase italic tracking-tighter text-primary">
|
||||
THE COOP
|
||||
</h1>
|
||||
<p className="text-sm font-bold text-muted-foreground">
|
||||
Welcome back to the flock! 🐔
|
||||
Welcome back, farmer.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleRefresh}
|
||||
className="rounded-full border-2 border-foreground"
|
||||
>
|
||||
<RefreshCw className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleLogout}
|
||||
className="rounded-full font-bold text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<LogOut className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||
@@ -140,13 +166,6 @@ export default function DashboardPage() {
|
||||
>
|
||||
<RefreshCw className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleLogout}
|
||||
className="rounded-full font-bold text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<LogOut className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -164,29 +183,34 @@ export default function DashboardPage() {
|
||||
🥚
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative rounded-3xl border-4 border-foreground bg-secondary p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all">
|
||||
<div className="text-xs font-black uppercase tracking-widest text-secondary-foreground/60">
|
||||
Eggs Cooking
|
||||
Eggs Ordered
|
||||
</div>
|
||||
<div className="mt-2 text-4xl font-black text-secondary-foreground">
|
||||
{pendingRequests.length} <span className="text-sm">Requests</span>
|
||||
{totalRequests}{" "}
|
||||
<span className="text-sm">Requests</span>
|
||||
</div>
|
||||
<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
|
||||
🔥
|
||||
📋
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative rounded-3xl border-4 border-foreground bg-accent p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all">
|
||||
<div className="text-xs font-black uppercase tracking-widest text-accent-foreground/60">
|
||||
Market Price
|
||||
</div>
|
||||
<div className="mt-2 text-2xl font-black text-accent-foreground">
|
||||
{requestCosts.movie} <span className="text-sm">/</span>{" "}
|
||||
{requestCosts.movie}{" "}
|
||||
<span className="text-sm">/</span>{" "}
|
||||
{requestCosts.tv}
|
||||
</div>
|
||||
<div className="text-[10px] font-bold text-accent-foreground/50 uppercase">
|
||||
Movie / TV Series
|
||||
{requestCosts.scarcityMultiplier > 1 && (
|
||||
<span className="text-destructive ml-1">
|
||||
(x{requestCosts.scarcityMultiplier})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
|
||||
🌽
|
||||
@@ -194,6 +218,41 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Disk Space */}
|
||||
{diskSpace && diskSpace.totalBytes > 0 && (
|
||||
<div className="rounded-3xl border-4 border-foreground bg-card p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<HardDrive className="h-5 w-5 text-primary" />
|
||||
<h3 className="font-black uppercase tracking-widest text-sm text-muted-foreground">
|
||||
The Silo
|
||||
</h3>
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
<span className="text-primary">{diskSpace.used}</span>
|
||||
<span className="text-muted-foreground"> / {diskSpace.total}</span>
|
||||
<span className="text-destructive ml-2">({diskSpace.usedPercent}%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-6 w-full rounded-full border-2 border-foreground bg-muted overflow-hidden shadow-inner">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary transition-all duration-500"
|
||||
style={{
|
||||
width: `${diskSpace.usedPercent}%`,
|
||||
backgroundColor:
|
||||
diskSpace.usedPercent > 90
|
||||
? "hsl(var(--destructive))"
|
||||
: "hsl(var(--primary))",
|
||||
/>
|
||||
</div>
|
||||
{diskSpace.scarcityMultiplier > 1 && (
|
||||
<p className="text-xs font-bold text-destructive mt-2 uppercase tracking-widest">
|
||||
Silo filling up! Prices x{diskSpace.scarcityMultiplier}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Yard */}
|
||||
<div className="grid gap-8 lg:grid-cols-[1fr_320px]">
|
||||
<div className="rounded-[3rem] border-4 border-foreground bg-card shadow-[12px_12px_0px_0px_rgba(0,0,0,0.1)]">
|
||||
@@ -209,36 +268,24 @@ export default function DashboardPage() {
|
||||
value="requests"
|
||||
className="flex items-center justify-center rounded-full py-3 font-black uppercase transition-all data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
||||
>
|
||||
<ExternalLink className="mr-2 h-4 w-4 hidden sm:inline" />{" "}
|
||||
ORDERS
|
||||
<Activity className="mr-2 h-4 w-4 hidden sm:inline" /> REQUESTS
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="leaderboard"
|
||||
className="flex items-center justify-center rounded-full py-3 font-black uppercase transition-all data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
||||
>
|
||||
<Users className="mr-2 h-4 w-4 hidden sm:inline" /> FLOCK
|
||||
<Users className="mr-2 h-4 w-4 hidden sm:inline" /> PECKING ORDER
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<div className="p-6">
|
||||
<TabsContent
|
||||
value="history"
|
||||
className="mt-0 focus-visible:outline-none"
|
||||
>
|
||||
<WatchHistory />
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
value="requests"
|
||||
className="mt-0 focus-visible:outline-none"
|
||||
>
|
||||
<RequestHistory onRefresh={handleRefresh} />
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
value="leaderboard"
|
||||
className="mt-0 focus-visible:outline-none"
|
||||
>
|
||||
<Leaderboard />
|
||||
</TabsContent>
|
||||
</div>
|
||||
<TabsContent value="history" className="p-6 space-y-4">
|
||||
<WatchHistory />
|
||||
</TabsContent>
|
||||
<TabsContent value="requests" className="p-6 space-y-4">
|
||||
<RequestHistory />
|
||||
</TabsContent>
|
||||
<TabsContent value="leaderboard" className="p-6 space-y-4">
|
||||
<Leaderboard />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user