viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit c5110e90059a312619b18aeb2b6e611b5fccc0ec

Authored by Neeraj Sharma
1 parent ff30cbe862
Exists in master and in 3 other branches amber-development, development, ui-design

fixed responsive pernt pdf design view invoice and payment invoice click on view pdf

Showing 3 changed files with 548 additions and 264 deletions   Show diff stats
... ... @@ -11,11 +11,11 @@
11 11 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">
12 12 <meta name="description" content="School Management">
13 13 <link href="./static/css/custom.css" rel="stylesheet" />
14   - <style>
  14 + <!-- <style>
15 15 [v-cloak] {
16 16 display: none;
17 17 }
18   - </style>
  18 + </style> -->
19 19 </head>
20 20  
21 21 <body>
... ...
src/pages/Account/viewInvoice.vue
Diff comments   View file @c5110e9
... ... @@ -14,140 +14,300 @@
14 14 <v-layout wrap>
15 15 <!-- ****** TABLE DATA MARK ****** -->
16 16 <v-flex xs12 sm12 md12>
17   - <v-card>
18   - <v-layout wrap>
19   - <v-flex 12>
20   - <br />
21   - <v-layout>
22   - <v-flex xs12 sm12 md12 class="text-xs-center">
23   - <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
24   - <p class="title">{{ userData.name }}</p>
25   - <p>{{ userData.address }}</p>-->
26   - <v-avatar>
27   - <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
28   - <img
29   - src="/static/schoolIcons/INTRACK_White.png"
30   - v-else-if="!userData.schoolLogoUrl"
31   - />
32   - </v-avatar>
33   - <p class="title">{{ userData.name }}</p>
34   - <p>{{ userData.address }}</p>
35   - </v-flex>
36   -
37   - <v-flex xs12 sm12 md12 class="text-xs-center">
38   - <v-layout>
39   - <v-flex xs4 sm2>
40   - <h5 class="right my-1">
41   - <b>Name:</b>
42   - </h5>
43   - </v-flex>
44   - <v-flex sm11 xs8>
45   - <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
46   - </v-flex>
47   - </v-layout>
48   - <v-layout>
49   - <v-flex xs4 sm2>
50   - <h5 class="right my-1">
51   - <b>Class:</b>
52   - </h5>
53   - </v-flex>
54   - <v-flex sm11 xs8>
55   - <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
56   - </v-flex>
57   - </v-layout>
58   - <!-- <v-flex xs12 sm6> -->
59   - <v-layout>
60   - <v-flex xs4 sm2>
61   - <h5 class="right my-1">
62   - <b>Roll No:</b>
63   - </h5>
64   - </v-flex>
65   - <v-flex sm6 xs8>
66   - <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
67   - </v-flex>
68   - </v-layout>
69   - <v-layout>
70   - <v-flex xs4 sm2>
71   - <h5 class="right my-1">
72   - <b>email:</b>
73   - </h5>
74   - </v-flex>
75   - <v-flex sm6 xs8>
76   - <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
77   - </v-flex>
78   - </v-layout>
79   - </v-flex>
80   - <v-flex xs12 sm12 md12 class="text-xs-center">
81   - <v-layout>
82   - <v-flex xs4 sm2>
83   - <h5 class="right my-1">
84   - <b>invoice:</b>
85   - </h5>
86   - </v-flex>
87   - <v-flex sm11 xs8>
88   - <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
89   - </v-flex>
90   - </v-layout>
91   - <v-layout>
92   - <v-flex xs4 sm2>
93   - <h5 class="right my-1">
94   - <b>Status :</b>
95   - </h5>
96   - </v-flex>
97   - <v-flex sm6 xs8>
98   - <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
99   - </v-flex>
100   - </v-layout>
101   - </v-flex>
102   - </v-layout>
103   - </v-flex>
104   - </v-layout>
105   - <table class="feeTypeTable tableRsponsive">
106   - <tr class="info white--text">
107   - <th>#</th>
108   - <th>Fee Type</th>
109   - <th>Amount</th>
110   - <th>Discount</th>
111   - <th>Subtotal</th>
  17 + <v-card
  18 + style="
  19 + background-color: #fff;
  20 + border-color: #fff;
  21 + color: rgba(0,0,0,0.87);
  22 + border: 1px solid rgb(226, 231, 235);
  23 + -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);
  24 + box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);"
  25 + >
  26 + <!-- <v-layout wrap> -->
  27 + <v-flex xs12 style="padding:16px 0px;">
  28 + <v-layout wrap>
  29 + <v-flex xs12 sm3 md4 style="text-align:center">
  30 + <v-avatar>
  31 + <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
  32 + <img
  33 + src="/static/schoolIcons/INTRACK_White.png"
  34 + v-else-if="!userData.schoolLogoUrl"
  35 + />
  36 + </v-avatar>
  37 + <p
  38 + style="font-size: 20px !important;
  39 + font-weight: 500;
  40 + line-height: 1 !important;
  41 + letter-spacing: 0.02em !important;
  42 + margin:8px 0px;"
  43 + >{{ userData.name }}</p>
  44 + <p>{{ userData.address }}</p>
  45 + </v-flex>
  46 + <v-flex xs12 sm5 md4 class="text-xs-center">
  47 + <v-layout>
  48 + <v-flex xs4 sm3>
  49 + <h5 style="float:right;margin: 4px 0px;">
  50 + <b>Name:</b>
  51 + </h5>
  52 + </v-flex>
  53 + <v-flex sm9 xs8>
  54 + <h5
  55 + style="margin: 4px 0px;float: left;"
  56 + >{{ invoiceParticularData.studentId.name }}</h5>
  57 + </v-flex>
  58 + </v-layout>
  59 + <v-layout>
  60 + <v-flex xs4 sm3>
  61 + <h5 style="float:right;margin: 4px 0px;">
  62 + <b>Class:</b>
  63 + </h5>
  64 + </v-flex>
  65 + <v-flex sm9 xs8>
  66 + <h5
  67 + style="margin: 4px 0px;float: left;"
  68 + >{{ invoiceParticularData.classId.classNum }}</h5>
  69 + </v-flex>
  70 + </v-layout>
  71 + <v-layout>
  72 + <v-flex xs4 sm3>
  73 + <h5 style="float:right;;margin: 4px 0px;">
  74 + <b>Roll:</b>
  75 + </h5>
  76 + </v-flex>
  77 + <v-flex sm9 xs8>
  78 + <h5
  79 + style="margin: 4px 0px;float: left;"
  80 + >{{ invoiceParticularData.studentId.rollNo }}</h5>
  81 + </v-flex>
  82 + </v-layout>
  83 + <v-layout>
  84 + <v-flex xs4 sm3>
  85 + <h5 style="float:right;margin: 4px 0px;">
  86 + <b>email:</b>
  87 + </h5>
  88 + </v-flex>
  89 + <v-flex sm9 xs8>
  90 + <h5
  91 + class="linkCover"
  92 + style="margin: 4px 0px;float: left;"
  93 + >{{ invoiceParticularData.studentId.email }}</h5>
  94 + </v-flex>
  95 + </v-layout>
  96 + </v-flex>
  97 + <v-flex xs12 sm4 md4 class="text-xs-center">
  98 + <v-layout>
  99 + <v-flex xs4 sm3>
  100 + <h5 style="float:right;margin: 4px 0px;">
  101 + <b>invoice:</b>
  102 + </h5>
  103 + </v-flex>
  104 + <v-flex sm9 xs8>
  105 + <h5
  106 + style="margin: 4px 0px;float: left;"
  107 + >#{{ invoiceParticularData.invoiceNumber }}</h5>
  108 + </v-flex>
  109 + </v-layout>
  110 + <v-layout>
  111 + <v-flex xs4 sm3>
  112 + <h5 style="float:right;margin: 4px 0px;">
  113 + <b>Status:</b>
  114 + </h5>
  115 + </v-flex>
  116 + <v-flex sm9 xs8>
  117 + <h5
  118 + style="margin: 4px 0px;float: left;"
  119 + >{{ invoiceParticularData.paymentStatus }}</h5>
  120 + </v-flex>
  121 + </v-layout>
  122 + </v-flex>
  123 + </v-layout>
  124 + </v-flex>
  125 + <!-- </v-layout> -->
  126 + <table
  127 + class="tableRsponsive"
  128 + style="
  129 + table-layout: auto !important;
  130 + width: 100% !important;
  131 + border-collapse: collapse;
  132 + border: 1px solid #e2e7eb;"
  133 + >
  134 + <tr
  135 + class="white--text"
  136 + style="
  137 + background: #827bfa !important;
  138 + border-color: #827bfa !important;"
  139 + >
  140 + <th
  141 + style="
  142 + border: 1px solid #e2e7eb;
  143 + padding: 10px;
  144 + text-align: center;"
  145 + >#</th>
  146 + <th
  147 + style="
  148 + border: 1px solid #e2e7eb;
  149 + padding: 10px;
  150 + text-align: center;"
  151 + >Fee Type</th>
  152 + <th
  153 + style="
  154 + border: 1px solid #e2e7eb;
  155 + padding: 10px;
  156 + text-align: center;"
  157 + >Amount</th>
  158 + <th
  159 + style="
  160 + border: 1px solid #e2e7eb;
  161 + padding: 10px;
  162 + text-align: center;"
  163 + >Discount</th>
  164 + <th
  165 + style="
  166 + border: 1px solid #e2e7eb;
  167 + padding: 10px;
  168 + text-align: center;"
  169 + >Subtotal</th>
