From 3e79b2f9fa89ee8e02bc29c53cf1d71217afb635 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Mon, 11 May 2020 09:54:01 +0530
Subject: [PATCH] implement functionality   <v-layout>

---
 src/pages/Account/invoice.vue           |  81 +++--
 src/pages/Account/paymentTemplate.vue   | 602 ++++++++++++++++++++++++++++++++
 src/pages/Report/progressCardReport.vue | 224 ++++++++----
 3 files changed, 792 insertions(+), 115 deletions(-)
 create mode 100644 src/pages/Account/paymentTemplate.vue

diff --git a/src/pages/Account/invoice.vue b/src/pages/Account/invoice.vue
index 2e7ba87..8793bc0 100644
--- a/src/pages/Account/invoice.vue
+++ b/src/pages/Account/invoice.vue
@@ -22,7 +22,7 @@
             <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
-        <v-flex xs12 sm12>
+        <!-- <v-flex xs12 sm12>
           <v-container fluid grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm12 md4>
@@ -201,7 +201,8 @@
               </v-flex>
             </v-layout>
           </v-container>
-        </v-flex>
+        </v-flex>-->
+        <paymentTemplate :editPayment="editPayment" />
       </v-card>
     </v-dialog>
 
@@ -692,11 +693,13 @@
 <script>
 import http from "@/Services/http.js";
 import editInvoice from "./editInvoice";
+import paymentTemplate from "./paymentTemplate.vue";
 import moment from "moment";
 
 export default {
   components: {
-    editInvoice: editInvoice
+    editInvoice: editInvoice,
+    paymentTemplate: paymentTemplate
   },
   data: () => ({
     snackbar: false,
@@ -866,6 +869,7 @@ export default {
       // console.log("item", item);
       this.editedIndex = this.invoiceList.indexOf(item);
       this.editPayment = Object.assign({}, item);
+      this.editPayment.date = this.editPayment.date.slice(0, 10);
       this.paymentFeeTypeData = this.editPayment.feeType;
       this.paymentInvoiceDialog = true;
     },
@@ -989,40 +993,40 @@ export default {
           });
       }
     },
-    add() {
-      var updatePayment = {
-        invoiceId: this.editPayment._id,
-        // totalPaidAmount: this.editPayment.paidAmount
-        classId: this.editPayment.classNum,
-        students: this.editPayment.students,
-        date: this.editPayment.date,
-        paymentStatus: this.editPayment.paymentStatus,
-        paymentMethod: this.editPayment.paymentMethod,
-        feeType: this.feeTypeData,
-        totalAmount: this.feeType.amount,
-        totalDiscount: this.feeType.discount,
-        totalSubTotal: this.feeType.subTotal,
-        totalPaidAmount: this.feeType.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.paymentInvoiceDialog = false;
-        })
-        .catch(error => {
-          console.log("error", error);
-          this.snackbar = true;
-          this.color = "red";
-        });
-    },
+    // add() {
+    //   var updatePayment = {
+    //     invoiceId: this.editPayment._id,
+    //     // totalPaidAmount: this.editPayment.paidAmount
+    //     classId: this.editPayment.classNum,
+    //     students: this.editPayment.students,
+    //     date: this.editPayment.date,
+    //     paymentStatus: this.editPayment.paymentStatus,
+    //     paymentMethod: this.editPayment.paymentMethod,
+    //     feeType: this.feeTypeData,
+    //     totalAmount: this.feeType.amount,
+    //     totalDiscount: this.feeType.discount,
+    //     totalSubTotal: this.feeType.subTotal,
+    //     totalPaidAmount: this.feeType.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.paymentInvoiceDialog = false;
+    //     })
+    //     .catch(error => {
+    //       console.log("error", error);
+    //       this.snackbar = true;
+    //       this.color = "red";
+    //     });
+    // },
     clear() {
       this.$refs.form.reset();
     },
@@ -1121,7 +1125,8 @@ export default {
         });
     },
 
