@7365admin1/layer-common 1.9.0 → 1.10.1

package/components/StockCard.vue

@@ -0,0 +1,191 @@
+<template>
+  <v-row
+    justify="center"
+    align="start"
+    color="page-background-color fill-height header-row"
+  >
+    <v-col cols="12" sm="12" md="11" lg="12" xl="12">
+      <v-row no-gutters class="mb-4">
+        <v-col cols="auto">
+          <v-btn variant="text" color="primary" class="text-none" @click="back">
+            <v-icon left>mdi-arrow-left</v-icon>
+            Back
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-card class="pa-5 position-relative rounded-lg">
+        <!-- Stock Information -->
+        <v-row class="pt-2">
+          <v-col cols="12">
+            <v-row>
+              <v-col cols="6">
+                <span class="text-fontgray font-weight-regular text-body-2"
+                  >Name</span
+                >
+                <div
+                  class="text-subtitle-1 text-primary-text font-weight-regular mt-1"
+                >
+                  {{ supply.name || "N/A" }}
+                </div>
+              </v-col>
+              <v-col cols="6">
+                <span class="text-fontgray font-weight-regular text-body-2"
+                  >Unit of Measurement</span
+                >
+                <div
+                  class="text-subtitle-1 text-primary-text font-weight-regular mt-1"
+                >
+                  {{ supply.unitOfMeasurement || "N/A" }}
+                </div>
+              </v-col>
+            </v-row>
+
+            <v-row class="mt-2">
+              <v-col cols="6">
+                <span class="text-fontgray font-weight-regular text-body-2"
+                  >Quantity</span
+                >
+                <div
+                  class="text-subtitle-1 text-primary-text font-weight-regular mt-1"
+                >
+                  {{ supply.qty || "N/A" }}
+                </div>
+              </v-col>
+              <v-col cols="6">
+                <span class="text-fontgray font-weight-regular text-body-2"
+                  >Remarks</span
+                >
+                <div
+                  class="text-subtitle-1 text-primary-text font-weight-regular mt-1"
+                >
+                  {{ supply.remarks || "N/A" }}
+                </div>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12">
+            <v-divider></v-divider>
+          </v-col>
+        </v-row>
+
+        <!-- Stock Movement Table -->
+        <v-row no-gutters class="mt-4">
+          <v-col cols="12">
+            <TableMain
+              title="Stock History"
+              :items="stocks"
+              :headers="headers"
+              :loading="loading"
+              :show-header="true"
+              v-model:page="page"
+              :pages="pages"
+              :pageRange="pageRange"
+              no-data-text="No stock records found."
+              @refresh="getStockBySupplyIdRefresh"
+            >
+              <template #item.createdAt="{ item }">
+                {{ formatDate(item.createdAt) }}
+              </template>
+
+              <template #item.in="{ item }">
+                {{ item.in || 0 }}
+              </template>
+
+              <template #item.out="{ item }">
+                {{ item.out || 0 }}
+              </template>
+
+              <template #item.balance="{ item }">
+                {{ item.balance || 0 }}
+              </template>
+            </TableMain>
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  orgId: { type: String, default: "" },
+  site: { type: String, default: "" },
+});
+
+const { formatDate, back } = useUtils();
+
+const title = ref("Stock");
+
+const supply = ref({
+  name: "",
+  unitOfMeasurement: "",
+  qty: 0,
+  remarks: "",
+});
+
+const { getSupplyById } = useSupply();
+
+const supplyId = useRoute().params.id as string;
+
+const { data: getSupplyByIdReq } = await useLazyAsyncData(
+  `get-supply-by-id-${supplyId}`,
+  () => getSupplyById(supplyId),
+);
+
+watchEffect(() => {
+  if (getSupplyByIdReq?.value) {
+    supply.value = getSupplyByIdReq.value as any;
+  }
+});
+
+const stocks = ref([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+const headers = [
+  { title: "Created At", value: "createdAt" },
+  { title: "In", value: "in" },
+  { title: "Out", value: "out" },
+  { title: "Balance", value: "balance" },
+];
+
+const { getStockBySupply } = useStock();
+
+const {
+  data: getStockBySupplyIdReq,
+  refresh: getStockBySupplyIdRefresh,
+  pending: loading,
+} = await useLazyAsyncData(
+  `get-stock-by-supply-id-${supplyId}-page-${page}`,
+  () => getStockBySupply(props.site, supplyId),
+  {
+    watch: [page, () => props.site, () => supplyId],
+  },
+);
+
+watchEffect(() => {
+  if (getStockBySupplyIdReq.value) {
+    stocks.value = getStockBySupplyIdReq.value.items;
+    pages.value = getStockBySupplyIdReq.value.pages;
+    pageRange.value = getStockBySupplyIdReq.value.pageRange;
+  }
+});
+</script>
+
+<style scoped>
+.text-fontgray {
+  color: #7e7e7e;
+}
+
+:deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
+  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+:deep() .v-table .v-table__wrapper > table > tbody > tr > td:not(:last-child),
+.v-table .v-table__wrapper > table > tbody > tr > th:not(:last-child) {
+  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+</style>