Initial commit

app/components/report/TableReportProduct.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="table-report-product">
+    <div class="fixed-grid has-2-cols has-5-cols-desktop">
+      <div class="grid summary-metrics">
+        <div class="cell metric-item">
+          <p class="metric-label">Tổng sản phẩm</p>
+          <span class="metric-value">{{ props.data.totalProduct }}</span>
+        </div>
+        <div class="cell metric-item">
+          <p class="metric-label">Tổng giá trị</p>
+          <span class="metric-value">{{ formatVND(props.data.totalValue) }}</span>
+        </div>
+        <div class="cell metric-item">
+          <p class="metric-label">Tổng diện tích đất</p>
+          <span class="metric-value">{{ props.data.totalLandArea }} m²</span>
+        </div>
+        <div class="cell metric-item">
+          <p class="metric-label">Tổng diện tích xây dựng</p>
+          <span class="metric-value"> {{ props.data.totalBuildingArea }} m² </span>
+        </div>
+        <div class="cell metric-item">
+          <p class="metric-label">Tổng diện tích sàn</p>
+          <span class="metric-value">{{ props.data.totalFloorArea }} m²</span>
+        </div>
+      </div>
+    </div>
+    <DataView v-bind="configurationDataView" v-if="configurationDataView && props.data.listProduct.length > 0" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+});
+
+function formatVND(amount, maxDecimals = 2) {
+  if (!Number.isFinite(amount)) return "0 đ";
+
+  const format = (value) => {
+    return Number.isInteger(value) ? value.toString() : value.toFixed(maxDecimals).replace(/\.?0+$/, "");
+  };
+
+  if (amount >= 1_000_000_000) return `${format(amount / 1_000_000_000)} tỷ`;
+
+  if (amount >= 1_000_000) return `${format(amount / 1_000_000)} triệu`;
+
+  return `${amount.toLocaleString("vi-VN")} đ`;
+}
+
+const configurationDataView = ref({
+  data: props.data.listProduct,
+  setting: "product-list-report",
+  pagename: "productListReport",
+});
+</script>
+<style>
+.table-report-product {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.table-report-product .summary-metrics {
+  padding: 16px 20px;
+  background: #fff;
+  border-radius: 12px;
+  flex: 0 0 auto;
+}
+
+.table-report-product .summary-metrics .metric-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.table-report-product .summary-metrics .metric-label {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.table-report-product .summary-metrics .metric-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+}
+
+.table-report-product .table-container {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.table-report-product .table-container .table {
+  position: relative;
+}
+
+.table-report-product .table-container .table thead {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+</style>