added days, fixed >99 not displaying

apps/hub/app/(app)/_components/PenaltyCountdown.tsx

@@ -8,27 +8,37 @@ interface PenaltyCountdownProps {
 function getTimeLeft(until: string | Date) {
 	const untilDate = new Date(until).getTime();
 	const now = Date.now();
-	let diff = Math.max(0, untilDate - now);
-	const hours = Math.floor(diff / (1000 * 60 * 60));
-	diff -= hours * 1000 * 60 * 60;
-	const minutes = Math.floor(diff / (1000 * 60));
-	diff -= minutes * 1000 * 60;
-	const seconds = Math.floor(diff / 1000);
-	return { hours, minutes, seconds };
+	const diff = Math.max(0, untilDate - now);
+	const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+	const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+	const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+	const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+	return { days, hours, minutes, seconds };
 }
 
 export const PenaltyCountdown: React.FC<PenaltyCountdownProps> = ({ until }) => {
 	const [timeLeft, setTimeLeft] = useState(() => getTimeLeft(until));
+	const [mounted, setMounted] = useState(false);
 
 	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	useEffect(() => {
+		if (!mounted) return;
 		const interval = setInterval(() => {
 			setTimeLeft(getTimeLeft(until));
 		}, 1000);
 		return () => clearInterval(interval);
-	}, [until]);
+	}, [until, mounted]);
+
+	console.log("PenaltyCountdown until:", until, "timeLeft:", timeLeft);
+
+	if (!mounted) return null;
 
 	return (
 		<span className="countdown text-3xl">
+			{timeLeft.days > 0 && timeLeft.days + "d"}
 			<span style={{ "--value": timeLeft.hours } as React.CSSProperties} aria-live="polite">
 				{timeLeft.hours}
 			</span>