@trustless-work/blocks 0.0.1

package/templates/escrows/details/GeneralInformation.tsx

@@ -0,0 +1,329 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { Card } from "__UI_BASE__/card";
+import { cn } from "@/lib/utils";
+import { MultiReleaseMilestone } from "@trustless-work/escrow";
+import {
+  Ban,
+  CircleCheckBig,
+  CircleDollarSign,
+  Handshake,
+  Wallet,
+  Info,
+  Users,
+  Check,
+  Copy,
+} from "lucide-react";
+import { Actions, roleActions } from "./Actions";
+import type {
+  DialogStates,
+  StatusStates,
+} from "../../escrow-context/EscrowDialogsProvider";
+import {
+  GetEscrowsFromIndexerResponse,
+  Role,
+} from "@trustless-work/escrow/types";
+import { useEscrowAmountContext } from "../../escrow-context/EscrowAmountProvider";
+import { StatisticsCard } from "./StatisticsCard";
+import {
+  formatAddress,
+  formatCurrency,
+} from "@/components/tw-blocks/helpers/format.helper";
+import { useCopy } from "@/components/tw-blocks/helpers/useCopy";
+
+interface GeneralInformationProps {
+  selectedEscrow: GetEscrowsFromIndexerResponse;
+  userRolesInEscrow: string[];
+  dialogStates: DialogStates & StatusStates;
+  areAllMilestonesApproved: boolean;
+  activeRole: Role[];
+}
+
+export const GeneralInformation = ({
+  selectedEscrow,
+  userRolesInEscrow,
+  dialogStates,
+  areAllMilestonesApproved,
+  activeRole,
+}: GeneralInformationProps) => {
+  const { trustlessWorkAmount, receiverAmount, platformFeeAmount } =
+    useEscrowAmountContext();
+  const { copiedKeyId, copyToClipboard } = useCopy();
+
+  const totalAmount = useMemo(() => {
+    if (!selectedEscrow) return 0;
+    const milestones = selectedEscrow.milestones as MultiReleaseMilestone[];
+    if (selectedEscrow?.type === "single-release") {
+      return selectedEscrow.amount;
+    } else {
+      return milestones.reduce(
+        (acc, milestone) => acc + Number(milestone.amount),
+        0
+      );
+    }
+  }, [selectedEscrow]);
+
+  return (
+    <div className="space-y-6 h-full">
+      <div className="flex flex-col md:flex-row gap-4">
+        <div className="flex flex-col md:flex-row w-full mdw-4/5 gap-4">
+          {selectedEscrow.flags?.disputed && (
+            <StatisticsCard
+              title="Status"
+              icon={Ban}
+              iconColor="text-destructive"
+              value="In Dispute"
+            />
+          )}
+
+          {selectedEscrow.flags?.released && (
+            <StatisticsCard
+              title="Status"
+              icon={CircleCheckBig}
+              iconColor="text-green-800"
+              value="Released"
+              actionLabel="See Details"
+              onAction={() => dialogStates.successRelease.setIsOpen(true)}
+            />
+          )}
+
+          {selectedEscrow.flags?.resolved && (
+            <StatisticsCard
+              title="Status"
+              icon={Handshake}
+              iconColor="text-green-800"
+              value="Resolved"
+            />
+          )}
+
+          <StatisticsCard
+            title="Amount"
+            icon={CircleDollarSign}
+            value={formatCurrency(totalAmount, selectedEscrow.trustline?.name)}
+          />
+
+          <StatisticsCard
+            title="Balance"
+            icon={Wallet}
+            value={formatCurrency(
+              selectedEscrow.balance ?? 0,
+              selectedEscrow.trustline?.name
+            )}
+          />
+        </div>
+        <div className="flex w-full md:w-1/5">
+          <Actions
+            selectedEscrow={selectedEscrow}
+            userRolesInEscrow={userRolesInEscrow}
+            areAllMilestonesApproved={areAllMilestonesApproved}
+            activeRole={activeRole}
+          />
+        </div>
+      </div>
+      <div
+        className={cn(
+          "grid gap-6 h-full",
+          !selectedEscrow.flags?.released && !selectedEscrow.flags?.resolved
+            ? selectedEscrow?.type === "multi-release"
+              ? "grid-cols-1 md:grid-cols-1 mx-auto"
+              : "grid-cols-1 lg:grid-cols-4"
+            : "grid-cols-1 md:grid-cols-1 w-full mx-auto"
+        )}
+      >
+        <div className="lg:col-span-3">
+          <Card className="px-6 py-4 h-full">
+            <h3 className="text-lg font-semibold">Basic Information</h3>
+            <div className="grid gap-4">
+              <div className="p-4 bg-muted/50 rounded-lg border">
+                <div className="flex items-center gap-3">
+                  <Info className="h-5 w-5 text-primary flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-medium text-muted-foreground">
+                        {selectedEscrow.trustline?.name || "No Trustline"} |
+                        Escrow ID
+                      </span>
+                      <button
+                        onClick={() =>
+                          copyToClipboard(selectedEscrow?.contractId || "")
+                        }
+                        className="p-1.5 hover:bg-muted rounded-md transition-colors flex-shrink-0"
+                      >
+                        {copiedKeyId ? (
+                          <Check className="h-4 w-4 text-green-700" />
+                        ) : (
+                          <Copy className="h-4 w-4" />
+                        )}
+                      </button>
+                    </div>
+                    <span className="font-mono text-sm break-all text-foreground">
+                      {formatAddress(selectedEscrow.contractId || "")}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="p-4 bg-muted/50 rounded-lg border">
+                  <div className="flex items-center gap-3 mb-3">
+                    <Users className="h-5 w-5 text-primary flex-shrink-0" />
+                    <span className="text-sm font-medium text-muted-foreground">
+                      Roles
+                    </span>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {userRolesInEscrow.map((role) => {
+                      const roleData = roleActions.find((r) => r.role === role);
+                      return (
+                        <div
+                          key={role}
+                          className="p-2 bg-primary/10 rounded-md hover:bg-primary/20 transition-colors"
+                        >
+                          {roleData?.icon || (
+                            <Users className="h-4 w-4 text-primary" />
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div className="p-4 bg-muted/50 rounded-lg border">
+                  <div className="flex items-center gap-3 mb-2">
+                    <Info className="h-5 w-5 text-primary flex-shrink-0" />
+                    <span className="text-sm font-medium text-muted-foreground">
+                      Memo
+                    </span>
+                  </div>
+                  <span className="font-medium text-foreground">
+                    {selectedEscrow?.receiverMemo || "No Memo"}
+                  </span>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="p-4 bg-muted/50 rounded-lg border">
+                  <div className="flex items-center gap-3 mb-2">
+                    <CircleDollarSign className="h-5 w-5 text-primary flex-shrink-0" />
+                    <span className="text-sm font-medium text-muted-foreground">
+                      Engagement ID
+                    </span>
+                  </div>
+                  <span className="font-medium text-foreground">
+                    {selectedEscrow?.engagementId || "No Engagement"}
+                  </span>
+                </div>
+
+                <div className="p-4 bg-muted/50 rounded-lg border">
+                  <div className="flex items-center gap-3 mb-2">
+                    <CircleDollarSign className="h-5 w-5 text-primary flex-shrink-0" />
+                    <span className="text-sm font-medium text-muted-foreground">
+                      Type
+                    </span>
+                  </div>
+                  <span className="font-medium text-foreground">
+                    {selectedEscrow?.type === "multi-release"
+                      ? "Multi Release"
+                      : "Single Release"}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {selectedEscrow?.type !== "multi-release" &&
+          !selectedEscrow.flags?.released &&
+          !selectedEscrow.flags?.resolved && (
+            <div className="lg:col-span-1">
+              <Card className="p-4 h-full">
+                <h3 className="text-lg font-semibold">
+                  Release Amount Distribution
+                </h3>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg border">
+                    <div className="flex items-center gap-2">
+                      <CircleDollarSign className="h-4 w-4 text-primary" />
+                      <div className="flex flex-col">
+                        <span className="text-sm text-muted-foreground">
+                          Total Amount
+                        </span>
+                        <span className="font-medium">
+                          {formatCurrency(
+                            selectedEscrow.amount,
+                            selectedEscrow.trustline?.name
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="text-sm text-muted-foreground">100%</div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg border">
+                      <div className="flex items-center gap-2">
+                        <Users className="h-4 w-4 text-primary" />
+                        <div className="flex flex-col">
+                          <span className="text-sm text-muted-foreground">
+                            Receiver
+                          </span>
+                          <span className="font-medium">
+                            {formatCurrency(
+                              Number(receiverAmount.toFixed(2)),
+                              selectedEscrow.trustline?.name
+                            )}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        {100 - selectedEscrow.platformFee - 0.3}%
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg border">
+                      <div className="flex items-center gap-2">
+                        <Wallet className="h-4 w-4 text-primary" />
+                        <div className="flex flex-col">
+                          <span className="text-sm text-muted-foreground">
+                            Platform Fee
+                          </span>
+                          <span className="font-medium">
+                            {formatCurrency(
+                              Number(platformFeeAmount.toFixed(2)),
+                              selectedEscrow.trustline?.name
+                            )}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        {selectedEscrow.platformFee}%
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg border">
+                    <div className="flex items-center gap-2">
+                      <Wallet className="h-4 w-4 text-primary" />
+                      <div className="flex flex-col">
+                        <span className="text-sm text-muted-foreground">
+                          Trustless Work
+                        </span>
+                        <span className="font-medium">
+                          {formatCurrency(
+                            Number(trustlessWorkAmount.toFixed(2)),
+                            selectedEscrow.trustline?.name
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="text-sm text-muted-foreground">0.3%</div>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          )}
+      </div>
+    </div>
+  );
+};

package/templates/escrows/details/MilestoneCard.tsx

@@ -0,0 +1,254 @@
+"use client";
+import React from "react";
+import { Button } from "__UI_BASE__/button";
+import { Card, CardContent, CardHeader, CardTitle } from "__UI_BASE__/card";
+import {
+  FileCheck2,
+  Eye,
+  CircleAlert,
+  CircleCheckBig,
+  Handshake,
+  CheckCheck,
+  Layers,
+} from "lucide-react";
+import {
+  GetEscrowsFromIndexerResponse as Escrow,
+  Role,
+} from "@trustless-work/escrow/types";
+import {
+  MultiReleaseMilestone,
+  SingleReleaseMilestone,
+} from "@trustless-work/escrow";
+import { Badge } from "__UI_BASE__/badge";
+import ApproveMilestoneButton from "../../single-release/approve-milestone/button/ApproveMilestone";
+import ResolveDisputeDialog from "../../single-release/resolve-dispute/dialog/ResolveDispute";
+import DisputeEscrowButton from "../../single-release/dispute-escrow/button/DisputeEscrow";
+import ReleaseEscrowButton from "../../single-release/release-escrow/button/ReleaseEscrow";
+import ChangeMilestoneStatusDialog from "../../single-release/change-milestone-status/dialog/ChangeMilestoneStatus";
+import { formatCurrency } from "@/components/tw-blocks/helpers/format.helper";
+
+interface MilestoneCardProps {
+  milestone: SingleReleaseMilestone | MultiReleaseMilestone;
+  milestoneIndex: number;
+  selectedEscrow: Escrow;
+  userRolesInEscrow: string[];
+  activeRole: Role[];
+  onViewDetails: (
+    milestone: SingleReleaseMilestone | MultiReleaseMilestone,
+    index: number
+  ) => void;
+}
+
+const MilestoneCardComponent = ({
+  milestone,
+  milestoneIndex,
+  selectedEscrow,
+  userRolesInEscrow,
+  activeRole,
+  onViewDetails,
+}: MilestoneCardProps) => {
+  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 getActionButtons = (
+    milestone: SingleReleaseMilestone | MultiReleaseMilestone,
+    milestoneIndex: number,
+    userRolesInEscrow: string[],
+    activeRole: Role[]
+  ) => {
+    const buttons = [] as React.ReactNode[];
+    if (
+      userRolesInEscrow.includes("serviceProvider") &&
+      activeRole.includes("serviceProvider") &&
+      milestone.status !== "completed" &&
+      !("flags" in milestone && milestone.flags?.approved)
+    ) {
+      buttons.push(
+        <ChangeMilestoneStatusDialog
+          key={`change-status-${milestoneIndex}`}
+          milestoneIndex={milestoneIndex}
+        />
+      );
+    }
+
+    if (
+      userRolesInEscrow.includes("releaseSigner") &&
+      activeRole.includes("releaseSigner") &&
+      "flags" in milestone &&
+      !milestone.flags?.disputed &&
+      milestone.flags?.approved &&
+      !milestone.flags?.released
+    ) {
+      buttons.push(<ReleaseEscrowButton key={`release-${milestoneIndex}`} />);
+    }
+
+    if (
+      (userRolesInEscrow.includes("serviceProvider") ||
+        userRolesInEscrow.includes("approver")) &&
+      (activeRole.includes("serviceProvider") ||
+        activeRole.includes("approver")) &&
+      "flags" in milestone &&
+      !milestone.flags?.disputed &&
+      !milestone.flags?.released &&
+      !milestone.flags?.resolved
+    ) {
+      buttons.push(<DisputeEscrowButton key={`dispute-${milestoneIndex}`} />);
+    }
+
+    if (
+      userRolesInEscrow.includes("disputeResolver") &&
+      activeRole.includes("disputeResolver") &&
+      "flags" in milestone &&
+      milestone.flags?.disputed
+    ) {
+      buttons.push(<ResolveDisputeDialog key={`resolve-${milestoneIndex}`} />);
+    }
+
+    if (
+      userRolesInEscrow.includes("approver") &&
+      activeRole.includes("approver") &&
+      (("approved" in milestone && !milestone.approved) ||
+        ("flags" in milestone &&
+          !milestone.flags?.approved &&
+          !milestone.flags?.disputed &&
+          !milestone.flags?.released &&
+          !milestone.flags?.resolved))
+    ) {
+      buttons.push(
+        <ApproveMilestoneButton
+          key={`approve-${milestoneIndex}`}
+          milestoneIndex={milestoneIndex}
+        />
+      );
+    }
+
+    return buttons;
+  };
+
+  return (
+    <Card
+      key={`milestone-${milestoneIndex}-${milestone.description}-${milestone.status}`}
+      className="hover:shadow-lg transition-all duration-200"
+    >
+      <CardHeader className="pb-4">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base font-semibold text-foreground truncate">
+            {milestone.description}
+          </CardTitle>
+          {getMilestoneStatusBadge(milestone)}
+        </div>
+      </CardHeader>
+
+      <CardContent className="pt-0 space-y-4">
+        {"amount" in milestone && (
+          <div className="flex items-center gap-2 py-2">
+            <span className="text-2xl font-bold text-foreground">
+              {formatCurrency(milestone.amount, selectedEscrow.trustline?.name)}
+            </span>
+          </div>
+        )}
+
+        {milestone.evidence && (
+          <div className="flex items-center gap-2 p-2 border-primary/20 rounded-lg">
+            <FileCheck2 className="w-4 h-4 text-primary flex-shrink-0" />
+            <span className="text-xs text-muted-foreground font-medium">
+              Evidence provided
+            </span>
+          </div>
+        )}
+
+        {getActionButtons(
+          milestone,
+          milestoneIndex,
+          userRolesInEscrow,
+          activeRole
+        )}
+
+        <Button
+          size="sm"
+          variant="outline"
+          className="w-full border-border text-muted-foreground"
+          onClick={(e) => {
+            e.stopPropagation();
+            onViewDetails(milestone, milestoneIndex);
+          }}
+        >
+          <Eye className="w-3 h-3 mr-2 flex-shrink-0" />
+          View Details
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export const MilestoneCard = React.memo(
+  MilestoneCardComponent,
+  (prev, next) => {
+    if (
+      prev.milestone === next.milestone &&
+      prev.milestoneIndex === next.milestoneIndex &&
+      prev.selectedEscrow?.contractId === next.selectedEscrow?.contractId &&
+      prev.onViewDetails === next.onViewDetails &&
+      prev.activeRole.length === next.activeRole.length &&
+      prev.userRolesInEscrow.length === next.userRolesInEscrow.length &&
+      prev.activeRole.every((r, i) => r === next.activeRole[i]) &&
+      prev.userRolesInEscrow.every((r, i) => r === next.userRolesInEscrow[i])
+    ) {
+      return true;
+    }
+    return false;
+  }
+);