-    getAmmountDetails(feeTyp) {
+    getAmmountDetails(feeTyp, paymentFeeTypeData) {
+      this.feeTypeData = paymentFeeTypeData;
       let feeType = {
         amount: "",
         discount: "",
diff --git a/src/pages/Account/paymentTemplate.vue b/src/pages/Account/paymentTemplate.vue
new file mode 100644
index 0000000..e947d99
--- /dev/null
+++ b/src/pages/Account/paymentTemplate.vue
@@ -0,0 +1,602 @@
+<template>
+  <v-app id="pages-dasboard">
+    <!-- ****** Edit multiple INVOICE ****** -->
+
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      color="success"
+    >{{ text }}</v-snackbar>
+    <v-flex xs12 sm12>
+      <v-container fluid grid-list-md>
+        <v-layout wrap>
+          <v-flex xs12 sm12 md4>
+            <v-card flat class="mb-4">
+              <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="!editPayment.profilePicUrl" />
+                            <img
+                              :src="editPayment.profilePicUrl"
+                              v-else-if="editPayment.profilePicUrl"
+                            />
+                          </v-avatar>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm12>
+                          <h3 class="text-xs-center">
+                            <b>{{ editPayment.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>{{ editPayment.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>{{ editPayment.classId.classNum }}</h4>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-container>
+              </v-card-text>
+            </v-card>
+            <v-card flat>
+              <v-toolbar dark class="card-styles" flat>
+                <v-spacer></v-spacer>
+                <v-toolbar-title>
+                  <h3>Invoice</h3>
+                </v-toolbar-title>
+                <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="editPayment.classId"
+                      item-text="classNum"
+                      item-value="_id"
+                      @change="getAllStudents()"
+                    ></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 Incharge"
+                      v-model="editPayment.studentId"
+                      item-text="name"
+                      item-value="_id"
+                    ></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="editPayment.date"
+                      transition="scale-transition"
+                      offset-y
+                      full-width
+                      min-width="290px"
+                    >
+                      <v-text-field
+                        slot="activator"
+                        v-model="editPayment.date"
+                        placeholder="Select date"
+                      ></v-text-field>
+                      <v-date-picker
+                        v-model="editPayment.date"
+                        @input="$refs.menu1.save(editPayment.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="editPayment.paymentStatus"
+                      item-text="name"
+                      item-value="value"
+                      label="Select Payment Status"
+                      @change="getPayMethodList"
+                    ></v-select>
+                  </v-flex>
+                </v-layout>-->
+                <v-layout>
+                  <v-flex xs4 class="pt-4 subheading">
+                    <label class="right">Payment Method:</label>
+                  </v-flex>
+                  <v-flex xs7 class="ml-3">
+                    <v-select
+                      :items="paymentMethods"
+                      v-model="editPayment.paymentMethod"
+                      label="Select Payment Method"
+                    ></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="update(editPayment)"
+                  >Add Payment</v-btn>
+                </v-card-actions>
+              </v-form>
+            </v-card>
+          </v-flex>
+          <v-flex xs12 sm12 md8>
+            <v-card>
+              <v-toolbar dark class="card-styles" flat>
+                <v-spacer></v-spacer>
+                <v-toolbar-title>
+                  <h3>Fee Type List</h3>
+                </v-toolbar-title>
+                <v-spacer></v-spacer>
+              </v-toolbar>
+              <!-- <v-layout wrap>
+                <v-flex xs12>
+                  <v-layout wrap>
+                    <v-flex xs12 sm2 class="mt-3">
+                      <label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label>
+                      <label
+                        class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only"
+                      >Fee Type:</label>
+                    </v-flex>
+                    <v-flex xs12 sm4>
+                      <v-select
+                        :items="feeTypes"
+                        v-model="feeType.feeTypeName"
+                        item-text="feeType"
+                        item-value="feeType"
+                        label="Select Fee Type"
+                        class="px-2"
+                      ></v-select>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-btn
+                        dark
+                        class="right mt-3 hidden-sm-only hidden-xs-only"
+                        color="open-dialog-button"
+                        @click="selectFeeType"
+                      >ADD</v-btn>
+                      <v-btn
+                        dark
+                        class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only"
+                        color="open-dialog-button"
+                        @click="selectFeeType"
+                      >ADD</v-btn>
+                    </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>
+                  <th>Paid Amount</th>
+                  <th>Action</th>
+                </tr>
+                <tr
+                  v-for="(feeType, index) in editPayment.feeType"
+                  :key="index"
+                  v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)"
+                >
+                  <td style="width:40px">{{ index + 1 }}</td>
+                  <td style="width:120px">{{ feeType.feeTypeName }}</td>
+                  <td>
+                    <v-text-field
+                      placeholder="fill your Amount"
+                      v-model="feeType.amount"
+                      type="number"
+                    ></v-text-field>
+                  </td>
+                  <td>
+                    <v-text-field
+                      placeholder="fill your Discount"
+                      v-model="feeType.discount"
+                      type="number"
+                    ></v-text-field>
+                  </td>
+                  <td>{{ feeType.subTotal }}</td>
+                  <td v-if="editPayment.paymentStatus === 'NOT_PAID'">
+                    <v-text-field
+                      placeholder="fill your Paid Amount"
+                      v-model="feeType.paidAmount"
+                      type="number"
+                      :disabled="disabled"
+                    ></v-text-field>
+                  </td>
+                  <td v-if="editPayment.paymentStatus != 'NOT_PAID'">
+                    <v-text-field
+                      placeholder="fill your Paid Amount"
+                      v-model="feeType.paidAmount"
+                      type="number"
+                    ></v-text-field>
+                  </td>
+                  <td>
+                    <v-icon
+                      color="error"
+                      @click="deleteSelectFee(feeType,editPayment.feeType,index)"
+                    >delete</v-icon>
+                  </td>
+                </tr>
+                <tfoot v-if="feeType.amount != 0.00">
+                  <tr>
+                    <td colspan="2">Total:</td>
+                    <td>{{ feeType.amount }}</td>
+                    <td>{{ feeType.discount }}</td>
+                    <td>{{ feeType.subTotal }}</td>
+                    <td>{{ feeType.paidAmount }}</td>
+                  </tr>
+                </tfoot>
+                <tfoot v-else-if="feeType.amount == 0.00">
+                  <tr>
+                    <td colspan="2">Total:</td>
+                    <td>{{ editPayment.totalAmount }}</td>
+                    <td>{{ editPayment.totalDiscount }}</td>
+                    <td>{{ editPayment.totalSubTotal }}</td>
+                    <td>{{ editPayment.totalPaidAmount }}</td>
+                  </tr>
+                </tfoot>
+              </table>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-container>
+    </v-flex>
+    <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 {
+  props: ["editPayment"],
+  data: () => ({
+    snackbar: false,
+    // showPayMethods: false,
+    y: "top",
+    x: "right",
+    mode: "",
+    timeout: 3000,
+    text: "",
+    showLoader: false,
+    loading: false,
+    date: null,
+    search: "",
+    // dialog: false,
+    // dialog1: false,
+    valid: true,
+    validEdit: true,
+    // isActive: true,
+    // newActive: false,
+    showFeeType: false,
+    disabled: true,
+    details: [],
+    feeTypes: [],
+    menu1: false,
+    // invoiceData: {},
+    paymentMethods: ["Cash", "Cheque"],
+    feeType: {
+      amount: "0.00",
+      discount: "0.00",
+      paidAmount: "0.00",
+      subTotal: "0.00",
+      feeTypeName: ""
+    },
+    feeTypeData: [],
+    pagination: {
+      rowsPerPage: 15
+    },
+    token: "",
+    editedItem: {},
+    invoiceParticularData: {},
+    addclass: [],
+    studentList: [],
+    paymentStatus: [
+      {
+        name: "Not Paid",
+        value: "NOT_PAID"
+      },
+      {
+        name: "Partially Paid",
+        value: "PARTIALLY_PAID"
+      },
+      {
+        name: "Fully Paid",
+        value: "FULLY_PAID"
+      }
+    ]
+  }),
+  // watch: {
+  //   menu1(val) {
+  //     val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
+  //   }
+  // },
+  methods: {
+    save(date) {
+      this.$refs.menu1.save(date);
+    },
+    dates: function(date) {
+      return moment(date).format("MMMM DD, YYYY");
+    },
+    update(editPayment) {
+      // console.log("editPayment-----------", editPayment);
+      let feeTypeId = "";
+      for (let i = 0; i < this.feeTypes.length; i++) {
+        if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
+          feeTypeId = this.feeTypes[i]._id;
+        }
+      }
+      // console.log(editPayment);
+      let editInvoiceData = {
+        invoiceId: editPayment._id,
+        classId: editPayment.classNum,
+        studentId: editPayment.sectionId,
+        date: editPayment.date,
+        paymentStatus: editPayment.paymentStatus,
+        paymentMethod: editPayment.paymentMethod,
+        feeType: editPayment.feeType,
+        totalAmount: this.feeType.amount,
+        totalDiscount: this.feeType.discount,
+        totalSubTotal: this.feeType.subTotal,
+        totalPaidAmount: this.feeType.paidAmount
+      };
+      if (editInvoiceData.paymentStatus == "NOT_PAID") {
+        delete editInvoiceData.totalPaidAmount;
+      }
+      if (feeTypeId == "") {
+        delete editInvoiceData.feeType[0].feeTypeId;
+      }
+      if (editInvoiceData.paymentStatus == "NOT_PAID") {
+        delete editInvoiceData.paymentMethod;
+      }
+      http()
+        .put("/updateInvoice", editInvoiceData)
+        .then(response => {
+          // this.getInvoiceList();
+          this.snackbar = true;
+          this.text = "New Invoice added successfully";
+          this.loading = false;
+          //   this.$emit("update-editInvoice");
+        })
+        .catch(error => {
+          console.log(error);
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          this.loading = false;
+        });
+    },
+    clear() {
+      this.$refs.form.reset();
+    },
+    // selectFeeType() {
+    //   // console.log("clckkkkkkkkkkkkkkkkkk", this.feeType.feeTypeName);
+    //   this.showFeeType = true;
+    //   this.editPayment.feeType.push({ feeTypeName: this.feeType.feeTypeName });
+    // },
+    deleteSelectFee: function(feeTyp, feeTypeList, index) {
+      this.editPayment.feeType.splice(index, 1);
+      this.getAmmountDetails(feeTyp, feeTypeList);
+      if (this.feeTypeData.length == 0) {
+        this.feeType = {
+          amount: "0.00",
+          discount: "0.00",
+          paidAmount: "0.00",
+          subTotal: "0.00",
+          feeTypeList: ""
+        };
+      }
+    },
+    getAllClasses() {
+      http()
+        .get("/getClassesList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.addclass = response.data.data;
+          this.getAllStudents();
+        })
+        .catch(error => {
+          // console.log("err====>", err);
+          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);
+          }
+        });
+    },
+    getAllStudents() {
+      http()
+        .get("/getStudentsList", {
+          params: { classId: this.editPayment.classNum },
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.studentList = response.data.data;
+        })
+        .catch(err => {
+          // console.log("err====>", err);
+        });
+    },
+    getfeeType() {
+      http()
+        .get("/getFeesList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.feeTypes = response.data.data;
+        })
+        .catch(err => {
+          // console.log("err====>", err);
+        });
+    },
+    getAmmountDetails(feeTyp, feeTypeList) {
+      this.feeTypeData = feeTypeList;
+      let feeType = {
+        amount: "",
+        discount: "",
+        subTotal: "",
+        subParticularTotal: "",
+        paidAmount: ""
+      };
+      for (let i = 0; i < this.feeTypeData.length; i++) {
+        // *********** AMOUNT ***********
+        feeType.amount =
+          Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+        console.log("feeType.amount ", feeType.amount);
+        this.feeType.amount = feeType.amount;
+        this.feeType.subTotal = feeType.amount;
+        this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
+        // *********** DISCOUNT ***********
+        if (this.feeTypeData[i].discount) {
+          feeType.discount =
+            Number(feeType.discount) + Number(this.feeTypeData[i].discount);
+          console.log("feeType.discount", feeType.discount);
+          this.feeType.discount = feeType.discount;
+          feeType.subParticularTotal =
+            this.feeTypeData[i].amount -
+            (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
+          console.log("feeType.subTotal", feeType.subTotal);
+          this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
+        }
+        // *********** 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);
+
+        // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
+        if (feeType.paidAmount > feeType.subTotal) {
+          this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
+          this.feeType.paidAmount = feeType.subTotal;
+        }
+      }
+    }
+    // getPayMethodList() {
+    //   if (this.editPayment.paymentStatus == "PARTIALLY_PAID") {
+    //     this.showPayMethods = true;
+    //   } else if (this.editPayment.paymentStatus == "FULLY_PAID") {
+    //     this.showPayMethods = true;
+    //   } else {
+    //     this.showPayMethods = false;
+    //   }
+    // }
+  },
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getAllClasses();
+    this.getfeeType();
+  },
+  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;
+}
+
+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/pages/Report/progressCardReport.vue b/src/pages/Report/progressCardReport.vue
index 91e6cef..9fba571 100644
--- a/src/pages/Report/progressCardReport.vue
+++ b/src/pages/Report/progressCardReport.vue
@@ -63,13 +63,13 @@
                 </v-flex>
               </v-layout>
             </v-flex>
-            <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only pl-5">
+            <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only">
               <v-btn
                 @click="getMarkReportList"
                 round
                 dark
                 :loading="loading"
-                class="open-dialog-button mt-3 ml-5"
+                class="open-dialog-button mt-3"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
@@ -79,14 +79,14 @@
     <v-layout v-show="showReport">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
-          <v-layout>
+          <!-- <v-layout>
             <v-flex xs12>
               <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
                 Print
                 <v-icon right dark>print</v-icon>
               </v-btn>
             </v-flex>
-          </v-layout>
+          </v-layout> -->
           <v-container grid-list-md v-show="showReport" class="report">
             <v-flex xs12 sm12 id="printMe">
               <v-layout wrap>
@@ -99,10 +99,24 @@
                     flat
                     style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
                   >-->
+                  <v-layout>
+                    <v-flex xs12>
+                      <v-btn
+                        class="open-dialog-button"
+                        round
+                        dark
+                        @click="printProgressReport()"
+                      >
+                        Print
+                        <v-icon right dark>print</v-icon>
+                      </v-btn>
+                    </v-flex>
+                  </v-layout>
                   <v-card flat style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px">
                     <v-layout>
-                      <v-flex xs12 sm12 md12 class="text-xs-center">
-                        <div class="line">
+                      <v-flex xs12 sm12 md12>
+                        <!-- {{userData}} -->
+                        <div>
                           <div class="school-logo">
                             <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
                             <v-avatar>
@@ -117,37 +131,62 @@
                             <h2>{{ userData.name }}</h2>
                           </div>
                         </div>
+                        <hr
+                          style="border:1px solid #ddd;
+                          overflow: hidden;
+                          vertical-align: middle;
+                          margin-bottom: 4px;"
+                        />
                         <div class="school-info">
-                          <v-flex class="school-address">
-                            <p class="title">{{ userData.name }}</p>
-                            <p>{{ userData.address }}</p>
-                          </v-flex>
-                          <v-flex xs12 sm12 md12 class="text-xs-center student-data">
-                            <!-- <v-avatar style="padding-top: 8%">
-                              <img
-                                src="/static/icon/user.png"
-                                v-if="!cardData[0].studentId.profilePicUrl"
-                              />
-                              <img
-                                :src="cardData[0].studentId.profilePicUrl"
-                                v-else-if="cardData[0].studentId.profilePicUrl"
-                              />
-                            </v-avatar>
-                            <div class="student-info">
+                          <v-layout>
+                            <v-flex xs5 class="pl-3">
+                              <p style="font-size:20px;">{{ userData.name }}</p>
                               <p
-                                style="font-size:20px;margin:0px;margin-bottom:4px;"
-                              >{{ cardData[0].studentId.name }}</p>
+                                style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
+                              >{{ userData.address }}</p>
                               <p
-                                style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                              >Class : {{ cardData[0].classId.classNum }}</p>
+                                style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
+                              >{{ userData.mobile }}</p>
                               <p
-                                style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                              >Section : {{ cardData[0].sectionId.name }}</p>
-                              <p
-                                style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                              >Roll NO : {{ cardData[0].studentId.rollNo }}</p>
-                            </div>-->
-                          </v-flex>
+                                style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
+                              >{{ userData.email }}</p>
+                            </v-flex>
+                            <v-flex xs5>
+                              <div v-if="cardData !=''">
+                                <p style="font-size:20px;">{{ cardData[0].studentId.name }}</p>
+                                <p
+                                  style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
+                                >
+                                  Class :
+                                  <b>{{ cardData[0].classId.classNum }}</b>
+                                </p>
+                                <p
+                                  style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
+                                >
+                                  Section :
+                                  <b>{{ cardData[0].sectionId.name }}</b>
+                                </p>
+                                <p
+                                  style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
+                                >
+                                  Roll NO :
+                                  <b>{{ cardData[0].studentId.rollNo }}</b>
+                                </p>
+                              </div>
+                            </v-flex>
+                            <v-flex xs2 v-if="cardData !=''">
+                              <v-avatar size="100" style="padding-top:20px">
+                                <img
+                                  src="/static/icon/user.png"
+                                  v-if="!cardData[0].studentId.profilePicUrl"
+                                />
+                                <img
+                                  :src="cardData[0].studentId.profilePicUrl"
+                                  v-else-if="cardData[0].studentId.profilePicUrl"
+                                />
+                              </v-avatar>
+                            </v-flex>
+                          </v-layout>
                         </div>
                       </v-flex>
                     </v-layout>
@@ -162,48 +201,58 @@
                         width: 100% !important;
                         overflow: hidden;"
                       >
-                        <thead style="border: 1px solid lightgrey !important;">
+                        <thead style="border: 1px solid transparent !important">
+                          <tr style="border: 1px solid transparent !important">
+                            <td
+                              colspan="4"
+                              style="text-align: inherit !important;
+                              border-right: inherit;
+                              border-top: inherit;
+                              padding:14px;"
+                            >{{value[0].examId.examName}}</td>
+                          </tr>
+                          <!-- <v-card-title class="subheading" colspan="4">{{value[0].examId.examName}}</v-card-title> -->
                           <tr style="border: 1px solid lightgrey !important;padding:4px;">
                             <td
                               rowspan="2"
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Subject</td>
-                            <template v-for="studentData in  value">
-                              <td
+                            <!-- <template v-for="studentData in  value"> -->
+                            <!-- <td
                                 colspan="4"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{value[0].examId.examName}}</td>
