Skip to content

Commit

Permalink
Merge pull request JobCore#45 from cobuildlab/payments-conflicts
Browse files Browse the repository at this point in the history 
fix: payments sidebar
  • Loading branch information
@alacret
alacret authored Feb 26, 2020
2 parents 3b2d109 + 07be05c commit 20bcea7
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 73 deletions.
2 changes: 1 addition & 1 deletion src/js/views/payments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export class MakePayment extends Flux.DashView {
try{
await makeEmployeePayment(
pay.id,
"FAKE",
"ELECTRONIC TRANSFERENCE",
bankaccount.id,
pay.employee.bank_accounts[0].id,
);
Expand Down
133 changes: 61 additions & 72 deletions src/js/views/payroll.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useContext } from "react";
import Flux from "@4geeksacademy/react-flux-dash";
import PropTypes from 'prop-types';
import { store, search, update, fetchSingle, searchMe, processPendingPayrollPeriods, updatePayments, createPayment, fetchAllMe, fetchTemporal, remove, create } from '../actions.js';
import { store, search, update, fetchSingle, searchMe, processPendingPayrollPeriods, updatePayments, createPayment, fetchAllMe, fetchTemporal, remove, create, fetchPeyrollPeriodPayments } from '../actions.js';
import { GET } from '../utils/api_wrapper';


Expand Down Expand Up @@ -926,7 +926,7 @@ export const PayrollPeriodDetails = ({ match, history }) => {
</div>
)
: null}

