Hugging Face's logo

Spaces:
Nra
/
sbn_invoice
Running

App Files Community
Nra commited on
Commit
9d2feae
·
verified ·
1 Parent(s): 0b7c52c

Upload 11 files

Browse files
Files changed (10) hide show
  1. Invoice_greatlearning.html +584 -0
  2. Invoice_visualpath.html +585 -0
  3. README.md +1 -1
  4. data_for_great_learning.js +59 -0
  5. data_for_visual_path.js +24 -0
  6. index.html +3 -2
  7. invoice.js +55 -0
  8. run_app.bat +41 -0
  9. style.css +1 -1
  10. utils.js +114 -0
Invoice_greatlearning.html ADDED
@@ -0,0 +1,584 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!--
2
+ GST Invoice Template for SBN Mentors Private Limited
3
+ Author: Nitin with Grok / Deepseek and Gemini AI
4
+ Version: 5.0
5
+ License: MIT License
6
+ Features:
7
+ - Dynamic topic selection with amounts
8
+ - GST calculation based on selected topic
9
+ - Print-ready formatting
10
+ Dependencies: None
11
+ Usage:
12
+ - Open this HTML file in a web browser
13
+ - Select the topic and amount from the dropdown
14
+ - Fill in the invoice date and number
15
+ - Click "Print Invoice" to generate a print-ready invoicent();
16
+ Description: This HTML file is a template for generating GST invoices with dynamic topic selection, GST calculation, and print-ready formatting.
17
+ Last Updated: 30June 2025
18
+ -->
19
+
20
+
21
+
22
+ <!DOCTYPE html>
23
+ <html lang="en">
24
+ <head>
25
+ <meta charset="UTF-8">
26
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
27
+ <title>SBN Mentors - Invoice</title>
28
+ <style>
29
+ /* General Body and Container Styles */
30
+ body {
31
+ font-family: Arial, sans-serif;
32
+ background-color: #f4f4f4;
33
+ margin: 0;
34
+ padding: 20px;
35
+ display: flex;
36
+ justify-content: center;
37
+ font-size: 13px;
38
+ }
39
+
40
+ .container {
41
+ background-color: #ffffff;
42
+ padding: 25px;
43
+ border-radius: 8px;
44
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
45
+ width: 100%;
46
+ max-width: 850px;
47
+ box-sizing: border-box;
48
+ }
49
+
50
+ /* --- Main Invoice Border (for screen view) --- */
51
+ #invoiceContent {
52
+ border: 2px solid #000;
53
+ padding: 20px;
54
+ box-sizing: border-box;
55
+ }
56
+
57
+ /* Header and Title Styles */
58
+ h1, h2, h3, h4 {
59
+ margin-top: 0;
60
+ margin-bottom: 10px;
61
+ color: #333;
62
+ }
63
+
64
+ .company-header, .invoice-header {
65
+ text-align: center;
66
+ margin-bottom: 15px;
67
+ border-bottom: 2px solid #eee;
68
+ padding-bottom: 8px;
69
+ }
70
+
71
+ .company-header h2 {
72
+ margin: 3px 0;
73
+ font-size: 20px;
74
+ color: #1e3f66;
75
+ }
76
+
77
+ .company-header p {
78
+ margin: 3px 0;
79
+ font-size: 12px;
80
+ color: #666;
81
+ }
82
+
83
+ .invoice-title {
84
+ text-align: center;
85
+ font-size: 20px;
86
+ font-weight: bold;
87
+ color: #000;
88
+ margin-bottom: 15px;
89
+ padding: 8px;
90
+ background-color: #e6e6e6;
91
+ border-radius: 5px;
92
+ }
93
+
94
+ /* Invoice Grid Layout */
95
+ .invoice-details-grid, .tax-details-grid, .bank-details-grid {
96
+ display: grid;
97
+ grid-template-columns: 1fr 1fr;
98
+ gap: 15px;
99
+ margin-bottom: 20px;
100
+ border: 1px solid #ddd;
101
+ padding: 12px;
102
+ border-radius: 8px;
103
+ }
104
+
105
+ .invoice-details-grid > div, .tax-details-grid > div, .bank-details-grid > div {
106
+ padding: 8px;
107
+ border: 1px solid #f0f0f0;
108
+ border-radius: 5px;
109
+ background-color: #fafafa;
110
+ }
111
+
112
+ .grid-item {
113
+ display: flex;
114
+ flex-direction: column;
115
+ gap: 3px;
116
+ }
117
+
118
+ .grid-item strong {
119
+ color: #555;
120
+ font-size: 13px;
121
+ }
122
+
123
+ .grid-item p {
124
+ margin: 0;
125
+ font-size: 12px;
126
+ color: #333;
127
+ }
128
+
129
+ /* Input Controls and Button Panel */
130
+ .input-panel {
131
+ background-color: #f9f9f9;
132
+ padding: 15px;
133
+ border: 1px solid #e0e0e0;
134
+ border-radius: 8px;
135
+ margin-bottom: 25px;
136
+ display: grid;
137
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
138
+ gap: 15px;
139
+ }
140
+
141
+ .input-panel label {
142
+ display: block;
143
+ margin-bottom: 5px;
144
+ font-weight: bold;
145
+ color: #333;
146
+ }
147
+
148
+ .input-panel input, .input-panel select {
149
+ width: 100%;
150
+ padding: 8px;
151
+ border: 1px solid #ccc;
152
+ border-radius: 5px;
153
+ box-sizing: border-box;
154
+ font-size: 14px;
155
+ }
156
+
157
+ .button-panel {
158
+ text-align: center;
159
+ margin-top: 25px;
160
+ }
161
+
162
+ .button-panel button {
163
+ padding: 10px 20px;
164
+ margin: 0 8px;
165
+ border: none;
166
+ border-radius: 5px;
167
+ cursor: pointer;
168
+ font-size: 15px;
169
+ font-weight: bold;
170
+ transition: background-color 0.3s ease, transform 0.2s ease;
171
+ }
172
+
173
+ #printBtn {
174
+ background-color: #28a745;
175
+ color: white;
176
+ }
177
+
178
+ #printBtn:hover {
179
+ background-color: #218838;
180
+ transform: translateY(-2px);
181
+ }
182
+
183
+ #clearBtn {
184
+ background-color: #dc3545;
185
+ color: white;
186
+ }
187
+
188
+ #clearBtn:hover {
189
+ background-color: #c82333;
190
+ transform: translateY(-2px);
191
+ }
192
+
193
+ /* Table Styles for Invoice Items */
194
+ .invoice-table, .tax-summary-table {
195
+ width: 100%;
196
+ border-collapse: collapse;
197
+ margin-top: 15px;
198
+ margin-bottom: 15px;
199
+ border: 1px solid #000;
200
+ }
201
+
202
+ .invoice-table th, .invoice-table td {
203
+ border: 1px solid #000;
204
+ padding: 8px;
205
+ text-align: left;
206
+ font-size: 12px;
207
+ }
208
+
209
+ .invoice-table th {
210
+ background-color: #f2f2f2;
211
+ font-weight: bold;
212
+ color: #333;
213
+ }
214
+
215
+ .invoice-table tfoot td {
216
+ font-weight: bold;
217
+ background-color: #e9e9e9;
218
+ }
219
+
220
+ /* Reduced Gaps in Tax Summary Table */
221
+ .tax-summary-table th, .tax-summary-table td {
222
+ border: 1px solid #000;
223
+ padding: 5px;
224
+ text-align: left;
225
+ font-size: 11px;
226
+ }
227
+ .tax-summary-table {
228
+ margin-top: 10px;
229
+ margin-bottom: 10px;
230
+ }
231
+
232
+ /* Flexbox for Signatures and Declaration */
233
+ .declaration-section, .signature-section {
234
+ display: flex;
235
+ justify-content: space-between;
236
+ align-items: flex-end;
237
+ margin-top: 30px;
238
+ }
239
+
240
+ .declaration-section p, .signature-section p {
241
+ margin: 0;
242
+ font-size: 11px;
243
+ color: #777;
244
+ }
245
+
246
+ .signature-section .left-seal {
247
+ flex-grow: 1;
248
+ text-align: left;
249
+ padding: 8px;
250
+ }
251
+
252
+ .signature-section .right-signature {
253
+ text-align: right;
254
+ border-top: 1px solid #000;
255
+ width: 250px;
256
+ padding-top: 5px;
257
+ }
258
+
259
+ /* Amount in Words and totals */
260
+ .amount-in-words-box {
261
+ background-color: #eef;
262
+ padding: 12px;
263
+ margin-top: 15px;
264
+ border-radius: 8px;
265
+ border: 1px dashed #cdd;
266
+ }
267
+
268
+ .amount-in-words-box p {
269
+ margin: 0;
270
+ font-weight: bold;
271
+ color: #1e3f66;
272
+ font-size: 12px;
273
+ }
274
+
275
+ /* Utility Classes */
276
+ .text-right {
277
+ text-align: right;
278
+ }
279
+
280
+ .text-center {
281
+ text-align: center;
282
+ }
283
+
284
+ .bold {
285
+ font-weight: bold;
286
+ }
287
+
288
+ /* Hide elements for printing using a class */
289
+ .no-print {
290
+ display: block;
291
+ }
292
+
293
+ /* --- CRITICAL PRINT STYLES FOR SINGLE PAGE --- */
294
+ @media print {
295
+ .no-print {
296
+ display: none !important;
297
+ }
298
+
299
+ @page {
300
+ size: A4 portrait;
301
+ margin: 0; /* Remove browser margins */
302
+ }
303
+
304
+ html, body {
305
+ width: 210mm;
306
+ height: 297mm;
307
+ margin: 0;
308
+ padding: 0;
309
+ font-size: 9pt;
310
+ line-height: 1.2;
311
+ -webkit-print-color-adjust: exact;
312
+ color-adjust: exact;
313
+ }
314
+
315
+ .container {
316
+ width: 100%;
317
+ max-width: 100%;
318
+ margin: 0;
319
+ padding: 10mm; /* Add padding to create a margin inside the page border */
320
+ border: 1px solid #000; /* Add a border around the entire page */
321
+ box-shadow: none;
322
+ border-radius: 0;
323
+ box-sizing: border-box;
324
+ height: 100%;
325
+ }
326
+
327
+ #invoiceContent {
328
+ border: none;
329
+ padding: 0;
330
+ }
331
+
332
+ /* Make sure table rows don't break across pages */
333
+ tr, td, th {
334
+ page-break-inside: avoid !important;
335
+ }
336
+
337
+ /* Tighten up all margins and paddings in print mode */
338
+ h2, h3, h4 {
339
+ margin: 2px 0;
340
+ padding: 0;
341
+ }
342
+
343
+ p {
344
+ margin: 1px 0;
345
+ }
346
+
347
+ .company-header {
348
+ margin-bottom: 10px;
349
+ padding-bottom: 5px;
350
+ }
351
+
352
+ .invoice-details-grid, .tax-details-grid, .bank-details-grid {
353
+ gap: 10px;
354
+ margin-bottom: 10px;
355
+ padding: 8px;
356
+ }
357
+
358
+ .invoice-table, .tax-summary-table {
359
+ margin-top: 10px;
360
+ margin-bottom: 10px;
361
+ }
362
+
363
+ .invoice-table th, .invoice-table td,
364
+ .tax-summary-table th, .tax-summary-table td {
365
+ padding: 4px;
366
+ }
367
+
368
+ .amount-in-words-box {
369
+ margin-top: 10px;
370
+ padding: 8px;
371
+ }
372
+
373
+ .signature-section {
374
+ margin-top: 20px;
375
+ }
376
+
377
+ .signature-section .right-signature {
378
+ margin-top: 25px;
379
+ }
380
+ }
381
+ </style>
382
+ </head>
383
+ <body>
384
+
385
+ <div class="container">
386
+ <div class="input-panel no-print">
387
+ <div>
388
+ <label for="invoiceDate">Date:</label>
389
+ <input type="date" id="invoiceDate" required>
390
+ </div>
391
+ <div>
392
+ <label for="invoiceNumber">Invoice Number:</label>
393
+ <input type="text" id="invoiceNumber" placeholder="e.g., xxx/06/2025" required>
394
+ </div>
395
+ <div>
396
+ <label for="courseTopicSelect">Topic & Amount:</label>
397
+ <select id="courseTopicSelect" required>
398
+ <option value="" disabled selected>Select a topic</option>
399
+ </select>
400
+ </div>
401
+ </div>
402
+
403
+ <div id="invoiceContent">
404
+
405
+ <div class="company-header">
406
+ <h2>SBN Mentors Private Limited</h2>
407
+ <p>Registered Office: D-6 41/42 Chittranjan Nagar, Chintamani CHS, Rajawadi, Vidyavihar East, Mumbai – 400077</p>
408
+ <p class="bold">CIN: U70200MH2024PTC420264 | Email: geetikanand@gmail.com</p>
409
+ <hr>
410
+ <h3 class="invoice-title">TAX INVOICE</h3>
411
+ <p>Sec.23 of Rule 1(1)</p>
412
+ </div>
413
+
414
+ <div class="invoice-details-grid">
415
+ <div class="left-col">
416
+ <h4 style="margin-bottom: 5px;">SBN Mentors Private Limited</h4>
417
+ <p>Address: D-41/42, Chittranjan Nagar,</p>
418
+ <p>Address: CHS, Rajawadi, Vidyavihar East</p>
419
+ <p style="margin-bottom: 10px;">Mumbai, 400077</p>
420
+ <p><strong>GSTIN:</strong> 27ABMCS8731Q1ZB</p>
421
+ <p><strong>CIN:</strong> U70200MH2024PTC420264</p>
422
+ <p style="margin-bottom: 10px;"><strong>PAN:</strong> ABCMS8731Q</p>
423
+ <p><strong>Mode/Terms of Payment:</strong> Chq/Neft,RTGS</p>
424
+ <p><strong>Contact:</strong> +919594493624</p>
425
+ <p><strong>E-Mail:</strong> geetikanand@gmail.com</p>
426
+ </div>
427
+ <div class="right-col">
428
+ <div class="grid-item" style="margin-bottom: 10px;">
429
+ <p><strong>Invoice No.:</strong> <span id="displayInvoiceNo">INV_NUMBER</span></p>
430
+ <p><strong>Dated:</strong> <span id="displayInvoiceDate">INV_DATE</span></p>
431
+ </div>
432
+ <h4 style="margin-bottom: 5px;">Buyer: Great Learning Education Services Private Limited</h4>
433
+ <p>Address: 2nd Floor, Orchid Centre, Golf Course Road</p>
434
+ <p>Address: Sector 53, Gurgaon</p>
435
+ <p>PIN: 122002</p>
436
+ <p>State: Haryana</p>
437
+ <p style="margin-bottom: 10px;">PAN: AAECB3694E</p>
438
+ <p><strong>GSTIN:</strong> 06AAECB3694E1ZR</p>
439
+ <p><strong>Place of Supply:</strong> Mumbai</p>
440
+ </div>
441
+ </div>
442
+
443
+ <table class="invoice-table">
444
+ <thead>
445
+ <tr>
446
+ <th style="width: 5%;">Sl No.</th>
447
+ <th>Particulars: Description of Services</th>
448
+ <th style="width: 15%;">HSN/SAC</th>
449
+ <th style="width: 10%;">GST Rate</th>
450
+ <th class="text-right" style="width: 15%;">Amount</th>
451
+ </tr>
452
+ </thead>
453
+ <tbody>
454
+ <tr>
455
+ <td class="text-center">1</td>
456
+ <td><span id="displayTopic">INV_TOPIC</span></td>
457
+ <td class="text-center">999259</td>
458
+ <td class="text-center">18 %</td>
459
+ <td class="text-right"><span id="displayBaseAmount">0.00</span></td>
460
+ </tr>
461
+ </tbody>
462
+ <tfoot>
463
+ <tr>
464
+ <td colspan="4" class="text-right bold">Sub Total</td>
465
+ <td class="text-right bold"><span id="subTotal">0.00</span></td>
466
+ </tr>
467
+ <tr>
468
+ <td colspan="4" class="text-right bold">CGST</td>
469
+ <td class="text-right bold"><span id="cgstAmount">0.00</span></td>
470
+ </tr>
471
+ <tr>
472
+ <td colspan="4" class="text-right bold">SGST</td>
473
+ <td class="text-right bold"><span id="sgstAmount">0.00</span></td>
474
+ </tr>
475
+ <tr>
476
+ <td colspan="4" class="text-right bold">IGST</td>
477
+ <td class="text-right bold"><span id="igstAmount">0.00</span></td>
478
+ </tr>
479
+ <tr>
480
+ <td colspan="4" class="text-right bold">Total</td>
481
+ <td class="text-right bold">₹ <span id="totalAmount">0.00</span></td>
482
+ </tr>
483
+ <tr>
484
+ <td colspan="5" style="text-align: right; font-style: italic;">E. & O.E</td>
485
+ </tr>
486
+ </tfoot>
487
+ </table>
488
+
489
+ <div class="amount-in-words-box">
490
+ <p><strong>Amount Chargeable (in words):</strong> <span id="amountInWords">Zero Rupees Only</span></p>
491
+ </div>
492
+
493
+ <table class="tax-summary-table">
494
+ <thead>
495
+ <tr>
496
+ <th>HSN/SAC</th>
497
+ <th>Taxable Value</th>
498
+ <th colspan="2" class="text-center">Central Tax</th>
499
+ <th colspan="2" class="text-center">State Tax</th>
500
+ <th colspan="2" class="text-center">Interstate Tax</th>
501
+ </tr>
502
+ <tr>
503
+ <th></th>
504
+ <th></th>
505
+ <th class="text-center">Rate</th>
506
+ <th class="text-center">Amount</th>
507
+ <th class="text-center">Rate</th>
508
+ <th class="text-center">Amount</th>
509
+ <th class="text-center">Rate</th>
510
+ <th class="text-center">Amount</th>
511
+ </tr>
512
+ </thead>
513
+ <tbody>
514
+ <tr>
515
+ <td class="text-center">999259</td>
516
+ <td class="text-right"><span id="taxableValue">0.00</span></td>
517
+ <td class="text-center">9%</td>
518
+ <td class="text-right"><span id="centralTax">0.00</span></td>
519
+ <td class="text-center">9%</td>
520
+ <td class="text-right"><span id="stateTax">0.00</span></td>
521
+ <td class="text-center">18%</td>
522
+ <td class="text-right"><span id="interstateTax">0.00</span></td>
523
+ </tr>
524
+ </tbody>
525
+ <tfoot>
526
+ <tr>
527
+ <td class="bold">Total</td>
528
+ <td class="text-right bold"><span id="totalTaxableValue">0.00</span></td>
529
+ <td class="text-center bold"></td>
530
+ <td class="text-right bold"><span id="totalCentralTax">0.00</span></td>
531
+ <td class="text-center bold"></td>
532
+ <td class="text-right bold"><span id="totalStateTax">0.00</span></td>
533
+ <td class="text-center bold">18%</td>
534
+ <td class="text-right bold"><span id="totalInterstateTax">0.00</span></td>
535
+ </tr>
536
+ </tfoot>
537
+ </table>
538
+
539
+ <div class="amount-in-words-box">
540
+ <p><strong>Tax Amount (in words):</strong> <span id="taxAmountInWords">Zero Rupees Only</span></p>
541
+ </div>
542
+
543
+ <div class="bank-details-grid">
544
+ <div>
545
+ <p class="bold">Company's Bank Details</p>
546
+ <hr>
547
+ <p><strong>Bank Name:</strong> HDFC</p>
548
+ <p><strong>Account No.:</strong> 50200109680941</p>
549
+ <p><strong>Branch & IFS Code:</strong> Kanjur West, HDFC0004272</p>
550
+ </div>
551
+ <div>
552
+ <p class="bold">Declaration</p>
553
+ <hr>
554
+ <p>We declare that this invoice shows the actual price of the goods described and that all particulars are true and correct.</p>
555
+ </div>
556
+ </div>
557
+
558
+ <div class="signature-section">
559
+ <div class="left-seal">
560
+ <p>Customer's Seal and Signature</p>
561
+ </div>
562
+ <div class="right-signature">
563
+ <p>For SBN Mentors Private Limited</p>
564
+ <p style="margin-top: 40px; font-weight: bold;">Authorised Signatory</p>
565
+ </div>
566
+ </div>
567
+ <div style="text-align: center; margin-top: 10px;">
568
+ <br>
569
+ <p style="font-style: italic; font-size: 12px; color: #888;">This is a Computer Generated Invoice, Signature not required</p>
570
+ </div>
571
+
572
+ </div>
573
+
574
+ <div class="button-panel no-print">
575
+ <button id="printBtn">Print Invoice</button>
576
+ <button id="clearBtn">Clear</button>
577
+ </div>
578
+ </div>
579
+
580
+ <script src="./data_for_great_learning.js"></script>
581
+ <script src="./utils.js"></script>
582
+ <script src="./invoice.js"></script>
583
+ </body>
584
+ </html>
Invoice_visualpath.html ADDED
@@ -0,0 +1,585 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!--
2
+ GST Invoice Template for SBN Mentors Private Limited
3
+ Author: Nitin with Grok / Deepseek and Gemini AI
4
+ Version: 5.0
5
+ License: MIT License
6
+ Features:
7
+ - Dynamic topic selection with amounts
8
+ - GST calculation based on selected topic
9
+ - Print-ready formatting
10
+ Dependencies: None
11
+ Usage:
12
+ - Open this HTML file in a web browser
13
+ - Select the topic and amount from the dropdown
14
+ - Fill in the invoice date and number
15
+ - Click "Print Invoice" to generate a print-ready invoicent();
16
+ Description: This HTML file is a template for generating GST invoices with dynamic topic selection, GST calculation, and print-ready formatting.
17
+ Last Updated: 30June 2025
18
+ -->
19
+
20
+
21
+
22
+ <!DOCTYPE html>
23
+ <html lang="en">
24
+ <head>
25
+ <meta charset="UTF-8">
26
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
27
+ <title>SBN Mentors - Invoice</title>
28
+ <style>
29
+ /* General Body and Container Styles */
30
+ body {
31
+ font-family: Arial, sans-serif;
32
+ background-color: #f4f4f4;
33
+ margin: 0;
34
+ padding: 20px;
35
+ display: flex;
36
+ justify-content: center;
37
+ font-size: 13px;
38
+ }
39
+
40
+ .container {
41
+ background-color: #ffffff;
42
+ padding: 25px;
43
+ border-radius: 8px;
44
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
45
+ width: 100%;
46
+ max-width: 850px;
47
+ box-sizing: border-box;
48
+ }
49
+
50
+ /* --- Main Invoice Border (for screen view) --- */
51
+ #invoiceContent {
52
+ border: 2px solid #000;
53
+ padding: 20px;
54
+ box-sizing: border-box;
55
+ }
56
+
57
+ /* Header and Title Styles */
58
+ h1, h2, h3, h4 {
59
+ margin-top: 0;
60
+ margin-bottom: 10px;
61
+ color: #333;
62
+ }
63
+
64
+ .company-header, .invoice-header {
65
+ text-align: center;
66
+ margin-bottom: 15px;
67
+ border-bottom: 2px solid #eee;
68
+ padding-bottom: 8px;
69
+ }
70
+
71
+ .company-header h2 {
72
+ margin: 3px 0;
73
+ font-size: 20px;
74
+ color: #1e3f66;
75
+ }
76
+
77
+ .company-header p {
78
+ margin: 3px 0;
79
+ font-size: 12px;
80
+ color: #666;
81
+ }
82
+
83
+ .invoice-title {
84
+ text-align: center;
85
+ font-size: 20px;
86
+ font-weight: bold;
87
+ color: #000;
88
+ margin-bottom: 15px;
89
+ padding: 8px;
90
+ background-color: #e6e6e6;
91
+ border-radius: 5px;
92
+ }
93
+
94
+ /* Invoice Grid Layout */
95
+ .invoice-details-grid, .tax-details-grid, .bank-details-grid {
96
+ display: grid;
97
+ grid-template-columns: 1fr 1fr;
98
+ gap: 15px;
99
+ margin-bottom: 20px;
100
+ border: 1px solid #ddd;
101
+ padding: 12px;
102
+ border-radius: 8px;
103
+ }
104
+
105
+ .invoice-details-grid > div, .tax-details-grid > div, .bank-details-grid > div {
106
+ padding: 8px;
107
+ border: 1px solid #f0f0f0;
108
+ border-radius: 5px;
109
+ background-color: #fafafa;
110
+ }
111
+
112
+ .grid-item {
113
+ display: flex;
114
+ flex-direction: column;
115
+ gap: 3px;
116
+ }
117
+
118
+ .grid-item strong {
119
+ color: #555;
120
+ font-size: 13px;
121
+ }
122
+
123
+ .grid-item p {
124
+ margin: 0;
125
+ font-size: 12px;
126
+ color: #333;
127
+ }
128
+
129
+ /* Input Controls and Button Panel */
130
+ .input-panel {
131
+ background-color: #f9f9f9;
132
+ padding: 15px;
133
+ border: 1px solid #e0e0e0;
134
+ border-radius: 8px;
135
+ margin-bottom: 25px;
136
+ display: grid;
137
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
138
+ gap: 15px;
139
+ }
140
+
141
+ .input-panel label {
142
+ display: block;
143
+ margin-bottom: 5px;
144
+ font-weight: bold;
145
+ color: #333;
146
+ }
147
+
148
+ .input-panel input, .input-panel select {
149
+ width: 100%;
150
+ padding: 8px;
151
+ border: 1px solid #ccc;
152
+ border-radius: 5px;
153
+ box-sizing: border-box;
154
+ font-size: 14px;
155
+ }
156
+
157
+ .button-panel {
158
+ text-align: center;
159
+ margin-top: 25px;
160
+ }
161
+
162
+ .button-panel button {
163
+ padding: 10px 20px;
164
+ margin: 0 8px;
165
+ border: none;
166
+ border-radius: 5px;
167
+ cursor: pointer;
168
+ font-size: 15px;
169
+ font-weight: bold;
170
+ transition: background-color 0.3s ease, transform 0.2s ease;
171
+ }
172
+
173
+ #printBtn {
174
+ background-color: #28a745;
175
+ color: white;
176
+ }
177
+
178
+ #printBtn:hover {
179
+ background-color: #218838;
180
+ transform: translateY(-2px);
181
+ }
182
+
183
+ #clearBtn {
184
+ background-color: #dc3545;
185
+ color: white;
186
+ }
187
+
188
+ #clearBtn:hover {
189
+ background-color: #c82333;
190
+ transform: translateY(-2px);
191
+ }
192
+
193
+ /* Table Styles for Invoice Items */
194
+ .invoice-table, .tax-summary-table {
195
+ width: 100%;
196
+ border-collapse: collapse;
197
+ margin-top: 15px;
198
+ margin-bottom: 15px;
199
+ border: 1px solid #000;
200
+ }
201
+
202
+ .invoice-table th, .invoice-table td {
203
+ border: 1px solid #000;
204
+ padding: 8px;
205
+ text-align: left;
206
+ font-size: 12px;
207
+ }
208
+
209
+ .invoice-table th {
210
+ background-color: #f2f2f2;
211
+ font-weight: bold;
212
+ color: #333;
213
+ }
214
+
215
+ .invoice-table tfoot td {
216
+ font-weight: bold;
217
+ background-color: #e9e9e9;
218
+ }
219
+
220
+ /* Reduced Gaps in Tax Summary Table */
221
+ .tax-summary-table th, .tax-summary-table td {
222
+ border: 1px solid #000;
223
+ padding: 5px;
224
+ text-align: left;
225
+ font-size: 11px;
226
+ }
227
+ .tax-summary-table {
228
+ margin-top: 10px;
229
+ margin-bottom: 10px;
230
+ }
231
+
232
+ /* Flexbox for Signatures and Declaration */
233
+ .declaration-section, .signature-section {
234
+ display: flex;
235
+ justify-content: space-between;
236
+ align-items: flex-end;
237
+ margin-top: 30px;
238
+ }
239
+
240
+ .declaration-section p, .signature-section p {
241
+ margin: 0;
242
+ font-size: 11px;
243
+ color: #777;
244
+ }
245
+
246
+ .signature-section .left-seal {
247
+ flex-grow: 1;
248
+ text-align: left;
249
+ padding: 8px;
250
+ }
251
+
252
+ .signature-section .right-signature {
253
+ text-align: right;
254
+ border-top: 1px solid #000;
255
+ width: 250px;
256
+ padding-top: 5px;
257
+ }
258
+
259
+ /* Amount in Words and totals */
260
+ .amount-in-words-box {
261
+ background-color: #eef;
262
+ padding: 12px;
263
+ margin-top: 15px;
264
+ border-radius: 8px;
265
+ border: 1px dashed #cdd;
266
+ }
267
+
268
+ .amount-in-words-box p {
269
+ margin: 0;
270
+ font-weight: bold;
271
+ color: #1e3f66;
272
+ font-size: 12px;
273
+ }
274
+
275
+ /* Utility Classes */
276
+ .text-right {
277
+ text-align: right;
278
+ }
279
+
280
+ .text-center {
281
+ text-align: center;
282
+ }
283
+
284
+ .bold {
285
+ font-weight: bold;
286
+ }
287
+
288
+ /* Hide elements for printing using a class */
289
+ .no-print {
290
+ display: block;
291
+ }
292
+
293
+ /* --- CRITICAL PRINT STYLES FOR SINGLE PAGE --- */
294
+ @media print {
295
+ .no-print {
296
+ display: none !important;
297
+ }
298
+
299
+ @page {
300
+ size: A4 portrait;
301
+ margin: 0; /* Remove browser margins */
302
+ }
303
+
304
+ html, body {
305
+ width: 210mm;
306
+ height: 297mm;
307
+ margin: 0;
308
+ padding: 0;
309
+ font-size: 9pt;
310
+ line-height: 1.2;
311
+ -webkit-print-color-adjust: exact;
312
+ color-adjust: exact;
313
+ }
314
+
315
+ .container {
316
+ width: 100%;
317
+ max-width: 100%;
318
+ margin: 0;
319
+ padding: 10mm; /* Add padding to create a margin inside the page border */
320
+ border: 1px solid #000; /* Add a border around the entire page */
321
+ box-shadow: none;
322
+ border-radius: 0;
323
+ box-sizing: border-box;
324
+ height: 100%;
325
+ }
326
+
327
+ #invoiceContent {
328
+ border: none;
329
+ padding: 0;
330
+ }
331
+
332
+ /* Make sure table rows don't break across pages */
333
+ tr, td, th {
334
+ page-break-inside: avoid !important;
335
+ }
336
+
337
+ /* Tighten up all margins and paddings in print mode */
338
+ h2, h3, h4 {
339
+ margin: 2px 0;
340
+ padding: 0;
341
+ }
342
+
343
+ p {
344
+ margin: 1px 0;
345
+ }
346
+
347
+ .company-header {
348
+ margin-bottom: 10px;
349
+ padding-bottom: 5px;
350
+ }
351
+
352
+ .invoice-details-grid, .tax-details-grid, .bank-details-grid {
353
+ gap: 10px;
354
+ margin-bottom: 10px;
355
+ padding: 8px;
356
+ }
357
+
358
+ .invoice-table, .tax-summary-table {
359
+ margin-top: 10px;
360
+ margin-bottom: 10px;
361
+ }
362
+
363
+ .invoice-table th, .invoice-table td,
364
+ .tax-summary-table th, .tax-summary-table td {
365
+ padding: 4px;
366
+ }
367
+
368
+ .amount-in-words-box {
369
+ margin-top: 10px;
370
+ padding: 8px;
371
+ }
372
+
373
+ .signature-section {
374
+ margin-top: 20px;
375
+ }
376
+
377
+ .signature-section .right-signature {
378
+ margin-top: 25px;
379
+ }
380
+ }
381
+ </style>
382
+ </head>
383
+ <body>
384
+
385
+ <div class="container">
386
+ <div class="input-panel no-print">
387
+ <div>
388
+ <label for="invoiceDate">Date:</label>
389
+ <input type="date" id="invoiceDate" required>
390
+ </div>
391
+ <div>
392
+ <label for="invoiceNumber">Invoice Number:</label>
393
+ <input type="text" id="invoiceNumber" placeholder="e.g., xxx/06/2025" required>
394
+ </div>
395
+ <div>
396
+ <label for="courseTopicSelect">Topic & Amount:</label>
397
+ <select id="courseTopicSelect" required>
398
+ <option value="" disabled selected>Select a topic</option>
399
+ </select>
400
+ </div>
401
+ </div>
402
+
403
+ <div id="invoiceContent">
404
+
405
+ <div class="company-header">
406
+ <h2>SBN Mentors Private Limited</h2>
407
+ <p>Registered Office: D-6 41/42 Chittranjan Nagar, Chintamani CHS, Rajawadi, Vidyavihar East, Mumbai – 400077</p>
408
+ <p class="bold">CIN: U70200MH2024PTC420264 | Email: geetikanand@gmail.com</p>
409
+ <hr>
410
+ <h3 class="invoice-title">TAX INVOICE</h3>
411
+ <p>Sec.23 of Rule 1(1)</p>
412
+ </div>
413
+
414
+ <div class="invoice-details-grid">
415
+ <div class="left-col">
416
+ <h4 style="margin-bottom: 5px;">SBN Mentors Private Limited</h4>
417
+ <p>Address: D-41/42, Chittranjan Nagar,</p>
418
+ <p>Address: CHS, Rajawadi, Vidyavihar East</p>
419
+ <p style="margin-bottom: 10px;">Mumbai, 400077</p>
420
+ <p><strong>GSTIN:</strong> 27ABMCS8731Q1ZB</p>
421
+ <p><strong>CIN:</strong> U70200MH2024PTC420264</p>
422
+ <p style="margin-bottom: 10px;"><strong>PAN:</strong> ABCMS8731Q</p>
423
+ <p><strong>Mode/Terms of Payment:</strong> Chq/Neft,RTGS</p>
424
+ <p><strong>Contact:</strong> +919594493624</p>
425
+ <p><strong>E-Mail:</strong> geetikanand@gmail.com</p>
426
+ </div>
427
+ <div class="right-col">
428
+ <div class="grid-item" style="margin-bottom: 10px;">
429
+ <p><strong>Invoice No.:</strong> <span id="displayInvoiceNo">INV_NUMBER</span></p>
430
+ <p><strong>Dated:</strong> <span id="displayInvoiceDate">INV_DATE</span></p>
431
+ </div>
432
+ <h4 style="margin-bottom: 5px;">Buyer: VISUALPATH</h4>
433
+ <p>Address: Flat No-205, NilgiriBlock,Adithya Enclave, </p>
434
+ <p>Address: Ameerpet</p>
435
+ <p style="margin-bottom: 10px;">Hyderabad - 500016</p>
436
+ <p><strong>GSTIN:</strong> 36AAUFV6630R1Z1</p>
437
+ <p style="margin-bottom: 10px;"><strong>PAN:</strong> AAUFV6630R</p>
438
+ <p><strong>E-Mail:</strong> malathi.visualpath@gmail.com</p>
439
+ <p style="margin-bottom: 10px;"></p>
440
+ <p><strong>Place of Supply:</strong> Mumbai</p>
441
+ </div>
442
+ </div>
443
+
444
+ <table class="invoice-table">
445
+ <thead>
446
+ <tr>
447
+ <th style="width: 5%;">Sl No.</th>
448
+ <th>Particulars: Description of Services</th>
449
+ <th style="width: 15%;">HSN/SAC</th>
450
+ <th style="width: 10%;">GST Rate</th>
451
+ <th class="text-right" style="width: 15%;">Amount</th>
452
+ </tr>
453
+ </thead>
454
+ <tbody>
455
+ <tr>
456
+ <td class="text-center">1</td>
457
+ <td><span id="displayTopic">INV_TOPIC</span></td>
458
+ <td class="text-center">999259</td>
459
+ <td class="text-center">18 %</td>
460
+ <td class="text-right"><span id="displayBaseAmount">0.00</span></td>
461
+ </tr>
462
+ </tbody>
463
+ <tfoot>
464
+ <tr>
465
+ <td colspan="4" class="text-right bold">Sub Total</td>
466
+ <td class="text-right bold"><span id="subTotal">0.00</span></td>
467
+ </tr>
468
+ <tr>
469
+ <td colspan="4" class="text-right bold">CGST</td>
470
+ <td class="text-right bold"><span id="cgstAmount">0.00</span></td>
471
+ </tr>
472
+ <tr>
473
+ <td colspan="4" class="text-right bold">SGST</td>
474
+ <td class="text-right bold"><span id="sgstAmount">0.00</span></td>
475
+ </tr>
476
+ <tr>
477
+ <td colspan="4" class="text-right bold">IGST</td>
478
+ <td class="text-right bold"><span id="igstAmount">0.00</span></td>
479
+ </tr>
480
+ <tr>
481
+ <td colspan="4" class="text-right bold">Total</td>
482
+ <td class="text-right bold">₹ <span id="totalAmount">0.00</span></td>
483
+ </tr>
484
+ <tr>
485
+ <td colspan="5" style="text-align: right; font-style: italic;">E. & O.E</td>
486
+ </tr>
487
+ </tfoot>
488
+ </table>
489
+
490
+ <div class="amount-in-words-box">
491
+ <p><strong>Amount Chargeable (in words):</strong> <span id="amountInWords">Zero Rupees Only</span></p>
492
+ </div>
493
+
494
+ <table class="tax-summary-table">
495
+ <thead>
496
+ <tr>
497
+ <th>HSN/SAC</th>
498
+ <th>Taxable Value</th>
499
+ <th colspan="2" class="text-center">Central Tax</th>
500
+ <th colspan="2" class="text-center">State Tax</th>
501
+ <th colspan="2" class="text-center">Interstate Tax</th>
502
+ </tr>
503
+ <tr>
504
+ <th></th>
505
+ <th></th>
506
+ <th class="text-center">Rate</th>
507
+ <th class="text-center">Amount</th>
508
+ <th class="text-center">Rate</th>
509
+ <th class="text-center">Amount</th>
510
+ <th class="text-center">Rate</th>
511
+ <th class="text-center">Amount</th>
512
+ </tr>
513
+ </thead>
514
+ <tbody>
515
+ <tr>
516
+ <td class="text-center">999259</td>
517
+ <td class="text-right"><span id="taxableValue">0.00</span></td>
518
+ <td class="text-center">9%</td>
519
+ <td class="text-right"><span id="centralTax">0.00</span></td>
520
+ <td class="text-center">9%</td>
521
+ <td class="text-right"><span id="stateTax">0.00</span></td>
522
+ <td class="text-center">18%</td>
523
+ <td class="text-right"><span id="interstateTax">0.00</span></td>
524
+ </tr>
525
+ </tbody>
526
+ <tfoot>
527
+ <tr>
528
+ <td class="bold">Total</td>
529
+ <td class="text-right bold"><span id="totalTaxableValue">0.00</span></td>
530
+ <td class="text-center bold"></td>
531
+ <td class="text-right bold"><span id="totalCentralTax">0.00</span></td>
532
+ <td class="text-center bold"></td>
533
+ <td class="text-right bold"><span id="totalStateTax">0.00</span></td>
534
+ <td class="text-center bold">18%</td>
535
+ <td class="text-right bold"><span id="totalInterstateTax">0.00</span></td>
536
+ </tr>
537
+ </tfoot>
538
+ </table>
539
+
540
+ <div class="amount-in-words-box">
541
+ <p><strong>Tax Amount (in words):</strong> <span id="taxAmountInWords">Zero Rupees Only</span></p>
542
+ </div>
543
+
544
+ <div class="bank-details-grid">
545
+ <div>
546
+ <p class="bold">Company's Bank Details</p>
547
+ <hr>
548
+ <p><strong>Bank Name:</strong> HDFC</p>
549
+ <p><strong>Account No.:</strong> 50200109680941</p>
550
+ <p><strong>Branch & IFS Code:</strong> Kanjur West, HDFC0004272</p>
551
+ </div>
552
+ <div>
553
+ <p class="bold">Declaration</p>
554
+ <hr>
555
+ <p>We declare that this invoice shows the actual price of the goods described and that all particulars are true and correct.</p>
556
+ </div>
557
+ </div>
558
+
559
+ <div class="signature-section">
560
+ <div class="left-seal">
561
+ <p>Customer's Seal and Signature</p>
562
+ </div>
563
+ <div class="right-signature">
564
+ <p>For SBN Mentors Private Limited</p>
565
+ <p style="margin-top: 40px; font-weight: bold;">Authorised Signatory</p>
566
+ </div>
567
+ </div>
568
+ <div style="text-align: center; margin-top: 10px;">
569
+ <br>
570
+ <p style="font-style: italic; font-size: 12px; color: #888;">This is a Computer Generated Invoice, Signature not required</p>
571
+ </div>
572
+
573
+ </div>
574
+
575
+ <div class="button-panel no-print">
576
+ <button id="printBtn">Print Invoice</button>
577
+ <button id="clearBtn">Clear</button>
578
+ </div>
579
+ </div>
580
+
581
+ <script src="./data_for_visual_path.js"></script>
582
+ <script src="./utils.js"></script>
583
+ <script src="./invoice.js"></script>
584
+ </body>
585
+ </html>
README.md CHANGED
@@ -9,4 +9,4 @@ license: apache-2.0
9
  short_description: sbn Invoice
