Initial commit

app/components/viewer/EmployeeInfo.vue

@@ -0,0 +1,58 @@
+<script setup>
+import FormatNumber from '@/components/datatable/format/FormatNumber.vue';
+import EmployeeInfoBlock from '@/components/viewer/EmployeeInfoBlock.vue';
+
+const props = defineProps({
+  row: Object,
+});
+</script>
+<template>
+  <div>
+    <p class="fs-17 font-semibold mb-3">Thông tin cá nhân</p>
+    <div class="fixed-grid">
+      <div class="grid">
+        <EmployeeInfoBlock label="Mã nhân viên">{{
+          row.code
+        }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Họ và tên">{{ row.name }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Email">{{ row.email }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Số điện thoại">{{
+          row.phone
+        }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Địa chỉ">{{ row.address }}</EmployeeInfoBlock>
+      </div>
+    </div>
+    <p class="fs-17 font-semibold mb-3">Thông tin công việc</p>
+    <div class="fixed-grid">
+      <div class="grid">
+        <EmployeeInfoBlock label="Phòng ban">{{
+          row.department
+        }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Chức vụ">{{ row.title }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Showroom">{{
+          row.showroom
+        }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Ngày vào làm">{{
+          row.start_date
+        }}</EmployeeInfoBlock>
+      </div>
+    </div>
+    <p class="fs-17 font-semibold mb-3">Hợp đồng lao động</p>
+    <div class="fixed-grid">
+      <div class="grid">
+        <EmployeeInfoBlock label="Loại hợp đồng">{{
+          row.contract_type
+        }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Ngày hết hạn">{{
+          row.contract_exp
+        }}</EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Lương cơ bản">
+          <FormatNumber :value="row.contract_basic_salary" /> VNĐ
+        </EmployeeInfoBlock>
+        <EmployeeInfoBlock label="Trạng thái">
+          <span class="tag">{{ row.status }}</span>
+        </EmployeeInfoBlock>
+      </div>
+    </div>
+  </div>
+</template>