hrm/app/components/viewer/Rollcall.vue

<script setup>
import RollcallRow from '@/components/viewer/RollcallRow.vue';

const rollcall = [
  {
    id: 1,
    empcode: 'EMP001',
    empname: 'Nguyễn Văn An',
    date: '2026-03-20',
    checkin: '2026-03-20T01:00:00.000Z',
    checkout: '2026-03-20T09:00:00.000Z',
    duration: '8',
    status: 'Đúng giờ',
  },
  {
    id: 2,
    empcode: 'EMP002',
    empname: 'Trần Thị Bình',
    date: '2026-03-20',
    checkin: '2026-03-20T01:15:00.000Z',
    checkout: '2026-03-20T09:25:00.000Z',
    duration: '8.17',
    status: 'Đi muộn',
  },
  {
    id: 3,
    empcode: 'EMP003',
    empname: 'Lê Hoàng Cường',
    date: '2026-03-20',
    checkin: '2026-03-20T00:45:00.000Z',
    checkout: '2026-03-20T09:00:00.000Z',
    duration: '8.25',
    status: 'Đúng giờ',
  },
  {
    id: 4,
    empcode: 'EMP004',
    empname: 'Phạm Thị Dung',
    date: '2026-03-20',
    checkin: '2026-03-20T01:05:00.000Z',
    checkout: '2026-03-20T09:30:00.000Z',
    duration: '7.42',
    status: 'Về sớm',
  },
  {
    id: 5,
    empcode: 'EMP005',
    empname: 'Võ Minh Em',
    date: '2026-03-20',
    checkin: null,
    checkout: null,
    duration: null,
    status: 'Nghỉ phép',
  },
];
</script>
<template>
  <div class="columns">
    <div class="column is-3">
      <div class="card">
        <div class="card-content">
          <div class="content">
            <p>Đúng giờ</p>
            <div class="is-flex is-flex-direction-column">
              <p class="fsb-22 m-0">8</p>
              <p class="fs-14 m-0 has-text-grey">nhân viên</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card">
        <div class="card-content">
          <div class="content">
            <p>Đi muộn</p>
            <div class="is-flex is-flex-direction-column">
              <p class="fsb-22 m-0">2</p>
              <p class="fs-14 m-0 has-text-grey">nhân viên</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card">
        <div class="card-content">
          <div class="content">
            <p>Nghỉ phép</p>
            <div class="is-flex is-flex-direction-column">
              <p class="fsb-22 m-0">8</p>
              <p class="fs-14 m-0 has-text-grey">nhân viên</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card">
        <div class="card-content">
          <div class="content">
            <p>Tổng giờ làm</p>
            <div class="is-flex is-flex-direction-column">
              <p class="fsb-22 m-0">58.3</p>
              <p class="fs-14 m-0 has-text-grey">giờ</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-content is-flex is-gap-2">
      <Datepicker />
      <div class="select">
        <select style="width: 300px">
          <option>Tất cả trạng thái</option>
          <option>Đúng giờ</option>
          <option>Đi muộn</option>
          <option>Về sớm</option>
          <option>Nghỉ phép</option>
        </select>
      </div>
    </div>
  </div>
  <div class="card mt-4">
    <div class="card-content">
      <p class="mb-4">
        Bảng chấm công ngày {{ $dayjs('2026-03-20').format('DD/MM/YYYY') }}
      </p>
      <table class="table is-fullwidth fs-14">
        <thead>
          <tr>
            <th>Mã NV</th>
            <th>Họ tên</th>
            <th>Ngày</th>
            <th>Giờ vào</th>
            <th>Giờ ra</th>
            <th>Giờ làm</th>
            <th>Trạng thái</th>
          </tr>
        </thead>
        <tbody>
          <RollcallRow v-for="row in rollcall" :key="row.id" :row="row" />
        </tbody>
      </table>
    </div>
  </div>
  <div class="card mt-4">
    <div class="card-content">
      <p class="mb-4">Quản lý ca làm việc</p>
      <div class="columns">
        <div class="column is-4">
          <div class="card">
            <div class="card-content">
              <p class="fsb-18 mb-3">Ca sáng</p>
              <p class="fs-14">08:00 - 12:00</p>
              <p class="fs-14 has-text-grey">28 nhân viên</p>
            </div>
          </div>
        </div>
        <div class="column is-4">
          <div class="card">
            <div class="card-content">
              <p class="fsb-18 mb-3">Ca chiều</p>
              <p class="fs-14">13:00 - 17:30</p>
              <p class="fs-14 has-text-grey">20 nhân viên</p>
            </div>
          </div>
        </div>
        <div class="column is-4">
          <div class="card">
            <div class="card-content">
              <p class="fsb-18 mb-3">Ca tối</p>
              <p class="fs-14">18:00 - 21:00</p>
              <p class="fs-14 has-text-grey">4 nhân viên</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>