nexus-1/frontend/modules/AccountsModule.jsx

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

export default function AccountsModule() {
    const [accounts, setAccounts] = useState([])
    const [loading, setLoading] = useState(false)
    const [serviceDays, setServiceDays] = useState([])
    const [loadingDays, setLoadingDays] = useState(false)
    const [activeAccount, setActiveAccount] = useState([])
    const [accountStatus, setAccountStatus] = useState([])

    const fetchServiceDays = async (account) => {
        setLoadingDays(true);
        try {
            const response = await api.get(`days/${account}/`);
            if (response.status === 200) {
                setServiceDays(response.data
                );}
            } catch (error) {
            alert(error);
        } finally {
            setLoadingDays(false);
            }
        };
    const handleToggle = (account) => {
        if (activeAccount === account) {
            setServiceDays([])
            setActiveAccount([])
        } else {
            setServiceDays([])
            setActiveAccount(account)
            fetchServiceDays(account)
        }
    }
    useEffect(() => {
        const fetchAccounts = async () => {
            setLoading(true);
            try {
                const response = await api.get('/accounts/');
                if (response.status === 200) {
                    const sortedAccounts = response.data.sort((a, b) => a.full_name.localeCompare(b.full_name));
                    setAccounts(sortedAccounts);
                }
            } catch (error) {
                alert(error);
            } finally {
                setLoading(false);
            }
        };
        const fetchAccountStatus = async () => {
            setLoading(true);
            try {
                const response = await api.get('/accounts/status/');
                if (response.status === 200) {
                    setAccountStatus(response.data);
                }
            } catch (error) {
                alert(error);
            } finally {
                setLoading(false);
            }
        };
        fetchAccounts();
        fetchAccountStatus();
    }, []);
    const activeAccounts = accounts.filter(account => {
        const status = accountStatus.find(status => status.short_name === account.short_name);
        return status && status.is_active;
    });
    const inactiveAccounts = accounts.filter(account => {
        const status = accountStatus.find(status => status.short_name === account.short_name);
        return status?!status.is_active: false;
    });

    return (
        <div>
            <div className="d-flex align-items-center justify-content-center p-2">
                <h4>Account Information</h4>
            </div>
            {loading ? <div className="d-flex align-items-center"><h4 className="m-2 p-2">Loading accounts...</h4><div className="m-2 spinner-border"></div></div> :
                <div className="accordion p-2" id="accountsAccordion">
                    <div>
                        <h3 className="m-2 p-2">Active Accounts</h3>
                        {activeAccounts.map(loc => (
                            <div key={loc.short_name} className="accordion-item">
                                <h2 className="accordion-header">
                                <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target={`#collapse${loc.short_name}`} aria-expanded="false" aria-controls={`collapse${loc.short_name}`}
                                        onClick={() => handleToggle(loc.short_name)}>
                                    {loc.full_name}
                                </button>
                                </h2>
                                <div id={`collapse${loc.short_name}`} className="accordion-collapse collapse" data-bs-parent="#accountsAccordion">
                                    <div className="accordion-body">
                                        <p>{loc.street_address}, {loc.city}, {loc.state} {loc.zip_code}</p>
                                        {loadingDays ? <p>Loading service days...</p> : serviceDays.map(schedule => (
                                            <div key={schedule.short_name}>
                                                {schedule.mon_serv === true ? <p>Monday</p> : null}
                                                {schedule.tues_serv === true ? <p>Tuesday</p> : null}
                                                {schedule.wed_serv === true ? <p>Wednesday</p> : null}
                                                {schedule.thurs_serv === true ? <p>Thursday</p> : null}
                                                {schedule.fri_serv === true ? <p>Friday</p> : null}
                                                {schedule.sat_serv === true ? <p>Saturday</p> : null}
                                                {schedule.sun_serv === true ? <p>Sunday</p> : null}
                                                {schedule.weekend_serv === true ? <p>Friday with weekend option</p> : null}
                                                {schedule.exception_serv === true ? <p>Schedule exceptions exist - see scope of work</p> : null}
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                    <div>
                        <h3 className="m-2 p-2">Inactive Accounts</h3>
                        {inactiveAccounts.map(loc => (
                            <div key={loc.short_name} className="accordion-item">
                                <h2 className="accordion-header">
                                    <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target={`#collapse${loc.short_name}`} aria-expanded="false" aria-controls={`collapse${loc.short_name}`}
                                            onClick={() => handleToggle(loc.short_name)}>
                                        {loc.full_name}
                                    </button>
                                </h2>
                                <div id={`collapse${loc.short_name}`} className="accordion-collapse collapse" data-bs-parent="#accountsAccordion">
                                    <div className="accordion-body">
                                        <p>{loc.street_address}, {loc.city}, {loc.state} {loc.zip_code}</p>
                                        {loadingDays ? <p>Loading service days...</p> : serviceDays.map(schedule => (
                                            <div key={schedule.short_name}>
                                                {schedule.mon_serv === true ? <p>Monday</p> : null}
                                                {schedule.tues_serv === true ? <p>Tuesday</p> : null}
                                                {schedule.wed_serv === true ? <p>Wednesday</p> : null}
                                                {schedule.thurs_serv === true ? <p>Thursday</p> : null}
                                                {schedule.fri_serv === true ? <p>Friday</p> : null}
                                                {schedule.sat_serv === true ? <p>Saturday</p> : null}
                                                {schedule.sun_serv === true ? <p>Sunday</p> : null}
                                                {schedule.weekend_serv === true ? <p>Friday with weekend option</p> : null}
                                                {schedule.exception_serv === true ? <p>Schedule exceptions exist - see scope of work</p> : null}
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            }
        </div>
    )
}