10
  ---
11
 
12
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
9
  short_description: sbn Invoice
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
data_for_great_learning.js ADDED
@@ -0,0 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const courseTopics = [
2
+ { category: "Python", topics: [
3
+ { name: "Python - M1W1 - Intro to Python", amount: 3000 },
4
+ { name: "Python - M1W2 - Data Manipulation", amount: 3000 },
5
+ { name: "Python - M1W3 - Exploratory Data Analysis", amount: 3000 },
6
+ { name: "Python - M1W4 - Analyzing Text Data", amount: 3000 }
7
+ ]},
8
+ { category: "Machine Learning", topics: [
9
+ { name: "Machine Learning - M2W1 - Linear Regression", amount: 3000 },
10
+ { name: "Machine Learning - M2W2 - Decision Trees", amount: 3000 },
11
+ { name: "Machine Learning - M2W3 - K-Means Clustering", amount: 3000 }
12
+ ]},
13
+ { category: "Advanced Machine Learning", topics: [
14
+ { name: "Advanced Machine Learning - M3W1 - Bagging", amount: 3000 },
15
+ { name: "Advanced Machine Learning - M3W2 - Boosting", amount: 3000 },
16
+ { name: "Advanced Machine Learning - M3W3 - Model Tuning", amount: 3000 }
17
+ ]},
18
+ { category: "Neural Networks", topics: [
19
+ { name: "Neural Networks - M4W1 - Intro to Neural Networks", amount: 4000 },
20
+ { name: "Neural Networks - M4W2 - Optimizing Neural Networks", amount: 4000 }
21
+ ]},
22
+ { category: "NLP with GenAI", topics: [
23
+ { name: "NLP with GenAI - M5W1 - Word Embeddings", amount: 4000 },
24
+ { name: "NLP with GenAI - M5W2 - Attention Mechanism and Transformers", amount: 4000 },
25
+ { name: "NLP with GenAI - M5W3 - LLM and Prompt Engineering", amount: 4000 },
26
+ { name: "NLP with GenAI - M5W4 - RAG - Retrieval Augmented Generation", amount: 4000 }
27
+ ]},
28
+ { category: "Computer Vision (CV)", topics: [
29
+ { name: "Computer Vision - M6W1 - Image Processing", amount: 4000 },
30
+ { name: "Computer Vision - M6W2 - CNN (Convolutional Neural Networks)", amount: 4000 }
31
+ ]},
32
+ { category: "Model Deployment", topics: [
33
+ { name: "Model Deployment - M7W1 - Intro to Model Deployment", amount: 3000 },
34
+ { name: "Model Deployment - M7W2 - Containerization", amount: 3000 }
35
+ ]},
36
+ { category: "SQL (Structured Query Language)", topics: [
37
+ { name: "SQL - M8W1 - Querying Data with SQL", amount: 3000 },
38
+ { name: "SQL - M8W2 - Advanced Querying", amount: 3000 },
39
+ { name: "SQL - M8W3 - Enhancing Query Proficiency", amount: 3000 }
40
+ ]},
41
+ { category: "Statistics", topics: [
42
+ { name: "Statistics - M9W1 - Inferential Statistics Foundations", amount: 3000 },
43
+ { name: "Statistics - M9W2 - Estimation and Hypothesis Testing", amount: 3000 },
44
+ { name: "Statistics - M9W3 - Common Statistical Tests", amount: 3000 }
45
+ ]},
46
+ { category: "MLOps", topics: [
47
+ { name: "MLOps - M10W1 - Model Interpretability", amount: 3000 },
48
+ { name: "MLOps - M10W2 - Introduction to DevOps and MLOps", amount: 3000 },
49
+ { name: "MLOps - M10W3 - Building ML Pipelines", amount: 3000 }
50
+ ]},
51
+ { category: "Advanced GenAI for NLP", topics: [
52
+ { name: "Advanced GenAI for NLP - M11W1 - AI Assistant Development", amount: 4000 },
53
+ { name: "Advanced GenAI for NLP - M11W2 - Fine-tuning LLMs", amount: 4000 }
54
+ ]},
55
+ { category: "Leveraging Generative AI for Business Applications", topics: [
56
+ { name: "W1: Strategic AI Adoption: Navigating the GenAI & Agentic Landscape", amount: 6000 },
57
+ { name: "W2: NLP workloads on Azure", amount: 6000 }
58
+ ]}
59
+ ];
data_for_visual_path.js ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const courseTopics =
2
+ [
3
+ { category: "SAP AI - Technical Track - 2", topics: [
4
+ { name: "SAP Artificial Intelligence Course", amount: 20000 }
5
+ ]},
6
+ { category: "SAP AI - Technical Track - 3", topics: [
7
+ { name: "SAP Artificial Intelligence Course", amount: 30000 }
8
+ ]},
9
+ { category: "SAP AI - Technical Track - 4", topics: [
10
+ { name: "SAP Artificial Intelligence Course", amount: 40000 }
11
+ ]},
12
+ { category: "SAP AI - Technical Track - 5", topics: [
13
+ { name: "SAP Artificial Intelligence Course", amount: 50000 }
14
+ ]},
15
+ { category: "SAP AI - Technical Track - 6", topics: [
16
+ { name: "SAP Artificial Intelligence Course", amount: 60000 }
17
+ ]},
18
+ { category: "SAP AI - Technical Track - 7", topics: [
19
+ { name: "SAP Artificial Intelligence Course", amount: 70000 }
20
+ ]},
21
+ { category: "SAP AI - Technical Track - 8", topics: [
22
+ { name: "SAP Artificial Intelligence Course", amount: 80000 }
23
+ ]}
24
+ ]
index.html CHANGED
@@ -57,8 +57,9 @@
57
 
