File name
Commit message
Commit date
2023-02-28
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-02-28
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import Button from "../../../component/Button.jsx";
import Modal from "../../../component/Modal.jsx";
import { useNavigate } from "react-router";
import Chart1 from "../../../component/chart/Chart1.jsx";
import Chart3 from "../../../component/chart/Chart3.jsx";
import Chart from "../../../component/chart/Chart.jsx";
import ContentTitle from "../../../component/ContentTitle.jsx";
import TableTitle from "../../../component/Tabletitle.jsx";
import SubTitle from "../../../component/SubTitle.jsx";
import Donut2 from "../../../component/chart/Donut2.jsx";
import LineColor_medicine from "../../../component/chart/LineColor_medicine.jsx";
export default function MedicineCareSelectOne() {
const navigate = useNavigate();
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
return (
<main>
<Modal open={modalOpen} close={closeModal} header="복약 내역 수정">
<div>
<table className="margin-bottom medicine-revise">
<tr>
<th>대상자명</th>
<td></td>
</tr>
<tr>
<th>복용날짜</th>
<td>
<input type="date" name="date" id="date" />
</td>
</tr>
<tr>
<th>아침</th>
<td className="flex">
<div className="flex-start">
<input type="radio" name="moning-taking" id="moning-taking" />
<label htmlFor="moning-taking">복용</label>
</div>
<div className="flex-start">
<input
type="radio"
name="moning-not-taken"
id="moning-not-taken"
/>
<label htmlFor="moning-not-taken">미복용</label>
</div>
</td>
</tr>
<tr>
<th>점심</th>
<td className="flex">
<div className="flex-start">
<input type="radio" name="lunch-taking" id="lunch-taking" />
<label htmlFor="lunch-taking">복용</label>
</div>
<div className="flex-start">
<input
type="radio"
name="lunch-not-taken"
id="lunch-not-taken"
/>
<label htmlFor="lunch-not-taken">미복용</label>
</div>
</td>
</tr>
<tr>
<th>저녁</th>
<td className="flex">
<div className="flex-start">
<input type="radio" name="dinner-taking" id="dinner-taking" />
<label htmlFor="dinner-taking">복용</label>
</div>
<div className="flex-start">
<input
type="radio"
name="dinner-not-taken"
id="dinner-not-taken"
/>
<label htmlFor="dinner-not-taken">미복용</label>
</div>
</td>
</tr>
<tr>
<th>수정 상세 사유</th>
<td className="flex">
<textarea
name=""
id=""
cols="30"
rows="10"
placeholder="수정 상세 사유를 기입해주세요."
></textarea>
</td>
</tr>
</table>
<div>
<Button className={"btn-100 green-btn"} btnName={"등록"} />
</div>
</div>
</Modal>
<div className="content-wrap">
<ContentTitle contentTitle={"복약 상세 페이지"} />
<div className="detail-graph">
<TableTitle tableTitle={" 님의 복약 내역"} />
<Chart1 />
</div>
<div className="medicine-grid margin-bottom">
<div><SubTitle
className="margin-bottom"
explanation={"전체 기간 복용률"}
color={"#333333"}
/>
<div
style={{
border: "1px solid #eeeeee",
borderRadius: "0.5rem",
padding: "1rem",
height: "17vh",
}}
>
<Donut2 />
</div>
</div>
<div><SubTitle
className="margin-bottom"
explanation={"주별 복약율 통계"}
color={"#333333"}
/>
<div
style={{
border: "1px solid #eeeeee",
borderRadius: "0.5rem",
padding: "1rem",
height: "17vh",
}}
>
<Chart3 />
</div>
</div>
<div><SubTitle
className="margin-bottom"
explanation={"월별 복약율 통계"}
color={"#333333"}
/>
<div
style={{
border: "1px solid #eeeeee",
borderRadius: "0.5rem",
padding: "1rem",
height: "17vh",
}}
>
<Chart />
</div>
</div>
<div><SubTitle
className="margin-bottom"
explanation={"년별 복약율 통계"}
color={"#333333"}
/>
<div
style={{
border: "1px solid #eeeeee",
borderRadius: "0.5rem",
padding: "1rem",
height: "17vh",
}}
>
<LineColor_medicine />
</div>
</div>
</div>
<div className="board-wrap">
<table className="margin-bottom2 medicine-detail-table">
<thead>
<tr>
<th rowSpan="2">No</th>
<th rowSpan="2">날짜</th>
<th colSpan="3">복약상태</th>
<th rowSpan="2">필요 복용 횟수</th>
<th rowSpan="2">복약률</th>
<th rowSpan="2">수정 상세 사유</th>
<th rowSpan="2">수정자</th>
<th rowSpan="2">수정일시</th>
<th rowSpan="2">관리</th>
</tr>
<tr>
<th>아침</th>
<th>점심</th>
<th>저녁</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2022.08.10</td>
<td>미복약</td>
<td>미복약</td>
<td>미복약</td>
<td>3회</td>
<td>0%</td>
<td>3일간 미복약으로 확인 되어 전화드림( 아들내 방문 중 )외출</td>
<td>김대상</td>
<td>2022.12.27</td>
<td>
<div className="btn-wrap flex-center">
<Button
className={"btn-small green-btn"}
btnName={"수정"}
onClick={openModal}
/>
<Button className={"btn-small gray-btn"} btnName={"삭제"} />
</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2022.08.09</td>
<td>복약</td>
<td>미복약</td>
<td>복약</td>
<td>3회</td>
<td>90%</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<div className="btn-wrap flex-center">
<Button
className={"btn-small green-btn"}
btnName={"수정"}
onClick={openModal}
/>
<Button className={"btn-small gray-btn"} btnName={"삭제"} />
</div>
</td>
</tr>
</tbody>
</table>
<div className="btn-wrap flex-center">
<Button
className={"btn-large gray-btn"}
btnName={"이전"}
onClick={() => {
navigate("/MedicineCareSelect");
}}
/>
</div>
</div>
</div>
</main>
);
}