-                              <!-- <td
+                              <td
                                 colspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
-                              ></td>-->
+                              ></td>
                               <td
                                 colspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
-                              >Total</td>
-                              <!-- <td
+                            >Total</td>-->
+                            <!-- <td
                                 colspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
-                              >Grade</td>-->
-                              <!-- <td
+                            >Grade</td>-->
+                            <!-- <td
                                 colspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
-                              >Points</td>-->
-                              <!-- <td
+                            >Points</td>-->
+                            <!-- <td
                                 colspan="2"
                                 v-for="studentMark in studentData.studentsMarks"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
-                              >{{studentMark.markDistributionId.distributionType}}</td>-->
-                              <!-- <td
+                            >{{studentMark.markDistributionId.distributionType}}</td>-->
+                            <!-- <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
-                              >Total Marks</td>-->
-                            </template>
-                          </tr>
-                          <tr
+                            >Total Marks</td>-->
+                            <!-- </template> -->
+                            <!-- </tr> -->
+                            <!-- <tr
                             v-for="(subject, ind) in value"
                             v-if="ind == 0"
                             style="border: 1px solid lightgrey !important;"
-                          >
+                            >-->
                             <!-- <template v-for="(exam, i) in subject.studentsMarks"> -->
                             <template v-for="studentData in  value">
                               <td
