fix: resets time update

client/components/UsageProgressBar.tsx

@@ -1,18 +1,65 @@
+import { useState, useEffect } from 'react';
+
 interface UsageProgressBarProps {
   label: string;
-  resetTime: string;
   percentage: number;
-  resetAfterSeconds?: number;
-  resetAt?: string;
+  resetAt: string;
 }
 
-export function UsageProgressBar({ label, resetTime, percentage, resetAfterSeconds, resetAt }: UsageProgressBarProps) {
-  // Check if reset time has passed
-  const resetElapsed =
-    resetAfterSeconds !== undefined && (
-      resetAfterSeconds <= 0 ||
-      (resetAt && !isNaN(Date.parse(resetAt)) && Date.now() >= Date.parse(resetAt))
-    );
+export function UsageProgressBar({ label, percentage, resetAt }: UsageProgressBarProps) {
+  const [remainingTime, setRemainingTime] = useState('');
+  const [resetElapsed, setResetElapsed] = useState(false);
+
+  useEffect(() => {
+    const updateRemainingTime = () => {
+      const resetTimestamp = Date.parse(resetAt);
+
+      if (isNaN(resetTimestamp)) {
+        setRemainingTime('--');
+        setResetElapsed(false);
+        return;
+      }
+
+      const now = Date.now();
+      const diffMs = resetTimestamp - now;
+
+      if (diffMs <= 0) {
+        setResetElapsed(true);
+        setRemainingTime('');
+        return;
+      }
+
+      setResetElapsed(false);
+
+      const totalSeconds = Math.floor(diffMs / 1000);
+      const days = Math.floor(totalSeconds / 86400);
+      const hours = Math.floor((totalSeconds % 86400) / 3600);
+      const minutes = Math.floor((totalSeconds % 3600) / 60);
+      const seconds = totalSeconds % 60;
+
+      if (days > 0) {
+        if (hours > 0) {
+          setRemainingTime(`${days}d ${hours}h`);
+        } else {
+          setRemainingTime(`${days}d`);
+        }
+      } else if (hours > 0) {
+        setRemainingTime(`${hours}h ${minutes}m`);
+      } else if (minutes > 0) {
+        setRemainingTime(`${minutes}m ${seconds}s`);
+      } else {
+        setRemainingTime(`${seconds}s`);
+      }
+    };
+
+    // Initial update
+    updateRemainingTime();
+
+    // Update every second
+    const interval = setInterval(updateRemainingTime, 1000);
+
+    return () => clearInterval(interval);
+  }, [resetAt]);
 
   // If reset time has passed, show 0%
   const displayPercentage = resetElapsed ? 0 : percentage;
@@ -20,7 +67,7 @@ export function UsageProgressBar({ label, resetTime, percentage, resetAfterSecon
   return (
     <div>
       <div className="text-xs text-muted-foreground mb-1">
-        {label}{!resetElapsed && ` · Resets in ${resetTime}`}
+        {label}{!resetElapsed && remainingTime && ` · Resets in ${remainingTime}`}
       </div>
       <div className="flex items-center gap-2">
         <div className="flex-1 h-2 bg-chart-3 rounded-full overflow-hidden">