Update the Disbursements table by adding the status column (#194)

### What Update the Disbursements table by adding the status column. Fix: also add the option to filter payments in the CANCELED state. ### Why User feedback.
stellar · Dec 2, 2024 · dd863ef · dd863ef
1 parent f9ac775
commit dd863ef
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/components/DisbursementsTable.tsx b/src/components/DisbursementsTable.tsx
@@ -106,12 +106,13 @@ export const DisbursementsTable: React.FC<DisbursementsTableProps> = ({
             <Checkbox id="disbursements-select-all" fieldSize="xs" />
           </Table.HeaderCell> */}
             <Table.HeaderCell
+              width="9rem"
               sortDirection={sortBy === "name" ? sortDir : defaultSortDirection}
               onSort={() => handleSort("name")}
             >
               Disbursement name
             </Table.HeaderCell>
-            <Table.HeaderCell>Total payments</Table.HeaderCell>
+            <Table.HeaderCell width="5.7rem">Total payments</Table.HeaderCell>
             <Table.HeaderCell>Successful</Table.HeaderCell>
             <Table.HeaderCell>Failed</Table.HeaderCell>
             <Table.HeaderCell>Canceled</Table.HeaderCell>
@@ -124,10 +125,11 @@ export const DisbursementsTable: React.FC<DisbursementsTableProps> = ({
             >
               Created at
             </Table.HeaderCell>
-            <Table.HeaderCell textAlign="right" width="7.9rem">
+            <Table.HeaderCell>Status</Table.HeaderCell>
+            <Table.HeaderCell textAlign="right" width="4.8rem">
               Total amount
             </Table.HeaderCell>
-            <Table.HeaderCell textAlign="right" width="7.9rem">
+            <Table.HeaderCell textAlign="right" width="8.1rem">
               Amount disbursed
             </Table.HeaderCell>
           </Table.Header>
@@ -146,35 +148,37 @@ export const DisbursementsTable: React.FC<DisbursementsTableProps> = ({
                     {d.name}
                   </Link>
                 </Table.BodyCell>
-                <Table.BodyCell width="5.5rem" textAlign="right">
+                <Table.BodyCell textAlign="right">
                   {renderNumberOrDash(d.stats?.paymentsTotalCount)}
                 </Table.BodyCell>
-                <Table.BodyCell width="4rem" textAlign="right">
+                <Table.BodyCell textAlign="right">
                   {renderNumberOrDash(d.stats?.paymentsSuccessfulCount)}
                 </Table.BodyCell>
-                <Table.BodyCell width="2.25rem" textAlign="right">
+                <Table.BodyCell textAlign="right">
                   {renderNumberOrDash(d.stats?.paymentsFailedCount)}
                 </Table.BodyCell>
-                <Table.BodyCell width="3.4rem" textAlign="right">
+                <Table.BodyCell textAlign="right">
                   {renderNumberOrDash(d.stats?.paymentsCanceledCount)}
                 </Table.BodyCell>
-                <Table.BodyCell width="3.75rem" textAlign="right">
+                <Table.BodyCell textAlign="right">
                   {renderNumberOrDash(d.stats?.paymentsRemainingCount)}
                 </Table.BodyCell>
-                <Table.BodyCell width="9.375rem">
+                <Table.BodyCell width="9.5rem">
                   <span className="Table-v2__cell--secondary">
                     {formatDateTime(d.createdAt)}
                   </span>
                 </Table.BodyCell>
 
-                <Table.BodyCell textAlign="right" width="7.9rem">
+                <Table.BodyCell textAlign="right">{d.status}</Table.BodyCell>
+
+                <Table.BodyCell textAlign="right">
                   <AssetAmount
                     amount={d.stats?.totalAmount}
                     assetCode={d.asset.code}
                     fallback="-"
                   />
                 </Table.BodyCell>
-                <Table.BodyCell textAlign="right" width="7.9rem">
+                <Table.BodyCell textAlign="right">
                   <AssetAmount
                     amount={d.stats?.disbursedAmount}
                     assetCode={d.asset.code}

diff --git a/src/pages/Payments.tsx b/src/pages/Payments.tsx
@@ -136,6 +136,7 @@ export const Payments = () => {
                   <option value="PAUSED">Paused</option>
                   <option value="SUCCESS">Success</option>
                   <option value="FAILED">Failed</option>
+                  <option value="CANCELED">Canceled</option>
                 </Select>
               </div>