boursecu_admin/src/pages/menuPages/accounting/components/AccountingMobileListItem.vue

<template>
  <MobileCard clickable @click="$emit('open', item)">
    <div class="space-y-1">
      <div>
        <div class="flex justify-between items-center gap-x-3 gap-y-1 text-xs">
          <div class="truncate text-sm font-700 text-gray-900">{{ customerToName }}</div>
          <div class="text-xs text-gray-400">{{ createdAtLabel }}</div>
        </div>
        <span class="text-xs text-gray-600">نقد: <span class="font-600 text-gray-900">{{ cashLabel }}</span></span>
        <span class="text-xs text-gray-600">{{ metalLabel.goldUnit() }}: <span class="font-600 text-gray-900">{{ goldLabel }}</span></span>
      </div>

    </div>


  </MobileCard>
</template>

<script setup lang="ts">
import type { TotalAccounting } from '@/model/accounting'
import MobileCard from '@/components/mobile/MobileCard.vue'
import { toJalali } from '@core/utils/useDataTime'
import { usePrice } from '@core/utils/usePrice'
import { metalLabel } from '@/utils/adminMetalLabels'

const props = defineProps<{
  item: TotalAccounting
}>()

defineEmits<{
  (e: 'open', item: TotalAccounting): void
}>()

const customerToName = computed(() => props.item.customer_to?.name || '-')
const createdAtLabel = computed(() => (props.item.created_at ? toJalali(props.item.created_at) : '-'))
const cashLabel = computed(() => usePrice(props.item.cash ?? 0, true, ''))
const goldLabel = computed(() => `${props.item.gold ?? 0} گرم`)
</script>