diff --git a/src/api/menu.js b/src/api/menu.js
index f6a3f0e..8097fa7 100644
--- a/src/api/menu.js
+++ b/src/api/menu.js
@@ -136,7 +136,7 @@ const adminMenu = [
         items: [
             { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
             { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
-            // { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
+            { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
             { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '',}
         ]
     },
diff --git a/src/pages/Report/idCard.vue b/src/pages/Report/idCard.vue
new file mode 100644
index 0000000..69e73f1
--- /dev/null
+++ b/src/pages/Report/idCard.vue
@@ -0,0 +1,1010 @@
+<template>
+  <v-container fluid class="body-color">
+    <!-- **** Id Card Report Table **** -->
+    <v-card flat class="elevation-0 transparent">
+      <v-form ref="form" v-model="valid" lazy-validation>
+        <v-flex xs12 sm12 lg12>
+          <v-layout wrap>
+            <v-flex xs12 sm12 lg3>
+              <v-layout>
+                <v-flex xs3 sm6 lg4 class="subheading mt-4">
+                  <label class="right">Id Card For:</label>
+                </v-flex>
+                <v-flex xs7 sm6 lg8 class="ml-2">
+                  <v-autocomplete
+                    v-model="getReport.role"
+                    label="Please Select"
+                    :items="getRoles"
+                    item-text="name"
+                    item-value="role"
+                    :rules="cardRules"
+                    @change="getRoleInputs(getReport.role)"
+                    required
+                  ></v-autocomplete>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12 lg3 v-if="this.showClass">
+              <v-layout>
+                <v-flex xs3 sm6 lg2 class="subheading mt-4">
+                  <label class="right">Class:</label>
+                </v-flex>
+                <v-flex xs9 sm6 lg8 class="ml-2">
+                  <v-select
+                    v-model="getReport.classId"
+                    label="Select Class"
+                    :items="classList"
+                    item-text="classNum"
+                    item-value="_id"
+                    :rules="classRules"
+                    @change="getSections(getReport.classId)"
+                    required
+                  ></v-select>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12 lg3 v-if="getReport.classId">
+              <v-layout>
+                <v-flex xs3 sm6 lg2 class="subheading mt-4">
+                  <label class="right">Section:</label>
+                </v-flex>
+                <v-flex xs9 sm6 lg8 class="ml-2">
+                  <v-select
+                    :items="addSection"
+                    label="Select Section"
+                    v-model="getReport.sectionId"
+                    item-text="name"
+                    item-value="_id"
+                    name="Select Section"
+                    @change="getStudents"
+                    :rules="sectionRules"
+                    required
+                  ></v-select>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12 lg3 v-if="getReport.sectionId">
+              <v-layout>
+                <v-flex xs3 sm6 lg2 class="subheading mt-4">
+                  <label class="right">Student:</label>
+                </v-flex>
+                <v-flex xs9 sm6 lg8 class="ml-2">
+                  <v-select
+                    :items="getStudentsList"
+                    label="Select Student"
+                    v-model="getReport._id"
+                    item-text="name"
+                    item-value="_id"
+                    :rules="studentRules"
+                    required
+                  ></v-select>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12 lg3 v-if="this.showTeacher">
+              <v-layout>
+                <v-flex xs3 sm6 lg2 class="subheading mt-4">
+                  <label class="right">Teacher:</label>
+                </v-flex>
+                <v-flex xs9 sm6 lg8 class="ml-2">
+                  <v-select
+                    v-model="getReport._id"
+                    label="Select Teacher"
+                    :items="teacherList"
+                    item-text="name"
+                    item-value="_id"
+                    :rules="teacherRules"
+                    required
+                  ></v-select>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12 lg3 v-if="this.showAdmin">
+              <v-layout>
+                <v-flex xs3 sm6 lg2 class="subheading mt-4">
+                  <label class="right">Admin:</label>
+                </v-flex>
+                <v-flex xs9 sm6 lg8 class="ml-2">
+                  <v-select
+                    v-model="getReport._id"
+                    label="Select Admin"
+                    :items="userData"
+                    item-text="name"
+                    item-value="_id"
+                    :rules="adminRules"
+                    required
+                  ></v-select>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12 lg3 v-if="this.showAccountant">
+              <v-layout>
+                <v-flex xs3 sm6 lg2 class="subheading mt-4">
+                  <label class="right">Accountant:</label>
+                </v-flex>
+                <v-flex xs9 sm6 lg8 class="ml-2">
+                  <v-select
+                    v-model="getReport._id"
+                    label="Select Accountant"
+                    :items="Users"
+                    item-text="name"
+                    item-value="_id"
+                    :rules="accountantRules"
+                    required
+                  ></v-select>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12 lg3 v-if="this.showLibrarian">
+              <v-layout>
+                <v-flex xs3 sm6 lg2 class="subheading mt-4">
+                  <label class="right">Librarian:</label>
+                </v-flex>
+                <v-flex xs9 sm6 lg8 class="ml-2">
+                  <v-select
+                    v-model="getReport._id"
+                    label="Select Librarian"
+                    :items="Users"
+                    item-text="name"
+                    item-value="_id"
+                    :rules="librarianRules"
+                    required
+                  ></v-select>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12 lg4>
+              <v-layout>
+                <v-flex xs4 sm4 lg3 class="subheading mt-4">
+                  <label class="right">Type:</label>
+                </v-flex>
+                <v-flex xs7 sm6 lg8 class="ml-2">
+                  <v-autocomplete
+                    label="Please Select"
+                    type="text"
+                    :rules="typeRules"
+                    :items="typeList"
+                    v-model="getReport.form"
+                    item-text="name"
+                    item-value="value"
+                    @change="getReport(getReport.form)"
+                    required
+                  ></v-autocomplete>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <!-- <v-flex xs12 sm12 lg4>
+              <v-layout>
+                <v-flex xs4 sm4 lg3 class="subheading mt-4">
+                  <label class="right">Background:</label>
+                </v-flex>
+                <v-flex xs7 sm6 lg8 class="ml-2">
+                  <v-autocomplete
+                    label="Please Select"
+                    type="text"
+                    :rules="backgroundRules"
+                    :items="backgroundList"
+                    required
+                  ></v-autocomplete>
+                </v-flex>
+              </v-layout>
+            </v-flex>-->
+            <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
+              <v-btn
+                @click="getCards"
+                round
+                dark
+                :loading="loading"
+                class="open-dialog-button mt-3 ml-5"
+              >Get Report</v-btn>
+            </v-flex>
+          </v-layout>
+        </v-flex>
+      </v-form>
+    </v-card>
+    <div v-if="frontPart">
+      <v-layout v-show="showReport">
+        <v-flex xs12>
+          <v-card class="transparent elevation-0">
+            <v-layout>
+              <v-flex xs12>
+                <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
+                  Print
+                  <v-icon right dark>print</v-icon>
+                </v-btn>
+              </v-flex>
+            </v-layout>
+            <v-container grid-list-md>
+              <v-layout>
+                <v-flex xs6 md6 sm6>
+                  <div class="icard-front">
+                    <h2>{{ userData.name }}</h2>
+                    <img :src="getCard.profilePicUrl" v-if="getCard.profilePicUrl" />
+                    <img src="/static/icon/user.png" v-else-if="!getCard.profilePicUrl" />
+                    <div class="Data" v-if="this.getReport.role === 4">
+                      <p>
+                        <span>
+                          <b>Name</b>
+                        </span>
+                        : {{ getCard.studentData.name }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 4">
+                      <p>
+                        <span>
+                          <b>Class</b>
+                        </span>
+                        : {{ getCard.studentData.classId.classNum }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 4">
+                      <p>
+                        <span>
+                          <b>Section</b>
+                        </span>
+                        : {{ getCard.studentData.sectionId.name }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 4">
+                      <p>
+                        <span>
+                          <b>Roll No</b>
+                        </span>
+                        : {{ getCard.studentData.rollNo }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 4">
+                      <p>
+                        <span>
+                          <b>Blood Group</b>
+                        </span>
+                        : {{ getCard.studentData.bloodGroup }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 3">
+                      <p>
+                        <span>
+                          <b>Name</b>
+                        </span>
+                        : {{ getCard.teachersData.name }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 3">
+                      <p>
+                        <span>
+                          <b>Email</b>
+                        </span>
+                        : {{ getCard.teachersData.email }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 3">
+                      <p>
+                        <span>
+                          <b>Phone No</b>
+                        </span>
+                        : {{ getCard.teachersData.mobileNo }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 3">
+                      <p>
+                        <span>
+                          <b>Joining Date</b>
+                        </span>
+                        : {{ getCard.teachersData.joinDate }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 2">
+                      <p>
+                        <span>
+                          <b>Name</b>
+                        </span>
+                        : {{ getCard.adminData.name }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 2">
+                      <p>
+                        <span>
+                          <b>Establishment Year</b>
+                        </span>
+                        : {{ getCard.adminData.establishmentYear }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 2">
+                      <p>
+                        <span>
+                          <b>Joining Date</b>
+                        </span>
+                        : {{ getCard.adminData.joinDate }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 2">
+                      <p>
+                        <span>
+                          <b>Phone No</b>
+                        </span>
+                        : {{ getCard.adminData.mobile }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 2">
+                      <p>
+                        <span>
+                          <b>Email</b>
+                        </span>
+                        : {{ getCard.adminData.email }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 6">
+                      <p>
+                        <span>
+                          <b>Name</b>
+                        </span>
+                        : {{ getCard.usersData.name }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 6">
+                      <p>
+                        <span>
+                          <b>Email</b>
+                        </span>
+                        : {{ getCard.usersData.email }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 6">
+                      <p>
+                        <span>
+                          <b>Phone No</b>
+                        </span>
+                        : {{ getCard.usersData.phone }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 6">
+                      <p>
+                        <span>
+                          <b>Gender</b>
+                        </span>
+                        : {{ getCard.usersData.gender }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 6">
+                      <p>
+                        <span>
+                          <b>Joining Date</b>
+                        </span>
+                        : {{ getCard.usersData.joiningDate }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 7">
+                      <p>
+                        <span>
+                          <b>Name</b>
+                        </span>
+                        : {{ getCard.usersData.name }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 7">
+                      <p>
+                        <span>
+                          <b>Email</b>
+                        </span>
+                        : {{ getCard.usersData.email }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 7">
+                      <p>
+                        <span>
+                          <b>Phone No</b>
+                        </span>
+                        : {{ getCard.usersData.phone }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 7">
+                      <p>
+                        <span>
+                          <b>Gender</b>
+                        </span>
+                        : {{ getCard.usersData.gender }}
+                      </p>
+                    </div>
+                    <div class="Data" v-if="this.getReport.role === 7">
+                      <p>
+                        <span>
+                          <b>Joining Date</b>
+                        </span>
+                        : {{ getCard.usersData.joiningDate }}
+                      </p>
+                    </div>
+                  </div>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card>
+          <v-flex xs12 id="printMe" v-show="hideprintIdCard">
+            <v-layout style="print-data">
+              <h2>{{ userData.name }}</h2>
+              <img
+                :src="getCards.profilePicUrl"
+                v-if="getCards.profilePicUrl"
+                style="margin-top: 31px;"
+              />
+              <img
+                src="/static/icon/user.png"
+                v-else-if="!getCards.profilePicUrl"
+                style="margin-top: 31px;"
+              />
+            </v-layout>
+            <table
+              class="mb-5 tableRsponsive feeTypeTable"
+              style="border: 1px solid lightgrey;
+              border-collapse: collapse;!important
+              table-layout: auto !important;
+              width: 100% !important;"
+            >
+              <thead style="border: 1px solid lightgrey !important;">
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 4"
+                >
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Blood Group</td>
+                </tr>
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 3"
+                >
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
+                </tr>
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 2"
+                >
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
+                  <td
+                    style="border: 1px solid lightgrey !important;padding: 6px;"
+                  >Establishment Year</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
+                </tr>
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 6"
+                >
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
+                </tr>
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 7"
+                >
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
+                  <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
+                </tr>
+              </thead>
+              <tbody style="border: 1px solid lightgrey !important;">
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 4"
+                >
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.studentData.name }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.studentData.classId.classNum }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.studentData.sectionId.name }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.studentData.rollNo }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.studentData.bloodGroup }}</td>
+                </tr>
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 3"
+                >
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.teachersData.name }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.teachersData.email }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.teachersData.mobileNo }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.teachersData.joinDate }}</td>
+                </tr>
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 2"
+                >
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.adminData.name }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.adminData.establishmentYear }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.adminData.joinDate }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.adminData.mobile }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.adminData.email }}</td>
+                </tr>
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 6"
+                >
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.name }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.email }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.phone }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.gender }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.joiningDate }}</td>
+                </tr>
+                <tr
+                  style="border: 1px solid lightgrey !important;padding:4px;"
+                  v-if="this.getReport.role === 7"
+                >
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.name }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.email }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.phone }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.gender }}</td>
+                  <td
+                    style="border: 1px soild lightgrey !important;padding:6px;"
+                  >{{ getCard.usersData.joiningDate }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </v-flex>
+        </v-flex>
+      </v-layout>
+    </div>
+    <div v-if="backPart">
+      <v-layout v-show="showReport">
+        <v-flex xs12>
+          <!-- <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
+            Print
+            <v-icon right dark>print</v-icon>
+          </v-btn>-->
+          <table class="icard-data" id="printMe">
+            <tbody>
+              <tr>
+                <td class="icard-back">
+                  <h3>This card is valid upto December 2019</h3>
+                  <h5>If you found, please return this card to:</h5>
+                  <p>{{userData.name}}</p>
+                  <div class="school-address">
+                    <p>{{ userData.address }}, {{ userData.pinCode }}</p>
+                  </div>
+                  <div class="icard-bottom">
+                    <div class="qrcode">
+                      <img src="/static/icon/qr-code.png" alt="icon" />
+                    </div>
+                    <div class="session">
+                      <span>Session: 2019-2020</span>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </v-flex>
+      </v-layout>
+    </div>
+  </v-container>
+</template>
+
+<script>
+import http from "@/Services/http.js";
+import moment from "moment";
+
+export default {
+  data: () => ({
+    valid: true,
+    report: {},
+    userData: {},
+
+    loading: false,
+    showReport: false,
+    frontPart: false,
+    backPart: false,
+    showClass: false,
+    showTeacher: false,
+    showAdmin: false,
+    showAccountant: false,
+    showLibrarian: false,
+    hideprintIdCard: false,
+
+    getRoles: [],
+    classList: [],
+    getCard: [],
+    addSection: [],
+    getStudentsList: [],
+    teacherList: [],
+    userData: [],
+    Users: [],
+
+    cardRules: [v => !!v || "Id-Card Field is required"],
+    classRules: [v => !!v || "Class Field is required"],
+    sectionRules: [v => !!v || "Section Field is required"],
+    studentRules: [v => !!v || "Student Field is required"],
+    teacherRules: [v => !!v || "Teacher Field is required"],
+    adminRules: [v => !!v || "Admin Field is required"],
+    accountantRules: [v => !!v || "Accountant Field is required"],
+    librarianRules: [v => !!v || "Librarian Field is required"],
+
+    typeRules: [v => !!v || "Type is required"],
+    backgroundRules: [v => !!v || "Background is required"],
+
+    typeList: [
+      {
+        name: "Front Part",
+        value: "frontPart"
+      },
+      {
+        name: "Back Part",
+        value: "backPart"
+      }
+    ],
+    backgroundList: ["Yes", "No"]
+  }),
+
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getUserData();
+    this.getRole();
+  },
+
+  methods: {
+    getReport() {
+      if (this.getReport.form === "frontPart") {
+        this.frontPart = true;
+        this.backPart = false;
+      }
+      if (this.getReport.form === "backPart") {
+        this.frontPart = false;
+        this.backPart = true;
+      }
+    },
+    getRoleInputs(role) {
+      // console.log("role", role);
+      if (role === 4) {
+        // console.log("role", role);
+        this.showClass = true;
+        this.getClass();
+      }
+      if (role === 3) {
+        this.showTeacher = true;
+        this.getTeacherList();
+      }
+      if (role === 2) {
+        this.showAdmin = true;
+        this.getUserData();
+      }
+      if (role === 6) {
+        this.showAccountant = true;
+        this.getUsersList();
+      }
+      if (role === 7) {
+        this.showLibrarian = true;
+        this.getUsersList();
+      }
+    },
+
+    prindIDCardReport() {
+      // Pass the element id here
+      this.$htmlToPaper("printMe");
+    },
+    getUserData() {
+      http()
+        .get("/getParticularUserDetail")
+        .then(response => {
+          this.userData = response.data.data;
+          // this.adminList = response.data.data;
+        })
+        .catch(error => {
+          // if (error.response.status === 401) {
+          //   this.$router.replace({ path: "/" });
+          //   this.$store.dispatch("setToken", null);
+          //   this.$store.dispatch("Id", null);
+          // }
+        });
+    },
+    getRole() {
+      this.showLoader = true;
+      http()
+        .get("/getRolesList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+            this.getRoles = response.data.data;
+          // if (this.getRoles[0].role !== 1){
+          //   this.getRoles = response.data.data;
+          //   console.log("bdhcbkguvhb", this.getRoles[0].role);
+          // }          
+          // this.role = response.data.data;
+          // console.log("this.role", this.role);
+          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);
+          // }
+        });
+    },
+    getClass() {
+      console.log("get classes");
+      this.showLoader = true;
+      http()
+        .get("/getClassesList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.classList = response.data.data;
+          this.showLoader = false;
+        })
+        .catch(error => {
+          this.showLoader = false;
+          // console.log("err====>", err);
+        });
+    },
+    getSections(_id) {
+      this.showLoader = true;
+      http()
+        .get(
+          "/getSectionsList",
+          { params: { classId: _id } },
+          {
+            headers: { Authorization: "Bearer " + this.token }
+          }
+        )
+        .then(response => {
+          this.addSection = response.data.data;
+          this.showLoader = false;
+        })
+        .catch(err => {
+          this.showLoader = false;
+          // console.log("err====>", err);
+        });
+    },
+    getStudents() {
+      this.showLoader = true;
+      http()
+        .get("/getStudentWithClass", {
+          params: {
+            classId: this.getReport.classId,
+            sectionId: this.getReport.sectionId
+          }
+        })
+        .then(response => {
+          this.getStudentsList = response.data.data;
+          this.showLoader = false;
+        })
+        .catch(error => {
+          console.log("err====>", error);
+          this.showLoader = false;
+        });
+    },
+    getCards() {
+      http()
+        .get("/getIdCardDetail", {
+          headers: {
+            Authorization: "Bearer " + this.token
+          },
+          params: {
+            profileId: this.getReport._id,
+            role: this.getReport.role
+          }
+        })
+        .then(response => {
+          this.getCard = response.data.data;
+          this.showLoader = false;
+          this.showReport = true;
+        })
+        .catch(error => {
+          this.showLoader = false;
+        });
+    },
+    getTeacherList() {
+      this.showLoader = true;
+      var token = this.$store.state.token;
+      http()
+        .get("/getTeachersList", {
+          headers: { Authorization: "Bearer " + token }
+        })
+        .then(response => {
+          this.teacherList = response.data.data;
+          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);
+          }
+        });
+    },
+    getUsersList() {
+      this.showLoader = true;
+      var token = this.$store.state.token;
+      http()
+        .get("/getUsersList", {
+          headers: { Authorization: "Bearer " + token }
+        })
+        .then(response => {
+          this.Users = response.data.data;
+          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);
+          }
+        });
+    },
+    getParentDetails() {
+      http()
+        .get("getParentsList", {
+          headers: {
+            Authorization: "Bearer " + this.$store.state.token
+          }
+        })
+        .then(response => {
+          this.parentsList = response.data.data;
+        })
+        .catch(error => {
+          // console.log("err====>", error.response.data.message);
+          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);
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.Data {
+  width: 100%;
+  float: left;
+  margin-bottom: 0px;
+  padding: 0 15px;
+  font-size: 14px;
+  margin-top: 5px;
+  text-align: justify;
+}
+.icard-front {
+  margin: 3px;
+  float: right;
+  border: 1px solid #000;
+  padding: 10px;
+  width: 85%;
+  text-align: center;
+  height: 96%;
+}
+.icard-front h3 {
+  font-size: 20px;
+}
+.icard-front img {
+  width: 50px;
+  height: 50px;
+  margin-bottom: 5px;
+  /* border: 1px solid #ddd; */
+}
+.icard-data {
+  font-family: Arial;
+  max-width: 794px;
+  max-height: 1123px;
+  margin-left: auto;
+  margin-right: auto;
+  -webkit-print-color-adjust: exact;
+}
+.icard-back {
+  margin: 3px;
+  float: right;
+  border: 1px solid #000;
+  padding: 10px;
+  width: 257px;
+  text-align: center;
+  height: 290px;
+}
+.icard-back h3 {
+  background-color: #000;
+  color: #fff;
+  font-size: 13px;
+  padding: 5px 0px;
+  margin: 5px;
+  margin-top: 13px;
+}
+.icard-back h5 {
+  font-size: 11px;
+  color: #000;
+  font-weight: bold;
+  padding: 5px 0px;
+}
+.icard-back p {
+  font-size: 15px;
+  color: #000;
+  font-weight: 500px;
+  line-height: 17px;
+}
+.school-address {
+  /* width: 40%; */
+  font-weight: 500px;
+  color: #000;
+}
+.icard-bottom {
+  padding-top: 5px;
+  text-align: center;
+}
+.qrcode {
+  float: left;
+  width: 50%;
+}
+.qrcode img {
+  width: 60px;
+  height: 60px;
+}
+.session {
+  float: right;
+  width: 70%;
+}
+@media screen and (max-width: 360px) {
+  .icard-front {
+    width: 316px;
+    height: 418px;
+    float: inherit;
+  }
+  .icard-back {
+    float: left;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/paths.js b/src/router/paths.js
index 51243e3..a492d2c 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -657,16 +657,16 @@ export default [{
                 `@/pages/Report/progressCardReport.vue`
             )
     },
-    // {
-    //     path: '/idCard',
-    //     meta: {},
-    //     name: 'Id Card Report',
-    //     props: (route) => ({ type: route.query.type }),
-    //     component: () =>
-    //         import (
-    //             `@/pages/Report/idCard.vue`
-    //         )
-    // },
+    {
+        path: '/idCard',
+        meta: {},
+        name: 'Id Card Report',
+        props: (route) => ({ type: route.query.type }),
+        component: () =>
+            import (
+                `@/pages/Report/idCard.vue`
+            )
+    },
     {
         path: '/admitCard',
         meta: {},
diff --git a/static/icon/qr-code.png b/static/icon/qr-code.png
new file mode 100644
index 0000000000000000000000000000000000000000..ded5a767efaab07e0a4f06acbdd56d9998582803
GIT binary patch
literal 2115
zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&usfR9vA<A&_E8cl32+VA$Bt{U?zX$X7`A
z2=ZlMs8VBKXlP+z_yrVdc)`F>YQVtoDuIE)Y6b&?c)^@qfi^%1rX+877Y2q^y~;*F
z9%q3^WHAE+-w_aIoT|+y4HRTA@$_|Nf5IfeC9UaE&k3}cUC`6TF{I+w+q;f=PYie%
z4xVxP|9{hWK^p;=@Vmy-QkE~2uCKo@FTDRPD^KqJ|1W>$uK&NI{x&zmHx7mtPTHWo
zAN75n@6NwHPv5@w-<Ln@_wQf%`nP<YeIA2=8qLtRZQ=%V^XuyN{l4<$&$ih5`s4fK
z%^5g^X@;tAbKjWPzb~))|MBOy*IVzar>Skfd!HY^?)&_(|M~wvYJM5sf8QZZo5+Kt
ziL1*`8-L~fe@}eJDPD#{EHp#+e$|wpPY?d{cQ>QM3<g@E8@J;QRP6gz`t`4W?Z@Z*
z`{ijHRk8E)_wD<ad-?P1S@ZsX`}Oz^gMtsu(3{@+hrepRzx`T&x_<xO|0`eqTfXf1
z_C0kp_2O<jS-G@*5AVzW=PzPzFkqw=+F(AfKhAtEfBoM-+rI+~lhVVVi)m}$zt-2E
zZ!Z7*a{0FN`PKh#Z#!RK`IqM9);$0E+I`iv|8KvZKkxsxhd+1HIy3yL`H_45`+r^g
z`rm)H&9{HT#*oNFGnD^_`}XID>vz}H0V^Sy?SKB=rCDYGX0tc;U!UrWsVqIZ30PmM
zmbgZgq$HN4S|t~y0x1R~10w@n10!7{lMq7#D<g9&6GLqS11kfA+U36vqiD#@PsvQH
z#I1qnms34ZgCxj?;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xhq=1STJYD@<);T3K
F0RUwq_vQcq

literal 0
HcmV?d00001