geer-builder 1.2.643 → 1.2.644

package/GPayBills.vue

@@ -0,0 +1,756 @@
+<template>
+    <div class="pay-bills">
+        <div class="message-output q-mb-lg" v-if="!(this.user_info.hasOwnProperty('verified') && this.user_info.verified === true)">
+            <div class="verification-required">
+                <div class="title">Verification Required</div>
+                <div class="desc">You need to <b>GET VERIFIED</b> to transact with this module. Please click the <b>"GET VERIFIED"</b> button.</div>
+            </div>
+            <q-btn class="q-mt-lg" @click="is_g_user_verification_dialog_open = true" label="Get Verified"/>
+        </div>
+        <div class="wallet-grid" style="display:block;grid-template-columns:1fr 1fr" v-if="this.user_info.hasOwnProperty('verified') && this.user_info.verified === true">
+            <div class="section-holder" style="margin-bottom:50px;">
+                <div class="value" v-if="current_slot_info && current_slot_info.wallet >= 0"> Php {{ $_formatNumber(current_slot_info.wallet, { decimal: 2 }) }}</div>
+                <div class="label">Wallet Balance</div>
+            </div>
+        </div>
+        <q-form @submit="onSubmit">
+            <div class="details-primary row-grid">
+                <q-input filled dense required v-model="form.details.first_name" placeholder="Enter your First Name" label="First Name" />
+                <q-input filled dense v-model="form.details.middle_name" placeholder="Enter your Middle Name" label="Middle Name" />
+                <q-input filled dense required v-model="form.details.last_name" placeholder="Enter your Last Name" label="Last Name" />
+                <q-input filled dense required type="number" v-model="form.details.contact_number" placeholder="Enter your Number" label="Mobile Number ( Must be 11 digits )" />
+            </div>
+
+            <!-- OPTIONS -->
+            <div class="required-fields row-grid">
+                <q-select dense filled v-model="method_type" option_label="label" option_id="id" :options="method_options" label="Select a type of method" />
+                <q-select v-if="pay_to_collect" dense filled v-model="selected_hub" option-label="full_name" option-value="active_slot" :options="hub_options" label="Select preferred hub" />
+                <q-select dense filled @input="selected_category_option=null; selected_options_field=null" v-model="bills_category" option_label="label" option_id="id" :options="bills_options" label="Select a type of billing" />
+                <q-select dense filled @input="selected_options_field=selected_category_option.field" v-model="selected_category_option" option_label="label" option_id="id" :options="category_options" label="Options" />
+                <q-input filled dense required v-model="form.amount_to_pay" label="Amount to Pay" />
+            </div>
+            
+            <div class="details-primary" style="padding-top:50px;">
+                *Necessary Details 
+            </div>
+            <div v-if="selected_category_option">
+                <div v-for="(fields, i) in selected_options_field" :key="i">
+                    <div class="details-needed" style="padding-top:20px;">
+                        <div class="details-primary" v-if="fields.is_multiple == false">
+                            <q-input :required="fields.is_required" filled dense v-model="selected_options_field[i].value" :label="fields.is_required == false ? fields.field_name + ' (Optional)' : fields.field_name+'' " autocomplete="off" />
+                        </div>
+                        <div class="details-primary" v-if="fields.is_multiple == true">
+                                                                                                            
+                            <q-select :required="fields.is_required" dense filled v-model="selected_options_field[i].value" option-label="field_name" option-value="field_name" :options="fields.field_choices" :label="fields.field_name" />
+                        </div>
+                    </div> 
+                </div>
+            </div>
+            <div v-else>
+                <div class="details-primary" style="padding-top:30px;">
+                    <b>Choose a billing type and options first.</b>
+                </div>
+            </div>
+            
+            <!-- <div class="details q-mt-lg">
+                <div class="label q-mb-sm">*Necessary Details <span>( You must include necessary details on this section. )</span></div>
+                <q-input filled v-model="form.bills_details" type="textarea" label="Please input necessary details" required />
+            </div> -->
+
+            <div class="q-mt-lg" align="left" style="padding-top:50px;" v-if="this.user_info.hasOwnProperty('verified') && this.user_info.verified === true">
+                <q-btn type="submit" :loading="submit_loading" label="Submit" color="primary" :disable="selected_category_option ? false : true"></q-btn>
+            </div>
+        </q-form>
+        <div align="right" class="q-mb-md q-mt-xl filters" style="padding-top:50px;">
+            <q-input style="width: 300px;" label="Search Here" outlined="" v-model="filterr" />
+            <q-select outlined style="min-width: 200px; width: fit-content" v-model="filter_method" option-label="label" option-value="id" :options="filter_method_options" label="Filter Payment Method" />
+            <q-select outlined style="min-width: 200px; width: fit-content" v-model="filter" :options="['All', 'Pending', 'For Collection', 'Rejected', 'Collected', 'For Processing', 'Processed']" label="Filter" />
+        </div>
+
+            <q-table    
+            :title="table_title"
+            :loading="table_loading"
+            @row-click="viewBillDetails"
+            separator="cell"
+            bordered
+            flat
+            :filter="filterr"
+            :data="!table_loading ? bills_payment_data : []"
+            :columns="table_column"
+            :pagination.sync="pagination"  
+            >
+        </q-table>
+
+        <!-- CREATE DIALOG -->
+        <q-dialog v-model="is_view_bill_details_dialog">
+            <bill-details-dialog :row="row" @closePopup="is_view_bill_details_dialog = false"></bill-details-dialog>
+        </q-dialog>
+
+        <q-dialog v-model="is_open_paybills_form">
+            <q-card class="paybills-page-dialog">
+                <q-card-section>
+                    <div class="page-title text-center">Pay Bills</div>
+                    <div class="wallet-grid">
+                        <div class="section-holder" style="margin-bottom:50px;">
+                            <div class="label">Wallet : </div>
+                            <div class="value" v-if="current_slot_info && current_slot_info.wallet >= 0"> {{ $_formatNumber(current_slot_info.wallet, { decimal: 2 }) }}</div>
+                        </div>
+                    </div>
+                    <q-form @submit="onSubmit">
+                        <div class="details-primary first-child">
+                            <q-input filled dense required v-model="form.details.first_name" placeholder="Enter your First Name" label="First Name" />
+                            <q-input filled dense v-model="form.details.middle_name" placeholder="Enter your Middle Name" label="Middle Name" />
+                            <q-input filled dense required v-model="form.details.last_name" placeholder="Enter your Last Name" label="Last Name" />
+                            <q-input filled dense required type="number" v-model="form.details.contact_number" placeholder="Enter your Number" label="Mobile Number ( Must be 11 digits )" />
+                        </div>
+
+                        <!-- OPTIONS -->
+                        <div class="primary-details-wrap-container">
+                            <q-select dense filled @input="selected_category_option=null; selected_options_field=null" v-model="bills_category" option_label="label" option_id="id" :options="bills_options" label="Select a type of billing" />
+                            <q-select dense filled @input="selected_options_field=selected_category_option.field" v-model="selected_category_option" option_label="label" option_id="id" :options="category_options" label="Options" />
+                            <q-input filled dense required v-model="form.amount_to_pay" label="Amount to Pay" />
+                        </div>
+                        
+                        <div class="details-primary" style="padding-top:50px;">
+                            *Necessary Details 
+                        </div>
+                        <div v-if="selected_category_option" class="details-input-wrapper">
+                            <div v-for="(fields, i) in selected_options_field" :key="i">
+                                <div class="details-needed" style="padding-top:20px;">
+                                    <div class="details-primary" v-if="fields.is_multiple == false">
+                                        <q-input :required="fields.is_required" filled dense v-model="selected_options_field[i].value" :label="fields.is_required == false ? fields.field_name + ' (Optional)' : fields.field_name+'' " autocomplete="off" />
+                                    </div>
+                                    <div class="details-primary" v-if="fields.is_multiple == true">
+                                                                                                                        
+                                        <q-select :required="fields.is_required" dense filled v-model="selected_options_field[i].value" option-label="field_name" option-value="field_name" :options="fields.field_choices" :label="fields.field_name" />
+                                    </div>
+                                </div> 
+                            </div>
+                        </div>
+                        <div v-else>
+                            <div class="details-primary" style="padding-top:30px;">
+                                <b>Choose a billing type and options first.</b>
+                            </div>
+                        </div>
+                        
+                        <!-- <div class="details q-mt-lg">
+                            <div class="label q-mb-sm">*Necessary Details <span>( You must include necessary details on this section. )</span></div>
+                            <q-input filled v-model="form.bills_details" type="textarea" label="Please input necessary details" required />
+                        </div> -->
+
+                        <div class="q-mt-lg" align="right" style="padding-top:50px;">
+                            <q-btn type="submit" :loading="submit_loading" label="Submit" color="primary" :disable="selected_category_option ? false : true"></q-btn>
+                        </div>
+                    </q-form>
+                </q-card-section>
+            </q-card>
+        </q-dialog>
+        <q-dialog persistent v-model="is_g_user_verification_dialog_open" :maximized="true" transition-show="slide-up" transition-hide="slide-down">
+            <div class="user-verification-dialog-holder">
+                <g-user-verification class="full-width"/>
+            </div>
+        </q-dialog>
+    </div>
+</template>
+
+<script>
+import GlobalMixins                 from './mixins/global_mixins.js';
+import DB_BILLS_PAYMENT             from './models/DB_BILLS_PAYMENT';
+import DB_USER                      from './models/DB_USER';
+import DB_USER_SHIPPING_ADDRESS     from './models/DB_USER_SHIPPING_ADDRESS';
+import BillDetailsDialog            from "./dialogs/BillDetailsDialog";
+import GUserVerification            from './GUserVerification';
+import {formatDate}                 from './utilities/DateUtils';
+import {formatNumber}               from './utilities/NumberUtils';
+import { log } from 'console';
+export default
+{
+    components: { BillDetailsDialog, GUserVerification },
+    filters: { },
+    data:() =>(
+    {
+        is_open_paybills_form: false,
+        public_settings:{},
+        table_data: [],
+        bill_credits_field:{},
+        category_list: [{"label": "Electricity", "id": "electricity",}, {"label": "Water Utilities", "id": "water_utilities"}, {"label": "Cable/Internet","id": "cable_w_internet"}, {"label": "Telecoms","id": "telecoms"}, {"label": "Credit Cards","id": "credit_card"}, {"label": "Loans","id": "loans"}, {"label": "Government","id": "government"}, {"label": "Insurance","id": "insurance"}, {"label": "Transportation","id": "transportation"}, {"label": "Real State","id": "real_state"}, {"label": "Healthcare","id": "healthcare"},{"label": "School","id": "school"}],
+        bills_options: [],
+        filterr:'',
+        bills_category:null,
+        selected_category_option:null,
+        selected_options_field:null,
+        submit_loading:false,
+        is_g_user_verification_dialog_open: false,
+        method_type: null,
+        pay_to_collect: false,
+        filter_method: { label: 'All', id: 'all' },
+        filter_method_options: [
+            {
+                label: 'All',
+                id: 'all'
+            },
+            {
+                label: 'Use Wallet',
+                id: 'MO-001'
+            },
+            {
+                label: 'Pay via Cash',
+                id: 'MO-002'
+            }
+        ],
+        selected_hub: null,
+        form: {
+            details       : 
+            {            
+                first_name    : null,
+                middle_name   : null,
+                last_name     : null,
+                contact_number: null,
+            },
+            bills :
+            {
+                category_id     : null,
+                category_label  : null,
+                option_label    : null,
+                option_id       : null,
+                fields          : {},
+            },
+            address: {
+                street: null,
+                barangay: null,
+                city: null,
+                province: null,
+                region: null,
+                postal_code: null,
+            },
+            amount_to_pay : null,
+            method_type: null,
+            selected_hub: null,
+        },
+        method_options: [
+            {
+                label: 'Use Wallet',
+                id: 'MO-001'
+            },
+            {
+                label: 'Pay via Cash',
+                id: 'MO-002'
+            }
+        ],
+        is_view_bill_details_dialog: false,
+        dialog_bills_payment: false,
+        bills_payment_data: [],
+        filter: "All",
+        row          : {},
+        table_title: 'All Request',
+        table_loading: false,
+        pagination  : { rowsPerPage: 5},
+        table_column:
+        [
+            { 
+                name    : 'status',
+                label   : 'Status',
+                field   : row => row.status,
+                format: val => `${val}`,
+                align   : 'left',
+            },
+            { 
+                name    : 'full_name',
+                label   : 'Full Name',
+                field   : row => row.details.full_name,
+                align   : 'left',
+                format: val => `${val}`,
+                sortable: true,
+            },
+            { 
+                name    : 'slot_code',
+                label   : 'SLOT CODE',
+                field   : row => row.slot_code,
+                align   : 'left',
+                format: val => `${val}`,
+                sortable: true,
+            },
+            { 
+                name    : 'bills_type',
+                label   : 'Bills Type',
+                field   : row => row.bills.category_label,
+                align   : 'left',
+                format: val => `${val}`,
+                sortable: true,
+            },
+            { 
+                name    : '_address_combined',
+                label   : 'Address',
+                field   : row => row._address_combined,
+                align   : 'left',
+                format: val => `${val}`,
+                sortable: true,
+            },
+            { 
+                name    : 'contact_number',
+                label   : 'Contact Number',
+                field   : row => row.details.contact_number,
+                align   : 'left',
+                format: val => `${val}`,
+                sortable: true,
+            },
+            { 
+                name    : 'created_date',
+                label   : 'Requested Date & Time',
+                field   : row => formatDate(row.created_date, 'MM/DD/YY (hh:mm A)'),
+                format: val => `${val}`,
+                align   : 'left',
+            },    
+            { 
+                name    : 'amount_to_pay',
+                label   : 'Paid amount',
+                field   : row => `Php${formatNumber(row.amount_to_pay, { decimal: 2 })}`,
+                format: val => `${val}`,
+                align   : 'left',
+            },
+            { 
+                name    : 'payment_method',
+                label   : 'Payment Method',
+                field   : row => row.method_type.label,
+                format  : val => `${val ? val:'-----'}`,
+                align   : 'left',
+            },    
+            { 
+                name    : 'gcash_ref_number',
+                label   : 'Reference Number',
+                field   : row => row.gcash_ref_number,
+                format  : val => `${val ? val:'-----'}`,
+                align   : 'left',
+            },    
+            { 
+                name    : 'response_message',
+                label   : 'Response Message',
+                field   : row => row.response_message,
+                format  : val => `${val ? val:'-----'}`,
+                align   : 'left',
+            }  
+        ],
+        hub_options: [],
+        user_default_address: null,
+    }),
+    watch:
+    {
+        filter()
+        {
+            this.getAllGcashRequest();
+        },
+        method_type()
+        {
+            if (this.method_type.id == 'MO-002') this.pay_to_collect = true;
+            else
+            {
+                this.pay_to_collect = false
+                this.selected_hub = null;
+            }
+            this.form.method_type = this.method_type;
+        },
+        selected_hub()
+        {
+            if (this.selected_hub != null) this.form.selected_hub = this.selected_hub.active_slot;
+            else this.form.selected_hub = null;
+        },
+        filter_method()
+        {
+            this.getAllGcashRequest();
+        }
+    },
+    async mounted() 
+    {   
+        this.$q.loading.show();
+        if(this.user_info.active_slot)
+        {
+            this.bill_credits_field = await this.$_getData('bill_credits_field');
+            this.public_settings = await this.$_getData('public_settings');
+            if(this.bill_credits_field) this.bills_options = this.bill_credits_field;
+            await this.$_getSlotInfo();
+        }
+        await this.getAllGcashRequest();
+        await this.getAddress();
+        await this.getHubOptions();
+        await this.getUserInfo();
+        this.$q.loading.hide();
+    },
+    methods: 
+    {
+        async getCollectorsLocations()
+        {
+            let collector = await new DB_USER().collection().where('hubs_slot', '==', this.form.selected_hub).where('collector', '==', true).get().then(res => res.docs.map(doc => Object.assign({}, doc.data(), { id: doc.id })));
+            let collector_location = null;
+            if (!(collector && collector.hasOwnProperty('length') && collector.length > 0)) return {response: false};
+            else 
+            {
+                for (let i = 0; i < collector.length; i++) {
+                    const element = collector[i];
+                    let tag_location = element.tag_location;
+                    if(tag_location.hasOwnProperty('length') && tag_location.length > 0)
+                    {
+                        for (let i = 0; i < tag_location.length; i++) {
+                            const ins_element = tag_location[i];
+                            if (ins_element.brgy_code === this.user_default_address.barangay.brgy_code) collector_location = {location_code: ins_element.brgy_code, has_collector: true};
+                        }
+                    }
+                }
+                return collector_location;
+            }
+        }, 
+        async onSubmit()
+        {
+            let is_undefined = false;
+            let is_required  = false;
+            this.form.bills.category_id     = this.bills_category.id;
+            this.form.bills.category_label  = this.bills_category.label;
+            this.form.bills.option_id       = this.selected_category_option.id;
+            this.form.bills.option_label    = this.selected_category_option.label;
+            this.form.bills.fields          = this.selected_options_field;
+            this.form.bills.fields.forEach((d, i) =>
+            {
+                if(d.value == undefined)
+                {
+                    is_undefined = true;
+                }
+
+                if(typeof d.value == "object")
+                {
+                    this.form.bills.fields[i].value = this.form.bills.fields[i].value.field_name;
+                }
+            });
+
+            this.submit_loading = true;
+            this.$q.loading.show();
+            if (this.form.amount_to_pay < 1) 
+            {
+                this.$q.dialog({title:'Invalid Input', message: `The amount you've entered is invalid.`});
+            }
+            else if (!(this.form.method_type))
+            {
+                this.$q.dialog({title:'Incomplete Form Request', message: 'Please fill up the form.'});
+            }
+            else if (is_undefined == true)
+            {
+                this.$q.dialog({title:'Incomplete Form Request', message: 'Please fill up the form.'});
+            }
+            else if (!(this.form.bills.category_id)) 
+            {
+                this.$q.dialog({title:'Incomplete Form Request', message: 'Kindly select a type of billing to pay.'});
+            }
+            else if (!(this.form.bills.option_id)) 
+            {
+                this.$q.dialog({title:'Incomplete Form Request', message: 'Kindly select a billing option to pay.'});
+            }
+            else if (!(this.form.details.contact_number && this.form.details.contact_number.length === 11))
+            {
+                this.$q.dialog({title:'Invalid number', message: 'Kindly input your number properly.'});
+            }
+            else if (!this.current_slot_info)
+            {
+                this.$q.dialog({ title: `Something's not quite right`, message: "No slot available" });
+            }
+            else
+            {
+                try
+                {
+                    if (this.form.method_type.id === "MO-002") 
+                    {
+                        if (!(this.form.selected_hub)) 
+                        {
+                            this.$q.dialog({title:'Field is Required', message: 'Please select your preferred hub. Thank your.'});
+                            this.submit_loading = false;
+                            return this.$q.loading.hide();
+                        }
+                        let collector =  await this.getCollectorsLocations();
+                        if (!(collector && collector.hasOwnProperty('has_collector') && collector.has_collector === true)) 
+                        {
+                            this.$q.dialog({message: 'No collectors found in your location. Sorry for inconvenience.'});
+                            this.submit_loading = false;
+                            return this.$q.loading.hide();
+                        }
+                        else this.form.location_code = collector.location_code;
+                    }
+                    this.form.slot_code = this.current_slot_info.slot_code;
+                    let res = await this.$_fbCall('memberBillsPayment', this.form);
+                    this.$q.dialog({ title: `Success!`, message: 'Bills Payment has been succesfully submitted.', html: true });
+
+                    this.form.details.first_name           = null;
+                    this.form.details.middle_name          = null;
+                    this.form.details.last_name            = null;
+                    this.form.details.contact_number       = null;
+                    this.form.amount_to_pay                = null;
+                    this.form.bills.category_id            = null;
+                    this.form.bills.category_label         = null;
+                    this.form.bills.option_id              = null;
+                    this.form.bills.option_label           = null;
+                    this.form.bills.fields                 = {};
+                    this.bills_category                    = null;
+                    this.selected_category_option          = null;
+                    this.selected_options_field            = null;
+                }
+                catch (error)
+                {
+                    this.submit_loading = false;
+                    
+                    this.$q.dialog({ title: `Something's not quite right`, message: error.message });
+                }
+            }
+            this.$q.loading.hide();
+            this.submit_loading = false;
+        },
+        async getAddress()
+        {
+            if (this.user_info && this.user_info.hasOwnProperty('verified') && this.user_info.verified === true) {
+                let address = await new DB_USER_SHIPPING_ADDRESS(this.user_info.uid).collection().where('default', '==', true).get();
+                this.user_default_address = address.docs[0].data();
+            }
+        }, 
+        async getUserInfo()
+        {
+            if (this.user_info) 
+            {
+                this.form.details.contact_number = this.user_info.contact_number
+                if (this.user_default_address) {
+                    this.form.details.first_name = this.user_default_address.first_name;
+                    if (this.user_default_address.hasOwnProperty('middle_name')) this.form.details.middle_name = this.user_default_address.middle_name;
+                    this.form.details.last_name = this.user_default_address.last_name
+                    this.form.address.street= this.user_default_address.street;
+                    this.form.address.barangay= this.user_default_address.barangay.name;
+                    this.form.address.city= this.user_default_address.city.name;
+                    this.form.address.province= this.user_default_address.province.name;
+                    this.form.address.region= this.user_default_address.region.name;
+                    this.form.address.postal_code= this.user_default_address.postal_code;
+                }
+            }
+        },
+        async getAllGcashRequest()
+        {
+            this.$q.loading.show();
+            this.table_loading = true;
+            this.table_title = `${this.filter} Request`;
+
+            let filter_method = this.filter_method.id
+
+            let filter = '';
+            if(this.filter === 'For Collection') filter = 'for_collection';
+            else if(this.filter === 'For Processing') filter = 'for_processing';
+            else filter = this.filter.toLowerCase();
+
+            if (filter === 'all' && filter_method === 'all') await this.$bind('bills_payment_data', new DB_BILLS_PAYMENT().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).orderBy('created_date', 'desc'));
+            else if (filter === 'all' && filter_method != 'all') await this.$bind('bills_payment_data', new DB_BILLS_PAYMENT().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).where('method_type_id', '==', filter_method).orderBy('created_date', 'desc'));
+            else if (filter != 'all' && filter != 'collected' && filter_method === 'all') await this.$bind('bills_payment_data', new DB_BILLS_PAYMENT().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).where('status', '==', `${filter}`).orderBy('created_date', 'desc'));
+            else if (filter === 'collected' && filter_method === 'all') await this.$bind('bills_payment_data', new DB_BILLS_PAYMENT().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).where('collected', '==', true).orderBy('created_date', 'desc'));
+            else if (filter === 'collected' && filter_method != 'all') await this.$bind('bills_payment_data', new DB_BILLS_PAYMENT().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).where('method_type_id', '==', filter_method).where('collected', '==', true).orderBy('created_date', 'desc'));
+            else await this.$bind('bills_payment_data', new DB_BILLS_PAYMENT().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).where('status', '==', `${filter}`)
+            .where('method_type_id', '==', `${filter_method}`).orderBy('created_date', 'desc'));
+
+            if(filter == 'collected')
+            {
+                let new_data = [];
+                this.bills_payment_data.forEach(element => {
+                    if (element.collected === true) 
+                    {
+                        element.status = 'collected';
+                    }
+                    new_data.push(element)    
+                });
+    
+                this.bills_payment_data = new_data;
+            }
+
+            this.table_loading = false;
+            this.$q.loading.hide();
+        },
+        viewBillDetails(evt, data)
+        {
+            this.row = data;
+            this.is_view_bill_details_dialog = true;
+        },
+        async getAllHubs()
+        {
+            await this.$bind('table_data', new DB_USER().collection().where('hub', '==', true));
+            let new_table_data = [];
+            if (this.table_data && this.table_data.hasOwnProperty('length') && this.table_data.length > 0) 
+            {
+                for (let i = 0; i < this.table_data.length; i++) {
+                    const element = this.table_data[i];
+                    if(this.user_default_address.city.mun_code === element.address.city.mun_code) new_table_data.push(element);
+                }
+                return new_table_data;
+            }
+        },
+        async getHubOptions()
+        {
+            this.hub_options = await this.getAllHubs();
+        },
+    },  
+    computed: 
+    {        
+       category_options()
+       {
+          return this.bills_category ? (this.bills_category.hasOwnProperty("options") ? this.bills_category.options : null ) : null;
+       }
+    }
+}
+</script>
+<style lang="scss">
+.rc-holder
+{
+    width: 100%;
+}
+
+.wallet-grid{
+    // display: grid;
+    // grid-template-columns: 1fr;
+    text-align: right;
+    @media (max-width: 780px) {
+        grid-template-columns: 1fr !important; 
+    }
+    .value 
+    {
+        font-size: 20px;
+        font-weight: bold;
+    }
+}
+
+.pay-bills
+{
+    // display: grid;
+    row-gap: 10px;
+    .btn-wrapper
+    {
+        display: flex;
+        justify-content: space-between;
+        .q-btn 
+        {
+            background-color: #3887d1;
+            color: white;
+        }
+    }
+    .row-grid 
+    {
+        margin-bottom: 20px;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 15px;
+    }
+    .filters 
+    {
+        display: flex;
+        grid-gap: 10px;
+        justify-content: flex-end;
+    }
+    .message-output
+    {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 20px;
+        background-color: white;
+        border-left: 3px solid red;
+        .verification-required 
+        {
+            text-align: start;
+            .title 
+            {
+                font-size: 20px;
+                font-weight: bold;
+            }
+            .desc 
+            {
+                color: gray;
+            }
+        }
+    }
+}
+.q-dialog 
+{
+    .paybills-page-dialog
+    {
+        .primary-details-wrap-container
+        {
+            margin-top: 50px;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 10px;
+        }
+        .wallet-grid 
+        {
+            .section-holder
+            {
+                display: flex;
+                grid-gap: 10px;
+                .value 
+                {
+                    font-weight: 500;
+                    &::before 
+                    {
+                        // content: '';
+                    }
+                }
+            }
+        }
+        .page-title
+        {
+            display: grid;
+            justify-content: center;
+            color: #3887d1;
+            font-size: 20px;
+            width: 100%;
+            font-weight: 500;
+        }
+        .details
+        {
+            &-primary.first-child
+            {
+                display: grid;
+                grid-gap: 15px;
+                grid-template-columns: repeat(3, 1fr);
+            }
+            &-input-wrapper
+            {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                grid-gap: 10px;
+            }
+            .label
+            {
+                width: 100%;
+                display: flex;
+                column-gap: 5px;
+                justify-content: flex-start;
+                font-weight: 500;
+            }
+        }
+        .filters 
+        {
+            display: flex;
+            grid-gap: 10px;
+            justify-content: flex-end;
+        }
+        .action
+        {
+            display: grid;
+            justify-content: flex-end;
+            .q-btn
+            {
+                width: fit-content;
+            }
+        }
+        .required-fields 
+        {
+            margin-top: 50px;
+            display: grid;
+            grid-gap: 15px;
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+}
+</style>