112 170 </tr>
113 171 <tr
114 172 v-for="(feeType, index) in feeTypeData"
115 173 :key="index"
116 174 v-on:keyup="getAmmountDetails(feeType)"
117 175 >
118   - <td style="width:40px">{{ index + 1 }}</td>
119   - <td style="width:120px">{{ feeType.feeTypeName }}</td>
120   - <td style="width:120px">{{ feeType.amount }}</td>
121   - <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
122   - <td style="width:120px">{{ feeType.subTotal }}</td>
  176 + <td
  177 + style="width:40px;
  178 + border: 1px solid #e2e7eb;
  179 + padding: 10px;
  180 + text-align: center;"
  181 + >{{ index + 1 }}</td>
  182 + <td
  183 + style="
  184 + width:120px;
  185 + border: 1px solid #e2e7eb;
  186 + padding: 10px;
  187 + text-align: center;"
  188 + >{{ feeType.feeTypeName }}</td>
  189 + <td
  190 + style="width:120px;
  191 + border: 1px solid #e2e7eb;
  192 + padding: 10px;
  193 + text-align: center;"
  194 + >{{ feeType.amount }}</td>
  195 + <td
  196 + style="width:120px;
  197 + border: 1px solid #e2e7eb;
  198 + padding: 10px;
  199 + text-align: center;"
  200 + >{{ feeType.amount-feeType.subTotal }}</td>
  201 + <td
  202 + style="width:120px;
  203 + border: 1px solid #e2e7eb;
  204 + padding: 10px;
  205 + text-align: center;"
  206 + >{{ feeType.subTotal }}</td>
