From 354325ec3b65f1111e32be789eb60c897a93ad2a Mon Sep 17 00:00:00 2001
From: Algusto-RC <algustorc@gmail.com>
Date: Wed, 13 Dec 2023 23:45:53 -0300
Subject: [PATCH] Melhorias no front

---
 frontend/src/pages/EnrollmentRequest/index.js | 149 ++++++++++++++++++
 .../src/pages/EnrollmentRequest/styles.js     |  68 ++++++++
 frontend/src/pages/Home/index.js              |  19 ++-
 frontend/src/pages/Recommendations/index.js   |   2 +-
 frontend/src/routes/index.js                  |   7 +
 5 files changed, 240 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/pages/EnrollmentRequest/index.js
 create mode 100644 frontend/src/pages/EnrollmentRequest/styles.js

diff --git a/frontend/src/pages/EnrollmentRequest/index.js b/frontend/src/pages/EnrollmentRequest/index.js
new file mode 100644
index 00000000..1bf52e1e
--- /dev/null
+++ b/frontend/src/pages/EnrollmentRequest/index.js
@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { ChakraProvider, useDisclosure } from '@chakra-ui/react';
+import Header from "../../components/Header/index.js";
+import Footer from "../../components/Footer/index.js";
+
+import { 
+  Box,
+  Flex,
+  Heading,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Button,
+  AlertDialog,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogBody,
+  AlertDialogFooter,
+  Container,
+  Alert,
+  AlertIcon,
+  Select
+} from "@chakra-ui/react";
+
+const EnrollmentRequest = () => {
+  const [eletivas, setEletivas] = useState([]);
+  const [eletivasPorTrilha, setEletivasPorTrilha] = useState({});
+  const [descricaoEletiva, setDescricaoEletiva] = useState('');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = React.useRef();
+  const [showAlert, setShowAlert] = useState(false);
+
+  useEffect(() => {
+    async function fetchEletivas() {
+      try {
+        const response = await axios.get('http://localhost:3001/eletivas');
+        setEletivas(response.data);
+
+        const eletivasMap = {};
+        response.data.forEach((eletiva) => {
+          eletivasMap[eletiva.id] = eletiva.related_trilhas || [];
+        });
+        setEletivasPorTrilha(eletivasMap);
+      } catch (error) {
+        console.error('Erro ao buscar eletivas:', error);
+      }
+    }
+    fetchEletivas();
+  }, []);
+
+  const getStatus = (eletivaId) => {
+    return eletivaId % 2 === 0 ? 'Homologado' : 'Não homologado';
+  };
+
+  const handleVerDescricaoClick = (descricao) => {
+    setDescricaoEletiva(descricao);
+    onOpen();
+  };
+
+  return (
+    <ChakraProvider>
+      <Flex direction="column" minH="100vh">
+        <Header />
+        <Container flex="1">
+          <Box
+            width="100%"
+            marginTop="10vh"
+            marginBottom="2vh"
+            paddingLeft="2vh"
+            paddingRight="2vh"
+            paddingTop="2vh"
+            borderWidth={1}
+            borderRadius={8}
+            boxShadow="lg"
+          >
+            <Box textAlign="center">
+              <Heading color="#243A69">Eletivas Disponíveis</Heading>
+            </Box>
+            <Table variant="simple">
+              <Thead>
+                <Tr>
+                  <Th>Disciplina</Th>
+                  <Th>Status</Th>
+                  <Th>Eletivas relacionadas</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {eletivas.map((eletiva) => (
+                  <Tr key={eletiva.id}>
+                    <Td>{eletiva.name}</Td>
+                    <Td>{getStatus(eletiva.id)}</Td>
+                    <Td>
+                      <Select>
+                        {eletivasPorTrilha[eletiva.id]?.map((trilha) => (
+                          <option key={trilha.id}>{trilha.name}</option>
+                        ))}
+                      </Select>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+            <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose} isCentered>
+              <AlertDialogOverlay
+                style={{
+                  backdropFilter: "blur(4px)",
+                  backgroundColor: "rgba(0, 0, 0, 0.5)",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <AlertDialogContent>
+                  <AlertDialogHeader fontSize="lg" fontWeight="bold">
+                    Descrição da Eletiva
+                  </AlertDialogHeader>
+                  <AlertDialogBody>
+                    {descricaoEletiva}
+                  </AlertDialogBody>
+                  <AlertDialogFooter>
+                    <Button ref={cancelRef} onClick={onClose}>
+                      Fechar
+                    </Button>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialogOverlay>
+            </AlertDialog>
+          </Box>
+          {showAlert && (
+            <Box>
+              <Alert status="success" variant="subtle">
+                <AlertIcon />
+                Eletivas carregadas com sucesso!
+              </Alert>
+            </Box>
+          )}
+        </Container>
+        <Footer />
+      </Flex>
+    </ChakraProvider>
+  );
+};
+
+export default EnrollmentRequest;
diff --git a/frontend/src/pages/EnrollmentRequest/styles.js b/frontend/src/pages/EnrollmentRequest/styles.js
new file mode 100644
index 00000000..4ce76ca2
--- /dev/null
+++ b/frontend/src/pages/EnrollmentRequest/styles.js
@@ -0,0 +1,68 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  //justify-content: center;
+   
+  flex-direction: column;
+  gap: 10px;
+  height: 100vh;
+  background-color: 'white';
+`;
+
+export const Content = styled.div`
+  gap: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 1px 2px #0003;
+  background-color: #f4f4f2;
+  max-width: 650px;
+  max-height: 85%;
+  margin-top: 2%;
+  border-radius: 60px;
+`;
+
+export const Label = styled.label`
+  font-size: 18px;
+  font-weight: 600;
+  color: #676767;
+`;
+
+export const LabelSignup = styled.label`
+  font-size: 16px;
+  color: #676767;
+`;
+
+export const labelError = styled.label`
+  font-size: 14px;
+  color: red;
+`;
+
+export const Strong = styled.strong`
+  cursor: pointer;
+
+  a {
+    text-decoration: none;
+    color: #676767;
+  }
+`;
+export const titulo = styled.div`
+  font-size: 150%;
+  font-weight: 600;
+  color: #243A69;
+  margin-left: 20px;
+  margin-top: 20px;
+  align: center;
+`;
+export const box = styled.div`
+`;
+
+export const texto = styled.label`
+  color: #243A69;
+
+`;
diff --git a/frontend/src/pages/Home/index.js b/frontend/src/pages/Home/index.js
index 9b3e9416..62abc4a8 100644
--- a/frontend/src/pages/Home/index.js
+++ b/frontend/src/pages/Home/index.js
@@ -42,7 +42,7 @@ const Home = () => {
                 <Link to="/criar-trilha">Criar trilha</Link>
               </Button>
               <Button colorScheme="facebook" size="lg" width="35vh">
-                <Link to="/criar-eletiva">Criar Eletiva</Link>
+                <Link to="/criar-eletiva">Criar eletiva</Link>
               </Button>
             </HStack>
           </Center>
@@ -61,10 +61,10 @@ const Home = () => {
           <Center>
             <HStack spacing="4" marginTop="2vh">
               <Button colorScheme="facebook" size="lg" width="35vh">
-                <Link to="/trilhas">Trilhas</Link>
+                <Link to="/trilhas">Listagem trilhas</Link>
               </Button>
               <Button colorScheme="facebook" size="lg" width="35vh">
-                <Link to="/eletivas">Eletivas</Link>
+                <Link to="/eletivas">Listagem Eletivas</Link>
               </Button>
             </HStack>
           </Center>
@@ -75,7 +75,18 @@ const Home = () => {
                 <Link to="/cadastrar-estudantes">Importar estudantes</Link>
               </Button>
               <Button colorScheme="facebook" size="lg" width="35vh">
-                <Link to="/periodo-matriculas">Periodo de matriculas</Link>
+                <Link to="/periodo-matriculas">Período de matrículas</Link>
+              </Button>
+            </HStack>
+          </Center>
+
+          <Center>
+            <HStack spacing="4" marginTop="2vh">
+              <Button colorScheme="facebook" size="lg" width="35vh">
+                <Link to="/recommendations">Disciplinas disponíveis</Link>
+              </Button>
+              <Button colorScheme="facebook" size="lg" width="35vh">
+                <Link to="/solicitacao-matricula">Solicitações de matrículas</Link>
               </Button>
             </HStack>
           </Center>
diff --git a/frontend/src/pages/Recommendations/index.js b/frontend/src/pages/Recommendations/index.js
index 99ac8ba1..6a24d7b3 100644
--- a/frontend/src/pages/Recommendations/index.js
+++ b/frontend/src/pages/Recommendations/index.js
@@ -95,7 +95,7 @@ const Recommendations = () => {
                     <Td>{linha.name}</Td>
                     <Td>
                       <Button
-                        colorScheme="none"
+                        colorScheme="facebook"
                         backgroundColor="#243A69"
                         size="sm"
                         onClick={() => handleVerDescricaoClick(linha.description)}
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index 453771d6..01ba578e 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -18,6 +18,7 @@ import ListElectives from "../pages/ListElectives"
 import StudentsLP from "../pages/StudentsLP";
 import StudentsEl from "../pages/StudentsEl";
 import NewEnrolmentElectives from "../pages/NewEnrolmentElectives";
+import EnrollmentRequest from "../pages/EnrollmentRequest";
 
 const RoutesApp = () => {
   const { isAuthenticated, isSuperUser } = useAuth();
@@ -128,6 +129,12 @@ const RoutesApp = () => {
               !isAuthenticated() ? <Navigate to="/signin" /> : <NewEnrolmentElectives /> 
             }
           />
+          <Route
+            path="/solicitacao-matricula"
+            element={
+              !isAuthenticated() ? <Navigate to="/signin" /> : <EnrollmentRequest /> 
+            }
+          />
           </>
         )}
       </Routes>