card registration

Author: jonnypaulino

.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/

src/Components/Card/CardRegistration/index.tsx

@@ -1,9 +1,7 @@
 import { ConfirmDialog } from "primereact/confirmdialog";
 import { useContext, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import IconActive from "../../../Assets/images/activeRegistration.svg";
-import IconClasMedia from "../../../Assets/images/iconClasMedia.svg";
-import IconNotActive from "../../../Assets/images/notactiveRegistration.svg";
+import avatar from "../../../Assets/images/avatar.svg"
 import { RegistrationClassroomContext } from "../../../Context/Classroom/RegistrationsList/context";
 import { RegistrationClassroomTypes } from "../../../Context/Classroom/RegistrationsList/type";
 import { ROLE, Status } from "../../../Controller/controllerGlobal";
@@ -12,17 +10,20 @@ import Icon from "../../Icon";
 import { Container } from "./style";
 import { AplicationContext } from "../../../Context/Aplication/context";
 import { PropsAplicationContext } from "../../../Types/types";
+import color from "../../../Styles/colors";
 
 const CardRegistration = ({
   title,
   subtitle,
   idRegistration,
   status,
+  avatar_url
 }: {
   title: string;
   subtitle: string;
   idRegistration: number;
   status: string;
+  avatar_url: string
 }) => {
   const [visible, setVisible] = useState(false);
   const history = useNavigate();
@@ -42,7 +43,7 @@ const CardRegistration = ({
   return (
     <>
       <Container
-        className="card cursor-pointer"
+        className="card"
         onClick={(e) => {
           e.stopPropagation();
           if ((propsAplication.user?.role === ROLE.ADMIN ||
@@ -51,11 +52,11 @@ const CardRegistration = ({
           }
         }}
       >
-        <Row id="space-between">
-          <h3>{subtitle}</h3>
+        <Row id="end" >
           {(propsAplication.user?.role === ROLE.ADMIN ||
             propsAplication.user?.role === ROLE.COORDINATORS) && <div
               className="cursor-pointer"
+              style={{ marginBottom: "-32px" }}
               onClick={(e) => {
                 e.stopPropagation();
                 setVisible(true);
@@ -70,26 +71,24 @@ const CardRegistration = ({
             <Column id="center">
               <img
                 src={
-                  status === statuGlobal.APPROVED
-                    ? IconActive
-                    : status === statuGlobal.PENDING
-                      ? IconClasMedia
-                      : status === statuGlobal.REPROVED
-                        ? IconNotActive
-                        : ""
+                  avatar_url ?? avatar
                 }
                 alt=""
-                style={{ height: 40 }}
+                style={{ height: 72, width: 72, borderRadius: "50%" }}
               />
             </Column>
           </div>
           <Padding />
           <Column>
-            <div className={"boxDescriptionSchedule"}>
-              {"Matricula - " + title}
-            </div>
-            <Padding />
-            <div className={"boxDescriptionScheduleSubtitle"}>
+            <div style={{fontWeight: "500",
+              padding: 4, textAlign: "center", width: "96px", color: "white", borderRadius: "16px", backgroundColor: `${status === statuGlobal.APPROVED
+                ? color.green
+                : status === statuGlobal.PENDING
+                  ? color.colorCardOrange
+                  : status === statuGlobal.REPROVED
+                    ? color.red
+                    : ""}`
+            }}>
               {status === statuGlobal.APPROVED
                 ? "Aprovado"
                 : status === statuGlobal.PENDING
@@ -98,6 +97,14 @@ const CardRegistration = ({
                     ? "Reprovado"
                     : ""}
             </div>
+            <Padding />
+            <h4>{subtitle}</h4>
+            <Padding />
+
+
+            <div className={"boxDescriptionSchedule"}>
+              {"Matricula - " + title}
+            </div>
           </Column>
         </Row>
       </Container>

src/Components/Card/CardRegistration/style.tsx

@@ -2,9 +2,14 @@ import styled from "styled-components";
 import styles from "../../../Styles";
 
 export const Container = styled.div`
-  color: ${styles.colors.grayClear};
   font-size: ${styles.typography.font.extraSmall};
   justify-content: space-between;
+  cursor: pointer;
+
+  border: 1.22px solid rgba(219, 230, 255, 1);
+  background: ${styles.colors.colorCard};
+  
+  border-radius: 16px;
 
   .boxQuantity {
     display: flex;

src/Context/Classroom/Registration/type.tsx

@@ -32,6 +32,7 @@ export interface UpdateRegister
     kinship: string | undefined | null
 }
 export interface RegistrationType {
+  avatar_url: string
   id: number
   registration_fk: number
   classroom_fk: number

src/Context/Classroom/RegistrationsList/type.tsx

@@ -24,6 +24,7 @@ export interface Registration {
   id: number
   name: string
   birthday: string
+  avatar_url: string
   cpf: string
   sex: number
   color_race: number

src/Pages/Beneficiaries/BeneficiariesEdit/index.tsx

@@ -33,7 +33,7 @@ const BeneficiariesEdit = () => {
   );
 };
 
-const Avatar = styled.div`
+export const Avatar = styled.div`
   border: 1px solid ${styles.colors.colorBorderCard};
   height: 128px;
   width: 128px;

src/Pages/Classroom/ClassroomOne/RegistrationList/Registration/index.tsx

@@ -18,6 +18,9 @@ import {
 } from "../../../../../Controller/controllerGlobal";
 import { useFetchRequestClassroomOne } from "../../../../../Services/Classroom/query";
 import { Padding } from "../../../../../Styles/styles";
+import { Avatar } from "../../../../Beneficiaries/BeneficiariesEdit";
+import avatar from "../../../../../Assets/images/avatar.svg"
+
 
 const Registration = () => {
   return (
@@ -40,6 +43,8 @@ const RegistrationPage = () => {
   return (
     <ContentPage title={classroom?.name} description="Detalhes da matricula do beneficiário">
       <Padding padding="16px" />
+
+
       {props.registration ? (
         <Formik
           initialValues={props.initialValue}
@@ -74,6 +79,10 @@ const RegistrationPage = () => {
                   </div>
                 </div>{" "}
                 <Padding padding="8px" />
+                <Avatar>
+                  <img alt="" src={props.registration?.avatar_url ? props.registration?.avatar_url : avatar} />
+                </Avatar>
+                <Padding padding="16px" />
                 <h3>Dados basicos</h3>
                 <Padding />
                 <div className="grid">

src/Pages/Classroom/ClassroomOne/RegistrationList/index.tsx

@@ -39,6 +39,8 @@ const RegistrationListPage = () => {
     return props.registrations;
   };
 
+
+  console.log(props.registrations)
   return (
     <ContentPage title={classroom?.name} description="Visualização das matriculas realizadas na turma.">
       <Row id="space-between">
@@ -64,6 +66,7 @@ const RegistrationListPage = () => {
                   subtitle={item.registration.name}
                   idRegistration={item.id}
                   status={item.status}
+                  avatar_url={item.registration.avatar_url}
                 />
               </div>
             );