hdwposxy/src/views/pages/store/view/StoreTabGeneral.vue

<script setup lang="ts">
import type { StoreData } from '@/models/storeData'

interface Props {
  storeData: StoreData
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<Props>()
</script>

<template>
  <div
    v-for="(pos, index) in storeData.pos"
    :key="index"
  >
    <VChip
      label
      size="small"
      class="text-capitalize me-1"
    >
      Pos {{ pos.workstationId }}
    </VChip>
    <VChip
      label
      size="small"
      class="text-capitalize me-1"
    >
      {{ pos.ip }}
    </VChip>
    <VChip
      label
      size="small"
      class="text-capitalize"
    >
      {{ pos.version }}
    </VChip>
    /
    <VChip
      label
      size="small"
      class="text-capitalize me-3"
      color="primary"
    >
      {{ pos.primaryRegister ? 'Primary' : 'Slave' }}
    </VChip>
    <VChip
      v-if="pos.fatalError"
      label
      size="small"
      class="text-capitalize"
      color="error"
    >
      Fatal
    </VChip>
    <VRow class="py-3 mb-1">
      <!-- 👉 Business date & opening hours -->
      <VCol
        cols="12"
        md="3"
        :class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
      >
        <div class="ape-3">
          <div class="d-flex justify-space-between flex-wrap gap-4 flex-column flex-xs-row">
            <div>
              <div class="d-flex mb-4">
                <VAvatar
                  variant="tonal"
                  color="primary"
                  rounded
                  size="54"
                  class="text-primary me-4"
                >
                  <VIcon
                    icon="tabler-calendar-event"
                    size="38"
                  />
                </VAvatar>
                <div>
                  <span class="text-base">Business date</span>
                  <h4 class="text-h4 font-weight-medium text-primary">
                    {{ pos.businessDateS }}
                  </h4>
                </div>
              </div>

              <div class="d-flex">
                <VAvatar
                  variant="tonal"
                  color="info"
                  rounded
                  size="54"
                  class="text-primary me-4"
                >
                  <VIcon
                    icon="tabler-clock-hour-10"
                    size="38"
                  />
                </VAvatar>
                <div>
                  <span class="text-base">Opening hours</span>
                  <h4 class="text-h6 font-weight-medium text-info">
                    {{ pos.openingDate }}{{ pos.closingDate ? ` ${pos.closingDate}` : '' }}
                  </h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </VCol>

      <!-- 👉 Pending Replication -->
      <VCol
        cols="12"
        md="3"
        :class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
      >
        <div class="d-flex justify-space-between align-center">
          <div class="d-flex flex-column ps-3">
            <h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
              Pending replication
            </h5>
            <div class="text-h3 mb-2">
              {{ pos.replication.pendingReplications }}
            </div>
            <span class="mb-1">
              <div>
                <VChip
                  variant="tonal"
                  color="secondary"
                  style="inline-size:45px"
                >
                  Min
                </VChip>
                {{ pos.replication.minPendingReplicationDate }}
              </div>
            </span>
            <span class="mb-1">
              <div>
                <VChip
                  variant="tonal"
                  color="secondary"
                  style="inline-size:45px"
                >
                  Max
                </VChip>
                {{ pos.replication.maxPendingReplicationDate }}
              </div>
            </span>
          </div>
        </div>
      </VCol>

      <!-- 👉 XSTORE Ticket -->
      <VCol
        cols="12"
        md="3"
        :class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
      >
        <div class="d-flex justify-space-between align-center">
          <div class="d-flex flex-column ps-3">
            <h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
              XSTORE Tickets
            </h5>
            <div class="text-h3 mb-2">
              {{ pos.saleTransaction.count }}
            </div>
            <span class="mb-1">
              <div>
                <VChip
                  variant="tonal"
                  color="secondary"
                  style="inline-size:45px"
                >
                  Min
                </VChip>
                {{ pos.saleTransaction.minDate }}
              </div>
            </span>
            <span class="mb-1">
              <div>
                <VChip
                  variant="tonal"
                  color="secondary"
                  style="inline-size:45px"
                >
                  Max
                </VChip>
                {{ pos.saleTransaction.maxDate }}
              </div>
            </span>
          </div>
        </div>
      </VCol>

      <!-- 👉 DOTSOFT Tickets -->
      <VCol
        cols="12"
        md="3"
      >
        <div class="d-flex justify-space-between align-center">
          <div class="d-flex flex-column ps-3">
            <h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
              DOTSOFT Tickets
            </h5>
            <div class="text-h3 mb-2">
              {{ pos.boTransaction.backOfficeTransactions }}
            </div>
            <span class="mb-1">
              <div>
                <VChip
                  variant="tonal"
                  color="secondary"
                  style="inline-size:45px"
                >
                  Min
                </VChip>
                {{ pos.boTransaction.minBackOfficeTransactionDate }}
              </div>
            </span>
            <span class="mb-1">
              <div>
                <VChip
                  variant="tonal"
                  color="secondary"
                  style="inline-size:45px"
                >
                  Max
                </VChip>
                {{ pos.boTransaction.maxBackOfficeTransactionDate }}
              </div>
            </span>
          </div>
        </div>
      </VCol>
    </VRow>
  </div>
</template>