<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Home Service</title>
  <link rel="stylesheet" href="../libs/vendor/css/google-fonts.css">
  <link rel="stylesheet" href="../libs/vendor/css/vuetify.min.css">
  <style>
    [v-cloak] {
      display: none
    }
  </style>
</head>

<body>
  <div v-cloak id="app">
    <v-app id="inspire">

      <v-navigation-drawer v-model="drawer" temporary  absolute app>


 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="purple">
                  <v-icon >home</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Home
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="lime">
                  <v-icon >contact_mail</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Front Office
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="indigo">
                  <v-icon >games</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Process
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="yellow">
                  <v-icon >folder_special</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Special Order
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="red">
                  <v-icon >equalizer</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Quality Control
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="green">
                  <v-icon >library_books</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Report
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="grey">
                  <v-icon >settings</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
settings
 </div>


      </v-navigation-drawer>





      <v-toolbar color="deep-purple" dark fixed app>
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <v-toolbar-title>Home Service</v-toolbar-title>
        <v-spacer></v-spacer>

        <img src="../src/assets/logo.png" height="60px">



        <div class="text-xs-center">
      <v-dialog v-model="dialog" width="500" >
        <v-btn flat icon slot="activator" color="white" dark>
          <v-badge color="red">
            <span slot="badge">3</span>
            <v-icon >
              mail
            </v-icon>
          </v-badge>
        </v-btn>

        <v-card>
          <v-card-title
            class="headline grey lighten-2"
            primary-title
          >
           Peringatan
          </v-card-title>

          <v-card-text>
 <p>1. Ini Contoh Peringatan</p>
 <p>2. Ini Contoh Peringatan</p>
 <p>3. Ini Contoh Peringatan</p>
            </v-card-text>

          <v-divider></v-divider>


        </v-card>
      </v-dialog>
      </div>

      </v-toolbar>
      <v-content>

        <v-layout>
          <v-flex>
            <v-card  color="white">

              <v-layout text-xs-center >
                <v-flex xs12 sm6 xs3>
                  <v-card class="mx-2" >
                      <v-menu ref="menu2" :close-on-content-click="false" v-model="menu2" :nudge-right="40" :return-value.sync="date" lazy transition="scale-transition"
                        offset-y full-width min-width="290px" >
                        <v-text-field slot="activator" v-model="date" label="Start Date" prepend-icon="event" readonly></v-text-field>
                        <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
                      </v-menu>

                  </v-card>
                </v-flex>
                <v-flex xs12 sm6 xs3>
                  <v-card  class="mx-2"   >
                        <v-menu ref="menu3" :close-on-content-click="false" v-model="menu3" :nudge-right="40" :return-value.sync="date" lazy transition="scale-transition"
                          offset-y full-width min-width="290px" >
                          <v-text-field slot="activator" v-model="date" label="End Date" prepend-icon="event" readonly></v-text-field>
                          <v-date-picker v-model="date" @input="$refs.menu3.save(date)"></v-date-picker>
                        </v-menu>

                  </v-card>
                </v-flex>
                <v-flex xs12 sm6 xs3>
                  <v-card  class="mx-2" height="68px"  >
                    <v-select    :items="dropdown"   label="Status"   solo ></v-select>
                  </v-card>
                </v-flex>
                <v-flex xs12 sm6 xs3>
                  <v-card class="mx-2" height="68px"  >
                     <v-text-field   flat label="Search" prepend-inner-icon="search" solo-inverted ></v-text-field>
                  </v-card>
                </v-flex>
              </v-layout>

            </v-card>
          </v-flex>
        </v-layout>



        <v-container grid-list-lg  >
          <v-layout justify-center align-center >


            <v-data-table  :headers="headers" :items="desserts" hide-actions class="elevation-1" >
              <template slot="items" slot-scope="props">
                <td>{{ props.item.name }}</td>
                <td class="text-xs-left">{{ props.item.calories }}</td>
                <td class="text-xs-left">{{ props.item.fat }}</td>
                <td class="text-xs-left">{{ props.item.carbs }}</td>
                <td class="text-xs-left">{{ props.item.protein }}</td>
                <td class="text-xs-left">{{ props.item.iron }}</td>
                <td class="text-xs-left">{{ props.item.iron }}</td>
                <td class="text-xs-left">{{ props.item.iron }}</td>
                <td class="text-xs-left">{{ props.item.iron }}</td>
                <td class="text-xs-left">{{ props.item.iron }}</td>
                <td class="text-xs-left">{{ props.item.iron }}</td>
                <td class="text-xs-left">{{ props.item.iron }}</td>
              </template>
            </v-data-table>
          </v-layout>
        </v-container>
      </v-content>
      <v-footer color="deep-purple" app>
        <span class="white--text">&copy; 2018</span>
      </v-footer>
    </v-app>

  </div>

  <!-- Vendor -->
  <script src="../libs/vendor/vue.min.js"></script>
  <script src="../libs/vendor/vuetify.js"></script>
  <!-- App Script -->
  <script>
    new Vue({
      el: '#app',
      data: {
        date: null,
        menu2: false,
          menu3: false,
        dialog: false,
        drawer: null,
        fav: true,
      menu: false,
      message: false,
      hints: true,

      items: [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' }
      ],

      dropdown: ['Foo', 'Bar', 'Fizz', 'Buzz'],

        headers:  [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' }

        ] ,
        desserts: [
          {
            value: false,
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            value: false,
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            value: false,
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            value: false,
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            value: false,
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            value: false,
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            value: false,
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            value: false,
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            value: false,
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            value: false,
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]

      },
      props: {
        source: String
      }




    });

  </script>
</body>

</html>
