ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update connect api DashboardProject

pull/2/head
ardhi 2 years ago
parent
a35834b871
commit
0a070760ef
1 changed files with 252 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 322
      src/views/Dashboard/DashboardProject.js

322
src/views/Dashboard/DashboardProject.js
Unescape View File

@ -10,6 +10,7 @@ import { renderFormatRupiah } from '../../const/CustomFunc';
import { BASE_OSPRO } from '../../const/ApiConst';
import { SendOutlined } from '@ant-design/icons';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import ContentLoader from 'react-content-loader';
const { TextArea } = Input;
const styles = {
@ -35,42 +36,51 @@ const DashboardProject = () => {
}
const { PROJECT_ID, GANTT_ID } = useParams();
// const URL_GANTT = `http://103.73.125.81:8446/index.html?base_url=http://103.73.125.81:8444/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
const URL_GANTT = `https://adw-gantt.ospro.id/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
// const URL_GANTT = '';
// const URL_GANTT = `https://adw-gantt.ospro.id/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
const URL_GANTT = '';
const mapRef = useRef()
const [projectName, setProjectName] = useState("Project Tower ABC");
const [projectManagerName, setProjectManagerName] = useState("John Doe");
const [customerName, setCustomerName] = useState("Jaya Gedung Group");
const [plannedStart, setPlannedStart] = useState("2019-03-04")
const [plannedFinish, setPlannedFinish] = useState("2020-05-28")
const [actualStart, setActualStart] = useState("2019-03-04")
const [actualFinish, setActualFinish] = useState("2020-05-28")
const [estimatedFinish, setEstimatedFinish] = useState("2020-05-28")
const [projectName, setProjectName] = useState("");
const [projectManagerName, setProjectManagerName] = useState("");
const [customerName, setCustomerName] = useState("");
const [plannedStart, setPlannedStart] = useState(null)
const [plannedFinish, setPlannedFinish] = useState(null)
const [actualStart, setActualStart] = useState(null)
const [actualFinish, setActualFinish] = useState(null)
const [estimatedFinish, setEstimatedFinish] = useState(null)
const [mymap, setMymap] = useState(null);
const [activeTabIdx, setActiveTabIdx] = useState(0);
const [activeTabCommentIdx, setActiveTabCommentIdx] = useState(0);
const [planningProgress, setPlanningProgress] = useState(79);
const [actualProgress, setActualProgress] = useState(43);
const [currentBudget, setCurrentBudget] = useState("168011727772");
const [addCostToComplete, setAddCostToComplete] = useState("0");
const [actualToDate, setactualToDate] = useState("43256751714");
const [estAtCompletion, setEstAtCompletion] = useState("168011727772");
const [bcwp, setBcwp] = useState("26658794618");
const [costDeviation, setCostDeviation] = useState("0");
const [remToComplete, setRemToComplete] = useState("124754976058");
const [totalInvoice, setTotalInvoice] = useState("10000000000");
const [cashIn, setCashIn] = useState("8000000000");
const [outstandingBalance, setOutstandingBalance] = useState("2000000000");
const [currentBudget, setCurrentBudget] = useState(null)
const [addCostToComplete, setAddCostToComplete] = useState(null)
const [actualToDate, setActualToDate] = useState(null)
const [estAtCompletion, setEstAtCompletion] = useState(null)
const [bcwp, setBcwp] = useState(null)
const [costDeviation, setCostDeviation] = useState(null)
const [remToComplete, setRemToComplete] = useState(null)
const [totalInvoice, setTotalInvoice] = useState(null)
const [cashIn, setCashIn] = useState(null)
const [outstandingBalance, setOutstandingBalance] = useState(null)
const [comment, setComment] = useState('');
const [comments, setComments] = useState([]);
const [isReadyComments, setIsReadyComments] = useState(false);
const [isSendingComment, setIsSendingComment] = useState(false);
const [behindTasks, setBehindTasks] = useState([]);
const [isReadyProjectDetail, setIsReadyProjectDetail] = useState(false);
const [isReadySCurve, setIsReadySCurve] = useState(false);
const [isReadyOverdueActivities, setIsReadyOverdueActivities] = useState(false);
const [overdueActivities, setOverdueActivities] = useState([]);
const [healthBySchedule, setHealthBySchedule] = useState('-')
const [healthByBudget, setHealthByBudget] = useState('-')
useEffect(() => {
// console.log('URL_GANTT', URL_GANTT);
getProjectDetail();
getSCurve();
getOverdueActivities();
getComments();
getBehindTasks();
return () => {
console.log('unmount RenderMap');
}
@ -82,6 +92,102 @@ const DashboardProject = () => {
}
}, [activeTabIdx]);
const getProjectDetail = async () => {
setIsReadyProjectDetail(false);
const URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
console.log('getProjectDetail', result);
if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyProjectDetail(true);
return;
}
if (result.status !== 200) {
NotificationManager.error(`Get project detail failed, ${result.data.message}`, "Failed");
setIsReadyProjectDetail(true);
return;
}
else if (result.status == 200 && result.data.data) {
console.log(result.data.data);
// setComments(result.data.data);
setProjectName(result.data.data.nama ? result.data.data.nama : '-');
setProjectManagerName(result.data.data.projectManager ? result.data.data.projectManager : '-');
setCustomerName(result.data.data.company ? result.data.data.company : '-')
setPlannedStart(result.data.data?.mulai_proyek ? result.data.data.mulai_proyek : null)
setPlannedFinish(result.data.data?.akhir_proyek ? result.data.data.akhir_proyek : null)
setActualStart(result.data.data.header?.start_date ? result.data.data.header.start_date : null)
setEstimatedFinish(result.data.data.header?.end_date ? result.data.data.header.end_date : null)
setIsReadyProjectDetail(true);
}
}
const getSCurve = async () => {
setIsReadySCurve(false);
const URL = `${BASE_OSPRO}/api/project/get-s-curve`;
const payload = {
"project_id": PROJECT_ID.toString(),
"period": "week",
"end_date": moment(new Date()).format('YYYY-MM-DD')
}
const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
console.log('getSCurve', result);
if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadySCurve(true);
return;
}
if (result.status !== 200) {
NotificationManager.error(`Get S Curve failed, ${result.data.message}`, "Failed");
setIsReadySCurve(true);
return;
}
else if (result.status == 200 && result.data.data) {
console.log(result.data.data);
if (result.data.data.length > 0 && result.data.data[0].data?.budget_control) {
setCurrentBudget(result.data.data[0].data.budget_control.current_budget?.toString())
setActualToDate(result.data.data[0].data.budget_control.acwp?.toString())
setBcwp(result.data.data[0].data.budget_control.current_budget?.toString())
setRemToComplete(result.data.data[0].data.budget_control.rem_to_complete?.toString())
setAddCostToComplete(result.data.data[0].data.budget_control.add_cost_to_complete?.toString())
setEstAtCompletion(result.data.data[0].data.budget_control.estimated_at_completion?.toString())
setCostDeviation(result.data.data[0].data.budget_control.cost_deviation?.toString())
}
setIsReadySCurve(true);
}
}
const getOverdueActivities = async () => {
setIsReadyOverdueActivities(false);
const URL = `${BASE_OSPRO}/api/project/get-overdue-activities`;
const payload = {
"id": PROJECT_ID.toString(),
"till_date": moment(new Date()).format('YYYY-MM-DD')
}
const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
console.log('getOverdueActivities', result);
if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyOverdueActivities(true);
return;
}
if (result.status !== 200) {
NotificationManager.error(`Get Overdue Activities failed, ${result.data.message}`, "Failed");
setIsReadyOverdueActivities(true);
return;
}
else if (result.status == 200 && result.data.data) {
console.log(result.data.data);
if (result.data.data.overdueActivities) {
setOverdueActivities(result.data.data.overdueActivities)
}
setHealthByBudget(result.data.data.budget_health)
setIsReadyOverdueActivities(true);
}
}
const getComments = async () => {
setIsReadyComments(false);
const URL = `${BASE_OSPRO}/api/project-comment/search`;
@ -120,7 +226,7 @@ const DashboardProject = () => {
}
if (result.status !== 200) {
NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed");
NotificationManager.error(`Get comments failed, ${result.data.message}`, "Failed");
setIsReadyComments(true);
return;
}
@ -132,7 +238,7 @@ const DashboardProject = () => {
}
const handleSendComment = async () => {
console.log('handleSendComment', comment);
// console.log('handleSendComment', comment);
setIsSendingComment(true);
if (comment === '') {
NotificationManager.error("Please leave a comment before you send it.", "Failed");
@ -171,25 +277,7 @@ const DashboardProject = () => {
setIsSendingComment(false);
}
const getBehindTasks = () => {
setBehindTasks([
{
id: 1,
name: "Tom",
message: "Overdue by 5 days",
division: "IT"
},
{
id: 1,
name: "Jerry",
message: "Overdue by 3 days",
division: "Finance"
}
])
}
const initMap = () => {
let mymap = L.map('map-area', {
center: center,
zoom: 13
@ -214,6 +302,34 @@ const DashboardProject = () => {
></iframe>
), [activeTabIdx])
const SingleTextLoader = ({width, height}) => (
<ContentLoader
speed={1}
width={width ? width : 200}
height={height ? height : 20}
viewBox={`0 0 ${width ? width : 200} ${height ? height : 20}`}
backgroundColor="#E6E6E6"
foregroundColor="#ffffff"
>
<rect x="0" y="0" rx="5" ry="5" width={`${width ? width : 200}`} height={`${height ? height : 20}`} />
</ContentLoader>
)
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>
<SingleTextLoader width={"100%"} height={50} />
<div style={{marginBottom: 5}}></div>
<SingleTextLoader width={"100%"} height={50} />
<div style={{marginBottom: 5}}></div>
<SingleTextLoader width={"100%"} height={50} />
<div style={{marginBottom: 5}}></div>
<SingleTextLoader width={"100%"} height={50} />
</div>
)
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>
@ -222,11 +338,11 @@ const DashboardProject = () => {
</div>
)
const BehindTaskItem = ({name, message, division}) => (
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>{message}</div>
<div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{division}</div>
<div style={{color: '#E80053'}}>{message}</div>
{/* <div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{division}</div> */}
</div>
)
@ -240,7 +356,7 @@ const DashboardProject = () => {
</div>
</div>
<div>
{!isReadyComments && <div style={{color: 'grey', flex: 1, textAlign: 'center', marginTop: 50, marginBottom: 50}}>Loading comments...</div>}
{!isReadyComments && <ListLoader />}
{isReadyComments && comments && comments.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No comments found.</div>}
{comments && comments.length > 0 && comments.map((item, idx) =>
<Comment key={idx} name={item.join_first_name} comment={item.comment} created_at={item.created_at} />
@ -253,13 +369,24 @@ const DashboardProject = () => {
const RenderBehindTasks = useMemo(() => {
return (
<div>
{behindTasks && behindTasks.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No behind task found.</div>}
{behindTasks && behindTasks.length > 0 && behindTasks.map((item, idx) =>
<BehindTaskItem key={idx} name={item.name} message={item.message} division={item.division} />
)}
{!isReadyOverdueActivities && <ListLoader />}
{isReadyOverdueActivities && overdueActivities && overdueActivities.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No overdue activitiy found.</div>}
{isReadyOverdueActivities && overdueActivities && overdueActivities.length > 0 && overdueActivities.map((item, idx) => {
let end_date = null;
let today = null;
let diffDays = 0;
let message = '';
if (item.end_date && item.end_date !== null) {
end_date = moment(item.end_date);
today = moment(new Date());
diffDays = today.diff(end_date, 'days');
message = `Overdue by ${diffDays} days`;
}
return <BehindTaskItem key={idx} name={item.name} message={message} />
})}
</div>
)
}, [behindTasks])
}, [overdueActivities, isReadyOverdueActivities])
return (
<div style={{ marginLeft: -25, marginRight: -25 }}>
@ -272,7 +399,7 @@ const DashboardProject = () => {
<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
<div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Project</div>
<div style={{fontSize: 14}}>{projectName}</div>
<div style={{fontSize: 14}}>{isReadyProjectDetail ? projectName : <SingleTextLoader />}</div>
</div>
<div>
<i className="fa fa-check-square" style={{fontSize: 28}}></i>
@ -285,7 +412,7 @@ const DashboardProject = () => {
<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
<div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Project Manager</div>
<div style={{fontSize: 14}}>{projectManagerName}</div>
<div style={{fontSize: 14}}>{isReadyProjectDetail ? projectManagerName : <SingleTextLoader />}</div>
</div>
<div>
<i className="fa fa-user" style={{fontSize: 28}}></i>
@ -298,7 +425,7 @@ const DashboardProject = () => {
<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
<div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Customer</div>
<div style={{fontSize: 14}}>{customerName}</div>
<div style={{fontSize: 14}}>{isReadyProjectDetail ? customerName : <SingleTextLoader />}</div>
</div>
<div>
<i className="fa fa-home" style={{fontSize: 28}}></i>
@ -317,19 +444,39 @@ const DashboardProject = () => {
<div>
<Row>
<Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Planned Start</Col>
<Col span={12} style={{fontSize: 11}}>{plannedStart ? moment(plannedStart).format('D MMMM YYYY') : '-'}</Col>
<Col span={12} style={{fontSize: 11}}>
{isReadyProjectDetail ?
plannedStart ? moment(plannedStart).format('D MMMM YYYY') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
</Row>
<Row>
<Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Acutal Start</Col>
<Col span={12} style={{fontSize: 11}}>{plannedStart ? moment(actualStart).format('D MMMM YYYY') : '-'}</Col>
<Col span={12} style={{fontSize: 11}}>
{isReadyProjectDetail ?
actualStart ? moment(actualStart).format('D MMMM YYYY') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
</Row>
<Row>
<Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Planned Finish</Col>
<Col span={12} style={{fontSize: 11}}>{plannedStart ? moment(plannedFinish).format('D MMMM YYYY') : '-'}</Col>
<Col span={12} style={{fontSize: 11}}>
{isReadyProjectDetail ?
plannedFinish ? moment(plannedFinish).format('D MMMM YYYY') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
</Row>
<Row>
<Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Estimated Finish</Col>
<Col span={12} style={{fontSize: 11}}>{plannedStart ? moment(estimatedFinish).format('D MMMM YYYY') : '-'}</Col>
<Col span={12} style={{fontSize: 11}}>
{isReadyProjectDetail ?
estimatedFinish ? moment(estimatedFinish).format('D MMMM YYYY') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
</Row>
</div>
</div>
@ -344,25 +491,60 @@ const DashboardProject = () => {
<div>
<Row>
<Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Current Budget</Col>
<Col span={5} style={{fontSize: 11}}>{currentBudget ? renderFormatRupiah(currentBudget, 'Rp.') : '-' }</Col>
<Col span={5} style={{fontSize: 11}}>
{isReadySCurve ?
currentBudget ? renderFormatRupiah(currentBudget, 'Rp.') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
<Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Add Cost to Complete</Col>
<Col span={5} style={{fontSize: 11}}>{addCostToComplete ? renderFormatRupiah(addCostToComplete, 'Rp.') : '-' }</Col>
<Col span={5} style={{fontSize: 11}}>
{isReadySCurve ?
addCostToComplete ? renderFormatRupiah(addCostToComplete, 'Rp.') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
</Row>
<Row>
<Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Actual to Date</Col>
<Col span={5} style={{fontSize: 11}}>{actualToDate ? renderFormatRupiah(actualToDate, 'Rp.') : '-' }</Col>
<Col span={5} style={{fontSize: 11}}>
{isReadySCurve ?
actualToDate ? renderFormatRupiah(actualToDate, 'Rp.') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
<Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Est. at Completion</Col>
<Col span={5} style={{fontSize: 11}}>{estAtCompletion ? renderFormatRupiah(estAtCompletion, 'Rp.') : '-' }</Col>
<Col span={5} style={{fontSize: 11}}>
{isReadySCurve ?
estAtCompletion ? renderFormatRupiah(estAtCompletion, 'Rp.') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
</Row>
<Row>
<Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>BCWP (cost vs perform)</Col>
<Col span={5} style={{fontSize: 11}}>{bcwp ? renderFormatRupiah(bcwp, 'Rp.') : '-' }</Col>
<Col span={5} style={{fontSize: 11}}>
{isReadySCurve ?
bcwp ? renderFormatRupiah(bcwp, 'Rp.') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
<Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Cost Deviation</Col>
<Col span={5} style={{fontSize: 11}}>{costDeviation ? renderFormatRupiah(costDeviation, 'Rp.') : '-' }</Col>
<Col span={5} style={{fontSize: 11}}>
{isReadySCurve ?
costDeviation ? renderFormatRupiah(costDeviation, 'Rp.') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
</Row>
<Row>
<Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Rem. to Complete</Col>
<Col span={5} style={{fontSize: 11}}>{remToComplete ? renderFormatRupiah(remToComplete, 'Rp.') : '-' }</Col>
<Col span={5} style={{fontSize: 11}}>
{isReadySCurve ?
remToComplete ? renderFormatRupiah(remToComplete, 'Rp.') : '-'
: <SingleTextLoader width={100} height={10} />
}
</Col>
</Row>
</div>
</div>
@ -408,17 +590,17 @@ const DashboardProject = () => {
<Row>
<Col span={12}>
<div style={{backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginRight: 2}}>
<div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
<div style={{backgroundColor: '#52AC0B', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10}}>
<div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>On Budget</div>
<div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Budget</div>
<div style={{backgroundColor: '#52AC0B', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25}}>
<div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>{healthByBudget}</div>
</div>
</div>
</Col>
<Col span={12}>
<div style={{backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginLeft: 2}}>
<div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
<div style={{backgroundColor: '#E80053', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10}}>
<div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>Behind Schedule</div>
<div style={{backgroundColor: '#E80053', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25}}>
<div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>{healthBySchedule}</div>
</div>
</div>
</Col>

Write Preview
Loading…
Cancel
Save