@trustless-work/blocks 0.0.1

package/templates/escrows/details/MilestoneDetailDialog.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { Button } from "__UI_BASE__/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "__UI_BASE__/dialog";
+import { Card, CardContent, CardHeader, CardTitle } from "__UI_BASE__/card";
+import { Badge } from "__UI_BASE__/badge";
+import {
+  DollarSign,
+  FileCheck2,
+  User,
+  Calendar,
+  Hash,
+  ExternalLink,
+  CircleAlert,
+  CircleCheckBig,
+  Handshake,
+  CheckCheck,
+  Layers,
+} from "lucide-react";
+import {
+  GetEscrowsFromIndexerResponse,
+  MultiReleaseMilestone,
+  Role,
+  SingleReleaseMilestone,
+} from "@trustless-work/escrow";
+import Link from "next/link";
+
+interface MilestoneDetailDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedMilestone: {
+    milestone: MultiReleaseMilestone | SingleReleaseMilestone;
+    index: number;
+  } | null;
+  selectedEscrow: GetEscrowsFromIndexerResponse;
+  userRolesInEscrow: string[];
+  activeRole: Role[];
+  evidenceVisibleMap: Record<number, boolean>;
+  setEvidenceVisibleMap: React.Dispatch<
+    React.SetStateAction<Record<number, boolean>>
+  >;
+}
+
+export const MilestoneDetailDialog = ({
+  isOpen,
+  onClose,
+  selectedMilestone,
+}: MilestoneDetailDialogProps) => {
+  const getMilestoneStatusBadge = (
+    milestone: SingleReleaseMilestone | MultiReleaseMilestone
+  ) => {
+    if ("flags" in milestone && milestone.flags?.disputed) {
+      return (
+        <Badge variant="destructive">
+          <CircleAlert className="h-3.5 w-3.5" />
+          <span>Disputed</span>
+        </Badge>
+      );
+    }
+    if ("flags" in milestone && milestone.flags?.released) {
+      return (
+        <Badge variant="default">
+          <CircleCheckBig className="h-3.5 w-3.5" />
+          <span>Released</span>
+        </Badge>
+      );
+    }
+    if (
+      "flags" in milestone &&
+      milestone.flags?.resolved &&
+      !milestone.flags?.disputed
+    ) {
+      return (
+        <Badge variant="default">
+          <Handshake className="h-3.5 w-3.5" />
+          <span>Resolved</span>
+        </Badge>
+      );
+    }
+    if (
+      ("flags" in milestone && milestone.flags?.approved) ||
+      ("approved" in milestone && milestone.approved)
+    ) {
+      return (
+        <Badge variant="default">
+          <CheckCheck className="h-3.5 w-3.5" />
+          <span>Approved</span>
+        </Badge>
+      );
+    }
+    return (
+      <Badge variant="outline">
+        <Layers className="h-3.5 w-3.5" />
+        <span className="uppercase">
+          {milestone.status
+            ? milestone.status.match(/[a-z][A-Z]/)
+              ? milestone.status.replace(/([A-Z])/g, " $1").toLowerCase()
+              : milestone.status.toLowerCase()
+            : ""}
+        </span>
+      </Badge>
+    );
+  };
+
+  const isValidUrl = (url: string) => {
+    try {
+      new URL(url);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  if (!selectedMilestone) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader className="pb-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center justify-center w-10 h-10 bg-primary/10 rounded-full">
+              <Hash className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <DialogTitle className="text-xl font-semibold truncate">
+                {selectedMilestone.milestone.description}
+              </DialogTitle>
+              <p className="text-sm text-muted-foreground">
+                Detailed information about this milestone
+              </p>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-6 pt-4">
+          <div className="flex items-center justify-between p-4  rounded-lg border border-border">
+            <div className="flex items-center gap-3">
+              <div className="flex items-center justify-center w-8 h-8 bg-background rounded-full shadow-sm border border-border">
+                <Calendar className="w-4 h-4 text-primary" />
+              </div>
+              <div>
+                <p className="text-sm font-medium text-foreground">
+                  Current Status
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  Milestone progress
+                </p>
+              </div>
+            </div>
+            {getMilestoneStatusBadge(selectedMilestone.milestone)}
+          </div>
+
+          <Card className="border border-border shadow-sm">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg flex items-center gap-2">
+                <div className="w-1 h-6 bg-primary rounded-full"></div>
+                Basic Information
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-foreground flex items-center gap-2">
+                  <FileCheck2 className="w-4 h-4 text-muted-foreground" />
+                  Description
+                </label>
+                <p className="text-sm text-muted-foreground bg-muted/50 p-3 rounded-md border-l-4 border-primary/20">
+                  {selectedMilestone.milestone.description}
+                </p>
+              </div>
+
+              {"amount" in selectedMilestone.milestone && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-foreground flex items-center gap-2">
+                    <DollarSign className="w-4 h-4 text-green-600 dark:text-green-400" />
+                    Amount
+                  </label>
+                  <div className="flex items-center gap-2 bg-green-500/10 dark:bg-green-400/10 p-3 rounded-md border-l-4 border-green-500/20 dark:border-green-400/20">
+                    <DollarSign className="w-5 h-5 text-green-600 dark:text-green-400" />
+                    <span className="text-lg font-bold text-green-700 dark:text-green-300">
+                      {selectedMilestone.milestone.amount}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {selectedMilestone.milestone.evidence && (
+            <Card className="border border-border shadow-sm">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <div className="w-1 h-6 bg-green-600 dark:bg-green-400 rounded-full"></div>
+                  Evidence
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-foreground flex items-center gap-2">
+                    <FileCheck2 className="w-4 h-4 text-green-600 dark:text-green-400" />
+                    Evidence URL
+                  </label>
+                  <div className="bg-muted/50 p-3 rounded-md border-l-4 border-green-500/20 dark:border-green-400/20">
+                    {(() => {
+                      const result = isValidUrl(
+                        selectedMilestone.milestone.evidence
+                      );
+                      return (
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm text-muted-foreground break-all pr-2">
+                            {selectedMilestone.milestone.evidence}
+                          </span>
+                          {result && (
+                            <Link
+                              href={selectedMilestone.milestone.evidence}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                className="shrink-0"
+                              >
+                                <ExternalLink className="w-4 h-4 mr-1" />
+                                Open
+                              </Button>
+                            </Link>
+                          )}
+                        </div>
+                      );
+                    })()}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {"disputeStartedBy" in selectedMilestone.milestone && (
+            <Card className="border border-border shadow-sm">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <div className="w-1 h-6 bg-red-600 dark:bg-red-400 rounded-full"></div>
+                  Dispute Information
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-3 bg-red-500/10 dark:bg-red-400/10 p-3 rounded-md border-l-4 border-red-500/20 dark:border-red-400/20">
+                  <User className="w-5 h-5 text-red-600 dark:text-red-400" />
+                  <div>
+                    <p className="text-sm font-medium text-red-700 dark:text-red-300">
+                      <span className="font-bold">Disputed by:</span>{" "}
+                      {selectedMilestone.milestone.disputeStartedBy ===
+                      "serviceProvider"
+                        ? "Service Provider"
+                        : "Approver"}
+                    </p>
+                    {"flags" in selectedMilestone.milestone &&
+                      !selectedMilestone.milestone.flags?.resolved && (
+                        <p className="text-xs text-red-600 dark:text-red-400">
+                          This milestone is currently under dispute
+                        </p>
+                      )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/templates/escrows/details/Milestones.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+import {
+  MultiReleaseMilestone,
+  Role,
+  SingleReleaseMilestone,
+} from "@trustless-work/escrow";
+import { MilestoneCard } from "./MilestoneCard";
+import { MilestoneDetailDialog } from "./MilestoneDetailDialog";
+
+interface MilestonesProps {
+  selectedEscrow: Escrow;
+  userRolesInEscrow: string[];
+  setEvidenceVisibleMap: React.Dispatch<
+    React.SetStateAction<Record<number, boolean>>
+  >;
+  evidenceVisibleMap: Record<number, boolean>;
+  activeRole: Role[];
+}
+
+export const Milestones = ({
+  selectedEscrow,
+  userRolesInEscrow,
+  setEvidenceVisibleMap,
+  evidenceVisibleMap,
+  activeRole,
+}: MilestonesProps) => {
+  const [selectedMilestoneForDetail, setSelectedMilestoneForDetail] = useState<{
+    milestone: SingleReleaseMilestone | MultiReleaseMilestone;
+    index: number;
+  } | null>(null);
+
+  const handleViewDetails = useCallback(
+    (
+      milestone: SingleReleaseMilestone | MultiReleaseMilestone,
+      index: number
+    ) => {
+      setSelectedMilestoneForDetail({
+        milestone,
+        index,
+      });
+    },
+    []
+  );
+
+  return (
+    <div className="flex w-full">
+      <div className="flex flex-col gap-6 w-full">
+        <div className="flex w-full justify-between items-center">
+          <label
+            htmlFor="milestones"
+            className="flex items-center gap-2 text-lg font-medium"
+          >
+            Milestones
+          </label>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
+          {selectedEscrow.milestones.map((milestone, milestoneIndex) => (
+            <MilestoneCard
+              key={`milestone-${milestoneIndex}-${milestone.description}-${milestone.status}`}
+              milestone={milestone}
+              milestoneIndex={milestoneIndex}
+              selectedEscrow={selectedEscrow}
+              userRolesInEscrow={userRolesInEscrow}
+              activeRole={activeRole}
+              onViewDetails={handleViewDetails}
+            />
+          ))}
+        </div>
+
+        <MilestoneDetailDialog
+          isOpen={!!selectedMilestoneForDetail}
+          onClose={() => setSelectedMilestoneForDetail(null)}
+          selectedMilestone={selectedMilestoneForDetail}
+          selectedEscrow={selectedEscrow}
+          userRolesInEscrow={userRolesInEscrow}
+          activeRole={activeRole}
+          evidenceVisibleMap={evidenceVisibleMap}
+          setEvidenceVisibleMap={setEvidenceVisibleMap}
+        />
+      </div>
+    </div>
+  );
+};

package/templates/escrows/details/ProgressEscrow.tsx

@@ -0,0 +1,191 @@
+import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
+import { cn } from "@/lib/utils";
+import {
+  MultiReleaseMilestone,
+  SingleReleaseMilestone,
+} from "@trustless-work/escrow";
+
+type Escrow = {
+  [K in keyof Omit<
+    GetEscrowsFromIndexerResponse,
+    "type" | "updatedAt" | "createdAt" | "user"
+  >]: K extends "trustline"
+    ? Omit<NonNullable<GetEscrowsFromIndexerResponse["trustline"]>, "name">
+    : GetEscrowsFromIndexerResponse[K];
+};
+
+interface ProgressEscrowProps {
+  escrow: Escrow;
+  className?: string;
+}
+
+const ProgressCircle = ({
+  percentage,
+  color,
+  size = 44,
+  strokeWidth = 3,
+}: {
+  percentage: number;
+  color: string;
+  size?: number;
+  strokeWidth?: number;
+}) => {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className="relative inline-flex">
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        className="transform -rotate-90"
+      >
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="rgba(226, 232, 240, 0.3)"
+          strokeWidth={strokeWidth}
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+        />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center text-xs font-medium">
+        {Math.round(percentage)}%
+      </div>
+    </div>
+  );
+};
+
+const ProgressEscrow = ({ escrow, className }: ProgressEscrowProps) => {
+  const completedMilestones = escrow.milestones.filter(
+    (milestone) => milestone.status === "completed"
+  ).length;
+  const approvedMilestones = escrow.milestones.filter(
+    (milestone: SingleReleaseMilestone | MultiReleaseMilestone) =>
+      ("flags" in milestone && milestone.flags?.approved === true) ||
+      (!("flags" in milestone) &&
+        (milestone as SingleReleaseMilestone).approved === true)
+  ).length;
+  const disputedMilestones = escrow.milestones.filter(
+    (milestone: SingleReleaseMilestone | MultiReleaseMilestone) =>
+      "flags" in milestone && milestone.flags?.disputed === true
+  ).length;
+  const resolvedMilestones = escrow.milestones.filter(
+    (milestone: SingleReleaseMilestone | MultiReleaseMilestone) =>
+      "flags" in milestone && milestone.flags?.resolved === true
+  ).length;
+  const releasedMilestones = escrow.milestones.filter(
+    (milestone: SingleReleaseMilestone | MultiReleaseMilestone) =>
+      "flags" in milestone && milestone.flags?.released === true
+  ).length;
+  const totalMilestones = escrow.milestones.length;
+
+  const progressPercentageCompleted =
+    totalMilestones > 0 ? (completedMilestones / totalMilestones) * 100 : 0;
+  const progressPercentageApproved =
+    totalMilestones > 0 ? (approvedMilestones / totalMilestones) * 100 : 0;
+  const progressPercentageDisputed =
+    totalMilestones > 0 ? (disputedMilestones / totalMilestones) * 100 : 0;
+  const progressPercentageResolved =
+    totalMilestones > 0 ? (resolvedMilestones / totalMilestones) * 100 : 0;
+  const progressPercentageReleased =
+    totalMilestones > 0 ? (releasedMilestones / totalMilestones) * 100 : 0;
+
+  const shouldHideProgress = escrow.flags?.released || escrow.flags?.resolved;
+  const isMultiRelease =
+    escrow.milestones[0] && "flags" in escrow.milestones[0];
+
+  if (shouldHideProgress || totalMilestones === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-4 px-10 w-full", className)}>
+      <div className="flex flex-wrap items-center justify-center gap-6">
+        <div className="flex items-center gap-3">
+          <ProgressCircle
+            percentage={progressPercentageCompleted}
+            color="#006be4"
+          />
+          <div className="text-xs">
+            <div className="font-medium">Completed</div>
+            <div className="text-muted-foreground">
+              {completedMilestones}/{totalMilestones}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <ProgressCircle
+            percentage={progressPercentageApproved}
+            color="#15803d"
+          />
+          <div className="text-xs">
+            <div className="font-medium">Approved</div>
+            <div className="text-muted-foreground">
+              {approvedMilestones}/{totalMilestones}
+            </div>
+          </div>
+        </div>
+
+        {isMultiRelease && (
+          <>
+            <div className="flex items-center gap-3">
+              <ProgressCircle
+                percentage={progressPercentageDisputed}
+                color="#dc2626"
+              />
+              <div className="text-xs">
+                <div className="font-medium">Disputed</div>
+                <div className="text-muted-foreground">
+                  {disputedMilestones}/{totalMilestones}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <ProgressCircle
+                percentage={progressPercentageResolved}
+                color="#15803d"
+              />
+              <div className="text-xs">
+                <div className="font-medium">Resolved</div>
+                <div className="text-muted-foreground">
+                  {resolvedMilestones}/{totalMilestones}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <ProgressCircle
+                percentage={progressPercentageReleased}
+                color="#15803d"
+              />
+              <div className="text-xs">
+                <div className="font-medium">Released</div>
+                <div className="text-muted-foreground">
+                  {releasedMilestones}/{totalMilestones}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProgressEscrow;

package/templates/escrows/details/StatisticsCard.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "__UI_BASE__/button";
+import { Card, CardContent } from "__UI_BASE__/card";
+import { Badge } from "__UI_BASE__/badge";
+import { formatText } from "@/components/tw-blocks/helpers/format.helper";
+
+interface StatisticsCardProps {
+  title: string;
+  icon: LucideIcon;
+  iconColor?: string;
+  value: ReactNode;
+  subValue?: ReactNode;
+  actionLabel?: string;
+  onAction?: () => void;
+  className?: string;
+  iconSize?: number;
+  fundedBy?: string;
+}
+
+export const StatisticsCard = ({
+  title,
+  icon: Icon,
+  iconColor,
+  value,
+  subValue,
+  actionLabel,
+  onAction,
+  className,
+  iconSize = 30,
+  fundedBy,
+}: StatisticsCardProps) => {
+  return (
+    <Card
+      className={cn(
+        "overflow-hidden cursor-pointer hover:shadow-lg w-full py-1",
+        className
+      )}
+    >
+      <CardContent className="py-4 px-8 min-h-20">
+        <div className="flex items-center justify-between">
+          <div className="flex">
+            <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          </div>
+
+          <Icon className={iconColor} size={iconSize} />
+        </div>
+        <div className="mt-2 flex items-baseline justify-between">
+          <div>
+            <h3 className="text-2xl font-semibold">{value}</h3>
+            {subValue}
+          </div>
+          {fundedBy && (
+            <Badge
+              variant="outline"
+              className="text-xs text-muted-foreground uppercase"
+            >
+              Funded by {formatText(fundedBy)}
+            </Badge>
+          )}
+          {actionLabel && onAction && (
+            <Button
+              variant="link"
+              type="button"
+              onClick={onAction}
+              className="text-xs text-muted-foreground my-0 p-0 h-auto"
+            >
+              {actionLabel}
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};