123 207 </tr>
124 208 <tfoot>
125 209 <tr>
126   - <td colspan="4">
127   - <span class="right subheding">Total Amount (RS) :</span>
  210 + <td
  211 + colspan="4"
  212 + style="
  213 + border: 1px solid #e2e7eb;
  214 + padding: 10px;
  215 + text-align: center;"
  216 + >
  217 + <span style="float:right">Total Amount (RS) :</span>
128 218 </td>
129   - <td>{{ feeType.subTotal }}</td>
  219 + <td
  220 + style="
  221 + border: 1px solid #e2e7eb;
  222 + padding: 10px;
  223 + text-align: center;"
  224 + >{{ feeType.subTotal }}</td>
130 225 </tr>
131 226 <tr>
132   - <td colspan="4">
133   - <span class="right subheding">Paid (RS) :</span>
  227 + <td
  228 + colspan="4"
  229 + style="
  230 + border: 1px solid #e2e7eb;
  231 + padding: 10px;
  232 + text-align: center;"
  233 + >
  234 + <span style="float:right">Paid (RS) :</span>
134 235 </td>
135   - <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
  236 + <td
  237 + style="
  238 + border: 1px solid #e2e7eb;
  239 + padding: 10px;
  240 + text-align: center;"
  241 + >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
136 242 </tr>
137 243 <tr>
138   - <td colspan="4">
139   - <span class="right subheding">Discount :</span>
  244 + <td
  245 + colspan="4"
  246 + style="
  247 + border: 1px solid #e2e7eb;
  248 + padding: 10px;
  249 + text-align: center;"
  250 + >
  251 + <span style="float:right">Discount :</span>
