feat: dynamic pricing by disk space + episode count, total requests stat, disk bar graph

2026-04-23 12:36:50 -04:00
parent ad85beef6b
commit 2d897e45ed
4 changed files with 339 additions and 117 deletions
@@ -21,12 +21,22 @@ export function SearchRequestModal({
 }: {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
-	costs: { movie: number; tv: number };
+	costs: { movie: number; tv: number; scarcityMultiplier?: number };
 }) {
 	const [query, setQuery] = useState("");
 	const [results, setResults] = useState<any[]>([]);
 	const [loading, setLoading] = useState(false);

+	const getTVCost = (item: any) => {
+		const base = costs.tv;
+		const eps = item.numberOfEpisodes || 0;
+		if (eps <= 50) return base;
+		if (eps <= 100) return Math.round(base * 1.3);
+		if (eps <= 200) return Math.round(base * 1.6);
+		if (eps <= 400) return Math.round(base * 2.0);
+		return Math.round(base * 2.5);
+	};
+
 	const search = async () => {
 		if (!query) return;
 		setLoading(true);
@@ -44,13 +54,15 @@ export function SearchRequestModal({

 	const request = async (item: any, mediaType: string) => {
 		try {
+			const cost = mediaType === "movie" ? costs.movie : getTVCost(item);
 			await api.post("/overseer/request", {
 				mediaType,
 				mediaId: item.id || item.tmdbId,
 				title: item.title || item.name,
 				seasons: item.seasons,
+				numberOfEpisodes: item.numberOfEpisodes || 0,
 			});
-			toast.success("Golden egg sent to the farmer!");
+			toast.success(`Golden egg sent! ${cost} $COOP deducted.`);
 			onOpenChange(false);
 		} catch (e: any) {
 			toast.error(e?.response?.data?.error || "Request flew the coop!");
@@ -66,7 +78,11 @@ export function SearchRequestModal({
 							<Search className="h-6 w-6" /> PECK FOR FEED
 						</DialogTitle>
 					</div>
-					<DialogDescription className="text-primary-foreground/90 font-bold italic"></DialogDescription>
+					<DialogDescription className="text-primary-foreground/90 font-bold italic">
+						{costs.scarcityMultiplier && costs.scarcityMultiplier > 1
+							? `Market scarcity: x${costs.scarcityMultiplier}`
+							: ""}
+					</DialogDescription>
 				</DialogHeader>

 				<div className="p-6 space-y-6 font-sans">
@@ -91,63 +107,71 @@ export function SearchRequestModal({
 					</div>

 					<div className="max-h-[50vh] overflow-y-auto pr-2 space-y-4 scrollbar-hide">
-						{results.map((r) => (
-							<div
-								key={r.id || r.tmdbId}
-								className="group flex gap-4 border-4 border-foreground bg-card p-3 rounded-3xl hover:bg-accent/5 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.1)]"
-							>
-								<div className="relative h-28 w-20 flex-shrink-0 overflow-hidden rounded-xl border-2 border-foreground bg-muted shadow-sm">
-									{r.posterPath ? (
-										<img
-											src={`https://image.tmdb.org/t/p/w200${r.posterPath}`}
-											alt={r.title || r.name}
-											className="h-full w-full object-cover group-hover:scale-110 transition-transform duration-300"
-										/>
-									) : (
-										<div className="flex h-full w-full items-center justify-center bg-secondary/20">
-											<Film className="h-8 w-8 text-muted-foreground/30" />
-										</div>
-									)}
-								</div>
+						{results.map((r) => {
+							const itemCost =
+								r.mediaType === "movie" ? costs.movie : getTVCost(r);
+							return (
+								<div
+									key={r.id || r.tmdbId}
+									className="group flex gap-4 border-4 border-foreground bg-card p-3 rounded-3xl hover:bg-accent/5 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.1)]"
+								>
+									<div className="relative h-28 w-20 flex-shrink-0 overflow-hidden rounded-xl border-2 border-foreground bg-muted shadow-sm">
+										{r.posterPath ? (
+											<img
+												src={`https://image.tmdb.org/t/p/w200${r.posterPath}`}
+												alt={r.title || r.name}
+												className="h-full w-full object-cover group-hover:scale-110 transition-transform duration-300"
+											/>
+										) : (
+											<div className="flex h-full w-full items-center justify-center bg-secondary/20">
+												<Film className="h-8 w-8 text-muted-foreground/30" />
+											</div>
+										)}
+									</div>

-								<div className="flex flex-1 flex-col justify-between py-1">
-									<div>
-										<div className="font-black text-xl leading-tight line-clamp-1">
-											{r.title || r.name}
-										</div>
-										<div className="flex items-center gap-2 mt-1">
-											<span className="inline-flex items-center gap-1 rounded-full bg-secondary/30 px-2 py-0.5 text-[10px] font-black uppercase text-secondary-foreground border border-foreground/10">
-												{r.mediaType === "movie" ? (
-													<Film className="h-3 w-3" />
-												) : (
-													<Tv className="h-3 w-3" />
-												)}
-												{r.mediaType || "unknown"}
-											</span>
-											{r.releaseDate && (
-												<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
-													{new Date(r.releaseDate).getFullYear()}
+									<div className="flex flex-1 flex-col justify-between py-1">
+										<div>
+											<div className="font-black text-xl leading-tight line-clamp-1">
+												{r.title || r.name}
+											</div>
+											<div className="flex items-center gap-2 mt-1 flex-wrap">
+												<span className="inline-flex items-center gap-1 rounded-full bg-secondary/30 px-2 py-0.5 text-[10px] font-black uppercase text-secondary-foreground border border-foreground/10">
+													{r.mediaType === "movie" ? (
+														<Film className="h-3 w-3" />
+													) : (
+														<Tv className="h-3 w-3" />
+													)}
+													{r.mediaType || "unknown"}
 												</span>
-											)}
+												{r.releaseDate && (
+													<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
+														{new Date(r.releaseDate).getFullYear()}
+													</span>
+												)}
+												{r.numberOfEpisodes > 0 && (
+													<span className="text-[10px] font-bold text-muted-foreground">
+														{r.numberOfEpisodes} eps
+													</span>
+												)}
+											</div>
 										</div>
-									</div>

-									<div className="flex items-center justify-between gap-4 mt-2">
-										<div className="text-xs font-bold text-muted-foreground italic flex items-center gap-1">
-											<Egg className="h-3 w-3" />{" "}
-											{r.mediaType === "movie" ? costs.movie : costs.tv} $COOP
+										<div className="flex items-center justify-between gap-4 mt-2">
+											<div className="text-xs font-bold text-muted-foreground italic flex items-center gap-1">
+												<Egg className="h-3 w-3" /> {itemCost} $COOP
+											</div>
+											<Button
+												size="sm"
+												onClick={() => request(r, r.mediaType || "movie")}
+												className="rounded-full border-2 border-foreground font-black text-xs hover:bg-primary hover:text-white transition-colors"
+											>
+												REQUEST <PlusCircle className="ml-1 h-3 w-3" />
+											</Button>
 										</div>
-										<Button
-											size="sm"
-											onClick={() => request(r, r.mediaType || "movie")}
-											className="rounded-full border-2 border-foreground font-black text-xs hover:bg-primary hover:text-white transition-colors"
-										>
-											REQUEST <PlusCircle className="ml-1 h-3 w-3" />
-										</Button>
 									</div>
 								</div>
-							</div>
-						))}
+							);
+						})}

 						{results.length === 0 && !loading && query && (
 							<div className="text-center py-10 opacity-40">
@@ -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>