@@ -211,6 +260,9 @@
                                 v-for="studentMark in studentData.studentsMarks"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{studentMark.markDistributionId.distributionType}}</td>
+                              <td
+                                style="border: 1px solid lightgrey !important;padding: 10px;"
+                              >Total Marks</td>
                               <!-- <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >Marks</td>
@@ -219,6 +271,20 @@
                               >Highest Marks</td>-->
                             </template>
                           </tr>
+                          <tr
+                            v-for="(subject, ind) in value"
+                            v-if="ind == 0"
+                            style="border: 1px solid lightgrey !important;"
+                          >
+                            <template v-for="(exam, i) in subject.studentsMarks">
+                              <td
+                                style="border: 1px solid lightgrey !important;padding: 10px;"
+                              >Marks</td>
+                              <td
+                                style="border: 1px solid lightgrey !important;padding: 10px;"
+                              >Highest Marks</td>
+                            </template>
+                          </tr>
                         </thead>
                         <tbody style="border: 1px solid lightgrey !important;">
                           <tr
@@ -268,47 +334,47 @@
                             >{{subject.gpa}}</td>
                           </tr>
                         </tfoot>-->
-                      </table>
-                      <v-card>
-                        <tr
-                          
-                          style="border: 1px solid lightgrey !important;"
-                        >
+                        <!-- <v-card> -->
+                        <tr style="border: 1px solid lightgrey !important;">
                           <td colspan="5">