140 252 </td>
141   - <td>{{ feeType.discount}}</td>
  253 + <td
  254 + style="
  255 + border: 1px solid #e2e7eb;
  256 + padding: 10px;
  257 + text-align: center;"
  258 + >{{ feeType.discount}}</td>
142 259 </tr>
143 260 <tr>
144   - <td colspan="4">
145   - <span class="right subheding">Balance (RS) :</span>
  261 + <td
  262 + colspan="4"
  263 + style="
  264 + border: 1px solid #e2e7eb;
  265 + padding: 10px;
  266 + text-align: center;"
  267 + >
  268 + <span style="float:right">Balance (RS) :</span>
146 269 </td>
147   - <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
  270 + <td
  271 + style="
  272 + border: 1px solid #e2e7eb;
  273 + padding: 10px;
  274 + text-align: center;"
  275 + >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
148 276 </tr>
149 277 </tfoot>
150 278 </table>
  279 + <v-layout>
  280 + <v-flex xs12>
  281 + <v-card
  282 + style="width:22%;
  283 + position:relative;
  284 + float:right !important;
  285 + margin:10px 0px;
  286 + -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
  287 + box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
  288 + >
  289 + <div
  290 + style="
  291 + min-height: 20px;
  292 + padding: 9px;
  293 + margin-bottom: 20px;
  294 + background-color: #f0f3f5;
  295 + border: 1px solid #E2E7EB;
  296 + border-radius: 3px;"
  297 + >
  298 + <p
  299 + style="
  300 + margin: 0 0 10px;
  301 + font-size: 12px;"
  302 + >
  303 + Create By : Admin
  304 + <br />
  305 + Date : {{ dates(invoiceParticularData.created) }}
  306 + </p>
  307 + </div>
  308 + </v-card>
  309 + </v-flex>
  310 + </v-layout>
