Merge pull request #1081 from topcoder-platform/wallet-admin-fixes

minor admin-wallet fixes

Author: vas3a

src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx

@@ -37,6 +37,10 @@ function formatStatus(status: string): string {
             return 'Cancel'
         case 'PROCESSING':
             return 'Processing'
+        case 'FAILED':
+            return 'Failed'
+        case 'RETURNED':
+            return 'Returned'
         default:
             return status.replaceAll('_', ' ')
     }
@@ -340,6 +344,14 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                             label: 'Processing',
                                             value: 'PROCESSING',
                                         },
+                                        {
+                                            label: 'Failed',
+                                            value: 'FAILED',
+                                        },
+                                        {
+                                            label: 'Returned',
+                                            value: 'RETURNED',
+                                        },
                                     ],
                                     type: 'dropdown',
                                 },

src/apps/wallet-admin/src/lib/components/filter-bar/FilterBar.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-bind */
-import React, { ChangeEvent } from 'react'
+import React, { ChangeEvent, useRef } from 'react'
 
 import { Button, IconOutline, InputSelect, InputText } from '~/libs/ui'
 import { InputHandleAutocomplete, MembersAutocompeteResult } from '~/apps/gamification-admin/src/game-lib'
@@ -28,6 +28,7 @@ interface FilterBarProps {
 
 const FilterBar: React.FC<FilterBarProps> = (props: FilterBarProps) => {
     const [selectedValue, setSelectedValue] = React.useState<Map<string, string | any[]>>(new Map())
+    const selectedMembers = useRef<MembersAutocompeteResult[]>([])
 
     const renderDropdown = (index: number, filter: Filter): JSX.Element => (
         <InputSelect
@@ -52,10 +53,12 @@ const FilterBar: React.FC<FilterBarProps> = (props: FilterBarProps) => {
             className={styles.filterInput}
             placeholder={filter.label}
             onChange={(event: Array<MembersAutocompeteResult>) => {
+                selectedMembers.current = event
                 setSelectedValue(new Map(selectedValue.set(filter.key, event)))
                 props.onFilterChange(filter.key, event.map(member => member.userId))
             }}
             tabIndex={index}
+            value={selectedMembers.current}
         />
     )
 
@@ -121,6 +124,7 @@ const FilterBar: React.FC<FilterBarProps> = (props: FilterBarProps) => {
                 size='lg'
                 disabled={selectedValue.size === 0}
                 onClick={() => {
+                    selectedMembers.current = []
                     setSelectedValue(new Map())
                     props.onResetFilters?.()
                 }}

src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.module.scss

@@ -41,6 +41,11 @@ table {
         top: 0;
         background-color: white !important;
         text-transform: uppercase;
+
+        &.description {
+            width: 360px;
+            max-width: 360px;
+        }
     }
 
     tbody tr td:first-child {
@@ -97,7 +102,7 @@ table {
 .actionButtons {
     padding-left: 8px;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
 }
 

src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.tsx

@@ -38,7 +38,7 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                     <thead>
                         <tr>
                             <th className='body-ultra-small-bold'>HANDLE</th>
-                            <th className='body-ultra-small-bold'>DESCRIPTION</th>
+                            <th className={`body-ultra-small-bold ${styles.description}`}>DESCRIPTION</th>
                             <th className='body-ultra-small-bold'>CREATE DATE</th>
                             <th className='body-ultra-small-bold'>PAYMENT</th>
                             <th className='body-ultra-small-bold'>STATUS</th>