approval update without header.vue

<template>
    <Page class="page">
        <ActionBar>
            <!-- <ActionItem ios.position="left" android.position="popup"></ActionItem>
            <ActionItem ios.systemIcon="8" android.systemIcon="ic_menu_black_24dp"></ActionItem>
            <NavigationButton icon="~/assets/images/Icon-Back.png" (tap)="goBack()"></NavigationButton> -->

                <!-- <GridLayout rows="auto" columns="*,auto,auto">
                    <Image col="0" row="0" src="~/assets/images/Icon-Back.png" class="image"/>
                    <Label col="0" row="0" text="Daftar Approval" fontSize="18" />
                </GridLayout> -->

            <!-- <StackLayout orientation="horizontal">
                <Image src="~/assets/images/Icon-Back.png" width="20" height="20"/>
                <Label text="Daftar Approval" fontSize="18" />
            </StackLayout> -->
            <GridLayout rows="auto" columns="75,*,75" id="header">
        <Label col="0" row="0" class="fa icon" :text="'fa-align-justify' | fonticon"/>
        <Label col="1" row="0" text="Daftar Approval" horizontalAlignment="center" />
    </GridLayout>
        </ActionBar>
            <ListView class="list-group" for="item in listViewData" :key="index">
                <v-template>
                    <GridLayout rows="auto" columns="auto,*">
                            <Image col="0" row="0" :src="item.imageUrl" class="item-image" stretch="aspectFill" />
                        <GridLayout col="1" row="0" rows="45,45" columns="150,*,*">
                            <Label col="0" row="0" :text="item.title" class="item-title" />
                            <Label col="0" row="1" :text="item.description" class="item-description" />
                            <Label col="1" row="1" :text="item.price" class="item-price" />
                            <Label col="2" row="1" :text="item.time" class="item-time" />
                        </GridLayout>
                    </GridLayout>
                </v-template>
            </ListView>
    </Page>
</template>

<script>
    // import Header from "./Header";

    import {
        isIOS,
        isAndroid
    } from "tns-core-modules/platform";
    export default {
        created() {
            console.log("is IOS platform: " + isIOS);
            console.log("is Android platform: " + isAndroid);
        },
        data() {
            return {
                // isIOS: false,
                listViewData: [{
                        title: "Maximo: PO1900023",
                        description: "COO Package Rosemount",
                        price: "Rp. 23,000,000",
                        time: "30 min ago",
                        imageUrl: "~/assets/images/Icon-Face.png"
                    },
                    {
                        title: "E-Payroll: 78273",
                        description: "Galih Satriaji",
                        price: "Rp.7,450,000",
                        time: "45 min ago",
                        imageUrl: "~/assets/images/Icon-Face.png"
                    },
                    {
                       title: "E-Payroll: 78273",
                        description: "Galih Satriaji",
                        price: "Rp.7,450,000",
                        time: "45 min ago",
                        imageUrl: "~/assets/images/Icon-Face.png"
                    },
                    {
                        title: "E-Payroll: 78273",
                        description: "Galih Satriaji",
                        price: "Rp.7,450,000",
                        time: "45 min ago",
                        imageUrl: "~/assets/images/Icon-Face.png"
                    },
                    {
                        title: "E-Payroll: 78273",
                        description: "Galih Satriaji",
                        price: "Rp.7,450,000",
                        time: "45 min ago",
                        imageUrl: "~/assets/images/Icon-Face.png"
                    },
                    {
                       title: "E-Payroll: 78273",
                        description: "Galih Satriaji",
                        price: "Rp.7,450,000",
                        time: "45 min ago",
                        imageUrl: "~/assets/images/Icon-Face.png"
                    },
                    {
                        title: "E-Payroll: 78273",
                        description: "Galih Satriaji",
                        price: "Rp.7,450,000",
                        time: "45 min ago",
                        imageUrl: "~/assets/images/Icon-Face.png"
                    }
                ]
            };
        },
        methods: {
            onItemTap() {}
        }
        // components: {
        //     Header
        // }
    };
</script>

<style scoped>
    /* action-bar {
        background-color: transparent;
    } */

    .item-image {
        width: 58;
        height: 58;
        border-radius: 30;
        margin: 10;
    }

    .item-title {
        color: #1a1919;
        margin-top: 20;
        font-size: 13;
        font-weight: bold;
    }

    .item-description {
        font-size: 12;
        color: #999999;
        margin-bottom: 20;
    }

    .item-price {
        align-content: left;
        color: #80aaff;
        margin-bottom: 20;
        font-size: 12;
    }

    .item-time {
        align-content: right;
        color: #999999;
        font-size: 12;
        margin-bottom: 20;
        margin-right: 5;
    }

    .image {
        width: 20;
        height: 20;
        align-content: left;
    }

    #header .btn .icon {
        padding: 0;
        margin: 0;
    }

    #header .btn.menu .icon {
        height: 60%;
    }

    #header .btn.pp .icon {
        border: 2px solid #ffffff;
        border-radius: 100%;
    }

</style>