58
  <div class="container">
59
  <h1>Main Menu</h1>
60
- <a href="./Invoice_v5.html" class="button">Print Invoice</a>
61
- <a href="./Sessions.html" class="button">Session Calendar</a>
 
62
  </div>
63
 
64
  </body>
 
57
 
58
  <div class="container">
59
  <h1>Main Menu</h1>
60
+ <a href="./Invoice_greatlearning.html" class="button">Print Invoice for Great Learning</a>
61
+ <a href="./Invoice_visualpath.html" class="button">Print Invoice for Visual Path</a>
62
+ <!-- <a href="./Sessions.html" class="button">Session Calendar</a> -->
63
  </div>
64
 
65
  </body>
invoice.js ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ const printBtn = document.getElementById('printBtn');
3
+ const clearBtn = document.getElementById('clearBtn');
4
+
5
+ // Set default date to current date
6
+ const today = new Date().toISOString().split('T')[0];
7
+ invoiceDateInput.value = today;
8
+
9
+ // Set default invoice number
10
+ invoiceNumberInput.value = generateInvoiceNumber();
11
+
12
+ // Event Listeners for input changes
13
+ invoiceDateInput.addEventListener('change', updateInvoice);
14
+ invoiceNumberInput.addEventListener('input', updateInvoice);
15
+ courseTopicSelect.addEventListener('change', updateInvoice); // Listen to new dropdown
16
+
17
+ // Print button functionality with validation
18
+ printBtn.addEventListener('click', () => {
19
+ if (!invoiceDateInput.value || !invoiceNumberInput.value || !courseTopicSelect.value) {
20
+ alert('Please fill in all required fields: Date, Invoice Number, and Topic.');
21
+ return;
22
+ }
23
+
24
+ // Generate file name in the format: GST_Invoice MMM DD, YYYY_III-MM-YY.pdf
25
+ const dt = new Date(invoiceDateInput.value);
26
+ const MMM = dt.toLocaleString('en-US', { month: 'short' });
27
+ const DD = String(dt.getDate()).padStart(2, '0');
28
+ const YYYY = dt.getFullYear();
29
+ const MM = String(dt.getMonth() + 1).padStart(2, '0');
30
+ const YY = String(YYYY).slice(-2);
31
+ const invoiceNum = invoiceNumberInput.value; // Assuming this holds the invoice number
32
+ const generatedFileName = `GST_Invoice ${MMM} ${DD}, ${YYYY}_${invoiceNum}-${MM}-${YY}.pdf`;
33
+ console.log('Generated file name:', generatedFileName);
34
+
35
+ // First, ensure the invoice content is fully updated
36
+ updateInvoice();
37
+ // Then, trigger the print dialog
38
+ window.print();
39
+ });
40
+
41
+ // Clear button functionality
42
+ clearBtn.addEventListener('click', () => {
43
+ // Clear all input fields and reset the invoice display
44
+ invoiceDateInput.value = today;
45
+ invoiceNumberInput.value = generateInvoiceNumber();
46
+ courseTopicSelect.value = '';
47
+ // Call updateInvoice to reset displayed values to their defaults
48
+ updateInvoice();
49
+ });
50
+
51
+ // Initial population of the dropdown when the page loads
52
+ populateTopicsDropdown();
53
+ // Initial invoice update to show default values
54
+ updateInvoice();
55
+ });
run_app.bat ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @echo off
2
+ REM ============================================
3
+ REM SBN Mentors Invoice & Sessions Application
4
+ REM Batch file to run the app
5
+ REM ============================================
6
+
7
+ setlocal enabledelayedexpansion
8
+
9
+ REM Get the current directory
10
+ set APP_DIR=%~dp0
11
+
12
+ REM Check if Python is available for running a local server (optional)
13
+ where python >nul 2>nul
14
+ if %ERRORLEVEL% EQU 0 (
15
+ echo Python found. Starting local HTTP server...
16
+ echo.
17
+ echo Starting server on http://localhost:8000
18
+ echo Press Ctrl+C to stop the server
19
+ echo.
20
+
21
+ REM Change to app directory and start Python HTTP server
22
+ cd /d "%APP_DIR%"
23
+ python -m http.server 8000
24
+ ) else (
25
+ echo Python not found. Opening index.html directly...
26
+ echo.
27
+
28
+ REM Open the index.html file directly in the default browser
29
+ set INDEX_FILE=%APP_DIR%index.html
30
+
31
+ if exist "!INDEX_FILE!" (
32
+ start "" "!INDEX_FILE!"
33
+ echo App opened in your default browser.
34
+ ) else (
35
+ echo Error: index.html not found in %APP_DIR%
36
+ pause
37
+ )
38
+ )
39
+
40
+ endlocal
41
+ pause
style.css CHANGED
@@ -25,4 +25,4 @@ p {
25
 
26
  .card p:last-child {
27
  margin-bottom: 0;
28
- }
 
25
 
26
  .card p:last-child {
27
  margin-bottom: 0;
28
+ }
utils.js ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const invoiceDateInput = document.getElementById('invoiceDate');
2
+ const invoiceNumberInput = document.getElementById('invoiceNumber');
3
+ const courseTopicSelect = document.getElementById('courseTopicSelect'); // New dropdown
4
+
5
+ const displayInvoiceDate = document.getElementById('displayInvoiceDate');
6
+ const displayTopic = document.getElementById('displayTopic');
7
+ const displayInvoiceNo = document.getElementById('displayInvoiceNo');
8
+ const displayBaseAmount = document.getElementById('displayBaseAmount');
9
+
10
+ const subTotalSpan = document.getElementById('subTotal');
11
+ const cgstAmountSpan = document.getElementById('cgstAmount');
12
+ const sgstAmountSpan = document.getElementById('sgstAmount');
13
+ const igstAmountSpan = document.getElementById('igstAmount');
14
+ const totalAmountSpan = document.getElementById('totalAmount');
15
+ const amountInWordsSpan = document.getElementById('amountInWords');
16
+
17
+ const taxableValueSpan = document.getElementById('taxableValue');
18
+ const centralTaxSpan = document.getElementById('centralTax');
19
+ const stateTaxSpan = document.getElementById('stateTax');
20
+ const interstateTaxSpan = document.getElementById('interstateTax');
21
+ const totalTaxableValueSpan = document.getElementById('totalTaxableValue');
22
+ const totalCentralTaxSpan = document.getElementById('totalCentralTax');
23
+ const totalStateTaxSpan = document.getElementById('totalStateTax');
24
+ const totalInterstateTaxSpan = document.getElementById('totalInterstateTax');
25
+ const taxAmountInWordsSpan = document.getElementById('taxAmountInWords');
26
+
27
+
28
+ function populateTopicsDropdown() {
29
+ const courseTopicSelect = document.getElementById('courseTopicSelect');
30
+ courseTopics.forEach(category => {
31
+ const optgroup = document.createElement('optgroup');
32
+ optgroup.label = category.category;
33
+ category.topics.forEach(topic => {
34
+ const option = document.createElement('option');
35
+ option.value = topic.amount; // Store the amount in the value
36
+ option.textContent = topic.name; // Display the topic name
37
+ optgroup.appendChild(option);
38
+ });
39
+ courseTopicSelect.appendChild(optgroup);
40
+ });
41
+ }
42
+
43
+ function convertNumberToWords(num) {
44
+ const a = ['', 'one ', 'two ', 'three ', 'four ', 'five ', 'six ', 'seven ', 'eight ', 'nine ', 'ten ', 'eleven ', 'twelve ', 'thirteen ', 'fourteen ', 'fifteen ', 'sixteen ', 'seventeen ', 'eighteen ', 'nineteen '];
45
+ const b = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
46
+
47
+ if ((num = num.toString()).length > 9) return 'overflow';
48
+ const n = ('000000000' + num).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
49
+ if (!n) return 'Zero';
50
+ let str = '';
51
+ str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'crore ' : '';
52
+ str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'lakh ' : '';
53
+ str += (n[3] != 0) ? (a[Number(n[3])] || b[n[3][0]] + ' ' + a[n[3][1]]) + 'thousand ' : '';
54
+ str += (n[4] != 0) ? (a[Number(n[4])] || b[n[4][0]] + ' ' + a[n[4][1]]) + 'hundred ' : '';
55
+ str += (n[5] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[5])] || b[n[5][0]] + ' ' + a[n[5][1]]) : '';
56
+
57
+ return str.trim().charAt(0).toUpperCase() + str.trim().slice(1) + ' Rupees Only';
58
+ }
59
+
60
+ function generateInvoiceNumber() {
61
+ const date = new Date();
62
+ const month = String(date.getMonth() + 1).padStart(2, '0'); // Get month (0-11) + 1, pad with 0
63
+ const year = date.getFullYear();
64
+ const prefix = "INV"; // Example prefix, can be customized
65
+ return `${prefix}/${month}/${year}`;
66
+ }
67
+
68
+ function updateInvoice() {
69
+ // Get selected values
70
+ const selectedDate = invoiceDateInput.value;
71
+ const selectedInvoiceNo = invoiceNumberInput.value;
72
+
73
+ // Get selected topic name and its associated amount
74
+ const selectedOption = courseTopicSelect.options[courseTopicSelect.selectedIndex];
75
+ const selectedTopic = selectedOption ? selectedOption.textContent : 'INV_TOPIC';
76
+ const baseAmount = parseFloat(selectedOption ? selectedOption.value : 0) || 0;
77
+
78
+ // Update display elements
79
+ displayInvoiceDate.textContent = selectedDate ? new Date(selectedDate).toLocaleDateString('en-GB') : 'INV_DATE';
80
+ displayTopic.textContent = 'Education Services : ' + selectedTopic;
81
+ displayInvoiceNo.textContent = selectedInvoiceNo || 'INV_NUMBER';
82
+ displayBaseAmount.textContent = baseAmount.toFixed(2);
83
+
84
+ // --- Calculations for GST at 18% ---
85
+ const gstRate = 0.18;
86
+ const igstAmount = baseAmount * gstRate; // Full 18% IGST for interstate supply
87
+
88
+ // Set CGST and SGST to 0 for IGST calculation
89
+ const cgstAmount = 0;
90
+ const sgstAmount = 0;
91
+
92
+ const totalAmount = baseAmount + igstAmount;
93
+ const taxAmount = igstAmount;
94
+
95
+ // Update total amounts
96
+ subTotalSpan.textContent = baseAmount.toFixed(2);
97
+ cgstAmountSpan.textContent = cgstAmount.toFixed(2);
98
+ sgstAmountSpan.textContent = sgstAmount.toFixed(2);
99
+ igstAmountSpan.textContent = igstAmount.toFixed(2);
100
+ totalAmountSpan.textContent = totalAmount.toFixed(2);
101
+ amountInWordsSpan.textContent = convertNumberToWords(totalAmount.toFixed(0)); // Convert to integer for words
102
+
103
+ // Update tax summary table
104
+ taxableValueSpan.textContent = baseAmount.toFixed(2);
105
+ centralTaxSpan.textContent = cgstAmount.toFixed(2);
106
+ stateTaxSpan.textContent = sgstAmount.toFixed(2);
107
+ interstateTaxSpan.textContent = igstAmount.toFixed(2);
108
+
109
+ totalTaxableValueSpan.textContent = baseAmount.toFixed(2);
110
+ totalCentralTaxSpan.textContent = cgstAmount.toFixed(2);
111
+ totalStateTaxSpan.textContent = sgstAmount.toFixed(2);
112
+ totalInterstateTaxSpan.textContent = igstAmount.toFixed(2);
113
+ taxAmountInWordsSpan.textContent = convertNumberToWords(taxAmount.toFixed(0));
114
+ }