feat(wallet-admin): audit ui

Author: rakibansary

src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.module.scss

@@ -20,10 +20,6 @@
     margin-bottom: 5px;
 }
 
-.value {
-    // Style for your value text
-}
-
 .inputGroup {
     display: flex;
     flex-direction: column;

src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.tsx

@@ -5,26 +5,73 @@ import React from 'react'
 
 import { Button, Collapsible } from '~/libs/ui'
 
+import { WinningsAudit } from '../../models/WinningsAudit'
 import { Winning } from '../../models/WinningDetail'
+import { fetchAuditLogs, getMemberHandle } from '../../services/wallet'
 
 import styles from './PaymentView.module.scss'
 
 interface PaymentViewProps {
     payment: Winning
-    auditLines?: {
-        date: string
-        userName: string
-        action: string
-    }[]
 }
 
 const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
     const [view, setView] = React.useState<'details' | 'audit'>('details')
+    const [auditLines, setAuditLines] = React.useState<WinningsAudit[]>([])
 
     const handleToggleView = (): void => {
         setView(view === 'details' ? 'audit' : 'details')
     }
 
+    React.useEffect(() => {
+        if (view === 'audit') {
+            fetchAuditLogs(props.payment.id)
+                .then(auditLogs => {
+                    const userIds = auditLogs.map(log => log.userId)
+                    getMemberHandle(userIds)
+                        .then((handles: Map<number, string>) => {
+                            auditLogs.forEach((log: WinningsAudit) => {
+                                log.userId = handles.get(parseInt(log.userId, 10)) ?? log.userId
+                            })
+                        })
+                        .catch(() => {
+                            console.error('Error fetching member handles')
+                        })
+                        .finally(() => {
+                            setAuditLines(auditLogs)
+                        })
+                })
+                .catch(() => {
+                    setAuditLines([])
+                })
+        }
+    }, [props.payment.id, view])
+
+    const formatAction = (action: string): React.ReactNode => {
+        const fromIndex = action.indexOf('from')
+        const toIndex = action.indexOf('to')
+
+        if (fromIndex !== -1 && toIndex !== -1) {
+            const beforeFrom = action.substring(0, fromIndex)
+            const fromValue = action.substring(fromIndex + 5, toIndex)
+            const toValue = action.substring(toIndex + 3)
+            return (
+                <>
+                    {beforeFrom}
+                    from
+                    {' '}
+                    <strong>{fromValue}</strong>
+                    {' '}
+                    to
+                    {' '}
+                    <strong>{toValue}</strong>
+                </>
+            )
+        }
+
+        return action
+    }
+
     return (
         <div className={styles.formContainer}>
             <div className={styles.inputGroup}>
@@ -72,12 +119,12 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                 {view === 'audit' && (
                     <>
                         <div className={styles.auditSection}>
-                            {props.auditLines && props.auditLines.map(line => (
+                            {auditLines && auditLines.length > 0 && auditLines.map(line => (
                                 <Collapsible
                                     header={(
                                         <h3>
                                             {
-                                                new Date(line.date)
+                                                new Date(line.createdAt)
                                                     .toLocaleString()
                                             }
                                         </h3>
@@ -90,18 +137,23 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                                             <p>
                                                 <strong>User:</strong>
                                                 {' '}
-                                                {line.userName}
+                                                {line.userId}
                                             </p>
                                             <p>
                                                 <strong>Action:</strong>
                                                 {' '}
-                                                {line.action}
+                                                {formatAction(line.action)}
+                                            </p>
+                                            <p>
+                                                <strong>Note:</strong>
+                                                {' '}
+                                                {line.note}
                                             </p>
                                         </div>
                                     </div>
                                 </Collapsible>
                             ))}
-                            {(props.auditLines === undefined || props.auditLines.length === 0)
+                            {(auditLines === undefined || auditLines.length === 0)
                                 && (
                                     <div className={styles.auditItem}>
                                         <p>No audit data available</p>

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

@@ -97,7 +97,7 @@ table {
 .actionButtons {
     padding-left: 8px;
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
     align-items: center;
 }
 

src/apps/wallet-admin/src/lib/models/WinningsAudit.ts

@@ -0,0 +1,8 @@
+export interface WinningsAudit{
+    id: string
+    winningsId: string
+    userId: string
+    action: string
+    note: string
+    createdAt: string
+}

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

@@ -10,6 +10,7 @@ import { TaxForm } from '../models/TaxForm'
 import { OtpVerificationResponse } from '../models/OtpVerificationResponse'
 import { TransactionResponse } from '../models/TransactionId'
 import { PaginationInfo } from '../models/PaginationInfo'
+import { WinningsAudit } from '../models/WinningsAudit'
 import ApiResponse from '../models/ApiResponse'
 
 const baseUrl = `${EnvironmentConfig.API.V5}/payments`
@@ -44,6 +45,17 @@ export async function getUserTaxFormDetails(): Promise<TaxForm[]> {
     return response.data
 }
 
+export async function fetchAuditLogs(paymentId: string): Promise<WinningsAudit[]> {
+    const response = await xhrGetAsync<ApiResponse<WinningsAudit[]>>(`${baseUrl}/admin/winnings/${paymentId}/audit`)
+
+    if (response.status === 'error') {
+        throw new Error('Error fetching audit logs')
+    }
+
+    return response.data
+
+}
+
 export async function editPayment(updates: {
     winningsId: string,
     paymentStatus?: 'ON_HOLD_ADMIN' | 'OWED',