ContractSignersList.tsx

import { Colors } from "~/application/enums/shared/Colors";
import SimpleBadge from "~/components/ui/badges/SimpleBadge";
import { SignerDto } from "../dtos/SignerDto";

export default function ContractSignersList({ items }: { items?: SignerDto[] }) {
  function sortedItems() {
    return (
      items?.sort((a, b) => {
        if (a.role === "signer" && b.role === "viewer") {
          return -1;
        }
        if (a.role === "viewer" && b.role === "signer") {
          return 1;
        }
        return 0;
      }) ?? []
    );
  }
  return (
    <div className="flex flex-col space-y-2 text-sm">
      {sortedItems().map((s, idx) => (
        <div key={idx} className="rounded-md border border-gray-200 bg-white px-3 py-1.5 shadow-sm">
          <div className="flex items-center justify-between space-x-2">
            <div className="flex flex-col truncate">
              <div className="truncate text-gray-800">
                <span className="truncate font-medium">{s.user.email}</span> <span className="text-gray-600">({s.tenant.name})</span>
              </div>
              <div className="truncate text-xs">{s.user.name}</div>
            </div>
            {s.role === "signer" && (
              <>
                {s.signedAt ? (
                  <div className="flex items-center justify-between space-x-2">
                    <SimpleBadge title="Signed" color={Colors.GREEN} />
                  </div>
                ) : (
                  <div className="flex items-center justify-between space-x-2">
                    <SimpleBadge title="Pending" color={Colors.YELLOW} />
                  </div>
                )}
              </>
            )}
            {s.role === "viewer" && (
              <div className="flex items-center justify-between space-x-2">
                <SimpleBadge title="Viewer" color={Colors.GRAY} />
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}