fix(wallet-admin): hide edit button if user does not have permissions to edit

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

Author: rakibansary

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

@@ -249,6 +249,8 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [handleValueUpdated, editState])
 
+    const isEditingAllowed = (): boolean => props.profile.roles.includes('Payment Admin') || props.profile.roles.includes('Payment Editor')
+
     return (
         <>
             <div className={styles.container}>
@@ -378,6 +380,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                         {isLoading && <LoadingCircles className={styles.centered} />}
                         {!isLoading && winnings.length > 0 && (
                             <PaymentsTable
+                                canEdit={isEditingAllowed()}
                                 currentPage={pagination.currentPage}
                                 numPages={pagination.totalPages}
                                 payments={winnings}

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

@@ -107,6 +107,14 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                             <p className={styles.value}>{props.payment.releaseDateObj.toLocaleDateString()}</p>
                         </div>
 
+                        {props.payment.datePaid !== '-' && (
+                            (
+                                <div className={styles.infoItem}>
+                                    <span className={styles.label}>Date Paid</span>
+                                    <p className={styles.value}>{props.payment.datePaid}</p>
+                                </div>
+                            ))}
+
                         <div className={styles.infoItem}>
                             <Button
                                 onClick={handleToggleView}
@@ -121,6 +129,7 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                         <div className={styles.auditSection}>
                             {auditLines && auditLines.length > 0 && auditLines.map(line => (
                                 <Collapsible
+                                    key={line.id}
                                     header={(
                                         <h3>
                                             {

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

@@ -18,6 +18,7 @@ interface PaymentTableProps {
     onNextPageClick: () => void;
     onPreviousPageClick: () => void;
     onPageClick: (pageNumber: number) => void;
+    canEdit: boolean;
 }
 
 const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) => {
@@ -58,7 +59,7 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                                 <td>{payment.releaseDate}</td>
                                 <td>{payment.datePaid}</td>
                                 <td className={styles.actionButtons}>
-                                    {payment.status.toUpperCase() !== 'PAID' && (
+                                    {props.canEdit && payment.status.toUpperCase() !== 'PAID' && (
                                         <Button
                                             icon={IconOutline.PencilIcon}
                                             size='sm'