Hello world!
;
+ useUmami();
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/ActionButton/index.ts b/src/components/ActionButton/index.ts
new file mode 100644
index 00000000..71bdec62
--- /dev/null
+++ b/src/components/ActionButton/index.ts
@@ -0,0 +1,2 @@
+export { ActionButton as default } from "./ActionButton";
+export * from "./ActionButton";
diff --git a/src/components/BootstrapIcon/BootstrapIcon.tsx b/src/components/BootstrapIcon/BootstrapIcon.tsx
new file mode 100644
index 00000000..a854b0c7
--- /dev/null
+++ b/src/components/BootstrapIcon/BootstrapIcon.tsx
@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+
+import { makeClassName } from "@/utils/tsxUtils";
+
+export function BootstrapIcon(props : Readonly
+ {props.name}
+
+
+
+
+
+ )
+
+}
\ No newline at end of file
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
new file mode 100644
index 00000000..9b967b85
--- /dev/null
+++ b/src/components/Footer/Footer.css
@@ -0,0 +1,64 @@
+:root {
+ --Background-cirular-button: var(--primary-color);
+ --Background-Line: var(--secondary-color);
+ --Background-Scroll-button: var(--primary-color);
+ --Icon-Text-color: var(--font-color-v2);
+
+ --Color-border-button: var(--secondary-color);
+}
+
+.footer-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ margin-top: 100px;
+}
+
+.line {
+ width: 400px;
+ height: 5px;
+ background-color: var(--Background-Line);
+}
+
+.buttons-container {
+ display: flex;
+ gap: 10px;
+ margin-top: 40px;
+}
+
+.circular-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: var(--Background-cirular-button);
+ border: 2px solid var(--Color-border-button);
+ cursor: pointer;
+}
+
+.scroll-to-top-button {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: var(--Background-Scroll-button);
+ border: 2px solid var(--Color-border-button);
+ cursor: pointer;
+}
+
+.copyright{
+ color: var(--Icon-Text-color);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+ margin-top: 30px;
+}
\ No newline at end of file
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 00000000..35fc305e
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { ICON_CHEVRON_UP_BLACK, ICON_GITHUB_WHITE, ICON_INSTAGRAM_WHITE } from '@/utils/assets';
+import './Footer.css';
+
+const Footer: React.FC = () => {
+ const handleScrollToTop = () => {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default Footer;
+
+type FooterLinkProps = {
+ owner: string;
+ href: string;
+ imgSrc: string;
+ social: string;
+};
+
+function FooterLink(props: FooterLinkProps) {
+ return (
+
+
+
+
+ © Copyright Universi.me. All Rights Reserved
+
+
+
+ );
+ };
+
+const CropperComponent = ({ src, selectImage, show, willClose, options }: { src: string, selectImage: (imageBlob: Blob) => void, show: boolean, willClose: () => void, options?: ImageCropperProps }) => {
+
+ const onClose = (imageBlob: Blob) => {
+ willClose();
+ if(imageBlob) {
+ if(imageBlob.type != 'image/png') {
+ // compress image if not png
+ new Compressor(new File([imageBlob], '', {type: 'image/jpeg'}), {
+ quality: (options ?? {}).compression ?? 0.7,
+ success: (result) => selectImage(result),
+ error: () => selectImage(imageBlob)
+ });
+ } else {
+ selectImage(imageBlob);
+ }
+ }
+ };
+
+ return (
+
+
+
+
+ {options?.title ?? 'Ajustar Imagem'}
+
+
+
+ +
+
+
+ + +
+
+
+
+ Cancelar
+ Selecionar
+
+ {show && (
+
+ );
+ };
+
+ export default CropperComponent;
diff --git a/src/components/ManageContent/ManageContent.less b/src/components/ManageContent/ManageContent.less
new file mode 100644
index 00000000..f6853339
--- /dev/null
+++ b/src/components/ManageContent/ManageContent.less
@@ -0,0 +1,207 @@
+@import url(/src/layouts/colors.less);
+@import url(/src/layouts/fonts.less);
+
+#manage-content {
+ @left-padding: 2.1rem;
+
+ display: flex;
+ flex-direction: column;
+
+ background-color: white;
+ border-radius: .625rem;
+
+ width: 45rem;
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
+
+ @header-padding: 1rem;
+ @header-image-size: 3rem;
+
+ .header{
+ display: flex;
+ flex-direction: row;
+ background-color: @primary-color;
+ border-bottom: 5px solid @secondary-color;
+ color: white;
+ padding: @header-padding @left-padding;
+ gap: 1rem;
+ align-items: center;
+
+ img{
+ max-width: @header-image-size;
+ max-height: @header-image-size;
+ }
+ }
+
+ .fields {
+ max-height: calc(90vh - (@header-padding * 2) - @header-image-size);
+ overflow: auto;
+ }
+
+ .finish-button{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ i{
+ width: 1rem !important;
+ font-size: 1.2rem;
+ margin:0px ;
+ }
+ }
+
+ .title{
+ color: white;
+ }
+
+ .multiple-buttons{
+ display: flex;
+ padding: 0px 2.1rem;
+ justify-content: space-between;
+
+ .label-button{
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .image-wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .image-preview {
+ height: 5rem;
+ aspect-ratio: 1;
+
+ border-radius: 1rem;
+ border: 1px solid @secondary-color;;
+ object-fit: cover;
+
+ &.default-image {
+ padding: .5rem;
+ }
+ }
+
+ fieldset {
+ margin-top: 0;
+ }
+ }
+
+ .image-button{
+ background-color: @primary-color;
+ color: white;
+ text-align: center;
+ padding: 0.5rem 0.5rem ;
+ border-radius: 0.675rem;
+ cursor: pointer;
+ }
+
+ .category-select {
+ align-self: center;
+ border-radius: .625rem;
+ }
+ }
+
+ fieldset {
+ border: none;
+ padding: 0rem @left-padding;
+ margin-top: 1rem;
+
+
+ &:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+
+ .field-input {
+ width: 100%;
+ background-color: @card-background-color;
+ }
+
+ input{
+ padding: 1rem 0.5rem;
+ font-size: 1rem;
+ }
+
+ textarea{
+ height: 8rem;
+ padding: 0.5rem 0.5rem;
+ }
+
+ input, textarea {
+ border: none;
+ border-radius: .625rem;
+
+ resize: vertical;
+
+ &:focus {
+ outline: solid 2px @primary-color;
+ }
+ }
+
+
+ > legend {
+ display: flex;
+ flex-direction: row;
+ align-items: end;
+ justify-content: space-between;
+
+ width: 100%;
+
+ font-size: 1.25rem;
+ padding-bottom: 0.75rem;
+
+ .char-counter {
+ display: inline;
+ margin-right: .25em;
+
+ font-size: .75em;
+ }
+ }
+ }
+
+ .operation-buttons {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+ margin: 2.1rem;
+ gap: 1rem;
+
+ > button {
+ border: none;
+
+ width: 7.5rem;
+ max-height: 2rem;
+ padding: .75em 0;
+ border-radius: .625rem;
+
+ color: @font-color-v1;
+ font-size: .9rem;
+ font-weight: @font-weight-bold;
+
+ cursor: pointer;
+
+ will-change: background-color;
+
+ &.cancel-button {
+ background-color: @secondary-color;
+ }
+
+ &.submit-button {
+ &:not(:disabled) {
+ background-color: @primary-color;
+ &:hover {
+ background-color: @secondary-color;
+ }
+ }
+
+ &:disabled {
+ background-color: @font-color-v3;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/ManageContent/ManageContent.tsx b/src/components/ManageContent/ManageContent.tsx
new file mode 100644
index 00000000..9df9ba5d
--- /dev/null
+++ b/src/components/ManageContent/ManageContent.tsx
@@ -0,0 +1,140 @@
+import { useContext, useEffect, useState } from "react";
+
+import UniversimeApi from "@/services/UniversimeApi";
+import { FormInputs, UniversiForm } from "@/components/UniversiForm/UniversiForm";
+
+import { contentImageUrl } from "@/utils/apiUtils";
+import { IMG_DEFAULT_CONTENT } from "@/utils/assets";
+
+import type { Category, Folder } from "@/types/Capacity";
+import type { Group } from "@/types/Group";
+
+import "./ManageContent.less";
+import { GroupContext } from "@/pages/Group";
+import { FolderCreate_RequestDTO } from "@/services/UniversimeApi/Capacity";
+import { CompetenceType } from "@/types/Competence";
+
+export type ManageContentProps = {
+ /** A null `content` means a content is being created, while a value means
+ * an existing content is being edited.
+ */
+ content: Folder | null;
+
+ /** The default group the content should be added to */
+ group?: Group;
+
+ /** A callback to be called after the content is saved */
+ afterSave?: () => any;
+};
+
+export function ManageContent(props: Readonly
+
+ )}
+
+
+
+
+
+ );
+}
+
+function PasswordInputGroup( props: Readonly+
+
+
+ Sua senha precisa conter:
++ Tamanho mínimo de oito caracteres +
++ Letras minúsculas e maiúsculas +
++ Números ou caracteres especiais +
++ Confirme a sua nova senha +
++
+ lock
+ onChange( e.target.value ) }
+ placeholder={ placeholder }
+ required
+ />
+ setShowPassword( s => !s ) }>
+
+ { showPassword ? "visibility" : "visibility_off" }
+
+
+
+}
+
+type PasswordInputGroupProps = {
+ password: string;
+ placeholder: string;
+ inputName?: string;
+ onChange( password: string ): unknown;
+}
+
+export default NewPasswordInput;
diff --git a/src/components/ProfileImage/ProfileImage.css b/src/components/ProfileImage/ProfileImage.css
new file mode 100644
index 00000000..a5f60fd8
--- /dev/null
+++ b/src/components/ProfileImage/ProfileImage.css
@@ -0,0 +1,7 @@
+.profile-image-component {
+ border-radius: 50%;
+ background-repeat: no-repeat;
+ background-size: contain;
+ aspect-ratio: 1;
+ user-select: none;
+}
diff --git a/src/components/ProfileImage/ProfileImage.tsx b/src/components/ProfileImage/ProfileImage.tsx
new file mode 100644
index 00000000..3b8386b8
--- /dev/null
+++ b/src/components/ProfileImage/ProfileImage.tsx
@@ -0,0 +1,22 @@
+import { HTMLAttributes } from "react";
+import { IMG_DEFAULT_PROFILE } from "@/utils/assets";
+import { makeClassName } from "@/utils/tsxUtils";
+import "./ProfileImage.css"
+import Avatar from 'react-avatar'
+
+export type ProfileImageProps = HTMLAttributes
+
+
;
+}
diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.less b/src/components/ProfileInfo/ProfileBio/ProfileBio.less
new file mode 100644
index 00000000..3cd3329d
--- /dev/null
+++ b/src/components/ProfileInfo/ProfileBio/ProfileBio.less
@@ -0,0 +1,115 @@
+@import url(/src/layouts/fonts.less);
+@import url(/src/layouts/colors.less);
+
+.profile-bio-component {
+ background-color: white !important;
+ border: solid @primary-color 1px !important;
+ border-radius: var(--border-radius) !important;
+ margin-bottom: 1rem;
+ width: 100%;
+
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+ .edit-button {
+ display: flex;
+ flex-direction: row-reverse;
+
+ padding-right: .5rem;
+ padding-top: .5rem;
+ }
+
+ .edit-icon{
+ filter: drop-shadow(0px 0px 5px #000);
+ }
+
+ .image {
+ width: 7em;
+ height: 7em;
+ border: 3px solid #FFF;
+ }
+
+ .name {
+ margin: 0.44rem 0;
+ text-align: center;
+
+ font-size: 1.25rem;
+ font-weight: @font-weight-semibold;
+
+ text-decoration: none;
+ color: inherit;
+
+ word-break: break-word;
+
+ &[href] {
+ cursor: pointer;
+ will-change: text-decoration;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .intro-section {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+
+ width: 100%;
+ padding: 0 !important;
+ margin-top: -3.5em;
+ margin-bottom: 1rem;
+
+ font-size: 0.8rem;
+
+ .profile-bio{
+ padding: 0.25rem 0.5rem;
+ word-break: break-all;
+ }
+ }
+
+ .profile-header{
+ width: 100%;
+ height: 5rem;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ border-radius: var(--border-radius) var(--border-radius) 0px 0px;
+ }
+
+ .content-count{
+ border-top: solid 1px @primary-color;
+ padding: 0.7rem 0.7rem;
+
+ .links-wrapper {
+ width: fit-content;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+
+ .profile-bio-link {
+ color: @font-color-v2;
+ text-decoration: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ will-change: text-decoration;
+
+ height: 1rem;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &:not(:last-of-type) {
+ margin-bottom: .5em;
+ }
+
+ .link-type-icon {
+ margin-right: .5em;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx
new file mode 100644
index 00000000..e7263ca7
--- /dev/null
+++ b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx
@@ -0,0 +1,75 @@
+import { Link } from 'react-router-dom';
+
+import { ProfileImage } from '@/components/ProfileImage/ProfileImage';
+import { ICON_EDIT_WHITE } from '@/utils/assets';
+import { groupBannerUrl } from '@/utils/apiUtils';
+
+import { type Profile, ProfileClass } from '@/types/Profile';
+import { TypeLinkToBootstrapIcon, type Link as Link_API } from '@/types/Link';
+import type { Group } from '@/types/Group';
+import './ProfileBio.less';
+
+export type ProfileBioProps = {
+ profile: Profile;
+ organization?: Group | null;
+ links: Link_API[];
+};
+
+
+export function ProfileBio(props: ProfileBioProps) {
+ const linkToOwnProfile = `/profile/${props.profile.user.name}`;
+ const isOnOwnProfile = location.pathname.replace(/\/+$/, "") == linkToOwnProfile;
+ const renderEditButton = props.profile.user.ownerOfSession && isOnOwnProfile;
+
+ const headerBackground = props.organization
+ ? { backgroundImage: `url(${groupBannerUrl(props.organization)})` }
+ : { backgroundColor: "@primary-color" }
+
+ const profile = new ProfileClass(props.profile);
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/ProfileInfo/ProfileGroups/ProfileGroups.less b/src/components/ProfileInfo/ProfileGroups/ProfileGroups.less
new file mode 100644
index 00000000..706dea63
--- /dev/null
+++ b/src/components/ProfileInfo/ProfileGroups/ProfileGroups.less
@@ -0,0 +1,91 @@
+@import url(/src/layouts/colors.less);
+@import url(/src/layouts/border-radius.less);
+@import url(/src/layouts/fonts.less);
+
+.profile-groups-component {
+ background-color: white;
+ border: solid 1px @primary-color;
+ border-radius: @border-radius;
+ overflow: hidden;
+
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: fit-content;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+
+ .header-container{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: @primary-color;
+ max-height: 5rem;
+ justify-content: center;
+ overflow: hidden;
+ }
+
+ .group-background-image{
+ opacity: 30%;
+ max-width: 10rem;
+ max-height: 10rem;
+ align-self: flex-start;
+ margin-left: -2rem;
+ margin-top: 1rem;
+ }
+
+ .groups-name {
+ text-align: center;
+ padding: 1.15rem;
+ color: white;
+ font-weight: @font-weight-bold;
+ font-style: normal;
+ font-size: 1.25rem;
+ position: absolute;
+ }
+
+ .items-wrapper {
+ display: flex;
+ justify-content: center;
+
+ .show-items {
+ width: 100%;
+
+ .group-item {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 0.5rem .5rem;
+ gap: 0.5rem;
+
+ text-decoration: none;
+ color: @font-color-v2;
+
+ &:hover, &:focus, &:focus-visible {
+ background-color: @card-background-color;
+ outline: none;
+ }
+
+ &:not(:last-of-type) {
+ border-bottom: 1px solid gray;
+ }
+
+ img {
+ border-radius: 5px;
+ border: solid 1px @primary-color;
+ width: 4rem;
+ aspect-ratio: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ object-fit: scale-down;
+ padding: 2px;
+ }
+
+ .group-item-name {
+ overflow: hidden;
+ }
+ }
+ }
+ }
+
+}
diff --git a/src/components/ProfileInfo/ProfileGroups/ProfileGroups.tsx b/src/components/ProfileInfo/ProfileGroups/ProfileGroups.tsx
new file mode 100644
index 00000000..f6abdd37
--- /dev/null
+++ b/src/components/ProfileInfo/ProfileGroups/ProfileGroups.tsx
@@ -0,0 +1,43 @@
+import { Link } from "react-router-dom";
+
+import type { Group } from "@/types/Group";
+import { groupImageUrl } from "@/utils/apiUtils";
+
+import "./ProfileGroups.less";
+
+export type ProfileGroupsProps = {
+ groups: Group[];
+};
+
+export function ProfileGroups(props: Readonly
+ {
+ renderEditButton ?
+
+
+
+
+ 
+
+
+ : null
+ }
+
+
+
+ { props.links.length === 0 ? null :
+ { profile.fullname }
+ : { profile.fullname } + } + { + props.profile.bio === null || props.profile.bio.length === 0 + ?Nenhuma bio
+ :{ props.profile.bio }
+ } +
+
+ }
+
+
+ {
+ props.links.map((link) => {
+ return
+
+
+ })
+ }
+
+
+
;
+}
+
+type GroupIconProps = {
+ group: Group;
+};
+
+function GroupIcon(props: Readonly
+ 
+
+
+
+ Meus grupos
+
+ { groups.length <= 0
+ ?
+ Não participa de um grupo.
+ :
+ { groups.map(g =>
+ }
+ { group.name }
+ +} diff --git a/src/components/ProfileInfo/ProfileInfo.less b/src/components/ProfileInfo/ProfileInfo.less new file mode 100644 index 00000000..bcc6def7 --- /dev/null +++ b/src/components/ProfileInfo/ProfileInfo.less @@ -0,0 +1,44 @@ +@import url(/src/layouts/spacing.less); +@import url(/src/layouts/utils.less); + +.profile-info-component { + @bioWrapperWidth: 15rem; + @gapWidth: 1rem; + @contentWidth: calc(@maxScreenWidth - @bioWrapperWidth - @gapWidth); + + display: grid; + grid-template-columns: max-content auto; + column-gap: @gapWidth; + + margin-top: @top-page-margin; + margin-bottom: @top-page-margin; + + width: 100%; + + .profile-bio-groups-container{ + width: @bioWrapperWidth; + } + + .profile-info-content { + width: @contentWidth; + } + + @media @onMobile { + display: flex !important; + flex-direction: column; + + .profile-bio-groups-container{ + width: 100%; + margin-bottom: 2rem; + + .profile-bio-component{ + display: none; + } + + } + + .profile-info-content { + width: 100%; + } + } +} diff --git a/src/components/ProfileInfo/ProfileInfo.tsx b/src/components/ProfileInfo/ProfileInfo.tsx new file mode 100644 index 00000000..6a2be71c --- /dev/null +++ b/src/components/ProfileInfo/ProfileInfo.tsx @@ -0,0 +1,30 @@ +import { type PropsWithChildren, type HTMLAttributes } from "react"; +import { ProfileBio, ProfileGroups } from "@/components/ProfileInfo"; + +import { type Profile } from "@/types/Profile"; +import { type Link } from "@/types/Link"; +import { type Group } from "@/types/Group"; + +import "./ProfileInfo.less"; +import { makeClassName } from "@/utils/tsxUtils"; + +export type ProfileInfoProps = PropsWithChildren<{ + profile?: Profile; + links?: Link[]; + groups?: Group[]; + organization?: Group | null; +}> & HTMLAttributes
+
+}
diff --git a/src/components/ProfileInfo/index.ts b/src/components/ProfileInfo/index.ts
new file mode 100644
index 00000000..13c3695e
--- /dev/null
+++ b/src/components/ProfileInfo/index.ts
@@ -0,0 +1,5 @@
+export { ProfileInfo as default } from "./ProfileInfo";
+
+export * from "./ProfileInfo";
+export * from "./ProfileBio/ProfileBio";
+export * from "./ProfileGroups/ProfileGroups";
diff --git a/src/components/SignInWithGoogle/SignInWithGoogle.module.less b/src/components/SignInWithGoogle/SignInWithGoogle.module.less
new file mode 100644
index 00000000..614264c3
--- /dev/null
+++ b/src/components/SignInWithGoogle/SignInWithGoogle.module.less
@@ -0,0 +1,31 @@
+@import url(/src/layouts/colors.less);
+@import url(/src/layouts/fonts.less);
+
+.signInWithGoogle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ height: max-content;
+ width: max-content;
+
+ font-size: 1rem;
+ font-weight: @font-weight-semibold;
+ text-decoration: none;
+ color: @font-color-v2;
+
+ background-color: white;
+
+ border: 1px solid @primary-color;
+ border-radius: 10px;
+
+ margin-top: 10px;
+ padding: 0 1rem;
+ gap: 15px;
+
+ cursor: pointer;
+
+ img {
+ height: 3rem;
+ }
+}
diff --git a/src/components/SignInWithGoogle/SignInWithGoogle.tsx b/src/components/SignInWithGoogle/SignInWithGoogle.tsx
new file mode 100644
index 00000000..b816933e
--- /dev/null
+++ b/src/components/SignInWithGoogle/SignInWithGoogle.tsx
@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+
+import { oauthSignInUrl } from "@/services/oauth2-google";
+import styles from "./SignInWithGoogle.module.less";
+
+export type SignInWithGoogleProps = {
+ client_id: string;
+ text?: string;
+};
+
+export function SignInWithGoogle(props: Readonly
+ { profile ?
+
+ { children }
+
+ 
{ renderedText }
+ ;
+}
+
+export default SignInWithGoogle;
diff --git a/src/components/TextboxFormatted/TextboxFormatted.less b/src/components/TextboxFormatted/TextboxFormatted.less
new file mode 100644
index 00000000..1154bbeb
--- /dev/null
+++ b/src/components/TextboxFormatted/TextboxFormatted.less
@@ -0,0 +1,3 @@
+.ql-container {
+ font-size: inherit !important
+}
\ No newline at end of file
diff --git a/src/components/TextboxFormatted/TextboxFormatted.tsx b/src/components/TextboxFormatted/TextboxFormatted.tsx
new file mode 100644
index 00000000..2b2b38d5
--- /dev/null
+++ b/src/components/TextboxFormatted/TextboxFormatted.tsx
@@ -0,0 +1,96 @@
+import UniversimeApi from '@/services/UniversimeApi';
+import { isAbsoluteUrl } from '@/utils/regexUtils';
+import { useMemo } from 'react';
+
+import ReactQuill, { Quill } from "react-quill"
+import { ImageActions } from '@xeger/quill-image-actions';
+import { ImageFormats } from '@xeger/quill-image-formats';
+import ImageUploader from "quill-image-uploader";
+
+import 'react-quill/dist/quill.snow.css'
+import 'quill-image-uploader/dist/quill.imageUploader.min.css'
+
+import './TextboxFormatted.less'
+
+Quill.register('modules/imageUploader', ImageUploader);
+Quill.register('modules/imageActions', ImageActions);
+Quill.register('modules/imageFormats', ImageFormats);
+
+
+interface TextboxFormattedProps {
+ value: string;
+ onChange: (value: string) => void;
+ theme?: string;
+ modules?: object;
+ formats?: string[];
+ toolbar?: any;
+}
+
+const TextboxFormatted = ({ value, onChange, theme = 'snow', modules: customModules, formats: customFormats, toolbar: customtToolbar, ...props }: TextboxFormattedProps) => {
+
+ const defaultFormats = useMemo(() => ([
+ "align",
+ "background",
+ "blockquote",
+ "list",
+ "bold",
+ "code-block",
+ "color",
+ "float",
+ "font",
+ "header",
+ "height",
+ "image",
+ "imageBlot",
+ "italic",
+ "link",
+ "script",
+ "strike",
+ "size",
+ "underline",
+ "width"
+ ]), []);
+
+ const formats = customFormats || defaultFormats;
+
+ const defaultModules = useMemo(() => ({
+ imageActions: {},
+ imageFormats: {},
+ toolbar: customtToolbar || [
+ [{ header: [1, 2, 3, 4, 5, 6, false] }],
+ ["bold", "italic", "underline", "strike",],
+ [{ color: [] }, { background: [] }],
+ [{ align: [] }],
+ [{ list: "ordered" }, { list: "bullet" }],
+
+ ["clean"],
+ ["blockquote", "code-block"],
+ ["image", "link",],
+ ],
+ imageUploader: {
+ upload: (file : File) => {
+ return new Promise(async (resolve, reject) => {
+ try {
+ let res = await UniversimeApi.Image.upload({image: file})
+ if(res.success && res.body) {
+ resolve(isAbsoluteUrl(res.body.link) ? res.body.link : import.meta.env.VITE_UNIVERSIME_API + res.body.link)
+ } else {
+ reject()
+ }
+ }catch(e) {
+ reject()
+ }
+ });
+ },
+ },
+ }), []);
+
+ const modules = customModules || defaultModules;
+
+
+ return (
+ ")){ + for(let line1 of line.split("
")){ + if(line1.trim() != "" && line1.trim() != ""){ + validValue+="
"+line
+ }
+ }
+ }
+
+ return validValue
+ }
+
+ function handleContentChange(){
+ handleChange(index, object.type == FormInputs.FORMATED_TEXT ? validHtml(valueState) : valueState)
+ }
+
+ return (
+ <>
+
+ {
+ object.type == FormInputs.LONG_TEXT ?
+
+
+ ;
+
+ async function updateServiceHealth(service: ServiceId) {
+ const health = await UniversimeApi.Health.checkHealth(service);
+ updateStatus( service, health.body.status );
+ return health;
+ }
+
+ async function unreachableServiceHealth(service: ServiceId) {
+ const health: HealthResponseDTO = { up: false, disabled: false, name: service , statusMessage: "Serviço inacessível", exceptionMessage: undefined };
+ updateStatus( service, health );
+ return health;
+ }
+
+ function updateStatus(service: ServiceId, health: HealthStatus) {
+ setServicesHealth(s => {
+ const state = { ...s };
+ state[service] = health;
+
+ if(health && health!.exceptionMessage) {
+ logToBoxConsole(SERVICES_AVAILABLE[service as ServiceId].name + ": " + health.exceptionMessage);
+ }
+
+ if(Object.values(state).every(h => h !== undefined && (h.up || h.disabled))) {
+ logToBoxConsole("Todos os serviços estão operacionais.");
+ }
+
+ return state;
+ });
+ }
+
+ async function checkHealth() {
+
+ logToBoxConsole("Iniciando verificação de saúde dos serviços...");
+
+ const apiHealth = await updateServiceHealth("API");
+
+ const procedure = apiHealth.success
+ ? updateServiceHealth
+ : unreachableServiceHealth
+
+ Object.keys(SERVICES_AVAILABLE)
+ .forEach(s => {
+ const service = s as ServiceId;
+ if (service !== "API") procedure(service);
+ })
+ }
+}
+
+function logToBoxConsole(message: string) {
+ if(message !== undefined) {
+ var div = document.getElementById('errors');
+ if(div!.innerHTML.endsWith(message + "\n") === false) {
+ div!.innerHTML += message + "\n";
+ }
+ }
+}
+
+type HealthItemsProps = {
+ serviceName: string;
+ health: HealthStatus;
+};
+
+function HealthItem(props: Readonly {health.statusMessage}
+ Resumo: { job.shortDescription }
+ No mínimo oito caracteres Letras minúsculas e maiúsculas Números ou caracteres especiais Nenhuma habilidade cadastrada. {content.name} Nenhum conteúdo atribuído no momento. Nenhum conteúdo atribuído no momento. Nenhuma competência cadastrada. Nenhuma formação acadêmica cadastrada. Nenhuma experiência cadastrada. Essa ação não poderá ser desfeita e você perderá suas alterações. {recommendation.description} Nenhuma recomendação recebida.
+ Lista de competências criadas pelos usuários da plataforma e com visibilidade limitada.
+ Ficarão visíveis para todos os usuários assim que forem revisadas por um administrador.
+
+ { unreviewedCompetenceTypes.length > 0
+ ? "Nenhuma competência encontrada."
+ : "Nenhuma competência precisa ser revisada no momento."
+ }
+
+ Lista de competências já revisadas por administradores da plataforma.
+ Estão visíveis para todos os usuários.
+
+ { reviewedCompetenceTypes.length > 0
+ ? "Nenhuma competência encontrada."
+ : "Nenhuma competência revisada no momento."
+ }
+
+ ;
+}
+
+type HealthStatus = Optional{service}
+ {statusIcon}
+ {health?.statusMessage !== undefined &&
+
+ Fail
+
+
+ return
+ { !job.closed && job.author.user.ownerOfSession &&
+
+
+ function handleEdit() {
+ context?.setEditing(true);
+ }
+
+ async function handleClose() {
+ const res = await SwalUtils.fireAreYouSure({
+ title: "Deseja fechar a vaga?",
+ confirmButtonText: "Fechar vaga",
+ });
+
+ if (res.isConfirmed) {
+ await UniversimeApi.Job.close({ jobId: job!.id });
+ await context?.refresh();
+ }
+ }
+}
+
+export type JobActionsProps = {
+ job?: Job;
+};
diff --git a/src/pages/JobPage/components/JobCompetences.tsx b/src/pages/JobPage/components/JobCompetences.tsx
new file mode 100644
index 00000000..02504ac3
--- /dev/null
+++ b/src/pages/JobPage/components/JobCompetences.tsx
@@ -0,0 +1,50 @@
+import { useContext, useMemo } from "react";
+
+import BootstrapIcon from "@/components/BootstrapIcon";
+import { CompetenceType } from "@/types/Competence";
+import { Job } from "@/types/Job";
+
+import { JobContext } from "@/pages/JobPage";
+
+export function JobCompetences(props : Readonly
+ Competências necessárias:
+ { competences.map(c =>
+}
+
+export type JobCompetencesProps = {
+ job?: Job;
+};
+
+
+function RenderCompetence(props : Readonly
+
+}
+
+export type JobTextProps = {
+ job?: Job;
+};
diff --git a/src/pages/JobPage/components/JobHeader.tsx b/src/pages/JobPage/components/JobHeader.tsx
new file mode 100644
index 00000000..71b2a151
--- /dev/null
+++ b/src/pages/JobPage/components/JobHeader.tsx
@@ -0,0 +1,27 @@
+import { useContext } from "react";
+
+import BootstrapIcon from "@/components/BootstrapIcon";
+import { Job } from "@/types/Job";
+
+import { JobContext } from "@/pages/JobPage";
+
+export function JobHeader(props: ReadonlyDescrição da vaga
+
+
+ { job.closed &&
+
+}
+
+export type JobHeaderProps = {
+ job?: Job;
+};
diff --git a/src/pages/JobPage/components/index.ts b/src/pages/JobPage/components/index.ts
new file mode 100644
index 00000000..77d41ab0
--- /dev/null
+++ b/src/pages/JobPage/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./JobHeader";
+export * from "./JobCompetences";
+export * from "./JobDescription";
+export * from "./JobActions";
diff --git a/src/pages/JobPage/index.ts b/src/pages/JobPage/index.ts
new file mode 100644
index 00000000..0f2b0ca6
--- /dev/null
+++ b/src/pages/JobPage/index.ts
@@ -0,0 +1,6 @@
+export { JobPage as default } from "./JobPage";
+
+export * from "./JobPage";
+export * from "./JobContext";
+export * from "./components";
+export * from "./loader";
diff --git a/src/pages/JobPage/loader.ts b/src/pages/JobPage/loader.ts
new file mode 100644
index 00000000..0512b225
--- /dev/null
+++ b/src/pages/JobPage/loader.ts
@@ -0,0 +1,40 @@
+import { LoaderFunctionArgs } from "react-router-dom";
+import UniversimeApi from "@/services/UniversimeApi";
+import { Job } from "@/types/Job";
+
+export async function fetchJobPageData(id: string | undefined): Promise
+
+ }
+
+ { job.title }
+ Ofertante: { job.institution.name }
+
+ ;
+
+ async function submitProfileChanges(e: MouseEventEditar meu perfil
+
+
+
+
+
+
+
+
+
+
"));
+
+ navigate(`/profile/${profile.user.name}`);
+ }).catch((reason: Error) => {
+ SwalUtils.fireModal({
+ title: "Erro ao salvar seus links",
+ html: reason.message,
+ icon: "error",
+ })
+ })
+ }
+}
diff --git a/src/pages/ManageProfile/ManageProfileImage.tsx b/src/pages/ManageProfile/ManageProfileImage.tsx
new file mode 100644
index 00000000..a1b574f4
--- /dev/null
+++ b/src/pages/ManageProfile/ManageProfileImage.tsx
@@ -0,0 +1,53 @@
+import { ChangeEvent, useRef, useState } from "react"
+
+import { ProfileImage } from "@/components/ProfileImage/ProfileImage";
+import { arrayBufferToBase64 } from "@/utils/fileUtils";
+import CropperComponent from "@/components/ImageCropper/ImageCropper";
+
+export type ManageProfileImageProps = {
+ currentImage: string | null;
+ setImage(image: File | undefined): any;
+ name: string | null;
+};
+
+export function ManageProfileImage(props: ManageProfileImageProps) {
+ const [imageBuffer, setImageBuffer] = useStateSua nova senha precisa conter:
+
+
+ )
+
+
+}
\ No newline at end of file
diff --git a/src/pages/PageNotFound/PageNotFound.tsx b/src/pages/PageNotFound/PageNotFound.tsx
new file mode 100644
index 00000000..74d4fc38
--- /dev/null
+++ b/src/pages/PageNotFound/PageNotFound.tsx
@@ -0,0 +1,8 @@
+import ErrorPage from "@/components/ErrorPage";
+
+export default function PageNotFound() {
+ return
+
+ Recuperação de senha: escolha sua nova senha
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/Profile/ProfileAssignedByMe/ProfileAssignedByMe.less b/src/pages/Profile/ProfileAssignedByMe/ProfileAssignedByMe.less
new file mode 100644
index 00000000..49e005e5
--- /dev/null
+++ b/src/pages/Profile/ProfileAssignedByMe/ProfileAssignedByMe.less
@@ -0,0 +1,208 @@
+@import url(/src/layouts/colors.less);
+@import url(/src/layouts/fonts.less);
+@import url(/src/layouts/utils.less);
+
+#profile-page #profile-assigned-by-me-tab {
+ .title-filter-wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: end;
+ justify-content: space-between;
+
+ margin-bottom: 1rem;
+
+ @media @onMobile {
+ flex-direction: column;
+ align-items: start;
+ }
+
+ .tab-title {
+ font-weight: 500;
+ }
+
+ #filters {
+ display: flex;
+ flex-direction: row;
+ align-items: end;
+ gap: 0.5rem;
+
+ flex-wrap: wrap;
+
+ #completion-selector {
+ font-size: 1rem;
+ padding: 0.25em 0.5em;
+
+ background-color: #FFF;
+ border: 2px solid @primary-color;
+ border-radius: .5em;
+
+ cursor: pointer;
+ }
+ }
+ }
+
+ #assigned-by-me-wrapper {
+ .folder-profile-item {
+ background-color: #FFF;
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+ border-radius: 10px;
+ padding: 1rem;
+
+ display: flex;
+ flex-direction: row;
+
+ @gap: 1rem;
+ gap: @gap;
+
+ @folder-image-side: 4rem;
+ @folder-data-width: calc(100% - @folder-image-side - @gap * 2);
+
+ &:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+
+ .folder-image {
+ width: @folder-image-side;
+ height: @folder-image-side;
+ object-fit: cover;
+
+ border-radius: 10px;
+ }
+
+ .folder-data {
+ width: @folder-data-width;
+
+ .folder-name {
+ text-decoration: none;
+ color: inherit;
+ font-size: 1.65rem;
+ font-weight: @font-weight-semibold;
+ }
+
+ @bar-heigth: .5rem;
+ @border-radius: 2 * @bar-heigth;
+
+ .folder-bar-wrapper {
+ width: 100%;
+ text-align: center;
+
+ margin-bottom: 1rem;
+
+ .folder-progress-bar-container {
+ width: 100%;
+ height: @bar-heigth;
+ border-radius: @border-radius;
+ background-color: gray;
+ margin-bottom: 0.5em;
+
+ overflow: hidden;
+
+ .folder-progress-until-now {
+ background-color: @primary-color;
+ border-radius: @border-radius;
+ height: 100%;
+ }
+ }
+ }
+
+ .profile-watcher-wrapper {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ overflow: hidden;
+
+ &.collapsed {
+ height: 0;
+ }
+
+ .profile-watcher {
+ display: flex;
+ flex-direction: row;
+ width: 20rem;
+
+ padding: .5rem;
+ border-radius: 10px;
+ color: inherit;
+ text-decoration: none;
+
+ &:not(:last-of-type) {
+ margin-bottom: .5rem;
+ }
+
+ &:hover {
+ background-color: #EEE;
+ }
+
+ .profile-image {
+ width: 5rem;
+ aspect-ratio: 1;
+ border-radius: 50%;
+
+ margin-right: .5rem;
+ }
+
+ .progress-data {
+ display: flex;
+ flex-direction: column;
+ gap: .2rem;
+
+ width: 100%;
+
+ .profile-name {
+ margin-top: .5em;
+ }
+
+ .profile-progress {
+ width: 100%;
+
+ .progress-bar-container {
+ width: 100%;
+ height: @bar-heigth;
+ border-radius: @border-radius;
+ overflow: hidden;
+
+ background-color: gray;
+
+ .progress-until-now {
+ height: @bar-heigth;
+ border-radius: @border-radius;
+ background-color: @primary-color;
+ }
+ }
+
+ .text-progress {
+ width: 100%;
+ text-align: center;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .expand-button {
+ background-color: transparent;
+ border: none;
+ font-size: 2rem;
+
+ height: min-content;
+ will-change: rotate;
+
+ transition-duration: 250ms;
+ transition-property: rotate;
+
+ cursor: pointer;
+
+ &.collapsed {
+ transition-timing-function: ease-in;
+ }
+
+ &.expanded {
+ transition-timing-function: ease-out;
+ rotate: -180deg;
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/Profile/ProfileAssignedByMe/ProfileAssignedByMe.tsx b/src/pages/Profile/ProfileAssignedByMe/ProfileAssignedByMe.tsx
new file mode 100644
index 00000000..303bf299
--- /dev/null
+++ b/src/pages/Profile/ProfileAssignedByMe/ProfileAssignedByMe.tsx
@@ -0,0 +1,166 @@
+import { ChangeEvent, useContext, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { ProfileContext } from "@/pages/Profile";
+import { Filter } from "@/components/Filter/Filter";
+import { groupArray } from "@/utils/arrayUtils";
+import { contentImageUrl } from "@/utils/apiUtils";
+import { makeClassName } from "@/utils/tsxUtils";
+import stringUtils from "@/utils/stringUtils";
+
+import { type Folder, type FolderProfile } from "@/types/Capacity";
+import { ProfileClass } from "@/types/Profile";
+
+import "./ProfileAssignedByMe.less";
+import { ProfileImage } from "@/components/ProfileImage/ProfileImage";
+
+export function ProfileAssignedByMe() {
+ const context = useContext(ProfileContext);
+ const [filter, setFilter] = useState
+
+
+
+
+
+ Conquistas
+ {achievementsCount}
+
+
+
+ {
+ // todo: achievements from API
+ profileContext.profileListData.achievements.map((achievement) => {
+ return (
+
+ {/* todo: set achievement url */}
+
+
+ {/* todo: All achievements page */}
+ Ver todas as conquistas
+
+
+ );
+ })
+ }
+
+ ;
+
+ function changeCompletionFilter(e: ChangeEvent
+
+ {tabTitle}
+
+
+
+
+
+
+ {
+ Array.from(groupedFolders.entries()).map(([reference, assignments]) => {
+ const folder = assignments.length > 0
+ ? assignments[0].folder
+ : null;
+
+ return folder &&
+
+
+
+
+
+ function toggleExpand() {
+ setIsExpanded(exp => !exp)
+ }
+}
diff --git a/src/pages/Profile/ProfileCompetences/ProfileCompetences.css b/src/pages/Profile/ProfileCompetences/ProfileCompetences.css
new file mode 100644
index 00000000..f8cf6bde
--- /dev/null
+++ b/src/pages/Profile/ProfileCompetences/ProfileCompetences.css
@@ -0,0 +1,111 @@
+#profile-page #right-side .competences {
+ width: 100%;
+ height: fit-content;
+
+ border-radius: 20px;
+ background: var(--card-background-color);
+ overflow: hidden;
+
+ translate: 0 0;
+}
+
+#profile-page #right-side .competences .heading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ background: var(--primary-color);
+
+ color: var(--font-color-v1);
+ font-size: 1.875em;
+ font-weight: var(--font-weight-bold);
+ text-transform: uppercase;
+}
+
+#profile-page #right-side .competences .edit-button {
+ right: 1.5em;
+ color: var(--font-color-v1);
+ font-size: 1.5rem;
+}
+
+#profile-page #right-side .competences .competence-list {
+ padding: 2.25em 3em;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ padding: .75em 1em;
+
+ background: var(--font-color-v5);
+ border-radius: 20px;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item:not(:last-of-type) {
+ margin-bottom: 1.7em;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .edit-competence {
+ background: none;
+ border: none;
+ margin-right: .25rem;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .competence-type {
+ font-size: 1rem;
+ margin-right: .5em;
+ text-transform: uppercase;
+ font-weight: var(--font-weight-bold);
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .icon {
+ margin-right: 1.75em;
+
+ width: 1.875em;
+ aspect-ratio: 1;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .learning {
+ color: #000;
+ font-size: 0.875em;
+ font-weight: var(--font-weight-default);
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .level-container {
+ margin-left: auto;
+ margin-right: 2.5em;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .level-container .level-label {
+ font-size: 1rem;
+ width: 100%;
+ text-align: center;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .competence-level-list {
+ display: flex;
+ flex-direction: row;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .competence-level-list .competence-level {
+ width: 3.5em;
+ height: 0.5em;
+ border-radius: 10px;
+ background: #C1C1C1;
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .competence-level-list .competence-level.learned {
+ background: var(--secondary-color);
+}
+
+#profile-page #right-side .competences .competence-list .competence-item .competence-level-list .competence-level:not(:last-of-type) {
+ margin-right: .5em;
+}
+
+#profile-page #right-side .competences .competence-list .empty-competences {
+ font-style: italic;
+ width: 100%;
+ text-align: center;
+}
diff --git a/src/pages/Profile/ProfileCompetences/ProfileCompetences.tsx b/src/pages/Profile/ProfileCompetences/ProfileCompetences.tsx
new file mode 100644
index 00000000..4a63eb5b
--- /dev/null
+++ b/src/pages/Profile/ProfileCompetences/ProfileCompetences.tsx
@@ -0,0 +1,100 @@
+import { MouseEventHandler, MouseEvent, useContext, useMemo } from 'react';
+import { ProfileContext, ProfileContextType } from '@/pages/Profile'
+import { LevelToLabel} from '@/types/Competence';
+import { ICON_EDIT_BLACK } from '@/utils/assets';
+import './ProfileCompetences.css'
+
+export type ProfileCompetencesProps = {
+ openCompetenceSettings: MouseEventHandler;
+ updateProfileContext: (pc: ProfileContextType) => any;
+};
+
+const MAX_COMPETENCE_LEVEL = 4;
+
+export function ProfileCompetences(props: ProfileCompetencesProps) {
+ const profileContext = useContext(ProfileContext);
+ const sortedCompetences = [...(profileContext?.profileListData.competences ?? [])]
+ .sort((c1, c2) => new Date(c1.creationDate).getTime() - new Date(c2.creationDate).getTime());
+
+ if (profileContext === null)
+ return null;
+
+ return (
+
+
+
+
+ {folder.name}
+
+
+
+
+
+
+
+
+
+ {profilesComplete.length} / {fp.length} pessoas ({textFolderPercent}%) completaram o conteúdo
+
+ { filteredFp.map(w => {
+ const percentage = w.doneUntilNow / w.folderSize * 100;
+ const shownPercentage = isNaN(percentage) ? 0 : percentage;
+
+ return
+
+
+
+
+ }) }
+ {w.profile.fullname}
+
+
+
+
+
+
+ { w.doneUntilNow } / { w.folderSize } ({
+ shownPercentage.toLocaleString(undefined, { maximumFractionDigits: 2 })
+ }%)
+
+
+ Habilidades
+ {
+ profileContext.accessingLoggedUser ?
+
+ : null
+ }
+
+
+ {
+ profileContext.profileListData.competences.length > 0
+ ? sortedCompetences.map(competence => {
+ return (
+
+ );
+
+ function addCompetence(e: MouseEvent
+ {
+ !profileContext.accessingLoggedUser ? null :
+
+ }
+ {/* todo: fix competence icon */}
+
+ {competence.competenceType.name}
+ {competence.description}
+
+
+ );
+ })
+ : {LevelToLabel[competence.level]}
+
+ {
+ Array.apply(null, Array(MAX_COMPETENCE_LEVEL)).map((_, i) => {
+ // todo: current level from API
+ const learnedLevel = competence.level >= i + 1
+ ? 'learned'
+ : '';
+
+ return (
+
+
+ );
+ })
+ }
+
+
+
+
+ )
+}
diff --git a/src/pages/Profile/ProfileContext.ts b/src/pages/Profile/ProfileContext.ts
new file mode 100644
index 00000000..67331f39
--- /dev/null
+++ b/src/pages/Profile/ProfileContext.ts
@@ -0,0 +1,52 @@
+import { createContext } from "react";
+import type { ProfileClass } from "@/types/Profile";
+import type { Group } from "@/types/Group";
+import type { Competence, CompetenceProfileDTO, CompetenceType } from "@/types/Competence";
+import type { Recommendation } from "@/types/Recommendation";
+import type { Link } from "@/types/Link";
+import type { Achievements } from "@/types/Achievements";
+import type { Folder, FolderProfile } from "@/types/Capacity";
+import { Education } from "@/types/Education";
+import { Experience, TypeExperience } from "@/types/Experience";
+import { Institution } from "@/types/Institution";
+import { TypeEducation } from "@/types/TypeEducation";
+
+export type ProfileContextType = null | {
+ accessingLoggedUser: boolean;
+
+ profile: ProfileClass;
+
+ /* If these values are not null and not undefined, it means something is beign edited.
+ * If they are null, it means something is beign created.
+ * If they are undefined, it means nothing is being created nor edited.
+ */
+ editCompetence: Competence | null | undefined;
+ editEducation: Education | null | undefined;
+ editExperience: Experience | null | undefined;
+
+ allInstitution: Institution[];
+ allTypeCompetence: CompetenceType[];
+ allTypeEducation: TypeEducation[];
+ allTypeExperience: TypeExperience[];
+
+ profileListData: {
+ groups: Group[];
+ education: Education[];
+ experience: Experience[];
+ competences: CompetenceProfileDTO[];
+ links: Link[];
+ recommendationsSend: Recommendation[];
+ recommendationsReceived: Recommendation[];
+ achievements: Achievements[];
+ folders: Folder[];
+ favorites: Folder[];
+ assignedByMe: FolderProfile[];
+ };
+
+ setEditCompetence(competence: Competence | null | undefined): any;
+ setEditEducation(education: Education | null | undefined): any;
+ setEditExperience(experience: Experience | null | undefined): any;
+ reloadPage: () => Promise{tabTitle}
+
+
+ {assignedLabel}
+
+ { assignedContents.length === 0 ?
+
+
+ {favoriteLabel}
+
+ { favoriteContents.length === 0 ?
+
+
+ );
+}
diff --git a/src/pages/Profile/ProfileCurriculum/Competences/Education/CurriculumEducation.css b/src/pages/Profile/ProfileCurriculum/Competences/Education/CurriculumEducation.css
new file mode 100644
index 00000000..cf445f94
--- /dev/null
+++ b/src/pages/Profile/ProfileCurriculum/Competences/Education/CurriculumEducation.css
@@ -0,0 +1,266 @@
+#item-competence .education {
+ width: 100%;
+ height: fit-content;
+
+ border-radius: 10px;
+ background: #fff;
+ overflow: hidden;
+
+ translate: 0 0;
+ border: solid 1px;
+ border-color: #e2e2e2;
+}
+
+#item-competence .education .heading {
+ display: flex;
+ align-items: initial;
+ justify-content: space-between;
+ margin: 20px 10px 0px 18px;
+ border-radius: 20px 20px 0px 0px;
+
+ font-size: 1.2em;
+ font-weight: 600;
+ padding: 2px 0px 2px 0px;
+
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+
+.education .heading .education-left-buttons{
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+}
+
+.education .heading .education-right-buttons{
+
+ justify-content: center;
+
+}
+
+
+#item-competence .education .add-button {
+ display: flex;
+ align-items: center;
+
+ color: var(--primary-color);
+ font-size: 1rem;
+ border: solid 2px;
+ border-radius: 20px;
+ padding: 5px 10px 5px 10px;
+ background-color: transparent;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+#item-competence .education .add-button .icon-button {
+ margin-left: 5px;
+ font-size: 1.2rem;
+ color: var(--primary-color);
+}
+
+#item-competence .education .add-button:hover {
+ background-color: var(--primary-color);
+ color: #fff;
+}
+
+#item-competence .education .add-button:hover .icon-button {
+ color: #fff;
+}
+
+#item-competence .education .education-list {
+ padding: 1em 2em 1.5em;
+}
+
+#item-competence .education .education-list .education-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ padding: .75em 1em;
+
+ background: var(--card-item-color);
+ border-radius: 20px;
+
+ gap: 2rem;
+
+ flex-wrap: wrap;
+}
+
+#item-competence .education .education-list .education-item:not(:last-of-type) {
+ margin-bottom: 0.95em;
+}
+
+#item-competence .education .education-list .education-item .add-education {
+ background: none;
+ border: none;
+ margin-right: .25rem;
+}
+
+#item-competence .education .education-list .education-item .education-type {
+ font-size: 1rem;
+ margin-right: .5em;
+ text-transform: uppercase;
+ font-weight: var(--font-weight-bold);
+}
+
+.education-presentation {
+ margin-left: 0.6rem;
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ width: 25rem;
+}
+
+.education-item .direction-dateStart{
+ position: relative;
+ right: auto;
+}
+
+.education-item .direction-dateEnd{
+ position: relative;
+ right: auto;
+}
+
+.title-date {
+ font-size: 0.9rem;
+ font-weight: 600;
+}
+
+.config-button {
+ position: relative;
+}
+
+.config-button-icon {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+
+.config-menu {
+ position: absolute;
+ top: -100%;
+ right: 0;
+ background: #fff;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ display: none;
+}
+
+.config-button:hover .config-menu {
+ display: block;
+}
+
+.config-menu button {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ text-align: left;
+ border: none;
+ background: none;
+ cursor: pointer;
+}
+
+#item-competence .education .education-list .education-item .icon {
+ margin-right: 1.75em;
+
+ width: 1.875em;
+ aspect-ratio: 1;
+}
+
+#item-competence .education .education-list .education-item .learning {
+ color: #000;
+ font-size: 0.875em;
+ font-weight: var(--font-weight-default);
+}
+
+#item-competence .education .education-list .education-item .level-container {
+ margin-left: auto;
+ margin-right: 2.5em;
+}
+
+#item-competence .education .education-list .education-item .level-container .level-label {
+ font-size: 1rem;
+ width: 100%;
+ text-align: center;
+}
+
+#item-competence .education .education-list .education-item .education-level-list {
+ display: flex;
+ flex-direction: row;
+}
+
+#item-competence .education .education-list .education-item .education-level-list .education-level {
+ width: 3.5em;
+ height: 0.5em;
+ border-radius: 10px;
+ background: #C1C1C1;
+}
+
+#item-competence .education .education-list .education-item .education-level-list .education-level.learned {
+ background: var(--secondary-color);
+}
+
+#item-competence .education .education-list .education-item .education-level-list .education-level:not(:last-of-type) {
+ margin-right: .5em;
+}
+
+#item-competence .education .education-list .empty-education {
+ font-style: italic;
+ width: 100%;
+ text-align: center;
+}
+
+.empty-educations {
+ text-align: center;
+}
+
+.config-button-education {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ right: 50px;
+}
+
+.config-button-icon {
+ border: none;
+ cursor: pointer;
+}
+
+.education-item .config-button-icon + .config-button-icon {
+ margin-top: 15px;
+ margin-left: 0px;
+}
+
+#item-competence .education .edit-button {
+ display: flex;
+ align-items: center;
+ margin-left: 10px;
+ margin-top: -5px;
+
+ background-color: transparent;
+ border: solid 2px;
+ border-color: var(--primary-color);
+ border-radius: 10px;
+ padding: 5px 10px 5px 10px;
+ cursor: pointer;
+}
+
+
+#item-competence .education .edit-button .icon-edit {
+ color: var(--primary-color);
+}
+
+#item-competence .education .edit-button.active {
+ background-color: var(--primary-color);
+}
+
+#item-competence .education .edit-button .icon-edit.active {
+ color: #fff;
+}
diff --git a/src/pages/Profile/ProfileCurriculum/Competences/Education/CurriculumEducation.tsx b/src/pages/Profile/ProfileCurriculum/Competences/Education/CurriculumEducation.tsx
new file mode 100644
index 00000000..342c6fb6
--- /dev/null
+++ b/src/pages/Profile/ProfileCurriculum/Competences/Education/CurriculumEducation.tsx
@@ -0,0 +1,154 @@
+import { useContext, MouseEvent, useState } from 'react';
+import { ProfileContext } from '@/pages/Profile';
+import { ICON_DELETE_BLACK, ICON_EDIT_BLACK } from '@/utils/assets';
+import './CurriculumEducation.css'
+import UniversimeApi from '@/services/UniversimeApi';
+import * as SwalUtils from "@/utils/sweetalertUtils";
+import { dateWithoutTimezone } from '@/utils/dateUtils';
+
+export function CurriculumEducation() {
+ const profileContext = useContext(ProfileContext);
+
+ if (profileContext === null) {
+ return null;
+ }
+
+ const sortedEducation = profileContext.profileListData.education
+ ? [...profileContext.profileListData.education].sort(
+ (c1, c2) =>
+ new Date(c1.creationDate).getTime() -
+ new Date(c2.creationDate).getTime()
+ )
+ : [];
+
+ const [isEditing, setIsEditing] = useState(false);
+
+ const toggleEditing = () => {
+ setIsEditing((prevEditing) => !prevEditing);
+ };
+
+ const addEducation = (e: MouseEvent
+
+
+
+
+ Competências
+
+ { profileContext.accessingLoggedUser &&
+
+ }
+
+ {
+ profileContext.accessingLoggedUser ?
+
+ : null
+ }
+
+
+ {profileContext.profileListData.competences.length > 0
+ ? sortedCompetences.map((competence) => {
+ return (
+
+
+
+
+ );
+ })
+ :
+ { competence.hasBadge &&
+
+ {competence.competenceType.name}
+ { competence.competenceType.reviewed ||
+
+ }
+
+
+ {isEditing ? (
+ {(LevelToLabel)[competence.level]}
+
+
+
+
+
+
+
+ ) : null}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/Profile/ProfileCurriculum/Competences/Experience/CurriculumExperience.css b/src/pages/Profile/ProfileCurriculum/Competences/Experience/CurriculumExperience.css
new file mode 100644
index 00000000..a1312fb8
--- /dev/null
+++ b/src/pages/Profile/ProfileCurriculum/Competences/Experience/CurriculumExperience.css
@@ -0,0 +1,290 @@
+#item-competence .experience {
+ width: 100%;
+ height: fit-content;
+
+ border-radius: 10px;
+ background: #fff;
+ overflow: hidden;
+
+ translate: 0 0;
+ border: solid 1px;
+ border-color: #e2e2e2;
+}
+
+#item-competence .experience .heading {
+ display: flex;
+ align-items: initial;
+ justify-content: space-between;
+ margin: 20px 10px 0px 18px;
+ border-radius: 20px 20px 0px 0px;
+
+ font-size: 1.2em;
+ font-weight: 600;
+ padding: 2px 0px 2px 0px;
+
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.experience .heading .experience-left-buttons{
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+}
+
+
+#item-competence .experience .add-button {
+ display: flex;
+ align-items: center;
+
+ color: var(--primary-color);
+ font-size: 1rem;
+ border: solid 2px;
+ border-radius: 20px;
+ padding: 5px 10px 5px 10px;
+ background-color: transparent;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+#item-competence .experience .add-button .icon-button {
+ margin-left: 5px;
+ font-size: 1.2rem;
+ color: var(--primary-color);
+}
+
+
+#item-competence .experience .add-button:hover {
+ background-color: var(--primary-color);
+ color: #fff;
+}
+
+#item-competence .experience .add-button:hover .icon-button {
+ color: #fff;
+}
+
+#item-competence .experience .experience-list {
+ padding: 1em 2em 1.5em;
+}
+
+#item-competence .experience .experience-title {
+ display: flex;
+ align-items: center;
+}
+
+#item-competence .experience-image {
+ margin-left: -5px;
+ margin-right: 8px;
+}
+
+.experience-presentation {
+ margin-left: 0.6rem;
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ width: 25rem;
+}
+
+.experience-item .direction-dateStart{
+ position: relative;
+ right: auto;
+ left: auto;
+}
+
+.experience-item .direction-dateEnd{
+ position: relative;
+ right: auto;
+ left: auto;
+}
+
+.title {
+ font-size: 0.9rem;
+ font-weight: 600;
+}
+
+.experience-item .direction-description{
+ position: relative;
+ right: auto;
+ left: auto;
+}
+
+.description-text {
+ word-wrap: break-word;
+}
+
+.config-button {
+ position: relative;
+}
+
+.config-button-icon {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.experience .config-menu {
+ position: absolute;
+ top: -35%;
+ right: 0;
+ background: #fff;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ display: none;
+}
+
+.config-button:hover .config-menu {
+ display: block;
+}
+
+.config-menu button {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ text-align: left;
+ border: none;
+ background: none;
+ cursor: pointer;
+}
+
+
+#item-competence .experience .experience-list .experience-item {
+ display: flex;
+ flex-direction: row;
+ align-items: initial;
+
+ padding: .75em 1em;
+
+ background: var(--card-item-color);
+ border-radius: 20px;
+
+ flex-wrap: wrap;
+
+ gap: 2rem;
+
+}
+
+#item-competence .experience .experience-list .experience-item:not(:last-of-type) {
+ margin-bottom: 0.95em;
+}
+
+#item-competence .experience .experience-list .experience-item .edit-experience {
+ background: none;
+ border: none;
+ margin-right: .25rem;
+}
+
+#item-competence .experience .experience-list .experience-item .experience-type {
+ font-size: 1rem;
+ margin-right: .5em;
+ text-transform: uppercase;
+ font-weight: var(--font-weight-bold);
+ word-break: normal;
+}
+#item-competence .experience .experience-list .experience-item .icon {
+ margin-right: 1.75em;
+
+ width: 1.875em;
+ aspect-ratio: 1;
+}
+
+#item-competence .experience .experience-list .experience-item .learning {
+ color: #000;
+ font-size: 0.875em;
+ font-weight: var(--font-weight-default);
+}
+
+#item-competence .experience .experience-list .experience-item .level-container {
+ margin-left: auto;
+ margin-right: 2.5em;
+}
+
+#item-competence .experience .experience-list .experience-item .level-container .level-label {
+ font-size: 1rem;
+ width: 100%;
+ text-align: center;
+}
+
+#item-competence .experience .experience-list .experience-item .experience-level-list {
+ display: flex;
+ flex-direction: row;
+}
+
+#item-competence .experience .experience-list .experience-item .experience-level-list .experience-level {
+ width: 3.5em;
+ height: 0.5em;
+ border-radius: 10px;
+ background: #C1C1C1;
+}
+
+#item-competence .experience .experience-list .experience-item .experience-level-list .experience-level.learned {
+ background: var(--secondary-color);
+}
+
+#item-competence .experience .experience-list .experience-item .experience-level-list .experience-level:not(:last-of-type) {
+ margin-right: .5em;
+}
+
+#item-competence .experience .experience-list .empty-experience {
+ font-style: italic;
+ width: 100%;
+ text-align: center;
+}
+
+.empty-experiences {
+ text-align: center;
+}
+
+.config-button-experience {
+ position: fixed;
+
+ align-items: center;
+
+ display: flex;
+ flex-direction: column;
+
+ vertical-align: middle;
+
+ right: 45px;
+}
+
+.config-button-icon {
+ border: none;
+ cursor: pointer;
+}
+
+.experience-item .config-button-icon + .config-button-icon {
+ margin-top: 15px;
+ margin-left: 0px;
+}
+
+#item-competence .experience .edit-button {
+ display: flex;
+ align-items: center;
+ margin-left: 10px;
+ margin-top: -5px;
+
+ background-color: transparent;
+ border: solid 2px;
+ border-color: var(--primary-color);
+ border-radius: 10px;
+ padding: 5px 10px 5px 10px;
+ cursor: pointer;
+}
+
+#item-competence .experience .edit-button .icon-edit {
+ color: var(--primary-color);
+}
+
+#item-competence .experience .edit-button.active {
+ background-color: var(--primary-color);
+}
+
+#item-competence .experience .edit-button .icon-edit.active {
+ color: #fff;
+}
+
+.experience-local {
+ margin-left: 28px;
+}
diff --git a/src/pages/Profile/ProfileCurriculum/Competences/Experience/CurriculumExperience.tsx b/src/pages/Profile/ProfileCurriculum/Competences/Experience/CurriculumExperience.tsx
new file mode 100644
index 00000000..b902c8a5
--- /dev/null
+++ b/src/pages/Profile/ProfileCurriculum/Competences/Experience/CurriculumExperience.tsx
@@ -0,0 +1,160 @@
+import { useContext, MouseEvent, useState } from 'react';
+import { ProfileContext } from '@/pages/Profile';
+import { ICON_DELETE_BLACK, ICON_EDIT_BLACK } from '@/utils/assets';
+import './CurriculumExperience.css'
+import UniversimeApi from '@/services/UniversimeApi';
+import * as SwalUtils from "@/utils/sweetalertUtils";
+import { dateWithoutTimezone } from '@/utils/dateUtils';
+
+export function CurriculumExperience() {
+ const profileContext = useContext(ProfileContext);
+
+ if (profileContext === null) {
+ return null;
+ }
+
+ const sortedExperience = profileContext.profileListData.experience
+ ? [...profileContext.profileListData.experience].sort(
+ (c1, c2) =>
+ new Date(c1.creationDate).getTime() -
+ new Date(c2.creationDate).getTime()
+ )
+ : [];
+
+ const [isEditing, setIsEditing] = useState(false);
+
+ const toggleEditing = () => {
+ setIsEditing((prevEditing) => !prevEditing);
+ };
+
+ const addExperience = (e: MouseEvent
+
+
+
+
+ Formações Acadêmicas
+
+ { profileContext.accessingLoggedUser &&
+
+ }
+
+ {profileContext.accessingLoggedUser ? (
+
+ ) : null}
+
+
+
+ {profileContext.profileListData.education &&
+ profileContext.profileListData.education.length > 0 ? (
+ sortedEducation.map((education) => {
+ return (
+
+
+
+ );
+ })
+ ) : (
+
+
+ {education.typeEducation.name}
+ {education.institution.name}
+
+
+ Data de Inicio
+ { formatDate(education.startDate) }
+
+
+ {isEditing ? (
+ Data de Término
+
+ {
+ education.presentDate ? 'Atuando' : education.endDate !== null ? formatDate(education.endDate) : 'Data não disponível'
+ }
+
+
+
+
+
+ ) : null}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/Profile/ProfileCurriculum/ProfileCurriculum.css b/src/pages/Profile/ProfileCurriculum/ProfileCurriculum.css
new file mode 100644
index 00000000..8e52ec90
--- /dev/null
+++ b/src/pages/Profile/ProfileCurriculum/ProfileCurriculum.css
@@ -0,0 +1,18 @@
+.curriculum-panel {
+ width: 100%;
+}
+
+.curriculum-title {
+ display: flex;
+ align-items: center;
+}
+
+.curriculum-name {
+
+ font-size: 30px;
+ font-weight: 500;
+}
+
+#item-competence {
+ padding-top: 15px;
+}
\ No newline at end of file
diff --git a/src/pages/Profile/ProfileCurriculum/ProfileCurriculum.tsx b/src/pages/Profile/ProfileCurriculum/ProfileCurriculum.tsx
new file mode 100644
index 00000000..1d01ce39
--- /dev/null
+++ b/src/pages/Profile/ProfileCurriculum/ProfileCurriculum.tsx
@@ -0,0 +1,61 @@
+import { useContext, useState } from "react";
+import { ProfileContext } from "../ProfileContext";
+import { CurriculumAbility } from "./Competences/Ability/CurriculumAbility";
+import { CurriculumEducation } from "./Competences/Education/CurriculumEducation";
+import { UniversiModal } from "@/components/UniversiModal";
+import { CompetencesSettings } from "../CompetencesSettings/CompetencesSettings";
+import { ProfileDiscardChanges } from "../ProfileDiscard/ProfileDiscard";
+import { CurriculumExperience } from "./Competences/Experience/CurriculumExperience";
+import "./ProfileCurriculum.css";
+import { EducationSettings } from "../EducationSettings/EducationSettings";
+import { ExperienceSettings } from "../ExperienceSettings/ExperienceSettings";
+
+
+export function ProfileCurriculum() {
+ const profileContext = useContext(ProfileContext);
+
+ if (!profileContext)
+ return null;
+
+ const showCompetencesSettings = profileContext.editCompetence !== undefined;
+ const showEducationSettings = profileContext.editEducation !== undefined;
+ const showExperienceSettings = profileContext.editExperience !== undefined;
+
+ return (
+ <>
+
+
+
+
+
+ Experiências
+
+ { profileContext.accessingLoggedUser &&
+
+ }
+
+ {profileContext.accessingLoggedUser ? (
+
+ ) : null}
+
+
+ {profileContext.profileListData.experience &&
+ profileContext.profileListData.experience.length > 0 ? (
+ sortedExperience.map((experience) => {
+ return (
+
+
+
+ );
+ })
+ ) : (
+
+
+
+
+ 
+ {experience.typeExperience.name}
+ {experience.institution.name}
+
+
+ Data de Inicio
+ { formatDate(experience.startDate)}
+
+
+ Data de Término
+
+ {
+ experience.presentDate ? 'Atuando' : experience.endDate !== null ? formatDate(experience.endDate) : 'Data não disponível'
+ }
+
+
+
+ {isEditing ? (
+ Descrição
+ {experience.description}
+
+
+
+
+ ) : null}
+
+
+
+ {
+ showCompetencesSettings &&
+
+
+
+ Informações Profissionais
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Profile/ProfileGroupListing/ProfileGroupListing.css b/src/pages/Profile/ProfileGroupListing/ProfileGroupListing.css
new file mode 100644
index 00000000..a7f2b419
--- /dev/null
+++ b/src/pages/Profile/ProfileGroupListing/ProfileGroupListing.css
@@ -0,0 +1,19 @@
+.groups-listing-container{
+ margin-top: 2%;
+ display: flex;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+.group-item-listing img{
+ width: 150px;
+ aspect-ratio: 1;
+ object-fit: scale-down;
+ display: flex;
+ border: 1px solid var(--primary-color);
+ border-radius: 10px;
+}
+
+.group-name{
+ font-weight: 500;
+}
\ No newline at end of file
diff --git a/src/pages/Profile/ProfileGroupListing/ProfileGroupListing.tsx b/src/pages/Profile/ProfileGroupListing/ProfileGroupListing.tsx
new file mode 100644
index 00000000..0685e0de
--- /dev/null
+++ b/src/pages/Profile/ProfileGroupListing/ProfileGroupListing.tsx
@@ -0,0 +1,46 @@
+import { useContext } from "react";
+import { ProfileContext } from "../ProfileContext";
+import { groupImageUrl } from "@/utils/apiUtils";
+import { Link } from "react-router-dom";
+import "./ProfileGroupListing.css"
+
+export function ProfileGroupListing(){
+ const profileContext = useContext(ProfileContext)
+
+ if(profileContext == null)
+ return null
+
+ const isOwnProfile = !!profileContext?.accessingLoggedUser;
+ const hasOtherProfile = !!profileContext?.profile.firstname;
+
+ const otherProfileText = hasOtherProfile
+ ? `Grupos de ${profileContext.profile.firstname}`
+ : "Grupos";
+
+ const tabTitle = isOwnProfile
+ ? `Meus Grupos`
+ : otherProfileText;
+
+ return(
+ <>
+ Tem certeza que deseja cancelar suas alterações?
+
+
+
+
+ {tabTitle}
+
+ {
+ profileContext.profileListData.groups.length <= 0
+ ?
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.css b/src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.css
new file mode 100644
index 00000000..ed257a12
--- /dev/null
+++ b/src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.css
@@ -0,0 +1,108 @@
+#profile-page #right-side .last-recommendations {
+ margin-top: 1.5em;
+}
+
+#profile-page #right-side .heading {
+ margin-right: auto;
+ margin-bottom: .5em;
+
+ color: var(--secondary-color);
+ font-size: 1.25em;
+ font-weight: var(--font-weight-bold);
+ text-transform: uppercase;
+}
+
+#profile-page #right-side .list .recommendation {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ padding: 2.8em;
+ padding-left: 2em;
+ padding-right: 3.8em;
+
+ border-radius: 20px;
+ background-color: var(--card-background-color);
+}
+
+#profile-page #right-side .list .recommendation:not(:last-of-type) {
+ margin-bottom: 1em;
+}
+
+#profile-page #right-side .list .recommendation .image {
+ margin-right: 1em;
+ width: 4.5em;
+}
+
+#profile-page #right-side .list .recommendation .user-name {
+ color: var(--font-color-v2);
+ font-size: 1.25em;
+ font-weight: var(--font-weight-bold);
+ text-transform: uppercase;
+ text-decoration: none;
+}
+
+#profile-page #right-side .list .recommendation .recommended-by {
+ font-size: 1.125em;
+ color: var(--font-color-v2);
+ font-weight: var(--font-weight-default);
+ width: max-content;
+}
+
+#profile-page #right-side .list .recommendation .competence-name {
+ color: var(--font-color-v2);
+ font-size: 1.125em;
+ font-weight: var(--font-weight-semibold);
+}
+
+#profile-page #right-side .list .recommendation .quote-box {
+ margin-left: auto;
+ max-width: 40%;
+ min-width: min-content;
+}
+
+#profile-page #right-side .list .recommendation .quote {
+ color: var(--font-color-v2);
+ font-size: .875em;
+ font-weight: var(--font-weight-default);
+}
+
+#profile-page #right-side .list .recommendation .icon {
+ display: flex;
+ margin-left: auto;
+
+ height: 1.8em;
+ translate: 0 -1em;
+}
+
+#profile-page #right-side .empty-recommendations {
+ font-style: italic;
+ width: 100%;
+ text-align: center;
+}
+
+#profile-page #right-side .show-more {
+ display: flex;
+
+ margin-left: auto;
+ margin-top: 1.75em;
+
+ background: none;
+ padding: .5em 11.5em;
+ border-radius: 10px;
+ border: 2px solid var(--primary-color);
+
+ color: var(--primary-color);
+ font-size: 0.875em;
+ font-weight: var(--font-weight-semibold);
+ text-transform: uppercase;
+
+ cursor: pointer;
+
+ transition: var(--hover-transition-duration) background-color, color;
+}
+
+#profile-page #right-side .show-more:hover {
+ background: var(--primary-color);
+ color: var(--font-color-v1);
+}
diff --git a/src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.tsx b/src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.tsx
new file mode 100644
index 00000000..f51e4fa4
--- /dev/null
+++ b/src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.tsx
@@ -0,0 +1,53 @@
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { ProfileContext } from '@/pages/Profile';
+import { ProfileImage } from '@/components/ProfileImage/ProfileImage';
+import './ProfileLastRecommendations.css'
+import { ProfileClass } from '@/types/Profile';
+
+const MAX_RECOMMENDATIONS_QUANTITY = 3;
+
+export function ProfileLastRecommendations() {
+ const profileContext = useContext(ProfileContext);
+ if (profileContext === null)
+ return null;
+
+ const recommendationsReceived = profileContext.profileListData.recommendationsReceived.map(r => ({ ...r, origin: new ProfileClass(r.origin), destiny: new ProfileClass(r.destiny) }));
+
+ return (
+ Não participa de um grupo.
+ : <>
+ {
+ profileContext.profileListData.groups.map((group) => {
+ return group === undefined ? null : (
+
+
+
+ );
+ })
+ }
+
+ }
+
+
+ );
+}
diff --git a/src/pages/Profile/ProfilePage.less b/src/pages/Profile/ProfilePage.less
new file mode 100644
index 00000000..830c11f6
--- /dev/null
+++ b/src/pages/Profile/ProfilePage.less
@@ -0,0 +1,23 @@
+@import url(/src/layouts/spacing.less);
+@import url(/src/layouts/utils.less);
+
+#profile-page {
+ display: flex;
+ flex-direction: column;
+ height: fit-content;
+
+ @user-header-bar-height: 12rem;
+
+ #user-header-bar {
+ width: 100%;
+ height: @user-header-bar-height;
+ translate: 0 0;
+ }
+
+ .content {
+ margin-top: @top-page-margin;
+
+ display: grid;
+ grid-template-columns: 15rem auto;
+ }
+}
diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
new file mode 100644
index 00000000..7cbc9e0f
--- /dev/null
+++ b/src/pages/Profile/ProfilePage.tsx
@@ -0,0 +1,83 @@
+import { Navigate, useLoaderData, useNavigate } from "react-router-dom";
+import { useContext, useState, useEffect } from "react";
+
+import {
+ ProfileRecommendSettingsButton, ProfileContext,
+ type ProfileContextType, type ProfilePageLoaderResponse, fetchProfilePageData
+} from '@/pages/Profile';
+import { ProfileInfo } from "@/components/ProfileInfo/ProfileInfo";
+import * as SwalUtils from "@/utils/sweetalertUtils";
+import { AuthContext } from "@/contexts/Auth";
+import { SelectionBar } from "./SelectionBar/SelectionBar";
+
+import { ProfileClass } from "@/types/Profile";
+import './ProfilePage.less';
+
+export function ProfilePage() {
+ const auth = useContext(AuthContext);
+ const navigate = useNavigate();
+ const loaderData = useLoaderData() as ProfilePageLoaderResponse;
+
+ const [profileContext, setProfileContext] = useStateÚltimas Recomendações
+ { recommendationsReceived.length > 0 ?
+
+ {
+ recommendationsReceived.map((recommendation, i) => {
+ if (i >= MAX_RECOMMENDATIONS_QUANTITY)
+ return null;
+
+ const originUrl = `/profile/${recommendation.origin.user.name}`;
+ return (
+
+ :
+
+
+ );
+ })
+ }
+
+
+ {recommendation.origin.fullname}
+
+
+ Recomendou pela competência:
+ {recommendation.competenceType.name}
+
+
+ 
+
+
+ 
+ : "Recomendar";
+
+ const buttonHeight = profileContext.accessingLoggedUser
+ ? '3.75em'
+ : '2.5em';
+
+ // todo: remove this once the configure button does something
+ return ;
+
+ return (
+
+ );
+}
diff --git a/src/pages/Profile/ProfileSettings/ProfileSettings.css b/src/pages/Profile/ProfileSettings/ProfileSettings.css
new file mode 100644
index 00000000..32f78161
--- /dev/null
+++ b/src/pages/Profile/ProfileSettings/ProfileSettings.css
@@ -0,0 +1,219 @@
+#profile-settings {
+ overflow: hidden;
+
+ background-color: var(--card-background-color);
+ border-radius: 20px;
+}
+
+#profile-settings .heading {
+ padding: .7em 0;
+ background-color: var(--primary-color);
+
+ color: #FFF;
+ font-size: 1.875em;
+ font-weight: var(--font-weight-bold);
+ text-align: center;
+ text-transform: uppercase;
+}
+
+#profile-settings .settings-form {
+ padding-left: 4.5em;
+ padding-right: 4.5em;
+ padding-top: 1.75em;
+ padding-bottom: 2em;
+
+ max-height: 80vh;
+ overflow: auto;
+}
+
+#profile-settings .settings-form .section {
+ margin-bottom: 1em;
+}
+
+#profile-settings .settings-form .section h2 {
+ color: var(--font-color-v2);
+ font-size: 1.25em;
+ font-weight: var(--font-weight-light);
+ text-transform: uppercase;
+}
+
+#profile-settings .settings-form .section input,
+#profile-settings .settings-form .section textarea,
+#profile-settings .settings-form .section .dropdown-trigger,
+#profile-settings .settings-form .section .dropdown-content .radio-group-item {
+ width: 100%;
+
+ background-color: #FFF;
+ border-radius: 10px;
+ border: none;
+ font-size: 0.9em;
+}
+
+#profile-settings .settings-form .section input {
+ padding: .5em 1.5em;
+}
+
+#profile-settings .settings-form .section textarea {
+ height: 5.5em;
+ padding: 1em 1.5em;
+ resize: none;
+}
+
+#profile-settings .settings-form .section ::placeholder {
+ color: var(--font-color-disabled);
+}
+
+#profile-settings .settings-form .section input,
+#profile-settings .settings-form .section textarea,
+#profile-settings .settings-form .section ::placeholder {
+ font-size: 0.9em;
+ font-weight: var(--font-weight-light);
+}
+
+#profile-settings .settings-form .biography.section .remaining {
+ position: relative;
+ margin-left: auto;
+ margin-right: 1em;
+ top: -1.5em;
+
+ display: flex;
+ flex-direction: row;
+
+ width: fit-content;
+ height: 0;
+
+ color: var(--font-color-disabled);
+ font-size: 0.9em;
+ font-weight: var(--font-weight-light);
+}
+
+#profile-settings .settings-form .biography.section .remaining .number {
+ margin-right: .25em;
+}
+
+#profile-settings .settings-form .section .dropdown-trigger {
+ appearance: none;
+ background-image: url(/assets/icons/chevron-down-1.svg);
+ background-repeat: no-repeat;
+ background-position-x: calc(100% - .3em);
+ background-position-y: 50%;
+
+ padding-top: .5em;
+ padding-bottom: .5em;
+ padding-left: 1.5em;
+
+ font-size: .9em;
+ font-weight: var(--font-weight-light);
+}
+
+#profile-settings .settings-form .section .dropdown-trigger option:disabled {
+ color: var(--font-color-disabled);
+}
+
+#profile-settings .settings-form .section .dropdown-trigger option {
+ color: black
+}
+
+#profile-settings .settings-form .social.section .heading-wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+
+#profile-settings .settings-form .social.section .heading-wrapper .add-link {
+ background: none;
+ border: none;
+ font-size: 1.25em;
+}
+
+#profile-settings .settings-form .social.section .box .item .name-type-wrapper,
+#profile-settings .settings-form .social.section .box .item .url-remove-wrapper {
+ display: flex;
+ flex-direction: row;
+}
+
+#profile-settings .settings-form .social.section .box .item .name-type-wrapper {
+ margin-bottom: .25rem;
+}
+
+#profile-settings .settings-form .social.section .box .item [name="link-type"] {
+ width: 50%;
+}
+
+#profile-settings .settings-form .social.section .box .item .icon {
+ height: 2.5rem;
+ aspect-ratio: 1;
+ background-color: #FFF;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#profile-settings .settings-form .social.section .box .item input {
+ border-radius: 4px;
+ margin-left: 1em;
+}
+
+#profile-settings .settings-form .social.section .box .item .remove-link {
+ font-size: 1.5em;
+ color: red;
+ background: none;
+ border: none;
+ margin-left: .5rem;
+}
+
+#profile-settings .settings-form .social.section .box .item:not(:last-of-type) {
+ margin-bottom: .5rem;
+ padding-bottom: .5rem;
+ border-bottom: 2px solid #ABABAB;
+}
+
+#profile-settings .settings-form .submit {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+}
+
+#profile-settings .settings-form .submit button {
+ min-width: 17.5em;
+ max-width: max-content;
+ height: 2.5em;
+
+ border: 2px solid var(--primary-color);
+ border-radius: 0.625em;
+
+ font-size: 0.875em;
+ font-weight: var(--font-weight-semibold);
+ text-transform: uppercase;
+
+ cursor: pointer;
+ transition: var(--hover-transition-duration) background-color, border-color, color;
+}
+
+#profile-settings .settings-form .submit button:not(:last-of-type) {
+ margin-right: 3em;
+}
+
+#profile-settings .settings-form .submit .submit-button {
+ color: var(--font-color-v1);
+ background-color: var(--primary-color);
+}
+
+#profile-settings .settings-form .submit .submit-button:hover {
+ background-color: var(--button-hover-color);
+ border-color: var(--button-hover-color);
+}
+
+#profile-settings .settings-form .submit .cancel-button {
+ color: var(--secondary-color);
+ border-color: var(--secondary-color);
+ background-color: transparent;
+}
+
+#profile-settings .settings-form .submit .cancel-button:hover {
+ color: var(--font-color-v1);
+ border-color: var(--button-hover-color);
+ background-color: var(--button-hover-color);
+}
diff --git a/src/pages/Profile/ProfileSettings/ProfileSettings.tsx b/src/pages/Profile/ProfileSettings/ProfileSettings.tsx
new file mode 100644
index 00000000..6a5a577a
--- /dev/null
+++ b/src/pages/Profile/ProfileSettings/ProfileSettings.tsx
@@ -0,0 +1,290 @@
+import { ChangeEvent, MouseEvent, useContext, useMemo, useState } from 'react';
+import { ProfileContext } from '@/pages/Profile';
+import { Link, TypeLink, TypeLinkToBootstrapIcon, TypeLinkToLabel } from '@/types/Link';
+import { GENDER_OPTIONS, ProfileClass } from "@/types/Profile";
+import { UniversimeApi } from '@/services/UniversimeApi';
+import './ProfileSettings.css'
+
+export type ProfileSettingsProps = {
+ cancelChanges: () => any;
+ toggleModal: (show: boolean) => any;
+};
+
+const BIO_MAX_LENGTH = 140;
+let NEW_LINK_ID = -1;
+
+export function ProfileSettings(props: ProfileSettingsProps) {
+ const profileContext = useContext(ProfileContext);
+ const [profileLinks, setProfileLinks] = useState
+
+ );
+
+ function onChangeBio(e: ChangeEventEditar meu perfil
+
+
+
+ {
+ renderedTabs.map((tab) => {
+ return
+ }
+ {renderTab(currentTab)}
+
+ )
+}
+
+export type AvailableTabs = "groups" | "contents" | "curriculum" | "assigned-by-me";
+
+type TabDefinition = {
+ name: string;
+ value: AvailableTabs;
+ visibleIf?(c: NonNullable setCurrentTab(tab.value)}>{tab.name}
+ })
+ }
+
+
+
+ )
+
+}
\ No newline at end of file
diff --git a/src/pages/Settings/CompetencesPage/CompetenceTypeEditor.tsx b/src/pages/Settings/CompetencesPage/CompetenceTypeEditor.tsx
new file mode 100644
index 00000000..48bb8b21
--- /dev/null
+++ b/src/pages/Settings/CompetencesPage/CompetenceTypeEditor.tsx
@@ -0,0 +1,132 @@
+import { type MouseEvent, useEffect, useState } from "react";
+
+import UniversimeApi from "@/services/UniversimeApi";
+import * as SwalUtils from "@/utils/sweetalertUtils";
+import { makeClassName, setStateAsValue } from "@/utils/tsxUtils";
+
+import { type CompetenceType } from "@/types/Competence";
+
+export type CompetenceTypeEditorProps = {
+ /** CompetenceType being edited */
+ ct: CompetenceType;
+
+ /** Function to update current CompetenceTypes available */
+ refreshCompetenceTypes: () => any;
+
+ /** Function to be called when the merge button is pressed.
+ * If undefined this competence type cannot be merged
+ */
+ setMergedCompetence?: (competence: CompetenceType) => any;
+};
+
+export function CompetenceTypeEditor(props: Readonly
+
+ Recuperação de senha
+
+
+
+
+
+ {
+ !ENABLE_RECAPTCHA ? null :
+
+ mail
+
+ setUsername(e.target.value)}
+ placeholder="Insira seu usuario ou e-mail"
+ required
+ />
+
+
+
+ { renderNameChange ||
+
+ }
+
+
+
+ async function reviewCompetence() {
+ const response = await SwalUtils.fireModal({
+ title: `Deseja aprovar a competência "${ct.name}"?`,
+ text: "Essa competência se tornará visível para todos os usuários do Universi.me.",
+
+ showConfirmButton: true,
+ confirmButtonText: "Aprovar competência",
+ showCancelButton: true,
+ cancelButtonText: "Cancelar ação"
+ });
+
+ if (!response.isConfirmed)
+ return;
+
+ await UniversimeApi.CompetenceType.update({ id: ct.id, reviewed: true });
+ await refreshCompetenceTypes();
+ }
+
+ async function saveNameChange(e: MouseEvent
+ { renderNameChange
+ ?
+ :
+
+
+ }
+
+
+ { ct.name }
+
+ { props.setMergedCompetence &&
+
+ }
+
+
+
+
+ ;
+
+ async function refreshCompetenceTypes() {
+ const competenceTypes = await UniversimeApi.CompetenceType.list();
+ setCompetenceTypes(competenceTypes.body?.list ?? []);
+ }
+
+ type MergeCompetencesProps = {
+ remainingCompetenceTypeId: string;
+ }
+ async function mergeCompetences(props: MergeCompetencesProps) {
+ if (mergeCompetence === undefined)
+ return;
+
+ const { remainingCompetenceTypeId } = props;
+
+ await UniversimeApi.Admin.mergeCompetenceType({
+ remainingCompetenceTypeId,
+ removedCompetenceTypeId: mergeCompetence.id
+ });
+ }
+}
diff --git a/src/pages/Settings/CompetencesPage/index.ts b/src/pages/Settings/CompetencesPage/index.ts
new file mode 100644
index 00000000..b6ad3132
--- /dev/null
+++ b/src/pages/Settings/CompetencesPage/index.ts
@@ -0,0 +1,3 @@
+export * from "./CompetencesSettingsLoader";
+export * from "./CompetencesSettingsPage";
+export * from "./CompetenceTypeEditor";
diff --git a/src/pages/Settings/EnvironmentsPage/EnvironmentsLoader.ts b/src/pages/Settings/EnvironmentsPage/EnvironmentsLoader.ts
new file mode 100644
index 00000000..1c2ecb6e
--- /dev/null
+++ b/src/pages/Settings/EnvironmentsPage/EnvironmentsLoader.ts
@@ -0,0 +1,15 @@
+import { type LoaderFunctionArgs } from "react-router-dom";
+import UniversimeApi from "@/services/UniversimeApi";
+
+export type EnvironmentsLoaderResponse = {
+ envDic: {} | undefined;
+};
+
+export async function EnvironmentsFetch(): Promise
+
+
+ Competências para revisar
+
+ { unreviewedFilteredCompetences.length > 0
+ ? unreviewedFilteredCompetences.map(ct =>
+
+
+ Competências já revisadas
+
+ { reviewedFilteredCompetences.length > 0
+ ? reviewedFilteredCompetences.map(ct =>
+
Acesse: {{ contentUrl }}",
+ description: "groupName: Nome do Grupo.\ncontentName: Nome do Conteúdo.\ncontentUrl: Link do Conteúdo.",
+ },
+ {
+ name: "Notificar Conteúdo Atribuído",
+ key: "message_assigned_content_enabled",
+ type: "boolean",
+ defaultValue: true,
+ },
+ {
+ name: "Template de Email para Conteúdo Atribuído",
+ key: "message_template_assigned_content",
+ type: "textbox-html",
+ defaultValue: "Olá {{ toUser }}, você recebeu um novo conteúdo de {{ fromUser }}: {{ contentName }}.
Acesse: {{ contentUrl }}",
+ description: "contentName: Nome do Conteúdo.\ncontentUrl: Link do Conteúdo.\nfromUser: Nome do autor da atribuição.\ntoUser: Nome do usuário que foi alvo da atribuição.",
+ },
+ ]
+ },
+ {
+ title: "Login via Google",
+ items: [
+ {
+ name: "Habilitar",
+ key: "login_google_enabled",
+ type: "boolean",
+ defaultValue: false,
+ },
+ {
+ name: "Client ID",
+ key: "google_client_id",
+ type: "string",
+ defaultValue: "",
+ },
+ ]
+ },
+ {
+ title: "Login via Keycloak - OIDC",
+ items: [
+ {
+ name: "Habilitar",
+ key: "keycloak_enabled",
+ type: "boolean",
+ defaultValue: false,
+ },
+ {
+ name: "Auth URL",
+ key: "keycloak_url",
+ type: "string",
+ defaultValue: "",
+ },
+ {
+ name: "Redirect URL",
+ key: "keycloak_redirect_url",
+ type: "string",
+ defaultValue: window.location.origin + "/keycloak-oauth-redirect",
+ },
+ {
+ name: "Realm",
+ key: "keycloak_realm",
+ type: "string",
+ defaultValue: "",
+ },
+ {
+ name: "Client ID",
+ key: "keycloak_client_id",
+ type: "string",
+ defaultValue: "",
+ },
+ {
+ name: "Client Secret",
+ key: "keycloak_client_secret",
+ type: "string",
+ secure: true,
+ defaultValue: "",
+ },
+ ]
+ },
+ {
+ title: "reCAPTCHA Enterprise",
+ items: [
+ {
+ name: "Habilitar",
+ key: "recaptcha_enabled",
+ type: "boolean",
+ defaultValue: false,
+ },
+ {
+ name: "Api Key",
+ key: "recaptcha_api_key",
+ type: "string",
+ defaultValue: "",
+ },
+ {
+ name: "Api Project Id",
+ key: "recaptcha_api_project_id",
+ type: "string",
+ defaultValue: "",
+ },
+ {
+ name: "Site Key",
+ key: "recaptcha_site_key",
+ type: "string",
+ defaultValue: "",
+ },
+ ]
+ },
+ ]);
+
+ }, [data]);
+
+ return
+
+ {section.title}
+ {section.items.map((item : any) => (
+
+
+
+
+
+ { item.type === "textbox" ? (
+ {item.name}
+
+ { item.type === "boolean" ? (
+
+
+
+ ) : null}
+ { item.type === "string" ? (
+
+ {getValue(item) ? "Ativado" : "Desativado"}
+
+
+ setTextValue(item, e)} />
+
+ ) : null}
+
+
+
+