hrm/app/components/viewer/Employee.vue

<script setup>
const { $dayjs } = useNuxtApp();
const xinNghis = [
  {
    name: 'Nghỉ phép năm',
    date: '2026-03-25',
    status: 'Chờ duyệt',
  },
  {
    name: 'Nghỉ ốm',
    date: '2026-03-15',
    status: 'Đã duyệt',
  },
];

const employee = {
  name: 'Nguyễn Văn An',
  email: 'an.nguyen@company.com',
  phone: '0901234567',
  department: 'Kinh doanh',
  title: 'Trưởng phòng',
  start_date: '2020-01-15',
  contract_type: 'Chính thức',
};
</script>
<template>
  <div class="card">
    <div class="card-content">
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img
              src="https://bulma.io/assets/images/placeholders/48x48.png"
              alt="Placeholder image"
              style="border-radius: 9999px; overflow: hidden"
            />
          </figure>
        </div>
        <div class="media-content">
          <p class="title fs-18 mb-1">Nguyễn Văn An</p>
          <p class="subtitle is-6">Trưởng phòng - Kinh doanh</p>
          <p>Mã NV: EMP001</p>
        </div>
      </div>
    </div>
  </div>
  <div class="columns is-align-items-stretch">
    <div class="column">
      <div class="card h-full fs-14">
        <div class="card-content">
          <p class="fs-18 mb-2">Chấm công hôm nay</p>
          <p class="has-text-grey mt-1">Trạng thái</p>
          <span class="tag is-success">Đã chấm công</span>
          <p class="has-text-grey mt-1">Giờ vào</p>
          <p class="fsb-22">8h</p>
          <div class="buttons mt-4">
            <button class="button fs-14 is-fullwidth is-primary">
              Chấm công (GPS)
            </button>
            <button class="button fs-14 is-fullwidth">Chấm công (Wifi)</button>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="card h-full">
        <div class="card-content">
          <p class="fs-18 mb-2">Đơn xin nghỉ phép</p>
          <button class="button is-fullwidth is-primary">
            Gửi đơn xin nghỉ
          </button>
          <p class="has-text-grey mt-4">Số ngày phép còn lại</p>
          <p class="fsb-22">12</p>
          <p class="has-text-grey">ngày/năm</p>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="card h-full">
        <div class="card-content">
          <p class="fs-18 mb-2">Lương tháng gần nhất</p>
          <button class="button is-accent mb-4 is-fullwidth">
            Xem chi tiết
          </button>
          <p class="fs-14 has-text-grey">Tháng 2026/02</p>
          <p class="fsb-22 has-text-green">31.5M</p>
          <p class="fs-14 has-text-grey">VNĐ</p>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="is-flex is-gap-1">
        <SvgIcon v-bind="{ name: 'list.svg', size: 16, type: 'primary' }" />
        <p>Lịch sử đơn xin nghỉ</p>
      </div>
      <div class="is-flex is-flex-direction-column is-gap-2 mt-4">
        <div v-for="xinNghi in xinNghis">
          <div class="card">
            <div class="card-content is-flex is-justify-content-space-between">
              <div>
                <p>{{ xinNghi.name }}</p>
                <p class="fs-14 has-text-grey">
                  Ngày {{ $dayjs(xinNghi.date).format('L') }}
                </p>
              </div>
              <span class="tag">{{ xinNghi.status }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card mb-6">
    <div class="card-content">
      <div class="is-flex is-gap-1 mb-4">
        <SvgIcon v-bind="{ name: 'person.svg', size: 20, type: 'primary' }" />
        <p>Thông tin cá nhân</p>
      </div>
      <div class="columns is-multiline">
        <div class="column is-6">
          <p class="fs-14 has-text-grey">Email</p>
          <p>{{ employee.email }}</p>
        </div>
        <div class="column is-6">
          <p class="fs-14 has-text-grey">Số điện thoại</p>
          <p>{{ employee.phone }}</p>
        </div>
        <div class="column is-6">
          <p class="fs-14 has-text-grey">Phòng ban</p>
          <p>{{ employee.department }}</p>
        </div>
        <div class="column is-6">
          <p class="fs-14 has-text-grey">Chức vụ</p>
          <p>{{ employee.title }}</p>
        </div>
        <div class="column is-6">
          <p class="fs-14 has-text-grey">Ngày vào làm</p>
          <p>{{ employee.start_date }}</p>
        </div>
        <div class="column is-6">
          <p class="fs-14 has-text-grey">Loại hợp đồng</p>
          <p>{{ employee.contract_type }}</p>
        </div>
      </div>
      <div>
        <button class="button">Cập nhật thông tin</button>
      </div>
    </div>
  </div>
</template>