151 311 </v-card>
152 312 </v-flex>
153 313 </v-layout>
... ... @@ -192,6 +352,9 @@ export default {
192 352 }),
193 353  
194 354 methods: {
  355 + dates: function(date) {
  356 + return moment(date).format("MMMM DD, YYYY");
  357 + },
195 358 getInvoiceList() {
196 359 http()
197 360 .get("/getParticularInvoice", {
... ... @@ -261,11 +424,11 @@ export default {
261 424 this.userData = response.data.data;
262 425 })
263 426 .catch(error => {
264   - // if (error.response.status === 401) {
265   - // this.$router.replace({ path: "/" });
266   - // this.$store.dispatch("setToken", null);
267   - // this.$store.dispatch("Id", null);
268   - // }
  427 + if (error.response.status === 401) {
  428 + this.$router.replace({ path: "/" });
  429 + this.$store.dispatch("setToken", null);
  430 + this.$store.dispatch("Id", null);
  431 + }
269 432 });
270 433 }
271 434 },
... ... @@ -288,30 +451,25 @@ export default {
288 451 </script>
289 452  
290 453  
291   -<style scoped>
292   -.active {
293   - background-color: gray;
294   - color: white !important;
295   -}
296   -.activebtn {
297   - color: black !important;
298   -}
299   -table {
  454 +<style>
  455 +/* table {
300 456 border-collapse: collapse;
301 457 border: 1px solid #e2e7eb;
302   -}
  458 +} */
303 459 .open-dialog-button {
304 460 background: #827bfa !important;
305 461 border-color: #827bfa !important;
306 462 text-transform: none !important;
307 463 }
308   -
309   -th,
  464 +.center {
  465 + text-align: center !important;
  466 +}
  467 +/* th,
310 468 td {
311 469 border: 1px solid #e2e7eb;
312 470 padding: 10px;
313 471 text-align: center;
314   -}
  472 +} */
315 473 table.feeTypeTable {
316 474 table-layout: auto !important;
317 475 width: 100% !important;
... ...
src/pages/Account/viewPaymentInvoice.vue
Diff comments   View file @c5110e9
... ... @@ -14,133 +14,261 @@
14 14 <v-layout wrap>
15 15 <!-- ****** TABLE DATA MARK ****** -->
16 16 <v-flex xs12 sm12 md12>
17   - <v-card>
18   - <v-layout wrap>
19   - <v-flex 12>
20   - <br />
21   - <v-layout>
22   - <v-flex xs12 sm12 md12 class="text-xs-center">
23   - <v-avatar>
24   - <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
25   - <img
26   - src="/static/schoolIcons/INTRACK_White.png"
27   - v-else-if="!userData.schoolLogoUrl"
28   - />
29   - </v-avatar>
30   - <p class="title">{{ userData.name }}</p>
31   - <p>{{ userData.address }}</p>
32   - </v-flex>
33   -
34   - <v-flex xs12 sm12 md12 class="text-xs-center">
35   - <v-layout>
36   - <v-flex xs4 sm2>
37   - <h5 class="right my-1">
38   - <b>Name:</b>
39   - </h5>
40   - </v-flex>
41   - <v-flex sm11 xs8>
42   - <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
43   - </v-flex>
44   - </v-layout>
45   - <v-layout>
46   - <v-flex xs4 sm2>
47   - <h5 class="right my-1">
48   - <b>Class:</b>
49   - </h5>
50   - </v-flex>
51   - <v-flex sm11 xs8>
52   - <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
53   - </v-flex>
54   - </v-layout>
55   - <!-- <v-flex xs12 sm6> -->
56   - <v-layout>
57   - <v-flex xs4 sm2>
58   - <h5 class="right my-1">
59   - <b>Roll No:</b>
60   - </h5>
61   - </v-flex>
62   - <v-flex sm6 xs8>
63   - <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
64   - </v-flex>
65   - </v-layout>
66   - <v-layout>
67   - <v-flex xs4 sm2>
68   - <h5 class="right my-1">
69   - <b>email:</b>
70   - </h5>
71   - </v-flex>
72   - <v-flex sm6 xs8>
73   - <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
74   - </v-flex>
75   - </v-layout>
76   - </v-flex>
77   - <v-flex xs12 sm12 md12 class="text-xs-center">
78   - <v-layout>
79   - <v-flex xs4 sm2>
80   - <h5 class="right my-1">
81   - <b>invoice:</b>
82   - </h5>
83   - </v-flex>
84   - <v-flex sm11 xs8>
85   - <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
86   - </v-flex>
87   - </v-layout>
88   - <v-layout>
89   - <v-flex xs4 sm2>
90   - <h5 class="right my-1">
91   - <b>Payment Method :</b>
92   - </h5>
93   - </v-flex>
94   - <v-flex sm6 xs8>
95   - <h5 class="my-1">{{ invoiceParticularData.paymentMethod }}</h5>
96   - </v-flex>
97   - </v-layout>
98   - </v-flex>
99   - </v-layout>
100   - </v-flex>
101   - </v-layout>
102   - <table class="feeTypeTable tableRsponsive">
103   - <tr class="info white--text">
104   - <th>#</th>
105   - <th>Fee Type</th>
106   - <th>Amount</th>
107   - <th>Discount</th>
108   - <th>Subtotal</th>
  17 + <v-card
  18 + style="
  19 + background-color: #fff;
  20 + border-color: #fff;
  21 + color: rgba(0,0,0,0.87);
  22 + border: 1px solid rgb(226, 231, 235);
  23 + -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);
  24 + box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);"
  25 + >
  26 + <!-- <v-layout wrap> -->
  27 + <v-flex xs12 style="padding:16px 0px;">
  28 + <v-layout wrap>
  29 + <v-flex xs12 sm3 md4 style="text-align:center">
  30 + <v-avatar>
  31 + <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
  32 + <img
  33 + src="/static/schoolIcons/INTRACK_White.png"
  34 + v-else-if="!userData.schoolLogoUrl"
  35 + />
  36 + </v-avatar>
  37 + <p
  38 + style="font-size: 20px !important;
  39 + font-weight: 500;
  40 + line-height: 1 !important;
  41 + letter-spacing: 0.02em !important;
  42 + margin:8px 0px;"
  43 + >{{ userData.name }}</p>
  44 + <p>{{ userData.address }}</p>
  45 + </v-flex>
  46 + <v-flex xs12 sm5 md4 class="text-xs-center">
  47 + <v-layout>
  48 + <v-flex xs4 sm3>
  49 + <h5 style="float:right;margin: 4px 0px;">
  50 + <b>Name:</b>
  51 + </h5>
  52 + </v-flex>
  53 + <v-flex sm9 xs8>
  54 + <h5
  55 + style="margin: 4px 0px;float: left;"
  56 + >{{ invoiceParticularData.studentId.name }}</h5>
  57 + </v-flex>
  58 + </v-layout>
  59 + <v-layout>
  60 + <v-flex xs4 sm3>
  61 + <h5 style="float:right;margin: 4px 0px;">
  62 + <b>Class:</b>
  63 + </h5>
  64 + </v-flex>
  65 + <v-flex sm9 xs8>
  66 + <h5
  67 + style="margin: 4px 0px;float: left;"
  68 + >{{ invoiceParticularData.classId.classNum }}</h5>
  69 + </v-flex>
  70 + </v-layout>
  71 + <v-layout>
  72 + <v-flex xs4 sm3>
  73 + <h5 style="float:right;;margin: 4px 0px;">
  74 + <b>Roll:</b>
  75 + </h5>
  76 + </v-flex>
  77 + <v-flex sm9 xs8>
  78 + <h5
  79 + style="margin: 4px 0px;float: left;"
  80 + >{{ invoiceParticularData.studentId.rollNo }}</h5>
  81 + </v-flex>
  82 + </v-layout>
  83 + <v-layout>
  84 + <v-flex xs4 sm3>
  85 + <h5 style="float:right;margin: 4px 0px;">
  86 + <b>email:</b>
  87 + </h5>
  88 + </v-flex>
  89 + <v-flex sm9 xs8>
  90 + <h5
  91 + class="linkCover"
  92 + style="margin: 4px 0px;float: left;"
  93 + >{{ invoiceParticularData.studentId.email }}</h5>
  94 + </v-flex>
  95 + </v-layout>
  96 + </v-flex>
  97 + <v-flex xs12 sm4 md4 class="text-xs-center">
  98 + <v-layout>
  99 + <v-flex xs4 sm3>
  100 + <h5 style="float:right;margin: 4px 0px;">
  101 + <b>invoice:</b>
  102 + </h5>
  103 + </v-flex>
  104 + <v-flex sm9 xs8>
  105 + <h5
  106 + style="margin: 4px 0px;float: left;"
  107 + >#{{ invoiceParticularData.invoiceNumber }}</h5>
  108 + </v-flex>
  109 + </v-layout>
  110 + <v-layout>
  111 + <v-flex xs4 sm3>
  112 + <h5 style="float:right;margin: 4px 0px;">
  113 + <b>Status:</b>
  114 + </h5>
  115 + </v-flex>
  116 + <v-flex sm9 xs8>
  117 + <h5
  118 + style="margin: 4px 0px;float: left;"
  119 + >{{ invoiceParticularData.paymentStatus }}</h5>
  120 + </v-flex>
  121 + </v-layout>
  122 + </v-flex>
  123 + </v-layout>
  124 + </v-flex>
  125 + <!-- </v-layout> -->
  126 + <table
  127 + class="tableRsponsive"
  128 + style="
  129 + table-layout: auto !important;
  130 + width: 100% !important;
  131 + border-collapse: collapse;
  132 + border: 1px solid #e2e7eb;"
  133 + >
  134 + <tr
  135 + class="white--text"
  136 + style="
  137 + background: #827bfa !important;
  138 + border-color: #827bfa !important;"
  139 + >
  140 + <th
  141 + style="
  142 + border: 1px solid #e2e7eb;
  143 + padding: 10px;
  144 + text-align: center;"
  145 + >#</th>
  146 + <th
  147 + style="
  148 + border: 1px solid #e2e7eb;
  149 + padding: 10px;
  150 + text-align: center;"
  151 + >Fee Type</th>
  152 + <th
  153 + style="
  154 + border: 1px solid #e2e7eb;
  155 + padding: 10px;
  156 + text-align: center;"
  157 + >Amount</th>
  158 + <th
  159 + style="
  160 + border: 1px solid #e2e7eb;
  161 + padding: 10px;
  162 + text-align: center;"
  163 + >Discount</th>
  164 + <th
  165 + style="
  166 + border: 1px solid #e2e7eb;
  167 + padding: 10px;
  168 + text-align: center;"
  169 + >Subtotal</th>
109 170 </tr>
110 171 <tr
111 172 v-for="(feeType, index) in feeTypeData"
112 173 :key="index"
113 174 v-on:keyup="getAmmountDetails(feeType)"
114 175 >
115   - <td style="width:40px">{{ index + 1 }}</td>
116   - <td style="width:120px">{{ feeType.feeTypeName }}</td>
117   - <td style="width:120px">{{ feeType.amount }}</td>
118   - <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
119   - <td style="width:120px">{{ feeType.subTotal }}</td>
  176 + <td
  177 + style="width:40px;
  178 + border: 1px solid #e2e7eb;
  179 + padding: 10px;
  180 + text-align: center;"
  181 + >{{ index + 1 }}</td>
  182 + <td
  183 + style="
  184 + width:120px;
  185 + border: 1px solid #e2e7eb;
  186 + padding: 10px;
  187 + text-align: center;"
  188 + >{{ feeType.feeTypeName }}</td>
  189 + <td
  190 + style="width:120px;
  191 + border: 1px solid #e2e7eb;
  192 + padding: 10px;
  193 + text-align: center;"
  194 + >{{ feeType.amount }}</td>
  195 + <td
  196 + style="width:120px;
  197 + border: 1px solid #e2e7eb;
  198 + padding: 10px;
  199 + text-align: center;"
  200 + >{{ feeType.amount-feeType.subTotal }}</td>
  201 + <td
  202 + style="width:120px;
  203 + border: 1px solid #e2e7eb;
  204 + padding: 10px;
  205 + text-align: center;"
  206 + >{{ feeType.subTotal }}</td>
120 207 </tr>
121 208 <tfoot>
122 209 <tr>
123   - <td colspan="2">
124   - <span class="right subheding">Total Amount (RS) :</span>
125   - </td>
126   - <td>{{ feeType.amount }}</td>
127   - <td>{{ feeType.amount-feeType.subTotal }}</td>
128   - <td>{{ feeType.subTotal }}</td>
129   - </tr>
130   - <!-- <tr>
131   - <td colspan="4">
132   - <span class="right subheding">Paid (RS) :</span>
  210 + <td
  211 + colspan="2"
  212 + style="
  213 + border: 1px solid #e2e7eb;
  214 + padding: 10px;
  215 + text-align: center;"
  216 + >
  217 + <span style="float:right">Total Amount (RS) :</span>
133 218 </td>
134   - <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
  219 + <td
  220 + style="
  221 + border: 1px solid #e2e7eb;
  222 + padding: 10px;
  223 + text-align: center;"
  224 + >{{ feeType.amount }}</td>
  225 + <td
  226 + style="
  227 + border: 1px solid #e2e7eb;
  228 + padding: 10px;
  229 + text-align: center;"
  230 + >{{ feeType.amount-feeType.subTotal }}</td>
  231 + <td
  232 + style="
  233 + border: 1px solid #e2e7eb;
  234 + padding: 10px;
  235 + text-align: center;"
  236 + >{{ feeType.subTotal }}</td>
135 237 </tr>
136   - <tr>
137   - <td colspan="4">
138   - <span class="right subheding">Balance (RS) :</span>
139   - </td>
140   - <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
141   - </tr> -->
142 238 </tfoot>
143 239 </table>
  240 + <v-layout>
  241 + <v-flex xs12>
  242 + <v-card
  243 + style="width:22%;
  244 + position:relative;
  245 + float:right !important;
  246 + margin:10px 0px;
  247 + -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
  248 + box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
  249 + >
  250 + <div
  251 + style="
  252 + min-height: 20px;
  253 + padding: 9px;
  254 + margin-bottom: 20px;
  255 + background-color: #f0f3f5;
  256 + border: 1px solid #E2E7EB;
  257 + border-radius: 3px;"
  258 + >
  259 + <p
  260 + style="
  261 + margin: 0 0 10px;
  262 + font-size: 12px;"
  263 + >
  264 + Create By : Admin
  265 + <br />
  266 + Date : {{ dates(invoiceParticularData.created) }}
  267 + </p>
  268 + </div>
  269 + </v-card>
  270 + </v-flex>
  271 + </v-layout>
144 272 </v-card>
145 273 </v-flex>
146 274 </v-layout>
... ... @@ -185,6 +313,9 @@ export default {
185 313 }),
186 314  
187 315 methods: {
  316 + dates: function(date) {
  317 + return moment(date).format("MMMM DD, YYYY");
  318 + },
188 319 getInvoiceList() {
189 320 http()
190 321 .get("/getParticularInvoice", {
... ... @@ -254,11 +385,11 @@ export default {
254 385 this.userData = response.data.data;
255 386 })
256 387 .catch(error => {
257   - // if (error.response.status === 401) {
258   - // this.$router.replace({ path: "/" });
259   - // this.$store.dispatch("setToken", null);
260   - // this.$store.dispatch("Id", null);
261   - // }
  388 + if (error.response.status === 401) {
  389 + this.$router.replace({ path: "/" });
  390 + this.$store.dispatch("setToken", null);
  391 + this.$store.dispatch("Id", null);
  392 + }
262 393 });
263 394 }
264 395 },
... ... @@ -281,30 +412,25 @@ export default {
281 412 </script>
282 413  
283 414  
284   -<style scoped>
285   -.active {
286   - background-color: gray;
287   - color: white !important;
288   -}
289   -.activebtn {
290   - color: black !important;
291   -}
292   -table {
  415 +<style>
  416 +/* table {
293 417 border-collapse: collapse;
294 418 border: 1px solid #e2e7eb;
295   -}
  419 +} */
296 420 .open-dialog-button {
297 421 background: #827bfa !important;
298 422 border-color: #827bfa !important;
299 423 text-transform: none !important;
300 424 }
301   -
302   -th,
  425 +.center {
  426 + text-align: center !important;
  427 +}
  428 +/* th,
303 429 td {
304 430 border: 1px solid #e2e7eb;
305 431 padding: 10px;
306 432 text-align: center;
307   -}
  433 +} */
308 434 table.feeTypeTable {
309 435 table-layout: auto !important;
310 436 width: 100% !important;
... ...