fixed Show Notice Board on dashboard above calendar view same as Web School

Neeraj Sharma
1 parent fc77c38e04
Showing 1 changed file with 206 additions and 29 deletions Show diff stats
src/pages/Dashboard/dashboard.vue
 <template>
-  <v-app id="pages-dasboard">
+  <v-app id="pages-dasboard" class="dashbaordBackground">
+    <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
+    <v-dialog v-model="dialogNotice" max-width="640px" scrollable>
+      <v-card>
+        <v-toolbar color="grey lighten-2" flat>
+          <v-spacer></v-spacer>
+          <v-toolbar-title>
+            <h3>Notice Board</h3>
+          </v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-icon @click="closeNotice">close</v-icon>
+        </v-toolbar>
+        <v-card-text>
+          <v-layout>
+            <v-flex align-center justify-center layout text-xs-center class="mt-2">
+              <img src="/static/icon/user.png" width="70px" />
+            </v-flex>
+          </v-layout>
+          <v-container grid-list-md>
+            <v-layout wrap>
+              <v-flex>
+                <v-layout>
+                  <v-flex xs5 sm6>
+                    <h5 class="right my-1">
+                      <b>Title:</b>
+                    </h5>
+                  </v-flex>
+                  <v-flex sm6 xs8>
+                    <h5 class="my-1">{{ editedItem.title }}</h5>
+                  </v-flex>
+                </v-layout>
+                <v-layout>
+                  <v-flex xs5 sm6>
+                    <h5 class="right my-1">
+                      <b>Description:</b>
+                    </h5>
+                  </v-flex>
+                  <v-flex sm6 xs8>
+                    <h5 class="my-1">{{ editedItem.description }}</h5>
+                  </v-flex>
+                </v-layout>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
     <v-container fluid grid-list-xl>
-      <!-- <v-card flat class="dashCard"> -->
       <v-layout row wrap class="pt-3">
         <!-- ***** Total Students ***** -->
         <v-flex xs12 class="pt-2">
           <v-layout row wrap>
-            <v-flex xs12 sm12 lg3 md4>
+            <v-flex xs12 sm12 lg3 md3>
               <v-card width="90" height="90" class="ml-3 pa-1 white iconCard" dark>
                 <img
                   src="/static/schoolIcons/Students.png"
@@ -22,7 +67,7 @@
               </v-card>
             </v-flex>
             <!-- ***** Total Parents ***** -->
-            <v-flex xs12 sm12 lg3 md4>
+            <v-flex xs12 sm12 lg3 md3>
               <v-card width="90" height="90" class="ml-3 pa-1 white agentIcon" dark>
                 <img
                   src="/static/schoolIcons/Parents.png"
@@ -38,7 +83,7 @@
               </v-card>
             </v-flex>
             <!-- ***** Total Teachers***** -->
-            <v-flex xs12 sm12 lg3 md4>
+            <v-flex xs12 sm12 lg3 md3>
               <v-card width="90" height="90" class="ml-3 pa-1 white farmerIcon" dark>
                 <img
                   src="/static/schoolIcons/Teachers.png"
@@ -54,7 +99,7 @@
               </v-card>
             </v-flex>
             <!-- ***** Total Class***** -->
-            <v-flex xs12 sm12 lg3 md4>
+            <v-flex xs12 sm12 lg3 md3>
               <v-card width="90" height="90" class="ml-3 pa-1 white khasraIcon" dark>
                 <img
                   src="/static/schoolIcons/Class.png"
@@ -72,6 +117,77 @@
           </v-layout>
         </v-flex>
       </v-layout>
