ShiftReport.js

import React from 'react';
import moment from 'moment';

const ShiftReport = ({workList, schedule}) =>{

    function addTimes(times = []) {
        const z = (n) => (n < 10 ? '0' : '') + n;
        let hour = 0
        let minute = 0
        let second = 0
        for (const time of times) {
            const splited = time.split(':');
            hour += parseInt(splited[0]);
            minute += parseInt(splited[1])
            second += parseInt(splited[2])
        }
        const seconds = second % 60
        const minutes = parseInt(minute % 60) + parseInt(second / 60)
        const hours = hour + parseInt(minute / 60)

        return z(hours) + ':' + z(minutes) + ':' + z(seconds)
    }

    const reqTime = schedule && schedule.length ? 
    ( 
        <h5 className="text-center">Expected work: { schedule[0].sShift } to { schedule[0].sEnd }, {
             moment.utc(moment(schedule[0].sEnd,"HH:mm:ss").diff(moment(schedule[0].sShift,"HH:mm:ss"))).format("HH:mm")
            } Hours with {
                moment.utc(moment(schedule[0].lbEnd,"HH:mm:ss").diff(moment(schedule[0].lbStart,"HH:mm:ss"))).format("HH:mm")
            } Hour lunch break
        </h5>
    ) : <h5 className="text-center">No time schedule added!</h5>

    const worklist = workList && workList.length ? (
        workList && workList.map((w,key) => {
            const caclBreak = w.endBreak !== '' ? (
                moment.utc(moment(w.endBreak,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startBreak,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
            ) : (
                '-'
            )
            const caclTime = w.endShift !== '' ? (
                moment.utc(moment(w.endShift,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startShift,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
            ) : (
                '-'
            )
            
            var work1 = moment.utc(moment(w.startBreak,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startShift,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
            var work2 = moment.utc(moment(w.endShift,"MM/DD/YYYY HH:mm:ss").diff(moment(w.endBreak,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
            const caclTotalTime = w.endShift !== '' ? (
                addTimes([work1, work2])
            ) : (
                '-'
            )

            const reqT = schedule && schedule.length ? (
                moment.utc(moment(schedule[0].sEnd,"HH:mm:ss").diff(moment(schedule[0].sShift,"HH:mm:ss"))).format("HH:mm")
            ) : (
                '-'
            )

            const caclDiff = w.endShift !== '' ? (
                moment.utc(moment(reqT,"HH:mm:ss").diff(moment(caclTotalTime,"HH:mm:ss"))).format("HH:mm:ss")
            ) : (
                '-'
            )
            return(
                <tr className="collection-item" key = { key}>
                    <th scope="row">{ w.date }</th>
                    <td>{ w.startShift.substring(10, 20) }</td>
                    <td>{ w.startBreak.substring(10, 20) }</td>
                    <td>{ w.endBreak.substring(10, 20) }</td>
                    <td>{ w.endShift.substring(10, 20) }</td>
                    <th>{ caclBreak }</th>
                    <th>{ caclTotalTime }</th>
                    <th>{ caclTime }</th>
                    <th>{ caclDiff }</th>
                </tr>
            )
        })
    ) : (
        <tr><td colSpan="9" className="text-center">No work exist!</td></tr>
    )

    return(
        <div className="container">
        <h2 className="text-center">Work report</h2>
        { reqTime }
        <table className="table table-striped">
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Start time</th>
                    <th scope="col">Lunch time</th>
                    <th scope="col">Lunch end time</th>
                    <th scope="col">Work end</th>
                    <th scope="col">Total Break</th>
                    <th scope="col">Total work</th>
                    <th scope="col">Break + Work</th>
                    <th scope="col">Difference</th>
                </tr>
            </thead>
            <tbody className="workList">
                { worklist }
            </tbody>
        </table>
    </div>
    )
}

export default ShiftReport