diff --git a/src/pages/Account/invoice.vue b/src/pages/Account/invoice.vue
index 081d097..14529a6 100644
--- a/src/pages/Account/invoice.vue
+++ b/src/pages/Account/invoice.vue
@@ -1,64 +1,577 @@
 <template>
   <v-container fluid class="body-color">
-    <!-- ****** PROFILE VIEW SECTION DATA ******  -->
-    <!-- <v-dialog v-model="dialog1" max-width="600px">
-      <v-card>
-        <v-flex align-center justify-center layout text-xs-center>
-          <v-avatar size="50px" style="position:absolute; top:20px;">
-            <img src="/static/icon/user.png" />
-          </v-avatar>
+    <!-- ****** Edit INVOICE ****** -->
+    <v-dialog v-model="editInvoiceDialog">
+      <v-card flat class="text-xs-center white--text">
+        <v-layout>
+          <v-flex xs12 class="card-styles pa-2">
+            <label class="title text-xs-center">Edit Invoice</label>
+            <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-flex xs12 sm12>
+          <v-container fluid grid-list-md>
+            <v-layout wrap>
+              <v-flex xs12 sm12 md5>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Invoice</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-form ref="form" v-model="valid" lazy-validation class="py-4">
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
+                      </v-flex>
+                      <v-flex xs6 class="ml-3">
+                        <v-select
+                          :items="addclass"
+                          label="Select Class"
+                          v-model="invoiceData.classId"
+                          item-text="classNum"
+                          item-value="_id"
+                          :rules="classRules"
+                          @change="getAllStudents()"
+                          required
+                        ></v-select>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
+                      </v-flex>
+                      <v-flex xs6 class="ml-3">
+                        <v-select
+                          :items="studentList"
+                          label="Select Student"
+                          v-model="invoiceData.studentId"
+                          item-text="name"
+                          item-value="_id"
+                          :rules="inchargeRules"
+                          @change="selectAllStudent()"
+                          required
+                        ></v-select>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right">Date:</label>
+                      </v-flex>
+                      <v-flex xs6 class="ml-3">
+                        <v-menu
+                          ref="menu1"
+                          :close-on-content-click="false"
+                          v-model="menu1"
+                          :nudge-right="40"
+                          lazy
+                          :return-value.sync="invoiceData.date"
+                          transition="scale-transition"
+                          offset-y
+                          full-width
+                          min-width="290px"
+                        >
+                          <v-text-field
+                            slot="activator"
+                            :rules="dateRules"
+                            v-model="invoiceData.date"
+                            placeholder="Select date"
+                          ></v-text-field>
+                          <v-date-picker
+                            v-model="invoiceData.date"
+                            @input="$refs.menu1.save(invoiceData.date)"
+                          ></v-date-picker>
+                        </v-menu>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
+                      </v-flex>
+                      <v-flex xs6 class="ml-3">
+                        <v-select
+                          :items="paymentStatus"
+                          v-model="invoiceData.paymentStatus"
+                          item-text="name"
+                          item-value="value"
+                          label="Select Payment Status"
+                          @change="getPayMethodList"
+                          :rules="paymentStatusRules"
+                          required
+                        ></v-select>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout v-show="showPayMethods">
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right">Payment Method:</label>
+                      </v-flex>
+                      <v-flex xs6 class="ml-3">
+                        <v-select
+                          :items="paymentMethods"
+                          v-model="invoiceData.paymentMethod"
+                          label="Select Payment Method"
+                          required
+                        ></v-select>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs12 sm11>
+                        <v-card-actions>
+                          <v-spacer></v-spacer>
+                          <v-btn
+                            @click="update"
+                            round
+                            dark
+                            :loading="loading"
+                            class="add-button"
+                          >Update</v-btn>
+                        </v-card-actions>
+                      </v-flex>
+                    </v-layout>
+                  </v-form>
+                </v-card>
+              </v-flex>
+              <v-flex xs12 sm12 md7>
+                <v-card>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Fee Type List</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout>
+                    <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <label class="right title">Fee Type:</label>
+                    </v-flex>
+                    <v-flex xs8 sm4>
+                      <v-select
+                        :items="feeTypes"
+                        :rules="feeTypeRules"
+                        v-model="invoiceData.feeTypeName"
+                        item-text="feeType"
+                        item-value="feeType"
+                        label="Select Fee Type"
+                      ></v-select>
+                    </v-flex>
+                    <v-flex xs4 sm6>
+                      <v-btn
+                        color="open-dialog-button"
+                        round
+                        dark
+                        class="right mt-3"
+                        @click="selectFeeType"
+                      >ADD</v-btn>
+                    </v-flex>
+                  </v-layout>
+                  <table class="feeTypeTable tableRsponsive">
+                    <tr class="info white--text">
+                      <th>#</th>
+                      <th>Fee Type</th>
+                      <th>Amount</th>
+                      <th>Discount(%)</th>
+                      <th>Subtotal</th>
+                      <th>Paid Amount</th>
+                      <th>Action</th>
+                    </tr>
+                    <tr
+                      v-show="showFeeType"
+                      v-for="(invoiceData, index) in feeTypeData"
+                      :key="index"
+                      v-on:keyup="getAmmountDetails(feeType)"
+                    >
+                      <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
+                      <td style="width:120px" class="tdFeeType">
+                        <v-text-field
+                          :rules="feeTypeNameRules"
+                          placeholder="fill your Fee Type"
+                          v-model="invoiceData.feeTypeName"
+                        ></v-text-field>
+                      </td>
+                      <td>
+                        <v-text-field
+                          :rules="amountRules"
+                          placeholder="fill your Amount"
+                          v-model="invoiceData.amount"
+                          type="number"
+                        ></v-text-field>
+                      </td>
+                      <td class="tdFeeType">
+                        <v-text-field
+                          :rules="discountRules"
+                          placeholder="fill your Discount"
+                          v-model="invoiceData.discount"
+                          type="number"
+                        ></v-text-field>
+                      </td>
+                      <td class="tdFeeType">{{ invoiceData.subTotal }}</td>
+                      <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
+                        <v-text-field
+                          placeholder="fill your Paid Amount"
+                          v-model="invoiceData.paidAmount"
+                          type="number"
+                          :rules="paymentRules"
+                          :disabled="disabled"
+                        ></v-text-field>
+                      </td>
+                      <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
+                        <v-text-field
+                          placeholder="fill your Paid Amount"
+                          v-model="invoiceData.paidAmount"
+                          type="number"
+                          :rules="paymentRules"
+                          :disabled="disabled"
+                        ></v-text-field>
+                      </td>
+                      <td
+                        class="tdFeeType"
+                        v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
+                      >
+                        <v-text-field
+                          placeholder="fill your Paid Amount"
+                          v-model="invoiceData.paidAmount"
+                          :rules="paymentRules"
+                          type="number"
+                        ></v-text-field>
+                      </td>
+                      <td class="tdFeeType">
+                        <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
+                      </td>
+                    </tr>
+                    <tfoot>
+                      <tr>
+                        <td colspan="2" class="tdFeeType">Total:</td>
+                        <td class="tdFeeType" :rules="amountRules">{{ invoiceData.amount }}</td>
+                        <td class="tdFeeType" :rules="discountRules">{{ invoiceData.discount }}</td>
+                        <td class="tdFeeType" :rules="subtotalRules">{{ invoiceData.subTotal }}</td>
+                        <td class="tdFeeType" :rules="paidAmountRules">{{ invoiceData.paidAmount }}</td>
+                        <td class="tdFeeType">
+                          <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
+                        </td>
+                      </tr>
+                    </tfoot>
+                  </table>
+                </v-card>
+              </v-flex>
+            </v-layout>
+          </v-container>
         </v-flex>
