Target Date Field added to withdrawals forms.

-Field added in both createForm.tsx and editForm.tsx.
-Added targetDate in gql/withdrawals.d.ts types.
-Created SelectDate.tsx file for the custom element.

src/components/admin/withdrawals/CreateForm.tsx

@@ -5,8 +5,9 @@ import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
 import { AxiosError, AxiosResponse } from 'axios'
 import * as yup from 'yup'
-import { Box, Button, Grid, Typography } from '@mui/material'
+import { Box, Button, Grid, Typography } from '@mui/material' 
 
+import SelectDate from './custom/SelectDate'
 import { WithdrawalData, WithdrawalInput, WithdrawalResponse } from 'gql/withdrawals'
 import { routes } from 'common/routes'
 import { ApiErrors } from 'service/apiErrors'
@@ -57,6 +58,7 @@ export default function CreateForm() {
         otherwise: yup.number().positive().integer().required(),
       }),
       reason: yup.string().trim().min(1).max(300).required(),
+      targetDate: yup.date().min(new Date(), 'Date is invalid.').notRequired().nullable(), 
       currency: yup.string().oneOf(Object.values(Currency)).required(),
       sourceVaultId: yup.string().uuid().required(),
       sourceCampaignId: yup.string().uuid().required(),
@@ -74,6 +76,7 @@ export default function CreateForm() {
     sourceCampaignId: '',
     bankAccountId: '',
     documentId: uuidv4(), //this will be the id of the uploaded doc when attachments are implemented
+    targetDate: '',
     approvedById: '',
   }
 
@@ -102,6 +105,7 @@ export default function CreateForm() {
       sourceCampaignId: values.sourceCampaignId,
       bankAccountId: values.bankAccountId,
       documentId: values.documentId,
+      targetDate: values.targetDate ? new Date(values.targetDate) : null,
       approvedById: values.approvedById,
     }
     mutation.mutate(data)
@@ -182,6 +186,9 @@ export default function CreateForm() {
           <Grid item xs={12}>
             <FormTextField type="text" label={t('reason')} name="reason" autoComplete="reason" />
           </Grid>
+          <Grid item xs={12}>
+            <SelectDate name="targetDate" />
+          </Grid>
 
           <Grid item xs={12}>
             <BankAccountSelect />

src/components/admin/withdrawals/EditForm.tsx

@@ -33,6 +33,14 @@ import { Currency } from 'gql/currency'
 import { fromMoney, toMoney } from 'common/util/money'
 import { useVaultsList } from 'common/hooks/vaults'
 import FormSelectField from 'components/common/form/FormSelectField'
+import SelectDate from './custom/SelectDate'
+
+const dateParser = (date: Date | undefined) => {
+  if (date) {
+    return date.toString().slice(0, 10)
+  }
+  return undefined
+}
 
 const validationSchema: yup.SchemaOf<WithdrawalData> = yup
   .object()
@@ -46,6 +54,7 @@ const validationSchema: yup.SchemaOf<WithdrawalData> = yup
     sourceCampaignId: yup.string().uuid().required(),
     bankAccountId: yup.string().uuid().required(),
     documentId: yup.string().uuid().required(),
+    targetDate: yup.date().min(new Date(), 'Date is invalid.').notRequired().nullable(), 
     approvedById: yup.string().uuid().required(),
   })
 
@@ -71,6 +80,8 @@ export default function EditForm() {
     bankAccountId: data?.bankAccountId,
     documentId: data?.documentId,
     approvedById: data?.approvedById,
+    targetDate: dateParser(data?.targetDate) || '',
+
   }
 
   const mutation = useMutation<
@@ -95,6 +106,7 @@ export default function EditForm() {
       reason: values.reason,
       sourceVaultId: values.sourceVaultId,
       sourceCampaignId: values.sourceCampaignId,
+      targetDate: values.targetDate ? new Date(values.targetDate) : null,
       bankAccountId: values.bankAccountId,
       documentId: values.documentId,
       approvedById: values.approvedById,
@@ -158,6 +170,9 @@ export default function EditForm() {
           <Grid item xs={12}>
             <BankAccountSelect disabled={initialValues.status === WithdrawalStatus.succeeded} />
           </Grid>
+          <Grid item xs={12}>
+            <SelectDate name="targetDate" />
+          </Grid>
           <Grid item xs={12}>
             <FormTextField
               type="string"

src/components/admin/withdrawals/custom/SelectDate.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useField } from 'formik'
+import { useTranslation } from 'next-i18next'
+
+import { TextFieldProps } from '@mui/material'
+
+import { translateError } from 'common/form/useForm'
+import { TranslatableField } from 'common/form/validation'
+import FormTextField from 'components/common/form/FormTextField'
+
+type Props = {
+  name: string
+} & TextFieldProps
+
+export default function SelectDate({ name, ...textFieldProps }: Props) {
+  const { t } = useTranslation('withdrawals')
+
+  const [field, meta] = useField(name)
+
+  const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
+
+  return (
+    <FormTextField
+      {...textFieldProps}
+      {...field}
+      type="date"
+      variant="outlined"
+      fullWidth
+      InputLabelProps={{ shrink: true }}
+      error={Boolean(meta.error) && Boolean(meta.touched)}
+      label={t('targetDate')}
+      helperText={helperText}
+    />
+  )
+}

src/gql/withdrawals.d.ts

@@ -9,6 +9,7 @@ export type WithdrawalResponse = {
   amount: number
   reason: string
   documentId: UUID
+  targetDate?: Date | undefined
   approvedBy: Person
   bankAccount: Record<string, unknown>
   sourceCampaign: Record<string, unknown>
@@ -21,6 +22,7 @@ export type WithdrawalResponse2 = {
   amount: number
   reason: string
   documentId: UUID
+  targetDate?: Date | undefined
   approvedBy: string
   bankAccount: string
   sourceCampaign: string
@@ -33,6 +35,7 @@ export type WithdrawalInput = {
   amountAvailable: number
   reason: string | undefined
   documentId?: UUID | undefined
+  targetDate?: Date | string | null
   approvedById?: UUID | undefined
   bankAccountId?: UUID | undefined
   sourceCampaignId?: UUID | undefined
@@ -45,6 +48,7 @@ export type WithdrawalData = {
   amount: number | undefined
   reason: string | undefined
   documentId?: string | undefined
+  targetDate?: Date | string | null
   approvedById?: string | undefined
   bankAccountId?: string | undefined
   sourceCampaignId?: string | undefined
@@ -58,6 +62,7 @@ export type WithdrawalEditResponse = {
   amount: number
   reason: string
   documentId: UUID
+  targetDate?: Date | undefined
   approvedById: UUID
   bankAccountId: UUID
   sourceCampaignId: UUID