admin-erahn/resources/js/components/Tunai.vue

<template>
	<div class="container mx-auto px-5 my-10">
		<nav>
			<ul class="flex flex-wrap -ml-2 -mt-2">
				<li v-for="(item, index) in $props.items" :key="index" class="mt-2 pl-2">
					<button
						:class="[
							'relative px-4 py-2 overflow-hidden',
							'transition-colors duration-200',
							'bg-black text-white',
							'hover:bg-gray-400 hover:text-black'
						]"
						:disabled="$data.index === index"
						@click="setItem(index)"
						v-text="item.kodlaluan"
					/>
				</li>
			</ul>
		</nav>

		<transition
			enter-active-class="transition-all transform duration-200 ease-out"
			leave-active-class="transition-all transform duration-200 ease-in"
			:enter-class="`${
				$data.leftToRight ? '-translate-x-10' : 'translate-x-10'
			} opacity-0`"
			enter-to-class="translate-0 opacity-100"
			leave-class="translate-0 opacity-100"
			:leave-to-class="`${
				$data.leftToRight ? 'translate-x-10' : '-translate-x-10'
			} opacity-0`"
			mode="out-in"
		>
			<article
				:key="$data.index"
				class="mt-12 lg:mt-16 prose prose-sm lg:prose-lg"
			>
	

			<table class="min-w-full leading-normal">
            <thead>
              <tr>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Bil
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Tarikh
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  B/F
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Pendahuluan
                </th>
				<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Serahan
                </th>
				<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Gadaian
                </th>
				<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Penebusan
                </th>
				<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  C/F
                </th>
				<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Act
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(tunai,i) in active" :key="i">
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="i+1">
                      </p>
                    </div>
                  </div>
                </td>
				<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="tunai.tarikh">
                      </p>
                    </div>
                  </div>
                </td>
				<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="tunai.bakiawal">
                      </p>
                    </div>
                  </div>
                </td>
				<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="tunai.tambah">
                      </p>
                    </div>
                  </div>
                </td>
				<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="tunai.kurang">
                      </p>
                    </div>
                  </div>
                </td>
				<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="tunai.keluar">
                      </p>
                    </div>
                  </div>
                </td>
				<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="tunai.masuk">
                      </p>
                    </div>
                  </div>
                </td>
				<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="tunai.baki">
                      </p>
                    </div>
                  </div>
                </td>
				<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
						<button class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist" viewBox="0 0 16 16">
						<path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
						<path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
						</svg>
						</button>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
		  <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
    <div class="flex-1 flex justify-between sm:hidden">
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
        Previous
      </a>
      <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
        Next
      </a>
    </div>
    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
      <div>
        <p class="text-sm text-gray-700">
          Showing
          {{ ' ' }}
          <span class="font-medium">1</span>
          {{ ' ' }}
          to
          {{ ' ' }}
          <span class="font-medium">10</span>
          {{ ' ' }}
          of
          {{ ' ' }}
          <span class="font-medium">97</span>
          {{ ' ' }}
          results
        </p>
      </div>
      <div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">Previous</span>
            <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
          </a>
          <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
          <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
            1
          </a>
          <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
            2
          </a>
          <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium">
            3
          </a>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
            ...
          </span>
          <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium">
            8
          </a>
          <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
            9
          </a>
          <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
            10
          </a>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">Next</span>
            <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
          </a>
        </nav>
      </div>
    </div>
  </div>
				<!-- <h1 v-text="active.kodlaluan" />

				<p v-text="active.kodlaluan" /> -->
			</article>
		</transition>
	</div>
</template>

<script>
import { ChevronLeftIcon, ChevronRightIcon } from '@vue-hero-icons/solid'

export default {
	components: {
		ChevronLeftIcon,
		ChevronRightIcon,
	},
	props: {
		items: {
			type: Array,
			default: () => [
				{
					title: "Totam",
					content:
						"Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, deleniti. Dolore corporis quidem sequi repellat cupiditate, possimus, excepturi praesentium iste ad voluptatem modi adipisci nulla laborum fugiat nemo placeat tempore numquam. Delectus quae ratione veniam excepturi quisquam nihil libero numquam.",
					cta: "Find out more"
				},
				{
					title: "Natus",
					content:
						"Laboriosam aperiam corrupti veniam numquam sint ipsam deleniti iusto esse omnis cumque incidunt provident nisi fugiat consequatur, recusandae perspiciatis nobis atque, molestiae aliquid quaerat et delectus sequi sed? Fugit deleniti perspiciatis, laborum necessitatibus unde fugiat. Mollitia fugit ducimus consequatur veritatis?",
					cta: "Find out more"
				},
				{
					title: "Tempora",
					content:
						"Praesentium odit consectetur deleniti quae possimus reprehenderit magni! Quos officiis, perferendis dolores, quo assumenda possimus quibusdam quaerat similique quas deserunt qui alias aut provident. Eos dolorem magni fugit blanditiis, natus rerum inventore dignissimos quia, sunt consequatur neque quis adipisci. Dicta.",
					cta: "Find out more"
				},
				{
					title: "Eaque",
					content:
						"Impedit omnis autem labore obcaecati atque ea, non delectus iusto nemo enim possimus. Commodi deleniti perspiciatis iure laboriosam doloribus hic neque, sed possimus pariatur totam quis quos earum incidunt voluptate blanditiis veniam quibusdam id vel optio? Commodi dolores nulla minus?",
					cta: "Find out more"
				}
			]
		},
			arraytunai: {
			type: Array,
			default: () => [
				{
					title: "Totam",
					content:
						"Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, deleniti. Dolore corporis quidem sequi repellat cupiditate, possimus, excepturi praesentium iste ad voluptatem modi adipisci nulla laborum fugiat nemo placeat tempore numquam. Delectus quae ratione veniam excepturi quisquam nihil libero numquam.",
					cta: "Find out more"
				},
				{
					title: "Natus",
					content:
						"Laboriosam aperiam corrupti veniam numquam sint ipsam deleniti iusto esse omnis cumque incidunt provident nisi fugiat consequatur, recusandae perspiciatis nobis atque, molestiae aliquid quaerat et delectus sequi sed? Fugit deleniti perspiciatis, laborum necessitatibus unde fugiat. Mollitia fugit ducimus consequatur veritatis?",
					cta: "Find out more"
				},
				{
					title: "Tempora",
					content:
						"Praesentium odit consectetur deleniti quae possimus reprehenderit magni! Quos officiis, perferendis dolores, quo assumenda possimus quibusdam quaerat similique quas deserunt qui alias aut provident. Eos dolorem magni fugit blanditiis, natus rerum inventore dignissimos quia, sunt consequatur neque quis adipisci. Dicta.",
					cta: "Find out more"
				},
				{
					title: "Eaque",
					content:
						"Impedit omnis autem labore obcaecati atque ea, non delectus iusto nemo enim possimus. Commodi deleniti perspiciatis iure laboriosam doloribus hic neque, sed possimus pariatur totam quis quos earum incidunt voluptate blanditiis veniam quibusdam id vel optio? Commodi dolores nulla minus?",
					cta: "Find out more"
				}
			]
		}
	},

	data() {
		return {
			index: 0,
			leftToRight: true
		};
	},
	created: function() {
		console.log(this.items);
		console.log(this.arraytunai);
	},

	computed: {
		active() {
			// Dynamically return the active "item", based on $data.index
			// console.log(this.$props.arraytunai[this.$data.index])
			return this.$props.arraytunai[this.$data.index];
		}
	},

	methods: {
		setItem(index) {
			// Update LTR before changing $data.index
			this.$data.leftToRight = index > this.$data.index;
			this.$data.index = index;
		}
	}
}
</script>