<script setup lang="ts">
const items = [{
  slot: '1',
  label: 'Create an Item'
}, {
  slot: '2',
  label: 'Create Customer'
}, {
  slot: '3',
  label: 'Create your first order'
}]



const isOpen = ref(false)
</script>

<template>
  <UTabs :items="items" class="w-full" orientation="vertical" :ui="{ wrapper: 'flex items-center gap-4', list: { width: 'w-96' } }">
    <template #1="{ item }">


      <UCard>
        <template #header>
          Create your first Article
        </template>

        Item is a product or a service offered by your company, or something you buy as a part of your supplies or raw materials.

        Items are integral to everything you do in ERPNext - from billing, purchasing to managing inventory. Everything you buy or sell, whether it is a physical product or a service is an Item. Items can be stock, non-stock, variants, serialized, batched, assets, etc.

        ::callout{icon="i-heroicons-light-bulb"}
        This suggests a helpful tip.
        ::


        <template #footer>

          <UButton
              icon="i-heroicons-pencil-square"
              size="sm"
              color="primary"
              variant="solid"
              to="/materials/products/create"
              label="Create Article"
              :trailing="false"
          />

        </template>
      </UCard>



    </template>

    <template #2="{ item }">

      <UCard>
        <template #header>
          Create your first Customer
        </template>

        Create a Customer

        The Customer master is at the heart of your sales transactions. Customers are linked in Quotations, Sales Orders, Invoices, and Payments. Customers can be either numbered or identified by name (you would typically do this based on the number of customers you have).

        Through Customer’s master, you can effectively track essentials like:

        Customer’s multiple address and contacts
        Account Receivables
        Credit Limit and Credit Period

        Show Customer List
        <template #footer>

          <UButton
              icon="i-heroicons-pencil-square"
              size="sm"
              color="primary"
              variant="solid"
              to="/partners/partners/create"
              label="Create Business Partner"
              :trailing="false"
          />

        </template>
      </UCard>

    </template>


    <template #3="{ item }">

      <UCard>
        <template #header>
          Create your first Sales-Order
        </template>

        All about Sales Order

        A Sales Invoice is a bill that you send to your Customers against which the Customer makes the payment. Sales Invoice is an accounting transaction. On submission of Sales Invoice, the system updates the receivable and books income against a Customer Account.

        Show Sales Invoice List

        <br>

        <nuxt-link to="/sales/orders/">Show Orders List</nuxt-link>
        <template #footer>

          <UButton
              icon="i-heroicons-pencil-square"
              size="sm"
              color="primary"
              variant="solid"
              to="/sales/orders/create"
              label="Create Sales Order"
              :trailing="false"
          />

        </template>
      </UCard>

    </template>
  </UTabs>
</template>

