feat: improve batch UX with duplicate button, dropdown redesign, and CSV upload

  Covers:
  - Duplicate button moved into expanded batch detail (removed BatchRowMenu)
  - Contact Book dropdown restyled with custom icons
  - CSV upload modal redesigned with multi-state file handling
  - CSV parser: robust header detection + merge duplicate address+token rows

Author: Huygon764

packages/nextjs/app/contact-book/page.tsx

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { Contact, ContactGroup } from "@polypay/shared";
-import { ChevronDown, Search, Upload, Users } from "lucide-react";
+import { ChevronDown, Search } from "lucide-react";
 import { ContactDetailDrawer } from "~~/components/contact-book/ContactDetailDrawer";
 import { ContactList } from "~~/components/contact-book/ContactList";
 import { EditContact } from "~~/components/contact-book/Editcontact";
@@ -145,25 +145,25 @@ export default function AddressBookPage() {
                   <ChevronDown size={16} />
                 </button>
                 {batchDropdownOpen && (
-                  <div className="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-grey-200 py-1 z-50 min-w-[160px]">
+                  <div className="absolute right-0 top-full mt-1 bg-white rounded-lg border border-grey-200 shadow-[0px_0px_11px_0px_rgba(0,0,0,0.1)] z-50 min-w-[160px] overflow-hidden">
                     <button
-                      className="flex items-center gap-2 px-4 py-2.5 text-sm text-grey-800 hover:bg-grey-50 w-full cursor-pointer"
+                      className="flex items-center gap-[5px] p-3 text-sm font-medium text-main-black hover:bg-grey-50 w-full cursor-pointer border-b border-b-grey-200"
                       onClick={() => {
                         setBatchDropdownOpen(false);
                         modalManager.openModal?.("createBatchFromContacts", { accountId });
                       }}
                     >
-                      <Users size={16} />
+                      <Image src="/icons/batch/user-edit.svg" alt="Manual" width={16} height={16} />
                       Manual
                     </button>
                     <button
-                      className="flex items-center gap-2 px-4 py-2.5 text-sm text-grey-800 hover:bg-grey-50 w-full cursor-pointer"
+                      className="flex items-center gap-[5px] p-3 text-sm font-medium text-main-black hover:bg-grey-50 w-full cursor-pointer"
                       onClick={() => {
                         setBatchDropdownOpen(false);
                         modalManager.openModal?.("createBatchFromContacts", { accountId, mode: "csv" });
                       }}
                     >
-                      <Upload size={16} />
+                      <Image src="/icons/batch/export-upload.svg" alt="Upload CSV" width={16} height={16} />
                       Upload CSV
                     </button>
                   </div>

packages/nextjs/components/Dashboard/TransactionRow/BatchRowMenu.tsx

@@ -1,9 +1,15 @@
+"use client";
+
 import React from "react";
 import Image from "next/image";
 import { AddressWithContact } from "./AddressWithContact";
 import { getExpandedHeaderText } from "./utils";
-import { TxType, getTokenByAddress } from "@polypay/shared";
-import { TransactionRowData, VoteStatus, useNetworkTokens } from "~~/hooks";
+import { TxType, ZERO_ADDRESS, formatTokenAmount, getTokenByAddress } from "@polypay/shared";
+import { Contact } from "@polypay/shared";
+import { BatchContactEntry } from "~~/components/modals/CreateBatchFromContactsModal";
+import { modalManager } from "~~/components/modals/ModalLayout";
+import { BatchTransfer, TransactionRowData, VoteStatus, useNetworkTokens } from "~~/hooks";
+import { useAccountStore } from "~~/services/store";
 import { formatAddress, formatAmount } from "~~/utils/format";
 
 interface TxHeaderProps {
@@ -14,6 +20,7 @@ interface TxHeaderProps {
   loading: boolean;
   initiatorName?: string;
   initiatorCommitment: string;
+  batchData?: BatchTransfer[];
 }
 
 function SignerBadgeList({ signerData }: { signerData: TransactionRowData["signerData"] }) {
@@ -56,46 +63,92 @@ export function TxHeader({
   loading,
   initiatorCommitment,
   initiatorName,
+  batchData,
 }: TxHeaderProps) {
   const headerText = getExpandedHeaderText(tx.type);
   const shortCommitment = formatAddress(initiatorCommitment, { start: 4, end: 4 });
   const { chainId } = useNetworkTokens();
+  const { currentAccount } = useAccountStore();
+
+  const handleDuplicate = () => {
+    if (!batchData) return;
+
+    const initialBatchItems: BatchContactEntry[] = batchData.map(transfer => {
+      const token = getTokenByAddress(transfer.tokenAddress, chainId);
+      const amount = formatTokenAmount(transfer.amount, token.decimals);
+
+      const contact: Contact = {
+        id: crypto.randomUUID(),
+        name: transfer.contactName || formatAddress(transfer.recipient, { start: 6, end: 4 }),
+        address: transfer.recipient,
+        accountId: "",
+        groups: [],
+        createdAt: "",
+        updatedAt: "",
+      } as Contact;
+
+      return {
+        contact,
+        amount,
+        tokenAddress: transfer.tokenAddress || ZERO_ADDRESS,
+        isSynthetic: true,
+      };
+    });
+
+    modalManager.openModal?.("createBatchFromContacts", {
+      accountId: currentAccount?.id,
+      initialBatchItems,
+    });
+  };
 
   const renderHeaderRow = () => (
     <div className="flex items-center justify-between mb-4">
       <div className="text-lg font-semibold">
         {tx.type === TxType.BATCH ? (
-          <span>{tx.batchData?.length ?? 0} transactions</span>
+          <span>{tx.batchData?.length ?? 0} Transactions</span>
         ) : (
           <span>
             {headerText} {initiatorName ? `${initiatorName} (${shortCommitment})` : shortCommitment}
           </span>
         )}
       </div>
-      {myVoteStatus === null && (
-        <div className="flex items-center gap-2">
-          <button
-            onClick={e => {
-              e.stopPropagation();
-              onDeny();
-            }}
-            disabled={loading}
-            className="px-6 py-2 text-sm font-medium text-main-black bg-white rounded-full hover:bg-gray-100 transition-colors cursor-pointer disabled:opacity-50"
-          >
-            Deny
-          </button>
+      <div className="flex items-center gap-2">
+        {tx.type === TxType.BATCH && batchData && (
           <button
             onClick={e => {
               e.stopPropagation();
-              onApprove();
+              handleDuplicate();
             }}
-            disabled={loading}
-            className="px-6 py-2 text-sm font-medium text-main-black bg-pink-350 rounded-full hover:bg-pink-450 transition-colors cursor-pointer disabled:opacity-50"
+            className="bg-grey-100 rounded-lg px-6 h-7 text-sm font-medium text-main-black cursor-pointer hover:bg-grey-200 transition-colors"
           >
-            {loading ? "Processing..." : "Approve"}
+            Duplicate
           </button>
-        </div>
-      )}
+        )}
+        {myVoteStatus === null && (
+          <>
+            <button
+              onClick={e => {
+                e.stopPropagation();
+                onDeny();
+              }}
+              disabled={loading}
+              className="px-6 py-2 text-sm font-medium text-main-black bg-white rounded-full hover:bg-gray-100 transition-colors cursor-pointer disabled:opacity-50"
+            >
+              Deny
+            </button>
+            <button
+              onClick={e => {
+                e.stopPropagation();
+                onApprove();
+              }}
+              disabled={loading}
+              className="px-6 py-2 text-sm font-medium text-main-black bg-pink-350 rounded-full hover:bg-pink-450 transition-colors cursor-pointer disabled:opacity-50"
+            >
+              {loading ? "Processing..." : "Approve"}
+            </button>
+          </>
+        )}
+      </div>
     </div>
   );
 

packages/nextjs/components/Dashboard/TransactionRow/TxHeader.tsx

@@ -2,12 +2,11 @@
 
 import React, { useEffect, useState } from "react";
 import { ActionButtons, AwaitingBadge, StatusBadge } from "./Badges";
-import { BatchRowMenu } from "./BatchRowMenu";
 import { SignerList } from "./SignerList";
 import { TxDetails } from "./TxDetails";
 import { TxHeader } from "./TxHeader";
 import { getTxTypeLabel } from "./utils";
-import { TxStatus, TxType } from "@polypay/shared";
+import { TxStatus } from "@polypay/shared";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { TransactionRowData, useTransactionVote, useWalletCommitments, useWalletThreshold } from "~~/hooks";
 import { formatAddress } from "~~/utils/format";
@@ -130,7 +129,6 @@ export function TransactionRow({ tx, onSuccess }: TransactionRowProps) {
           </div>
           <div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
             {renderRightSide()}
-            {tx.type === TxType.BATCH && tx.batchData && <BatchRowMenu batchData={tx.batchData} />}
           </div>
         </div>
 
@@ -144,6 +142,7 @@ export function TransactionRow({ tx, onSuccess }: TransactionRowProps) {
               loading={loading}
               initiatorCommitment={initiatorCommitment}
               initiatorName={initiatorName}
+              batchData={tx.batchData}
             />
             <SignerList
               members={tx.members}