-                            <span class="right subheding">Total Marks :</span>
+                            <span class="subheding">Total Marks</span>
                           </td>
                           <td
+                            colspan="7"
                             style="border: 1px solid lightgrey !important;padding: 10px;"
-                          >{{cardData.totalMarks}}</td>
+                          >
+                            <b>{{ totalMarks }}</b>
+                          </td>
                         </tr>
                         <tr>
                           <td colspan="5">
-                            <span class="right subheding">Average Mark :</span>
+                            <span class="right subheding">Average Mark</span>
                           </td>
-                          <!-- <td
-                                style="border: 1px solid lightgrey !important;padding: 10px;"
-                          >{{subject.averageMark}}</td>-->
+                          <td
+                            colspan="7"
+                            style="border: 1px solid lightgrey !important;padding: 10px;"
+                          ></td>
                         </tr>
                         <tr>
                           <td colspan="5">
-                            <span class="right subheding">GPA :</span>
+                            <span class="right subheding">GPA</span>
                           </td>
-                          <!-- <td
-                                style="border: 1px solid lightgrey !important;padding: 10px;"
-                          >{{subject.gpa}}</td>-->
+                          <td
+                            colspan="7"
+                            style="border: 1px solid lightgrey !important;padding: 10px;"
+                          ></td>
                         </tr>
