File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
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>
);
}