import React from "react"; import Table from "../../component/Table.jsx"; import Button from "../../component/Button.jsx"; import SubTitle from "../../component/SubTitle.jsx"; import Modal from "../../component/Modal.jsx"; import Category from "../../component/Category.jsx"; import { useNavigate } from "react-router"; export default function EquipmentManagementSelect_agency() { const [modalOpen, setModalOpen] = React.useState(false); const openModal = () => { setModalOpen(true); }; const closeModal = () => { setModalOpen(false); }; const navigate = useNavigate(); const thead1 = [ "No", "시리얼 넘버", "기기 종류", "모델 명", "대여 가능 여부", "기기 상태", "사용자", "기기 관리" ]; const key1 = [ "No", "serialNumber", "type", "equipment_name", "use", "state", "name", "management" ]; const content1 = [ { No: 2, type: "스마트약상자", equipment_name: "SMB-MB100", serialNumber: "ABCD-2", use: "대여 가능", state: "정상", name: "-", management: ( <Button className={"btn-small gray-btn"} btnName={"매칭"} onClick={openModal} /> ) }, { No: 1, type: "스마트약상자", equipment_name: "SMB-MB100", serialNumber: "ABCD-1", use: "대여 중", state: "정상", name: "홍길동", management: ( <Button className={"btn-small gray-btn"} btnName={"반납"} onClick={openModal} /> ) }, ]; const thead2 = [ "No", "시리얼 넘버", "기기 종류", "모델 명", "대여 가능 여부", "기기 상태", "사용자", "기기 관리" ]; const key2 = [ "No", "serialNumber", "type", "equipment_name", "use", "state", "name", "management" ]; const content2 = [ { No: 1, type: "스마트약상자", equipment_name: "SMB-MB100", serialNumber: "ABCD-2", use: "대여 가능", state: "정상", name: "-", management: ( <Button className={"btn-small gray-btn"} btnName={"매칭"} onClick={openModal} /> ) }, ]; const thead3 = [ "No", "장비명", "시리얼 넘버", "입고일자", "납품 기관", ]; const key3= [ "No", "equipment_name", "serialNumber", "name", "management",]; const content3 = [ { No: 1, equipment_name: "스마트약상자", serialNumber: "ABCD-1", name: "2022.12.02", management: ( <Button className={"btn-small gray-btn"} btnName={"선택"} onClick={openModal} /> ) }, { No: 2, equipment_name: "스마트약상자", serialNumber: "ABCD-1", name: "2022.12.02", management: (<Button className={"btn-small gray-btn"} btnName={"선택"} onClick={openModal} />) }, ]; const thead4 = [ "No", "사용자", "선택하기", ]; const key4 = [ "No", "senior_name", "serialNumber", ]; const content4 = [ { No: 1, senior_name: "송창덕", serialNumber: (<Button className={"btn-small gray-btn"} btnName={"선택"} />) }, ]; const data = [ { id: 1, title: "장비 전체(100)", description: ( <div> <Table className={"caregiver-user"} head={thead1} contents={content1} contentKey={key1} /> </div> ), }, { id: 2, title: "재고 장비(1)", description: ( <div> <Table className={"caregiver-user"} head={thead2} contents={content2} contentKey={key2} /> </div> ), }, ]; const [index, setIndex] = React.useState(1); return ( <main> <Modal open={modalOpen} close={closeModal} header="시니어 매칭"> <div className="board-wrap"> <div> <Table className={"caregiver-user"} head={thead4} contents={content4} contentKey={key4} /> </div> <div> <Button className={"btn-100 green-btn"} btnName={"닫기"} onClick={closeModal} /> </div> </div> </Modal> <div className="tab-container"> <ul className="tab-menu"> {data.map((item) => ( <li key={item.id} className={index === item.id ? "active" : null} onClick={() => setIndex(item.id)} > {item.title} </li> ))} </ul> <div className="content-wrap"> <div className="search-management flex-end margin-bottom2"> <select name="management-agency"> <option value="기관전체">기관전체</option> <option value="대구보훈병원">복지재단1</option> <option value="군위군청">복지재단2</option> <option value="군위군청">복지재단3</option> </select> <select> <option value="이름">이름</option> <option value="아이디">아이디</option> </select> <input type="text" /> <Button className={"btn-small gray-btn"} btnName={"검색"} onClick={() => navigate("")} /> </div> <ul className="tab-content"> {data .filter((item) => index === item.id) .map((item) => ( <li>{item.description}</li> ))} </ul> </div> </div> </main> ); }