</td>
</tr>
</tbody>
Expand Down Expand Up @@ -1722,6 +1722,7 @@ export class PayrollReport extends Flux.DashView {
employer: store.getState('current_employer'),
payrollPeriods: [],
payments: [],
paymentInfo: [],
singlePayrollPeriod: null,
};
}
Expand All @@ -1731,22 +1732,26 @@ export class PayrollReport extends Flux.DashView {
this.subscribe(store, 'current_employer', (employer) => {
this.setState({ employer });
});

this.subscribe(store, 'payroll-period-payments', (paymentInfo) => {
this.setState({ paymentInfo });
});
this.subscribe(store, 'employee-payment', () => {
fetchPeyrollPeriodPayments(this.state.singlePayrollPeriod.id);
});
const payrollPeriods = store.getState('payroll-periods');
this.subscribe(store, 'payroll-periods', (_payrollPeriods) => {
this.updatePayrollPeriod(_payrollPeriods);
//if(!this.state.singlePayrollPeriod) this.getSinglePeriod(this.props.match.params.period_id, payrollPeriods);
});
if (!payrollPeriods || payrollPeriods.length == 0 ) {
if(this.props.match.params.period_id !== undefined) fetchSingle("payroll-periods", this.props.match.params.period_id).then(_period => {
this.setState({singlePayrollPeriod:_period, payments: this.groupPayments(_period).filter(p => p.payments.length != 0)});
});
if (!payrollPeriods) {
searchMe('payroll-periods');
}
else {
this.updatePayrollPeriod(payrollPeriods);
this.getSinglePeriod(this.props.match.params.period_id, payrollPeriods);

}

this.removeHistoryListener = this.props.history.listen((data) => {
const period = /\/payroll\/period\/(\d+)/gm;
const periodMatches = period.exec(data.pathname);
Expand All @@ -1760,12 +1765,14 @@ export class PayrollReport extends Flux.DashView {
if (!singlePeriod) return null;

let groupedPayments = {};
singlePeriod.payments.forEach(pay => {
if (typeof groupedPayments[pay.employee.id] === 'undefined') {
groupedPayments[pay.employee.id] = { employee: pay.employee, payments: [] };
}
if (pay.status === "APPROVED") groupedPayments[pay.employee.id].payments.push(pay);
});
if(singlePeriod.payments){
singlePeriod.payments.forEach(pay => {
if (typeof groupedPayments[pay.employee.id] === 'undefined') {
groupedPayments[pay.employee.id] = { employee: pay.employee, payments: [] };
}
groupedPayments[pay.employee.id].payments.push(pay);
});
}

return Object.values(groupedPayments);
}
Expand All @@ -1775,7 +1782,9 @@ export class PayrollReport extends Flux.DashView {
if (!payrollPeriods) fetchSingle("payroll-periods", periodId);
else {
const singlePayrollPeriod = payrollPeriods.find(pp => pp.id == periodId);
this.setState({ singlePayrollPeriod, payments: this.groupPayments(singlePayrollPeriod) });
this.setState({ singlePayrollPeriod, payments: this.groupPayments(singlePayrollPeriod) }, () => {
fetchPeyrollPeriodPayments(this.state.singlePayrollPeriod.id);
});
}
}
}
Expand All @@ -1794,8 +1803,6 @@ export class PayrollReport extends Flux.DashView {


render() {
console.log(this.state.singlePayrollPeriod);
const taxesMagicNumber = 0;
if (!this.state.employer) return "Loading...";
else if (!this.state.employer.payroll_configured || !moment.isMoment(this.state.employer.payroll_period_starting_time)) {
return <div className="p-1 listcontents text-center">
Expand All @@ -1807,36 +1814,26 @@ export class PayrollReport extends Flux.DashView {
return (<div className="p-1 listcontents">
<Theme.Consumer>
{({ bar }) => (<span>
{(!this.state.singlePayrollPeriod) ? '' :
(this.state.singlePayrollPeriod.payments.length > 0) ?
{(!this.state.paymentInfo) ? '' :
(this.state.paymentInfo.payments && this.state.paymentInfo.payments.length > 0) ?
<div>
<p className="text-right">
<h2>Payments for {this.state.singlePayrollPeriod.label ? this.state.singlePayrollPeriod.label : `From ${moment(this.state.singlePayrollPeriod.starting_at).format('MM-D-YY h:mm A')} to ${moment(this.state.singlePayrollPeriod.ending_at).format('MM-D-YY h:mm A')}`}</h2>
<h2>Payments for {this.state.singlePayrollPeriod.label}</h2>
</p>
<div className="row mb-4 text-right">
<div className="col text-left">
<Button size="small" onClick={() => {
// res => this.props.history.push('/payroll/period/' + period.id
const period =this.state.singlePayrollPeriod;
update('payroll-periods', Object.assign(period, { status: 'OPEN' })).then(res => console.log(res))
.catch(e => Notify.error(e.message || e));
}}>Undo Period
</Button>
</div>

<div className="col">

<Button size="small" onClick={() => this.props.history.push('/payroll/period/' + this.state.singlePayrollPeriod.id)}>Review Timesheet</Button>
</div>
<PDFDownloadLink document={<PayrollPeriodReport employer={this.state.employer} payments={this.state.payments} period={this.state.singlePayrollPeriod}/>} fileName={"JobCore" + ".pdf"}>
<PDFDownloadLink document={() => <PayrollPeriodReport employer={this.state.empoyer} payments={this.state.payments} period={this.state.singlePayrollPeriod}/>} fileName={"JobCore " + this.state.singlePayrollPeriod.label + ".pdf"}>
{({ blob, url, loading, error }) => (loading ? 'Loading...' : (
<div className="col">
<Button color="success" size="small" >Export to PDF</Button>
</div>
)
)}
</PDFDownloadLink>


</div>

Expand All @@ -1849,57 +1846,48 @@ export class PayrollReport extends Flux.DashView {
<th scope="col">Staff</th>
<th scope="col">Regular Hrs</th>
<th scope="col">Over Time</th>
<th scope="col">Total Hours</th>
<th scope="col">Total Earnings</th>
<th scope="col">Earnings</th>
<th scope="col">Taxes</th>
<th scope="col">Check Amount</th>
<th scope="col">Amount</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{this.state.payments.sort((a, b) =>
a.employee.user.last_name.toLowerCase() > b.employee.user.last_name.toLowerCase() ? 1 : -1
{this.state.paymentInfo.payments.sort((a, b) =>
a.employee.last_name.toLowerCase() > b.employee.last_name.toLowerCase() ? 1 : -1
).map(pay => {
const total_hours = pay.payments.filter(p => p.status === "APPROVED").reduce((total, { regular_hours, over_time }) => total + Number(regular_hours) + Number(over_time), 0);

const total_amount = pay.payments.filter(p => p.status === "APPROVED").reduce((total, { regular_hours, over_time, hourly_rate }) => total + (Number(regular_hours) + Number(over_time))*Number(hourly_rate) , 0);
const total_reg = total_hours > 40 ? 40 * Number(pay.payments[0]['hourly_rate']) : 0;
const total_ot = total_hours > 40 ? (total_hours - 40) * Number(pay.payments[0]['hourly_rate']*1.5) : 0;
const total = pay.payments.filter(p => p.status === 'APPROVED').reduce((incoming, current) => {
return {
overtime: parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours) > 40 ? parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours) - 40 : 0,
over_time: parseFloat(current.over_time) + parseFloat(incoming.over_time),
regular_hours: parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours),
taxes: taxesMagicNumber,
total_amount: parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours) > 40 ?(
((((Math.round(total_amount * 100) / 100)/(Math.round(total_hours * 100) / 100))*0.5)*Math.round((total_hours - 40) * 100) / 100 + Math.round(total_amount * 100) / 100).toFixed(2)
): (Math.round(total_amount * 100) / 100),
status: current.status == 'PAID' && incoming.status == 'PAID' ? 'PAID' : 'UNPAID'
};
}, { regular_hours: 0, total_amount: 0, over_time: 0, status: 'UNPAID' });
// const total = pay.filter(p => p.status === 'APPROVED').reduce((incoming, current) => {
// return {
// over_time: parseFloat(current.over_time) + parseFloat(incoming.over_time),
// regular_hours: parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours),
// total_amount: parseFloat(current.total_amount) + parseFloat(incoming.total_amount),
// status: current.status == 'PAID' && incoming.status == 'PAID' ? 'PAID' : 'UNPAID'
// };
// }, { regular_hours: 0, total_amount: 0, over_time: 0, status: 'UNPAID' });
return <tr key={pay.employee.id}>
<td>
{pay.employee.user.last_name}, {pay.employee.user.first_name}
<p className="m-0 p-0"><span className="badge">{total.status.toLowerCase()}</span></p>
{pay.employee.last_name}, {pay.employee.first_name}
<p className="m-0 p-0"><span className="badge">{pay.paid ? "paid" : "unpaid"}</span></p>
</td>
<td>{Math.round(total.regular_hours * 100) / 100}</td>
<td>{Number(total.overtime).toFixed(2)}</td>
<td>{Math.round((total.regular_hours + total.over_time) * 100) / 100}</td>
<td>${Math.round(total.total_amount * 100) / 100}</td>
<td>0</td>
<td>${Math.round((total.total_amount - taxesMagicNumber) * 100) / 100}</td>
<td>{pay.regular_hours}</td>
<td>{pay.over_time}</td>
<td>{pay.earnings}</td>
<td>{pay.deductions}</td>
<td>{pay.amount}</td>
<td>
<Button
color="success"
size="small"
onClick={() => bar.show({
slug: "make_payment",
data: {
pay: pay,
total: total,
}
})}>
Make payment
<Button
color="success"
size="small"
onClick={() => bar.show({
slug: "make_payment",
data: {
pay: pay,
paymentInfo: this.state.paymentInfo,
periodId: this.state.singlePayrollPeriod.id,
bar: bar
}
})}>
{pay.paid ? "Payment details" : "Make payment"}
</Button>
</td>
{/* <td>{Math.round((total.regular_hours + total.over_time) * 100) / 100}</td>
Expand All @@ -1917,3 +1905,4 @@ export class PayrollReport extends Flux.DashView {
</div >);
}
}

0 comments on commit 20bcea7

Please sign in to comment.