sfp_front_vue_diarista_prestador/src/pages/profile/ProfilePage.vue

<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-page class="bg-page q-pb-xl">
    <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile">
      <q-space />
      <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.title') }}</span>
      <q-space />
    </div>

    <div class="q-px-md q-mt-md">
      <q-card class="profile-card bg-surface shadow-card card-border" :flat="false">
        <q-btn flat round dense icon="mdi-share-variant-outline" color="grey-6" class="absolute-top-right q-ma-sm" />
        
        <q-card-section class="column items-center q-pb-md">
          <q-avatar size="70px" class="shadow-card">
            <img src="https://cdn.quasar.dev/img/avatar.png">
          </q-avatar>
          
          <div class="fonte-nome-profile text-weight-bold q-mt-md text-dark">{{ user.name || '—' }}</div>
          <div class="fonte-email-profile text-grey-6 q-my-sm">{{ user.email || '—' }}</div>
          <div class="fonte-telefone-profile text-grey-7">{{ user.phone || '—' }}</div> 
          
          <q-btn 
            outline 
            no-caps 
            padding="6px 16px"
            class="full-width q-mt-sm btn-edit-profile text-text" 
            @click="openEditProfile"
          >
            <div class="row items-center q-gutter-x-sm">
              <q-icon name="mdi-account-outline" size="18px" />
              <span class="text-weight-medium">{{ $t('profile.edit_profile') }}</span>
            </div>
          </q-btn>
        </q-card-section>
      </q-card>
    </div>

    <div class="q-mt-md q-px-md column">
      <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openBankDataDialog">
        <div class="column">
          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.bank_data.title') }}</span>
          <span class="menu-description text-text">{{ $t('profile.bank_data.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openAvailabilityDialog">
        <div class="column">
          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.availability.title') }}</span>
          <span class="menu-description text-text">{{ $t('profile.availability.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openServiceDataDialog">
        <div class="column">
          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.service_data.title') }}</span>
          <span class="menu-description text-text">{{ $t('profile.service_data.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openAddressDialog">
        <div class="column">
          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.address.title') }}</span>
          <span class="menu-description text-text">{{ $t('profile.address.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openHelpDialog">
        <div class="column">
          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.help.title') }}</span>
          <span class="menu-description text-text">{{ $t('profile.help.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openPrivacyDialog">
        <div class="column">
          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.privacy.title') }}</span>
          <span class="menu-description text-text">{{ $t('profile.privacy.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <q-separator class="q-my-sm bg-grey-3" inset />

      <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="logOutPrestador">
        <div class="column">
          <span class="menu-title text-weight-bold text-text">{{ $t('profile.logout.title') }}</span>
          <span class="menu-description text-text">{{ $t('profile.logout.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { useAuth } from 'src/composables/useAuth';
import { getUser } from 'src/api/user';
import ProfileEditDialog from './ProfileEditDialog.vue';
import ProfileAddressDialog from 'src/components/profile/ProfileAddressDialog.vue';
import ProfileBankDataDialog from 'src/components/profile/ProfileBankDataDialog.vue';
import ProfileAvailabilityDialog from 'src/components/profile/ProfileAvailabilityDialog.vue';
import ProfileServiceDataDialog from 'src/components/profile/ProfileServiceDataDialog.vue';
import ProfileHelpDialog from 'src/components/profile/ProfileHelpDialog.vue';
import ProfilePrivacyDialog from 'src/components/profile/ProfilePrivacyDialog.vue';
import { useRouter } from 'vue-router';

const $q = useQuasar();

const { logout } = useAuth();
const router = useRouter();
const user = ref({
  name: '',
  email: '',
  phone: ''
});

const openEditProfile = () => {
  $q.dialog({
    component: ProfileEditDialog,
    componentProps: {
      userData: user.value
    }
  }).onOk((updatedUser) => {
    user.value = { ...user.value, ...updatedUser };
  });
};

const openAvailabilityDialog = () => {
  $q.dialog({
    component: ProfileAvailabilityDialog
  });
};

const openBankDataDialog = () => {
  $q.dialog({
    component: ProfileBankDataDialog
  });
};

const openAddressDialog = () => {
  $q.dialog({
    component: ProfileAddressDialog
  });
};

const openServiceDataDialog = () => {
  $q.dialog({
    component: ProfileServiceDataDialog
  });
};

const openHelpDialog = () => {
  $q.dialog({
    component: ProfileHelpDialog
  });
};

const openPrivacyDialog = () => {
  $q.dialog({
    component: ProfilePrivacyDialog
  });
};

const logOutPrestador = async () => {
  await logout();
  router.push('/login');
};

onMounted(async () => {
  try {
    const data = await getUser();
    user.value = data;
  } catch (error) {
    console.error('Erro ao carregar perfil:', error);
  }
});
</script>

<style scoped lang="scss">
.profile-card {
  position: relative;
}

.btn-edit-profile {
  border-radius: 6px;
}

.menu-item {
  transition: background 0.3s;
  &:active {
    background: rgba(0,0,0,0.05);
  }
}

.menu-title {
  font-size: 18px;
  line-height: 1.4;
}

.menu-description {
  font-size: 14px;
}

.flex-1 {
  flex: 1;
}

.text-dark {
  color: #2c3e50;
}

.fonte-email-profile {
  font-family: Inter;
  font-weight: 500;
  font-style: Medium;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
}

.fonte-telefone-profile {
  font-family: Inter;
  font-weight: 500;
  font-style: Medium;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
}

.fonte-nome-profile {
  font-family: Inter;
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
}

.shadow-profile {
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
}
</style>