Initial commit

app/components/viewer/KpiRow.vue

@@ -0,0 +1,51 @@
+<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>{{ row.title }}</td>
+    <td>{{ shortenCurrency(row.target) }}</td>
+    <td>{{ shortenCurrency(row.reached) }}</td>
+    <td>
+      <div class="is-flex is-align-items-center is-gap-1">
+        <progress
+          class="progress is-small is-primary m-0"
+          style="width: 100px; background-color: #ddd !important"
+          :value="row.progress"
+          max="100"
+        ></progress>
+        <span class="fs-13">{{ row.progress }}%</span>
+      </div>
+    </td>
+    <td>{{ row.evaluation }}</td>
+    <td>
+      <button class="button">
+        <span class="icon">
+          <SvgIcon v-bind="{ name: 'pen1.svg', size: 16, type: 'primary' }" />
+        </span>
+      </button>
+    </td>
+  </tr>
+</template>
+<style scoped>
+td {
+  vertical-align: middle;
+}
+
+td:nth-child(4),
+td:nth-child(5),
+td:nth-child(7),
+td:nth-child(8) {
+  text-align: right;
+}
+</style>