POS

pos.vue

<div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8">
        <b-card class="mb-3">
        	<b-form inline>
            <label class="sr-only" for="inline-form-input-username">Cari Produk</label>
            <b-input-group class="mb-2 mr-sm-2 mb-sm-0" size="lg" style="width: 50%">
              <b-input id="search-product" placeholder="Cari produk..."></b-input>
              <b-input-group-append>
                <b-button>
                  <b-icon icon="search"></b-icon>
                </b-button>
              </b-input-group-append>
            </b-input-group>

            <b-button class="mr-sm-2" variant="warning" size="lg">Tangguhkan</b-button>
            <b-button variant="danger" size="lg" title="Batalkan penjualan">
              <b-icon icon="x"></b-icon>
            </b-button>

          </b-form>
        </b-card>
        	
        <b-card>
          <b-table hover :items="items">
          	<template v-slot:cell(action)="data">
              <b-button variant="danger" size="sm" title="Batalkan penjualan">
                <b-icon icon="trash"></b-icon>
              </b-button>
            </template>
          </b-table>
        </b-card>
      </div>
      
      <div class="col-md-4">
        <b-card>
          <b-media>
            <template v-slot:aside>
              <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
            </template>

            <h5 class="mt-0">{{ customer.name }} ({{ customer.number }})</h5>
            <b-progress class="mb-2" :max="100" show-value>
              <b-progress-bar :value="customer.remaining_plafon" :label="`${customer.remaining_plafon}%`" variant="danger"></b-progress-bar>
              <b-progress-bar :value="customer.plafon_available" :label="`${customer.plafon_available}%`" variant="success"></b-progress-bar>
            </b-progress>
          </b-media>
        </b-card>
      </div>
    </div>
  </div>
</div>