Initial commit

app/components/viewer/SalaryRow.vue

@@ -0,0 +1,45 @@
+<script setup>
+const props = defineProps({
+  row: Object,
+});
+
+function shortenCurrency(amount) {
+  return new Intl.NumberFormat('en', { notation: 'compact' }).format(
+    Number(amount),
+  );
+}
+</script>
+<template>
+  <tr>
+    <td>{{ row.empcode }}</td>
+    <td>{{ row.empname }}</td>
+    <td>{{ shortenCurrency(row.basic_salary) }}</td>
+    <td>{{ shortenCurrency(row.commission) }}</td>
+    <td>{{ shortenCurrency(row.kpi_bonus) }}</td>
+    <td>{{ shortenCurrency(row.deduction) }}</td>
+    <td>{{ shortenCurrency(row.net) }}</td>
+    <td>
+      <button class="button is-white">
+        <span class="icon">
+          <SvgIcon
+            v-bind="{ name: 'eye-autodesk-on.svg', size: 18, type: 'primary' }"
+          />
+        </span>
+      </button>
+    </td>
+  </tr>
+</template>
+<style scoped>
+td {
+  vertical-align: middle;
+}
+
+td:nth-child(3),
+td:nth-child(4),
+td:nth-child(5),
+td:nth-child(6),
+td:nth-child(7),
+td:nth-child(8) {
+  text-align: right;
+}
+</style>