+      <v-layout wrap>
+        <v-flex xs12 sm12 md4>
+          <v-card>
+            <v-flex xs12 class="text-xs-center">
+              <v-avatar size="60px" class="mx-auto" style="margin: auto;display:block;">
+                <img src="/static/icon/user.png" />
+              </v-avatar>
+              <h5 class="pt-1">
+                <i>{{ userData.name }}</i>
+              </h5>
+              <!-- <p class="grey--text">Student</p> -->
+            </v-flex>
+            <table class="feeTypeTable tableRsponsive">
+              <tr>
+                <td>
+                  <v-icon>person</v-icon>
+                </td>
+                <td class="fixedSize">Username</td>
+                <td>{{ userData.name }}</td>
+              </tr>
+              <tr>
+                <td>
+                  <v-icon>mail</v-icon>
+                </td>
+                <td class="fixedSize">Email</td>
+                <td>{{ userData.email }}</td>
+              </tr>
+              <tr>
+                <td>
+                  <v-icon>call</v-icon>
+                </td>
+                <td class="fixedSize">Phone</td>
+                <td>{{ userData.mobile }}</td>
+              </tr>
+              <tr>
+                <td>
+                  <v-icon>home</v-icon>
+                </td>
+                <td class="fixedSize">Address</td>
+                <td>{{ userData.address }}</td>
+              </tr>
+            </table>
+          </v-card>
+        </v-flex>
+        <v-flex xs12 sm12 md8>
+          <v-card>
+            <v-card-title class="subheading">Notice</v-card-title>
+            <v-data-table :items="noticeData" class="elevation-1" hide-actions hide-headers>
+              <template slot="items" slot-scope="props" v-if="props.index < 5">
+                <td>{{ props.index + 1}}</td>
+                <td>{{ props.item.title}}</td>
+                <td>{{ props.item.description}}</td>
+
+                <td class="text-xs-center">
+                  <span>
+                    <v-tooltip top>
+                      <img
+                        slot="activator"
+                        style="cursor:pointer; width:25px; height:18px; "
+                        @click="profile(props.item)"
+                        src="/static/icon/eye1.png"
+                      />
+                      <span>View</span>
+                    </v-tooltip>
+                  </span>
+                </td>
+              </template>
+            </v-data-table>
+          </v-card>
+        </v-flex>
+      </v-layout>
       <v-card class="pt-4 mt-3" flat>
         <full-calendar
           ref="calendar"
@@ -85,7 +201,6 @@
     <v-dialog v-model="dialog" max-width="500">
       <v-card color="grey lighten-4" flat>
         <v-toolbar dark color="fixcolors">
-          <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> -->
           <v-spacer></v-spacer>
           <v-btn icon @click="dialog= false">
             <v-icon>close</v-icon>
@@ -106,7 +221,6 @@
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
-              <!-- <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title> -->
             </v-list-tile-content>
           </v-list-tile>
         </v-flex>
@@ -120,7 +234,6 @@
  
 <script>
 import http from "@/Services/http.js";