-        <v-card-text>
-          <v-container grid-list-md>
+      </v-card>
+    </v-dialog>
+
+    <!-- ****PAYMENT INVOICE DIALOG -->
+    <v-dialog v-model="paymentInvoiceDialog">
+      <v-card flat class="text-xs-center white--text">
+        <v-layout>
+          <v-flex xs12 class="card-styles pa-2">
+            <label class="title text-xs-center">Payment Template</label>
+            <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-flex xs12 sm12>
+          <v-container fluid grid-list-md>
             <v-layout wrap>
-              <v-flex>
-                <br />
-                <br />
-                <v-layout>
-                  <v-flex xs5 sm6>
-                    <h5 class="right my-1">
-                      <b>Class Name:</b>
-                    </h5>
-                  </v-flex>
-                  <v-flex sm6 xs8>
-                  </v-flex>
-                </v-layout>
-                <v-layout>
-                  <v-flex xs5 sm6>
-                    <h5 class="right my-1">
-                      <b>Name:</b>
-                    </h5>
-                  </v-flex>
-                  <v-flex sm6 xs8>
-                    <h5 class="my-1">{{ editedItem.name }}</h5>
-                  </v-flex>
-                </v-layout>
-                <v-layout>
-                  <v-flex xs5 sm6>
-                    <h5 class="right my-1">
-                      <b>Class Incharge:</b>
-                    </h5>
-                  </v-flex>
-                  <v-flex sm6 xs8>
-                    <h5 class="my-1">{{ editedItem.name }}</h5>
-                  </v-flex>
-                </v-layout>
-                <v-layout>
-                  <v-flex xs5 sm6>
-                    <h5 class="right my-1">
-                      <b>Session:</b>
-                    </h5>
-                  </v-flex>
-                  <v-flex sm6 xs8>
-                    <h5 class="my-1">{{ editedItem.paymentStatus }}</h5>
-                  </v-flex>
-                </v-layout>
+              <v-flex xs12 sm12 md5>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Profile</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-card-text>
+                    <v-container>
+                      <v-layout wrap>
+                        <v-flex xs12>
+                          <v-layout>
+                            <v-flex
+                              xs12
+                              class="text-xs-center text-sm-center text-md-center text-lg-center"
+                            >
+                              <v-avatar size="80px">
+                                <img src="/static/icon/user.png" v-if="!invoiceList.profilePicUrl" />
+                                <img
+                                  :src="invoiceList.profilePicUrl"
+                                  v-else-if="invoiceList.profilePicUrl"
+                                />
+                              </v-avatar>
+                            </v-flex>
+                          </v-layout>
+                          <v-layout>
+                            <v-flex xs12 sm12>
+                              <h3 class="text-xs-center">
+                                <!-- <b>{{ invoiceList.studentId.name }}</b> -->
+                              </h3>
+                              <p class="text-xs-center grey--text">Student</p>
+                            </v-flex>
+                          </v-layout>
+                          <v-layout style="border: 1px solid lightgrey;">
+                            <v-flex xs6 sm6 class="pa-0">
+                              <h4 class="right">
+                                <b>Roll No :</b>
+                              </h4>
+                            </v-flex>
+                            <v-flex sm6 xs6 class="pa-0">
+                              <!-- <h4>{{ invoiceList.studentId.rollNo }}</h4> -->
+                            </v-flex>
+                          </v-layout>
+                          <v-layout style="border: 1px solid lightgrey;">
+                            <v-flex xs6 sm6 class="pa-0">
+                              <h4 class="right">
+                                <b>Class :</b>
+                              </h4>
+                            </v-flex>
+                            <v-flex sm6 xs6 class="pa-0">
+                              <!-- <h4>{{ invoiceList.classId.classNum }}</h4> -->
+                            </v-flex>
+                          </v-layout>
+                          <!-- <v-layout style="border: 1px solid lightgrey;">
+                            <v-flex xs6 sm6 class="pa-0">
+                              <h4 class="right">
+                                <b>Section :</b>
+                              </h4>
+                            </v-flex>
+                            <v-flex sm6 xs6 class="pa-0">
+                              <h4>{{ invoiceList.sectionId.name }}</h4>
+                            </v-flex>
+                          </v-layout>-->
+                        </v-flex>
+                      </v-layout>
+                    </v-container>
+                  </v-card-text>
+                </v-card>
+                <v-flex>
+                  <v-card>
+                    <v-flex xs12 sm12 md12 style="padding-top: 1%;">
+                      <v-card flat>
+                        <v-toolbar dark class="card-styles" flat>
+                          <v-spacer></v-spacer>
+                          <h3>Invoice</h3>
+                          <v-spacer></v-spacer>
+                        </v-toolbar>
+                      </v-card>
+                      <v-layout>
+                        <v-flex xs12>
+                          <v-layout>
+                            <v-flex xs4 class="pt-4 subheading">
+                              <label class="right">Payment Method:</label>
+                            </v-flex>
+                            <v-flex xs6 class="ml-3">
+                              <v-select
+                                :items="paymentMethods"
+                                v-model="invoiceList.paymentMethod"
+                                label="Select Payment Method"
+                                required
+                              ></v-select>
+                            </v-flex>
+                          </v-layout>
+                          <v-card-actions>
+                            <v-spacer class="hidden-xs-only"></v-spacer>
+                            <v-btn
+                              color="open-dialog-button"
+                              dark
+                              class="right mt-3"
+                              @click="save"
+                            >Add Payment</v-btn>
+                          </v-card-actions>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-card>
+                </v-flex>
+              </v-flex>
+              <v-flex xs12 sm12 md7>
+                <v-card>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Fee Type List</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <table class="feeTypeTable tableRsponsive">
+                    <tr class="info white--text">
+                      <th>#</th>
+                      <th>Fee Type</th>
+                      <th>Amount</th>
+                      <th>Discount(%)</th>
+                      <th>Subtotal</th>
+                      <th>Paid Amount</th>
+                      <th>Action</th>
+                    </tr>
+                    <tr
+                      v-show="showFeeType"
+                      v-for="(feeType, index) in feeTypeData"
+                      :key="index"
+                      v-on:keyup="getAmmountDetails(feeType)"
+                    >
+                      <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
+                      <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td>
+                      <td class="tdFeeType">
+                        <v-text-field
+                          placeholder="fill your Amount"
+                          v-model="feeType.amount"
+                          type="number"
+                        ></v-text-field>
+                      </td>
+                      <td class="tdFeeType">
+                        <v-text-field
+                          placeholder="fill your Discount"
+                          v-model="feeType.discount"
+                          type="number"
+                        ></v-text-field>
+                      </td>
+                      <td class="tdFeeType">{{ feeType.subTotal }}</td>
+                      <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
+                        <v-text-field
+                          placeholder="fill your Paid Amount"
+                          v-model="feeType.paidAmount"
+                          type="number"
+                          :disabled="disabled"
+                        ></v-text-field>
+                      </td>
+                      <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
+                        <v-text-field
+                          placeholder="fill your Paid Amount"
+                          v-model="feeType.paidAmount"
+                          type="number"
+                          :disabled="disabled"
+                        ></v-text-field>
+                      </td>
+                      <td
+                        class="tdFeeType"
+                        v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
+                      >
+                        <v-text-field
+                          placeholder="fill your Paid Amount"
+                          v-model="feeType.paidAmount"
+                          type="number"
+                        ></v-text-field>
+                      </td>
+                      <td class="tdFeeType">
+                        <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
+                      </td>
+                    </tr>
+                    <tfoot>
+                      <tr>
+                        <td colspan="2" class="tdFeeType">Total:</td>
+                        <td class="tdFeeType">{{ feeType.amount }}</td>
+                        <td class="tdFeeType">{{ feeType.discount }}</td>
+                        <td class="tdFeeType">{{ feeType.subTotal }}</td>
+                        <td class="tdFeeType">{{ feeType.paidAmount }}</td>
+                        <td class="tdFeeType">
+                          <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
+                        </td>
+                      </tr>
+                    </tfoot>
+                  </table>
+                </v-card>
               </v-flex>
             </v-layout>
           </v-container>
