diff --git a/components/dashboard/milestone-progress-tracker.tsx b/components/dashboard/milestone-progress-tracker.tsx
new file mode 100644
index 0000000..cdcad7b
--- /dev/null
+++ b/components/dashboard/milestone-progress-tracker.tsx
@@ -0,0 +1,960 @@
+"use client";
+
+import React, { useState, useTransition } from "react";
+import {
+ Clock,
+ Play,
+ FileUp,
+ CheckCircle2,
+ Award,
+ AlertCircle,
+ TrendingUp,
+ DollarSign,
+ Lock,
+ ChevronRight,
+ ListFilter,
+ Layers,
+ LayoutGrid,
+ Calendar,
+ CheckSquare,
+ AlertTriangle,
+ Loader2,
+ Eye,
+ Settings,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+
+// Milestone and overall types
+export interface Milestone {
+ id: string;
+ title: string;
+ description: string | null;
+ amount: string | number;
+ currency: string;
+ due_date: string | null;
+ status: "pending" | "in_progress" | "submitted" | "approved" | "rejected" | "paid" | string;
+ sort_order?: number;
+ deliverables?: string[] | null | any; // Could be a JSON string or string array
+ submitted_at?: string | null;
+ approved_at?: string | null;
+ paid_at?: string | null;
+}
+
+export type UserRole = "client" | "freelancer" | "admin";
+
+interface MilestoneProgressTrackerProps {
+ milestones: Milestone[];
+ onStatusUpdate?: (milestoneId: string, newStatus: string, deliverablesData?: any) => Promise
;
+ userRole?: UserRole;
+ contractAddress?: string;
+ isLoading?: boolean;
+}
+
+// Configs for milestone states
+export const STATE_CONFIG: Record<
+ string,
+ {
+ label: string;
+ icon: React.ComponentType<{ className?: string }>;
+ color: string;
+ bgColor: string;
+ borderColor: string;
+ glowColor: string;
+ description: string;
+ }
+> = {
+ pending: {
+ label: "Pending",
+ icon: Clock,
+ color: "text-muted-foreground",
+ bgColor: "bg-muted/10",
+ borderColor: "border-muted-foreground/20",
+ glowColor: "shadow-none",
+ description: "Milestone created. Freelancer has not started work yet.",
+ },
+ in_progress: {
+ label: "In Progress",
+ icon: Play,
+ color: "text-indigo-400",
+ bgColor: "bg-indigo-500/10",
+ borderColor: "border-indigo-500/30",
+ glowColor: "shadow-[0_0_15px_-3px_rgba(99,102,241,0.2)]",
+ description: "Freelancer is actively working on deliverables.",
+ },
+ submitted: {
+ label: "Submitted",
+ icon: FileUp,
+ color: "text-amber-400",
+ bgColor: "bg-amber-500/10",
+ borderColor: "border-amber-500/30",
+ glowColor: "shadow-[0_0_15px_-3px_rgba(245,158,11,0.2)]",
+ description: "Work completed & deliverables submitted. Awaiting client approval.",
+ },
+ approved: {
+ label: "Approved",
+ icon: CheckCircle2,
+ color: "text-emerald-400",
+ bgColor: "bg-emerald-500/10",
+ borderColor: "border-emerald-500/30",
+ glowColor: "shadow-[0_0_15px_-3px_rgba(16,185,129,0.2)]",
+ description: "Deliverables approved by client. Payment authorized for release.",
+ },
+ paid: {
+ label: "Paid",
+ icon: Award,
+ color: "text-violet-400",
+ bgColor: "bg-violet-500/10",
+ borderColor: "border-violet-500/30",
+ glowColor: "shadow-[0_0_15px_-3px_rgba(139,92,246,0.2)]",
+ description: "Funds released from escrow. Payout completed on-chain.",
+ },
+ rejected: {
+ label: "Revision Requested",
+ icon: AlertTriangle,
+ color: "text-rose-400",
+ bgColor: "bg-rose-500/10",
+ borderColor: "border-rose-500/30",
+ glowColor: "shadow-[0_0_15px_-3px_rgba(244,63,94,0.2)]",
+ description: "Client requested revisions on submitted deliverables.",
+ },
+};
+
+const PIPELINE_ORDER = ["pending", "in_progress", "submitted", "approved", "paid"];
+
+export function MilestoneProgressTracker({
+ milestones: initialMilestones,
+ onStatusUpdate,
+ userRole = "client",
+ contractAddress,
+ isLoading = false,
+}: MilestoneProgressTrackerProps) {
+ // Allow local state for instant updates or simulator fallback
+ const [milestonesList, setMilestonesList] = useState(initialMilestones);
+ const [viewMode, setViewMode] = useState<"stepper" | "list" | "board">("list");
+ const [selectedMilestoneId, setSelectedMilestoneId] = useState(
+ initialMilestones[0]?.id || null
+ );
+ const [isPending, startTransition] = useTransition();
+ const [simulationMode, setSimulationMode] = useState(false);
+ const [currentUserRole, setCurrentUserRole] = useState(userRole);
+
+ // Sync state if initialMilestones change
+ React.useEffect(() => {
+ setMilestonesList(initialMilestones);
+ if (!selectedMilestoneId && initialMilestones.length > 0) {
+ setSelectedMilestoneId(initialMilestones[0].id);
+ }
+ }, [initialMilestones]);
+
+ // Calculate dynamic stats
+ const totalCount = milestonesList.length;
+ const parsedAmounts = milestonesList.map((m) => parseFloat(String(m.amount)) || 0);
+ const totalBudget = parsedAmounts.reduce((a, b) => a + b, 0);
+
+ const completedCount = milestonesList.filter((m) => m.status === "approved" || m.status === "paid").length;
+ const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+
+ const paidAmount = milestonesList
+ .filter((m) => m.status === "paid")
+ .reduce((sum, m) => sum + (parseFloat(String(m.amount)) || 0), 0);
+
+ const escrowLockedAmount = milestonesList
+ .filter((m) => ["pending", "in_progress", "submitted", "approved", "rejected"].includes(m.status))
+ .reduce((sum, m) => sum + (parseFloat(String(m.amount)) || 0), 0);
+
+ const activeMilestone = milestonesList.find((m) => m.id === selectedMilestoneId) || milestonesList[0];
+
+ // Handles updating the state of a milestone
+ const handleTransition = async (milestoneId: string, targetStatus: string) => {
+ // If not in simulation and props provided, use parent callback
+ if (onStatusUpdate && !simulationMode) {
+ await onStatusUpdate(milestoneId, targetStatus);
+ } else {
+ // Local updates for simulations
+ setMilestonesList((prev) =>
+ prev.map((m) => {
+ if (m.id === milestoneId) {
+ const nowStr = new Date().toISOString();
+ return {
+ ...m,
+ status: targetStatus,
+ submitted_at: targetStatus === "submitted" ? nowStr : m.submitted_at,
+ approved_at: targetStatus === "approved" ? nowStr : m.approved_at,
+ paid_at: targetStatus === "paid" ? nowStr : m.paid_at,
+ };
+ }
+ return m;
+ })
+ );
+ }
+ };
+
+ // Helper to parse deliverables
+ const getDeliverablesList = (m: Milestone): string[] => {
+ if (!m.deliverables) return [];
+ if (Array.isArray(m.deliverables)) return m.deliverables;
+ try {
+ if (typeof m.deliverables === "string") {
+ const parsed = JSON.parse(m.deliverables);
+ return Array.isArray(parsed) ? parsed : [m.deliverables];
+ }
+ } catch {
+ // fallback
+ }
+ return [String(m.deliverables)];
+ };
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ if (totalCount === 0) {
+ return (
+
+ No Milestones Listed
+
+ This contract does not have any milestones defined yet.
+
+
+ );
+ }
+
+ return (
+
+ {/* 1. Header Overview Dashboard card */}
+
+
+
+
+ {/* Progress chart representation */}
+
+
+
+
Project Progress
+
Escrow-backed milestones
+
+
+ {progressPercent}%
+
+
+
+
+
+
+ {completedCount} of {totalCount} Completed
+ Remaining: {totalCount - completedCount}
+
+
+
+
+ {/* Money status details */}
+
+ {/* Total Budget */}
+
+
+ Total Budget
+
+
+ ${totalBudget.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+
+
+
+ {/* Escrow Locked */}
+
+
+ In Escrow
+
+
+ ${escrowLockedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+
+
+
+ {/* Paid / Released */}
+
+
+
+ ${paidAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+
+
+
+
+
+ {/* View Controllers and Demo Panel toggles */}
+
+ {/* Toggle Mode buttons */}
+
+ setViewMode("list")}
+ className={cn(
+ "h-8 px-3 rounded-md text-xs font-semibold gap-1.5 transition-all",
+ viewMode === "list" ? "bg-background text-foreground shadow-md" : "text-muted-foreground hover:text-foreground"
+ )}
+ >
+
+ setViewMode("stepper")}
+ className={cn(
+ "h-8 px-3 rounded-md text-xs font-semibold gap-1.5 transition-all",
+ viewMode === "stepper" ? "bg-background text-foreground shadow-md" : "text-muted-foreground hover:text-foreground"
+ )}
+ >
+
+ setViewMode("board")}
+ className={cn(
+ "h-8 px-3 rounded-md text-xs font-semibold gap-1.5 transition-all",
+ viewMode === "board" ? "bg-background text-foreground shadow-md" : "text-muted-foreground hover:text-foreground"
+ )}
+ >
+
+
+
+ {/* Demo settings toggles */}
+
+
setSimulationMode(!simulationMode)}
+ className={cn(
+ "text-xs gap-1.5 h-8 border-border/40 transition-all",
+ simulationMode
+ ? "bg-primary/20 border-primary text-primary hover:bg-primary/30"
+ : "text-muted-foreground hover:text-foreground"
+ )}
+ >
+
+
+ {simulationMode && (
+
+ Role:
+ {(["client", "freelancer"] as UserRole[]).map((r) => (
+ setCurrentUserRole(r)}
+ className={cn(
+ "px-2 py-1 rounded-md capitalize font-semibold transition-all h-6 flex items-center",
+ currentUserRole === r
+ ? "bg-background text-foreground shadow-sm font-bold"
+ : "text-muted-foreground hover:text-foreground"
+ )}
+ >
+ {r}
+
+ ))}
+
+ )}
+
+
+
+ {/* 2. RENDERING VIEWS */}
+
+ {/* VIEW A: DETAILED CARDS LIST VIEW */}
+ {viewMode === "list" && (
+
+ {milestonesList.map((m, index) => {
+ const config = STATE_CONFIG[m.status] || STATE_CONFIG.pending;
+ const Icon = config.icon;
+ const deliverables = getDeliverablesList(m);
+ const formattedAmount = parseFloat(String(m.amount)).toLocaleString(undefined, {
+ minimumFractionDigits: 2,
+ });
+
+ return (
+
setSelectedMilestoneId(m.id)}
+ >
+
+ {/* Left Side: Detail & Text */}
+
+
+
+
+
+
+
+ #{index + 1}
+
+
+ {m.title}
+
+
+ {config.label}
+
+
+
+ {m.description && (
+
+ {m.description}
+
+ )}
+
+ {/* Deliverables summary */}
+ {deliverables.length > 0 && (
+
+
+
+
+ {deliverables.map((item, idx) => (
+
+ {item}
+
+ ))}
+
+
+ )}
+
+ {/* Mini linear timeline tracker inside card */}
+
+
+ Progress Pipeline
+ {config.label}
+
+
+ {PIPELINE_ORDER.map((stageName, sIdx) => {
+ const stageIndex = PIPELINE_ORDER.indexOf(stageName);
+ const activeStageIndex = PIPELINE_ORDER.indexOf(m.status === "rejected" ? "in_progress" : m.status);
+
+ const isPast = stageIndex < activeStageIndex;
+ const isCurrent = m.status === stageName;
+
+ return (
+
+ );
+ })}
+
+
+
+
+
+ {/* Right Side: Financials & Action Buttons */}
+
+
+
Amount
+
+ ${formattedAmount} {m.currency}
+
+ {m.due_date && (
+
+
+ )}
+
+
+ {/* Action buttons inside Card */}
+
+
+
+ );
+ })}
+
+ )}
+
+ {/* VIEW B: PIPELINE STEPPER VIEW */}
+ {viewMode === "stepper" && (
+
+ {/* Stepper Side Navigation */}
+
+
+ Milestone Sequence
+
+ {milestonesList.map((m, index) => {
+ const config = STATE_CONFIG[m.status] || STATE_CONFIG.pending;
+ const Icon = config.icon;
+ const isSelected = selectedMilestoneId === m.id;
+
+ return (
+ setSelectedMilestoneId(m.id)}
+ className={cn(
+ "w-full p-3 rounded-lg flex items-center justify-between border text-left transition-all duration-200 hover:bg-muted/10",
+ isSelected
+ ? "bg-primary/10 border-primary/50 text-foreground font-bold shadow-[0_0_10px_-3px_rgba(99,102,241,0.15)]"
+ : "bg-transparent border-transparent text-muted-foreground"
+ )}
+ >
+
+
+ {index + 1}
+
+
+
{m.title}
+
+ ${parseFloat(String(m.amount)).toLocaleString()} {m.currency}
+
+
+
+
+
+ );
+ })}
+
+
+ {/* Stepper Detail View Panel */}
+ {activeMilestone && (
+
+
+
+
+ {/* Title & Status Block */}
+
+
+
+ Active Milestone Details
+
+
+ {activeMilestone.title}
+
+ {activeMilestone.due_date && (
+
+
+ )}
+
+
+
+
+ ${parseFloat(String(activeMilestone.amount)).toLocaleString()}{" "}
+ {activeMilestone.currency}
+
+
+ {STATE_CONFIG[activeMilestone.status]?.label || activeMilestone.status}
+
+
+
+
+ Milestone Lifecycle Steps
+
+
+
+ {PIPELINE_ORDER.map((stageName, index) => {
+ const stageConfig = STATE_CONFIG[stageName];
+ const StageIcon = stageConfig.icon;
+
+ const activeIndex = PIPELINE_ORDER.indexOf(
+ activeMilestone.status === "rejected" ? "in_progress" : activeMilestone.status
+ );
+ const isComplete = index < activeIndex;
+ const isCurrent = activeMilestone.status === stageName;
+ const isPending = index > activeIndex;
+
+ // Fetch timestamps
+ let timestamp: string | null = null;
+ if (stageName === "submitted") timestamp = activeMilestone.submitted_at;
+ if (stageName === "approved") timestamp = activeMilestone.approved_at;
+ if (stageName === "paid") timestamp = activeMilestone.paid_at;
+
+ return (
+
+
+
+
+
+ {index < PIPELINE_ORDER.length - 1 && (
+
+ )}
+
+
+ {stageConfig.label}
+
+ {timestamp && (
+
+ {new Date(timestamp).toLocaleDateString()}
+
+ )}
+
+ );
+ })}
+
+
+
+
+
+
+
+ {activeMilestone.description || "No description provided for this milestone."}
+
+
+
+
+
+
+
+
+ {getDeliverablesList(activeMilestone).length === 0 ? (
+
+ No custom deliverables checklist defined.
+
+ ) : (
+
+ {getDeliverablesList(activeMilestone).map((deliv, idx) => (
+
+
+ {deliv}
+
+ ))}
+
+ )}
+
+
+
+ )}
+
+ )}
+
+ {/* VIEW C: KANBAN BOARD VIEW */}
+ {viewMode === "board" && (
+
+ {PIPELINE_ORDER.map((stageKey) => {
+ const stageConfig = STATE_CONFIG[stageKey];
+ const ColumnIcon = stageConfig.icon;
+
+ const columnMilestones = milestonesList.filter((m) => {
+ if (stageKey === "in_progress") {
+ return m.status === "in_progress" || m.status === "rejected";
+ }
+ return m.status === stageKey;
+ });
+
+ return (
+
+ {/* Column Header */}
+
+
+
+
+
+ {stageConfig.label}
+
+
+
+ {columnMilestones.length}
+
+
+
+ {/* Column Content */}
+
+ {columnMilestones.length === 0 ? (
+
+ Empty
+
+ ) : (
+ columnMilestones.map((m) => {
+ const formattedAmount = parseFloat(String(m.amount)).toLocaleString();
+ const isRejected = m.status === "rejected";
+
+ return (
+
setSelectedMilestoneId(m.id)}
+ >
+
+
+
+ {m.title}
+
+ {isRejected && (
+
+ Revision
+
+ )}
+
+ {m.description && (
+
+ {m.description}
+
+ )}
+
+
+ ${formattedAmount}
+
+ {m.due_date && (
+
+
+ )}
+
+
+ {/* Quick-action trigger within Kanban card */}
+
+
+ );
+ })
+ )}
+
+
+ );
+ })}
+
+ )}
+
;
+ compact?: boolean;
+}
+
+function ActionButtons({ milestone, role, onTransition, compact = false }: ActionButtonsProps) {
+ const [loading, setLoading] = useState(false);
+ const triggerTransition = async (target: string) => {
+ setLoading(true);
+ try {
+ await onTransition(milestone.id, target);
+ } catch (e) {
+ console.error(e);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const btnSize = compact ? "xs" : "sm";
+ const btnClass = compact ? "h-6 text-[10px] px-2 py-0.5" : "h-9 text-xs px-3 font-semibold";
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ // --- FREELANCER ACTIONS ---
+ if (role === "freelancer") {
+ // 1. Pending -> Start Work
+ if (milestone.status === "pending") {
+ return (
+ triggerTransition("in_progress")} size={btnSize} className={cn("bg-indigo-600 hover:bg-indigo-700 text-white gap-1.5", btnClass)}>
+
+ );
+ }
+
+ // 2. In Progress / Rejected -> Submit Deliverables
+ if (milestone.status === "in_progress" || milestone.status === "rejected") {
+ return (
+ triggerTransition("submitted")} size={btnSize} className={cn("bg-amber-600 hover:bg-amber-700 text-white gap-1.5", btnClass)}>
+
+ );
+ }
+ }
+
+ // --- CLIENT ACTIONS ---
+ if (role === "client") {
+ // 1. Submitted -> Review & Approve (or Request revision)
+ if (milestone.status === "submitted") {
+ return (
+
+ {!compact && (
+
triggerTransition("rejected")}
+ variant="outline"
+ size={btnSize}
+ className={cn("border-rose-500/30 hover:border-rose-500 hover:bg-rose-500/10 text-rose-400 gap-1.5", btnClass)}
+ >
+
+ )}
+
triggerTransition("approved")} size={btnSize} className={cn("bg-emerald-600 hover:bg-emerald-700 text-white gap-1.5", btnClass)}>
+
+
triggerTransition("paid")} size={btnSize} className={cn("bg-violet-600 hover:bg-violet-700 text-white gap-1.5", btnClass)}>
+
+ );
+ }
+ }
+
+ // Admin view or completed/already paid state
+ if (milestone.status === "paid") {
+ return (
+
+ Completed & Paid
+
+ );
+ }
+
+ return null;
+}