-import Util from "@/util";
 import moment from "moment";
  
 export default {
@@ -128,6 +241,7 @@ export default {
     return {
       showLoader: false,
       dialog: false,
+      dialogNotice: false,
       HolidaysList: [],
       EventsList: [],
       events: [],
@@ -138,10 +252,13 @@ export default {
         }
       },
       selected: {},
+      editedItem: {},
+      userData: {},
       students: "",
       parents: "",
       teachers: "",
-      classes: ""
+      classes: "",
+      noticeData: []
     };
   },
   mounted() {
@@ -151,8 +268,18 @@ export default {
     this.getTeachers();
     this.getParents();
     this.getClasses();
+    this.getNoticeData();
+    this.getUserData();
   },
   methods: {
+    closeNotice() {
+      this.dialogNotice = false;
+    },
+    profile(item) {
+      // this.editedIndex = this.desserts.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialogNotice = true;
+    },
     date: function(date) {
       return moment(date).format("MMMM DD, YYYY  HH:mm:ss");
     },
@@ -175,11 +302,8 @@ export default {
     },
     getData() {
       this.showLoader = true;
-      var token = this.$store.state.token;
       http()
-        .get("/getHolidaysList", {
-          headers: { Authorization: "Bearer " + token }
-        })
+        .get("/getHolidaysList", {})
         .then(response => {
           this.HolidaysList = response.data.data;
           // this.events = response.data.data;
@@ -196,9 +320,7 @@ export default {
           }
         });
       http()
-        .get("/getSchoolEventsList", {
-          headers: { Authorization: "Bearer " + token }
-        })
+        .get("/getSchoolEventsList")
         .then(response => {
           this.EventsList = response.data.data;
           let allData = [];
@@ -219,9 +341,7 @@ export default {
     },
     getStudents() {
       http()
-        .get("/getStudentsList", {
-          headers: { Authorization: "Bearer " + this.token }
-        })
+        .get("/getStudentsList")
         .then(response => {
           this.students = response.data.data;
           this.showLoader = false;
@@ -238,9 +358,7 @@ export default {
     },
     getParents() {
       http()
-        .get("/getParentsList", {
-          headers: { Authorization: "Bearer " + this.token }
-        })
+        .get("/getParentsList")
         .then(response => {
           this.parents = response.data.data;
           this.showLoader = false;
@@ -257,9 +375,7 @@ export default {
     },
     getTeachers() {
       http()
-        .get("/getTeachersList", {
-          headers: { Authorization: "Bearer " + this.token }
-        })
+        .get("/getTeachersList")
         .then(response => {
           this.teachers = response.data.data;
           this.showLoader = false;
@@ -276,9 +392,7 @@ export default {
     },
     getClasses() {
       http()
-        .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
-        })
+        .get("/getClassesList")
         .then(response => {
           this.classes = response.data.data;
           this.showLoader = false;
@@ -292,6 +406,40 @@ export default {
             this.$store.dispatch("Role", null);
           }
         });
+    },
+    getNoticeData() {
+      this.showLoader = true;
+      http()
+        .get("/getEventsList")
+        .then(response => {
+          this.noticeData = 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);
+          }
+        });
+    },
+    getUserData() {
+      this.showLoader = true;
+      http()
+        .get("/getParticularUserDetail")
+        .then(response => {
+          this.userData = 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);
+          }
+        });
     }
     // eventSources() {
     //   const self = this;
@@ -352,4 +500,33 @@ export default {
   border-radius: 4px;
   z-index: 1;
 }
+
+.dashbaordBackground {
+  background: #f1f2f7 !important;
+}
+table {
+  border-collapse: collapse;
+  border: 1px solid #e2e7eb;
+}
+tr {
+  border: 1px solid #e2e7eb;
+  /* text-align: center; */
+}
+td {
+  padding: 6px;
+}
+.fixedSize {
+  padding: 6px 20px !important;
+}
+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
1	1	<template>
2		- <v-app id="pages-dasboard">
	2	+ <v-app id="pages-dasboard" class="dashbaordBackground">
	3	+ <!-- **** VIEW PROFIL NOTICE BOARD **** -->
	4	+ <v-dialog v-model="dialogNotice" max-width="640px" scrollable>
	5	+ <v-card>
	6	+ <v-toolbar color="grey lighten-2" flat>
	7	+ <v-spacer></v-spacer>
	8	+ <v-toolbar-title>
	9	+ <h3>Notice Board</h3>
	10	+ </v-toolbar-title>
	11	+ <v-spacer></v-spacer>
	12	+ <v-icon @click="closeNotice">close</v-icon>
	13	+ </v-toolbar>
	14	+ <v-card-text>
	15	+ <v-layout>
	16	+ <v-flex align-center justify-center layout text-xs-center class="mt-2">
	17	+ <img src="/static/icon/user.png" width="70px" />
	18	+ </v-flex>
	19	+ </v-layout>
	20	+ <v-container grid-list-md>
	21	+ <v-layout wrap>
	22	+ <v-flex>
	23	+ <v-layout>
	24	+ <v-flex xs5 sm6>
	25	+ <h5 class="right my-1">
	26	+ <b>Title:</b>
	27	+ </h5>
	28	+ </v-flex>
	29	+ <v-flex sm6 xs8>
	30	+ <h5 class="my-1">{{ editedItem.title }}</h5>
	31	+ </v-flex>
	32	+ </v-layout>
	33	+ <v-layout>
	34	+ <v-flex xs5 sm6>
	35	+ <h5 class="right my-1">
	36	+ <b>Description:</b>
	37	+ </h5>
	38	+ </v-flex>
	39	+ <v-flex sm6 xs8>
	40	+ <h5 class="my-1">{{ editedItem.description }}</h5>
	41	+ </v-flex>
	42	+ </v-layout>
	43	+ </v-flex>
	44	+ </v-layout>
	45	+ </v-container>
	46	+ </v-card-text>
	47	+ </v-card>
	48	+ </v-dialog>
3	49	<v-container fluid grid-list-xl>
4		- <!-- <v-card flat class="dashCard"> -->
5	50	<v-layout row wrap class="pt-3">
6	51	<!-- *** Total Students *** -->
7	52	<v-flex xs12 class="pt-2">
8	53	<v-layout row wrap>
9		- <v-flex xs12 sm12 lg3 md4>
	54	+ <v-flex xs12 sm12 lg3 md3>
10	55	<v-card width="90" height="90" class="ml-3 pa-1 white iconCard" dark>
11	56	<img
12	57	src="/static/schoolIcons/Students.png"
...	...	@@ -22,7 +67,7 @@
22	67	</v-card>
23	68	</v-flex>
24	69	<!-- *** Total Parents *** -->
25		- <v-flex xs12 sm12 lg3 md4>
	70	+ <v-flex xs12 sm12 lg3 md3>
26	71	<v-card width="90" height="90" class="ml-3 pa-1 white agentIcon" dark>
27	72	<img
28	73	src="/static/schoolIcons/Parents.png"
...	...	@@ -38,7 +83,7 @@
38	83	</v-card>
39	84	</v-flex>
40	85	<!-- *** Total Teachers*** -->
41		- <v-flex xs12 sm12 lg3 md4>
	86	+ <v-flex xs12 sm12 lg3 md3>
42	87	<v-card width="90" height="90" class="ml-3 pa-1 white farmerIcon" dark>
43	88	<img
44	89	src="/static/schoolIcons/Teachers.png"
...	...	@@ -54,7 +99,7 @@
54	99	</v-card>
55	100	</v-flex>
56	101	<!-- *** Total Class*** -->
57		- <v-flex xs12 sm12 lg3 md4>
	102	+ <v-flex xs12 sm12 lg3 md3>
58	103	<v-card width="90" height="90" class="ml-3 pa-1 white khasraIcon" dark>
59	104	<img
60	105	src="/static/schoolIcons/Class.png"
...	...	@@ -72,6 +117,77 @@
72	117	</v-layout>
73	118	</v-flex>
74	119	</v-layout>
	120	+ <v-layout wrap>
	121	+ <v-flex xs12 sm12 md4>
	122	+ <v-card>
	123	+ <v-flex xs12 class="text-xs-center">
	124	+ <v-avatar size="60px" class="mx-auto" style="margin: auto;display:block;">
	125	+ <img src="/static/icon/user.png" />
	126	+ </v-avatar>
	127	+ <h5 class="pt-1">
	128	+ <i>{{ userData.name }}</i>
	129	+ </h5>
	130	+ <!-- <p class="grey--text">Student</p> -->
	131	+ </v-flex>
	132	+ <table class="feeTypeTable tableRsponsive">
	133	+ <tr>
	134	+ <td>
	135	+ <v-icon>person</v-icon>
	136	+ </td>
	137	+ <td class="fixedSize">Username</td>
	138	+ <td>{{ userData.name }}</td>
	139	+ </tr>
	140	+ <tr>
	141	+ <td>
	142	+ <v-icon>mail</v-icon>
	143	+ </td>
	144	+ <td class="fixedSize">Email</td>
	145	+ <td>{{ userData.email }}</td>
	146	+ </tr>
	147	+ <tr>
	148	+ <td>
	149	+ <v-icon>call</v-icon>
	150	+ </td>
	151	+ <td class="fixedSize">Phone</td>
	152	+ <td>{{ userData.mobile }}</td>
	153	+ </tr>
	154	+ <tr>
	155	+ <td>
	156	+ <v-icon>home</v-icon>
	157	+ </td>
	158	+ <td class="fixedSize">Address</td>
	159	+ <td>{{ userData.address }}</td>
	160	+ </tr>
	161	+ </table>
	162	+ </v-card>
	163	+ </v-flex>
	164	+ <v-flex xs12 sm12 md8>
	165	+ <v-card>
	166	+ <v-card-title class="subheading">Notice</v-card-title>
	167	+ <v-data-table :items="noticeData" class="elevation-1" hide-actions hide-headers>
	168	+ <template slot="items" slot-scope="props" v-if="props.index < 5">
	169	+ <td>{{ props.index + 1}}</td>
	170	+ <td>{{ props.item.title}}</td>
	171	+ <td>{{ props.item.description}}</td>
	172	+
	173	+ <td class="text-xs-center">
	174	+ <span>
	175	+ <v-tooltip top>
	176	+ <img
	177	+ slot="activator"
	178	+ style="cursor:pointer; width:25px; height:18px; "
	179	+ @click="profile(props.item)"
	180	+ src="/static/icon/eye1.png"
	181	+ />
	182	+ <span>View</span>
	183	+ </v-tooltip>
	184	+ </span>
	185	+ </td>
	186	+ </template>
	187	+ </v-data-table>
	188	+ </v-card>
	189	+ </v-flex>
	190	+ </v-layout>
75	191	<v-card class="pt-4 mt-3" flat>
76	192	<full-calendar
77	193	ref="calendar"
...	...	@@ -85,7 +201,6 @@
85	201	<v-dialog v-model="dialog" max-width="500">
86	202	<v-card color="grey lighten-4" flat>
87	203	<v-toolbar dark color="fixcolors">
88		- <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> -->
89	204	<v-spacer></v-spacer>
90	205	<v-btn icon @click="dialog= false">
91	206	<v-icon>close</v-icon>
...	...	@@ -106,7 +221,6 @@
106	221	</v-list-tile-action>
107	222	<v-list-tile-content>
108	223	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
109		- <!-- <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title> -->
110	224	</v-list-tile-content>
111	225	</v-list-tile>
112	226	</v-flex>
...	...	@@ -120,7 +234,6 @@
120	234
121	235	<script>
122	236	import http from "@/Services/http.js";
123		-import Util from "@/util";
124	237	import moment from "moment";
125	238
126	239	export default {
...	...	@@ -128,6 +241,7 @@ export default {
128	241	return {
129	242	showLoader: false,
130	243	dialog: false,
	244	+ dialogNotice: false,
131	245	HolidaysList: [],
132	246	EventsList: [],
133	247	events: [],
...	...	@@ -138,10 +252,13 @@ export default {
138	252	}
139	253	},
140	254	selected: {},
	255	+ editedItem: {},
	256	+ userData: {},
141	257	students: "",
142	258	parents: "",
143	259	teachers: "",
144		- classes: ""
	260	+ classes: "",
	261	+ noticeData: []
145	262	};
146	263	},
147	264	mounted() {
...	...	@@ -151,8 +268,18 @@ export default {
151	268	this.getTeachers();
152	269	this.getParents();
153	270	this.getClasses();
	271	+ this.getNoticeData();
	272	+ this.getUserData();
154	273	},
155	274	methods: {
	275	+ closeNotice() {
	276	+ this.dialogNotice = false;
	277	+ },
	278	+ profile(item) {
	279	+ // this.editedIndex = this.desserts.indexOf(item);
	280	+ this.editedItem = Object.assign({}, item);
	281	+ this.dialogNotice = true;
	282	+ },
156	283	date: function(date) {
157	284	return moment(date).format("MMMM DD, YYYY HH:mm:ss");
158	285	},
...	...	@@ -175,11 +302,8 @@ export default {
175	302	},
176	303	getData() {
177	304	this.showLoader = true;
178		- var token = this.$store.state.token;
179	305	http()
180		- .get("/getHolidaysList", {
181		- headers: { Authorization: "Bearer " + token }
182		- })
	306	+ .get("/getHolidaysList", {})
183	307	.then(response => {
184	308	this.HolidaysList = response.data.data;
185	309	// this.events = response.data.data;
...	...	@@ -196,9 +320,7 @@ export default {
196	320	}
197	321	});
198	322	http()
199		- .get("/getSchoolEventsList", {
200		- headers: { Authorization: "Bearer " + token }
201		- })
	323	+ .get("/getSchoolEventsList")
202	324	.then(response => {
203	325	this.EventsList = response.data.data;
204	326	let allData = [];
...	...	@@ -219,9 +341,7 @@ export default {
219	341	},
220	342	getStudents() {
221	343	http()
222		- .get("/getStudentsList", {
223		- headers: { Authorization: "Bearer " + this.token }
224		- })
	344	+ .get("/getStudentsList")
225	345	.then(response => {
226	346	this.students = response.data.data;
227	347	this.showLoader = false;
...	...	@@ -238,9 +358,7 @@ export default {
238	358	},
239	359	getParents() {
240	360	http()
241		- .get("/getParentsList", {
242		- headers: { Authorization: "Bearer " + this.token }
243		- })
	361	+ .get("/getParentsList")
244	362	.then(response => {
245	363	this.parents = response.data.data;
246	364	this.showLoader = false;
...	...	@@ -257,9 +375,7 @@ export default {
257	375	},
258	376	getTeachers() {
259	377	http()
260		- .get("/getTeachersList", {
261		- headers: { Authorization: "Bearer " + this.token }
262		- })
	378	+ .get("/getTeachersList")
263	379	.then(response => {
264	380	this.teachers = response.data.data;
265	381	this.showLoader = false;
...	...	@@ -276,9 +392,7 @@ export default {
276	392	},
277	393	getClasses() {
278	394	http()
279		- .get("/getClassesList", {
280		- headers: { Authorization: "Bearer " + this.token }
281		- })
	395	+ .get("/getClassesList")
282	396	.then(response => {
283	397	this.classes = response.data.data;
284	398	this.showLoader = false;
...	...	@@ -292,6 +406,40 @@ export default {
292	406	this.$store.dispatch("Role", null);
293	407	}
294	408	});
	409	+ },
	410	+ getNoticeData() {
	411	+ this.showLoader = true;
	412	+ http()
	413	+ .get("/getEventsList")
	414	+ .then(response => {
	415	+ this.noticeData = response.data.data;
	416	+ this.showLoader = false;
	417	+ })
	418	+ .catch(error => {
	419	+ this.showLoader = false;
	420	+ if (error.response.status === 401) {
	421	+ this.$router.replace({ path: "/" });
	422	+ this.$store.dispatch("setToken", null);
	423	+ this.$store.dispatch("Id", null);
	424	+ }
	425	+ });
	426	+ },
	427	+ getUserData() {
	428	+ this.showLoader = true;
	429	+ http()
	430	+ .get("/getParticularUserDetail")
	431	+ .then(response => {
	432	+ this.userData = response.data.data;
	433	+ this.showLoader = false;
	434	+ })
	435	+ .catch(error => {
	436	+ this.showLoader = false;
	437	+ if (error.response.status === 401) {
	438	+ this.$router.replace({ path: "/" });
	439	+ this.$store.dispatch("setToken", null);
	440	+ this.$store.dispatch("Id", null);
	441	+ }
	442	+ });
295	443	}
296	444	// eventSources() {
297	445	// const self = this;
...	...	@@ -352,4 +500,33 @@ export default {
352	500	border-radius: 4px;
353	501	z-index: 1;
354	502	}
	503	+
	504	+.dashbaordBackground {
	505	+ background: #f1f2f7 !important;
	506	+}
	507	+table {
	508	+ border-collapse: collapse;
	509	+ border: 1px solid #e2e7eb;
	510	+}
	511	+tr {
	512	+ border: 1px solid #e2e7eb;
	513	+ /* text-align: center; */
	514	+}
	515	+td {
	516	+ padding: 6px;
	517	+}
	518	+.fixedSize {
	519	+ padding: 6px 20px !important;
	520	+}
	521	+table.feeTypeTable {
	522	+ table-layout: auto !important;
	523	+ width: 100% !important;
	524	+}
	525	+@media screen and (max-width: 380px) {
	526	+ .tableRsponsive {
	527	+ display: block;
	528	+ position: relative;
	529	+ overflow: scroll;
	530	+ }
	531	+}
355	532	</style>
356	533	\ No newline at end of file
...	...