-        </v-card-text>
+        </v-flex>
+      </v-card>
+    </v-dialog>
+
+    <!-- ****** PROFILE VIEW SECTION DATA ******  -->
+    <v-dialog v-model="dialog1" max-width="800px">
+      <v-card flat class="text-xs-center white--text">
+        <v-layout>
+          <v-flex xs12 class="card-style pa-2">
+            <label class="title text-xs-center">View Payments</label>
+            <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-data-table
+          :headers="headersProfile"
+          :items="invoiceList"
+          :pagination.sync="pagination"
+          :search="search"
+        >
+          <template slot="items" slot-scope="props">
+            <tr class="tr">
+              <td class="td td-row">{{ props.index + 1 }}</td>
+              <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
+              <td class="text-xs-center td td-row">{{ props.item.paymentMethod }}</td>
+              <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
+              <td class="text-xs-center td td-row">{{ feeType.discount}}</td>
+
+              <td class="text-xs-center td td-row">
+                <router-link
+                  :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:props.item._id } }"
+                >
+                  <v-tooltip top>
+                    <img
+                      slot="activator"
+                      style="cursor:pointer; width:25px; height:25px; "
+                      class="mr-3"
+                      src="/static/icon/view.png"
+                    />
+                    <span>View</span>
+                  </v-tooltip>
+                </router-link>
+                <v-tooltip top>
+                  <img
+                    slot="activator"
+                    style="cursor:pointer;width:20px; height:20px; "
+                    class="mr-3"
+                    @click="deleteItem(props.item)"
+                    src="/static/icon/delete.png"
+                  />
+                  <span>Delete</span>
+                </v-tooltip>
+              </td>
+            </tr>
+          </template>
+          <v-alert
+            slot="no-results"
+            :value="true"
+            color="error"
+            icon="warning"
+          >Your search for "{{ search }}" found no results.</v-alert>
+        </v-data-table>
+        <!-- <table class="feeTypeTable tableRsponsive">
+          <tr style="color: black">
+            <th>#</th>
+            <th>Date</th>
+            <th>Paid By</th>
+            <th>Payment Amount</th>
+            <th>Weaver</th>
+            <th>Action</th>
+          </tr>
+          <tr>
+            <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
+            <td style="width:120px" class="tdFeeType">{{dates( editedItem.date) }}</td>
+            <td style="width:120px" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
+            <td style="width:120px" class="tdFeeType">{{ editedItem.totalAmount }}</td>
+            <td style="width:120px" class="tdFeeType">{{ editedItem.discount}}</td>
+            <td class="text-xs-center td td-row">
+              <router-link
+                :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
+              >
+                <v-tooltip top>
+                  <img
+                    slot="activator"
+                    style="cursor:pointer; width:25px; height:25px; "
+                    class="mr-3"
+                    src="/static/icon/view.png"
+                  />
+                  <span>View</span>
+                </v-tooltip>
+              </router-link>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer;width:20px; height:20px; "
+                  class="mr-3"
+                  @click="deleteItem(props.item)"
+                  src="/static/icon/delete.png"
+                />
+                <span>Delete</span>
+              </v-tooltip>
+            </td>
+          </tr>
+        </table>-->
       </v-card>
