<template>
    <mainLayout>
      <div class="p-6 grid grid-cols-3 gap-6">
        <!-- Left Section -->
        <div class="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200 flex flex-col">
          <KasirForm />
        </div>

        <!-- Right Section -->
        <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
          <KasirTransaksiList :transaksi="dummyTransaksi" @detail="lihatDetail" />
        </div>
      </div>
    </mainLayout>
  </template>

  <script setup>
  import mainLayout from '../layouts/mainLayout.vue'
  import KasirForm from '../components/KasirForm.vue'
  import KasirTransaksiList from '../components/KasirTransaksiList.vue'

  const dummyTransaksi = [
    { id: 1, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 21200000 },
    { id: 2, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
    { id: 3, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
  ]

  const lihatDetail = (trx) => {
    alert(`Detail transaksi: ${trx.kode}`)
  }
  </script>
