Adding withdrawnAmount in Admin Campaign Grid

package.json

@@ -84,6 +84,7 @@
     "@types/react-gtm-module": "2.0.0",
     "@types/react-slick": "^0.23.10",
     "@types/tryghost__content-api": "^1.3.11",
+    "@types/uuid": "^9.0.0",
     "@types/yup": "0.29.11",
     "@typescript-eslint/eslint-plugin": "4.26.0",
     "@typescript-eslint/parser": "4.26.0",

public/locales/bg/campaigns.json

@@ -20,6 +20,8 @@
   "targetAmount": "Целева сума",
   "donationsAmount": "Събрани средства",
   "blockedAmount": "Блокирани средства",
+  "withdrawnAmount": "Преведени средства",
+
   "startDate": "Стартова дата",
   "endDate": "Крайна дата",
   "createDate": "Съдадена на",

public/locales/bg/donations.json

@@ -22,8 +22,8 @@
   "deleteAllContent": "Това действие ще изтрие избраните елементи завинаги!",
   "actions": "Действия",
   "createdAt": "Направено на",
-  "bankTransactionsFileId": "Номер на файла с банкови транзакции",
-  "addFiles": "Добави файлове",
+  "bankTransactionsFileId": "Име на файла с банкови транзакции",
+  "addFiles": "Избери файл",
   "noOptions": "Няма резултати",
   "alerts": {
     "selectRow": "Моля изберете ред",

public/locales/bg/withdrawals.json

@@ -1,6 +1,6 @@
 {
   "amount-unavailable": "Недостатъчна наличност в трезора!",
-  "documentId": "ID на документа",
+  "documentId": "Номер на документа",
   "amount-available": "Налична сума",
   "amount-input": "Въведете сума",
   "form-heading": "Създай нов превод",
@@ -30,7 +30,16 @@
     "edit": "Преводът беше редактиран успешно!",
     "delete": "Преводът беше преместен в кошчето!",
     "deleteAll": "Преводите бяха преместени в кошчето!",
-    "error": "Възникна грешка! Моля опитайте отново по-късно."
+    "error": "Възникна грешка! Моля опитайте отново по-късно.",
+    "no-edit": "Превода е приключен успешно и не може да се променя."
+  },
+  "statuses": {
+    "initial": "нов",
+    "invalid": "невалиден",
+    "incomplete": "непълен",
+    "declined": "отказан",
+    "cancelled": "оттеглен",
+    "succeeded": "успешен"
   },
   "cta": {
     "add": "Добави",

public/locales/en/campaigns.json

@@ -20,6 +20,7 @@
   "targetAmount": "Target amount",
   "donationsAmount": "Donations amount",
   "blockedAmount": "Blocked amount",
+  "withdrawnAmount": "Withdrawn amount",
   "startDate": "Start date",
   "endDate": "End date",
   "createDate": "Created at",

public/locales/en/donations.json

@@ -20,8 +20,8 @@
   "deleteTitle": "Are you sure?",
   "deleteContent": "This action will delete this item permanently!",
   "deleteAllContent": "This action will delete selected items permanently!",
-  "bankTransactionsFileId": "Number of bank transactions file",
-  "addFiles": "Add files",
+  "bankTransactionsFileId": "Name of bank transactions file",
+  "addFiles": "Select file",
   "actions": "Actions",
   "createdAt": "Created at",
   "noOptions": "No results",

public/locales/en/withdrawals.json

@@ -25,7 +25,16 @@
     "edit": "Withdrawal has been edited successfully!",
     "delete": "Withdrawal has been deleted successfully!",
     "deleteAll": "Withdrawals have been deleted successfully!",
-    "error": "An error has occured! Please try again later."
+    "error": "An error has occured! Please try again later.",
+    "no-edit": "This withdrawal is completed successfully and cannot be changed."
+  },
+  "statuses": {
+    "initial": "initial",
+    "invalid": "invalid",
+    "incomplete": "incomplete",
+    "declined": "declined",
+    "cancelled": "cancelled",
+    "succeeded": "succeeded"
   },
   "cta": {
     "add": "Add",

src/components/campaigns/grid/CampaignGrid.tsx

@@ -58,6 +58,10 @@ export const DisplayCurrentAmount = ({ params }: CampaignCellProps) => {
   return <>{money(params.row.summary.currentAmount ?? 0, params.row.currency)}</>
 }
 
+export const DisplayWithdrawnAmount = ({ params }: CampaignCellProps) => {
+  return <>{money(params.row.summary.withdrawnAmount ?? 0, params.row.currency)}</>
+}
+
 export default function CampaignGrid() {
   const { t, i18n } = useTranslation()
   const { data = [], refetch }: UseQueryResult<AdminCampaignResponse[]> = useCampaignAdminList()
@@ -149,6 +153,16 @@ export default function CampaignGrid() {
       width: 250,
       renderCell: (cellValues: GridRenderCellParams) => <>{cellValues.row.campaignType.name}</>,
     },
+    {
+      field: 'targetAmount',
+      headerName: t('campaigns:targetAmount'),
+      ...commonProps,
+      align: 'right',
+      width: 150,
+      renderCell: (cellValues: GridRenderCellParams) => (
+        <>{money(cellValues.row.targetAmount, cellValues.row.currency)}</>
+      ),
+    },
     {
       field: 'reachedAmount',
       headerName: t('campaigns:donationsAmount'),
@@ -162,33 +176,33 @@ export default function CampaignGrid() {
       ),
     },
     {
-      field: 'blockedAmount',
-      headerName: t('campaigns:blockedAmount'),
+      field: 'currentAmount',
+      headerName: t('campaigns:amount'),
       ...commonProps,
       align: 'right',
       width: 200,
       renderCell: (cellValues: GridRenderCellParams) => (
-        <DisplayBlockedAmount params={cellValues} />
+        <DisplayCurrentAmount params={cellValues} />
       ),
     },
     {
-      field: 'currentAmount',
-      headerName: t('campaigns:amount'),
+      field: 'blockedAmount',
+      headerName: t('campaigns:blockedAmount'),
       ...commonProps,
       align: 'right',
       width: 200,
       renderCell: (cellValues: GridRenderCellParams) => (
-        <DisplayCurrentAmount params={cellValues} />
+        <DisplayBlockedAmount params={cellValues} />
       ),
     },
     {
-      field: 'targetAmount',
-      headerName: t('campaigns:targetAmount'),
+      field: 'withdrawnAmount',
+      headerName: t('campaigns:withdrawnAmount'),
       ...commonProps,
       align: 'right',
-      width: 150,
+      width: 200,
       renderCell: (cellValues: GridRenderCellParams) => (
-        <>{money(cellValues.row.targetAmount, cellValues.row.currency)}</>
+        <DisplayWithdrawnAmount params={cellValues} />
       ),
     },
     {
@@ -292,8 +306,6 @@ export default function CampaignGrid() {
         columns={columns}
         pageSize={10}
         editMode="row"
-        autoHeight
-        autoPageSize
       />
       <Box>
         {selectedCampaign && (

src/components/donations/grid/Grid.tsx

@@ -212,7 +212,7 @@ export default observer(function Grid() {
           paginationMode="server"
           rowCount={all_rows}
           disableSelectionOnClick
-          isCellEditable={(params) => params.row.provider.includes('bank')}
+          isCellEditable={() => true}
         />
       </Box>
 

src/components/expenses/Form.tsx

@@ -59,8 +59,9 @@ export default function Form() {
             params: {},
             message: t('fields-error.amount-unavailable'),
             test: function (value) {
-              const currentValt = vaults?.find((curr) => curr.id == this.parent.vaultId)
-              const currentAmount = Number(currentValt?.amount) - Number(currentValt?.blockedAmount)
+              const currentVault = vaults?.find((curr) => curr.id == this.parent.vaultId)
+              const currentAmount =
+                Number(currentVault?.amount) - Number(currentVault?.blockedAmount)
               return value! < Number(currentAmount)
             },
           }),

src/components/transfers/CreateForm.tsx

@@ -65,8 +65,8 @@ export default function CreateForm({ campaigns }: Props) {
           params: {},
           message: t('amount-unavailable'),
           test: function (value) {
-            const currentValt = vaults?.find((curr) => curr.id == this.parent.sourceVaultId)
-            const currentAmount = Number(currentValt?.amount) - Number(currentValt?.blockedAmount)
+            const currentVault = vaults?.find((curr) => curr.id == this.parent.sourceVaultId)
+            const currentAmount = Number(currentVault?.amount) - Number(currentVault?.blockedAmount)
             return value ? value < Number(fromMoney(currentAmount)) : false
           },
         }),

src/components/vaults/grid/Grid.tsx

@@ -28,16 +28,34 @@ export default observer(function Grid() {
   }
 
   const columns: GridColumns = [
+    {
+      field: 'actions',
+      headerName: t('actions'),
+      width: 120,
+      type: 'actions',
+      headerAlign: 'left',
+      renderCell: (params: GridRenderCellParams): React.ReactNode => {
+        return (
+          <GridActions
+            modalStore={ModalStore}
+            id={params.row.id}
+            name={params.row.name}
+            editLink={routes.admin.vaults.edit(params.row.id)}
+          />
+        )
+      },
+    },
     {
       field: 'name',
       headerName: t('name'),
-      flex: 1,
       ...commonProps,
+      width: 200,
     },
     {
       field: 'currency',
       headerName: t('currency'),
       ...commonProps,
+      width: 80,
     },
     {
       field: 'amount',
@@ -79,23 +97,6 @@ export default observer(function Grid() {
       ...commonProps,
       width: 450,
     },
-    {
-      field: 'actions',
-      headerName: t('actions'),
-      width: 120,
-      type: 'actions',
-      headerAlign: 'left',
-      renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return (
-          <GridActions
-            modalStore={ModalStore}
-            id={params.row.id}
-            name={params.row.name}
-            editLink={routes.admin.vaults.edit(params.row.id)}
-          />
-        )
-      },
-    },
   ]
 
   return (

src/components/withdrawals/CreateForm.tsx

@@ -24,6 +24,7 @@ import VaultSelect from 'components/vaults/VaultSelect'
 import PersonSelect from 'components/person/PersonSelect'
 import { Currency } from 'gql/currency'
 import { fromMoney, toMoney } from 'common/util/money'
+import { v4 as uuidv4 } from 'uuid'
 
 export default function CreateForm() {
   const router = useRouter()
@@ -72,7 +73,7 @@ export default function CreateForm() {
     sourceVaultId: '',
     sourceCampaignId: '',
     bankAccountId: '',
-    documentId: '',
+    documentId: uuidv4(), //this will be the id of the uploaded doc when attachments are implemented
     approvedById: '',
   }