-    </v-dialog>-->
+    </v-dialog>
     <!-- ****** Invoice Table ****** -->
 
     <v-toolbar color="transparent" flat>
@@ -103,7 +616,7 @@
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1 }}</td>
-          <!-- <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> -->
+          <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
           <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
           <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
           <td
@@ -114,7 +627,7 @@
           >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
           <td
             class="text-xs-center td td-row"
-          >{{ props.item.totalPaidAmount ? props.item.totalSubTotal  - props.item.totalPaidAmount  : props.item.totalSubTotal  }}</td>
+          >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
             <span
               class="red lighten-1 py-1 px-2 white--text paymentStatus"
@@ -144,17 +657,16 @@
               </v-tooltip>
             </router-link>
             <span v-if="props.item.paymentStatus === 'NOT_PAID'">
-              <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact>
-                <v-tooltip top>
-                  <img
-                    slot="activator"
-                    style="cursor:pointer; width:20px; height:18px; "
-                    class="mr-3"
-                    src="/static/icon/edit.png"
-                  />
-                  <span>Edit</span>
-                </v-tooltip>
-              </router-link>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:18px; "
+                  class="mr-3"
+                  @click="editItem(props.item)"
+                  src="/static/icon/edit.png"
+                />
+                <span>Edit</span>
+              </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
@@ -165,7 +677,39 @@
                 />
                 <span>Delete</span>
               </v-tooltip>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:18px; "
+                  class="mr-3"
+                  @click="paymentItem(props.item)"
+                  src="/static/schoolIcons/Account.png"
+                />
+                <span>Payment</span>
+              </v-tooltip>
             </span>
+            <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:18px; "
+                  class="mr-3"
+                  @click="paymentItem(props.item)"
+                  src="/static/schoolIcons/Account.png"
+                />
+                <span>Payment</span>
+              </v-tooltip>
+            </span>
+            <v-tooltip top>
+              <img
+                slot="activator"
+                style="cursor:pointer; width:19px; height:19px;"
+                class="mr-3"
+                @click="profile(props.item)"
+                src="/static/icon/eye1.png"
+              />
+              <span>View Payment</span>
+            </v-tooltip>
           </td>
         </tr>
       </template>
@@ -177,11 +721,19 @@
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD INVOICE ****** -->
-    <v-dialog v-model="addInvoiceDialog" max-width>
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="color"
+    >{{ text }}</v-snackbar>
+    <v-dialog v-model="addInvoiceDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
-          <v-flex xs12  class="card-styles pa-2">
-            <label class="title text-xs-center ">Add Invoice</label>
+          <v-flex xs12 class="card-styles pa-2">
+            <label class="title text-xs-center">Add Invoice</label>
             <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
@@ -192,7 +744,7 @@
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
-                      <h3>Invoice</h3>
+                    <h3>Invoice</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-form ref="form" v-model="valid" lazy-validation class="py-4">
@@ -298,7 +850,13 @@
                         <v-card-actions>
                           <v-spacer></v-spacer>
                           <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
-                          <v-btn @click="submit" round dark :loading="loading"  class="add-button">Add</v-btn>
+                          <v-btn
+                            @click="submit"
+                            round
+                            dark
+                            :loading="loading"
+                            class="add-button"
+                          >Add</v-btn>
                         </v-card-actions>
                       </v-flex>
                     </v-layout>
@@ -307,14 +865,14 @@
               </v-flex>
               <v-flex xs12 sm12 md7>
                 <v-card>
-                  <v-toolbar dark class="card-styles " flat>
+                  <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
-                      <h3>Fee Type List</h3>
+                    <h3>Fee Type List</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout>
                     <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
-                      <label class="right title ">Fee Type:</label>
+                      <label class="right title">Fee Type:</label>
                     </v-flex>
                     <v-flex xs8 sm4>
                       <v-select
@@ -323,10 +881,18 @@
                         item-text="feeType"
                         item-value="feeType"
                         label="Select Fee Type"
+                        :rules="feeTypeRules"
+                        required
                       ></v-select>
                     </v-flex>
                     <v-flex xs4 sm6>
-                      <v-btn color="open-dialog-button" round dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
+                      <v-btn
+                        color="open-dialog-button"
+                        round
+                        dark
+                        class="right mt-3"
+                        @click="selectFeeType"
+                      >ADD</v-btn>
                     </v-flex>
                   </v-layout>
                   <table class="feeTypeTable tableRsponsive">
@@ -346,12 +912,18 @@
                       v-on:keyup="getAmmountDetails(feeType)"
                     >
                       <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
-                      <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td>
+                      <td
+                        style="width:120px"
+                        class="tdFeeType"
+                        :rules="feeTypeNameRules"
+                      >{{ feeType.feeTypeName }}</td>
                       <td class="tdFeeType">
                         <v-text-field
                           placeholder="fill your Amount"
                           v-model="feeType.amount"
                           type="number"
+                          :rules="amountRules"
+                          required
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">
@@ -359,23 +931,29 @@
                           placeholder="fill your Discount"
                           v-model="feeType.discount"
                           type="number"
+                          :rules="discountRules"
+                          required
                         ></v-text-field>
                       </td>
