@burh/nuxt-core 1.0.500 → 1.0.502

package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSide.vue

@@ -1,1211 +1,1266 @@
-<template>
-	<div class="bg-white content-right tabs">
-		<el-tabs
-			:class="activeTab"
-			class="mt-3 handle-icon-color"
-			v-model="activeTab"
-		>
-			<el-tab-pane v-if="companyHasAutomation && hasAutomation" name="melissa" class="mx-2">
-				<span class="tab__icon-pane" slot="label">
-					<img
-						class="img__icon-pane"
-						src="/img/recruitment/melissa.svg"
-					/>
-				</span>
-				<p class="notes-title mb-0 notes-melissa-title">
-					{{automation.aproved ?
-						'Candidato aprovado pela Melissa' :
-						'Candidato reprovado pela Melissa'}}
-				</p>
-				<div class="line mb-3"></div>
-				<template>
-					<template>
-						<div v-if="automation && automation.vehicle_license && automation.vehicle_license.vehicle_license !== null">
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>
-										Você tem uma carteira de motorista válida?
-									</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ Boolean(automation.vehicle_license.vehicle_license) ? "Sim" : "Não" }}
-										<span v-if="automation.vehicle_license.vehicle_license_approved">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-						<div v-if="automation && automation.city && automation.city.city !== null">
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>
-										Você pode se locomover até onde esta vaga está localizada?
-									</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ Boolean(automation.city.city) ? "Sim" : "Não" }}
-										<span v-if="automation.city.city_approved">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-						<div v-if="automation && automation.urgent_hiring && automation.urgent_hiring.urgent_hiring !== null">
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>
-										Precisamos preencher esta posição com urgência. Você poderia começar imediatamente?
-									</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ Boolean(automation.urgent_hiring.urgent_hiring) ? "Sim" : "Não" }}
-										<span v-if="automation.urgent_hiring.urgent_hiring_approved">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-						<div v-if="automation && automation.school_formation && automation.school_formation.school_formation !== null && automation.school_formation.option !== null">
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>
-										Você completou o curso: <b>{{automation.school_formation.option}}</b>?
-									</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ Boolean(automation.school_formation.school_formation) ? "Sim" : "Não" }}
-
-										<span v-if="automation.school_formation.school_formation_approved">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-						<div v-if="automation && automation.tool_experience && automation.tool_experience.tool_experience !== null && automation.tool_experience.option !== null">
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>
-										Quantos anos de experiência você tem utilizando <b>{{automation.tool_experience.option}}</b>?
-									</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ automation.tool_experience.tool_experience }}
-										<span v-if="automation.tool_experience.tool_experience_approved">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-						<div v-if="automation && automation.work_experience && automation.work_experience.work_experience !== null && automation.work_experience.option !== null">
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>
-										Quantos anos de experiência você tem na função de <b>{{automation.work_experience.option}}</b>?
-									</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ automation.work_experience.work_experience }}
-										<span v-if="automation.work_experience.work_experience_approved">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-						<div v-if="automation && automation.sector_experience && automation.sector_experience.sector_experience !== null && automation.sector_experience.option !== null">
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>
-										Quantos anos de experiência você tem no setor de <b>{{automation.sector_experience.option}}</b>?
-									</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ automation.sector_experience.sector_experience }}
-										<span v-if="automation.sector_experience.sector_experience_approved">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-						<div v-if="automation && automation.language && automation.language.language !== null && automation.language.option !== null">
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>
-										Qual seu nível de proficiência em <b>{{automation.language.option}}</b>?
-									</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ automation.language.language }}
-										<span v-if="automation.language.language_approved">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-						<div
-							v-for="(melissa,index) in automation.custom"
-							:key="index"
-						>
-							<div class="notes-baloon-melissa mt-2">
-								<div class="question-melissa-title">
-									<span>{{ melissa.question }}</span>
-								</div>
-								<div class="notes-text-melissa pt-2">
-									<span class="mt-2">
-										{{ typeof melissa.response === "boolean" ? melissa.response ? "Sim" : "Não" : melissa.response }}
-										<span v-if="melissa.approved_in_question">
-											&#x2705;
-										</span>
-										<span v-else>
-											&#x274C;
-										</span>
-									</span>
-								</div>
-							</div>
-						</div>
-					</template>
-				</template>
-			</el-tab-pane>
-			<el-tab-pane class="history ml-2" name="history">
-				<span class="tab__icon-pane" slot="label">
-					<img
-						class="img__icon-pane img__icon--history"
-						src="../../../../assets/images/icons/historicCv.svg"
-					/>
-				</span>
-				<upgrade-plan @send-contact="sendContact" v-if="isLocked" />
-
-				<p class="notes-title mb-0">Histórico com sua empresa</p>
-				<div class="line mb-3"></div>
-
-				<template v-if="!isLocked">
-					<div
-						class="mt-3"
-						v-for="(item, index) in orderByDate(companyHistory())"
-						:key="index"
-					>
-						<p class="history-text mb-0">
-							{{ item.text }}
-						</p>
-						<span>{{ item.date | convertDate }}</span>
-					</div>
-					<p v-if="companyHistory().length === 0" class="history-text">
-						Histórico vazio.
-					</p>
-				</template>
-			</el-tab-pane>
-
-			<el-tab-pane name="notes" class="ml-2" v-if="isNotesActived">
-				<span class="tab__icon-pane" slot="label">
-					<img
-						class="img__icon-pane img__icon--notes"
-						src="../../../../assets/images/icons/notesCv.svg"
-					/>
-				</span>
-
-				<upgrade-plan @send-contact="sendContact" v-if="isLocked" />
-
-				<p class="notes-title mb-0">Notas da equipe</p>
-				<div class="line mb-3"></div>
-
-				<template v-if="!isLocked">
-					<template v-if="notes.length > 0">
-						<div
-							v-for="(note, index) in notes.slice(0, 5)"
-							:key="index"
-						>
-							<div class="notes-baloon">
-								<div class="notes-text ml-3 pt-1">
-									<p class="mt-3">{{ note.text }}</p>
-								</div>
-								<div
-									class="d-flex justify-content-between align-items-center mx-3"
-								>
-									<p @click.prevent="handleRemoveNote(note)" v-if="String(currentUser.id) === String(note.user_id)" class="notes-date remove-baloon">
-										Excluir
-									</p>
-									<div v-else></div>
-
-									<p class="notes-date">
-										{{ note.created_at | convertDate }}
-									</p>
-								</div>
-							</div>
-							<div class="notes-owner d-flex mt-2">
-								<image-with-fallback
-									:src="note.user.urlAvatar"
-									:alt="note.user.name"
-									:fallbackText="note.user.name"
-								/>
-								<p class="ml-1">
-									{{ note.user.name }}
-								</p>
-							</div>
-						</div>
-					</template>
-					<div class="notes-text" v-if="notes.length === 0">
-						<p>Nenhuma nota criada.</p>
-					</div>
-				</template>
-
-				<div class="input-container" v-if="!isLocked">
-					<input
-						class="notes-new pl-4 mt-3 mb-3 form-rounded"
-						type="text"
-						placeholder="Escrever anotação"
-						v-model="newNote"
-						@change="$emit('new-note', newNote, userData.id)"
-						v-on:change="cleatInput()"
-					/>
-					<i
-						@click="
-							newNote.length > 0 &&
-								$emit('new-note', newNote, userData.id)
-						"
-						class="fas fa-paper-plane input-icon"
-					></i>
-				</div>
-			</el-tab-pane>
-
-			<el-tab-pane name="documents" class="ml-2">
-				<span class="tab__icon-pane" slot="label">
-					<img
-						class="img__icon-pane img__icon--documents"
-						src="../../../../assets/images/icons/icon3.svg"
-					/>
-				</span>
-
-				<upgrade-plan @send-contact="sendContact" v-if="isLocked" />
-
-				<p class="notes-title mb-0">Documentos anexados</p>
-				<div class="line mb-3"></div>
-
-				<template v-if="!isLocked">
-					<div class="archive-content">
-						<div v-for="(item, index) in archives" :key="index">
-							<div @click="openArchive(item)" class="archive-container">
-								<div>
-									<img class="archive-img" src="../../../../assets/images/icons/icon3.svg" >
-								</div>
-								<div class="archive-name">
-									<span>{{item.name}}</span>
-									<div class="archive-icon">
-										<i @click.stop.prevent="openRemoveSection(item, (index+1))" class="far fa-trash-alt"></i>
-									</div>
-								</div>
-							</div>
-							<div v-if="hasRemove && hasRemove == (index+1)" class="archive-remove">
-								<p>Você tem certeza que deseja apagar este arquivo?</p>
-								<div class="d-flex">
-									<base-button
-										@click="removeArchive(currentRemoveItem, index)"
-										size="sm"
-										class="btn-outline-primary col-6 p-1"
-									>
-										Apagar
-									</base-button>
-									<base-button
-										@click="hasRemove = false"
-										size="sm"
-										class="btn-outline-danger col-6 p-1"
-									>
-										Cancelar
-									</base-button>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div class="notes-text" v-if="archives == null">
-						<p>Nenhum arquvio anexado.</p>
-					</div>
-				</template>
-
-				<div class="input-container" v-if="!isLocked">
-					<div class="mt-5">
-						<dropzone-file-upload
-							disabled
-							@error="showMessageError"
-							ref="MyDropzone"
-							:options="dropzoneOptions"
-							v-model="fileToUpload"
-						/>
-					</div>
-
-					<div class="archive-buttons">
-						<base-button @click="saveImage" size="sm" class="btn-outline-primary btn-rounded col-12">Salvar</base-button>
-					</div>
-				</div>
-			</el-tab-pane>
-
-			<el-tab-pane name="reports" class="ml-2" v-if="isReportsActived">
-				<span class="tab__icon-pane" slot="label">
-					<img
-						class="img__icon-pane img__icon--reports"
-						src="../../../../assets/images/icons/icon5.svg"
-					/>
-				</span>
-
-				<upgrade-plan @send-contact="sendContact" v-if="isLocked" />
-
-				<p class="notes-title mb-0">Laudo do Candidato</p>
-				<div class="line mb-3"></div>
-				<div class="evaluation-area" v-if="likeStatus">
-					<div class="action">
-						<like class="icon" :colorActiveLike="likeStatus"/>
-						<span class="font-weight-bold evaluation-area__text">
-							Gostei
-						</span>
-					</div>
-					<div class="action">
-						<deslike class="icon" :colorActiveDeslike="likeStatus"/>
-						<span class="font-weight-bold evaluation-area__text">
-							Não Gostei
-						</span>
-					</div>
-				</div>
-				<template v-if="!isLocked">
-					<div class="input-container" v-if="!userReportData.annex">
-						<dropzone-file-upload
-							disabled
-							ref="MyReportDropzone"
-							v-model="reportFileUpload"
-							:options="reportsDropdownzoneOptions"
-							@error="showMessageError"
-						/>
-
-						<div class="archive-buttons" v-if="reportFileUpload.length > 0">
-							<base-button @click="saveReport" size="sm" class="btn-outline-primary btn-rounded col-12">Salvar</base-button>
-						</div>
-					</div>
-
-					<div class="archive-content" v-else-if="userReportData.annex">
-						<div @click="openArchive(userReportData.annex)" class="archive-container">
-							<div>
-								<img class="archive-img" src="../../../../assets/images/icons/icon6.svg" >
-							</div>
-							<div class="archive-name">
-								<span>{{ userReportData.annex.name }}</span>
-								<div class="archive-icon">
-									<i @click.stop.prevent="openReportRemoveSection(userReportData.annex)" class="far fa-trash-alt"></i>
-								</div>
-							</div>
-						</div>
-						<div v-if="hasReportRemove" class="archive-remove">
-							<p>Você tem certeza que deseja apagar este arquivo?</p>
-							<div class="d-flex">
-								<base-button
-									@click="removeReportArchive(currentRemoveItem)"
-									size="sm"
-									class="btn-outline-primary col-6 p-1"
-								>
-									Apagar
-								</base-button>
-								<base-button
-									@click="hasRemove = false"
-									size="sm"
-									class="btn-outline-danger col-6 p-1"
-								>
-									Cancelar
-								</base-button>
-							</div>
-						</div>
-					</div>
-				</template>
-
-				<p class="notes-title mb-0">Comentários Recrutador</p>
-				<div class="line mb-3"></div>
-
-				<template v-if="!isLocked">
-					<div v-if="userReportData.comment">
-						<div class="notes-baloon fullsize">
-							<div class="notes-text mx-3 pt-1">
-								<p class="mt-3">{{ userReportData.comment.comment }}</p>
-							</div>
-							<div
-								class="d-flex justify-content-between align-items-center mx-3"
-							>
-								<p @click.prevent="hasCommentRemove = !hasCommentRemove" class="notes-date remove-baloon">
-									Excluir
-								</p>
-
-								<p class="notes-date">
-									{{ userReportData.comment.created_at | convertDate }}
-								</p>
-							</div>
-						</div>
-						<div v-if="hasCommentRemove" class="archive-remove">
-							<p>Você tem certeza que deseja apagar este comentário?</p>
-							<div class="d-flex">
-								<base-button
-									@click="removeComment(userReportData.comment.id)"
-									size="sm"
-									class="btn-outline-primary col-6 p-1"
-								>
-									Apagar
-								</base-button>
-								<base-button
-									@click="hasCommentRemove = false"
-									size="sm"
-									class="btn-outline-danger col-6 p-1"
-								>
-									Cancelar
-								</base-button>
-							</div>
-						</div>
-						<div class="notes-owner d-flex mt-2">
-							<img
-								v-if="userReportData.comment.user.urlAvatar"
-								:src="userReportData.comment.user.urlAvatar"
-								:alt="userReportData.comment.user.name"
-							/>
-							<div
-								v-else
-								class="notes-avatar"
-							></div>
-							<p class="ml-1">
-								{{ userReportData.comment.user.name }}
-							</p>
-						</div>
-					</div>
-				</template>
-
-				<div class="input-container" v-if="!isLocked && !userReportData.comment">
-					<input
-						class="notes-new pl-4 mt-3 mb-3 form-rounded"
-						type="text"
-						placeholder="Escrever anotação"
-						v-model="newReportNote"
-						@change="handleNewReportNoteSubmit"
-						v-on:change="cleatInput()"
-					/>
-					<i
-						@click="handleNewReportNoteSubmit"
-						class="fas fa-paper-plane input-icon"
-					></i>
-				</div>
-			</el-tab-pane>
-		</el-tabs>
-	</div>
-</template>
-
-<script>
-import { Tabs, TabPane } from 'element-ui';
-import DropzoneFileUpload from '@burh/nuxt-core/components/argon-core/Inputs/DropzoneFileUpload.vue';
-import swal from 'sweetalert2';
-import UpgradePlan from './UpgradePlan.vue';
-import like from '../../../organismos/atomos/Like.vue';
-import deslike from '../../../organismos/atomos/Deslike.vue';
-
-export default {
-	name: 'user-cv-right-side',
-	filters: {
-		convertDate(data) {
-			if (typeof data !== 'string') {
-				data = '2020-01-01 12:00:00';
-			}
-			let d = new Date(data);
-			let options = { hour: '2-digit', minute: '2-digit' };
-			return d.toLocaleDateString('pt-BR', options);
-		}
-	},
-	watch:{
-		fileToUpload(value){
-			if(value.length > 0 && value[0].accepted) {
-				this.isError = false;
-			}
-		},
-		reportFileUpload(value){
-			if(value.length > 0 && value[0].accepted) {
-				this.isError = false;
-			}
-		},
-		archives() {
-			this.getUserFolderData();
-		}
-	},
-	components: {
-		[Tabs.name]: Tabs,
-		[TabPane.name]: TabPane,
-		DropzoneFileUpload,
-		UpgradePlan,
-		like,
-		deslike
-	},
-	data(){
-		return {
-			newNote: '',
-			newReportNote: '',
-			liked: 0,
-			hasRemove: null,
-			isError: true,
-			currentRemoveItem: null,
-			fileToUpload: [],
-			dropzoneOptions: {
-				maxFilesize: 5,
-				dictFileTooBig:'Seu arquivo é poderoso demais (Máximo 5mb).',
-				dictDefaultMessage: 'Clique ou arraste seu arquivo aqui.',
-				dictInvalidFileType: 'Arquivo invalido.',
-				dictMaxFilesExceeded: 'Não é permitido mais de um arquivo por vez.',
-				acceptedFiles: 'image/*, application/pdf',
-			},
-			reportFileUpload: [],
-			reportsDropdownzoneOptions: {
-				maxFilesize: 1,
-				dictFileTooBig:'Seu arquivo é poderoso demais (Máximo 5mb).',
-				dictDefaultMessage: 'Clique ou arraste seu arquivo aqui.',
-				dictInvalidFileType: 'Arquivo invalido.',
-				dictMaxFilesExceeded: 'Não é permitido mais de um arquivo por vez.',
-				acceptedFiles: 'image/*, application/pdf',
-			},
-			userReportData: [],
-			hasReportRemove: false,
-			hasCommentRemove: false,
-		};
-	},
-	props: {
-		archives: Array,
-		userData: Object,
-		automation:{
-			type:Object || null,
-			default:null
-		},
-		notes: Array,
-		activeName: String,
-		jobId:{
-			type:[String, Number, Object],
-			default:null
-		},
-		userFolderId: String,
-		isNotesActived: {
-			type: Boolean,
-			default: true
-		},
-		isReportsActived: {
-			type: Boolean,
-			default: false
-		},
-	},
-	mounted() {
-		this.companyHistory();
-		this.getUserFolderData();
-	},
-	methods: {
-		async handleRemoveNote(note) {
-			const apiUrl = `${process.env.baseApiUrl}/company/${note.company_id}/user/${note.user_id}/note/${note.id}`;
-
-			const response = await this.$axios.delete(apiUrl)
-				.then(res => res.data)
-				.catch(() => {});
-
-			if (!response || response && response.error) return this.showToast('error', 'Falha ao remover!');
-
-			this.notes = this.notes.filter(n => n.id !== note.id);
-		},
-		removeComment(item){
-			this.userReportData.comment = undefined;
-			this.$emit('remove-comment', item);
-			this.hasCommentRemove = false;
-		},
-		handleNewReportNoteSubmit() {
-			if (this.newReportNote.length > 3) {
-				this.$emit('new-report-note', this.newReportNote, this.userFolderId, this.userData.id);
-				this.newReportNote = '';
-			}
-		},
-		openRemoveSection(item, index) {
-			this.hasRemove = index;
-			this.currentRemoveItem = item;
-		},
-		openReportRemoveSection(item) {
-			this.hasReportRemove = true;
-			this.currentRemoveItem = item;
-		},
-
-		showToast(type, title){
-			const Toast = swal.mixin({
-				toast: true,
-				position: 'top-end',
-				showConfirmButton: false,
-				timer: 3100,
-			});
-
-			return Toast.fire({
-				type: type,
-				title: title
-			});
-		},
-
-		showMessageError(file, message) {
-			this.isError = true;
-			this.$refs.Mydropzone && this.$refs.Mydropzone.removeAllFiles();
-
-			if (file.status !== 'canceled'){
-				this.showToast('error', message);
-			}
-		},
-		openArchive(item) {
-			window.open(item.storage_url, '_blank');
-		},
-		saveImage(){
-			if (!this.isError) {
-				this.$emit('save-archive', this.fileToUpload[0], this.userData.id);
-				this.$refs.MyDropzone && this.$refs.MyDropzone.removeAllFiles();
-				this.showToast('success', 'Arquivo enviado com sucesso.');
-			} else {
-				if (this.fileToUpload.length > 0) {
-					this.showToast('error', 'Arquivo invalido.');
-				} else {
-					this.showToast('warning', 'Selecione um arquivo.');
-				}
-			}
-		},
-		saveReport() {
-			if (!this.isError) {
-				this.$emit('save-report', this.reportFileUpload[0], this.userFolderId);
-				this.$refs.MyReportDropzone && this.$refs.MyReportDropzone.removeAllFiles();
-				this.showToast('success', 'Arquivo enviado com sucesso.');
-
-			} else {
-				if (this.reportFileUpload.length > 0) {
-					this.showToast('error', 'Arquivo invalido.');
-				} else {
-					this.showToast('warning', 'Selecione um arquivo.');
-				}
-			}
-		},
-
-		removeArchive(archive, index){
-			this.$emit('remove-archive', archive.user_id, archive.id, archive.company_id, index);
-			this.hasRemove = null;
-		},
-
-		removeReportArchive(archive) {
-			this.userReportData.annex = undefined;
-
-			this.$emit('remove-report', archive.id);
-			this.hasReportRemove = false;
-		},
-
-		cleatInput() {
-			this.newNote = '';
-		},
-		companyHistory() {
-			let tests = this.userData.tests.map(x => {
-				if (x.finished_at) {
-					return {
-						date: x.finished_at,
-						text: `Finalizou o teste ${x.test.name.toUpperCase()}`
-					};
-				} else {
-					return {
-						date: x.created_at,
-						text: `Recebeu o teste ${x.test.name.toUpperCase()}`
-					};
-				}
-
-			});
-
-			let courses = this.userData.courses_user.map(x => {
-				if (x.finished_at) {
-					return{
-						date: x.finished_at,
-						text: `Finalizou o curso ${x.course.name.toUpperCase()}`
-					};
-				}
-			});
-
-			let discs = this.userData.solides.map(x => ({
-				date: x.end,
-				text: 'Realizou um teste DISC'
-			}));
-
-			return tests.concat(discs, courses);
-		},
-		orderByDate(data) {
-			let sortedArray = data.sort((a, b) => {
-				a = a.date || '2020-01-01 12:00:00';
-				b = b.date || '2020-01-01 12:00:00';
-
-				return new Date(b).getTime() - new Date(a).getTime();
-			});
-
-			return sortedArray;
-		},
-		sendContact() {
-			this.$emit('open-contact');
-		},
-
-		async getUserFolderData() {
-			if (this.isReportsActived) {
-				const apiUrl = `${process.env.baseApiUrlV2}/company/buffer/folder/user/${this.userFolderId}`;
-
-				const data = await this.$axios(apiUrl)
-					.then((res) => {
-						this.liked = res.data.data.like;
-						return res.data;
-					})
-					.catch(() => {});
-
-				if (!data) return;
-
-				this.mountUserReport(data.data);
-			}
-		},
-
-		mountUserReport(userData) {
-			const annex = userData.annex[0] || undefined;
-			const comment = userData.comments[0] || undefined;
-
-			this.userReportData = {
-				annex,
-				comment
-			};
-		},
-		haveAnswers(){
-			if(this.automation && Object.keys(this.automation).length){
-				return true;
-			}else{
-				this.active = this.activeName;
-				return false;
-			}
-		}
-	},
-	computed: {
-		currentUser() {
-			return this.$store.state.user.currentUser;
-		},
-		isLocked() {
-			return !this.companyHasProduct(
-				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['HISTORICO_USUARIO'] || false
-			);
-		},
-		companyHasAutomation() {
-			return this.companyHasProduct(
-				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['TRIAGEM_AUTOMATICA'] || false
-			);
-		},
-		hasAutomation() {
-			return this.automation && Object.values(this.automation).length > 0 || false;
-		},
-		activeTab() {
-			let activeTab = this.activeName;
-
-			if (this.jobId && this.companyHasAutomation && this.hasAutomation) {
-				if (activeTab == 'history') {
-					activeTab = 'melissa';
-				}
-			}
-
-			return activeTab;
-		},
-		likeStatus() {
-			return this.liked;
-		},
-	}
-};
-</script>
-<style>
-    .el-tabs__nav-wrap.is-top::after {
-	background: #fff !important;
-}
-.remove-baloon{
-    cursor: pointer;
-}
-    .el-tabs__active-bar.is-top {
-        width: 30px !important;
-        height: 4px !important;
-        border-radius: 10px 10px 0px 0px;
-    }
-</style>
-
-<style lang="scss">
-.swal2-title {
-	font-size: 1rem !important;
-}
-.swal2-container {
-	z-index: 5000 !important;
-}
-</style>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/.dropzone {
-	width: 95%;
-
-	.dz-message {
-		padding: 2rem 1rem !important;
-	}
-
-    button.dz-button {
-        background-color: transparent;
-        border: 0;
-    }
-}
-.evaluation-area{
-    margin-bottom: 16px;
-    display: grid;
-    grid-template-columns: repeat(2, 95px);
-    @media (max-width:1155px){
-        grid-template-columns: 1fr;
-    }
-    .action{
-        display: grid;
-        grid-template-columns: 2rem 1fr;
-        align-items: center;
-        white-space: nowrap;
-        user-select: none;
-        .icon {
-            width: 2rem !important;
-            margin-bottom: 0;
-        }
-        @media (max-width: 1440px) {
-            justify-content:start;
-        }
-        @media (max-width:1155px){
-            width: 7rem;
-            margin-bottom: 0 !important;
-        }
-    }
-	&__text {
-        font-size: 0.8rem;
-        color: #32325D;
-        margin-left: 0.35rem;
-	}
-
-    .active-icon {
-        font-size: 25px;
-        color: #AEB0B7;
-		transition: color 0.25s;
-		cursor: pointer;
-        &.active{
-            color:#fff;
-        }
-    }
-}
-/deep/ .el-tab-pane {
-    height: 760px;
-    max-height: 760px;
-    overflow: hidden;
-    overflow-y: auto;
-    position: relative;
-
-    > .notes-title {
-        position: sticky;
-        position: -webkit-sticky;
-        top: 0;
-        background: white;
-        padding: 10px 0;
-    }
-
-    > .input-container {
-        position: sticky;
-        position: -webkit-sticky;
-        bottom: 0;
-        background: white;
-        > .input-icon {
-            cursor: pointer;
-            position: absolute;
-            top: 50%;
-            right: 30px;
-            transform: translateY(-50%);
-            color: #c8c8c8;
-        }
-    }
-
-    &::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: #f5f5f5;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #e9e8e8;
-        border-radius: 10px;
-    }
-
-	.archive-content {
-		width: 95%;
-
-		p {
-			margin-bottom: 0;
-			font-size: 0.875rem;
-			padding: .3rem .6rem 0 .6rem;
-		}
-
-		.archive-container {
-			display: flex;
-			align-items: center;
-			padding: 0.5rem 0.5rem 0.438rem;
-			cursor: pointer;
-			user-select: none;
-
-			&:hover{
-				background-color: #f6f9fc;
-                border-radius: 5px;
-			}
-
-			.archive-img {
-				background-color: #f5f5f5;
-				border-radius: 6px;
-				padding: 7px;
-			}
-
-			.archive-name {
-				display: flex;
-				margin-left: .8rem;
-				width: 145%;
-				justify-content: space-between !important;
-
-				.archive-icon {
-					margin-left: 1.5rem;
-				}
-
-				p {
-					margin: 0;
-					padding: 0;
-					width: 13rem;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-			}
-
-			.upload-container {
-				position: sticky;
-				position: -webkit-sticky;
-				bottom: 0;
-				background: white;
-				width: 231px;
-			}
-		}
-	}
-
-	.archive-buttons {
-		display: flex;
-		margin-top: -1rem;
-		width: 95%;
-	}
-
-	.archive-remove {
-		width: 90%;
-		word-break: break-word;
-	}
-}
-
-/deep/ .el-tabs__nav-scroll {
-	display: flex;
-    justify-content: stretch;
-    align-items: flex-start;
-}
-
-/deep/ .el-tabs__item {
-	padding: 0 1.5rem !important;
-}
-
-/deep/ .el-tabs__nav {
-	width: 100% !important;
-    user-select: none;
-}
-
-@media (max-width: 1520px) {
-	/deep/ .el-tabs__item {
-		padding: 0 1.2rem !important;
-	}
-}
-@media (max-width: 1340px) {
-	/deep/ .el-tabs__item {
-		padding: 0 1rem !important;
-	}
-}
-@media (max-width: 1240px) {
-	/deep/ .el-tabs__item {
-		padding: 0 0.8rem !important;
-	}
-}
-@media (max-width: 1140px) {
-	/deep/ .el-tabs__item {
-		padding: 0 0.6rem !important;
-	}
-}
-
-.readmore {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-}
-
-.tab__icon-pane {
-    .img__icon-pane {
-        background-color: #f5f5f5 !important;
-        border-radius: 30%;
-        padding: 7px;
-        height: 2.2rem;
-        width: 2.2rem;
-        margin-bottom: 1rem;
-    }
-}
-
-.content-right {
-    width: 25%;
-}
-
-.notes-title {
-    font-size: 14px;
-	word-break: break-word;
-    color: #1d364b;
-    font-weight: bold;
-	background-color: white;
-	z-index: 500;
-}
-
-.notes-baloon {
-    width: 231px;
-    height: auto;
-    border-radius: 10px 10px 10px 0;
-    background: #eff5fd;
-    &.fullsize {
-        width: 80%!important;
-        min-width: 280px;
-    }
-}
-.notes-baloon-melissa {
-    padding: 5px 0;
-    .question-melissa-title{
-        font-size: 12px !important;
-        color:#62778c;
-		span {
-			word-break: break-word;
-		}
-    }
-    .notes-text-melissa {
-        font-size: 0.875rem;
-        color: #1d364b;
-        font-weight: bold;
-    }
-    &.fullsize {
-        width: 80%!important;
-        min-width: 280px;
-    }
-}
-
-.notes-text {
-    p {
-        font-size: 13px;
-        color: #62778c;
-    }
-}
-
-.notes-date {
-    font-size: 11px;
-    text-align: right;
-
-    color: #8da2b5;
-    top: calc(50% - 17px / 2 - 444.5px);
-}
-
-.notes-owner {
-    img {
-        width: 23px;
-        height: 23px;
-        border-radius: 50%;
-    }
-
-    .notes-avatar {
-        width: 23px;
-        height: 23px;
-        border-radius: 50%;
-        background-color: #adb5bd;
-    }
-
-    p {
-        font-size: 13px;
-        font-weight: 600;
-        text-transform: uppercase;
-
-        color: #62778c;
-    }
-}
-
-.notes-new {
-    width: 95%;
-    height: 33px;
-
-    background: #f5f5f5;
-    border-radius: 16.5px;
-    border: none;
-
-    outline: 0;
-}
-
-.line {
-    width: 221px;
-    height: 0px;
-
-    border: 1px solid #ececec5c;
-}
-
-.history {
-    word-break: break-word;
-
-    .history-text {
-        font-size: 13px;
-        color: #62778c;
-    }
-
-    span {
-        font-size: 11px;
-        line-height: 16px;
-
-        color: #8da2b5;
-    }
-}
-
-.cursor-disabled {
-    cursor: no-drop;
-}
-</style>
+<template>
+	<div class="bg-white content-right tabs">
+		<el-tabs
+			:class="activeTab"
+			class="mt-3 handle-icon-color"
+			v-model="activeTab"
+		>
+			<el-tab-pane v-if="companyHasAutomation && hasAutomation" name="melissa" class="mx-2">
+				<span class="tab__icon-pane" slot="label">
+					<img
+						class="img__icon-pane"
+						src="/img/recruitment/melissa.svg"
+					/>
+				</span>
+				<p class="notes-title mb-0 notes-melissa-title">
+					{{automation.aproved ?
+						'Candidato aprovado pela Melissa' :
+						'Candidato reprovado pela Melissa'}}
+				</p>
+				<div class="line mb-3"></div>
+				<template>
+					<template>
+						<div v-if="automation && automation.vehicle_license && automation.vehicle_license.vehicle_license !== null">
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>
+										Você tem uma carteira de motorista válida?
+									</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ Boolean(automation.vehicle_license.vehicle_license) ? "Sim" : "Não" }}
+										<span v-if="automation.vehicle_license.vehicle_license_approved">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div v-if="automation && automation.city && automation.city.city !== null">
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>
+										Você pode se locomover até onde esta vaga está localizada?
+									</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ Boolean(automation.city.city) ? "Sim" : "Não" }}
+										<span v-if="automation.city.city_approved">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div v-if="automation && automation.urgent_hiring && automation.urgent_hiring.urgent_hiring !== null">
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>
+										Precisamos preencher esta posição com urgência. Você poderia começar imediatamente?
+									</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ Boolean(automation.urgent_hiring.urgent_hiring) ? "Sim" : "Não" }}
+										<span v-if="automation.urgent_hiring.urgent_hiring_approved">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div v-if="automation && automation.school_formation && automation.school_formation.school_formation !== null && automation.school_formation.option !== null">
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>
+										Você completou o curso: <b>{{automation.school_formation.option}}</b>?
+									</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ Boolean(automation.school_formation.school_formation) ? "Sim" : "Não" }}
+
+										<span v-if="automation.school_formation.school_formation_approved">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div v-if="automation && automation.tool_experience && automation.tool_experience.tool_experience !== null && automation.tool_experience.option !== null">
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>
+										Quantos anos de experiência você tem utilizando <b>{{automation.tool_experience.option}}</b>?
+									</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ automation.tool_experience.tool_experience }}
+										<span v-if="automation.tool_experience.tool_experience_approved">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div v-if="automation && automation.work_experience && automation.work_experience.work_experience !== null && automation.work_experience.option !== null">
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>
+										Quantos anos de experiência você tem na função de <b>{{automation.work_experience.option}}</b>?
+									</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ automation.work_experience.work_experience }}
+										<span v-if="automation.work_experience.work_experience_approved">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div v-if="automation && automation.sector_experience && automation.sector_experience.sector_experience !== null && automation.sector_experience.option !== null">
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>
+										Quantos anos de experiência você tem no setor de <b>{{automation.sector_experience.option}}</b>?
+									</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ automation.sector_experience.sector_experience }}
+										<span v-if="automation.sector_experience.sector_experience_approved">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div v-if="automation && automation.language && automation.language.language !== null && automation.language.option !== null">
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>
+										Qual seu nível de proficiência em <b>{{automation.language.option}}</b>?
+									</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ automation.language.language }}
+										<span v-if="automation.language.language_approved">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div
+							v-for="(melissa,index) in automation.custom"
+							:key="index"
+						>
+							<div class="notes-baloon-melissa mt-2">
+								<div class="question-melissa-title">
+									<span>{{ melissa.question }}</span>
+								</div>
+								<div class="notes-text-melissa pt-2">
+									<span class="mt-2">
+										{{ typeof melissa.response === "boolean" ? melissa.response ? "Sim" : "Não" : melissa.response }}
+										<span v-if="melissa.approved_in_question">
+											&#x2705;
+										</span>
+										<span v-else>
+											&#x274C;
+										</span>
+									</span>
+								</div>
+							</div>
+						</div>
+					</template>
+				</template>
+			</el-tab-pane>
+			<el-tab-pane class="history ml-2" name="history">
+				<span class="tab__icon-pane" slot="label">
+					<img
+						class="img__icon-pane img__icon--history"
+						src="../../../../assets/images/icons/historicCv.svg"
+					/>
+				</span>
+				<upgrade-plan @send-contact="sendContact" v-if="isLocked" />
+
+				<p class="notes-title mb-0">Histórico com sua empresa</p>
+				<div class="line mb-3"></div>
+
+				<template v-if="!isLocked">
+					<div
+						class="mt-3"
+						v-for="(item, index) in orderByDate(companyHistory())"
+						:key="index"
+					>
+						<div class="d-flex align-items-center justify-content-between">
+							<p class="history-text mb-0" v-html="item.text" />
+
+							<el-tooltip
+								placement="top"
+								content="Baixar PDF"
+							>
+								<button
+									v-if="item.hasDownload"
+									class="py-2 px-3 mx-2 border-0 bg-transparent text-primary"
+									@click="() => downloadPdf(item)"
+								>
+									<i class="fas fa-download" />
+								</button>
+							</el-tooltip>
+						</div>
+
+						<span>{{ item.date | convertDate }}</span>
+					</div>
+					<p v-if="companyHistory().length === 0" class="history-text">
+						Histórico vazio.
+					</p>
+				</template>
+			</el-tab-pane>
+
+			<el-tab-pane name="notes" class="ml-2" v-if="isNotesActived">
+				<span class="tab__icon-pane" slot="label">
+					<img
+						class="img__icon-pane img__icon--notes"
+						src="../../../../assets/images/icons/notesCv.svg"
+					/>
+				</span>
+
+				<upgrade-plan @send-contact="sendContact" v-if="isLocked" />
+
+				<p class="notes-title mb-0">Notas da equipe</p>
+				<div class="line mb-3"></div>
+
+				<template v-if="!isLocked">
+					<template v-if="notes.length > 0">
+						<div
+							v-for="(note, index) in notes.slice(0, 5)"
+							:key="index"
+						>
+							<div class="notes-baloon">
+								<div class="notes-text ml-3 pt-1">
+									<p class="mt-3">{{ note.text }}</p>
+								</div>
+								<div
+									class="d-flex justify-content-between align-items-center mx-3"
+								>
+									<p @click.prevent="handleRemoveNote(note)" v-if="String(currentUser.id) === String(note.user_id)" class="notes-date remove-baloon">
+										Excluir
+									</p>
+									<div v-else></div>
+
+									<p class="notes-date">
+										{{ note.created_at | convertDate }}
+									</p>
+								</div>
+							</div>
+							<div class="notes-owner d-flex mt-2">
+								<image-with-fallback
+									:src="note.user.urlAvatar"
+									:alt="note.user.name"
+									:fallbackText="note.user.name"
+								/>
+								<p class="ml-1">
+									{{ note.user.name }}
+								</p>
+							</div>
+						</div>
+					</template>
+					<div class="notes-text" v-if="notes.length === 0">
+						<p>Nenhuma nota criada.</p>
+					</div>
+				</template>
+
+				<div class="input-container" v-if="!isLocked">
+					<input
+						class="notes-new pl-4 mt-3 mb-3 form-rounded"
+						type="text"
+						placeholder="Escrever anotação"
+						v-model="newNote"
+						@change="$emit('new-note', newNote, userData.id)"
+						v-on:change="cleatInput()"
+					/>
+					<i
+						@click="
+							newNote.length > 0 &&
+								$emit('new-note', newNote, userData.id)
+						"
+						class="fas fa-paper-plane input-icon"
+					></i>
+				</div>
+			</el-tab-pane>
+
+			<el-tab-pane name="documents" class="ml-2">
+				<span class="tab__icon-pane" slot="label">
+					<img
+						class="img__icon-pane img__icon--documents"
+						src="../../../../assets/images/icons/icon3.svg"
+					/>
+				</span>
+
+				<upgrade-plan @send-contact="sendContact" v-if="isLocked" />
+
+				<p class="notes-title mb-0">Documentos anexados</p>
+				<div class="line mb-3"></div>
+
+				<template v-if="!isLocked">
+					<div class="archive-content">
+						<div v-for="(item, index) in archives" :key="index">
+							<div @click="openArchive(item)" class="archive-container">
+								<div>
+									<img class="archive-img" src="../../../../assets/images/icons/icon3.svg" >
+								</div>
+								<div class="archive-name">
+									<span>{{item.name}}</span>
+									<div class="archive-icon">
+										<i @click.stop.prevent="openRemoveSection(item, (index+1))" class="far fa-trash-alt"></i>
+									</div>
+								</div>
+							</div>
+							<div v-if="hasRemove && hasRemove == (index+1)" class="archive-remove">
+								<p>Você tem certeza que deseja apagar este arquivo?</p>
+								<div class="d-flex">
+									<base-button
+										@click="removeArchive(currentRemoveItem, index)"
+										size="sm"
+										class="btn-outline-primary col-6 p-1"
+									>
+										Apagar
+									</base-button>
+									<base-button
+										@click="hasRemove = false"
+										size="sm"
+										class="btn-outline-danger col-6 p-1"
+									>
+										Cancelar
+									</base-button>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="notes-text" v-if="archives == null">
+						<p>Nenhum arquvio anexado.</p>
+					</div>
+				</template>
+
+				<div class="input-container" v-if="!isLocked">
+					<div class="mt-5">
+						<dropzone-file-upload
+							disabled
+							@error="showMessageError"
+							ref="MyDropzone"
+							:options="dropzoneOptions"
+							v-model="fileToUpload"
+						/>
+					</div>
+
+					<div class="archive-buttons">
+						<base-button @click="saveImage" size="sm" class="btn-outline-primary btn-rounded col-12">Salvar</base-button>
+					</div>
+				</div>
+			</el-tab-pane>
+
+			<el-tab-pane name="reports" class="ml-2" v-if="isReportsActived">
+				<span class="tab__icon-pane" slot="label">
+					<img
+						class="img__icon-pane img__icon--reports"
+						src="../../../../assets/images/icons/icon5.svg"
+					/>
+				</span>
+
+				<upgrade-plan @send-contact="sendContact" v-if="isLocked" />
+
+				<p class="notes-title mb-0">Laudo do Candidato</p>
+				<div class="line mb-3"></div>
+				<div class="evaluation-area" v-if="likeStatus">
+					<div class="action">
+						<like class="icon" :colorActiveLike="likeStatus"/>
+						<span class="font-weight-bold evaluation-area__text">
+							Gostei
+						</span>
+					</div>
+					<div class="action">
+						<deslike class="icon" :colorActiveDeslike="likeStatus"/>
+						<span class="font-weight-bold evaluation-area__text">
+							Não Gostei
+						</span>
+					</div>
+				</div>
+				<template v-if="!isLocked">
+					<div class="input-container" v-if="!userReportData.annex">
+						<dropzone-file-upload
+							disabled
+							ref="MyReportDropzone"
+							v-model="reportFileUpload"
+							:options="reportsDropdownzoneOptions"
+							@error="showMessageError"
+						/>
+
+						<div class="archive-buttons" v-if="reportFileUpload.length > 0">
+							<base-button @click="saveReport" size="sm" class="btn-outline-primary btn-rounded col-12">Salvar</base-button>
+						</div>
+					</div>
+
+					<div class="archive-content" v-else-if="userReportData.annex">
+						<div @click="openArchive(userReportData.annex)" class="archive-container">
+							<div>
+								<img class="archive-img" src="../../../../assets/images/icons/icon6.svg" >
+							</div>
+							<div class="archive-name">
+								<span>{{ userReportData.annex.name }}</span>
+								<div class="archive-icon">
+									<i @click.stop.prevent="openReportRemoveSection(userReportData.annex)" class="far fa-trash-alt"></i>
+								</div>
+							</div>
+						</div>
+						<div v-if="hasReportRemove" class="archive-remove">
+							<p>Você tem certeza que deseja apagar este arquivo?</p>
+							<div class="d-flex">
+								<base-button
+									@click="removeReportArchive(currentRemoveItem)"
+									size="sm"
+									class="btn-outline-primary col-6 p-1"
+								>
+									Apagar
+								</base-button>
+								<base-button
+									@click="hasRemove = false"
+									size="sm"
+									class="btn-outline-danger col-6 p-1"
+								>
+									Cancelar
+								</base-button>
+							</div>
+						</div>
+					</div>
+				</template>
+
+				<p class="notes-title mb-0">Comentários Recrutador</p>
+				<div class="line mb-3"></div>
+
+				<template v-if="!isLocked">
+					<div v-if="userReportData.comment">
+						<div class="notes-baloon fullsize">
+							<div class="notes-text mx-3 pt-1">
+								<p class="mt-3">{{ userReportData.comment.comment }}</p>
+							</div>
+							<div
+								class="d-flex justify-content-between align-items-center mx-3"
+							>
+								<p @click.prevent="hasCommentRemove = !hasCommentRemove" class="notes-date remove-baloon">
+									Excluir
+								</p>
+
+								<p class="notes-date">
+									{{ userReportData.comment.created_at | convertDate }}
+								</p>
+							</div>
+						</div>
+						<div v-if="hasCommentRemove" class="archive-remove">
+							<p>Você tem certeza que deseja apagar este comentário?</p>
+							<div class="d-flex">
+								<base-button
+									@click="removeComment(userReportData.comment.id)"
+									size="sm"
+									class="btn-outline-primary col-6 p-1"
+								>
+									Apagar
+								</base-button>
+								<base-button
+									@click="hasCommentRemove = false"
+									size="sm"
+									class="btn-outline-danger col-6 p-1"
+								>
+									Cancelar
+								</base-button>
+							</div>
+						</div>
+						<div class="notes-owner d-flex mt-2">
+							<img
+								v-if="userReportData.comment.user.urlAvatar"
+								:src="userReportData.comment.user.urlAvatar"
+								:alt="userReportData.comment.user.name"
+							/>
+							<div
+								v-else
+								class="notes-avatar"
+							></div>
+							<p class="ml-1">
+								{{ userReportData.comment.user.name }}
+							</p>
+						</div>
+					</div>
+				</template>
+
+				<div class="input-container" v-if="!isLocked && !userReportData.comment">
+					<input
+						class="notes-new pl-4 mt-3 mb-3 form-rounded"
+						type="text"
+						placeholder="Escrever anotação"
+						v-model="newReportNote"
+						@change="handleNewReportNoteSubmit"
+						v-on:change="cleatInput()"
+					/>
+					<i
+						@click="handleNewReportNoteSubmit"
+						class="fas fa-paper-plane input-icon"
+					></i>
+				</div>
+			</el-tab-pane>
+		</el-tabs>
+	</div>
+</template>
+
+<script>
+import { Tabs, TabPane } from 'element-ui';
+import DropzoneFileUpload from '@burh/nuxt-core/components/argon-core/Inputs/DropzoneFileUpload.vue';
+import swal from 'sweetalert2';
+import UpgradePlan from './UpgradePlan.vue';
+import like from '../../../organismos/atomos/Like.vue';
+import deslike from '../../../organismos/atomos/Deslike.vue';
+
+export default {
+	name: 'user-cv-right-side',
+	filters: {
+		convertDate(data) {
+			if (typeof data !== 'string') {
+				data = '2020-01-01 12:00:00';
+			}
+			let d = new Date(data);
+			let options = { hour: '2-digit', minute: '2-digit' };
+			return d.toLocaleDateString('pt-BR', options);
+		}
+	},
+	watch:{
+		fileToUpload(value){
+			if(value.length > 0 && value[0].accepted) {
+				this.isError = false;
+			}
+		},
+		reportFileUpload(value){
+			if(value.length > 0 && value[0].accepted) {
+				this.isError = false;
+			}
+		},
+		archives() {
+			this.getUserFolderData();
+		}
+	},
+	components: {
+		[Tabs.name]: Tabs,
+		[TabPane.name]: TabPane,
+		DropzoneFileUpload,
+		UpgradePlan,
+		like,
+		deslike
+	},
+	data(){
+		return {
+			newNote: '',
+			newReportNote: '',
+			liked: 0,
+			hasRemove: null,
+			isError: true,
+			currentRemoveItem: null,
+			fileToUpload: [],
+			dropzoneOptions: {
+				maxFilesize: 5,
+				dictFileTooBig:'Seu arquivo é poderoso demais (Máximo 5mb).',
+				dictDefaultMessage: 'Clique ou arraste seu arquivo aqui.',
+				dictInvalidFileType: 'Arquivo invalido.',
+				dictMaxFilesExceeded: 'Não é permitido mais de um arquivo por vez.',
+				acceptedFiles: 'image/*, application/pdf',
+			},
+			reportFileUpload: [],
+			reportsDropdownzoneOptions: {
+				maxFilesize: 1,
+				dictFileTooBig:'Seu arquivo é poderoso demais (Máximo 5mb).',
+				dictDefaultMessage: 'Clique ou arraste seu arquivo aqui.',
+				dictInvalidFileType: 'Arquivo invalido.',
+				dictMaxFilesExceeded: 'Não é permitido mais de um arquivo por vez.',
+				acceptedFiles: 'image/*, application/pdf',
+			},
+			userReportData: [],
+			hasReportRemove: false,
+			hasCommentRemove: false,
+		};
+	},
+	props: {
+		archives: Array,
+		userData: Object,
+		automation:{
+			type:Object || null,
+			default:null
+		},
+		notes: Array,
+		activeName: String,
+		jobId:{
+			type:[String, Number, Object],
+			default:null
+		},
+		userFolderId: String,
+		isNotesActived: {
+			type: Boolean,
+			default: true
+		},
+		isReportsActived: {
+			type: Boolean,
+			default: false
+		},
+	},
+	mounted() {
+		this.companyHistory();
+		this.getUserFolderData();
+	},
+	methods: {
+		async handleRemoveNote(note) {
+			const apiUrl = `${process.env.baseApiUrl}/company/${note.company_id}/user/${note.user_id}/note/${note.id}`;
+
+			const response = await this.$axios.delete(apiUrl)
+				.then(res => res.data)
+				.catch(() => {});
+
+			if (!response || response && response.error) return this.showToast('error', 'Falha ao remover!');
+
+			this.notes = this.notes.filter(n => n.id !== note.id);
+		},
+		removeComment(item){
+			this.userReportData.comment = undefined;
+			this.$emit('remove-comment', item);
+			this.hasCommentRemove = false;
+		},
+		handleNewReportNoteSubmit() {
+			if (this.newReportNote.length > 3) {
+				this.$emit('new-report-note', this.newReportNote, this.userFolderId, this.userData.id);
+				this.newReportNote = '';
+			}
+		},
+		openRemoveSection(item, index) {
+			this.hasRemove = index;
+			this.currentRemoveItem = item;
+		},
+		openReportRemoveSection(item) {
+			this.hasReportRemove = true;
+			this.currentRemoveItem = item;
+		},
+
+		showToast(type, title){
+			const Toast = swal.mixin({
+				toast: true,
+				position: 'top-end',
+				showConfirmButton: false,
+				timer: 3100,
+			});
+
+			return Toast.fire({
+				type: type,
+				title: title
+			});
+		},
+
+		showMessageError(file, message) {
+			this.isError = true;
+			this.$refs.Mydropzone && this.$refs.Mydropzone.removeAllFiles();
+
+			if (file.status !== 'canceled'){
+				this.showToast('error', message);
+			}
+		},
+		openArchive(item) {
+			window.open(item.storage_url, '_blank');
+		},
+		saveImage(){
+			if (!this.isError) {
+				this.$emit('save-archive', this.fileToUpload[0], this.userData.id);
+				this.$refs.MyDropzone && this.$refs.MyDropzone.removeAllFiles();
+				this.showToast('success', 'Arquivo enviado com sucesso.');
+			} else {
+				if (this.fileToUpload.length > 0) {
+					this.showToast('error', 'Arquivo invalido.');
+				} else {
+					this.showToast('warning', 'Selecione um arquivo.');
+				}
+			}
+		},
+		saveReport() {
+			if (!this.isError) {
+				this.$emit('save-report', this.reportFileUpload[0], this.userFolderId);
+				this.$refs.MyReportDropzone && this.$refs.MyReportDropzone.removeAllFiles();
+				this.showToast('success', 'Arquivo enviado com sucesso.');
+
+			} else {
+				if (this.reportFileUpload.length > 0) {
+					this.showToast('error', 'Arquivo invalido.');
+				} else {
+					this.showToast('warning', 'Selecione um arquivo.');
+				}
+			}
+		},
+
+		removeArchive(archive, index){
+			this.$emit('remove-archive', archive.user_id, archive.id, archive.company_id, index);
+			this.hasRemove = null;
+		},
+
+		removeReportArchive(archive) {
+			this.userReportData.annex = undefined;
+
+			this.$emit('remove-report', archive.id);
+			this.hasReportRemove = false;
+		},
+
+		cleatInput() {
+			this.newNote = '';
+		},
+		async downloadPdf(param) {
+			let data = await this.$store.app.$services.testOnline.downloadPdf(
+				param.id
+			);
+
+			const url = window.URL.createObjectURL(data.data);
+			const link = document.createElement('a');
+			link.href = url;
+			link.setAttribute(
+				'download',
+				`${param.user.name}-${param.test.name}.pdf`
+			);
+			document.body.appendChild(link);
+			link.click();
+			link.remove();
+			window.URL.revokeObjectURL(url);
+		},
+		getTestHistory() {
+			const tests = this.userData.tests.map(test => {
+				if (!test.finished_at) {
+					return;
+				}
+
+				const testData = {
+					avarage: test.avarage,
+					date: test.finished_at,
+					text: `Finalizou o teste ${test.test.name.toUpperCase()} com nota <b>${test.avarage}</b>`
+				};
+
+				return testData;
+			}).filter(item => item);
+
+			return tests;
+		},
+		companyHistory() {
+			let tests = this.userData.tests.map(x => {
+				let test = {
+					id: x.id,
+					date: x.finished_at,
+					user: {
+						name: this.userData.name
+					},
+					test: {
+						name: x.test.name
+					}
+				};
+
+				if (x.finished_at) {
+					test.text = `Finalizou o teste ${x.test.name.toUpperCase()} com nota <b>${x.avarage}</b>`;
+					test.hasDownload = true;
+				} else {
+					test.text = `Recebeu o teste ${x.test.name.toUpperCase()}`;
+				}
+
+				return test;
+			});
+
+			let courses = this.userData.courses_user.map(x => {
+				if (x.finished_at) {
+					return{
+						date: x.finished_at,
+						text: `Finalizou o curso ${x.course.name.toUpperCase()}`
+					};
+				}
+			});
+
+			let discs = this.userData.solides.map(x => ({
+				date: x.end,
+				text: 'Realizou um teste DISC'
+			}));
+
+			return tests.concat(discs, courses);
+		},
+		orderByDate(data) {
+			let sortedArray = data.sort((a, b) => {
+				a = a.date || '2020-01-01 12:00:00';
+				b = b.date || '2020-01-01 12:00:00';
+
+				return new Date(b).getTime() - new Date(a).getTime();
+			});
+
+			return sortedArray;
+		},
+		sendContact() {
+			this.$emit('open-contact');
+		},
+
+		async getUserFolderData() {
+			if (this.isReportsActived) {
+				const apiUrl = `${process.env.baseApiUrlV2}/company/buffer/folder/user/${this.userFolderId}`;
+
+				const data = await this.$axios(apiUrl)
+					.then((res) => {
+						this.liked = res.data.data.like;
+						return res.data;
+					})
+					.catch(() => {});
+
+				if (!data) return;
+
+				this.mountUserReport(data.data);
+			}
+		},
+
+		mountUserReport(userData) {
+			const annex = userData.annex[0] || undefined;
+			const comment = userData.comments[0] || undefined;
+
+			this.userReportData = {
+				annex,
+				comment
+			};
+		},
+		haveAnswers(){
+			if(this.automation && Object.keys(this.automation).length){
+				return true;
+			}else{
+				this.active = this.activeName;
+				return false;
+			}
+		}
+	},
+	computed: {
+		currentUser() {
+			return this.$store.state.user.currentUser;
+		},
+		isLocked() {
+			return !this.companyHasProduct(
+				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['HISTORICO_USUARIO'] || false
+			);
+		},
+		companyHasAutomation() {
+			return this.companyHasProduct(
+				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['TRIAGEM_AUTOMATICA'] || false
+			);
+		},
+		hasAutomation() {
+			return this.automation && Object.values(this.automation).length > 0 || false;
+		},
+		activeTab() {
+			let activeTab = this.activeName;
+
+			if (this.jobId && this.companyHasAutomation && this.hasAutomation) {
+				if (activeTab == 'history') {
+					activeTab = 'melissa';
+				}
+			}
+
+			return activeTab;
+		},
+		likeStatus() {
+			return this.liked;
+		},
+	}
+};
+</script>
+<style>
+    .el-tabs__nav-wrap.is-top::after {
+	background: #fff !important;
+}
+.remove-baloon{
+    cursor: pointer;
+}
+    .el-tabs__active-bar.is-top {
+        width: 30px !important;
+        height: 4px !important;
+        border-radius: 10px 10px 0px 0px;
+    }
+</style>
+
+<style lang="scss">
+.swal2-title {
+	font-size: 1rem !important;
+}
+.swal2-container {
+	z-index: 5000 !important;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/.dropzone {
+	width: 95%;
+
+	.dz-message {
+		padding: 2rem 1rem !important;
+	}
+
+    button.dz-button {
+        background-color: transparent;
+        border: 0;
+    }
+}
+.evaluation-area{
+    margin-bottom: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, 95px);
+    @media (max-width:1155px){
+        grid-template-columns: 1fr;
+    }
+    .action{
+        display: grid;
+        grid-template-columns: 2rem 1fr;
+        align-items: center;
+        white-space: nowrap;
+        user-select: none;
+        .icon {
+            width: 2rem !important;
+            margin-bottom: 0;
+        }
+        @media (max-width: 1440px) {
+            justify-content:start;
+        }
+        @media (max-width:1155px){
+            width: 7rem;
+            margin-bottom: 0 !important;
+        }
+    }
+	&__text {
+        font-size: 0.8rem;
+        color: #32325D;
+        margin-left: 0.35rem;
+	}
+
+    .active-icon {
+        font-size: 25px;
+        color: #AEB0B7;
+		transition: color 0.25s;
+		cursor: pointer;
+        &.active{
+            color:#fff;
+        }
+    }
+}
+/deep/ .el-tab-pane {
+    height: 760px;
+    max-height: 760px;
+    overflow: hidden;
+    overflow-y: auto;
+    position: relative;
+
+    > .notes-title {
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+        background: white;
+        padding: 10px 0;
+    }
+
+    > .input-container {
+        position: sticky;
+        position: -webkit-sticky;
+        bottom: 0;
+        background: white;
+        > .input-icon {
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            right: 30px;
+            transform: translateY(-50%);
+            color: #c8c8c8;
+        }
+    }
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #f5f5f5;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #e9e8e8;
+        border-radius: 10px;
+    }
+
+	.archive-content {
+		width: 95%;
+
+		p {
+			margin-bottom: 0;
+			font-size: 0.875rem;
+			padding: .3rem .6rem 0 .6rem;
+		}
+
+		.archive-container {
+			display: flex;
+			align-items: center;
+			padding: 0.5rem 0.5rem 0.438rem;
+			cursor: pointer;
+			user-select: none;
+
+			&:hover{
+				background-color: #f6f9fc;
+                border-radius: 5px;
+			}
+
+			.archive-img {
+				background-color: #f5f5f5;
+				border-radius: 6px;
+				padding: 7px;
+			}
+
+			.archive-name {
+				display: flex;
+				margin-left: .8rem;
+				width: 145%;
+				justify-content: space-between !important;
+
+				.archive-icon {
+					margin-left: 1.5rem;
+				}
+
+				p {
+					margin: 0;
+					padding: 0;
+					width: 13rem;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+
+			.upload-container {
+				position: sticky;
+				position: -webkit-sticky;
+				bottom: 0;
+				background: white;
+				width: 231px;
+			}
+		}
+	}
+
+	.archive-buttons {
+		display: flex;
+		margin-top: -1rem;
+		width: 95%;
+	}
+
+	.archive-remove {
+		width: 90%;
+		word-break: break-word;
+	}
+}
+
+/deep/ .el-tabs__nav-scroll {
+	display: flex;
+    justify-content: stretch;
+    align-items: flex-start;
+}
+
+/deep/ .el-tabs__item {
+	padding: 0 1.5rem !important;
+}
+
+/deep/ .el-tabs__nav {
+	width: 100% !important;
+    user-select: none;
+}
+
+@media (max-width: 1520px) {
+	/deep/ .el-tabs__item {
+		padding: 0 1.2rem !important;
+	}
+}
+@media (max-width: 1340px) {
+	/deep/ .el-tabs__item {
+		padding: 0 1rem !important;
+	}
+}
+@media (max-width: 1240px) {
+	/deep/ .el-tabs__item {
+		padding: 0 0.8rem !important;
+	}
+}
+@media (max-width: 1140px) {
+	/deep/ .el-tabs__item {
+		padding: 0 0.6rem !important;
+	}
+}
+
+.readmore {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
+.tab__icon-pane {
+    .img__icon-pane {
+        background-color: #f5f5f5 !important;
+        border-radius: 30%;
+        padding: 7px;
+        height: 2.2rem;
+        width: 2.2rem;
+        margin-bottom: 1rem;
+    }
+}
+
+.content-right {
+    width: 25%;
+}
+
+.notes-title {
+    font-size: 14px;
+	word-break: break-word;
+    color: #1d364b;
+    font-weight: bold;
+	background-color: white;
+	z-index: 500;
+}
+
+.notes-baloon {
+    width: 231px;
+    height: auto;
+    border-radius: 10px 10px 10px 0;
+    background: #eff5fd;
+    &.fullsize {
+        width: 80%!important;
+        min-width: 280px;
+    }
+}
+.notes-baloon-melissa {
+    padding: 5px 0;
+    .question-melissa-title{
+        font-size: 12px !important;
+        color:#62778c;
+		span {
+			word-break: break-word;
+		}
+    }
+    .notes-text-melissa {
+        font-size: 0.875rem;
+        color: #1d364b;
+        font-weight: bold;
+    }
+    &.fullsize {
+        width: 80%!important;
+        min-width: 280px;
+    }
+}
+
+.notes-text {
+    p {
+        font-size: 13px;
+        color: #62778c;
+    }
+}
+
+.notes-date {
+    font-size: 11px;
+    text-align: right;
+
+    color: #8da2b5;
+    top: calc(50% - 17px / 2 - 444.5px);
+}
+
+.notes-owner {
+    img {
+        width: 23px;
+        height: 23px;
+        border-radius: 50%;
+    }
+
+    .notes-avatar {
+        width: 23px;
+        height: 23px;
+        border-radius: 50%;
+        background-color: #adb5bd;
+    }
+
+    p {
+        font-size: 13px;
+        font-weight: 600;
+        text-transform: uppercase;
+
+        color: #62778c;
+    }
+}
+
+.notes-new {
+    width: 95%;
+    height: 33px;
+
+    background: #f5f5f5;
+    border-radius: 16.5px;
+    border: none;
+
+    outline: 0;
+}
+
+.line {
+    width: 221px;
+    height: 0px;
+
+    border: 1px solid #ececec5c;
+}
+
+.history {
+    word-break: break-word;
+
+    .history-text {
+        font-size: 13px;
+        color: #62778c;
+    }
+
+    span {
+        font-size: 11px;
+        line-height: 16px;
+
+        color: #8da2b5;
+    }
+}
+
+.cursor-disabled {
+    cursor: no-drop;
+}
+</style>