Readme

features/contracts/components/contract-countdown.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Clock, AlertCircle } from "lucide-react";
+
+interface ContractCountdownProps {
+  endDate?: string | null;
+  className?: string;
+}
+
+export function ContractCountdown({
+  endDate,
+  className = "",
+}: ContractCountdownProps) {
+  const [daysLeft, setDaysLeft] = useState<number | null>(null);
+  const [isExpired, setIsExpired] = useState(false);
+
+  useEffect(() => {
+    if (!endDate) {
+      setDaysLeft(null);
+      return;
+    }
+
+    const calculateDaysLeft = () => {
+      const end = new Date(endDate);
+      const today = new Date();
+
+      // Reset time for comparison
+      end.setHours(0, 0, 0, 0);
+      today.setHours(0, 0, 0, 0);
+
+      const timeDiff = end.getTime() - today.getTime();
+      const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
+
+      setIsExpired(days < 0);
+      setDaysLeft(days);
+    };
+
+    calculateDaysLeft();
+
+    // Update every minute to keep countdown fresh
+    const interval = setInterval(calculateDaysLeft, 60000);
+
+    return () => clearInterval(interval);
+  }, [endDate]);
+
+  if (daysLeft === null) {
+    return null;
+  }
+
+  // Determine colors based on urgency
+  const getUrgencyStyle = () => {
+    if (isExpired) {
+      return {
+        bg: "bg-red-500/15",
+        border: "border-red-500/40",
+        text: "text-red-700 dark:text-red-300",
+        icon: "text-red-500",
+        label: "Expired",
+      };
+    }
+
+    if (daysLeft < 7) {
+      return {
+        bg: "bg-red-500/15",
+        border: "border-red-500/40",
+        text: "text-red-700 dark:text-red-300",
+        icon: "text-red-500",
+        label: `${daysLeft} day${daysLeft !== 1 ? "s" : ""} left`,
+      };
+    }
+
+    if (daysLeft < 14) {
+      return {
+        bg: "bg-orange-500/15",
+        border: "border-orange-500/40",
+        text: "text-orange-700 dark:text-orange-300",
+        icon: "text-orange-500",
+        label: `${daysLeft} days left`,
+      };
+    }
+
+    if (daysLeft < 30) {
+      return {
+        bg: "bg-amber-500/15",
+        border: "border-amber-500/40",
+        text: "text-amber-700 dark:text-amber-300",
+        icon: "text-amber-500",
+        label: `${daysLeft} days left`,
+      };
+    }
+
+    return {
+      bg: "bg-green-500/15",
+      border: "border-green-500/40",
+      text: "text-green-700 dark:text-green-300",
+      icon: "text-green-500",
+      label: `${daysLeft} days left`,
+    };
+  };
+
+  const urgency = getUrgencyStyle();
+
+  return (
+    <div
+      className={`inline-flex items-center gap-2 rounded-full border ${urgency.bg} ${urgency.border} px-3 py-1.5 text-[11px] font-bold uppercase tracking-wider ${urgency.text} ${className}`}
+    >
+      {isExpired ? (
+        <AlertCircle className={`h-3.5 w-3.5 ${urgency.icon}`} />
+      ) : (
+        <Clock className={`h-3.5 w-3.5 ${urgency.icon} animate-pulse`} />
+      )}
+      {urgency.label}
+    </div>
+  );
+}

features/contracts/components/list/contracts-list.tsx

@@ -60,6 +60,7 @@ import {
 import { toast } from "sonner";
 import { ContractChatModal } from "@/features/contracts/components/modals/contract-chat-modal";
 import { ContractProofModal } from "@/features/contracts/components/modals/contract-proof-modal";
+import { ContractCountdown } from "@/features/contracts/components/contract-countdown";
 import {
   stripMarkdown,
   exportToCSV,
@@ -1122,6 +1123,10 @@ export function ContractsList({ refreshTrigger }: { refreshTrigger?: number }) {
                           />
                           {status.label}
                         </span>
+                        {contract.endDate &&
+                          contract.status === "COMPLETED" && (
+                            <ContractCountdown endDate={contract.endDate} />
+                          )}
                         {contract.isRagged && (
                           <span className="inline-flex items-center gap-1 rounded-full border border-cyan-500/30 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-cyan-700 dark:text-cyan-300">
                             <Network className="h-3 w-3" />