-                      <td class="tdFeeType">{{ feeType.subTotal }}</td>
-                      <!-- <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
+                      <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
+                      <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                           :disabled="disabled"
+                          :rules="paymentRules"
+                          required
                         ></v-text-field>
-                      </td> -->
+                      </td>
                       <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                           :disabled="disabled"
+                          :rules="paymentRules"
+                          required
                         ></v-text-field>
                       </td>
                       <td
@@ -386,6 +964,8 @@
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
+                          :rules="paymentRules"
+                          required
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">
@@ -395,10 +975,13 @@
                     <tfoot>
                       <tr>
                         <td colspan="2" class="tdFeeType">Total:</td>
-                        <td class="tdFeeType">{{ feeType.amount }}</td>
-                        <td class="tdFeeType">{{ feeType.discount }}</td>
-                        <td class="tdFeeType">{{ feeType.subTotal }}</td>
-                        <td class="tdFeeType">{{ feeType.paidAmount }}</td>
+                        <td class="tdFeeType" :rules="amountRules">{{ feeType.amount }}</td>
+                        <td class="tdFeeType" :rules="discountRules">{{ feeType.discount }}</td>
+                        <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
+                        <td class="tdFeeType" :rules="paidAmountRules">{{ feeType.paidAmount }}</td>
+                        <td class="tdFeeType">
+                          <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
+                        </td>
                       </tr>
                     </tfoot>
                   </table>
