frontend_adaptive_learning/src/roles/teacher/manage_classes/views/ManageClasses.jsx

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Table, Row, Col, Card, Nav, Tab, Button, Form, InputGroup, Spinner, Modal } from 'react-bootstrap';
import Select from 'react-select';
import useClasses from '../hooks/useClasses';
import ModalOperation from '../../../../components/ui/adminMessageModal/ModalOperation';
import TablePaginate from '../../../../components/ui/tablePaginate';

const ManageClasses = () => {
    const { 
      classes, 
      freeStudent,
      loading, 
      error, 
      showAssign,
      showLoader,
      loaderState,
      assignStudentToClass,
      assignStudentChange,
      assignClassChange,
      handleShowAssign,
      handleClose,
      handleCloseLoader,
    } = useClasses();

    if (error) {
        return (<>{error}</>);
    }

    return (
        <div className='admin-teachers'>
            <div className="d-none d-sm-flex justify-content-between">
                <h2 className='page-title'>Manage your students to classes!</h2>
                <Button variant="outline-blue" size='sm' type="button" 
                  onClick={handleShowAssign}
                  className="py-2 bg-white d-none d-lg-block" 
                >
                    <i className="bi bi-person-fill-add me-2"></i>Assign Student to Class
                </Button>
            </div>
            <p className='d-none d-sm-block page-desc'>Easily add students to their classes and organize them efficiently.</p>
            <div className="mb-3 d-flex align-items-center justify-content-between">
              <h3 className='m-0 text-blue'>Class List</h3>
              <Button variant="outline-blue" size='sm' type="button" 
                  onClick={handleShowAssign}
                  className="bg-white d-block d-lg-none" 
                >
                    <i className="bi bi-person-fill-add me-2"></i>Assign Student
                </Button>
            </div>
            <Row>
              {loading?(
                  <div className='d-flex justify-content-center align-items-center' style={{height:"20vh"}}>
                      <Spinner animation="grow" variant="primary" />
                      <Spinner animation="grow" variant="secondary" />
                      <Spinner animation="grow" variant="success" />
                      <Spinner animation="grow" variant="danger" />
                      <Spinner animation="grow" variant="warning" />
                      <Spinner animation="grow" variant="info" />
                  </div>
              ):(
                  classes.map((data, index) => (
                    <Col xs={6} lg={4} className='mb-3' key={index}>
                      <Card className='h-100'>
                        <Card.Body>
                          <Card.Title as='h2'>{data.NAME_CLASS}</Card.Title>
                            <Card.Text className='mb-4 fs-14p'>
                              {data.STUDENTS < data.TOTAL_STUDENT?(
                                <>
                                  <span className='fw-bold'>{data.STUDENTS} </span>
                                  out of {data.TOTAL_STUDENT} students
                                </>
                              ):(
                                `${data.TOTAL_STUDENT} students`
                              )}
                            </Card.Text>
                          <Button as={Link} to={`d/${data.ID_CLASS}`} variant="warning" className='py-2 w-100 rounded-35'>See Details</Button>
                        </Card.Body>
                      </Card>
                    </Col>
                  ))
              )}
            </Row>
                
            <Modal show={showAssign} onHide={handleClose} className='modal-admin' size='lg'>
                <Modal.Header closeButton>
                    <Modal.Title>Assign Student to Class</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={(e) => { e.preventDefault(); assignStudentToClass(); }}>
                        <Form.Group as={Col} controlId="formGridEmail" className='mb-3'>
                            <Form.Label>Class<sup className='text-red fw-bold'>*</sup></Form.Label>
                            <InputGroup className="mb-2 input-group-icon">
                                <InputGroup.Text id="basic-addon1"><i className="bi bi-person"></i></InputGroup.Text>
                                <Form.Select aria-label="teacher select" required defaultValue="" onChange={assignClassChange}>
                                    <option value="" disabled hidden>Select Class</option>
                                    {
                                        classes.map((data, index) => (
                                            <option key={data.ID_CLASS} value={data.NAME_CLASS}>{data.NAME_CLASS}</option>
                                        ))
                                    }
                                </Form.Select>
                            </InputGroup>
                        </Form.Group>
                        <Form.Group as={Col} controlId="formGridPassword" className='mb-3'>
                            <Form.Label>Student<sup className='text-red fw-bold'>*</sup></Form.Label>
                            <InputGroup className="mb-2 input-group-icon">
                                <InputGroup.Text id="basic-addon1"><i className="bi bi-person-vcard"></i></InputGroup.Text>
                                <Select
                                    className='group-react-select'
                                    classNamePrefix='react-select-group'
                                    required={true}
                                    isMulti
                                    options={freeStudent}
                                    onChange={assignStudentChange}
                                    placeholder="Select Students"
                                    backspaceRemovesValue={true}
                                    closeMenuOnSelect={false}
                                    menuPosition="fixed"
                                />
                            </InputGroup>
                        </Form.Group>
                        <div className="d-flex justify-content-end">
                            <Button variant="blue" type="submit" className='py-2 px-5 w-100 rounded-35'>
                                Add
                            </Button>
                        </div>
                    </Form>
                </Modal.Body>
            </Modal>

            <ModalOperation
                show={showLoader}
                handleClose={handleCloseLoader}
                title={loaderState.title}
                description={loaderState.description}
                loading={loaderState.loading}
                successMessage={loaderState.successMessage}
                confirmAction={loaderState.confirmAction}
                handleConfirm={loaderState.handleConfirm}
            />
        </div>
    );
};

export default ManageClasses;