{"id":477,"date":"2026-06-17T10:34:16","date_gmt":"2026-06-17T10:34:16","guid":{"rendered":"https:\/\/vikassrivastava.in\/academy\/?page_id=477"},"modified":"2026-06-17T11:11:51","modified_gmt":"2026-06-17T11:11:51","slug":"gst-calculator","status":"publish","type":"page","link":"https:\/\/vikassrivastava.in\/academy\/gst-calculator\/","title":{"rendered":"GST Calculator"},"content":{"rendered":"\n<div id=\"gstInvoiceApp\" class=\"gst-app\">\n  <style>\n    :root {\n      --gst-primary: #2563eb;\n      --gst-secondary: #06b6d4;\n      --gst-danger: #dc2626;\n      --gst-success: #16a34a;\n      --gst-warning: #f59e0b;\n      --gst-bg: #f8fafc;\n      --gst-card: #ffffff;\n      --gst-text: #0f172a;\n      --gst-muted: #64748b;\n      --gst-border: #dbe4f0;\n      --gst-soft: #eef6ff;\n      --gst-radius: 18px;\n      --gst-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);\n    }\n\n    #gstInvoiceApp {\n      width: 96vw;\n      max-width: 1580px;\n      margin: 20px auto;\n      padding: 30px;\n      background: var(--gst-bg);\n      color: var(--gst-text);\n      border-radius: 24px;\n      font-family: Arial, sans-serif;\n      box-sizing: border-box;\n    }\n\n    .gst-header {\n      text-align: center;\n      margin-bottom: 28px;\n    }\n\n    .gst-header h1 {\n      margin: 0 0 10px;\n      font-size: clamp(32px, 5vw, 56px);\n      letter-spacing: -1px;\n      color: var(--gst-text);\n    }\n\n    .gst-header p {\n      color: var(--gst-muted);\n      font-size: 17px;\n      line-height: 1.6;\n      max-width: 950px;\n      margin: 0 auto;\n    }\n\n    .gst-card {\n      background: var(--gst-card);\n      border: 1px solid var(--gst-border);\n      border-radius: var(--gst-radius);\n      padding: 24px;\n      box-shadow: var(--gst-shadow);\n      margin-bottom: 22px;\n    }\n\n    .gst-card h2 {\n      margin: 0 0 8px;\n      font-size: 30px;\n      color: var(--gst-text);\n    }\n\n    .gst-card p {\n      margin-top: 0;\n      color: var(--gst-muted);\n      font-size: 16px;\n      line-height: 1.6;\n    }\n\n    .gst-top-layout {\n      display: grid;\n      grid-template-columns: 220px 1fr;\n      gap: 24px;\n      align-items: start;\n    }\n\n    .gst-logo-upload-box {\n      border: 1px dashed var(--gst-border);\n      background: var(--gst-soft);\n      border-radius: 16px;\n      padding: 16px;\n      text-align: center;\n    }\n\n    .gst-logo-upload-box label {\n      display: block;\n      font-weight: 900;\n      margin-bottom: 10px;\n      color: var(--gst-text);\n      font-size: 14px;\n    }\n\n    .gst-logo-preview {\n      width: 150px;\n      height: 90px;\n      object-fit: contain;\n      background: white;\n      border: 1px solid var(--gst-border);\n      border-radius: 12px;\n      padding: 8px;\n      margin: 0 auto 12px;\n      display: none;\n    }\n\n    .gst-logo-help {\n      font-size: 12px;\n      color: var(--gst-muted);\n      line-height: 1.4;\n      margin-top: 8px;\n    }\n\n    .gst-grid-2 {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 16px;\n    }\n\n    .gst-grid-3 {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 16px;\n    }\n\n    .gst-field {\n      margin-bottom: 15px;\n    }\n\n    .gst-field label {\n      display: block;\n      font-size: 14px;\n      font-weight: 800;\n      margin-bottom: 7px;\n      color: var(--gst-text);\n    }\n\n    .gst-input,\n    .gst-select,\n    .gst-textarea {\n      width: 100%;\n      padding: 12px 13px;\n      border-radius: 12px;\n      border: 1px solid var(--gst-border);\n      background: #ffffff;\n      color: var(--gst-text);\n      box-sizing: border-box;\n      font-size: 14px;\n      outline: none;\n    }\n\n    .gst-textarea {\n      min-height: 75px;\n      resize: vertical;\n    }\n\n    .gst-input:focus,\n    .gst-select:focus,\n    .gst-textarea:focus {\n      border-color: var(--gst-primary);\n      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);\n    }\n\n    .gst-table-wrap {\n      overflow-x: auto;\n      border: 1px solid var(--gst-border);\n      border-radius: 16px;\n      background: #ffffff;\n      margin-top: 20px;\n    }\n\n    .gst-table {\n      width: 100%;\n      min-width: 1320px;\n      border-collapse: collapse;\n      font-size: 14px;\n    }\n\n    .gst-table th {\n      background: var(--gst-soft);\n      color: var(--gst-text);\n      padding: 14px 12px;\n      text-align: left;\n      border-bottom: 1px solid var(--gst-border);\n      font-weight: 900;\n      white-space: nowrap;\n    }\n\n    .gst-table td {\n      padding: 12px;\n      border-bottom: 1px solid var(--gst-border);\n      vertical-align: middle;\n    }\n\n    .gst-table input,\n    .gst-table select {\n      width: 100%;\n      padding: 10px 11px;\n      border: 1px solid var(--gst-border);\n      border-radius: 10px;\n      box-sizing: border-box;\n      font-size: 14px;\n      outline: none;\n      background: #ffffff;\n    }\n\n    .gst-btn-row {\n      display: flex;\n      gap: 12px;\n      flex-wrap: wrap;\n      margin-top: 18px;\n      align-items: center;\n    }\n\n    .gst-btn {\n      border: none;\n      outline: none;\n      padding: 13px 18px;\n      border-radius: 13px;\n      cursor: pointer;\n      font-size: 15px;\n      font-weight: 900;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: 0.2s ease;\n    }\n\n    .gst-btn:hover {\n      transform: translateY(-2px);\n    }\n\n    .gst-btn-primary {\n      background: linear-gradient(135deg, var(--gst-primary), var(--gst-secondary));\n      color: white;\n      box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);\n    }\n\n    .gst-btn-soft {\n      background: var(--gst-soft);\n      color: var(--gst-text);\n      border: 1px solid var(--gst-border);\n    }\n\n    .gst-btn-success {\n      background: var(--gst-success);\n      color: white;\n    }\n\n    .gst-btn-warning {\n      background: var(--gst-warning);\n      color: white;\n    }\n\n    .gst-btn-danger,\n    .gst-remove-btn {\n      background: var(--gst-danger);\n      color: white;\n    }\n\n    .gst-remove-btn {\n      border: none;\n      padding: 11px 14px;\n      border-radius: 11px;\n      cursor: pointer;\n      font-weight: 900;\n    }\n\n    .gst-note {\n      margin-top: 16px;\n      background: #fff7ed;\n      border: 1px solid #fed7aa;\n      color: #9a3412;\n      border-radius: 14px;\n      padding: 13px 15px;\n      line-height: 1.55;\n      font-size: 14px;\n      font-weight: 700;\n    }\n\n    .gst-alert {\n      display: none;\n      margin-top: 14px;\n      padding: 13px 15px;\n      border-radius: 14px;\n      background: #dcfce7;\n      border: 1px solid #86efac;\n      color: #166534;\n      font-weight: 800;\n    }\n\n    .gst-invoice-section,\n    .gst-records-section {\n      display: none;\n      background: #ffffff;\n      border: 1px solid var(--gst-border);\n      border-radius: var(--gst-radius);\n      padding: 24px;\n      box-shadow: var(--gst-shadow);\n      margin-top: 24px;\n    }\n\n    .invoice-header {\n      display: grid;\n      grid-template-columns: 180px 1fr 280px;\n      gap: 20px;\n      border-bottom: 2px solid var(--gst-border);\n      padding-bottom: 18px;\n      margin-bottom: 18px;\n      align-items: start;\n    }\n\n    .invoice-logo-box {\n      text-align: left;\n    }\n\n    .invoice-logo-box img {\n      max-width: 160px;\n      max-height: 90px;\n      object-fit: contain;\n      display: none;\n    }\n\n    .invoice-title h2 {\n      margin: 0;\n      font-size: 34px;\n      color: var(--gst-primary);\n    }\n\n    .invoice-title p {\n      margin: 6px 0 0;\n      color: var(--gst-muted);\n    }\n\n    .invoice-meta {\n      text-align: right;\n      line-height: 1.7;\n      font-size: 14px;\n    }\n\n    .invoice-party-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 18px;\n      margin-bottom: 20px;\n    }\n\n    .invoice-party {\n      background: var(--gst-soft);\n      border: 1px solid var(--gst-border);\n      border-radius: 14px;\n      padding: 15px;\n      line-height: 1.7;\n    }\n\n    .invoice-party strong {\n      display: block;\n      font-size: 16px;\n      margin-bottom: 6px;\n      color: var(--gst-text);\n    }\n\n    .invoice-table-wrap {\n      overflow-x: auto;\n      border: 1px solid var(--gst-border);\n      border-radius: 14px;\n    }\n\n    .invoice-table {\n      width: 100%;\n      min-width: 1350px;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n\n    .invoice-table th {\n      background: var(--gst-primary);\n      color: white;\n      padding: 12px;\n      text-align: left;\n      white-space: nowrap;\n    }\n\n    .invoice-table td {\n      padding: 11px 12px;\n      border-bottom: 1px solid var(--gst-border);\n      white-space: nowrap;\n    }\n\n    .invoice-total-box {\n      max-width: 500px;\n      margin-left: auto;\n      margin-top: 20px;\n      border: 1px solid var(--gst-border);\n      border-radius: 14px;\n      overflow: hidden;\n    }\n\n    .invoice-total-line {\n      display: flex;\n      justify-content: space-between;\n      gap: 15px;\n      padding: 12px 15px;\n      border-bottom: 1px solid var(--gst-border);\n      font-weight: 700;\n      color: var(--gst-muted);\n    }\n\n    .invoice-total-line strong {\n      color: var(--gst-text);\n    }\n\n    .invoice-grand {\n      background: var(--gst-soft);\n      color: var(--gst-primary);\n      font-size: 20px;\n      font-weight: 900;\n    }\n\n    .amount-words {\n      margin-top: 16px;\n      padding: 14px;\n      border-radius: 14px;\n      background: #f8fafc;\n      border: 1px solid var(--gst-border);\n      font-weight: 800;\n    }\n\n    .invoice-footer {\n      margin-top: 24px;\n      padding-top: 16px;\n      border-top: 1px solid var(--gst-border);\n      color: var(--gst-muted);\n      font-size: 14px;\n      line-height: 1.7;\n    }\n\n    .gst-modal-overlay {\n      display: none;\n      position: fixed;\n      inset: 0;\n      background: rgba(15, 23, 42, 0.72);\n      z-index: 99999;\n      padding: 24px;\n      overflow-y: auto;\n    }\n\n    .gst-modal {\n      max-width: 1150px;\n      margin: 30px auto;\n      background: #ffffff;\n      border-radius: 22px;\n      padding: 24px;\n      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);\n    }\n\n    .gst-modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      gap: 16px;\n      border-bottom: 1px solid var(--gst-border);\n      padding-bottom: 16px;\n      margin-bottom: 18px;\n    }\n\n    .gst-modal-header h2 {\n      margin: 0 0 6px;\n      color: var(--gst-text);\n    }\n\n    .gst-modal-header p {\n      margin: 0;\n      color: var(--gst-muted);\n      line-height: 1.5;\n    }\n\n    .gst-close {\n      background: var(--gst-danger);\n      color: white;\n      border: none;\n      border-radius: 12px;\n      padding: 10px 14px;\n      font-weight: 900;\n      cursor: pointer;\n    }\n\n    .gst-search-box {\n      margin-bottom: 15px;\n    }\n\n    .gst-slab-table-wrap,\n    .gst-record-table-wrap {\n      overflow-x: auto;\n      border: 1px solid var(--gst-border);\n      border-radius: 15px;\n    }\n\n    .gst-slab-table,\n    .gst-record-table {\n      width: 100%;\n      min-width: 850px;\n      border-collapse: collapse;\n      font-size: 14px;\n    }\n\n    .gst-slab-table th,\n    .gst-record-table th {\n      background: var(--gst-soft);\n      padding: 13px;\n      text-align: left;\n      border-bottom: 1px solid var(--gst-border);\n      font-weight: 900;\n    }\n\n    .gst-slab-table td,\n    .gst-record-table td {\n      padding: 12px 13px;\n      border-bottom: 1px solid var(--gst-border);\n      vertical-align: middle;\n    }\n\n    .gst-action-small {\n      border: none;\n      border-radius: 10px;\n      padding: 9px 12px;\n      font-weight: 900;\n      cursor: pointer;\n      background: var(--gst-primary);\n      color: white;\n      margin-right: 6px;\n    }\n\n    .gst-action-delete {\n      background: var(--gst-danger);\n    }\n\n    @media print {\n      body * {\n        visibility: hidden !important;\n      }\n\n      #gstInvoiceOutput,\n      #gstInvoiceOutput * {\n        visibility: visible !important;\n      }\n\n      #gstInvoiceOutput {\n        display: block !important;\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        box-shadow: none;\n        border: none;\n        border-radius: 0;\n        padding: 20px;\n      }\n\n      .no-print {\n        display: none !important;\n      }\n\n      .gst-app {\n        background: white !important;\n      }\n\n      .invoice-logo-box img {\n        display: block !important;\n      }\n    }\n\n    @media (max-width: 950px) {\n      #gstInvoiceApp {\n        width: 100%;\n        padding: 18px;\n      }\n\n      .gst-top-layout,\n      .gst-grid-2,\n      .gst-grid-3,\n      .invoice-party-grid,\n      .invoice-header {\n        grid-template-columns: 1fr;\n      }\n\n      .invoice-meta {\n        text-align: left;\n      }\n\n      .gst-card h2 {\n        font-size: 24px;\n      }\n    }\n  <\/style>\n\n  <section class=\"gst-header\">\n    <h1>GST Invoice Calculator<\/h1>\n    <p>\n      Add GST items with HSN\/SAC, cost, quantity, UoM, freight, discount, GST rate and cess.\n      Upload logo, view invoice, download PDF, save invoice records and reopen saved invoices.\n    <\/p>\n  <\/section>\n\n  <section class=\"gst-card\">\n    <div class=\"gst-top-layout\">\n      <div class=\"gst-logo-upload-box\">\n        <label>Upload Logo<\/label>\n        <img id=\"logoPreview\" class=\"gst-logo-preview\" alt=\"Logo Preview\">\n        <input type=\"file\" id=\"logoUpload\" class=\"gst-input\" accept=\"image\/*\" onchange=\"gstUploadLogo(event)\">\n        <div class=\"gst-logo-help\">\n          Logo will appear on top-left side of invoice and PDF.\n        <\/div>\n      <\/div>\n\n      <div>\n        <h2>Invoice<\/h2>\n        <p>GST will be calculated as CGST + SGST for same-state supply and IGST for inter-state supply.<\/p>\n\n        <div class=\"gst-grid-3\">\n          <div class=\"gst-field\">\n            <label>Invoice No.<\/label>\n            <input type=\"text\" id=\"invoiceNo\" class=\"gst-input\" value=\"GST-001\" oninput=\"gstCalculateInvoice()\">\n          <\/div>\n\n          <div class=\"gst-field\">\n            <label>Invoice Date<\/label>\n            <input type=\"date\" id=\"invoiceDate\" class=\"gst-input\" onchange=\"gstCalculateInvoice()\">\n          <\/div>\n\n          <div class=\"gst-field\">\n            <label>Round Off<\/label>\n            <select id=\"roundOff\" class=\"gst-select\" onchange=\"gstCalculateInvoice()\">\n              <option value=\"no\">No Round Off<\/option>\n              <option value=\"nearest\">Nearest Rupee<\/option>\n              <option value=\"up\">Round Up<\/option>\n              <option value=\"down\">Round Down<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n\n        <div class=\"gst-grid-2\">\n          <div class=\"gst-field\">\n            <label>Seller Name<\/label>\n            <input type=\"text\" id=\"sellerName\" class=\"gst-input\" value=\"Your Company Name\" oninput=\"gstCalculateInvoice()\">\n          <\/div>\n\n          <div class=\"gst-field\">\n            <label>Buyer Name<\/label>\n            <input type=\"text\" id=\"buyerName\" class=\"gst-input\" value=\"Customer Name\" oninput=\"gstCalculateInvoice()\">\n          <\/div>\n        <\/div>\n\n        <div class=\"gst-grid-2\">\n          <div class=\"gst-field\">\n            <label>Seller GSTIN<\/label>\n            <input type=\"text\" id=\"sellerGstin\" class=\"gst-input\" value=\"07ABCDE1234F1Z5\" oninput=\"gstCalculateInvoice()\">\n          <\/div>\n\n          <div class=\"gst-field\">\n            <label>Buyer GSTIN<\/label>\n            <input type=\"text\" id=\"buyerGstin\" class=\"gst-input\" value=\"07ABCDE1234F1Z5\" oninput=\"gstCalculateInvoice()\">\n          <\/div>\n        <\/div>\n\n        <div class=\"gst-grid-2\">\n          <div class=\"gst-field\">\n            <label>Seller State \/ Location<\/label>\n            <select id=\"sellerState\" class=\"gst-select\" onchange=\"gstCalculateInvoice()\"><\/select>\n          <\/div>\n\n          <div class=\"gst-field\">\n            <label>Buyer State \/ Location<\/label>\n            <select id=\"buyerState\" class=\"gst-select\" onchange=\"gstCalculateInvoice()\"><\/select>\n          <\/div>\n        <\/div>\n\n        <div class=\"gst-field\">\n          <label>Invoice Notes \/ Terms<\/label>\n          <textarea id=\"invoiceNotes\" class=\"gst-textarea\" oninput=\"gstCalculateInvoice()\">Payment due as per agreed terms. Please verify GST rate and HSN\/SAC before final submission.<\/textarea>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"gst-card\">\n    <h2>Add GST Items<\/h2>\n    <p>Enter HSN\/SAC, item name, cost, quantity, UoM, discount, GST rate, cess and freight.<\/p>\n\n    <div class=\"gst-table-wrap\">\n      <table class=\"gst-table\">\n        <thead>\n          <tr>\n            <th>HSN \/ SAC<\/th>\n            <th>Item Name<\/th>\n            <th>Cost<\/th>\n            <th>Qty<\/th>\n            <th>UoM<\/th>\n            <th>Discount %<\/th>\n            <th>GST %<\/th>\n            <th>Cess %<\/th>\n            <th>Freight<\/th>\n            <th>Taxable<\/th>\n            <th>Remove<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody id=\"gstItemsBody\"><\/tbody>\n      <\/table>\n    <\/div>\n\n    <div class=\"gst-btn-row\">\n      <button class=\"gst-btn gst-btn-primary\" onclick=\"gstAddItem()\">\u2795 Add Item<\/button>\n      <button class=\"gst-btn gst-btn-soft\" onclick=\"gstCalculateInvoice()\">\ud83d\udd04 Recalculate<\/button>\n      <button class=\"gst-btn gst-btn-soft\" onclick=\"gstViewInvoice()\">\ud83d\udc41\ufe0f View Invoice<\/button>\n      <button class=\"gst-btn gst-btn-warning\" onclick=\"gstOpenSlabModal()\">\ud83d\udcd8 GST Slab<\/button>\n      <button class=\"gst-btn gst-btn-primary\" onclick=\"gstDownloadPDF()\">\ud83d\udcc4 Download as PDF<\/button>\n      <button class=\"gst-btn gst-btn-success\" onclick=\"gstSaveInvoice()\">\ud83d\udcbe Save<\/button>\n      <button class=\"gst-btn gst-btn-soft\" onclick=\"gstOpenRecords()\">\ud83d\udcc2 Records<\/button>\n      <button class=\"gst-btn gst-btn-danger\" onclick=\"gstResetInvoice()\">Reset<\/button>\n    <\/div>\n\n    <div id=\"gstSaveAlert\" class=\"gst-alert\">Invoice saved successfully. Click Records to view saved invoices.<\/div>\n\n    <div class=\"gst-note\">\n      Freight is added to the taxable value in this calculator. GST slab list is a sample reference only. Verify exact GST rate, HSN\/SAC and freight taxability before actual invoice use.\n    <\/div>\n  <\/section>\n\n  <section id=\"gstInvoiceOutput\" class=\"gst-invoice-section\">\n    <div class=\"no-print gst-btn-row\" style=\"margin-top:0; margin-bottom:18px;\">\n      <button class=\"gst-btn gst-btn-primary\" onclick=\"gstDownloadPDF()\">\ud83d\udcc4 Download as PDF<\/button>\n      <button class=\"gst-btn gst-btn-success\" onclick=\"gstSaveInvoice()\">\ud83d\udcbe Save Invoice<\/button>\n      <button class=\"gst-btn gst-btn-soft\" onclick=\"gstHideInvoice()\">Hide Invoice<\/button>\n    <\/div>\n\n    <div class=\"invoice-header\">\n      <div class=\"invoice-logo-box\">\n        <img id=\"invoiceLogo\" alt=\"Invoice Logo\">\n      <\/div>\n\n      <div class=\"invoice-title\">\n        <h2>TAX INVOICE<\/h2>\n        <p id=\"invoiceSupplyType\">GST Invoice<\/p>\n      <\/div>\n\n      <div class=\"invoice-meta\">\n        <strong>Invoice No:<\/strong> <span id=\"viewInvoiceNo\"><\/span><br>\n        <strong>Invoice Date:<\/strong> <span id=\"viewInvoiceDate\"><\/span><br>\n        <strong>Place of Supply:<\/strong> <span id=\"viewPlaceSupply\"><\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"invoice-party-grid\">\n      <div class=\"invoice-party\">\n        <strong>Seller Details<\/strong>\n        Name: <span id=\"viewSellerName\"><\/span><br>\n        GSTIN: <span id=\"viewSellerGstin\"><\/span><br>\n        State: <span id=\"viewSellerState\"><\/span>\n      <\/div>\n\n      <div class=\"invoice-party\">\n        <strong>Buyer Details<\/strong>\n        Name: <span id=\"viewBuyerName\"><\/span><br>\n        GSTIN: <span id=\"viewBuyerGstin\"><\/span><br>\n        State: <span id=\"viewBuyerState\"><\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"invoice-table-wrap\">\n      <table class=\"invoice-table\">\n        <thead>\n          <tr>\n            <th>Sr.<\/th>\n            <th>HSN\/SAC<\/th>\n            <th>Item Description<\/th>\n            <th>Cost<\/th>\n            <th>Qty<\/th>\n            <th>UoM<\/th>\n            <th>Gross<\/th>\n            <th>Discount<\/th>\n            <th>Freight<\/th>\n            <th>Taxable<\/th>\n            <th>GST %<\/th>\n            <th>CGST<\/th>\n            <th>SGST<\/th>\n            <th>IGST<\/th>\n            <th>Cess<\/th>\n            <th>Total<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody id=\"invoiceItemsBody\"><\/tbody>\n      <\/table>\n    <\/div>\n\n    <div class=\"invoice-total-box\">\n      <div class=\"invoice-total-line\">\n        <span>Gross Value<\/span>\n        <strong id=\"viewGrossTotal\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line\">\n        <span>Total Discount<\/span>\n        <strong id=\"viewDiscountTotal\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line\">\n        <span>Total Freight<\/span>\n        <strong id=\"viewFreightTotal\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line\">\n        <span>Taxable Value<\/span>\n        <strong id=\"viewTaxableTotal\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line\">\n        <span>CGST<\/span>\n        <strong id=\"viewCgstTotal\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line\">\n        <span>SGST \/ UTGST<\/span>\n        <strong id=\"viewSgstTotal\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line\">\n        <span>IGST<\/span>\n        <strong id=\"viewIgstTotal\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line\">\n        <span>Cess<\/span>\n        <strong id=\"viewCessTotal\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line\">\n        <span>Round Off<\/span>\n        <strong id=\"viewRoundOff\">\u20b90.00<\/strong>\n      <\/div>\n      <div class=\"invoice-total-line invoice-grand\">\n        <span>Grand Total<\/span>\n        <strong id=\"viewGrandTotal\">\u20b90.00<\/strong>\n      <\/div>\n    <\/div>\n\n    <div class=\"amount-words\">\n      Amount in Words: <span id=\"amountWords\">Zero Rupees Only<\/span>\n    <\/div>\n\n    <div class=\"invoice-footer\">\n      <strong>Notes \/ Terms:<\/strong><br>\n      <span id=\"viewInvoiceNotes\"><\/span>\n      <br><br>\n      <strong>Declaration:<\/strong><br>\n      This invoice has been generated based on entered HSN\/SAC, UoM, freight, quantity, cost, GST rate, discount and location details.\n      Please verify HSN\/SAC classification, GST rate, freight taxability, cess applicability and statutory compliance before issuing the invoice.\n      <br><br><br>\n      <strong>Authorized Signatory<\/strong>\n    <\/div>\n  <\/section>\n\n  <section id=\"gstRecordsScreen\" class=\"gst-records-section\">\n    <div class=\"gst-btn-row no-print\" style=\"margin-top:0; margin-bottom:16px;\">\n      <button class=\"gst-btn gst-btn-soft\" onclick=\"gstCloseRecords()\">\u2b05 Back to Calculator<\/button>\n      <button class=\"gst-btn gst-btn-danger\" onclick=\"gstClearAllRecords()\">Delete All Records<\/button>\n    <\/div>\n\n    <h2>Saved Invoice Records<\/h2>\n    <p>Click View to open any saved invoice. Records are saved in this browser using local storage.<\/p>\n\n    <div class=\"gst-record-table-wrap\">\n      <table class=\"gst-record-table\">\n        <thead>\n          <tr>\n            <th>Sr.<\/th>\n            <th>Invoice No.<\/th>\n            <th>Date<\/th>\n            <th>Buyer<\/th>\n            <th>Seller<\/th>\n            <th>Total Amount<\/th>\n            <th>Saved On<\/th>\n            <th>Action<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody id=\"gstRecordsBody\"><\/tbody>\n      <\/table>\n    <\/div>\n  <\/section>\n\n  <div id=\"gstSlabModal\" class=\"gst-modal-overlay\">\n    <div class=\"gst-modal\">\n      <div class=\"gst-modal-header\">\n        <div>\n          <h2>GST Slab \/ HSN \/ SAC Reference List<\/h2>\n          <p>Search item name, HSN, SAC or GST percentage. This is a sample list for quick selection.<\/p>\n        <\/div>\n        <button class=\"gst-close\" onclick=\"gstCloseSlabModal()\">Close<\/button>\n      <\/div>\n\n      <div class=\"gst-search-box\">\n        <input id=\"gstSlabSearch\" class=\"gst-input\" placeholder=\"Search item, HSN, SAC, GST rate...\" oninput=\"gstRenderSlabList()\">\n      <\/div>\n\n      <div class=\"gst-slab-table-wrap\">\n        <table class=\"gst-slab-table\">\n          <thead>\n            <tr>\n              <th>Category<\/th>\n              <th>Item \/ Service Name<\/th>\n              <th>HSN<\/th>\n              <th>SAC<\/th>\n              <th>GST %<\/th>\n              <th>Action<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody id=\"gstSlabBody\"><\/tbody>\n        <\/table>\n      <\/div>\n\n      <div class=\"gst-note\">\n        This GST slab list is not a substitute for official GST rate verification. Update this list manually as per your business and latest GST notifications.\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    const gstStates = [\n      \"Andhra Pradesh\", \"Arunachal Pradesh\", \"Assam\", \"Bihar\", \"Chhattisgarh\",\n      \"Delhi\", \"Goa\", \"Gujarat\", \"Haryana\", \"Himachal Pradesh\", \"Jharkhand\",\n      \"Karnataka\", \"Kerala\", \"Madhya Pradesh\", \"Maharashtra\", \"Manipur\",\n      \"Meghalaya\", \"Mizoram\", \"Nagaland\", \"Odisha\", \"Punjab\", \"Rajasthan\",\n      \"Sikkim\", \"Tamil Nadu\", \"Telangana\", \"Tripura\", \"Uttar Pradesh\",\n      \"Uttarakhand\", \"West Bengal\", \"Andaman and Nicobar Islands\", \"Chandigarh\",\n      \"Dadra and Nagar Haveli and Daman and Diu\", \"Jammu and Kashmir\", \"Ladakh\",\n      \"Lakshadweep\", \"Puducherry\"\n    ];\n\n    const gstSlabData = [\n      { category: \"Goods\", name: \"Rice \/ Food Grain\", hsn: \"1006\", sac: \"-\", rate: 0 },\n      { category: \"Goods\", name: \"Wheat\", hsn: \"1001\", sac: \"-\", rate: 0 },\n      { category: \"Goods\", name: \"Fresh Milk\", hsn: \"0401\", sac: \"-\", rate: 0 },\n      { category: \"Goods\", name: \"Bread \/ Bakery\", hsn: \"1905\", sac: \"-\", rate: 5 },\n      { category: \"Goods\", name: \"Medicines\", hsn: \"3004\", sac: \"-\", rate: 5 },\n      { category: \"Goods\", name: \"Cheese \/ Dairy Product\", hsn: \"0406\", sac: \"-\", rate: 5 },\n      { category: \"Goods\", name: \"Processed Food\", hsn: \"2106\", sac: \"-\", rate: 12 },\n      { category: \"Goods\", name: \"Beverages\", hsn: \"2202\", sac: \"-\", rate: 12 },\n      { category: \"Goods\", name: \"Plastic Household Articles\", hsn: \"3924\", sac: \"-\", rate: 12 },\n      { category: \"Goods\", name: \"Transformer \/ Electrical Equipment\", hsn: \"8504\", sac: \"-\", rate: 18 },\n      { category: \"Goods\", name: \"Switchgear \/ Electrical Items\", hsn: \"8536\", sac: \"-\", rate: 18 },\n      { category: \"Goods\", name: \"Cable \/ Electrical Supply Item\", hsn: \"8544\", sac: \"-\", rate: 18 },\n      { category: \"Goods\", name: \"Cement\", hsn: \"2523\", sac: \"-\", rate: 28 },\n      { category: \"Goods\", name: \"Motor Car\", hsn: \"8703\", sac: \"-\", rate: 28 },\n      { category: \"Goods\", name: \"Tobacco Product\", hsn: \"2402\", sac: \"-\", rate: 28 },\n      { category: \"Service\", name: \"Professional \/ Consultancy Service\", hsn: \"-\", sac: \"9983\", rate: 18 },\n      { category: \"Service\", name: \"IT Software Service\", hsn: \"-\", sac: \"998314\", rate: 18 },\n      { category: \"Service\", name: \"Works Contract Service\", hsn: \"-\", sac: \"9954\", rate: 18 },\n      { category: \"Service\", name: \"Transport of Goods by Road\", hsn: \"-\", sac: \"996511\", rate: 5 },\n      { category: \"Service\", name: \"Hotel Accommodation\", hsn: \"-\", sac: \"996311\", rate: 12 },\n      { category: \"Service\", name: \"Restaurant Service\", hsn: \"-\", sac: \"996331\", rate: 5 },\n      { category: \"Service\", name: \"Maintenance \/ Repair Service\", hsn: \"-\", sac: \"9987\", rate: 18 },\n      { category: \"Service\", name: \"Training \/ Coaching Service\", hsn: \"-\", sac: \"9992\", rate: 18 }\n    ];\n\n    let gstLogoData = \"\";\n\n    function gstFormat(value) {\n      const amount = Number(value) || 0;\n      return \"\u20b9\" + amount.toLocaleString(\"en-IN\", {\n        minimumFractionDigits: 2,\n        maximumFractionDigits: 2\n      });\n    }\n\n    function gstNumber(value) {\n      const num = parseFloat(value);\n      return isNaN(num) ? 0 : num;\n    }\n\n    function gstUploadLogo(event) {\n      const file = event.target.files[0];\n      if (!file) return;\n\n      const reader = new FileReader();\n      reader.onload = function(e) {\n        gstLogoData = e.target.result;\n        localStorage.setItem(\"gstInvoiceLogo\", gstLogoData);\n        gstDisplayLogo();\n      };\n      reader.readAsDataURL(file);\n    }\n\n    function gstDisplayLogo() {\n      const savedLogo = gstLogoData || localStorage.getItem(\"gstInvoiceLogo\") || \"\";\n      gstLogoData = savedLogo;\n\n      const logoPreview = document.getElementById(\"logoPreview\");\n      const invoiceLogo = document.getElementById(\"invoiceLogo\");\n\n      if (savedLogo) {\n        logoPreview.src = savedLogo;\n        logoPreview.style.display = \"block\";\n        invoiceLogo.src = savedLogo;\n        invoiceLogo.style.display = \"block\";\n      } else {\n        logoPreview.style.display = \"none\";\n        invoiceLogo.style.display = \"none\";\n      }\n    }\n\n    function gstPopulateStates() {\n      const seller = document.getElementById(\"sellerState\");\n      const buyer = document.getElementById(\"buyerState\");\n\n      gstStates.forEach(function(state) {\n        const s1 = document.createElement(\"option\");\n        s1.value = state;\n        s1.textContent = state;\n        seller.appendChild(s1);\n\n        const s2 = document.createElement(\"option\");\n        s2.value = state;\n        s2.textContent = state;\n        buyer.appendChild(s2);\n      });\n\n      seller.value = \"Delhi\";\n      buyer.value = \"Delhi\";\n    }\n\n    function gstSetDate() {\n      const today = new Date();\n      const yyyy = today.getFullYear();\n      const mm = String(today.getMonth() + 1).padStart(2, \"0\");\n      const dd = String(today.getDate()).padStart(2, \"0\");\n      document.getElementById(\"invoiceDate\").value = yyyy + \"-\" + mm + \"-\" + dd;\n    }\n\n    function gstFindRate(code) {\n      const clean = String(code || \"\").trim();\n      const match = gstSlabData.find(function(item) {\n        return item.hsn === clean || item.sac === clean;\n      });\n\n      if (match) return match.rate;\n\n      const firstFour = clean.substring(0, 4);\n      const partial = gstSlabData.find(function(item) {\n        return item.hsn === firstFour || item.sac === firstFour;\n      });\n\n      return partial ? partial.rate : 18;\n    }\n\n    function gstFindName(code) {\n      const clean = String(code || \"\").trim();\n      const match = gstSlabData.find(function(item) {\n        return item.hsn === clean || item.sac === clean;\n      });\n      return match ? match.name : \"\";\n    }\n\n    function gstAddItem(defaultItem) {\n      const item = defaultItem || {\n        code: \"\",\n        name: \"\",\n        cost: 0,\n        qty: 1,\n        uom: \"Nos\",\n        discount: 0,\n        gst: 18,\n        cess: 0,\n        freight: 0\n      };\n\n      const tbody = document.getElementById(\"gstItemsBody\");\n      const row = document.createElement(\"tr\");\n\n      row.innerHTML = `\n        <td><input type=\"text\" class=\"gst-row-code\" placeholder=\"HSN\/SAC\" value=\"${item.code}\" oninput=\"gstAutoRate(this); gstCalculateInvoice();\"><\/td>\n        <td><input type=\"text\" class=\"gst-row-name\" placeholder=\"Item Name\" value=\"${item.name}\" oninput=\"gstCalculateInvoice();\"><\/td>\n        <td><input type=\"number\" class=\"gst-row-cost\" min=\"0\" step=\"0.01\" value=\"${item.cost}\" oninput=\"gstCalculateInvoice();\"><\/td>\n        <td><input type=\"number\" class=\"gst-row-qty\" min=\"0\" step=\"0.01\" value=\"${item.qty}\" oninput=\"gstCalculateInvoice();\"><\/td>\n        <td>\n          <select class=\"gst-row-uom\" onchange=\"gstCalculateInvoice();\">\n            <option value=\"Nos\">Nos<\/option>\n            <option value=\"Kg\">Kg<\/option>\n            <option value=\"MT\">MT<\/option>\n            <option value=\"Meter\">Meter<\/option>\n            <option value=\"KM\">KM<\/option>\n            <option value=\"Litre\">Litre<\/option>\n            <option value=\"Set\">Set<\/option>\n            <option value=\"Lot\">Lot<\/option>\n            <option value=\"Hour\">Hour<\/option>\n            <option value=\"Service\">Service<\/option>\n          <\/select>\n        <\/td>\n        <td><input type=\"number\" class=\"gst-row-discount\" min=\"0\" max=\"100\" step=\"0.01\" value=\"${item.discount}\" oninput=\"gstCalculateInvoice();\"><\/td>\n        <td>\n          <select class=\"gst-row-rate\" onchange=\"gstCalculateInvoice();\">\n            <option value=\"0\">0%<\/option>\n            <option value=\"3\">3%<\/option>\n            <option value=\"5\">5%<\/option>\n            <option value=\"12\">12%<\/option>\n            <option value=\"18\">18%<\/option>\n            <option value=\"28\">28%<\/option>\n            <option value=\"40\">40%<\/option>\n          <\/select>\n        <\/td>\n        <td><input type=\"number\" class=\"gst-row-cess\" min=\"0\" step=\"0.01\" value=\"${item.cess}\" oninput=\"gstCalculateInvoice();\"><\/td>\n        <td><input type=\"number\" class=\"gst-row-freight\" min=\"0\" step=\"0.01\" value=\"${item.freight || 0}\" oninput=\"gstCalculateInvoice();\"><\/td>\n        <td><input type=\"text\" class=\"gst-row-taxable\" readonly value=\"\u20b90.00\"><\/td>\n        <td><button class=\"gst-remove-btn\" onclick=\"gstRemoveItem(this)\">Remove<\/button><\/td>\n      `;\n\n      tbody.appendChild(row);\n      row.querySelector(\".gst-row-rate\").value = String(item.gst);\n      row.querySelector(\".gst-row-uom\").value = item.uom || \"Nos\";\n      gstCalculateInvoice();\n    }\n\n    function gstRemoveItem(button) {\n      button.closest(\"tr\").remove();\n\n      if (document.querySelectorAll(\"#gstItemsBody tr\").length === 0) {\n        gstAddItem();\n      }\n\n      gstCalculateInvoice();\n    }\n\n    function gstAutoRate(input) {\n      const row = input.closest(\"tr\");\n      const code = input.value;\n      const rate = gstFindRate(code);\n      const itemName = gstFindName(code);\n\n      row.querySelector(\".gst-row-rate\").value = String(rate);\n\n      if (itemName && !row.querySelector(\".gst-row-name\").value.trim()) {\n        row.querySelector(\".gst-row-name\").value = itemName;\n      }\n    }\n\n    function gstIsIntraState() {\n      return document.getElementById(\"sellerState\").value === document.getElementById(\"buyerState\").value;\n    }\n\n    function gstRoundValue(value) {\n      const mode = document.getElementById(\"roundOff\").value;\n      let finalValue = value;\n\n      if (mode === \"nearest\") finalValue = Math.round(value);\n      if (mode === \"up\") finalValue = Math.ceil(value);\n      if (mode === \"down\") finalValue = Math.floor(value);\n\n      return {\n        final: finalValue,\n        adjustment: finalValue - value\n      };\n    }\n\n    function gstCollectInvoiceData() {\n      gstCalculateInvoice();\n\n      const items = [];\n      document.querySelectorAll(\"#gstItemsBody tr\").forEach(function(row) {\n        items.push({\n          code: row.querySelector(\".gst-row-code\").value,\n          name: row.querySelector(\".gst-row-name\").value,\n          cost: row.querySelector(\".gst-row-cost\").value,\n          qty: row.querySelector(\".gst-row-qty\").value,\n          uom: row.querySelector(\".gst-row-uom\").value,\n          discount: row.querySelector(\".gst-row-discount\").value,\n          gst: row.querySelector(\".gst-row-rate\").value,\n          cess: row.querySelector(\".gst-row-cess\").value,\n          freight: row.querySelector(\".gst-row-freight\").value\n        });\n      });\n\n      return {\n        id: Date.now(),\n        logo: gstLogoData || localStorage.getItem(\"gstInvoiceLogo\") || \"\",\n        invoiceNo: document.getElementById(\"invoiceNo\").value,\n        invoiceDate: document.getElementById(\"invoiceDate\").value,\n        sellerName: document.getElementById(\"sellerName\").value,\n        buyerName: document.getElementById(\"buyerName\").value,\n        sellerGstin: document.getElementById(\"sellerGstin\").value,\n        buyerGstin: document.getElementById(\"buyerGstin\").value,\n        sellerState: document.getElementById(\"sellerState\").value,\n        buyerState: document.getElementById(\"buyerState\").value,\n        roundOff: document.getElementById(\"roundOff\").value,\n        invoiceNotes: document.getElementById(\"invoiceNotes\").value,\n        items: items,\n        totals: window.gstCurrentTotals,\n        savedOn: new Date().toLocaleString(\"en-IN\")\n      };\n    }\n\n    function gstLoadInvoiceData(data) {\n      if (data.logo) {\n        gstLogoData = data.logo;\n        localStorage.setItem(\"gstInvoiceLogo\", gstLogoData);\n        gstDisplayLogo();\n      }\n\n      document.getElementById(\"invoiceNo\").value = data.invoiceNo || \"\";\n      document.getElementById(\"invoiceDate\").value = data.invoiceDate || \"\";\n      document.getElementById(\"sellerName\").value = data.sellerName || \"\";\n      document.getElementById(\"buyerName\").value = data.buyerName || \"\";\n      document.getElementById(\"sellerGstin\").value = data.sellerGstin || \"\";\n      document.getElementById(\"buyerGstin\").value = data.buyerGstin || \"\";\n      document.getElementById(\"sellerState\").value = data.sellerState || \"Delhi\";\n      document.getElementById(\"buyerState\").value = data.buyerState || \"Delhi\";\n      document.getElementById(\"roundOff\").value = data.roundOff || \"no\";\n      document.getElementById(\"invoiceNotes\").value = data.invoiceNotes || \"\";\n\n      document.getElementById(\"gstItemsBody\").innerHTML = \"\";\n      (data.items || []).forEach(function(item) {\n        gstAddItem(item);\n      });\n\n      if (!data.items || data.items.length === 0) {\n        gstAddItem();\n      }\n\n      gstCalculateInvoice();\n    }\n\n    function gstCalculateInvoice() {\n      gstDisplayLogo();\n\n      const rows = document.querySelectorAll(\"#gstItemsBody tr\");\n      const invoiceItemsBody = document.getElementById(\"invoiceItemsBody\");\n      const intra = gstIsIntraState();\n\n      let grossTotal = 0;\n      let discountTotal = 0;\n      let freightTotal = 0;\n      let taxableTotal = 0;\n      let cgstTotal = 0;\n      let sgstTotal = 0;\n      let igstTotal = 0;\n      let cessTotal = 0;\n\n      invoiceItemsBody.innerHTML = \"\";\n\n      rows.forEach(function(row, index) {\n        const code = row.querySelector(\".gst-row-code\").value.trim();\n        const name = row.querySelector(\".gst-row-name\").value.trim() || \"Item \" + (index + 1);\n        const cost = gstNumber(row.querySelector(\".gst-row-cost\").value);\n        const qty = gstNumber(row.querySelector(\".gst-row-qty\").value);\n        const uom = row.querySelector(\".gst-row-uom\").value || \"Nos\";\n        const discountPercent = gstNumber(row.querySelector(\".gst-row-discount\").value);\n        const gstRate = gstNumber(row.querySelector(\".gst-row-rate\").value);\n        const cessRate = gstNumber(row.querySelector(\".gst-row-cess\").value);\n        const freight = gstNumber(row.querySelector(\".gst-row-freight\").value);\n\n        const gross = cost * qty;\n        const discount = gross * discountPercent \/ 100;\n        const taxable = gross - discount + freight;\n        const gstAmount = taxable * gstRate \/ 100;\n        const cessAmount = taxable * cessRate \/ 100;\n\n        let cgst = 0;\n        let sgst = 0;\n        let igst = 0;\n\n        if (intra) {\n          cgst = gstAmount \/ 2;\n          sgst = gstAmount \/ 2;\n        } else {\n          igst = gstAmount;\n        }\n\n        const lineTotal = taxable + cgst + sgst + igst + cessAmount;\n\n        grossTotal += gross;\n        discountTotal += discount;\n        freightTotal += freight;\n        taxableTotal += taxable;\n        cgstTotal += cgst;\n        sgstTotal += sgst;\n        igstTotal += igst;\n        cessTotal += cessAmount;\n\n        row.querySelector(\".gst-row-taxable\").value = gstFormat(taxable);\n\n        const invoiceRow = document.createElement(\"tr\");\n        invoiceRow.innerHTML = `\n          <td>${index + 1}<\/td>\n          <td>${code || \"-\"}<\/td>\n          <td>${name}<\/td>\n          <td>${gstFormat(cost)}<\/td>\n          <td>${qty}<\/td>\n          <td>${uom}<\/td>\n          <td>${gstFormat(gross)}<\/td>\n          <td>${gstFormat(discount)}<\/td>\n          <td>${gstFormat(freight)}<\/td>\n          <td>${gstFormat(taxable)}<\/td>\n          <td>${gstRate}%<\/td>\n          <td>${gstFormat(cgst)}<\/td>\n          <td>${gstFormat(sgst)}<\/td>\n          <td>${gstFormat(igst)}<\/td>\n          <td>${gstFormat(cessAmount)}<\/td>\n          <td>${gstFormat(lineTotal)}<\/td>\n        `;\n\n        invoiceItemsBody.appendChild(invoiceRow);\n      });\n\n      const beforeRound = taxableTotal + cgstTotal + sgstTotal + igstTotal + cessTotal;\n      const round = gstRoundValue(beforeRound);\n      const grandTotal = round.final;\n\n      window.gstCurrentTotals = {\n        grossTotal,\n        discountTotal,\n        freightTotal,\n        taxableTotal,\n        cgstTotal,\n        sgstTotal,\n        igstTotal,\n        cessTotal,\n        roundOff: round.adjustment,\n        grandTotal\n      };\n\n      document.getElementById(\"viewInvoiceNo\").textContent = document.getElementById(\"invoiceNo\").value || \"-\";\n      document.getElementById(\"viewInvoiceDate\").textContent = document.getElementById(\"invoiceDate\").value || \"-\";\n      document.getElementById(\"viewSellerName\").textContent = document.getElementById(\"sellerName\").value || \"-\";\n      document.getElementById(\"viewSellerGstin\").textContent = document.getElementById(\"sellerGstin\").value || \"-\";\n      document.getElementById(\"viewSellerState\").textContent = document.getElementById(\"sellerState\").value || \"-\";\n      document.getElementById(\"viewBuyerName\").textContent = document.getElementById(\"buyerName\").value || \"-\";\n      document.getElementById(\"viewBuyerGstin\").textContent = document.getElementById(\"buyerGstin\").value || \"-\";\n      document.getElementById(\"viewBuyerState\").textContent = document.getElementById(\"buyerState\").value || \"-\";\n      document.getElementById(\"viewPlaceSupply\").textContent = document.getElementById(\"buyerState\").value || \"-\";\n\n      document.getElementById(\"invoiceSupplyType\").textContent = intra\n        ? \"Intra-State Supply - CGST + SGST Applicable\"\n        : \"Inter-State Supply - IGST Applicable\";\n\n      document.getElementById(\"viewGrossTotal\").textContent = gstFormat(grossTotal);\n      document.getElementById(\"viewDiscountTotal\").textContent = gstFormat(discountTotal);\n      document.getElementById(\"viewFreightTotal\").textContent = gstFormat(freightTotal);\n      document.getElementById(\"viewTaxableTotal\").textContent = gstFormat(taxableTotal);\n      document.getElementById(\"viewCgstTotal\").textContent = gstFormat(cgstTotal);\n      document.getElementById(\"viewSgstTotal\").textContent = gstFormat(sgstTotal);\n      document.getElementById(\"viewIgstTotal\").textContent = gstFormat(igstTotal);\n      document.getElementById(\"viewCessTotal\").textContent = gstFormat(cessTotal);\n      document.getElementById(\"viewRoundOff\").textContent = gstFormat(round.adjustment);\n      document.getElementById(\"viewGrandTotal\").textContent = gstFormat(grandTotal);\n      document.getElementById(\"amountWords\").textContent = gstAmountInWords(Math.round(grandTotal)) + \" Only\";\n      document.getElementById(\"viewInvoiceNotes\").textContent = document.getElementById(\"invoiceNotes\").value || \"-\";\n    }\n\n    function gstViewInvoice() {\n      gstCalculateInvoice();\n      document.getElementById(\"gstRecordsScreen\").style.display = \"none\";\n      const invoice = document.getElementById(\"gstInvoiceOutput\");\n      invoice.style.display = \"block\";\n      invoice.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n    }\n\n    function gstHideInvoice() {\n      document.getElementById(\"gstInvoiceOutput\").style.display = \"none\";\n    }\n\n    function gstDownloadPDF() {\n      gstCalculateInvoice();\n      document.getElementById(\"gstInvoiceOutput\").style.display = \"block\";\n      setTimeout(function() {\n        window.print();\n      }, 250);\n    }\n\n    function gstSaveInvoice() {\n      const invoice = gstCollectInvoiceData();\n      const records = JSON.parse(localStorage.getItem(\"gstSavedInvoices\") || \"[]\");\n\n      const existingIndex = records.findIndex(function(record) {\n        return record.invoiceNo === invoice.invoiceNo;\n      });\n\n      if (existingIndex >= 0) {\n        records[existingIndex] = invoice;\n      } else {\n        records.push(invoice);\n      }\n\n      localStorage.setItem(\"gstSavedInvoices\", JSON.stringify(records));\n\n      const alert = document.getElementById(\"gstSaveAlert\");\n      alert.style.display = \"block\";\n      setTimeout(function() {\n        alert.style.display = \"none\";\n      }, 2500);\n\n      gstRenderRecords();\n    }\n\n    function gstOpenRecords() {\n      gstRenderRecords();\n      document.getElementById(\"gstInvoiceOutput\").style.display = \"none\";\n      const screen = document.getElementById(\"gstRecordsScreen\");\n      screen.style.display = \"block\";\n      screen.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n    }\n\n    function gstCloseRecords() {\n      document.getElementById(\"gstRecordsScreen\").style.display = \"none\";\n      window.scrollTo({ top: 0, behavior: \"smooth\" });\n    }\n\n    function gstRenderRecords() {\n      const records = JSON.parse(localStorage.getItem(\"gstSavedInvoices\") || \"[]\");\n      const body = document.getElementById(\"gstRecordsBody\");\n      body.innerHTML = \"\";\n\n      if (records.length === 0) {\n        body.innerHTML = `\n          <tr>\n            <td colspan=\"8\" style=\"text-align:center; color:#64748b; padding:22px;\">\n              No saved invoice records found.\n            <\/td>\n          <\/tr>\n        `;\n        return;\n      }\n\n      records.slice().reverse().forEach(function(record, index) {\n        const row = document.createElement(\"tr\");\n        row.innerHTML = `\n          <td>${index + 1}<\/td>\n          <td>${record.invoiceNo || \"-\"}<\/td>\n          <td>${record.invoiceDate || \"-\"}<\/td>\n          <td>${record.buyerName || \"-\"}<\/td>\n          <td>${record.sellerName || \"-\"}<\/td>\n          <td>${gstFormat(record.totals ? record.totals.grandTotal : 0)}<\/td>\n          <td>${record.savedOn || \"-\"}<\/td>\n          <td>\n            <button class=\"gst-action-small\" onclick=\"gstOpenSavedInvoice(${record.id})\">View<\/button>\n            <button class=\"gst-action-small gst-action-delete\" onclick=\"gstDeleteRecord(${record.id})\">Delete<\/button>\n          <\/td>\n        `;\n        body.appendChild(row);\n      });\n    }\n\n    function gstOpenSavedInvoice(id) {\n      const records = JSON.parse(localStorage.getItem(\"gstSavedInvoices\") || \"[]\");\n      const record = records.find(function(item) {\n        return item.id === id;\n      });\n\n      if (!record) return;\n\n      gstLoadInvoiceData(record);\n      document.getElementById(\"gstRecordsScreen\").style.display = \"none\";\n      gstViewInvoice();\n    }\n\n    function gstDeleteRecord(id) {\n      const confirmDelete = confirm(\"Do you want to delete this invoice record?\");\n      if (!confirmDelete) return;\n\n      let records = JSON.parse(localStorage.getItem(\"gstSavedInvoices\") || \"[]\");\n      records = records.filter(function(item) {\n        return item.id !== id;\n      });\n\n      localStorage.setItem(\"gstSavedInvoices\", JSON.stringify(records));\n      gstRenderRecords();\n    }\n\n    function gstClearAllRecords() {\n      const confirmDelete = confirm(\"Do you want to delete all saved invoice records?\");\n      if (!confirmDelete) return;\n\n      localStorage.removeItem(\"gstSavedInvoices\");\n      gstRenderRecords();\n    }\n\n    function gstOpenSlabModal() {\n      gstRenderSlabList();\n      document.getElementById(\"gstSlabModal\").style.display = \"block\";\n    }\n\n    function gstCloseSlabModal() {\n      document.getElementById(\"gstSlabModal\").style.display = \"none\";\n    }\n\n    function gstRenderSlabList() {\n      const search = (document.getElementById(\"gstSlabSearch\")?.value || \"\").toLowerCase();\n      const body = document.getElementById(\"gstSlabBody\");\n      body.innerHTML = \"\";\n\n      gstSlabData\n        .filter(function(item) {\n          const text = `${item.category} ${item.name} ${item.hsn} ${item.sac} ${item.rate}`.toLowerCase();\n          return text.includes(search);\n        })\n        .forEach(function(item) {\n          const row = document.createElement(\"tr\");\n          row.innerHTML = `\n            <td>${item.category}<\/td>\n            <td>${item.name}<\/td>\n            <td>${item.hsn}<\/td>\n            <td>${item.sac}<\/td>\n            <td>${item.rate}%<\/td>\n            <td><button class=\"gst-action-small\" onclick='gstUseSlab(${JSON.stringify(item)})'>Use<\/button><\/td>\n          `;\n          body.appendChild(row);\n        });\n    }\n\n    function gstUseSlab(item) {\n      const code = item.hsn !== \"-\" ? item.hsn : item.sac;\n      gstAddItem({\n        code: code,\n        name: item.name,\n        cost: 0,\n        qty: 1,\n        uom: item.category === \"Service\" ? \"Service\" : \"Nos\",\n        discount: 0,\n        gst: item.rate,\n        cess: 0,\n        freight: 0\n      });\n      gstCloseSlabModal();\n    }\n\n    function gstResetInvoice() {\n      document.getElementById(\"gstItemsBody\").innerHTML = \"\";\n      document.getElementById(\"invoiceNo\").value = \"GST-001\";\n      document.getElementById(\"sellerName\").value = \"Your Company Name\";\n      document.getElementById(\"buyerName\").value = \"Customer Name\";\n      document.getElementById(\"sellerGstin\").value = \"07ABCDE1234F1Z5\";\n      document.getElementById(\"buyerGstin\").value = \"07ABCDE1234F1Z5\";\n      document.getElementById(\"sellerState\").value = \"Delhi\";\n      document.getElementById(\"buyerState\").value = \"Delhi\";\n      document.getElementById(\"roundOff\").value = \"no\";\n      document.getElementById(\"invoiceNotes\").value = \"Payment due as per agreed terms. Please verify GST rate and HSN\/SAC before final submission.\";\n      gstSetDate();\n\n      gstAddItem({\n        code: \"8544\",\n        name: \"Cable\",\n        cost: 1000,\n        qty: 1,\n        uom: \"Meter\",\n        discount: 0,\n        gst: 18,\n        cess: 0,\n        freight: 0\n      });\n\n      gstAddItem({\n        code: \"2523\",\n        name: \"Cement\",\n        cost: 500,\n        qty: 1,\n        uom: \"Bag\",\n        discount: 0,\n        gst: 28,\n        cess: 0,\n        freight: 0\n      });\n\n      gstHideInvoice();\n      document.getElementById(\"gstRecordsScreen\").style.display = \"none\";\n      gstCalculateInvoice();\n    }\n\n    function gstAmountInWords(num) {\n      if (num === 0) return \"Zero Rupees\";\n\n      const ones = [\"\", \"One\", \"Two\", \"Three\", \"Four\", \"Five\", \"Six\", \"Seven\", \"Eight\", \"Nine\", \"Ten\", \"Eleven\", \"Twelve\", \"Thirteen\", \"Fourteen\", \"Fifteen\", \"Sixteen\", \"Seventeen\", \"Eighteen\", \"Nineteen\"];\n      const tens = [\"\", \"\", \"Twenty\", \"Thirty\", \"Forty\", \"Fifty\", \"Sixty\", \"Seventy\", \"Eighty\", \"Ninety\"];\n\n      function twoDigits(n) {\n        if (n < 20) return ones[n];\n        return tens[Math.floor(n \/ 10)] + (n % 10 ? \" \" + ones[n % 10] : \"\");\n      }\n\n      function threeDigits(n) {\n        let word = \"\";\n        if (n > 99) {\n          word += ones[Math.floor(n \/ 100)] + \" Hundred \";\n          n = n % 100;\n        }\n        if (n > 0) word += twoDigits(n);\n        return word.trim();\n      }\n\n      let words = \"\";\n      const crore = Math.floor(num \/ 10000000);\n      num %= 10000000;\n\n      const lakh = Math.floor(num \/ 100000);\n      num %= 100000;\n\n      const thousand = Math.floor(num \/ 1000);\n      num %= 1000;\n\n      const hundred = num;\n\n      if (crore) words += threeDigits(crore) + \" Crore \";\n      if (lakh) words += threeDigits(lakh) + \" Lakh \";\n      if (thousand) words += threeDigits(thousand) + \" Thousand \";\n      if (hundred) words += threeDigits(hundred) + \" \";\n\n      return words.trim() + \" Rupees\";\n    }\n\n    document.addEventListener(\"DOMContentLoaded\", function() {\n      gstPopulateStates();\n      gstSetDate();\n      gstDisplayLogo();\n\n      gstAddItem({\n        code: \"8544\",\n        name: \"Cable\",\n        cost: 1000,\n        qty: 1,\n        uom: \"Meter\",\n        discount: 0,\n        gst: 18,\n        cess: 0,\n        freight: 0\n      });\n\n      gstAddItem({\n        code: \"2523\",\n        name: \"Cement\",\n        cost: 500,\n        qty: 1,\n        uom: \"Bag\",\n        discount: 0,\n        gst: 28,\n        cess: 0,\n        freight: 0\n      });\n\n      gstCalculateInvoice();\n      gstRenderRecords();\n    });\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>GST Invoice Calculator Add GST items with HSN\/SAC, cost, quantity, UoM, freight, discount, GST rate and cess. Upload logo, view invoice, download PDF, save invoice records and reopen saved invoices. Upload Logo Logo will appear on top-left side of invoice and PDF. Invoice GST will be calculated as CGST + SGST for same-state supply and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-477","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/comments?post=477"}],"version-history":[{"count":6,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/477\/revisions"}],"predecessor-version":[{"id":484,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/477\/revisions\/484"}],"wp:attachment":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/media?parent=477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}