feat: dynamic pricing by disk space + episode count, total requests stat, disk bar graph
This commit is contained in:
+163
-13
@@ -13,6 +13,85 @@ const overseerClient = axios.create({
|
|||||||
headers: { "X-Api-Key": OVERSEER_API_KEY },
|
headers: { "X-Api-Key": OVERSEER_API_KEY },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let cachedDiskSpace: {
|
||||||
|
total: number;
|
||||||
|
used: number;
|
||||||
|
free: number;
|
||||||
|
usedPercent: number;
|
||||||
|
scarcityMultiplier: number;
|
||||||
|
fetchedAt: number;
|
||||||
|
} | null = null;
|
||||||
|
|
||||||
|
async function fetchDiskSpace() {
|
||||||
|
if (cachedDiskSpace && Date.now() - cachedDiskSpace.fetchedAt < 5 * 60 * 1000)
|
||||||
|
return cachedDiskSpace;
|
||||||
|
try {
|
||||||
|
const radarrRes = await overseerClient.get("/settings/radarr");
|
||||||
|
const radarr = radarrRes.data?.[0];
|
||||||
|
if (!radarr?.apiKey) throw new Error("No Radarr config");
|
||||||
|
|
||||||
|
const diskRes = await axios.get(
|
||||||
|
"http://172.20.1.225:7878/api/v3/diskspace",
|
||||||
|
{
|
||||||
|
headers: { "X-Api-Key": radarr.apiKey },
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const drives = diskRes.data || [];
|
||||||
|
// Pick the largest drive
|
||||||
|
const main = drives.reduce((a: any, b: any) =>
|
||||||
|
(a.totalSpace || 0) > (b.totalSpace || 0) ? a : b,
|
||||||
|
);
|
||||||
|
if (!main?.totalSpace) throw new Error("No disk data");
|
||||||
|
|
||||||
|
const total = main.totalSpace;
|
||||||
|
const free = main.freeSpace;
|
||||||
|
const used = total - free;
|
||||||
|
const usedPercent = used / total;
|
||||||
|
// Scarcity multiplier: 1x at 0% used, up to 3x at 100% used
|
||||||
|
const scarcityMultiplier = Math.round((1 + usedPercent * 2) * 100) / 100;
|
||||||
|
|
||||||
|
cachedDiskSpace = {
|
||||||
|
total,
|
||||||
|
used,
|
||||||
|
free,
|
||||||
|
usedPercent,
|
||||||
|
scarcityMultiplier,
|
||||||
|
fetchedAt: Date.now(),
|
||||||
|
};
|
||||||
|
return cachedDiskSpace;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Disk space fetch failed:", err);
|
||||||
|
// Fallback: no scarcity
|
||||||
|
return {
|
||||||
|
total: 0,
|
||||||
|
used: 0,
|
||||||
|
free: 0,
|
||||||
|
usedPercent: 0,
|
||||||
|
scarcityMultiplier: 1,
|
||||||
|
fetchedAt: Date.now(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatBytes(bytes: number): string {
|
||||||
|
const gb = bytes / (1024 * 1024 * 1024);
|
||||||
|
return `${Math.round(gb)} GB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTVEpisodeCost(baseCost: number, episodeCount: number): number {
|
||||||
|
// Tiered pricing based on episode count
|
||||||
|
const tiers = [
|
||||||
|
{ max: 50, mult: 1.0 },
|
||||||
|
{ max: 100, mult: 1.3 },
|
||||||
|
{ max: 200, mult: 1.6 },
|
||||||
|
{ max: 400, mult: 2.0 },
|
||||||
|
{ max: 99999, mult: 2.5 },
|
||||||
|
];
|
||||||
|
const tier =
|
||||||
|
tiers.find((t) => episodeCount <= t.max) || tiers[tiers.length - 1];
|
||||||
|
return Math.round(baseCost * (tier?.mult || 1));
|
||||||
|
}
|
||||||
|
|
||||||
const mapOverseerStatus = (status: any) => {
|
const mapOverseerStatus = (status: any) => {
|
||||||
const s = Number(status);
|
const s = Number(status);
|
||||||
if (s >= 5) return "APPROVED";
|
if (s >= 5) return "APPROVED";
|
||||||
@@ -20,18 +99,44 @@ const mapOverseerStatus = (status: any) => {
|
|||||||
return "PENDING";
|
return "PENDING";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
router.get(
|
||||||
|
"/diskspace",
|
||||||
|
authenticate,
|
||||||
|
asyncHandler(async (_req, res) => {
|
||||||
|
const disk = await fetchDiskSpace();
|
||||||
|
res.json({
|
||||||
|
total: formatBytes(disk.total),
|
||||||
|
totalBytes: disk.total,
|
||||||
|
used: formatBytes(disk.used),
|
||||||
|
usedBytes: disk.used,
|
||||||
|
free: formatBytes(disk.free),
|
||||||
|
freeBytes: disk.free,
|
||||||
|
usedPercent: Math.round(disk.usedPercent * 100),
|
||||||
|
scarcityMultiplier: disk.scarcityMultiplier,
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
router.get(
|
router.get(
|
||||||
"/costs",
|
"/costs",
|
||||||
authenticate,
|
authenticate,
|
||||||
asyncHandler(async (_req: AuthenticatedRequest, res) => {
|
asyncHandler(async (_req: AuthenticatedRequest, res) => {
|
||||||
const settings = await prisma.systemSettings.findFirst();
|
const settings = await prisma.systemSettings.findFirst();
|
||||||
res.json({
|
const disk = await fetchDiskSpace();
|
||||||
|
const base = {
|
||||||
movie: settings?.movieRequestCost || 500,
|
movie: settings?.movieRequestCost || 500,
|
||||||
tv: settings?.tvRequestCost || 1000,
|
tv: settings?.tvRequestCost || 1000,
|
||||||
tvPerSeason: settings?.tvPerSeasonCost || 250,
|
tvPerSeason: settings?.tvPerSeasonCost || 250,
|
||||||
|
};
|
||||||
|
res.json({
|
||||||
|
...base,
|
||||||
|
scarcityMultiplier: disk.scarcityMultiplier,
|
||||||
|
movieAdjusted: Math.round(base.movie * disk.scarcityMultiplier),
|
||||||
|
tvAdjusted: Math.round(base.tv * disk.scarcityMultiplier),
|
||||||
});
|
});
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
router.get(
|
router.get(
|
||||||
"/balance",
|
"/balance",
|
||||||
authenticate,
|
authenticate,
|
||||||
@@ -45,19 +150,28 @@ router.get(
|
|||||||
canRequestTV: false,
|
canRequestTV: false,
|
||||||
});
|
});
|
||||||
const settings = await prisma.systemSettings.findFirst();
|
const settings = await prisma.systemSettings.findFirst();
|
||||||
|
const disk = await fetchDiskSpace();
|
||||||
const dbBalance = user.totalEarned - user.totalSpent;
|
const dbBalance = user.totalEarned - user.totalSpent;
|
||||||
|
const movieCost = Math.round(
|
||||||
|
(settings?.movieRequestCost || 500) * disk.scarcityMultiplier,
|
||||||
|
);
|
||||||
|
const tvCost = Math.round(
|
||||||
|
(settings?.tvRequestCost || 1000) * disk.scarcityMultiplier,
|
||||||
|
);
|
||||||
res.json({
|
res.json({
|
||||||
hasWallet: true,
|
hasWallet: true,
|
||||||
balance: dbBalance,
|
balance: dbBalance,
|
||||||
canRequestMovie: dbBalance >= (settings?.movieRequestCost || 500),
|
canRequestMovie: dbBalance >= movieCost,
|
||||||
canRequestTV: dbBalance >= (settings?.tvRequestCost || 1000),
|
canRequestTV: dbBalance >= tvCost,
|
||||||
costs: {
|
costs: {
|
||||||
movie: settings?.movieRequestCost || 500,
|
movie: movieCost,
|
||||||
tv: settings?.tvRequestCost || 1000,
|
tv: tvCost,
|
||||||
|
scarcityMultiplier: disk.scarcityMultiplier,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
router.get(
|
router.get(
|
||||||
"/search",
|
"/search",
|
||||||
authenticate,
|
authenticate,
|
||||||
@@ -67,25 +181,61 @@ router.get(
|
|||||||
const response = await overseerClient.get(
|
const response = await overseerClient.get(
|
||||||
`/search?query=${encodeURIComponent(query as string)}`,
|
`/search?query=${encodeURIComponent(query as string)}`,
|
||||||
);
|
);
|
||||||
res.json(response.data);
|
const results = response.data?.results || [];
|
||||||
|
|
||||||
|
// Enrich TV results with episode count
|
||||||
|
const enriched = await Promise.all(
|
||||||
|
results.map(async (r: any) => {
|
||||||
|
if (r.mediaType !== "tv") return r;
|
||||||
|
try {
|
||||||
|
const detail = await overseerClient.get(`/tv/${r.id}`);
|
||||||
|
return {
|
||||||
|
...r,
|
||||||
|
numberOfEpisodes: detail.data?.numberOfEpisodes || 0,
|
||||||
|
numberOfSeasons: detail.data?.numberOfSeasons || 0,
|
||||||
|
};
|
||||||
|
} catch {
|
||||||
|
return r;
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
res.json({ results: enriched });
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
router.post(
|
router.post(
|
||||||
"/request",
|
"/request",
|
||||||
authenticate,
|
authenticate,
|
||||||
asyncHandler(async (req: AuthenticatedRequest, res) => {
|
asyncHandler(async (req: AuthenticatedRequest, res) => {
|
||||||
const { mediaType, mediaId, title, seasons } = req.body;
|
const { mediaType, mediaId, title, seasons, numberOfEpisodes } = req.body;
|
||||||
if (!mediaType || !mediaId || !title)
|
if (!mediaType || !mediaId || !title)
|
||||||
return res.status(400).json({ error: "Missing required fields" });
|
return res.status(400).json({ error: "Missing required fields" });
|
||||||
const user = await prisma.user.findUnique({ where: { id: req.user!.id } });
|
const user = await prisma.user.findUnique({ where: { id: req.user!.id } });
|
||||||
if (!user) return res.status(400).json({ error: "User required" });
|
if (!user) return res.status(400).json({ error: "User required" });
|
||||||
const settings = await prisma.systemSettings.findFirst();
|
const settings = await prisma.systemSettings.findFirst();
|
||||||
let cost =
|
const disk = await fetchDiskSpace();
|
||||||
mediaType === "movie"
|
|
||||||
? settings?.movieRequestCost || 500
|
let cost: number;
|
||||||
: settings?.tvRequestCost || 1000;
|
if (mediaType === "movie") {
|
||||||
if (mediaType === "tv" && seasons && seasons.length > 1)
|
cost = Math.round(
|
||||||
cost += (seasons.length - 1) * (settings?.tvPerSeasonCost || 250);
|
(settings?.movieRequestCost || 500) * disk.scarcityMultiplier,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const baseTvCost = Math.round(
|
||||||
|
(settings?.tvRequestCost || 1000) * disk.scarcityMultiplier,
|
||||||
|
);
|
||||||
|
const episodeCost = getTVEpisodeCost(baseTvCost, numberOfEpisodes || 0);
|
||||||
|
cost = episodeCost;
|
||||||
|
if (seasons && seasons.length > 1) {
|
||||||
|
cost +=
|
||||||
|
(seasons.length - 1) *
|
||||||
|
Math.round(
|
||||||
|
(settings?.tvPerSeasonCost || 250) * disk.scarcityMultiplier,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const dbBalance = user.totalEarned - user.totalSpent;
|
const dbBalance = user.totalEarned - user.totalSpent;
|
||||||
if (dbBalance < cost)
|
if (dbBalance < cost)
|
||||||
return res.status(400).json({
|
return res.status(400).json({
|
||||||
|
|||||||
@@ -60,6 +60,7 @@ services:
|
|||||||
- OVERSEER_URL=${OVERSEER_URL}
|
- OVERSEER_URL=${OVERSEER_URL}
|
||||||
- OVERSEER_API_KEY=${OVERSEER_API_KEY}
|
- OVERSEER_API_KEY=${OVERSEER_API_KEY}
|
||||||
- ENCRYPTION_KEY=${ENCRYPTION_KEY}
|
- ENCRYPTION_KEY=${ENCRYPTION_KEY}
|
||||||
|
- KOFI_VERIFICATION_TOKEN=${KOFI_VERIFICATION_TOKEN}
|
||||||
network_mode: host
|
network_mode: host
|
||||||
depends_on:
|
depends_on:
|
||||||
postgres:
|
postgres:
|
||||||
|
|||||||
@@ -21,12 +21,22 @@ export function SearchRequestModal({
|
|||||||
}: {
|
}: {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
onOpenChange: (open: boolean) => void;
|
onOpenChange: (open: boolean) => void;
|
||||||
costs: { movie: number; tv: number };
|
costs: { movie: number; tv: number; scarcityMultiplier?: number };
|
||||||
}) {
|
}) {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const [results, setResults] = useState<any[]>([]);
|
const [results, setResults] = useState<any[]>([]);
|
||||||
const [loading, setLoading] = useState(false);
|
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 () => {
|
const search = async () => {
|
||||||
if (!query) return;
|
if (!query) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
@@ -44,13 +54,15 @@ export function SearchRequestModal({
|
|||||||
|
|
||||||
const request = async (item: any, mediaType: string) => {
|
const request = async (item: any, mediaType: string) => {
|
||||||
try {
|
try {
|
||||||
|
const cost = mediaType === "movie" ? costs.movie : getTVCost(item);
|
||||||
await api.post("/overseer/request", {
|
await api.post("/overseer/request", {
|
||||||
mediaType,
|
mediaType,
|
||||||
mediaId: item.id || item.tmdbId,
|
mediaId: item.id || item.tmdbId,
|
||||||
title: item.title || item.name,
|
title: item.title || item.name,
|
||||||
seasons: item.seasons,
|
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);
|
onOpenChange(false);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error(e?.response?.data?.error || "Request flew the coop!");
|
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
|
<Search className="h-6 w-6" /> PECK FOR FEED
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
</div>
|
</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>
|
</DialogHeader>
|
||||||
|
|
||||||
<div className="p-6 space-y-6 font-sans">
|
<div className="p-6 space-y-6 font-sans">
|
||||||
@@ -91,7 +107,10 @@ export function SearchRequestModal({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="max-h-[50vh] overflow-y-auto pr-2 space-y-4 scrollbar-hide">
|
<div className="max-h-[50vh] overflow-y-auto pr-2 space-y-4 scrollbar-hide">
|
||||||
{results.map((r) => (
|
{results.map((r) => {
|
||||||
|
const itemCost =
|
||||||
|
r.mediaType === "movie" ? costs.movie : getTVCost(r);
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
key={r.id || r.tmdbId}
|
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)]"
|
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)]"
|
||||||
@@ -115,7 +134,7 @@ export function SearchRequestModal({
|
|||||||
<div className="font-black text-xl leading-tight line-clamp-1">
|
<div className="font-black text-xl leading-tight line-clamp-1">
|
||||||
{r.title || r.name}
|
{r.title || r.name}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 mt-1">
|
<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">
|
<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" ? (
|
{r.mediaType === "movie" ? (
|
||||||
<Film className="h-3 w-3" />
|
<Film className="h-3 w-3" />
|
||||||
@@ -129,13 +148,17 @@ export function SearchRequestModal({
|
|||||||
{new Date(r.releaseDate).getFullYear()}
|
{new Date(r.releaseDate).getFullYear()}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
{r.numberOfEpisodes > 0 && (
|
||||||
|
<span className="text-[10px] font-bold text-muted-foreground">
|
||||||
|
{r.numberOfEpisodes} eps
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-between gap-4 mt-2">
|
<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">
|
<div className="text-xs font-bold text-muted-foreground italic flex items-center gap-1">
|
||||||
<Egg className="h-3 w-3" />{" "}
|
<Egg className="h-3 w-3" /> {itemCost} $COOP
|
||||||
{r.mediaType === "movie" ? costs.movie : costs.tv} $COOP
|
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
@@ -147,7 +170,8 @@ export function SearchRequestModal({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
{results.length === 0 && !loading && query && (
|
{results.length === 0 && !loading && query && (
|
||||||
<div className="text-center py-10 opacity-40">
|
<div className="text-center py-10 opacity-40">
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
Activity,
|
Activity,
|
||||||
Coffee,
|
Coffee,
|
||||||
Egg,
|
Egg,
|
||||||
ExternalLink,
|
HardDrive,
|
||||||
History,
|
History,
|
||||||
LogOut,
|
LogOut,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
@@ -36,8 +36,13 @@ export default function DashboardPage() {
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { isAuthenticated, logout } = useStore();
|
const { isAuthenticated, logout } = useStore();
|
||||||
const [wallet, setWallet] = useState<WalletData | null>(null);
|
const [wallet, setWallet] = useState<WalletData | null>(null);
|
||||||
const [requestCosts, setRequestCosts] = useState({ movie: 500, tv: 1000 });
|
const [requestCosts, setRequestCosts] = useState({
|
||||||
const [pendingRequests, setPendingRequests] = useState<any[]>([]);
|
movie: 500,
|
||||||
|
tv: 1000,
|
||||||
|
scarcityMultiplier: 1,
|
||||||
|
});
|
||||||
|
const [totalRequests, setTotalRequests] = useState(0);
|
||||||
|
const [diskSpace, setDiskSpace] = useState<any>(null);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
|
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
|
||||||
const [isBuyModalOpen, setIsBuyModalOpen] = useState(false);
|
const [isBuyModalOpen, setIsBuyModalOpen] = useState(false);
|
||||||
@@ -54,30 +59,35 @@ export default function DashboardPage() {
|
|||||||
|
|
||||||
const loadWalletAndPending = async () => {
|
const loadWalletAndPending = async () => {
|
||||||
try {
|
try {
|
||||||
const [walletRes, reqRes] = await Promise.all([
|
const [walletRes, reqRes, diskRes] = await Promise.all([
|
||||||
api.get("/wallet"),
|
api.get("/wallet"),
|
||||||
userApi.getRequests(1, 10, "PENDING"),
|
userApi.getRequests(1, 100),
|
||||||
|
api.get("/overseer/diskspace"),
|
||||||
]);
|
]);
|
||||||
setWallet(walletRes.data);
|
setWallet(walletRes.data);
|
||||||
setPendingRequests(reqRes.data.requests || []);
|
setTotalRequests(reqRes.data.requests?.length || 0);
|
||||||
|
setDiskSpace(diskRes.data);
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Chickens escaped! Failed to load.");
|
toast.error("Chickens escaped! Failed to load.");
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadCosts = async () => {
|
const loadCosts = async () => {
|
||||||
try {
|
try {
|
||||||
const costsRes = await overseerApi.getCosts();
|
const costsRes = await overseerApi.getCosts();
|
||||||
setRequestCosts(costsRes.data);
|
setRequestCosts(costsRes.data);
|
||||||
} catch {}
|
} catch {}
|
||||||
};
|
};
|
||||||
|
|
||||||
const syncPending = async () => {
|
const syncPending = async () => {
|
||||||
try {
|
try {
|
||||||
await api.post("/overseer/sync-pending");
|
await api.post("/overseer/sync-pending");
|
||||||
await loadWalletAndPending();
|
await loadWalletAndPending();
|
||||||
} catch {}
|
} catch {}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLogout = async () => {
|
const handleLogout = async () => {
|
||||||
try {
|
try {
|
||||||
await authApi.logout();
|
await authApi.logout();
|
||||||
@@ -85,6 +95,7 @@ export default function DashboardPage() {
|
|||||||
logout();
|
logout();
|
||||||
router.push("/login");
|
router.push("/login");
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRefresh = () => {
|
const handleRefresh = () => {
|
||||||
loadWalletAndPending();
|
loadWalletAndPending();
|
||||||
syncPending();
|
syncPending();
|
||||||
@@ -101,20 +112,35 @@ export default function DashboardPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background p-4 sm:p-6 lg:p-8 font-sans">
|
<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">
|
<div className="mx-auto max-w-6xl space-y-6">
|
||||||
{/* Barn Header */}
|
{/* 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 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 gap-4">
|
<div className="flex items-center justify-between">
|
||||||
<div className="rounded-full bg-primary p-3 text-primary-foreground shadow-lg">
|
|
||||||
<Egg className="h-8 w-8" />
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h1 className="font-display text-4xl leading-none text-primary uppercase italic tracking-tighter">
|
<h1 className="font-display text-4xl uppercase italic tracking-tighter text-primary">
|
||||||
The Big Coop
|
THE COOP
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm font-bold text-muted-foreground">
|
<p className="text-sm font-bold text-muted-foreground">
|
||||||
Welcome back to the flock! 🐔
|
Welcome back, farmer.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
<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" />
|
<RefreshCw className="h-5 w-5" />
|
||||||
</Button>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -164,29 +183,34 @@ export default function DashboardPage() {
|
|||||||
🥚
|
🥚
|
||||||
</div>
|
</div>
|
||||||
</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="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">
|
<div className="text-xs font-black uppercase tracking-widest text-secondary-foreground/60">
|
||||||
Eggs Cooking
|
Eggs Ordered
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 text-4xl font-black text-secondary-foreground">
|
<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>
|
||||||
<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
|
<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
|
||||||
🔥
|
📋
|
||||||
</div>
|
</div>
|
||||||
</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="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">
|
<div className="text-xs font-black uppercase tracking-widest text-accent-foreground/60">
|
||||||
Market Price
|
Market Price
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 text-2xl font-black text-accent-foreground">
|
<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}
|
{requestCosts.tv}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-[10px] font-bold text-accent-foreground/50 uppercase">
|
<div className="text-[10px] font-bold text-accent-foreground/50 uppercase">
|
||||||
Movie / TV Series
|
Movie / TV Series
|
||||||
|
{requestCosts.scarcityMultiplier > 1 && (
|
||||||
|
<span className="text-destructive ml-1">
|
||||||
|
(x{requestCosts.scarcityMultiplier})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
|
<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>
|
||||||
</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 */}
|
{/* Main Yard */}
|
||||||
<div className="grid gap-8 lg:grid-cols-[1fr_320px]">
|
<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)]">
|
<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"
|
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"
|
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" />{" "}
|
<Activity className="mr-2 h-4 w-4 hidden sm:inline" /> REQUESTS
|
||||||
ORDERS
|
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="leaderboard"
|
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"
|
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>
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
<div className="p-6">
|
<TabsContent value="history" className="p-6 space-y-4">
|
||||||
<TabsContent
|
|
||||||
value="history"
|
|
||||||
className="mt-0 focus-visible:outline-none"
|
|
||||||
>
|
|
||||||
<WatchHistory />
|
<WatchHistory />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent
|
<TabsContent value="requests" className="p-6 space-y-4">
|
||||||
value="requests"
|
<RequestHistory />
|
||||||
className="mt-0 focus-visible:outline-none"
|
|
||||||
>
|
|
||||||
<RequestHistory onRefresh={handleRefresh} />
|
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent
|
<TabsContent value="leaderboard" className="p-6 space-y-4">
|
||||||
value="leaderboard"
|
|
||||||
className="mt-0 focus-visible:outline-none"
|
|
||||||
>
|
|
||||||
<Leaderboard />
|
<Leaderboard />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</div>
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user