@@ -443,9 +1026,23 @@ export default {
     newActive: false,
     showFeeType: false,
     addInvoiceDialog: false,
+    editInvoiceDialog: false,
+    paymentInvoiceDialog: false,
     disabled: true,
     details: [],
     feeTypes: [],
+    invoiceData: [],
+    invoiceList: [
+      {
+        studentId: {
+          name: "",
+          rollNo: "",
+        },
+        classId: {
+          classNum: ""
+        }
+      }
+    ],
     menu1: false,
     paymentMethods: ["Cash", "Cheque"],
     feeType: {
@@ -455,6 +1052,13 @@ export default {
       subTotal: "0.00",
       feeTypeName: ""
     },
+    invoiceData: {
+      amount: "0.00",
+      discount: "0.00",
+      paidAmount: 0.0,
+      subTotal: "0.00",
+      feeTypeName: ""
+    },
     feeTypeData: [],
     pagination: {
       rowsPerPage: 10
@@ -464,6 +1068,13 @@ export default {
     dateRules: [v => !!v || " Date is required"],
     paymentStatusRules: [v => !!v || "Payment Status is required"],
     paymentMethodsRules: [v => !!v || "payment Method is required"],
+    feeTypeRules: [v => !!v || "Fee Type  is required"],
+    feeTypeNameRules: [v => !!v || "Fee Type Name is required"],
+    amountRules: [v => !!v || "Amount is required"],
+    discountRules: [v => !!v || "Discount is required"],
+    subtotalRules: [v => !!v || "Subtotal is required"],
+    paymentRules: [v => !!v || "Payment is required"],
+    paidAmountRules: [v => !!v || "Paid Amount is required"],
     headers: [
       {
         text: "No",
@@ -471,12 +1082,12 @@ export default {
         sortable: false,
         value: "No"
       },
-      // {
-      //   text: "Student",
-      //   value: "student",
-      //   sortable: false,
-      //   align: "center"
-      // },
+      {
+        text: "Student",
+        value: "name",
+        sortable: false,
+        align: "center"
+      },
       { text: "Class", value: "class", sortable: false, align: "center" },
       { text: "Total", value: "subtotal", sortable: false, align: "center" },
       { text: "Discount", value: "discount", sortable: false, align: "center" },
@@ -506,7 +1117,43 @@ export default {
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
-    invoiceList: [],
+    headersProfile: [
+      {
+        text: "No",
+        align: "",
+        sortable: false,
+        value: "No"
+      },
+      {
+        text: "Date",
+        value: "date",
+        sortable: false,
+        align: "center"
+      },
+      {
+        text: "Paid By",
+        value: "paymentMethod",
+        sortable: false,
+        align: "center"
+      },
+      {
+        text: "Payment Amount",
+        value: "paidAmount",
+        sortable: false,
+        align: "center"
+      },
+      { text: "Weaver", value: "discount", sortable: false, align: "center" },
+      // {
+      //   text: "Fine",
+      //   value: "fine",
+      //   sortable: false,
+      //   align: "center"
+      // },
+      { text: "Action", value: "", sortable: false, align: "center" }
+    ],
+    studentId: {
+      name: ""
+    },
     token: "",
     editedItem: {},
     invoiceData: {
@@ -537,11 +1184,21 @@ export default {
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
-    // profile(item) {
-    //   this.editedIndex = this.InvoiceList.indexOf(item);
-    //   this.editedItem = Object.assign({}, item);
-    //   this.dialog1 = true;
-    // },
+    profile(item) {
+      this.editedIndex = this.invoiceList.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialog1 = true;
+    },
+    editItem(item) {
+      this.editedIndex = this.invoiceList.indexOf(item);
+      this.invoiceData = Object.assign({}, item);
+      this.editInvoiceDialog = true;
+    },
+    paymentItem(item) {
+      this.editedIndex = this.invoiceList.indexOf(item);
+      this.invoiceList = Object.assign({}, item);
+      this.paymentInvoiceDialog = true;
+    },
     deleteItem(item) {
       let deleteInvoice = {
         invoiceId: item._id
@@ -557,6 +1214,7 @@ export default {
           this.snackbar = true;
           this.text = "Successfully delete Existing Invoice";
           this.color = "green";
+          this.dialog1 = false;
           this.getInvoiceList();
         })
         .catch(error => {
@@ -591,51 +1249,75 @@ export default {
         }
       }
       // if (this.$refs.form.validate()) {
-        let invoiceData = {
-          classId: this.invoiceData.classNum,
-          students: this.invoiceData.students,
-          date: this.invoiceData.date,
-          paymentStatus: this.invoiceData.paymentStatus,
-          paymentMethod: this.invoiceData.paymentMethod,
-          feeType: this.feeTypeData,
-          totalAmount: this.feeType.amount,
-          totalDiscount: this.feeType.discount,
-          totalSubTotal: this.feeType.subTotal,
-          totalPaidAmount: this.feeType.paidAmount
-        };
-        console.log("invoiceData",invoiceData)
-        // if (invoiceData.paymentStatus == "NOT_PAID") {
-        //   delete invoiceData.totalPaidAmount;
-        // }
-        http()
-          .post("/createInvoice", invoiceData)
-          .then(response => {
-            this.getInvoiceList();
-            this.snackbar = true;
-            this.text = "New Invoice added successfully";
-            this.color = "green";
-            this.clear();
-            this.feeTypeData = [];
-            if (this.feeTypeData.length == 0) {
-              this.feeType = {
-                amount: "0.00",
-                discount: "0.00",
-                paidAmount: "0.00",
-                subTotal: "0.00",
-                feeTypeList: ""
-              };
-            }
-            this.loading = false;
-            this.addInvoiceDialog = false;
-          })
-          .catch(error => {
-            this.snackbar = true;
-            this.text = error.response.data.errors[0].messages[0];
-            this.color = "error";
-            this.loading = false;
-          });
+      let invoiceData = {
+        classId: this.invoiceData.classNum,
+        students: this.invoiceData.students,
+        date: this.invoiceData.date,
+        paymentStatus: this.invoiceData.paymentStatus,
+        paymentMethod: this.invoiceData.paymentMethod,
+        feeType: this.feeTypeData,
+        totalAmount: this.feeType.amount,
+        totalDiscount: this.feeType.discount,
+        totalSubTotal: this.feeType.subTotal,
+        totalPaidAmount: this.feeType.paidAmount
+      };
+      console.log("invoiceData", invoiceData);
+      if (invoiceData.paymentStatus == "NOT_PAID") {
+        delete invoiceData.totalPaidAmount;
+      }
+      http()
+        .post("/createInvoice", invoiceData)
+        .then(response => {
+          this.getInvoiceList();
+          this.snackbar = true;
+          this.text = "New Invoice added successfully";
+          this.color = "green";
+          this.clear();
+          this.feeTypeData = [];
+          if (this.feeTypeData.length == 0) {
+            this.feeType = {
+              amount: "0.00",
+              discount: "0.00",
+              paidAmount: "0.00",
+              subTotal: "0.00",
+              feeTypeList: ""
+            };
+          }
+          this.loading = false;
+          this.addInvoiceDialog = false;
+        })
+        .catch(error => {
+          this.snackbar = true;
+          this.text = error.response.data.errors[0].messages[0];
+          this.color = "error";
+          this.loading = false;
+        });
       // }
     },
+    update() {
+      var updatePayment = {
+        invoiceId: this.invoiceData._id,
+        totalPaidAmount: this.invoiceData.paidAmount
+      };
+      http()
+        .put("/updateInvoice", updatePayment, {
+          headers: {
+            Authorization: "Bearer " + this.token
+          }
+        })
+        .then(response => {
+          this.getInvoiceList();
+          this.snackbar = true;
+          this.text = response.data.message;
+          this.color = "green";
+          this.editInvoiceDialog = false;
+        })
+        .catch(error => {
+          console.log("error", error);
+          this.snackbar = true;
+          this.color = "red";
+        });
+    },
     clear() {
       this.$refs.form.reset();
     },
@@ -733,6 +1415,14 @@ export default {
           // this.$router.replace({ path: "/" });
         });
     },
+    getPaymentDetails(feeTyp) {
+      let feeType = {
+        date: "",
+        paymentMethod: "",
+        totalAmount: "",
+        discount: ""
+      };
+    },
     getAmmountDetails(feeTyp) {
       let feeType = {
         amount: "",
@@ -793,7 +1483,7 @@ export default {
       }
     },
     selectAllStudent() {
-      console.log("this.studentId", this.invoiceData.studentId);
+      // console.log("this.studentId", this.invoiceData.studentId);
       this.invoiceData.students = [];
       if (this.invoiceData.studentId === "Select All") {
         for (let i = 1; i < this.studentList.length; i++) {
@@ -820,6 +1510,7 @@ export default {
     this.getInvoiceList();
     this.getAllClasses();
     this.getfeeType();
+    this.getAllStudents();
   }
 };
 </script>
diff --git a/src/pages/Account/viewInvoice.vue b/src/pages/Account/viewInvoice.vue
index 5b9db80..2a632a5 100644
--- a/src/pages/Account/viewInvoice.vue
+++ b/src/pages/Account/viewInvoice.vue
@@ -15,82 +15,93 @@
           <!-- ****** TABLE DATA MARK  ****** -->
           <v-flex xs12 sm12 md12>
             <v-card>
-                <v-layout wrap>
-                  <v-flex 12>
-                    <br />
-                    <v-layout>
-                      <v-flex xs12 sm12 md12 class="text-xs-center">
-                        <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
+              <v-layout wrap>
+                <v-flex 12>
+                  <br />
+                  <v-layout>
+                    <v-flex xs12 sm12 md12 class="text-xs-center">
+                      <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
                         <p class="title">{{ userData.name }}</p>
-                        <p>{{ userData.address }}</p>
-                      </v-flex>
+                      <p>{{ userData.address }}</p>-->
+                      <v-avatar>
+                        <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
+                        <img
+                          src="/static/schoolIcons/INTRACK_White.png"
+                          v-else-if="!userData.schoolLogoUrl"
+                        />
+                      </v-avatar>
+                      <p class="title">{{ userData.name }}</p>
+                      <p>{{ userData.address }}</p>
+                    </v-flex>
 
-                      <v-flex xs12 sm12 md12 class="text-xs-center">
-                        <v-layout>
-                          <v-flex xs4 sm2>
-                            <h5 class="right my-1">
-                              <b>invoice:</b>
-                            </h5>
-                          </v-flex>
-                          <v-flex sm11 xs8>
-                            <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
-                          </v-flex>
-                        </v-layout>
-                        <v-layout>
-                          <v-flex xs4 sm2>
-                            <h5 class="right my-1">
-                              <b>Name:</b>
-                            </h5>
-                          </v-flex>
-                          <v-flex sm11 xs8>
-                            <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
-                          </v-flex>
-                        </v-layout>
-                        <v-layout>
-                          <v-flex xs4 sm2>
-                            <h5 class="right my-1">
-                              <b>Class:</b>
-                            </h5>
-                          </v-flex>
-                          <v-flex sm11 xs8>
-                            <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
-                          </v-flex>
-                        </v-layout>
-                        <!-- <v-flex xs12 sm6> -->
-                        <v-layout>
-                          <v-flex xs4 sm2>
-                            <h5 class="right my-1">
-                              <b>Roll No:</b>
-                            </h5>
-                          </v-flex>
-                          <v-flex sm6 xs8>
-                            <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
-                          </v-flex>
-                        </v-layout>
-                        <v-layout>
-                          <v-flex xs4 sm2>
-                            <h5 class="right my-1">
-                              <b>email:</b>
-                            </h5>
-                          </v-flex>
-                          <v-flex sm6 xs8>
-                            <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
-                          </v-flex>
-                        </v-layout>
-                        <v-layout>
-                          <v-flex xs4 sm2>
-                            <h5 class="right my-1">
-                              <b>Status :</b>
-                            </h5>
-                          </v-flex>
-                          <v-flex sm6 xs8>
-                            <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
-                          </v-flex>
-                        </v-layout>
-                      </v-flex>
-                    </v-layout>
-                  </v-flex>
-                </v-layout>
+                    <v-flex xs12 sm12 md12 class="text-xs-center">
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>Name:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm11 xs8>
+                          <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>Class:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm11 xs8>
+                          <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
+                        </v-flex>
+                      </v-layout>
+                      <!-- <v-flex xs12 sm6> -->
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>Roll No:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm6 xs8>
+                          <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>email:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm6 xs8>
+                          <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm12 md12 class="text-xs-center">
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>invoice:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm11 xs8>
+                          <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>Status :</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm6 xs8>
+                          <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+              </v-layout>
               <table class="feeTypeTable tableRsponsive">
                 <tr class="info white--text">
                   <th>#</th>
@@ -110,7 +121,7 @@
                   <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
                   <td style="width:120px">{{ feeType.subTotal }}</td>
                 </tr>
-                <!-- <tfoot>
+                <tfoot>
                   <tr>
                     <td colspan="4">
                       <span class="right subheding">Total Amount (RS) :</span>
@@ -125,11 +136,17 @@
                   </tr>
                   <tr>
                     <td colspan="4">
+                      <span class="right subheding">Discount (RS) :</span>
+                    </td>
+                    <td>{{ feeType.amount - feeType.subTotal  }}</td>
+                  </tr>
+                  <tr>
+                    <td colspan="4">
                       <span class="right subheding">Balance (RS) :</span>
                     </td>
                     <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
                   </tr>
-                </tfoot>-->
+                </tfoot>
               </table>
             </v-card>
           </v-flex>
@@ -167,11 +184,11 @@ export default {
       },
       classId: {
         classNum: ""
-      },
+      }
     },
     userData: {
       name: ""
-    },
+    }
   }),
 
   methods: {
@@ -257,7 +274,6 @@ export default {
     this.getInvoiceList();
     this.getfeeType();
     this.getUserData();
-
   },
   created() {
     this.$root.$on("app:search", search => {
diff --git a/src/pages/Account/viewPaymentInvoice.vue b/src/pages/Account/viewPaymentInvoice.vue
new file mode 100644
index 0000000..adfb9f7
--- /dev/null
+++ b/src/pages/Account/viewPaymentInvoice.vue
@@ -0,0 +1,322 @@
+<template>
+  <v-app id="pages-dasboard">
+    <!-- ****** Edit INVOICE ****** -->
+    <v-container fluid grid-list-md>
+      <v-layout>
+        <v-flex xs12 sm8 md10>
+          <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
+            Print
+            <v-icon size="18" right dark>print</v-icon>
+          </v-btn>
+        </v-flex>
+      </v-layout>
+      <v-flex xs12 sm12 id="printMe">
+        <v-layout wrap>
+          <!-- ****** TABLE DATA MARK  ****** -->
+          <v-flex xs12 sm12 md12>
+            <v-card>
+              <v-layout wrap>
+                <v-flex 12>
+                  <br />
+                  <v-layout>
+                    <v-flex xs12 sm12 md12 class="text-xs-center">
+                      <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
+                        <p class="title">{{ userData.name }}</p>
+                      <p>{{ userData.address }}</p>-->
+                      <v-avatar>
+                        <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
+                        <img
+                          src="/static/schoolIcons/INTRACK_White.png"
+                          v-else-if="!userData.schoolLogoUrl"
+                        />
+                      </v-avatar>
+                      <p class="title">{{ userData.name }}</p>
+                      <p>{{ userData.address }}</p>
+                    </v-flex>
+
+                    <v-flex xs12 sm12 md12 class="text-xs-center">
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>Name:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm11 xs8>
+                          <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>Class:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm11 xs8>
+                          <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
+                        </v-flex>
+                      </v-layout>
+                      <!-- <v-flex xs12 sm6> -->
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>Roll No:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm6 xs8>
+                          <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>email:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm6 xs8>
+                          <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm12 md12 class="text-xs-center">
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>invoice:</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm11 xs8>
+                          <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 sm2>
+                          <h5 class="right my-1">
+                            <b>Payment Method :</b>
+                          </h5>
+                        </v-flex>
+                        <v-flex sm6 xs8>
+                          <h5 class="my-1">{{ invoiceParticularData.paymentMethod }}</h5>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+              <table class="feeTypeTable tableRsponsive">
+                <tr class="info white--text">
+                  <th>#</th>
+                  <th>Fee Type</th>
+                  <th>Amount</th>
+                  <th>Discount</th>
+                  <th>Subtotal</th>
+                </tr>
+                <tr
+                  v-for="(feeType, index) in feeTypeData"
+                  :key="index"
+                  v-on:keyup="getAmmountDetails(feeType)"
+                >
+                  <td style="width:40px">{{ index + 1 }}</td>
+                  <td style="width:120px">{{ feeType.feeTypeName }}</td>
+                  <td style="width:120px">{{ feeType.amount }}</td>
+                  <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
+                  <td style="width:120px">{{ feeType.subTotal }}</td>
+                </tr>
+                <tfoot>
+                  <tr>
+                    <td colspan="2">
+                      <span class="right subheding">Total Amount (RS) :</span>
+                    </td>
+                    <td>{{ feeType.amount }}</td>
+                    <td>{{ feeType.amount-feeType.subTotal }}</td>
+                    <td>{{ feeType.subTotal }}</td>
+                  </tr>
+                  <!-- <tr>
+                    <td colspan="4">
+                      <span class="right subheding">Paid (RS) :</span>
+                    </td>
+                    <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
+                  </tr>
+                  <tr>
+                    <td colspan="4">
+                      <span class="right subheding">Balance (RS) :</span>
+                    </td>
+                    <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
+                  </tr> -->
+                </tfoot>
+              </table>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-flex>
+    </v-container>
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+  </v-app>
+</template>
+
+<script>
+import http from "@/Services/http.js";
+import moment from "moment";
+
+export default {
+  data: () => ({
+    showLoader: false,
+    feeTypes: [],
+    filterData: [],
+    invoiceData: {},
+    feeType: {
+      amount: "",
+      discount: "",
+      totalPaidAmount: "",
+      subTotal: "",
+      feeTypeName: ""
+    },
+    feeTypeData: [],
+    token: "",
+    invoiceParticularData: {
+      studentId: {
+        name: ""
+      },
+      classId: {
+        classNum: ""
+      }
+    },
+    userData: {
+      name: ""
+    }
+  }),
+
+  methods: {
+    getInvoiceList() {
+      http()
+        .get("/getParticularInvoice", {
+          params: {
+            invoiceId: this.$route.params.viewPaymentInvoiceId,
+            schoolId: this.$store.state.schoolId
+          },
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.invoiceParticularData = response.data.data;
+          this.invoiceData = this.invoiceParticularData;
+          this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
+          this.feeTypeData = this.invoiceParticularData.feeType;
+          (this.feeType.amount = response.data.data.totalAmount),
+            (this.feeType.discount = response.data.data.totalDiscount),
+            (this.feeType.subTotal = response.data.data.totalSubTotal),
+            (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
+          this.showLoader = false;
+        })
+        .catch(error => {
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+            this.$store.dispatch("Role", null);
+          }
+        });
+    },
+    getfeeType() {
+      http()
+        .get("/getFeesList", {
+          params: { schoolId: this.$store.state.schoolId },
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.feeTypes = response.data.data;
+        })
+        .catch(err => {
+          // console.log("err====>", err);
+        });
+    },
+    getAmmountDetails(feeTyp) {
+      let feeType = {
+        subTotal: "",
+        subParticularTotal: "",
+        paidAmount: ""
+      };
+      // *********** SUBTOTAL ***********
+      feeType.subTotal =
+        Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
+      this.feeType.subTotal = feeType.subTotal.toFixed(2);
+      // *********** PAID-AMOUNT ***********
+      feeType.paidAmount =
+        Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
+      this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
+    },
+    printInvoice() {
+      // Pass the element id here
+      this.$htmlToPaper("printMe");
+    },
+    getUserData() {
+      http()
+        .get("/getParticularUserDetail")
+        .then(response => {
+          this.userData = response.data.data;
+        })
+        .catch(error => {
+          // if (error.response.status === 401) {
+          //   this.$router.replace({ path: "/" });
+          //   this.$store.dispatch("setToken", null);
+          //   this.$store.dispatch("Id", null);
+          // }
+        });
+    }
+  },
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getInvoiceList();
+    this.getfeeType();
+    this.getUserData();
+  },
+  created() {
+    this.$root.$on("app:search", search => {
+      this.search = search;
+    });
+  },
+  beforeDestroy() {
+    // dont forget to remove the listener
+    this.$root.$off("app:search");
+  }
+};
+</script>
+
+
+<style scoped>
+.active {
+  background-color: gray;
+  color: white !important;
+}
+.activebtn {
+  color: black !important;
+}
+table {
+  border-collapse: collapse;
+  border: 1px solid #e2e7eb;
+}
+.open-dialog-button {
+  background: #827bfa !important;
+  border-color: #827bfa !important;
+  text-transform: none !important;
+}
+
+th,
+td {
+  border: 1px solid #e2e7eb;
+  padding: 10px;
+  text-align: center;
+}
+table.feeTypeTable {
+  table-layout: auto !important;
+  width: 100% !important;
+}
+@media screen and (max-width: 380px) {
+  .tableRsponsive {
+    display: block;
+    position: relative;
+    overflow: scroll;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/paths.js b/src/router/paths.js
index 92208aa..483ec6e 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -517,18 +517,18 @@ export default [{
                 `@/pages/Account/viewInvoice.vue`
             )
     },
-    // {
-    //     path: '/viewPaymentInvoice/:viewPaymentInvoiceId',
-    //     meta: {},
-    //     name: 'View Payment Invoice',
-    //     props: (route) => ({ type: route.query.type }),
-    //     component: () =>
-    //         import (
-    //             /* webpackChunkName: "routes" */
-    //             /* webpackMode: "lazy-once" */
-    //             `@/pages/Account/viewPaymentInvoice.vue`
-    //         )
-    // },
+    {
+        path: '/viewPaymentInvoice/:viewPaymentInvoiceId',
+        meta: {},
+        name: 'View Payment Invoice',
+        props: (route) => ({ type: route.query.type }),
+        component: () =>
+            import (
+                /* webpackChunkName: "routes" */
+                /* webpackMode: "lazy-once" */
+                `@/pages/Account/viewPaymentInvoice.vue`
+            )
+    },
     {
         path: '/globalPayment',
         meta: {},