message: withdrawals: refactored details modal
diff: import React from 'react'
  import { UseQueryResult } from 'react-query'
  import { observer } from 'mobx-react'
  -import { Dialog, Card, CardContent, Typography, Divider } from '@mui/material'
  import { useTranslation } from 'next-i18next'
  import { WithdrawalResponse } from 'gql/withdrawals'
  import { useWithdrawalDetailsPage } from 'common/hooks/withdrawals'
  -import { ModalStore } from 'stores/documents/ModalStore'
  +import { ModalStore } from 'stores/dashboard/ModalStore'
  +import DetailsDialog from 'components/admin/DetailsDialog'
  -type Props = {
  - id: string
  -}
  +export default observer(function DetailsModal() {
  + const { selectedRecord } = ModalStore
  + const { data }: UseQueryResult<WithdrawalResponse> = useWithdrawalDetailsPage(selectedRecord.id)
  + const { t } = useTranslation('withdrawals')
  -export default observer(function DetailsModal({ id }: Props) {
  - const { data }: UseQueryResult<WithdrawalResponse> = useWithdrawalDetailsPage(id)
  - const { isDetailsOpen, hideDetails } = ModalStore
  - const { t } = useTranslation()
  + const dataConverted = [
  + { name: 'ID', value: `${data?.id}` },
  + { name: t('status'), value: `${data?.status}` },
  + { name: t('currency'), value: `${data?.currency}` },
  + { name: t('amount'), value: `${data?.amount}` },
  + { name: t('approvedBy'), value: `${data?.approvedBy.firstName} ${data?.approvedBy.lastName}` },
  + { name: t('bankAccount'), value: `${data?.bankAccount.accountHolderName}` },
  + { name: t('sourceCampaign'), value: `${data?.sourceCampaign.state}` },
  + { name: t('sourceVault'), value: `${data?.sourceVault.name}` },
  + ]
  - return (
  - <Dialog open={isDetailsOpen} onClose={hideDetails} sx={{ top: '-35%' }}>
  - <Card>
  - <CardContent>
  - <Typography variant="h5" sx={{ marginBottom: '16px' }}>
  - {t('withdrawals:cta:details')}
  - </Typography>
  - <Divider />
  - <Typography variant="body1" sx={{ fontSize: 24, marginTop: '8px' }}>
  - {t('withdrawals:status')}: {data?.status}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('withdrawals:currency')}: {data?.currency}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('withdrawals:amount')}: {data?.amount}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('withdrawals:reason')}: {data?.reason}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('withdrawals:approvedBy')}:{' '}
  - {data?.approvedBy.firstName + ' ' + data?.approvedBy.lastName}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('withdrawals:bankAccount')}: {data?.bankAccount.accountHolderName}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('withdrawals:sourceCampaign')}: {data?.sourceCampaign.state}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('withdrawals:sourceVault')}: {data?.sourceVault.name}
  - </Typography>
  - </CardContent>
  - </Card>
  - </Dialog>
  - )
  + return <DetailsDialog data={dataConverted} />
  })
  