Files
John eead8f5ffd
SAP-ERP Portal CI/CD / build (push) Successful in 3m57s
sale order
2026-10-05 18:45:17 +05:30

701 lines
34 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script src="/auth-guard.js?v=4"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GSTR Reports | MITRA ERP Portal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Space Grotesk',sans-serif;background:#f0f2f5;color:#1a1a2e;min-height:100vh}
.pg{padding:20px 24px}
.hdr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.hdr h1{font-size:20px;font-weight:700;color:#1a1a2e}
.hdr h1 span{color:#047e7e}
.btn{height:36px;padding:0 16px;border-radius:8px;font-size:12px;font-weight:700;font-family:inherit;border:none;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-primary{background:#047e7e;color:#fff}.btn-primary:hover{background:#035b5b}
.btn-primary:disabled{background:#b0bec5;cursor:not-allowed;opacity:.7}
.btn-outline{background:#fff;color:#047e7e;border:1.5px solid #047e7e}.btn-outline:hover{background:#f0fafa}
.btn-tcs{background:#1d4ed8;color:#fff}.btn-tcs:hover{background:#1e40af}
.btn-tcs:disabled{background:#b0bec5;cursor:not-allowed;opacity:.7}
/* ── Card ── */
.card{background:#fff;border-radius:14px;box-shadow:0 1px 8px rgba(0,0,0,.08);overflow:hidden}
/* ── Filter bar ── */
.filter-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid #e8eaed;background:#fff}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:10px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.6px}
.fg input,.fg select{height:36px;border:1.5px solid #dde1e7;border-radius:8px;padding:0 12px;font-size:13px;font-family:inherit;color:#1a1a2e;background:#fff;outline:none;transition:border-color .15s}
.fg input:focus,.fg select:focus{border-color:#047e7e;box-shadow:0 0 0 3px rgba(4,126,126,.08)}
/* ── Summary chips ── */
.summary-chips{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid #e8eaed;background:#f8fafb}
.chip{background:#fff;border:1.5px solid #c8e6e6;border-radius:10px;padding:6px 14px;font-size:11px;font-weight:600;color:#047e7e;min-width:80px}
.chip span{font-size:15px;font-weight:700;display:block;color:#1a1a2e;margin-top:1px}
/* ── Tabs ── */
.tabs{display:flex;justify-content:space-evenly;border-bottom:2px solid #e8eaed;background:#fff}
.tab{flex:1;text-align:center;padding:14px 10px;font-size:12px;font-weight:700;color:#6b7280;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .15s;letter-spacing:.2px}
.tab:hover{color:#047e7e;background:#f8fffe}
.tab.active{color:#047e7e;border-bottom-color:#047e7e;background:#f5fefe}
.tab-badge{display:inline-block;background:#e0f4f4;color:#047e7e;border-radius:10px;padding:1px 7px;font-size:10px;font-weight:700;margin-left:5px}
.tab.active .tab-badge{background:#047e7e;color:#fff}
/* ── Search bar ── */
.search-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid #e8eaed;background:#fafbfc}
.search-bar input{flex:1;height:34px;border:1.5px solid #dde1e7;border-radius:8px;padding:0 12px 0 34px;font-size:12px;font-family:inherit;color:#1a1a2e;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;outline:none;transition:border-color .15s}
.search-bar input:focus{border-color:#047e7e;box-shadow:0 0 0 3px rgba(4,126,126,.08)}
.srch-count{font-size:11px;color:#9ca3af;white-space:nowrap;flex-shrink:0;font-weight:600}
/* ── Tab panes ── */
.tab-content{display:none}
.tab-content.active{display:block}
/* ── Table ── */
.tbl-wrap{overflow-x:auto;overflow-y:auto;max-height:54vh}
.tbl-wrap::-webkit-scrollbar{height:7px;width:7px}
.tbl-wrap::-webkit-scrollbar-track{background:#f1f3f5}
.tbl-wrap::-webkit-scrollbar-thumb{background:#c1c7ce;border-radius:4px}
.tbl-wrap::-webkit-scrollbar-thumb:hover{background:#9ca3af}
table{border-collapse:collapse;min-width:100%}
thead th{background:#f0f4f8;color:#4b5563;font-weight:700;padding:10px 12px;text-align:left;white-space:nowrap;position:sticky;top:0;z-index:2;border-bottom:2px solid #d1dae3;font-size:10px;text-transform:uppercase;letter-spacing:.5px}
tbody tr{border-bottom:1px solid #f0f2f4;transition:background .1s;cursor:pointer}
tbody tr:hover{background:#edfafa}
tbody tr.selected{background:#d9f5f5}
tbody td{padding:9px 12px;white-space:nowrap;color:#374151;font-size:12px}
tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
tbody td.trunc{max-width:160px;overflow:hidden;text-overflow:ellipsis}
tbody td.trunc-sm{max-width:110px;overflow:hidden;text-overflow:ellipsis}
.empty{text-align:center;padding:56px 20px;color:#9ca3af;font-size:13px}
/* ── Status bar ── */
.status-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#f8fafb;border-top:1px solid #e8eaed;font-size:12px;color:#6b7280;border-radius:0 0 14px 14px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;flex-shrink:0}
.status-dot.ok{background:#10b981}.status-dot.err{background:#ef4444}
.status-dot.loading{background:#f59e0b;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* ── Badges ── */
.badge-b2b{background:#dbeafe;color:#1d4ed8}
.badge-b2c{background:#fef3c7;color:#92400e}
.badge-exp{background:#d1fae5;color:#065f46}
.badge-de{background:#ede9fe;color:#5b21b6}
.badge{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700}
/* ── Row detail panel ── */
.detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:500;display:none;backdrop-filter:blur(2px)}
.detail-overlay.show{display:block}
.detail-panel{position:fixed;top:0;right:-420px;width:420px;height:100vh;background:#fff;z-index:501;box-shadow:-4px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;transition:right .28s cubic-bezier(.4,0,.2,1)}
.detail-panel.show{right:0}
.detail-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e8eaed;background:#f8fafb;flex-shrink:0}
.detail-header h3{font-size:14px;font-weight:700;color:#1a1a2e}
.detail-header .row-num{font-size:11px;color:#9ca3af;margin-top:2px}
.detail-close{width:32px;height:32px;border:none;background:#edf2f7;border-radius:8px;cursor:pointer;font-size:18px;color:#6b7280;display:flex;align-items:center;justify-content:center;transition:all .15s}
.detail-close:hover{background:#e2e8f0;color:#1a1a2e}
.detail-body{flex:1;overflow-y:auto;padding:16px 20px}
.detail-body::-webkit-scrollbar{width:4px}.detail-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}
.detail-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #f3f4f6;align-items:center}
.detail-row:last-child{border-bottom:none}
.detail-edit-input{flex:1;height:32px;border:1.5px solid #dde1e7;border-radius:6px;padding:0 10px;font-size:12px;font-family:inherit;color:#1a1a2e;outline:none;width:100%;box-sizing:border-box}
.detail-edit-input:focus{border-color:#047e7e;box-shadow:0 0 0 3px rgba(4,126,126,.08)}
.detail-edit-input.num{text-align:right;font-variant-numeric:tabular-nums}
.detail-footer{display:flex;gap:8px;padding:14px 20px;border-top:1px solid #e8eaed;background:#f8fafb;flex-shrink:0}
.detail-footer .btn{flex:1;justify-content:center;height:34px}
.badge-edited{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;color:#b45309;background:#fef3c7;border-radius:5px;padding:2px 7px;letter-spacing:.3px}
.badge-added{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;color:#15803d;background:#dcfce7;border-radius:5px;padding:2px 7px;letter-spacing:.3px}
.detail-key{font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;width:110px;flex-shrink:0;padding-top:1px}
.detail-val{font-size:13px;color:#1a1a2e;font-weight:500;word-break:break-all;flex:1}
.detail-val.num{font-variant-numeric:tabular-nums}
/* ── Toast ── */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateY(20px);opacity:0;transition:all .3s;pointer-events:none;max-width:360px}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{background:#10b981}.toast.error{background:#ef4444}.toast.info{background:#3b82f6}
</style>
<link rel="stylesheet" href="/theme.css?v=3"/>
</head>
<body>
<script src="/sidebar.js?v=31"></script>
<div class="pg">
<div class="hdr">
<h1><span>GSTR Reports</span></h1>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<button class="btn btn-outline" id="btnDownload" disabled>Download Excel</button>
<select id="uploadSection" style="height:36px;border:1.5px solid #dde1e7;border-radius:8px;padding:0 12px;font-size:13px;font-family:inherit;color:#1a1a2e;background:#fff;outline:none;min-width:150px">
<option value="all">All Sections</option>
<option value="b2b">B2B Only</option>
<option value="b2cl">B2CL Only</option>
<option value="b2cs">B2CS Only</option>
<option value="export">EXP Only</option>
<option value="hsn">HSN Only</option>
<option value="docs">Docs Issued Only</option>
</select>
<button class="btn btn-tcs" id="btnUpload" disabled>Upload to TCS</button>
</div>
</div>
<div class="card">
<!-- Filter bar -->
<div class="filter-bar">
<div class="fg">
<label>From Date</label>
<input type="date" id="fromDate">
</div>
<div class="fg">
<label>To Date</label>
<input type="date" id="toDate">
</div>
<div class="fg">
<label>TCS Period (MMYYYY)</label>
<input type="text" id="tcsPeriod" placeholder="e.g. 012026" maxlength="6" style="width:140px">
</div>
<button class="btn btn-primary" id="btnLoad">Load Data</button>
</div>
<!-- Summary chips -->
<div class="summary-chips" id="summaryChips" style="display:none">
<div class="chip">B2B Rows<span id="cntB2b">—</span></div>
<div class="chip">B2CL Rows<span id="cntB2cl">—</span></div>
<div class="chip">B2CS Rows<span id="cntB2cs">—</span></div>
<div class="chip">Export<span id="cntExp">—</span></div>
<div class="chip">HSN Lines<span id="cntHsn">—</span></div>
<div class="chip">Doc Types<span id="cntDocs">—</span></div>
</div>
<!-- Tabs -->
<div class="tabs" id="tabBar">
<div class="tab active" data-tab="b2b">B2B <span class="tab-badge" id="tb2b">0</span></div>
<div class="tab" data-tab="b2cl">B2CL <span class="tab-badge" id="tb2cl">0</span></div>
<div class="tab" data-tab="b2cs">B2CS <span class="tab-badge" id="tb2cs">0</span></div>
<div class="tab" data-tab="export">Direct Export <span class="tab-badge" id="texp">0</span></div>
<div class="tab" data-tab="hsn">HSN Summary <span class="tab-badge" id="thsn">0</span></div>
<div class="tab" data-tab="docs">Docs Issued <span class="tab-badge" id="tdocs">0</span></div>
</div>
<!-- Search bar -->
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Search across all columns in active tab…">
<span class="srch-count" id="srchCount"></span>
<button class="btn btn-outline" id="btnAddRow" style="height:34px" disabled>+ Add Row</button>
</div>
<!-- Tab panes -->
<div class="tab-content active" id="pane-b2b">
<div class="tbl-outer"><div class="tbl-wrap"><div class="empty" id="empty-b2b">Load data to view B2B invoices</div><table id="tbl-b2b" style="display:none"><thead></thead><tbody></tbody></table></div></div>
</div>
<div class="tab-content" id="pane-b2cl">
<div class="tbl-outer"><div class="tbl-wrap"><div class="empty" id="empty-b2cl">Load data to view B2CL invoices</div><table id="tbl-b2cl" style="display:none"><thead></thead><tbody></tbody></table></div></div>
</div>
<div class="tab-content" id="pane-b2cs">
<div class="tbl-outer"><div class="tbl-wrap"><div class="empty" id="empty-b2cs">Load data to view B2CS invoices</div><table id="tbl-b2cs" style="display:none"><thead></thead><tbody></tbody></table></div></div>
</div>
<div class="tab-content" id="pane-export">
<div class="tbl-outer"><div class="tbl-wrap"><div class="empty" id="empty-export">Load data to view Export invoices</div><table id="tbl-export" style="display:none"><thead></thead><tbody></tbody></table></div></div>
</div>
<div class="tab-content" id="pane-hsn">
<div class="tbl-outer"><div class="tbl-wrap"><div class="empty" id="empty-hsn">Load data to view HSN summary</div><table id="tbl-hsn" style="display:none"><thead></thead><tbody></tbody></table></div></div>
</div>
<div class="tab-content" id="pane-docs">
<div class="tbl-outer"><div class="tbl-wrap"><div class="empty" id="empty-docs">Load data to view Documents Issued summary</div><table id="tbl-docs" style="display:none"><thead></thead><tbody></tbody></table></div></div>
</div>
<div class="status-bar">
<div class="status-dot" id="statusDot"></div>
<span id="statusMsg">Select date range and click Load Data</span>
</div>
</div>
</div>
<div class="toast" id="toast"></div>
<!-- Row detail panel -->
<div class="detail-overlay" id="detailOverlay"></div>
<div class="detail-panel" id="detailPanel">
<div class="detail-header">
<div>
<h3 id="detailTitle">Row Details</h3>
<div class="row-num" id="detailRowNum"></div>
</div>
<button class="detail-close" id="detailClose">&#x2715;</button>
</div>
<div class="detail-body" id="detailBody"></div>
<div class="detail-footer" id="detailFooterView">
<button class="btn btn-outline" id="detailEditBtn">Edit Row</button>
</div>
<div class="detail-footer" id="detailFooterEdit" style="display:none">
<button class="btn btn-outline" id="detailDeleteBtn" style="color:#dc2626;border-color:#dc2626">Delete Row</button>
<button class="btn btn-outline" id="detailCancelBtn">Cancel</button>
<button class="btn btn-primary" id="detailSaveBtn">Save Changes</button>
</div>
</div>
<script>
(function(){
const tok=sessionStorage.getItem('portal_token');
if(!tok){window.location.href='/';return;}
// ── column definitions ────────────────────────────────────────────────────
const COLS={
b2b:[
{k:'trans_type_code',l:'Type',fmt:typeBadge},
{k:'fp',l:'FP'},
{k:'cp_gstin',l:'GSTIN',cls:'trunc-sm'},
{k:'cp_gstin_name',l:'Party',cls:'trunc'},
{k:'invoice_no',l:'Invoice No',cls:'trunc-sm'},
{k:'invoice_dt',l:'Date'},
{k:'invoice_val',l:'Value',cls:'num',fmt:fmtNum},
{k:'rate_of_tax',l:'Rate%',cls:'num'},
{k:'taxable_val',l:'Taxable',cls:'num',fmt:fmtNum},
{k:'cgst_amnt',l:'CGST',cls:'num',fmt:fmtNum},
{k:'sgst_amnt',l:'SGST',cls:'num',fmt:fmtNum},
{k:'igst_amnt',l:'IGST',cls:'num',fmt:fmtNum},
{k:'pos',l:'POS'},{k:'rchrg',l:'RC'},
],
b2cl:[
{k:'trans_type_code',l:'Type',fmt:typeBadge},
{k:'fp',l:'FP'},
{k:'invoice_no',l:'Invoice No',cls:'trunc-sm'},
{k:'invoice_dt',l:'Date'},
{k:'invoice_val',l:'Value',cls:'num',fmt:fmtNum},
{k:'rate_of_tax',l:'Rate%',cls:'num'},
{k:'taxable_val',l:'Taxable',cls:'num',fmt:fmtNum},
{k:'cgst_amnt',l:'CGST',cls:'num',fmt:fmtNum},
{k:'sgst_amnt',l:'SGST',cls:'num',fmt:fmtNum},
{k:'igst_amnt',l:'IGST',cls:'num',fmt:fmtNum},
{k:'pos',l:'POS'},
],
b2cs:[
{k:'trans_type_code',l:'Type',fmt:typeBadge},
{k:'fp',l:'FP'},
{k:'invoice_no',l:'Invoice No',cls:'trunc-sm'},
{k:'invoice_dt',l:'Date'},
{k:'invoice_val',l:'Value',cls:'num',fmt:fmtNum},
{k:'rate_of_tax',l:'Rate%',cls:'num'},
{k:'taxable_val',l:'Taxable',cls:'num',fmt:fmtNum},
{k:'cgst_amnt',l:'CGST',cls:'num',fmt:fmtNum},
{k:'sgst_amnt',l:'SGST',cls:'num',fmt:fmtNum},
{k:'igst_amnt',l:'IGST',cls:'num',fmt:fmtNum},
{k:'pos',l:'POS'},
],
export:[
{k:'trans_type_code',l:'Type',fmt:typebadge2},
{k:'fp',l:'FP'},
{k:'export_type_desc',l:'Exp Type'},
{k:'invoice_no',l:'Invoice No',cls:'trunc-sm'},
{k:'invoice_dt',l:'Date'},
{k:'invoice_val',l:'Value',cls:'num',fmt:fmtNum},
{k:'rate_of_tax',l:'Rate%',cls:'num'},
{k:'taxable_val',l:'Taxable',cls:'num',fmt:fmtNum},
],
hsn:[
{k:'hsn_sc',l:'HSN/SAC'},
{k:'gstr1Desc',l:'Type'},
{k:'section',l:'Section'},
{k:'ack_sr_no',l:'Sl.No.',cls:'num'},
{k:'num',l:'Num',cls:'num'},
{k:'uqc',l:'UQC'},
{k:'qty',l:'Qty',cls:'num',fmt:v=>fmtNum(v,3)},
{k:'txval',l:'Taxable',cls:'num',fmt:fmtNum},
{k:'iamt',l:'IGST',cls:'num',fmt:fmtNum},
{k:'camt',l:'CGST',cls:'num',fmt:fmtNum},
{k:'samt',l:'SGST',cls:'num',fmt:fmtNum},
{k:'tcs',l:'TCS',cls:'num',fmt:fmtNum},
{k:'rate_of_tax',l:'Rate%',cls:'num'},
],
docs:[
{k:'fp',l:'FP'},
{k:'DocumentType',l:'Doc Type'},
{k:'Series',l:'Series'},
{k:'sr_from',l:'From',cls:'trunc-sm'},
{k:'sr_to',l:'To',cls:'trunc-sm'},
{k:'totnum',l:'Total',cls:'num'},
{k:'canceled',l:'Cancelled',cls:'num'},
{k:'net_issue',l:'Net Issued',cls:'num'},
],
};
function typeBadge(v){const m={B2B:'badge-b2b',B2C:'badge-b2c',EXP:'badge-exp',DE:'badge-de'};return`<span class="badge ${m[v]||''}">${v||''}</span>`;}
function typebadge2(v){return`<span class="badge badge-exp">${v||''}</span>`;}
function fmtNum(v,dec=2){if(v==null||v==='')return'';return Number(v).toLocaleString('en-IN',{minimumFractionDigits:dec,maximumFractionDigits:dec});}
// ── state ─────────────────────────────────────────────────────────────────
const state={b2b:[],b2cl:[],b2cs:[],export:[],hsn:[],docs:[]};
let activeTab='b2b';
let searchTerm='';
// ── DOM refs ──────────────────────────────────────────────────────────────
const fromDate=document.getElementById('fromDate');
const toDate=document.getElementById('toDate');
const tcsPeriod=document.getElementById('tcsPeriod');
const btnLoad=document.getElementById('btnLoad');
const btnDownload=document.getElementById('btnDownload');
const btnUpload=document.getElementById('btnUpload');
const uploadSection=document.getElementById('uploadSection');
const statusDot=document.getElementById('statusDot');
const statusMsg=document.getElementById('statusMsg');
const summaryChips=document.getElementById('summaryChips');
const searchInput=document.getElementById('searchInput');
const srchCount=document.getElementById('srchCount');
// default to current month
(function(){
const now=new Date();
const y=now.getFullYear(),m=now.getMonth();
const from=new Date(y,m,1),to=new Date(y,m+1,0);
fromDate.value=from.toISOString().slice(0,10);
toDate.value=to.toISOString().slice(0,10);
const mm=String(m+1).padStart(2,'0');
tcsPeriod.value=`${mm}${y}`;
})();
// ── tab switching ─────────────────────────────────────────────────────────
document.getElementById('tabBar').addEventListener('click',e=>{
const t=e.target.closest('.tab');
if(!t)return;
document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(x=>x.classList.remove('active'));
t.classList.add('active');
activeTab=t.dataset.tab;
document.getElementById('pane-'+activeTab).classList.add('active');
applySearch();
});
// ── search ────────────────────────────────────────────────────────────────
searchInput.addEventListener('input',()=>{
searchTerm=searchInput.value.trim().toLowerCase();
applySearch();
});
function applySearch(){
const rows=state[activeTab]||[];
const filtered=filterRows(rows);
renderTable(activeTab,filtered,true);
if(searchTerm&&rows.length){
srchCount.textContent=`${filtered.length} of ${rows.length}`;
} else {
srchCount.textContent=rows.length?`${rows.length} rows`:'';
}
}
function filterRows(rows){
if(!searchTerm)return rows;
return rows.filter(r=>Object.values(r).some(v=>v!=null&&String(v).toLowerCase().includes(searchTerm)));
}
// ── helpers ────────────────────────────────────────────────────────────────
function setStatus(msg,state){
statusMsg.textContent=msg;
statusDot.className='status-dot'+(state?' '+state:'');
}
function showToast(msg,type='info'){
const t=document.getElementById('toast');
t.textContent=msg;t.className=`toast ${type} show`;
setTimeout(()=>t.classList.remove('show'),3500);
}
function renderTable(tabKey,rows,isSearch=false){
const cols=COLS[tabKey];
const tbl=document.getElementById('tbl-'+tabKey);
const empty=document.getElementById('empty-'+tabKey);
if(!rows||!rows.length){
tbl.style.display='none';
empty.textContent=isSearch?'No matching rows':'No data for selected period';
empty.style.display='block';
return;
}
tbl.querySelector('thead').innerHTML=`<tr>${cols.map(c=>`<th>${c.l}</th>`).join('')}</tr>`;
tbl.querySelector('tbody').innerHTML=rows.map((r,i)=>{
const bg=r._added?'#ecfdf5':(r._edited?'#fffbeb':'');
return`<tr data-idx="${i}"${bg?` style="background:${bg}"`:''}>${cols.map((c,ci)=>{
const v=r[c.k];
const cell=c.fmt?c.fmt(v):escHtml(v==null?'':String(v));
const badge=ci===0?(r._added?'<span class="badge-added">NEW</span>':(r._edited?'<span class="badge-edited">EDITED</span>':'')):'';
return`<td${c.cls?` class="${c.cls}"`:''}>${cell}${badge}</td>`;
}).join('')}</tr>`;
}).join('');
tbl.style.display='table';
empty.style.display='none';
// row click → detail panel
tbl.querySelector('tbody').addEventListener('click',e=>{
const tr=e.target.closest('tr');
if(!tr)return;
document.querySelectorAll('tbody tr.selected').forEach(r=>r.classList.remove('selected'));
tr.classList.add('selected');
openDetail(tabKey,rows[+tr.dataset.idx],+tr.dataset.idx);
});
}
function escHtml(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
// ── Row detail panel ──────────────────────────────────────────────────────
const detailOverlay=document.getElementById('detailOverlay');
const detailPanel=document.getElementById('detailPanel');
const detailBody=document.getElementById('detailBody');
const detailTitle=document.getElementById('detailTitle');
const detailRowNum=document.getElementById('detailRowNum');
const detailFooterView=document.getElementById('detailFooterView');
const detailFooterEdit=document.getElementById('detailFooterEdit');
const detailEditBtn=document.getElementById('detailEditBtn');
const detailCancelBtn=document.getElementById('detailCancelBtn');
const detailSaveBtn=document.getElementById('detailSaveBtn');
const detailDeleteBtn=document.getElementById('detailDeleteBtn');
const btnAddRow=document.getElementById('btnAddRow');
const tabLabels={b2b:'B2B Invoice',b2cl:'B2CL Invoice',b2cs:'B2CS Invoice',export:'Export Invoice',hsn:'HSN Line',docs:'Document Issued'};
let curTab=null,curRow=null,curIdx=null;
function renderDetailView(){
const cols=COLS[curTab];
detailBody.innerHTML=cols.map(c=>{
const v=curRow[c.k];
const disp=v==null||v===''?'—':(c.fmt?v:String(v));
const isNum=!!c.cls?.includes('num');
const formatted=isNum&&v!=null&&v!==''?fmtNum(v):escHtml(String(disp));
return`<div class="detail-row"><div class="detail-key">${c.l}</div><div class="detail-val${isNum?' num':''}">${formatted}</div></div>`;
}).join('');
detailFooterView.style.display='flex';
detailFooterEdit.style.display='none';
}
function renderDetailEdit(){
const cols=COLS[curTab];
detailBody.innerHTML=cols.map(c=>{
const v=curRow[c.k];
const isNum=!!c.cls?.includes('num');
const val=v==null?'':String(v);
return`<div class="detail-row"><div class="detail-key">${c.l}</div>`
+`<input class="detail-edit-input${isNum?' num':''}" data-key="${c.k}" data-num="${isNum?'1':'0'}" value="${escHtml(val)}"></div>`;
}).join('');
detailFooterView.style.display='none';
detailFooterEdit.style.display='flex';
}
detailEditBtn.addEventListener('click',()=>renderDetailEdit());
detailCancelBtn.addEventListener('click',()=>renderDetailView());
detailSaveBtn.addEventListener('click',()=>{
detailBody.querySelectorAll('.detail-edit-input').forEach(inp=>{
const key=inp.dataset.key;
const raw=inp.value.trim();
if(inp.dataset.num==='1'){
curRow[key]=raw===''?null:(isNaN(+raw)?raw:+raw);
} else {
curRow[key]=raw;
}
});
if(!curRow._added) curRow._edited=true;
showToast('Row saved locally — re-download/upload to apply','success');
renderDetailView();
applySearch(); // refresh table to reflect edited/added values
});
detailDeleteBtn.addEventListener('click',()=>{
if(!confirm('Remove this row from the current dataset?'))return;
const arr=state[curTab];
const realIdx=arr.indexOf(curRow);
if(realIdx>-1) arr.splice(realIdx,1);
closeDetail();
applySearch();
showToast('Row removed locally — re-download/upload to apply','success');
});
// ── Add row ───────────────────────────────────────────────────────────────
btnAddRow.addEventListener('click',()=>{
const cols=COLS[activeTab];
const blank={};
cols.forEach(c=>{ blank[c.k]=c.cls?.includes('num')?0:''; });
blank._added=true;
state[activeTab].push(blank);
applySearch();
const idx=filterRows(state[activeTab]).indexOf(blank);
openDetail(activeTab,blank,idx<0?state[activeTab].length-1:idx);
renderDetailEdit();
});
function openDetail(tabKey,rowData,rowIndex){
curTab=tabKey;curRow=rowData;curIdx=rowIndex;
const badge=rowData._added?'<span class="badge-added">NEW</span>':(rowData._edited?'<span class="badge-edited">EDITED</span>':'');
detailTitle.innerHTML=(tabLabels[tabKey]||'Row Details')+badge;
detailRowNum.textContent=`Row ${rowIndex+1}`;
renderDetailView();
detailOverlay.classList.add('show');
detailPanel.classList.add('show');
}
function closeDetail(){
detailOverlay.classList.remove('show');
detailPanel.classList.remove('show');
document.querySelectorAll('tbody tr.selected').forEach(r=>r.classList.remove('selected'));
}
document.getElementById('detailClose').addEventListener('click',closeDetail);
detailOverlay.addEventListener('click',closeDetail);
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeDetail();});
// ── load data ─────────────────────────────────────────────────────────────
btnLoad.addEventListener('click', loadData);
async function loadData(){
const from=fromDate.value,to=toDate.value;
if(!from||!to){showToast('Select from and to dates','error');return;}
btnLoad.disabled=true;
setStatus('Loading all sections…','loading');
summaryChips.style.display='none';
const hdrs={'Authorization':'Bearer '+tok};
const params=`from=${from}&to=${to}`;
try {
const [r1,r2,r3,r4,r5,r6]=await Promise.all([
fetch(`/api/gstr1/b2b?${params}`,{headers:hdrs}).then(r=>r.json()),
fetch(`/api/gstr1/b2cl?${params}`,{headers:hdrs}).then(r=>r.json()),
fetch(`/api/gstr1/b2cs?${params}`,{headers:hdrs}).then(r=>r.json()),
fetch(`/api/gstr1/export?${params}`,{headers:hdrs}).then(r=>r.json()),
fetch(`/api/gstr1/hsn?${params}`,{headers:hdrs}).then(r=>r.json()),
fetch(`/api/gstr1/docs?${params}`,{headers:hdrs}).then(r=>r.json()),
]);
const errs=[r1,r2,r3,r4,r5,r6].filter(r=>!r.success).map(r=>r.message);
if(errs.length){setStatus('Errors: '+errs[0],'err');showToast(errs[0],'error');btnLoad.disabled=false;return;}
state.b2b=r1.data||[];state.b2cl=r2.data||[];state.b2cs=r3.data||[];
state.export=r4.data||[];state.hsn=r5.data||[];state.docs=r6.data||[];
searchInput.value='';searchTerm='';srchCount.textContent='';
['b2b','b2cl','b2cs','export','hsn','docs'].forEach(k=>renderTable(k,state[k]));
// update badges
document.getElementById('tb2b').textContent=state.b2b.length;
document.getElementById('tb2cl').textContent=state.b2cl.length;
document.getElementById('tb2cs').textContent=state.b2cs.length;
document.getElementById('texp').textContent=state.export.length;
document.getElementById('thsn').textContent=state.hsn.length;
document.getElementById('tdocs').textContent=state.docs.length;
document.getElementById('cntB2b').textContent=state.b2b.length;
document.getElementById('cntB2cl').textContent=state.b2cl.length;
document.getElementById('cntB2cs').textContent=state.b2cs.length;
document.getElementById('cntExp').textContent=state.export.length;
document.getElementById('cntHsn').textContent=state.hsn.length;
document.getElementById('cntDocs').textContent=state.docs.length;
summaryChips.style.display='flex';
const total=state.b2b.length+state.b2cl.length+state.b2cs.length+state.export.length+state.hsn.length+state.docs.length;
setStatus(`Loaded ${total} rows for ${from} to ${to}`,'ok');
btnDownload.disabled=false;
btnUpload.disabled=false;
btnAddRow.disabled=false;
showToast('Data loaded successfully','success');
} catch(e){
setStatus('Failed: '+e.message,'err');
showToast(e.message,'error');
} finally {
btnLoad.disabled=false;
}
}
// ── build workbook ─────────────────────────────────────────────────────────
function buildWorkbook(){
const wb=XLSX.utils.book_new();
function toSheet(rows,cols){
if(!rows.length) return XLSX.utils.aoa_to_sheet([cols.map(c=>c.l)]);
const ws=XLSX.utils.json_to_sheet(rows.map(r=>{
const obj={};
cols.forEach(c=>{obj[c.l]=r[c.k]??'';});
return obj;
}),{header:cols.map(c=>c.l)});
return ws;
}
const plainCols=k=>COLS[k].map(c=>({k:c.k,l:c.l}));
XLSX.utils.book_append_sheet(wb, toSheet(state.b2b, plainCols('b2b')), 'B2B');
XLSX.utils.book_append_sheet(wb, toSheet(state.b2cl, plainCols('b2cl')), 'b2c(l)');
XLSX.utils.book_append_sheet(wb, toSheet(state.b2cs, plainCols('b2cs')), 'b2c(s)');
XLSX.utils.book_append_sheet(wb, toSheet(state.export,plainCols('export')),'direct export');
XLSX.utils.book_append_sheet(wb, toSheet(state.hsn, plainCols('hsn')), 'HSN summary');
XLSX.utils.book_append_sheet(wb, toSheet(state.docs, plainCols('docs')), 'Documents Issued Summary');
return wb;
}
// ── download ───────────────────────────────────────────────────────────────
btnDownload.addEventListener('click',()=>{
try{
const wb=buildWorkbook();
const from=fromDate.value.replace(/-/g,'');
const to=toDate.value.replace(/-/g,'');
XLSX.writeFile(wb,`GSTR1_${from}_${to}.xlsx`);
showToast('Excel downloaded','success');
}catch(e){showToast('Download failed: '+e.message,'error');}
});
// ── upload to TCS ──────────────────────────────────────────────────────────
const SECTION_LABELS = { all:'All Sections', b2b:'B2B', b2cl:'B2CL', b2cs:'B2CS', export:'EXP', hsn:'HSN', docs:'Docs Issued' };
btnUpload.addEventListener('click', async () => {
const period = tcsPeriod.value.trim();
if (!/^\d{6}$/.test(period)) { showToast('Enter valid period as MMYYYY','error'); return; }
const sel = uploadSection.value; // 'all' | 'b2b' | 'b2cl' | 'b2cs' | 'export' | 'hsn' | 'docs'
const label = SECTION_LABELS[sel] || sel;
// Build payload — for a single-section upload, only that section's array is sent
// (the others stay empty), so the backend only processes the chosen section.
const payload = {
period,
b2b: sel === 'all' || sel === 'b2b' ? state.b2b : [],
b2cl: sel === 'all' || sel === 'b2cl' ? state.b2cl : [],
b2cs: sel === 'all' || sel === 'b2cs' ? state.b2cs : [],
export: sel === 'all' || sel === 'export' ? state.export : [],
hsn: sel === 'all' || sel === 'hsn' ? state.hsn : [],
docs: sel === 'all' || sel === 'docs' ? state.docs : [],
};
const total = payload.b2b.length + payload.b2cl.length + payload.b2cs.length
+ payload.export.length + payload.hsn.length + payload.docs.length;
if (!total) { showToast(`No ${label} data to upload. Load data first.`,'error'); return; }
const confirmMsg = sel === 'all'
? `Upload all sections to TCS GSP for period ${period}?\n\n` +
`B2B: ${payload.b2b.length} | B2CL: ${payload.b2cl.length} | B2CS: ${payload.b2cs.length} | ` +
`EXP: ${payload.export.length} | HSN: ${payload.hsn.length} | DOCS: ${payload.docs.length}`
: `Upload ${label} only to TCS GSP for period ${period}?\n\nRows: ${total}`;
if (!confirm(confirmMsg)) return;
btnUpload.disabled = true;
setStatus(`Uploading ${label} to TCS GSP…`,'loading');
try {
const resp = await fetch('/api/gstr1/upload-tcs', {
method: 'POST',
headers: { 'Authorization': 'Bearer ' + tok, 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
const json = await resp.json();
if (json.success) {
const ack = json.data?.ackNo || json.data?.ackno || JSON.stringify(json.data);
setStatus(`Uploaded ✓ Ack No: ${ack}`, 'ok');
showToast(`${label} uploaded to TCS. Ack: ` + ack, 'success');
} else {
setStatus('Upload failed: ' + json.message, 'err');
showToast(json.message, 'error');
}
} catch(e) {
setStatus('Error: ' + e.message, 'err');
showToast(e.message, 'error');
} finally {
btnUpload.disabled = false;
}
});
})();
</script>
</body>
</html>