-                      </v-card>
-                    </v-card>
-                    <!-- <tbody style="border: 1px solid lightgrey !important;">
+                        <!-- </v-card> -->
+                        <!-- <tbody style="border: 1px solid lightgrey !important;">
                         <tr
                           v-for="subject in value"
                           style="border: 1px solid lightgrey !important;"
                         >
-                    <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>-->
-                    <!-- <td
+                        <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>-->
+                        <!-- <td
                             style="border: 1px solid lightgrey !important;padding: 10px;"
-                    >{{subject.subjectName}}</td>-->
-                    <!-- <template v-for="(exam, i) in subject.studentsMarks">
+                        >{{subject.subjectName}}</td>-->
+                        <!-- <template v-for="(exam, i) in subject.studentsMarks">
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{exam.marksScored}}</td>
@@ -320,8 +386,9 @@
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >{{subject.totalMarks}}</td>
                         </tr>
-                    </tbody>-->
-                    <!-- </table> -->
+                        </tbody>-->
+                      </table>
+                    </v-card>
                   </v-card>
                 </v-flex>
               </v-layout>
@@ -368,7 +435,8 @@ export default {
     gradeBPlus: "B+",
     gradeB: "B",
     gradeCPlus: "C+",
-    gradeC: "C"
+    gradeC: "C",
+    totalMarks: ""
   }),
   mounted() {
     this.token = this.$store.state.token;
@@ -495,6 +563,8 @@ export default {
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
+              console.log("totalMarks", totalMarks);
+              this.totalMarks = totalMarks;
               // console.log("this.filterData[data][item].grade", this.filterData[data][item].grade);
               if (totalMarks > 90) {
                 this.filterData[data][item].grade = this.gradeAPlus;
-- 
2.0.0