C-university/src/renderer/src/components/TrancheEcolage.jsx

import React, { useEffect, useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import classe from '../assets/AllStyleComponents.module.css'
import classeHome from '../assets/Home.module.css'
import Paper from '@mui/material/Paper'
import { Button, Modal, Box } from '@mui/material'
import { IoMdReturnRight } from 'react-icons/io'
import AjoutTranche from './AjoutTranche'
import { Tooltip } from 'react-tooltip'
import { FaPenToSquare } from 'react-icons/fa6'
import { FaTrash } from 'react-icons/fa'
import UpdateTranche from './UpdateTranche'
import DeleteTranche from './DeleteTranche'

const TrancheEcolage = () => {
  const { id } = useParams()
  const [tranche, setTranche] = useState([])
  const [etudiant, setEtudiant] = useState({})

  useEffect(() => {
    window.etudiants.getTranche({ id }).then((response) => {
      setTranche(response)
    })

    window.etudiants.getSingle({ id }).then((response) => {
      setEtudiant(response)
    })
  }, [])

  const [openAdd, setOpenAdd] = useState(false)
  const onCloseAdd = () => setOpenAdd(false)

  const openAddFunction = () => {
    setOpenAdd(true)
  }

  const [isSubmited, setIsSubmited] = useState(false)
  const handleFormSubmit = (status) => {
    setIsSubmited(status)
  }

  const [openUpdate, setOpenUpdate] = useState(false)
  const onCloseUpdate = () => setOpenUpdate(false)
  const [idToSend, setIdToSend] = useState(null)
  const [idToSend2, setIdToSend2] = useState(null)

  const openUpdateFunction = (id) => {
    setOpenUpdate(true)
    setIdToSend(id)
  }

  const [openDelete, setOpenDelete] = useState(false)
  const onCloseDelete = () => setOpenDelete(false)
  const openDeleteFunction = (id) => {
    setOpenDelete(true)
    setIdToSend2(id)
  }

  useEffect(() => {
    if (isSubmited) {
      window.etudiants.getTranche({ id }).then((response) => {
        setTranche(response)
      })
      setIsSubmited(false)
    }
  }, [isSubmited])

  return (
    <div className={classe.mainHome}>
      <AjoutTranche
        id={id}
        onClose={onCloseAdd}
        onSubmitSuccess={handleFormSubmit}
        open={openAdd}
      />
      <UpdateTranche
        onClose={onCloseUpdate}
        onSubmitSuccess={handleFormSubmit}
        open={openUpdate}
        id={idToSend}
      />
      <DeleteTranche
        id={idToSend2}
        onClose={onCloseDelete}
        onSubmitSuccess={handleFormSubmit}
        open={openDelete}
      />
      <div className={classeHome.header}>
        <div className={classe.h1style}>
          <div className={classeHome.blockTitle}>
            <h1>Tranche d'Ecolage</h1>
            <div style={{ display: 'flex', gap: '10px' }}>
              <Link to={'#'} onClick={openAddFunction}>
                <Button color="warning" variant="contained">
                  Ajouter
                </Button>
              </Link>
              <Link to={'#'} onClick={() => window.history.back()}>
                <Button color="warning" variant="contained">
                  <IoMdReturnRight style={{ fontSize: '20px' }} />
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>

      <div className={classeHome.boxEtudiantsCard}>
        <Paper
          sx={{
            height: 'auto', // Auto height to make the grid responsive
            width: '100%',
            // minHeight: 500, // Ensures a minimum height
            display: 'flex',
            padding: '2%'
          }}
        >
          <table className="table table-bordered table-striped text-center shadow-sm" id="myTable2">
            <thead className="table-secondary">
              <tr>
                <td colSpan={4} className="py-3">
                  <h6>
                    Evolution d'écolage de {etudiant.nom} {etudiant.prenom}
                  </h6>
                </td>
              </tr>
              <tr>
                <th>Tranche N°</th>
                <th>Désignation</th>
                <th>Montant</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {tranche.map((tranch, index) => (
                <tr key={tranch.id}>
                  <td>{index + 1}</td>
                  <td>{tranch.tranchename}</td>
                  <td>{Number(tranch.montant).toLocaleString(0, 3)}</td>
                  <td
                    className="fw-bold"
                    style={{
                      display: 'flex',
                      gap: '10px',
                      alignItems: 'center',
                      justifyContent: 'center'
                    }}
                  >
                    <Button
                      variant="contained"
                      color="warning"
                      onClick={() => openUpdateFunction(tranch.id)}
                    >
                      <FaPenToSquare
                        style={{ fontSize: '20px', color: 'white' }}
                        className={`update${tranch.id}`}
                      />
                      <Tooltip
                        anchorSelect={`.update${tranch.id}`}
                        className="custom-tooltip"
                        place="top"
                      >
                        Modifier
                      </Tooltip>
                    </Button>
                    <Button
                      variant="contained"
                      color="error"
                      onClick={() => openDeleteFunction(tranch.id)}
                    >
                      <FaTrash
                        style={{ fontSize: '20px', color: 'white' }}
                        className={`delete${tranch.id}`}
                      />
                      <Tooltip
                        anchorSelect={`.delete${tranch.id}`}
                        className="custom-tooltip"
                        place="top"
                      >
                        Supprimer
                      </Tooltip>
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Paper>
      </div>
    </div>
  )
}

export default TrancheEcolage