CM-992: added possibility to generate report for payroll with list of invoices

package.json

@@ -43,5 +43,7 @@
   "files": [
     "dist"
   ],
-  "dependencies": {}
+  "dependencies": {
+    "react-to-print": "^2.15.1"
+  }
 }

src/actions.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import {
   decodeId,
   formatGQLString,
@@ -54,7 +55,7 @@ const BENEFIT_CONSUMPTION_SUMMARY_PROJECTION = () => [
 ];
 
 const BENEFIT_ATTACHMENT_PROJECTION = () => [
-  'benefit{id, status, code, dateDue, receipt, individual {firstName, lastName}, jsonExt}',
+  'benefit{id, status, code, dateDue, receipt, individual {firstName, lastName}, jsonExt, type, status, amount, receipt}',
   'bill{id, code, terms, amountTotal, datePayed}',
 ];
 

src/components/PayrollBenefitPrintTemplate.js

@@ -0,0 +1,145 @@
+/* eslint-disable max-len */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-undef */
+import React, {
+  forwardRef,
+} from 'react';
+
+import { Divider } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+import {
+  useTranslations, useModulesManager,
+} from '@openimis/fe-core';
+import { MODULE_NAME } from '../constants';
+
+const useStyles = makeStyles(() => ({
+  topHeader: {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+    width: '100%',
+
+    '& img': {
+      minWidth: '250px',
+      maxWidth: '300px',
+      width: 'auto',
+      height: 'auto',
+    },
+  },
+  printContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '20px',
+    fontWeight: '500',
+  },
+  date: {
+    fontSize: '16px',
+  },
+  detailsContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '12px',
+    width: '100%',
+  },
+  detailRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '4px',
+  },
+  detailName: {
+    fontWeight: '600',
+    fontSize: '16px',
+    textTransform: 'uppercase',
+  },
+  detailValue: {
+    fontWeight: '500',
+    backgroundColor: '#f5f5f5',
+    padding: '6px',
+    borderRadius: '8px',
+    fontSize: '15px',
+  },
+  containerPadding: {
+    padding: '32px',
+  },
+  dividerMargin: {
+    margin: '12px 0',
+  },
+  sectionTitle: {
+    fontWeight: '700',
+    fontSize: '18px',
+    textTransform: 'uppercase',
+    marginBottom: '12px',
+  },
+}));
+
+const PayrollBenefitPrintTemplate = forwardRef(({ benefitAttachments }, ref) => {
+  if (!benefitAttachments) return null;
+  const classes = useStyles();
+  const modulesManager = useModulesManager();
+  const { formatMessage } = useTranslations(modulesManager, MODULE_NAME);
+
+  return (
+    <div ref={ref} className={classes.printContainer}>
+      {benefitAttachments.map((benefitAttachment, index) => (
+        <div key={index} className={classes.detailsContainer}>
+          <div className={classes.sectionTitle}>
+            {`Payment: ${benefitAttachment.benefit.code} - ${benefitAttachment.benefit.individual.firstName}, ${benefitAttachment.benefit.individual.lastName}`}
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.individual.firstName')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.individual.firstName}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.individual.lastName')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.individual.lastName}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.code')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.code}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.dateDue')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.dateDue}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.receipt')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.receipt}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.amount')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.amount}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.type')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.type}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.status')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.status}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.payedOnTime')}</div>
+            <div className={classes.detailValue}>{benefitAttachment.benefit.payedOnTime ? 'Yes' : 'No'}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.paymentDate')}</div>
+            <div className={classes.detailValue}>
+              {!benefitAttachment.benefit.receipt
+                ? ''
+                : benefitAttachment?.bill?.datePayed}
+            </div>
+          </div>
+          <Divider className={classes.dividerMargin} />
+        </div>
+      ))}
+    </div>
+  );
+});
+
+export default PayrollBenefitPrintTemplate;

src/components/PayrollPrintTemplate.js

@@ -0,0 +1,141 @@
+/* eslint-disable max-len */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-undef */
+import React, {
+  forwardRef,
+} from 'react';
+
+import { Divider } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+import {
+  useTranslations, useModulesManager,
+} from '@openimis/fe-core';
+import { MODULE_NAME } from '../constants';
+
+const useStyles = makeStyles(() => ({
+  topHeader: {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+    width: '100%',
+
+    '& img': {
+      minWidth: '250px',
+      maxWidth: '300px',
+      width: 'auto',
+      height: 'auto',
+    },
+  },
+  printContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '20px',
+    fontWeight: '500',
+  },
+  date: {
+    fontSize: '16px',
+  },
+  detailsContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '12px',
+    width: '100%',
+  },
+  detailRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '4px',
+  },
+  detailName: {
+    fontWeight: '600',
+    fontSize: '16px',
+    textTransform: 'uppercase',
+  },
+  detailValue: {
+    fontWeight: '500',
+    backgroundColor: '#f5f5f5',
+    padding: '6px',
+    borderRadius: '8px',
+    fontSize: '15px',
+  },
+  containerPadding: {
+    padding: '32px',
+  },
+  dividerMargin: {
+    margin: '12px 0',
+  },
+  sectionTitle: {
+    fontWeight: '700',
+    fontSize: '18px',
+    textTransform: 'uppercase',
+    marginBottom: '12px',
+  },
+}));
+
+const PayrollPrintTemplate = forwardRef(({ benefitConsumptions }, ref) => {
+  if (!benefitConsumptions) return null;
+  const classes = useStyles();
+  const modulesManager = useModulesManager();
+  const { formatMessage } = useTranslations(modulesManager, MODULE_NAME);
+
+  return (
+    <div ref={ref} className={classes.printContainer}>
+      {benefitConsumptions.map((benefitConsumption, index) => (
+        <div key={index} className={classes.detailsContainer}>
+          <div className={classes.sectionTitle}>
+            {`Payment: ${benefitConsumption.code} - ${benefitConsumption.individual.firstName}, ${benefitConsumption.individual.lastName}`}
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.individual.firstName')}</div>
+            <div className={classes.detailValue}>{benefitConsumption.individual.firstName}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.individual.lastName')}</div>
+            <div className={classes.detailValue}>{benefitConsumption.individual.lastName}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.code')}</div>
+            <div className={classes.detailValue}>{benefitConsumption.code}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.dateDue')}</div>
+            <div className={classes.detailValue}>{benefitConsumption.dateDue}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.receipt')}</div>
+            <div className={classes.detailValue}>{benefitConsumption.receipt}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.amount')}</div>
+            <div className={classes.detailValue}>{benefitConsumption.amount}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.type')}</div>
+            <div className={classes.detailValue}>{benefitConsumption.type}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.status')}</div>
+            <div className={classes.detailValue}>{benefitConsumption.status}</div>
+          </div>
+          <div className={classes.detailRow}>
+            <div className={classes.detailName}>{formatMessage('payroll.benefitConsumption.paymentDate')}</div>
+            <div className={classes.detailValue}>
+              {!benefitConsumption.receipt
+                ? ''
+                : benefitConsumption?.benefitAttachment[0]?.bill?.datePayed}
+            </div>
+          </div>
+          <Divider className={classes.dividerMargin} />
+        </div>
+      ))}
+    </div>
+  );
+});
+
+export default PayrollPrintTemplate;