|
|
|
@ -2,7 +2,7 @@ import React from 'react'
|
|
|
|
|
import moment from "moment" |
|
|
|
|
import ContentLoader from "react-content-loader" |
|
|
|
|
|
|
|
|
|
export const SingleTextLoader = ({width, height}) => ( |
|
|
|
|
export const SingleTextLoader = ({ width, height }) => ( |
|
|
|
|
<ContentLoader |
|
|
|
|
speed={1} |
|
|
|
|
width={width ? width : 200} |
|
|
|
@ -19,111 +19,111 @@ export const ListLoader = () => (
|
|
|
|
|
// <div style={{color: 'grey', flex: 1, textAlign: 'center', marginTop: 50, marginBottom: 50}}>Loading overdue activities...</div>
|
|
|
|
|
<div> |
|
|
|
|
<SingleTextLoader width={"100%"} height={50} /> |
|
|
|
|
<div style={{marginBottom: 5}}></div> |
|
|
|
|
<div style={{ marginBottom: 5 }}></div> |
|
|
|
|
<SingleTextLoader width={"100%"} height={50} /> |
|
|
|
|
<div style={{marginBottom: 5}}></div> |
|
|
|
|
<div style={{ marginBottom: 5 }}></div> |
|
|
|
|
<SingleTextLoader width={"100%"} height={50} /> |
|
|
|
|
<div style={{marginBottom: 5}}></div> |
|
|
|
|
<div style={{ marginBottom: 5 }}></div> |
|
|
|
|
<SingleTextLoader width={"100%"} height={50} /> |
|
|
|
|
<div style={{marginBottom: 5}}></div> |
|
|
|
|
<div style={{ marginBottom: 5 }}></div> |
|
|
|
|
<SingleTextLoader width={"100%"} height={50} /> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
export const Comment = ({name, comment, created_at}) => ( |
|
|
|
|
<div style={{backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}> |
|
|
|
|
<div style={{fontWeight: 'bold'}}>{name}</div> |
|
|
|
|
<div style={{color: '#E80053', fontWeight: 100, fontSize: 10}}>{created_at ? moment(created_at).format('D MMMM YYYY HH:mm:ss') : '-'}</div> |
|
|
|
|
export const Comment = ({ name, comment, created_at }) => ( |
|
|
|
|
<div style={{ backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2 }}> |
|
|
|
|
<div style={{ fontWeight: 'bold' }}>{name}</div> |
|
|
|
|
<div style={{ color: '#E80053', fontWeight: 100, fontSize: 10 }}>{created_at ? moment(created_at).format('D MMMM YYYY HH:mm:ss') : '-'}</div> |
|
|
|
|
<div>{comment}</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
export const BehindTaskItem = ({name, message}) => ( |
|
|
|
|
<div style={{backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}> |
|
|
|
|
<div style={{fontWeight: 'bold'}}>{name}</div> |
|
|
|
|
<div style={{color: '#E80053'}}>{message}</div> |
|
|
|
|
export const BehindTaskItem = ({ name, message }) => ( |
|
|
|
|
<div style={{ backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2 }}> |
|
|
|
|
<div style={{ fontWeight: 'bold' }}>{name}</div> |
|
|
|
|
<div style={{ color: '#E80053' }}>{message}</div> |
|
|
|
|
{/* <div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{division}</div> */} |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
export const ProgressPlanningBar = ({progress}) => { |
|
|
|
|
export const ProgressPlanningBar = ({ progress }) => { |
|
|
|
|
if (progress) { |
|
|
|
|
if (progress > 30) { |
|
|
|
|
return ( |
|
|
|
|
<div style={{backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10}}> |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10 }}> |
|
|
|
|
<div style={{ backgroundColor: '#0000cc', width: `${progress}%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: progress < 100 ? 0 : 10, borderBottomRightRadius: progress < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500 }}>Planning : {progress}%</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return ( |
|
|
|
|
<div style={{backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10}}> |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10 }}> |
|
|
|
|
<div style={{ backgroundColor: '#0000cc', width: `${progress}%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: progress < 100 ? 0 : 10, borderBottomRightRadius: progress < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500, height: 30 }}></div> |
|
|
|
|
<span style={{textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500}}>Planning : {progress}%</span> |
|
|
|
|
<span style={{ textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500 }}>Planning : {progress}%</span> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return ( |
|
|
|
|
<div style={{backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10}}> |
|
|
|
|
<div style={{ backgroundColor: '#0000cc', width: `0%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: 0 < 100 ? 0 : 10, borderBottomRightRadius: 0 < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500, height: 30 }}></div> |
|
|
|
|
<span style={{textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500}}>Planning : 0%</span> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
return ( |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10 }}> |
|
|
|
|
<div style={{ backgroundColor: '#0000cc', width: `0%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: 0 < 100 ? 0 : 10, borderBottomRightRadius: 0 < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500, height: 30 }}></div> |
|
|
|
|
<span style={{ textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500 }}>Planning : 0%</span> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export const ProgressActualBar = ({progress}) => { |
|
|
|
|
export const ProgressActualBar = ({ progress }) => { |
|
|
|
|
if (progress) { |
|
|
|
|
if (progress > 30) { |
|
|
|
|
return ( |
|
|
|
|
<div style={{backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10}}> |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10 }}> |
|
|
|
|
<div style={{ backgroundColor: '#006600', width: `${progress}%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: progress < 100 ? 0 : 10, borderBottomRightRadius: progress < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500 }}>Actual : {progress}%</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return ( |
|
|
|
|
<div style={{backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10}}> |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10 }}> |
|
|
|
|
<div style={{ backgroundColor: '#006600', width: `${progress}%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: progress < 100 ? 0 : 10, borderBottomRightRadius: progress < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500, height: 30 }}></div> |
|
|
|
|
<span style={{textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500}}>Actual : {progress}%</span> |
|
|
|
|
<span style={{ textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500 }}>Actual : {progress}%</span> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return ( |
|
|
|
|
<div style={{backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10}}> |
|
|
|
|
<div style={{ backgroundColor: '#006600', width: `0%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: 0 < 100 ? 0 : 10, borderBottomRightRadius: 0 < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500, height: 30 }}></div> |
|
|
|
|
<span style={{textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500}}>Actual : 0%</span> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10 }}> |
|
|
|
|
<div style={{ backgroundColor: '#006600', width: `0%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: 0 < 100 ? 0 : 10, borderBottomRightRadius: 0 < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500, height: 30 }}></div> |
|
|
|
|
<span style={{ textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500 }}>Actual : 0%</span> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export const HealthByBudget = ({status}) => { |
|
|
|
|
export const HealthByBudget = ({ status }) => { |
|
|
|
|
let bgColor = '#52AC0B'; // on-budget
|
|
|
|
|
if (status && status !== '-') { |
|
|
|
|
if (status === 'warning') bgColor = '#ED7014'; |
|
|
|
|
else if (status === 'overrun') bgColor = '#D0312D'; |
|
|
|
|
} |
|
|
|
|
return ( |
|
|
|
|
<div style={{backgroundColor: bgColor, color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25}}> |
|
|
|
|
<div style={{ backgroundColor: bgColor, color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25 }}> |
|
|
|
|
<div style={{ textAlign: 'center', fontWeight: 500, fontSize: 12 }}>Health By Budget</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export const HealthBySchedule = ({status}) => { |
|
|
|
|
export const HealthBySchedule = ({ status }) => { |
|
|
|
|
// let bgColor = '#E80053'; // pink
|
|
|
|
|
let bgColor = '#52AC0B'; // green
|
|
|
|
|
if (status && status !== '-') { |
|
|
|
|
if (status === 'warning') bgColor = '#ED7014'; |
|
|
|
|
else if (status === 'danger') bgColor = '#D0312D'; |
|
|
|
|
else if (status === 'behind-schedule') bgColor = '#D0312D'; |
|
|
|
|
} |
|
|
|
|
return ( |
|
|
|
|
<div style={{backgroundColor: bgColor, color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25}}> |
|
|
|
|
<div style={{ backgroundColor: bgColor, color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25 }}> |
|
|
|
|
<div style={{ textAlign: 'center', fontWeight: 500, fontSize: 12 }}>Health By Schedule</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|