PM: Supporting documents

src/frontend/data/schema.graphql

@@ -3370,6 +3370,7 @@ type PaymentPlanNode implements Node {
   deliveryMechanisms: [DeliveryMechanismPerPaymentPlanNode]
   paymentItems(offset: Int, before: String, after: String, first: Int, last: Int): PaymentNodeConnection!
   approvalProcess(offset: Int, before: String, after: String, first: Int, last: Int): ApprovalProcessNodeConnection!
+  documents(offset: Int, before: String, after: String, first: Int, last: Int): PaymentPlanSupportingDocumentNodeConnection!
   adminUrl: String
   currencyName: String
   hasPaymentListExportFile: Boolean
@@ -3392,6 +3393,7 @@ type PaymentPlanNode implements Node {
   unsuccessfulPaymentsCount: Int
   canSendToPaymentGateway: Boolean
   canSplit: Boolean
+  supportingDocuments: [PaymentPlanSupportingDocumentNode]
 }
 
 type PaymentPlanNodeConnection {
@@ -3418,6 +3420,25 @@ enum PaymentPlanStatus {
   FINISHED
 }
 
+type PaymentPlanSupportingDocumentNode implements Node {
+  id: ID!
+  paymentPlan: PaymentPlanNode!
+  title: String!
+  file: String!
+  uploadedAt: DateTime!
+  createdBy: UserNode
+}
+
+type PaymentPlanSupportingDocumentNodeConnection {
+  pageInfo: PageInfo!
+  edges: [PaymentPlanSupportingDocumentNodeEdge]!
+}
+
+type PaymentPlanSupportingDocumentNodeEdge {
+  node: PaymentPlanSupportingDocumentNode
+  cursor: String!
+}
+
 type PaymentRecordAndPaymentNode {
   objType: String
   id: String

src/frontend/src/api/paymentModuleApi.ts

@@ -38,3 +38,54 @@ export const bulkActionPaymentPlansManagerial = async (
   );
   return response.data;
 };
+
+export const deleteSupportingDocument = async (
+  businessArea: string,
+  programId: string,
+  paymentPlanId: string,
+  fileId: string,
+) => {
+  try {
+    await api.delete(
+      `${businessArea}/programs/${programId}/payment-plans/${paymentPlanId}/supporting-documents/${fileId}/`,
+    );
+    return { success: true };
+  } catch (error: any) {
+    const errorMessage = error?.message || 'An unknown error occurred';
+    throw new Error(`Failed to delete supporting document: ${errorMessage}`);
+  }
+};
+
+export const uploadSupportingDocument = async (
+  businessArea: string,
+  programId: string,
+  paymentPlanId: string,
+  file: File,
+  title: string,
+) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('title', title);
+
+  try {
+    const response = await api.post(
+      `${businessArea}/programs/${programId}/payment-plans/${paymentPlanId}/supporting-documents/`,
+      formData,
+    );
+    return response.data; // Return the response data
+  } catch (error) {
+    throw new Error(`Failed to upload supporting document: ${error.message}`);
+  }
+};
+
+export const fetchSupportingDocument = async (
+  businessAreaSlug: string,
+  programId: string,
+  paymentPlanId: string,
+  fileId: string,
+): Promise<any> => {
+  const response = await api.get(
+    `${businessAreaSlug}/programs/${programId}/payment-plans/${paymentPlanId}/supporting-documents/${fileId}/download/`,
+  );
+  return response;
+};

src/frontend/src/apollo/queries/paymentmodule/PaymentPlan.ts

@@ -262,6 +262,11 @@ export const PAYMENT_PLAN_QUERY = gql`
         unicefId
       }
       unsuccessfulPaymentsCount
+      supportingDocuments {
+        id
+        title
+        file
+      }
     }
   }
 `;

src/frontend/src/components/core/DropzoneField.tsx

@@ -10,6 +10,13 @@ interface DropzoneContainerProps {
   disabled: boolean;
 }
 
+interface DropzoneFieldProps {
+  onChange: (acceptedFiles: File[]) => void;
+  loading: boolean;
+  dontShowFilename: boolean;
+  accepts?: { [key: string]: string[] };
+}
+
 const DropzoneContainer = styled.div<DropzoneContainerProps>`
   width: 500px;
   height: 100px;
@@ -32,36 +39,35 @@ export const DropzoneField = ({
   onChange,
   loading,
   dontShowFilename,
-}: {
-  onChange: (acceptedFiles: File[]) => void;
-  loading: boolean;
-  dontShowFilename: boolean;
-}): React.ReactElement => {
+  accepts = {
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
+      '.xlsx',
+    ],
+  },
+}: DropzoneFieldProps): React.ReactElement => {
   const { t } = useTranslation();
   const onDrop = useCallback((acceptedFiles: File[]) => {
     onChange(acceptedFiles);
   }, []);
 
   const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
     disabled: loading,
-    accept: {
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
-        '.xlsx',
-      ],
-    },
+    accept: accepts,
     onDrop,
   });
+
   const acceptedFilename =
     acceptedFiles.length > 0 ? acceptedFiles[0].name : null;
+
   return (
     <Box display="flex" justifyContent="center" p={5}>
       <DropzoneContainer {...getRootProps()} disabled={loading}>
         <LoadingComponent isLoading={loading} absolute />
         <input
           {...getInputProps()}
-          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+          accept={Object.values(accepts).flat().join(',')}
           data-cy="file-input"
-        />{' '}
+        />
         {dontShowFilename || !acceptedFilename
           ? t('UPLOAD FILE')
           : acceptedFilename}