feat(winnings): add filter bar

Signed-off-by: Rakib Ansary <rakibansary@topcoder.com>

Author: rakibansary

src/apps/wallet/src/home/tabs/winnings/Winnings.module.scss

@@ -25,5 +25,11 @@
         background-color: $tc-white;
         border-radius: 4px;
         margin-top: $sp-4;
+        .centered {
+            height: 200px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
     }
 }

src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* eslint-disable react/jsx-no-bind */
 import { toast } from 'react-toastify'
 import { AxiosError } from 'axios'
@@ -72,6 +73,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     const [confirmFlow, setConfirmFlow] = React.useState<ConfirmFlowData | undefined>(undefined)
     const [winnings, setWinnings] = React.useState<ReadonlyArray<Winning>>([])
     const [isLoading, setIsLoading] = React.useState<boolean>(false)
+    const [filters, setFilters] = React.useState<Record<string, string[]>>({})
 
     const convertToWinnings = useCallback(
         (payments: WinningDetail[]) => payments.map(payment => ({
@@ -94,15 +96,15 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     const fetchWinnings = useCallback(async () => {
         setIsLoading(true)
         try {
-            const payments = await getPayments(props.profile.userId.toString())
+            const payments = await getPayments(props.profile.userId.toString(), filters)
             const winningsData = convertToWinnings(payments)
             setWinnings(winningsData)
         } catch (apiError) {
             console.error('Failed to fetch winnings:', apiError)
         } finally {
             setIsLoading(false)
         }
-    }, [props.profile.userId, convertToWinnings])
+    }, [props.profile.userId, convertToWinnings, filters])
 
     const renderConfirmModalContent = React.useMemo(() => {
         if (confirmFlow?.content === undefined) {
@@ -192,6 +194,10 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                             label: 'Contest Payment',
                                             value: 'CONTEST_PAYMENT',
                                         },
+                                        {
+                                            label: 'Copilot Payment',
+                                            value: 'COPILOT_PAYMENT',
+                                        },
                                         {
                                             label: 'Review Board Payment',
                                             value: 'REVIEW_BOARD_PAYMENT',
@@ -224,15 +230,18 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                 },
                             ]}
                             onFilterChange={(key: string, value: string[]) => {
-                                console.log(key, value)
+                                setFilters({
+                                    ...filters,
+                                    [key]: value,
+                                })
                             }}
                             onResetFilters={() => {
-                                console.log('reset')
+                                setFilters({})
                             }}
                         />
                         {/* <PageDivider /> */}
-                        {isLoading && <LoadingCircles />}
-                        {!isLoading && (
+                        {isLoading && <LoadingCircles className={styles.centered} />}
+                        {!isLoading && winnings.length > 0 && (
                             <PaymentsTable
                                 payments={winnings}
                                 onPayMeClick={async function onPayMeClicked(
@@ -248,6 +257,15 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                 }}
                             />
                         )}
+                        {!isLoading && winnings.length === 0 && (
+                            <div className={styles.centered}>
+                                <p className='body-main'>
+                                    {Object.keys(filters).length === 0
+                                        ? 'Your future earnings will appear here — explore Topcoder\'s opportunities to start making an impact!'
+                                        : 'No payments match your filters.'}
+                                </p>
+                            </div>
+                        )}
                     </Collapsible>
                 </div>
             </div>

src/apps/wallet/src/lib/services/wallet.ts

@@ -42,11 +42,22 @@ export async function getUserTaxFormDetails(): Promise<TaxForm[]> {
     return response.data
 }
 
-export async function getPayments(userId: string): Promise<WinningDetail[]> {
+export async function getPayments(userId: string, filters: Record<string, string[]>): Promise<WinningDetail[]> {
+    const filteredFilters: Record<string, string> = {}
+
+    for (const key in filters) {
+        if (filters[key].length > 0) {
+            filteredFilters[key] = filters[key][0]
+        }
+    }
+
     const body = JSON.stringify({
         winnerId: userId,
+        ...filteredFilters,
     })
 
+    console.log('Ignoring filters for now', filteredFilters)
+
     const url = `${baseUrl}/user/winnings`
     const response = await xhrPostAsync<string, ApiResponse<WinningDetail[]>>(url, body)