nexus-1/frontend/components/SuppliesModal.jsx

import React from "react";
import api from "../api.js";
import {useState} from "react";

export default function SuppliesModal({visit}) {
    const modalId = `modal2-${visit.id.replace(/\s+/g, '-')}`;
    const username = localStorage.getItem("username");
    const [notes, setNotes] = useState('');

    const [multifold, setMultifold] = useState(false);
    const [cfold, setCfold] = useState(false);
    const [ptroll, setPtroll] = useState(false);
    const [kitroll, setKitroll] = useState(false);
    const [jumbotp, setJumbotp] = useState(false);
    const [standardtp, setStandardtp] = useState(false);
    const [dispsoap, setDispsoap] = useState(false);
    const [indsoap, setIndsoap] = useState(false);
    const [urinal, setUrinal] = useState(false);
    const [umats, setUmats] = useState(false);
    const [fem, setFem] = useState(false);
    const [air, setAir] = useState(false);
    const [lgbag, setLgbag] = useState(false);
    const [smbag, setSmbag] = useState(false);
    const [mdbag, setMdbag] = useState(false);

    const handleMultifold = (e) => setMultifold(e.target.checked);
    const handleCfold = (e) => setCfold(e.target.checked);
    const handlePtroll = (e) => setPtroll(e.target.checked);
    const handleKitroll = (e) => setKitroll(e.target.checked);
    const handleJumbotp = (e) => setJumbotp(e.target.checked);
    const handleStandardtp = (e) => setStandardtp(e.target.checked);
    const handleDispsoap = (e) => setDispsoap(e.target.checked);
    const handleIndsoap = (e) => setIndsoap(e.target.checked);
    const handleUrinal = (e) => setUrinal(e.target.checked);
    const handleUmats = (e) => setUmats(e.target.checked);
    const handleFem = (e) => setFem(e.target.checked);
    const handleAir = (e) => setAir(e.target.checked);
    const handleLgbag = (e) => setLgbag(e.target.checked);
    const handleSmbag = (e) => setSmbag(e.target.checked);
    const handleMdbag = (e) => setMdbag(e.target.checked);

    const handleRequest = async () => {
        const checkedItems = {
            multiFoldTowels: multifold,
            cFoldTowels: cfold,
            jumboPtRoll: ptroll,
            kitPtRoll: kitroll,
            jumboTp: jumbotp,
            standardTp: standardtp,
            dispSoap: dispsoap,
            indSoap: indsoap,
            urinal: urinal,
            uMats: umats,
            fem: fem,
            air: air,
            lgBag: lgbag,
            smBag: smbag,
            mdBag: mdbag
        }
        try {
            const response = await api.post('accounts/supplies/', {account: visit.full_name, team: username, supplies: checkedItems, notes: notes});
            if (response.status === 200) {
                onSuccess()
            }
        } catch (error) {
            alert(error.detail);
        }
    }
    const handleChange = (e) => {
        setNotes(e.target.value);
    }
    const onSuccess = () => {
        alert('Supply request submitted successfully!');
    }
    return (
        <div>
            <button type="button" className="btn btn-primary" data-bs-toggle="modal" disabled={visit.status === 'Closed'}
                    data-bs-target={`#${modalId}`}>Request Supplies</button>
            <div className='modal fade' id={modalId} data-bs-backdrop="static"
                 data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h1 className="modal-title fs-5" id="staticBackdropLabel">
                                Supply Request Form
                            </h1>
                            <button type="button" className="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            <p>Account: {visit.full_name}</p>
                            <p>Date: {visit.date}</p>
                            <p>Requested By: {username}</p>
                            <form>
                                <div className="mb-3 form-check">
                                    <label htmlFor="multifold">Multifold Towels</label>
                                    <input className="form-check-input" checked={multifold} onChange={handleMultifold} type="checkbox" id="multifold"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="cfold">C-Fold Towels</label>
                                    <input className="form-check-input" checked={cfold} onChange={handleCfold} type="checkbox" id="cfold"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="ptroll">Jumbo Paper Towel Rolls</label>
                                    <input className="form-check-input" checked={ptroll} onChange={handlePtroll} type="checkbox" id="ptroll"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="kitroll">Kitchen Paper Towel Rolls</label>
                                    <input className="form-check-input" checked={kitroll} onChange={handleKitroll} type="checkbox" id="kitroll"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="jumbotp">Jumbo Toilet Paper</label>
                                    <input className="form-check-input" checked={jumbotp} onChange={handleJumbotp} type="checkbox" id="jumbotp"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="standardtp">Standard Toilet Paper</label>
                                    <input className="form-check-input" checked={standardtp} onChange={handleStandardtp} type="checkbox" id="standardtp"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="dispsoap">Hand Soap (Dispenser)</label>
                                    <input className="form-check-input" checked={dispsoap} onChange={handleDispsoap} type="checkbox" id="dispsoap"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="indsoap">Hand Soap (Individual)</label>
                                    <input className="form-check-input" checked={indsoap} onChange={handleIndsoap} type="checkbox" id="indsoap"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="urinal">Urinal Screens</label>
                                    <input className="form-check-input" checked={urinal} onChange={handleUrinal} type="checkbox" id="urinal"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="umats">Urinal Mats</label>
                                    <input className="form-check-input" checked={umats} onChange={handleUmats} type="checkbox" id="umats"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="fem">Feminine Hygiene Waste Bags</label>
                                    <input className="form-check-input" checked={fem} onChange={handleFem} type="checkbox" id="fem"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="air">Air Fresheners</label>
                                    <input className="form-check-input" checked={air} onChange={handleAir} type="checkbox" id="air"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="lgbag">Large Trash Bags</label>
                                    <input className="form-check-input" checked={lgbag} onChange={handleLgbag} type="checkbox" id="lgbag"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="smbag">Small Trash Bags</label>
                                    <input className="form-check-input" checked={smbag} onChange={handleSmbag} type="checkbox" id="smbag"/>
                                </div>
                                <div className="mb-3 form-check">
                                    <label htmlFor="mdbag">Medium Trash Bags</label>
                                    <input className="form-check-input" checked={mdbag} onChange={handleMdbag} type="checkbox" id="mdbag"/>
                                </div>
                            </form>
                            <input onChange={handleChange} type="text" className="form-control" placeholder="Add notes here..."></input>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary"
                                    data-bs-dismiss="modal">Close
                            </button>
                            <button type="button" className="btn btn-primary" onClick={handleRequest} data-bs-dismiss="modal">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}