+ setShowWalletAlert(false)}
+ />
+
+
+
+ {drawerState.selectedInvoice && (
+ <>
+
+
+
+ );
+}
+
+export default BatchPayment;
diff --git a/frontend/src/page/CreateInvoicesBatch.jsx b/frontend/src/page/CreateInvoicesBatch.jsx
new file mode 100644
index 00000000..5fe3a31b
--- /dev/null
+++ b/frontend/src/page/CreateInvoicesBatch.jsx
@@ -0,0 +1,1249 @@
+// pages/CreateInvoicesBatch.jsx - Clean & Professional
+import React, { useEffect, useRef, useState } from "react";
+import { Input } from "../components/ui/input";
+import { Button } from "../components/ui/button";
+import {
+ BrowserProvider,
+ Contract,
+ ethers,
+ formatUnits,
+ parseUnits,
+} from "ethers";
+import { useAccount, useWalletClient } from "wagmi";
+import { ChainvoiceABI } from "../contractsABI/ChainvoiceABI";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import {
+ Badge,
+ CalendarIcon,
+ CheckCircle2,
+ Coins,
+ Loader2,
+ PlusIcon,
+ XCircle,
+ X,
+ ChevronDown,
+ ChevronRight,
+ AlertTriangle,
+ Users,
+ Receipt,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { Label } from "@/components/ui/label";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+import { LitNodeClient } from "@lit-protocol/lit-node-client";
+import { encryptString } from "@lit-protocol/encryption/src/lib/encryption.js";
+import { LIT_ABILITY, LIT_NETWORK } from "@lit-protocol/constants";
+import {
+ createSiweMessageWithRecaps,
+ generateAuthSig,
+ LitAccessControlConditionResource,
+} from "@lit-protocol/auth-helpers";
+
+import TokenIntegrationRequest from "@/components/TokenIntegrationRequest";
+import { ERC20_ABI } from "@/contractsABI/ERC20_ABI";
+import WalletConnectionAlert from "../components/WalletConnectionAlert";
+import TokenPicker, { ToggleSwitch } from "@/components/TokenPicker";
+import { CopyButton } from "@/components/ui/copyButton";
+
+function CreateInvoicesBatch() {
+ const { data: walletClient } = useWalletClient();
+ const { isConnected } = useAccount();
+ const account = useAccount();
+ const [dueDate, setDueDate] = useState(new Date());
+ const [issueDate, setIssueDate] = useState(new Date());
+ const [loading, setLoading] = useState(false);
+ const navigate = useNavigate();
+ const litClientRef = useRef(null);
+
+ // Token selection state
+ const [selectedToken, setSelectedToken] = useState(null);
+ const [customTokenAddress, setCustomTokenAddress] = useState("");
+ const [useCustomToken, setUseCustomToken] = useState(false);
+ const [tokenVerificationState, setTokenVerificationState] = useState("idle");
+ const [verifiedToken, setVerifiedToken] = useState(null);
+ const [showWalletAlert, setShowWalletAlert] = useState(!isConnected);
+
+ // UI state for collapsible invoices
+ const [expandedInvoice, setExpandedInvoice] = useState(0);
+
+ // Batch invoice data
+ const [invoiceRows, setInvoiceRows] = useState([
+ {
+ clientAddress: "",
+ clientFname: "",
+ clientLname: "",
+ clientEmail: "",
+ clientCountry: "",
+ clientCity: "",
+ clientPostalcode: "",
+ itemData: [
+ {
+ description: "",
+ qty: "",
+ unitPrice: "",
+ discount: "",
+ tax: "",
+ amount: "",
+ },
+ ],
+ totalAmountDue: 0,
+ },
+ ]);
+
+ // User info (shared across all invoices)
+ const [userInfo, setUserInfo] = useState({
+ userFname: "",
+ userLname: "",
+ userEmail: "",
+ userCountry: "",
+ userCity: "",
+ userPostalcode: "",
+ });
+
+ // Calculate totals for each invoice
+ useEffect(() => {
+ setInvoiceRows((prev) =>
+ prev.map((row) => {
+ const total = row.itemData.reduce((sum, item) => {
+ const qty = parseUnits(item.qty || "0", 18);
+ const unitPrice = parseUnits(item.unitPrice || "0", 18);
+ const discount = parseUnits(item.discount || "0", 18);
+ const tax = parseUnits(item.tax || "0", 18);
+ const lineTotal = (qty * unitPrice) / parseUnits("1", 18);
+ const adjusted = lineTotal - discount + tax;
+ return sum + adjusted;
+ }, 0n);
+
+ return {
+ ...row,
+ totalAmountDue: formatUnits(total, 18),
+ };
+ })
+ );
+ }, [invoiceRows.map((r) => JSON.stringify(r.itemData)).join(",")]);
+
+ // Initialize Lit
+ useEffect(() => {
+ const initLit = async () => {
+ if (!litClientRef.current) {
+ const client = new LitNodeClient({
+ litNetwork: LIT_NETWORK.DatilDev,
+ debug: false,
+ });
+ await client.connect();
+ litClientRef.current = client;
+ }
+ };
+ initLit();
+ }, []);
+
+ useEffect(() => {
+ setShowWalletAlert(!isConnected);
+ }, [isConnected]);
+
+ // Invoice management
+ const addInvoiceRow = () => {
+ const newIndex = invoiceRows.length;
+ setInvoiceRows((prev) => [
+ ...prev,
+ {
+ clientAddress: "",
+ clientFname: "",
+ clientLname: "",
+ clientEmail: "",
+ clientCountry: "",
+ clientCity: "",
+ clientPostalcode: "",
+ itemData: [
+ {
+ description: "",
+ qty: "",
+ unitPrice: "",
+ discount: "",
+ tax: "",
+ amount: "",
+ },
+ ],
+ totalAmountDue: 0,
+ },
+ ]);
+ setExpandedInvoice(newIndex);
+ toast.success("New invoice added to batch");
+ };
+
+ const removeInvoiceRow = (index) => {
+ if (invoiceRows.length > 1) {
+ setInvoiceRows((prev) => prev.filter((_, i) => i !== index));
+ if (expandedInvoice === index) {
+ setExpandedInvoice(0);
+ }
+ toast.success("Invoice removed from batch");
+ }
+ };
+
+ const updateInvoiceRow = (rowIndex, field, value) => {
+ setInvoiceRows((prev) =>
+ prev.map((row, i) => (i === rowIndex ? { ...row, [field]: value } : row))
+ );
+ };
+
+ // Item management
+ const handleItemData = (e, rowIndex, itemIndex) => {
+ const { name, value } = e.target;
+
+ setInvoiceRows((prevRows) =>
+ prevRows.map((row, rIndex) => {
+ if (rIndex === rowIndex) {
+ const updatedItemData = row.itemData.map((item, iIndex) => {
+ if (iIndex === itemIndex) {
+ const updatedItem = { ...item, [name]: value };
+ if (
+ name === "qty" ||
+ name === "unitPrice" ||
+ name === "discount" ||
+ name === "tax"
+ ) {
+ const qty = parseUnits(updatedItem.qty || "0", 18);
+ const unitPrice = parseUnits(updatedItem.unitPrice || "0", 18);
+ const discount = parseUnits(updatedItem.discount || "0", 18);
+ const tax = parseUnits(updatedItem.tax || "0", 18);
+
+ const lineTotal = (qty * unitPrice) / parseUnits("1", 18);
+ const finalAmount = lineTotal - discount + tax;
+
+ updatedItem.amount = formatUnits(finalAmount, 18);
+ }
+ return updatedItem;
+ }
+ return item;
+ });
+
+ return { ...row, itemData: updatedItemData };
+ }
+ return row;
+ })
+ );
+ };
+
+ const addItem = (rowIndex) => {
+ setInvoiceRows((prev) =>
+ prev.map((row, i) => {
+ if (i === rowIndex) {
+ return {
+ ...row,
+ itemData: [
+ ...row.itemData,
+ {
+ description: "",
+ qty: "",
+ unitPrice: "",
+ discount: "",
+ tax: "",
+ amount: "",
+ },
+ ],
+ };
+ }
+ return row;
+ })
+ );
+ };
+
+ // Token verification
+ const verifyToken = async (address) => {
+ setTokenVerificationState("verifying");
+
+ try {
+ if (typeof window !== "undefined" && window.ethereum) {
+ const provider = new BrowserProvider(window.ethereum);
+ const contract = new ethers.Contract(address, ERC20_ABI, provider);
+
+ const [symbol, name, decimals] = await Promise.all([
+ contract.symbol().catch(() => "UNKNOWN"),
+ contract.name().catch(() => "Unknown Token"),
+ contract.decimals().catch(() => 18),
+ ]);
+
+ setVerifiedToken({ address, symbol, name, decimals });
+ setTokenVerificationState("success");
+ toast.success(`Token verified: ${name} (${symbol})`);
+ } else {
+ console.error("No Ethereum provider found");
+ setTokenVerificationState("error");
+ toast.error("No Ethereum provider found");
+ }
+ } catch (error) {
+ console.error("Verification failed:", error);
+ setTokenVerificationState("error");
+ toast.error("Token verification failed. Please check the address.");
+ }
+ };
+
+ // Enhanced error handling for batch creation
+ const getErrorMessage = (error) => {
+ if (error.code === "ACTION_REJECTED") {
+ return "Transaction was cancelled by user";
+ } else if (error.message?.includes("insufficient")) {
+ return "Insufficient balance to complete transaction";
+ } else if (error.message?.includes("network")) {
+ return "Network error. Please check your connection and try again";
+ } else if (error.reason) {
+ return `Transaction failed: ${error.reason}`;
+ } else if (error.message) {
+ return error.message;
+ } else {
+ return "Failed to create invoice batch. Please try again.";
+ }
+ };
+
+ // Create batch invoices
+ const createInvoicesRequest = async () => {
+ if (!isConnected || !walletClient) {
+ toast.error("Please connect your wallet to continue");
+ return;
+ }
+
+ try {
+ setLoading(true);
+ toast.info("Starting batch invoice creation...");
+
+ const provider = new BrowserProvider(walletClient);
+ const signer = await provider.getSigner();
+
+ const paymentToken = useCustomToken ? verifiedToken : selectedToken;
+
+ if (!paymentToken) {
+ toast.error("Please select a payment token");
+ return;
+ }
+
+ // Validate invoices
+ const validInvoices = invoiceRows.filter(
+ (row) => row.clientAddress && parseFloat(row.totalAmountDue) > 0
+ );
+
+ if (validInvoices.length === 0) {
+ toast.error(
+ "Please add at least one valid invoice with client address and amount"
+ );
+ return;
+ }
+
+ // Prepare batch arrays
+ const tos = [];
+ const amounts = [];
+ const encryptedPayloads = [];
+ const encryptedHashes = [];
+
+ const litNodeClient = litClientRef.current;
+ if (!litNodeClient) {
+ toast.error("Encryption service not ready. Please try again.");
+ return;
+ }
+
+ toast.info(`Processing ${validInvoices.length} invoices...`);
+
+ // Process each invoice
+ for (const [index, row] of validInvoices.entries()) {
+ toast.info(
+ `Encrypting invoice ${index + 1} of ${validInvoices.length}...`
+ );
+
+ const invoicePayload = {
+ amountDue: row.totalAmountDue.toString(),
+ dueDate,
+ issueDate,
+ paymentToken: {
+ address: paymentToken.address,
+ symbol: paymentToken.symbol,
+ decimals: Number(paymentToken.decimals),
+ },
+ user: {
+ address: account?.address.toString(),
+ fname: userInfo.userFname,
+ lname: userInfo.userLname,
+ email: userInfo.userEmail,
+ country: userInfo.userCountry,
+ city: userInfo.userCity,
+ postalcode: userInfo.userPostalcode,
+ },
+ client: {
+ address: row.clientAddress,
+ fname: row.clientFname,
+ lname: row.clientLname,
+ email: row.clientEmail,
+ country: row.clientCountry,
+ city: row.clientCity,
+ postalcode: row.clientPostalcode,
+ },
+ items: row.itemData,
+ // Add batch metadata
+ batchInfo: {
+ batchId: `batch_${Date.now()}`,
+ batchSize: validInvoices.length,
+ index: index,
+ batchType: "user_created",
+ },
+ };
+
+ const invoiceString = JSON.stringify(invoicePayload);
+
+ const accessControlConditions = [
+ {
+ contractAddress: "",
+ standardContractType: "",
+ chain: "ethereum",
+ method: "",
+ parameters: [":userAddress"],
+ returnValueTest: {
+ comparator: "=",
+ value: account.address.toLowerCase(),
+ },
+ },
+ { operator: "or" },
+ {
+ contractAddress: "",
+ standardContractType: "",
+ chain: "ethereum",
+ method: "",
+ parameters: [":userAddress"],
+ returnValueTest: {
+ comparator: "=",
+ value: row.clientAddress.toLowerCase(),
+ },
+ },
+ ];
+
+ const { ciphertext, dataToEncryptHash } = await encryptString(
+ {
+ accessControlConditions,
+ dataToEncrypt: invoiceString,
+ },
+ litNodeClient
+ );
+
+ const sessionSigs = await litNodeClient.getSessionSigs({
+ chain: "ethereum",
+ resourceAbilityRequests: [
+ {
+ resource: new LitAccessControlConditionResource("*"),
+ ability: LIT_ABILITY.AccessControlConditionDecryption,
+ },
+ ],
+ authNeededCallback: async ({
+ uri,
+ expiration,
+ resourceAbilityRequests,
+ }) => {
+ const nonce = await litNodeClient.getLatestBlockhash();
+ const toSign = await createSiweMessageWithRecaps({
+ uri,
+ expiration,
+ resources: resourceAbilityRequests,
+ walletAddress: account.address,
+ nonce,
+ litNodeClient,
+ });
+
+ return await generateAuthSig({
+ signer,
+ toSign,
+ });
+ },
+ });
+
+ const encryptedStringBase64 = btoa(ciphertext);
+
+ // Add to batch arrays
+ tos.push(row.clientAddress);
+ amounts.push(
+ ethers.parseUnits(
+ row.totalAmountDue.toString(),
+ paymentToken.decimals
+ )
+ );
+ encryptedPayloads.push(encryptedStringBase64);
+ encryptedHashes.push(dataToEncryptHash);
+ }
+
+ toast.success("All invoices encrypted successfully!");
+ toast.info("Submitting batch transaction to blockchain...");
+
+ // Send to contract
+ const contract = new Contract(
+ import.meta.env.VITE_CONTRACT_ADDRESS,
+ ChainvoiceABI,
+ signer
+ );
+
+ const tx = await contract.createInvoicesBatch(
+ tos,
+ amounts,
+ paymentToken.address,
+ encryptedPayloads,
+ encryptedHashes
+ );
+
+ toast.info("Transaction submitted! Waiting for confirmation...");
+ const receipt = await tx.wait();
+
+ toast.success(
+ `Successfully created ${validInvoices.length} invoices in batch!`
+ );
+ toast.success(
+ `Gas saved: ~${
+ (validInvoices.length - 1) * 75
+ }% compared to individual transactions!`
+ );
+
+ setTimeout(() => navigate("/dashboard/sent"), 3000);
+ } catch (err) {
+ console.error("Batch creation failed:", err);
+ const errorMsg = getErrorMessage(err);
+ toast.error(errorMsg);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ await createInvoicesRequest();
+ };
+
+ const totalBatchAmount = invoiceRows.reduce((sum, row) => {
+ return sum + (parseFloat(row.totalAmountDue) || 0);
+ }, 0);
+
+ const validInvoices = invoiceRows.filter(
+ (row) => row.clientAddress && parseFloat(row.totalAmountDue) > 0
+ ).length;
+
+ const gasSavingsPercent = validInvoices > 1 ? (validInvoices - 1) * 75 : 0;
+
+ return (
+ <>
+
+
+
+ {/* Invoice Detail Drawer - EXACT SAME AS RECEIVED INVOICE */}
+
+
+
+ {/* Balance Error Alerts */}
+ {balanceErrors.length > 0 && (
+
+
+ {error && (
+
+ )}
+ Batch Payment
++ Select and pay multiple invoices in one transaction +
+
+
+ )}
+
+ {/* Smart Batch Suggestions */}
+ {batchSuggestions.length > 0 && (
+
+
+
+ {balanceErrors.map((error, index) => (
+
+
+ • {error}
+
+ ))}
+
+
+ )}
+
+ {/* Batch Actions Panel */}
+ {unpaidInvoices.length > 0 && (
+
+
+
+ {batchSuggestions.map((suggestion) => (
+
+
+
+ ))}
+
+
+ {suggestion.invoices.length} invoices
+ {suggestion.sender
+ ? ` from ${suggestion.sender.fname}`
+ : ""}
+
+
+ ({suggestion.reason})
+
+
+
+
+ {suggestion.totalAmount.toFixed(4)}{" "}
+ {suggestion.token?.symbol || "ETH"}
+
+
+
+
+
+ )}
+
+ {/* Invoices Table */}
+
+
+
+ {/* Payment Summary */}
+ {selectedCount > 0 && (
+ <>
+
+
+
+ {selectedCount} selected
+
+
+
+
+
+
+
+
+
+ )}
+
+ {selectedCount === 0 && (
+ + Payment Summary: +
+
+ {Array.from(grouped.entries()).map(
+ ([tokenKey, group]) => (
+
+
+
+ )
+ )}
+
+ {group.logo ? (
+ 
{
+ e.target.src = "/tokenImages/generic.png";
+ }}
+ />
+ ) : (
+
+
+ {group.totalAmount.toFixed(6)} {group.symbol}
+
+
+
+ )}
+
+
+
+ {loading ? (
+
+
+
+ ) : error ? (
+ Loading invoices...
+
+
+ ) : receivedInvoices.length === 0 ? (
+
+
+ {error}
+
+
+ ) : (
+
+
+ + No Invoices Found +
++ You don't have any received invoices yet. +
+
+
+
+
+
+ )}
+
+ {/* Pagination */}
+ {receivedInvoices.length > rowsPerPage && (
+ | + 0 + } + onChange={(e) => { + if (e.target.checked) { + handleSelectAll(); + } else { + handleClearAll(); + } + }} + /> + | ++ Client + | ++ Sender + | ++ Amount + | ++ Status + | ++ Date + | ++ Actions + | +
|---|---|---|---|---|---|---|
| + handleSelectInvoice(invoice.id)} + disabled={invoice.isPaid || invoice.isCancelled} + /> + | +
+
+
+
+
+ {invoice.user?.fname?.charAt(0) || "C"}
+
+
+
+
+
+ {invoice.user?.fname} {invoice.user?.lname}
+
+
+ {invoice.user?.email}
+
+ {/* Batch indicator */}
+ {invoice.batchInfo && (
+
+
+ )}
+
+
+ |
+ + + {formatAddress(invoice.user?.address)} + + | +
+
+ {invoice.paymentToken?.logo ? (
+
+ |
+
+ {invoice.isCancelled ? (
+
+ |
+ + {formatDate(invoice.issueDate)} + | +
+
+
+
+ {/* Pay Entire Batch Button */}
+ {invoice.batchInfo &&
+ !invoice.isPaid &&
+ !invoice.isCancelled && (
+
+ )}
+
+ {!invoice.isPaid && !invoice.isCancelled && (
+
+ )}
+ {invoice.isCancelled && (
+
+ )}
+
+ |
+
+
+ )}
+
+
+ Showing {page * rowsPerPage + 1} to{" "}
+ {Math.min(
+ (page + 1) * rowsPerPage,
+ receivedInvoices.length
+ )}{" "}
+ of {receivedInvoices.length} results
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {drawerState.selectedInvoice.isCancelled && (
+
+
+
+ 
+
+
+ + Cha + + in + + voice +
++ Powered by Chainvoice +
+
+
+ + INVOICE +
++ # + {drawerState.selectedInvoice.id + .toString() + .padStart(6, "0")} +
+
+ {drawerState.selectedInvoice.isCancelled ? (
+
+
+
+
+ )}
+
+
+
+
+ {!drawerState.selectedInvoice.isPaid && (
+
+
+
+ Invoice Cancelled by{" "}
+ {drawerState.selectedInvoice.user?.fname ||
+ "The sender"}{" "}
+ {drawerState.selectedInvoice.user?.lname || ""}{" "}
+
+
+ You no longer need to make payment for this invoice.
+
+
+
+ )}
+
+ Note: This invoice was cancelled before payment was
+ completed
+
+
+
+
+
+
+
+ + From +
++ {drawerState.selectedInvoice.user.fname}{" "} + {drawerState.selectedInvoice.user.lname} +
++ {drawerState.selectedInvoice.user.address} +
++ {drawerState.selectedInvoice.user.city},{" "} + {drawerState.selectedInvoice.user.country},{" "} + {drawerState.selectedInvoice.user.postalcode} +
++ {drawerState.selectedInvoice.user.email} +
+
+
+ + Bill To +
++ {drawerState.selectedInvoice.client.fname}{" "} + {drawerState.selectedInvoice.client.lname} +
++ {drawerState.selectedInvoice.client.address} +
++ {drawerState.selectedInvoice.client.city},{" "} + {drawerState.selectedInvoice.client.country},{" "} + {drawerState.selectedInvoice.client.postalcode} +
++ {drawerState.selectedInvoice.client.email} +
+
+
+
+ + Payment Currency +
+
+ {drawerState.selectedInvoice.paymentToken?.logo ? (
+ 
{
+ e.target.src = "/tokenImages/generic.png";
+ }}
+ />
+ ) : (
+
+ {drawerState.selectedInvoice.paymentToken?.address && (
+
+
+ )}
+
+
+ + {drawerState.selectedInvoice.paymentToken?.name || + "Ether "} + {"("} + {drawerState.selectedInvoice.paymentToken?.symbol || + "ETH"} + {")"} +
++ {drawerState.selectedInvoice.paymentToken?.address + ? `${drawerState.selectedInvoice.paymentToken.address.substring( + 0, + 10 + )}......${drawerState.selectedInvoice.paymentToken.address.substring( + 33 + )}` + : "Native Currency"} +
+
+
+ )}
+ + Decimals:{" "} + {drawerState.selectedInvoice.paymentToken.decimals || + 18} +
+Chain: Sepolia Testnet
+
+
+
+
+
+ Issued:{" "}
+ {new Date(
+ drawerState.selectedInvoice.issueDate
+ ).toLocaleDateString()}
+
+
+ Due:{" "}
+ {new Date(
+ drawerState.selectedInvoice.dueDate
+ ).toLocaleDateString()}
+
+
+
+
+
+
+
+
+ | Description | +Qty | +Price | +Discount | +Tax | +Amount | +
|---|---|---|---|---|---|
| {item.description} | +{item.qty} | ++ {item.unitPrice}{" "} + {drawerState.selectedInvoice.paymentToken?.symbol} + | ++ {item.discount || "0"} + | ++ {item.tax || "0%"} + | ++ {item.amount}{" "} + {drawerState.selectedInvoice.paymentToken?.symbol} + | +
+
+
+
+ Subtotal:
+
+ {drawerState.selectedInvoice.amountDue}{" "}
+ {drawerState.selectedInvoice.paymentToken?.symbol}
+
+
+
+ Network Fee:
+
+ {ethers.formatUnits(fee)} ETH
+
+
+
+ Total Amount:
+
+ {drawerState.selectedInvoice.paymentToken?.symbol ===
+ "ETH"
+ ? `${(
+ parseFloat(drawerState.selectedInvoice.amountDue) +
+ parseFloat(ethers.formatUnits(fee))
+ ).toFixed(6)} ETH`
+ : `${drawerState.selectedInvoice.amountDue} ${
+ drawerState.selectedInvoice.paymentToken?.symbol
+ } + ${ethers.formatUnits(fee)} ETH`}
+
+
+
+
+
+
+
+ setShowWalletAlert(false)}
+ />
+
+
+
+ {/* Simple Header */}
+
+
+ );
+}
+
+export default CreateInvoicesBatch;
diff --git a/frontend/src/page/Home.jsx b/frontend/src/page/Home.jsx
index 67188092..ae8e6c89 100644
--- a/frontend/src/page/Home.jsx
+++ b/frontend/src/page/Home.jsx
@@ -1,4 +1,4 @@
-// Home.js - Complete Updated Version with Generate Prefilled Link
+// Home.js - Updated with Batch Creation AND Batch Payment sections
import * as React from "react";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
@@ -12,6 +12,7 @@ import DraftsIcon from "@mui/icons-material/Drafts";
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import LinkIcon from "@mui/icons-material/Link";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
+import { FileStack, CreditCard, Layers3, PlusCircle, FileStackIcon } from "lucide-react";
export default function Home() {
const navigate = useNavigate();
@@ -42,6 +43,12 @@ export default function Home() {
route: "generate-link",
color: "#a78bfa",
},
+ {
+ text: "Batch Create",
+ icon:
+
+
+ {/* Clean Date Selection */}
+ + Create Invoices (Batch) +
++ Create multiple invoices in a single transaction and save on gas + fees +
+
+
+
+ {/* Clean Summary Stats */}
+
+
+
+
+
+
+
+
+
+ {invoiceRows.length}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ if (date) {
+ setDueDate(date);
+ }
+ }}
+ initialFocus
+ disabled={(date) => date < new Date()}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {invoiceRows.length}
+ Total Invoices
+
+
+ {validInvoices}
+ Valid Invoices
+
+
+
+ {totalBatchAmount.toFixed(4)}
+
+
+ Total Amount (
+ {useCustomToken
+ ? verifiedToken?.symbol || "TOKEN"
+ : selectedToken?.symbol || "TOKEN"}
+ )
+
+
+
+ ~{gasSavingsPercent}%
+ Gas Savings
+
- 0 &&
+ selectedCount < unpaidInvoices.length
+ }
+ checked={
+ selectedCount === unpaidInvoices.length &&
+ unpaidInvoices.length > 0
+ }
+ onChange={(e) => {
+ if (e.target.checked) {
+ handleSelectAll();
+ } else {
+ handleClearAll();
+ }
+ }}
+ />
+ }
+ label=""
+ />
+ ) : (
+ column.label
+ )}
))}
@@ -612,9 +1289,20 @@ function ReceivedInvoice() {
sx={{
"&:last-child td": { borderBottom: 0 },
"&:hover": { backgroundColor: "#f8fafc" },
+ backgroundColor: selectedInvoices.has(invoice.id)
+ ? "rgba(34, 197, 94, 0.05)"
+ : "transparent",
}}
>
- {/* Client Column */}
+
+ handleSelectInvoice(invoice.id)}
+ disabled={invoice.isPaid || invoice.isCancelled}
+ color="success"
+ />
+
+
{invoice.user?.email}
+ {invoice.batchInfo && (
+
-
) : receivedInvoices.length === 0 ? (
@@ -594,7 +1246,32 @@ function ReceivedInvoice() {
borderBottom: "1px solid #f1f5f9",
}}
>
- {column.label}
+ {column.id === "select" ? (
+ {error}
+
+
{error}
+
+ )}