ajustes layout e nomeclatura

ipti · Dec 18, 2024 · 9f32867 · 9f32867
1 parent 5146f2e
commit 9f32867
Show file tree

Hide file tree

Showing 26 changed files with 168 additions and 131 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
-REACT_APP_API_PATH=http://localhost:3000/
-# REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
+# REACT_APP_API_PATH=http://localhost:3000/
+REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
diff --git a/src/Assets/css/styles.css b/src/Assets/css/styles.css
@@ -25,6 +25,15 @@
   h1 {
     font-family: "Poppins Regular";
     text-transform: uppercase;
+    font-size: 24px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h3 {
+    font-size: 14px;
   }
 
   @font-face {

diff --git a/src/Components/Card/CardClassroom/index.tsx b/src/Components/Card/CardClassroom/index.tsx
@@ -80,7 +80,7 @@ const CardClassroom = ({
         <Row style={{ gap: 16 }}>
           <Row style={{ gap: 8, alignItems: "center" }}>
             <img src={pessoas} alt="" style={{ width: 24 }} />
-            <p>Participantes: {registrationCount}</p>
+            <p style={{fontSize: "10px"}}>Participantes: {registrationCount}</p>
           </Row>
           <Column id="center">
             <Row>
@@ -89,7 +89,7 @@ const CardClassroom = ({
                 alt=""
                 style={{ height: 16, marginRight: 2 }}
               />
-              <Row style={{ fontSize: "14px" }}>
+              <Row style={{ fontSize: "10px" }}>
                 Status: {" "}<Padding padding="2px" />
                 {status === Status.PENDING ? (
                   <p style={{ fontWeight: "600" }}> Pendente</p>

diff --git a/src/Components/ContentPage/index.tsx b/src/Components/ContentPage/index.tsx
@@ -1,16 +1,40 @@
-import { ReactNode } from "react";
-import { Container, Padding } from "../../Styles/styles"
+import { MouseEventHandler, ReactNode } from "react";
+import { Column, Container, Padding, Row } from "../../Styles/styles";
+import { Button } from "primereact/button";
 
-const ContentPage = ({ description, title, children }: { title: string, description: string, children: ReactNode }) => {
-    return (
-        <Container>
-            <h1>{title}</h1>
-            <Padding padding="8px" />
-            <p>{description}</p>
-            <Padding padding="8px" />
-            {children}
-        </Container>
-    )
-}
+const ContentPage = ({
+  description,
+  title,
+  children,
+  addButton,
+  onClick, labelButton,
+  permissionButton
+}: {
+  title: string;
+  description: string;
+  children: ReactNode;
+  addButton?: boolean,
+  permissionButton?: boolean,
+  labelButton?: string,
+  onClick?: MouseEventHandler<HTMLButtonElement> | undefined
+}) => {
+  return (
+    <Container>
+      <Row id="space-between">
+        <Column>
+          <h1>{title}</h1>
+          <Padding padding="4px" />
+          <p>{description}</p>
+        </Column>
+        <Column id="center">
+        {(addButton && permissionButton) && <Button style={{height: "42px"}} label={labelButton ?? "Adicionar"} onClick={onClick} icon={"pi pi-plus"} />}
+        </Column>
+      </Row>
+      <Padding padding="4px" />
 
-export default ContentPage;
+      {children}
+    </Container>
+  );
+};
+
+export default ContentPage;
diff --git a/src/Components/Layout/TopBar/Logout/index.tsx b/src/Components/Layout/TopBar/Logout/index.tsx
@@ -1,13 +1,15 @@
 import { logout } from "../../../../Services/localstorage";
-import { Padding } from "../../../../Styles/styles";
+import { Column, Padding } from "../../../../Styles/styles";
 import { Container } from "./style";
 
 
 const LogoutTopBar = () => {
     return (
         <Container onClick={() => { logout(); window.location.reload() }}>
             <div className="flex flex-row">
+                <Column id="center">
                 <i className="pi pi-sign-out"></i>
+                </Column>
                 <Padding padding="2px" />
                 <div>Sair</div>
             </div>

diff --git a/src/Components/Layout/TopBar/index.tsx b/src/Components/Layout/TopBar/index.tsx
@@ -61,7 +61,7 @@ const TopBar = ({
           <Column className="w-12rem md:w-20rem">
             {props.project ? (
               <DropdownComponent
-                placerholder="Projetos"
+                placerholder="Plano de trabalho"
                 options={props.project}
                 value={verifyValueProject(parseInt(GetIdTs()!))}
                 onChange={(e) => {

diff --git a/src/Components/Menu/index.tsx b/src/Components/Menu/index.tsx
@@ -112,7 +112,7 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => {
           />
           <Padding />
           <Item
-            text={"Projetos"}
+            text={"Planos de trabalho"}
             funcActiv={() => {
               setActive(3);
               menuItem("3");

diff --git a/src/Pages/Beneficiaries/BeneficiariesCreate/index.tsx b/src/Pages/Beneficiaries/BeneficiariesCreate/index.tsx
@@ -57,7 +57,7 @@ const RegistrationPage = () => {
       .nullable()
       .required("Data de nascimento é obrigatória"),
     zone: Yup.string().nullable().required("Zona é obrigatório"),
-    project: Yup.string().nullable().required("Projeto é obrigatório"),
+    project: Yup.string().nullable().required("Plano de Trabalho é obrigatório"),
     classroom: Yup.string().nullable().required("Turma é obrigatório"),
     state: Yup.string().nullable().required("Estado é obrigatório"),
     city: Yup.string().nullable().required("Cidade é obrigatório"),
@@ -88,7 +88,7 @@ const RegistrationPage = () => {
               <Form>
                 <Column>
                   <Row id="end">
-                    <Button label="Criar" type="submit" />
+                    <Button label="Criar" type="submit" icon={"pi pi-plus"} />
                   </Row>
                 </Column>
                 <Padding padding="8px" />
@@ -341,7 +341,7 @@ const RegistrationPage = () => {
                     <Padding />
                     <DropdownComponent
                       value={props.project}
-                      placerholder="Selecione o projeto"
+                      placerholder="Selecione o plano de trabalho"
                       name="project"
                       onChange={(e) => {
                         props.setProject(e.target.value);

diff --git a/src/Pages/Beneficiaries/BeneficiariesEdit/ModalCreateRegisterClassroom/index.tsx b/src/Pages/Beneficiaries/BeneficiariesEdit/ModalCreateRegisterClassroom/index.tsx
@@ -38,11 +38,11 @@ const ModalCreateRegisterClassroom = ({
             <Form>
               <div className="grid">
                 <div className="col-12">
-                  <label>Projeto</label>
+                  <label>Plano de trabalho</label>
                   <Padding />
                   <DropdownComponent
                     value={props.project}
-                    placerholder="Selecione o projeto"
+                    placerholder="Selecione o Plano de trabalho"
                     name="deficiency"
                     onChange={(e) => props.setProject(e.target.value)}
                     options={props.projectRequet}

diff --git a/src/Pages/Beneficiaries/BeneficiariesEdit/index.tsx b/src/Pages/Beneficiaries/BeneficiariesEdit/index.tsx
@@ -467,7 +467,7 @@ const BeneficiariesEditPage = () => {
         tableStyle={{ minWidth: "50rem" }}
         header={renderHeader}
       >
-        <Column field="classroom.project.name" header="Projeto"></Column>
+        <Column field="classroom.project.name" header="Plano de trabalho"></Column>
         <Column field="classroom.name" header="Turma"></Column>
         <Column body={StatusBody} header="Status"></Column>
         <Column header="Ações" body={ActionBeneficiariesBody}></Column>

diff --git a/src/Pages/Beneficiaries/BeneficiariesList/index.tsx b/src/Pages/Beneficiaries/BeneficiariesList/index.tsx
@@ -33,7 +33,9 @@ const BeneficiariesList = () => {
 
 const BeneficiariesListPage = () => {
   const props = useContext(BeneficiariesListContext) as BeneficiariesListType;
-  const propsAplication = useContext(AplicationContext) as PropsAplicationContext;
+  const propsAplication = useContext(
+    AplicationContext
+  ) as PropsAplicationContext;
   const history = useNavigate();
 
   const [visible, setVisible] = useState<any>();
@@ -94,24 +96,31 @@ const BeneficiariesListPage = () => {
 
   return (
     <>
-      <ContentPage title="Beneficiários" description="Visualização dos beneficiários da tecnologia.">
-        <Row id="end">
-
-          {propsAplication.project
-            ? (
+      <ContentPage
+        title="Beneficiários"
+        description="Visualização dos beneficiários da tecnologia."
+      >
+        <Padding padding="4px" />
+        {propsAplication.project ? (
+          <div className="grid">
+            <div className="col-12 md:col-6">
+              <label>Filtrar por tecnologia</label>
+              <Padding />
               <DropdownComponent
                 placerholder="Escolha uma tecnologia"
-                options={[{ name: "Todos", id: undefined }, ...propsAplication.project]}
+                options={[
+                  { name: "Todos", id: undefined },
+                  ...propsAplication.project,
+                ]}
                 value={props.tsId}
                 optionsValue="id"
-
                 onChange={(e) => {
                   props.setTsId(e.target.value);
                 }}
               />
-            ) : null}{" "}
-        </Row>
-        <Padding padding="16px" />
+            </div>
+          </div>
+        ) : null}{" "}
         <Row style={{ gap: 8 }}>
           {props.nameFilter?.length! > 0 && (
             <Chip label={"Nome: " + props.nameFilter} />

diff --git a/src/Pages/Classroom/ClassroomCriar/index.tsx b/src/Pages/Classroom/ClassroomCriar/index.tsx
@@ -47,7 +47,7 @@ const FormClassroomPage = () => {
                             ) : null}
                             <Padding padding="16px" />
                             <Row id="end">
-                                <Button label="Criar" />
+                                <Button label="Criar" icon={"pi pi-plus"} />
                             </Row>
                         </Form>
                     )

diff --git a/src/Pages/Classroom/ClassroomOne/ModalChangeClaassroom/index.tsx b/src/Pages/Classroom/ClassroomOne/ModalChangeClaassroom/index.tsx
@@ -24,7 +24,7 @@ const ModalChange = ({
   const { data: tsOneRequest } = useFetchRequestTsLists(undefined);
 
   const schema = Yup.object().shape({
-    idProject: Yup.string().nullable().required("Projeto é obrigatório"),
+    idProject: Yup.string().nullable().required("Plano de trabalho é obrigatório"),
   });
 
   return (
@@ -52,7 +52,7 @@ const ModalChange = ({
             <Form>
               <div className="grid">
                 <div className="col-12 md:col-6">
-                  <label>Escolha um projeto</label>
+                  <label>Escolha um Plano de trabalho</label>
                   <Padding />
                   <DropdownComponent
                     value={values.idProject}

diff --git a/src/Pages/Classroom/ListClassroom/index.tsx b/src/Pages/Classroom/ListClassroom/index.tsx
@@ -1,4 +1,3 @@
-import { Button } from "primereact/button";
 import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import CardClassroom from "../../../Components/Card/CardClassroom";
@@ -13,7 +12,7 @@ import ClassroomProvider, {
 import { ClassroomTypes } from "../../../Context/Classroom/type";
 import { ROLE } from "../../../Controller/controllerGlobal";
 import { idProject } from "../../../Services/localstorage";
-import { Column, Padding, Row } from "../../../Styles/styles";
+import { Column, Padding } from "../../../Styles/styles";
 import { PropsAplicationContext } from "../../../Types/types";
 
 const ListClassroom = () => {
@@ -35,28 +34,36 @@ const ListClassroomPage = () => {
   if (props.isLoading) return <Loading />;
 
   return (
-    <ContentPage title="Turmas" description="Visualização das turmas.">
-      <Padding padding="16px" />
-      <Row id="space-between">
-        <Column>
-          <label>Projeto</label>
-          <Padding />
-          <div className="w-12rem md:w-16rem">
-            <DropdownComponent placerholder="Escolha o projeto" options={props.tsOne?.project} optionsLabel="name" optionsValue="id" value={props.project} onChange={(e) => { console.log(e.value); props.setProject(e.value); idProject(e.value) }} />
-          </div>
-        </Column>
-        {(propsAplication.user?.role === ROLE.ADMIN ||
-          propsAplication.user?.role === ROLE.COORDINATORS) && (
-            <Column id="end">
-              <Button
-                label="Criar turma"
-                icon={"pi pi-plus"}
-                onClick={() => history("/turma/criar/" + props.project)}
-              />
-            </Column>
-          )}
-      </Row>
-      <Padding padding="32px" />
+    <ContentPage
+      title="Turmas"
+      description="Visualização das turmas."
+      permissionButton={
+        propsAplication.user?.role === ROLE.ADMIN ||
+        propsAplication.user?.role === ROLE.COORDINATORS
+      }
+      addButton
+      onClick={() => history("/turma/criar/" + props.project)}
+    >
+      <Column>
+        <label>Plano de trabalho</label>
+        <Padding />
+        <div className="w-12rem md:w-16rem">
+          <DropdownComponent
+            placerholder="Escolha o plano de trabalho"
+            options={props.tsOne?.project}
+            optionsLabel="name"
+            optionsValue="id"
+            value={props.project}
+            onChange={(e) => {
+              console.log(e.value);
+              props.setProject(e.value);
+              idProject(e.value);
+            }}
+          />
+        </div>
+      </Column>
+
+      <Padding padding="8px" />
       {props?.classrooms?.length > 0 ? (
         <div className="grid">
           {props.classrooms?.map((item: any, index: number) => {

diff --git a/src/Pages/Form/CreateForms/Config/index.tsx b/src/Pages/Form/CreateForms/Config/index.tsx
@@ -29,7 +29,7 @@ const Config = () => {
                 <Padding padding="8px" />
                 <label>Destino do formulário</label>
                 <Padding />
-                <Dropdown options={project} placeholder="Escolher Projeto" optionLabel="name" />
+                <Dropdown options={project} placeholder="Escolher Plano de trabalho" optionLabel="name" />
                 <Padding padding="8px" />
             </Column>
         </div>

diff --git a/src/Pages/InitialPage/index.tsx b/src/Pages/InitialPage/index.tsx
@@ -190,7 +190,7 @@ const InitialPage = () => {
         </div>
         <div className="col-12 md:col-4 lg:col-2">
           <CardQuant
-            title="Total de Projetos"
+            title="Total de planos de trabalho"
             quant={chart?.totalProjects!}
             color="blue"
           />

diff --git a/src/Pages/Projects/CreateProjects/index.tsx b/src/Pages/Projects/CreateProjects/index.tsx
@@ -35,7 +35,7 @@ const CreateProjectsPage = () => {
   };
 
   return (
-    <ContentPage title="Criar projeto" description="Criar um novo projeto.">
+    <ContentPage title="Criar plano de trabalho" description="Criar um novo plano de trabalho.">
       <Padding padding="16px" />
       <Formik
         initialValues={initialValues}
@@ -54,17 +54,17 @@ const CreateProjectsPage = () => {
           return (
             <Form>
               <Row id="end">
-                <Button label="Criar" />
+                <Button label="Criar" icon={"pi pi-plus"} />
               </Row>
               <Padding padding="32px" />
               <div className="grid">
                 <div className="col-12 md:col-6">
-                  <label>Nome do projeto *</label>
+                  <label>Nome do plano de trabalho *</label>
                   <Padding />
                   <TextInput
                     name="name"
                     onChange={handleChange}
-                    placeholder="Nome do Projeto*"
+                    placeholder="Nome do plano de trabalho*"
                     value={values.name}
                   />
                   <Padding />
@@ -75,13 +75,13 @@ const CreateProjectsPage = () => {
                   ) : null}
                 </div>
                 <div className="col-12 md:col-6">
-                  <label>Porcentagem de aprovação do projeto *</label>
+                  <label>Porcentagem de aprovação do plano de trabalho *</label>
                   <Padding />
                   <InputNumberComponent
                     name="approval_percentage"
                     onChange={handleChange}
                     suffix="%"
-                    placeholder="Porcentagem de aprovação do projeto *"
+                    placeholder="Porcentagem de aprovação do plano de trabalho *"
                     value={values.approval_percentage}
                   />
                   <Padding />