src/admin: Vault and Withdrawals improvements (#1682)

* admin/vault: Add withdrawnAmount to vault's grid

* admin/vaults/grid: Show campaign title instead of id

* VaultSelect.tsx: Show only the vaults used by the selected campaign

src/components/admin/vaults/VaultSelect.tsx

@@ -4,6 +4,7 @@ import { useField, useFormikContext } from 'formik'
 
 import FormTextField from 'components/common/form/FormTextField'
 import { VaultResponse } from 'gql/vault'
+import { WithdrawalInput } from 'gql/withdrawals'
 
 export type SetFieldValueType = (field: string, value: unknown, shouldValidate?: boolean) => void
 
@@ -24,7 +25,7 @@ export default function VaultSelect({
   const { t } = useTranslation('vaults')
 
   const [field, meta] = useField(name)
-  const { setFieldValue } = useFormikContext()
+  const { values, setFieldValue } = useFormikContext<WithdrawalInput>()
 
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setFieldValue(name, event.target.value)
@@ -50,11 +51,13 @@ export default function VaultSelect({
         <MenuItem value="" disabled>
           {t(`fields.${name}`)}
         </MenuItem>
-        {vaults?.map((value, index) => (
-          <MenuItem key={index} value={value.id}>
-            {value.name}
-          </MenuItem>
-        ))}
+        {vaults
+          ?.filter((vault) => vault.campaignId === values.sourceCampaignId)
+          .map((value, index) => (
+            <MenuItem key={index} value={value.id}>
+              {value.name}
+            </MenuItem>
+          ))}
       </FormTextField>
     </FormControl>
   )

src/components/admin/vaults/grid/Grid.tsx

@@ -2,7 +2,12 @@ import React, { useState } from 'react'
 import { UseQueryResult } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
 import { Box } from '@mui/material'
-import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
+import {
+  DataGrid,
+  GridColDef,
+  GridRenderCellParams,
+  GridValueFormatterParams,
+} from '@mui/x-data-grid'
 import { observer } from 'mobx-react'
 
 import { routes } from 'common/routes'
@@ -17,7 +22,7 @@ import { money } from 'common/util/money'
 import theme from 'common/theme'
 
 export default observer(function Grid() {
-  const { t } = useTranslation('vaults')
+  const { t, i18n } = useTranslation('vaults')
   const { data }: UseQueryResult<VaultResponse[]> = useVaultsList()
   const { isDetailsOpen } = ModalStore
   const [paginationModel, setPaginationModel] = useState({
@@ -31,7 +36,7 @@ export default observer(function Grid() {
     headerAlign: 'left',
   }
 
-  const columns: GridColDef[] = [
+  const columns: GridColDef<VaultResponse>[] = [
     {
       field: 'actions',
       headerName: t('actions'),
@@ -78,27 +83,40 @@ export default observer(function Grid() {
       ),
     },
     {
-      field: 'reachedAmound',
+      field: 'reachedAmount',
       headerName: t('amount'),
       ...commonProps,
       renderCell: (params: GridRenderCellParams) => (
         <>{money(params.row.amount - params.row.blockedAmount, params.row.currency)}</>
       ),
     },
+    {
+      field: 'withdrawnAmount',
+      headerName: t('Успешно преведени'),
+      ...commonProps,
+      renderCell: (params: GridRenderCellParams) => <>{money(params.row.withdrawnAmount)}</>,
+    },
     {
       field: 'createdAt',
       headerName: t('createdAt'),
       ...commonProps,
+      valueFormatter(params: GridValueFormatterParams<Date>) {
+        return new Date(params.value).toLocaleDateString(i18n.language)
+      },
     },
     {
       field: 'updatedAt',
       headerName: t('updatedAt'),
       ...commonProps,
+      valueFormatter(params: GridValueFormatterParams<Date>) {
+        return new Date(params.value).toLocaleDateString(i18n.language)
+      },
     },
     {
       field: 'campaignId',
-      headerName: t('campaignId'),
+      headerName: t('Кампания'),
       ...commonProps,
+      renderCell: (params: GridRenderCellParams) => <>{params.row.campaign.title}</>,
       width: 450,
     },
   ]

src/gql/vault.d.ts

@@ -11,6 +11,7 @@ export type VaultResponse = {
   campaign: Campaign
   createdAt: Date
   updatedAt: Date | null
+  withDrawnAmount: number
 }
 
 export type VaultInput = {