feat: added sample template

apps/dashboard/components/batch-payments/index.tsx

@@ -9,6 +9,8 @@ import Details from "../details-card/derails"
 
 import BatchPaymentsList from "./list"
 
+import SampleCSVTable from "./sample-table"
+
 import {
   displayCurrencyBatchPayments,
   displayWalletBalanceBatchPayments,
@@ -21,6 +23,7 @@ import {
   processRecords,
 } from "@/app/batch-payments/server-actions"
 import { WalletCurrency } from "@/services/graphql/generated"
+
 import { centsToDollars } from "@/app/utils"
 
 type paymentDetails = {
@@ -262,13 +265,14 @@ export default function BatchPayments() {
             }}
           >
             {`Please upload a CSV file containing the following columns: "username" (the
-            recipient of the bitcoin), "cents/sats" (this column will indicate the amount;
+            recipient of the bitcoin), "dollars/sats" (this column will indicate the amount;
             the header of this column will determine which wallet to use. If the header is
-            "cents," your USD wallet will be utilized, and the amount will be in cents. If
+            "dollars," your USD wallet will be utilized, and the amount will be in US dollars. If
             "sats" is used, your BTC wallet will be employed, and the amount will be in
             sats), and "memo" (optional)`}
             .
           </Card>
+          <SampleCSVTable />
         </>
       )}
     </div>

apps/dashboard/components/batch-payments/sample-table.tsx

@@ -0,0 +1,93 @@
+import React from "react"
+import Table from "@mui/joy/Table"
+import { Box, Button } from "@mui/joy"
+import DownloadIcon from "@mui/icons-material/Download"
+
+const SampleCSVTable = () => {
+  const createCsvContent = () => {
+    const csvRows = [["username", "dollars", "memo"]]
+    return csvRows.map((e) => e.join(",")).join("\n")
+  }
+
+  const handleDownload = () => {
+    const csvContent = createCsvContent()
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
+    const link = document.createElement("a")
+    const url = URL.createObjectURL(blob)
+    link.setAttribute("href", url)
+    link.setAttribute("download", "template.csv")
+    link.style.visibility = "hidden"
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          maxWidth: "35em",
+          margin: "0 auto",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "right",
+            marginBottom: "0.2em",
+          }}
+        >
+          <Button
+            sx={{
+              display: "flex",
+              gap: "0.5em",
+            }}
+            variant="plain"
+            onClick={handleDownload}
+          >
+            <DownloadIcon /> Download Template
+          </Button>
+        </Box>
+        <Table
+          sx={{
+            "width": "100%",
+            "border": "1px solid #ccc",
+            "borderCollapse": "collapse",
+            "& th, & td": {
+              border: "1px solid #ccc",
+              padding: "0.5em",
+            },
+          }}
+          aria-label={`payments`}
+        >
+          <thead>
+            <tr>
+              <th>username</th>
+              <th>dollars/sats</th>
+              <th>memo</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>user a</td>
+              <td>12</td>
+              <td>sample memo</td>
+            </tr>
+            <tr>
+              <td>user b</td>
+              <td>20</td>
+              <td>sample memo</td>
+            </tr>
+            <tr>
+              <td>user a</td>
+              <td>30</td>
+              <td>sample memo</td>
+            </tr>
+          </tbody>
+        </Table>
+      </Box>
+    </>
+  )
+}
+
+export default SampleCSVTable